/* EASO PSI 포털 — client-portal 디자인(Modernist: 평평한 면, 2px 구분선, 모서리 0, 빨간 강조 하나)을 클래스로 옮긴 것.
   색 · 글꼴 · 간격은 ds.css 토큰만 쓴다. CSP(style-src 'self') 때문에 인라인 스타일 대신 이 파일을 쓴다. */
html:root { --font-body: "Archivo", "Pretendard Variable", Pretendard, system-ui, sans-serif; --font-heading: "Archivo", "Pretendard Variable", Pretendard, system-ui, sans-serif; }
html, body { height: 100%; }
body { word-break: keep-all; background: var(--color-bg); }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }
button { font-family: inherit; color: inherit; }
input, select, textarea { font-family: inherit; }
@keyframes psi-spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }
.ic { display: block; flex: none; }

/* ── 작은 도우미 ── */
.row { display: flex; align-items: flex-start; }
.col { display: flex; flex-direction: column; }
.center { align-items: center; }
.baseline { align-items: baseline; }
.start { align-items: flex-start; }
.end { align-items: flex-end; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.minw0 { min-width: 0; }
.self-start { align-self: flex-start; }
.ml-auto { margin-left: auto; }
.mt-auto { margin-top: auto; }
.mt20 { margin-top: 20px; }
.pt8 { padding-top: 8px; } .pt12 { padding-top: 12px; } .pt16 { padding-top: 16px; }
.gap0 { gap: 0; } .gap2 { gap: 2px; } .gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; }
.gap14 { gap: 14px; } .gap16 { gap: 16px; } .gap20 { gap: 20px; } .gap24 { gap: 24px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bl { border-left: 2px solid var(--color-divider); }
.bb2 { border-bottom: 2px solid var(--color-divider); }
.bt2 { border-top: 2px solid var(--color-divider); }
.pad40 { padding: 40px; } .pad40x24 { padding: 40px 24px; }
.pad-20-14 { padding: 20px 20px 14px; } .pad-4-20-20 { padding: 4px 20px 20px; } .pad-0-20-20 { padding: 0 20px 20px; }
.pad-18-20 { padding: 18px 20px; } .pad-16-20 { padding: 16px 20px; } .pad-4-20-0 { padding: 4px 20px 0; } .pad-16-20-0 { padding: 16px 20px 0; }
.pad-12-20-20 { padding: 12px 20px 20px; } .pad-12-20 { padding: 12px 20px; }
.w140 { min-width: 140px; } .w150 { width: 150px; } .w170 { min-width: 170px; } .w220 { width: 220px; } .w260 { width: 260px; } .w420 { width: 420px; max-width: 100%; } .w520 { width: 520px; max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--color-neutral-700); }
.muted3 { color: var(--color-neutral-300); }
.muted4 { color: var(--color-neutral-400); }
.muted8 { color: var(--color-neutral-800); }
.accent-text { color: var(--color-accent-700); }
.accent-lt { color: var(--color-accent-400); }
.warn-text { color: var(--color-danger-700); }          /* 경고 · 오류 · 마감 임박 · 필수 표시 */
.warn-lt { color: var(--color-danger-400); }            /* 어두운 바탕 위 경고 */
.tone-hot, .tone-ink { color: var(--color-text); }
.tone-warn { color: var(--color-danger-700); }
.tone-mute { color: var(--color-neutral-700); }
.n400 { font-weight: 400; } .n600 { font-weight: 600; }
.b600 { font-weight: 600; } .b700 { font-weight: 700; } .b800 { font-weight: 800; }
.b11 { font: 600 11px/1.25 var(--font-body); } .b12 { font: 700 12px/1.3 var(--font-body); } .b13 { font: 700 13px/1.35 var(--font-body); }
.b14 { font: 700 14px/1.35 var(--font-body); } .b15 { font: 800 15px/1.1 var(--font-body); } .b18 { font: 700 18px/1.3 var(--font-body); }
.s11 { font-size: 11px; } .s12 { font-size: 12px; line-height: 1.45; } .s13 { font-size: 13px; line-height: 1.45; } .s14 { font-size: 14px; line-height: 1.5; }
.p13 { margin: 0; font: 400 13px/1.55 var(--font-body); } .p14 { margin: 0; font: 400 14px/1.6 var(--font-body); } .p15 { margin: 0; font: 400 15px/1.6 var(--font-body); color: var(--color-neutral-800); }
.pre { white-space: pre-wrap; }
.brk { word-break: break-all; }
.ls { letter-spacing: 0.04em; }
.mono { font: 400 12px/1.4 ui-monospace, Consolas, monospace; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellip2 { max-width: 640px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h16 { font: 800 16px/1.2 var(--font-heading); } .h18 { font: 800 18px/1.2 var(--font-heading); } .h19 { font: 800 19px/1.2 var(--font-heading); margin: 0; }
.h20 { font: 800 20px/1.25 var(--font-heading); } .h22 { font: 800 22px/1.2 var(--font-heading); margin: 0; } .h32 { font: 800 32px/1 var(--font-heading); }
.h36 { font: 800 36px/1.1 var(--font-heading); letter-spacing: -0.02em; margin: 0; } .h40 { margin: 0; font: 800 40px/1.15 var(--font-heading); letter-spacing: -0.02em; max-width: 640px; }
.h48 { margin: 0; font: 800 48px/1.1 var(--font-heading); letter-spacing: -0.02em; } .h56 { font: 800 56px/1 var(--font-heading); } .h64 { font: 800 64px/1 var(--font-heading); }
.h2 { margin: 0; font: 800 32px/1.2 var(--font-heading); letter-spacing: -0.015em; }
.lead { margin: 0; max-width: 620px; font: 400 15px/1.65 var(--font-body); color: var(--color-neutral-800); }
.lead.light { color: var(--color-neutral-300); font-size: 16px; max-width: 560px; }
.spin { display: inline-block; flex: none; width: 12px; height: 12px; border: 2px solid var(--color-accent); border-right-color: transparent; animation: psi-spin .8s linear infinite; }
.spin-light { border-color: var(--color-bg); border-right-color: transparent; }
.sq { display: inline-block; width: 10px; height: 10px; flex: none; border: 1.5px solid currentColor; }
.sq.on { background: var(--color-accent); border-color: var(--color-accent); width: 8px; height: 8px; }
.boot, .loading { display: flex; align-items: center; gap: 10px; padding: 40px; font: 700 14px/1 var(--font-body); color: var(--color-neutral-700); }

/* ── 버튼 (디자인: 라벨은 왼쪽 정렬) ── */
.btn { justify-content: flex-start; white-space: nowrap; flex: none; gap: 8px; }
.btn-lg { height: 48px; padding: 0 20px; font-size: 15px; }
.btn-md { height: 44px; padding: 0 16px; font-size: 14px; }
.btn-sm { height: 36px; padding: 0 12px; font-size: 13px; }
.btn-xs { height: 30px; padding: 0 10px; font: 700 12px/1 var(--font-body); gap: 6px; }
.btn-line { border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); }
.btn-line:hover { background: var(--color-neutral-200); }
.btn-ink { border: 1px solid var(--color-text); background: transparent; color: var(--color-text); cursor: pointer; }
.btn-ink:hover { background: var(--color-neutral-200); }
.btn-dark { background: var(--color-text); color: var(--color-bg); border: 1px solid var(--color-text); }
.btn-dark:hover { background: var(--color-neutral-800); }
.btn-onink { border: 1px solid var(--color-neutral-500); background: transparent; color: var(--color-bg); text-decoration: none; }
.btn-onink:hover { background: var(--color-neutral-800); color: var(--color-bg); }
.btn-ghost-ink { background: transparent; color: var(--color-neutral-800); }
.btn-ghost-ink:hover { color: var(--color-accent); }
a.btn { text-decoration: none; }
a.btn-line, a.btn-line:hover { color: var(--color-text); }
.btn-primary:disabled, .btn-dark:disabled { opacity: 0.45; }
.linkbtn { border: 0; padding: 0; background: transparent; cursor: pointer; font: 700 12px/1.2 var(--font-body); color: var(--color-accent-700); }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.linkbtn.light { color: var(--color-accent-400); }
/* 지우기 단추 — 평소에는 무채색 테두리, 마우스를 올리면 빨강 (확인 단계의 '삭제' 는 처음부터 빨강) */
.delbtn { height: 26px; padding: 0 10px; flex: none; border: 1px solid var(--color-neutral-400); background: transparent; cursor: pointer;
  color: var(--color-neutral-700); font: 700 12px/1 var(--font-body); transition: background .12s, border-color .12s, color .12s; }
.delbtn:hover, .delbtn:focus-visible { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-bg); }
.delbtn.solid { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-bg); }
.delbtn.solid:hover { background: var(--color-danger-700); border-color: var(--color-danger-700); }
.iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--color-divider); background: transparent; cursor: pointer; flex: none; }
.iconbtn:hover { background: var(--color-neutral-200); }
.xbtn { width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; color: var(--color-neutral-700); font: 700 16px/1 var(--font-body); }
.chipbtn { height: 34px; padding: 0 12px; border: 1px solid var(--color-divider); background: transparent; cursor: pointer; font: 700 13px/1 var(--font-body); }
.chipbtn.on { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }

/* 버튼 묶음 (하나 고르기) */
.segb { display: inline-flex; border: 1px solid var(--color-divider); max-width: 100%; }
.segb > button { flex: 1; height: 42px; padding: 0 14px; border: 0; background: transparent; cursor: pointer; font: 700 14px/1 var(--font-body); white-space: nowrap; }
.segb > button + button { border-left: 1px solid var(--color-divider); }
.segb > button:hover:not(.on):not(:disabled) { background: var(--color-neutral-200); }
.segb > button.on { background: var(--color-text); color: var(--color-bg); }
.segb > button:disabled { opacity: 0.45; cursor: not-allowed; }
.segb-sm > button { height: 30px; padding: 0 10px; font-size: 12px; }
.page .segb > button, .rv-head .segb > button { height: 38px; font: 600 13px/1 var(--font-body); }

/* 진행 막대 */
.bar { display: block; flex: 1; height: 6px; background: var(--color-neutral-300); min-width: 60px; }
.bar > span { display: block; height: 6px; background: var(--color-accent); transition: width .3s; }
.bar-dark { background: var(--color-neutral-800); }

/* 상태 배지 */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font: 700 12px/1.3 var(--font-body); white-space: nowrap; border: 1px solid var(--color-text); flex: none; }
.badge-mark { width: 8px; height: 8px; border: 1.5px solid currentColor; }
.badge-producing { border-color: var(--color-neutral-300); background: var(--color-neutral-300); color: var(--color-neutral-900); }
.badge-producing .badge-mark { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.badge-confirm { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
.badge-confirm .badge-mark { background: currentColor; border: 0; }
.badge-revision { border-color: var(--color-danger-300); background: var(--color-danger-100); color: var(--color-danger-800); }
.badge-revision .badge-mark { width: 7px; height: 7px; border: 0; background: var(--color-danger-700); transform: rotate(45deg); }
.badge-approved { background: var(--color-text); color: var(--color-bg); }
.badge-draft { border-style: dashed; color: var(--color-neutral-700); border-color: var(--color-neutral-500); }
.badge-returned { border-style: dashed; border-color: var(--color-danger-700); color: var(--color-danger-800); background: var(--color-danger-100); }
.badge-returned .badge-mark { border-color: var(--color-danger-700); }
.badge-closed { border-color: var(--color-neutral-500); background: var(--color-neutral-200); color: var(--color-neutral-700); }
.badge-closed .badge-mark { width: 8px; height: 2px; border: 0; background: currentColor; }
/* 의뢰 반환 창 — 방식 고르기 · 작성 화면의 반환 사유 띠 */
.retopt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--color-divider); cursor: pointer; }
.retopt.on { border-color: var(--color-text); background: var(--color-neutral-100); }
.retopt input { margin-top: 3px; accent-color: var(--color-text); }
.retbanner { margin: 0 0 4px; }

/* 알림 · 토스트 · 대화상자 */
.alert { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 12px 14px; border: 2px solid var(--color-danger); background: var(--color-danger-100); color: var(--color-danger-800); }
.alert-body { display: flex; flex-direction: column; gap: 2px; font: 400 13px/1.45 var(--font-body); }
.alert-body strong { font: 700 14px/1.4 var(--font-body); }
.toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 12px; max-width: min(720px, 92vw);
  padding: 14px 18px; background: var(--color-text); color: var(--color-bg); box-shadow: var(--shadow-lg); font: 600 14px/1.4 var(--font-body); }
