:root {
  --bg: #0d1a22;
  --panel: #152833;
  --panel-2: #1b3340;
  --line: #2f4a55;
  --ink: #ece4cc;
  --muted: #93a8a8;
  --gold: #e3b341;
  --gold-soft: #d9c08a;
  --good: #8fd18a;
  --bad: #e0806a;
  --trade: #e3b341;
  --adv: #6fc2c9;
  --sail: #89b5ec;
  --battle: #e0806a;
  --parchment: #e8dcbc;
  --radius: 4px;
  --portrait-ratio: 3 / 4;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.55 "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; overflow: hidden; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; background: var(--panel-2); border: 1px solid #45636d; border-radius: var(--radius); padding: 7px 12px; transition: background .12s, border-color .12s; }
button:hover:not(:disabled) { background: #26485a; border-color: var(--gold-soft); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.primary { background: var(--gold); border-color: #f3d27a; color: #1d1a10; font-weight: 700; }
button.primary:hover:not(:disabled) { background: #f0c75a; }
button.danger { color: #f3b1a0; border-color: #7a4a42; }
button.small { padding: 4px 8px; font-size: 12px; }
button.ghost { background: transparent; border-color: transparent; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
select { background: #10222b; border: 1px solid #45636d; border-radius: var(--radius); padding: 5px 6px; }
h1, h2, h3 { margin: 0; font-weight: 700; }
.serif { font-family: "Batang", "바탕", Georgia, serif; }
.muted { color: var(--muted); }
.good { color: var(--good); } .bad { color: var(--bad); } .goldtxt { color: var(--gold); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow { flex: 1; }
.pix { image-rendering: pixelated; }

#app { height: 100%; display: grid; grid-template-rows: auto 1fr; }

/* ── 상단 바 ── */
#top { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: #0a151c; border-bottom: 1px solid var(--line); min-height: 54px; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand h1 { font-family: "Batang", Georgia, serif; font-size: 20px; letter-spacing: 3px; color: var(--gold-soft); }
.brand span { font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.chip { display: flex; flex-direction: column; gap: 2px; min-width: 70px; }
.chip label { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.chip strong { font-size: 15px; }
.fame { min-width: 86px; }
.fame i { display: block; height: 3px; background: #22343c; border-radius: 2px; overflow: hidden; }
.fame i b { display: block; height: 100%; }
.tokens { display: flex; gap: 3px; }
.tokens span { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid #5a6e6e; }
.tokens span.on { background: var(--gold); border-color: #f3d27a; box-shadow: 0 0 6px #e3b34188; }
.fame-row { display: flex; gap: 16px; }
.top-tools { margin-left: auto; display: flex; gap: 6px; }
.captain-top-name { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.captain-top-name .captain-origin-flag { width: 18px; height: 12px; margin: 0 1px 0 2px; flex: none; }

#stage { position: relative; min-height: 0; overflow: hidden; }

/* ── 타이틀 ── */
.title-screen { height: 100%; overflow: auto; padding: 32px 20px; background: radial-gradient(ellipse at top, #1f4050 0%, var(--bg) 70%); }
.title-screen header { text-align: center; margin-bottom: 26px; }
.title-screen h2 { font-family: "Batang", Georgia, serif; font-size: 44px; letter-spacing: 10px; color: var(--gold-soft); }
.title-screen p.lead { color: var(--muted); max-width: 640px; margin: 10px auto; }
.heroes { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); gap: 16px; justify-content: center; }
.hero { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.hero:hover { border-color: var(--gold-soft); }
.hero canvas { width: 96px; height: 96px; border: 1px solid #5a6e6e; }
.hero h3 { font-family: "Batang", Georgia, serif; font-size: 22px; color: var(--gold-soft); }
.hero .tag { font-size: 11px; letter-spacing: 1px; }
.hero p { margin: 0; font-size: 13px; color: #c4cfc8; }
.hero .goal { border-left: 2px solid var(--gold); padding-left: 8px; }
.hero button { margin-top: auto; }
.series { max-width: 940px; margin: 26px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.series div { background: #10222b; border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; font-size: 12px; color: #b9c7c2; }
.series b { color: var(--gold-soft); display: block; margin-bottom: 4px; }
.continue { text-align: center; margin: 18px 0 0; }

/* ── 항구 ── */
.port { height: 100%; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.port > aside, .port > section { min-height: 0; overflow: auto; }
.port-nav { background: #0f1f28; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.port-nav canvas { width: 100%; aspect-ratio: 16 / 7; display: block; }
.port-id { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.port-id h2 { font-family: "Batang", Georgia, serif; font-size: 22px; color: var(--gold-soft); }
.port-id p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.share { margin-top: 8px; font-size: 11px; }
.meter { height: 6px; background: #22343c; border-radius: 3px; overflow: hidden; position: relative; }
.meter b { display: block; height: 100%; background: var(--good); }
.meter.half::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #fff8; }
.places { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.places button { text-align: left; background: transparent; border-color: transparent; display: flex; justify-content: space-between; }
.places button.on { background: var(--panel-2); border-color: #45636d; color: var(--gold-soft); }
.places button small { color: var(--muted); font-size: 11px; }
.facility { padding: 20px 24px 40px; }
.facility > header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.facility > header h2 { font-family: "Batang", Georgia, serif; font-size: 24px; color: var(--gold-soft); }
.facility > header p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.card h3 { font-size: 15px; color: var(--gold-soft); }
.card p { margin: 0; font-size: 13px; color: #c1cdc8; }
.card .foot { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.card.wide { grid-column: 1 / -1; }
.card.done { opacity: .6; }
.note { background: #2a2a1a; border: 1px solid #6b5f35; color: #e6d6a0; padding: 8px 12px; border-radius: 4px; font-size: 13px; margin-bottom: 12px; }
.note.warn { background: #2e1d1a; border-color: #7a4a42; color: #f3c1b3; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
table.goods { width: 100%; border-collapse: collapse; font-size: 13px; }
table.goods th { text-align: right; font-weight: 400; color: var(--muted); font-size: 11px; padding: 6px 8px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); }
table.goods th:first-child, table.goods td:first-child { text-align: left; }
table.goods td { text-align: right; padding: 6px 8px; border-bottom: 1px solid #1d323c; font-variant-numeric: tabular-nums; }
table.goods tr.local td:first-child::after { content: " 특산"; font-size: 10px; color: var(--gold); }
table.goods td.act { white-space: nowrap; }
table.goods td.act button { margin-left: 4px; }
.pressure { display: inline-block; width: 34px; height: 4px; background: #22343c; vertical-align: middle; margin-left: 6px; }
.pressure b { display: block; height: 100%; background: var(--bad); }
.seg { display: inline-flex; border: 1px solid #45636d; border-radius: var(--radius); overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 5px 10px; }
.seg button.on { background: var(--gold); color: #1d1a10; }
.stat-bars { display: grid; grid-template-columns: 52px 1fr 22px; gap: 3px 8px; font-size: 12px; align-items: center; }
.stat-bars i { height: 5px; background: #22343c; border-radius: 3px; overflow: hidden; }
.stat-bars i b { display: block; height: 100%; background: var(--adv); }
.person { display: flex; gap: 12px; align-items: center; }
.person canvas { width: 64px; height: 64px; border: 1px solid #5a6e6e; flex: none; }
.ship-art { width: 100%; height: 110px; object-fit: contain; image-rendering: pixelated; background: linear-gradient(#6f97a6, #c9d6c8 60%, #2a6682 60%); border-radius: 4px; }
.pill { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: #243b45; color: #cfe; }
.pill.gold { background: #4a3d16; color: #f3d27a; }
.pill.red { background: #4a2420; color: #f3b1a0; }
.dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.dex div { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; font-size: 12px; }
.dex div.found { border-color: #6b5f35; }
.dex div.reported { border-color: var(--gold); }
.dex b { display: block; font-size: 13px; }

.status { background: #0f1f28; border-left: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.status h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: 2px; color: var(--gold-soft); font-weight: 400; }
.ship-line { font-size: 12px; margin-bottom: 6px; }
.ship-line .meter b { background: var(--good); }
.status ul { margin: 0; padding-left: 16px; font-size: 12px; color: #c1cdc8; }
.log p { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.log p:first-child { color: var(--ink); }

/* ── 바다 ── */
.sea { position: absolute; inset: 0; }
.sea canvas.view { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: crosshair; }
.sea canvas.ship-layer { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; image-rendering:auto; }
.hud { position: absolute; background: rgba(8, 20, 27, .78); border: 1px solid #3a5560; border-radius: 6px; padding: 10px 12px; font-size: 12px; backdrop-filter: blur(2px); }
.hud h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: 1px; color: var(--gold-soft); font-weight: 400; }
.hud-nav { top: 12px; left: 12px; display: flex; gap: 12px; align-items: center; }
.compass { width: 68px; height: 68px; border-radius: 50%; position: relative; background: #30271e url('assets/compass-rose.svg') center / contain no-repeat; flex: none; box-shadow: 0 2px 8px #0009, inset 0 0 0 1px #e2c786; }
.compass .n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.compass .wind, .compass .ship { position: absolute; left: 50%; top: 50%; transform-origin: 0 50%; z-index: 1; }
.compass .wind { width: 39%; height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, #b6f3ec55, #a9e3ed); box-shadow: 0 0 4px #78d4de; clip-path: polygon(0 18%, 78% 18%, 100% 50%, 78% 82%, 0 82%); }
.compass .ship { width: 37%; height: 5px; margin-top: -2.5px; background: linear-gradient(90deg, #f1d08c, #bb632e); clip-path: polygon(0 12%, 72% 12%, 100% 50%, 72% 88%, 0 88%); filter: drop-shadow(0 0 2px #20170e); }
.compass::after { content: ''; position: absolute; z-index: 2; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 50%; background: #f4dfaa; border: 1px solid #674724; box-shadow: 0 0 3px #20170e; }
.hud-fleet { top: 12px; right: 12px; width: 230px; }
.hud-fleet .ship-line { margin-bottom: 4px; }
.hud-bar { left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); }
.hud-bar kbd { font-size: 10px; color: var(--muted); margin-left: 4px; }
.hud-mini { right: 12px; bottom: 12px; padding: 4px; }
.hud-mini canvas { width: 208px; height: 120px; display: block; cursor: pointer; }
.hud-hint { left: 12px; bottom: 12px; max-width: 250px; color: var(--muted); }
.dpad { position: absolute; left: 16px; bottom: 70px; display: none; grid-template-columns: repeat(3, 44px); gap: 4px; touch-action: none; user-select: none; }
.dpad button { height: 44px; padding: 0; font-size: 18px; background: rgba(20, 40, 50, .8); }
.paused-banner { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-family: "Batang", Georgia, serif; font-size: 28px; letter-spacing: 6px; color: var(--gold-soft); text-shadow: 0 2px 10px #000; pointer-events: none; }

/* ── 해전 ── */
.battle { height: 100%; display: grid; grid-template-rows: minmax(220px, 58%) 1fr; }
.battle-field { min-height: 0; background: #0b1a22; padding: 8px; }
.battle-canvas { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.battle-canvas > canvas { position: absolute; inset: 0; }
.battle-field canvas { width: 100%; height: 100%; display: block; object-fit: contain; image-rendering: pixelated; cursor: pointer; }
.unit-card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; font-size: 12px; }
.kv2 { display: grid; grid-template-columns: 42px 1fr 48px; gap: 3px 8px; align-items: center; margin: 6px 0; }
.foe.me .meter b { background: var(--good); }
.commands button.danger small { color: #b88; }
.fleet-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.fleet-sum > div { background: #10222b; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.fleet-sum label { font-size: 11px; color: var(--muted); }
.fleet-sum b { font-size: 16px; }
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; font-size: 12px; margin-bottom: 12px; }
/* 직책마다 한 칸. 라벨·이름·수치가 흩어져 오른쪽 끝에 떨어지지 않게. */
.posts > div { display: flex; align-items: baseline; gap: 6px; background: #10222b; border: 1px solid var(--line); border-radius: 4px; padding: 5px 9px; min-width: 0; }
.posts > div.wide { grid-column: 1 / -1; }
.posts b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posts span { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.battle-panel { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 14px; padding: 14px; overflow: auto; background: #0f1f28; border-top: 1px solid var(--line); }
.range { display: flex; gap: 3px; margin: 6px 0 10px; }
.range span { flex: 1; text-align: center; font-size: 11px; padding: 4px 0; background: #1b3340; border-radius: 3px; color: var(--muted); }
.range span.on { background: var(--bad); color: #1d1a10; font-weight: 700; }
.foe { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 5px; cursor: pointer; font-size: 12px; background: var(--panel); }
.foe.on { border-color: var(--bad); }
.foe.gone { opacity: .35; cursor: default; }
.foe .meter { flex: 1; }
.foe .meter b { background: var(--bad); }
.commands { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.commands button small { display: block; font-size: 10px; color: var(--muted); font-weight: 400; }
.commands button.primary small { color: #4a3d16; }
.battle-log p { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.battle-log p:first-child { color: var(--ink); }
.duel-hp { display: grid; grid-template-columns: 50px 1fr 36px; gap: 4px 8px; align-items: center; font-size: 12px; margin-bottom: 8px; }

/* ── 원정 ── */
.expedition { height: 100%; overflow: auto; display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse, #3a3222, var(--bg) 75%); }
.expedition .card { max-width: 620px; width: 100%; }
.trail { display: flex; gap: 6px; margin: 10px 0; }
.trail span { flex: 1; padding: 10px; text-align: center; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; background: #10222b; }
.trail span.done { border-color: var(--gold); color: var(--gold-soft); }

/* ── 오버레이 ── */
#overlay:empty { display: none; }
#overlay { position: fixed; inset: 0; height: 100vh; height: 100dvh; background: rgba(4, 12, 16, .72); display: grid; place-items: center; z-index: 50; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow: hidden; }
.modal { background: var(--panel); border: 1px solid #6b5f35; border-radius: 8px; width: min(560px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 22px 24px; box-shadow: 0 20px 80px #000a; }
.modal.wide { width: min(1100px, 100%); }
.modal-dismiss { position: sticky; top: 0; z-index: 3; float: right; width: 44px; height: 44px; margin: -10px -12px 4px 12px; padding: 0; border-radius: 50%; background: #152833ee; font-size: 22px; line-height: 1; box-shadow: 0 2px 10px #0008; }
.modal .eyebrow { font-size: 10px; letter-spacing: 3px; color: var(--muted); }
.modal h2 { font-family: "Batang", Georgia, serif; font-size: 24px; color: var(--gold-soft); margin: 4px 0 10px; }
.modal p { white-space: pre-line; color: #d2dcd6; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.modal.story { background: linear-gradient(#efe3c2, #dccaa0); color: #2a2215; border-color: #8a7440; }
.modal.story h2 { color: #5a2f18; } .modal.story p { color: #3a2e1c; } .modal.story .eyebrow { color: #7a6440; }
.chart-wrap { display: grid; grid-template-columns: 1fr 250px; gap: 14px; }
.chart-wrap canvas { width: 100%; aspect-ratio: 1200 / 820; display: block; border-radius: 4px; cursor: pointer; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 13px; }
.help-grid h3 { font-size: 14px; color: var(--gold-soft); margin-top: 6px; }
.help-grid ul { margin: 4px 0; padding-left: 18px; color: #c1cdc8; }

#toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 60; pointer-events: none; align-items: center; }
.toast { background: #e8dcbc; color: #1d1a10; padding: 7px 14px; border-radius: 4px; font-size: 13px; box-shadow: 0 6px 24px #0008; animation: pop .2s ease-out; max-width: 90vw; }
.toast.warn { background: #e0806a; color: #1d0e08; }
.toast.level { background: var(--gold); font-weight: 700; }
.toast.err { background: #7a2f28; color: #fff; }
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } }

@media (max-width: 1150px) {
  .port { grid-template-columns: 210px minmax(0, 1fr); }
  .port .status { display: none; }
  .battle-panel { grid-template-columns: 1fr 1fr; }
  .battle-log { display: none; }
}
@media (max-width: 760px) {
  body { overflow: auto; }
  #top { gap: 10px; padding: 6px 10px; }
  .brand span, .chip.date { display: none; }
  .port { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .port-nav canvas, .port-id p { display: none; }
  .places { flex-direction: row; flex-wrap: wrap; }   /* 가로 스크롤은 뒤쪽 시설을 화면 밖에 숨긴다 */
  .places button { white-space: nowrap; }
  .facility { padding: 14px 16px 30px; }
  .heroes, .series { grid-template-columns: 1fr; }
  .hud-fleet { width: 170px; }
  .hud-mini, .hud-hint { display: none; }
  .dpad { display: grid; }
  .battle-panel { grid-template-columns: 1fr; }
  .fleet-sum { grid-template-columns: 1fr 1fr; }
  .posts { grid-template-columns: auto 1fr auto; }
  .chart-wrap { grid-template-columns: 1fr; }
  .help-grid { grid-template-columns: 1fr; }
}

/* 항구의 풍경이 화면의 중심이 되도록 배치 */
.port { grid-template-rows: clamp(200px, 30vh, 300px) minmax(0, 1fr); }
.harbor-panorama { grid-column:1 / -1; position:relative; overflow:hidden; border-bottom:3px solid #a58955; background:#356c80; }
.harbor-panorama > canvas { width:100%;height:100%;object-fit:fill;image-rendering:pixelated; }
.harbor-caption { position:absolute;top:18px;left:26px;padding:12px 18px;border-left:2px solid #dfbf79;background:linear-gradient(90deg,#11252fe8,#11252f80);pointer-events:none; }
.harbor-caption span,.eyebrow { letter-spacing:2px;font-size:10px;color:#c5cfbb; }
.harbor-caption h2 { font-family:Batang,serif;font-size:30px;color:#ffe2a3;margin:4px 0; }
.harbor-caption p { color:#e1dac2;font-size:12px;margin:0; }
.harbor-hotspots button { position:absolute;top:58%;transform:translateX(-50%);background:#152d35ed;border:1px solid #dec183;color:#ffe4ab;box-shadow:0 3px 0 #132028;font-size:12px; }
.harbor-hotspots button:hover { transform:translateX(-50%) translateY(-3px);background:#425951; }
.harbor-quote { border-left:2px solid #bca26d;background:#21373a;padding:15px 18px;color:#dcd6b7;line-height:1.8;margin-bottom:18px;font-family:Batang,serif; }
.encounter { border-top:2px solid #a18c62;background:linear-gradient(135deg,#213940,#152932); }
.discovery-art { display:block;width:100%;height:auto;image-rendering:pixelated;border:1px solid #9a875f;box-shadow:0 3px 16px #0005;margin:10px 0; }
.discovery-seal { color:#dabe7d;border-top:1px solid #82704e;border-bottom:1px solid #82704e;padding:10px;text-align:center;letter-spacing:2px;font-size:12px; }
.discovery-modal { max-width:680px; }
.expedition .card { max-width:760px;width:100%; }
@media(max-width:900px){.port{height:auto;min-height:100%;grid-template-rows:210px auto}.harbor-caption{top:10px;left:10px}.harbor-caption h2{font-size:24px}.harbor-hotspots button{padding:6px 8px;font-size:11px}.harbor-panorama{min-height:210px}}

/* ── 실시간 해전 (0.7) ── */
.battle.rt { grid-template-rows: minmax(260px, 64%) 1fr; }
.battle.rt .battle-field { position: relative; }
.b-top { position: absolute; z-index: 1; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: rgba(8, 20, 27, .82); border: 1px solid #3a5560; border-radius: 6px; padding: 5px 10px; font-size: 12px; white-space: nowrap; }
#b-duel:empty { display: none; }
#b-duel { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: rgba(4, 12, 16, .55); }
.duel-box { background: var(--panel); border: 1px solid #6b5f35; border-radius: 8px; padding: 16px 18px; width: min(440px, 92%); }
@media (max-width: 760px), (max-height: 600px) {
  #b-duel { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); background: rgba(4, 12, 16, .94); }
  .duel-box { width: min(440px, 100%); max-height: none; margin: auto 0; }
}
.duel-box h3 { color: var(--gold-soft); margin: 2px 0 10px; }
.duel-box .commands { grid-template-columns: repeat(3, 1fr); }
.kv2.reload { grid-template-columns: 42px 1fr 6px; }
.foe em { font-style: normal; font-size: 11px; min-width: 48px; text-align: right; }
table.goods tr.locked td { opacity: .65; }
.duel-cv { display: block; width: 100%; aspect-ratio: 420 / 190; border-radius: 4px; margin: 4px 0 10px; border: 1px solid #5a4a2a; }
.duel-box kbd { font-size: 10px; color: #4a3d16; margin-left: 2px; }
.duel-box .commands .duel-yield { grid-column: 1 / -1; }
.duel-read { font-size: 13px; line-height: 1.45; margin: 0 0 8px; padding: 6px 10px; border-left: 2px solid #6b5f35; background: rgba(0,0,0,.18); }
.duel-read p { margin: 2px 0; }
.duel-read .warn { color: #f3c1b3; }

/* ── 연출 (0.7.1) ── */
.title-screen { position: relative; }
.title-screen > *:not(#title-bg) { position: relative; z-index: 2; }
#title-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .9; pointer-events: none; }
.title-screen::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(13,26,34,.05), rgba(13,26,34,.35) 45%, rgba(13,26,34,.8) 85%); pointer-events: none; }
.hero { transition: transform .2s ease, border-color .2s, box-shadow .2s; }
.hero:hover { transform: translateY(-4px); box-shadow: 0 12px 30px #0007; }
.enter { animation: stage-in .38s ease-out both; }
.facility.enter { animation: rise-in .28s ease-out both; }
@keyframes stage-in { from { opacity: 0; transform: scale(1.015); filter: brightness(.6); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#overlay { animation: fade-in .18s ease-out; }
.modal { animation: modal-in .26s cubic-bezier(.2, .9, .3, 1.15); }
.modal.story { animation: unroll .42s cubic-bezier(.2, .8, .3, 1) both; transform-origin: top center; }
.discovery-modal canvas { animation: reveal .7s ease-out both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes unroll { from { opacity: 0; transform: scaleY(.3); } 60% { opacity: 1; } to { transform: none; } }
@keyframes reveal { from { opacity: 0; filter: brightness(2) saturate(0); } to { opacity: 1; filter: none; } }
.toast { animation: toast-in .25s cubic-bezier(.2, .9, .3, 1.2); }
.toast.out { animation: toast-out .26s ease-in forwards; }
.toast.level { animation: toast-in .25s cubic-bezier(.2, .9, .3, 1.2), shine 1.2s ease-in-out .25s 2; background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); background-size: 250% 100%; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.95); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes shine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
button { transition: background .12s, border-color .12s, transform .08s; }
button:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.meter b { transition: width .35s ease; }
.harbor-hotspots button { transition: transform .15s ease; }
.harbor-hotspots button:hover { transform: translateY(-3px); }
.tokens span.on { animation: token-glow 2.4s ease-in-out infinite; }
@keyframes token-glow { 50% { box-shadow: 0 0 10px #e3b341cc; } }
.paused-banner { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.hud { transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── 정리된 항구 상태창 (0.8.1) ── */
.status { gap: 8px; }
.sp-head { display: flex; justify-content: space-between; align-items: center; }
.sp-head h4 { margin: 0; }
.sp-row { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; font-size: 12px; align-items: baseline; }
.sp-row span { color: var(--muted); }
.sp-row b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-row .meter { grid-column: 1 / -1; height: 4px; }
.sp-gap { height: 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.sp-links { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-last { margin: 0; font-size: 12px; color: var(--muted); cursor: pointer; border-left: 2px solid var(--line); padding-left: 8px; }
.sp-last:hover { color: var(--ink); }
.port-id { padding: 10px 14px; }
.places button { padding-top: 7px; padding-bottom: 7px; }

/* ── 선장 창 ── */
.modal.captain-modal { width: min(720px, 100%); }
.sheet { display: grid; grid-template-columns: 190px 1fr; gap: 24px; }
.sheet-id { text-align: center; }
.sheet-id canvas { width: 144px; height: 144px; border: 3px solid #6b5f35; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 8px 24px #0008; }
.sheet-id h2 { margin: 10px 0 2px; }
.sheet-id p { margin: 2px 0; font-size: 13px; }
.captain-origin-card { margin: 10px auto 8px; padding: 8px 9px; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 8px; align-items: start; text-align: left; border: 1px solid #5f644d; border-radius: 4px; background: #102129; }
.captain-origin-card .nation-flag { width: 30px; height: 20px; margin: 1px 0 0; }
.captain-origin-card div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.captain-origin-card span { color: var(--muted); font-size: 10px; line-height: 1.3; }
.captain-origin-card b { color: var(--gold-soft); font-size: 12px; line-height: 1.4; }
.captain-origin-card small { color: #c9d1c8; font-size: 10px; line-height: 1.45; }
.sheet-body h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: 3px; color: var(--gold-soft); font-weight: 400; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.sheet-body h4 + * { margin-bottom: 18px; }
.sheet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.sheet-stats div { display: grid; grid-template-columns: 48px 1fr 28px; gap: 8px; align-items: center; font-size: 13px; cursor: help; }
.sheet-stats i { height: 6px; background: #22343c; border-radius: 3px; overflow: hidden; }
.sheet-stats i b { display: block; height: 100%; background: linear-gradient(90deg, #8a7a4a, var(--gold)); }
.sheet-stats strong { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.sheet-skills { display: grid; grid-template-columns: 40px 1fr; gap: 10px 10px; margin: 0; align-items: center; }
.sheet-skills dt { color: var(--muted); font-size: 12px; }
.sheet-skills dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border: 1px solid #45636d; border-radius: 12px; background: #15303a; }
.badge.off { opacity: .45; }
.badge em { font-style: normal; color: var(--gold); letter-spacing: 1px; }
.badge.lv { flex-direction: column; align-items: stretch; gap: 3px; border-radius: 6px; min-width: 76px; text-align: center; }
.badge.lv i { height: 3px; background: #22343c; border-radius: 2px; overflow: hidden; }
.badge.lv i b { display: block; height: 100%; background: var(--gold-soft); }
button.fame-badge { cursor: pointer; line-height: 1.45; }
button.fame-badge::after { content: "›"; color: var(--gold-soft); font-size: 14px; line-height: 1; }
button.fame-badge.bad { border-color: #7a4a42; }
.modal.fame-modal { width: min(660px, 100%); }
.fame-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 14px; }
.fame-tabs button { padding: 8px 6px; font-size: 12px; }
.fame-tabs button.on { background: #4a3d16; border-color: var(--gold); color: #ffe39a; font-weight: 700; }
.fame-lead { margin: 4px 0 8px; }
.fame-current-effect { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding: 9px 11px; border: 1px solid #4f5648; border-radius: 5px; background: #102129; }
.fame-current-effect span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.fame-current-effect b { color: var(--gold-soft); font-size: 12px; font-weight: 600; }
.fame-rule { margin: 9px 0 2px; font-size: 11px; }
.fame-ladder { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.fame-rank { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; padding: 9px 8px; border-top: 1px solid #29414a; }
.fame-rank:first-child { border-top: 0; }
.fame-rank.done { opacity: .72; }
.fame-rank.current { margin: 2px 0; border: 1px solid #8a6f36; border-radius: 6px; background: #2b3326; }
.fame-rank.next { background: #162d35; }
.fame-node { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #45636d; border-radius: 50%; color: var(--muted); font-size: 11px; font-weight: 700; }
.fame-rank.done .fame-node { border-color: #5b765f; color: var(--good); }
.fame-rank.current .fame-node { border-color: var(--gold); color: var(--gold); background: #4a3d16; }
.fame-rank-head { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.fame-rank-head strong { color: var(--ink); font-size: 14px; }
.fame-req { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font-size: 11px; line-height: 1.55; }
@media (max-width: 520px) {
  .modal.fame-modal { padding-left: 16px; padding-right: 16px; }
  .fame-tabs { gap: 4px; }
  .fame-tabs button { padding: 7px 2px; font-size: 11px; }
  .fame-rank { grid-template-columns: 28px 1fr; padding: 8px 4px; gap: 7px; }
  .fame-req { display: grid; gap: 1px; }
}
@media (max-width: 640px) { .sheet { grid-template-columns: 1fr; } .sheet-stats { grid-template-columns: 1fr; } }

/* ── 항해일지 (책) ── */
.modal.book-modal { width: min(1080px, 100%); background: none; border: none; box-shadow: none; padding: 0 44px 0 0; overflow: visible; }
.book { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 14px; border-radius: 12px;
  background: radial-gradient(ellipse at 30% 20%, #7a5234, #4a2e1b 70%); box-shadow: 0 30px 90px #000d, inset 0 0 0 2px #8a6440, inset 0 0 0 6px #3a2415; }
.book::after { content: ""; position: absolute; top: 14px; bottom: 14px; left: 50%; width: 40px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, #0000002e 40%, #00000055 50%, #0000002e 60%, transparent); }
.book-page { height: min(640px, calc(100vh - 90px)); overflow: auto; padding: 26px 34px 30px; color: #3b2a19; font-family: "Batang", Georgia, serif; font-size: 14px; scrollbar-width: thin; scrollbar-color: #b39a6b transparent; }
.book-page.left { border-radius: 6px 0 0 6px; background: linear-gradient(90deg, #e6d6ae, #f2e7c9 10%, #efe2c0 85%, #d9c69a); box-shadow: inset 0 0 30px #a0845018; }
.book-page.right { border-radius: 0 6px 6px 0; background: linear-gradient(90deg, #d9c69a, #efe2c0 15%, #f2e7c9 90%, #e6d6ae); box-shadow: inset 0 0 30px #a0845018; }
.book-page.flip { animation: page-flip .34s ease-out both; }
.book-page.right.flip { animation-delay: .06s; }
@keyframes page-flip { from { opacity: 0; transform: translateY(6px); filter: sepia(.4) brightness(.9); } to { opacity: 1; transform: none; filter: none; } }
.book-page h3 { font-size: 22px; color: #5a2f18; margin: 0 0 2px; font-weight: 700; }
.book-page h3::after { content: ""; display: block; width: 60px; height: 2px; margin-top: 6px; background: linear-gradient(90deg, #9a6b3a, transparent); }
.book-page h4 { margin: 18px 0 6px; font-size: 12px; letter-spacing: 3px; color: #8a5a2c; font-weight: 400; }
.book-sub { margin: 6px 0 10px; font-size: 12px; color: #7a6040; }
.book-text { line-height: 1.8; margin: 10px 0; white-space: pre-line; }
.book-note { font-size: 12px; color: #6a5236; margin: 6px 0; }
.book-empty { color: #8a7050; font-style: italic; line-height: 1.8; padding: 20px 0; text-align: center; }
.book-page .entry { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 8px; text-align: left; padding: 6px 4px; margin: 0; border: none; border-bottom: 1px dotted #b8a174; border-radius: 0; background: transparent; color: #3b2a19; font-family: inherit; font-size: 14px; cursor: pointer; }
.book-page .entry:hover { background: #e3d3a8; }
.book-page .entry.on { background: #dcc998; box-shadow: inset 3px 0 0 #8a3a22; }
.book-page .entry small { color: #7a6040; font-size: 11px; white-space: nowrap; }
.book-page .entry.todo small { color: #9a3a22; }
.book-page .entry.blank { color: #b8a27a; cursor: default; }
.book-art { display: block; width: 100%; aspect-ratio: 400 / 180; border: 6px solid #fff8e4; box-shadow: 0 2px 0 #b8a174, 0 6px 16px #6a4a2240; transform: rotate(-.6deg); margin: 4px 0 16px; }
.stamp { display: inline-block; margin: 8px 0; padding: 4px 12px; border: 2px solid #3f6a3a; color: #3f6a3a; border-radius: 4px; font-size: 13px; transform: rotate(-2deg); font-weight: 700; }
.stamp.todo { border-color: #9a3a22; color: #9a3a22; }
.book-kv { display: grid; grid-template-columns: 76px 1fr; gap: 10px 12px; margin: 14px 0; line-height: 1.6; }
.book-kv dt { color: #8a5a2c; font-size: 12px; padding-top: 2px; }
.book-kv dd { margin: 0; }
.book-page .ok { color: #3f6a3a; } .book-page .no { color: #9a3a22; }
.book-page button:not(.entry) { background: #d9c79c; border-color: #a58c5c; color: #3b2a19; font-family: inherit; }
.book-page button:not(.entry):hover { background: #cdb883; }
.book-page button.on:not(.entry) { background: #8a3a22; border-color: #6a2a16; color: #f6ead0; }
.news { margin: 4px 0; font-size: 13px; line-height: 1.5; }
.news.boom { color: #7a4a10; } .news.glut { color: #8a2f22; }
.news small { color: #8a7050; font-size: 11px; }
.book-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.book-table th { font-weight: 400; font-size: 11px; color: #8a5a2c; text-align: right; padding: 6px; border-bottom: 1px solid #9a7a4a; }
.book-table td { text-align: right; padding: 6px; border-bottom: 1px dotted #c3ad80; font-variant-numeric: tabular-nums; }
.book-table th:first-child, .book-table td:first-child { text-align: left; }
.book-table tr.here td { background: #e0cfa2; font-weight: 700; }
.book-table small { color: #8a7050; }
.quest { padding: 8px 0; border-bottom: 1px dotted #b8a174; }
.quest b { display: block; font-weight: 600; }
.quest small { color: #7a6040; }
.chapter { margin: 4px 0; color: #8a7050; } .chapter.on { color: #5a2f18; }
.token { margin: 10px 0; padding: 10px 12px; border: 1px solid #c3ad80; border-radius: 4px; background: #eadcb8; }
.token.on { border-color: #9a6b3a; background: #e6d09a; }
.token b { color: #5a2f18; }
.token ul { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; }
.token li { color: #7a6040; } .token li.ok { color: #3f6a3a; }
.diary-filter { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.diary-filter button { padding: 3px 10px; font-size: 12px; border-radius: 12px; }
.diary { display: grid; grid-template-columns: 78px 1fr; gap: 8px; margin: 0; padding: 7px 0 7px 10px; border-bottom: 1px dotted #c3ad80; line-height: 1.55; border-left: 3px solid transparent; }
.diary time { font-size: 11px; color: #8a7050; padding-top: 2px; font-variant-numeric: tabular-nums; }
.diary.k-trade { border-left-color: #b8892f; } .diary.k-find { border-left-color: #3f7a6a; } .diary.k-battle { border-left-color: #9a3a22; } .diary.k-crew { border-left-color: #6a5a9a; } .diary.k-sea { border-left-color: #4a6a8a; }
.book-tabs { position: absolute; right: -40px; top: 36px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.ribbon { writing-mode: vertical-rl; padding: 12px 7px; min-height: 76px; border-radius: 0 6px 6px 0; border: none; font-family: "Batang", Georgia, serif; font-size: 13px; letter-spacing: 2px; color: #f6ead0; box-shadow: 2px 3px 6px #0006; transform: translateX(-8px); transition: transform .15s ease; }
.ribbon:hover:not(:disabled), .ribbon.on { transform: none; }
.ribbon.on { box-shadow: 3px 3px 10px #000a; font-weight: 700; }
.r-finds { background: #8a3a22; } .r-collectibles { background: #75502f; } .r-clues { background: #3f6a5a; } .r-price { background: #9a7a2a; } .r-quests { background: #4a4a7a; } .r-diary { background: #5a4a3a; }
.ribbon.r-finds:hover:not(:disabled) { background: #9a4a2a; } .ribbon.r-collectibles:hover:not(:disabled) { background: #8a623c; } .ribbon.r-clues:hover:not(:disabled) { background: #4f7a6a; } .ribbon.r-price:hover:not(:disabled) { background: #aa8a3a; } .ribbon.r-quests:hover:not(:disabled) { background: #5a5a8a; } .ribbon.r-diary:hover:not(:disabled) { background: #6a5a4a; }
.book-close { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; border-radius: 50%; padding: 0; background: #3a2415; border: 2px solid #8a6440; color: #f2e7c9; z-index: 3; }
@media (max-width: 820px) {
  .modal.book-modal {
    padding: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .book { grid-template-columns: 1fr; padding: 48px 8px 8px; }
  .book::after { display: none; }
  .book-tabs { position: absolute; top: 8px; left: 8px; right: 40px; flex-direction: row; overflow-x: auto; }
  .ribbon { writing-mode: horizontal-tb; white-space: nowrap; flex: none; letter-spacing: 0; min-height: 0; padding: 6px 10px; border-radius: 6px 6px 0 0; transform: none; }
  .book-page { height: auto; max-height: none; border-radius: 4px !important; padding: 18px; }
  .book-close { top: 8px; right: 8px; }
}
.book-collectible-art { width:min(100%,280px); min-height:180px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; background-position:center; background-repeat:no-repeat; }
.book-collectible-art.object { background-size:contain!important; }
.book-collectible-art.painting { min-height:0; }
.book-collectible-art.painting .estate-painting { display:block; width:100%; height:auto; max-height:250px; }
/* 책 속 글씨는 어두운 잉크색 (.modal p의 밝은 글씨를 덮는다) */
.modal .book-page p { color: #3b2a19; white-space: normal; }
.modal .book-page p.book-sub { color: #7a6040; }
.modal .book-page p.book-note { color: #6a5236; }
.modal .book-page p.book-text { white-space: pre-line; }
.modal .book-page .book-empty p { color: #8a7050; }
.modal .book-page p.stamp { color: #3f6a3a; }
.modal .book-page p.stamp.todo { color: #9a3a22; }
.modal .book-page p.news.boom { color: #7a4a10; }
.modal .book-page p.news.glut { color: #8a2f22; }
.modal .book-page p.chapter { color: #8a7050; }
.modal .book-page p.chapter.on { color: #5a2f18; }

/* MARITIME ATELIER — 황동, 먹빛 목재, 오래된 해도 */
:root{--bg:#151c1d;--panel:#212b2c;--panel-2:#2a3635;--line:#4b5147;--ink:#e7dfc9;--muted:#acb2a3;--gold:#c8a368;--gold-soft:#dfc595;--good:#99b89b;--adv:#88afa6;--sail:#92b2bd;--radius:2px}
body{background:radial-gradient(ellipse at 50% 0,#34413e,#131c1d 75%)}
#top{background:linear-gradient(#28302d,#182222);border-bottom:1px solid #8c7956;box-shadow:0 2px 12px #0006}
.brand h1{color:#e6c99a;text-shadow:0 2px 2px #000;letter-spacing:4px}.brand span{color:#a99470}
button,select{border-color:#686b58;background:linear-gradient(#34413b,#25312e);box-shadow:inset 0 1px #b9af8220}
button:hover:not(:disabled){background:#44534b;border-color:#d4b583}button.primary{background:linear-gradient(#d6b987,#b8945d);border-color:#dac39c;color:#25251c}
.card,.hud,.modal{border-color:#626553;box-shadow:0 4px 14px #0003,inset 0 1px #d4c3980c}.card{background:linear-gradient(135deg,#2b3632,#202d2d)}
.port{grid-template-rows:clamp(240px,38vh,390px) minmax(0,1fr)}
.harbor-panorama{border-bottom:3px solid #9e895e;background:#273d42}.harbor-panorama>canvas{object-fit:cover;object-position:50% 57%}
.harbor-panorama:after{content:'';pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 -32px 32px -24px #111e22,inset 0 0 80px #151e2222}
.harbor-caption{top:22px;left:28px;padding:14px 22px;border-left:2px solid #d2b788;background:linear-gradient(90deg,#152326ef,#152326b0 72%,transparent);text-shadow:0 2px 3px #000}
.harbor-caption h2{font-size:32px;letter-spacing:5px}.harbor-caption p{color:#e8d9bd}
.harbor-hotspots button{top:76%;background:#172725ec;border-color:#c1a879;border-radius:2px;box-shadow:0 3px 10px #0008;font-size:12px;letter-spacing:1px;z-index:1}
.port-nav{background:linear-gradient(90deg,#1a2626,#23312e);border-color:#4f5748}.port-id h2{color:#d7bb84}.places button.on{background:#3a4438;border-color:#7e805c;color:#ead7ad}
.facility{background:radial-gradient(ellipse at 50% 0,#35423633,transparent 70%)}.harbor-quote{background:#303c34;border-color:#b49b6a;color:#d6ccb2}.encounter{border-top-color:#a28f62}
.status{background:#1b2928}.discovery-art{border-color:#9c885e}.modal{background:linear-gradient(135deg,#2c3732,#192829);border:1px solid #9b8761}.eyebrow{color:#baa983}
@media(max-width:760px){.port{grid-template-rows:235px auto}.harbor-caption{left:12px;top:12px;padding:9px 12px}.harbor-caption h2{font-size:25px}.harbor-hotspots button{top:78%;padding:6px}.harbor-panorama>canvas{object-position:45% 55%}}

/* ── 항해일지: 스크롤 대신 쪽 넘기기 (0.8.2) ── */
.book { perspective: 1800px; }
.book-page { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 12px; }
.book-page .page-body { flex: 1; min-height: 0; overflow: hidden; }
.book-page .page-foot { flex: none; height: 30px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 12px; color: #8a7050; border-top: 1px solid #d3c092; margin-top: 6px; }
.book-page .page-foot:empty { border-top-color: transparent; }
.book-page.measure { position: absolute; left: -99999px; top: 0; visibility: hidden; pointer-events: none; }
.book-page[hidden] { display: none; }
.book-page .turn { width: 30px; height: 24px; padding: 0; font-size: 11px; line-height: 1; border-radius: 12px; }
.book-page .turn:disabled { opacity: .25; }
.book-page.left .page-foot { justify-content: flex-start; }
.book-page.right .page-foot { justify-content: flex-end; }
.book-page.left .page-foot:has(.turn.next) { justify-content: space-between; }
.book-page.right .page-foot:has(.turn.prev) { justify-content: space-between; }
.price-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 6px; padding: 6px; border-bottom: 1px dotted #c3ad80; font-size: 13px; font-variant-numeric: tabular-nums; }
.price-row span:not(:first-child) { text-align: right; }
.price-row.head { font-size: 11px; color: #8a5a2c; border-bottom: 1px solid #9a7a4a; margin-top: 8px; }
.price-row.here { background: #e0cfa2; font-weight: 700; }
.price-row small { color: #8a7050; }
.book-page.left.turn-next { transform-origin: right center; animation: turn-left-next .42s ease-out both; }
.book-page.right.turn-next { transform-origin: left center; animation: turn-right-next .42s ease-out both; }
.book-page.left.turn-prev { transform-origin: right center; animation: turn-left-prev .42s ease-out both; }
.book-page.right.turn-prev { transform-origin: left center; animation: turn-right-prev .42s ease-out both; }
@keyframes turn-right-next { from { transform: rotateY(-70deg); filter: brightness(.75); } to { transform: none; filter: none; } }
@keyframes turn-left-next { 0%, 35% { opacity: .2; filter: brightness(.8); } to { opacity: 1; filter: none; } }
@keyframes turn-left-prev { from { transform: rotateY(70deg); filter: brightness(.75); } to { transform: none; filter: none; } }
@keyframes turn-right-prev { 0%, 35% { opacity: .2; filter: brightness(.8); } to { opacity: 1; filter: none; } }
.book-page.settle .page-body { animation: settle .22s ease-out both; }
@keyframes settle { from { opacity: .3; } to { opacity: 1; } }
@media (max-width: 820px) {
  .book-page { height: min(560px, calc(100vh - 120px)); }
  .book-page.right { margin-top: 8px; }
}

/* ── 내륙 탐험 (0.9) ── */
.flag { display: inline-block; width: 12px; height: 8px; margin-right: 6px; border: 1px solid #0007; vertical-align: middle; border-radius: 1px; }
.land canvas.view { cursor: pointer; }
.gate-form { gap: 10px; }
.gate-row { display: grid; grid-template-columns: 110px 90px 130px 1fr; gap: 10px; align-items: center; font-size: 13px; }
.gate-row > span:first-child { color: var(--muted); }
.gate-row .chips { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.gate-row .chips .pill { display: inline-flex; gap: 4px; align-items: center; }
.gate-row button + button { margin-left: 4px; }
@media (max-width: 700px) { .gate-row { grid-template-columns: 90px 1fr; } .gate-row > small, .gate-row > .meter { grid-column: 1 / -1; } }

/* ── 실존 인물 (0.10) ── */
.card.hist { border-color: #6b5f35; background: linear-gradient(180deg, #2a2a1c 0, var(--panel) 90px); }
.card.hist .person canvas { width: 72px; height: auto; aspect-ratio: var(--portrait-ratio); border: 2px solid #8a7440; }
.card.hist .pill.gold { font-size: 10px; }
.person-bio { font-size: 12px; line-height: 1.6; margin: 0; }
.r-people { background: #6a4a2a; }
.ribbon.r-people:hover:not(:disabled) { background: #7a5a3a; }
.r-history { background: #6a3a4a; } .ribbon.r-history:hover:not(:disabled) { background: #7a4a5a; }
.notice-hide { margin-top: 6px; }
.portrait-frame { width: 112px; margin: 4px 0 12px; padding: 6px; background: #fff8e4; box-shadow: 0 2px 0 #b8a174, 0 6px 16px #6a4a2240; transform: rotate(1deg); }
.portrait-frame canvas { width: 100px; aspect-ratio: var(--portrait-ratio); height: auto; display: block; }

/* 인물화는 작은 캔버스에서도 부드러운 얼굴 비율과 명암을 유지한다. */
canvas.character-portrait { image-rendering: auto; width: auto; height: auto; aspect-ratio: var(--portrait-ratio); border-radius: 3px; background: #20332f; }
.person canvas.character-portrait { width: 80px; height: auto; border: 1px solid #aa9267; box-shadow: 0 3px 12px #0004; }
.card.hist .person canvas.character-portrait { width: 88px; height: auto; }
.portrait-frame { width: 156px; padding: 7px; background: #e2d2af; transform: none; }
.portrait-frame canvas.character-portrait { width: 142px; height: auto; }
@media(max-width:600px) { .person canvas.character-portrait, .card.hist .person canvas.character-portrait { width: 64px; height: auto; } }
/* ── 명확한 정보 계층과 활동 피드백 ── */
#top { gap: 10px 18px; padding: 10px 18px; }
#top .brand span { display: none; }
#top .brand h1 { font-size: 18px; letter-spacing: 1px; }
#top .fame { min-width: 60px; }
#top .chip label { font-size: 11px; letter-spacing: 0; }
.top-tools { flex-wrap: wrap; gap: 5px; }
.port { grid-template-columns: 208px minmax(0,1fr); grid-template-rows: clamp(170px,27vh,265px) minmax(0,1fr); }
.harbor-caption { top: 18px; left: 22px; }
.port-id { padding: 12px; }
.place-group { padding: 9px 10px; border-bottom: 1px solid #3b4c43; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.place-group h3 { grid-column: 1/-1; font: 11px/1.8 "Malgun Gothic",sans-serif; color: #b1c0b5; letter-spacing: 1px; margin-bottom: 3px; }
.places .place-group button { padding: 8px 5px; text-align: center; border: 1px solid transparent; border-radius: 3px; font-size: 12px; }
.places .place-group button.on { background: #435548; border-color: #b39a67; color: #fff0cc; font-weight: bold; }
.facility { padding: 14px 16px 22px; }
.facility header p,.facility .muted { color: #b6c3b9; }
.facility > header { margin-bottom: 8px; }
.facility > header h2 { font-size: 21px; }
.facility .card { padding: 10px 12px; gap: 5px; }
.facility .card p { line-height: 1.5; }
.facility .card .foot { margin-top: 3px; }
.facility button { padding: 5px 9px; line-height: 1.25; }
.facility button.small { padding: 3px 7px; }
.facility .cards { gap: 8px; }
.facility .panel { padding: 9px 11px; gap: 5px; }
.facility .panel-grid { gap: 7px; margin-bottom: 7px; }
.facility .list { gap: 3px; }
.facility .list-row { padding: 5px 8px; gap: 8px; }
.facility .entry-panel { padding: 9px 11px; margin-bottom: 8px; }
.facility .entry-panel h3 { margin-bottom: 4px; }
.facility .entry-panel p { margin: 3px 0; line-height: 1.45; }
.facility .entry-panel small { margin-top: 5px; line-height: 1.45; }
.facility .dock-status { margin-bottom: 7px; }
.facility .dock-status > div { padding: 6px 9px; }
.facility .dock-status b { font-size: 14px; }
.entry-status { margin: 0 0 7px; padding: 3px 0; font-size: 12px; }
.port-readiness { position: absolute; right: 16px; bottom: 14px; z-index: 2; width: min(520px, 48vw); padding: 9px 11px 10px; border: 1px solid #887957; border-radius: 4px; background: #132220e8; box-shadow: 0 5px 18px #0008; backdrop-filter: blur(3px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 10px; }
.port-readiness .sp-head, .port-readiness .sp-gap, .port-readiness .sp-links { grid-column: 1 / -1; }
.port-readiness h4 { margin: 0 0 2px; font-size: 11px; letter-spacing: 2px; color: var(--gold-soft); font-weight: 400; }
.port-readiness .sp-row { margin: 0; gap: 1px 5px; font-size: 11px; }
.port-readiness .sp-row > span, .port-readiness .sp-row > b { font-size: 11px; }
.port-readiness .sp-gap { display: none; }
.port-readiness .meter { height: 4px; }
.port-nav .place-group { padding: 6px 8px; gap: 3px; }
.port-nav .place-group h3 { line-height: 1.35; margin-bottom: 1px; }
.port-nav .places .place-group button { padding: 5px 4px; }
.academy-flow { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(460px, 1.18fr); align-items: start; gap: 0; }
.academy-section { min-width: 0; }
.academy-library { padding-right: 18px; border-right: 1px solid var(--line); }
.academy-education { padding-left: 18px; }
.academy-title { margin: 0 0 10px; font-family: "Batang", Georgia, serif; font-size: 18px; color: var(--gold-soft); }
.academy-title small { margin-left: 6px; font: 400 12px/1.4 "Malgun Gothic", sans-serif; color: var(--muted); }
.academy-library .library { margin: 0; }
.academy-library .lib-head { align-items: flex-start; margin-bottom: 7px; }
.academy-library .lib-head p { max-width: 390px; line-height: 1.5; }
.academy-library .lib-langs { gap: 3px; }
.academy-library .bookcase { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; padding: 8px; }
.academy-library .case .plaque { font-size: 11px; }
.academy-library .shelf { gap: 9px 2px; padding: 0 6px 10px; background: repeating-linear-gradient(to bottom, transparent 0 126px, #9a6a3c 126px 128px, #6a4424 128px 136px, #3a2412 136px 141px), linear-gradient(#140b06, #22140b); }
.academy-library .spine { width: var(--cw); height: var(--ch); margin: calc(126px - var(--ch)) 0 0; padding: 9px 0 17px; }
.academy-library .spine-title { font-size: 10px; line-height: 1; }
.academy-library .spine.clue-new { padding-bottom: 30px; }
.academy-library .spine .seal { bottom: 16px; width: 14px; height: 14px; margin-left: -7px; line-height: 14px; }
.academy-library .spine .ribbon-mark { height: 17px; }
.academy-library .spine-lv { bottom: 2px; font-size: 8px; }
.academy-education > .lib-sub:first-of-type { margin-top: 0; }
@media (max-width: 1050px) {
  .academy-flow { grid-template-columns: 1fr; gap: 18px; }
  .academy-library { padding-right: 0; padding-bottom: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .academy-education { padding-left: 0; }
}
.status { padding: 16px; }
#toasts { top: auto; left: auto; right: 22px; bottom: 22px; transform: none; width: min(420px,calc(100vw - 32px)); align-items: stretch; gap: 10px; }
#toasts .toast { max-width: none; width: 100%; pointer-events: auto; padding: 16px 18px; border: 1px solid #bca77c; border-left: 4px solid #bca77c; background: #f0e5ca; color: #25302a; font-size: 14px; }
.notice-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.notice-heading button { color: #25302a; }
.toast p { margin: 8px 0 0; line-height: 1.75; white-space: pre-line; }
#toasts .toast.err,#toasts .toast.warn { border-left-color: #a84b36; }
#toasts .toast.adjutant { border-left-color:#7d8f77; padding:12px 14px; }
#toasts .toast.adjutant.warn { border-left-color:#a84b36; }
.adjutant-notice { display:flex; gap:12px; align-items:flex-start; }
.adjutant-notice canvas { width:64px; height:64px; flex:none; border:1px solid #8e7a56; border-radius:4px; background:#20353f; }
.adjutant-notice .notice-heading { margin-top:1px; }
.adjutant-speech { font-weight:600; }
.adjutant-detail { color:#5b625d; font-size:13px; }
.adjutant-assign { display:flex; gap:14px; align-items:center; padding:14px 16px; margin:0 0 18px; border:1px solid var(--line); background:rgba(34,53,46,.55); border-radius:5px; }
.adjutant-assign canvas,.adjutant-empty { width:72px; height:72px; flex:none; border:1px solid #87764f; border-radius:4px; }
.adjutant-empty { display:grid; place-items:center; font-size:28px; color:var(--muted); background:#20353f; }
.adjutant-assign h3 { margin:0 0 4px; }
.adjutant-assign p { margin:0 0 8px; line-height:1.55; }
.adjutant-assign select { min-width:min(320px,100%); }
.fleet-command { margin:16px 0 18px; padding:12px; border:1px solid var(--line); border-radius:5px; background:#17262399; }
.fleet-command .section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fleet-command .section-title { flex:1; margin-top:0; }
.fleet-command .adjutant-assign { margin:0 0 10px; }
.fleet-command .slot-board { margin-bottom:10px; }
.fleet-roster { margin-top:12px; border-top:1px solid var(--line); padding-top:8px; }
.fleet-roster > summary { cursor:pointer; color:var(--gold-soft); font-size:13px; padding:5px 0 9px; }
.fleet-roster[open] > summary { margin-bottom:6px; }
.fleet-equipment { margin-top:10px; }
/* 글자색은 창 바탕을 따른다: 밝은 양피지 창에서 밝은 회색 글자가 안 보이던 문제 */
.guide-check { display:flex; align-items:center; gap:8px; padding:10px 12px; margin-top:12px; border:1px solid rgba(128,128,128,.45); border-radius:4px; background:rgba(128,128,128,.1); color:inherit; font-weight:600; }
.guide-check input { width:18px; height:18px; accent-color:#b99a5d; }
@media(max-width:760px) {
  .fleet-command { padding:9px; }
  .fleet-command .section-head { align-items:flex-start; }
  .fleet-command .adjutant-assign { flex-direction:row; }
}
.adjutant-modal { width:min(620px,94vw); border-top:4px solid #8ea07c; }
.adjutant-modal-head { display:flex; gap:18px; align-items:center; margin-bottom:18px; }
.adjutant-modal-head canvas { width:112px; height:112px; border:2px solid #b8a06c; border-radius:5px; flex:none; }
.adjutant-modal-head h2 { margin:0 0 4px; }
.adjutant-modal-speech { white-space:pre-line; font-size:18px; line-height:1.9; background:#253b34; padding:18px 22px; border-left:3px solid #aa9568; }
.adjutant-modal-detail { line-height:1.8; color:#c9d1c8; }
.accounting-modal { width:min(720px,94vw); }
.accounting-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:16px 0; }
.accounting-period { background:#182a26; border:1px solid #566b5f; border-radius:5px; padding:12px 14px; }
.accounting-period h3 { margin:0 0 2px; }
.accounting-period dl { display:grid; grid-template-columns:1fr auto; gap:6px 14px; margin:10px 0 0; font-variant-numeric:tabular-nums; }
.accounting-period dd { margin:0; text-align:right; font-weight:700; }
.finance-report-head { align-items:center; gap:12px; margin-bottom:12px; }
.finance-report-head canvas { width:72px; height:72px; border:1px solid #a98d58; border-radius:4px; flex:none; }
.finance-totals { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:10px 0 14px; }
.finance-totals span { padding:7px 8px; background:#ead9ad; border:1px solid #c7ad72; font-size:11px; }
.finance-totals b { display:block; margin-top:3px; font-size:13px; font-variant-numeric:tabular-nums; }
.finance-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.finance-columns h4,.finance-activity h4 { margin:0 0 5px; color:#735022; }
.finance-columns table { width:100%; border-collapse:collapse; font-size:11px; }
.finance-columns td { padding:4px 2px; border-bottom:1px dotted #c7b184; }
.finance-columns td.num { text-align:right; font-variant-numeric:tabular-nums; }
.finance-activity { margin-top:12px; }
.finance-activity span { display:inline-block; margin:0 8px 5px 0; padding:4px 6px; background:#efe2bd; font-size:11px; }
.finance-activity i { font-style:normal; font-variant-numeric:tabular-nums; }
@media(max-width:760px) {
  .adjutant-notice canvas { width:56px; height:56px; }
  .adjutant-assign { align-items:flex-start; }
  .adjutant-assign canvas,.adjutant-empty { width:60px; height:60px; }
  .adjutant-modal-head canvas { width:88px; height:88px; }
  .adjutant-modal-speech { font-size:16px; padding:14px 16px; }
}
.interaction-modal { width: min(620px,94vw); border-top: 4px solid #c8ac73; }
.interaction-modal h2 { font-size: 25px; margin: 6px 0 20px; }
.interaction-copy { max-height: 52vh; overflow: auto; }
.interaction-copy p { white-space: pre-line; font-size: 17px; line-height: 1.95; background: #253b34; padding: 18px 22px; border-left: 3px solid #aa9568; margin: 0 0 12px; }
.interaction-modal .actions { margin-top: 22px; }
.interaction-modal .actions button { min-width: 112px; padding: 10px 24px; }
.notice-history { max-height: 55vh; overflow: auto; }
.notice-history article { padding: 14px 0; border-bottom: 1px solid #526052; }
.notice-history small { color: #c8b584; }
.notice-history p { white-space: pre-line; line-height: 1.8; margin: 4px 0; }
@media(max-width:1000px) { .port { grid-template-columns: 180px minmax(0,1fr); }.port>.status { display: none; }.facility { padding: 18px; } }
@media(max-width:760px) { #top { padding: 8px 12px; gap: 8px 12px; }#top .brand { display:none; }#top .fame { min-width: 48px; }.top-tools { width:100%; }.port { grid-template-columns: 1fr; grid-template-rows: 155px auto minmax(0,1fr); }.port-nav { max-height: 155px; }.port-id { display:none; }.places { display:flex; flex-wrap:wrap; }.place-group { flex:1 1 160px; }.facility { min-height:0; }.interaction-copy p { font-size:15px;padding:14px; } }
@media(max-width:760px) { .port-readiness { display:none; } }

/* ── 발견 관측 카드 · 길 위의 사건 (0.11) ── */
#sight { position: fixed; top: 70px; left: 50%; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; z-index: 40; display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; background: rgba(24, 20, 12, .94); border: 1px solid #c9a24a; border-radius: 8px; box-shadow: 0 10px 40px #000a; transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px); }
#sight.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#sight canvas { width: 160px; height: 72px; border: 2px solid #e8c070; border-radius: 3px; flex: none; }
#sight h3 { margin: 2px 0; color: #ffe39a; font-size: 16px; }
#sight p { margin: 0 0 8px; font-size: 12px; color: #d8cdb0; }
#sight .row { gap: 6px; }
canvas.silhouette { filter: brightness(.55) sepia(.7) blur(1px); }
.survey-thumb { width: 100%; aspect-ratio: 200 / 90; border-radius: 3px; border: 1px solid #6b5f35; }
.modal.road-event { width: min(620px, 100%); }
.road-art { width: 100%; aspect-ratio: 400 / 160; border: 3px solid #6b5f35; border-radius: 4px; margin: 6px 0 4px; display: block; }
.road-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.road-choices button { text-align: left; padding: 10px 14px; }
.road-choices button small { display: block; font-size: 11px; color: var(--bad); font-weight: 400; }
@media (max-width: 600px) { #sight { flex-direction: column; top: 60px; } #sight canvas { width: 100%; height: auto; aspect-ratio: 200 / 90; } }

/* ── 동료 능력 창 · 능력치 상한 (0.12) ── */
.sheet-body h4 small { font-size: 10px; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.sheet-stats i b.over { background: linear-gradient(90deg, var(--gold), #fff0a8); }
.post-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.post-badges .badge b { color: var(--gold); margin-left: 2px; }
.gold-badge { border-color: #b8892b; color: #ffe39a; }
.sheet-skills dd small { display: block; width: 100%; font-size: 11px; }
.mate-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.mate-strip button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; background: transparent; border-color: #45636d; font-size: 11px; }
.mate-strip canvas { width: 52px; height: 52px; border-radius: 3px; }
.sheet-id canvas[data-person] { width: 144px; height: auto; aspect-ratio: var(--portrait-ratio); border: 3px solid #6b5f35; border-radius: 4px; }
.sheet-note { font-size: 11px; margin: 14px 0 0; }
.book-quote { font-size: 13px; margin: 12px 0 6px; color: #e8dcc0; }

/* ── 선택 목록 색 · 선단 편성 (0.12.1) ── */
select option { background: #1f2b2a; color: #e7dfc9; }
select option:checked { background: #52604f; color: #fff0cc; }
select option:disabled { color: #7d8479; }
.section-title { margin: 18px 0 8px; font-size: 13px; letter-spacing: 2px; color: var(--gold-soft); font-weight: 400; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.section-title small { letter-spacing: 0; color: var(--muted); margin-left: 8px; font-size: 12px; }
.slot-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.slot { background: linear-gradient(135deg, #2b3632, #212c2c); border: 1px solid #4f5648; border-radius: 3px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.slot.empty { border-color: #8a4a3a; }
.slot-head { display: flex; justify-content: space-between; align-items: baseline; }
.slot-head span { color: var(--gold-soft); font-size: 13px; }
.slot-head small { color: var(--muted); font-size: 11px; }
.slot-body { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; min-height: 40px; }
.slot-body canvas { width: 38px; height: 38px; border: 1px solid #8a7a58; border-radius: 2px; }
.slot-body > span { display: flex; flex-direction: column; min-width: 0; }
.slot-body > span.solo { grid-column: 1 / 3; }
.slot-body b { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-body small { font-size: 11px; color: var(--muted); }
.slot-body strong { font-size: 24px; font-family: Georgia, serif; color: #d9d2bc; min-width: 34px; text-align: right; }
.slot-body strong.up { color: #f0cf7a; }
.slot select { width: 100%; font-size: 12px; }
.roster-wrap { overflow-x: auto; border: 1px solid #4f5648; border-radius: 3px; }
table.roster { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
table.roster th { font-weight: 400; font-size: 11px; color: var(--muted); text-align: center; padding: 6px; background: #1b2524; border-bottom: 1px solid #4f5648; white-space: nowrap; }
table.roster td { padding: 5px 6px; border-bottom: 1px solid #2f3a37; text-align: center; vertical-align: middle; }
table.roster tbody tr:nth-child(even) { background: #ffffff05; }
table.roster tbody tr:hover { background: #c8a36812; }
table.roster td.face { width: 44px; padding: 3px 4px 3px 8px; }
table.roster td.face canvas { width: 36px; height: 36px; display: block; border: 1px solid #6b634c; border-radius: 2px; }
table.roster td.who { text-align: left; white-space: nowrap; }
table.roster .mate-age { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 4px; }
table.roster .mate-age.old { color: #d9a46a; }
table.roster td.who b { display: block; color: var(--ink); }
table.roster td.who small { color: var(--muted); font-size: 11px; }
table.roster .star { color: var(--gold); }
table.roster td.duty { color: var(--gold-soft); font-size: 12px; white-space: nowrap; }
table.roster td.duty.idle { color: #7d8479; }
table.roster td.num { font-variant-numeric: tabular-nums; color: #cfd3c4; width: 44px; }
table.roster td.num.used { color: #1f1a10; background: linear-gradient(#e2c88e, #c9a86a); font-weight: 700; }
table.roster td.lvs { font-size: 12px; color: #aeb8ab; white-space: nowrap; }
table.roster td.act { white-space: nowrap; text-align: right; padding-right: 8px; }
table.roster td.act button + button { margin-left: 4px; }
.crew-foot { font-size: 12px; margin-top: 12px; }
.roster-sort { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; flex-wrap: wrap; }
.roster-sort .seg button { padding: 3px 9px; font-size: 12px; }
.perk-name { color: var(--gold); }
.mate-strip { max-height: 200px; overflow-y: auto; }

/* ── 게이지 · 일기토 요청 (0.13) ── */
.gauge { background: #1b2524; border: 1px solid #4f5648; border-radius: 3px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.gauge-head { display: flex; gap: 10px; align-items: baseline; font-size: 12px; color: var(--muted); }
.gauge-head b { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.gauge-cost { margin-left: auto; color: var(--gold-soft); font-variant-numeric: tabular-nums; font-size: 13px; }
.gauge-row { display: flex; gap: 8px; align-items: center; }
.gauge input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 14px; margin: 0; border-radius: 7px; border: 1px solid #5a5a48; background: linear-gradient(90deg, #b8945d 0, #e2c88e var(--p, 0%), #2c3836 var(--p, 0%)); cursor: pointer; }
.gauge input[type=range]:disabled { opacity: .4; cursor: not-allowed; }
.gauge input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #f3e2b8; border: 2px solid #6b5230; box-shadow: 0 1px 4px #0009; }
.gauge input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #f3e2b8; border: 2px solid #6b5230; }
.gauge-ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.trade-panel { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: start; background: linear-gradient(135deg, #2b3632, #212c2c); border: 1px solid #6b634c; border-radius: 3px; padding: 10px 12px; margin-bottom: 10px; }
.trade-good b { display: block; font-size: 18px; color: var(--gold-soft); font-family: Georgia, serif; }
.trade-good small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.trade-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.trade-gauges .gauge { margin: 0; }
table.goods tr.pickable { cursor: pointer; }
table.goods tr.pickable:hover td { background: #c8a36810; }
table.goods tr.sel td { background: #c8a36822; }
table.goods tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
@media (max-width: 700px) { .trade-panel { grid-template-columns: 1fr; } }
.pride { color: #e8a060; }
.challenge { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 8px; border: 1px solid #b8892b; border-radius: 3px; background: linear-gradient(90deg, #3a2c16, #2a2418); }
.challenge b { display: block; color: #ffe39a; }
.challenge small { color: #d8c49a; font-size: 11px; }

/* ── 출항 목적지 (0.13) ── */
.depart-card { gap: 8px; }
.depart-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.depart-row label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 240px; font-size: 12px; }
.depart-row select { font-size: 14px; padding: 7px 8px; }
.depart-row button { padding: 8px 18px; }

/* ── 게이지 항해 일수 (0.13.1) ── */
.gauge-days { display: inline-flex; align-items: baseline; gap: 3px; margin-left: auto; white-space: nowrap; }
.gauge-days b { font-size: 14px; color: #cfe0cf; font-variant-numeric: tabular-nums; }
.gauge-days small { font-size: 11px; color: var(--muted); }
.gauge-days + .gauge-cost { margin-left: 10px; }
.gauge-head { flex-wrap: wrap; }
.gauge-go { white-space: nowrap; flex: none; }
.gauge-ticks { gap: 8px; }
.gauge-note { flex: 1; text-align: center; }

/* ── 추천 배치 (0.13.2) ── */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); margin: 18px 0 8px; padding-bottom: 4px; }
.section-head .section-title { margin: 0; border: 0; padding: 0; }

/* ── 능력치 막대 3색: 기본 · 레벨 성장 · 보너스 (0.13.3) ── */
.sheet-stats div { grid-template-columns: 48px 1fr 46px; }
.sheet-stats i { display: flex; height: 8px; background: #1f2b2e; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px #33413f; }
.sheet-stats i b { display: block; height: 100%; flex: none; }
.sheet-stats i b.base { background: linear-gradient(#b9a676, #8f7e52); }
.sheet-stats i b.grow { background: linear-gradient(#8fd0a6, #4f9a72); }
.sheet-stats i b.bonus { background: linear-gradient(#fff0a8, #e0b24a); box-shadow: 0 0 6px #ffd76a88; }
.sheet-stats strong { display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; }
.sheet-stats strong .grow-num { font-size: 10px; color: #8fd0a6; font-weight: 400; }
.stat-legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); margin: -2px 0 8px; }
.stat-legend span { display: inline-flex; align-items: center; gap: 4px; }
.stat-legend i { display: inline-block; width: 14px; height: 7px; border-radius: 2px; }
.stat-legend i.base { background: #a8966a; } .stat-legend i.grow { background: #6fb88c; } .stat-legend i.bonus { background: #f0cf7a; }
.sheet-body .sheet-stats { margin-bottom: 18px; }

/* ── 게이지 숫자 입력 · 빠른 버튼 (0.13.4) ── */
.gauge-num { width: 64px; padding: 3px 6px; text-align: right; font-variant-numeric: tabular-nums; background: #10201f; border: 1px solid #5a5a48; border-radius: 3px; color: var(--ink); font-size: 13px; }
.gauge-num:focus { outline: 1px solid var(--gold); border-color: var(--gold); }
.gauge-num::-webkit-inner-spin-button { opacity: .6; }
.gauge-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.gauge-quick button { padding: 2px 8px; font-size: 11px; }
.gauge-quick button.ghost { background: transparent; color: var(--muted); }

/* ── 게이지 배치 정리: 머리줄 / 막대 / 조작줄 (0.13.5) ── */
.gauge { gap: 6px; min-width: 0; }
.gauge-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.gauge-head .gauge-label { white-space: nowrap; }
.gauge-right { margin-left: auto; display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.gauge-right .gauge-days { margin-left: 0; }
.gauge-right .gauge-cost { margin-left: 0; }
.gauge .gauge-range { display: block; width: 100%; min-width: 0; flex: none; box-sizing: border-box; }
.gauge-ticks { margin-top: -2px; }
.gauge-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.gauge-quick { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.gauge-quick button { padding: 3px 8px; font-size: 11px; line-height: 1.3; }
.gauge-act { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.gauge-act .gauge-num { width: 64px; }
.gauge-act .gauge-go { padding: 4px 14px; white-space: nowrap; }

/* ── 효율 배치: 카드는 폭을 채우고 높이는 내용만큼 (0.13.6) ── */
.cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.cards.even { align-items: stretch; }
.panel { background: linear-gradient(135deg, #2b3632, #212c2c); border: 1px solid #4f5648; border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.panel h3 { font-size: 15px; color: var(--gold-soft); margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.panel h3 small { font-size: 11px; color: var(--muted); font-weight: 400; }
.panel .gauge { margin: 0; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 10px; align-items: start; margin-bottom: 10px; }
.dock-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: #4f5648; border: 1px solid #4f5648; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.dock-status > div { background: #1d2726; padding: 8px 12px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; }
.dock-status span { color: var(--muted); font-size: 12px; }
.dock-status b { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.dock-status small { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.dock-status .meter, .dock-status button { grid-column: 1 / -1; }
.dock-status button { justify-self: start; margin-top: 2px; }
.depart-card { margin-top: 0; }
/* 카드 목록: 줄마다 폭을 나눠 채운다 (전체 폭 카드가 섞여도 다음 줄에 빈 칸이 남지 않게). 비교용 목록(.even)은 고른 격자 유지 */
.cards:not(.even) { display: flex; flex-wrap: wrap; align-items: flex-start; }
.cards:not(.even) > .card { flex: 1 1 280px; max-width: 100%; min-width: 0; }
.cards:not(.even) > .card.wide { flex-basis: 100%; }
/* 빈 칸 자리를 남기지 않는 격자 */
.dex { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.slot-board { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* 좁은 화면: 짧은 버튼 글자는 줄바꿈하지 않는다 */
.places .place-group button, .roster-sort .seg button, .seg button { white-space: nowrap; }
.roster-sort .seg { display: flex; flex-wrap: wrap; }
@media (max-width: 760px) {
  .place-group { flex: 0 0 auto; grid-template-columns: repeat(2, auto); }
  .places .place-group button { padding: 7px 10px; }
  .panel-grid { grid-template-columns: 1fr; }
  .dock-status { grid-template-columns: 1fr 1fr; }
  .gauge-head { font-size: 12px; }
}
.place-group { align-content: start; align-items: start; }

/* ── 항해일지 시세 가독성 (0.13.7) ── */
.book-page h4 small { font-size: 10px; letter-spacing: 0; color: #9a8060; margin-left: 6px; }
.rumor { display: grid; grid-template-columns: 62px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dotted #c3ad80; font-size: 13px; }
.rumor .tag { font-size: 11px; font-weight: 700; text-align: center; border-radius: 3px; padding: 2px 0; color: #fff6e0; }
.rumor.boom .tag { background: #3f7a4a; } .rumor.glut .tag { background: #9a3a22; }
.rumor small { color: #7a6040; font-size: 11px; white-space: nowrap; }
.trade-idea { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 42px; grid-template-rows: auto auto; gap: 1px 8px; align-items: center; padding: 5px 0; border-bottom: 1px dotted #c3ad80; font-size: 13px; }
.trade-idea .what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trade-idea .bar { height: 7px; background: #e0d0a8; border-radius: 4px; overflow: hidden; }
.trade-idea .bar i { display: block; height: 100%; } .trade-idea .bar i.up { background: #4f8a5a; } .trade-idea .bar i.down { background: #b0503a; }
.trade-idea > b { text-align: right; font-variant-numeric: tabular-nums; }
.trade-idea small { grid-column: 1 / -1; color: #8a7050; font-size: 11px; }
.book-page .entry.good-entry { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 1px 8px; align-items: center; padding: 6px 6px; }
.good-entry .name { display: flex; align-items: baseline; gap: 6px; }
.good-entry .name b { font-size: 14px; color: #3b2a19; }
.good-entry .name em { font-style: normal; font-size: 10px; color: #fff6e0; background: #7a5a2a; border-radius: 8px; padding: 0 6px; }
.good-entry .chip { font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.good-entry .chip.up { background: #d8e6c8; color: #2f5a2a; } .good-entry .chip.down { background: #efd0c0; color: #8a2f22; } .good-entry .chip.none { color: #9a8a6a; }
.book-page .entry.good-entry small.route { grid-column: 1 / -1; font-size: 11px; color: #7a6040; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.price-summary > div { background: #eadcb8; border: 1px solid #c3ad80; border-radius: 4px; padding: 6px 10px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 6px; }
.price-summary small { grid-column: 1 / -1; font-size: 10px; color: #8a5a2c; letter-spacing: 1px; }
.price-summary b { font-size: 14px; color: #3b2a19; }
.price-summary strong { font-size: 18px; color: #5a2f18; font-variant-numeric: tabular-nums; }
.price-summary em { grid-column: 1 / -1; font-style: normal; font-size: 10px; color: #8a7050; }
.price-summary em.old { color: #b0503a; }
.modal .book-page p.margin-line { margin: 6px 0 8px; font-size: 13px; }
.book-page .price-row { grid-template-columns: minmax(0, 1.6fr) 0.8fr 1.4fr 0.8fr; align-items: center; }
.book-page .price-row .place { display: flex; flex-direction: column; min-width: 0; }
.book-page .price-row .place b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-page .price-row .place small { font-size: 10px; color: #8a7050; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-page .price-row .sell { position: relative; display: flex; justify-content: flex-end; align-items: center; height: 18px; }
.book-page .price-row .sell i { position: absolute; left: 0; top: 5px; height: 8px; background: #d8c498; border-radius: 4px; }
.book-page .price-row .sell b { position: relative; }
.book-page .price-row .best-sell i { background: #9ac08a; } .book-page .price-row .best-sell b { color: #2f5a2a; }
.book-page .price-row .best-buy { color: #2f5a2a; font-weight: 700; }
.book-page .price-row.old { opacity: .55; }
.book-page .price-row.here { background: #e8d59e; }
/* 좁은 화면: 조작 안내는 명령 버튼 옆 단축키로 대신한다 (명령 막대와 겹치지 않게) */
@media (max-width: 1200px) { .hud-hint { display: none; } }
/* ── 모바일 바다·내륙 HUD 정리 (0.13.8) ── */
@media (max-width: 760px) {
  .hud { padding: 6px 8px; font-size: 11px; }
  .hud-nav { top: 8px; left: 8px; right: auto; width: calc(50% - 12px); gap: 6px; }
  .hud-nav .compass { width: 42px; height: 42px; flex: none; }
  .hud-nav h4 { font-size: 10px; }
  .hud-nav #h-wind, .hud-nav #h-pos, .hud-nav #l-pos { display: none; }
  .hud-fleet { top: 8px; right: 8px; left: auto; width: calc(50% - 12px); max-height: 38vh; overflow: hidden; }
  .hud-fleet .ship-line, .hud-fleet .chips, .hud-fleet > small { display: none; }
  /* 밀어야 나오는 막대는 해도·내 함대처럼 자주 쓰는 명령을 화면 밖에 숨긴다. 3줄까지 늘리고 다 보이게 한다. */
  .hud-bar { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; flex-wrap: wrap; justify-content: flex-start; padding: 6px; row-gap: 6px; }
  .hud-bar button { flex: none; white-space: nowrap; padding: 6px 10px; }
  .hud-bar kbd { display: none; }
  .dpad { left: 8px; bottom: 104px; grid-template-columns: repeat(3, 40px); }   /* 세 줄로 늘어난 명령 막대를 비켜선다 */
  .dpad button { width: 40px; height: 40px; }
      .challenge { flex-wrap: wrap; }
  .challenge button { white-space: nowrap; margin-left: auto; }
}

/* 항해·탐험 중 알림은 하단 조작부를 피해 상단 HUD 아래에 놓는다. */
@media (max-width: 760px) {
  #toasts.traveling {
    top: calc(var(--stage-top, 180px) + 68px);
    right: 8px;
    bottom: auto;
    width: min(330px, calc(100vw - 16px));
    max-height: none;
    overflow: visible;
  }
  #toasts.traveling .toast { display:none; padding:7px 10px; font-size:11px; }
  #toasts.traveling .toast:last-child { display:block; }
  #toasts.traveling .notice-heading { gap:8px; }
  #toasts.traveling .notice-heading small { font-size:9px; white-space:nowrap; }
  #toasts.traveling .toast p { margin-top:2px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ── 서고 · 책 읽기 (0.14) ── */
.lib-sub { font-family: "Batang", Georgia, serif; font-size: 17px; color: var(--gold-soft); margin: 18px 0 10px; }
.lib-sub small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.library { margin: 0 0 8px; }
.lib-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; margin-bottom: 10px; }
.lib-head h3 { font-family: "Batang", Georgia, serif; font-size: 18px; color: var(--gold-soft); margin: 0; }
.lib-head h3 small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.lib-head p { margin: 3px 0 0; font-size: 12px; max-width: 560px; }
.lib-langs { display: flex; flex-wrap: wrap; gap: 4px; }
.pips { font-style: normal; letter-spacing: -1px; color: #e0b24a; font-size: 10px; margin-left: 2px; white-space: nowrap; }
.badge.lingo { white-space: nowrap; }
.badge.lingo.off { opacity: .5; }
.bookcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; padding: 14px; border-radius: 6px;
  background: linear-gradient(90deg, #24150b, #3b2414 6%, #33200f 94%, #24150b); box-shadow: inset 0 0 0 3px #1a0f08, inset 0 0 0 5px #5a3a20, 0 8px 24px #0008; }
.case { display: flex; flex-direction: column; min-width: 0; }
.plaque { align-self: center; margin-bottom: 8px; padding: 2px 16px; font-size: 12px; letter-spacing: 2px; color: #2a1a0a; font-family: "Batang", Georgia, serif;
  background: linear-gradient(#ecd494, #b8913e); border-radius: 2px; box-shadow: inset 0 1px 0 #fff8, 0 2px 3px #0009; }
.shelf { flex: 1; display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; gap: 18px 3px; padding: 0 10px 18px; border-radius: 2px;
  background: repeating-linear-gradient(to bottom, transparent 0 196px, #9a6a3c 196px 198px, #6a4424 198px 208px, #3a2412 208px 214px), linear-gradient(#140b06, #22140b);
  box-shadow: inset 0 12px 20px #000b, inset 8px 0 12px #0007, inset -8px 0 12px #0007; }
.spine { position: relative; flex: none; width: var(--w); height: var(--h); margin: calc(196px - var(--h)) 0 0; padding: 14px 0 22px; border: 0; border-radius: 3px 3px 1px 1px; cursor: pointer;
  display: flex; justify-content: center; align-items: flex-start; overflow: hidden; color: #efdca4; transition: transform .15s ease, filter .15s;
  background: linear-gradient(90deg, #0007, #ffffff1a 16%, #0000 38%, #0000 72%, #0006), var(--c);
  box-shadow: inset 0 10px 0 -7px #d9b566, inset 0 -13px 0 -10px #d9b566, inset 0 -19px 0 -17px #d9b566aa, 1px 0 0 #000a, -1px 0 0 #ffffff12; }
.spine:hover, .spine:focus-visible { transform: translateY(-9px); filter: brightness(1.18); outline: none; }
.spine:focus-visible { box-shadow: inset 0 10px 0 -7px #d9b566, inset 0 -13px 0 -10px #d9b566, 0 0 0 2px var(--gold); }
.spine-title { writing-mode: vertical-rl; text-orientation: upright; font-family: "Batang", Georgia, serif; font-size: 12px; line-height: 1; letter-spacing: 1px; white-space: nowrap; overflow: hidden; max-height: 100%; text-shadow: 0 1px 0 #000; }
.spine-title .glyph { filter: none; opacity: 1; }
.spine.sealed .spine-title { opacity: .55; }
.spine.clue-new { padding-bottom: 42px; }
.spine .seal { position: absolute; left: 50%; bottom: 21px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d85a48, #8a1e14); color: #ffe2c0; font-size: 10px; line-height: 16px; text-align: center; box-shadow: 0 1px 2px #000a; }
.spine .ribbon-mark { position: absolute; top: 0; right: 3px; width: 6px; height: 24px; background: #b3261e; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.spine-lv { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-style: normal; font-size: 9px; color: #d9b566; }
.modal.reader-modal { width: min(980px, 100%); }
.book.reader .book-page { font-size: 15px; }
.reader-head { text-align: center; padding: 2px 0 12px; margin-bottom: 16px; border-bottom: 1px solid #c2ab7c; }
.reader-cat { font-size: 11px; letter-spacing: 3px; color: #8a5a2c; }
.book-page .reader-head h3 { font-size: 24px; margin: 6px 0 2px; }
.book-page .reader-head h3::after { margin: 8px auto 0; background: linear-gradient(90deg, transparent, #9a6b3a, transparent); width: 90px; }
.book-page .reader-author { font-style: italic; color: #6a5236; margin: 6px 0 10px; font-size: 13px; }
.reader-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: #6a5236; }
.reader-meta .pips { color: #8a3a22; font-size: 11px; }
.book-page .reader-state { font-size: 13px; margin: 8px 0; line-height: 1.6; }
.book-page .reader-state.ok { color: #3f6a3a; } .book-page .reader-state.warn { color: #9a3a22; }
.book-page .reader-state small { color: #6a5236; font-size: 12px; }
.reader-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.book-page .reader-acts button.primary { background: #8a3a22; border-color: #6a2a16; color: #f6ead0; }
.book-page .reader-acts button:disabled { opacity: .55; }
.book-page .reader-p { line-height: 1.95; margin: 0 0 12px; text-indent: 1em; word-break: keep-all; color: #3b2a19; }
.reader-p .glyph, .reader-author .glyph, .reader-head h3 .glyph { unicode-bidi: isolate; font-family: "Palatino Linotype", "Times New Roman", serif; color: #6a5238; opacity: .78; filter: blur(.35px); letter-spacing: .5px; }
.reader-end { text-align: center; color: #9a8060; letter-spacing: 4px; font-size: 12px; margin-top: 18px; }
.book-page .reader-copy { text-indent: 1em; line-height: 1.85; margin: 0 0 10px; white-space: normal; }
@media (max-width: 760px) {
  .bookcase { padding: 10px; }
  .shelf { padding: 0 6px 18px; }
  .book-page .reader-head h3 { font-size: 20px; }
}
.spine-title { white-space: normal; word-break: keep-all; height: 100%; letter-spacing: 0; font-size: 11.5px; line-height: 1.15; }
.r-books { background: #2f4a52; }
.ribbon.r-books:hover:not(:disabled) { background: #3f5a62; }

/* ── 성문 정비 (0.14.1) ── */
#gate-sum b.bad { color: var(--bad); }
.gate-goods .gauge + .gauge { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #4f5648; }
.gate-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.gate-start > span { font-size: 12px; flex: 1 1 260px; }

/* ── 내륙 성문·여관 (0.14.3) ── */
.routes .route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 10px; padding: 6px 0; border-bottom: 1px dotted #4f5648; }
.routes .route:last-child { border-bottom: 0; }
.routes .route small { grid-column: 1 / 3; }
.routes .route button { grid-row: 1 / 3; grid-column: 3; }
.routes .route .pill { justify-self: start; }
/* ── 항해일지 시세: 스크롤 쪽 (0.14.3) ── */
.book-page.scroll .page-body { overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #b39a6b transparent; }
.book-page.scroll .page-foot { display: none; }
@media (max-width: 820px) { .book-page.scroll { height: min(560px, calc(100vh - 120px)); } }

/* ── 책 삽화 (0.14.4) ── */
.book-page .plate { margin: 4px auto 16px; text-align: center; }
.book-page .plate canvas { display: block; width: 100%; height: auto; border: 5px solid #fff6e0; box-shadow: 0 0 0 1px #b8a174, 0 5px 14px #6a4a2238; image-rendering: pixelated; }
.book-page .plate.painting canvas { filter: sepia(.4) saturate(.8) contrast(1.02); }
.book-page .plate.engraving canvas { image-rendering: auto; }
.book-page .plate figcaption { margin-top: 6px; font-size: 12px; color: #7a6040; letter-spacing: 1px; font-style: italic; }
.book-page .plate figcaption .glyph { unicode-bidi: isolate; opacity: .75; }
/* ── 인물 열전 (0.14.5) ── */
.book-page .life { position: relative; margin: 4px 0 10px; padding-left: 12px; border-left: 2px solid #c2ab7c; }
.book-page .life-row { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 6px 0; }
.book-page .life-row::before { content: ""; position: absolute; left: -17px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #9a6b3a; box-shadow: 0 0 0 2px #efe2c0; }
.book-page .life-row.news::before { background: #8a3a22; }
.book-page .life-row b { font-size: 12px; color: #8a5a2c; padding-top: 2px; }
.book-page .life-row.news b { color: #8a3a22; }
.book-page .life-row p { margin: 0; line-height: 1.75; word-break: keep-all; }
@media (max-width: 520px) { .book-page .life-row { grid-template-columns: 1fr; gap: 2px; } }
/* 서책 삽화: 인쇄면은 종이와 한 덩어리로 보이게 한다. */
.book-page .plate canvas { border: 0; box-shadow: none; mix-blend-mode: multiply; image-rendering: auto; }
.book-page .plate.painting canvas { filter: none; }
.book-page .plate { padding: 9px 0 13px; border-top: 1px solid #9f82504d; border-bottom: 1px solid #9f82504d; }
.book-page .plate figcaption { font-family: Batang,Georgia,serif; font-size: 12px; line-height: 1.7; color: #644c2c; letter-spacing: .5px; }
/* 물품 도감과 조선소의 회화풍 상품 그림 */
.product-icon { width: 42px; height: 42px; display: inline-block; vertical-align: middle; margin-right: 10px; border: 1px solid #867452; border-radius: 4px; background: #263b36; image-rendering: auto; flex: none; }
.armory-list { display: grid; gap: 8px; }
.armory-row { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.armament-grade { width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid #b99a5e; border-radius: 5px; color: var(--gold-soft); background: #17272a; font: 700 24px/1 Georgia,serif; }
.armory-buy { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.trade-good .product-icon.large { float: left; width: 76px; height: 76px; margin: 0 15px 8px 0; }
.trade-good { min-height: 84px; }
.item-card>.product-icon.large { width: 144px; height: 144px; display: block; margin: 0 auto 16px; }
@media(max-width:600px){.product-icon{width:32px;height:32px;margin-right:6px}.trade-good .product-icon.large{width:60px;height:60px}.item-card>.product-icon.large{width:112px;height:112px}}
@media(max-width:600px){.armory-row{grid-template-columns:44px minmax(0,1fr)}.armament-grade{width:40px;height:40px;font-size:20px}.armory-buy{grid-column:1/-1;justify-content:flex-start}}

/* National identity and entry controls */
.nation-flag { width:30px; height:20px; display:inline-block; vertical-align:middle; margin-right:5px; image-rendering:pixelated; }
.nation-record-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; }
.nation-record-head h3 { margin:1px 0 3px; }
.nation-record-head p { margin:2px 0; }
.nation-flag-large { width:72px; height:48px; flex:none; margin:0; image-rendering:auto; border:1px solid #4d4738; box-shadow:0 2px 6px #0005; }
.nation-summary { font-weight:700; color:#4d3c2b; }
.chronicle-comment { border-left:3px double #907846; padding-left:10px; font-style:italic; }
.capital-tag { color:#efd17c; white-space:nowrap; font-size:.85em; }
.entry-panel { padding:16px; margin:0 0 18px; background:#23362f; border:1px solid #95875a; border-radius:6px; }
.entry-panel h3 { margin:0 0 10px; }
.entry-panel p { margin:8px 0; line-height:1.6; }
.entry-panel small { display:block; margin-top:12px; line-height:1.6; color:#d2cab5; }
.entry-panel .actions { display:flex; flex-wrap:wrap; gap:8px; }
.entry-status { padding:8px 0; color:#d5c796; }
.diplomacy-home { margin: 6px 0 10px; }
.diplomacy-table-wrap { max-height: min(62vh, 560px); max-height: min(62svh, 560px); overflow: auto; border: 1px solid #6c7157; border-radius: 5px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.diplomacy-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.diplomacy-table th { position: sticky; top: 0; z-index: 2; padding: 7px 9px; background: #192824; color: var(--muted); border-bottom: 1px solid #777256; text-align: left; white-space: nowrap; }
.diplomacy-table td { padding: 7px 9px; border-bottom: 1px solid #465047; background: #24332c; white-space: nowrap; vertical-align: middle; }
.diplomacy-table tbody tr:nth-child(even) td { background: #202f29; }
.diplomacy-table th:first-child,.diplomacy-table td:first-child { position: sticky; left: 0; z-index: 1; }
.diplomacy-table th:first-child { z-index: 3; }
.diplomacy-table td.nation { min-width: 170px; }
.diplomacy-table td small { display: block; color: var(--muted); font-size: 10px; line-height: 1.2; }
.diplomacy-table .nation-flag { width: 24px; height: 16px; }
.passage { display: inline-block; min-width: 78px; padding: 2px 6px; border: 1px solid #6c7157; border-radius: 10px; text-align: center; }
.passage.open { color: var(--good); border-color: #547b52; }
.passage.limited { color: var(--gold-soft); border-color: #8c7748; }
.passage.closed { color: var(--bad); border-color: #87534b; }
.diplomacy-note { margin: 8px 0 0; font-size: 11px; }
.places button:disabled { opacity:.42; cursor:not-allowed; }
.harbor-caption .nation-flag { width:24px; height:16px; }

/* ── 모바일 스크롤 수정 (0.15.1) ── */
/* 900px 이하에서 .port가 height:auto가 되며 #stage(overflow:hidden) 밖으로 잘리던 문제를 막는다. */
@media (max-width: 900px) {
  .port {
    height: 100%;
    min-height: 0;
    grid-template-rows: clamp(120px, 36vh, 210px) minmax(0, 1fr);
  }

  .harbor-panorama {
    min-height: 0;
  }
}

/* 모바일은 화면 전체를 늘리지 않고 시설 영역과 가로 메뉴만 독립적으로 스크롤한다. */
@media (max-width: 760px) {
  body {
    overflow: hidden;
  }

  #app {
    height: 100vh;
    height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
  }

  /* Safari의 주소창·하단 도구막대가 펼쳐진 가장 작은 가시 영역 안에 모달을 둔다. */
  #overlay {
    height: 100svh;
    padding: max(10px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .modal {
    padding: 16px;
  }

  .modal-dismiss {
    margin: -6px -6px 4px 10px;
  }

  .port {
    height: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 155px auto minmax(0, 1fr);
  }

  .port-nav {
    min-height: 0;
    overflow: hidden;
  }

  .places {
    flex-wrap: wrap;
    overflow-y: hidden;
  }

  .facility {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* 가로로 숨겨 두면 「저장·설정」을 찾지 못한다. 접어서 전부 보이게 한다. */
  .top-tools {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 5px;
  }
  /* 좁은 화면에서는 단축키 표시를 접는다. 누를 수 있는 곳이지 외울 곳이 아니다. */
  .top-tools kbd { display: none; }
  /* 선장·소지금도 라벨을 값 옆에 붙여 한 줄로 만든다. */
  #top > .chip:not(.fame) { flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; }
  #top > .chip:not(.fame) label { white-space: nowrap; }
  /* 레벨 넷을 한 줄에 눕힌다. 두 줄로 넘어가며 화면 위쪽을 먹던 자리를 돌려준다. */
  .fame-row { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; }
  .fame-row .chip.fame { min-width: 0; flex-direction: row; align-items: center; gap: 5px; flex-wrap: nowrap; }
  .fame-row .chip.fame label { font-size: 10px; }
  .fame-row .chip.fame strong { font-size: 13px; }
  .fame-row .chip.fame i { flex: 1; min-width: 14px; }

  .top-tools::-webkit-scrollbar {
    display: none;
  }

  .top-tools button {
    flex: none;
    white-space: nowrap;
  }
}

/* ─── 타이틀 간판 ─── */
.title-brand { text-align: center; }
.title-logo { display: block; width: min(100%, 560px); height: auto; margin: 0 auto 6px; }
.title-tagline { font-size: 14px; color: var(--gold-soft); letter-spacing: .2px; }
@media (max-width: 760px) { .title-logo { width: min(100%, 340px); } .title-tagline { font-size: 12px; line-height: 1.6; } }

/* ─── 선장 만들기 ─── */
.title-screen .big { font-size: 17px; padding: 12px 28px; }
.quick-title { text-align: center; font-size: 14px; color: #a9b8b0; margin: 18px 0 4px; font-weight: normal; }
.creator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1180px; margin: 0 auto; width: 100%; }
.cr-card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cr-card h3 { font-family: "Batang", Georgia, serif; color: var(--gold-soft); font-size: 18px; margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cr-card h4 { margin: 6px 0 0; font-size: 13px; color: #d9cba4; font-weight: normal; }
.cr-field { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #c4cfc8; }
.cr-field input { flex: 1; max-width: 220px; }
.cr-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cr-face-pages { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px; }
.cr-face-pages button { min-height:36px; padding:6px 12px; }
.cr-face-pages b { color:var(--gold2); font-variant-numeric:tabular-nums; }
.cr-face { padding: 2px; border: 2px solid transparent; background: #0f1b20; border-radius: 4px; }
.cr-face canvas { width: 100%; height: auto; aspect-ratio: var(--portrait-ratio); display: block; }
.cr-face.on { border-color: var(--gold); }
.cr-origins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cr-origin, .cr-type, .cr-perk { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); background: #13232a; }
.cr-origin small, .cr-type small, .cr-perk small { color: #9fb0a8; font-size: 11px; font-weight: normal; }
.cr-origin.on, .cr-type.on, .cr-perk.on, .chip-btn.on { border-color: var(--gold); background: #2b3326; }
.cr-origin .swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
.cr-note { font-size: 12px; margin: 0; }
.cr-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cr-stats span { display: flex; justify-content: space-between; background: #0f1b20; padding: 4px 8px; border-radius: 3px; font-size: 12px; }
.cr-stats small { color: #9fb0a8; }
.cr-left { font-size: 14px; font-family: inherit; color: #9fe0a8; }
.cr-left.bad, .cr-summary .bad { color: #f2a08c; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { padding: 5px 10px; font-size: 12px; border: 1px solid var(--line); background: #13232a; }
.chip-btn small { color: #9fb0a8; }
.cr-know { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cr-know div { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.cr-know span { flex: 1; }
.cr-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
button:disabled.cr-perk, button:disabled.chip-btn { opacity: .45; }
.cr-summary { max-width: 1180px; margin: 16px auto 0; width: 100%; display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; background: var(--panel); border: 1px solid var(--gold-soft); border-radius: 6px; padding: 14px 16px; }
.cr-summary .cr-me { width: 110px; height: auto; aspect-ratio: var(--portrait-ratio); border: 1px solid #5a6e6e; }
.cr-summary h3 { margin: 0 0 6px; font-family: "Batang", Georgia, serif; color: var(--gold-soft); }
.cr-summary p { margin: 2px 0; font-size: 13px; }
.cr-summary .actions { display: flex; gap: 8px; }
@media (max-width: 860px) {
  .creator-grid, .cr-summary { grid-template-columns: 1fr; }
  .cr-types, .cr-perks, .cr-origins { grid-template-columns: 1fr; }
  .cr-faces { grid-template-columns: repeat(4, 1fr); }
  .cr-summary .cr-me { width: 88px; height: auto; }
}

/* ─── 목록형 칸 (조선소·도구점·조합·만남) ─── */
.list { display: flex; flex-direction: column; gap: 4px; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
.list-row.done { opacity: .55; }
.list-row .grow { min-width: 0; }
.list-row b { font-size: 14px; }
.list-row .lr-sub { display: block; font-size: 11.5px; line-height: 1.45; }
.list-row > button, .list-row .lr-btns { flex-shrink: 0; }
.lr-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.list-row .product-icon { width: 34px; height: 34px; flex-shrink: 0; }
.ship-thumb { width: 132px; height: 64px; flex-shrink: 0; background: linear-gradient(#6f97a6, #c9d6c8 62%, #2a6682 62%); border-radius: 3px; image-rendering: auto; }
.yard-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 12px 0 18px; }
.yard-tabs button { min-height: 42px; padding: 8px 5px; }
.yard-tabs button.on { border-color: var(--gold); color: var(--gold-soft); background: #352f1d; }
.ship-crew-spec { color:var(--gold-soft); font-size:12px; line-height:1.7; margin:5px 0; }
.ship-detail-stage { width:100%; height:clamp(260px,48vh,520px); display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center,#315362,#101f28); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.ship-detail-stage canvas { width:100%; height:100%; display:block; touch-action:none; }
.ship-detail-mods { display:flex; flex-wrap:wrap; gap:8px; }
.ship-detail-mods .mod-chip { flex:1 1 170px; margin:0; }
.ship-detail-mods .mod-chip.on { border-color:var(--gold); background:#352f1d; }
.book-ship-thumb { display:block; width:100%; height:auto; max-height:240px; object-fit:contain; margin:8px auto; background:#1d3c4b; }
.ship-acts { display:flex; gap:4px; flex-wrap:wrap; }
.ship-thumb.yard-ship-thumb { width: 156px; height: 94px; background: linear-gradient(#244b58,#173747); }
.yard-fleet { margin: 10px 0 18px; }
.yard-fleet summary { cursor: pointer; padding: 8px 0; color: var(--gold-soft); }
.yard-fleet .list { margin-top: 8px; }
@media(max-width:600px) { .ship-thumb.yard-ship-thumb { width: 110px; height: 66px; } .yard-tabs { gap: 5px; } }
.card.meets { margin-bottom: 10px; }
.card.meets .list-row { background: transparent; }
.small-note { font-size: 12px; margin-top: 10px; }
.hold-row { margin: 6px 0 8px; }

/* ─── 출항 카드 (부두 맨 위) ─── */
.depart-card .depart-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.depart-card h3 { margin: 0; }
.depart-card .dest, .depart-card p { margin: 2px 0 0; font-size: 12.5px; }

/* ─── 교역 줄: 품목마다 바 하나 (왼쪽 매각 · 오른쪽 매입) ─── */
.trade-list { display: flex; flex-direction: column; gap: 4px; }
.trade-row { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; }
.trade-row.locked { opacity: .6; }
.tr-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.tr-head .product-icon { width: 28px; height: 28px; }
.tr-prices { margin-left: auto; font-size: 12px; color: #c4cfc8; }
.tr-ctrl { display: grid; grid-template-columns: auto 1fr auto minmax(120px, auto) auto; align-items: center; gap: 6px; margin-top: 4px; }
.tr-end { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.tr-range { width: 100%; accent-color: var(--gold-soft); background: linear-gradient(90deg, transparent calc(var(--z, 50%) - 1px), var(--gold-soft) calc(var(--z, 50%) - 1px), var(--gold-soft) calc(var(--z, 50%) + 1px), transparent calc(var(--z, 50%) + 1px)); }
.tr-q { font-size: 12px; white-space: nowrap; }
.tr-go.sell { background: #5a3a2e; border-color: #a86a4a; }

/* ─── 모바일: 칸 절약 ─── */
@media (max-width: 760px) {
  .facility > header p, .facility header p { display: none; }
  .facility > header { margin-bottom: 6px; }
  .facility .panel { padding: 10px; }
  .facility .panel h3 small { display: block; margin-top: 2px; }
  .facility { padding: 12px 10px 30px; }
  .panel-grid { grid-template-columns: 1fr; }
  .dock-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dock-status > div { padding: 8px; }
  .gauge-ticks { display: none; }
  .tr-prices { margin-left: 0; width: 100%; }
  .tr-ctrl { grid-template-columns: 1fr auto; }
  .tr-ctrl .tr-end { display: none; }
  .tr-ctrl .tr-range { grid-column: 1 / -1; }
  .ship-thumb { width: 96px; height: 46px; }
  .list-row { flex-wrap: wrap; padding: 6px 8px; gap: 8px; }
  .list-row .grow { flex: 1 1 60%; }
  .cards { gap: 8px; }
  .card { padding: 10px; }
}
@media (max-width: 760px) {
  .entry-panel { padding: 8px 10px; font-size: 12.5px; }
  .entry-panel h3, .entry-panel h2 { font-size: 15px; margin: 0; }
  .entry-panel p { margin: 2px 0; }
  .depart-card .depart-row > .grow { flex: 1 1 100%; }
}

/* 해도 장이 다섯이 되면서(인도양 서쪽, v52) 한 줄로 두면 폰에서 마지막 탭이 잘렸다. 좁으면 줄을 바꾼다. */
.seg.sheet-tabs { display: flex; flex-wrap: wrap; }
.sheet-tabs button { font-size: 12px; }
.sheet-only { font-size: 11.5px; }

/* 선장 만들기: 성향·포인트는 전체 폭, 능력은 촘촘한 격자 */
.cr-card.cr-wide { grid-column: 1 / -1; }
.cr-card h3 small { font-family: inherit; font-size: 11.5px; font-weight: normal; }
.cr-wide .cr-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cr-wide .cr-stats { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cr-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.cr-split > div { display: flex; flex-direction: column; gap: 6px; }
.cr-split .cr-know { grid-template-columns: 1fr; gap: 4px; }
.cr-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 5px; }
.cr-skill { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #13232a; border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
.cr-skill.on { border-color: var(--gold); background: #2b3326; }
.cr-skill .grow { min-width: 0; }
.cr-skill b { font-size: 13px; }
.cr-skill .pips { margin-left: 5px; font-size: 10px; letter-spacing: 1px; color: var(--gold-soft); }
.cr-skill small { display: block; font-size: 10.5px; line-height: 1.35; color: #9fb0a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-skill .pm { display: flex; gap: 3px; flex-shrink: 0; }
.cr-skill .pm button { padding: 2px 8px; min-width: 0; }
@media (max-width: 860px) {
  .cr-wide .cr-types { grid-template-columns: 1fr; }
  .cr-wide .cr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cr-split { grid-template-columns: 1fr; gap: 8px; }
  .cr-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-skill { flex-wrap: wrap; }
  .cr-skill small { white-space: normal; }
  .cr-skill .pm { margin-left: auto; }
  .cr-split .cr-know { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-split .cr-know div { flex-wrap: wrap; }
}

/* 국제정세 (0.17) */
.world-panel { margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--line); background: var(--panel-2); }
.world-panel h3 { margin: 0 0 8px; font-size: 15px; }
.world-panel h3 small { font-weight: 400; font-size: 12px; }
.world-news { padding: 7px 0 7px 10px; border-left: 3px solid var(--gold-soft); margin-bottom: 6px; }
.world-news.war, .world-news.blockade { border-left-color: var(--bad); }
.world-news.pirates, .world-news.tension { border-left-color: #c98f5a; }
.world-news.truce, .world-news.accord { border-left-color: var(--good); }
.world-news.past { opacity: .7; }
.world-news .wn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.world-news .nation-flag { width: 21px; height: 14px; }
.world-news p { margin: 3px 0 0; font-size: 13px; }
.world-panel details summary { cursor: pointer; font-size: 13px; color: var(--muted); margin-top: 6px; }
.world-line b { color: var(--bad); margin-right: 4px; }

/* 측량의: 나침반 아래 경위도 */
.compass-box { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.compass-box .coord { display: flex; flex-direction: column; align-items: center; font-size: 11px; line-height: 1.25; color: var(--gold-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.compass-box .coord[hidden] { display: none; }
.book-kv .coord-dd { font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 760px) { .compass-box .coord { font-size: 9px; } }


/* 가문 저택 (0.18) */
.house-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.house-steps span { border: 1px solid var(--line); padding: 4px 8px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; }
.house-steps span.on { color: var(--gold-soft); border-color: var(--gold); }
.house-steps span.next { border-style: dashed; color: var(--ink); }
.house-steps small { font-size: 10px; opacity: .8; }
.chips-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.list-row.locked { opacity: .5; }
.exhibits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.exhibit { margin: 0; padding: 6px; border: 1px solid #6b5f35; background: #1c1a12; }
.exhibit canvas { width: 100%; height: auto; display: block; }
.exhibit figcaption { font-size: 12px; margin: 4px 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 8px; }
.art-frame { margin: 0; padding: 8px; background: #1c1a12; border: 1px solid var(--line); }
.art-frame.hung { border-color: var(--gold); }
.art-frame .canvas-art { height: 96px; border: 6px solid #8a6a2a; outline: 1px solid #3a2a12; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--art) 70%, #fff) 0%, var(--art) 55%, color-mix(in srgb, var(--art) 60%, #000) 100%); display: flex; align-items: flex-end; justify-content: flex-end; }
.art-frame .canvas-art span { font-size: 10px; background: rgba(0,0,0,.45); color: #eee; padding: 1px 4px; }
.art-frame figcaption { margin: 6px 0 2px; display: flex; flex-direction: column; }
.art-frame figcaption small { color: var(--muted); font-size: 11px; }
.art-frame p { font-size: 12px; margin: 4px 0 6px; }


/* 알림 카드 통일 (0.18.2): 대화 결과도 같은 카드, 눌러서 닫기 */
#toasts .toast { cursor: pointer; }
#toasts .toast.result { border-left-color: var(--gold, #c8a368); }
.notice-heading small { font-size: 11px; color: #7a7466; font-weight: 400; white-space: nowrap; }
.toast p + p { margin-top: 6px; }
.tap-hint { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--muted); letter-spacing: .08em; animation: tap-blink 1.6s ease-in-out infinite; }
@keyframes tap-blink { 50% { opacity: .45; } }
.modal.tap-close { cursor: pointer; }

/* 첫 화면: 제목 · 한 줄 · 버튼만 */
.title-screen .lead { font-size: 16px; letter-spacing: .08em; }
.title-menu { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; position: relative; }
.title-menu button { min-width: min(320px, 80vw); }
.title-menu button.small { min-width: 0; margin-top: 4px; }
.save-slots { display: flex; flex-direction: column; gap: 8px; width: min(480px, 100%); }
.save-slot { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(16, 34, 43, .88); border: 1px solid var(--line); border-radius: 6px; text-align: left; }
.save-slot.empty { border-style: dashed; background: rgba(16, 34, 43, .62); }
.save-slot.bad { border-color: var(--bad); }
.slot-no { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold-soft); color: var(--gold-soft); display: grid; place-items: center; font-weight: 700; }
.slot-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.slot-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-info small { font-size: 12px; color: var(--muted); }
.slot-acts { flex: none; display: flex; flex-direction: column; gap: 5px; }
.title-menu .save-slot button, .title-menu .save-slot button.small { min-width: 0; margin: 0; }
@media (max-width: 520px) { .save-slot { flex-wrap: wrap; } .slot-acts { flex-direction: row; width: 100%; } .slot-acts button { flex: 1; } }
.title-update { position:relative; max-width:680px; margin:28px auto 0; padding:16px 18px; background:#10242dcc; border:1px solid #8c7449; border-radius:6px; box-shadow:0 12px 30px #07101588; text-align:left; }
.title-update-head { display:flex; justify-content:space-between; gap:16px; color:var(--gold-soft); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.title-update h3 { margin:8px 0 10px; color:#f1d595; font-family:"Batang", Georgia, serif; font-size:20px; }
.title-update ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 24px; margin:0; padding-left:19px; color:#d4ded8; font-size:13px; line-height:1.55; }
.title-update p { margin:12px 0 0; padding-top:10px; border-top:1px solid #63706b66; color:var(--muted); font-size:12px; }
.title-update-actions { margin-top:12px; text-align:right; }
.development-history { max-height:min(68svh,720px); overflow:auto; margin:18px 0 4px; padding-right:6px; }
.development-history details { border-top:1px solid var(--line); padding:0 4px; }
.development-history details:last-child { border-bottom:1px solid var(--line); }
.development-history summary { padding:13px 4px; color:var(--gold-soft); font-family:"Batang",Georgia,serif; font-size:16px; cursor:pointer; }
.development-history ul { margin:0 0 14px; padding-left:24px; color:#d4ded8; }
.development-history li { margin:6px 0; line-height:1.65; }
@media (max-width: 620px) {
  .title-update { padding:14px 15px; }
  .title-update ul { grid-template-columns:1fr; }
  .development-history { max-height:64svh; }
  .development-history summary { font-size:14px; }
  .development-history li { font-size:12px; }
}

/* 조선소 개조 효과 표시 (0.19) */
.mod-eff { color: var(--gold-soft); }
.mod-open { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.mod-chip { border: 1px dashed var(--line); border-radius: 4px; padding: 4px 8px; font-size: 12px; color: var(--muted); }
.mod-chip b { color: var(--ink); margin-right: 4px; }
.mod-chip small { display: block; color: var(--gold-soft); font-size: 11px; }


/* 함대 창 (2026-10-09 재설계): 함선 · 지휘·인사 · 짐·장비 탭. 그림은 진형 도해 하나, 배는 글과 막대로 읽는다. */
.fleet-title { align-items: center; gap: 8px; flex-wrap: wrap; }
.fleet-title h2 { margin: 0; }
.fleet-tabs { display: flex; width: 100%; margin: 10px 0 12px; }
.fleet-tabs button { flex: 1; padding: 8px 6px; font-size: 14px; }
.fleet-tabs .tab-warn { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; text-align: center; vertical-align: 1px; }
.fleet-panel[hidden] { display: none; }
.fleet-glance { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.fleet-glance > span { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 12px; background: #10222b; font-size: 12px; }
.fleet-glance label { color: var(--muted); font-size: 11px; }
.fleet-glance .warn { border-color: var(--bad); }
.fleet-glance .warn b { color: var(--bad); }
.fleet-panel .fleet-command { margin: 0; padding: 0; border: 0; background: none; }
.fleet-command .adjutant-assign .grow { min-width: 0; }
.fleet-command .adjutant-assign select { min-width: 0; width: 100%; }
.fleet-formation { display: flex; gap: 12px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 10px; margin: 10px 0; }
.formation-plan { width: 168px; height: 105px; flex: none; border-radius: 4px; image-rendering: pixelated; border: 1px solid var(--line); }
.fleet-formation .grow { min-width: 0; }
.fleet-formation h3 { margin: 0 0 6px; font-size: 15px; color: var(--gold-soft); }
.fleet-formation h3 small { margin-left: 4px; color: var(--muted); font-weight: normal; }
.fleet-formation p { margin: 6px 0 0; font-size: 12px; }
.fleet-ships { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px; align-items: start; }
.fleet-ship { background: var(--panel-2); border: 1px solid var(--line); border-left-width: 3px; border-radius: 6px; padding: 9px 12px; min-width: 0; }
.fleet-ship.flagship { border-left-color: var(--gold); }
.fleet-ship.no-captain { border-left-color: var(--bad); }
.fs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fs-head h3 { margin: 2px 0 3px; font-size: 15px; color: var(--gold-soft); min-width: 0; }
.fs-flag { margin-right: 5px; color: var(--gold); }
.fs-head .ship-acts { flex: none; display: flex; gap: 5px; }
.fs-head .ship-acts button { white-space: nowrap; }
.fs-spec { margin: 0; font-size: 12px; line-height: 1.55; }
.fs-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 7px 0 6px; }
.fs-bars > div { background: #10222b; border: 1px solid var(--line); border-radius: 4px; padding: 4px 7px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fs-bars label { font-size: 10px; color: var(--muted); }
.fs-bars b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-meta { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.fs-meta span { color: var(--gold-soft); }
@media (max-width: 760px) {
  .formation-plan { width: 112px; height: 70px; }
  .fleet-formation { gap: 10px; padding: 8px; }
  .fleet-ships { grid-template-columns: 1fr; }
  .fs-bars { gap: 4px; }
  .fs-bars > div { padding: 3px 5px; }
}

/* 조선소: 개조 칸 자체가 버튼 (0.20.1) */
button.mod-chip { display: block; text-align: left; cursor: pointer; font: inherit; color: var(--muted); background: #1c2426; border: 1px dashed var(--line); border-radius: 4px; padding: 6px 10px; }
button.mod-chip:hover:not(:disabled) { border-color: var(--gold); border-style: solid; background: #222d2f; }
button.mod-chip.on { border-color: var(--gold); border-style: solid; color: var(--ink); }
button.mod-chip:disabled { opacity: .5; cursor: default; }
/* 개조 칩: 이름 · 효과 · 비용과 공사 기간을 줄을 나눠 적는다. 한 줄에 붙으면 공사 기간이 효과 기간처럼 읽힌다. */
button.mod-chip b { display: block; }
button.mod-chip .mod-eff { display: block; margin-top: 2px; }
button.mod-chip .mod-eff::before { content: '효과 '; color: var(--muted); }
button.mod-chip .mod-eff:empty { display: none; }
button.mod-chip .mod-cost { display: block; color: var(--muted); margin-top: 1px; }
button.mod-chip .mod-cost.bad { color: var(--bad); }
button.mod-chip small { display: block; color: var(--gold-soft); font-size: 11px; margin-top: 2px; }
/* 가문: 그림 위에서 선택하고 위치를 정하는 저택 꾸미기. */
.estate-room { position:relative; width:100%; overflow:hidden; border:1px solid #92764d; border-radius:8px; isolation:isolate; }
.estate-backdrop,.estate-preview { display:block; width:100%; border-radius:8px; }
.estate-preview { height:auto; max-height:280px; object-fit:cover; }
.estate-preview-room { aspect-ratio:3/2; max-height:280px; background-repeat:no-repeat; background-size:100% 500%; background-color:#2a241b; }
.estate-selection { padding:10px; border:1px solid #92764d; border-radius:6px; }
.estate-catalog { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.estate-item { display:flex; flex-direction:column; align-items:start; padding:10px; border:1px solid #665b41; border-radius:7px; background:#201f19; }
.estate-item p { flex:1; font-size:12px; }
.estate-thumb,.estate-art { width:100%; aspect-ratio:1; background-repeat:no-repeat; }
.estate-thumb { max-width:180px; align-self:center; }
.estate-art { background-color:#28241d; }
.banquet-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.banquet-option { display:flex; flex-direction:column; gap:4px; padding:8px; border:1px solid #665b41; border-radius:7px; background:#201f19; font-size:12px; }
.banquet-option h4 { font-size:14px; }
.banquet-option small { font-size:11px; }
.banquet-option h4,.banquet-option p { margin:0; }
.banquet-option p { flex:1; }
.banquet-art { width:min(100%, 168px); height:112px; margin-inline:auto; border-radius:5px; background-repeat:no-repeat; background-color:#28241d; box-shadow:inset 0 0 0 1px #8b7148; }
@media(max-width:520px) { .estate-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .estate-item { padding:7px; } }
@media(max-width:900px) { .banquet-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .banquet-grid { grid-template-columns:1fr; } }
/* Boarding: tactics | battlefield | messages. Each sidebar owns its scrolling. */
.battle.rt.is-boarding { grid-template-columns: clamp(190px, 20vw, 270px) minmax(0, 1fr) clamp(170px, 18vw, 240px); grid-template-rows: minmax(0, 1fr); gap: 0; min-height: 0; }
.is-boarding .battle-panel { display: contents; }
.is-boarding .battle-field { grid-column: 2; grid-row: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; padding: 4px; }
.is-boarding .battle-canvas { grid-row: 2; }
.is-boarding .battle-canvas > canvas { image-rendering: auto; }
.is-boarding .b-top { position: static; transform: none; grid-row: 1; justify-self: center; flex-wrap: wrap; justify-content: center; white-space: normal; gap: 4px 8px; padding: 4px; max-width: 100%; }
.is-boarding .battle-orders, .is-boarding .battle-log { min-height: 0; min-width: 0; overflow: auto; overflow-wrap: anywhere; overscroll-behavior: contain; padding: 8px; background: #0f1f28; scrollbar-width: thin; }
.is-boarding .battle-orders { grid-column: 1; grid-row: 1; border-right: 1px solid var(--line); }
.is-boarding .battle-log { display: block; grid-column: 3; grid-row: 1; border-left: 1px solid var(--line); }
.is-boarding .battle-log h4 { position: sticky; top: -8px; background: #0f1f28; padding: 6px 0; }
.is-boarding .battle-log p { padding: 6px 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.is-boarding .battle-log time { font-variant-numeric: tabular-nums; color: var(--gold-soft); }
.is-boarding .naval-panel h4, .is-boarding .naval-panel h5 { margin: 8px 0 4px; }
.is-boarding .naval-panel p { margin: 5px 0; font-size: 12px; line-height: 1.4; }
.is-boarding .naval-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.is-boarding .naval-buttons button { flex: 1 1 70px; white-space: normal; min-height: 36px; padding: 6px; }
.is-boarding .naval-hero { font-size: 12px; padding: 3px 0; }
.is-boarding .naval-events { display: none; }
.is-boarding .battle-extra { margin-top: 8px; border-top: 1px solid var(--line); }
.is-boarding summary { cursor: pointer; padding: 8px 0; font-size: 12px; color: var(--gold-soft); }
.is-boarding .battle-fleet .foe { flex-wrap: wrap; gap: 4px; }
.is-boarding .battle-fleet .foe .meter { min-width: 35px; }
@media (max-width: 899px) {
  .battle.rt.is-boarding { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: max-content minmax(180px, 1fr); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .is-boarding .battle-field { grid-column: 1 / -1; grid-row: 1; display: block; }
  .is-boarding .b-top { width: fit-content; margin: 0 auto 4px; }
  .is-boarding .battle-canvas { height: auto; aspect-ratio: 3 / 2; }
  .is-boarding .battle-orders { grid-column: 1; grid-row: 2; border-top: 1px solid var(--line); }
  .is-boarding .battle-log { grid-column: 2; grid-row: 2; border-top: 1px solid var(--line); }
  .is-boarding .naval-buttons button, .is-boarding summary { min-height: 44px; }
}
@media (min-width: 700px) and (max-width: 899px) and (orientation: landscape) {
  .battle.rt.is-boarding { grid-template-columns: 170px minmax(0, 1fr) 155px; grid-template-rows: max-content; }
  .is-boarding .battle-field { grid-column: 2; grid-row: 1; }
  .is-boarding .battle-canvas { height: clamp(180px, 55vh, 320px); aspect-ratio: auto; }
  .is-boarding .battle-orders { grid-column: 1; grid-row: 1; }
  .is-boarding .battle-log { grid-column: 3; grid-row: 1; }
  .is-boarding .battle-orders, .is-boarding .battle-log { max-height: calc(clamp(180px, 55vh, 320px) + 240px); }
}
/* Fit the complete room to the facility viewport; room coordinates stay proportional. */
.estate-house { min-width:0; }
.estate-editor { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr); align-items:start; gap:10px; }
.estate-stage { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; width:100%; }
/* 방 양옆 빈자리. 방과 같은 높이까지만 쓰고 넘치면 안에서 스크롤한다. */
.estate-rail { min-width:0; max-height:var(--rail-height, var(--room-height,320px)); overflow-y:auto; overscroll-behavior:contain; padding:8px; border:1px solid #6d5a3c; border-radius:6px; background:#1d2622; font-size:12px; }
.estate-rail h4 { margin:2px 0 6px; font-size:13px; color:var(--gold); }
.estate-rail h4:not(:first-child) { margin-top:10px; padding-top:8px; border-top:1px solid #3c4740; }
.estate-rail p.muted { margin:4px 0; }
.rail-row { display:flex; align-items:center; gap:7px; padding:4px 0; border-bottom:1px solid #2c3630; }
.rail-row:last-of-type { border-bottom:0; }
.rail-row.off { opacity:.55; }
.rail-row .estate-thumb { width:30px; height:30px; flex:none; border-radius:3px; }
.rail-row b { font-weight:600; }
.rail-exhibit { margin:0 0 8px; }
.rail-exhibit canvas { width:100%; height:auto; border-radius:4px; }
.rail-exhibit figcaption { margin:3px 0 4px; }
/* 좁은 화면에서는 세로로 쌓고, 방은 높이가 아니라 가로폭을 따른다. */
@media(max-width:900px) { .estate-editor { grid-template-columns:1fr; } .estate-stage { width:100%; max-width:none; order:-1; } .estate-room { width:100%; } .estate-rail { width:100%; max-height:230px; } }
.estate-room { width:100%; aspect-ratio:3/2; flex:none; margin-inline:auto; }
.estate-room .estate-backdrop { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; user-select:none; background-repeat:no-repeat; background-size:100% 500%; background-color:#2a241b; }
.estate-selection { display:flex; flex-direction:column; gap:6px; padding:6px 8px; width:100%; min-height:38px; font-size:12px; }
/* 진열 칸: 벽의 액자와 바닥의 장식대. 칸을 누르고 아래 목록에서 놓을 물건을 고른다. */
.estate-slot { position:absolute; transform:translate(-50%,-50%); min-height:0; padding:0; background:none; border:0; cursor:pointer; }
.estate-slot .estate-piece { position:absolute; background-repeat:no-repeat; pointer-events:none; }
.estate-slot.art { width:8%; aspect-ratio:1; border:3px solid #b8903e; border-radius:1px; box-shadow:inset 0 0 0 2px #6b4c1c,0 0 0 1px #4a3413,0 3px 6px #0006; background:#2a2216cc; }
.estate-slot.art .estate-piece { inset:6%; }
.estate-slot.decor { width:11%; aspect-ratio:1; }
.estate-room[data-tier="1"] .estate-slot.art { width:14%; }
.estate-room[data-tier="1"] .estate-slot.decor { width:16%; }
.estate-room[data-tier="2"] .estate-slot.art { width:12%; }
.estate-room[data-tier="2"] .estate-slot.decor { width:14%; }
.estate-room[data-tier="3"] .estate-slot.art { width:10%; }
.estate-room[data-tier="3"] .estate-slot.decor { width:12%; }
.estate-room[data-tier="4"] .estate-slot.art { width:9%; }
.estate-room[data-tier="4"] .estate-slot.decor { width:11%; }
.estate-room[data-tier="5"] .estate-slot.art { width:8%; }
.estate-room[data-tier="5"] .estate-slot.decor { width:10%; }
.estate-slot.decor::after { content:''; position:absolute; left:6%; right:6%; bottom:-6%; height:22%; border-radius:4px 4px 2px 2px; background:linear-gradient(#e6dccb,#b9ab93 55%,#8c7e67); box-shadow:0 4px 5px #0006, inset 0 2px 0 #fff8; z-index:-1; }
.estate-slot.decor::before { content:''; position:absolute; left:0; right:0; bottom:-8%; height:6%; border-radius:2px; background:#7a6c56; box-shadow:0 2px 3px #0007; z-index:-1; }
.estate-slot.decor .estate-piece { left:6%; right:6%; top:0; bottom:12%; }
.estate-slot.decor:not(.empty)::before,.estate-slot.decor:not(.empty)::after { display:none; }
.estate-slot.decor:not(.empty) .estate-piece { inset:0; }
.estate-slot.art:not(.empty),.estate-slot.decor:not(.empty) { width:var(--estate-slot-width,11%); aspect-ratio:var(--estate-slot-ratio,1/1); }
.estate-slot.art:not(.empty) .estate-piece,.estate-slot.decor:not(.empty) .estate-piece { background-repeat:no-repeat; }
.estate-slot.empty.art { background-color:#2a221680; border-style:dashed; box-shadow:none; }
.estate-slot.empty.art .estate-piece::after,.estate-slot.empty.decor .estate-piece::after { content:'+'; position:absolute; inset:0; display:grid; place-items:center; color:#f4e4bdcc; font-size:clamp(12px,2.2vw,24px); text-shadow:0 1px 2px #000; }
.estate-slot:hover,.estate-slot:focus-visible { filter:brightness(1.15); z-index:2; outline:2px solid #f4d28a; outline-offset:2px; }
.estate-room .estate-slot.decor:hover:not(:disabled) { background:none; }
.estate-room .estate-slot.art:hover:not(:disabled) { background:#2a2216cc; border-color:#e0b85a; }
button.estate-thumb:hover:not(:disabled) { background-color:#3a3226; background-repeat:no-repeat; border-color:var(--gold-soft); }
.estate-slot.selected { z-index:3; outline:3px solid #fff2bc; outline-offset:3px; filter:drop-shadow(0 0 6px #f4d28a); }
.slot-hint { margin:2px 0; }
.slot-picker-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.slot-picks { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; max-height:220px; overflow-y:auto; }
.slot-pick { display:flex; align-items:center; gap:7px; padding:4px 6px; text-align:left; font-size:12px; }
.slot-pick .estate-thumb { width:36px; height:36px; flex:none; }
.slot-pick small { display:block; }
.slot-pick.on { border-color:var(--gold); opacity:1; }
button.estate-thumb { padding:0; min-height:0; border:1px solid #5f5238; background-color:#28241d; cursor:zoom-in; }
.art-frame-acts { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.estate-detail { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.estate-detail-img { width:min(420px,100%); aspect-ratio:1; flex:none; background-repeat:no-repeat; background-color:#1c1a12; border:1px solid #6d5a3c; border-radius:6px; }
.estate-detail-img.art { border:8px solid #8a6a2a; outline:1px solid #3a2a12; border-radius:2px; }
.estate-detail-text { flex:1 1 220px; min-width:0; }
.estate-detail-text p { line-height:1.6; }
.estate-detail-text h3 { margin:14px 0 5px; color:var(--gold); font-size:15px; }
.estate-detail-summary { margin-bottom:10px; }
.estate-detail-lore { line-height:1.75 !important; text-wrap:pretty; }

.estate-house .house-steps { margin:6px 0; }
/* 저택 장식 전용 화면 — 등급 미리보기 + 방 + 보유품/상점 패널 */
.estate-house-showcase { overflow:hidden; }
.estate-house-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:10px; }
.estate-house-head h3 { margin:0 0 3px; font-size:20px; }
.estate-house-head p { margin:0; color:var(--muted); }
.estate-prestige { flex:none; padding:7px 10px; border:1px solid #6d5a3c; border-radius:6px; background:#17221f; color:var(--gold-soft); }
.estate-tier-strip { display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)); gap:8px; margin:8px 0 12px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.estate-tier-card { min-width:150px; border:1px solid #4b5149; border-radius:7px; overflow:hidden; background:#17201d; opacity:.68; }
.estate-tier-card.owned { opacity:.88; border-color:#776640; }
.estate-tier-card.current { opacity:1; border-color:var(--gold); box-shadow:0 0 0 1px #b99241 inset,0 4px 18px #0005; }
.estate-tier-card.next { border-style:dashed; }
.estate-tier-preview { aspect-ratio:3/2; background-repeat:no-repeat; background-size:100% 500%; background-color:#2a241b; }
.estate-tier-copy { padding:7px 8px 8px; display:flex; flex-direction:column; gap:2px; }
.estate-tier-copy b { color:#f0dec0; font-size:12px; }
.estate-tier-copy small { color:#9eaaa3; line-height:1.35; min-height:32px; }
.estate-tier-copy span { color:var(--gold-soft); font-size:11px; }
.estate-showcase { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.9fr); gap:12px; align-items:start; }
.estate-room-pane,.estate-catalogue,.estate-discoveries { min-width:0; border:1px solid #5f5238; border-radius:7px; background:#121b19; }
.estate-room-pane { overflow:hidden; }
.estate-room-title,.estate-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-bottom:1px solid #3c4740; background:#17231f; }
.estate-room-title b,.estate-section-head h4 { margin:0; color:#ead8b4; }
.estate-room-title span,.estate-section-head small { color:var(--gold-soft); font-size:11px; }
.estate-room-pane .estate-room { border-radius:0; }
.estate-catalogue { padding:8px; }
.estate-filter-tabs { display:flex; flex-wrap:wrap; gap:5px; padding-bottom:8px; border-bottom:1px solid #344039; }
.estate-filter-tabs button { flex:0 0 auto; }
.estate-filter-tabs button.on { border-color:var(--gold); color:#fff2c4; background:#3a321f; }
.estate-selection-note { margin:7px 0; padding:6px 8px; border:1px solid #4a4d3f; border-radius:5px; background:#1d2622; font-size:12px; }
.estate-collection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:360px; overflow-y:auto; overscroll-behavior:contain; padding:6px 1px; }
.estate-collection-item { display:grid; grid-template-columns:58px minmax(0,1fr); gap:7px; align-items:center; padding:6px; border:1px solid #354039; border-radius:6px; background:#18211e; min-width:0; }
.estate-collection-item.installed { border-color:#8d7440; background:#211f17; }
.estate-collection-thumb { width:58px; height:58px; padding:0; min-height:0; border:1px solid #615337; border-radius:4px; background-color:#24211a; background-repeat:no-repeat; cursor:zoom-in; }
.estate-collection-thumb.art { border:3px solid #8a6a2a; }
.estate-collection-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.estate-collection-copy b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.estate-collection-copy small { color:#9ca8a1; font-size:11px; }
.estate-collection-actions { margin-top:3px; display:flex; flex-wrap:wrap; gap:4px; }
.estate-collection-actions button { width:100%; white-space:normal; line-height:1.25; }
.estate-shop { margin-top:8px; border-top:1px solid #344039; padding-top:5px; }
.estate-shop summary { cursor:pointer; color:var(--gold-soft); padding:5px 2px; }
.estate-discoveries { margin-top:12px; padding-bottom:8px; }
.estate-discovery-grid,.estate-stock-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; padding:8px; }
.estate-discovery-item { margin:0; padding:6px; border:1px solid #354039; border-radius:6px; background:#18211e; }
.estate-discovery-item canvas { width:100%; height:auto; border-radius:4px; }
.estate-discovery-item figcaption { margin:5px 0; font-size:12px; }
.estate-stock-card { display:flex; flex-direction:column; gap:3px; padding:7px; border:1px solid #354039; border-radius:5px; background:#18211e; }
.estate-stock-card small { color:#9ca8a1; }
.estate-upgrade-bar { margin-top:12px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:9px 10px; border:1px solid #5f5238; border-radius:7px; background:#17211e; }
.estate-upgrade-bar>div { display:flex; flex-direction:column; gap:2px; }
.estate-upgrade-bar small { color:#9ca8a1; }
.estate-upgrade-bar.complete { grid-template-columns:1fr auto; }
.estate-empty-state { display:grid; grid-template-columns:minmax(240px,480px) minmax(180px,1fr); gap:14px; align-items:center; padding:10px 0; }

@media(max-width:1000px){
  .estate-showcase { grid-template-columns:1fr; }
  .estate-collection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:300px; }
}
@media(max-width:700px){
  .estate-house-head { align-items:center; }
  .estate-house-head p { font-size:12px; }
  .estate-tier-strip { display:flex; scroll-snap-type:x proximity; margin-inline:-4px; padding-inline:4px; }
  .estate-tier-card { flex:0 0 72vw; max-width:280px; scroll-snap-align:start; }
  .estate-showcase { gap:8px; }
  .estate-room-title { padding:7px 8px; }
  .estate-room-title b { font-size:12px; }
  .estate-room-title span { font-size:10px; }
  .estate-selection { padding:7px; }
  .estate-filter-tabs { overflow-x:auto; flex-wrap:nowrap; padding-bottom:7px; scrollbar-width:thin; }
  .estate-filter-tabs button { min-height:34px; white-space:nowrap; }
  .estate-collection-grid { grid-template-columns:1fr 1fr; max-height:none; }
  .estate-collection-item { grid-template-columns:48px minmax(0,1fr); padding:5px; }
  .estate-collection-thumb { width:48px; height:48px; }
  .estate-upgrade-bar { grid-template-columns:1fr; }
  .estate-upgrade-bar>button { width:100%; }
  .estate-empty-state { grid-template-columns:1fr; }
  .estate-slot.empty { min-width:34px; min-height:34px; }
}
@media(max-width:430px){
  .estate-collection-grid { grid-template-columns:1fr; }
  .estate-prestige { font-size:11px; padding:6px 7px; }
  .estate-tier-card { flex-basis:78vw; }
}

/* 항만 상업권: 잠긴 시설 그룹과 세관 상자 */
.place-group.locked h3 { color: #8c7d6a; }
.note.customs b { color: var(--gold, #d8b86a); }

/* 배포 선물 — 슈뢰딩거의 고양이 */
.gift-modal { max-width: 480px; text-align: center; }
.gift-art { width: 100%; max-width: 280px; height: auto; margin: 4px auto 2px; display: block; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.gift-gain { text-align: left; margin: 14px 0 4px; padding: 12px 14px; border-left: 3px solid var(--gold-soft); background: rgba(255,255,255,.04); }
.gift-gain ul { margin: 6px 0 0; padding-left: 18px; }
.gift-gain li { margin: 3px 0; }

/* 뭍의 기록소 */
.cloud-modal { max-width: 520px; }
.cloud-form { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.cloud-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; }
.cloud-form input { padding: 9px 11px; font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.25); color: inherit; }
.cloud-form .small { font-size: .86em; font-weight: 400; line-height: 1.6; }
.cloud-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.cloud-pick > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.cloud-pick span { font-size: 1.3em; font-family: var(--serif, Georgia, serif); }
.cloud-pick small { color: var(--muted); margin-bottom: 6px; }
@media (max-width: 460px) { .cloud-pick { grid-template-columns: 1fr; } }

/* ── 손가락으로 누르는 화면 (0.19) ──
   마우스 커서는 한 점을 찍지만 손가락은 넓게 닿는다. 애플은 44px, 구글은 48dp를 권한다.
   이 게임은 항구 화면에 정보가 빽빽해서 44px까지 올리면 한 화면에 들어가던 것이 흩어진다.
   그래서 32px를 바닥으로 잡았다 — 권장에는 못 미치지만 22px보다 오탭이 확실히 줄고,
   상단 도구줄이 6px 자라는 것 말고는 배치가 그대로다(375×812 실측).
   마우스를 쓰는 화면(pointer: fine)에는 적용하지 않는다. */
@media (pointer: coarse) {
  button,
  select,
  input:not([type="checkbox"]):not([type="radio"]) { min-height: 38px; }
  button.small,
  .top-tools button,
  .gauge-quick button,
  .gauge-num { min-height: 32px; }
  /* 바다·내륙의 명령 막대와 방향키는 지도를 덮으므로 지금 크기를 지킨다(막대 32px · 방향키 40px). */
  .hud-bar button,
  .dpad button,
  .compass { min-height: 0; }
}

/* 내륙 도시: 항구처럼 일행 현황은 풍경 위에, 왼쪽은 시설만 */
.city-party { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(560px, 52vw); }
.city-party h4 small { margin-left: 8px; letter-spacing: 0; color: #b6c3b9; font-size: 11px; }
@media(max-width:760px) { .city-view .city-party { display: grid; left: 8px; right: 8px; bottom: 8px; width: auto; padding: 6px 8px; } .city-party .sp-head { display: none; } }
.cards:not(.even) > .card.hist { max-width: 760px; }   /* 인물이 한 명뿐이어도 화면 끝까지 늘어나지 않게 */

/* 해전: 접현전처럼 전장 양옆 빈자리에 지휘(왼쪽)와 함대·기록(오른쪽)을 붙인다. 좁은 화면은 예전처럼 아래로 쌓는다. */
.battle-keys { font-size: 12px; margin: 0; }
.naval-fold { margin-top: 8px; border-top: 1px solid var(--line); }
.naval-fold summary { cursor: pointer; padding: 8px 0; font-size: 12px; color: var(--gold-soft); }
.naval-fold .naval-panel { margin: 4px 0 0; padding: 8px; }
@media (min-width: 1151px) {
  .battle.rt:not(.is-boarding) { grid-template-columns: clamp(240px, 21vw, 310px) minmax(0, 1fr) clamp(220px, 19vw, 290px); grid-template-rows: auto minmax(0, 1fr); }
  .battle.rt:not(.is-boarding) .battle-field { grid-column: 2; grid-row: 1 / -1; min-width: 0; }
  .battle.rt:not(.is-boarding) .battle-panel { display: contents; }
  .battle.rt:not(.is-boarding) .battle-orders, .battle.rt:not(.is-boarding) .battle-fleet, .battle.rt:not(.is-boarding) .battle-log { min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 10px; background: #0f1f28; scrollbar-width: thin; }
  .battle.rt:not(.is-boarding) .battle-orders { grid-column: 1; grid-row: 1 / -1; border-right: 1px solid var(--line); }
  .battle.rt:not(.is-boarding) .battle-fleet { grid-column: 3; grid-row: 1; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .battle.rt:not(.is-boarding) .battle-log { display: block; grid-column: 3; grid-row: 2; border-left: 1px solid var(--line); }
  .battle.rt:not(.is-boarding) .battle-fleet .foe { flex-wrap: wrap; gap: 4px; }
  .battle.rt:not(.is-boarding) .battle-fleet .foe .meter { min-width: 35px; }
  .battle.rt:not(.is-boarding) .battle-fleet .seg button { padding: 4px 6px; }
}

/* 전투 상황판: 전장 아래 */
/* 접현전(.is-boarding)은 위 막대·갑판 그림의 자체 배치를 쓴다. 여기서 덮어쓰면 막대가 칸을 차지하고 갑판이 밀려난다. */
.battle.rt:not(.is-boarding) .battle-field { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
.battle.rt:not(.is-boarding) .battle-canvas { min-height: 0; }
.battle-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; height: clamp(120px, 22vh, 210px); font-size: 12px; }
.battle-board section { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; background: #0f1f28; border: 1px solid var(--line); border-radius: 4px; padding: 6px 9px; }
.battle-board h4 { position: sticky; top: -6px; margin: 0 0 4px; padding: 3px 0; background: #0f1f28; font-size: 11px; letter-spacing: 2px; color: var(--gold-soft); font-weight: 400; }
.battle-board p { margin: 0; padding: 3px 0; border-bottom: 1px solid #ffffff10; line-height: 1.4; }
.bb-now p { display: flex; justify-content: space-between; gap: 8px; }
.bb-now p > span:first-child { white-space: nowrap; }
.bb-now p.me > span:first-child { color: #a9d3b6; } .bb-now p.foe > span:first-child { color: #e6a08f; }
.battle-board p.gone { opacity: .45; }
.battle-board small { color: var(--muted); }
.bb-feed time { color: var(--gold-soft); font-variant-numeric: tabular-nums; margin-right: 4px; }
.bb-fire { color: #f0c27a; font-weight: 600; } .bb-melee { color: #f08a6a; }
.is-boarding .battle-board { display: none; }
/* 폰: 상황판이 전장을 밀어내지 않게 최근 포격 두 줄짜리 띠로 줄이고, 세로가 짧은 화면에서는 숨긴다 */
@media (max-width: 760px) {
  .battle-board { grid-template-columns: 1fr; height: auto; }
  .bb-now, .bb-feed h4 { display: none; }
  .bb-feed { padding: 3px 7px; overflow: hidden; }
  .bb-feed p { padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
  .bb-feed p:nth-of-type(n+3) { display: none; }
}
@media (max-height: 560px) and (pointer: coarse), (max-height: 480px) { .battle-board { display: none; } }

/* 배 이름 짓기 · 호위함 지침 */
.ship-rename { margin-left: 6px; padding: 0 6px; min-height: 0; font-size: 13px; line-height: 1.5; border: 1px solid transparent; background: transparent; color: var(--gold-soft); vertical-align: 2px; cursor: pointer; }
.ship-rename:hover:not(:disabled) { border-color: var(--line); background: #ffffff10; }
.ship-name-input { width: 100%; padding: 9px 11px; font-size: 16px; margin: 6px 0 4px; }
.fleet-directive { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.fleet-directive h5 { margin: 0 0 6px; font-size: 12px; color: var(--gold-soft); font-weight: 600; }
.fleet-directive h5 small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.escort-orders { display: grid; gap: 4px; margin-top: 6px; }
.escort-orders label { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; }
.escort-orders span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escort-orders select { max-width: 55%; padding: 3px 4px; font-size: 12px; }
/* 접현 명령 · 전투원 추가 투입 */
.boarding-orders button.on { background: var(--gold); color: #1d1a10; }
.guide-check.all-hands { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 2px 8px; padding: 7px 9px; font-size: 12px; }
.guide-check.all-hands small { grid-column: 2; font-weight: 400; line-height: 1.4; opacity: .85; }

/* 멀티창: 전장 오른쪽 아래 빈 곳에 다른 전투를 작게 띄운다 */
.battle-pips { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; }
.battle.rt:not(.is-boarding) .battle-pips { bottom: calc(clamp(120px, 22vh, 210px) + 20px); }
/* 접현 화면: 아래쪽 병력 현황을 가리지 않게 머리글 바로 아래 오른쪽에 붙인다 */
.is-boarding .battle-pips { position: static; grid-row: 4; flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 4px 0 0; pointer-events: auto; }
.is-boarding .pip { width: auto; box-shadow: none; }.is-boarding .pip canvas { display: none; }
.boarding-status { display: grid; grid-row: 3; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 4px; max-height: 132px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; font-size: 12px; }
.boarding-status[hidden] { display: none; }
.boarding-ship { display: block; min-width: 0; padding: 4px 6px; border: 1px solid #3e7181; border-radius: 4px; background: #102c38; font-variant-numeric: tabular-nums; line-height: 1.2; cursor: default; }
.boarding-ship.foe { border-color: #936c4a; background: #30251e; }
.boarding-ship b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #85d9ee; font-size: 12px; }.boarding-ship.foe b { color: #f0b57e; }
.boarding-ship span { display: block; margin: 1px 0; white-space: nowrap; }.boarding-ship small { display: block; font-size: 11px; color: #b6c7c7; }
.boarding-ship.taken { border-color: #b59b53; }.boarding-ship.taken small { color: #e9ca80; }
.boarding-morale { height: 3px; margin: 2px 0; background: #081d25; overflow: hidden; border-radius: 2px; }.boarding-morale i { display: block; height: 100%; background: #69c4da; }.foe .boarding-morale i { background: #e3a16a; }
@media (min-width: 700px) and (max-width: 899px) and (orientation: landscape) { .boarding-status { grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); font-size: 11px; }.boarding-ship b { font-size: 11px; }.boarding-ship small { font-size: 10px; } }
.pip { pointer-events: auto; display: block; width: clamp(170px, 16vw, 250px); padding: 0; border: 1px solid #8a7a55; border-radius: 4px; background: #0d1f27ee; box-shadow: 0 6px 18px #000a; overflow: hidden; cursor: pointer; text-align: left; }
.pip canvas { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; }
.pip span { display: block; padding: 4px 7px; font-size: 11px; color: #e8dcbc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pip small { color: var(--gold-soft); margin-left: 4px; }
.pip:hover { border-color: var(--gold); }
@media (max-width: 760px) {
  .battle-pips, .is-boarding .battle-pips { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 4px 0 0; pointer-events: auto; }
  .pip { width: auto; }
  .pip canvas { display: none; }
}

/* 실존 인물 첫 인사 창 */
.greet-modal { display: flex; gap: 18px; align-items: flex-start; margin: 6px 0 4px; }
.greet-portrait { width: 144px; height: auto; flex: none; border: 1px solid #8a7a55; border-radius: 4px; background: #172b28; }
.greet-modal h2 { margin: 0 0 2px; }
.greet-modal blockquote { margin: 12px 0 8px; padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(128,128,128,.1); font-size: 16px; line-height: 1.7; }
.greet-notes { font-size: 12px; line-height: 1.6; margin: 6px 0 0; }
@media (max-width: 600px) { .greet-modal { flex-direction: column; align-items: center; text-align: center; } .greet-portrait { width: 120px; } }

/* 연말 결산: 상반기·하반기·연간 비교 */
.finance-compare table { width: 100%; border-collapse: collapse; font-size: 13px; }
.finance-compare th, .finance-compare td { padding: 5px 6px; border-bottom: 1px solid rgba(90,70,40,.25); text-align: left; }
.finance-compare td.num, .finance-compare th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.finance-compare tr.annual td { font-weight: 700; border-top: 2px solid rgba(90,70,40,.45); }
.accounting-period.annual { outline: 2px solid var(--gold); }

/* 해도 판매 */
.chart-rows { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 3px; }
.chart-rows li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.chart-rows li .goldtxt { margin-left: auto; font-variant-numeric: tabular-nums; }

/* 여행기 출판 */
.travelogue-rows li { flex-wrap: wrap; align-items: center; }
.travelogue-modal .tl-field { display: grid; gap: 4px; margin: 10px 0; font-size: 13px; color: var(--muted); }
.travelogue-modal .tl-field > span { display: flex; justify-content: space-between; gap: 8px; }
.travelogue-modal input, .travelogue-modal textarea { width: 100%; padding: 9px 11px; font-size: 16px; color: var(--ink); }
.travelogue-modal textarea { resize: vertical; min-height: 120px; line-height: 1.6; font-family: "Batang", Georgia, serif; }
.tl-sign-wrap { position: relative; }
.tl-sign { display: block; width: 100%; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; border-radius: 6px; border: 1px solid #8a7445;
  background: linear-gradient(transparent 72%, #a0845066 72%, #a0845066 calc(72% + 1px), transparent calc(72% + 1px)), #efe2c0; }
.tl-sign-clear { position: absolute; top: 6px; right: 6px; }
.tl-book .tl-imprint { font-size: 11px; letter-spacing: 2px; color: #7a6440; margin: 0 0 4px; }
.tl-book .tl-title { font-size: 22px; margin: 0 0 2px; }
.tl-book .tl-preface { white-space: pre-line; }
.tl-signature { display: flex; flex-direction: column; align-items: flex-end; margin: 8px 0 14px; }
.tl-signature small { font-size: 11px; color: #7a6440; border-top: 1px solid #a0845088; padding-top: 2px; min-width: 120px; text-align: right; }
.tl-sign-svg { width: min(220px, 70%); aspect-ratio: 3 / 1; }
.tl-sign-svg polyline { fill: none; stroke: #2b2118; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tl-sign-svg circle { fill: #2b2118; }
.travelogue-rows .tl-parts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; color: var(--muted); }
.travelogue-rows .tl-parts .done { color: var(--gold-soft); }

/* 가문 금고 */
.vault-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 8px; font-size: 14px; }
.vault-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.vault-row input { flex: 1 1 140px; min-width: 0; padding: 8px 10px; font-size: 16px; }
.remit-box { margin: 8px 0; padding: 10px 12px; border: 1px solid #6b5f35; border-radius: 6px; background: #0000001f; }
.remit-box p { margin: 4px 0; font-size: 13px; }

/* 이야기의 끝: 가족묘 비석 */
.ending-screen .title-update { margin-top: 8vh; text-align: center; }
.epitaph { margin: 12px auto 16px; max-width: 320px; padding: 22px 16px 18px; border: 1px solid #8c7449; border-radius: 120px 120px 6px 6px; background: linear-gradient(#3a4448, #262e31); }
.epitaph h2 { margin: 6px 0; }
.lineage { list-style: none; padding: 0; text-align: left; }
/* 재해 복구 헌신: 15일마다 고르는 일 세 가지 */
.relief-options { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; margin:14px 0; text-align:left; }
.relief-options .card { margin:0; }
.relief-options .card h3 { margin:0 0 6px; font-size:15px; }
.relief-options .card p { margin:0 0 6px; font-size:13px; }

/* 초상 원화 전체를 표시한다. 모자 위 여백을 확대·크롭으로 없애지 않는다. */
.ruler-portraits { display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; }
.ruler-portraits figure { margin:0; width:80px; }
.ruler-portrait { display:block; width:80px; height:auto; aspect-ratio:3 / 4; object-fit:contain; background:#172b28; border-radius:3px; }
.ruler-portraits figcaption { font-size:11px; line-height:1.4; text-align:center; margin-top:4px; }
.ruler-pending { display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--gold-soft); }
.ruler-pending span { font-size:28px; }
.ruler-pending small { margin-top:8px; font-size:10px; }
.ruler-emblem { width:80px; height:80px; object-fit:contain; flex-shrink:0; }
.ruler-card .person { flex-wrap:wrap; align-items:flex-start; }
/* 가문의 도트 추모 정원: 비석은 키보드로도 읽을 수 있는 버튼이다. */
.family-tabs{display:flex;gap:8px;margin:12px 0 18px;flex-wrap:wrap}
.farewell-prose p{line-height:1.9;margin:16px 0}.memorial-summary{line-height:1.8;padding:14px;border-left:3px solid #aa956b;background:#252c28}
.cemetery-layout{display:grid;grid-template-columns:minmax(320px,1.6fr) minmax(260px,1fr);gap:16px;align-items:start}
.cemetery-ground{position:relative;min-height:420px;border:4px solid #726b52;box-shadow:0 0 0 2px #222c26;overflow:hidden;background:#334b3b}
.cemetery-landscape{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.cemetery-stones{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 12px;padding:55px 14px 38px;min-height:420px;align-content:start}
.grave-stone{display:flex;flex-direction:column;align-items:center;justify-content:start;min-width:0;background:transparent;color:#e0ddc6;border:2px solid transparent;padding:6px 2px;box-shadow:none;border-radius:0;font-size:12px;text-shadow:1px 1px #17271c}
.grave-stone svg{width:48px;height:66px;image-rendering:pixelated;filter:drop-shadow(4px 4px #22392b)}
.grave-stone span{margin-top:7px;overflow-wrap:anywhere}.grave-stone small{font-size:10px;color:#c1c9ac}
.grave-stone:hover,.grave-stone.selected{background:#e2d6a017;border-color:#c1b376}.grave-stone:focus-visible{outline:3px solid #eee2a8;outline-offset:3px}
.grave-detail{min-height:260px}.grave-detail h3{margin-bottom:18px}.cemetery-empty{grid-column:1/-1;color:#e4e0c8;text-align:center;line-height:2;margin:80px 8px}
@media(max-width:760px){.cemetery-layout{grid-template-columns:1fr}.cemetery-stones{grid-template-columns:repeat(3,minmax(0,1fr))}.cemetery-ground{min-height:360px}.grave-stone svg{width:44px;height:61px}}

/* Shared historical portraits in audience and almanac. */
.greet-modal .ruler-portraits figure{width:192px}.greet-modal .ruler-portrait{width:192px}.book-page .ruler-portraits figure,.book-page .ruler-portrait{width:142px}
.cemetery-ground{background:#334b3b url("assets/memorial-garden.png") center/100% 100% no-repeat;border:1px solid #7b795b;border-radius:5px;min-height:520px;box-shadow:0 5px 22px #07150b70}
.cemetery-stones{padding:100px 11% 85px;min-height:520px;gap:28px 26px}.grave-stone{border:0;text-shadow:0 2px 3px #071807,1px 0 #071807,-1px 0 #071807}.grave-stone.selected,.grave-stone:hover{background:#eddc9a18;box-shadow:inset 0 -2px #e8cf8b}.grave-stone svg{filter:drop-shadow(5px 8px 2px #15270d90)}
.memorial-person{display:flex;gap:16px;align-items:center;margin-bottom:18px}.memorial-face.character-portrait{width:90px;height:120px;object-fit:cover;flex-shrink:0;border:1px solid #ac9870}.memorial-person h3{margin:0}.memorial-person small{display:block;margin-top:7px}.grave-detail .book-kv dt{color:#c5b48f}
@media(max-width:760px){.cemetery-stones{grid-template-columns:repeat(2,minmax(0,1fr));padding:95px 12% 80px;gap:26px 18%}.greet-modal .ruler-portraits figure,.greet-modal .ruler-portrait{width:128px}}

.nation-symbols{display:flex;flex-direction:column;gap:14px;align-items:flex-start;flex-shrink:0}.nation-emblem{width:90px;max-height:120px;object-fit:contain}.person-age{font-size:.78em;font-weight:normal;color:#c9c0a5;white-space:nowrap;margin-left:5px}

.nation-record-head>div{min-width:0}.nation-record-head .nation-emblem{flex:0 0 72px;width:72px}.nation-rulers{margin:18px 0 20px}.nation-rulers .ruler-portraits{margin-top:12px;width:100%;display:flex;flex-wrap:wrap;gap:12px}.nation-rulers .ruler-portraits figure{flex:0 0 min(142px,calc((100% - 12px)/2))}.nation-rulers .ruler-portrait{width:100%;max-width:142px}.ruler-names{word-break:keep-all}.person-intro{line-height:1.85}
.sheet{grid-template-columns:minmax(210px,240px) minmax(0,1fr);gap:20px}.sheet-id h2,.person h3,.book-page h3{word-break:keep-all;overflow-wrap:normal;text-wrap:balance}.sheet-id h2{font-size:24px;line-height:1.4}.sheet-id .person-age{display:inline-block}.rank-link{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}.rank-link:hover{color:var(--gold)}
@media(max-width:640px){.sheet{grid-template-columns:1fr}.sheet-id h2{font-size:23px}}
/* Local album portraits and cultural childhood assets. */
.album-upload{display:block;margin:12px 0;color:var(--gold-soft)}
.album-upload input{display:block;max-width:100%;margin-top:8px}
.family-heir-portrait{width:80px;height:auto;aspect-ratio:3/4;object-fit:contain;flex-shrink:0;border:1px solid var(--gold-soft)}
.heir-face-preview{width:120px;margin:auto}.heir-face-preview img{width:100%;aspect-ratio:3/4;object-fit:contain}
.heir-face-modal .cr-faces{max-height:45vh;overflow:auto}
/* 후계자 수업: 갈래 고르기와 결과 창 */
.heir-lesson-modal{max-width:680px}
.lesson-head{display:flex;gap:14px;align-items:flex-start}
.lesson-head h2{margin:0 0 4px}
.lesson-portrait{width:104px;aspect-ratio:3/4;object-fit:cover;flex-shrink:0;border:1px solid var(--gold-soft)}
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:12px}
.lesson-card{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--line);border-top:3px solid var(--gold-soft)}
.lesson-card.ln-trade{border-top-color:var(--trade)}.lesson-card.ln-sea{border-top-color:var(--adv)}.lesson-card.ln-battle{border-top-color:var(--battle)}
.lesson-card h3{margin:0}.lesson-card p{margin:0}.lesson-card button{margin-top:auto}
.lesson-meta{font-size:13px}.lesson-note{font-size:12px;margin-top:10px}
.lesson-grade{display:inline-block;margin-top:4px;padding:2px 12px;border:1px solid var(--gold-soft);font-weight:700;letter-spacing:.08em}
.lesson-grade.g0{color:var(--bad);border-color:var(--bad)}.lesson-grade.g2{color:var(--good);border-color:var(--good)}
.lesson-scene{font-size:15px;line-height:1.7;margin:14px 0 8px}
.lesson-gain{font-weight:600}
.lesson-list{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 0}
.lesson-chip{font-size:12px;padding:1px 8px;border:1px solid var(--line);border-left:3px solid var(--gold-soft)}
.lesson-tag{align-self:flex-start;font-size:11px;padding:1px 7px;border:1px solid var(--gold-soft);color:var(--gold-soft)}.lesson-tag.now{border-color:var(--good);color:var(--good)}
/* 투자 소문: 배우자의 제안과 결판 */
.venture-tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:10px 0;text-align:center;font-size:12px}
.venture-tiers span{padding:4px 2px;border:1px solid var(--line)}.venture-tiers b{display:block;font-size:14px}
.venture-tiers .on{border-color:var(--gold-soft);color:var(--gold-soft)}
.venture-amount{margin:12px 0 4px}.venture-amount input{width:100%}
.venture-amount-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.venture-list{margin:6px 0 0;padding-left:18px;font-size:12px}
.kin-list{display:grid;gap:10px}.kin-sheet-face{width:144px;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--gold-soft)}.slot-kin-face{width:36px;height:48px;object-fit:cover;border:1px solid var(--gold-soft);flex-shrink:0}.kin-row{display:flex;gap:10px;align-items:flex-start}.kin-row img{width:64px;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--gold-soft);flex-shrink:0}.kin-row p{margin:2px 0 6px}
.cer-chips{display:flex;flex-wrap:wrap;gap:6px}.cer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 14px}
.cer-row{display:flex;align-items:center;gap:6px}.cer-row span{flex:1}.cer-row b{min-width:2.4em;text-align:center;color:var(--gold-soft)}
.cer-free{margin:10px 0 0}.cer-left{margin:12px 0 4px;font-size:15px}.ceremony-modal h3.lib-sub{margin:14px 0 6px}
.lesson-chip.ln-trade{border-left-color:var(--trade)}.lesson-chip.ln-sea{border-left-color:var(--adv)}.lesson-chip.ln-battle{border-left-color:var(--battle)}
@media (max-width:560px){.lesson-head{flex-direction:column;align-items:center;text-align:center}.lesson-portrait{width:88px}}
.sheet-id img.character-portrait{width:144px;height:auto;aspect-ratio:3/4;object-fit:contain;border:3px solid #6b5f35;border-radius:4px;box-shadow:0 0 0 1px #000,0 8px 24px #0008}

/* Estate v3: furnishings baked into the room; only collections are interactive. */
.estate-bay.object.occupied { background:transparent; border:0; }
.estate-bay.object .estate-piece { background-repeat:no-repeat; background-position:center bottom!important; filter:drop-shadow(0 2px 1px #0005); }
.estate-object-image,.estate-detail-img.object,.estate-collection-thumb.object { background-color:transparent; background-size:contain!important; background-repeat:no-repeat; }
.estate-detail-img.object { aspect-ratio:1/1; border:0; box-shadow:none; }
.estate-furnishing { padding:16px; margin-block:12px; border:1px solid #76613e; border-radius:8px; background:#18231f; }
.estate-furnishing h3 { margin:4px 0 8px; color:#eed6a8; }
.estate-furnishing p { color:#bac4b9; line-height:1.6; }
.estate-progress { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; list-style:none; padding:0; }
.estate-progress li { padding:8px; border-top:3px solid #37433b; color:#809086; }
.estate-progress li.done { border-color:#b39a63; color:#d8c6a3; }
.estate-progress li.current { background:#393325; border-radius:4px; }
.estate-progress b,.estate-progress span { display:block; }
.estate-progress span { margin-top:4px; font-size:12px; word-break:keep-all; }
.estate-package { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; border-top:1px solid #53604d; padding-top:12px; }
.estate-package small { display:block; color:#a9b6a7; margin-top:5px; }
.estate-room-pane { margin-block:12px; }
.estate-room-v3 .estate-bay { position:absolute; transform:translate(-50%,-50%); padding:0; min-height:0; min-width:0; background:transparent; border:0; border-radius:0; z-index:1; }
.estate-bay .estate-piece,.estate-bay canvas { display:block; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.estate-bay.display { border-bottom:2px solid #cfb77a66; }
.estate-bay.display.occupied { background:#382e21; border:2px solid #8f7140; box-shadow:0 3px 3px #0008; }
.estate-bay .estate-empty-mark { opacity:.7; color:#ead9b8; font-size:clamp(10px,2vw,22px); text-shadow:0 1px 3px #000; }
.estate-bay.selected,.estate-bay:focus-visible { outline:2px solid #f8d78d; outline-offset:2px; }
.estate-slot-labels,.estate-page-controls { display:flex; flex-wrap:wrap; gap:6px; padding:10px; align-items:center; background:#18211c; }
.estate-slot-label { min-height:38px; font-size:12px; white-space:normal; text-align:left; }
.estate-slot-label.on { border-color:#e2bd72; color:#ffe8b5; }
.estate-page-controls { justify-content:center; }
.estate-picks { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:6px; max-height:320px; overflow:auto; }
.estate-pick { display:flex; flex-direction:column; gap:5px; text-align:left; min-height:54px; white-space:normal; word-break:keep-all; }
.estate-pick small { color:#b6c3b7; }
.estate-house-showcase .estate-collection-grid { max-height:320px; }
.estate-collection-item canvas { width:100%; height:auto; }
@media(max-width:600px) {
  .estate-furnishing { padding:10px; }
  .estate-progress { gap:3px; }
  .estate-progress li { padding:7px 3px; }
  .estate-progress span { font-size:10px; }
  .estate-package button { width:100%; min-height:44px; }
  .estate-slot-label { flex:1 1 140px; min-height:44px; }
  .estate-picks { grid-template-columns:1fr; }
  .estate-house-showcase .estate-collection-grid { grid-template-columns:1fr; max-height:none; }
}

/* Atlas paintings carry their own frames; fit the measured bounds without stretching. */
.estate-painting { display:block; width:100%; height:100%; pointer-events:none; }
.estate-art.painting,.estate-detail-img.painting { background:transparent; border:0; border-radius:0; }
.estate-art.painting .estate-painting,.estate-detail-img.painting .estate-painting { height:auto; }
.estate-collection-thumb.art { border:1px solid #615337; background:transparent; }
.estate-room-v3 .estate-bay.estate-mat { background:#cbb994; overflow:hidden; box-shadow:inset 0 0 3px #503b2080; }
.estate-mounted-painting { filter:drop-shadow(0 1px 1px #30241666); }
/* 그림 파일이 아직 오지 않은 수집품 */
.estate-pending { border:1px dashed #c9b48a99; box-sizing:border-box; }
.estate-pending-mark { display:flex; align-items:center; justify-content:center; height:100%; min-height:2.6em; padding:4px; box-sizing:border-box; text-align:center; word-break:keep-all; font-size:12px; line-height:1.3; color:#f4e4bd; text-shadow:0 1px 2px #000; }
.estate-bay .estate-pending-mark { font-size:clamp(7px,1vw,11px); padding:1px; }
.estate-voyage-records { margin-top:10px; border-top:1px solid #344039; padding-top:8px; }
.estate-voyage-records summary { cursor:pointer; color:var(--gold-soft); padding:6px 2px; }
/* 목적지 목록 창: 손가락으로 누르기 쉬운 큰 단추 */
.dest-modal { width:min(620px, 100%); }
.dest-search { width:100%; box-sizing:border-box; font-size:16px; padding:10px 12px; margin:2px 0 12px; border-radius:6px; border:1px solid #6b5f35; background:#0e1a1f; color:var(--text, #e8dfc4); }
.dest-group h3 { font-size:14px; color:var(--gold-soft); margin:12px 0 6px; }
.dest-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px; }
.dest-item { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:52px; padding:9px 12px; text-align:left; border-radius:6px; border:1px solid #4d5a50; background:#16262b; color:inherit; cursor:pointer; touch-action:manipulation; }
.dest-item b { font-size:15px; }
.dest-item small { font-size:12px; color:var(--muted); }
.dest-item.on { border-color:var(--gold-soft); background:#2a2a1a; }
.dest-item:active { transform:translateY(1px); }
.dest-note { font-size:12px; margin-top:12px; }
/* 3D 함선 준비 중 로딩 화면(js/ships3d.js): 화면이 바뀐 직후 새 모델을 만드는 동안만 잠깐 뜬다. 창(#overlay)보다 아래. */
.ships3d-veil { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; background: radial-gradient(ellipse at center, #143345 0%, #06141c 72%); animation: fade-in .15s ease-out; }
.ships3d-veil-card { display: grid; gap: 10px; justify-items: center; color: #f1dfb0; text-shadow: 0 2px 6px #000a; }
.ships3d-veil-card b { font-size: 18px; letter-spacing: .04em; }
.ships3d-veil-card span { min-height: 1.2em; font-size: 13px; color: #bcd2d8; }
.ships3d-veil-card i { width: 34px; height: 34px; border: 3px solid #f1dfb040; border-top-color: #f1dfb0; border-radius: 50%; animation: ships3d-spin .9s linear infinite; }
@keyframes ships3d-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ships3d-veil-card i { animation: none; } }