@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Serif+KR:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');
:root{--paper:#f7f5f0;--ink:#17302e;--muted:#536b66;--teal:#176f67;--soft:#dcebe8;--line:#d5dfd9;--gold:#b18948;--serif:'Noto Serif KR',serif;--sans:'Noto Sans KR',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.8 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:5px}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:5px}button{color:var(--ink)}.skip{position:absolute;top:-100px;left:20px;padding:12px;background:white;z-index:100}.skip:focus{top:10px}.shell{max-width:1160px;margin:auto;padding:24px 32px 60px}.masthead{display:flex;justify-content:space-between;align-items:center;padding:4px 0 24px;border-bottom:1px solid var(--line);gap:12px}.brand{font-weight:600;letter-spacing:-.04em;text-decoration:none}.brand small{display:block;font:10px/1.5 var(--sans);letter-spacing:.22em;color:var(--muted)}.back{font-size:12px;text-decoration:none}.eyebrow{font:500 12px/1.5 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--teal)}.hero{padding:64px 0 42px;position:relative}.hero h1{font:500 clamp(33px,4.9vw,58px)/1.35 var(--serif);letter-spacing:-.055em;margin:18px 0 22px;word-break:keep-all}.hero h1 em{font-style:normal;color:var(--teal)}.hero-row{display:flex;justify-content:space-between;gap:30px;align-items:flex-end}.hero p{max-width:600px;margin:0;color:var(--muted);font-size:16px;word-break:keep-all}.hero-mark{font:italic 76px/1 'Cormorant Garamond',serif;color:#b8c8be}.clinical{display:block;font-size:12px;margin-top:16px;color:var(--muted)}.nav{position:sticky;top:0;z-index:10;background:rgba(247,245,240,.97);display:flex;gap:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0}.nav a{font-size:12px;text-decoration:none}.nav a span{color:var(--teal);margin-right:8px}.section{padding:56px 0;scroll-margin-top:65px;border-bottom:1px solid var(--line)}.section-heading{display:flex;gap:24px;margin-bottom:25px;align-items:flex-start}.number{font:italic 48px/1 'Cormorant Garamond',serif;color:var(--gold)}h2{font:500 clamp(24px,3vw,33px)/1.5 var(--serif);letter-spacing:-.04em;margin:0 0 10px;word-break:keep-all}h3{font:600 20px/1.55 var(--serif);letter-spacing:-.03em;margin:0 0 12px}p{margin:0 0 12px;word-break:keep-all}.intro{color:var(--muted);max-width:710px}.lab{display:grid;grid-template-columns:1.3fr 1fr;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 20px 60px #17302e06}.visual{position:relative;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#f8fbf7,#eaf0e9);padding:24px;min-width:0}.visual svg{display:block;width:100%;height:auto}.visual-label{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.08em;color:var(--muted)}.concept{font-size:11px;color:var(--muted);margin-top:12px}.control{padding:30px;display:flex;flex-direction:column;justify-content:center}.control .eyebrow{font-size:10px}.choice-group{display:flex;gap:7px;flex-wrap:wrap;margin:17px 0}.choice-group button{background:var(--paper);border:1px solid var(--line);padding:9px 13px;border-radius:8px;min-height:44px;font-size:13px}.choice-group button[aria-pressed=true]{background:var(--teal);color:white;border-color:var(--teal)}.explanation{min-height:158px}.explanation p{font-size:14px;color:var(--muted)}.tag{display:inline-block;font-size:11px;color:var(--teal);margin-bottom:8px}.play{align-self:flex-start;border:1px solid var(--teal);color:var(--teal);background:white;border-radius:30px;padding:9px 18px;min-height:44px;font-size:12px}.small{font-size:12px;color:var(--muted)}.note{padding:18px 22px;margin-top:18px;background:#eeeae0;border-radius:12px;font-size:13px;color:#536059}.note b{color:var(--ink)}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:8px 0 24px}.timeline button{border:0;border-bottom:2px solid var(--line);background:transparent;text-align:left;padding:14px 12px;min-height:76px;font-size:13px}.timeline button span{display:block;font:italic 22px 'Cormorant Garamond',serif;color:var(--muted)}.timeline button[aria-pressed=true]{border-color:var(--teal);background:var(--soft);color:var(--teal)}.session-panel{display:grid;grid-template-columns:140px 1fr;gap:25px;padding:30px;background:white;border:1px solid var(--line);border-radius:18px;min-height:200px}.session-glyph{font:italic 65px/1 'Cormorant Garamond',serif;color:var(--teal);display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line)}.session-panel p{color:var(--muted)}.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.card{padding:28px;background:#fff;border:1px solid var(--line);border-radius:18px}.card.dark{background:var(--ink);color:#f7f5f0;border-color:var(--ink)}.dark .eyebrow{color:#b5d4c9}.dark p{color:#c4d6d0;font-size:14px}.scenario-options{display:grid;gap:9px;margin-top:20px}.scenario-options button{border:1px solid #6c9185;border-radius:10px;background:#ffffff08;text-align:left;color:#f7f5f0;font-size:13px;min-height:48px;padding:12px 15px}.scenario-options button[aria-pressed=true]{background:#dcebe8;color:var(--ink)}.feedback{margin:18px 0 0;border-top:1px solid #6c9185;padding-top:16px;min-height:87px}.card details{border-bottom:1px solid var(--line);padding:13px 0}.card details:last-child{border:0}.card summary{cursor:pointer;font-size:14px;padding:4px 0;min-height:38px}.card details p{color:var(--muted);font-size:13px;margin:10px 0}.end{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:35px 0}.end h2{font-size:24px}.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:#fff;text-decoration:none;border-radius:30px;padding:12px 24px;font-size:13px;white-space:nowrap}.sources{font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px}.sources a{display:inline-block;margin-right:20px}.sources p{margin-top:12px}.cuff{fill:#b5c7bd;stroke:#7b9a8d;stroke-width:2;transition:fill .4s,stroke .4s}.cuff.active{fill:#247e70;stroke:#0e554d}.flow{opacity:0;transition:opacity .35s}.flow.active{opacity:1}.ecg-window{transition:x .4s}.oxygen-dots circle{fill:#66b7ae;opacity:.2;transition:opacity .45s}.oxygen-dots.enriched circle{opacity:.9}.stage-accent{transition:fill .4s,opacity .4s}.chamber-ring{stroke:#43897d;stroke-width:2;fill:none;opacity:.18}.chamber[data-stage="1"] .chamber-ring,.chamber[data-stage="2"] .chamber-ring{opacity:.65}.chamber[data-stage="2"] .chamber-air{opacity:.8}.chamber-air{opacity:.15;transition:opacity .4s}.status-pill{position:absolute;left:30px;bottom:25px;font-size:11px;color:var(--teal);border:1px solid #adc9bc;border-radius:30px;padding:5px 12px;background:#f8fbf7}.vessel-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:12px}.vessel-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;background:#66b7ae}.vessel-legend i.red{background:#bb7471}@media(max-width:760px){.shell{padding:18px 20px 35px}.hero{padding:40px 0 30px}.hero-mark{display:none}.hero p{font-size:14px}.lab,.split{grid-template-columns:1fr}.control{padding:24px}.visual{padding:20px;min-height:260px}.section{padding:38px 0}.section-heading{gap:16px}.nav{gap:18px}.nav a{font-size:11px}.session-panel{grid-template-columns:64px 1fr;padding:22px;gap:18px}.session-glyph{font-size:44px}.timeline button{padding:10px 7px;font-size:12px}.end{align-items:flex-start;flex-direction:column}.explanation{min-height:120px}.card{padding:23px}.number{font-size:39px}.masthead{padding-bottom:18px}.back{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Clinic photo tour */
.nav{flex-wrap:wrap}.room-tour{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:white}.tour-image{position:relative;aspect-ratio:16/11;overflow:hidden;background:#e3e9e3}.tour-image img{width:100%;height:100%;object-fit:cover;transition:transform 2.5s ease,object-position 2.5s ease;transform-origin:50% 45%}.room-tour[data-scene="1"] img{transform:scale(1.23);transform-origin:44% 50%}.room-tour[data-scene="2"] img{transform:scale(1.16);transform-origin:64% 0%}.room-tour[data-scene="3"] img{transform:scale(1.02)}.tour-badge{position:absolute;top:20px;left:20px;background:#fffef0ed;border-radius:24px;padding:7px 13px;font-size:12px;color:#23473f}.tour-caption{position:absolute;bottom:0;left:0;right:0;padding:65px 32px 26px;background:linear-gradient(transparent,#102e29f5);color:white}.tour-caption span{font-size:12px;letter-spacing:.2em;color:#cde4d8}.tour-caption h3{font-size:26px;margin:8px 0}.tour-caption p{max-width:650px;font-size:15px;color:#e2eee8}.tour-controls{padding:20px 24px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}.tour-scenes{display:flex;gap:6px;flex-wrap:wrap}.tour-scenes button{background:#f5f5ef;border:1px solid var(--line);border-radius:8px;min-height:44px;padding:8px 12px;font-size:12px}.tour-scenes button[aria-pressed=true]{background:var(--teal);color:white}.room-tour.playing .tour-badge:before{content:'● ';color:#19766d}@media(max-width:760px){.tour-image{aspect-ratio:auto;overflow:visible}.tour-image img{display:block;height:auto;aspect-ratio:3/2;object-fit:cover;transform:none!important}.tour-caption{position:relative;background:#173b33;padding:22px}.tour-caption h3{font-size:22px}.tour-caption p{font-size:14px}.tour-badge{top:10px;left:10px;font-size:10px;padding:5px 9px}.tour-controls{padding:18px;gap:14px}.tour-scenes{display:grid;grid-template-columns:1fr 1fr;width:100%}}@media(prefers-reduced-motion:reduce){.tour-image img{transition:none!important;transform:none!important}}

@media(min-width:761px){.tour-image{aspect-ratio:21/10;max-height:500px}.tour-image img{object-position:center 35%}}

/* Mechanism emphasis: conceptual motion, triggered by user playback. */
#eecp-module .cuff.active{fill:#087c71;stroke:#9cdec8;stroke-width:3;filter:drop-shadow(0 0 7px #49bfa780)}
#eecp-module #blood-flow.active{stroke:#b38132;stroke-width:4;opacity:1}
#eecp-module.mechanism-playing #blood-flow.active path{stroke-dasharray:12 7;animation:flow-travel 1.25s linear infinite}
#eecp-module.mechanism-playing .cuff.active{animation:cuff-light 1.2s ease-in-out infinite alternate}
#eecp-module.mechanism-playing #ecg-window{fill:#8de5c4;opacity:.48;filter:drop-shadow(0 0 8px #74d8ba)}
#hbot-module .chamber[data-stage="1"] .chamber-ring{stroke:#19766d;stroke-width:3;opacity:.85}
#hbot-module.mechanism-playing .chamber[data-stage="1"] .chamber-ring{animation:pressure-light 2s ease-in-out infinite alternate}
#hbot-module.mechanism-playing .chamber[data-stage="2"] .chamber-air{animation:oxygen-light 2s ease-in-out infinite alternate}
#hbot-module .oxygen-dots.enriched circle{fill:#178d86;stroke:#bcece0;stroke-width:3;filter:drop-shadow(0 0 5px #5abfb3)}
#hbot-module.oxygen-reveal .oxygen-dots.enriched circle{animation:oxygen-arrive 1.5s ease-out both;animation-delay:var(--delay,0s);transform-box:fill-box;transform-origin:center}
@keyframes flow-travel{to{stroke-dashoffset:-38}}@keyframes cuff-light{from{filter:drop-shadow(0 0 2px #49bfa750)}to{filter:drop-shadow(0 0 11px #49bfa7a0)}}
@keyframes pressure-light{from{opacity:.25}to{opacity:.85}}@keyframes oxygen-light{from{opacity:.35}to{opacity:.9}}@keyframes oxygen-arrive{from{opacity:.1;transform:translateY(-12px) scale(.5)}to{opacity:.9;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){#eecp-module *,#hbot-module *{animation:none!important;transition:none!important}}

.inside-story{background:radial-gradient(ellipse at 50% 25%,#214e48,#102e2c 75%);border-radius:25px;overflow:hidden;color:#eff9f3;box-shadow:0 24px 65px #17302e20}.story-top{display:flex;justify-content:space-between;padding:24px 30px 0;font-size:11px;letter-spacing:.16em;color:#b4d2c6}.inside-story svg{width:100%;display:block}.inside-story svg text{text-anchor:middle;font-family:inherit;fill:#cde2d9;font-size:17px}.story-track{fill:none;stroke:#8cbbab;stroke-width:2;stroke-dasharray:5 7;opacity:.45}.scene-organ{opacity:.55;transition:opacity 1s}.inside-story[data-step="0"] [data-organ="0"],.inside-story[data-step="1"] [data-organ="1"],.inside-story[data-step="2"] [data-organ="2"]{opacity:1}.story-particle{fill:#bbfbe2;filter:drop-shadow(0 0 5px #78d8b5);offset-distance:20%;opacity:0;animation:story-route 2.4s linear infinite;animation-delay:var(--lag);animation-play-state:paused}.inside-story[data-step="0"] .route-0,.inside-story[data-step="1"] .route-1,.inside-story[data-step="2"] .route-2{opacity:1}.inside-story.running .story-particle{animation-play-state:running}.story-narration{padding:18px 32px 22px;min-height:140px;background:#ffffff05;border-top:1px solid #ffffff18}.story-counter{font-size:11px;letter-spacing:.2em;color:#b9d1a2}.story-narration h3{color:#f5fff9;font-size:26px;margin:7px 0}.story-narration p{max-width:760px;color:#c6ddd3;font-size:15px}.story-toolbar{padding:20px 30px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;border-top:1px solid #ffffff18}.story-toolbar button{min-height:44px;border:1px solid #7ea899;border-radius:8px;padding:10px 13px;background:transparent;color:#d8eae0;cursor:pointer}.story-toolbar .story-play{background:#cce9dc;color:#143d35;border-radius:25px}.story-steps{display:flex;flex-wrap:wrap;gap:7px}.story-steps button{font-size:12px}.story-steps button[aria-pressed=true]{background:#426c60;color:white}.story-cuff{fill:#356b61;stroke:#8ad6c0;stroke-width:2}.eecp-story[data-step="0"] .story-cuff,.eecp-story[data-step="1"] .story-cuff{fill:#3ca38b;filter:drop-shadow(0 0 8px #65d4b8)}.eecp-story.running[data-step="0"] .story-cuff{animation:story-cuff 1.5s ease-in-out infinite}.story-cuff.c1{animation-delay:.25s!important}.story-cuff.c2{animation-delay:.5s!important}.eecp-story .scene-organ{opacity:1}.release-flow{opacity:0}.eecp-story[data-step="2"] .release-flow{opacity:.8}.tissue-halo{opacity:.2;transition:opacity 1.5s}.hbot-story[data-step="2"] .tissue-halo{opacity:1}.heart-halo{opacity:.15}.eecp-story[data-step="1"] .heart-halo{opacity:.8}@keyframes story-route{from{offset-distance:0%}to{offset-distance:100%}}@keyframes story-cuff{50%{fill:#a3e8ce;stroke:#d8fff0}}@media(max-width:700px){.story-top{padding:18px 18px 0}.story-narration{padding:20px;min-height:185px}.story-narration h3{font-size:23px}.story-toolbar{padding:18px;display:block}.story-steps{margin-top:14px}.story-steps button{flex:1 1 100%;text-align:left}.inside-story svg text{font-size:20px}.story-narration p{font-size:14px}}@media(prefers-reduced-motion:reduce){.inside-story *{animation:none!important;transition:none!important}.story-particle{offset-distance:50%}}

@media(min-width:761px){.inside-story svg{height:300px}.story-narration{min-height:125px}.story-top{padding-top:16px}}
