/* forsitOS product 앱 — 공통 컴포넌트
   출처: pages/product-db.html에서 추출 (2026-08-27)
   앱 셸·레일(사이드바)·2단·칩·검색·버튼·카드/표·상세·등록·선택바·모달.
   ⚠ 규칙 순서 보존 필수 — tokens.css → components.css → (페이지 인라인) 순서로 로드 */
/* ── 앱 셸 ─────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:100vh}
.rail{background:var(--rail);color:var(--rail-ink);padding:16px 0 22px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:0 16px;display:flex;flex-direction:column}
.brand b{color:#fff;font-size:14px;font-weight:600}
.brand span{color:var(--rail-dim);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px;padding:0 9px}
.nav .lbl{color:var(--rail-dim);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:6px 8px 3px}
.nav button,.nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:0;color:var(--rail-ink);padding:7px 8px;border-radius:var(--r);cursor:pointer;text-align:left;font-size:13px;text-decoration:none}
.nav button:hover,.nav a:hover{background:var(--rail-2)}
.nav button[aria-current="true"],.nav a[aria-current="true"]{background:var(--rail-2);color:#fff;font-weight:600;box-shadow:inset 2px 0 0 var(--blue)}
.nav .cnt{font-family:Consolas,Menlo,monospace;font-size:11px;color:var(--rail-dim)}
.railfoot{margin:auto 0 0;padding:13px 16px 0;color:var(--rail-dim);font-size:10.5px;line-height:1.7;border-top:1px solid var(--rail-2)}
.railfoot b{color:var(--rail-ink);font-weight:500}

.main{min-width:0;display:flex;flex-direction:column}
/* 본문 컨테이너 — 좌우 여백을 여기 한 곳에서만 준다. 화면이 --page-w 보다 넓으면
   남는 폭을 반씩 나눠 가운데로 모으고, 좁으면 --page-px 만 남긴다.
   백분율 padding 은 부모(.main) 폭 기준이라 별도 래퍼 없이 조각 마크업 그대로 쓴다. */
.page{display:none;flex-direction:column;flex:1;min-width:0;
  padding:var(--page-pt) max(var(--page-px), calc((100% - var(--page-w)) / 2)) var(--page-pb)}
.page.on{display:flex}
.crumb{color:var(--ink-3);font-size:11px;padding:0}
.crumb b{color:var(--ink-2);font-weight:500}
.crumb code{font-size:10.5px}
.h1{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:4px 0 24px}
.h1 small{font-size:12px;font-weight:400;color:var(--ink-3);margin-left:9px}

/* ── 2단 ──────────────────────────────────── */
.two{display:grid;grid-template-columns:var(--list-w) 1fr;gap:12px;flex:1;min-height:0;align-items:stretch}
/* ── 좌 · 우 높이 동일 — 공용 하나 (지시서 00-3 B-③ · 화면-00 1-2).
   좌 트리 카드가 우측 카드만큼 늘고 트리 «안에서» 스크롤한다. 화면마다 복붙하지 않는다.
   `.pg-md` 쪽 같은 규칙은 표준 골격이라 `shell.html` 에 둔다 (조각 계약 6) ── */
.railmount{display:flex;min-width:0}
/* 좌 카드는 «우측 내용»이 정한 높이에 맞추고 그 «안에서» 스크롤한다 — 행 · 항목 수로 늘지 않는다.
   `minmax(--list-min-h, 1fr)` 가 핵심: 최소는 12행, 최대는 남는 높이라 내용이 트랙을 밀지 못한다 (00-5 1절) */
.two .scope{position:static;display:flex;flex-direction:column;
  height:0;min-height:max(100%,calc(var(--list-min-h) + var(--list-hd-h)))}
.two .scope .tree{flex:1;max-height:none;min-height:0;overflow-y:auto}
.two>.pane>.pg-list{flex:1;display:flex;flex-direction:column;min-height:0}
.two>.pane>.pg-list>.pg-lbody{flex:1;max-height:none;min-height:0}
.two>.pane>.card:last-of-type{flex:1;display:flex;flex-direction:column;min-height:0}
/* ── 레일 접기 · 트리 부품 — 공용 트리 빌더(`PC.treeMount`)가 찍는다.
   목록 · Workspace 허브가 같이 쓰므로 조각에 두지 않는다 (00-3 B-④) ── */
