/* 넷항해시대(netsail 모듈) — 바다(남색)와 양피지(모래색)로 된 게임 화면. 글자 크기·간격·바탕색은 사이트에 티드립 토큰(--td-*)이 있으면 따르고, 없으면 괄호 안 기본값을 쓴다. 강조색(--ns-accent)은 관리자 설정 */
.netsail { --ns-accent: #008741; --ns-navy: #0E2747; --ns-navy-2: #16375F; --ns-ink: #F3E7C9; --ns-gold: #E9B949; --ns-gold-2: #F6D57A; --ns-parch: #F6EEDA; --ns-parch-2: #EADFC2; --ns-brown: #6B4423; --ns-text: #2B2116; --ns-muted: #7A6A52; --ns-good: #1F8A4C; --ns-bad: #C4402F;
  display: grid; gap: var(--td-s-4, 16px); color: var(--td-text, #141A16); }
.netsail.is-busy { cursor: progress; }
.ns__boot { display: grid; justify-items: center; gap: 12px; padding: 80px 20px; color: var(--td-text-3, #687069); text-align: center; }
.ns__boot-ship { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--td-line, #E4E7E0); border-top-color: var(--td-brand, var(--ns-accent)); animation: ns-spin 1s linear infinite; }
@keyframes ns-spin { to { transform: rotate(360deg); } }

/* 버튼 */
.ns-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #2B7BC2, #1C5E9E); color: #fff; font: inherit; font-size: var(--td-t-sm, 13px); font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 2px 0 rgba(0, 0, 0, .06); transition: transform .1s, filter .15s; text-decoration: none; }
.ns-btn:hover { filter: brightness(1.08); color: #fff; }
.ns-btn:active { transform: translateY(1px); }
.ns-btn[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.ns-btn--sm { height: 34px; padding: 0 12px; border-radius: 10px; font-size: var(--td-t-xs, 12px); }
.ns-btn--go { height: 52px; padding: 0 26px; border-radius: 14px; background: linear-gradient(180deg, #F2C55A, #DB9B2B); color: #3A2400; font-size: var(--td-t-md, 14px); box-shadow: inset 0 -4px 0 rgba(120, 70, 0, .3), 0 6px 16px -8px rgba(219, 155, 43, .8); }
.ns-btn--go:hover { color: #3A2400; }
.ns-btn--sell { background: linear-gradient(180deg, #2FA864, #1F8A4C); }
.ns-btn--ghost { background: var(--td-surface, #FFFFFF); color: var(--td-text, #141A16); box-shadow: inset 0 0 0 1.5px var(--td-line-strong, #D2D7CE); }
.ns-btn--ghost:hover { color: var(--td-text, #141A16); }
.ns-link { padding: 0; border: 0; background: none; color: var(--td-text-3, #687069); font: inherit; font-size: var(--td-t-xs, 12px); text-decoration: underline; cursor: pointer; }
.ns-x { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; color: var(--td-text-3, #687069); font-size: 22px; line-height: 1; cursor: pointer; }
.ns-x:hover { background: var(--td-surface-3, #EEF0EB); color: var(--td-text, #141A16); }
.ns-muted { margin: 6px 0 0; color: var(--td-text-3, #687069); font-size: var(--td-t-xs, 12px); line-height: 1.6; word-break: keep-all; }
.ns-right { text-align: right; }
.ns-warn { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--td-hot-soft, #FFECE8); color: var(--td-hot-text, #C53A27); font-size: var(--td-t-xs, 12px); font-weight: 700; }

/* 게임 틀 */
.ns-game { display: grid; gap: 12px; }
.ns-hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; background: linear-gradient(135deg, var(--ns-navy), var(--ns-navy-2)); color: var(--ns-ink); box-shadow: 0 10px 24px -14px rgba(8, 24, 48, .7); }
.ns-hud__cap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ns-hud__emblem { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ns-gold-2), var(--ns-gold) 60%, #B98720); color: #3A2400; font-size: 22px; box-shadow: 0 0 0 3px rgba(233, 185, 73, .25); }
.ns-hud__cap b { display: block; font-size: var(--td-t-md, 14px); font-weight: 800; }
.ns-hud__cap small { display: block; color: rgba(243, 231, 201, .7); font-size: var(--td-t-2xs, 11px); }
.ns-hud__bar { display: block; width: 140px; height: 4px; margin-top: 4px; border-radius: 2px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.ns-hud__bar i { display: block; height: 100%; background: var(--ns-gold); }
.ns-hud__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ns-hud__stats > span { display: inline-flex; align-items: baseline; gap: 3px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .07); font-variant-numeric: tabular-nums; }
.ns-hud__stats i { font-style: normal; font-size: 13px; }
.ns-hud__stats b { font-size: var(--td-t-sm, 13px); font-weight: 800; }
.ns-hud__stats small { color: rgba(243, 231, 201, .6); font-size: var(--td-t-2xs, 11px); }
.ns-hud__stats .is-gold b { color: var(--ns-gold-2); }
.ns-hud__where { display: grid; justify-items: end; text-align: right; }
.ns-hud__where small { color: rgba(243, 231, 201, .65); font-size: var(--td-t-2xs, 11px); }
.ns-hud__where b { font-size: var(--td-t-lg, 17px); font-weight: 800; color: var(--ns-gold-2); }

.ns-stage { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 12px; align-items: start; }
.ns-foot { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-foot button { height: 38px; padding: 0 14px; border: 1px solid var(--td-line, #E4E7E0); border-radius: 12px; background: var(--td-surface, #FFFFFF); color: var(--td-text-2, #47504A); font: inherit; font-size: var(--td-t-xs, 12px); font-weight: 700; cursor: pointer; }
.ns-foot button:hover { border-color: var(--td-brand, var(--ns-accent)); color: var(--td-brand-text, #007A3B); }

/* 지도 */
.ns-map { position: sticky; top: calc(var(--td-head-offset, 64px) + 60px); height: min(72vh, 640px); overflow: hidden; border-radius: 18px; background: #0B2A4F; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 30px -18px rgba(8, 24, 48, .8); touch-action: none; user-select: none; }
.ns-map__svg { display: block; width: 100%; height: 100%; cursor: grab; --k: 1; }
.ns-map__svg:active { cursor: grabbing; }
.ns-grid line { stroke: rgba(241, 228, 196, .08); stroke-width: calc(1px * var(--k)); }
.ns-grid line.is-eq { stroke: rgba(241, 228, 196, .2); stroke-dasharray: 6 6; }
.ns-land { fill: url(#ns-land); stroke: #A8925E; stroke-width: calc(.8px * var(--k)); }
.ns-land-shadow { fill: rgba(0, 0, 0, .28); }
.ns-region { fill: rgba(241, 228, 196, .35); font-family: Georgia, 'Noto Serif KR', serif; font-size: calc(26px * var(--k) + 8px); font-style: italic; font-weight: 700; letter-spacing: .12em; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(11, 42, 79, .5); stroke-width: 3px; }
.ns-port { cursor: pointer; }
.ns-port__hit { fill: transparent; r: calc(14px * var(--k) + 4px); }
.ns-port__dot { fill: #F6EBD2; stroke: #6B4423; stroke-width: calc(1.2px * var(--k) + .4px); r: calc(3.2px * var(--k) + 1.6px); transition: r .15s; }
.ns-port:hover .ns-port__dot { fill: var(--ns-gold); }
.ns-port__name { fill: #FFF8E6; font-size: calc(11px * var(--k) + 3px); font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: rgba(14, 39, 71, .85); stroke-width: calc(3px * var(--k) + 1px); opacity: 0; pointer-events: none; transition: opacity .15s; }
.ns-map__svg.is-zoomed .ns-port__name, .ns-port:hover .ns-port__name, .ns-port.is-here .ns-port__name, .ns-port.is-sel .ns-port__name, .ns-port.is-dest .ns-port__name { opacity: 1; }
.ns-port.is-here .ns-port__dot { fill: var(--ns-gold); r: calc(5px * var(--k) + 2.5px); }
.ns-port.is-here::before { content: none; }
.ns-port.is-sel .ns-port__dot, .ns-port.is-dest .ns-port__dot { fill: #6FD3FF; stroke: #fff; r: calc(5px * var(--k) + 2.5px); }
.ns-port.is-quest .ns-port__dot { stroke: #FFD34D; stroke-width: calc(2.5px * var(--k) + 1px); }
.ns-route { fill: none; stroke: #FFE7A8; stroke-width: calc(2.2px * var(--k) + .8px); stroke-dasharray: calc(8px * var(--k) + 3px) calc(6px * var(--k) + 2px); stroke-linecap: round; opacity: .9; animation: ns-dash 1.2s linear infinite; }
.ns-route.is-sailing { stroke: #FFFFFF; opacity: .7; }
@keyframes ns-dash { to { stroke-dashoffset: -28; } }
.ns-fleet { pointer-events: none; }
.ns-fleet > g { transform-box: fill-box; }
.ns-fleet.is-sailing > g { animation: ns-bob 1.8s ease-in-out infinite; }
@keyframes ns-bob { 50% { translate: 0 -2px; } }
.ns-compass text { fill: rgba(241, 228, 196, .8); font-size: 12px; font-weight: 800; }
.ns-map__ctrl { position: absolute; right: 12px; top: 12px; z-index: 2; display: grid; gap: 6px; }
.ns-map__ctrl button { width: 38px; height: 38px; border: 0; border-radius: 11px; background: rgba(14, 39, 71, .82); color: var(--ns-ink); font-size: 20px; font-weight: 800; cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); backdrop-filter: blur(6px); }
.ns-map__ctrl button:hover { background: rgba(28, 94, 158, .9); }
.ns-map__hint { position: absolute; left: 50%; bottom: 14px; z-index: 2; translate: -50% 0; padding: 7px 14px; border-radius: 99px; background: rgba(14, 39, 71, .82); color: var(--ns-ink); font-size: var(--td-t-xs, 12px); font-weight: 700; white-space: nowrap; pointer-events: none; animation: ns-pulse 2.4s ease-in-out infinite; }
.ns-map__hint[hidden] { display: none; }
@keyframes ns-pulse { 50% { opacity: .6; } }

/* 배 그림 */
.ns-ship { display: block; width: 100%; height: auto; overflow: visible; }

/* 오른쪽 판 */
.ns-side { display: grid; gap: 10px; min-width: 0; scroll-margin-top: 120px; }
.ns-harbor-wrap { position: relative; overflow: hidden; border-radius: 18px; }
.ns-harbor { display: block; width: 100%; height: 150px; }
.ns-harbor__wave { animation: ns-wave 3s ease-in-out infinite alternate; }
@keyframes ns-wave { to { translate: 14px 0; } }
.ns-harbor__ships { position: absolute; left: 6%; bottom: 4px; display: flex; gap: 4px; }
.ns-harbor__ship { width: 70px; animation: ns-bob 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.ns-portname { display: flex; align-items: baseline; gap: 10px; padding: 0 4px; }
.ns-portname h2 { margin: 0; font-size: var(--td-t-2xl, 24px); font-weight: 900; letter-spacing: -0.03em; }
.ns-portname small { color: var(--td-text-3, #687069); font-size: var(--td-t-xs, 12px); font-weight: 700; }
.ns-portname__idx { margin-left: auto; padding: 3px 9px; border-radius: 99px; background: var(--td-surface-3, #EEF0EB); color: var(--td-text-2, #47504A); font-size: var(--td-t-2xs, 11px); font-weight: 800; }
.ns-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--td-surface-3, #EEF0EB); }
.ns-tabs button { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border: 0; border-radius: 11px; background: none; color: var(--td-text-2, #47504A); font: inherit; font-size: var(--td-t-2xs, 11px); font-weight: 800; cursor: pointer; }
.ns-tabs button i { font-style: normal; font-size: 20px; line-height: 1.1; }
.ns-tabs button[aria-selected="true"] { background: var(--td-surface, #FFFFFF); color: var(--td-text, #141A16); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .15); }
.ns-tabs button.has-quest::after { content: '!'; position: absolute; right: 6px; top: 4px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #FFC531; color: #3A2400; font-size: 10px; font-weight: 900; animation: ns-pulse 1.4s infinite; }
.ns-body { display: grid; gap: 10px; }
.ns-card { padding: 14px; border: 1px solid var(--td-line, #E4E7E0); border-radius: 16px; background: var(--td-surface, #FFFFFF); }
.ns-card h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: var(--td-t-md, 14px); font-weight: 800; }
.ns-card h3 small { color: var(--td-text-3, #687069); font-size: var(--td-t-2xs, 11px); font-weight: 700; }
.ns-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ns-guide { padding: 12px 14px; border: 1.5px dashed #D9B45B; border-radius: 16px; background: linear-gradient(135deg, #FFF8E3, #FFF1C9); color: #4A3410; }
.ns-guide b { font-size: var(--td-t-sm, 13px); }
.ns-guide ol { display: grid; gap: 4px; margin: 6px 0 0; padding-left: 20px; font-size: var(--td-t-xs, 12px); }
.ns-guide li.is-done { color: #9C8556; text-decoration: line-through; }

/* 항해 계획 */
.ns-plan__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ns-plan__nums span { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--td-surface-2, #F8F9F6); text-align: center; }
.ns-plan__nums small { color: var(--td-text-3, #687069); font-size: var(--td-t-2xs, 11px); font-weight: 700; }
.ns-plan__nums b { font-size: var(--td-t-md, 14px); font-weight: 800; font-variant-numeric: tabular-nums; }
.ns-plan__nums .is-bad b { color: var(--ns-bad); }
.ns-plan__goods { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ns-plan__goods small { width: 100%; color: var(--td-text-3, #687069); font-size: var(--td-t-2xs, 11px); font-weight: 800; }
.ns-plan__goods span { padding: 4px 9px; border-radius: 99px; background: var(--td-surface-3, #EEF0EB); font-size: var(--td-t-2xs, 11px); font-weight: 700; }
.ns-plan__goods span b { color: var(--td-text, #141A16); }
.ns-plan__goods span.is-up { background: #E3F5EA; color: var(--ns-good); }
.ns-plan__goods span.is-down { background: var(--td-hot-soft, #FFECE8); color: var(--ns-bad); }
.ns-style { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ns-style label { cursor: pointer; }
.ns-style input { position: absolute; opacity: 0; pointer-events: none; }
.ns-style span { display: grid; gap: 2px; height: 100%; padding: 9px 10px; border: 1.5px solid var(--td-line, #E4E7E0); border-radius: 12px; }
.ns-style b { font-size: var(--td-t-sm, 13px); }
.ns-style small { color: var(--td-text-3, #687069); font-size: 10.5px; line-height: 1.4; }
.ns-style input:checked + span { border-color: #2B7BC2; background: #E8F2FC; }
.ns-style input:focus-visible + span { outline: 2px solid #2B7BC2; outline-offset: 2px; }
.ns-plan .ns-btn--go { width: 100%; margin-top: 12px; }

/* 함대·가게 */
.ns-fleetlist { display: grid; gap: 8px; }
.ns-shipcard { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; background: linear-gradient(180deg, #E5F1FB, #CFE3F4); }
.ns-shipcard b { display: block; font-size: var(--td-t-sm, 13px); color: #18324F; }
.ns-shipcard small { display: block; color: #4D6A86; font-size: var(--td-t-2xs, 11px); }
.ns-hp { display: block; height: 5px; margin: 4px 0 2px; border-radius: 3px; background: rgba(24, 50, 79, .15); overflow: hidden; }
.ns-hp i { display: block; height: 100%; background: #2FA864; }
.ns-hp.is-low i { background: var(--ns-bad); }
.ns-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ns-items span { padding: 5px 10px; border-radius: 10px; background: var(--td-surface-3, #EEF0EB); font-size: var(--td-t-2xs, 11px); font-weight: 700; }
.ns-items small { color: var(--td-text-3, #687069); }
.ns-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ns-shopitem { display: grid; justify-items: center; gap: 3px; padding: 10px 8px; border-radius: 14px; background: linear-gradient(180deg, #EAF4FC, #D3E6F6); text-align: center; }
.ns-shopitem .ns-ship { width: 92px; }
.ns-shopitem b { color: #18324F; font-size: var(--td-t-sm, 13px); }
.ns-shopitem small { color: #4D6A86; font-size: 10.5px; }
.ns-shopitem .ns-btn { width: 100%; margin-top: 4px; }

/* 사고팔기 줄 */
.ns-rows { display: grid; gap: 6px; }
.ns-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--td-surface-2, #F8F9F6); }
.ns-row__name b { display: inline; font-size: var(--td-t-sm, 13px); }
.ns-row__name em { margin-left: 5px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-style: normal; font-weight: 800; }
.ns-row__name em.is-up { background: #DDF3E6; color: var(--ns-good); }
.ns-row__name em.is-down { background: var(--td-hot-soft, #FFECE8); color: var(--ns-bad); }
.ns-row__name small { display: block; color: var(--td-text-3, #687069); font-size: 10.5px; line-height: 1.4; }
.ns-row__price { display: grid; justify-items: end; font-size: var(--td-t-md, 14px); font-weight: 800; font-variant-numeric: tabular-nums; }
.ns-row__price small { color: var(--td-text-3, #687069); font-size: 10px; font-weight: 700; }
.ns-row__price.is-up small { color: var(--ns-good); }
.ns-row__price.is-down small { color: var(--ns-bad); }
.ns-step { display: inline-flex; align-items: center; border: 1px solid var(--td-line-strong, #D2D7CE); border-radius: 10px; background: var(--td-surface, #FFFFFF); overflow: hidden; }
.ns-step button { width: 26px; height: 32px; padding: 0; border: 0; background: none; color: var(--td-text-2, #47504A); font: inherit; font-weight: 800; cursor: pointer; }
.ns-step button:hover { background: var(--td-surface-3, #EEF0EB); }
.ns-step .ns-step__max { width: auto; padding: 0 7px; font-size: 10.5px; border-left: 1px solid var(--td-line, #E4E7E0); }
.ns-step input { width: 46px; height: 32px; padding: 0; border: 0; border-left: 1px solid var(--td-line, #E4E7E0); border-right: 1px solid var(--td-line, #E4E7E0); background: none; color: var(--td-text, #141A16); font: inherit; font-size: var(--td-t-sm, 13px); font-weight: 700; text-align: center; -moz-appearance: textfield; }
.ns-step input::-webkit-outer-spin-button, .ns-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 술집·모험 */
.ns-bubble { position: relative; margin: 0 0 8px; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: #FFF4D9; color: #5A4210; font-size: var(--td-t-sm, 13px); line-height: 1.6; }
.ns-quest { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #2A1E10, #4A3418); color: #F6E7C3; }
.ns-quest small { color: #D9B45B; font-size: var(--td-t-2xs, 11px); font-weight: 800; letter-spacing: .04em; }
.ns-quest p { margin: 0; font-family: Georgia, 'Noto Serif KR', serif; font-size: var(--td-t-sm, 13px); line-height: 1.7; }
.ns-quest b { display: flex; align-items: center; gap: 6px; font-size: var(--td-t-xs, 12px); }
.ns-quest__place { padding: 2px 8px; border-radius: 99px; background: #D9B45B; color: #2A1E10; font-size: 10px; }
.ns-mates { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-mates span { display: grid; padding: 6px 10px; border-radius: 10px; background: var(--td-surface-2, #F8F9F6); }
.ns-mates b { font-size: var(--td-t-xs, 12px); }
.ns-mates small { color: var(--td-text-3, #687069); font-size: 10px; }
.ns-fame { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ns-fame span { display: grid; justify-items: center; gap: 2px; padding: 10px; border-radius: 12px; background: var(--td-surface-2, #F8F9F6); }
.ns-fame i { font-style: normal; font-size: 20px; }
.ns-fame b { font-size: var(--td-t-md, 14px); font-weight: 800; }
.ns-fame small { color: var(--td-text-3, #687069); font-size: 10.5px; }

/* 항해 중 */
.ns-voyage { display: grid; gap: 10px; }
.ns-voyage__scene { position: relative; height: 190px; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #5FB2E8 0%, #A9DCF6 55%, #2E79B8 55%, #1B5A94 100%); }
.ns-voyage__sky::before, .ns-voyage__sky::after { content: ''; position: absolute; top: 26px; width: 80px; height: 22px; border-radius: 99px; background: rgba(255, 255, 255, .85); animation: ns-cloud 26s linear infinite; }
.ns-voyage__sky::after { top: 52px; width: 54px; height: 16px; animation-duration: 18s; animation-delay: -9s; opacity: .7; }
@keyframes ns-cloud { from { left: 110%; } to { left: -30%; } }
.ns-voyage__ship { position: absolute; left: 50%; top: 50px; width: 150px; translate: -50% 0; animation: ns-sail 2.4s ease-in-out infinite; }
@keyframes ns-sail { 0%, 100% { rotate: -2deg; translate: -50% 0; } 50% { rotate: 2deg; translate: -50% 5px; } }
.ns-voyage__waves i { position: absolute; left: -50%; width: 200%; height: 40px; background: repeating-radial-gradient(circle at 20px -10px, transparent 0 18px, rgba(255, 255, 255, .45) 19px 21px, transparent 22px) 0 0 / 40px 40px repeat-x; animation: ns-roll 3s linear infinite; }
.ns-voyage__waves i:nth-child(1) { top: 128px; opacity: .55; }
.ns-voyage__waves i:nth-child(2) { top: 146px; opacity: .8; animation-duration: 2.2s; animation-direction: reverse; }
.ns-voyage__waves i:nth-child(3) { top: 164px; animation-duration: 1.6s; }
@keyframes ns-roll { to { translate: 40px 0; } }
.ns-voyage__route { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--td-t-lg, 17px); font-weight: 800; }
.ns-voyage__route b { color: #2B7BC2; }
.ns-voyage__bar { height: 12px; border-radius: 6px; background: var(--td-surface-3, #EEF0EB); overflow: hidden; }
.ns-voyage__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2B7BC2, #6FD3FF); transition: width 1s linear; }
.ns-voyage__left { margin: 0; text-align: center; font-size: var(--td-t-xl, 20px); font-weight: 900; font-variant-numeric: tabular-nums; }
.ns-events { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ns-events li { padding: 9px 12px; border-left: 4px solid #8FB6D9; border-radius: 10px; background: var(--td-surface-2, #F8F9F6); font-size: var(--td-t-sm, 13px); line-height: 1.55; animation: ns-pop .3s var(--td-ease, cubic-bezier(.2, .7, .2, 1)); }
.ns-events li.is-storm { border-color: #6C7A89; }
.ns-events li.is-pirate { border-color: var(--ns-bad); }
.ns-events li.is-flotsam, .ns-events li.is-wreck { border-color: var(--ns-gold); }
.ns-events li.is-tailwind, .ns-events li.is-dolphin { border-color: var(--ns-good); }
@keyframes ns-pop { from { opacity: 0; translate: 0 6px; } }

/* 창 */
.ns-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; }
.ns-modal__dim { position: absolute; inset: 0; background: rgba(6, 16, 32, .6); backdrop-filter: blur(2px); animation: td-fade .2s; }
.ns-modal__box { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px; border-radius: 22px; background: var(--td-surface, #FFFFFF); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); animation: ns-pop .25s var(--td-ease, cubic-bezier(.2, .7, .2, 1)); }
.ns-modal__box h2 { margin: 0 0 6px; font-size: var(--td-t-xl, 20px); font-weight: 900; letter-spacing: -0.02em; }
.ns-modal__x { position: absolute; right: 12px; top: 12px; }
.ns-modal__acts { display: flex; gap: 8px; margin-top: 16px; }
.ns-modal__acts .ns-btn { flex: 1; height: 46px; }
.ns-arrive .ns-harbor-wrap { margin: -6px -6px 14px; }
.ns-arrive h2 { font-size: var(--td-t-2xl, 24px); }
.ns-arrive .ns-events { margin-top: 12px; }
.ns-story { margin-top: 14px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #2A1E10, #4A3418); color: #F6E7C3; }
.ns-story p { margin: 0; font-family: Georgia, 'Noto Serif KR', serif; font-size: var(--td-t-md, 14px); line-height: 1.75; }
.ns-found { display: grid; justify-items: center; gap: 4px; margin-top: 14px; padding: 14px; border-radius: 14px; background: radial-gradient(circle at 50% 0, rgba(255, 211, 77, .35), rgba(255, 211, 77, .08)); text-align: center; }
.ns-found span { font-size: 34px; animation: ns-spark 1.2s ease-in-out infinite; }
@keyframes ns-spark { 50% { transform: scale(1.15) rotate(8deg); } }
.ns-found b { color: #FFD34D; font-size: var(--td-t-lg, 17px); }
.ns-found small { color: #E8D3A0; font-size: var(--td-t-xs, 12px); }
.ns-rank { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.ns-rank li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--td-surface-2, #F8F9F6); }
.ns-rank li.is-me { background: #E8F2FC; box-shadow: inset 0 0 0 1.5px #2B7BC2; }
.ns-rank__no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--td-surface-3, #EEF0EB); font-weight: 900; }
.ns-rank li:nth-child(1) .ns-rank__no { background: #F6D57A; color: #5A3E00; }
.ns-rank li:nth-child(2) .ns-rank__no { background: #DCE3EA; }
.ns-rank li:nth-child(3) .ns-rank__no { background: #E7C3A2; }
.ns-rank__who b { display: block; font-size: var(--td-t-sm, 13px); }
.ns-rank__who small, .ns-rank__fame small { display: block; color: var(--td-text-3, #687069); font-size: 10.5px; }
.ns-rank__fame { text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }
.ns-codex { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 12px; }
.ns-codex span { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; background: var(--td-surface-2, #F8F9F6); color: var(--td-text-3, #687069); font-size: var(--td-t-2xs, 11px); font-weight: 700; text-align: center; }
.ns-codex span i { font-style: normal; font-size: 20px; }
.ns-codex .is-found { background: linear-gradient(135deg, #FFF4D2, #FFE59A); color: #5A3E00; }
.ns-log { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.ns-log li { padding: 7px 10px; border-radius: 10px; background: var(--td-surface-2, #F8F9F6); font-size: var(--td-t-xs, 12px); line-height: 1.55; }
.ns-log time { margin-right: 8px; color: var(--td-text-3, #687069); font-variant-numeric: tabular-nums; }
.ns-log .is-found { background: #FFF4D2; }
.ns-help p { margin: 10px 0 0; font-size: var(--td-t-sm, 13px); line-height: 1.7; word-break: keep-all; }

/* 시작 화면 */
.ns-intro { overflow: hidden; border-radius: 22px; background: var(--td-surface, #FFFFFF); box-shadow: 0 0 0 1px var(--td-line, #E4E7E0); }
.ns-intro__art { position: relative; height: 320px; overflow: hidden; }
.ns-intro__art > svg { display: block; width: 100%; height: 100%; }
.ns-intro__wave { animation: ns-wave 2.6s ease-in-out infinite alternate; animation-delay: var(--d); }
.ns-intro__ship { position: absolute; left: 50%; bottom: 40px; width: 150px; translate: -50% 0; animation: ns-sail 3s ease-in-out infinite; }
.ns-intro__title { position: absolute; left: 0; right: 0; top: 18px; padding: 0 20px; text-align: center; color: #FFF6E2; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.ns-intro__title small { font-size: var(--td-t-2xs, 11px); font-weight: 800; letter-spacing: .3em; opacity: .85; }
.ns-intro__title h1 { margin: 4px 0 6px; font-family: Georgia, 'Noto Serif KR', serif; font-size: clamp(34px, 6vw, 52px); font-weight: 900; letter-spacing: .04em; }
.ns-intro__title p { max-width: 520px; margin: 0 auto; font-size: var(--td-t-sm, 13px); line-height: 1.6; opacity: .92; word-break: keep-all; }
.ns-intro__body { display: grid; justify-items: center; gap: 12px; padding: 22px; text-align: center; }
.ns-intro__body h2 { justify-self: stretch; margin: 6px 0 0; font-size: var(--td-t-md, 14px); font-weight: 800; text-align: left; }
.ns-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; justify-self: stretch; }
.ns-pick button { display: grid; gap: 4px; padding: 14px; border: 1.5px solid var(--td-line, #E4E7E0); border-radius: 14px; background: var(--td-surface, #FFFFFF); color: var(--td-text, #141A16); font: inherit; text-align: left; cursor: pointer; }
.ns-pick button b { font-size: var(--td-t-md, 14px); }
.ns-pick button small { color: #2B7BC2; font-size: var(--td-t-2xs, 11px); font-weight: 800; }
.ns-pick button span { color: var(--td-text-3, #687069); font-size: var(--td-t-xs, 12px); line-height: 1.5; }
.ns-pick button[aria-pressed="true"] { border-color: #2B7BC2; background: #E8F2FC; box-shadow: 0 0 0 3px rgba(43, 123, 194, .15); }
.ns-statbar { display: grid; gap: 4px; }
.ns-statbar i { position: relative; display: block; height: 16px; padding-left: 6px; border-radius: 5px; background: var(--td-surface-3, #EEF0EB); color: var(--td-text-2, #47504A); font-size: 10px; font-style: normal; font-weight: 800; line-height: 16px; overflow: hidden; }
.ns-statbar i::before { content: ''; position: absolute; inset: 0 auto 0 0; z-index: -0; width: calc(var(--v) * 1%); background: rgba(43, 123, 194, .25); }

/* 어두운 화면: 밝은 바탕을 쓰는 칸만 손본다 */
:root[data-theme="dark"] .ns-style input:checked + span, :root[data-theme="dark"] .ns-pick button[aria-pressed="true"], :root[data-theme="dark"] .ns-rank li.is-me { background: rgba(43, 123, 194, .18); }
:root[data-theme="dark"] .ns-plan__goods span.is-up { background: rgba(31, 138, 76, .2); }
:root[data-theme="dark"] .ns-row__name em.is-up { background: rgba(31, 138, 76, .2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ns-style input:checked + span, :root:not([data-theme="light"]) .ns-pick button[aria-pressed="true"], :root:not([data-theme="light"]) .ns-rank li.is-me { background: rgba(43, 123, 194, .18); }
  :root:not([data-theme="light"]) .ns-plan__goods span.is-up, :root:not([data-theme="light"]) .ns-row__name em.is-up { background: rgba(31, 138, 76, .2); }
}

/* 휴대폰 */
@media (max-width: 1023px) {
  .ns-stage { grid-template-columns: minmax(0, 1fr); }
  .ns-map { position: relative; top: 0; height: 58vh; min-height: 320px; border-radius: 16px; }
  .ns-hud { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; border-radius: 16px; }
  .ns-hud__stats { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .ns-hud__stats > span { padding: 5px 8px; }
  .ns-hud__bar { width: 110px; }
}
@media (max-width: 560px) {
  .ns-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ns-row .ns-step { grid-column: 1; }
  .ns-row > .ns-btn { grid-column: 2; }
  .ns-style { grid-template-columns: 1fr; }
  .ns-intro__art { height: 260px; }
  .ns-intro__ship { width: 140px; bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) { .netsail *, .netsail *::before, .netsail *::after { animation: none !important; } }

/* 알림창(사이트 알림 스크립트 없이 이 화면에서 직접) */
.ns-toast { position: fixed; left: 50%; bottom: 24px; z-index: 9999; max-width: min(92vw, 460px); padding: 11px 18px; border-radius: 10px; background: #141A16; color: #fff; font-size: var(--td-t-sm, 13px); font-weight: 700; line-height: 1.45; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.ns-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ns-toast.is-good { background: var(--ns-accent); }
.ns-toast.is-bad, .ns-toast.is-warn { background: #C53A27; }