/* 1942 Mastering Studio — 큰집 톤 (딥 차콜네이비 + 살구 포인트) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap");

:root{
  --bg:   oklch(18% 0.005 260);
  --card: oklch(22% 0.005 260);
  --card2:oklch(25% 0.005 260);
  --line: oklch(30% 0.005 260);
  --txt:  oklch(93% 0.003 260);
  --sub:  oklch(68% 0.005 260);
  --dim:  oklch(52% 0.005 260);
  --acc:  oklch(68% 0.13 45);      /* 살구 — 1942 포인트색 */
  --acc-d:oklch(61% 0.12 45);
  --ok:   oklch(72% 0.13 155);
  --warn: oklch(80% 0.14 85);
  --bad:  oklch(65% 0.18 25);
  --r:14px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--txt); font-weight:300;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:920px; margin:0 auto; padding:0 20px 80px; }
.mono,.num{ font-family:'Outfit',sans-serif; font-variant-numeric:tabular-nums; }

/* ── PIN 게이트 ── */
#gate{ position:fixed; inset:0; z-index:999; background:var(--bg);
       display:flex; align-items:center; justify-content:center; transition:opacity .3s ease; }
#gate.out{ opacity:0; pointer-events:none; }
.gatebox{ width:290px; text-align:center; }
.geyebrow{ font-family:'Outfit',sans-serif; font-size:10px; letter-spacing:2.4px; color:var(--dim); }
.gatebox h2{ font-family:'Outfit',sans-serif; font-weight:500; font-size:22px; margin:10px 0 6px; letter-spacing:-.3px; }
.gatebox p{ font-size:12.5px; color:var(--sub); margin:0 0 24px; }
.gatebox p.err{ color:var(--bad); }
.gdots{ display:flex; justify-content:center; gap:16px; margin-bottom:26px; }
.gdots span{ width:11px; height:11px; border-radius:50%; border:1.5px solid var(--line); transition:all .15s; }
.gdots span.on{ background:var(--acc); border-color:var(--acc); }
.gkeys{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.gkeys button{ background:var(--card); border:1px solid var(--line); border-radius:11px; color:var(--txt);
               font-family:'Outfit',sans-serif; font-size:17px; padding:13px 0; cursor:pointer;
               transition:border-color .12s, background .12s; }
.gkeys button:hover{ border-color:var(--acc); background:var(--card2); }
.gkeys button[data-act]{ font-size:12.5px; color:var(--sub); }
.shake{ animation:shake .38s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }

/* ── 헤더 ── */
header{ padding:52px 0 26px; }
.eyebrow{ font-family:'Outfit',sans-serif; font-size:11px; letter-spacing:2.4px; text-transform:uppercase; color:var(--dim); }
h1{ font-family:'Outfit',sans-serif; font-weight:500; font-size:clamp(28px,4.6vw,42px); margin:8px 0 6px; letter-spacing:-.6px; }
h1 em{ font-style:normal; color:var(--acc); }
header p{ margin:0; color:var(--sub); font-size:14px; max-width:56ch; }
.backlink{ float:right; font-size:11.5px; color:var(--dim); text-decoration:none; font-family:'Outfit',sans-serif; }
.backlink:hover{ color:var(--acc); }
.toplinks{ float:right; font-family:'Outfit',sans-serif; font-size:11.5px; color:var(--line); display:flex; gap:9px; }
.toplinks a{ color:var(--dim); text-decoration:none; transition:color .15s; }
.toplinks a:hover{ color:var(--acc); }
.toplinks a:first-child{ color:var(--sub); }

/* ── 카드 ── */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; margin-bottom:16px; }
.card h2{ font-family:'Outfit',sans-serif; font-weight:500; font-size:13px; letter-spacing:1.4px; text-transform:uppercase;
          color:var(--sub); margin:0 0 16px; display:flex; align-items:center; gap:8px; }
.card h2 i{ font-style:normal; color:var(--acc); font-size:11px; }

/* ── 드롭존 ── */
#drop{ border:1px dashed var(--line); border-radius:var(--r); padding:38px 24px; text-align:center; cursor:pointer;
       transition:border-color .18s, background .18s; }
#drop:hover,#drop.over{ border-color:var(--acc); background:var(--card2); }
#drop .big{ font-family:'Outfit',sans-serif; font-size:16px; color:var(--txt); }
#drop .small{ font-size:12.5px; color:var(--dim); margin-top:6px; }
#fileinfo{ display:none; font-size:13px; color:var(--sub); margin-top:14px; text-align:center; }
#fileinfo b{ color:var(--txt); font-weight:400; }

/* ── 레퍼런스 ── */
.mini-drop{ border:1px dashed var(--line); border-radius:var(--r); padding:22px 20px; text-align:center;
            cursor:pointer; transition:border-color .18s, background .18s; }