.tr-all{padding:8px 11px;font-size:12.5px;font-weight:700}
.tr-all .nm{font-family:inherit;letter-spacing:0;color:var(--ink)}
.tr-all.cur .nm{color:var(--blue)}
.railfold{background:none;border:0;color:var(--ink-3);font-size:11px;cursor:pointer;padding:0}
.railfold:hover{color:var(--blue)}
.railshow{display:none;margin:12px 0 0 12px;width:20px;padding:11px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink-3);font-size:12px;cursor:pointer}
.railshow:hover{border-color:var(--blue);color:var(--blue)}
.two.railoff{grid-template-columns:44px 1fr}
.two.railoff .scope{display:none}
.two.railoff .railshow{display:block}
.tagx{display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600;background:var(--surface-3);color:var(--ink-3);border:1px solid var(--line-2)}
@media(max-width:1180px){.two{grid-template-columns:1fr}}

/* ── 공유 레일 컴포넌트 ────────────────────── */
.scope{background:var(--surface);border:1px solid var(--line);border-radius:9px;margin:12px 0;overflow:hidden;position:sticky;top:12px}
@media(max-width:1180px){.scope{position:static}}
.scope>.pad{padding:11px}
.tgl{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
.tgl button{flex:1;border:0;background:none;padding:6px 0;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--ink-2)}
.tgl button[aria-pressed="true"]{background:var(--surface);color:var(--blue);font-weight:600;box-shadow:var(--shadow)}
.tgl.sm{padding:2px;border-radius:var(--r);flex:none}
.tgl.sm button{flex:none;padding:5px 13px;font-size:12px}
.bsearch{width:100%;margin-top:9px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);font-size:12.5px}
.scopehd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap}
.scopehd .st{font-family:Consolas,Menlo,monospace;font-size:11px;color:var(--ink-2);white-space:nowrap}
.scopehd .sp{display:flex;gap:10px;align-items:center}
.scopehd button{background:none;border:0;color:var(--blue);cursor:pointer;font-size:11.5px;white-space:nowrap;padding:0}
.scopehd button:hover{text-decoration:underline}
.tree{max-height:calc(100vh - 230px);overflow-y:auto;padding:2px 0}
@media(max-width:1000px){.tree{max-height:340px}}
.cgrp{border-bottom:1px solid color-mix(in srgb,var(--line) 62%,transparent)}
.cgrp:last-child{border-bottom:0}
.cli,.brd{display:flex;align-items:center;gap:9px;cursor:pointer;margin:0}
.cli{padding:8px 11px;font-size:12.5px;font-weight:700;color:var(--ink)}
.brd{padding:5px 11px 5px 30px;font-size:11.5px}
.cli:hover,.brd:hover{background:var(--surface-2)}
.cli .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brd .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Consolas,Menlo,monospace;letter-spacing:.02em;color:var(--ink-2)}
.brd .nm.kr{font-family:inherit;letter-spacing:0}
.cli .c,.brd .c{font-family:Consolas,Menlo,monospace;font-size:10.5px;color:var(--ink-3);flex:none}
.brd.cur{background:var(--blue-soft);box-shadow:inset 3px 0 0 var(--blue)}
.brd.cur .nm,.brd.cur .c{color:var(--blue)}
.brd.cur .nm{font-weight:700}
/* 3단째 — 브랜드를 고르면 그 아래에서만 제품이 펼쳐짐 */
.prdgrp{display:none;padding-bottom:4px}
.brd.cur+.prdgrp{display:block}
.prd{display:flex;align-items:center;gap:9px;width:100%;padding:4px 11px 4px 46px;border:0;background:none;cursor:pointer;text-align:left;font-size:11.5px;color:var(--ink-2)}
.prd:hover{background:var(--surface-2);color:var(--blue)}
.prd .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prd .c{font-family:Consolas,Menlo,monospace;font-size:10px;color:var(--ink-3);flex:none}
.prdnone{padding:4px 11px 4px 46px;font-size:11px;color:var(--ink-3)}
input[type=checkbox],input[type=radio]{width:14px;height:14px;accent-color:var(--blue);cursor:pointer;margin:0;flex:none}

