/* 패턴재하 검토 — 변수 칸 **안**의 모양.

   3단 틀(`shell.css`)은 손대지 않는다. 파일 단추(`.opick`)·절(`.osec`)·
   입력칸(`.ofield`)·요약(`.okpi`)·알림(`.oalert`)은 전부 본의 것이다.
   여기 있는 것은 레이어 칩 · 판별 하중 줄 · Case 조견표 셋뿐이다.

   `[hidden]` 을 따로 막는 이유는 `mgt-read.css` 와 같다 — `display` 를 준
   요소에 `hidden` 을 걸면 작가 규칙이 UA 의 `display:none` 을 이긴다. */

/* ── 차례 셋 ─────────────────────────────────────────────────────────
   mgt 읽기의 `.mr-step` 과 같은 상태 셋. DXF → 레이어 → 하중 순으로 열린다. */
.pl-step.is-locked > summary{pointer-events:none;opacity:.45}
.pl-step.is-locked > .osec-body{display:none}
.pl-step.is-current > summary .osec-n{background:var(--brand)}
.pl-step.is-done > summary .osec-n{background:var(--ok)}
.pl-step > .osec-body{gap:10px}
.pl-alert{margin:0}

/* ── 레이어 칩 ───────────────────────────────────────────────────────
   레이어 이름은 길다(`S-SLAB-OUTLINE-2F`). 변수 칸이 280px 라 줄바꿈을
   허락하고, 길이(m)는 잔글씨로 뒤에 붙인다. */
.pl-chips{display:flex;flex-wrap:wrap;gap:6px}
.pl-chips:empty::before{content:'레이어가 없습니다';font-size:12.5px;color:var(--ink-3)}
.pl-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;
  font-size:12px;border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;cursor:pointer;color:var(--ink-2)}
.pl-chip:hover{border-color:var(--ink-3);color:var(--ink)}
.pl-chip input{margin:0;accent-color:var(--brand)}
.pl-chip .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-chip .dim{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}

/* ── 판별 하중 — 네 칸 줄 ────────────────────────────────────────────
   계산기 판에서는 여섯 칸 표였다(판·넓이·l1×l2·D·L·Case). 변수 칸은
   280px 라 그대로는 안 들어간다 — **넓이와 l1×l2 는 그림이 답한다**
   (평면에서 판을 가리키면 작은 창이 뜬다). 여기 남는 것은 손이 만지는
   넷이다. 칸 폭은 내용이 정한다(`shell.css` 폭 규칙). */
.pl-head,.pl-row,.pl-all{display:grid;grid-template-columns:22px 1fr 1fr 58px;
  align-items:center;gap:5px}
.pl-head{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--ink-3);text-transform:uppercase;padding-bottom:5px;
  border-bottom:1px solid var(--line)}
.pl-head span{text-align:center}
.pl-head span:first-child{text-align:left}
.pl-row{padding:3px 0;border-bottom:1px solid var(--line-2)}
.pl-row > .i{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
/* 4변 지지가 아닌 판 — Case 칸이 잠기고 번호가 옅어진다. 조용히 빼지 않는다. */
.pl-row.no > .i{color:var(--warn)}
.pl-row input,.pl-row select,.pl-all input,.pl-all select{width:100%;min-width:0;
  font-family:var(--mono);font-size:11.5px;padding:3px 4px;
  border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--ink)}
.pl-row input:focus,.pl-row select:focus,
.pl-all input:focus,.pl-all select:focus{outline:2px solid var(--brand);
  outline-offset:-1px;border-color:var(--brand)}
.pl-row select:disabled{color:var(--ink-3);background:var(--bg-2)}

/* "모두" 줄 — 판이 스물이면 한 칸씩 넣는 것은 일이 아니다. 격자는 위와
   같게 두되 첫 칸이 글자라 왼쪽 정렬이다. */
.pl-all{margin-bottom:2px}
.pl-all > span{font-size:11px;color:var(--ink-3)}
/* **단추는 제 줄을 쓴다.** 격자가 네 칸인데 아이가 다섯이라 자동 배치가
   단추를 둘째 줄 첫 칸(22px)으로 밀었고, 거기서 "적/용" 이 한 글자씩
   세로로 쌓였다(2026-09-12, 브라우저로 실제로 열어 보고서야 드러났다).
   칸을 다섯으로 늘리면 280px 안에서 D·L 칸이 다시 좁아진다 — 줄을 준다. */
.pl-all .obtn{grid-column:1/-1;width:100%;margin-top:3px;padding:4px;font-size:11.5px}

.pl-run{margin-top:4px}

/* ── Case 조견표 ─────────────────────────────────────────────────────
   굵은 변이 연속(구속)된 변. 실제 판 치수 없이 정사각 아이콘 아홉으로
   한 번에 보여 준다 — 어느 Case 인지 고르는 일에는 비례가 필요 없다. */
.pl-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pl-case{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 3px 6px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg-2);font-family:var(--mono);font-size:10px;color:var(--ink-2)}
.pl-case svg{width:34px;height:34px}
.pl-case .f{fill:var(--bg-3);stroke:none}
.pl-case .e{stroke:var(--ink);fill:none;stroke-width:1}
.pl-case .e.fix{stroke-width:3}

/* ── 잔글씨 ────────────────────────────────────────────────────────── */
.pl-note{margin:16px 0 0;font-size:12px;line-height:1.8;color:var(--ink-3);
  border-top:1px solid var(--line-2);padding-top:12px;word-break:keep-all}
.pl-note:empty{display:none}
.pl-note b{font-weight:500;color:var(--ink-2)}
.pl-note code{font-family:var(--mono);font-size:11px;color:var(--ink-2)}

body.pl-dragover .opick .btn{background:var(--brand-d);border-color:var(--brand-d);
  outline:2px dashed var(--brand);outline-offset:3px}