:root{color-scheme:light;--paper:#f3f3ef;--card:#fff;--ink:#192524;--muted:#687571;--line:#dce1db;--green:#145943;--soft:#e7efe9;--amber:#8a641d;--red:#ad3932;font-family:'Malgun Gothic','Segoe UI',sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:5px;background:white;color:var(--ink);padding:9px 12px;transition:background .15s}button:hover{background:var(--soft);border-color:#a9b9ac}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:2px solid var(--green);outline-offset:3px}.primary{background:var(--green);border-color:var(--green);color:white}.primary:hover{background:#0d4433}.danger{color:var(--red)}header{display:flex;align-items:center;gap:24px;padding:17px 26px;background:var(--card);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:2px;text-decoration:none;color:var(--ink);white-space:nowrap}.brand-mark{display:grid;place-items:center;width:33px;height:36px;background:var(--green);color:white;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);font-size:20px}.brand small{font-size:12px;letter-spacing:0;color:var(--muted);font-weight:400}.project-title{display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:22px}.project-title input{border:none;padding:2px 0;width:200px;font-weight:600}.project-title span{font-size:12px;color:var(--muted)}.header-actions{margin-left:auto;display:flex;gap:7px}.notice{display:flex;align-items:center;gap:10px;padding:9px 26px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}.notice strong{font-weight:600;color:var(--green)}.notice button{margin-left:auto;padding:3px 9px;font-size:12px;background:transparent}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#459077}.workflow{display:flex;align-items:center;justify-content:space-between;padding:16px 26px;gap:10px;max-width:1600px;margin:auto}.workflow button{background:none;border:0;color:var(--muted);padding:4px}.workflow b{display:inline-grid;place-items:center;background:#e4e7e1;border-radius:50%;width:30px;height:30px;margin-right:8px;color:#54685c}.workflow i{color:#adb7ac}.workflow button.active b{background:var(--green);color:white}.workflow button.done b{background:#cfe2d4;color:#155335}main{display:grid;grid-template-columns:300px minmax(360px,1fr) 310px;max-width:1600px;margin:0 auto 0;border-top:1px solid var(--line);background:white;min-height:740px}.input-panel{border-right:1px solid var(--line)}.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 14px}.tabs button{font-size:14px;padding:17px 8px;border:0;border-radius:0;color:var(--muted);white-space:nowrap}.tabs button[aria-selected=true]{border-bottom:2px solid var(--green);color:var(--green);font-weight:700}.tabs span{font-size:12px}.input-panel section{padding:23px 20px}.section-title{margin-bottom:23px}.section-title>span{font-family:monospace;letter-spacing:1.5px;color:var(--muted);font-size:12px}.section-title h2{font-size:19px;letter-spacing:-.7px;margin:9px 0;font-weight:600}label{display:block;font-size:14px;font-weight:600;margin:17px 0 8px}input:not([type=range]),select,textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:4px;background:#fafbf8;color:var(--ink)}textarea{resize:vertical;line-height:1.7}.help{font-size:12px;line-height:1.7;color:var(--muted);margin:9px 0}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.full{width:100%;margin-top:14px}.dropzone{text-align:center;border:1px dashed #b4c1b8;border-radius:5px;padding:14px 5px;color:#536c5b;font-weight:400;cursor:pointer}.dropzone b{font-size:23px;display:block}.dropzone small{display:block;color:var(--muted);font-size:12px;margin-top:6px}hr{border:0;border-top:1px solid var(--line);margin:23px 0}details{margin-top:15px}summary{cursor:pointer;color:var(--muted)}.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);gap:8px;font-size:12px}.canvas-toolbar .status-dot{margin-right:7px}.canvas-toolbar button{padding:5px 8px;font-size:12px}.canvas-toolbar small{color:var(--muted)}.viewport{height:495px;position:relative;background:#202a2b;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}.view-label{position:absolute;left:20px;top:20px;color:#b3c4be;font:12px monospace;letter-spacing:1.5px;pointer-events:none}.view-label span{display:block;font-size:12px;letter-spacing:0;color:#879e96;margin-top:8px}.view-stats{position:absolute;left:20px;bottom:30px;color:#d5dfd9;font:12px/1.9 monospace;pointer-events:none}.view-hint{position:absolute;bottom:10px;left:20px;color:#849a92;font-size:12px;pointer-events:none}.axis{position:absolute;right:20px;bottom:24px;color:#b6c7ba;font:12px/2 monospace;pointer-events:none}.axis span{display:block}.parts-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}h2{margin:0;font-size:16px}h2 small{color:var(--muted);font-size:12px;font-weight:400}.parts-head button{font-size:12px;padding:5px 10px}.table-scroll{max-height:240px;overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;padding:10px 15px;font-weight:400;color:var(--muted);background:#f6f7f3;position:sticky;top:0}td{padding:10px 15px;border-bottom:1px solid #edf0eb;white-space:nowrap}tr.selected{background:#e6efe8}td button{padding:0;border:none;background:none;color:var(--green);text-align:left}.results{border-left:1px solid var(--line);padding:19px}.results-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.badge{font:12px monospace;color:var(--amber);padding:3px 5px;background:#f1e9d6;border:1px solid #dfd1ae;border-radius:3px}.verdict{border:1px solid var(--line);background:#f4f6f1;text-align:center;padding:21px 10px}.verdict>span{font-size:12px;color:var(--muted)}.verdict h2{font-family:Georgia,'Malgun Gothic',serif;font-size:21px;margin:10px 0;font-weight:500}.verdict p{font-size:12px;line-height:1.6;margin:0;color:var(--muted)}.verdict.warn{background:#f8f1e1;border-color:#e4d7b2}.verdict.error{background:#fae9e5;border-color:#ecc3bc}.results section{border-top:1px solid var(--line);padding-top:20px;margin-top:22px}.result-title{display:flex;justify-content:space-between;align-items:center}.result-title h3{margin:0;font-size:14px}.result-title>span{font-size:12px;color:var(--muted)}.metric{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;color:var(--muted)}.metric strong{font:32px monospace;color:var(--green)}.metric.small strong{font-size:14px;color:var(--ink)}.metric.small{font-size:12px}.meter{height:4px;background:#e1e7df;margin-bottom:12px}.meter span{display:block;background:#4f8467;height:100%;width:0}.law{border-bottom:1px solid #e6e9e2;padding:12px 0}.law b{font-size:13px;font-weight:600}.law span{float:right;font-size:12px;color:var(--amber)}.law p{font-size:12px;line-height:1.6;color:var(--muted);margin:5px 0 0}.empty{font-size:13px;color:var(--muted);padding:18px 0}.param-label{display:flex;justify-content:space-between;align-items:center;gap:10px}.param-label label{font-weight:400}.param-label input{width:92px!important;padding:5px!important;text-align:right}input[type=range]{width:100%;accent-color:var(--green);margin:7px 0 12px}#catalog{display:grid;gap:10px;margin-top:15px}.template-card{display:grid;grid-template-columns:60px 1fr;gap:12px;text-align:left;padding:12px}.template-card svg{width:60px;height:65px;background:#edf1eb;border-radius:4px}.template-card strong{font-size:14px;display:block;margin:4px 0}.template-card small{font-size:12px;color:var(--muted);display:block;line-height:1.6}.template-card em{font-size:12px;color:var(--green);font-style:normal}.ref{display:flex;align-items:center;gap:8px;font-size:12px;margin:8px 0}.ref img{width:42px;height:42px;object-fit:cover;border-radius:4px}.ref span{overflow:hidden;text-overflow:ellipsis;flex:1}.ref button{padding:4px 7px}footer{position:sticky;bottom:0;display:flex;align-items:center;gap:15px;justify-content:space-between;background:#f7f8f4;border-top:1px solid var(--line);padding:11px 25px;font-size:13px;z-index:3}#status{line-height:1.6}#status.error{color:var(--red)}footer button{white-space:nowrap;font-size:12px;padding:5px 10px}dialog{border:1px solid var(--line);border-radius:10px;width:min(760px,94vw);max-height:85vh;padding:0;color:var(--ink)}dialog::backdrop{background:#14252280}.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:17px 23px;border-bottom:1px solid var(--line);position:sticky;top:0;background:white}.dialog-head button{font-size:22px;padding:0 8px}#dialog-body{padding:22px;line-height:1.8}pre{font:12px/1.7 monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:#f3f5ef;padding:14px}.export-info{padding:15px;background:var(--soft)}[hidden]{display:none!important}@media(min-width:1450px){main{grid-template-columns:320px minmax(420px,1fr) 330px}.viewport{height:570px}}@media(max-width:1150px){header{gap:12px;padding:14px}.brand small{display:none}main{grid-template-columns:270px minmax(300px,1fr)}.results{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--line)}.results-head,.results>.verdict,.results>#verify{grid-column:1/-1}.results section{margin-top:0}.workflow{padding:12px}.workflow button{font-size:12px}.project-title{padding-left:10px}}@media(max-width:760px){header{flex-wrap:wrap}.brand{font-size:14px}.project-title{margin-left:auto}.project-title input{width:160px}.header-actions{width:100%;justify-content:flex-end}.notice{padding:8px 14px;flex-wrap:wrap}.notice span:not(.status-dot){width:100%;order:3}.workflow{overflow-x:auto;justify-content:flex-start;white-space:nowrap}.workflow button{padding:4px 10px}main{display:flex;flex-direction:column}.input-panel{order:2}.workspace{order:1}.results{order:3;display:block}.viewport{height:430px}.input-panel section{padding:20px}.tabs{justify-content:center}.results section{margin-top:20px}.canvas-toolbar{flex-wrap:wrap}.table-scroll{max-height:180px}footer{padding:10px 14px}.view-label{top:15px}.notice button{margin-left:auto}.two{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Handoff v0.4 additions */
.audit-toggle{display:flex;align-items:center;gap:6px;margin:0 0 0 auto;font-size:12px;font-weight:400;white-space:nowrap}.audit-toggle input,#audit-panel input{width:auto!important;padding:0}#audit-panel{display:flex;flex-wrap:wrap;gap:18px;align-items:center;background:#f3ead4;border-top:1px solid #caba90;padding:12px 24px;font-size:12px}#audit-panel label{display:flex;gap:6px;margin:0;font-size:12px;font-weight:400}.audit [data-auditnote]::after{content:attr(data-auditnote);display:block;font:12px/1.6 monospace;padding:4px;margin:6px 0;border:1px dashed #869c8e;color:#38684f;background:#edf4eb}.audit button.primary::after{color:#224d36}.branch-error{color:#a43b30;background:#fcefe9;padding:10px;margin-top:10px;font-size:13px}.save-slot{display:flex;gap:8px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid #dce1db;align-items:center}.save-slot>div{flex:1;min-width:180px}.save-slot small{display:block;color:#687571;font-size:12px}.overlay-caption{position:absolute;left:20px;top:68px;font-size:12px;color:#d1ba86;pointer-events:none}#assembly-options{padding-bottom:12px}#assembly-options label{font-size:13px}#export-stats{font-size:13px}.notice .audit-toggle{margin-left:auto}

/* ═══════════════════════════════════════════════════════════════════
   정리 패스 · 2026-09-09 · PM
   원본 규칙은 위에 그대로 두고 여기서만 덮어씁니다. 항목별로 삭제해도
   원본 동작에 영향이 없습니다. 각 블록의 근거를 주석에 적었습니다.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. 크롬 압축 : 255px(35%) → 약 148px(20%) ─────────────────────
   측정 header 91 / notice 43 / workflow 70 / footer 51.
   작업 영역이 화면의 65%밖에 없어서 안전율·판정이 스크롤 밖으로 밀렸습니다. */
header{padding:7px 20px;gap:14px}
/* .project-title이 input+상태 2줄이라 헤더 높이를 지배했습니다 → 1줄로 */
.project-title{flex-direction:row;align-items:baseline;gap:9px;padding-left:14px}
.project-title span{font-size:11px;white-space:nowrap}
.brand{letter-spacing:1.4px}
.brand-mark{width:25px;height:27px;font-size:15px}
.brand small{font-size:11px}
.project-title{padding-left:16px}
.project-title input{width:172px}
.project-title span{font-size:11px}
.header-actions button{padding:6px 10px;font-size:13px}

.notice{padding:5px 20px;font-size:11.5px;gap:8px}
.notice button{padding:2px 8px;font-size:11.5px}

.workflow{padding:7px 20px;gap:6px}
.workflow b{width:21px;height:21px;font-size:11.5px;margin-right:6px}
.workflow button{font-size:12.5px;padding:3px 4px;line-height:1.3}

footer{padding:6px 20px;font-size:12.5px}
footer button{padding:4px 9px;font-size:11.5px}

/* 되찾은 높이를 뷰포트로 넘깁니다 */
.viewport{height:545px}
@media(min-width:1450px){.viewport{height:620px}}

/* ── 2. 진행 레일을 읽히게 ─────────────────────────────────────────
   app.mjs의 stage(id,cls)가 이미 active/done을 붙입니다. 원본은 원 색만
   바꿔서 라벨이 계속 회색이라 7단계가 균일하게 보였습니다.
   1차년도 검수 기준이 「구간별 통신을 확인할 수 있어야」이므로 이 레일은
   장식이 아니라 증빙입니다. */
.workflow button{color:#9aa79f;transition:color .15s}
.workflow button.done{color:var(--ink)}
.workflow button.active{color:var(--green);font-weight:700}
.workflow button.active b{box-shadow:0 0 0 3px var(--soft)}
.workflow button.done b{background:var(--green);color:#fff}
.workflow button.done b::after{content:"✓";font-size:12px}
.workflow button.done b{font-size:0}
.workflow i{color:#ccd4cd}
.workflow button.done + i{color:var(--green)}

/* ── 3. 뷰포트 오버레이 5겹 → 3겹 ──────────────────────────────────
   #overlay-caption은 viewer.overlays가 캔버스에 그리는 기준선 라벨과
   같은 내용을 반복했습니다. app.mjs가 textContent를 쓰므로 DOM에는
   남기고 표시만 끕니다(제거하면 TypeError). */
.overlay-caption{display:none}

/* 조작 힌트는 상시 노출할 정보가 아닙니다 — 뷰포트에 올릴 때만 */
.view-hint{opacity:0;transition:opacity .2s}
.viewport:hover .view-hint,.viewport:focus-within .view-hint{opacity:1}

/* 좌상단 라벨 2줄 → 1줄 */
.view-label{font-size:11px;letter-spacing:1.2px;top:16px;left:16px}
.view-label span{display:inline;margin-left:8px;font-size:11px}
.view-stats{left:16px;bottom:26px;font-size:11.5px;line-height:1.7}
.view-hint{left:16px;bottom:8px;font-size:11.5px}
.axis{right:16px;bottom:20px;font-size:11.5px}

/* ── 4. 검토 결과 위계 : 판정 먼저, 그 다음 숫자 ───────────────────
   원본은 「검토 결과를 확인하세요」가 21px 세리프로 3줄을 쓰는데 정보가
   없고, 판단에 필요한 안전율이 화면 밖에 있었습니다. */
.results{padding:15px}
.results-head{margin-bottom:12px}
.verdict{padding:11px 12px;text-align:left;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline}
.verdict>span{grid-column:1;font-size:10.5px;letter-spacing:.08em;white-space:nowrap}
.verdict h2{grid-column:2;font-size:16px;margin:0;font-weight:600;letter-spacing:-.2px}
.verdict p{grid-column:1/-1;margin-top:4px;font-size:11.5px}
/* 안내문은 검수 모드에서만 — 평소엔 판정 한 줄로 충분합니다 */
.verdict p{display:none}
body.audit .verdict p{display:block}

.results section{padding-top:14px;margin-top:14px}
.result-title h3{font-size:13px}
.metric{padding:6px 0}
.metric strong{font-size:26px;line-height:1.1}
.meter{margin-bottom:9px}
.results .full{margin-top:9px}
.results .help{margin:5px 0;font-size:11.5px}
.law{padding:9px 0}

/* ── 5. 폼 밀도 : 세로 길이 약 20% 축소 ───────────────────────────── */
label{margin:12px 0 6px;font-size:13px}
.input-panel section{padding:16px 18px}
.section-title{margin-bottom:15px}
.section-title>span{font-size:11px;letter-spacing:1.2px}
.section-title h2{font-size:16px;margin:5px 0 0;letter-spacing:-.2px}
.help{margin:6px 0;line-height:1.6}
hr{margin:16px 0}
input[type=range]{margin:3px 0 9px}
.param-label label{margin:8px 0 2px}
.dropzone{padding:11px 5px}
.dropzone b{font-size:19px}
.tabs button{padding:12px 8px;font-size:13.5px}
.tabs{padding:0 12px}
.canvas-toolbar{padding:9px 16px}
.parts-head{padding:11px 18px}
th,td{padding:7px 14px}

/* ── 6. SKILL.md 체크리스트 대응 ───────────────────────────────────
   touch-target-size · readable-font-size · cursor-pointer
   터치 타깃 44px은 coarse 포인터에서만 적용합니다. 데스크톱에 걸면
   밀도만 깎이고 얻는 것이 없습니다(마우스는 정밀). */
@media(pointer:coarse){
  .workflow button,.tabs button,.canvas-toolbar button,.parts-head button,
  footer button,.notice button,.header-actions button{min-height:44px}
}
.template-card,.save-slot button,label.dropzone{cursor:pointer}
@media(max-width:760px){
  /* 모바일에서 12px 보조 텍스트는 작습니다 */
  .help,.notice,.view-stats,td,th,.results .help{font-size:13px}
  .workflow button{min-height:40px;padding:8px 10px}
  .header-actions button{min-height:40px}
  .viewport{height:400px}
}

/* ── 7. 판정 「충족」 상태 색 ────────────────────────────────────────
   원본에 .verdict.warn / .error만 있고 통과 상태가 없어서 app.mjs가
   className을 'verdict warn'로 고정했습니다. 통과 색을 추가합니다. */
.verdict.ok{background:var(--soft);border-color:#9dbfa9}
.verdict.ok h2{color:var(--green)}