/* ── 본문 ─────────────────────────────────── */
.pane{padding:12px 0 0;min-width:0;display:flex;flex-direction:column;gap:12px}
.two>.pane{padding-left:0;padding-right:0}
.body{padding:16px 0 0;display:flex;flex-direction:column;gap:12px;max-width:880px}

/* ── 화면 상단 카운트 ─────────────────────── */
.cnthd{font-size:14px;font-weight:600}
.cnthd b{font-family:Consolas,Menlo,monospace;margin-left:5px}

/* ── 버전 목록 (Workspace · 상세 산출물 공용) ── */
.vlist{display:flex;flex-direction:column}
.vitem{display:flex;align-items:center;gap:9px;padding:8px 15px;border-bottom:1px solid var(--line);font-size:11.5px;cursor:pointer}
.vitem:last-child{border-bottom:0}
.vitem:hover{background:var(--surface-2)}
.vitem.cur{background:var(--blue-soft);box-shadow:inset 3px 0 0 var(--blue)}
.vitem .vn{font-family:Consolas,Menlo,monospace;font-weight:700;flex:none}
.vitem .vw{color:var(--ink-3);margin-left:auto;font-size:10.5px;white-space:nowrap}

/* ── 산출물 상태 점 (Workspace · 상세 공용) ── */
.sd{width:7px;height:7px;border-radius:50%;flex:none}
.sd.ok{background:var(--green)}
.sd.wip{background:var(--amber)}
.sd.none{background:var(--surface-3);border:1px solid var(--line-2)}

/* ── AI 질문 박스 (읽기 전용 틀) ───────────── */
.aiq{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:13px 15px;display:flex;flex-direction:column;gap:9px}
.aiq .qrow{display:flex;gap:8px}
.aiq .qrow input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);font-size:12.5px}

