/* hangul.day - Retro-Futuristic Hangul Exhibition */
/* Palette: Cream:#FAF4E8, Sidebar:#F0E8DC, Retro Teal:#4A8A88, Warm Coral:#D88870,
   Curve Gray:#8A7A68, Deep Walnut:#3A2E24, Spotlight Gold:#C8A868, Pale Sage:#D8E0D4 */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}

body{font-family:'Lora',serif;font-weight:400;font-size:1rem;line-height:1.8;color:#3A2E24;background-color:#FAF4E8;display:flex}

.sidebar{width:280px;position:fixed;top:0;left:0;bottom:0;background-color:#F0E8DC;padding:40px 24px;z-index:10;transform:translateX(-280px);transition:transform 600ms ease-out;overflow-y:auto}
.sidebar.visible{transform:translateX(0)}

.sidebar-header{font-family:'Jost',sans-serif;font-weight:500;font-size:1.8rem;letter-spacing:0.03em;color:#4A8A88;margin-bottom:32px}
.sidebar-nav{display:flex;flex-direction:column;gap:8px;position:relative}
.sidebar-link{font-family:'Nanum Gothic',sans-serif;font-weight:700;font-size:1.5rem;color:#3A2E24;text-decoration:none;padding:8px 16px 8px 28px;display:block;cursor:pointer;transition:color 200ms ease;position:relative}
.sidebar-link:hover,.sidebar-link.active{color:#4A8A88}
.sidebar-indicator{width:8px;height:8px;border-radius:50%;background-color:#D88870;position:absolute;left:24px;top:0;transition:top 300ms ease;z-index:11}

.main{margin-left:280px;flex:1;min-height:100vh}

.hero{height:100vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 60px;position:relative;overflow:hidden}
.hero-curve{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.flow-curve{stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 1.5s ease-out}
.flow-curve.drawn{stroke-dashoffset:0}
.hero-title{font-family:'Jost',sans-serif;font-weight:500;font-size:clamp(2rem,3.5vw,3rem);letter-spacing:0.03em;color:#3A2E24;position:relative;z-index:1;opacity:0;transform:scale(0.95);transition:opacity 500ms ease,transform 500ms ease}
.hero-title.visible{opacity:1;transform:scale(1)}
.hero-sub{font-family:'Lora',serif;font-size:1rem;color:#8A7A68;margin-top:12px;position:relative;z-index:1;opacity:0;transition:opacity 500ms ease}

.curve-divider{padding:0 40px}
.curve-divider svg{width:100%;height:60px;display:block}

.panel{padding:80px 60px;max-width:800px}
.panel-sage{background-color:#D8E0D4}

.specimen-pedestal{text-align:center;margin-bottom:32px;padding-bottom:16px;border-bottom:2px solid rgba(200,168,104,0.3)}
.char-specimen{font-family:'Nanum Gothic',sans-serif;font-weight:700;font-size:clamp(6rem,20vw,12rem);color:#4A8A88;text-shadow:0 4px 30px rgba(74,138,136,0.1);display:block;line-height:1.1}
.block-specimen{font-size:clamp(4rem,12vw,8rem)}

.panel-heading{font-family:'Jost',sans-serif;font-weight:500;font-size:clamp(1.5rem,2.5vw,2rem);letter-spacing:0.03em;color:#3A2E24;margin-bottom:20px}
.panel-text{font-family:'Lora',serif;font-size:1rem;line-height:1.8;color:#3A2E24;margin-bottom:16px}

.exhibition-footer{padding:80px 60px;text-align:center;border-top:1px solid rgba(138,122,104,0.2)}
.footer-char{font-family:'Nanum Gothic',sans-serif;font-weight:700;font-size:3rem;color:#D88870;display:block;margin-bottom:12px}
.footer-text{font-family:'Jost',sans-serif;font-size:0.95rem;color:#8A7A68;margin-bottom:8px}
.footer-meta{font-family:'Jost',sans-serif;font-size:0.8rem;color:#8A7A68;letter-spacing:0.02em}

@media(max-width:900px){
.sidebar{display:none}
.main{margin-left:0}
.panel{padding:60px 24px}
.hero{padding:0 24px}
.exhibition-footer{padding:60px 24px}
}