*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#020507;overflow:hidden}
body{display:grid;place-items:center;color:#f7f8fa;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans CJK KR","Noto Sans KR","Segoe UI",sans-serif}
.journey-shell{position:fixed;z-index:1000;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.journey-home,.journey-replay{pointer-events:auto;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(8,12,16,.66);color:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:color .2s ease,border-color .2s ease,background .2s ease}
.journey-home{display:flex;align-items:center;gap:9px;padding:7px 11px;text-decoration:none;font-size:9px;line-height:1;letter-spacing:.14em}
.journey-home strong{font-size:11px;letter-spacing:.08em}
.journey-home span{opacity:.64}
.journey-replay{appearance:none;padding:8px 11px;font:600 9px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.14em;cursor:pointer}
.journey-home:hover,.journey-replay:hover{color:#fff;border-color:rgba(255,255,255,.44);background:rgba(8,12,16,.82)}
.journey-home:focus-visible,.journey-replay:focus-visible{outline:2px solid rgba(255,255,255,.72);outline-offset:3px}
#frame{position:relative;width:min(100vw,calc(100vh*16/9));height:min(100vh,calc(100vw*9/16));overflow:hidden;background:#03080e;isolation:isolate;container-type:inline-size}
#atmosphere,#three-stage,#overview-layer,#dawn-grade,#light-wash,#vignette,#grain,#closing-montage,#closing-blackout{position:absolute;inset:0}
.sky-layer{position:absolute;inset:-5%;opacity:0;will-change:opacity,transform}
.horizon-glow{position:absolute;z-index:3;opacity:0;pointer-events:none;filter:blur(34px);mix-blend-mode:screen;will-change:opacity,transform}
#sky-night{opacity:1;background:radial-gradient(ellipse at 62% 38%,rgba(31,55,70,.28),transparent 43%),linear-gradient(180deg,#02060b 0%,#07111c 52%,#091016 100%)}
#sky-dawn{background:radial-gradient(circle at 86% 55%,rgba(255,212,143,.38) 0%,rgba(246,161,91,.16) 18%,transparent 42%),linear-gradient(180deg,#06111e 0%,#183342 53%,#243f42 76%,#1b2c2e 100%)}
#sky-day{background:radial-gradient(circle at 58% 4%,rgba(247,248,250,.44),transparent 36%),linear-gradient(180deg,#6f91a6 0%,#9fb5b6 48%,#718d82 100%)}
#sky-sunset{background:radial-gradient(circle at 11% 49%,rgba(255,213,135,.58) 0%,rgba(233,122,78,.34) 18%,rgba(167,76,70,.14) 38%,transparent 59%),linear-gradient(180deg,#354960 0%,#805759 49%,#342426 100%)}
#sky-bluehour{background:radial-gradient(ellipse at 12% 58%,rgba(235,145,102,.14),transparent 34%),linear-gradient(180deg,#10182a 0%,#19243b 45%,#342b3d 68%,#151b27 100%)}
#east-glow{width:46%;height:78%;right:-10%;top:10%;background:radial-gradient(ellipse at center,rgba(255,220,166,.66) 0%,rgba(246,161,91,.22) 30%,transparent 72%)}
#west-glow{width:50%;height:82%;left:-11%;top:13%;background:radial-gradient(ellipse at center,rgba(255,206,121,.80) 0%,rgba(232,106,69,.30) 31%,transparent 74%)}
#three-stage{z-index:2;opacity:0;will-change:opacity}
#three-stage canvas{display:block;width:100%;height:100%}
#closing-montage{z-index:5;opacity:0;pointer-events:none;overflow:hidden;transform:scale(1.018);transform-origin:50% 50%;will-change:opacity,transform;background:#0a0d12}
.closing-still{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;user-select:none;-webkit-user-drag:none;will-change:opacity}
#overview-layer{z-index:3;display:grid;place-items:center;pointer-events:none;overflow:hidden}
#korea-overview{height:93%;width:auto;opacity:.12;transform:scale(.60);transform-origin:53% 66%;filter:invert(88%) sepia(8%) saturate(320%) hue-rotate(105deg) brightness(63%) contrast(94%);will-change:transform,opacity}
#overview-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 64% 57%,rgba(246,161,91,.06),transparent 38%)}
#dawn-grade{z-index:4;pointer-events:none;opacity:0;background:linear-gradient(105deg,rgba(2,11,24,.82) 0%,rgba(4,25,44,.67) 57%,rgba(24,37,46,.42) 100%);will-change:opacity}
#light-wash{z-index:6;pointer-events:none;opacity:.10;mix-blend-mode:soft-light;background:linear-gradient(95deg,rgba(22,58,89,.20),transparent 46%,rgba(255,199,107,.12))}
#vignette{z-index:7;pointer-events:none;background:radial-gradient(ellipse at 51% 46%,transparent 36%,rgba(0,0,0,.09) 66%,rgba(0,0,0,.56) 100%)}
#grain{z-index:8;pointer-events:none;opacity:.032;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
#closing-blackout{z-index:30;opacity:0;background:#000;pointer-events:none;will-change:opacity}
.journey-copy{position:absolute;z-index:31;left:50%;top:50%;width:90%;max-width:1320px;transform:translate(-50%,-50%);text-align:center;opacity:0;filter:blur(2px);pointer-events:none;will-change:opacity,transform,filter;text-shadow:0 4px 34px rgba(0,0,0,.94),0 1px 6px rgba(0,0,0,.98)}
.journey-copy p,.statement p{margin:0;font-size:clamp(12.75px,1.335cqw,25.5px);line-height:1.32;letter-spacing:-.035em;font-weight:620;word-break:keep-all;text-wrap:balance;color:rgba(250,250,248,.97)}
.statement{position:absolute;z-index:12;left:50%;top:51%;width:92%;max-width:1480px;transform:translate(-50%,-50%);text-align:center;opacity:0;clip-path:inset(0 100% 0 0);filter:blur(2px);text-shadow:0 4px 36px rgba(0,0,0,.86),0 1px 5px rgba(0,0,0,.92);will-change:opacity,clip-path,filter,letter-spacing;pointer-events:none}
.statement p{white-space:nowrap}
.copy-off .journey-copy,.copy-off .statement{visibility:hidden!important}
.copy-toggle{position:fixed;z-index:1000;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));appearance:none;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(8,12,16,.72);color:rgba(255,255,255,.76);padding:7px 10px;font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.12em;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.copy-toggle:hover{color:#fff;border-color:rgba(255,255,255,.42)}
.copy-toggle:focus-visible{outline:2px solid rgba(255,255,255,.72);outline-offset:3px}
.data-credit{position:absolute;z-index:12;right:2.2%;bottom:1.35%;max-width:56%;font-size:clamp(5px,.35vw,7px);line-height:1.3;letter-spacing:.015em;text-align:right;color:rgba(245,248,246,.30);text-shadow:0 1px 10px rgba(0,0,0,.55);pointer-events:none}
.status{position:absolute;z-index:20;right:2.3%;bottom:2.4%;font-size:9px;letter-spacing:.19em;opacity:.24}
.ready .status{opacity:0;transition:opacity .4s ease}
@media (max-width:520px){.journey-home span{display:none}.journey-home{padding-inline:10px}}
@media (prefers-reduced-motion:reduce){#overview-layer{display:none}#three-stage{opacity:1}#dawn-grade{display:none}#closing-blackout{display:none}#closing-montage{opacity:1;transform:none}#closing-still-1{opacity:1}.journey-copy{display:none}.statement{opacity:1;clip-path:none;filter:none}#sky-day{opacity:.84}#sky-night{opacity:.12}}