.mini-drop:hover,.mini-drop.over{ border-color:var(--acc); background:var(--card2); }
.mini-drop .big{ font-family:'Outfit',sans-serif; font-size:14px; color:var(--txt); }
.mini-drop .small{ font-size:12px; color:var(--dim); margin-top:5px; }
#refinfo{ display:none; margin-top:14px; }
.refrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; }
.refrow b{ font-weight:400; color:var(--txt); }
.refuse{ display:inline-flex; align-items:center; gap:7px; color:var(--sub); cursor:pointer; white-space:nowrap; }
.refuse input{ accent-color:var(--acc); width:15px; height:15px; }
.refnum{ font-family:'Outfit',sans-serif; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; }
.refrow .ghost.sm{ margin:0 0 0 auto; }

/* 음색 곡선 비교 */
.cmp{ margin-top:16px; }
.cmp svg{ width:100%; height:150px; display:block; overflow:visible; }
.cmp polyline{ fill:none; vector-effect:non-scaling-stroke; stroke-width:2;
               stroke-linejoin:round; stroke-linecap:round; }
.cmp polyline.mine{ stroke:var(--acc); }
.cmp polyline.ref{ stroke:var(--ok); stroke-dasharray:5 4; }
.cmp line.zero{ stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.cmpx{ display:flex; justify-content:space-between; font-family:'Outfit',sans-serif;
       font-size:9.5px; color:var(--dim); margin-top:4px; }
.cmplegend{ display:flex; gap:16px; align-items:center; margin-top:12px; font-size:12px; color:var(--sub); }
.cmplegend .ln{ display:inline-block; width:16px; height:2px; margin-right:6px; vertical-align:3px; }
.cmplegend .ln.mine{ background:var(--acc); }
.cmplegend .ln.ref{ background:var(--ok); }
.cmplegend .cmpnote{ margin-left:auto; color:var(--dim); font-size:11.5px; }

.refmode{ display:flex; gap:20px; flex-wrap:wrap; margin:12px 0 4px; }
.refmode label{ display:inline-flex; align-items:baseline; gap:7px; font-size:12.5px;
                color:var(--sub); cursor:pointer; }
.refmode input{ accent-color:var(--acc); }
.refmode span{ font-size:11px; color:var(--dim); }

/* 레퍼런스 보관함 */
#reflib{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.libhead{ font-family:'Outfit',sans-serif; font-size:11px; letter-spacing:1px; text-transform:uppercase;
          color:var(--dim); margin-bottom:10px; }
.libhead span{ text-transform:none; letter-spacing:0; font-size:11px; margin-left:8px; opacity:.75; }
.libitems{ display:flex; flex-wrap:wrap; gap:8px; }
.libchip{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
          background:var(--card2); border:1px solid var(--line); border-radius:20px;
          padding:6px 12px; font-size:12.5px; color:var(--txt); transition:border-color .15s, background .15s; }
.libchip:hover{ border-color:var(--acc); background:var(--bg); }
.libchip em{ font-style:normal; font-family:'Outfit',sans-serif; font-size:10.5px; color:var(--dim);
             font-variant-numeric:tabular-nums; }
.libchip b{ font-weight:400; color:var(--dim); font-size:14px; line-height:1; padding:0 2px; }
.libchip b:hover{ color:var(--bad); }
.libchip.builtin{ border-style:dashed; }

/* ── 설정 그리드 ── */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
label.f{ display:block; font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--dim);
         font-family:'Outfit',sans-serif; margin-bottom:6px; }
select,input[type=range]{ width:100%; }
select{ background:var(--bg); color:var(--txt); border:1px solid var(--line); border-radius:9px;
        padding:10px 12px; font-family:'Pretendard',sans-serif; font-size:13.5px; font-weight:300; }
select:focus{ outline:none; border-color:var(--acc); }
input[type=range]{ accent-color:var(--acc); }
.rangerow{ display:flex; align-items:center; gap:10px; }
.rangerow .val{ font-family:'Outfit',sans-serif; font-size:13px; color:var(--acc); min-width:42px; text-align:right; }
.hint{ font-size:11.5px; color:var(--dim); margin-top:6px; }

/* ── 실행 버튼 ── */
.run{ width:100%; padding:17px; border:none; border-radius:12px; cursor:pointer; margin-top:4px;
      background:var(--acc); color:oklch(18% 0.02 45); font-family:'Outfit',sans-serif; font-weight:600;
      font-size:15px; letter-spacing:.3px; transition:background .16s, transform .16s; }
