/* ===== 신생아 황달 스크리닝 — product UI ===== */
:root{
  --bg:#faf9f7; --card:#fff; --ink:#1c1917; --mut:#78716c; --soft:#a8a29e;
  --line:#e7e5e4; --line2:#d6d3d1;
  --brand:#0f766e; --brand-ink:#134e4a;
  --amber:#d97706; --amber-soft:#fef3c7;
  --dark:#1c1917;
  --r:16px; --r-s:12px;
  --shadow:0 1px 2px rgba(28,25,23,.04), 0 8px 24px -12px rgba(28,25,23,.12);
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
  "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum"}
.wrap{max-width:1000px; margin:0 auto; padding:0 20px}
a{color:inherit; text-decoration:none}

/* ---------- topbar ---------- */
.topbar{position:sticky; top:0; z-index:10; background:rgba(250,249,247,.85);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; gap:10px}
.logo{display:grid; place-items:center; width:36px; height:36px; font-size:20px;
  background:var(--amber-soft); border-radius:11px}
.brand-txt{display:flex; flex-direction:column; line-height:1.2}
.brand-txt b{font-size:15.5px; font-weight:700; letter-spacing:-.2px}
.brand-txt small{font-size:11px; color:var(--soft); letter-spacing:.2px}
.bar-right{display:flex; align-items:center; gap:8px}
.tag{font-size:11.5px; font-weight:600; color:var(--brand-ink); background:#ccfbf1;
  padding:4px 10px; border-radius:999px}
.domain{font-size:12px; color:var(--soft)}
@media(max-width:560px){.domain{display:none} .brand-txt small{display:none}}

/* ---------- hero ---------- */
.hero{padding:44px 0 10px; text-align:center}
.eyebrow{display:inline-block; font-size:12px; font-weight:600; color:var(--brand-ink);
  background:#ccfbf1; padding:5px 13px; border-radius:999px; margin-bottom:14px; letter-spacing:.2px}
.hero h1{font-size:clamp(26px,4.5vw,36px); font-weight:800; letter-spacing:-1px; margin:0 0 12px; line-height:1.25}
.hero .hl{color:var(--amber)}
.hero .sub{color:var(--mut); max-width:620px; margin:0 auto; font-size:15px}
.br-m{display:none} @media(max-width:560px){.br-m{display:inline}}

/* ---------- grid & cards ---------- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; box-shadow:var(--shadow)}
.card-head{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.card-head h2{font-size:15.5px; font-weight:700; margin:0; letter-spacing:-.2px}
.step{display:grid; place-items:center; width:24px; height:24px; font-size:12.5px; font-weight:700;
  color:#fff; background:var(--dark); border-radius:8px}

/* ---------- uploader ---------- */
.uploader{position:relative; display:block; border:1.5px dashed var(--line2); border-radius:var(--r-s);
  background:#fafaf9; min-height:190px; cursor:pointer; overflow:hidden; transition:border-color .15s, background .15s}
.uploader:hover, .uploader.dragging{border-color:var(--amber); background:#fffbeb}
.up-inner{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; color:var(--mut)}
.up-ico{width:34px; height:34px; color:var(--soft); margin-bottom:2px}
.uploader:hover .up-ico, .uploader.dragging .up-ico{color:var(--amber)}
.up-txt{font-weight:600; font-size:14.5px; color:var(--ink)}
.up-sub{font-size:12.5px; color:var(--soft)}
#preview{display:none; width:100%; max-height:320px; object-fit:contain; background:#0c0a09}
.rechoose{display:none; position:absolute; right:10px; bottom:10px; font-size:12px; font-weight:600;
  color:#fff; background:rgba(28,25,23,.65); backdrop-filter:blur(4px); padding:6px 12px; border-radius:999px}
.uploader.has-img #preview{display:block}
.uploader.has-img .up-inner{display:none}
.uploader.has-img .rechoose{display:block}
.uploader.has-img{border-style:solid; border-color:var(--line); background:#0c0a09}

/* ---------- fields ---------- */
.row{display:flex; gap:12px; margin-top:16px}
.field{flex:1}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
.unit-input{position:relative}
.unit-input input{width:100%; padding:11px 44px 11px 13px; border:1.5px solid var(--line);
  border-radius:10px; font-size:15px; font-weight:600; background:#fff; color:var(--ink);
  transition:border-color .15s, box-shadow .15s; font-family:inherit}
.unit-input input::placeholder{color:#d6d3d1; font-weight:400}
.unit-input input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.unit-input span{position:absolute; right:13px; top:50%; transform:translateY(-50%);
  font-size:13px; color:var(--soft); pointer-events:none}
.hint{font-size:12.5px; color:var(--mut); margin:12px 0 0; background:#fafaf9;
  border:1px solid var(--line); border-radius:9px; padding:9px 12px}

/* ---------- buttons ---------- */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  margin-top:18px; padding:13px; border:none; border-radius:11px;
  background:var(--dark); color:#fff; font-size:15px; font-weight:700; font-family:inherit;
  cursor:pointer; transition:background .15s, transform .1s; letter-spacing:-.2px}
.btn:hover{background:#33302c}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.65; cursor:default}
.btn.ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line2); margin-top:16px}
.btn.ghost:hover{background:#fafaf9; border-color:var(--soft)}
.spin{width:15px; height:15px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- placeholder ---------- */
.placeholder{color:var(--mut); padding:4px 0}
.ph-ico{font-size:34px; text-align:center}
.placeholder p{margin:8px 0 18px; text-align:center; font-size:14px}
.how{list-style:none; padding:0; margin:0; counter-reset:st}
.how li{position:relative; padding:10px 12px 10px 42px; background:#fafaf9;
  border:1px solid var(--line); border-radius:10px; margin-bottom:8px; counter-increment:st}
.how li::before{content:counter(st); position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; display:grid; place-items:center; font-size:11.5px; font-weight:700;
  color:var(--brand-ink); background:#ccfbf1; border-radius:6px}
.how b{display:block; font-size:13px; color:var(--ink)}
.how span{font-size:12px; color:var(--mut)}

/* ---------- verdict ---------- */
.verdict{text-align:center; padding:20px 16px 16px; border-radius:var(--r-s); margin-bottom:12px;
  background:color-mix(in srgb, var(--c) 6%, #fff); border:1px solid color-mix(in srgb, var(--c) 22%, #fff)}
.verdict .big{font-size:52px; font-weight:800; color:var(--c); line-height:1; letter-spacing:-2px}
.verdict .big small{font-size:16px; color:var(--mut); font-weight:600; letter-spacing:0; margin-left:6px}
.bandtag{display:inline-block; color:#fff; background:var(--c); padding:4px 15px;
  border-radius:999px; font-weight:700; font-size:13.5px; margin-top:10px}
.verdict .src{font-size:12px; color:var(--mut); margin-top:12px}

/* scale bar */
.scale{margin:16px auto 0; max-width:340px}
.scale-bar{position:relative; display:flex; height:8px; border-radius:99px; overflow:visible; gap:2px}
.scale-bar i{height:100%; opacity:.8}
.scale-bar i:first-child{border-radius:99px 0 0 99px}
.scale-bar i:last-child{border-radius:0 99px 99px 0}
.marker{position:absolute; top:50%; transform:translate(-50%,-50%); width:16px; height:16px;
  background:#fff; border:4px solid var(--c); border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.25)}
.scale-ticks{position:relative; height:16px; margin-top:5px; font-size:10.5px; color:var(--soft)}
.scale-ticks span{position:absolute; transform:translateX(-50%)}
.scale-ticks span:first-child{left:0; transform:none}
.scale-ticks span:last-child{transform:none}

/* ---------- screening chip ---------- */
.screen{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:11px 14px;
  border-radius:10px; font-size:14px; margin-bottom:14px}
.screen b{font-size:12px; padding:2px 8px; border-radius:6px; background:rgba(0,0,0,.06)}
.screen.ok{background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0}
.screen.hi{background:#fff7ed; color:#9a3412; border:1px solid #fed7aa}
.screen span{margin-left:auto; font-size:12.5px; opacity:.75}

/* ---------- detail ---------- */
.detail{display:flex; gap:14px; align-items:flex-start; margin-top:4px}
.shot{width:132px; height:132px; object-fit:cover; border-radius:var(--r-s); border:1px solid var(--line); flex:none}
@media(max-width:520px){.detail{flex-direction:column}.shot{width:100%;height:190px}}
.facts{flex:1; font-size:13.5px; min-width:0}
.fact{padding:8px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.fact:last-child{border:none}
.fact small{color:var(--soft); font-size:12px}
.fact.muted{color:var(--mut); font-size:12.5px}
.fact.warn2{color:#9a3412}
.sw{width:22px; height:22px; border-radius:7px; border:1px solid rgba(0,0,0,.12); flex:none}
.warn{background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; padding:12px 14px;
  border-radius:10px; font-size:14px; margin-bottom:12px}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:26px 0 14px}
@media(max-width:680px){.stats{grid-template-columns:1fr}}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r-s); padding:16px 18px; box-shadow:var(--shadow)}
.stat small{display:block; font-size:11px; font-weight:600; color:var(--soft);
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:4px}
.stat b{display:block; font-size:21px; font-weight:800; letter-spacing:-.5px; color:var(--ink)}
.stat span{font-size:12px; color:var(--mut)}

/* ---------- footer ---------- */
.foot{margin-top:36px; border-top:1px solid var(--line); background:#f5f5f4}
.foot .wrap{padding:24px 20px}
.notice{display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-s); padding:14px 16px}
.notice-ico{font-size:17px; line-height:1.5}
.notice p{font-size:12.5px; color:var(--mut); margin:0; line-height:1.65}
.notice b{color:var(--ink)}
.copyright{font-size:11.5px; color:var(--soft); margin:14px 0 0; text-align:center}

/* ---------- 접근성 ---------- */
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--dark); color:#fff;
  padding:10px 18px; border-radius:0 0 10px 0; font-size:13.5px; font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:2px; border-radius:4px}
.btn:focus-visible, .uploader:focus-within{outline:2.5px solid var(--brand); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---------- FAQ ---------- */
.faq{margin:34px 0 10px}
.faq h2{font-size:18px; font-weight:800; letter-spacing:-.4px; margin:0 0 14px; text-align:center}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:var(--r-s);
  margin-bottom:8px; box-shadow:var(--shadow); overflow:hidden}
.faq summary{list-style:none; cursor:pointer; padding:14px 44px 14px 18px; font-size:14.5px;
  font-weight:600; position:relative; user-select:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:19px; font-weight:400; color:var(--soft); transition:transform .15s}
.faq details[open] summary::after{content:"−"; color:var(--amber)}
.faq details p{margin:0; padding:0 18px 15px; font-size:13.5px; color:var(--mut); line-height:1.7}
.faq details p b{color:var(--ink)}