/* ── 칩 행 ────────────────────────────────── */
.chiprow{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.chiplbl{font-size:11.5px;color:var(--ink-3);padding-top:5px;width:78px;flex:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:4px 11px;font-size:11.5px;color:var(--ink-2);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.chip:hover{border-color:var(--ink-3)}
.chip .n{font-family:Consolas,Menlo,monospace;font-weight:700}
.chip .d{font-family:Consolas,Menlo,monospace;font-size:10px;opacity:.8}
.chip[aria-pressed="true"]{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue);font-weight:600}
.chip.dark[aria-pressed="true"]{background:var(--rail);border-color:var(--rail);color:#fff}
.chip.c-teal{background:var(--teal-soft);border-color:var(--teal-line);color:var(--teal)}
.chip.c-green{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
.chip.c-amber{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber)}
.chip.c-red{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.chip.c-pink{background:var(--pink-soft);border-color:var(--pink-line);color:var(--pink)}
.fold{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:7px 12px;cursor:pointer;font-size:12.5px}
.fold:hover{border-color:var(--ink-3)}
.fold .ar{font-size:9px;color:var(--ink-3)}
.foldbody{display:none;flex-direction:column;gap:9px;padding:11px 0 2px}
.foldbody.on{display:flex}

/* ── 검색 ─────────────────────────────────── */
.srow{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.search{flex:1;min-width:200px;position:relative}
.search input{width:100%;padding:10px 12px 10px 33px;border:1px solid var(--blue-line);border-radius:var(--r);background:var(--surface);font-size:13px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3)}

/* ── 버튼 ─────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;font-size:12.5px;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn.sm{padding:4px 10px;font-size:11.5px}
.btn.p{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
.btn.p:hover{filter:brightness(1.08);background:var(--teal)}
.btn.b{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.btn.b:hover{filter:brightness(1.08);background:var(--blue)}
.btn.g{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.btn.g:hover{filter:brightness(1.08);background:var(--green)}
.btn.o-red{color:var(--red);border-color:var(--red-line)}
.btn.o-red:hover{background:var(--red-soft);border-color:var(--red)}
.btn.o-amber{color:var(--amber);border-color:var(--amber-line)}
.btn.o-amber:hover{background:var(--amber-soft);border-color:var(--amber)}
.btn.q{border-color:transparent;background:none;color:var(--ink-3);padding:6px 8px}
.btn.q:hover{background:var(--surface-2);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── 카드 · 표 ────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:9px}
.card>header{padding:12px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card>header h2{margin:0;font-size:13px;font-weight:600;display:flex;align-items:center}
.pad{padding:15px}
.note{font-size:11.5px;color:var(--ink-3);line-height:1.65}
.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{text-align:left;font-size:11px;color:var(--ink-3);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child>td{border-bottom:0}
tbody tr:hover>td{background:var(--surface-2)}
.num{font-family:Consolas,Menlo,monospace;font-variant-numeric:tabular-nums;text-align:right}
.ean{font-family:Consolas,Menlo,monospace;font-size:11.5px;color:var(--blue)}
.ean.miss{color:var(--red)}
.empty{color:var(--ink-3);opacity:.75}

.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:5px;font-size:10.5px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1.6}
.pill.n{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.pill.blue{background:var(--blue-soft);color:var(--blue);border-color:var(--blue-line)}
.pill.green{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.pill.amber{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line)}
.pill.red{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}

/* 계층 행 */
.prow>td{background:var(--surface)}
.prow .pname{background:none;border:0;padding:0;cursor:pointer;font-weight:600;font-size:13px;color:var(--ink);text-align:left}
.prow .pname:hover{color:var(--blue);text-decoration:underline}
.exp{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--line-2);border-radius:4px;background:var(--surface);cursor:pointer;color:var(--ink-3);margin-right:8px;vertical-align:middle;padding:0}
.exp svg{transition:transform .15s}
.exp[aria-expanded="true"] svg{transform:rotate(90deg)}
.exp:hover{border-color:var(--blue);color:var(--blue)}

/* 막대 — 정산 화면 비중 표시 */
.bar{display:flex;gap:2px;width:72px}
.bar i{height:5px;flex:1;border-radius:2px;background:var(--surface-3)}
.bar i.b1{background:var(--blue)} .bar i.b2{background:var(--teal)}
.bar i.b3{background:var(--violet)} .bar i.b4{background:var(--amber)}
.barw{display:flex;align-items:center;gap:8px}
.barw em{font-style:normal;font-family:Consolas,Menlo,monospace;font-size:10.5px;color:var(--ink-3)}

/* ── 상세 ─────────────────────────────────── */
.dethd{display:flex;gap:13px;align-items:flex-start;padding:14px 22px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.thumb{width:48px;height:48px;border-radius:var(--r);background:var(--surface-3);border:1px solid var(--line);flex:none}
.dh{flex:1;min-width:220px}
.dh h1{margin:0 0 3px;font-size:17px;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.dh h1 .en{font-size:12px;font-weight:400;color:var(--ink-3);margin-left:8px}
.dh .sub{font-family:Consolas,Menlo,monospace;font-size:11px;color:var(--ink-3);margin-bottom:7px}
.dh .prog{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dact{display:flex;gap:7px;flex-wrap:wrap;align-self:flex-start}
.dettabs{display:flex;gap:2px;background:var(--surface);border-bottom:1px solid var(--line);padding:0 22px;overflow-x:auto;overflow-y:hidden}
.dettabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 12px;color:var(--ink-3);cursor:pointer;font-size:12.5px;white-space:nowrap;margin-bottom:-1px;display:flex;align-items:center;gap:6px}
.dettabs button:hover{color:var(--ink)}
.dettabs button[aria-selected="true"]{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
.dettabs .tb{font-family:Consolas,Menlo,monospace;font-size:9.5px;background:var(--surface-3);color:var(--ink-2);border-radius:9px;padding:1px 5px}
.dettabs .dot{width:5px;height:5px;border-radius:50%;background:var(--red)}
.dtab{display:none;flex-direction:column;gap:12px}
.dtab.on{display:flex}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:13px 15px}
.stat .k{font-size:11.5px;color:var(--ink-3);margin-bottom:3px}
.stat .v{font-family:Consolas,Menlo,monospace;font-size:21px;font-weight:700;letter-spacing:-.02em}
.stat .v small{font-size:11px;font-weight:400;color:var(--ink-3);margin-left:5px;font-family:inherit}
.stat .v.dim{color:var(--ink-3);font-size:15px}


.kv{display:flex;flex-direction:column}
.kv>div{display:flex;gap:16px;padding:9px 15px;border-bottom:1px solid var(--line);align-items:baseline}
.kv>div:last-child{border-bottom:0}
.kv dt{flex:none;width:146px;font-size:11.5px;color:var(--ink-3);margin:0}
.kv dd{margin:0;flex:1;min-width:0;font-size:12.5px;text-align:right}
.kv dd.wrap{text-align:left;line-height:1.6}
.kv dd .note{margin-left:7px}
details.sec{background:var(--surface);border:1px solid var(--line);border-radius:9px;overflow:hidden}
details.sec>summary{cursor:pointer;padding:12px 15px;font-size:13px;font-weight:600;list-style:none;display:flex;align-items:center;gap:9px}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::before{content:"\25B8";font-size:9px;color:var(--ink-3)}
details.sec[open]>summary::before{content:"\25BE"}
details.sec>summary .note{margin-left:auto;font-weight:400}
details.sec[open]>summary{border-bottom:1px solid var(--line)}
.imgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.imcell{aspect-ratio:1;border-radius:var(--r);background:var(--surface-3);border:1px solid var(--line);display:grid;place-items:center;font-size:11.5px;color:var(--ink-3)}
.imcell.add{background:none;border-style:dashed;cursor:pointer}
.imcell.add:hover{border-color:var(--blue);color:var(--blue)}

/* ── 등록 ─────────────────────────────────── */
/* 탭 — 세그먼트 컨트롤. 밑줄 탭은 제목 아래 흰 바탕에서 그냥 글자로 읽혀
   「고를 수 있는 것」으로 보이지 않았다(2026-09-04). 회색 띠 안의 흰 카드로 바꾼다. */
/* 세로 리듬은 .pg-fbar 와 같은 margin-top:11px — 0 이면 부제에 붙어 크램프된다.
   가로는 «탭 라벨»이 필터 첫 칸 라벨과 같은 36px 에서 시작하도록 안쪽 여백을 맞춘다
   (22 margin + 1 border + 3 padding + 10 버튼 padding = 36). */
.tabs{display:flex;gap:3px;margin:0 0 11px;padding:3px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--line);align-self:flex-start}
.tabs button{background:none;border:0;border-radius:7px;padding:7px 10px;color:var(--ink-2);
  cursor:pointer;font-size:12.5px;font-weight:500;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.10),0 0 0 1px var(--line)}
.mode{display:none;flex-direction:column;gap:12px}
.mode.on{display:flex}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>label{font-size:11.5px;font-weight:500;color:var(--ink-2)}
.field>label .req{color:var(--red);font-weight:700}
.ctl{width:100%;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);font-size:12.5px}
.ctl[readonly],.ctl:disabled{background:var(--surface-2);color:var(--ink-3)}
.grid{display:grid;gap:13px}
.g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)} .g6{grid-template-columns:repeat(6,1fr)}
@media(max-width:900px){.g2,.g3,.g4,.g6{grid-template-columns:1fr 1fr}}
.vedit input,.vedit select{width:100%;padding:5px 7px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);font-size:12px;min-width:62px}
.vedit td{padding:6px 8px}
.rowline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reslist{border:1px solid var(--line);border-radius:var(--r);max-height:210px;overflow-y:auto}
.res{display:flex;align-items:center;gap:11px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;background:var(--surface)}
.res:last-child{border-bottom:0}
.res:hover{background:var(--surface-2)}
.res[aria-selected="true"]{background:var(--blue-soft);box-shadow:inset 3px 0 0 var(--blue)}
.res .t{flex:1;min-width:0}
.res .t b{display:block;font-size:12.5px}
.res .t span{font-size:11px;color:var(--ink-3)}
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:28px 18px;text-align:center;background:var(--surface-2);cursor:pointer}
.drop:hover{border-color:var(--blue)}
.drop b{display:block;font-size:12.5px;margin-bottom:3px}
.drop span{font-size:11px;color:var(--ink-3)}
.stepn{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--blue);color:#fff;font-family:Consolas,Menlo,monospace;font-size:11px;font-weight:700;margin-right:9px;flex:none}
.callout{display:flex;gap:9px;padding:10px 13px;border-radius:var(--r);font-size:11.5px;line-height:1.65;border:1px solid}
.callout.i{background:var(--blue-soft);border-color:var(--blue-line);color:var(--ink-2)}
.callout.w{background:var(--amber-soft);border-color:var(--amber-line);color:var(--ink-2)}
.callout .m{flex:none;font-size:10px;font-weight:700;padding-top:1px;white-space:nowrap}
.callout.i .m{color:var(--blue)} .callout.w .m{color:var(--amber)}
.vhave{background:var(--surface-2);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:12px}
.vhave>div{display:flex;align-items:center;gap:8px}
.vhave code{font-size:11px;color:var(--ink-3)}
.eyebrow{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:700}

/* ── 선택 바 ──────────────────────────────── */
.selbar{position:fixed;left:var(--rail-w);right:0;bottom:0;background:var(--rail);color:#fff;padding:11px 22px;display:none;align-items:center;gap:14px;z-index:40;flex-wrap:wrap}
.selbar.on{display:flex}
.selbar .n{font-size:12.5px;color:var(--rail-ink)}
.selbar .n b{color:#fff;font-family:Consolas,Menlo,monospace}
.selbar .sp{margin-left:auto;display:flex;gap:8px}
.selbar .btn{background:var(--rail-2);border-color:#2c3a55;color:#e7eef7}
.selbar .btn:hover{background:#243250}
.selbar .btn.p{background:var(--teal);border-color:var(--teal);color:#fff}
@media(max-width:1000px){.selbar{left:0}}

/* ── 모달 ─────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(12,16,23,.55);display:none;align-items:flex-start;justify-content:center;padding:36px 18px;z-index:60;overflow-y:auto}
.scrim.on{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:11px;width:100%;max-width:760px;box-shadow:var(--shadow-lg)}
.modal>header{padding:15px 19px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:14px;
  cursor:move;user-select:none}                       /* 헤더를 잡고 팝업을 옮긴다 */
.modal>header .x{cursor:pointer}
.modal.moved{margin:0}                                 /* 옮긴 뒤에는 좌표를 직접 준다 */
.modal>header h2{margin:0;font-size:15px;font-weight:700}
.modal>header p{margin:3px 0 0;font-size:11.5px;color:var(--ink-3)}
.mbody{padding:15px 19px;display:flex;flex-direction:column;gap:16px}
.modal>footer{padding:12px 19px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:0 0 11px 11px;flex-wrap:wrap}
.x{margin-left:auto;background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:19px;line-height:1;padding:0 5px}
.x:hover{color:var(--ink)}
.grphd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.grphd h3{margin:0;font-size:12.5px;font-weight:700}
.grphd .n{font-family:Consolas,Menlo,monospace;font-size:11px;color:var(--ink-3)}
.grphd .note{margin-left:auto}
.grphd.warn h3{color:var(--amber)}
.gtbl{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}
.gtbl.warn{border-color:var(--amber-line)}
.gtbl.warn thead th{background:var(--amber-soft)}
.grpfold{border-top:1px solid var(--line);padding-top:11px}
.grpfold>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.grpfold>summary::-webkit-details-marker{display:none}
.grpfold>summary::before{content:"\25B8";font-size:9px;color:var(--ink-3)}
.grpfold[open]>summary::before{content:"\25BE"}
.grpfold>summary h3{margin:0;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.grpfold>summary .n{font-family:Consolas,Menlo,monospace;font-size:11px;color:var(--ink-3)}
.grpfold>summary .note{margin-left:auto}
.minisel{width:100%;padding:5px 7px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);font-size:11.5px}
.minisel.sug{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);font-weight:600}
.minisel.tgt{display:none;margin-top:5px}
.minisel.tgt.on{display:block}
.sugnote{display:none;font-size:10.5px;color:var(--blue);margin-top:3px}
.sugnote.on{display:block}
.dl{display:flex;flex-direction:column;gap:4px;font-size:11.5px}
.dl>div{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.dl b{min-width:66px;color:var(--ink-3);font-weight:500;font-size:10.5px;flex:none}
.dl s{color:var(--ink-3);opacity:.75;font-family:Consolas,Menlo,monospace}
.dl em{font-style:normal;color:var(--ink-3);font-size:10px}
.dl i{font-style:normal;color:var(--green);font-weight:700;font-family:Consolas,Menlo,monospace}
.keyline{font-family:Consolas,Menlo,monospace;font-size:11px;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:7px 11px}
.keyline b{color:var(--blue);font-weight:700}
.selitem{display:flex;align-items:center;gap:11px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.selitem .t{flex:1;min-width:0}
.selitem .t b{display:block;font-size:12.5px}
.selitem .t span{font-size:11px;color:var(--ink-3)}
.radios{display:flex;flex-direction:column;gap:7px}
.radio{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;background:var(--surface)}
.radio:hover{background:var(--surface-2)}
.radio b{display:block;font-size:12.5px}
.radio span{font-size:11px;color:var(--ink-3);line-height:1.6}
.radio.sel{border-color:var(--blue);background:var(--blue-soft)}
.lock{display:inline-flex;align-items:center;gap:6px;font-family:Consolas,Menlo,monospace;font-size:12px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:5px;padding:5px 9px}

/* 드라이브 기록 안내 */
.drv{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface-2);font-size:11.5px;flex-wrap:wrap}
.drv .ico{flex:none;font-size:14px;line-height:1}
.drv .t{flex:1;min-width:180px;color:var(--ink-2)}
.drv .t b{color:var(--ink);font-weight:600}
.drv .pth{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);margin-top:3px;word-break:break-all}
.drv .pth a{color:var(--accent);text-decoration:none}
.drv .pth a:hover{text-decoration:underline}
.drv.warn{border-color:var(--amber-line);background:var(--amber-soft)}
.drv.warn .t b{color:var(--amber)}
.drv .lnk{flex:none}
.drv .fix{display:flex;gap:7px;align-items:center;width:100%;margin-top:2px}
.drv .fix input{flex:1;min-width:150px;padding:6px 9px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);font-size:11.5px}
.drvswap{background:none;border:0;color:var(--ink-3);font-size:10.5px;text-decoration:underline;cursor:pointer;padding:0;align-self:center}
.drvst{display:none}.drvst.on{display:flex}
.acct{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding-top:6px}

/* ── 상세 탭 골격 — 우 상세를 탭으로 나누는 화면 공용 (고객사 · 브랜드 · 계약 · 지시서 01-3) ──
   .pg-det 헤더 아래 .pg-dtabwrap > .dettabs(밑줄 탭) · 패널은 .pg-dbody > section.dtab[data-dtab] · 켜진 것만 .on
   폼 탭 하단 저장줄 .dtab-foot · 행 탭 머리줄 .dtab-hd (제목 · 규칙 한 줄 · 우측 버튼) */
.pg-dtabwrap .dettabs{padding:0 15px}
.pg-dtabwrap .dettabs button{padding:10px 12px}
.pg-dtabwrap .dettabs .tb{margin-left:5px}
.dtab-foot{display:flex;gap:8px;align-items:center;padding-top:12px;border-top:1px solid var(--line)}
.dtab-foot .note{flex:1;min-width:0}
.dtab-hd{display:flex;align-items:center;gap:8px;min-height:28px}
.dtab-hd b{font-size:12.5px}
.dtab-hd .rule{font-size:11.5px;color:var(--ink-3)}
.dtab-hd .sp{margin-left:auto;display:flex;gap:6px}

/* ── 한 줄 라디오 — 국내 · 해외 같은 2~3값 (공용) ── */
.radioline{display:flex;gap:14px;align-items:center;min-height:32px}
.radioline label{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink);cursor:pointer;font-weight:400}
.radioline input{margin:0}

/* ── 열린 화면 탭바 — 지금 열어 둔 화면 (공용 · 지시서 00-6) ──
   .main 의 맨 위에 서고 스크롤하면 상단에 붙는다.
   내용은 bootstrap 의 renderTabs() 가 그린다 — 여기는 모양만 안다.
   닫기가 «버튼 안의 버튼»이 되면 안 되므로 .tab 은 감싸는 상자이고
   이동(.tab-go)과 닫기(.tab-x)는 그 안의 «형제»다.
   기존 .tabs(상세 탭 골격) · .x(모달 닫기)와 겹치지 않게 .tabbar 로 스코프한다. */
.tabbar{position:sticky;top:0;z-index:30;display:flex;align-items:stretch;gap:2px;
  padding:5px max(var(--page-px), calc((100% - var(--page-w)) / 2)) 0;
  background:var(--surface-2);border-bottom:1px solid var(--line);overflow-x:auto}
.tabbar:empty{display:none}
.tabbar .tab{display:flex;align-items:center;flex:none;max-width:150px;
  border:1px solid transparent;border-bottom:0;border-radius:var(--r) var(--r) 0 0}
.tabbar .tab:hover:not(.on){background:var(--surface-3)}
.tabbar .tab.on{background:var(--surface);border-color:var(--line);
  box-shadow:inset 0 2px 0 var(--blue)}
.tabbar .tab-go{flex:1;min-width:0;background:none;border:0;cursor:pointer;
  padding:7px 5px 7px 11px;font-size:12px;color:var(--ink-3);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabbar .tab.on .tab-go{color:var(--ink);font-weight:600}
.tabbar .tab-x{flex:none;display:flex;align-items:center;justify-content:center;
  width:17px;height:17px;margin-right:6px;border-radius:4px;
  color:var(--ink-3);font-size:14px;line-height:1;cursor:pointer}
.tabbar .tab-x:hover{background:var(--line);color:var(--ink)}
.tabbar .tab-go:focus-visible,.tabbar .tab-x:focus-visible{
  outline:2px solid var(--blue);outline-offset:-2px}
/* 닫기가 없는 탭(마지막 하나)은 오른쪽 여백을 라벨이 갖는다 */
.tabbar .tab.solo .tab-go{padding-right:11px}

/* ── 읽기 칸 (.robox) — 수정 모드의 「읽기」 상태 ─────────────
   Q24. 세 화면(고객사 · 브랜드 · 계약)이 같은 것을 같게 보여야 해서 공용으로 올린다.
   2026-09-14 승격 전에는 .cli-ro · .brd-ro · .ctr-ro 세 벌이 조각마다 같은 값으로 복사돼 있었다.

   왜 입력칸을 잠그지 않고 다시 그리나 — disabled · readonly 로 두면 여전히 «칸»으로 보여
   「여기 고치는 자리인가」가 남는다. 읽기는 칸이 아닌 것으로 그린다.

   이름이 .ro 가 아닌 이유 — .ro 는 이미 `class="ctl ro"` 로 «잠긴 입력칸»에 쓰이고 있고
   (shell.html 의 `.pg-fg .ro`), 그것은 Q24 가 금지한 바로 그 모양이다. 겹치면 뜻이 뒤집힌다. */
.robox{min-height:31px;padding:6px 9px;border:1px solid var(--line);border-radius:6px;
  background:var(--surface-2);font-size:12px;color:var(--ink);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* 여러 줄 값(주소 · 메모 등) — 위로 붙이고 줄바꿈을 살린다 */
.robox.robox-tall{min-height:52px;align-items:flex-start;white-space:pre-wrap}
/* 읽기 칸 안의 링크형 버튼 (계약서 열기 등) */
.robox button{background:none;border:0;padding:0;color:var(--blue);cursor:pointer;font-size:11.5px}
.robox button:hover{text-decoration:underline}