/* PIV Simulator — THINK Lab 해석도구 공통 디자인 언어.
 * 토큰과 규칙은 「디자인 지침 — THINK Lab 해석도구 공통」에서 그대로 가져왔다.
 * 흰 바닥 단일 테마 · 테두리선 대신 그림자 · 강조색은 navy 하나.
 */

:root{
  /* 바탕과 면 */
  --bg:#ffffff;
  --glass:rgba(249,250,251,.82);
  --glass2:rgba(234,237,241,.92);
  --glass3:rgba(222,227,233,.96);
  --sunk:rgba(116,127,142,.15);
  --hl:rgba(255,255,255,.92);
  --line:rgba(88,99,114,.16);

  /* 글자 */
  --text:#15181c;
  --muted:#22262b;

  /* 강조 — 하나만 */
  --accent:#0f4c81;
  --accent-press:#0b3a63;
  --accent-fg:#ffffff;
  --accent-soft:rgba(15,76,129,.11);
  --focus:rgba(15,76,129,.30);

  /* 상태 — 셋만 */
  --ok:#1d7048; --caution:#7d580f; --bad:#a83f2b;

  /* 차트 계열색 */
  --c1:#0f4c81; --c2:#a8761f; --c3:#3f7d68;
  --c4:#8c3f6d; --c5:#5a4b9c; --c6:#a83f2b;
  --band:rgba(88,99,114,.13);

  /* 그림자 — 층은 셋뿐 */
  --sh-1:0 1px 2px rgba(24,31,42,.12);
  --sh-2:0 2px 6px rgba(24,31,42,.10), 0 10px 26px rgba(24,31,42,.12);
  --sh-3:0 8px 20px rgba(24,31,42,.16), 0 28px 64px rgba(24,31,42,.20);

  --blur:blur(20px) saturate(120%);
  --font:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",Arial,sans-serif;
  --mono:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",Arial,sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0; color:var(--text); font-family:var(--font);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  background:var(--bg); overflow:hidden}

h1,h2,h3{margin:0}
p{margin:0}
.num,.tabular{font-variant-numeric:tabular-nums}

/* ── 뼈대 ─────────────────────────────────────────────────────── */

.app{display:flex; flex-direction:column; height:100dvh; min-height:0}

header{display:flex; align-items:center; gap:11px; padding:11px 18px;
  background:var(--glass); backdrop-filter:var(--blur);
  box-shadow:var(--sh-1), inset 0 -1px 0 var(--line); z-index:5}
header h1{font-size:17px; font-weight:640; letter-spacing:-.012em; white-space:nowrap}
header .tag{font-size:10.5px; font-weight:600; color:var(--accent);
  letter-spacing:.05em; text-transform:uppercase;
  background:var(--accent-soft); border-radius:7px; padding:3px 9px; white-space:nowrap}
header .spring{flex:1 1 auto; min-width:8px}
.headhint{font-size:12px; color:var(--muted); text-align:right;
  max-width:46ch; line-height:1.4}

.main{display:flex; flex:1; min-height:0}
aside{width:352px; flex:none; overflow-y:auto; overscroll-behavior:contain;
  padding:12px 13px 26px; background:var(--bg)}
.viewport{flex:1; position:relative; min-width:0; overflow:hidden;
  background:var(--glass2); box-shadow:inset 1px 0 0 var(--line)}

/* ── 컨트롤 그룹 ──────────────────────────────────────────────── */

.grp{margin-bottom:9px; border-radius:12px; background:var(--glass);
  box-shadow:var(--sh-1), inset 0 1px 0 var(--hl)}
.grp[open]{box-shadow:var(--sh-2), inset 0 1px 0 var(--hl)}
.grp > summary{display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:10px 12px; list-style:none; border-radius:12px}
.grp > summary::-webkit-details-marker{display:none}
.grp > summary:hover{background:var(--glass2)}
.grp > summary:focus-visible{outline:none; box-shadow:0 0 0 3px var(--focus)}
.grp h2{font-size:11px; font-weight:640; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap}
.gstate{flex:1; font-size:11.5px; color:var(--muted); opacity:.78;
  text-align:right; font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.grp[open] .gstate{display:none}
.gchev{flex:none; width:7px; height:7px; margin-left:2px;
  border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px); opacity:.55; transition:transform .15s}
.grp[open] .gchev{transform:rotate(-135deg) translate(-2px,-2px)}
.grp .body{padding:2px 12px 12px}

.sub{margin-top:8px; border-radius:10px; background:var(--glass2)}
.sub > summary{display:flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 10px; list-style:none; font-size:11.5px; color:var(--muted)}
.sub > summary::-webkit-details-marker{display:none}
.sub .body{padding:0 10px 10px}

/* ── 컨트롤 세 짝 ─────────────────────────────────────────────── */

.ctrl{margin:11px 0 0}
.ctrl:first-child{margin-top:4px}
.ctrl .row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.ctrl label{font-size:13px; color:var(--text)}
.val{display:inline-flex; align-items:baseline; gap:4px}
.num-in{width:66px; text-align:right; font-family:var(--mono); font-size:13px;
  font-variant-numeric:tabular-nums; color:var(--text);
  background:var(--glass2); border:0; border-radius:7px; padding:3px 6px;
  box-shadow:inset 0 1px 2px rgba(24,31,42,.07)}
.num-in:focus{outline:none; box-shadow:0 0 0 3px var(--focus)}
.unit{font-size:11.5px; color:var(--muted)}
.hint{display:block; font-size:12px; color:var(--muted); opacity:.85;
  text-align:right; font-variant-numeric:tabular-nums; min-height:1.2em}
.hint.warn{color:var(--caution); opacity:1}
.hint.bad{color:var(--bad); opacity:1}

input[type=range]{-webkit-appearance:none; appearance:none; width:100%;
  height:18px; margin:2px 0 0; background:transparent; cursor:ew-resize}
input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:3px;
  background:var(--sunk); box-shadow:inset 0 1px 2px rgba(24,31,42,.14)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:14px; height:14px; margin-top:-5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--sh-1)}
