/* app.css — 「조선거상」 화면.
   모바일 세로 화면이 기준. 데스크톱에서는 가운데 폭을 잡아 폰처럼 보여준다.

   ⚠️이 게임은 다크 한 벌로 간다(새벽 물가의 어둠이 이 게임의 세계다).
      라이트 테마를 따로 두지 않는 대신 배경·글자색을 전부 명시한다 — 어느 host 위에 얹혀도 안 깨지게.
   ⚠️색은 토큰(:root)으로만 쓴다. 금색은 '기록·값어치', 초록은 '좋은 조황', 빨강은 '위험'.
      이 세 가지 의미를 섞어 쓰면 화면이 무슨 말을 하는지 알 수 없게 된다.
   ⚠️시간대 색감은 배경 이미지 위에 [data-part] 오버레이 한 겹으로 만든다 —
      새벽·한낮·해질녘·밤을 이미지 네 장이 아니라 한 장으로 덮기 위한 장치다. */

:root {
  --bg: #0b0e14;
  --bg2: #0f131b;
  --panel: #161b26;
  --panel2: #1c2331;
  --line: #242c3a;
  --line2: #1d2431;
  --ink: #eef1f7;
  --sub: #9aa3b5;
  --sub2: #6b7488;
  --gold: #f5c451;
  --gold2: #ffdc8a;
  --green: #4ade80;
  --blue: #5b8cff;
  --red: #ff6b6b;
  --safearea: env(safe-area-inset-bottom, 0px);
  --glow: 0 8px 30px -12px rgba(245, 196, 81, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: "Apple SD Gothic Neo", Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", system-ui, sans-serif;
  font-size: 15px; line-height: 1.6; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none; overscroll-behavior-x: none;
}
/* ⚠️touch-action 을 안 정하면 브라우저가 가로 제스처까지 제 것으로 가져간다 —
   손가락을 대자마자 pointercancel 이 날아와 장 넘기기가 **실기기에서 전혀 안 먹었다**(실측).
   세로 스크롤만 브라우저에 넘기고 가로는 우리가 받는다. */
#app { max-width: 460px; margin: 0 auto; height: 100%; background: var(--bg); position: relative;
  overflow: hidden; touch-action: pan-y;
  /* ⚠️왼쪽 가장자리에서 오른쪽으로 미는 건 브라우저의 '뒤로가기' 제스처와 정면으로 겹친다 —
     그래서 오른쪽 장으로는 잘 가는데 왼쪽 장으로는 안 간다는 말이 나온다(실기기).
     body 에만 걸어 둔 건 소용이 없다. 실제로 스크롤하는 상자마다 꺼 줘야 한다. */
  overscroll-behavior-x: none; }
@media (min-width: 470px) { #app { box-shadow: 0 0 0 1px var(--line), 0 0 80px -20px rgba(0,0,0,.9); } }

.num { font-variant-numeric: tabular-nums; }
.tx2 { color: var(--sub); } .tx3 { color: var(--sub2); }
.fs12 { font-size: 12px; } .fs13 { font-size: 13px; } .fs14 { font-size: 14px; } .fs17 { font-size: 17px; }
.mt4{margin-top:4px}.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}
.mb4{margin-bottom:4px}.mb6{margin-bottom:6px}.mb10{margin-bottom:10px}
/* 페이저가 화면 위에 떠 있으니 마지막 카드가 그 밑에 깔리지 않게 자리를 비운다.
   ⚠️딱 맞춰 두면 여유가 3px 밖에 안 남아 카드가 하단바에 붙어 보인다(실측).
      한 손가락 굵기는 띄워 둔다. */
.pad { height: calc(96px + var(--safearea)); }
.empty { text-align: center; color: var(--sub2); font-size: 13.5px; padding: 28px 14px; line-height: 1.85; }
b { font-weight: 700; }

/* ── 뼈대 ── */
.top {
  height: 54px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 16px; background: rgba(11,14,20,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); position: relative; z-index: 5; flex: none;
}
.top .l { display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 900; letter-spacing: -.05em; }
.top .r { display: flex; align-items: center; gap: 2px; }
.ico { width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; border-radius: 11px; }
.ico:active { background: var(--panel2); }
.ico svg { width: 22px; height: 22px; fill: none; stroke: var(--sub); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 페이저가 position:absolute 로 떠 있어 더 이상 자리를 차지하지 않는다 —
   본문이 화면 끝까지 내려가고, 그림이 그만큼 커진다. */
.body { height: calc(100% - 54px); display: flex; flex-direction: column; }
.scroll { padding-bottom: 0; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  overscroll-behavior: none; }
.tabbar {
  display: flex; border-top: 1px solid var(--line); background: rgba(11,14,20,.94); backdrop-filter: blur(12px);
  padding-bottom: var(--safearea); flex: none;
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 8px; color: var(--sub2); cursor: pointer; }
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab span { font-size: 10.5px; font-weight: 700; letter-spacing: -.02em; }
.tab.on { color: var(--gold); }

.sec { padding: 16px 16px 0; }
.sec .h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
/* 섹션 제목 — 랜딩의 '초록 눈썹 + 굵은 제목' 구성을 목록 화면에 맞게 줄인 형태.
   한글에 자간을 벌린 대문자 라벨은 안 어울려서, 초록은 앞의 짧은 막대로만 남긴다. */
.sec .h .t {
  font-size: 14.5px; font-weight: 800; letter-spacing: -.03em; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.sec .h .t::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--green); flex: none; }
.sec .h .more { font-size: 12.5px; color: var(--sub2); cursor: pointer; font-weight: 600; }
.sec .h .more.acc { color: var(--gold); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.card.tight { padding: 4px 0; }

.kv2 { display: flex; flex-wrap: wrap; }
.kv2 > div { width: 50%; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 16px; }
.kv2 > div span { color: var(--sub2); font-size: 12.5px; flex: none; }
.kv2 > div b { font-size: 13.5px; font-weight: 700; text-align: right; }
.card:not(.tight) .kv2 { margin: 0 -16px; }

.row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line2); }
.card.tight > .row:first-child { border-top: 0; }
.row .nm { flex: 1; min-width: 0; }
.row .nm b { font-size: 14.5px; font-weight: 700; }
.row .ra { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.row.own { opacity: .55; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line2); }
.card.tight > .setrow:first-child { border-top: 0; }
.setrow b { font-size: 14.5px; }

/* ── 버튼 ── */
.btn {
  display: block; width: 100%; border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
  border-radius: 14px; padding: 13px; font-size: 14.5px; font-weight: 800; font-family: inherit;
  cursor: pointer; letter-spacing: -.02em; transition: transform .08s, filter .12s;
}
.btn:active { transform: scale(.985); }
.btn.pri {
  background: linear-gradient(180deg, var(--gold2), var(--gold)); border-color: var(--gold);
  color: #241a02; box-shadow: var(--glow);
}
.btn.big { padding: 17px; font-size: 16.5px; border-radius: 16px; }
.btn.sm { padding: 11px; font-size: 13.5px; }
.btn.xs { width: auto; padding: 8px 13px; font-size: 12.5px; border-radius: 10px; }
.btn.off { opacity: .35; pointer-events: none; box-shadow: none; }
.btn.danger { background: transparent; color: var(--red); border-color: rgba(255,107,107,.34); box-shadow: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 켜고 끄는 스위치 */
.sw { width: 50px; height: 30px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); position: relative; cursor: pointer; flex: none; padding: 0; }
.sw i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--sub2); transition: left .18s, background .18s; }
.sw.on { background: rgba(245,196,81,.2); border-color: var(--gold); }
.sw.on i { left: 25px; background: var(--gold); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  background: var(--panel); color: var(--sub); border: 1px solid var(--line); cursor: pointer;
}
.chip.on { background: rgba(245,196,81,.14); border-color: var(--gold); color: var(--gold); }
.tag {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2.5px 9px; border-radius: 8px;
  background: var(--panel2); color: var(--sub2); border: 1px solid var(--line); vertical-align: 1px;
}
.tag.acc { color: var(--gold); border-color: rgba(245,196,81,.4); background: rgba(245,196,81,.1); }
.tag.gold { color: var(--gold); border-color: rgba(245,196,81,.4); background: rgba(245,196,81,.1); }
.tag.up { color: var(--green); border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.1); }
.tag.dn { color: var(--red); border-color: rgba(255,107,107,.4); background: rgba(255,107,107,.1); }
.dn { color: var(--red); }

/* ── 히어로: 배경 + 캐릭터 두 장을 겹친다 ── */
.hero { position: relative; height: 320px; overflow: hidden; background: var(--bg); }
.hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .me {
  position: absolute; inset: 22px 0 0; width: 100%; height: calc(100% - 22px);
  object-fit: contain; object-position: center bottom; z-index: 2;
  filter: drop-shadow(0 12px 34px rgba(0,0,0,.75));
}
/* 인물 뒤로 금색 후광 — 랜딩의 히어로 글로우를 게임 안으로 가져온 것 */
.hero::after {
  content: ""; position: absolute; left: 50%; bottom: 4%; width: 74%; height: 62%;
  transform: translateX(-50%); z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(245,196,81,.22), transparent 68%);
}
.hero .veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 1%, rgba(11,14,20,.72) 22%, transparent 56%);
}
.hero .hero-top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  background: rgba(11,14,20,.62); color: var(--ink); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px);
}
.hero .bub {
  position: absolute; left: 16px; bottom: 14px; z-index: 4; max-width: 78%;
  background: rgba(11,14,20,.66); border: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(10px);
  padding: 10px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.7; color: var(--ink);
}
.hero .bub b { color: var(--gold); }

/* 시간대 — 배경 한 장을 네 가지 시간으로 만든다 */
.tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; }
[data-part="dawn"] .bg { filter: saturate(.9) brightness(.8); }
[data-part="dawn"] .tint { background: linear-gradient(to top, #ffb98a 0%, #9fb6d8 55%, #5b6d96 100%); opacity: .4; }
[data-part="day"] .bg { filter: brightness(.86); }
[data-part="day"] .tint { background: #b9d4e6; opacity: .1; }
[data-part="dusk"] .bg { filter: saturate(1.1) brightness(.82); }
[data-part="dusk"] .tint { background: linear-gradient(to top, #ff7a3d 0%, #ff9d5c 38%, #5b4f8c 100%); opacity: .44; }
[data-part="night"] .bg { filter: saturate(.5) brightness(.36); }
[data-part="night"] .tint { background: linear-gradient(to top, #0b1225 0%, #101a33 60%, #16233f 100%); opacity: .62; }
[data-part="night"] .me { filter: brightness(.7) saturate(.85) drop-shadow(0 12px 34px rgba(0,0,0,.8)); }
[data-part="dusk"] .me { filter: brightness(.9) saturate(1.05) drop-shadow(0 12px 34px rgba(0,0,0,.8)); }

/* ── 체력 ── */
.apbar { position: relative; height: 28px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; margin-bottom: 10px; }
.apfill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(74,222,128,.3), rgba(74,222,128,.5)); transition: width .4s; }
.aptx { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--ink); }

/* ── 환경 카드 ── */
.envcard .eh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.envcard .eh b { font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.sunbar { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 11px; color: var(--sub2); }
.sunline { flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #46527a, var(--gold), #ff7a3d); position: relative; }
.sunline i { position: absolute; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); transform: translateX(-50%); }
.envnote { margin-top: 13px; font-size: 12.5px; color: var(--sub); line-height: 1.75; background: var(--bg2); border: 1px solid var(--line2); border-radius: 12px; padding: 11px 13px; }

.keeprow { display: flex; gap: 5px; flex-wrap: wrap; padding: 13px 16px 4px; }
.kchip { font-size: 11.5px; font-weight: 700; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 4px 9px; }
.card.tight .btn.sm { margin: 9px 16px 13px; width: calc(100% - 32px); }
.keeplist { max-height: 44vh; overflow-y: auto; margin: 0 -18px; }

/* ── 스탯 바 ── */
.sb { display: flex; align-items: center; gap: 10px; padding: 7px 16px; }
.sb > span { font-size: 12px; color: var(--sub2); width: 30px; flex: none; }
.sb > b { font-size: 12.5px; width: 26px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.sbb { flex: 1; height: 7px; border-radius: 4px; background: var(--bg2); overflow: hidden; }
.sbb i { display: block; height: 100%; border-radius: 4px; transition: width .35s; }
.strow { display: flex; align-items: center; gap: 8px; padding-right: 14px; }
.strow .sb { flex: 1; }

/* ── 포인트 ── */
.spot { padding: 0; overflow: hidden; }
.spot.on { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(245,196,81,.3), var(--glow); }
.spot.lock { opacity: .5; }
.spimg { position: relative; height: 120px; }
.spimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lockbadge { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,14,20,.62); color: var(--ink); font-weight: 800; font-size: 14px; }
.spbody { padding: 13px 15px 15px; }
.spname { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.spname b { font-size: 16.5px; font-weight: 900; letter-spacing: -.04em; }
.spmeta { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--sub); }
.nearbox { padding: 16px; }

/* ── 물고기 그림 ── 그려 둔 게 있으면 그림, 없으면 이모지. 둘이 같은 자리에 앉게 맞춘다. */
.fic{display:inline-block; vertical-align:middle; height:auto; object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.fie{display:inline-block; vertical-align:middle; line-height:1}

/* ── 설정 ── 한 장에 다 편다.
   구획 제목(h4) 밑에 회색 한 줄(.dim)로 "이게 뭐고 왜 있는지"를 먼저 말하고,
   손댈 것을 바로 그 자리에 둔다. 제목 위 가로선이 구획을 나눈다. */
.setpage{margin-top:4px}
.setpage h4{
  font-size:13px; font-weight:900; letter-spacing:-.02em; color:var(--sub);
  margin:22px 0 7px; padding-top:16px; border-top:1px solid var(--line2);
}
.setpage h4:first-child{margin-top:6px; padding-top:0; border-top:0}
.setpage .dim{font-size:12.5px; line-height:1.75; color:var(--sub2); margin:0 0 11px}
.setpage .dim b{color:var(--sub)}
.setbtns{display:flex; flex-direction:column; gap:8px}
.big{
  display:block; width:100%; text-align:center; box-sizing:border-box;
  border-radius:13px; padding:14px 16px; font-size:14.5px; font-weight:800;
  font-family:inherit; letter-spacing:-.025em; cursor:pointer; text-decoration:none;
}
.big.ghost{background:var(--panel2); border:1px solid var(--line); color:var(--ink)}
.big.danger{background:transparent; border:1px solid rgba(255,107,107,.34); color:var(--red)}
.big:active{filter:brightness(1.15)}
.setpage .fine{
  font-size:11px; line-height:1.7; color:var(--sub2); opacity:.72;
  margin:26px 0 4px; padding-top:15px; border-top:1px solid var(--line2);
}

.slots{display:flex; flex-direction:column; gap:9px}
.slot{display:flex; align-items:center; gap:13px; background:var(--panel2); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; cursor:pointer}
.slot .sn{font-size:13px; font-weight:900; color:var(--sub2); width:30px; flex:none}
.slot .sbd{flex:1; min-width:0}
/* ⚠️.sb 는 재주 막대(display:flex)가 이미 쓰고 있다 — 여기서 쓰면 이름과 설명이 옆으로 붙는다. */
.slot .sbd b{font-size:15px; font-weight:800; display:block}
.slot.on{border-color:var(--gold); background:rgba(245,196,81,.09)}

.terms{display:flex; flex-direction:column; gap:8px; max-height:56vh; overflow-y:auto}
.term{background:var(--bg2); border:1px solid var(--line2); border-radius:13px; padding:12px 14px}
.term b{font-size:14.5px; font-weight:800; display:block; margin-bottom:3px; color:var(--gold)}

/* ── 길목의 일(사건) ── */
.promo.ev .promobox{max-width:420px}
.evbody{font-size:15px; line-height:1.95; color:var(--ink); text-align:left; margin-top:16px}
.evhist{
  margin-top:14px; text-align:left; font-size:12.5px; line-height:1.75; color:var(--sub2);
  background:rgba(245,196,81,.07); border:1px solid rgba(245,196,81,.22); border-radius:12px; padding:10px 12px;
}
.evopts{display:flex; flex-direction:column; gap:9px; margin-top:20px}
.btn.evopt{text-align:left; padding:14px 16px; line-height:1.45}
.btn.evopt b{display:block; font-size:14.5px; font-weight:800}
.btn.evopt span{display:block; margin-top:3px}
.evchg{display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-top:18px}
.evchg span{
  font-size:12.5px; font-weight:700; padding:5px 13px; border-radius:999px;
  background:var(--panel2); border:1px solid var(--line); color:var(--ink);
}
.promobox h2.bad{color:var(--red); text-shadow:0 0 40px rgba(255,107,107,.35)}

/* ── 신분 ── */
.pill.gold{background:rgba(245,196,81,.22); color:var(--gold2); border:1px solid rgba(245,196,81,.45)}
.rankcard{cursor:pointer}
.rkh{display:flex; align-items:center; gap:13px}
.rke{font-size:32px; line-height:1}
.rkh b{font-size:17px; font-weight:900; letter-spacing:-.04em; display:block}
.rkbar{display:flex; align-items:center; gap:9px; margin-top:7px}
.rkbar > span{font-size:11.5px; color:var(--sub2); width:28px; flex:none}
.rkbar > b{font-size:11.5px; width:88px; text-align:right; flex:none; color:var(--sub)}
.rkb{flex:1; height:7px; border-radius:4px; background:var(--bg2); overflow:hidden}
.rkb i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold2)); transition:width .4s}
.rkb i.g{background:linear-gradient(90deg,#2f8f5c,var(--green))}

.ladder{display:flex; flex-direction:column; gap:8px; max-height:58vh; overflow-y:auto}
.rung{display:flex; gap:12px; align-items:flex-start; padding:12px 13px; border-radius:14px;
  background:var(--bg2); border:1px solid var(--line2)}
.rung .re{font-size:24px; line-height:1.1; flex:none; width:30px; text-align:center}
/* 사다리에 '그 자리'의 그림을 같이 보여준다 — 오르면 뭐가 달라지는지 말보다 빠르다 */
.rung .rbg{flex:none; width:54px; height:54px; border-radius:11px; overflow:hidden; background:var(--panel2); display:block}
.rung .rbg img{width:100%; height:100%; object-fit:cover; display:block}
.rung.locked .rbg img{filter:grayscale(1) brightness(.5)}
.rung .rn{flex:1; min-width:0}
.rung .rn b{font-size:15px; font-weight:800; letter-spacing:-.03em}
.rung.on{border-color:var(--gold); background:rgba(245,196,81,.09); box-shadow:0 0 0 1px rgba(245,196,81,.25)}
.rung.done{opacity:.62}
.rung.locked{opacity:.5}
.rung.locked .re{filter:grayscale(1)}

/* 승급 연출 — 돈이 늘어난 것보다 이 장면이 이 게임의 보상이다 */
.promo{position:fixed; inset:0; z-index:950; background:radial-gradient(ellipse at 50% 34%, #1a2436 0%, #05070b 72%);
  display:grid; place-items:center; padding:26px 22px; opacity:0; transition:opacity .3s; overflow-y:auto}
.promo.on{opacity:1}
.promobox{max-width:400px; width:100%; text-align:center; position:relative}
/* 승급하면 '새로 얻은 자리'가 뒤에 깔린다 */
.promobg{position:fixed; inset:0; z-index:-1; overflow:hidden}
.promobg img{width:100%; height:100%; object-fit:cover; animation:promoZoom 12s ease-out both}
@keyframes promoZoom{from{transform:scale(1.14)}to{transform:scale(1)}}
.promoveil{position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 40%, rgba(5,7,11,.62), rgba(5,7,11,.92) 78%)}
.promoe{font-size:70px; line-height:1.1; margin:10px 0 4px; filter:drop-shadow(0 0 34px rgba(245,196,81,.55));
  animation:promoPop .7s cubic-bezier(.2,1.5,.4,1) both}
@keyframes promoPop{0%{transform:scale(.3) rotate(-14deg); opacity:0}100%{transform:none; opacity:1}}
.promobox h2{font-size:32px; font-weight:900; letter-spacing:-.05em; margin:0 0 6px; color:var(--gold);
  text-shadow:0 0 40px rgba(245,196,81,.4)}
.promostory{margin-top:20px; text-align:left}
.promostory p{font-size:15px; line-height:1.95; color:var(--ink); margin:12px 0; animation:fadeUp .6s both}
.promostory p:nth-child(2){animation-delay:.3s}
.promostory p:nth-child(3){animation-delay:.6s}
.promoperk{display:inline-block; margin:5px 4px 0; font-size:12.5px; font-weight:700; padding:5px 13px;
  border-radius:999px; background:rgba(245,196,81,.12); border:1px solid rgba(245,196,81,.36); color:var(--gold)}

/* ── 판로 ── */
.mklist{display:flex; flex-direction:column; gap:10px; max-height:56vh; overflow-y:auto; margin:0 -2px; padding:0 2px}
.mk{background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:14px 15px}
.mk.off{opacity:.72}
.mkh{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:3px}
.mkh b{font-size:15.5px; font-weight:800; letter-spacing:-.03em}
.mkv{font-size:15px; font-weight:900; color:var(--gold)}
.mk .btn.sm{width:100%}
.warnbox{
  background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.34); color:var(--ink);
  border-radius:13px; padding:11px 13px; font-size:13px; line-height:1.7;
}
.rulebox{
  margin-top:12px; background:rgba(245,196,81,.09); border:1px solid rgba(245,196,81,.3);
  border-radius:13px; padding:11px 13px; font-size:13px; line-height:1.7; color:var(--ink);
}

/* ── 도감 ── */
.dexgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dexcell {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 4px 10px; text-align: center; cursor: pointer;
}
.dexcell .de { height: 42px; display: grid; place-items: center; }
.dexcell .de .fic { max-height: 42px; width: auto; }
.dexcell .dnm { font-size: 11.5px; font-weight: 700; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.dexcell .dm { font-size: 10.5px; color: var(--sub2); font-variant-numeric: tabular-nums; }
.dexcell.un { opacity: .35; }
.dexcell.un .de { filter: grayscale(1); }
.rdot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; }

/* ── 내 정보 ── */
.mecard { display: flex; gap: 14px; align-items: center; }
.mecard .face { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; object-position: center 16%; background: var(--panel2); border: 1px solid var(--line); flex: none; }
.lvbar { height: 6px; border-radius: 3px; background: var(--bg2); overflow: hidden; margin: 8px 0 4px; }
.lvbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2)); }

/* ── 랭킹 ── */
.seasonbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
.seasonbar b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.seasonbar .ra { text-align: right; }
.seasonbar .ra b { color: var(--gold); }
.rankrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line2); }
.rankrow:first-child { border-top: 0; }
.rankrow .rk { width: 22px; text-align: center; font-weight: 900; font-size: 14px; color: var(--sub2); flex: none; font-variant-numeric: tabular-nums; }
.rankrow .rk.top { color: var(--gold); }
.rankrow .nm { flex: 1; min-width: 0; }
.rankrow .nm b { font-size: 14.5px; }
.rankrow > b { color: var(--gold); font-size: 14px; }
.rankrow.me { background: rgba(245,196,81,.07); }
.rankme { padding: 12px 16px; border-top: 1px solid var(--line2); font-size: 12.5px; color: var(--sub2); text-align: center; }

