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

:root{
  color-scheme: light;
  /* 화면설계서(15판) 색상 토큰. 값을 바꾸지 말 것 — 심사 기준이다. */
  --navy:#1B2A4A; --blue:#2E5EAA; --teal:#1E8A78; --gold:#C9922A;
  --red:#C0392B; --gray:#5A6472; --light:#F4F6F9; --line:#E3E7EE;
  --ink:#20242C;
  /* 설계서가 함께 쓰는 보조 배경·경계 */
  --navy-2:#334463; --blue-tint:#EAF0FC; --blue-line:#C7D9F5;
  --teal-tint:#E4F3EF; --gold-tint:#FFFBF0; --gold-line:#F0DDB0;
  --red-tint:#FDECEC; --light-2:#F4F6FB;
  /* 설계서의 #9AA1AC 는 본문에 쓰면 대비비 2.40:1 로 읽을 수 없다.
     그 색은 경계선 전용으로 두고, 흐린 글자는 --gray(5.54:1)를 쓴다. */
  --muted-line:#9AA1AC; --muted:var(--gray);
  /* 아래는 기존 코드가 부르는 이름. 설계서 토큰을 그대로 가리킨다. */
  --page:var(--light); --surface:#fff; --surface-2:var(--light-2);
  --ink-2:var(--gray); --blue-dark:var(--navy-2); --amber:var(--gold);
  --orange:var(--gold);
  --ok-bg:var(--teal-tint); --warn-bg:var(--gold-tint); --err-bg:var(--red-tint);
  --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;
    /* 어두운 화면에서도 같은 색으로 읽히도록 설계서 색상의 명도만 올린다.
       색상(hue)은 그대로 두어야 인쇄본·심사 자료와 같은 색으로 보인다. */
    --navy:#C9D8F0; --blue:#7FA6E0; --teal:#5BC4B0; --gold:#E0B85F;
    --red:#E8827A; --gray:#A8B1BF; --light:#0D1016; --line:#2A323E;
    --ink:#F2F5F8;
    --navy-2:#8FA6CC; --blue-tint:#16213A; --blue-line:#2A3B5C;
    --teal-tint:#0F2A26; --gold-tint:#2C2410; --gold-line:#4A3D1C;
    --red-tint:#31191A; --light-2:#161B23;
    --muted-line:#5A6472; --muted:var(--gray);
    --page:var(--light); --surface:#161B23; --surface-2:var(--light-2);
    --ink-2:var(--gray); --blue-dark:var(--navy-2); --amber:var(--gold);
    --orange:var(--gold);
    --ok-bg:var(--teal-tint); --warn-bg:var(--gold-tint); --err-bg:var(--red-tint);
    --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:16px;
  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:14px;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:12px;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:13.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:15.5px;font-weight:800;margin:0 0 8px}
.lede{color:var(--ink-2);font-size:15px;margin:0 0 20px;max-width:760px}
.lede.small{font-size:14px}
.note{color:var(--ink-2);font-size:14px;margin:10px 0}
.note.small{font-size:13px;color:var(--muted)}
.err{background:var(--err-bg);color:var(--red);border-radius:8px;padding:10px 13px;font-size:14px;font-weight:700;margin:12px 0 0}

/* ── hero ───────────────────────────────── */
.hero{text-align:center;padding:32px 0 8px}
.eyebrow{font-size:12.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:15px;margin:0 0 8px;color:var(--teal)}
.privacy-card p{margin:0;font-size:14.5px;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:16px;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:14.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:14px;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:13px;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:13px;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:13.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:13px;font-weight:800;margin-top:2px}
.goal .gd{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:3px}
.goals-note{margin:14px 0 0;font-size:13px;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:12.5px;color:var(--muted);font-weight:700;margin-top:2px}
.metrics-note{font-size:13px;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:14.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:12px;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:15px;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:14px;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:12.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:17.5px;                               /* 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:13.5px;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:14.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:14.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:13px}
.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:12.5px;color:var(--muted);font-weight:700}
.resbar b{font-size:15px}
.resbar .goal{display:block;font-size:12px;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:13px;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:14.5px;color:var(--blue)}
.iname{font-size:16px;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:15px;color:var(--ink);font-weight:800}
.kw span{background:var(--surface-2);border-radius:999px;padding:3px 10px;font-size:12.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:22.5px;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:16.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:14.5px}
.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:12px;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:14.5px;color:var(--blue);margin-bottom:4px}
.steps p{margin:0;font-size:14.5px;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:15px;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:14.5px;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:13.5px;color:var(--muted)}
.disclaimer strong{color:var(--ink-2)}
.disclaimer.small{font-size:12.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:19.5px}
}

/* 갤럭시 폴드 접힘·소형 기기 (280~359px) */
@media (max-width:359px){
  :root{--pad:12px}
  body{font-size:15px}
  .bar-in{gap:6px}
  .topnav button{padding:0 9px;font-size:13.5px}
  .metrics{grid-template-columns:1fr 1fr;gap:8px}
  .mv{font-size:20.5px}
  .box,.card,.privacy-card{padding:14px}
  .tab{padding:9px 10px;font-size:13.5px}
  .tab em{display:none}                          /* 부제는 접어 폭을 확보 */
  .card-h{gap:6px}
  .iname{font-size:15px}
  .gauge{width:64px;height:64px;font-size:17.5px}
  .drop{padding:20px 12px;font-size:13.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:13.5px}
.vc summary::-webkit-details-marker{display:none}
.vc summary::before{content:"▸";color:var(--muted);font-size:12px;transition:transform .15s}
.vc[open] summary::before{transform:rotate(90deg)}
.vc-rel{font-weight:800;padding:4px 11px;border-radius:4px;font-size:14px;
  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:14px;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:14px;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:17.5px;font-weight:800;color:var(--ink)}
.perf-fold .pf-s{font-size:14px;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:16px;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:14.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}}

/* 최종 추천이 결과①의 몇 위 후보였는지. 화면은 3개만 보여주지만 후보는 20개이므로,
   이 표시가 없으면 "후보 밖에서 온 것"으로 오해된다. */
.card-h .from{margin-left:auto;font-size:12.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap}

/* 품목검색 */
.searchbar{display:flex;gap:8px;margin:14px 0 6px}
.searchbar input{flex:1;padding:11px 13px;border:1px solid var(--line);border-radius:8px;
  font-size:16px;font-family:inherit}
.searchbar input:focus{outline:2px solid var(--teal);outline-offset:1px}
.expand-opt{display:flex;gap:7px;align-items:flex-start;font-size:14px;color:var(--muted);
  margin-bottom:10px;cursor:pointer}
.expand-opt em{font-style:normal;opacity:.75}
.defsnip{margin:8px 0 0;font-size:14px;line-height:1.65;color:var(--muted)}


/* 후보 보존 검증 배지 — 통과와 실패를 색으로 갈라 놓는다.
   설계서 기준: 통과 ✔ 청록, 실패 ⚠ 적색. 배경은 각 색의 옅은 단계를 쓴다. */
.cp{display:block;margin-top:8px;padding:10px 12px;border-radius:8px;
    border:1px solid var(--line);background:var(--surface-2)}
.cp b{display:block;font-size:.95rem}
.cp .small{display:block;margin-top:4px;color:var(--gray);font-size:.85rem}
.cp.ok{background:var(--teal-tint);border-color:var(--teal)}
.cp.ok b{color:var(--teal)}
.cp.bad{background:var(--red-tint);border-color:var(--red)}
.cp.bad b{color:var(--red)}
.cp.bad .small{color:var(--ink)}


/* 판정 근거 — 기본은 접어 둔다. 카드 세 장이 한눈에 들어와야 하기 때문이다.
   펼치면 공식 정의문 원문과 '다른 후보에는 없는 대목'이 나온다. */
.basis{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.basis>summary{cursor:pointer;color:var(--blue);font-size:.9rem;
  padding:4px 0;min-height:var(--tap);display:flex;align-items:center}
.basis>summary::marker{color:var(--gray)}
.basis-def{margin:6px 0;color:var(--ink);font-size:.9rem;line-height:1.65;
  background:var(--light-2);border-left:3px solid var(--blue);
  padding:10px 12px;border-radius:0 6px 6px 0}
.basis-h{margin:10px 0 4px;font-weight:600;font-size:.85rem;color:var(--gray)}
.basis-mark{margin:0;padding-left:18px}
.basis-mark li{color:var(--ink);font-size:.88rem;line-height:1.6;margin:4px 0}
.basis-mark li::marker{color:var(--teal)}
.basis-src{margin:10px 0 0;font-size:.78rem;color:var(--gray)}


/* 판정 근거 — 잘라내지 않고 문단으로 나눠 보여 준다.
   글자 수로 자르면 문장 한가운데서 끊긴다. 길면 접어 두고, 펴면 다 보인다. */
.basis-sec{margin:12px 0;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.basis-sec:last-of-type{border-bottom:0}
.basis-def,.basis-ex{max-height:none}
.basis-def p,.basis-ex p{margin:0 0 7px;line-height:1.7;font-size:.9rem;color:var(--ink)}
.basis-def{background:var(--light-2);border-left:3px solid var(--blue);
  padding:11px 13px;border-radius:0 6px 6px 0}
.basis-ex{background:var(--gold-tint);border-left:3px solid var(--gold);
  padding:11px 13px;border-radius:0 6px 6px 0}
.basis-firms{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.basis-firms b{font-size:.85rem;color:var(--gray);margin-right:4px}
.basis-firms span{background:var(--teal-tint);color:var(--teal);
  border:1px solid var(--teal);border-radius:999px;padding:3px 10px;font-size:.84rem}
.basis-nb{margin:0;padding-left:0;list-style:none}
.basis-nb li{margin:7px 0;padding:9px 11px;background:var(--surface-2);
  border-radius:8px;font-size:.88rem;line-height:1.6}
.basis-nb b{color:var(--navy)}
.nb-sim{margin-left:8px;color:var(--gray);font-size:.8rem}
.nb-why{display:block;margin-top:5px;color:var(--ink);font-size:.86rem}
.sr-ex{margin-top:8px}
.sr-ex>summary{cursor:pointer;color:var(--blue);font-size:.86rem;padding:3px 0}
.sr-firms{margin-top:8px}
.defsnip p{margin:0 0 6px;line-height:1.7}


/* 일치 키워드 — 누를 수 있는 것만 손가락 표시를 준다 */
.card-hit.has-ctx{cursor:pointer;border:1px solid var(--teal)}
.card-hit.has-ctx:hover{background:var(--teal-tint)}
.card-hit.open{background:var(--teal);color:#fff}
.kw-ctx{margin:8px 0 0;padding:10px 12px;background:var(--light-2);
  border-left:3px solid var(--teal);border-radius:0 6px 6px 0}
.kw-ctx-h{margin:0 0 6px;font-size:.82rem;color:var(--gray);font-weight:600}
.kw-ctx-s{margin:0 0 6px;font-size:.88rem;line-height:1.7;color:var(--ink)}
.kw-ctx mark{background:var(--gold-tint);color:var(--ink);
  border-bottom:2px solid var(--gold);padding:0 2px}

/* 관계도 — 후보 3개와 그 주변만 그린다. 240개를 뿌리면 판단에 못 쓴다. */
.relmap{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.relmap-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.relmap svg{width:100%;min-width:940px;height:auto;display:block}
.rl-cap{font-size:11px;fill:var(--gray)}
.rl-edge{stroke:var(--line);stroke-width:1.5;fill:none}
.rl-firm{stroke:var(--teal);stroke-opacity:.45}
.rl-nb{stroke:var(--gold);stroke-opacity:.5;stroke-dasharray:4 3}
.rl-node text{font-size:12px;fill:var(--ink)}
.rl-cand rect{fill:var(--navy);stroke:none}
.rl-cand text{fill:#fff;font-weight:700;font-size:12.5px}
.rl-cand .rl-nm{font-weight:500;font-size:11.5px;fill:#dbe4f5}
.rl-fnode rect{fill:var(--teal-tint);stroke:var(--teal)}
.rl-fnode text{fill:var(--teal);font-size:11.5px}
.rl-nnode rect{fill:var(--gold-tint);stroke:var(--gold)}
.rl-nnode text{fill:var(--ink);font-size:11.5px}
.rl-nnode .rl-sim{fill:var(--gray);font-size:10px}
.rl-nnode:hover rect{stroke-width:2}
@media (max-width:640px){.relmap svg{min-width:900px}}


/* 최종 추천과 관계도는 '결과 비교'에 있다. 여기를 안 누르면 이 서비스가
   실제로 하는 일을 못 보므로, 기본으로 열어 두고 굵게 표시한다. */
.tab-main{font-weight:700}
.tab-main::before{content:"★ ";color:var(--gold)}


/* 품목검색 예시 — 처음 쓰는 사람은 무엇을 적어야 할지 모른다. 눌러 보게 한다. */
.q-samples{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:10px 0 4px}
.q-lab{font-size:.85rem;color:var(--gray);margin-right:2px}
.q-samples .chip{background:var(--blue-tint);color:var(--blue);border:1px solid var(--blue-line);
  border-radius:999px;padding:6px 13px;font-size:.86rem;cursor:pointer;
  min-height:32px;font-family:inherit}
.q-samples .chip:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ── 필수 입력 표시 (P1-4) ────────────────────────────────
   빈 칸에 테두리를 두르고 그 아래 한 줄로 무엇이 비었는지 말한다.
   알림창을 띄우지 않는 이유 — 화면을 막고, 읽어 주는 도구와 맞지 않으며,
   여러 칸이 비었을 때 하나씩만 알려 주게 된다. */
.field-bad{border-color:var(--red)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 16%,transparent)}
.field-msg{margin:6px 0 0;font-size:13.5px;font-weight:600;color:var(--red)}
.field-msg::before{content:"▲ ";font-size:10px;vertical-align:1px}

/* ── 모니터링 상세보기 (P2-1) ─────────────────────────────
   서버에 결과를 남기지 않으므로 내가 본 건에서만 열린다.
   못 여는 행은 숨기지 않고 왜 못 여는지 알 수 있게 남긴다. */
.mon-detail a{color:var(--blue);font-weight:700;text-decoration:none;white-space:nowrap}
.mon-detail a:hover{text-decoration:underline}
.mon-none{color:var(--gray);cursor:help}
.badge[data-detail]{cursor:pointer}
.badge[data-detail]:hover{filter:brightness(.94)}

/* ── 모니터링 갱신 표시 (3차 수정) ────────────────────────
   목록이 그대로여도 눌렀다는 것이 보여야 한다. */
.mon-updated{margin-left:12px;font-size:13.5px;color:var(--gray);
  font-variant-numeric:tabular-nums}
.mon-updated.busy{color:var(--blue);font-weight:700}
#btn-refresh:disabled{opacity:.55;cursor:default}

/* ── 240개 지형 도넛 (시안 A) ─────────────────────────────
   조각 크기는 품목 수다. 확률이 아니다. */
.donut{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.dn-wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:10px}
.dn-svg{width:236px;height:236px;flex:none}
.dn-side{flex:1;min-width:240px}
.dn-mid{font-size:22px;font-weight:800;fill:var(--ink)}
.dn-midl{font-size:11px;fill:var(--muted)}
.dn-mk{font-size:11px;font-weight:800}
.dn-lgs{margin-bottom:10px}
.dn-lg{display:inline-flex;align-items:center;font-size:12.5px;color:var(--muted);
  margin:0 12px 6px 0;white-space:nowrap}
.dn-lg i{width:11px;height:11px;border-radius:3px;margin-right:6px;display:inline-block}
.dn-lg b{color:var(--ink);margin-left:4px}
.dn-say{font-size:14px;margin:0 0 8px}
.dn-note{font-size:12.5px;color:var(--muted);margin:0}
@media(max-width:560px){.dn-wrap{gap:14px}.dn-svg{width:200px;height:200px}}

/* ── 처리시간 두 줄 표기 ──────────────────────────────────
   윗줄은 실제로 기다린 시간, 아랫줄은 총 경과다.
   글자 크기는 같게 두고 윗줄만 굵게 해 무게를 준다. */
.r-ms2{display:block;line-height:1.5}
.r-ms2 .tm-a,.r-ms2 .tm-b{display:block;font-size:15px}
.r-ms2 .tm-a{font-weight:800;color:var(--ink)}
.r-ms2 .tm-b{font-weight:500;color:var(--muted)}

/* ── 검색에서 이어온 안내 ─────────────────────────────────
   고른 품목은 입력값이 아니라 참고다. 그 사실을 글자로 밝힌다. */
.carry{background:var(--surface-2);border-left:3px solid var(--blue);
  border-radius:0 7px 7px 0;padding:10px 14px;margin:0 0 14px;font-size:14.5px}
.carry b{color:var(--ink)}
.hint{display:block;margin-top:5px;font-size:13px;color:var(--muted)}
.carry-res{border-radius:8px;padding:11px 15px;margin:0 0 14px;font-size:15px}
.carry-res.hit{background:var(--ok-bg);color:var(--teal)}
.carry-res.miss{background:var(--warn-bg);color:var(--gold)}
.carry-res b{color:inherit}
.sr-try{margin-top:8px}
.sr-try button{font-size:13.5px;padding:5px 12px}

/* 글자 키움 2026-08-22 — 본문만 약 8%. 표·SVG·상단메뉴·11px 미만은 그대로 */