.toast-error { background: var(--color-danger-800); }
.dlg-back { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--color-neutral-900) 58%, transparent); }
.dlg { width: 540px; max-width: 100%; max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--color-bg); box-shadow: var(--shadow-lg); }
.dlg-wide { width: 640px; }
.dlg-accent { border-top: 4px solid var(--color-accent); }
.dlg-ink { border-top: 4px solid var(--color-text); }
/* 오른쪽에 붙는 대화상자 — 화면을 덮지 않아 3D 를 돌려 볼 수 있다 (오른쪽 패널 자리를 덮는다) */
.dlg-dock { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: 384px; max-width: 100%; max-height: none; gap: 16px; padding: 24px 20px; border-top: 0; border-left: 4px solid var(--color-text); }
.dlg-dock .dlg-head h2 { font-size: 20px; }
.dlg-dock .dlg-actions { margin-top: auto; }
.dlg-head { display: flex; flex-direction: column; gap: 6px; }
.dlg-head h2 { margin: 0; font: 800 24px/1.25 var(--font-heading); }
.dlg-head span { font: 400 14px/1.5 var(--font-body); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ── 실행 로그 창 (logview.js) — 화면 위에 반투명하게 · 뒤 화면은 그대로 쓴다. --logv-a = 바탕 불투명도 (1 - 투명도) ── */
.logv { position: fixed; z-index: 60; display: flex; flex-direction: column; min-width: 320px; min-height: 180px; resize: both; overflow: hidden;
  background: rgb(24 22 21 / var(--logv-a, .65)); color: #ece8e4; border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 12px 32px rgb(0 0 0 / .32); }
.logv-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 14px; background: rgb(24 22 21 / var(--logv-ha, .9));
  border-bottom: 1px solid rgb(255 255 255 / .12); cursor: move; user-select: none; touch-action: none; }
.logv-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; overflow: hidden; white-space: nowrap; }
.logv-title b { font: 700 13px/1.2 var(--font-body); overflow: hidden; text-overflow: ellipsis; }
.logv-st { font: 600 11.5px/1 var(--font-body); color: #b9b3ad; font-variant-numeric: tabular-nums; }
.logv-st.live { color: var(--color-accent-400); }
.logv-st.bad { color: var(--color-accent-2-400); }
.logv-alpha { flex: none; display: flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--font-body); color: #d6d1cc; cursor: default; }
.logv-alpha input { width: 96px; accent-color: var(--color-accent); cursor: pointer; }
.logv-alpha b { width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.logv-btn { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: #ece8e4; cursor: pointer; }
.logv-btn:hover { background: rgb(255 255 255 / .12); }
.logv-btn:disabled { opacity: .4; cursor: default; background: transparent; }
.logv-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px 16px; font: 400 12px/1.55 ui-monospace, 'Cascadia Mono', Consolas, monospace; text-shadow: 0 1px 2px rgb(0 0 0 / .75); }
.logv-line { white-space: pre-wrap; word-break: break-all; }
.logv-line.step { color: var(--color-accent-300); font-weight: 700; }
.logv-line.err { color: #ff9784; }
.logv-line.note { color: #bdb7b1; }
.logv-end { position: absolute; right: 24px; bottom: 20px; display: flex; align-items: center; gap: 6px; padding: 7px 11px; border: 0; background: var(--color-accent);
  color: var(--color-on-accent); font: 700 12px/1 var(--font-body); cursor: pointer; box-shadow: 0 4px 12px rgb(0 0 0 / .3); }
@media (max-width: 600px) { .logv-alpha input { width: 64px; } .logv-st { display: none; } }
.check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font: 400 13px/1.45 var(--font-body); }
.check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--color-accent); flex: none; }
.check.strong { font: 700 14px/1.5 var(--font-body); }
.empty { display: flex; flex-direction: column; gap: 6px; padding: 32px 0; }

/* 표 · 키-값 */
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--color-divider); font: 400 13px/1.4 var(--font-body); }
.kv > span { color: var(--color-neutral-700); }
.kv > b { font-weight: 700; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.kv.sm { grid-template-columns: 96px 1fr; padding: 10px 0; }
.kvlist { display: flex; flex-direction: column; border-top: 2px solid var(--color-divider); }
.kvlist .kv { font-size: 14px; }
.kvlist.wide .kv { grid-template-columns: 160px 1fr; }
.kvgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.kvgrid .kv { grid-template-columns: 120px 1fr; font-size: 14px; padding: 12px 0; }
.tbl { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--font-body); }
.tbl th { text-align: left; padding: 10px 12px; font: 700 12px/1 var(--font-body); color: var(--color-neutral-700); border-bottom: 2px solid var(--color-divider); }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl td { padding: 14px 12px; border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr.norow { cursor: default; }
.tbl tbody tr:hover { background: var(--color-neutral-200); }
.tbl.small td { padding: 8px 12px; font-size: 13px; }
.cta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 10px; font: 800 13px/1 var(--font-heading); border: 1px solid var(--color-divider); }
.cta.act { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.rolechip { display: inline-block; margin-right: 4px; padding: 2px 6px; border: 1px solid var(--color-divider); font: 700 11px/1.3 var(--font-body); }
.norows { display: flex; align-items: center; gap: 16px; padding: 32px 0; border-bottom: 1px solid var(--color-divider); }
.search { position: relative; display: block; width: 300px; }
.search .ic { position: absolute; left: 12px; top: 11px; color: var(--color-neutral-700); }
.search input { width: 100%; height: 38px; padding: 0 12px 0 36px; font: 400 14px/1 var(--font-body); background: var(--color-surface); border: 1px solid var(--color-divider); color: var(--color-text); }
.search input:focus { border-color: var(--color-accent); outline: none; }

/* 입력 */
.inp { width: 100%; height: 44px; padding: 0 12px; font: 400 14px/1 var(--font-body); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 0; color: var(--color-text); }
.inp:focus { border-color: var(--color-accent); outline: none; box-shadow: inset 0 0 0 1px var(--color-accent); }
.inp.bad { border-color: var(--color-danger); }
.inp.w260 { width: 260px; }
.inp[readonly] { background: var(--color-bg); }
.inp.sm { height: 36px; font-size: 13px; }
.inp.xs { height: 32px; padding: 0 8px; font: 600 13px/1 var(--font-body); background: var(--color-bg); min-width: 0; }
.inp.ta { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
.inp.ta.sm { min-height: 76px; }
select.inp { cursor: pointer; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld.span2 { grid-column: span 2; }
.flabel { font: 700 13px/1 var(--font-body); }
.hint { font: 400 12px/1.45 var(--font-body); color: var(--color-neutral-700); }
.ferr { font: 700 12px/1.4 var(--font-body); color: var(--color-danger-700); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }

/* ── 상단바 ── */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.app-fixed { height: 100vh; overflow: hidden; }
.topnav { position: relative; z-index: 30; height: 56px; flex: none; display: flex; align-items: stretch; background: var(--color-bg); border-bottom: 2px solid var(--color-divider); }
.topnav-brand { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 24px; border: 0; border-right: 2px solid var(--color-divider); background: transparent; cursor: pointer; font: 400 18px/1 var(--font-heading); white-space: nowrap; }
@media (max-width: 900px) { .topnav-brand > span { display: none; } }    /* 좁은 화면은 로고만 — 'Client Portal' 이 메뉴와 겹치지 않게 */
.topnav-brand b { font: 800 18px/1 var(--font-heading); letter-spacing: -0.01em; }
.brand-logo { height: 22px; width: auto; flex: none; display: block; }      /* EASO 로고 (static/brand/easo-logo.png) */
.brand-logo.lg { height: 30px; }
.topnav-items { display: flex; align-items: stretch; }
.topnav-item { position: relative; display: flex; align-items: center; padding: 0 20px; border: 0; background: transparent; cursor: pointer; font: 600 14px/1 var(--font-body); }
.topnav-item:hover { color: var(--color-accent); }
.topnav-item.active::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -2px; height: 3px; background: var(--color-accent); }
.topnav-chip { display: flex; align-items: center; padding: 0 16px; }
.topnav-chip span { white-space: nowrap; padding: 3px 8px; border: 1px solid var(--color-text); font: 700 11px/1.3 var(--font-body); letter-spacing: 0.04em; }
.topnav-step { display: flex; align-items: center; gap: 6px; padding: 0 16px; border: 0; border-left: 2px solid var(--color-divider); background: transparent; cursor: pointer; white-space: nowrap; font: 600 12px/1 var(--font-body); color: var(--color-neutral-700); }
.topnav-step:hover { background: var(--color-neutral-200); color: var(--color-text); }
.topnav-step.on { color: var(--color-accent-700); background: var(--color-accent-100); font-variant-numeric: tabular-nums; }   /* 중요 작업 인증 중 · 남은 시간 */
.topnav-step.on:hover { background: var(--color-accent-200); }
@media (max-width: 900px) { .topnav-step > span { display: none; } .topnav-step { padding: 0 14px; } }   /* 좁은 화면은 자물쇠만 */
.topnav-icon { position: relative; width: 56px; border: 0; border-left: 2px solid var(--color-divider); background: transparent; cursor: pointer; display: grid; place-items: center; }
.topnav-icon:hover, .topnav-icon.open, .topnav-user:hover, .topnav-user.open { background: var(--color-neutral-200); }
.topnav-badge { position: absolute; top: 10px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--color-accent); color: var(--color-on-accent); font: 800 10px/16px var(--font-body); }
.topnav-user { display: flex; align-items: center; gap: 12px; padding: 0 20px; border: 0; border-left: 2px solid var(--color-divider); background: transparent; cursor: pointer; text-align: left; }
.topnav-who { display: flex; flex-direction: column; gap: 2px; }
.topnav-who b { font: 700 14px/1.2 var(--font-body); }
.topnav-who span { font: 400 12px/1.2 var(--font-body); color: var(--color-neutral-700); }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: none; background: var(--color-text); color: var(--color-bg); font: 800 13px/1 var(--font-body); }
.avatar.sm { width: 24px; height: 24px; font-size: 11px; }
.menu { position: absolute; top: 58px; right: 0; z-index: 40; background: var(--color-bg); border: 2px solid var(--color-text); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.menu-notif { width: 400px; }
.menu-user { width: 240px; }
.menu-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 2px solid var(--color-divider); font: 800 15px/1 var(--font-heading); }
.menu-empty { margin: 0; padding: 18px 16px; color: var(--color-neutral-700); font-size: 13px; }
.menu-scroll { max-height: 60vh; overflow: auto; }
.menu-item { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--color-divider); background: transparent; text-align: left; cursor: pointer; font: 600 14px/1 var(--font-body); }
.menu-item:hover { background: var(--color-neutral-200); }
.menu-item.danger { color: var(--color-danger-700); border-bottom: 0; }
.notif { width: 100%; display: grid; grid-template-columns: 10px 1fr; gap: 12px; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--color-divider); background: transparent; text-align: left; cursor: pointer; }
.notif:hover { background: var(--color-neutral-200); }
.notif-dot { width: 8px; height: 8px; margin-top: 6px; background: var(--color-neutral-400); }
.notif-dot.on { background: var(--color-text); }
.notif-dot.hot { background: var(--color-accent); }
.notif-body { display: flex; flex-direction: column; gap: 4px; }
.notif-text { font: 600 13px/1.45 var(--font-body); }
.notif-time { font: 400 12px/1.2 var(--font-body); color: var(--color-neutral-700); }

