/* 헤더 · 푸터 · 로그인 · 대시보드 크롬 — 화면 공통 껍데기 */

:root{ --nav-h:62px }

/* ── 헤더 ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--nav-h);
  display:flex;align-items:center;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease}
.nav.solid{background:color-mix(in srgb,var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.5) blur(14px);border-bottom-color:var(--line)}
.nav-in{max-width:1140px;margin:0 auto;padding:0 32px;width:100%;
  display:flex;align-items:center;gap:26px}
.brand{font-weight:800;font-size:17px;letter-spacing:-.035em;text-decoration:none;
  color:var(--fg)}
.nav-links{display:flex;gap:2px}
.nav-links a{font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;
  padding:7px 12px;border-radius:8px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%, transparent)}
.nav-links a.on{color:var(--fg)}
.nav .sp{flex:1}
.nav-login{font-size:13.5px;font-weight:700;color:var(--fg);text-decoration:none;
  padding:8px 15px;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--fg) 26%, transparent);
  transition:border-color .2s,background .2s}
.nav-login:hover{border-color:color-mix(in srgb,var(--fg) 55%, transparent);
  background:color-mix(in srgb,var(--fg) 5%, transparent)}
.nav-prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--accent);
  display:block}
@media(max-width:820px){
  .nav-in{gap:14px;padding:0 22px}
  .nav-links{display:none}
}

/* 헤더가 덮지 않도록 */
.pad-nav{padding-top:var(--nav-h)}

/* ── 푸터 ── */
.foot{border-top:1px solid var(--line);padding:30px 0 56px;font-size:12.5px;
  color:var(--muted);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--fg)}

/* ── 목업 설정 (?dev=1 일 때만 나타납니다) ── */
.dev{position:fixed;right:18px;bottom:18px;z-index:95;font-size:12px}
.dev-tg{background:var(--fg);color:var(--bg);border:0;border-radius:100px;
  padding:9px 15px;font-size:12px;font-weight:700;cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.dev-p{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;box-shadow:0 18px 50px -18px rgba(0,0,0,.4);
  display:grid;gap:11px;min-width:216px}
.dev-r{display:flex;align-items:center;justify-content:space-between;gap:14px}
.dev-r>span{color:var(--muted);font-size:11.5px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{font:inherit;font-size:11.5px;font-weight:700;padding:5px 10px;border:0;
  cursor:pointer;background:transparent;color:var(--muted);transition:background .15s,color .15s}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

/* ── 샘플 안내 띠 ── */
.notice{background:color-mix(in srgb,var(--accent) 9%, transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%, transparent);
  font-size:12.5px;color:var(--fg)}
.notice .in{max-width:1140px;margin:0 auto;padding:9px 32px;display:flex;
  align-items:center;gap:9px}
.notice b{font-weight:700}
.notice span{color:var(--muted)}
@media(max-width:760px){.notice .in{padding:9px 22px}}

/* ── 로그인 · 회원가입 ── */
.auth{min-height:100vh;display:grid;place-items:center;
  padding:calc(var(--nav-h) + 40px) 24px 56px}
.auth-grid{width:100%;max-width:980px;display:grid;grid-template-columns:1fr 420px;
  gap:80px;align-items:center}
.auth-say h2{font-size:clamp(28px,2.8vw,38px);font-weight:800;letter-spacing:-.042em;
  line-height:1.32;margin-bottom:20px}
.auth-say p{font-size:16px;line-height:1.85;color:var(--muted);max-width:30ch}
@media(max-width:900px){
  .auth-grid{grid-template-columns:1fr;gap:0;max-width:420px}
  .auth-say{display:none}
}
.auth-box{width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:38px 36px;box-shadow:0 30px 70px -46px rgba(0,0,0,.45)}
.auth-box h1{font-size:25px;font-weight:800;letter-spacing:-.035em;margin-bottom:6px}
.auth-box .desc{font-size:14.5px;line-height:1.7;color:var(--muted);margin-bottom:30px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--muted);
  margin-bottom:7px}
.field input{width:100%;font:inherit;font-size:15.5px;padding:13px 15px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--fg);
  transition:border-color .18s}
.field input:focus{outline:0;border-color:var(--accent)}
/* 입력을 받지 않습니다. 채울 것이 없다는 게 보이도록 눌린 면으로 둡니다 */
.field input:disabled{background:color-mix(in srgb,var(--fg) 4%, transparent);
  border-style:dashed;cursor:default;-webkit-text-fill-color:var(--muted)}
.field input::placeholder{color:var(--muted);opacity:.9}
.field input:disabled::placeholder{font-size:13.5px}
.auth .btn{width:100%;text-align:center;padding:15px 20px;margin-top:14px;font-size:15px}
.auth-alt{margin-top:24px;font-size:14px;color:var(--muted);text-align:center}
.auth-alt a{color:var(--fg);font-weight:700;text-decoration:none}
.auth-alt a:hover{text-decoration:underline}
.auth-note{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);line-height:1.75}

/* ── 대시보드 셸 ── */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}
@media(max-width:920px){.app{grid-template-columns:1fr}}

.side{border-right:1px solid var(--line);padding:18px 14px 20px;
  display:flex;flex-direction:column;gap:24px;
  background:color-mix(in srgb,var(--fg) 2.5%, transparent)}
@media(max-width:920px){.side{border-right:0;border-bottom:1px solid var(--line);
  flex-direction:row;align-items:center;gap:14px;padding:12px 22px;overflow-x:auto}}
.side .bd{display:flex;align-items:baseline;gap:8px;padding:6px 10px;
  font-weight:800;font-size:16.5px;letter-spacing:-.035em;
  text-decoration:none;color:var(--fg)}
.side-nav{display:grid;gap:2px}
@media(max-width:920px){.side-nav{display:flex;gap:4px}}
.side-nav button{display:flex;align-items:center;gap:10px;border:0;background:transparent;
  color:var(--muted);font:inherit;font-size:14px;font-weight:600;padding:10px 11px;
  border-radius:9px;cursor:pointer;text-align:left;width:100%;white-space:nowrap;
  transition:background .16s,color .16s}
.side-nav button:hover{background:color-mix(in srgb,var(--fg) 6%, transparent);color:var(--fg)}
.side-nav button[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.side-nav svg{width:17px;height:17px;flex:none}
.side .foot-u{margin-top:auto;border-top:1px solid var(--line);padding:12px 10px 0;
  font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:10px}
@media(max-width:920px){.side .foot-u{margin:0 0 0 auto;border:0;padding:0}}
.side .foot-u b{font-weight:700;color:var(--fg)}
.side .foot-u button{margin-left:auto;font:inherit;font-size:12.5px;color:var(--muted);
  background:0;border:0;cursor:pointer}
.side .foot-u button:hover{color:var(--fg)}

.appmain{min-width:0;display:flex;flex-direction:column;min-height:0}
.apptop{position:sticky;top:0;z-index:20;min-height:var(--nav-h);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;
  padding:0 30px;background:color-mix(in srgb,var(--bg) 90%, transparent);
  backdrop-filter:blur(12px)}
.apptop h1{font-size:16px;font-weight:800;letter-spacing:-.03em}
/* 상단바 왼쪽 = 경로. 마지막 조각이 제목입니다.
   화살표 버튼을 제목 앞에 끼우면 화면마다 제목이 밀립니다 — 그래서 경로로 둡니다 */
.crumbs{display:flex;align-items:baseline;gap:7px;min-width:0}
.crumb-up{font:inherit;font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap;
  background:0;border:0;padding:0;cursor:pointer;transition:color .16s}
.crumb-up:hover{color:var(--fg);text-decoration:underline}
.crumb-up:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.crumb-sep{color:var(--muted);opacity:.45;font-size:14px;flex:none}
.apptop .crumb{font-size:12.5px;color:var(--muted)}
.apptop .sp{flex:1}
.apptop .out{font:inherit;font-size:13px;font-weight:600;color:var(--muted);
  background:0;border:1px solid var(--line);border-radius:7px;padding:6px 12px;cursor:pointer}
.apptop .out:hover{color:var(--fg);border-color:var(--fg)}
@media(max-width:760px){.apptop{padding:0 22px}}
.appscroll{flex:1;min-height:0;overflow-y:auto}
.appbody{padding:26px 30px 90px}
@media(max-width:760px){.appbody{padding:22px 22px 70px}}

.grid2{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:20px;align-items:start}
/* 1fr 은 최소 폭이 min-content 라, 안에 표가 있으면 그 표 폭만큼 열이 벌어집니다.
   minmax(0,1fr) 이라야 열이 화면에 맞고 표는 자기 상자 안에서 굴러갑니다 */
@media(max-width:1120px){.grid2{grid-template-columns:minmax(0,1fr)}}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
@media(max-width:760px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.tile b{display:block;font-size:27px;font-weight:800;letter-spacing:-.04em;line-height:1;
  margin-bottom:7px}
.tile span{font-size:12.5px;color:var(--muted)}

/* 진행 중 카드 — 가짜 진행률을 쓰지 않습니다. 단계와 경과 시간만 */
.run{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;width:100%;text-align:left;font:inherit;cursor:pointer;
  display:block;transition:border-color .18s,box-shadow .18s}
.run:hover{border-color:color-mix(in srgb,var(--accent) 50%, var(--line));
  box-shadow:0 12px 30px -20px rgba(0,0,0,.45)}
.run .hd{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.run .hd b{font-size:15.5px;font-weight:800;letter-spacing:-.025em}
.run .hd em{font-style:normal;font-size:12.5px;color:var(--muted);margin-left:auto;
  font-variant-numeric:tabular-nums}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pstep{display:grid;gap:9px}
.pstep .ln{height:4px;border-radius:100px;background:var(--ghost);overflow:hidden;
  position:relative}
.pstep .ln i{position:absolute;inset:0;width:0;background:var(--accent);border-radius:100px}
.pstep.done .ln i{width:100%;background:var(--ok)}
.pstep.now .ln i{width:100%;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:sweep 1.4s linear infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.pstep.now .ln i{animation:none;
  background:var(--accent)}}
.pstep small{font-size:12.5px;color:var(--muted);font-weight:600}
.pstep.done small,.pstep.now small{color:var(--fg)}

.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{font-size:11.5px;font-weight:700;color:var(--muted);text-align:left;
  padding:0 14px 11px;border-bottom:1px solid var(--line);letter-spacing:.04em}
.tbl td{padding:15px 14px;border-bottom:1px solid var(--line)}
.tbl tbody tr{cursor:pointer;transition:background .16s}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--fg) 4%, transparent)}
.tbl .mono{font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:100px;
  background:color-mix(in srgb,var(--ok) 15%, transparent);color:var(--ok)}
.tag.w{background:color-mix(in srgb,var(--warn) 15%, transparent);color:var(--warn)}
.tag.p{background:color-mix(in srgb,var(--accent) 15%, transparent);color:var(--accent)}

/* 새 검사 */
.drop{border:1.5px dashed var(--line);border-radius:16px;padding:44px 30px;text-align:center;
  background:color-mix(in srgb,var(--fg) 2%, transparent)}
.drop h3{font-size:17px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px}
.drop p{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.drop .btns{justify-content:center;margin-top:0}
.drop .file{font-size:12.5px;color:var(--muted);margin-top:16px}
.sec-h{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;margin-bottom:14px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.panel+.panel{margin-top:18px}
.panel h3{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--muted);
  margin-bottom:16px;text-transform:uppercase}
.shotbox{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.shotbox img{width:100%;display:block}
.cap{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.65}

/* 고정 헤더에 앵커가 가리지 않도록 */
[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
/* 분석 과정은 화면 맨 위에 딱 붙어야 고정 구간이 시작됩니다 */
.pipesec{scroll-margin-top:0}

/* 고정 구간의 wrap 이 flex 아이템이라 내용 폭으로 줄어들고 있었습니다 */
.pin > .wrap{flex:1;min-width:0}

/* ── 분석 과정: 눌러서 조작하는 부분 ── */
.st{border:0;background:transparent;width:100%;display:block;text-align:left;
  font:inherit;cursor:pointer}
.st:hover{opacity:.72}
.st.on{cursor:default}
.st:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.dots{display:flex;gap:7px;margin-top:22px}
.dots button{width:26px;height:3px;border-radius:2px;background:var(--ghost);
  border:0;padding:0;cursor:pointer;transition:background .4s ease}
.dots button:hover{background:color-mix(in srgb,var(--fg) 35%, transparent)}
.dots button.on{background:var(--accent)}

/* 등급 칩 — 검출 단계부터 나타납니다 */
.filt{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 18px;
  display:flex;gap:8px;flex-wrap:wrap;opacity:0;pointer-events:none;
  transition:opacity .4s ease}
.filt.on{opacity:1;pointer-events:auto}
.filt button{background:rgba(8,13,22,.62);border:1px solid rgba(255,255,255,.18);
  border-radius:100px;padding:6px 13px;font:inherit;font-size:11.5px;font-weight:700;
  color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  backdrop-filter:blur(6px);transition:opacity .2s,border-color .2s}
.filt button:hover{border-color:rgba(255,255,255,.45)}
.filt button i{width:7px;height:7px;border-radius:2px;display:block}
.filt button[aria-pressed="false"]{opacity:.42}
@media(max-width:900px){.filt{position:static;padding:14px 0 0}
  .filt button{background:color-mix(in srgb,var(--fg) 8%, transparent);
    border-color:var(--line);color:var(--fg)}}

/* 대시보드 안의 안내 띠는 본문 여백에 맞춥니다 */
.appmain .notice .in{max-width:none;padding:10px 30px}
@media(max-width:760px){.appmain .notice .in{padding:10px 22px}}

/* 버튼은 색을 물려받지 않습니다. 밝기 전환에 안 따라오던 원인 */
/* 진행 카드는 <button> 입니다. 버튼은 폭이 auto 라 그리드 밖(일반 흐름)에
   놓이면 내용만큼 늘어나 화면을 밀어냅니다 — 모바일 가로 스크롤의 주범이었습니다 */
.run{color:var(--fg);width:100%}
.run .hd b{color:var(--fg)}

/* 새 검사의 두 버튼 — .btns 가 flex 가 아니라 간격도 정렬도 없었습니다 */
.drop .btns{display:flex;gap:16px;align-items:center;justify-content:center;
  margin-top:0;flex-wrap:wrap}

/* ── 진행 중 카드 (주인공) ── */
.run.big{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;
  padding:20px;align-items:center}
@media(max-width:640px){.run.big{grid-template-columns:1fr}}
.run-thumb{border-radius:12px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/10;background:#0b1119}
.run-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.run-body{min-width:0}
.run-state{font-size:13px;font-weight:700;color:var(--accent);margin:-10px 0 16px}

/* ── 대기열 ── */
.qlist{margin-top:10px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--surface)}
.qrow{display:grid;grid-template-columns:26px minmax(0,1fr) 74px 52px;gap:12px;
  align-items:center;padding:13px 16px;font-size:14px;
  border-bottom:1px solid var(--line)}
.qrow:last-child{border-bottom:0}
.qrow .q-no{font-size:11.5px;font-weight:700;color:var(--muted);
  background:color-mix(in srgb,var(--fg) 7%, transparent);border-radius:100px;
  text-align:center;line-height:20px;height:20px}
.qrow .q-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .q-st{font-size:12.5px;color:var(--muted)}
.qrow .q-el{font-size:12.5px;color:var(--muted);text-align:right}

/* ── 표 ── */
.panel.tight{padding:8px 12px}
.tbl td.dim{color:var(--muted)}
.tbl .at .t{margin-left:7px}
/* 좁은 화면 — 여섯 열을 그대로 밀어 넣으면 글자가 한 자씩 끊깁니다.
   부차적인 두 열(등급 분포 · 분석 개체)을 접고 나머지는 줄바꿈을 막습니다. */
@media(max-width:640px){
  .tbl .w-dist,.tbl .w-cnt{display:none}
  .tbl th,.tbl td,.tbl.compact td{padding:12px 6px;white-space:nowrap}
  .tbl th{font-size:11px}
  .tbl .at .t{display:block;margin:2px 0 0;font-size:12px;opacity:.8}
  .tbl .w-sub{max-width:88px;overflow:hidden;text-overflow:ellipsis}
  .panel.tight{padding:8px}
  .tbl .w-vd{width:auto}
  .tbl th.sortable button{gap:3px}
  .tbl .arw{margin-left:1px}
}
/* 아주 좁은 화면(360 등)에서는 판정을 점 하나로 줄입니다.
   색이 곧 판정이고, 바로 옆에 총 운동성 숫자가 있습니다 */
@media(max-width:380px){
  .tbl .w-vd .vd-dot{font-size:0;gap:0}
  .tbl .w-vd .vd-dot i{width:10px;height:10px}
}
.tbl .num{text-align:right}
.tbl th.num{text-align:right}
.tbl .w-dist{width:150px}
.tbl .w-vd{width:104px}
.tbl tr.grp td{padding:18px 14px 8px;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;color:var(--muted);border-bottom:0}
.tbl tr.grp{cursor:default}
.tbl tbody tr.grp:hover{background:transparent}
.tbl.compact td{padding:12px 12px;font-size:13.5px}

/* 등급 분포 막대 */
.dist{display:flex;height:7px;border-radius:100px;overflow:hidden;
  background:var(--ghost);min-width:110px}
.dist i{display:block;height:100%}

/* 판정 — 전부 같은 값일 때 눈에 안 띄도록 알약 대신 점 */
.vd-dot{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  white-space:nowrap}
.vd-dot i{width:7px;height:7px;border-radius:50%;display:block;background:var(--muted)}
.vd-dot.ok{color:var(--fg)}      .vd-dot.ok i{background:var(--ok)}
.vd-dot.warn{color:var(--warn)}  .vd-dot.warn i{background:var(--warn)}
.vd-dot.bad{color:var(--bad)}    .vd-dot.bad i{background:var(--bad)}

/* 대상 필터 */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.chips button{font:inherit;font-size:12.5px;font-weight:700;padding:7px 14px;
  border-radius:100px;border:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;transition:all .16s}
.chips button:hover{color:var(--fg);border-color:var(--fg)}
.chips button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* 정렬 가능한 열 제목 */
.tbl th.sortable{padding:0 0 11px}
.tbl th.sortable button{font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);background:0;border:0;cursor:pointer;padding:0 14px 0;
  display:inline-flex;align-items:center;gap:5px}
.tbl th.sortable.num button{flex-direction:row-reverse}
.tbl th.sortable button:hover{color:var(--fg)}
.tbl th.sortable.on button{color:var(--fg)}
.tbl th .arw{font-size:9px;opacity:.35;line-height:1}
.tbl th.sortable.on .arw{opacity:1;color:var(--accent)}

/* 좁은 곁열용 표 — 카드 밖으로 넘치지 않게 */
.tbl.slim{table-layout:fixed;width:100%}
.tbl.slim td{padding:11px 8px}
.tbl.slim .dist{min-width:0}
.tbl.slim td:first-child{width:64px;white-space:nowrap}
.tbl.slim td:last-child{width:62px}

/* ── 넓은 화면 ─────────────────────────────────────────────
   좌측 본문만 늘어나 우측과 균형이 깨지던 문제. 관례대로 내용 컨테이너에
   최대 폭을 걸고 가운데로 모읍니다. 배경·테두리는 화면 끝까지 갑니다. */
:root{ --app-max:1440px }
.appbody{max-width:var(--app-max);margin:0 auto;width:100%}
.apptop{padding:0;display:block}
.apptop .in{max-width:var(--app-max);margin:0 auto;width:100%;
  min-height:var(--nav-h);padding:0 30px;display:flex;align-items:center;gap:16px}
.appmain .notice .in{max-width:var(--app-max);margin:0 auto;padding:10px 30px}
@media(max-width:760px){
  .apptop .in{padding:0 22px;gap:10px}
  .apptop .crumb{display:none}   /* 부제는 접습니다. 경로가 자리를 씁니다 */
  .appmain .notice .in{padding:10px 22px}
}

/* ── 분석 완료 카드 ── */
.run.done{border-color:color-mix(in srgb,var(--ok) 45%, var(--line));
  background:color-mix(in srgb,var(--ok) 5%, var(--surface))}
.run.done .run-state{color:var(--ok)}
.run.done .run-state .mono{color:var(--muted);font-weight:600}
.run-cta{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:800;
  color:var(--ok)}
.run.done:hover .run-cta{text-decoration:underline}

/* 갈 데가 있을 때만 누를 수 있게 보입니다 */
div.run{cursor:default}
div.run:hover{border-color:var(--line);box-shadow:none}
div.run.done:hover{border-color:color-mix(in srgb,var(--ok) 45%, var(--line))}

/* 섹션 제목 + 오른쪽 이동 링크 */
.sec-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:28px 0 14px}
.sec-row .sec-h{margin:0}
.sec-link{font:inherit;font-size:12.5px;font-weight:700;color:var(--accent);
  background:0;border:0;cursor:pointer;padding:0}
.sec-link:hover{text-decoration:underline}

/* 잠긴 버튼 */
.btn.ghost{background:transparent;color:var(--fg);
  border:1px solid var(--line);font-weight:600}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn:disabled:hover{transform:none;opacity:.42}

/* 촬영 영상 — 눌러서 크게 */
button.shotbox{padding:0;background:0;cursor:pointer;position:relative;display:block;
  width:100%}
.shot-play,.lb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:rgba(9,14,24,.62);
  border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;
  transition:transform .18s,background .18s}
.shot-play svg,.lb-play svg{width:22px;height:22px;fill:#fff}
button.shotbox:hover .shot-play{transform:translate(-50%,-50%) scale(1.08);
  background:rgba(9,14,24,.78)}

/* 큰 화면 */
/* 배경 흐리기(backdrop-filter)를 켠 채 투명도를 애니메이션하면 매 프레임
   화면 전체를 다시 흐려야 해서 프레임이 떨어집니다. 흐리기는 빼고,
   배경을 더 진하게 깔아 같은 효과를 냅니다. */
.lb{position:fixed;inset:0;z-index:200;background:rgba(4,8,16,.92);
  display:grid;place-items:center;padding:40px 24px;
  animation:lbin .16s ease-out}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lb-in{animation:lbup .22s cubic-bezier(.22,.61,.36,1)}
@keyframes lbup{from{transform:translateY(10px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.lb,.lb-in{animation:none}}
.lb-in{width:min(1100px,100%)}
.lb-frame{position:relative;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);background:#0b1119}
.lb-frame img{width:100%;display:block}
.lb-play{width:82px;height:82px}
.lb-play svg{width:34px;height:34px}
.lb-cap{margin-top:16px;font-size:13px;color:rgba(255,255,255,.72);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lb-cap b{color:#fff;font-weight:700}
.lb-cap span{margin-left:auto;font-size:12px;color:rgba(255,255,255,.5)}
.lb-x{position:fixed;top:22px;right:24px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.12);border:0;color:#fff;font-size:16px;cursor:pointer}
.lb-x:hover{background:rgba(255,255,255,.22)}

/* 비어 있는 칸 */
.qempty{border:1px dashed var(--line);border-radius:14px;padding:22px;
  font-size:13.5px;color:var(--muted);text-align:center;
  background:color-mix(in srgb,var(--fg) 2%, transparent)}

/* 완료된 줄 — 눌러서 결과로 */
.qrow.done{cursor:pointer;transition:background .16s}
.qrow.done:hover{background:color-mix(in srgb,var(--ok) 7%, transparent)}
.qrow.done .q-st{color:var(--ok);font-weight:700}
.qrow.done .q-no{background:color-mix(in srgb,var(--ok) 18%, transparent);color:var(--ok)}

/* ── 목록 화면: 표가 화면 아래까지 차고 안에서 스크롤됩니다 ── */
.appscroll.fill{overflow:hidden}
.appscroll.fill .appbody{display:flex;flex-direction:column;height:100%;
  min-height:0;padding-bottom:26px}
.appscroll.fill .chips{flex:none}
.appscroll.fill > .appbody > .panel{flex:1;min-height:0;display:flex;
  flex-direction:column;overflow:hidden}
.tablewrap{flex:1;min-height:0;overflow:auto}
.tablewrap thead th{position:sticky;top:0;z-index:2;background:var(--surface);
  padding-top:14px}
.tablewrap thead th.sortable{padding:14px 0 11px}

/* ── 등급 분포 추이 ── */
.trend{width:100%;height:auto;display:block}
.trend .gl{stroke:var(--line);stroke-width:1}
.trend .base{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4;opacity:.8}
.trend .cx,.trend .cy,.trend .cb{font-size:10.5px;fill:var(--muted);
  font-variant-numeric:tabular-nums}
.trend .cx{text-anchor:middle}
.trend .cy{text-anchor:end}
.trend .cb{text-anchor:end;fill:var(--accent);font-weight:700}
/* 총 운동성 꺾은선 — 판정을 가르는 값 하나만 따라갑니다 */
.trend.line .ar{fill:color-mix(in srgb,var(--ok) 9%, transparent);stroke:none}
.trend.line .ln{fill:none;stroke:var(--ok);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round}
.trend.line .pt{fill:var(--surface);stroke:var(--ok);stroke-width:1.6}
.trend.line .pt.now{fill:var(--ok)}

/* 해동 후 활력 예측 — 실측은 점 하나뿐이고 나머지는 예측이라
   선을 끊어 그리고 폭(불확실성)을 같이 칠합니다.
   읽는 값은 SVG 밖 HTML 로 둡니다 — 안에 넣으면 좌표계에 눌려 잘립니다 */
.fc-wrap{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:8px 26px;
  align-items:center}
.fc-plot{position:relative}
.fc-lg{grid-column:1 / -1;margin-top:2px}
.fc-lg i.dot{box-shadow:inset 0 0 0 4px var(--ok);background:var(--ok)}
.fc-lg i.dash.ok{border-top:2px dashed var(--ok);opacity:1}
.fc-lg i.bandi{width:16px;height:9px;border-radius:3px;
  background:color-mix(in srgb,var(--ok) 22%, transparent)}
.fc-read{flex:none;width:132px;display:flex;flex-direction:column;gap:7px}
.fc-read .k{font-size:12px;color:var(--muted)}
.fc-read b{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1}
.fc-read b em{font-style:normal;font-size:15px;font-weight:700;color:var(--muted);margin-left:4px}
.fc-read .tag{align-self:flex-start;font-size:12px;font-weight:800;border-radius:100px;
  padding:4px 11px}
.fc-read .tag.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%, transparent)}
.fc-read .tag.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%, transparent)}
@media(max-width:820px){
  .fc-wrap{grid-template-columns:1fr;gap:14px}
  .fc-read{width:auto;flex-direction:row;align-items:baseline;gap:12px}
}
.trend .ax{fill:var(--muted);font-size:10.5px}
.trend.fc .band{fill:color-mix(in srgb,var(--ok) 11%, transparent);stroke:none}
.trend.fc .pred{fill:none;stroke:var(--ok);stroke-width:2;stroke-dasharray:6 5;
  stroke-linecap:round}
.trend.fc .veil{fill:var(--surface);opacity:.62}
.trend.fc .mark{stroke:var(--fg);stroke-width:1.2;stroke-dasharray:3 4;opacity:.5}
.trend.fc .t0{fill:var(--ok);stroke:var(--surface);stroke-width:2}
.trend.fc .tp{stroke:var(--surface);stroke-width:2.5}
.trend.fc .tp.ok{fill:var(--ok)}
.trend.fc .tp.bad{fill:var(--bad)}
.trend.fc .caret{fill:var(--fg);opacity:.5}
/* 호버 층 — 훑는 자리의 값과 폭을 그 자리에서 보여줍니다 */
.trend.fc .hitzone{fill:transparent}
.trend.fc .hx,.trend.fc .hd{opacity:0;transition:opacity .12s}
.trend.fc .hx{stroke:var(--fg);stroke-width:1;opacity:0}
.trend.fc .hx.on{opacity:.45}
.trend.fc .hd{fill:var(--surface);stroke:var(--ok);stroke-width:2.4}
.trend.fc .hd.on{opacity:1}
/* 예시 표시 — 실제 결과와 섞이지 않게 제목 옆에 답니다 */
.chip-x{flex:none;font-size:11px;font-weight:700;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:3px 9px;background:var(--surface)}
.legend-s{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;
  color:var(--muted)}
.legend-s span{display:inline-flex;align-items:center;gap:7px}
.legend-s i{width:9px;height:9px;border-radius:3px;display:block}
.legend-s i.dash{width:16px;height:0;border-radius:0;border-top:1px dashed var(--accent);
  opacity:.75}
.legend-s i.dot{width:9px;height:9px;border-radius:50%;background:var(--surface);
  box-shadow:inset 0 0 0 2px var(--ok)}

@media(max-width:920px){
  .app{height:auto;overflow:visible}
  .appscroll,.appscroll.fill{overflow:visible}
  .appscroll.fill .appbody{height:auto}

  /* ── 모바일 전수 점검 뒤 손본 것 (2026-09-07) ────────────────────
     좁은 화면에서는 안쪽 스크롤 컨테이너를 풀어 페이지가 통째로 스크롤됩니다.
     그래서 안에서 넘치는 것이 그대로 문서 폭을 밀어, 화면이 축소돼 보이고
     쓸데없는 가로 스크롤이 생겼습니다. */

  /* 표는 칸 폭이 고정이라 좁은 화면에서 반드시 넘칩니다. 패널 안에서 굴립니다 */
  .panel.tight{overflow-x:auto}

  /* 상단바 — 한 줄에 들어가게. 브랜드가 두 줄로 쪼개지고 있었습니다 */
  .side{gap:8px;padding:10px 12px}
  .side .bd{white-space:nowrap;padding:4px 2px;font-size:15px}
  .side-nav{gap:2px}
  .side-nav svg{display:none}
  .side-nav button{font-size:12.5px;padding:8px 7px;gap:0}
  .side .foot-u{gap:0}
  .side .foot-u > span{display:none}      /* 검사자 이름은 접습니다. 로그아웃만 남깁니다 */
  .side .foot-u button{font-size:12px}

  /* 알림 띠 — 두 문장이 옆으로 붙어 어정쩡하게 접혔습니다 */
  .notice .in{display:block}
  .notice .in span{display:block;margin-top:1px}

  /* 타일 셋은 나란히. 숫자 하나에 한 줄씩 쓰면 스크롤만 길어집니다 */
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .tile{padding:14px 12px}
  .tile b{font-size:22px}
  .tile span{font-size:11.5px}
}
@media(max-width:760px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 로고가 "Pre-Sperm AI" 로 길어져 360 에서 상단바가 넘쳤습니다.
   ★ 위의 920 블록보다 뒤에 있어야 이깁니다 — 같은 특정도면 뒤가 이깁니다 */
@media(max-width:380px){
  .side{padding:10px 10px;gap:6px}
  .side-nav button{padding:8px 5px}
}