/* 과학 아틀라스 — 1억도를 담는 그릇 (2026-09-15 판 셋으로 다시 만듦) */
.fu-sec{margin:34px 0 0;padding-top:26px;border-top:1px solid var(--ink-3)}
.fu-h{font-family:var(--disp);font-weight:700;font-size:19px;margin-bottom:12px}
.fu-tip{color:var(--chalk-dim);font-size:14.5px;line-height:1.75;margin-bottom:14px}

/* 판 1 · 여섯 걸음 */
.fu-stepper{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius);padding:14px 16px 18px}
.fu-stage svg{width:100%;max-width:640px;height:auto;display:block;margin:0 auto}
.fu-nav{display:flex;align-items:center;gap:10px;margin-top:10px}
.fu-arrow{width:42px;height:36px;background:none;border:1px solid var(--ink-3);color:var(--chalk);
  border-radius:999px;font-size:16px;font-family:inherit;cursor:pointer;transition:.15s}
.fu-arrow:hover{border-color:var(--brass);color:var(--brass-soft)}
.fu-dots{flex:1;display:flex;gap:7px;justify-content:center}
.fu-dots i{width:8px;height:8px;border-radius:50%;background:var(--ink-3);display:block}
.fu-dots i.on{background:var(--brass)}
.fu-stepname{margin:12px 0 0;text-align:center;font-family:var(--disp);font-weight:700;font-size:16.5px;color:var(--brass-soft)}
.fu-caption{margin:6px 0 0;text-align:center;font-size:14.5px;line-height:1.75;color:var(--chalk)}
.fu-stage .lb{font-family:var(--mono);font-size:12px;fill:var(--chalk-dim)}
.fu-stage .lb-b{font-family:var(--disp);font-weight:700;font-size:13.5px;fill:var(--chalk)}
.fu-stage .arr{stroke:var(--chalk-dim);stroke-width:1.5;fill:none}
.fu-stage .frame{fill:none;stroke:var(--ink-3)}

/* 판 2·3 · 통 */
.fu-canvas{width:100%;height:280px;display:block;background:var(--ink);border:1px solid var(--ink-3);border-radius:var(--radius)}
.fu-lab{display:grid;gap:12px}
.fu-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fu-stat{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius);padding:10px 8px;text-align:center}
.fu-stat span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--chalk-dim)}
.fu-stat b{display:block;margin-top:2px;font-family:var(--mono);font-size:22px;font-weight:500;color:var(--chalk)}
.fu-stat b.ok{color:var(--brass-soft)}

.fu-ctl{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius);padding:16px 18px;margin-top:12px}
.fu-lab .fu-ctl{margin-top:0}
.fu-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.11em;color:var(--brass);margin:16px 0 8px}
.fu-lbl:first-child{margin-top:0}
.fu-val{float:right;font-family:var(--mono);letter-spacing:0;color:var(--chalk)}
.fu-hint{font-size:13px;color:var(--chalk-dim);margin-top:6px}
.fu-range{width:100%;margin:4px 0 2px;accent-color:var(--brass)}
.fu-row{display:flex;gap:8px;margin-top:14px}
.fu-btn{flex:1;background:none;border:1px solid var(--brass);color:var(--brass-soft);
  border-radius:999px;padding:9px 0;font-size:14.5px;font-family:inherit;cursor:pointer;transition:.15s}
.fu-btn:hover{background:var(--ink-3)}
.fu-btn.ghost{border-color:var(--ink-3);color:var(--chalk-dim)}

.fu-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fu-half .fu-canvas{height:200px}
.fu-halfname{text-align:center;font-family:var(--disp);font-weight:700;font-size:15px;margin:0 0 6px}
.fu-halfsub{text-align:center;font-family:var(--mono);font-size:11.5px;color:var(--chalk-dim);margin:6px 0}
.fu-half .fu-stat{margin-top:4px}

.fu-card{margin-top:14px;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius);padding:18px 20px}
.fu-why{font-size:14.5px;line-height:1.8}
.fu-why + .fu-why{margin-top:10px}
.fu-why b{color:var(--brass-soft);font-weight:500}
.fu-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--ink-3);font-size:13.5px;line-height:1.8;color:var(--chalk-dim)}

/* 사진 */
.fu-photo{margin:22px 0 0}
.fu-photo img{width:100%;height:auto;display:block;border-radius:var(--radius);border:1px solid var(--ink-3)}
.fu-photo figcaption{margin-top:8px;font-size:13px;line-height:1.7;color:var(--chalk-dim)}
.fu-credit{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;color:var(--chalk-dim);opacity:.8}
.fu-credit a{color:inherit}
.fu-empty{background:var(--ink-2);border:1px dashed var(--ink-3);border-radius:var(--radius);padding:20px;text-align:center;font-size:13.5px;color:var(--chalk-dim)}
.fu-empty a{display:inline-block;margin-top:8px;color:var(--brass-soft)}

@media(prefers-reduced-motion:reduce){.fu-stage svg *{animation:none!important}}

/* ── 영상 (누를 때 유튜브를 불러온다) ─────────────────── */
.fu-video{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--ink-3);background:var(--ink-2);aspect-ratio:16/9}
.fu-vbtn{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}
.fu-vbtn img{width:100%;height:100%;object-fit:cover;display:block}
.fu-play{position:absolute;left:50%;top:50%;width:76px;height:54px;margin:-27px 0 0 -38px;
  background:rgba(12,21,38,.78);border:1px solid var(--brass);border-radius:14px;transition:.15s}
.fu-play::after{content:"";position:absolute;left:50%;top:50%;margin:-11px 0 0 -7px;
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--brass-soft)}
.fu-vbtn:hover .fu-play{background:var(--brass);border-color:var(--brass)}
.fu-vbtn:hover .fu-play::after{border-left-color:var(--ink)}
.fu-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fu-vcap{margin-top:8px;font-size:13px;color:var(--chalk-dim)}
.fu-vcap a{color:var(--brass-soft)}

/* ── 2026-10-01 그림판으로 손봄 ─────────────────────────── */
/* 판 1 · 밀어 넘기는 그림 */
.fu-car{position:relative;overflow:hidden;border-radius:var(--radius);background:#0b1424;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.fu-track{display:flex;transition:transform .45s cubic-bezier(.3,.8,.3,1)}
.fu-slide{flex:0 0 100%;margin:0;position:relative}
.fu-slide img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;pointer-events:none}
.fu-slide.on img{animation:fu-kb 12s ease-in-out infinite alternate}
@keyframes fu-kb{from{transform:scale(1)}to{transform:scale(1.06) translate(-1%,-1%)}}
.fu-slide figcaption{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(247,244,235,.93);color:#1b2740;border-radius:9px;padding:10px 14px;font-size:14.5px;line-height:1.65}
.fu-slide figcaption b{display:block;font-family:var(--disp);font-size:16px;margin-bottom:2px}
.fu-car .fu-arrow{position:absolute;top:42%;width:42px;height:42px;margin-top:-21px;border-radius:50%;border:0;background:rgba(12,21,38,.6);color:#F3E7C2;font-size:26px;line-height:1;cursor:pointer;z-index:2}
.fu-car .fu-arrow:disabled{opacity:0;pointer-events:none}
.fu-prev{left:10px}.fu-next{right:10px}
.fu-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.fu-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--ink-3);cursor:pointer}
.fu-dots button.on{background:var(--brass);width:22px;border-radius:5px}
@media (max-width:640px){.fu-slide figcaption{position:static;border-radius:0 0 var(--radius) var(--radius);font-size:13.5px}.fu-car .fu-arrow{top:30%}}
@media (prefers-reduced-motion:reduce){.fu-track{transition:none}.fu-slide.on img{animation:none}}

/* 판 2·3 · 구슬 이름표와 손잡이 */
.fu-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--chalk-dim);margin:-2px 0 12px}
.fu-legend span{display:inline-flex;align-items:center;gap:6px}
.fu-legend img{width:18px;height:18px}
.fu-canvas{border-radius:var(--radius);background:#0b0f1c}
.fu-range{-webkit-appearance:none;appearance:none;height:8px;border-radius:4px;background:linear-gradient(90deg,#5FA8F0,#F0B24A 55%,#E8645A)}
.fu-range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;cursor:grab;
  background:radial-gradient(circle at 40% 35%,#fff3c8,#d8ad45 60%,#8a6516);border:2px solid #fff6d8;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.fu-range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;cursor:grab;background:radial-gradient(circle at 40% 35%,#fff3c8,#d8ad45 60%,#8a6516);border:2px solid #fff6d8}
#dens.fu-range{background:linear-gradient(90deg,#33415e,#a9b4c8)}