/* ── 로그인 ── */
/* 소개 문구와 로그인 칸을 화면 가운데 한 묶음으로 — 넓은 화면에서도 좌우 끝으로 갈라지지 않게 (좁으면 위아래로) */
.login { min-height: 100vh; display: grid; place-items: center; padding: 48px 40px; }
.login-wrap { width: 100%; max-width: 1280px; display: grid; grid-template-columns: minmax(0, max-content) 540px; justify-content: center; align-items: center; gap: 80px; }
.login-brand { display: flex; flex-direction: column; gap: 44px; }
.brandline { display: flex; align-items: center; gap: 10px; font: 400 20px/1 var(--font-heading); }
.brandline b { font: 800 20px/1 var(--font-heading); }
.login-hero { display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
.login-hero h1 { margin: 0; font: 800 clamp(28px, 4.2vw, 60px)/1.12 var(--font-heading); letter-spacing: -0.025em; }   /* 넓은 화면은 예전 크기(60px) 그대로 */
.login-hero p { margin: 0; max-width: 540px; font: 400 17px/1.6 var(--font-body); color: var(--color-neutral-800); }
.login-panel { display: flex; flex-direction: column; gap: 28px; padding: 44px 48px 28px; background: var(--color-surface); border: 1px solid var(--color-divider); }
@media (max-width: 1140px) {
  .login-wrap { grid-template-columns: minmax(0, 560px); justify-content: center; gap: 40px; }
}
@media (max-width: 600px) {
  .login { padding: 24px 16px; place-items: start center; }
  .login-brand { gap: 28px; }
  .login-hero p { font-size: 15px; }
  .login-panel { padding: 28px 20px 20px; }
  .login-panel .lgrid { grid-template-columns: minmax(0, 1fr); }
  .login-panel .lgrid > .span2 { grid-column: auto; }
}
.login-form { display: flex; flex-direction: column; gap: 18px; }
.lhead { display: flex; flex-direction: column; gap: 6px; }
.lhead h2 { margin: 0; font: 800 30px/1.15 var(--font-heading); }
.lhead p { margin: 0; font: 400 14px/1.5 var(--font-body); }
.lfield { display: flex; flex-direction: column; gap: 6px; }
.lfield > span { font: 600 13px/1 var(--font-body); color: var(--color-neutral-800); }
.lfield.span2 { grid-column: span 2; }
.lgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.linput { width: 100%; height: 42px; padding: 0 12px; font: 400 14px/1 var(--font-body); color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: 0; outline: none; }
.linput.tall { height: 48px; padding: 0 14px; font-size: 15px; }
.linput:focus { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.linput.bad { border-color: var(--color-danger); }
.pw { position: relative; display: block; }
.pw .linput { padding-right: 48px; }
.pw button { position: absolute; right: 0; top: 0; width: 44px; height: 100%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--color-neutral-700); }
.pwchecks { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 600 12px/13px var(--font-body); color: var(--color-neutral-700); }
.pwc { display: inline-flex; align-items: center; gap: 5px; }
.pwc .sq { width: 9px; height: 9px; margin: 2px; }
.pwc.ok { color: var(--color-text); }
.pwc.ok .ic { color: var(--color-accent-600); }
.lbtn { height: 48px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 18px; border: 0; cursor: pointer; font: 800 15px/1 var(--font-heading); }
.lbtn.tall { height: 52px; font-size: 16px; }
.lbtn.primary { background: var(--color-accent); color: var(--color-on-accent); }
.lbtn.primary:hover { background: var(--color-accent-600); }
.lbtn.primary:disabled { opacity: 0.45; cursor: not-allowed; }
.lbtn.line { height: 44px; border: 1px solid var(--color-divider); background: transparent; font-size: 14px; }
.lbtn.line:hover { background: var(--color-neutral-200); }
/* 가입 이메일 인증 — 이메일 · 인증번호 칸 옆 단추 */
.codeline { display: flex; gap: 8px; }
.codeline .linput { flex: 1; min-width: 0; }
.linput.code { letter-spacing: 0.32em; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.lbtn.code { height: 42px; flex: none; gap: 8px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
.lbtn.code:disabled { opacity: 0.45; cursor: not-allowed; }
.lbtn.code:disabled:hover { background: transparent; }
.codeok { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; flex: none; background: var(--color-accent-100); color: var(--color-accent-800); font: 700 13px/1 var(--font-body); white-space: nowrap; }
.codenote { margin: 0; font: 400 12px/1.5 var(--font-body); color: var(--color-neutral-700); }
.codenote.bad { color: var(--color-danger); font-weight: 600; }
.lgrid > .span2 { grid-column: span 2; }
.backlink { align-self: flex-start; display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; cursor: pointer; font: 600 13px/1 var(--font-body); color: var(--color-neutral-700); }
.consents { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--color-bg); }
.lrow { display: flex; align-items: center; justify-content: space-between; }
.lsignup { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--color-divider); }
.lsignup b { font: 800 15px/1.3 var(--font-heading); }
.lsignup span { font-size: 13px; }
.pending-mark { width: 48px; height: 48px; display: grid; place-items: center; background: var(--color-text); color: var(--color-bg); }
.plist { display: flex; flex-direction: column; border-top: 2px solid var(--color-divider); }
.plist > div { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--color-divider); font: 400 13px/1 var(--font-body); }
.plist > div b { font: 700 14px/1 var(--font-body); }
.plist > div.dim { color: var(--color-neutral-700); }
.login-foot { font: 400 12px/1.4 var(--font-body); color: var(--color-neutral-700); }
.small { font-size: 12px; }
.forced { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--color-surface); }
.pwbox { width: 480px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--color-bg); border-top: 4px solid var(--color-accent); }
.page .pwbox { border: 2px solid var(--color-divider); border-top: 4px solid var(--color-text); }
/* 인증 앱(OTP) — 등록(단계 · QR · 키) · 번호 확인 · 백업 코드 */
.pwbox.wide { width: 560px; }
.mfasteps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 16px; }
.mfasteps > li { counter-increment: s; position: relative; display: flex; flex-direction: column; gap: 8px; padding-left: 34px; font: 400 13px/1.5 var(--font-body); }
.mfasteps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: grid; place-items: center; background: var(--color-text); color: var(--color-bg); font: 800 12px/1 var(--font-body); }
.mfasteps > li > b { font: 700 14px/1.4 var(--font-body); }
.mfaqr { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.qrsvg, .qrwait { width: 168px; height: 168px; flex: none; display: block; border: 1px solid var(--color-divider); }
.qrwait { display: grid; place-items: center; border-style: dashed; }
.secretkey { font: 700 13px/1.6 ui-monospace, Consolas, monospace; letter-spacing: 0.04em; word-break: break-all; }
.nextcode { font: 700 13px/1.4 var(--font-body); color: var(--color-accent-700); font-variant-numeric: tabular-nums; }   /* 방금 쓴 번호 — 다음 번호까지 남은 초 */
.bcodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; padding: 14px 16px; background: var(--color-surface); }
.bcodes code { font: 700 15px/1.6 ui-monospace, Consolas, monospace; letter-spacing: 0.06em; }