.run:hover:not(:disabled){ background:var(--acc-d); transform:translateY(-1px); }
.run:disabled{ background:var(--card2); color:var(--dim); cursor:not-allowed; }
.ghost{ background:transparent; border:1px solid var(--line); color:var(--sub); border-radius:10px;
        padding:11px 18px; cursor:pointer; font-family:'Outfit',sans-serif; font-size:13px; transition:all .16s; }
.ghost:hover{ border-color:var(--acc); color:var(--acc); }
.ghost.on{ border-color:var(--acc); color:var(--acc); background:oklch(68% 0.13 45 / .1); }

/* ── 완전 자동 (히어로) ── */
.run.hero{ padding:22px; font-size:17px; letter-spacing:.5px; }
.autonote{ font-size:12.5px; color:var(--dim); line-height:1.75; margin:14px 2px 4px; }
.autonote b{ color:var(--sub); font-weight:400; }
.weightrow{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.weightrow .wend{ font-size:11px; color:var(--dim); white-space:nowrap; font-family:'Outfit',sans-serif; }
.weightrow .val{ min-width:38px; color:var(--dim); }
#manual{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
#manual summary{ font-size:12.5px; }
.sub-note{ color:var(--dim); font-weight:300; letter-spacing:0; text-transform:none; font-size:12px; }

/* ── 휴먼 지수 ── */
.ghost.wide{ width:100%; margin-top:10px; }
.ghost.sm{ padding:6px 14px; font-size:11.5px; margin-top:12px; }
.hscore{ display:flex; align-items:baseline; gap:14px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.hscore b{ font-size:52px; font-weight:500; line-height:1; letter-spacing:-1px; }
.hscore span{ font-size:14px; color:var(--sub); }
.hscore.ok b{ color:var(--ok); } .hscore.mid b{ color:var(--warn); } .hscore.low b{ color:var(--bad); }
.axes{ padding:16px 0 6px; }
.axis{ display:grid; grid-template-columns:1fr 120px 96px 34px; align-items:center; gap:12px; padding:9px 0; }
.aname{ font-size:13.5px; display:flex; flex-direction:column; }
.aname span{ font-size:11px; color:var(--dim); }
.aname em{ font-style:normal; font-family:'Outfit',sans-serif; font-size:9.5px; color:var(--warn);
           border:1px solid oklch(80% .14 85/.35); border-radius:20px; padding:1px 7px; margin-left:6px; }
.axis.lowconf .abar > i{ background:var(--dim); }
.axis.lowconf .ascore{ color:var(--dim); }
.abar{ height:5px; background:var(--card2); border-radius:3px; overflow:hidden; }
.abar > i{ display:block; height:100%; background:var(--acc); }
.aval{ font-size:12.5px; color:var(--sub); text-align:right; }
.ascore{ font-size:13px; color:var(--txt); text-align:right; }
.hnote{ font-size:11.5px; color:var(--dim); margin:4px 0 0; }
.rx{ margin-top:18px; padding:16px 18px; background:var(--bg); border:1px solid var(--line); border-radius:12px; }
.rx b{ font-size:13.5px; font-weight:500; color:var(--acc); }
.rx p{ font-size:13px; color:var(--sub); margin:6px 0 12px; }
.tagbox{ display:flex; flex-wrap:wrap; gap:7px; }
.tagbox code{ font-family:'Outfit',sans-serif; font-size:11.5px; color:var(--txt); background:var(--card2);
              border:1px solid var(--line); border-radius:20px; padding:4px 11px; }
.hdisc{ font-size:11px; color:var(--dim); margin:14px 0 0; line-height:1.6; }
.hdisc b{ color:var(--sub); font-weight:400; }
@media (max-width:600px){ .axis{ grid-template-columns:1fr 70px 30px; } .axis .abar{ display:none; } }

/* ── 쉬운 설명 ── */
#explain p{ margin:0 0 12px; font-size:14.5px; line-height:1.85; color:var(--txt); }
#explain p:last-child{ margin-bottom:0; }
#explain p.autoplan{ font-size:12.5px; color:var(--dim); border-top:1px solid var(--line); padding-top:12px; }
#explain p.autoplan b{ color:var(--acc); font-weight:400; }

/* ── 안전 점검 ── */
.issue{ display:flex; gap:12px; padding:13px 0; border-top:1px solid var(--line); }
.issue:first-child{ border-top:none; padding-top:0; }
.issue .lv{ flex:none; font-family:'Outfit',sans-serif; font-size:10.5px; padding:2px 9px; height:21px;
            border-radius:20px; border:1px solid; }
.lv-danger .lv{ color:var(--bad); border-color:oklch(65% .18 25/.45); background:oklch(65% .18 25/.1); }
.lv-warn .lv{ color:var(--warn); border-color:oklch(80% .14 85/.4); background:oklch(80% .14 85/.1); }
.lv-info .lv{ color:var(--sub); border-color:var(--line); }
.lv-ok .lv{ color:var(--ok); border-color:oklch(72% .13 155/.4); background:oklch(72% .13 155/.1); }
.issue .ibody{ display:flex; flex-direction:column; gap:3px; }
.issue b{ font-weight:500; font-size:14px; }
.issue .idetail{ font-size:12.5px; color:var(--sub); }
.issue .iaction{ font-size:12.5px; color:var(--acc); }
.badge + .reason{ display:inline-block; margin-left:10px; font-size:11.5px; color:var(--warn); }

/* ── 진행 ── */
#progress{ display:none; margin-top:16px; }
.bar{ height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
.bar > i{ display:block; height:100%; width:0; background:var(--acc); transition:width .3s ease; }
#progress .msg{ font-size:12.5px; color:var(--sub); margin-top:9px; font-family:'Outfit',sans-serif; }

/* ── 시그니처: 라우드니스 레일 ── */
.rail-wrap{ padding:8px 0 4px; }
.rail{ position:relative; height:58px; margin:26px 0 8px; }
.rail .track{ position:absolute; top:26px; left:0; right:0; height:6px; background:var(--card2); border-radius:3px; }
.rail .zone{ position:absolute; top:26px; height:6px; background:oklch(68% 0.13 45 / .22); }
.rail .tick{ position:absolute; top:34px; font-family:'Outfit',sans-serif; font-size:10px; color:var(--dim); transform:translateX(-50%); }
.rail .tick::before{ content:''; position:absolute; top:-9px; left:50%; width:1px; height:6px; background:var(--line); }
.rail .target{ position:absolute; top:18px; width:2px; height:22px; background:var(--acc); }
.rail .target span{ position:absolute; top:-19px; left:50%; transform:translateX(-50%); white-space:nowrap;
                    font-family:'Outfit',sans-serif; font-size:10.5px; color:var(--acc); }
.rail .pin{ position:absolute; top:20px; width:10px; height:10px; border-radius:50%; transform:translateX(-50%);
            border:2px solid var(--bg); }
.rail .pin.before{ background:var(--dim); }
.rail .pin.after{ background:var(--ok); top:38px; }
.raillegend{ display:flex; gap:18px; font-size:11.5px; color:var(--dim); font-family:'Outfit',sans-serif; }
.raillegend b{ font-weight:400; color:var(--txt); }
.dotm{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; }

/* ── 계측표 ── */
table.meas{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.meas th{ text-align:left; font-weight:400; color:var(--dim); font-size:11px; letter-spacing:.8px;
               text-transform:uppercase; font-family:'Outfit',sans-serif; padding:0 0 10px; }
table.meas td{ padding:9px 0; border-top:1px solid var(--line); }
table.meas td:first-child{ color:var(--sub); }
table.meas td.n{ font-family:'Outfit',sans-serif; font-variant-numeric:tabular-nums; text-align:right; width:120px; }
table.meas td.n.hi{ color:var(--txt); }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px;
        font-family:'Outfit',sans-serif; font-size:11.5px; border:1px solid; }
.badge.pass{ color:var(--ok); border-color:oklch(72% 0.13 155 / .4); background:oklch(72% 0.13 155 / .1); }
.badge.fail{ color:var(--bad); border-color:oklch(65% 0.18 25 / .4); background:oklch(65% 0.18 25 / .1); }
.badge.warnb{ color:var(--warn); border-color:oklch(80% 0.14 85 / .4); background:oklch(80% 0.14 85 / .1); }

/* ── 로그 ── */
ul.log{ list-style:none; padding:0; margin:0; }
ul.log li{ font-size:13px; color:var(--sub); padding:7px 0 7px 18px; position:relative; border-top:1px solid var(--line); }
ul.log li:first-child{ border-top:none; }
ul.log li::before{ content:'—'; position:absolute; left:0; color:var(--acc); }
details{ margin-top:12px; }
summary{ cursor:pointer; font-size:12px; color:var(--dim); font-family:'Outfit',sans-serif; }
pre.iter{ font-family:'Outfit',sans-serif; font-size:12px; color:var(--sub); background:var(--bg);
          border:1px solid var(--line); border-radius:9px; padding:12px 14px; overflow-x:auto; margin:10px 0 0; }

/* ── 결과 액션 ── */
.actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.actions .spacer{ flex:1; }
#results{ display:none; }
footer{ text-align:center; color:var(--dim); font-size:11.5px; padding:34px 0 0; }
footer a{ color:var(--dim); }

@media (max-width:600px){
  .card{ padding:18px 16px; }
  .rail .tick{ font-size:9px; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }