:root {
  color-scheme: dark;
  --ink: #f5f1e5;
  --muted: #c0c9c4;
  --gold: #d6bb79;
  --navy: #102b36;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; }
body { overflow: hidden; background: #102b36; color: var(--ink); font-family: "IBM Plex Sans KR", sans-serif; }
button, a { font: inherit; }

.page-viewport { position:fixed; inset:58px 0 0; width:100%; min-height:0; overflow:hidden; }
.page-track { position:absolute; inset:0; width:100%; height:100%; }
.page-panel { position:absolute; inset:0; display:block; width:100%; height:100%; min-height:0; overflow-x:hidden; transition:transform .85s cubic-bezier(.22,.72,.18,1); will-change:transform; }
#introPage { overflow:hidden; transform:none; }
.modules-panel { z-index:2; top:calc((100svh - 58px)/2); bottom:0; height:auto; display:grid; place-items:center; overflow:auto; padding:clamp(20px,3vw,40px); border-top:1px solid #54ddf5; box-shadow:0 -2px 16px #35d9f244; background:linear-gradient(180deg,#071a27a8 0%,#0a1c2ac9 100%),url("assets/modules-sunset.png") center 43%/cover no-repeat; transform:translateY(100%); }
.page-track[data-page="modules"] .modules-panel { transform:translateY(0); }
.port-screen { position: relative; z-index:3; isolation: isolate; width: 100%; height:calc((100svh - 58px)/2); min-height:0; overflow: hidden; background: #132d38; }
.lower-space { position:absolute; z-index:1; top:calc((100svh - 58px)/2); left:0; right:0; bottom:0; min-height:0; overflow:hidden; border-top:1px solid #54ddf5; box-shadow:0 -2px 16px #35d9f244; background:radial-gradient(ellipse at 88% -5%,#27d9ed 0%,#1191b5 12%,#0c5474 40%,transparent 72%),linear-gradient(155deg,#0b405a 0%,#082e4b 55%,#031b34 100%); transition:transform .85s cubic-bezier(.22,.72,.18,1); }
.module-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(16px,3vw,34px); width:min(560px,100%); }
.module-button { position:relative; display:flex; min-height:clamp(105px,12.6vh,161px); flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:8px; padding:clamp(15px,2.8vw,29px); overflow:hidden; border:1px solid #47d7ef9c; border-radius:5px; color:#f5f1e5; text-align:left; text-decoration:none; background:radial-gradient(ellipse at 100% 0%,#22c7e622,transparent 48%),repeating-linear-gradient(135deg,#a9eaff08 0 1px,transparent 1px 4px),linear-gradient(145deg,#122638ed,#0b1c2ced); box-shadow:inset 0 0 28px #39cce915,0 10px 30px #06172266; cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.module-button::before { content:""; position:absolute; inset:8px; border:1px solid #8cecff1c; pointer-events:none; }
.module-button:hover { transform:translateY(-4px); border-color:#79efff; box-shadow:inset 0 0 34px #39cce926,0 14px 34px #06172288,0 0 18px #39d8f333; }
.module-button:active { transform:translateY(-1px) scale(.97); box-shadow:inset 0 0 22px #39cce933,0 5px 14px #06172288; }
.module-button:focus-visible { outline:2px solid #89efff; outline-offset:4px; }
.module-button span { color:#8bdced; font-size:10px; letter-spacing:.2em; }
.module-button strong { font-size:clamp(22px,3vw,34px); font-weight:500; letter-spacing:.06em; }
.module-button i { position:absolute; top:clamp(22px,4vw,42px); right:clamp(22px,4vw,42px); color:#8bdced; font-size:22px; font-style:normal; }
.page-track[data-page="modules"] .lower-space { transform:translateY(-100%); }
.lower-space::before { content:""; position:absolute; inset:0; opacity:.7; background:radial-gradient(ellipse at 86% 0%,#e8ffff88 0%,#a6f8ff3b 7%,transparent 30%),linear-gradient(180deg,#26b9d134,transparent 46%); }
.lower-space::after { content:""; position:absolute; top:0; left:15%; width:70%; height:1px; background:linear-gradient(90deg,transparent,#e3ca82aa,transparent); }
.light-scene { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
.lower-scroll { position:absolute; z-index:1; inset:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#7dcfe477 transparent; }
.light-origin { position:absolute; top:-52%; left:-8%; width:72%; height:100%; border-radius:50%; background:radial-gradient(ellipse at 24% 4%,#f1ffffe8 0%,#b8ffff9c 8%,#43e5fa55 25%,transparent 70%); filter:blur(14px); animation:surface-shimmer 7s ease-in-out infinite alternate; }
.light-ray { position:absolute; top:-58%; height:158%; width:var(--ray-width); left:var(--ray-left); transform-origin:top center; transform:rotate(var(--ray-tilt)); clip-path:none; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 76%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 76%,transparent 100%); background:linear-gradient(180deg,#efffffbd 0%,#a7f5ff70 24%,#49c9f55c 52%,#20a9dc30 82%,#20a9dc1a 94%,transparent 100%); filter:blur(19px); mix-blend-mode:screen; opacity:var(--ray-opacity); animation:light-pour var(--ray-speed) ease-in-out infinite alternate; }
.ray-one { --ray-left:2%; --ray-width:24%; --ray-tilt:18deg; --ray-opacity:.72; --ray-speed:8s; }
.ray-two { --ray-left:13%; --ray-width:24%; --ray-tilt:14deg; --ray-opacity:.84; --ray-speed:10s; animation-delay:-3s; }
.ray-three { --ray-left:25%; --ray-width:21%; --ray-tilt:10deg; --ray-opacity:.93; --ray-speed:7s; animation-delay:-2s; }
.ray-four { --ray-left:36%; --ray-width:18%; --ray-tilt:6deg; --ray-opacity:.78; --ray-speed:11s; animation-delay:-5s; }
.light-speck { position:absolute; width:3px; height:3px; border-radius:50%; background:#eaffff; box-shadow:0 0 9px 2px #83f4ffb8; opacity:0; animation:speck-fall var(--speck-speed) linear infinite; }
.speck-one { left:12%; top:8%; --speck-speed:7s; --speck-x:65px; --speck-y:420px; }
.speck-two { left:31%; top:23%; --speck-speed:9s; --speck-x:40px; --speck-y:510px; animation-delay:-4s; }
.speck-three { left:7%; top:15%; --speck-speed:8s; --speck-x:90px; --speck-y:390px; animation-delay:-2s; }
.speck-four { left:40%; top:38%; --speck-speed:11s; --speck-x:25px; --speck-y:460px; animation-delay:-7s; }
.speck-five { left:22%; top:4%; --speck-speed:10s; --speck-x:85px; --speck-y:540px; animation-delay:-6s; }
@keyframes light-pour { from { transform:rotate(var(--ray-tilt)) translateY(-1%) scaleX(.88); opacity:.12; } to { transform:rotate(var(--ray-tilt)) translateY(5%) scaleX(1.14); opacity:var(--ray-opacity); } }
@keyframes surface-shimmer { from { opacity:.55; transform:translateX(1%) scale(.96); } to { opacity:1; transform:translateX(-3%) scale(1.06); } }
@keyframes speck-fall { 0% { opacity:0; transform:translate(0,-8px) scale(.5); } 18% { opacity:.8; } 82% { opacity:.6; } 100% { opacity:0; transform:translate(var(--speck-x),var(--speck-y)) scale(1.2); } }
.intro-space { position:relative; z-index:1; display:flex; width:100%; height:150%; min-height:100svh; align-items:flex-start; justify-content:center; padding:clamp(48px,12vh,120px) clamp(36px,10vw,150px) 40px; }
.lower-copy { position:relative; z-index:1; width:min(820px,82vw); margin-inline:auto; text-align:center; }.lower-copy h2 { margin:0 0 18px; color:#f5f1e5; font:600 clamp(24px,3vw,36px)/1.45 "IBM Plex Sans KR",sans-serif; letter-spacing:.01em; word-break:keep-all; text-wrap:pretty; }.lower-copy p { max-width:760px; margin:0 auto 16px; color:#d0dbd8; font-size:14px; line-height:1.9; letter-spacing:.01em; word-break:keep-all; text-wrap:pretty; }
.intro-seal { position:relative; z-index:1; display:grid; place-items:center; width:100px; height:100px; margin-right:5%; border:1px solid #d8bf7c66; border-radius:50%; color:#d8bf7c; box-shadow:inset 0 0 0 7px #d8bf7c11, 0 0 35px #d8bf7c12; }.intro-seal::before { content:""; position:absolute; inset:7px; border:1px dashed #d8bf7c55; border-radius:50%; }.intro-seal span { font-size:30px; }.intro-seal small { margin-top:-24px; font-size:7px; letter-spacing:.18em; }
.sky, .sea, .pier, .sun-glow { position: absolute; inset: 0; pointer-events: none; }
.sky { z-index: -5; background:linear-gradient(90deg,#10283277 0%,#10283233 45%,#10283222 100%),linear-gradient(180deg,#10283222 0%,transparent 38%,#081c2877 100%),url("assets/character-room.png") center 48% / cover no-repeat; }
.sky::before { content: ""; position: absolute; inset: 0; opacity: .3; background:linear-gradient(180deg,#10283222 0%,transparent 55%,#081c2866 100%); }
.sky::after { content: ""; position: absolute; left: -5%; right: -5%; top: 42%; height: 20%; opacity: .13; background: repeating-linear-gradient(177deg, transparent 0 19px, #e9dfc366 20px 21px, transparent 22px 34px); transform: skewY(-2deg); }
.sea { z-index: -4; top: 62%; background: linear-gradient(180deg,#566e6d 0%,#28454f 24%,#102c37 100%); }
.sea::before { content: ""; position: absolute; inset: 0; opacity: .22; background: repeating-linear-gradient(0deg, transparent 0 13px, #c4c5a760 14px, transparent 16px 35px); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.sea::after { content: ""; position: absolute; left: 51%; top: 2%; width: 30%; height: 80%; background: linear-gradient(180deg,#ffe1a9aa,transparent); filter: blur(28px); transform: skewX(-20deg); }
.pier-back { z-index: -3; inset: auto -5% 26% -5%; height: 18%; opacity: .75; background: linear-gradient(180deg,#243d45 0 18%,#64716a 19% 22%,#172f38 23%); clip-path: polygon(0 24%,12% 24%,14% 0,56% 0,59% 24%,100% 24%,100% 100%,0 100%); }
.pier-front { z-index: -2; inset: auto -4% 0 -4%; height: 22%; background: linear-gradient(180deg,#354a4c,#182f38 44%,#0c2029); clip-path: polygon(0 14%,100% 0,100% 100%,0 100%); border-top: 1px solid #dfc284; }
.pier-front::before { content: ""; position:absolute; inset: 18% 0 0; opacity:.15; background: repeating-linear-gradient(90deg, transparent 0 74px, #ddc589 75px 77px), repeating-linear-gradient(0deg, transparent 0 38px,#ddc589 39px 40px); }
.sun-glow { display:none; }
.sea,.pier { display:none; }

.topbar { position: fixed; z-index: 10; left: 0; right: 0; top: 0; height: 58px; padding: 0 clamp(22px,5vw,76px); display: flex; align-items: center; justify-content: flex-start; gap: clamp(24px,4vw,54px); border:1px solid #245878; border-bottom-color:#35d9f277; background:radial-gradient(ellipse at 50% 0%,#1b4562a8 0%,transparent 55%),repeating-linear-gradient(135deg,#a9eaff08 0 1px,transparent 1px 4px),linear-gradient(115deg,#101827f5,#0d2033f2 60%,#101827f5); box-shadow:inset 0 1px #d7f7ff12,0 8px 30px #071a2077,0 1px 15px #1fc8e41c; }
.brand { display:flex; gap:12px; align-items:center; color:#e8f8ff; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:35px; height:35px; border:1px solid #72dbf2; border-radius:50%; color:#8beaff; font-size:19px; box-shadow:inset 0 0 0 4px #55d7f222,0 0 14px #44d6f222; }
.brand b { display:block; font:700 17px "Gowun Batang",serif; letter-spacing:.15em; }
.brand small { display:block; margin-top:2px; color:#8fd8ea; font-size:8px; letter-spacing:.2em; }
.top-nav { display:flex; align-self:stretch; align-items:center; gap:22px; margin-left:clamp(18px,4vw,56px); margin-right:auto; }
.nav-link { position:relative; display:grid; height:100%; padding:0; place-items:center; border:0; background:transparent; color:#c2e3ec; cursor:pointer; font:inherit; font-size:12px; letter-spacing:.08em; transition:color .2s ease; }
.nav-link:hover,.nav-link.is-current { color:#9cecff; }
.nav-link.is-current::after { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:#69def3; box-shadow:0 0 10px #52d7f388; }
.fleet-status { display:flex; align-items:center; gap:14px; color:#d6d6c9; font-size:12px; letter-spacing:.06em; }
.status-label { color:#bdc4bb; }.status-value b { color:#f1d78c; font-size:16px; }.status-divider { width:1px; height:22px; background:#dac98966; margin:0 6px; }.fleet-label { color:#c4d8cb; }.fleet-label i, .clock-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#a9d2a6; box-shadow:0 0 10px #a9d2a6; margin-right:7px; vertical-align:1px; }
.clock { color:#e3d9ba; font:14px Georgia,serif; letter-spacing:.12em; }.clock small { margin-left:7px; color:#a8b1aa; font:9px "IBM Plex Sans KR",sans-serif; }

.welcome { position:relative; height:100%; width:min(1440px,100%); margin:auto; }
.welcome-copy { position:absolute; z-index:2; left:clamp(42px,10vw,155px); top:46%; transform:translateY(-43%); width:min(430px,42vw); }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 9px; color:#9be4f5; font-size:9px; letter-spacing:.22em; }.eyebrow span { width:25px; height:1px; background:#76d8ec; }.eyebrow::after { content:""; flex:1; min-width:18px; height:1px; background:linear-gradient(90deg,#8fe8fae8 0%,#8fe8fa77 72%,transparent 100%); box-shadow:0 0 8px #64dbf344; }
h1 { margin:0; color:#e5f8ff; font:700 clamp(30px,3vw,40px)/1.3 "IBM Plex Sans KR",sans-serif; letter-spacing:.01em; text-shadow:0 3px 15px #10252e88; word-break:keep-all; }
h1 em { display:inline-block; margin-left:clamp(12px,2vw,28px); color:#8fe4f6; font-style:normal; }
.welcome-note { margin:8px 0 11px; color:#c5edf6; font-size:11px; letter-spacing:.07em; }
.divider { display:flex; align-items:center; gap:11px; width:228px; color:#a5e7f5; font-size:10px; letter-spacing:.1em; }.divider span { flex:1; height:1px; background:#7edff177; }
.sortie-button { display:flex; width:332px; height:268px; margin:3px 0 0 -15px; align-items:center; justify-content:center; transition:transform .2s ease,filter .2s ease; filter:drop-shadow(0 8px 12px #091b2499); }.sortie-button img { display:block; width:100%; height:100%; object-fit:contain; }.sortie-button:hover { transform:translateY(-5px) scale(1.035); filter:drop-shadow(0 12px 16px #58dff355); }.sortie-button:active { transform:scale(.97); }.sortie-button:focus-visible,.character-stage:focus-visible { outline:2px solid #8fe8fa; outline-offset:5px; border-radius:50%; }.button-hint { width:300px; margin:-3px 0 0; text-align:center; color:#b7eaf5; font-size:9px; letter-spacing:.13em; }

.character-area { position:absolute; right:0; bottom:0; width:min(48vw,570px); height:calc(100% - 42px); display:flex; align-items:flex-end; justify-content:center; }
.character-aura { position:absolute; z-index:0; right:3%; bottom:7%; width:76%; height:60%; border-radius:50%; background:radial-gradient(ellipse,#f6d6a528 0, #e7cb8c11 43%,transparent 70%); filter:blur(16px); }
.character-stage { position:relative; z-index:1; display:block; width:100%; height:100%; padding:0; overflow:hidden; border:0; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,#000 0%,#000 88%,transparent 100%); }
.character-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:right bottom; filter:drop-shadow(0 15px 24px #071a2080); user-select:none; -webkit-user-drag:none; transition:transform .7s cubic-bezier(.65,0,.25,1),opacity .55s ease; }
.character-image.is-active { transform:translateX(0); opacity:1; }.character-image.slide-out { transform:translateX(110%); opacity:0; }.character-image.slide-in { transform:translateX(110%); opacity:0; }
.character-hint { display:none; }

.bottom-bar { position:absolute; z-index:4; bottom:0; left:0; right:0; height:29px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,5vw,76px); border-top:1px solid #d9c28266; background:#0b222bd9; color:#c9d0c7; font-size:9px; letter-spacing:.12em; }.bottom-bar>div { display:flex; align-items:center; gap:10px; }.bottom-bar i { width:3px; height:3px; margin:0 4px; border-radius:50%; background:#d8c489; }.weather-icon { color:#e2c983; font-size:13px; }.bottom-center { color:#aebbb3; font-size:8px; letter-spacing:.2em; }.bottom-center b { color:#ddc887; }.date-label { color:#b2bdb7; font-size:8px; }
.frame-corner { position:absolute; z-index:6; width:18px; height:18px; pointer-events:none; }.corner-tl { top:12px; left:15px; border-top:1px solid #9be8f477; border-left:1px solid #9be8f477; }.corner-br { bottom:36px; right:15px; border-right:1px solid #d9c28299; border-bottom:1px solid #d9c28299; }

@media (max-width:760px) {
  .topbar { height:52px; padding:0 16px; gap:20px; }.page-viewport { top:52px; }.modules-panel { top:calc((100svh - 52px)/2); }.port-screen { height:calc((100svh - 52px)/2); min-height:0; }.lower-space { top:calc((100svh - 52px)/2); min-height:0; }.module-button { min-height:102px; padding:14px; }.module-button i { top:14px; right:14px; }.intro-space { min-height:100svh; }.brand-mark { width:31px;height:31px;font-size:16px; }.brand b { font-size:15px; }.brand small { font-size:7px; }.top-nav { gap:13px; margin:0; }.nav-link { font-size:10px; }.fleet-status { display:none; }
  .welcome-copy { left:7%; top:46%; width:46%; transform:translateY(-38%); }.eyebrow { font-size:7px; margin-bottom:6px; } h1 { font-size:clamp(23px,6vw,34px); line-height:1.23; }.welcome-note { max-width:180px; margin:5px 0 7px; font-size:9px; line-height:1.5; }.divider { width:142px; font-size:7px; }.sortie-button { width:clamp(170px,32vw,248px); height:clamp(140px,26vw,200px); margin:1px 0 0 -9px; }.button-hint { width:clamp(170px,32vw,248px); font-size:7px; }
  .character-area { right:0; width:70%; height:calc(100% - 35px); }.character-hint { right:4%; bottom:5%; font-size:7px; }
  .bottom-bar { height:25px; padding:0 12px; font-size:7px; }.bottom-center { display:none; }.corner-tl { top:10px; left:9px; }
  .intro-space { padding:48px 7% 30px; }.lower-copy { width:86vw; }.lower-copy h2 { font-size:clamp(20px,5vw,27px); }.lower-copy p { max-width:86vw; margin-bottom:13px; font-size:11px; }
}
@media (max-width:420px) {
  .topbar { padding:0 10px; gap:12px; }.brand { gap:7px; }.brand-mark { width:28px;height:28px; }.top-nav { gap:9px; margin:0; }.nav-link { font-size:9px; }.module-grid { grid-template-columns:1fr; width:min(360px,100%); gap:12px; }.module-button { min-height:83px; }.welcome-copy { left:5%; top:46%; width:52%; }.welcome-note { max-width:145px; }.character-area { right:0; width:82%; }.character-hint { right:4%; }.sortie-button { width:clamp(150px,48vw,202px); height:clamp(120px,40vw,170px); }
}
/* Keep the sortie emblem clear of the fixed weather/footer strip on short viewports. */
@media (max-height:760px) and (min-width:761px) {
  .welcome-copy { top:25%; transform:translateY(-25%); }
  .sortie-button { width:clamp(132px,24vh,182px); height:clamp(108px,18vh,138px); margin-top:0; }
}
@media (max-height:760px) and (max-width:760px) {
  .welcome-copy { top:32%; transform:translateY(-25%); }
  .sortie-button { width:clamp(120px,27vh,170px); height:clamp(100px,20vh,145px); margin-top:0; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }