/* 보이는 모양 — 영역 구별 · 단추 색 갈래 (7단계 UX 3회차, 적용 사례 1 개발자 2026-10-16). shell.css·layer2.css 뒤에 읽는다. 화면 모양만 바꾼다.
 *
 * 영역: 흐름 줄 · 조회 칸 · 단추 줄 · 목록(1차·2차·판 안) · 입력 판 · 대화 칸 — 영역마다 조금 굵은 줄(2px, 가운데 밝기)과 사이 띄움.
 * 단추 갈래 (data-tone — 보기 모델이 미션 레지스트리·기준선 효과로 정한다, 이름을 보고 짐작하지 않는다):
 *   조회(data-role=query·판의 조회)  꽉 찬 파랑      쓰기(write)  꽉 찬 초록      지우기(danger — 기준선에서 줄을 지우기만 한 단계)  꽉 찬 빨강
 *   읽기·공통 출력(read·plain)       테두리만        준비 중(pending) 점선·주황 글   쓸 수 없음(disabled) 회색 — 까닭은 마우스를 대면(title)
 * 꽉 찬 단추의 글은 흰 글 — 바탕과 대비 4.5:1 넘음 (밝음·어두움 같음). 누를 수 있는 곳은 마우스를 대면 밝아지고, 글쇠로 오면 굵은 테두리.
 */
:root{
  --region:#b3bccb; --region-gap:14px;
  --t-query:#2457c5; --t-write:#127556; --t-danger:#b42318; --t-plain-line:#6b7586; --t-pend:#8a5300; --t-pend-bg:#fff4df;
  --t-off-bg:#eceef2; --t-off-text:#7d8591; --focus:#f2a900;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --region:#4d5869; --t-plain-line:#8f9bad; --t-pend:#ffc266; --t-pend-bg:#352a14; --t-off-bg:#262d38; --t-off-text:#7f8a9a; }
}
:root[data-theme="dark"]{ --region:#4d5869; --t-plain-line:#8f9bad; --t-pend:#ffc266; --t-pend-bg:#352a14; --t-off-bg:#262d38; --t-off-text:#7f8a9a; }

/* ── 영역 ── */
.flowhd,.l2-bar,.l2-run{border:2px solid var(--region)}
.cond{border:2px solid var(--region);background:var(--panel);margin-bottom:var(--region-gap)}
.screen > .btns{border:2px solid var(--region);border-radius:var(--radius);background:var(--panel);padding:8px 10px;margin-bottom:var(--region-gap)}
.screen > .btns:empty{display:none}
.screen > section.list,.screen > .pages{border:2px solid var(--region);border-radius:var(--radius);background:var(--panel);padding:10px 12px}
.screen > section.list{margin-top:var(--region-gap)}
.screen > section.list[data-step="1"]{border-color:color-mix(in srgb,var(--region) 55%,var(--accent))}
.screen > section.list .tbl{border-width:1px}
.inpanel{border-left:3px solid var(--region)}
.inpanel section.list.dlglist{border:2px solid var(--region);border-radius:var(--radius);padding:8px 10px;margin-top:12px}
.inpanel form.dlg{border:2px solid var(--region);border-radius:var(--radius);padding:10px 12px;margin-top:12px}
.inpanel > .btns,.inpanel .btns{margin-top:12px}
.promptbar{border-top:2px solid var(--region)}
.ctx{border:2px solid var(--region)}
.card{border-width:2px;border-color:var(--region)}

/* ── 단추 색 갈래 ── */
.btn{border-width:1.5px;border-color:var(--t-plain-line);font-weight:500}
.btn.btn[data-tone="write"]{background:var(--t-write);border-color:var(--t-write);color:#fff}
.btn.btn[data-tone="danger"]{background:var(--t-danger);border-color:var(--t-danger);color:#fff}
.btn[data-tone="read"],.btn[data-tone="plain"]{background:var(--panel);border-color:var(--t-plain-line);color:var(--text)}
.btn.pri,.btn.btn[data-role="query"],.btn.btn[data-tone="query"]{background:var(--t-query);border-color:var(--t-query);color:#fff}
.btn.btn[data-tone="pending"]{background:var(--t-pend-bg);border:1.5px dashed var(--t-pend);color:var(--t-pend)}
.btn .pd,.btn.pri .pd,.btn[data-tone] .pd{color:inherit;opacity:.9}
.btn:hover:not([disabled]){filter:brightness(1.12)}
.btn[data-tone="read"]:hover:not([disabled]),.btn[data-tone="plain"]:hover:not([disabled]),.btn:not([data-tone]):not(.pri):hover:not([disabled]){background:var(--chip);filter:none}
.btn:focus-visible,.ctx button:focus-visible,.step:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn[disabled],.btn[disabled][data-tone]{background:var(--t-off-bg);border:1.5px solid var(--t-off-bg);color:var(--t-off-text);opacity:1;cursor:not-allowed;filter:none}
/* 오른쪽 버튼 메뉴의 항목 — 왼쪽 띠와 글 색 */
.ctx button[data-tone]{border-left:4px solid transparent;border-radius:4px}
.ctx button[data-tone="write"]{border-left-color:var(--t-write)}
.ctx button[data-tone="danger"]{border-left-color:var(--t-danger);color:var(--t-danger);font-weight:600}
.ctx button[data-tone="pending"]{border-left-color:var(--t-pend);color:var(--t-pend)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ctx button[data-tone="danger"]{color:#ff9b8f} }
:root[data-theme="dark"] .ctx button[data-tone="danger"]{color:#ff9b8f}

/* ── 칸 색 — 레거시 목록의 RowCellStyle (명세 cell_style, shell.js UX.paintCells). 고칠 수 있는 칸(LightGoldenrodYellow)·고칠 수 없는 칸(LightGray)·
 *    기준 줄(Yellow)·글 색(Red — 'NG'). 레거시 색 이름 그대로 클래스로, 밝은·어두운 화면마다 글과 대비 4.5:1 넘는 바탕 (모양만) ── */
:root{ --cs-lightgoldenrodyellow:#fafad2; --cs-lightgray:#d3d3d3; --cs-yellow:#ffff00; --cs-text:#1b1f27; --cf-red:#c00000; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --cs-lightgoldenrodyellow:#4a4626; --cs-lightgray:#3a3f48; --cs-yellow:#6b6200; --cs-text:#eef1f5; --cf-red:#ff8a80; }
}
:root[data-theme="dark"]{ --cs-lightgoldenrodyellow:#4a4626; --cs-lightgray:#3a3f48; --cs-yellow:#6b6200; --cs-text:#eef1f5; --cf-red:#ff8a80; }
table.data td.cs-lightgoldenrodyellow{background:var(--cs-lightgoldenrodyellow);color:var(--cs-text)}
table.data td.cs-lightgray{background:var(--cs-lightgray);color:var(--cs-text)}
table.data td.cs-yellow{background:var(--cs-yellow);color:var(--cs-text)}
table.data td[class*="cs-"] input{background:transparent;color:inherit}
table.data td.cf-red,table.data td.cf-red input{color:var(--cf-red);font-weight:600}
table.data tr.sel td[class*="cs-"]{box-shadow:inset 0 0 0 2px var(--accent)}
/* 편집 표를 판 안 목록 자리에 (명세 hide_list — 표 하나) — 고른 줄은 목록처럼 */
.fld.grid.merged{display:block;margin-top:6px}
.fld.grid.merged tr[data-row]{cursor:pointer}
.fld.grid.merged tr.sel > td{box-shadow:inset 0 0 0 2px var(--accent)}

/* 태블릿·좁은 화면 — 영역은 그대로, 안쪽 띄움만 줄인다 */
@media (max-width:1100px){
  :root{--region-gap:10px}
  .screen > section.list,.screen > .pages{padding:8px}
  .screen > .btns{padding:6px 8px}
}