/* ARGUS — 체험자는 PC·Mac·폴더블·플립·아이폰·태블릿을 모두 쓴다.
   폴드 접힘(280px)부터 데스크톱까지 한 레이아웃으로 감당하고,
   iOS Safari의 입력 자동확대·노치·100vh 문제를 명시적으로 처리한다. */

:root{
  color-scheme: light;
  --page:#f6f8fb; --surface:#fff; --surface-2:#eef2f7;
  --ink:#0f1720; --ink-2:#4a5563; --muted:#7c8899;
  --line:#dfe5ec; --navy:#1b2a4a; --blue:#2a78d6; --blue-dark:#1f5fae;
  --teal:#1baf7a; --amber:#c88a00; --red:#c0392b; --orange:#eb6834;
  --ok-bg:#e7f6ef; --warn-bg:#fdf3e0; --err-bg:#fdecea;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 2px 8px rgba(16,24,40,.05);
  --radius:12px;
  --tap:44px;                                   /* Apple HIG 최소 터치 타깃 */
  --pad:20px;
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --page:#0d1016; --surface:#161b23; --surface-2:#1d242e;
    --ink:#f2f5f8; --ink-2:#c2cbd6; --muted:#8794a3;
    --line:#272f3a; --navy:#c9d8f0; --blue:#4f97e8; --blue-dark:#3d84d6;
    --teal:#28c48c; --amber:#e0a92b; --red:#e8695c; --orange:#d95926;
    --ok-bg:#12301f; --warn-bg:#332609; --err-bg:#3a1614;
    --shadow:0 1px 2px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;               /* 가로 회전 시 폰트 확대 방지 */
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:"Pretendard","Pretendard Variable","Noto Sans KR",system-ui,
    -apple-system,"Apple SD Gothic Neo","Segoe UI","Malgun Gothic",sans-serif;
  line-height:1.65;font-size:15px;
  min-height:100svh;                            /* iOS 주소창 100vh 문제 회피 */
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;                          /* 한국어 어절 단위 줄바꿈 */
  overflow-wrap:anywhere;
}
button,input,textarea,select{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--blue);color:#fff;padding:10px 16px;border-radius:8px}

/* ── appbar ─────────────────────────────── */
.appbar{
  background:var(--navy);color:#fff;position:sticky;top:0;z-index:20;
  padding-left:var(--safe-l);padding-right:var(--safe-r);
}
@media (prefers-color-scheme: dark){.appbar{background:#111721;border-bottom:1px solid var(--line)}}
.bar-in{max-width:1100px;margin:0 auto;padding:10px var(--pad);display:flex;align-items:center;gap:10px}
.brand{background:none;border:0;color:inherit;font-size:16px;font-weight:800;cursor:pointer;
  letter-spacing:-.01em;padding:6px 0;min-height:var(--tap);text-align:left;flex-shrink:0}
.brand span{font-size:11.5px;font-weight:600;opacity:.8;margin-left:6px}
.topnav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.topnav::-webkit-scrollbar{display:none}
.topnav button{background:transparent;border:0;color:#fff;opacity:.85;font-size:13px;font-weight:700;
  padding:0 12px;min-height:var(--tap);border-radius:8px;cursor:pointer;white-space:nowrap}
.topnav button:hover,.topnav button:focus-visible{background:rgba(255,255,255,.14);opacity:1}
.session{font-size:11px;font-weight:700;background:rgba(255,255,255,.14);padding:5px 10px;
  border-radius:999px;white-space:nowrap;flex-shrink:0}
.crumb{max-width:1100px;margin:0 auto;padding:10px var(--pad) 0;font-size:12.5px;color:var(--muted);font-weight:600}

/* ── layout ─────────────────────────────── */
main{max-width:1100px;margin:0 auto;
  padding:8px var(--pad) calc(32px + var(--safe-b));
  padding-left:max(var(--pad),var(--safe-l));padding-right:max(var(--pad),var(--safe-r))}
.screen{display:none}
.screen.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
h1{font-size:clamp(20px,5vw,24px);font-weight:800;letter-spacing:-.02em;margin:18px 0 6px}
h2{font-size:clamp(16px,4vw,18px);font-weight:800;margin:32px 0 10px}
h3{font-size:14.5px;font-weight:800;margin:0 0 8px}
.lede{color:var(--ink-2);font-size:14px;margin:0 0 20px;max-width:760px}
.lede.small{font-size:13px}
.note{color:var(--ink-2);font-size:12.8px;margin:10px 0}
.note.small{font-size:12px;color:var(--muted)}
.err{background:var(--err-bg);color:var(--red);border-radius:8px;padding:10px 13px;font-size:13px;font-weight:700;margin:12px 0 0}

/* ── hero ───────────────────────────────── */
.hero{text-align:center;padding:32px 0 8px}
.eyebrow{font-size:11.5px;font-weight:800;color:var(--blue);letter-spacing:.14em;text-transform:uppercase;margin:0}
.hero h1{font-size:clamp(22px,6.5vw,30px);margin:12px 0 14px}
.hero-sub{max-width:640px;margin:0 auto 26px;color:var(--ink-2);font-size:clamp(14px,3.6vw,15px)}
.hero-sub strong{color:var(--ink)}
.privacy-card{max-width:660px;margin:32px auto 0;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--teal);border-radius:var(--radius);padding:18px;text-align:left;box-shadow:var(--shadow)}
.privacy-card h2{font-size:14px;margin:0 0 8px;color:var(--teal)}
.privacy-card p{margin:0;font-size:13.2px;color:var(--ink-2)}
.privacy-card strong{color:var(--ink)}

/* ── buttons ────────────────────────────── */
/* button과 a 양쪽에 쓰이므로 flex 정렬을 직접 준다 (a는 자동 수직정렬이 없다) */
.cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  background:var(--blue);color:#fff;border:0;border-radius:10px;padding:0 26px;
  min-height:48px;font-size:15px;font-weight:800;cursor:pointer;box-shadow:var(--shadow);text-decoration:none}
.cta:hover,.cta:focus-visible{background:var(--blue-dark)}
.cta[disabled]{opacity:.55;cursor:not-allowed}
.ghost{display:inline-flex;align-items:center;justify-content:center;background:var(--surface);
  color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:0 18px;min-height:var(--tap);
  font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none}
.ghost:focus-visible{border-color:var(--blue);color:var(--blue)}
@media (hover:hover){.ghost:hover{border-color:var(--blue);color:var(--blue)}}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}

/* ── 기준선 대비 성능 ────────────────────────
   "45%"만 보면 낮게 읽힌다. 240지선다라는 맥락과 기준선 비교를 함께 보여
   숫자가 스스로 의미를 갖게 한다. 세로 막대는 높이로 읽혀 개선폭이 강하게 전달된다. */
.perf{max-width:720px;margin:36px auto 0}
.perf h2{font-size:clamp(15px,4vw,17px);margin:0 0 6px;text-align:center}
.perf-sub{font-size:13px;color:var(--ink-2);margin:0 0 26px;text-align:center}
.perf-sub strong{color:var(--ink)}

.perf-chart{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,2.5vw,18px)}
.pgroup{display:grid;gap:10px}
.pbars{
  height:clamp(150px,32vw,210px);
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(5px,2vw,12px);
  border-bottom:2px solid var(--line);
  /* 20% 간격 눈금 — 막대 높이를 눈으로 가늠할 기준을 준다 */
  background:repeating-linear-gradient(to top,transparent 0,transparent calc(20% - 1px),
    var(--line) calc(20% - 1px),var(--line) 20%);
}
/* 각진 막대 — 둥근 모서리는 상단 면적을 깎아 막대가 낮아 보인다 */
.colbar{width:clamp(30px,10vw,58px);border-radius:0;position:relative;min-height:3px;
  transition:height .7s cubic-bezier(.2,.8,.2,1)}
.colbar.base{background:var(--orange)}
.colbar.ours{background:var(--blue)}
.colbar .val{position:absolute;top:-21px;left:50%;transform:translateX(-50%);
  font-size:clamp(11px,3vw,13px);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.colbar .who{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:10px;
  font-weight:800;color:#fff;opacity:.9}
.pcap{text-align:center}
.pcap b{display:block;font-size:clamp(12px,3.2vw,13.5px);font-weight:800}
.pcap small{display:block;font-size:clamp(10px,2.6vw,11.5px);color:var(--muted);font-weight:600;margin-top:1px}
.gain{display:inline-block;margin-top:6px;background:var(--ok-bg);color:var(--teal);
  font-size:clamp(10.5px,2.8vw,11.5px);font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.gain.solo{background:var(--surface-2);color:var(--ink-2)}

.legend{display:flex;gap:16px;justify-content:center;margin:22px 0 0;font-size:12px;font-weight:700;color:var(--ink-2)}
.legend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend .sw.base{background:var(--orange)}
.legend .sw.ours{background:var(--blue)}
.perf-table{margin-top:14px;background:transparent;border:0;padding:0}
.perf-table summary{font-size:12.5px;font-weight:700;color:var(--muted);min-height:auto;padding:8px 0;justify-content:center}
/* .hero의 가운데 정렬이 표 본문에 상속되어 헤더와 어긋나므로 명시적으로 잡는다.
   지표명은 왼쪽, 숫자는 오른쪽 정렬해 자릿수가 세로로 맞게 한다. */
.perf-table th,.perf-table td{text-align:left}
.perf-table th:not(:first-child),.perf-table td:not(:first-child){
  text-align:right;font-variant-numeric:tabular-nums}
/* 과제가 명시한 2대 목표(Top-1 · F1)를 차트 위로 올린다.
   F1은 정확도와 척도가 달라 막대에 함께 세우면 하락으로 잘못 읽히므로 여기서 별도로 다룬다. */
.goals{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin:0 0 26px;box-shadow:var(--shadow);text-align:left}
.goals-h{margin:0 0 10px;font-size:12px;font-weight:800;color:var(--blue);
  letter-spacing:.08em;text-transform:uppercase;text-align:center}
.goals-q{margin:0 0 16px;padding-left:12px;border-left:3px solid var(--line);
  font-size:12.5px;color:var(--muted);font-style:normal;line-height:1.6}
.goals-q b{color:var(--ink-2)}
.goals-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.goal{background:var(--surface-2);border-radius:10px;padding:14px;text-align:center}
.goal .gv{display:block;font-size:clamp(22px,6vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--blue)}
.goal .gl{display:block;font-size:12px;font-weight:800;margin-top:2px}
.goal .gd{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}
.goals-note{margin:14px 0 0;font-size:12.2px;color:var(--ink-2);line-height:1.65}
.goals-note b{color:var(--ink)}
@media(max-width:359px){.goals-row{grid-template-columns:1fr}}
@media(max-width:359px){
  .colbar .who{display:none}
  .pcap small{display:none}
}

/* ── metrics ────────────────────────────── */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:28px 0 10px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.mv{display:block;font-size:clamp(20px,5.5vw,26px);font-weight:800;letter-spacing:-.02em}
.ml{display:block;font-size:11.5px;color:var(--muted);font-weight:700;margin-top:2px}
.metrics-note{font-size:12px;color:var(--muted);max-width:700px;margin:10px auto 0}

/* ── tabs ───────────────────────────────── */
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:22px 0 18px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;
  padding:10px 14px;min-height:var(--tap);font-size:13.5px;font-weight:800;color:var(--muted);
  cursor:pointer;text-align:left;white-space:nowrap;flex-shrink:0}
.tab em{display:block;font-style:normal;font-size:11px;font-weight:600;opacity:.85}
.tab.on{color:var(--blue);border-bottom-color:var(--blue)}

/* ── forms ──────────────────────────────── */
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
.box.primary{border-left:4px solid var(--blue)}
legend,.box>legend{font-size:14px;font-weight:800;padding:0;margin-bottom:12px;display:block}
fieldset{border:0;padding:0;margin:0;min-width:0}
fieldset.box{border:1px solid var(--line)}
fieldset[disabled]{opacity:.72}
.pill{display:inline-block;background:var(--blue);color:#fff;font-size:10.5px;font-weight:800;
  padding:3px 9px;border-radius:999px;margin-left:6px;vertical-align:2px}
label{display:block;font-size:12.8px;font-weight:700;color:var(--ink-2);margin-bottom:14px}
label small{display:block;font-weight:500;color:var(--muted);margin-top:4px;font-size:11.5px}
.req{color:var(--red)}
input[type=text],textarea{
  width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;
  font-size:16px;                               /* iOS 포커스 자동확대 방지 — 16px 미만 금지 */
  line-height:1.5;background:var(--surface);color:var(--ink);
  -webkit-appearance:none;appearance:none;min-height:var(--tap)
}
input[type=text]:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
textarea{resize:vertical;min-height:88px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0 16px}

/* ── upload ─────────────────────────────── */
.tpl{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--surface-2);border-radius:10px;padding:14px 16px;margin:14px 0}
.tpl p{margin:3px 0 0;font-size:12.3px;color:var(--ink-2)}
.drop{display:block;border:2px dashed var(--line);border-radius:var(--radius);padding:26px 16px;
  text-align:center;color:var(--ink-2);font-size:13.5px;font-weight:700;cursor:pointer;margin:16px 0 0}
.drop.over{border-color:var(--blue);color:var(--blue);background:var(--surface-2)}
@media (hover:hover){.drop:hover{border-color:var(--blue);color:var(--blue);background:var(--surface-2)}}
.drop .ghost{display:inline-flex;margin:14px auto 0}
.pbar{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin:16px 0 8px}
.pfill{height:100%;width:0;background:var(--blue);transition:width .3s ease}

/* ── progress ───────────────────────────── */
.spinner{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--blue);margin:24px 0}
.spinner span{width:22px;height:22px;border:3px solid var(--surface-2);border-top-color:var(--blue);
  border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.nodes{list-style:none;padding:0;margin:20px 0;counter-reset:n}
.nodes li{counter-increment:n;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:13px 16px 13px 52px;margin-bottom:8px;position:relative;font-size:13.5px;font-weight:700;color:var(--muted)}
.nodes li::before{content:counter(n);position:absolute;left:16px;top:12px;width:24px;height:24px;border-radius:50%;
  background:var(--surface-2);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12px}
.nodes li.done{color:var(--ink)}
.nodes li.done::before{content:"✓";background:var(--teal);color:#fff}

/* ── results ────────────────────────────── */
.resbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.resbar .k{display:block;font-size:11.5px;color:var(--muted);font-weight:700}
.resbar b{font-size:14px}
.resbar .goal{display:block;font-size:11px;color:var(--teal);font-weight:700;margin-top:1px}
.cards{display:grid;gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px;box-shadow:var(--shadow);border-left:4px solid var(--line)}
.card.rank1{border-left-color:var(--blue)}
.card.rank2{border-left-color:var(--teal)}
.card.rank3{border-left-color:var(--muted)}
.card-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rank{font-size:12px;font-weight:800;color:#fff;background:var(--muted);border-radius:6px;padding:2px 8px;flex-shrink:0}
.card.rank1 .rank{background:var(--blue)}
.card.rank2 .rank{background:var(--teal)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;font-size:13.5px;color:var(--blue)}
.iname{font-size:15px;font-weight:800}
.ipath{font-size:12px;color:var(--muted);font-weight:600}
.kw{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.kw b{font-size:11.5px;color:var(--muted);font-weight:700}
.kw span{background:var(--surface-2);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700}
.kw span.card-hit{background:var(--ok-bg);color:var(--teal)}

/* ── agreement ──────────────────────────── */
.agree{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px;flex-wrap:wrap}
.gauge{width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:800;flex-shrink:0;background:var(--surface-2)}
.gauge.ok{background:var(--ok-bg);color:var(--teal)}
.gauge.warn{background:var(--warn-bg);color:var(--amber)}
.agree b{font-size:15.5px}
.agree>div:last-child{min-width:200px;flex:1}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin-bottom:16px}
.cmp-grid>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.cmp-grid ol{margin:0;padding-left:20px;font-size:13.3px}
.cmp-grid li{margin-bottom:7px}
.cmp-grid .match{color:var(--teal);font-weight:800}
.cmp-grid .diff{color:var(--amber);font-weight:800}

/* ── tables ─────────────────────────────── */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  /* 좌우로 더 있음을 알리는 그림자 힌트 */
  background-image:linear-gradient(to right,var(--surface),transparent 12px),
    linear-gradient(to left,var(--surface),transparent 12px);
  background-attachment:local,local}
table{width:100%;border-collapse:collapse;font-size:12.8px;min-width:600px}
thead th{background:var(--surface-2);text-align:left;padding:11px 12px;font-size:11.5px;font-weight:800;
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
tbody td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--teal)}
.badge.warn{background:var(--warn-bg);color:var(--amber)}

/* ── steps / faq ────────────────────────── */
.steps{list-style:none;counter-reset:s;padding:0;margin:20px 0}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:10px;box-shadow:var(--shadow)}
.steps b{display:block;font-size:13.5px;color:var(--blue);margin-bottom:4px}
.steps p{margin:0;font-size:13.3px;color:var(--ink-2)}
details{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px 16px;margin-bottom:8px}
summary{font-weight:800;font-size:13.8px;cursor:pointer;padding:12px 0;min-height:var(--tap);
  display:flex;align-items:center;list-style-position:inside}
details p{margin:0 0 14px;font-size:13.2px;color:var(--ink-2)}

/* ── footer ─────────────────────────────── */
footer{border-top:1px solid var(--line);margin-top:20px;
  padding:22px var(--pad) calc(28px + var(--safe-b));text-align:center}
.disclaimer{max-width:760px;margin:0 auto;font-size:12.3px;color:var(--muted)}
.disclaimer strong{color:var(--ink-2)}
.disclaimer.small{font-size:11.5px;margin-top:6px}

/* ══ 기기별 대응 ═══════════════════════════ */

/* 태블릿·아이패드 세로 이상 — 여백을 넓히고 카드 밀도를 올린다 */
@media (min-width:768px){
  :root{--pad:24px}
  .cards{gap:14px}
  .box{padding:20px 22px}
}

/* 폰 — 상단바를 압축하고 세션 배지를 숨긴다 */
@media (max-width:600px){
  :root{--pad:16px}
  .session{display:none}
  .brand span{display:none}
  .hero{padding:24px 0 4px}
  .privacy-card{margin-top:26px}
  .agree{gap:14px}
  .gauge{width:72px;height:72px;font-size:18px}
}

/* 갤럭시 폴드 접힘·소형 기기 (280~359px) */
@media (max-width:359px){
  :root{--pad:12px}
  body{font-size:14px}
  .bar-in{gap:6px}
  .topnav button{padding:0 9px;font-size:12.5px}
  .metrics{grid-template-columns:1fr 1fr;gap:8px}
  .mv{font-size:19px}
  .box,.card,.privacy-card{padding:14px}
  .tab{padding:9px 10px;font-size:12.5px}
  .tab em{display:none}                          /* 부제는 접어 폭을 확보 */
  .card-h{gap:6px}
  .iname{font-size:14px}
  .gauge{width:64px;height:64px;font-size:16px}
  .drop{padding:20px 12px;font-size:12.5px}
}

/* 폴드 펼침·플립 가로 등 낮은 높이 — 세로 여백을 줄인다 */
@media (max-height:520px) and (orientation:landscape){
  .appbar{position:static}
  .hero{padding:16px 0 4px}
  h1{margin:12px 0 4px}
}

/* 큰 화면 — 결과 카드를 2열로 */
@media (min-width:1000px){
  #list-r1,#list-r2,#list-final{grid-template-columns:1fr}
}

/* 고대비 선호 */
@media (prefers-contrast:more){
  :root{--line:#9aa5b4;--muted:#5a6572}
  .card,.box,.metric{border-width:2px}
}

/* ── Value Chain 판단원칙 안내 ─────────────────────────────────────────── */
/* 매뉴얼은 부합 정도를 사용자가 판단하도록 정한다. 그래서 결과를 단정하는
   모양이 아니라, 접었다 펴는 안내 형태로 둔다. */
.vc{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.vc summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  cursor:pointer;list-style:none;font-size:12.5px}
.vc summary::-webkit-details-marker{display:none}
.vc summary::before{content:"▸";color:var(--muted);font-size:11px;transition:transform .15s}
.vc[open] summary::before{transform:rotate(90deg)}
.vc-rel{font-weight:800;padding:3px 9px;border-radius:4px;font-size:11.5px;
  background:var(--surface-2);color:var(--ink)}
.vc-rel.vc-후방산업{background:var(--warn-bg);color:var(--amber)}
.vc-rel.vc-전방산업{background:var(--ok-bg);color:var(--teal)}
.vc-conf{font-size:11.5px;color:var(--muted);font-weight:700}
.vc-sum{font-size:11.5px;color:var(--ink-2);font-weight:600}
.vc-body{margin-top:10px}
.vc-why{margin:0 0 8px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.vc-cues{margin:0 0 10px;padding-left:18px;font-size:12px;color:var(--muted);line-height:1.7}
.vc-caution{margin:0 0 10px;padding:8px 10px;border-radius:4px;
  background:var(--warn-bg);color:var(--amber);font-size:12px;font-weight:600;line-height:1.6}
.vc-p{border:1px solid var(--line);border-radius:4px;padding:10px 12px;margin-bottom:8px}
.vc-pt{font-size:12.5px;font-weight:800;color:var(--ink)}
.vc-pt span{display:block;margin-top:3px;font-weight:600;color:var(--ink-2);font-size:12px;line-height:1.6}
.vc-chk{margin:8px 0 0;padding-left:18px;font-size:12px;color:var(--ink-2);line-height:1.75}
.vc-note{margin-top:8px;font-size:11.5px;color:var(--muted);font-weight:600}
.vc-foot{margin:10px 0 0;font-size:11.5px;color:var(--muted);line-height:1.65}

/* 대량 판별이 어느 경로로 계산됐는지 알리는 안내. 숨기지 않는 것이 원칙이다. */
.mode-note{margin:12px 0 0;padding:11px 14px;border-radius:4px;
  background:var(--surface-2);border-left:3px solid var(--blue);
  font-size:12.8px;line-height:1.65;color:var(--ink-2)}
.mode-note b{color:var(--ink)}


/* ── 성능 상세 접기 ─────────────────────────────────────────────
   기보가 지정한 화면 구성에 성능 수치 표기는 없다. 대국민 체험 이용자가
   체험을 시작하기도 전에 숫자부터 만나지 않도록 접어 두되, 심사위원이
   한 번의 클릭으로 전부 볼 수 있게 남긴다. 감추는 것이 아니라 순서를 바꾼다. */
.perf-fold{margin-top:22px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);overflow:hidden}
.perf-fold > summary{list-style:none;cursor:pointer;padding:16px 20px;
  display:flex;flex-direction:column;gap:3px;transition:background .15s}
.perf-fold > summary::-webkit-details-marker{display:none}
.perf-fold > summary::after{content:"펼쳐보기 ▾";position:absolute;right:20px;
  font-size:13px;font-weight:700;color:var(--brand)}
.perf-fold[open] > summary::after{content:"접기 ▴"}
.perf-fold > summary{position:relative;padding-right:110px}
.perf-fold > summary:hover{background:var(--surface-2)}
.perf-fold > summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.perf-fold .pf-t{font-size:16px;font-weight:800;color:var(--ink)}
.perf-fold .pf-s{font-size:13px;color:var(--muted)}
.perf-fold .perf{margin-top:0;border:none;border-top:1px solid var(--line);
  border-radius:0;padding-top:18px}
@media(max-width:560px){
  .perf-fold > summary{padding-right:20px}
  .perf-fold > summary::after{position:static;margin-top:6px}
}


/* 선택 입력도 다른 입력칸과 같은 짜임으로 — 라벨 아래 칸. */
#scr-input select{display:block;width:100%;margin-top:6px;padding:11px 12px;
  font:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:9px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
#scr-input select:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}

/* ── 1차 결과 알림 ───────────────────────────────────────────────
   잠정값을 최종 판정으로 읽지 않도록, 갱신될 것임을 눈에 띄게 알린다. */
.prov{margin:10px 0 0;padding:10px 14px;border-radius:9px;
  background:var(--warn-bg,#fdf4e3);border:1px solid var(--warn-line,#e6c37a);
  color:var(--warn-ink,#8a6300);font-size:13.5px}
.prov b{font-weight:800}
.prov .dots::after{content:"";animation:provdots 1.2s steps(4,end) infinite}
@keyframes provdots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.prov .dots::after{content:"...";animation:none}}