/* 사슬 바다 v3 — 전체 화면 장면 + 메뉴 + 장면 톤 정보 창 */
:root{--paper:rgba(255,250,238,.95);--paper2:#fff8ea;--ink:#2f2a22;--ink2:#6e6253;--line:rgba(120,90,50,.16);--coral:#e2774a;--sea:#2a8f8a;--sea2:#4bb5ac;--good:#2f9e63;--warn:#c9821b;--bad:#cf4b3c}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:'Gowun Dodum',system-ui,sans-serif;color:var(--ink);background:#0f2633;overflow:hidden}
h1,h2,h3,.brand,.menu,.btn,.pill,.tag,.big,.label{font-family:'Jua',sans-serif;font-weight:400}

/* 장면 */
.world{position:fixed;inset:0;overflow:hidden;container-type:inline-size}
.stage{position:absolute;container-type:inline-size}
.stage .base{position:absolute;inset:0;width:100%;height:100%}
.lyr{position:absolute;display:block}
.fb .lyr,.fm{position:absolute;inset:0;width:100%;height:100%}
.tint{position:absolute;inset:0;pointer-events:none;transition:background 3s}
/* 물결에 흔들리기 */
.bob{animation:bob 5s ease-in-out infinite;transform-origin:50% 55%}
.bob.slow{animation-duration:7s}.bob.d2{animation-delay:-3s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(.12cqw) rotate(.9deg)}}
.myboat{animation:rock 5.6s ease-in-out infinite;transform-origin:55% 72%}
@keyframes rock{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(.28cqw) rotate(.9deg)}}
.net{animation:netbob 5.6s ease-in-out infinite;transform-origin:0% 20%;transition:opacity 1.6s,clip-path 1.6s;clip-path:inset(0 0 0 0)}
@keyframes netbob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(.32cqw) rotate(1.4deg)}}
.net.tug{animation:netbob 5.6s ease-in-out infinite,tug .7s ease-out}
@keyframes tug{30%{translate:-.3cqw .25cqw}}
.anchor .net{opacity:0;clip-path:inset(0 100% 0 0)}
.anchor .myboat{animation-duration:9s}
/* 함께 캐는 배: 천천히 떠다니고, 새로 오면 오른쪽에서 들어온다 */
.fb{position:absolute;animation:drift 40s ease-in-out infinite alternate;transition:opacity 5s,translate 6s ease-out}
.fb.enter{opacity:0;translate:9cqw 0}
@keyframes drift{from{transform:translateX(-1.4cqw)}to{transform:translateX(1.4cqw)}}
.fm.flip{transform:scaleX(-1)}
.horizon i{position:absolute;width:.22cqw;height:.32cqw;background:#fff;border-radius:40% 40% 10% 10%;opacity:.8;animation:tw 4s ease-in-out infinite}
@keyframes tw{50%{opacity:.35}}
[data-time=night] .horizon i{background:#ffd98a;box-shadow:0 0 .4cqw #ffcf70}
/* 밤 불빛 */
.glow{position:absolute;display:block;pointer-events:none;opacity:0;transition:opacity 3s;transform:translate(-50%,-50%)}
.glow.lamp{width:3cqw;height:3cqw;border-radius:50%;background:radial-gradient(circle,rgba(255,236,170,1) 0,rgba(255,210,110,.55) 25%,rgba(255,200,90,0) 70%);animation:flick 3s ease-in-out infinite}
.glow.win{width:1.6cqw;height:1.2cqw;border-radius:50%;background:radial-gradient(circle,rgba(255,214,130,.95),rgba(255,190,90,0) 70%)}
.glow.lantern{width:2.2cqw;height:2.2cqw;border-radius:50%;background:radial-gradient(circle,rgba(255,226,150,1) 0,rgba(255,196,96,.5) 30%,rgba(255,190,80,0) 70%);animation:flick 2.4s ease-in-out infinite}
.glow.beam{width:26cqw;height:2.4cqw;transform-origin:0 50%;transform:translate(0,-50%) rotate(0);background:linear-gradient(90deg,rgba(255,240,190,.55),rgba(255,240,190,0));clip-path:polygon(0 45%,100% 0,100% 100%,0 55%);animation:sweep 9s linear infinite}
@keyframes flick{50%{filter:brightness(.82)}}
@keyframes sweep{0%{transform:translate(0,-50%) rotate(-25deg) scaleX(.2)}25%{transform:translate(0,-50%) rotate(10deg) scaleX(1)}50%{transform:translate(0,-50%) rotate(40deg) scaleX(.2)}100%{transform:translate(0,-50%) rotate(-25deg) scaleX(.2)}}
[data-time=night] .glow,[data-time=dusk] .glow.lamp,[data-time=dusk] .glow.win{opacity:1}
[data-time=dusk] .glow.lamp,[data-time=dusk] .glow.win{opacity:.6}
.world canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.world.anchor .base{filter:saturate(.8)}
.tag{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:clamp(12px,1.1cqw,16px);background:var(--paper);color:var(--ink2);padding:.35em .95em;border-radius:1.2em;box-shadow:0 .2cqw .8cqw rgba(20,50,60,.22);cursor:pointer;transition:left 2s,top 2s}
.tag b{font-weight:400;color:var(--ink)}
.tag.warn{background:#fff1d6;color:#8a4b00}
.tag.new{animation:nudge 1s ease-in-out infinite}
@keyframes nudge{50%{transform:translate(-50%,-50%) scale(1.06)}}
.fish{position:absolute;width:3.2cqw;pointer-events:none;animation:leap 1.5s ease-out forwards}
.fish.gold{width:3.6cqw;filter:drop-shadow(0 0 .8cqw rgba(255,210,80,.95))}
@keyframes leap{0%{transform:translate(-50%,0) rotate(-30deg);opacity:0}15%{opacity:1}55%{transform:translate(-120%,-6cqw) rotate(10deg)}100%{transform:translate(-220%,-1cqw) rotate(60deg) scale(.6);opacity:0}}
.pop{position:absolute;transform:translateX(-50%);font-family:'Jua',sans-serif;font-size:clamp(13px,1.4cqw,20px);color:#fff;text-shadow:0 1px 6px rgba(20,60,70,.75);pointer-events:none;animation:up 1.6s ease-out forwards;white-space:nowrap}
@keyframes up{to{transform:translate(-50%,-3.5cqw);opacity:0}}
.chest{position:absolute;width:3.4cqw;pointer-events:none;filter:drop-shadow(0 0 1cqw rgba(255,220,120,.95));transition:left 6s ease-in-out,top 6s ease-in-out,opacity 1s}
.toast{position:absolute;left:50%;top:14%;transform:translateX(-50%);font-family:'Jua',sans-serif;font-size:clamp(15px,1.8cqw,24px);color:#fff;text-shadow:0 2px 10px rgba(20,60,70,.8);opacity:0;transition:opacity .6s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1}
body.paused *{animation-play-state:paused!important}

/* 메뉴 */
.nav{position:fixed;left:16px;right:16px;top:14px;display:flex;align-items:center;gap:14px;padding:8px 10px 8px 16px;background:var(--paper);border-radius:16px;box-shadow:0 6px 24px rgba(20,50,60,.22);z-index:10}
.brand{display:flex;align-items:center;gap:8px;font-size:20px;color:var(--ink)}
.brand img{width:26px;height:26px}
.menu{display:flex;gap:4px;margin-left:8px}
.menu a{color:var(--ink2);text-decoration:none;font-size:17px;padding:6px 12px 7px;border-bottom:3px solid transparent}
.menu a:hover{color:var(--ink)}
.menu a.on{color:var(--ink);border-bottom-color:var(--coral)}
.right{margin-left:auto;display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:15px;padding:5px 12px;border-radius:2em;background:#eef6f2;color:#256b47}
.pill i{width:9px;height:9px;border-radius:50%;background:#9aa}
.pill.good i{background:var(--good)}.pill.warn{background:#fff1d6;color:#8a4b00}.pill.warn i{background:var(--warn)}.pill.idle{background:#f0ece4;color:var(--ink2)}
.pill.soft{background:#f3efe6;color:var(--ink2);cursor:pointer}
.btn{font-size:16px;border:0;border-radius:12px;padding:8px 16px;cursor:pointer;background:#f0e9dc;color:var(--ink)}
.btn.main{background:var(--coral);color:#fff;box-shadow:0 3px 0 #b85a33}
.btn.main.stop{background:#cf4b3c;box-shadow:0 3px 0 #9c3328}
.btn.danger{background:#cf4b3c;color:#fff}
.btn:disabled{opacity:.55;cursor:default}
.btn.sm{font-size:13px;padding:5px 10px;border-radius:9px}
.offline{position:fixed;left:50%;top:80px;transform:translateX(-50%);background:#fff1d6;color:#8a4b00;padding:8px 16px;border-radius:12px;z-index:11;font-size:14px}

/* 정보 창 */
.sheet{position:fixed;right:16px;top:84px;bottom:16px;width:min(620px,calc(100% - 32px));overflow:auto;background:var(--paper);border-radius:18px;box-shadow:0 10px 40px rgba(20,50,60,.3);padding:22px 24px 28px;z-index:9}
.close{position:absolute;right:14px;top:12px;border:0;background:none;font-size:18px;color:var(--ink2);cursor:pointer}
.sheet h2{font-size:26px;margin-bottom:2px}
.sheet .lead{color:var(--ink2);font-size:14px;margin-bottom:16px}
.sec{margin-top:18px}
.sec>h3{font-size:17px;color:var(--ink2);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.card{background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.card .label{font-size:14px;color:var(--ink2)}
.card .big{font-size:26px;color:var(--ink);line-height:1.25;margin-top:2px}
.card .big small{font-size:14px;color:var(--ink2);margin-left:3px}
.card .sub{font-size:12.5px;color:var(--ink2);margin-top:2px}
.card.warn .big{color:var(--warn)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.kv dt{color:var(--ink2)}.kv dd{text-align:right}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px;word-break:break-all}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.end{justify-content:flex-end}
.addr{display:flex;gap:8px;align-items:center;background:var(--paper2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.addr input{flex:1;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:#fff}
.note{font-size:13.5px;color:var(--ink2);margin-top:8px}
.note.bad{color:var(--bad)}.note.ok{color:var(--good)}
.fix{font-size:13.5px;background:#fff1d6;color:#8a4b00;border-radius:10px;padding:8px 10px;margin-top:8px}
.slider{margin-top:10px}
.slider .row{justify-content:space-between;font-size:14px}
.slider input{width:100%;accent-color:var(--coral)}
.locked{font-size:12.5px;color:var(--ink2)}
.chart{background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.chart svg{width:100%;height:110px;display:block}
.chartsvg .chline{fill:none;stroke:var(--sea);stroke-width:2.2;vector-effect:non-scaling-stroke}
.chartsvg .charea{fill:rgba(42,143,138,.14)}
.chartsvg .chline.s2{stroke:#6a6fc4}.chartsvg .charea.s2{fill:rgba(106,111,196,.14)}
.chmeta{font-size:12.5px;color:var(--ink2);margin-top:6px;display:flex;gap:14px;flex-wrap:wrap}
.list{background:var(--paper2);border:1px solid var(--line);border-radius:14px;max-height:220px;overflow:auto}
.list .it{display:flex;gap:10px;align-items:baseline;padding:7px 12px;border-bottom:1px solid var(--line);font-size:13.5px}
.list .it:last-child{border-bottom:0}
.list .it .t{color:var(--ink2);font-size:12.5px;white-space:nowrap}
.list .it .m{margin-left:auto;color:var(--ink2);font-size:12.5px;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:#bbb;flex:none;align-self:center}
.dot.good{background:var(--good)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}.dot.info{background:var(--sea2)}
.log .it{font-family:ui-monospace,Consolas,monospace;font-size:12px}
.links a{font-size:12.5px;color:var(--coral);margin-left:8px}
.steps{counter-reset:s;display:grid;gap:14px}
.steps li{list-style:none;background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.steps h4{font-family:'Jua',sans-serif;font-weight:400;font-size:18px;margin-bottom:4px}
.steps h4::before{counter-increment:s;content:counter(s);display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--coral);color:#fff;align-items:center;justify-content:center;margin-right:8px;font-size:14px}
.steps p{font-size:14px;color:var(--ink2);margin-top:4px}
.steps a{color:var(--coral)}
.qr{margin-top:10px;background:#fff;border-radius:12px;padding:10px;width:200px}
.qr svg{width:100%;height:auto}
.modal{position:fixed;inset:0;background:rgba(20,40,50,.45);display:flex;align-items:center;justify-content:center;z-index:20}
.paper{background:var(--paper);border-radius:18px;padding:22px 24px;width:min(420px,90%)}
.paper h3{font-size:22px;margin-bottom:8px}.paper p{font-size:14.5px;color:var(--ink2);margin-bottom:16px}
@media (max-width:900px){.menu a{padding:6px 7px;font-size:15px}.brand span{display:none}}

/* 채굴 몫을 덜 쓰려고 움직임은 초당 10번 안팎으로만 (구간마다 steps) */
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(.085cqw) rotate(.64deg)}50%{transform:translateY(.12cqw) rotate(.9deg)}75%{transform:translateY(.035cqw) rotate(.26deg)}}
@keyframes rock{0%,100%{transform:translateY(0) rotate(-.7deg)}25%{transform:translateY(.14cqw) rotate(.1deg)}50%{transform:translateY(.28cqw) rotate(.9deg)}75%{transform:translateY(.14cqw) rotate(.1deg)}}
@keyframes netbob{0%,100%{transform:translateY(0) rotate(-1deg)}25%{transform:translateY(.16cqw) rotate(.2deg)}50%{transform:translateY(.32cqw) rotate(1.4deg)}75%{transform:translateY(.16cqw) rotate(.2deg)}}
.bob{animation-timing-function:steps(12)}
.myboat,.net{animation-timing-function:steps(14)}
.net.tug{animation-timing-function:steps(14),ease-out}
.fb{animation-timing-function:steps(240)}
.glow.lamp,.glow.lantern{animation-timing-function:steps(12)}
.glow.beam{animation-timing-function:steps(22)}
.horizon i{animation-timing-function:steps(10)}

/* 늘 도는 움직임은 skin.js 가 0.1초 박자로만 바꾼다 (CSS 무한 움직임은 매 주기 다시 합성돼 채굴을 깎는다) */
.bob,.myboat,.net,.fb,.glow,.horizon i{animation:none!important}
.myboat,.net,.fb,.fb .lyr,.harbor1,.glow.beam{will-change:transform}
.stage>.lyr.bob{will-change:transform}

/* 부표 줄: 내 배와 동료 배가 한 그물로 엮임 */
.ropes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.rope{transition:opacity 5s}.rope.enter{opacity:0}
.rope .line{fill:none;stroke:rgba(255,248,225,.55);stroke-width:1.3;vector-effect:non-scaling-stroke}
.rope .floats{fill:none;stroke:#f3b35a;stroke-width:5;stroke-linecap:round;stroke-dasharray:0 26;vector-effect:non-scaling-stroke;opacity:.9}
[data-time=night] .rope .line{stroke:rgba(255,214,140,.5)}
[data-time=night] .rope .floats{stroke:#ffd27a;filter:drop-shadow(0 0 3px #ffc860)}
.ropes .pl{fill:#fff6c8;filter:drop-shadow(0 0 4px #ffd86a)}
/* 화면 위 카드: 선단 · 가방 */
.hud{position:fixed;z-index:8;background:var(--paper);border-radius:16px;box-shadow:0 6px 24px rgba(20,50,60,.25);text-decoration:none;color:var(--ink);display:flex;align-items:center}
.fleetcard{left:16px;bottom:16px;gap:12px;padding:10px 16px 10px 14px}
.fleetcard .fn{font-family:'Jua',sans-serif;display:flex;align-items:baseline;gap:2px}
.fleetcard .fn b{font-weight:400;font-size:44px;line-height:1;color:var(--sea)}
.fleetcard .fn small{font-size:18px;color:var(--ink2)}
.fleetcard .ft{display:flex;flex-direction:column}
.fleetcard .fh{font-family:'Jua',sans-serif;font-size:17px}
.fleetcard .fs{font-size:12.5px;color:var(--ink2);line-height:1.45}
.bagbtn{right:16px;bottom:16px;gap:8px;padding:8px 14px;font-family:'Jua',sans-serif;font-size:17px}
.bagbtn img{width:34px}
.bagbtn b{font-weight:400;background:var(--coral);color:#fff;border-radius:1em;padding:1px 9px;font-size:15px}
/* 가방 칸 */
.inv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.slot{background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:10px 10px 12px;text-align:center;box-shadow:inset 0 -3px 0 rgba(120,90,50,.08)}
.slot .ic{height:44px;display:flex;align-items:center;justify-content:center}
.slot .ic img{max-height:40px;max-width:56px}
.slot .ic img.gray{filter:grayscale(1) opacity(.55)}
.slot .n{font-family:'Jua',sans-serif;font-size:24px;line-height:1.2;margin-top:2px}
.slot .lb{font-size:13.5px;color:var(--ink)}
.slot .sb{font-size:11.5px;color:var(--ink2);margin-top:2px}
.slot.warn .n{color:var(--warn)}
.slot.gold{background:#fff4d8;border-color:#f0d49a}
.coin{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a6,#f0b53e 60%,#c98a1d);color:#7a4b06;font-family:'Jua',sans-serif;font-size:13px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.coin.sm{width:20px;height:20px;font-size:8px;flex:none}
.pie{width:38px;height:38px}.pie circle{fill:#e3efe9}.pie path{fill:var(--sea)}
svg.hours{width:100%;height:auto;display:block}
.hours .bar{fill:var(--sea2)}.hours .bar.now{fill:var(--coral)}
.hours .unk{fill:none;stroke:#c9bfae;stroke-dasharray:3 3}
.hours text{font-size:10px;fill:var(--ink2);text-anchor:middle}
.hours .v{fill:var(--ink);font-size:9.5px}
@media (max-width:700px){.fleetcard .fn b{font-size:34px}.inv{grid-template-columns:repeat(2,1fr)}}
.hours .est{fill:rgba(75,181,172,.32);stroke:rgba(42,143,138,.45);stroke-dasharray:3 2}
.hours .v.e{fill:var(--ink2)}
.lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.lg.bar{background:var(--sea2)}.lg.est{background:rgba(75,181,172,.32);border:1px dashed rgba(42,143,138,.6)}

/* 배끼리 잇는 줄은 뺌 (보기 별로라는 의견) */
.ropes{display:none}

/* 감싸개: 흔들림은 감싸개에, 그림은 꽉 채움 */
.myboat,.bw{position:absolute}
.bw{inset:0}
.lyr.full{position:absolute;inset:0;width:100%;height:100%}
.myboat{transform-origin:55% 72%;will-change:transform}
.bw{transform-origin:50% 55%;will-change:transform}
/* 같은 선단 깃발 */
.flag{position:absolute;display:block;transform-origin:0 50%;margin-top:-.2cqw;pointer-events:none}
.flag svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flag path{fill:#e2774a;stroke:#b4532c;stroke-width:.8}
.flag circle{fill:#fff4dc}
.fm.flip .flag{transform:scaleX(-1)}
.mlamp{position:absolute;left:-60%;top:-60%;width:220%;height:220%;border-radius:50%;background:radial-gradient(circle,rgba(255,232,150,.95),rgba(255,200,90,0) 65%);opacity:0;transition:opacity 1.5s}
.fest .mlamp,[data-time=night] .fb .mlamp{opacity:1}
[data-time=night] .fb .mlamp{opacity:.55}
/* 공동 어망 */
.commons{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.commons .water{fill:rgba(20,80,90,.16);stroke:rgba(255,255,255,.35);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.commons .fl{fill:#f08a3e;stroke:#fff1da;stroke-width:.8;vector-effect:non-scaling-stroke}
.commons .fishes path{fill:rgba(225,238,245,.9);stroke:rgba(70,100,120,.5);stroke-width:.6;vector-effect:non-scaling-stroke}
[data-time=night] .commons .fl{fill:#ffc26a;filter:drop-shadow(0 0 2px #ffcf70)}
/* 축제 불꽃 · 동전 */
.spark{position:absolute;width:.42cqw;height:.42cqw;border-radius:50%;pointer-events:none;box-shadow:0 0 .6cqw currentColor;animation:spark 1.6s ease-out forwards}
@keyframes spark{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 2cqw)) scale(.3);opacity:0}}
.coinpop{position:absolute;width:1.5cqw;height:1.5cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;font:400 .55cqw 'Jua',sans-serif;color:#7a4b06;background:radial-gradient(circle at 35% 30%,#ffe9a6,#f0b53e 60%,#c98a1d);pointer-events:none;animation:coin 1.8s ease-out forwards}
@keyframes coin{0%{transform:translate(-50%,0) scale(.4);opacity:0}25%{transform:translate(-50%,-4cqw) scale(1);opacity:1}100%{transform:translate(-50%,-1cqw) scale(.8);opacity:0}}
.pop.big{font-size:clamp(20px,2.4cqw,34px);color:#fff4c2;animation-duration:3.8s}
/* 항구 다녀오기 */
.me{position:absolute;inset:0;transform-origin:39.4% 77.8%;transition:transform 9s ease-in-out}
.trip .net{opacity:0}
.trip .myboat .lyr{-webkit-mask-image:linear-gradient(#000 70%,transparent 84%);mask-image:linear-gradient(#000 70%,transparent 84%)}

/* 갈매기 */
.gull{position:absolute;display:none;pointer-events:none;will-change:left,top}
[data-time=night] .gull{opacity:.55}
/* 가방: 내 배 단계 */
.boatcard{display:flex;gap:14px;align-items:center;background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:10px}
.boatcard img{width:92px;height:76px;object-fit:contain;object-position:center top}
.boatcard .bc{flex:1}
.boatcard .bt{font-family:'Jua',sans-serif;font-size:17px}
.boatcard .bt b{font-weight:400;color:var(--sea)}
.boatcard .bar{height:9px;border-radius:9px;background:#ece3d2;margin:7px 0 5px;overflow:hidden}
.boatcard .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sea2),var(--sea));border-radius:9px}
.boatcard .bs{font-size:12.5px;color:var(--ink2)}

.boatcard .bs b{font-weight:400;font-family:'Jua',sans-serif;color:var(--ink)}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:-2px 0 10px}
.tiers span{font-size:12px;color:var(--ink2);text-align:center;padding:5px 2px;border-bottom:3px solid #e6dcc9}
.tiers span small{display:block;font-size:11px;opacity:.8}
.tiers span.on{color:var(--ink);border-bottom-color:var(--coral)}

/* 좁은 화면 (휴대폰으로 시연판을 볼 때) */
@media (max-width:700px){
  .nav{left:8px;right:8px;top:8px;gap:8px;padding:6px 8px}
  .brand{font-size:0}.brand img{width:22px;height:22px}
  .menu{overflow-x:auto;scrollbar-width:none;margin-left:0;flex:1;min-width:0}
  .menu a{white-space:nowrap;font-size:14px;padding:5px 6px 6px}
  #wx,#statePill{display:none}
  .btn.main{font-size:13px;padding:6px 10px;white-space:nowrap}
  .tag{white-space:normal;max-width:72vw;text-align:center;font-size:12px}
  .sheet{top:64px;left:8px;right:8px;width:auto;bottom:8px;padding:18px 16px 22px}
  .fleetcard{left:8px;bottom:8px;padding:8px 12px}
  .bagbtn{right:8px;bottom:8px}
  .toast{white-space:normal;width:86vw;text-align:center;font-size:17px}
}
/* 꼬리표는 내용 폭 그대로 (화면 가장자리에서 한 글자씩 꺾이지 않게) */
.tag{width:max-content}
@media (max-width:700px){
  .bagbtn span{display:none}
  .bagbtn{padding:6px 10px}
  .fleetcard{max-width:calc(100% - 128px)}
  .fleetcard .fn b{font-size:30px}
  .fleetcard .fs{font-size:11.5px}
}

/* 일지 */
.diary{display:grid;gap:8px}
.day{display:grid;grid-template-columns:76px 74px 1fr auto;align-items:center;gap:10px;background:var(--paper2);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:14px}
.day .dd{font-family:'Jua',sans-serif;font-size:15px}
.day .dc{display:flex;align-items:center;gap:4px}
.day .dc img{width:24px}.day .dc b{font-family:'Jua',sans-serif;font-weight:400;font-size:17px}.day .dc small{color:var(--ink2);font-size:12px}
.day .dm b{font-family:'Jua',sans-serif;font-weight:400;font-size:16px}
.day .ds{font-size:12px;color:var(--ink2)}
.day.off{opacity:.55}
.list .it span:nth-child(3){font-variant-numeric:tabular-nums}
/* 웹: PC 조종 칸 숨김 */
body.web #actBtn,body.web .menu a[data-v=system]{display:none}
.onboard{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(15,38,51,.35);padding:16px}
.onboard .paper{width:min(460px,100%)}
.onboard input{width:100%;font:15px ui-monospace,Consolas,monospace;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0 6px;background:#fff;color:var(--ink)}
.onboard .err{color:var(--bad);font-size:13px;min-height:18px}
.onboard .small{font-size:12.5px;color:var(--ink2);margin-top:10px;line-height:1.5}
@media (max-width:700px){.day{grid-template-columns:64px 60px 1fr;}.day .ds{display:none}}

/* 항구 마을 */
.vcard{background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-top:14px;font-size:14px}
.vcard b{font-family:'Jua',sans-serif;font-weight:400;font-size:16px;color:var(--sea)}
.vcard .vs{font-size:12.5px;color:var(--ink2);margin-top:3px}
.glow.vwin{display:none}.v3 .glow.vwin{display:block}

/* 꼬리표 v2: 아이콘 · 제목 · 큰 숫자, 꼬리 끝이 물건을 가리킴 */
.tag{display:flex;align-items:center;gap:9px;transform:translate(-50%,-100%);padding:7px 14px 8px 8px;border-radius:16px;background:rgba(255,252,244,.97);color:var(--ink);box-shadow:0 6px 20px rgba(15,45,60,.28);font-size:13px;line-height:1.25;transition:left 2s,top 2s,box-shadow .3s}
.tag::after{content:'';position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:0 0 3px 0;box-shadow:3px 3px 6px rgba(15,45,60,.12)}
.tag:hover{box-shadow:0 8px 26px rgba(15,45,60,.38)}
.tag .ti{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sea)}
.tag .ti svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tag .i-boat{background:var(--coral)}.tag .i-harbor{background:#c0563b}.tag .i-net{background:#d98a2b}.tag .i-fleet{background:var(--sea)}
.tag .tt{display:flex;flex-direction:column}
.tag small{font-size:12px;color:var(--ink2);font-family:'Gowun Dodum',sans-serif}
.tag b{font-family:'Jua',sans-serif;font-weight:400;font-size:19px;color:var(--ink);line-height:1.2}
.tag em{font-style:normal;font-size:12px;color:var(--ink2)}
.tag.warn{background:#fff3dc}.tag.warn .ti{background:var(--warn)}
@keyframes nudge{50%{transform:translate(-50%,-100%) scale(1.06)}}
/* 둘러보기 */
.coach-dim{position:fixed;inset:0;background:rgba(10,28,38,.5);z-index:40}
.spot{z-index:41!important;box-shadow:0 0 0 4px #fff,0 0 0 9px rgba(226,119,74,.85),0 10px 40px rgba(0,0,0,.4)!important;animation:none!important}
.coach{position:fixed;z-index:42;width:min(340px,calc(100vw - 24px));background:var(--paper);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.35);padding:14px 16px 12px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.coach b{font-family:'Jua',sans-serif;font-weight:400;color:var(--sea)}
.coach .row{display:flex;align-items:center;gap:8px;margin-top:10px}
.coach .row span{font-size:12px;color:var(--ink2);margin-right:auto}
.help{border:0;background:#f0e9dc;color:var(--ink);font:16px 'Jua',sans-serif;width:32px;height:32px;border-radius:50%;cursor:pointer}
@media (max-width:700px){.tag{padding:5px 10px 6px 6px;gap:7px}.tag .ti{width:26px;height:26px}.tag .ti svg{width:15px;height:15px}.tag b{font-size:16px}.tag small,.tag em{font-size:11px}}
/* 바다는 따로 쌓이는 층이라, 어둡게 덮는 건 짚는 물건의 그림자로 한다 */
.coach-dim{background:transparent}
.spot{box-shadow:0 0 0 4px #fff,0 0 0 9px rgba(226,119,74,.9),0 0 0 9999px rgba(10,28,38,.5)!important}