/* ── 페이지 (대시보드 · 관리 · 설계 작업) ── */
.page { display: flex; flex-direction: column; gap: 32px; padding: 32px 40px 56px; }
.page.narrow { max-width: 900px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.eyebrow { font: 600 13px/1 var(--font-body); color: var(--color-neutral-700); }
.page-title { margin: 0; font: 800 40px/1.05 var(--font-heading); letter-spacing: -0.02em; }
/* 상태별 칸 — 한 줄로 얇게 (상태 · 수) : 주문 단추가 먼저 눈에 들어오게 */
.cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.cell { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.cell + .cell { border-left: 1px solid var(--color-divider); }
.cell:hover { box-shadow: inset 0 -3px 0 var(--color-accent); }
.cell.sel { background: var(--color-text); color: var(--color-bg); }
.cell.dim { cursor: default; color: var(--color-neutral-600); box-shadow: none; }
.cell-label { font: 700 13px/1 var(--font-body); }
.cell-num { font: 800 24px/1 var(--font-heading); font-variant-numeric: tabular-nums; }
.cell-num.hot { color: var(--color-accent-700); }
/* 주문 — 의뢰 현황 맨 위 가운데, 가장 크게 */
.orderband { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px 48px; padding: 28px 32px; background: var(--color-accent-100); border: 1px solid var(--color-accent-300); }
.orderband-title { font: 800 24px/1.2 var(--font-heading); }
.orderband-sub { font: 400 14px/1.5 var(--font-body); color: var(--color-neutral-800); }
.btn.orderbtn { height: 64px; min-width: 240px; padding: 0 40px; justify-content: center; gap: 12px; font: 800 22px/1 var(--font-heading); letter-spacing: 0.02em; box-shadow: 0 6px 18px rgba(77, 142, 19, 0.28); }
.btn.orderbtn:hover { box-shadow: 0 8px 22px rgba(77, 142, 19, 0.36); }
@media (max-width: 760px) {
  .orderband { padding: 20px 16px; text-align: center; }
  .orderband .col { align-items: center; }
  .btn.orderbtn { width: 100%; }
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell + .cell { border-left: 0; }
  .cell { border-bottom: 1px solid var(--color-divider); }
}
.hero-empty { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--color-surface); border-top: 2px solid var(--color-text); }
.countchip { padding: 2px 8px; background: var(--color-accent); color: var(--color-on-accent); font: 800 13px/1.4 var(--font-body); }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acard { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--color-surface); border-top: 3px solid var(--color-text); }
.acard.hot { border-top-color: var(--color-accent); }
.verchip { padding: 3px 7px; border: 1px solid var(--color-divider); font: 700 12px/1.3 var(--font-body); }
.dnum { font: 800 24px/1 var(--font-heading); font-variant-numeric: tabular-nums; }
.engbox { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--color-bg); border-left: 3px solid var(--color-text); }
.engbox.tone-hot { border-left-color: var(--color-accent); }
.engbox.tone-warn { border-left-color: var(--color-danger); }
.engbox.tone-mute { border-left-color: var(--color-neutral-400); }
.memo { margin: 0; padding-top: 12px; border-top: 1px solid var(--color-divider); font: 400 13px/1.55 var(--font-body); color: var(--color-neutral-800); }
.drafts { display: flex; flex-direction: column; border-top: 2px solid var(--color-divider); }
.draft { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.draft > span:first-child { flex: 1; }
.trial { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; background: var(--color-surface); border-top: 3px solid var(--color-text); }

/* ── 새 의뢰 ── */
.wiz { display: flex; flex-direction: column; min-height: calc(100vh - 58px); }
.wiz-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 28px 40px 0; }
.crumb { display: flex; gap: 8px; font: 600 13px/1 var(--font-body); color: var(--color-neutral-700); }
.crumb a { color: var(--color-neutral-700); }
.steps { list-style: none; margin: 24px 40px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps li { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px 0; border-top: 4px solid var(--color-neutral-300); color: var(--color-neutral-600); }
.steps li b { font: 800 17px/1.2 var(--font-heading); }
.steps li.act { border-top-color: var(--color-accent); color: var(--color-text); }
.steps li.done { border-top-color: var(--color-text); color: var(--color-text); }
.stepn { display: flex; align-items: center; gap: 8px; font: 800 13px/1 var(--font-body); }
.steps li.act .stepn { color: var(--color-accent-700); }
.wiz-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; padding: 32px 40px 40px; align-items: start; }
.wiz-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.wiz-aside { position: sticky; top: 24px; display: flex; flex-direction: column; background: var(--color-surface); padding: 20px; }
.asidehead { font: 800 15px/1 var(--font-heading); padding-bottom: 12px; border-bottom: 2px solid var(--color-divider); }
.wiz-aside .kv { grid-template-columns: 96px 1fr; }
.wiz-foot { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 16px 40px; background: var(--color-bg); border-top: 2px solid var(--color-divider); }
.w220.btn { min-width: 220px; width: auto; }
.drop { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; padding: 28px; border: 2px dashed var(--color-divider); }
.drop.on { border-color: var(--color-accent); background: var(--color-accent-100); }
.dropinfo { margin: 0; display: flex; flex-direction: column; border-left: 2px solid var(--color-divider); padding-left: 20px; font: 400 13px/1.45 var(--font-body); }
.dropinfo dt { font: 800 13px/1 var(--font-body); }
.dropinfo dd { margin: 4px 0 14px; color: var(--color-neutral-800); }
.confirmbox { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 16px; background: var(--color-surface); cursor: pointer; font: 400 14px/1.5 var(--font-body); }
.confirmbox input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-accent); }
.confirmbox.strong { background: transparent; border: 2px solid var(--color-text); }
.upbox { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--color-text); color: var(--color-bg); }
.files { display: flex; flex-direction: column; }
.filehead, .filerow { display: grid; grid-template-columns: 28px minmax(0, 1fr) 80px 100px 150px; gap: 12px; align-items: center; }
.filehead { padding: 0 0 10px; border-bottom: 2px solid var(--color-divider); font: 700 12px/1 var(--font-body); color: var(--color-neutral-700); }
.filerow { padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.filerow.bad { background: var(--color-danger-100); }
.filerow.dim { color: var(--color-neutral-700); }
.filerow.pick { cursor: pointer; }
.filerow.pick:hover { background: var(--color-neutral-100); }
.filerow.on { background: var(--color-accent-100); }
.radio { width: 14px; height: 14px; margin-left: 6px; border: 2px solid var(--color-neutral-500); border-radius: 50%; }
.filerow.pick .radio { border-color: var(--color-text); }
.radio.on { border: 4px solid var(--color-accent); }
.seriesfoot { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 4px; font-family: var(--font-body); }
.intake { display: flex; flex-direction: column; border-top: 2px solid var(--color-text); }
/* 익명화 미리보기 (이 PC 안에서만) */
.dlg.dlg-preview { width: 1180px; }
.pv2 { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 24px; align-items: start; }
.pv2-img { display: flex; flex-direction: column; gap: 10px; }
.pv2-img canvas { display: block; width: 100%; height: auto; background: #000; }
.pv2-img canvas.pv2-wait { aspect-ratio: 1; }
.pv2-noimg { display: grid; place-items: center; aspect-ratio: 1; padding: 24px; background: var(--color-neutral-900); color: var(--color-bg); text-align: center; font: 400 13px/1.55 var(--font-body); }
.pv2-head { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pv2-verify { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--color-neutral-100); font: 400 12.5px/1.45 var(--font-body); }
.pv2-verify b { display: inline-flex; align-items: center; gap: 6px; font: 800 13.5px/1.3 var(--font-body); }
.pv2-verify.bad { background: var(--color-danger-100); color: var(--color-danger-800); }
.pv2-scroll { max-height: 52vh; overflow: auto; border-top: 2px solid var(--color-divider); }
.pv2-tbl { width: 100%; border-collapse: collapse; font: 400 12.5px/1.45 var(--font-body); }
.pv2-tbl th { position: sticky; top: 0; z-index: 1; padding: 7px 8px; text-align: left; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); font: 700 12px/1.2 var(--font-body); color: var(--color-neutral-700); }
.pv2-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--color-divider); vertical-align: top; word-break: break-all; }
.pv2-tbl td:first-child { width: 34%; word-break: normal; }
.pv2-tag { font: 400 11px/1.3 ui-monospace, Consolas, monospace; color: var(--color-neutral-600); }
.pv2-gone { color: var(--color-danger-700); font-weight: 700; }
.pv2-new { color: var(--color-accent-800); font-weight: 700; }
@media (max-width: 960px) { .pv2 { grid-template-columns: 1fr; } }
.sidechk { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: 16px 18px; border: 2px solid var(--color-danger-700); }   /* CT 좌우 확인 */
.sidechk-head { display: flex; align-items: center; gap: 8px; color: var(--color-danger-800); }
.sidechk-why { margin: 0; padding-left: 18px; font: 400 13px/1.6 var(--font-body); color: var(--color-neutral-800); }
.intake-head { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 2px solid var(--color-divider); }
.irow { display: grid; grid-template-columns: 22px 104px 1fr; gap: 10px; padding: 12px 8px 12px 0; border-bottom: 1px solid var(--color-divider); }
.irow.bad { background: var(--color-danger-100); }
.imark { padding-left: 4px; font: 800 14px/1.35 var(--font-body); }
.m-ok { color: var(--color-text); } .m-warn { color: var(--color-danger-700); } .m-err { color: var(--color-danger); } .m-info { color: var(--color-neutral-600); } .m-wait { color: var(--color-neutral-500); }
.sechead { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 2px solid var(--color-divider); }
.done { flex: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-bottom: 2px solid var(--color-divider); }
.done-main { display: flex; flex-direction: column; gap: 28px; padding: 56px 40px; }
.done-mark { width: 56px; height: 56px; display: grid; place-items: center; background: var(--color-text); color: var(--color-bg); }
.done-aside { display: flex; flex-direction: column; padding: 56px 40px; background: var(--color-surface); border-left: 2px solid var(--color-divider); }
.timeline { display: flex; border-top: 2px solid var(--color-divider); }
.timeline > div { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 0; }
.timeline > div + div { border-left: 2px solid var(--color-divider); }
.timeline > div.first { padding-left: 0; border-top: 4px solid var(--color-text); margin-top: -2px; }
.timeline b { font: 800 15px/1.2 var(--font-heading); }

/* ── 의뢰 상세 (검토 · 작업) ── */
.rv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rv-head { display: flex; align-items: center; gap: 20px; height: 68px; flex: none; padding: 0 24px; border-bottom: 2px solid var(--color-divider); background: var(--color-bg); }
.hsep { padding-left: 20px; border-left: 2px solid var(--color-divider); }
.engchip { padding: 4px 8px; border: 1px solid var(--color-divider); font: 700 12px/1.2 var(--font-body); white-space: nowrap; }
.engchip.warn { color: var(--color-danger-700); }
.banner { display: flex; align-items: center; gap: 14px; flex: none; padding: 10px 24px; font: 600 14px/1.4 var(--font-body); }
.banner.ink { background: var(--color-text); color: var(--color-bg); }
.banner.soft { background: var(--color-danger-100); color: var(--color-danger-800); border-bottom: 2px solid var(--color-danger-300); }
.banner b { font-weight: 800; }
.banner.demo { padding: 6px 24px; background: var(--color-surface); color: var(--color-neutral-800); border-bottom: 1px dashed var(--color-neutral-500); font-size: 13px; }
.repbox { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--color-surface); border-left: 3px solid var(--color-text); }
.rv-body { flex: 1; min-height: 0; display: flex; }
.rv-center { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rv-left { width: 340px; flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 2px solid var(--color-divider); background: var(--color-bg); }
.rv-right { width: 384px; flex: none; display: flex; flex-direction: column; min-height: 0; border-left: 2px solid var(--color-divider); background: var(--color-bg); }
.scroll { flex: 1; min-height: 0; overflow: auto; }
.ckitem { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--color-divider); }
.ckitem.flag { background: var(--color-danger-100); }
.ckbody { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.ckbtn { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--color-divider); background: transparent; cursor: pointer; font: 700 12px/1 var(--font-body); white-space: nowrap; }
.ckbtn:disabled { opacity: 0.45; cursor: not-allowed; }
.ckbtn.ok { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.ckbtn.flagged { background: var(--color-danger-700); color: var(--color-bg); border-color: var(--color-danger-700); }
.inp.ta.cknote { min-height: 72px; font-size: 13px; background: var(--color-bg); border-color: var(--color-danger-300, var(--color-divider)); }
.inp.ta.cknote:focus { border-color: var(--color-danger-700); box-shadow: inset 0 0 0 1px var(--color-danger-700); }
.ctlink { height: 30px; padding: 0 8px; border: 1px solid var(--color-accent-700); background: transparent; cursor: pointer; font: 800 12px/1 var(--font-body); color: var(--color-accent-700); }
.decision { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; border-top: 2px solid var(--color-text); }
.decision.ro { flex-direction: row; align-items: center; }
.tabs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 2px solid var(--color-divider); flex: none; }
.tabs3 button { position: relative; height: 46px; border: 0; background: transparent; cursor: pointer; font: 800 14px/1 var(--font-body); color: var(--color-neutral-700); }
.tabs3 button + button { border-left: 1px solid var(--color-divider); }
.tabs3 button.on { color: var(--color-text); }
.tabs3 button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--color-accent); }
.subhead { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--color-divider); font: 800 13px/1 var(--font-body); }
.memobox { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding: 16px; background: var(--color-surface); }
.verrow { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-bottom: 2px solid var(--color-divider); }
.infonote { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: var(--color-surface); border-left: 3px solid var(--color-accent); font: 400 13px/1.5 var(--font-body); }
.infonote b { font: 700 14px/1.4 var(--font-body); }
.infonote.warn { border-left-color: var(--color-danger); background: var(--color-danger-100); }
.rawlog { margin: 0; padding: 10px 12px; max-height: 240px; overflow: auto; background: var(--color-surface); white-space: pre-wrap; word-break: break-all; }
.auditlog td { vertical-align: top; }
.idlechip { padding: 1px 6px; border: 1px solid var(--color-danger); color: var(--color-danger-800); font: 700 11px/1.4 var(--font-body); white-space: nowrap; }
pre.mailbody { margin: 0; padding: 14px 16px; max-height: 50vh; overflow: auto; background: var(--color-bg); white-space: pre-wrap; word-break: break-word; font: 400 13px/1.6 var(--font-body); }
.verrow.dim { color: var(--color-neutral-700); }                   /* 컨펌 요청을 취소한 버전 */
.verrow.dim .h20 { text-decoration: line-through; text-decoration-thickness: 2px; }
.vtag { padding: 3px 7px; font: 700 11px/1.3 var(--font-body); }
.vtag.accent { background: var(--color-accent); color: var(--color-on-accent); }
.vtag.ink { background: var(--color-text); color: var(--color-bg); }
.vtag.soft { background: var(--color-danger-100); color: var(--color-danger-800); }
.vtag.line { padding: 2px 5px; border: 1px solid var(--color-divider); font-size: 10px; }
.comment { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--color-divider); cursor: pointer; }
.comment:hover { background: var(--color-neutral-200); }
.comment.active { background: var(--color-accent-100); }
.pinbadge { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border: 2px solid var(--color-text); background: var(--color-bg); font: 800 11px/1 var(--font-body); }
.pinbadge.active { background: var(--color-accent); color: var(--color-on-accent); }
.pinbadge.resolved { background: var(--color-neutral-600); color: var(--color-bg); }
.pinbadge.pinoff { opacity: 0.35; }                                  /* 3D 에서 숨긴 핀 (.hidden 은 화면에서 빼는 공용 클래스라 쓰지 않는다) */
.pineye { display: grid; place-items: center; width: 24px; height: 24px; flex: none; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--color-neutral-600); }
.pineye:hover { color: var(--color-text); background: var(--color-neutral-200); }
.pineye.off { color: var(--color-neutral-400); }
.pinsbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--color-divider); font: 600 12px/1.3 var(--font-body); color: var(--color-neutral-700); }
.reply { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--color-surface); }
.parambox { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--color-surface); }
.revbox { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--color-danger-100); border-bottom: 2px solid var(--color-danger-300); color: var(--color-danger-800); }
.revbox .p14 { color: var(--color-text); }
.diamond { width: 8px; height: 8px; background: var(--color-danger-700); transform: rotate(45deg); flex: none; }
.chip { white-space: nowrap; padding: 3px 8px; border: 1px solid var(--color-danger-700); color: var(--color-danger-800); font: 700 12px/1.2 var(--font-body); }
.reqline { display: flex; gap: 8px; padding: 8px 10px; background: var(--color-bg); color: var(--color-text); font: 700 13px/1.4 var(--font-body); }
.reqline > .muted:first-child { flex: none; white-space: nowrap; }     /* 이름 칸 (요청값 · 자동 계산) 은 한 줄로 */
.revpin { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 8px 0 0; border: 0; border-top: 1px solid var(--color-danger-300); background: transparent; text-align: left; cursor: pointer; color: var(--color-text); }
.ctrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 2px solid var(--color-divider); }
.engpanel { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-bottom: 2px solid var(--color-divider); }
.etag { padding: 3px 8px; font: 700 12px/1.3 var(--font-body); white-space: nowrap; }
.etag.run { background: var(--color-neutral-300); }
.etag.ok { background: var(--color-text); color: var(--color-bg); }
.etag.warn { background: var(--color-danger); color: var(--color-bg); }
.qcrows { display: flex; flex-direction: column; margin-top: 6px; }
.qcrows > div { display: grid; grid-template-columns: 16px 92px 1fr; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--color-divider); font: 400 12.5px/1.35 var(--font-body); }
.qcrows > div > span:first-child { font-weight: 800; }
.adjbox { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px; border: 2px solid var(--color-text); }
.adjrow { display: grid; grid-template-columns: 56px 1fr 64px 20px; gap: 8px; align-items: center; }
.glenrow { display: grid; grid-template-columns: 76px 90px 1fr; gap: 8px; align-items: center; }   /* 관절와 드릴 축 각도 */
.glenrow .inp { height: 32px; padding: 0 8px; }
.adjrow input[type=range], .vpart input[type=range], .vpanel input[type=range] { width: 100%; accent-color: var(--color-accent); }
.advgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; background: var(--color-bg); }
.modeseg .segb { width: 100%; }
.dropsm { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 2px dashed var(--color-divider); cursor: pointer; }
.dropsm:hover, .dropsm.on { border-color: var(--color-accent); }
.stagerow { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--color-divider); }
.makerfoot { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border-top: 2px solid var(--color-text); flex: none; }
.qcack { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--color-danger-100); color: var(--color-danger-800); }
.measrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--color-bg) 14%, transparent); font: 600 13px/1 var(--font-body); }
.measrow button { margin-left: auto; border: 0; background: transparent; color: var(--color-neutral-400); cursor: pointer; font: 700 14px/1 var(--font-body); }