/* ── 시작 ── */
.introwrap { height: 100%; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 26px 20px; background: var(--bg); }
.introbox { width: 100%; max-width: 400px; }
.introbox h2 { font-size: 27px; font-weight: 900; letter-spacing: -.055em; margin: 8px 0 5px; line-height: 1.2; }
.inp {
  width: 100%; margin-top: 14px; padding: 15px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 14px; outline: none;
}
.inp:focus { border-color: var(--gold); }
.inp::placeholder { color: var(--sub2); }
/* 셋이 한 줄. 여섯을 한 번에 늘어놓으면 얼굴이 손톱만 해져 고를 수가 없어
   위에서 사내/아낙을 먼저 고르고 셋만 보여 준다. */
.pickgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:340px}
.pick{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:6px 6px 7px; text-align:center; cursor:pointer; overflow:hidden;
}
/* 네 캐릭터는 1단계 옷이 같아서 전신을 줄여 보이면 다 똑같아 보인다 — 얼굴 쪽을 크게 잘라 보여준다.
   object-fit:cover 로는 원본이 세로로 조금 길 뿐이라 거의 안 잘린다. 확대해서 상반신만 남긴다. */
.pick .thumb{display:block; height:118px; overflow:hidden; border-radius:10px; position:relative; background:var(--panel2)}
.pick .thumb img{position:absolute; left:50%; top:0; width:158%; transform:translateX(-50%); display:block}
.pick b{display:block; font-size:11.5px; font-weight:800; margin-top:5px; line-height:1.25; letter-spacing:-.03em}
.pick span{display:block; font-size:9.5px; font-weight:600; color:var(--sub2); margin-top:2px; line-height:1.3}
.pick.on{border-color:var(--gold); background:rgba(245,196,81,.1)}
.pick.on b{color:var(--gold)}

.introwrap.story { background: radial-gradient(ellipse at 50% 22%, #131b2b 0%, var(--bg) 62%); }
.st { font-size: 16px; line-height: 2; margin: 15px 0; animation: fadeUp .6s both; }
.st:nth-child(3) { animation-delay: .35s; } .st:nth-child(4) { animation-delay: .7s; }
.st:nth-child(5) { animation-delay: 1.05s; } .st:nth-child(6) { animation-delay: 1.4s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* ── 토스트 · 시트 ── */
#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 14px);
  background: var(--panel2); border: 1px solid var(--line); color: var(--ink);
  font-size: 13.5px; font-weight: 700; padding: 12px 19px; border-radius: 13px;
  z-index: 900; opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
  max-width: 86%; text-align: center; box-shadow: 0 12px 34px -14px rgba(0,0,0,.9);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.sheetwrap { position: fixed; inset: 0; z-index: 800; }
.sheetbg { position: absolute; inset: 0; background: rgba(4,6,10,.68); opacity: 0; transition: opacity .24s; }
.sheetwrap.on .sheetbg { opacity: 1; }
.sheet {
  position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 460px; transform: translate(-50%, 100%);
  background: var(--panel); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0;
  padding: 22px 18px calc(22px + var(--safearea));
  transition: transform .28s cubic-bezier(.2,.9,.25,1); max-height: 86vh; overflow-y: auto;
}
.sheetwrap.on .sheet { transform: translate(-50%, 0); }
.sh-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sh-h b { font-size: 19px; font-weight: 900; letter-spacing: -.045em; }

/* ════════ 낚시 화면 ════════ */
.fishbody { display: flex; flex-direction: column; }
.fishscene { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--bg); }
.fishscene .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fishscene .water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: 2;
  background: linear-gradient(to bottom, rgba(8,16,30,.12), rgba(6,12,24,.58));
}
#fx { position: absolute; inset: 0; z-index: 3; }
.fishui {
  flex: none; background: var(--panel); border-top: 1px solid var(--line);
  padding: 15px 16px calc(15px + var(--safearea)); position: relative; z-index: 6;
}
/* 낚시 화면에는 페이저가 없다 — 본문이 아래까지 그대로 쓴다. */
.fishbody .pad { display: none; }

.rod-idle, .rod-cast { position: absolute; right: 12%; top: 20%; width: 34%; max-width: 150px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.7)); }
.rodart { width: 100%; height: auto; display: block; }
/* 찌는 키로 맞춘다 — 폭으로 맞추면 긴 찌가 화면을 가른다.
   그리고 아랫동은 물에 잠겨야 한다 — 통째로 떠 있으면 물 위에 얹어 놓은 막대처럼 보인다. */
.bobart { height: 116px; width: auto; display: block; filter: drop-shadow(0 3px 9px rgba(0,0,0,.55));
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,.45) 76%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,.45) 76%, transparent 97%); }
.rod-cast { animation: rodSwing .45s ease-out; }
@keyframes rodSwing { from { transform: rotate(-38deg) translateX(-14px); } to { transform: none; } }

.ready .rtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 13px; flex-wrap: wrap; }
.baitrow { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; touch-action: pan-x; }
.bchip {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
  border-radius: 13px; padding: 9px 12px; cursor: pointer; font-family: inherit;
}
.bchip .be { font-size: 19px; }
.bchip .bn { font-size: 11.5px; font-weight: 800; }
.bchip .bq { font-size: 10px; color: var(--sub2); font-variant-numeric: tabular-nums; }
.bchip.on { border-color: var(--gold); background: rgba(245,196,81,.12); }
.bchip.off { opacity: .34; }

/* 캐스팅 */
.powbar { position: relative; height: 46px; border-radius: 13px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; }
.ptarget { position: absolute; top: 0; bottom: 0; background: rgba(74,222,128,.24); border-left: 2px solid var(--green); border-right: 2px solid var(--green); }
.pmark { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--gold); border-radius: 2px; box-shadow: 0 0 14px var(--gold); }

/* 기다리기 */
.waitui { text-align: center; padding: 9px 0 5px; min-height: 82px; display: flex; flex-direction: column; justify-content: center; }
.waitui.hot { background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.3); border-radius: 14px; }
.hotmsg { font-size: 34px; font-weight: 900; letter-spacing: -.06em; color: var(--red); text-shadow: 0 0 26px rgba(255,107,107,.6); animation: hotPulse .26s infinite alternate; }
@keyframes hotPulse { from { transform: scale(1); } to { transform: scale(1.1); } }
/* 찌 — 수수깡 찌는 길쭉해서 물에 선다. 아랫동이 잠기고 붉은 끝만 보이는 자세.
   ⚠️파문을 찌 바깥에 따로 두면 둘이 다른 데서 논다 — 찌 안에 넣어 밑동에 붙여 둔다. */
.bobber { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); animation: bob 2.8s ease-in-out infinite; z-index: 2; }
.bobber .rip { position: absolute; left: 50%; bottom: 4px; width: 46px; height: 14px; margin-left: -23px;
  border: 1.5px solid rgba(255,255,255,.3); border-radius: 50%; animation: rip 3s ease-out infinite; }
.bobber .rip.r2 { animation-delay: 1.5s; }
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
.bobber.nib { animation: nibShake .11s 3 alternate; }
@keyframes nibShake { to { transform: translate(-50%, var(--nib, 4px)); } }
.bobber.down { animation: bobDown .34s cubic-bezier(.5,0,.9,.5) forwards; }
@keyframes bobDown { to { transform: translate(-50%, 46px) scaleY(.86); opacity: .18; } }

/* 파문 — 두 겹이 엇갈려 퍼져야 물처럼 보인다. */
.ripple {
  position: absolute; left: 50%; top: 58%; width: 48px; height: 15px; margin-left: -24px;
  border: 1.5px solid rgba(255,255,255,.3); border-radius: 50%; animation: rip 3s ease-out infinite;
}
.ripple.r2 { animation-delay: 1.5s; }
@keyframes rip { 0% { transform: scale(.35); opacity: .6; } 100% { transform: scale(3); opacity: 0; } }

/* 낚싯줄 — 대 끝과 찌를 실제로 잇는 선. */
.flsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.flsvg path { fill: none; stroke: rgba(255,255,255,.62); stroke-width: 1.4; stroke-linecap: round;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }

/* 입질·랜딩 순간의 흔들림 — 손끝에 오는 진동과 화면이 같이 가야 한다. */
.fishscene.shake { animation: scShake .09s 4 alternate; }
@keyframes scShake { to { transform: translate(2px, -2px); } }

/* 파이팅 */
.fbar, .tbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fbar .lb, .tbar .lb { font-size: 11.5px; color: var(--sub2); width: 48px; flex: none; font-weight: 700; }
.bar { flex: 1; height: 14px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; position: relative; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #35507a, var(--blue)); }
.bar.tens i { background: var(--green); transition: none; }
.bar.tens i.danger { background: var(--red); box-shadow: 0 0 16px rgba(255,107,107,.7); }
.bar.tens i.slackc { background: var(--sub2); }
.bar.tens .safe { position: absolute; top: 0; bottom: 0; background: rgba(74,222,128,.13); border-left: 1px dashed rgba(74,222,128,.5); border-right: 1px dashed rgba(255,107,107,.5); }
.tbar .tv { width: 26px; text-align: right; font-size: 12.5px; font-weight: 800; flex: none; font-variant-numeric: tabular-nums; }
.fmsg { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--sub); margin: 7px 0 11px; min-height: 21px; }
.fmsg.hot { color: var(--red); }
.fmsg.warn { color: var(--gold); }
.btn.hold { user-select: none; touch-action: none; }
/* 결과가 뜬 직후 잠깐 — 파이팅 중 연타하던 손가락의 마지막 한 번을 흘려보낸다 */
.fishui.guard { pointer-events: none; }
/* 나가기처럼 되돌리기 번거로운 동작은 크게 두지 않는다 */
.lnk {
  display: block; margin: 0 auto 6px; padding: 6px 12px; background: none; border: 0;
  color: var(--sub2); font-family: inherit; font-size: 12.5px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.btn.hold.act { filter: brightness(1.12); transform: scale(.985); }
/* 파이팅 — 대가 휘고, 바늘 자리에서 물살이 끌린다. 💦 이모지를 쓰던 자리다. */
.rod-fight { position: absolute; right: 12%; top: 14%; width: 32%; max-width: 140px;
  transform-origin: 18% 82%; filter: drop-shadow(0 6px 14px rgba(0,0,0,.7)); transition: transform .07s linear; }
.hookpt { position: absolute; left: 50%; top: 60%; width: 2px; height: 2px; }
.wake { position: absolute; left: 50%; top: 60%; width: 0; height: 0; }
.wake i { position: absolute; left: 50%; top: 50%; width: 54px; height: 17px; margin: -8px 0 0 -27px;
  border: 2px solid rgba(255,255,255,.34); border-radius: 50%; animation: wk 1.5s ease-out infinite; }
.wake i:nth-child(2) { animation-delay: .5s; }
.wake i:nth-child(3) { animation-delay: 1s; }
.wake.run i { animation-duration: .62s; border-color: rgba(255,255,255,.6); }
.wake.hot i { border-color: rgba(255,107,107,.62); }
@keyframes wk { 0% { transform: scale(.3); opacity: .75; } 100% { transform: scale(2.6); opacity: 0; } }
.foam { position: absolute; left: 50%; top: 60%; width: 78px; height: 24px; margin: -12px 0 0 -39px;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.3), transparent 68%);
  animation: foamP .5s ease-in-out infinite alternate; }
@keyframes foamP { to { transform: scale(1.18); opacity: .55; } }

/* 결과 */
.landed { position: absolute; inset: 0; display: grid; place-items: center; }
.landed .lfish { animation: pop .55s cubic-bezier(.2,1.5,.4,1) both; filter: drop-shadow(0 16px 34px rgba(0,0,0,.75)); }
/* 그림이 아직 없는 어종은 이모지로 뜨는데, 그대로 두면 얼굴만 한 크기가 된다 — 접시에 얹듯 담아 둔다. */
.landed .lfish .fie {
  font-size: 92px; line-height: 1; padding: 30px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,196,81,.16), rgba(11,14,20,.5) 70%);
}
.landed .lfish .fic { width: 100%; }
.landed.big .lfish { animation: popBig .8s cubic-bezier(.2,1.5,.4,1) both; filter: drop-shadow(0 0 44px rgba(245,196,81,.6)); }
@keyframes pop { from { transform: scale(.2) translateY(50px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes popBig { 0% { transform: scale(.1) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.22) rotate(6deg); } 100% { transform: none; opacity: 1; } }
/* ── 못 잡았을 때 ──
   ✂️(가위)와 💨(바람)을 쓰던 자리. 줄은 잘린 게 아니라 끊어졌고,
   고기는 날아간 게 아니라 물속으로 들어갔다. 그림 파일이 없어도 이대로 성립하게 CSS 로 그린다. */
.snapfx, .gonefx { position: absolute; inset: 0; display: grid; place-items: center; animation: pop .35s both; }
.failart { position: absolute; width: 50%; max-width: 200px; opacity: .94;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.8)); animation: pop .4s both; }
/* 달아난 그림은 잘라낸 물건이 아니라 물속 한 장면이다 — 가장자리를 흐려 배경에 녹인다. */
/* ⚠️가장자리를 어중간하게 자르면 수채화 종이의 흰 테가 원반처럼 남는다 — 넉넉히 흐린다. */
.gonefx .failart { width: 60%; max-width: 250px; border-radius: 50%; opacity: .82;
  -webkit-mask-image: radial-gradient(circle, #000 34%, rgba(0,0,0,.5) 55%, transparent 70%);
  mask-image: radial-gradient(circle, #000 34%, rgba(0,0,0,.5) 55%, transparent 70%);
  animation: goneIn .8s ease-out both; }
@keyframes goneIn { from { transform: scale(.72) rotate(-18deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: .82; } }

/* 올렸을 때 터지는 물보라 */
.landsplash { position: absolute; left: 50%; top: 58%; width: 58%; max-width: 230px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 1;
  animation: lsp .8s cubic-bezier(.15,.9,.3,1) both; }
@keyframes lsp { 0% { transform: translate(-50%, 10%) scale(.4); opacity: 0; }
  35% { opacity: .95; } 100% { transform: translate(-50%, -62%) scale(1.25); opacity: 0; } }

/* 끊어진 줄 — 두 가닥이 양쪽으로 튕겨 나간다. */
.snapfx .sl { position: absolute; top: 50%; width: 30%; height: 2px; background: rgba(255,255,255,.75);
  box-shadow: 0 0 10px rgba(255,255,255,.5); }
.snapfx .sl.a { right: 50%; transform-origin: right center; animation: snapA .34s cubic-bezier(.2,1.4,.5,1) both; }
.snapfx .sl.b { left: 50%; transform-origin: left center; animation: snapB .34s cubic-bezier(.2,1.4,.5,1) both; }
@keyframes snapA { from { transform: translateX(14%) rotate(0); } to { transform: translateX(-8%) rotate(-16deg); } }
@keyframes snapB { from { transform: translateX(-14%) rotate(0); } to { transform: translateX(8%) rotate(19deg); } }
.snapfx .burst { position: absolute; width: 90px; height: 90px; border-radius: 50%;
  border: 3px solid rgba(255,107,107,.75); animation: burst .45s ease-out both; }
@keyframes burst { from { transform: scale(.15); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

/* 달아난 고기 — 물살이 소용돌이치고 그림자가 아래로 잠긴다. */
.gonefx .swirl { position: absolute; width: 108px; height: 34px; border: 2px solid rgba(255,255,255,.42);
  border-radius: 50%; animation: swirl 1s ease-out both; }
.gonefx .swirl.s2 { animation-delay: .16s; border-color: rgba(255,255,255,.26); }
@keyframes swirl { from { transform: scale(.35) rotate(0); opacity: .9; } to { transform: scale(2.3) rotate(28deg); opacity: 0; } }
.gonefx .shadow { position: absolute; width: 86px; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.72), transparent 70%);
  animation: sink .85s cubic-bezier(.4,0,.8,.6) both; }
@keyframes sink { from { transform: translateY(-16px) scale(1.05); opacity: .85; }
  to { transform: translateY(46px) scale(.42); opacity: 0; } }
.resultui { text-align: center; }
.resultui .rname { display: flex; align-items: center; justify-content: center; gap: 8px; }
.resultui .rname b { font-size: 20px; font-weight: 900; letter-spacing: -.045em; }
.resultui .rsize { font-size: 40px; font-weight: 900; letter-spacing: -.06em; line-height: 1.1; margin-top: 3px; }
.resultui.big .rsize { color: var(--gold); text-shadow: 0 0 30px rgba(245,196,81,.5); }
.ribbon { display: inline-block; font-size: 11.5px; font-weight: 900; padding: 4px 13px; border-radius: 999px; margin-bottom: 8px; letter-spacing: .02em; }
.ribbon.new { background: rgba(74,222,128,.16); color: var(--green); border: 1px solid rgba(74,222,128,.45); }
.ribbon.rec { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #241a02; }
.resultui.fail .rname b { color: var(--sub); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── 품팔이 ── 낚시의 힘 막대와 같은 말씨를 쓴다.
   품팔이가 '다른 게임'처럼 보이면 한 사람의 하루로 안 읽힌다. */
.wkbar{height:52px}
.wkdots{display:flex; gap:6px; justify-content:center; margin-top:12px; min-height:8px}
.wkdots i{width:8px; height:8px; border-radius:50%; background:var(--line); display:block}
.wkdots i.gr{background:var(--green); box-shadow:0 0 10px rgba(74,222,128,.6)}
.wkdots i.ok{background:var(--gold)}
.wkdots i.bad{background:var(--red)}
.okflash{background:rgba(74,222,128,.18) !important; border-color:var(--green) !important; color:var(--green) !important}
.badflash{background:rgba(255,107,107,.14) !important; border-color:rgba(255,107,107,.4) !important; color:var(--red) !important}

/* 소금 가마 — 세로 막대가 불이다. 띠 안에 바늘을 붙들어 둔다. */
.wkheat{position:relative; height:190px; border-radius:14px; background:var(--bg2);
  border:1px solid var(--line); overflow:hidden}
.wkband{position:absolute; left:0; right:0; background:rgba(74,222,128,.15);
  border-top:2px solid var(--green); border-bottom:2px solid var(--green)}
.wkflame{position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(to top, #ff6b2c, #f5c451 70%, rgba(245,196,81,0));
  opacity:.5; transition:height .06s linear}
.wkneedle{position:absolute; left:0; right:0; height:4px; margin-bottom:-2px;
  background:var(--sub); border-radius:2px; transition:bottom .06s linear}
.wkneedle.in{background:var(--green); box-shadow:0 0 16px rgba(74,222,128,.8)}
.wkmeter{height:5px; border-radius:3px; background:var(--line2); overflow:hidden; margin-top:12px}
.wkmeter i{display:block; height:100%; background:var(--gold); width:0}

/* 뻘 아홉 칸 — 숨구멍이 잠깐 솟는다. */
.wkflat{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.wkcell{aspect-ratio:1; border-radius:12px; background:#2a2418; border:1px solid #3a3222;
  position:relative; cursor:pointer; transition:background .12s}
.wkcell.on{background:#4a3f28; border-color:var(--gold); box-shadow:inset 0 0 22px rgba(245,196,81,.3)}
.wkcell.on::after{content:'○'; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:26px; color:var(--gold2); animation:wkbub .5s infinite alternate}
@keyframes wkbub{from{transform:scale(.82); opacity:.65} to{transform:scale(1.06); opacity:1}}
.wkcell.got{background:rgba(74,222,128,.22); border-color:var(--green)}
.wkcell.got::after{content:'🦪'; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:24px}
.wkcell.mud{background:#3a2f1e; border-color:var(--red)}

/* 성적표 */
.wkscore{display:flex; align-items:center; gap:11px; margin-top:4px}
.wksb{flex:1; height:9px; border-radius:5px; background:var(--line2); overflow:hidden}
.wksb i{display:block; height:100%; background:var(--gold); transition:width .5s cubic-bezier(.2,.9,.25,1)}
.wksb i.gr{background:var(--green)}
.wksb i.bad{background:var(--red)}
.wkscore b{font-size:15px; font-variant-numeric:tabular-nums}

/* ── 장부 ── 상인의 하루는 마릿수가 아니라 들고 난 돈으로 남는다. */
.bk{padding:16px 18px}
.bkh{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:11px}
.bkh b{font-size:15px; font-weight:900; letter-spacing:-.03em}
.bkrow{display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:13.5px}
.bkrow > span{color:var(--sub)}
.bkrow b{font-variant-numeric:tabular-nums; font-size:14.5px}
.bkrow.big{border-top:1px solid var(--line2); margin-top:5px; padding-top:11px}
.bkrow.big b{font-size:19px; font-weight:900}
.bkrow .up{color:var(--green)} .bkrow .dn2{color:var(--red)}
.bkfoot{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:12px; padding-top:11px;
  border-top:1px solid var(--line2); font-size:12px; color:var(--sub2)}
.bkfoot b{font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums}

.kbar{display:flex; height:11px; border-radius:6px; overflow:hidden; margin:14px 16px 12px; background:var(--line2)}
.kbar i{display:block; height:100%}
.krow{display:flex; align-items:center; gap:9px; padding:6px 16px; font-size:13px}
.krow > span:not(.kdot){color:var(--sub); flex:1}
.krow b{font-variant-numeric:tabular-nums}
.krow em{font-style:normal; font-size:12px; color:var(--sub2); width:38px; text-align:right}
.kdot{width:9px; height:9px; border-radius:50%; flex:none}

.trow{display:flex; align-items:center; gap:11px; padding:11px 16px; border-bottom:1px solid var(--line2)}
.trow:last-of-type{border-bottom:0}
.trow .tn{flex:1; min-width:0}
.trow .tn b{font-size:14px; font-weight:800; display:block}

.strow2{display:flex; gap:8px; padding:13px 16px 9px}
.st2{flex:1; text-align:center; background:var(--bg2); border:1px solid var(--line2); border-radius:11px; padding:8px 4px}
.st2 span{display:block; font-size:11px; font-weight:800; margin-bottom:3px}
.st2 b{font-size:16px; font-variant-numeric:tabular-nums}

/* ── 신분 ── 이 게임의 목표는 큰 고기가 아니라 올라가는 것이다. 맨 위에 크게 둔다. */
.nowrank{position:relative; overflow:hidden; padding:0; min-height:132px; display:flex; align-items:flex-end}
.nrbg{position:absolute; inset:0}
.nrbg img{width:100%; height:100%; object-fit:cover; opacity:.42}
.nowrank::after{content:''; position:absolute; inset:0;
  background:linear-gradient(to top, var(--panel) 6%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.05))}
.nrin{position:relative; z-index:1; padding:16px 18px}
.nrn{display:block; font-size:24px; font-weight:900; letter-spacing:-.05em; margin:2px 0 5px;
  text-shadow:0 2px 14px rgba(0,0,0,.8)}
.nxrow{display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:13px}
.nxrow > span{color:var(--sub); width:44px; flex:none}
.nxb{flex:1; height:8px; border-radius:5px; background:var(--line2); overflow:hidden}
.nxb i{display:block; height:100%; background:var(--gold); transition:width .5s}
.nxb i.rep{background:var(--green)}
.nxrow b{font-size:12px; font-variant-numeric:tabular-nums; color:var(--sub); flex:none}
.nxget{display:flex; gap:9px; padding:7px 16px; font-size:12.5px; border-top:1px solid var(--line2)}
.nxget span{color:var(--sub2); flex:none}
.nxget b{color:var(--gold); font-weight:700}

/* 기다리는 동안 — 점이 차례로 밝아진다. 아무것도 안 움직이면 멈춘 화면 같다. */
.watch{display:flex; align-items:center; justify-content:center; gap:5px}
.watch i{width:4px; height:4px; border-radius:50%; background:var(--sub2); display:block;
  animation:wdot 1.35s infinite}
.watch i:nth-child(2){animation-delay:.22s}
.watch i:nth-child(3){animation-delay:.44s}
@keyframes wdot{0%,60%,100%{opacity:.25} 30%{opacity:1}}

/* 챔질 — 이 한 박자가 낚시의 전부다. 찌가 채여 날아오고 물이 터진다. */
.bobber.yank { animation: yank .3s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes yank { to { transform: translate(-50%, -46px) rotate(-19deg); opacity: 0; } }
.fishscene.strike { animation: strk .07s 6 alternate; }
@keyframes strk { to { transform: translate(-3px, 3px) scale(1.012); } }
.fishscene.strike .tint { background: rgba(255,255,255,.1); }
.strikefx { position: absolute; width: 0; height: 0; z-index: 4; }
.strikefx span { position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.8); }
.strikefx span:nth-child(1) { width: 30px; height: 12px; margin: -6px 0 0 -15px; animation: sfx .42s ease-out both; }
.strikefx span:nth-child(2) { width: 30px; height: 12px; margin: -6px 0 0 -15px; animation: sfx .52s ease-out .07s both; }
.strikefx span:nth-child(3) { width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-color: rgba(255,255,255,.55); animation: sfx2 .38s ease-out both; }
@keyframes sfx { from { transform: scale(.3); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
@keyframes sfx2 { from { transform: scale(.2); opacity: .95; } to { transform: scale(2.6) translateY(-16px); opacity: 0; } }

/* ── 장 넘기기 ──
   버튼 다섯 개를 도트 여섯 개로 바꿨다. 아래를 비우면 그림이 커지고,
   무엇보다 "옆에 더 있다"가 손가락으로 전해진다. */
.pager {
  /* ⚠️검은 막대로 아래를 잘라 먹으면 그림이 그만큼 작아진다 —
     띄워서 화면 위에 얹고, 글자가 묻히지 않을 만큼만 아래를 어둡게 깐다. */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 30px 0 calc(9px + var(--safearea));
  background: linear-gradient(to top, rgba(9,12,18,.97) 30%, rgba(9,12,18,.88) 52%,
    rgba(9,12,18,.5) 74%, transparent);
  pointer-events: none;
}
.pager > * { pointer-events: auto; }
.pgname { font-size: 12.5px; font-weight: 800; letter-spacing: -.03em; color: var(--gold);
  text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.pgdots { display: flex; align-items: center; gap: 7px; }
.pgd { width: 7px; height: 7px; border-radius: 999px; background: var(--line); cursor: pointer;
  transition: width .22s cubic-bezier(.2,.9,.25,1), background .22s; }
/* 손가락으로 집기엔 7px 이 너무 작다 — 보이는 건 작게, 누르는 데는 넓게. */
.pgd::after { content: ''; position: absolute; width: 30px; height: 34px; margin: -14px 0 0 -12px; }
.pgd { position: relative; }
.pgd.on { width: 22px; background: var(--gold); }

#app.swiping { transition: none; }
#app { transition: transform .18s cubic-bezier(.3,.9,.4,1), opacity .18s; }
#app.slideout { transition: transform .13s ease-in, opacity .13s ease-in; }
#app.slidein { transition: transform .2s cubic-bezier(.2,.9,.3,1), opacity .2s; }

/* 기운 막대를 누를 수 있다는 표시 */
.apbar.tap { cursor: pointer; }
.apbar.tap::after { content: '누르면 채우는 법'; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); font-size: 10px; color: var(--sub2); }

/* ── 광고 ──
   광고는 '더'를 위한 자리다. 안 봐도 게임은 돌아간다 — 그래서 버튼도 조용하게 둔다. */
.adbtn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.adbtn .adico { font-size: 10px; opacity: .8; }
.adbtn .adleft { font-size: 10.5px; font-weight: 700; opacity: .62; }
.adwrap { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(0,0,0,.82); opacity: 0; transition: opacity .2s; }
.adwrap.on { opacity: 1; }
.adbox { width: min(86vw, 330px); background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px 22px; text-align: center; }
.adtag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  color: var(--sub2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.adart { font-size: 62px; margin: 18px 0 6px; animation: adFloat 2s ease-in-out infinite alternate; }
@keyframes adFloat { to { transform: translateY(-7px); } }
.adtx { font-size: 13px; color: var(--sub); }
.adsec { font-size: 34px; font-weight: 900; color: var(--gold); margin: 6px 0 16px;
  font-variant-numeric: tabular-nums; }
.adskip { width: 100%; border-radius: 13px; padding: 13px; font-family: inherit; font-size: 14px;
  font-weight: 800; cursor: pointer; background: linear-gradient(180deg, var(--gold2), var(--gold));
  color: #241a02; border: 0; }
.adskip.off { background: var(--panel2); color: var(--sub2); border: 1px solid var(--line); cursor: default; }

/* ── 곗날 ── 이레를 기다린 자리라 화면도 조금 차려입는다. */
.gyehead { text-align: center; padding: 22px 18px }
.gyeh { display: block; font-size: 26px; font-weight: 900; letter-spacing: -.05em; margin-top: 9px; }
.jebi { display: flex; gap: 9px; }
.jb { flex: 1; aspect-ratio: .72; border-radius: 16px; background: var(--panel2);
  border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 7px; text-align: center; padding: 8px; }
.jb b { font-size: 12.5px; font-weight: 800; letter-spacing: -.03em; }
.jb .jm { font-size: 34px; font-weight: 900; color: var(--sub2); }
.jb .je { font-size: 38px; line-height: 1; }
.jb.can { cursor: pointer; border-color: rgba(245,196,81,.5); background: rgba(245,196,81,.07);
  animation: jbPulse 1.9s ease-in-out infinite alternate; }
.jb.can .jm { color: var(--gold); }
@keyframes jbPulse { to { border-color: var(--gold); box-shadow: 0 0 22px -6px rgba(245,196,81,.6); } }
.jb.open { border-color: var(--green); background: rgba(74,222,128,.09); }
.jebi.shut .jb { opacity: .5; }
.gyeres { text-align: center; padding: 10px 0 4px; }
.gyeres .ge { font-size: 66px; line-height: 1; animation: pop .5s cubic-bezier(.2,1.5,.4,1) both; }
.gyeres .gn { display: block; font-size: 20px; font-weight: 900; letter-spacing: -.045em; margin-top: 8px; }
.gyeres .gv { font-size: 26px; font-weight: 900; color: var(--gold); margin-top: 3px;
  text-shadow: 0 0 26px rgba(245,196,81,.45); }

/* ── 짐 지기 ── 연타와 허리. 언제 쉴지가 실력이 된다. */
.wkback{position:relative; height:26px; border-radius:9px; background:var(--bg2);
  border:1px solid var(--line); overflow:hidden; margin-bottom:12px}
.wkbi{height:100%; width:0; background:var(--green); transition:width .08s linear}
.wkbi.warn{background:var(--gold)} .wkbi.hot{background:var(--red)}
.wkbl{position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:11px;
  font-weight:800; color:var(--ink); text-shadow:0 1px 3px rgba(0,0,0,.7)}
.wkcount{display:flex; align-items:baseline; justify-content:center; gap:6px; padding:8px 0 4px}
.wkcount b{font-size:44px; font-weight:900; letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.wkcount span{font-size:14px; color:var(--sub)}
.wkcount em{font-style:normal; font-size:13px; color:var(--sub2); margin-left:4px}

/* ── 그물코 ── 본 순서대로 짚는다. */
.wknet{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.wkknot{aspect-ratio:1; border-radius:12px; background:var(--bg2); border:1px solid var(--line);
  display:grid; place-items:center; cursor:pointer; transition:background .1s, border-color .1s}
.wkknot span{width:34%; height:34%; border-radius:50%; background:var(--line); display:block; transition:background .1s}
.wkknot.lit{background:rgba(245,196,81,.2); border-color:var(--gold); box-shadow:0 0 24px -6px var(--gold)}
.wkknot.lit span{background:var(--gold2)}
.wkknot.ok{background:rgba(74,222,128,.18); border-color:var(--green)}
.wkknot.ok span{background:var(--green)}
.wkknot.bad{background:rgba(255,107,107,.18); border-color:var(--red)}
.wkknot.bad span{background:var(--red)}

/* ── 심부름 ── 가라는 쪽으로 바로. */
.wkerr{text-align:center; padding:6px 0 14px}
.wkgo b{display:block; font-size:30px; font-weight:900; letter-spacing:-.05em}
.wkgo span{display:block; font-size:42px; line-height:1.1; color:var(--gold)}
.wkclock{height:6px; border-radius:4px; background:var(--line2); overflow:hidden; margin-top:12px}
.wkclock i{display:block; height:100%; width:100%; background:var(--gold)}
.wkpad{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:7px; max-width:250px; margin:0 auto}
.wkw{border-radius:13px; background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  font-size:26px; font-family:inherit; cursor:pointer; aspect-ratio:1; line-height:1}
.wkw:active{filter:brightness(1.3)}
.wkw.ok{background:rgba(74,222,128,.2); border-color:var(--green)}
.wkw.bad{background:rgba(255,107,107,.2); border-color:var(--red)}
.w-up{grid-area:1/2} .w-left{grid-area:2/1} .w-right{grid-area:2/3} .w-down{grid-area:3/2}

/* 곗날 — '6일 후'만으로는 게임 속 날인지 진짜 날인지 모른다. 달력 날짜를 크게 박는다. */
.gyeh .gdow { font-size: 18px; color: var(--sub); }
.gyewhen { font-size: 12px; color: var(--sub2); margin-top: 7px; }
.gyewhen b { color: var(--gold); }
.gyeup { padding: 16px 18px; }
.gyecmp { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.gyecmp > div { flex: 1; }
.gyecmp span { display: block; font-size: 11px; color: var(--sub2); margin-bottom: 3px; }
.gyecmp b { font-size: 17px; font-weight: 900; }
.gyecmp .ar { flex: none; color: var(--sub2); font-size: 16px; }
.gyecmp .up b { color: var(--gold); }
/* 미는 동안 다음 장 이름을 미리 보여 준다 — 화면을 흔드는 대신 이름으로 알린다. */
.pgname.peek { color: var(--ink); transform: scale(1.08); }
.pgname { transition: color .12s, transform .12s; }

/* ── 머리줄의 돈주머니 ── 장사꾼이면 가진 돈이 늘 눈에 보여야 한다. */
.top .r { display: flex; align-items: center; gap: 6px; }
.purse { display: flex; align-items: center; gap: 5px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.purse i { font-style: normal; font-size: 12px; line-height: 1; }
.purse b { font-size: 12.5px; font-weight: 800; letter-spacing: -.02em; }
.purse:active { filter: brightness(1.25); }

/* ── 나루 머리띠 ── 이 게임에서 오르는 네 가지를 한 줄에. */
.strip { display: flex; gap: 7px; }
/* ⚠️.st 는 인트로의 한 줄씩 떠오르는 글(opacity 0 에서 시작)이 이미 쓰고 있다 —
   그대로 쓰면 머리띠가 통째로 투명해진다(실측: 화면에 빈 칸만 남았다). */
.stm { flex: 1; min-width: 0; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 13px; padding: 9px 6px; text-align: center; cursor: pointer; }
.stm span { display: block; font-size: 10.5px; color: var(--sub2); margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stm b { font-size: 14px; font-weight: 800; letter-spacing: -.03em; }
.stm b.hot { color: var(--gold); text-shadow: 0 0 16px rgba(245,196,81,.5); }
.stm em { font-style: normal; font-size: 10px; color: var(--sub2); margin-left: 2px; }
.stm:active { filter: brightness(1.2); }