input[type=range]::-moz-range-track{height:4px; border-radius:3px; background:var(--sunk)}
input[type=range]::-moz-range-thumb{width:14px; height:14px; border:0; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
input[type=range]:focus{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--focus)}

select.pick{width:100%; font:inherit; font-size:13px; color:var(--text);
  background:var(--glass2); border:0; border-radius:8px; padding:6px 8px; cursor:pointer;
  box-shadow:inset 0 1px 2px rgba(24,31,42,.07)}
select.pick:focus{outline:none; box-shadow:0 0 0 3px var(--focus)}

/* 세그먼트 · 체크 · 버튼 */

.seg{display:inline-flex; gap:3px; padding:3px; border-radius:10px;
  background:var(--sunk); box-shadow:inset 0 1px 2px rgba(24,31,42,.10)}
.seg button{font:inherit; font-size:12px; font-weight:540; color:var(--muted);
  background:transparent; border:0; border-radius:7px; padding:4px 11px; cursor:pointer;
  white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--bg); color:var(--accent); font-weight:620;
  box-shadow:var(--sh-1)}
.seg button:focus-visible{outline:none; box-shadow:0 0 0 3px var(--focus)}
.seg.wide{display:flex; width:100%}
.seg.wide button{flex:1; text-align:center}

.chk{display:flex; align-items:center; gap:8px; padding:5px 2px; cursor:pointer;
  font-size:13px; color:var(--text)}
.chk input{position:absolute; width:1px; height:1px; margin:-1px; opacity:0;
  clip-path:inset(50%); pointer-events:none}
.chk .box{flex:none; width:16px; height:16px; border-radius:5px;
  background:var(--glass2); box-shadow:inset 0 1px 2px rgba(24,31,42,.10)}
.chk input:checked + .box{background:var(--accent); box-shadow:var(--sh-1)}
.chk input:checked + .box::after{content:""; display:block; width:4px; height:8px;
  margin:2px auto 0; border-right:2px solid var(--accent-fg);
  border-bottom:2px solid var(--accent-fg); transform:rotate(42deg)}
.chk input:focus-visible + .box{box-shadow:0 0 0 3px var(--focus)}
.chk .swatch{flex:none; width:11px; height:2.5px; border-radius:2px}

.btn{display:block; width:100%; font:inherit; font-size:13px; font-weight:560;
  color:var(--text); background:var(--glass2); border:0; border-radius:10px;
  padding:9px 12px; cursor:pointer; box-shadow:var(--sh-1), inset 0 1px 0 var(--hl)}
.btn:hover{background:var(--glass3)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--focus)}
.btn.primary{color:var(--accent-fg); background:var(--accent); box-shadow:var(--sh-2)}
.btn.primary:hover{background:var(--accent-press)}
.btn[disabled]{opacity:.55; cursor:progress}
.btn + .btn{margin-top:7px}
.btnrow{display:flex; gap:7px; margin-top:9px}
.btnrow .btn{margin-top:0}

input[type=file]{width:100%; font:inherit; font-size:12px; color:var(--muted);
  background:var(--glass2); border:0; border-radius:8px; padding:6px}
input[type=file]:focus{outline:none; box-shadow:0 0 0 3px var(--focus)}

.phys{font-size:11.5px; line-height:1.7; color:var(--muted)}
.phys b{font-variant-numeric:tabular-nums; color:var(--text); font-weight:620}
.note{font-size:11.5px; line-height:1.5; color:var(--muted); margin-top:8px}
.note.ok{color:var(--ok)} .note.caution{color:var(--caution)} .note.bad{color:var(--bad)}

/* ── 뷰포트와 떠 있는 판 ──────────────────────────────────────── */

.stage-wrap{position:absolute; inset:0; display:grid; place-items:center;
  padding:14px}
#stage{display:block; max-width:100%; max-height:100%;
  border-radius:10px; box-shadow:var(--sh-2); background:var(--bg)}
.stage-wrap.picking{cursor:crosshair}

.panel{position:absolute; border-radius:12px; background:var(--glass);
  backdrop-filter:var(--blur); box-shadow:var(--sh-2), inset 0 1px 0 var(--hl);
  padding:10px 12px}
.panel h3{font-size:10.5px; font-weight:640; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px}

.p-stats{top:12px; left:12px; min-width:196px}
.p-scope{top:12px; right:12px; width:286px; max-height:calc(100% - 24px); overflow:auto}
.p-legend{bottom:12px; left:12px; max-width:340px}
.p-warn{bottom:12px; right:12px; max-width:320px;
  box-shadow:var(--sh-3), inset 0 1px 0 var(--hl)}

.stats{display:grid; grid-template-columns:auto 1fr; gap:2px 12px; font-size:12px}
.stats dt{color:var(--muted); opacity:.85}
.stats dd{margin:0; text-align:right; font-variant-numeric:tabular-nums; font-weight:540}
.stats dd.hero{font-size:20px; font-weight:660; letter-spacing:-.02em; color:var(--accent);
  line-height:1.2}
.stats .heroline{grid-column:1 / -1; display:flex; align-items:baseline;
  justify-content:space-between; gap:8px; margin-bottom:2px}
.stats .heroline span{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted)}
.stats .sep{grid-column:1 / -1; height:1px; margin:5px 0 4px; background:var(--line)}

.scope-pair{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.tile{display:grid; gap:3px}
.tile .cap{font-size:10px; letter-spacing:.05em; color:var(--muted); opacity:.9}
.tile canvas{display:block; width:100%; height:auto; border-radius:7px;
  background:var(--bg); box-shadow:var(--sh-1)}
.scope-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:9px 0 3px}
.readouts{display:grid; grid-template-columns:auto 1fr; gap:1px 10px; font-size:12px;
  margin-top:8px}
.readouts dt{color:var(--muted); opacity:.85}
.readouts dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.readouts dd.hi{color:var(--accent); font-weight:600}
.readouts dd.alt{color:var(--c2); font-weight:600}
.verdict[data-st="0"]{color:var(--ok)}
.verdict[data-st="1"],.verdict[data-st="3"]{color:var(--caution)}
.verdict[data-st="2"]{color:var(--muted)}
.scope-empty{font-size:12px; color:var(--muted); line-height:1.5}

.bar{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted);
  font-variant-numeric:tabular-nums}
.ramp{width:148px; height:9px; border-radius:3px; box-shadow:var(--sh-1)}
.legend-cap{margin-top:5px; font-size:11.5px; color:var(--muted); line-height:1.45}
.keys{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:11.5px;
  color:var(--muted)}
.key{display:inline-flex; align-items:center; gap:5px}
.key i{width:15px; height:0; border-top:2.5px solid currentColor; display:inline-block}
.scalebar{display:inline-flex; align-items:center; gap:6px}
.scalebar i{height:0; border-top:2.5px solid var(--accent); display:inline-block}

.p-warn .wtitle{display:flex; align-items:center; gap:7px; font-size:12px;
  font-weight:620; color:var(--caution)}
.p-warn[data-level="bad"] .wtitle{color:var(--bad)}
.p-warn .wmark{font-size:13px; line-height:1}
.p-warn .wbody{margin-top:4px; font-size:12px; line-height:1.5; color:var(--text)}
.p-warn .wfix{margin-top:3px; font-size:12px; line-height:1.5; color:var(--muted)}

.veil{position:absolute; inset:0; display:grid; place-items:center; z-index:3;
  background:rgba(255,255,255,.72); backdrop-filter:blur(3px);
  font-size:13px; color:var(--muted)}
.progress{position:absolute; left:0; bottom:0; height:2px; background:var(--accent);
  transition:width .08s linear; z-index:4}

.toast{min-height:1.2em; font-size:11.5px; color:var(--accent); margin-top:7px}
textarea.dump{width:100%; height:110px; margin-top:8px; font-family:var(--mono);
  font-size:11px; color:var(--text); background:var(--glass2); border:0;
  border-radius:8px; padding:8px; box-shadow:inset 0 1px 2px rgba(24,31,42,.07)}
textarea.dump:focus{outline:none; box-shadow:0 0 0 3px var(--focus)}

.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ── 좁은 화면 ────────────────────────────────────────────────── */

@media (max-width:900px){
  body{overflow:auto}
  .app{height:auto; min-height:100dvh}
  .main{flex-direction:column}
  aside{width:100%; order:2; overflow:visible}
  .viewport{order:1; min-height:52vh}
  header{flex-wrap:wrap; padding:10px 14px}
  .headhint{max-width:none; text-align:left; flex-basis:100%}
  .p-scope{position:static; width:auto; max-height:none; margin:0 12px 12px;
    backdrop-filter:none}
  .p-stats,.p-legend,.p-warn{position:static; margin:0 12px 10px}
  .viewport{display:flex; flex-direction:column; padding-bottom:12px}
  .stage-wrap{position:relative; inset:auto; flex:1; min-height:46vh}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0s !important; animation-duration:0s !important}
}