/* ════════ v2 — 같은 새벽, 여섯 개의 자리 ════════ */
/* ── HUD: 흐르는 시계 + 타임라인 + 무전 ── */
.hud2{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--navy-deep);border-bottom:1px solid rgba(230,244,246,.12)}
.hud2-row{display:flex;align-items:center;gap:18px;padding-block:8px;flex-wrap:wrap}
.tl{position:relative;flex:1;min-width:240px;height:34px}
.tl-bar{position:absolute;left:0;right:0;top:18px;height:4px;border-radius:2px;background:rgba(230,244,246,.16)}
.tl-seg{position:absolute;top:16px;height:8px;border-radius:3px;background:rgba(230,244,246,.26)}
.tl-seg.mine{background:var(--cyan)}
.tl-mark{position:absolute;top:10px;width:3px;height:20px;border-radius:2px;background:#fff;transform:translateX(-1px)}
.tl-lbl{position:absolute;top:0;font-size:11px;color:var(--muted);transform:translateX(-50%);white-space:nowrap}
.tl-lbl.end{transform:translateX(-100%)}
.tl-lbl.start{transform:none}
.hud-clock{display:flex;flex-direction:column}
.hud-clock span{font-size:12px;color:var(--cyan-soft)}
.hud-clock b{font-size:24px;color:var(--cyan);font-weight:700;line-height:1.1}
.hud-money{display:flex;gap:16px}
.ticker{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--foam);padding-block:6px 8px;border-top:1px solid rgba(230,244,246,.08);min-width:0}
.ticker .tag{flex:none;font-size:11px;font-weight:700;color:var(--on-cyan);background:var(--cyan-soft);border-radius:var(--radius-badge);padding:1px 6px}
.ticker .tm{flex:none;color:var(--cyan-soft)}
.ticker .tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-btn);border:1px solid rgba(230,244,246,.3);background:transparent;color:var(--foam)}
.icon-btn svg{width:18px;height:18px}
@media (max-width:600px){
  .hud2-row{gap:10px}
  .tl{order:3;flex-basis:100%}
  .hud-money .opt{display:none}
  .hud-clock b{font-size:20px}
}

/* ── 타이틀 · 역할 선택 ── */
.dawn{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid rgba(230,244,246,.18);border-radius:var(--radius-card);color:var(--foam);margin-bottom:22px;max-width:34em}
.dawn b{color:#fff;font-size:17px}
.dawn span{font-size:14px;opacity:.85}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.roles>.role:last-child:nth-child(odd){grid-column:1/-1} /* 역할이 홀수면 마지막 카드가 한 줄을 다 쓴다(혼자 반 칸에 남지 않게) */
@media (max-width:720px){.roles{grid-template-columns:minmax(0,1fr)}}
.role{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;padding:18px;border-radius:var(--radius-card);background:var(--surface);color:var(--text);border:2px solid transparent;text-align:left;font:inherit;cursor:pointer}
.role:hover:not(:disabled){border-color:var(--cyan)}
.role:disabled{cursor:not-allowed;background:var(--bg-alt)}
.role .ic{width:56px;height:56px;border-radius:var(--radius-card);background:var(--foam);display:grid;place-items:center}
.role:disabled .ic{background:var(--surface)}
.role .ic svg{width:30px;height:30px}
.role h3{margin:0;font-size:20px;letter-spacing:-.02em}
.role .win{font-size:13px;font-weight:700;color:var(--cyan-deep)}
.role p{margin:4px 0 0;font-size:14px;color:var(--text-2)}
.role .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.ff{display:flex;flex-direction:column;gap:10px;padding-block:40px;max-width:720px}
/* 타이틀 · 밤 빨리감기 — 3D 항구 배경. 넓은 화면은 화면 전체 뒤(항구는 오른쪽), 폰은 위쪽 띠 */
.title-3d{display:none}
.has-3d>.title-3d{display:block;position:fixed;inset:0;z-index:-1;opacity:0;transition:opacity .9s ease;pointer-events:none;background:var(--navy-deep)}
.has-3d>.title-3d.on{opacity:1}
.title-3d canvas{display:block;width:100%;height:100%}
.title.has-3d{grid-template-columns:minmax(0,1fr);padding-block:0 48px}
.title.has-3d>.title-copy{min-height:calc(100svh - 110px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:34em;padding-block:32px}
.title.has-3d>aside{max-width:620px}
.has-3d h1,.has-3d .lede,.has-3d .eyebrow,.has-3d .record,.has-3d .ff-log{text-shadow:0 1px 3px rgba(4,20,32,.9)}
.title.has-3d .dawn{background:rgba(6,42,69,.78)}
@media (max-width:899px){
  .has-3d>.title-3d{position:relative;inset:auto;z-index:auto;height:40svh;min-height:230px;margin:0 -16px 4px}
  .title.has-3d>.title-copy{min-height:0;padding-block:8px 0}
  .ff.has-3d{padding-block:0 32px}
}
@media (prefers-reduced-motion:reduce){ .has-3d>.title-3d{transition:none} }
.ff h1{margin:0;font-size:clamp(28px,5vw,44px);color:#fff;letter-spacing:-.03em}
.ff-log{display:flex;flex-direction:column;gap:6px;min-height:220px}
.ff-log div{font-size:15px;color:var(--foam);display:flex;gap:10px}
.ff-log div .tm{color:var(--cyan);font-weight:700;flex:none}
.ff-log div:first-child{color:#fff;font-weight:600}

/* ── 경매 전: 의뢰함 · 상장 예정 ── */
.pre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
@media (max-width:900px){.pre{grid-template-columns:minmax(0,1fr)}}
.req{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.req .app{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--cyan-deep)}
.req .app svg{width:18px;height:12px}
.req .who{font-weight:700;font-size:15px;margin-top:2px}
.req .spec{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.req .note{font-size:13px;color:var(--text-2);margin-top:5px}
.req .pr{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.req .pr b{font-size:18px}
.req .pr small{font-size:12px;color:var(--text-2)}
.req .acts{display:flex;gap:6px}
.req .timer{grid-column:1/-1;height:4px;border-radius:2px;background:var(--bg-alt);overflow:hidden}
.req .timer i{display:block;height:100%;background:var(--amber)}
.req.accepted{box-shadow:inset 3px 0 0 var(--green)}
.req.gone{opacity:.5}
.lotr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:12px 16px;border-top:1px solid var(--line);align-items:center}
.lotr .nm{font-weight:700;font-size:15px}
.lotr .sub{font-size:13px;color:var(--text-2);display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:3px}
.lotr .tg{text-align:right}
.lotr .tg small{display:block;font-size:12px;color:var(--text-2)}
.lotr.new{animation:flash 1.2s ease-out}
@keyframes flash{from{background:var(--foam)}to{background:var(--surface)}}
@media (prefers-reduced-motion:reduce){.lotr.new{animation:none}}
.commit{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px 14px;font-size:13px;color:var(--text-2)}

/* ── 초읽기 입찰: 부른 값 → 참가/패스 → 초읽기(숫자·박이 끊긴 뒤 속으로) → 스톱 ── */
.suji{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.suji{grid-template-columns:minmax(0,1fr)}}
.floor{background:var(--navy);border:1px solid rgba(230,244,246,.16);border-radius:var(--radius-card);padding:16px;color:#fff}
.floor-top{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--cyan-soft);flex-wrap:wrap}
.lot-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:6px}
.lot-h h2{margin:0;font-size:clamp(24px,4.5vw,30px);letter-spacing:-.02em}
.lot-h .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center;font-size:14px;color:var(--foam)}
.ring{flex:none;width:92px;height:92px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:700}
.call{min-height:26px;margin-top:10px;font-size:16px;font-weight:600;color:var(--cyan)}
.hands{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:14px}
@media (max-width:560px){.hands{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hand{border:1px solid rgba(230,244,246,.2);border-radius:var(--radius-btn);padding:8px 4px;text-align:center;min-height:92px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:background .15s,transform .15s}
.hand .no{font-size:17px;font-weight:700}
.hand .nm{font-size:12px;color:var(--cyan-soft);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hand .st{font-size:12px;color:var(--muted);min-height:18px}
.hand .bid{font-size:15px;font-weight:700;min-height:20px}
.hand.up{background:rgba(230,244,246,.12);transform:translateY(-3px)}
.hand.up .st{color:#fff}
.hand.me{border-color:var(--cyan)}
.hand.me.up{background:var(--cyan);color:var(--on-cyan)}
.hand.me.up .nm,.hand.me.up .st{color:var(--on-cyan)}
.hand.win{background:var(--foam);color:var(--navy)}
.hand.win .nm,.hand.win .st{color:var(--navy)}
.hand.lose{opacity:.55}
.hand.down{opacity:.45}
.rival{outline:1px dashed var(--amber);outline-offset:2px}
.quick2{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.quick2 .lbl{align-self:center;font-size:13px;color:var(--cyan-soft);margin-right:2px}
.floor .price-now{margin-top:12px}
.lockrow{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.lockrow .btn{flex:1;min-width:140px}
.hint{font-size:13px;color:var(--cyan-soft);margin-top:8px}
.bang{font-size:30px;font-weight:700;color:var(--amber);letter-spacing:-.02em}
.gap{font-size:14px;color:var(--foam);margin-top:2px}
.gap.warn{color:var(--amber);font-weight:600}
.price-now.over{color:var(--amber)}
.floor.cding .price-now{font-size:24px}
.floor.cding .price-now small{font-size:13px}
.cdbox{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px}
.cd-clock{font-size:clamp(64px,12vw,92px);font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1}
.cd-clock.dark{color:rgba(230,244,246,.28)}
.cd-dots{height:20px;display:grid;place-items:center}
.cd-dots i{width:12px;height:12px;border-radius:50%;background:rgba(230,244,246,.16);transition:transform .05s}
.cd-dots i.on{background:var(--cyan-soft);transform:scale(1.3)}
.cd-dots i.acc{background:var(--cyan);transform:scale(1.7)}
.floor.cding .call{text-align:center}
.hand.pressed{background:var(--amber);color:#3A2600}
.hand.pressed .nm,.hand.pressed .st{color:#3A2600}
.hand.me.pressed{background:var(--cyan);color:var(--on-cyan)}
.lockrow .btn.stop{background:var(--red);border-color:var(--red);color:#fff;min-height:88px;font-size:26px}
.lockrow .btn.stop:disabled{background:rgba(230,244,246,.12);border-color:transparent;color:var(--foam);opacity:1}
.lockrow .btn.warn{background:var(--amber);border-color:var(--amber);color:#3A2600}
.lockrow .btn[hidden]{display:none}
.floor.cding .hand.down{display:none} /* 초읽기 땐 붙은 사람만 — 누르는 게 눈에 띄게 */
@media (max-width:560px){ .floor.cding .hands{order:4} .floor.cding .hand{min-height:0;padding:6px 4px} }
@media (max-height:559px) and (orientation:landscape){ .cd-clock{font-size:56px} .floor.cding .hand{min-height:0;padding:4px} .lockrow .btn.stop{min-height:64px} }

/* ── 결과 · 여정 ── */
.score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.score b{font-size:clamp(34px,6vw,54px);color:#fff;letter-spacing:-.03em}
.journey{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:8px}
.jstep{padding:12px 14px 14px;border-top:3px solid rgba(230,244,246,.2)}
.jstep.mine{border-top-color:var(--cyan);background:rgba(22,184,196,.1)}
.jstep .k{font-size:12px;color:var(--cyan-soft);font-weight:700}
.jstep b{display:block;font-size:15px;color:#fff;margin-top:2px}
.jstep p{margin:4px 0 0;font-size:13px;color:var(--foam);opacity:.85}
@media (max-width:760px){.journey{grid-template-columns:minmax(0,1fr)}.jstep{border-top:0;border-left:3px solid rgba(230,244,246,.2)}.jstep.mine{border-left-color:var(--cyan)}}
.cta-box{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px;border-radius:var(--radius-card);background:var(--surface);color:var(--text);margin-top:20px}
.cta-box b{font-size:17px}
.cta-box p{margin:2px 0 0;font-size:14px;color:var(--text-2)}
a.btn{text-decoration:none}
.lanes{display:flex;flex-direction:column;gap:12px}
.lane{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center}
.lane .ln{font-size:14px;font-weight:700}
.lane .lt{position:relative;height:10px;border-radius:5px;background:var(--bg-alt)}
.lane .lt i{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--navy)}
.lane.open .lt i{background:var(--cyan)}
.lane-axis{position:relative;height:16px;margin:8px 0 0 74px;font-size:11px;color:var(--text-2)}
.lane-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.lane-axis span:first-child{transform:none}
.lane-axis span:last-child{transform:translateX(-100%)}
.btn.ghost[aria-pressed="true"]{background:var(--navy);color:#fff}
#hud-play{display:contents}
.floor{display:flex;flex-direction:column}
@media (max-width:600px){ .tl-lbl.minor{display:none} }
@media (max-width:560px){
  .floor-top{order:1}.lot-h{order:2}.price-now{order:3}.cdbox{order:3}.call{order:4}.lockrow{order:5}.quick2{order:6}.hands{order:7}.hint{order:8}
  .floor .price-now{font-size:38px}
  .hand{min-height:74px}
  .ring{width:72px;height:72px}
  .ring b{font-size:20px}
}

/* ── 선별 ── */
.sort-stats{display:flex;gap:16px;font-size:14px;color:var(--cyan-soft);flex-wrap:wrap}
.sort-stats b{color:#fff;font-size:18px;margin-left:4px}
.chute{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px;border:1px dashed rgba(230,244,246,.25);border-radius:var(--radius-btn);margin-bottom:10px;color:var(--cyan-soft);font-size:13px}
.chute .lbl{flex:none}
.chute .q{display:flex;gap:6px;flex:1;min-width:0;overflow:hidden;align-items:center}
.chute .qf{flex:none;background:var(--bg-alt);border-radius:6px;padding:3px 4px;display:flex}
.chute .qf svg{display:block}
.chute .left{flex:none}
.chute .left.hot{color:var(--amber);font-weight:700}
.sgrid{display:grid;grid-template-columns:110px minmax(0,1fr) 110px;grid-template-areas:". up ." "left table right" ". down .";gap:10px;touch-action:none;user-select:none;-webkit-user-select:none}
.sbox{border:2px solid rgba(230,244,246,.25);background:rgba(230,244,246,.06);color:#fff;border-radius:var(--radius-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;padding:8px;font:inherit}
.sbox:hover{border-color:var(--cyan)}
.sbox b{font-size:20px}
.sbox small{font-size:12px;color:var(--cyan-soft)}
.sbox .cnt{font-size:13px;color:var(--foam)}
.sbox.up{grid-area:up}.sbox.left{grid-area:left}.sbox.right{grid-area:right}.sbox.down{grid-area:down}
.sbox.hit{animation:hit .28s}
.sbox.miss{animation:miss .35s}
@keyframes hit{from{background:var(--green);border-color:var(--green)}to{background:rgba(230,244,246,.06)}}
@keyframes miss{from{background:var(--red);border-color:var(--red)}to{background:rgba(230,244,246,.06)}}
.table{grid-area:table;position:relative;height:230px;border-radius:var(--radius-card);background:var(--bg);border:1px solid var(--line-strong);overflow:hidden}
.fishslot{position:absolute;left:14px;top:34px;height:130px;display:flex;align-items:center}
.fishslot svg{display:block;overflow:visible}
.flying{pointer-events:none}
.ruler{position:absolute;left:0;right:0;bottom:0;height:58px}
.zone{position:absolute;top:0;height:30px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text-2);border-left:1px solid var(--line-strong)}
.zone.zS{background:var(--bg-alt)}.zone.zM{background:var(--foam)}.zone.zL{background:rgba(22,184,196,.22)}
.ruler .tk{position:absolute;top:30px;width:1px;height:6px;background:var(--text-2)}
.ruler .tk.lg{height:10px}
.ruler em{position:absolute;top:41px;font-style:normal;font-size:11px;color:var(--text-2);transform:translateX(-50%)}
.pop{position:absolute;left:0;right:0;top:8px;text-align:center;font-weight:700;font-size:15px;opacity:0;pointer-events:none}
.pop.show{animation:pop .9s ease-out}
.pop.good{color:var(--green)}.pop.bad{color:var(--red)}.pop.warn{color:var(--navy)}
@keyframes pop{0%{opacity:0;transform:translateY(6px)}15%{opacity:1;transform:translateY(0)}75%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
.cd{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cd:empty{display:none}
.cd b{font-size:20px;color:var(--navy);background:var(--surface);padding:8px 14px;border-radius:var(--radius-btn);box-shadow:var(--shadow)}
.sort-hint{font-size:13px;color:var(--cyan-soft);margin:10px 0 0;text-align:center}
.lot-row.mine{background:rgba(29,158,117,.1);box-shadow:inset 3px 0 0 var(--green)}
@media (prefers-reduced-motion:reduce){.pop.show,.sbox.hit,.sbox.miss{animation:none}.pop.show{opacity:1}}
@media (max-width:560px){
  .sgrid{grid-template-columns:62px minmax(0,1fr) 62px;gap:6px}
  .sbox{min-height:54px;padding:4px}
  .sbox b{font-size:17px}
  .sbox small{font-size:10px;text-align:center;line-height:1.2}
  .table{height:200px}
  .fishslot{top:26px;height:110px}
  .sort-stats{gap:10px;font-size:13px}
}
.sgrid,.chute,.sort-hint{max-width:820px;margin-inline:auto}
.sbox small{white-space:nowrap}
@media (max-width:560px){ .sbox small .arr{display:none} }
/* 선별 — 폰 가로(낮고 넓은 화면): HUD를 접고 제목·점수를 한 줄로, 위·아래 상자는 얇은 띠, 작업대가 남은 높이를 다 쓴다 */
html.sland .hud2{display:none}
html.sland .stage{padding:4px max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}
html.sland .phase-h{margin:0 0 4px;flex-wrap:nowrap;align-items:center;max-width:820px;margin-inline:auto}
html.sland .phase-h h1{font-size:15px;white-space:nowrap}
html.sland .phase-h p{display:none}
html.sland .sort-stats{flex-wrap:nowrap;gap:10px;font-size:12px}
html.sland .sort-stats b{font-size:15px}
html.sland .chute{min-height:34px;padding:2px 10px;margin-bottom:4px}
html.sland .sgrid{gap:4px;grid-template-columns:92px minmax(0,1fr) 92px}
html.sland .sbox{min-height:34px;padding:2px 6px}
html.sland .sbox.up,html.sland .sbox.down{flex-direction:row;gap:8px}
html.sland .sbox b{font-size:16px}
html.sland .sbox small{font-size:11px}
html.sland .table{height:max(160px,calc(var(--play-h) - 150px))}
html.sland .fishslot{top:6px;height:calc(100% - 66px)}
html.sland .sort-hint{display:none}

/* ── 지도 플레이 화면(관제 control · 선장 fish) — 격자 한 벌로 데스크톱 · 폰 세로 · 폰 가로를 맞춘다 ──
 * 조작은 지도에서: 배를 누르면 고르고, 선석을 누르면 댄다. 그 배에 할 수 있는 일(예인선·하역반)은 고른 배 막대에만 */
.play{display:grid;gap:12px 16px;align-items:start;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
.ct-play{grid-template-areas:"ctrl ctrl" "map sel" "map log"}
.cp-play{grid-template-areas:"ctrl ctrl" "top top" "map log" "act log" "msg log"}
.play>.play-ctrl{grid-area:ctrl;margin:0}
.play>.play-map{grid-area:map;min-width:0}
.play .selbar{grid-area:sel}
.side-col{display:contents} /* 고른 배 + 무전 교신 — 평소엔 없는 상자(격자 칸을 그대로 쓴다), 넓은 전체 화면에서만 오른쪽 기둥이 된다 */
.play>.queue-w{grid-area:queue;display:none}
.play .play-log{grid-area:log}
.cp-play>.fish-top{grid-area:top;margin:0}
.cp-play>.fish-act{grid-area:act;margin:0}
.cp-play>.play-msg{grid-area:msg}
@media (max-width:900px){
  .ct-play{grid-template-columns:minmax(0,1fr);grid-template-areas:"ctrl" "map" "sel" "log"}
  .cp-play{grid-template-columns:minmax(0,1fr);grid-template-areas:"ctrl" "top" "map" "act" "msg" "log"}
}
.map-box svg{cursor:pointer}
/* 고른 배 막대 */
.selbar{background:var(--surface);color:var(--text);border-radius:var(--radius-card);box-shadow:var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.selbar .sel-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.selbar .sel-hint.warn{color:var(--text);font-weight:600;border-left:3px solid var(--amber);padding-left:8px}
.tut .tut-sel{width:100%;max-width:560px;margin-inline:auto}
.selbar .sel-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.selbar .sel-h b{font-size:16px}
.selbar .sel-st{margin-left:auto;font-size:13px;color:var(--text-2);font-weight:600}
.selbar .sel-cargo{font-size:14px}
.selbar .sel-cargo span+span::before{content:" · ";color:var(--muted)}
.selbar .sel-bars{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-2)}
.selbar .sel-bars .pbar{max-width:160px}
.selbar .sel-hint{font-size:13px;color:var(--text-2)}
.selbar .sel-acts{display:flex;gap:6px;flex-wrap:wrap}
.selbar .sel-acts .btn{min-height:40px}
.selbar .btn.must:not(:disabled){background:var(--amber);border-color:var(--amber);color:#3A2600}
.selbar .sel-tools{display:flex;gap:4px 16px;flex-wrap:wrap;font-size:13px;color:var(--text-2)}
.selbar .sel-tools b{color:var(--text)}
.selbar .sel-tools .warn b{background:var(--amber);color:#3A2600;border-radius:var(--radius-badge);padding:1px 6px}
.sb{display:none}
html.phone.mplay .play-ctrl .lb{display:none}
html.phone.mplay .play-ctrl .sb{display:inline}
.btn.nudge{animation:nudge 1.6s ease-out infinite}
@keyframes nudge{0%{box-shadow:0 0 0 0 rgba(22,184,196,.6)}70%,100%{box-shadow:0 0 0 9px rgba(22,184,196,0)}}
@media (prefers-reduced-motion:reduce){.btn.nudge{animation:none;outline:2px solid var(--cyan);outline-offset:2px}}
/* 알림 한 줄 — 폰의 지도 플레이 화면에서 떠 있는 알림 대신(지도를 덮지 않게) */
.play-msg{font-size:13px;font-weight:600;color:var(--text);border-left:3px solid var(--navy);padding:4px 8px;background:var(--bg-alt);border-radius:4px;opacity:.6;transition:opacity .3s;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.play-msg:empty{display:none}
.play-msg.on{opacity:1}
.play-msg.good{border-left-color:var(--green)}
.play-msg.warn{border-left-color:var(--amber)}
.play-msg.bad{border-left-color:var(--red)}
.cp-play>.play-msg{background:rgba(230,244,246,.08);color:var(--foam);border-left-color:var(--cyan-soft)}
/* 다음 입항 — 아직 지도에 없거나 선석을 기다리는 배(폰) */
.queue-w{flex-direction:column;gap:5px;min-width:0}
.q-lbl{font-size:12px;font-weight:700;color:var(--cyan-soft);letter-spacing:.02em}
.queue{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.queue::-webkit-scrollbar{display:none}
.queue.empty::before{content:"지금은 들어오는 배가 없습니다";font-size:13px;color:var(--cyan-soft)}
.qchip{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:48px;min-width:92px;padding:6px 10px;border-radius:var(--radius-btn);border:1px solid rgba(230,244,246,.3);background:rgba(230,244,246,.06);color:var(--foam);text-align:left}
.qchip b{font-size:14px;color:#fff}
.qchip .qs{font-size:12px;color:var(--cyan-soft);white-space:nowrap}
.qchip .qp{display:block;width:100%;height:4px;border-radius:2px;background:rgba(230,244,246,.18);overflow:hidden}
.qchip .qp i{display:block;height:100%;background:var(--amber)}
.qchip .qp.bad i{background:var(--red)}
.qchip.need{border-color:var(--amber)}
.qchip.on{background:var(--cyan);border-color:var(--cyan)}
.qchip.on b,.qchip.on .qs{color:var(--on-cyan)}
/* ── 폰 — 기록 목록·범례는 접고, 고른 배 막대·다음 입항을 지도 바로 아래에 ── */
html.phone .play-log,html.phone .map-legend{display:none}
html.phone .play>.queue-w{display:flex}
html.phone .ct-play{grid-template-columns:minmax(0,1fr);grid-template-areas:"ctrl" "map" "sel" "queue";gap:10px}
html.phone .cp-play{grid-template-columns:minmax(0,1fr);grid-template-areas:"ctrl" "top" "map" "act" "msg";gap:10px}
html.phone.mplay .play-ctrl .ph-t{display:none}
html.phone.mplay .hud2 .brand span{display:none}
html.phone.mplay .ticker{display:none!important}
/* 평면 지도의 글자 — 폰에선 지도가 0.4~0.65배로 줄어 12px 아래로 떨어지지 않게 키운다 */
html.phone #h-labels text{font-size:21px}
html.phone .float-note{font-size:19px}
html.phone #map-box .berth-g text:first-of-type{font-size:23px}
html.phone #map-box .berth-g [id^="bsub-"]{display:none}
html.phone #map-box .berth-g [id^="bocc-"]{font-size:17px;transform:translateY(-8px)}
html.phone #map-box svg>text{font-size:17px}
/* ── 가로 플레이 — 지도가 화면 전체, 조작은 지도 위에 겹쳐 띄운다(모바일 게임 방식) ──
 * 왼쪽 위 시계·수치 · 오른쪽 세로 버튼 줄 · 그 왼쪽에 고른 배 카드(배를 골랐을 때만 크게) · 왼쪽 다음 입항 · 아래 가운데(선석·부두)는 비운다.
 * 페이지 HUD는 접는다 — 폰 가로는 높이가 300~390px뿐이라 한 줄도 아깝다 */
.land-only{display:none}
html.land .land-only{display:inline-flex}
html.land .hud2{display:none}
html.land .stage{padding:0;max-width:none}
html.land .play{display:block;position:relative;height:var(--play-h);overflow:hidden}
html.land .play>.play-map{position:absolute;inset:0}
html.land .map-box,html.land .sea-box{height:100%;border-radius:0;border:0;display:flex;align-items:center;justify-content:center}
html.land .map-box svg{width:100%;height:100%}
html.land .map-box .h3,html.land .sea-box .h3{aspect-ratio:auto;width:100%;height:100%}
html.land .play .play-log,html.land .map-legend{display:none}
html.land .h3-berth{flex-direction:row;gap:6px;align-items:baseline;padding:3px 8px 4px}
html.land .h3-berth .s1{display:none}
/* 왼쪽 위 — 시계 · 수치(누르기를 가로채지 않는다) */
html.land .ov-hud{position:absolute;top:6px;left:max(8px,env(safe-area-inset-left));z-index:5;align-items:baseline;gap:8px;padding:5px 10px;border-radius:var(--radius-btn);background:rgba(6,42,69,.8);color:var(--foam);font-size:12px;pointer-events:none;white-space:nowrap}
html.land .ov-hud b{font-size:18px;color:var(--cyan);font-weight:700;line-height:1.1}
html.land .ov-hud #ov-phase{color:var(--cyan-soft)}
html.land .ov-stat{display:flex;gap:8px}
html.land .ov-stat .stat,html.land .ov-stat .stat.opt{display:flex;flex-direction:row;align-items:baseline;gap:3px}
html.land .ov-stat .stat span{font-size:11px}
html.land .ov-stat .stat b{font-size:13px;color:#fff}
/* 오른쪽 — 세로 버튼 줄 */
html.land .play>.play-ctrl{position:absolute;top:6px;right:max(8px,env(safe-area-inset-right));z-index:5;display:block;margin:0}
html.land .play-ctrl .ph-t,html.land .play-ctrl .seg{display:none}
html.land .play-ctrl .map-ctrl{flex-direction:column;align-items:stretch;gap:4px}
html.land .play-ctrl .btn.sm{min-height:34px;min-width:54px;padding:0 6px}
html.land .play-ctrl .btn.dark{background:rgba(6,42,69,.82)}
html.land .play-ctrl .btn.dark[aria-pressed="true"]{background:var(--cyan)}
/* 고른 배 카드 — 버튼 줄 왼쪽 위. 고른 배가 없으면 도구 상태만 작은 알약으로 */
html.land .play .selbar{position:absolute;top:6px;right:calc(max(8px,env(safe-area-inset-right)) + 62px);z-index:5;width:min(300px,calc(100% - 320px));max-height:calc(100% - 12px);overflow:auto;padding:8px 10px;gap:4px}
html.land .selbar .sel-body{gap:4px}
html.land .selbar .sel-cargo,html.land .selbar .sel-bars,html.land .selbar .sel-hint,html.land .selbar .sel-h .chip:not(.amber){display:none} /* 좁은 가로 화면 — 이름·상태·버튼만(댈 수 있는 선석은 지도에서 밝아지고, 기다림은 배 이름 밑 막대) */
html.land .selbar .sel-acts .btn{min-height:36px}
html.land .selbar.idle{width:auto;padding:5px 10px;background:rgba(255,255,255,.92)}
html.land .selbar.idle .sel-h,html.land .selbar.idle .sel-hint{display:none}
html.land .play-msg{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
html.land .play-msg:empty{display:none}
/* 왼쪽 — 다음 입항(세로) */
html.land .play>.queue-w{position:absolute;left:max(8px,env(safe-area-inset-left));top:46px;z-index:5;display:flex;width:112px;max-height:calc(100% - 54px);gap:4px}
html.land .q-lbl{font-size:11px;text-shadow:0 1px 2px rgba(4,20,32,.9)}
html.land .queue{flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:0}
html.land .qchip{min-width:0;width:100%;min-height:40px;padding:4px 8px;background:rgba(6,42,69,.84)}
html.land .qchip.on{background:var(--cyan)}
html.land .qchip b{font-size:13px}
html.land .qchip .qs{font-size:11px}
html.land .queue.empty::before{font-size:12px;text-shadow:0 1px 2px rgba(4,20,32,.9)}
/* 선장 — 계기(어창·연료·선도)는 왼쪽 위 아래로, [투망]·[귀항]은 오른쪽 아래(엄지), 알림은 왼쪽 아래 */
html.land .cp-play .ov-stat{display:none}
html.land .cp-play>.fish-top{position:absolute;top:46px;left:max(8px,env(safe-area-inset-left));z-index:5;flex-direction:column;align-items:stretch;gap:3px;margin:0;padding:6px 10px;border-radius:var(--radius-btn);background:rgba(6,42,69,.8);font-size:12px;pointer-events:none}
html.land .cp-play .fish-top .gb{width:84px;height:6px}
html.land .cp-play .fish-top .gauge b{font-size:13px}
html.land .cp-play>.fish-act{position:absolute;right:calc(max(8px,env(safe-area-inset-right)) + 62px);bottom:max(8px,env(safe-area-inset-bottom));z-index:5;flex-direction:column;gap:6px;width:132px;margin:0}
html.land .cp-play .fish-act .btn.lg{min-height:48px;font-size:16px}
/* 지도 위에 뜬 버튼은 속이 비치면 밑의 섬 이름이 비쳐 읽기 어렵다 — 꽉 채운다(흐린 상태도) */
html.land .cp-play .fish-act .btn.dark{background:var(--navy-deep)}
html.land .cp-play .fish-act .btn:disabled{opacity:1;background:var(--navy-soft);border-color:var(--navy-soft);color:rgba(230,244,246,.55)}
html.land .cp-play>.play-msg{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));z-index:5;max-width:44%;background:rgba(6,42,69,.84)}
/* 돌려 보는 중엔 미디어 쿼리가 세로 폭(390)을 보므로 좁은 화면 규칙(힌트를 지도 밖으로)이 걸린다 — 자리를 못 박아 둔다 */
html.land .sea-hint{position:absolute;top:6px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:min(44%,420px);margin:0;font-size:13px;padding:5px 9px;white-space:normal;background:rgba(6,42,69,.84);color:var(--foam)}
html.land .sea-hint:empty{display:none}
/* ── 넓은 화면(데스크톱·태블릿 가로) — 브라우저 전체가 게임 화면. 지도는 왼쪽, 오른쪽 기둥(384px)에 폰에서 접어 둔 정보 ──
 * 지도 위: 왼쪽 위 시계·수치(선장은 게이지도) · 오른쪽 위 버튼 한 줄. 기둥: 고른 배 + 무전 교신(관제) / 조업 일지 + 투망·귀항(선장).
 * 지도를 기둥 왼쪽에만 그리는 이유 — 패널을 지도 위에 겹치면 오른쪽 묘박지·3선석·어군을 가려 누를 수 없다(겹쳐 본 뒤 되돌림).
 * 예전 데스크톱 배치는 3D 항구·바다가 폭에 맞춰 브라우저 높이를 넘쳐, 배가 화면 아래로 밀려 있었다(사용자 보고) */
html.wide .play>.play-map{right:384px}
html.wide .play::after{content:"";position:absolute;top:0;bottom:0;right:384px;width:1px;background:rgba(230,244,246,.1)}
html.wide .ct-play>.queue-w{display:none} /* 기둥의 무전 교신이 같은 배를 보여 주고, 눌러서 고를 수 있다 */
html.wide .ov-hud{top:12px;left:12px;gap:12px;padding:8px 14px;font-size:13px}
html.wide .ov-hud b{font-size:26px}
html.wide .ov-stat{gap:12px}
html.wide .ov-stat .stat span{font-size:12px}
html.wide .ov-stat .stat b{font-size:16px}
html.wide .play>.play-ctrl{top:12px;right:12px}
html.wide .play-ctrl .map-ctrl{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;max-width:min(760px,calc(100vw - 460px))}
html.wide .play-ctrl .btn.sm{min-height:40px;min-width:0;padding:0 14px;font-size:14px}
html.wide .play-ctrl .seg{display:inline-flex} /* 데스크톱은 속도를 바로 고른다(일시정지·1×·2×·4×) — 폰의 순환 버튼(멈춤·속도)은 접는다 */
html.wide #spd-pause,html.wide #spd-cyc{display:none}
html.wide .play .selbar{top:64px;right:12px;width:360px;max-height:calc(55% - 76px);padding:12px 14px;gap:6px}
html.wide .selbar .sel-cargo,html.wide .selbar .sel-hint{display:block}
html.wide .selbar .sel-bars{display:flex}
html.wide .selbar .sel-h .chip:not(.amber){display:inline-flex}
html.wide .selbar.idle{width:360px;padding:12px 14px;background:rgba(255,255,255,.94)}
html.wide .selbar.idle .sel-h,html.wide .selbar.idle .sel-hint{display:revert}
html.wide .play .play-log{display:block;position:absolute;right:12px;bottom:12px;z-index:5;width:360px;max-height:calc(45% - 24px);overflow:auto;margin:0}
html.wide .play .play-log .radio{max-height:none}
/* 관제 — 고른 배와 무전 교신을 오른쪽 한 기둥에 쌓는다 */
html.wide .ct-play>.side-col{position:absolute;top:64px;right:12px;bottom:12px;z-index:5;width:360px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
html.wide .side-col>*{pointer-events:auto}
html.wide .side-col>.selbar{position:static;flex:0 0 auto;width:auto;max-height:60%;overflow:auto}
html.wide .side-col>.play-log{position:static;flex:0 1 auto;min-height:0;width:auto;max-height:none}
html.wide .play>.queue-w{top:68px;left:12px;width:150px;max-height:calc(100% - 80px)}
html.wide .qchip{min-height:46px;padding:6px 10px}
html.wide .qchip b{font-size:14px}
html.wide .qchip .qs{font-size:12px}
html.wide .h3-berth{flex-direction:column;gap:1px;align-items:center;padding:4px 9px 5px}
html.wide .h3-berth .s1{display:revert}
/* 선장 — 기둥 위엔 조업 일지, 아래엔 투망·귀항(엄지·마우스가 가는 자리) */
html.wide .cp-play>.fish-top{top:68px;left:12px;gap:4px;padding:8px 12px;font-size:13px}
html.wide .cp-play .fish-top .gb{width:120px;height:7px}
html.wide .cp-play .fish-top .gauge b{font-size:15px}
html.wide .cp-play>.play-log{top:64px;bottom:auto;max-height:calc(100% - 160px)}
html.wide .cp-play>.fish-act{right:12px;bottom:12px;flex-direction:row;width:360px;gap:8px}
html.wide .cp-play .fish-act .btn.lg{flex:1;min-height:60px;font-size:18px}
html.wide .cp-play>.play-msg{left:12px;bottom:12px;max-width:min(520px,40%);font-size:14px}
html.wide .sea-hint{top:12px;left:calc((100% - 384px) / 2);max-width:min(40%,460px);font-size:14px;padding:6px 12px} /* 지도 영역의 가운데(기둥 빼고) */
/* 화면 돌리기 — 세로로 쥔 폰에서 게임 화면을 90° 돌려 보여 준다(회전 잠금을 켠 아이폰). 폰을 왼쪽으로 눕혀 본다 */
html.rot,html.rot body{overflow:hidden;height:100%}
html.rot body{position:fixed;top:0;left:0;width:100vh;height:100vw;transform:rotate(90deg) translateY(-100%);transform-origin:top left}
@supports (height:100dvh){ html.rot body{width:100dvh} }
/* 가로로 돌려 달라는 안내 */
.rot-ill{display:grid;place-items:center}
.rot-ill svg{width:120px;height:90px}
.rot-ill .ph{fill:none;stroke:var(--navy);stroke-width:3;transform-origin:60px 45px;animation:tilt 2.4s ease-in-out infinite}
.rot-ill .ar{fill:none;stroke:var(--cyan-deep);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes tilt{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.rot-ill .ph{animation:none;transform:rotate(-90deg)}}
.h3-tag.tug{box-shadow:inset 3px 0 0 var(--amber)}
.map-box .h3{display:none;position:relative;aspect-ratio:19/10;background:var(--navy-deep)}
.map-box.is-3d>svg{display:none}
.map-box.is-3d .h3{display:block}
.h3 canvas{display:block;width:100%;height:100%}
/* 3D 위의 글자 — 캔버스에 그리지 않고 HTML로 겹친다(폰에서도 선명) */
.h3-ov{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.h3-ov>div{position:absolute;left:0;top:0;will-change:transform}
.h3-ship{display:flex;flex-direction:column;align-items:center;gap:3px;padding-bottom:6px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(4,20,32,.95),0 0 6px rgba(4,20,32,.8)}
.h3-ship .pb{display:block;width:46px;height:5px;border-radius:3px;background:rgba(230,244,246,.28);overflow:hidden}
.h3-ship .pb i{display:block;height:100%;background:var(--cyan-soft)}
.h3-ship .pb i.warn{background:var(--amber)}
.h3-ship .pb i.bad{background:var(--red)}
.h3-ship .pb i.prog{background:var(--cyan)}
.h3-ship.sel b{color:var(--cyan)}
.h3-ship.hov b{text-decoration:underline;text-underline-offset:3px}
.h3-ship.far{opacity:.7}
.h3-berth{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 9px 5px;border-radius:var(--radius-btn);background:rgba(6,42,69,.84);border:1px solid rgba(230,244,246,.2);color:var(--foam);font-size:12px;line-height:1.35;white-space:nowrap}
.h3-berth b{font-size:14px;color:#fff}
.h3-berth .s2{color:var(--cyan-soft)}
.h3-berth.can{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}
.h3-berth.no{opacity:.5}
.h3-ov>.h3-berth.tap{pointer-events:auto;cursor:pointer}
.h3-tag{font-size:12px;font-weight:700;color:#fff;background:rgba(6,42,69,.8);border-radius:var(--radius-badge);padding:2px 7px;white-space:nowrap}
.h3-tag.dim{background:none;padding:0;color:var(--cyan-soft);font-weight:600;text-shadow:0 1px 2px rgba(4,20,32,.95)}
.h3-float{font-size:13px;font-weight:700;color:var(--cyan-soft);white-space:nowrap;text-shadow:0 1px 2px rgba(4,20,32,.95)}
.h3-ov>.h3-chip{left:auto;right:10px;top:10px;transform:none;font-size:13px;font-weight:700;color:var(--navy-deep);background:var(--foam);border-radius:var(--radius-btn);padding:5px 10px}
@media (max-width:600px){ .map-box .h3{aspect-ratio:16/10} .h3-berth{padding:3px 7px 4px} .h3-berth b{font-size:13px} .h3-berth{flex-direction:row;gap:6px;align-items:baseline} .h3-berth .s1{display:none} }

/* ── 선장 ── */
.fish-top{display:flex;gap:10px 24px;flex-wrap:wrap;align-items:center;margin-bottom:10px;color:var(--cyan-soft);font-size:13px}
.fish-top .gauge{display:flex;align-items:center;gap:8px}
.fish-top .gauge b{color:#fff;font-size:15px}
.fish-top .gb{width:120px;height:8px;border-radius:4px;background:rgba(230,244,246,.16);overflow:hidden}
.fish-top .gb i{display:block;height:100%;background:var(--cyan)}
.fish-top .gb.fuel i{background:var(--foam)}
.fish-top .gb.low i{background:var(--red)}
.sea-box{position:relative;border-radius:var(--radius-card);overflow:hidden;border:1px solid rgba(230,244,246,.14);background:var(--navy)}
.sea-box canvas{display:block;touch-action:none;cursor:crosshair;max-width:100%}
.sea-hint{position:absolute;left:10px;right:10px;top:10px;background:rgba(6,42,69,.84);color:var(--foam);font-size:14px;font-weight:600;padding:8px 12px;border-radius:var(--radius-btn);pointer-events:none}
.sea-hint:empty{display:none}
.fish-act{display:flex;gap:10px;margin-top:10px}
.fish-act .btn{flex:1}
#b-cast.pull{background:var(--amber);border-color:var(--amber);color:#3A2600}
.sea-box .h3{display:none;position:relative;aspect-ratio:900/560;background:var(--navy-deep)}
.sea-box.is-3d>#sea{display:none}
.sea-box.is-3d .h3{display:block}
.sea-box .h3 canvas{display:block;width:100%;height:100%}
@media (max-width:560px){ .fish-top .gb{width:64px} .sea-hint{font-size:13px;padding:6px 10px} }
@media (max-width:560px){ .sea-hint{position:static;margin:8px 0 0;background:transparent;padding:0;color:var(--cyan-soft)} .sea-hint:empty{display:block;min-height:1.4em} }

/* ── 소리 · 기록 카드 ── */
#hud-sound{margin-left:auto;flex:none}
#hud-sound[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan)}
.share-img{display:block;width:100%;height:auto;border-radius:var(--radius-btn);border:1px solid var(--line)}
a.brand{text-decoration:none}

/* ── 튜토리얼 — 그림으로 보여 주고, 직접 해 보게 한다 ── */
.tut{display:flex;flex-direction:column;gap:12px}
.tut-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tut-top h1{margin:4px 0 0;font-size:clamp(22px,3.4vw,28px);color:#fff;letter-spacing:-.02em}
.tut-skip{display:flex;gap:8px;flex-wrap:wrap}
/* 데스크톱: 왼쪽 장면 · 오른쪽 설명과 버튼 / 폰: 설명 → 장면 → 버튼(화면 아래 고정) — 무엇을 할지 먼저 읽고 바로 해 본다 */
.tut-card{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr);grid-template-rows:1fr auto;grid-template-areas:"stage cap" "stage nav";border-radius:var(--radius-card);border:1px solid rgba(230,244,246,.16)}
.tut-stage{grid-area:stage;position:relative;min-height:470px;padding:20px;display:flex;flex-direction:column;justify-content:center;gap:12px;background:rgba(230,244,246,.04);border-radius:var(--radius-card) 0 0 var(--radius-card);overflow:hidden}
.tut-cap{grid-area:cap;padding:20px 20px 12px;background:var(--surface);color:var(--text);border-radius:0 var(--radius-card) 0 0}
.tut-nav{grid-area:nav;padding:12px 20px 20px;background:var(--surface);border-radius:0 0 var(--radius-card) 0}
.tut-dots{display:flex;gap:4px}
.tut-dots i{width:24px;height:4px;border-radius:2px;background:var(--line-strong)}
.tut-dots i.ok{background:var(--green)}
.tut-dots i.on{background:var(--navy)}
.tut-cap b{display:block;font-size:20px;letter-spacing:-.02em;margin-top:12px;color:var(--text)}
.tut-cap p{margin:6px 0 0;font-size:15px;color:var(--text-2)}
.tut-cap .tut-state{min-height:1.45em;margin-top:12px;font-weight:700;color:var(--cyan-deep)}
.tut-cap .tut-state.ok{color:var(--green)}
.tut-nav{display:flex;gap:8px}
.tut-nav .btn{flex:1}
.tut-nav .btn.cta{flex:2}
.tut-night{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tut-night .lbl{font-size:12px;font-weight:700;color:var(--cyan-soft);margin-right:4px}
.tut-night .chip.line{color:var(--foam);border-color:rgba(230,244,246,.28)}
@media (max-width:900px){
  .tut-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"cap" "stage" "nav"}
  .tut-cap{border-radius:var(--radius-card) var(--radius-card) 0 0}
  .tut-stage{min-height:380px;border-radius:0}
  .tut-nav{position:sticky;bottom:0;z-index:8;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-radius:0 0 var(--radius-card) var(--radius-card);box-shadow:0 -1px 0 var(--line)}
}
@media (max-width:560px){
  .tut-top h1{font-size:20px}
  .tut-stage{min-height:0;padding:12px}
  .tut-cap{padding:14px 16px 10px}
  .tut-cap b{font-size:18px;margin-top:10px}
  .tut-cap .tut-state{margin-top:8px}
}
/* 손가락 — 손끝이 누를 곳에 닿는다 · 밀 방향으로 움직인다 */
.finger{position:absolute;width:0;height:0;pointer-events:none;z-index:6}
.finger span{position:absolute;left:0;top:0}
.finger i{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.3);opacity:0}
.finger svg{position:absolute;left:-11px;top:-1px;width:30px;height:38px;filter:drop-shadow(0 2px 3px rgba(4,20,32,.45))}
.finger.tap i{animation:tut-ring 1.4s ease-out infinite}
.finger.tap svg{animation:tut-press 1.4s ease-in-out infinite}
.finger[class*="swipe"] i{opacity:.8}
.finger.swipe-d span{animation:tut-sd 1.6s ease-in-out infinite}
.finger.swipe-u span{animation:tut-su 1.6s ease-in-out infinite}
.finger.swipe-r span{animation:tut-sr 1.6s ease-in-out infinite}
@keyframes tut-ring{0%,22%{transform:scale(.4);opacity:0}30%{opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes tut-press{0%,100%{transform:translate(5px,9px)}24%,40%{transform:translate(0,0)}}
@keyframes tut-sd{0%{transform:translateY(-34px);opacity:0}15%{opacity:1}70%{transform:translateY(34px);opacity:1}100%{transform:translateY(42px);opacity:0}}
@keyframes tut-su{0%{transform:translateY(34px);opacity:0}15%{opacity:1}70%{transform:translateY(-34px);opacity:1}100%{transform:translateY(-42px);opacity:0}}
@keyframes tut-sr{0%{transform:translateX(-34px);opacity:0}15%{opacity:1}70%{transform:translateX(34px);opacity:1}100%{transform:translateX(42px);opacity:0}}
/* 중도매인 — 의뢰 · 목표가 줄 · 호가 · 납품 */
.tut-center{display:flex;justify-content:center;width:100%}
.tut-center.col{flex-direction:column;align-items:stretch;gap:12px;max-width:640px;margin-inline:auto}
.tut-req{width:min(580px,100%);background:var(--surface);color:var(--text);border-radius:var(--radius-card);border-top:0;box-shadow:var(--shadow);animation:tut-in .5s ease-out}
@keyframes tut-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tut-line{position:relative;width:100%;max-width:660px;height:186px;margin:0 auto;color:var(--foam)}
.tut-line .bar{position:absolute;left:0;right:0;top:84px;height:8px;border-radius:4px;background:rgba(230,244,246,.22)}
.tut-line .mk,.tut-line .span,.tut-line .zone-no{opacity:0;transition:opacity .35s}
.tut-line .on{opacity:1}
.tut-line .mk{position:absolute;top:0;height:84px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.tut-line .mk i{flex:1;width:2px;background:var(--cyan-soft);margin-top:4px}
.tut-line .mk span{font-size:12px;line-height:1.3;text-align:center;white-space:nowrap;color:var(--cyan-soft)}
.tut-line .mk b{font-size:17px;color:#fff}
.tut-line .m-tg{top:92px;height:auto}
.tut-line .m-tg i{flex:none;height:44px;margin:0 0 4px;background:var(--green)}
.tut-line .m-tg span{background:var(--green);color:#fff;border-radius:var(--radius-badge);padding:4px 10px;font-size:13px;font-weight:600}
.tut-line .span{position:absolute;top:80px;height:16px;border-radius:3px;z-index:1}
.tut-line .s-fr{background:var(--line-strong)}
.tut-line .s-mg{background:var(--green)}
.tut-line .span span{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-size:12px;line-height:1.3;font-weight:600;white-space:nowrap;text-align:center;color:var(--foam)}
.tut-line .zone-no{position:absolute;top:0;right:0;bottom:30px;background:repeating-linear-gradient(135deg,rgba(226,75,74,.2) 0 5px,transparent 5px 12px);border-left:2px dashed var(--red)}
.tut-line .zone-no span{position:absolute;right:0;bottom:-26px;font-size:13px;font-weight:700;color:#FF8A89;white-space:nowrap}
.tut-floor{width:100%;max-width:720px;margin-inline:auto}
.tut-floor .hands{grid-template-columns:repeat(5,minmax(0,1fr))}
.tut-floor .hand{min-height:60px}
.tut-floor .price-now{font-size:clamp(38px,6vw,54px)}
.tut-flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(64px,1fr) minmax(0,1fr);gap:12px;align-items:center;width:100%;max-width:680px;margin-inline:auto}
.tut-flow .card-a,.tut-flow .card-b{background:var(--surface);color:var(--text);border-radius:var(--radius-card);padding:12px 14px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.tut-flow .card-a b,.tut-flow .card-b b{font-size:16px}
.tut-lane{position:relative;height:2px;background:repeating-linear-gradient(90deg,rgba(230,244,246,.35) 0 6px,transparent 6px 12px)}
.tut-lane i{position:absolute;left:0;top:-7px;width:16px;height:14px;border-radius:2px;background:var(--cyan);opacity:0}
.tut-lane i.go{animation:tut-box 1.8s ease-in-out var(--d) both}
@keyframes tut-box{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 16px);opacity:0}}
.tut-result{align-self:center;margin-inline:auto;background:var(--surface);color:var(--text);border-radius:var(--radius-btn);padding:10px 16px;font-size:16px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.tut-result.on{opacity:1;transform:none}
@media (max-width:560px){
  .tut-floor .hands{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .tut-floor .hand{padding:6px 2px;min-height:52px}
  .tut-flow{grid-template-columns:minmax(0,1fr)}
  .tut-lane{width:2px;height:56px;margin-inline:auto;background:repeating-linear-gradient(180deg,rgba(230,244,246,.35) 0 6px,transparent 6px 12px)}
  .tut-lane i{left:-7px;top:0}
  .tut-lane i.go{animation-name:tut-box-v}
  .tut-result{font-size:14px}
}
@keyframes tut-box-v{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 14px);opacity:0}}
/* 선별원 — 자 · 밀기 · 혼입 */
.tut-sgrid{width:100%}
.tut-sgrid.solo{grid-template-columns:minmax(0,1fr);grid-template-areas:"table"}
.tut-sgrid .fishslot{transition:transform .4s ease-in,opacity .4s ease-in}
.tut-sgrid .fishslot.fly-S{transform:translateX(-70%);opacity:0}
.tut-sgrid .fishslot.fly-L{transform:translateX(70%);opacity:0}
.tut-sgrid .fishslot.fly-M{transform:translateY(80%);opacity:0}
.tut-sgrid .fishslot.fly-X{transform:translateY(-80%);opacity:0}
.tailmark{position:absolute;top:26px;bottom:28px;width:0;border-left:2px dashed var(--navy);pointer-events:none}
.zone.hot{background:var(--navy);color:#fff}
.callout{position:absolute;transform:translate(-50%,-100%);background:var(--navy);color:#fff;font-size:12px;font-weight:700;padding:4px 8px;border-radius:var(--radius-badge);white-space:nowrap;pointer-events:none;z-index:4}
.callout::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:var(--navy)}
.tut-chute{width:100%;margin:0}
.tut-drop{text-align:center;font-size:18px;font-weight:700;color:#FF8A89;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.tut-drop.on{opacity:1;transform:none}
.tut-cmp{background:var(--surface);color:var(--text);border-radius:var(--radius-card);padding:12px 16px;display:flex;flex-direction:column;gap:8px;opacity:0;transition:opacity .4s}
.tut-cmp.on{opacity:1}
.tut-cmp div{display:grid;grid-template-columns:64px minmax(0,1fr) 78px;gap:10px;align-items:center;font-size:14px}
.tut-cmp i{display:block;height:10px;border-radius:5px;background:var(--navy)}
.tut-cmp div+div i{background:var(--amber)}
.tut-cmp b{text-align:right}
.tut-cmp p{margin:0;font-size:13px;color:var(--text-2)}
.tut-fish{flex-basis:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.tut-fish .tf{display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--text);border-radius:var(--radius-btn);padding:6px 10px;min-width:0}
.tut-fish .tfi{display:flex;align-items:center;height:30px}
.tut-fish b{display:block;font-size:14px}
.tut-fish small{display:block;font-size:12px;color:var(--text-2)}
/* 관제사 · 선장 — 작은 배치도 · 해도 */
.tut-harbor{width:100%;max-width:560px;margin-inline:auto}
.mini-harbor{display:block;width:100%;height:auto}
.mini-harbor text{font-family:var(--font)}
.mini-harbor .t-ship{font-size:12px;font-weight:700;fill:#fff;stroke:#062A45;stroke-width:3px;paint-order:stroke}
.mini-harbor .t-sub{font-size:11px;font-weight:600;fill:#E5A32B;stroke:#062A45;stroke-width:3px;paint-order:stroke}
.mini-harbor .t-bn{font-size:14px;font-weight:700;fill:#0A3A5C}
.mini-harbor .t-note{font-size:11px;fill:#566670}
.mini-harbor .t-sm{font-size:11px;fill:#5FD3DB}
.mini-harbor .t-hall{font-size:13px;font-weight:700;fill:#fff}
.mini-harbor .t-warn{font-size:12px;font-weight:700;fill:#FF8A89}
.tut-under{display:flex;align-items:center;gap:10px;width:100%;max-width:560px;margin-inline:auto;color:var(--foam);font-size:14px}
.tut-under .pbar{height:8px;background:rgba(230,244,246,.16)}
.tut .tut-ship{width:100%;max-width:560px;margin-inline:auto;border:1px solid var(--line);border-radius:var(--radius-card);color:var(--text)}
.tut-sea,.tut .fish-act,.tut .tut-gauge{width:100%;max-width:720px;margin-inline:auto}
.tut .fish-act{margin-top:0}
.tut .tut-gauge{margin-bottom:0}
.tut-sea canvas{cursor:pointer}
.tut-hot{position:absolute;width:72px;height:72px;margin:-36px 0 0 -36px;padding:0;border-radius:50%;border:2px dashed rgba(95,211,219,.6);background:transparent}
.tut-hot:hover{border-color:var(--cyan)}
.tut .btn.pull{background:var(--amber);border-color:var(--amber);color:#3A2600}
@media (max-width:560px){
  .tut-fish{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tut-hot{width:56px;height:56px;margin:-28px 0 0 -28px}
  .tut-fish .tf{flex-direction:column;align-items:flex-start;gap:2px}
  /* 배치도는 폰에서 0.75배로 줄어든다 — 글자만 키워 12px 이상으로 읽히게 */
  .mini-harbor .t-ship{font-size:17px}
  .mini-harbor .t-sub,.mini-harbor .t-note,.mini-harbor .t-sm,.mini-harbor .t-warn{font-size:15px}
  .mini-harbor .t-bn{font-size:20px}
  .mini-harbor .t-hall{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .finger i,.finger svg,.finger span,.tut-req,.tut-lane i.go{animation:none!important}
  .finger i{opacity:.8}
  .tut-lane i.go{opacity:1;left:calc(100% - 16px)}
  .tut-line .mk,.tut-line .span,.tut-line .zone-no,.tut-result,.tut-drop,.tut-cmp,.tut-sgrid .fishslot{transition:none}
}


/* ── 오늘의 랭킹 (12-rank.js) — 결과 화면 패널 · 첫 화면 한 줄 요약 ── */
.rank-box{margin-top:12px;padding-bottom:12px}
.rank-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 16px 0}
.rank-form label{font-size:14px;font-weight:600;color:var(--text-2)}
.rank-form input{flex:1;min-width:140px;max-width:240px;height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-btn);font:inherit;font-size:16px;color:var(--text);background:var(--surface)}
.rank-form input:focus{outline:2px solid var(--cyan);outline-offset:1px}
.rank-err{padding:8px 16px 0;font-size:14px;font-weight:600;color:var(--red)}
.rank-note{padding:6px 16px 0;font-size:13px;color:var(--text-2)}
.rank-note a{color:var(--cyan-deep)}
.rank-mine{padding:2px 16px 4px;font-size:15px;color:var(--text)}
.rank-mine b{color:var(--navy);font-size:17px}
.rank-list{list-style:none;margin:10px 0 0;padding:0 8px}
.rank-list li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;border-top:1px solid var(--line)}
.rank-list li:first-child{border-top:0}
.rank-list li.me{background:var(--foam);border-radius:var(--radius-btn)}
.rank-list .rk{font-weight:700;color:var(--text-2);text-align:center}
.rank-list li:nth-child(-n+3) .rk{color:var(--navy)}
.rank-list .nm{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-list .nm small{display:block;font-size:12px;font-weight:500;color:var(--text-2)}
.rank-list b{font-size:15px;color:var(--text)}
.rank-list li.gap,.rank-list li.rank-empty{display:block;color:var(--text-2);font-size:14px;text-align:center}
.title-rank{display:flex;flex-direction:column;gap:2px;margin-top:14px;padding:10px 14px;border-radius:var(--radius-card);background:rgba(6,42,69,.78);border:1px solid rgba(230,244,246,.16);font-size:14px;color:var(--foam);max-width:34em}
.title-rank b{color:#fff;font-size:15px;margin-bottom:2px}
.title-rank em{font-style:normal;color:var(--cyan-soft);font-weight:600;margin-right:4px}
.title-rank small{color:var(--muted);font-size:12px}

/* ── 활어차 기사 (#drive) — 3D 도로가 화면 전체, 위엔 시계·수조·게이지, 아래 구석엔 핸들·페달 ── */
body[data-phase="drive"] .hud2{display:none}
body[data-phase="drive"] .stage{padding:0;max-width:none}
.drv{position:fixed;inset:0;z-index:30;background:var(--navy-deep);color:var(--foam);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.dv-view{position:absolute;inset:0}
.dv-view canvas{display:block;transition:opacity .2s}
.dv-no3d{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center}
.dv-hud{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:8px;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));pointer-events:none}
.dv-hud>*{pointer-events:auto;background:rgba(6,42,69,.84);border:1px solid rgba(230,244,246,.14);border-radius:10px}
.dv-time{display:flex;align-items:flex-start;gap:8px;padding:6px 6px 6px 10px;font-size:12px;color:var(--cyan-soft)}
.dv-tc{display:flex;flex-direction:column;gap:1px}
.dv-time b{font-size:24px;line-height:1.1;color:#fff}
.dv-menu{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:8px;border:1px solid rgba(230,244,246,.3);background:var(--navy);color:#fff;cursor:pointer}
.dv-menu svg{width:22px;height:22px}
.dv-time b.late{color:var(--amber)}
.dv-tank{justify-self:center;display:flex;flex-direction:column;align-items:center;padding:4px 8px 5px}
.dv-tank canvas{width:176px;height:83px;display:block}
.dv-fish{font-size:12px;color:var(--foam)}
.dv-fish b{color:#fff}
.dv-fish b.warn{color:var(--amber)} .dv-fish b.bad{color:var(--red)}
.dv-gauges{display:flex;flex-direction:column;gap:3px;padding:6px 8px;font-size:12px}
.dv-g{display:grid;grid-template-columns:52px 72px 42px;align-items:center;gap:6px}
.dv-g span{color:var(--cyan-soft)}
.dv-g i{position:relative;height:7px;border-radius:4px;background:rgba(230,244,246,.16);overflow:hidden}
.dv-g i em{position:absolute;left:0;top:0;bottom:0;background:var(--cyan);border-radius:4px}
.dv-g i em.low{background:var(--amber)}
.dv-g i.band{background:linear-gradient(90deg,rgba(230,244,246,.16) 0 25%,rgba(95,211,219,.4) 25% 66.7%,rgba(230,244,246,.16) 66.7%)}
.dv-g i.band em{width:3px!important;background:#fff;transform:translateX(-1px)}
.dv-g i.band em.low{background:var(--amber)}
.dv-g b{text-align:right;color:#fff;font-weight:600}
.dv-sw{display:flex;gap:6px;margin-top:3px}
.dv-sw .btn{flex:1;min-height:32px;padding:0 8px;font-size:12px;background:var(--navy);border-color:rgba(230,244,246,.3)}
.dv-sw .btn[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--on-cyan)}
.dv-msg{position:absolute;left:50%;top:128px;transform:translateX(-50%);max-width:min(560px,80vw);padding:6px 14px;border-radius:8px;font-size:15px;font-weight:700;text-align:center;background:rgba(6,42,69,.88);color:#fff;pointer-events:none}
.dv-msg:empty{display:none}
.dv-msg.bad{background:var(--red);color:#fff} .dv-msg.warn{background:var(--amber);color:#3A2600} .dv-msg.good{background:var(--green);color:#fff} .dv-msg.info{background:var(--cyan);color:var(--on-cyan)}
.dv-speed{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:baseline;gap:6px;padding:4px 14px;border-radius:10px;background:rgba(6,42,69,.84);pointer-events:none}
.dv-speed b{font-size:34px;line-height:1;color:#fff}
.dv-speed b.over{color:var(--amber)}
.dv-speed small{font-size:13px;color:var(--cyan-soft)}
.dv-speed i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:4px solid var(--red);color:var(--text);font-style:normal;font-weight:700;font-size:13px;align-self:center}
.dv-pad{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:10px}
.dv-left{left:max(12px,env(safe-area-inset-left))}
.dv-right{right:max(12px,env(safe-area-inset-right))}
.dv-btn{width:78px;height:78px;border-radius:12px;border:1px solid rgba(230,244,246,.35);background:rgba(6,42,69,.72);color:#fff;font:inherit;font-size:15px;font-weight:700;display:grid;place-items:center;touch-action:none;-webkit-touch-callout:none}
.dv-btn svg{width:34px;height:34px}
.dv-btn.on{background:var(--cyan);border-color:var(--cyan);color:var(--on-cyan)}
.dv-gas{background:rgba(22,184,196,.3)}
.dv-brake{background:rgba(226,75,74,.3)}
.dv-brake.on{background:var(--red);border-color:var(--red);color:#fff}
.dv-over{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:16px;background:rgba(4,20,32,.72);overflow:auto}
.dv-card{width:min(560px,100%);padding:20px;border-radius:var(--radius-card);background:var(--navy);border:1px solid rgba(230,244,246,.16);display:flex;flex-direction:column;gap:10px}
.dv-card h2{margin:0;font-size:24px;color:#fff;letter-spacing:-.02em}
.dv-card p{margin:0;font-size:15px;line-height:1.55}
.dv-card .ledger{color:var(--foam)}
.dv-list{margin:0;padding-left:18px;font-size:14px;line-height:1.6;color:var(--foam)}
.dv-acts{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.dv-acts span{margin-right:auto;font-size:14px;color:var(--cyan-soft)}
.dv-score{font-size:40px;font-weight:700;color:#fff;letter-spacing:-.02em}
.dv-score small{font-size:14px;font-weight:500;color:var(--cyan-soft);margin-left:8px}
.dv-rest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dv-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:var(--radius-btn);border:1px solid rgba(230,244,246,.25);background:transparent;color:var(--foam);font:inherit;text-align:left;cursor:pointer}
.dv-opt b{font-size:16px;color:#fff}
.dv-opt span{font-size:13px;color:var(--cyan-soft)}
.dv-opt small{font-size:13px}
.dv-opt.on{background:var(--cyan);border-color:var(--cyan);color:var(--on-cyan)}
.dv-opt.on b,.dv-opt.on span{color:var(--on-cyan)}
/* 낮은 가로 폰 — 위쪽을 줄인다 */
@media (max-height:430px){
  .dv-time b{font-size:20px}
  .dv-tank canvas{width:140px;height:66px}
  .dv-gauges{gap:2px;padding:4px 6px}
  .dv-g{grid-template-columns:48px 56px 40px}
  .dv-sw .btn{min-height:28px}
  .dv-msg{top:104px;font-size:14px}
  .dv-btn{width:68px;height:68px}
}
/* 세로 폰 — 위쪽 두 줄(시계·게이지 / 수조), 아래 페달 */
@media (orientation:portrait) and (max-width:600px){
  .dv-hud{grid-template-columns:minmax(0,1fr) auto}
  .dv-tank{grid-column:1/-1;grid-row:2}
  .dv-msg{top:auto;bottom:178px;max-width:92vw}
  .dv-speed{bottom:110px}
  .dv-rest{grid-template-columns:minmax(0,1fr)}
}
/* 활어차 기사 튜토리얼 — 실제 주행과 같은 식으로 도는 작은 장면(수조·옆에서 본 도로·위에서 본 도로) */
.tdv{width:100%;max-width:640px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.tdv-road,.tdv-top{display:block;width:100%;border-radius:8px}
.tdv-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tdv-tank{width:176px;height:83px;display:block;border-radius:8px;background:rgba(6,42,69,.6)}
.tdv-tank.big{width:min(300px,100%);height:auto}
.tdv-read{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:2px} /* 좁으면 수조 아래로 내려간다(기준 폭 없이 1이면 글자가 한 줄에 한 자씩 눌린다) */
.tdv-read b{font-size:34px;line-height:1;color:#fff}
.tdv-read b.over{color:var(--amber)}
.tdv-read small{font-size:13px;color:var(--cyan-soft)}
.tdv-read span{font-size:14px;color:var(--foam)}
.tdv-read span.ok{color:var(--cyan-soft)} .tdv-read span.bad{color:var(--amber)}
.tdv-lane{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.tdv-side{display:flex;flex-direction:column;align-items:center;gap:12px}
.tdv-pad{display:flex;gap:10px}
.tdv-g{flex:1 1 230px;min-width:0;background:rgba(6,42,69,.6);border-radius:10px}
@media (max-width:720px){
  .tdv-lane{grid-template-columns:minmax(0,1fr)}
  .tdv-side{flex-direction:row;justify-content:space-between}
  .tdv-tank{width:150px;height:71px}
}
/* 역할 고르기의 오늘의 랭킹 — 카드 한 줄 요약 + 역할별 상위 20 창 */
.ph-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.role-rank{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--text-2)}
.role-rank:empty{display:none}
.role-rank b{color:var(--navy)}
.role-rank small{font-size:12px;color:var(--muted)}
.role-rank .rr-me b{color:var(--cyan-deep)}
.rb-tabs{display:flex;gap:6px;flex-wrap:wrap}
.rb-tab{min-height:36px;padding:0 12px;font-size:14px}
.rb-tab[aria-selected="true"],.rb-tab[aria-selected="true"]:hover:not(:disabled){background:var(--navy);color:#fff}
.rb-sum{font-size:14px;color:var(--text-2)}
.rb-sum:empty{display:none}
.rb-sum b{color:var(--text)}
.rb-list{margin:0;padding:0;max-height:min(52vh,560px);overflow:auto}
.title-rank .btn{align-self:flex-start;margin-top:6px}