/* 색 견본 */
.sw { display: inline-block; width: 10px; height: 10px; flex: none; }
.sw-guide { background: var(--color-accent); }
.sw-bone { background: var(--color-neutral-200); }
/* 만들 PSI — 어깨는 상완골 · 관절와 둘 다 기본 (하나만도) */
.partpick { display: flex; flex-wrap: wrap; gap: 10px; }
.pchip { display: flex; align-items: center; gap: 12px; min-width: 230px; padding: 12px 16px; border: 1px solid var(--color-divider); background: var(--color-bg); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pchip:hover { border-color: var(--color-neutral-500); }
.pchip.on { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); background: var(--color-accent-100); }
.pchip.fixed { cursor: default; }
.pchip b { font: 800 15px/1.2 var(--font-heading); }
.pbox { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--color-neutral-500); background: var(--color-bg); color: var(--color-on-accent); }
.pchip.on .pbox { border-color: var(--color-accent); background: var(--color-accent); }
/* 어깨 한 세트 — 3D 뷰어 위 가이드 탭 (목록으로 나가지 않고 오간다) */
.gtabs { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--color-divider); background: var(--color-surface); padding: 0 16px; }
.gtab { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--color-neutral-700); font: 700 14px/1 var(--font-heading); cursor: pointer; }
.gtab:hover { color: var(--color-text); background: var(--color-bg); }
.gtab.on { color: var(--color-text); border-bottom-color: var(--color-accent); background: var(--color-bg); }
.gtab .verchip { font-size: 11px; }
.gtab-note { margin-left: auto; align-self: center; font: 400 12px/1.3 var(--font-body); color: var(--color-neutral-700); }
/* 목록 — 묶음 한 줄의 가이드별 상태 */
.gstat { display: flex; flex-direction: column; gap: 6px; }
.gstat > span { display: flex; align-items: center; gap: 8px; }
.gstat .glabel { font: 700 12px/1 var(--font-body); color: var(--color-neutral-700); min-width: 88px; }
/* 소속 기관(병원) 찾기 */
.dlg-hosp { width: min(560px, calc(100vw - 32px)); }
.hosp-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; min-height: 40px; }
.hosp-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--color-divider); background: var(--color-surface, transparent); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.hosp-item:hover, .hosp-item:focus-visible { border-color: var(--color-accent); outline: none; }
.hosp-foot { border-top: 1px solid var(--color-divider); padding-top: 10px; }
.linput.pick { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; text-align: left; cursor: pointer; min-height: 42px; height: auto; padding: 7px 12px; line-height: 1.25; }
.linput.pick > b, .linput.pick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linput.pick.empty { color: var(--color-neutral-400); }
.mailpref { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-divider); font: 500 14px/1.4 var(--font-body); cursor: pointer; }
.mailpref input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.sw-boneline { background: #f2c230; }                                   /* CT 단면의 뼈 윤곽 (노랑) */
.sw-pin { background: #ec3013; }                                        /* 관절와 계획 핀 경로 (CT 단면) */
.sw-axis { background: var(--color-text); border: 1px solid var(--color-neutral-400); }
.sw-landmark { background: #2f7fd8; }                                   /* 관절와 TS(견갑극 뿌리) · 조준선 */
.sw-other { background: var(--color-neutral-500); }
.sw-ghost { border: 1px solid var(--color-bg); background: color-mix(in srgb, var(--color-bg) 35%, transparent); }
.sw-cut { border: 1.5px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 40%, transparent); }
.sw-was { border: 1.5px solid var(--color-bg); background: transparent; }
.sw-entry { background: var(--color-danger); }
.sw-target { width: 10px; height: 10px; border-radius: 50%; background: var(--color-text); border: 2px solid var(--color-bg); }

/* ── 3D 영역 (어두운 격자 바탕) ── */
.viewer { position: relative; flex: 1; min-height: 0; overflow: hidden; color: var(--color-bg); background-color: var(--color-text);
  background-image: linear-gradient(color-mix(in srgb, var(--color-bg) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-bg) 5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px; }
.stage, .stage-host { position: absolute; inset: 0; }
.viewer.ct .stage { visibility: hidden; }
.v-over { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 72px; background: var(--color-text); color: var(--color-bg); }
.v-over.left { background: transparent; gap: 22px; }
.v-more { position: absolute; left: 16px; bottom: 44px; z-index: 6; display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--font-body); color: var(--color-neutral-300); }
.loadlist { display: flex; flex-direction: column; width: 420px; max-width: 100%; border-top: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent); }
.loadlist > div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent); font: 400 13px/1.2 var(--font-body); }
.loadlist > div.dim { color: var(--color-neutral-500); }
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 150px); border-top: 2px solid color-mix(in srgb, var(--color-bg) 30%, transparent); }
.pipeline > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 0 0; border-top: 4px solid var(--color-neutral-700); margin-top: -2px; }
.pipeline > div b { font: 800 14px/1.2 var(--font-heading); }
.pipeline > div span { font: 400 12px/1.3 var(--font-body); color: var(--color-neutral-400); }
.pipeline .p-done { border-top-color: var(--color-bg); }
.pipeline .p-now { border-top-color: var(--color-accent); }
.pipeline .p-todo b { color: var(--color-neutral-500); }
.engsteps { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); column-gap: 24px; border-top: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent); }
.engsteps > div { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 12%, transparent); font: 400 13px/1.3 var(--font-body); color: var(--color-neutral-600); }
.engsteps > div.done { color: var(--color-neutral-400); }
.engsteps > div.now { color: var(--color-bg); }
.engsteps > div > span:first-child { width: 22px; font-weight: 700; }
.vtools { position: absolute; left: 16px; top: 16px; z-index: 4; display: flex; flex-direction: column; background: var(--color-neutral-900); border: 1px solid color-mix(in srgb, var(--color-bg) 16%, transparent); }
.vtools > button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; cursor: pointer; background: transparent; color: var(--color-bg); }
.vtools > button:hover:not(:disabled) { background: var(--color-neutral-800); }
.vtools > button:disabled { opacity: 0.3; cursor: default; }        /* 되돌리기 · 다시 하기 — 할 것이 없을 때 */
.vtools > button.on { background: var(--color-accent); color: var(--color-on-accent); }
.vtools > button.pinsbtn { position: relative; }                      /* 핀 모두 보이기 · 숨기기 — 보이는 핀 수 */
.vtools .pinscount { position: absolute; right: 3px; bottom: 3px; font: 800 9px/1 var(--font-body); }
.vtools .ctbtn { color: var(--color-accent-300); font: 800 13px/1 var(--font-body); }
.vtools .ctbtn.ctbad { color: var(--color-danger-300); text-decoration: line-through; }   /* CT 단면을 만들지 못함 — 누르면 이유 */
.vtools .ctwait { width: 44px; height: 32px; display: grid; place-items: center; }
.vsep { height: 1px; background: color-mix(in srgb, var(--color-bg) 16%, transparent); }
.vviews { position: absolute; left: 76px; top: 16px; z-index: 4; display: flex; background: var(--color-neutral-900); border: 1px solid color-mix(in srgb, var(--color-bg) 16%, transparent); }
.vviews > button { height: 36px; padding: 0 9px; border: 0; cursor: pointer; background: transparent; color: var(--color-bg); font: 700 12px/1 var(--font-body); white-space: nowrap; }
.vviews > button + button { border-left: 1px solid color-mix(in srgb, var(--color-bg) 14%, transparent); }
.vviews > button:hover { background: var(--color-neutral-800); }
.vviews > button.lit { background: var(--color-neutral-800); color: var(--color-accent-300); box-shadow: inset 0 -3px 0 var(--color-accent); }   /* 지금 시점 */
.vpanel { position: absolute; left: 76px; top: 64px; z-index: 4; width: 300px; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--color-neutral-900); border: 1px solid color-mix(in srgb, var(--color-bg) 16%, transparent); }
.vseg { display: flex; background: var(--color-neutral-900); border: 1px solid color-mix(in srgb, var(--color-bg) 16%, transparent); }
.vseg > button { height: 30px; padding: 0 10px; border: 0; cursor: pointer; background: transparent; color: var(--color-bg); font: 700 12px/1 var(--font-body); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.vseg > button + button { border-left: 1px solid color-mix(in srgb, var(--color-bg) 14%, transparent); }
.vseg > button.on { background: var(--color-bg); color: var(--color-text); }
.vseg > button.lit { background: var(--color-neutral-800); }
.vseg > button.dim { color: var(--color-neutral-500); }
.vseg > button.dim .sw { opacity: 0.3; }
.vseg.full > button { flex: 1; }
.vparts { position: absolute; right: 16px; top: 64px; z-index: 4; width: 250px; display: flex; flex-direction: column; max-height: calc(100% - 90px); overflow: auto; background: var(--color-neutral-900); border: 1px solid color-mix(in srgb, var(--color-bg) 16%, transparent); }
.vparts-head { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; border: 0; background: transparent; cursor: pointer; color: var(--color-bg); font: 800 13px/1 var(--font-body); flex: none; }
.vpart { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--color-bg) 14%, transparent); }
.vpart.off { opacity: 0.5; }
.vpart .pct { width: 34px; text-align: right; font: 600 11px/1 var(--font-body); color: var(--color-neutral-400); }
.eyebtn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; color: var(--color-bg); }
.eyebtn:hover { background: var(--color-neutral-800); }
/* 절단면 미리보기 안내 — 왼쪽 아래 (방향 표시 · 축척 위) */
.pvcard { position: absolute; left: 16px; bottom: 100px; z-index: 4; width: 360px; max-width: calc(100% - 32px); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--color-neutral-900); border: 1px solid color-mix(in srgb, var(--color-bg) 16%, transparent); border-left: 3px solid var(--color-accent); }
.pvrow { display: grid; grid-template-columns: 76px 1fr; gap: 8px; font: 400 12.5px/1.4 var(--font-body); }
.pvrow > span { color: var(--color-neutral-400); }
.pvnum { font: 700 13px/1.35 var(--font-body); }
.pvnote { font: 500 11px/1.5 var(--font-body); color: var(--color-neutral-400); }
.pvshow { position: absolute; left: 16px; bottom: 100px; z-index: 4; }
/* 3D 절단면 조정 (의뢰자) — 오른쪽 위 단추 · 왼쪽 위 패널(.vpanel) */
.cutbtn { position: absolute; right: 16px; top: 16px; z-index: 4; height: 36px; border-color: var(--color-accent); }
.cutbtn.on { background: var(--color-accent); color: var(--color-on-accent); }
.vpanel.wide { width: 340px; }
/* 관절와 드릴 진입점 조정 — 화살표 십자 · 지금 옮긴 값 */
.entry-pad { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 6px; align-items: center; }
.entry-pad .vbtn { justify-content: center; }
.entry-now { text-align: center; font: 700 12px/1.3 var(--font-body); color: var(--color-bg); }
/* 제작자: 받은 진입점 요청 */
.planbox { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--color-bg); border: 1px solid var(--color-divider); }
.vbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.vbtn.accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.vbtn.accent:hover:not(:disabled) { background: var(--color-accent-600); }
.cadj { display: flex; align-items: center; gap: 8px; font: 600 12px/1.3 var(--font-body); }
.cadj.hl { margin: 0 -8px; padding: 4px 8px; background: color-mix(in srgb, var(--color-accent) 22%, transparent); box-shadow: inset 3px 0 0 var(--color-accent); }   /* 검토 항목으로 연 값 */
.cadj.hl > .muted4:first-child { color: var(--color-bg); }
.cadj > span:first-child { width: 72px; flex: none; }
.cadj input[type=range] { flex: 1; min-width: 0; }
.cadj input:disabled { opacity: 0.35; }
.cadj-now { margin-top: -6px; padding-left: 80px; }
.cadj-sum { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--color-neutral-800); border-left: 3px solid var(--color-accent); font: 700 13px/1.35 var(--font-body); }
.vnum { width: 58px; height: 28px; flex: none; padding: 0 6px; background: var(--color-neutral-800); color: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-bg) 22%, transparent); font: 700 12px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.vhint { position: absolute; right: 16px; bottom: 16px; z-index: 3; font: 600 11px/1.3 var(--font-body); color: var(--color-neutral-400); letter-spacing: 0.02em; max-width: 60%; text-align: right; }
.vbtn { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--color-neutral-900); border: 1px solid color-mix(in srgb, var(--color-bg) 16%, transparent); cursor: pointer; color: var(--color-bg); font: 700 12px/1 var(--font-body); }
.vbtn:hover { background: var(--color-neutral-800); }
.ct-bar { position: absolute; left: 16px; top: 12px; right: 16px; z-index: 6; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ct-bar .vseg > button { height: 34px; }
.ct-bar .vseg > button:disabled { opacity: 0.35; cursor: default; }      /* 되돌리기 · 다시 하기 — 할 것이 없을 때 */
.ct-bar .ct-undo { margin-left: auto; }
.ct-hint { position: absolute; left: 16px; bottom: 10px; z-index: 6; max-width: 56%; font: 600 11.5px/1.45 var(--font-body); color: var(--color-neutral-300); }
.ct-info { position: absolute; right: 16px; bottom: 10px; z-index: 6; max-width: 42%; text-align: right; font: 600 11px/1.45 var(--font-body); color: var(--color-neutral-400); }
.ctstage { position: absolute; left: 0; right: 0; top: 58px; bottom: 34px; z-index: 5; background: #201e1d; }
.ctstage canvas { position: absolute; inset: 0; width: 100%; height: 100%; outline: none; }
.ct-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: #201e1d; color: var(--color-bg); font: 700 14px/1 var(--font-body); }
.ct-over.err { justify-content: flex-start; padding: 0 72px; }

/* 뷰어 내부 (viewer3d.js 가 만든다) */
.v3-root { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; cursor: grab; }
.v3-root.picking { cursor: crosshair; }
.v3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v3-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.v3-layer { position: absolute; inset: 0; pointer-events: none; }
.v3-hud { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: flex-end; gap: 16px; pointer-events: none; color: var(--color-neutral-300); font: 600 11px/1 var(--font-body); letter-spacing: 0.04em; }
.v3-hud svg { overflow: visible; }
.v3-scale { display: flex; flex-direction: column; gap: 6px; }
.v3-scalebar { height: 6px; border: 2px solid var(--color-neutral-300); border-top: 0; }
.v3-fail { position: absolute; left: 32px; top: 50%; max-width: 360px; color: var(--color-bg); font: 600 14px/1.5 var(--font-body); }
.v3-label { position: absolute; background: var(--color-bg); color: var(--color-text); font: 700 12px/1 var(--font-body); padding: 5px 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v3-pin { position: absolute; transform: translate(-50%, -100%) translateY(-6px); pointer-events: auto; cursor: pointer; min-width: 24px; height: 24px; padding: 0 6px;
  border: 2px solid var(--color-text); background: var(--color-bg); color: var(--color-text); font: 800 12px/1 var(--font-body); }
.v3-pin.active { background: var(--color-accent); color: var(--color-on-accent); }
.v3-pin.resolved { background: var(--color-neutral-600); color: var(--color-bg); }
.v3-pin.away, .v3-pinstem.away { opacity: 0.45; }
.v3-pinstem { position: absolute; width: 2px; height: 7px; background: var(--color-text); }

@media (max-width: 1280px) {
  .rv-left { width: 300px; }
  .rv-right { width: 340px; }
  .dlg-dock { width: 340px; }
  .vparts { width: 220px; }
  .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}