/* 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;
}
#app { max-width: 460px; margin: 0 auto; height: 100%; background: var(--bg); position: relative; overflow: hidden; }
@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}
.pad { height: 30px; }
.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; }

.body { height: calc(100% - 54px); display: flex; flex-direction: column; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.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}

/* ── 설정 시트 ── 큰 버튼을 세로로 늘어놓는다. 손가락으로 고르기 쉬운 크기. */
.setlist{display:flex; flex-direction:column; gap:9px; margin-top:16px}
.setbtn{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  border-radius:14px; padding:16px 18px; font-size:15.5px; font-weight:700;
  font-family:inherit; letter-spacing:-.025em; cursor:pointer;
}
.setbtn span{font-size:19px; line-height:1}
.setbtn:active{filter:brightness(1.15)}

.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 .sb{flex:1; min-width:0}
.slot .sb b{font-size:15px; font-weight:800}
.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(auto-fit,minmax(0,1fr)); gap:10px; max-width:280px}
.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:150px; 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 span{display:block; font-size:10.5px; font-weight:700; color:var(--sub2); margin-top:5px; line-height:1.3}
.pick.on{border-color:var(--gold); background:rgba(245,196,81,.1)}
.pick.on span{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;
}

.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 { width: 34px; height: auto; display: block; filter: drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
.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; }
.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: 54%; transform: translateX(-50%); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
.bobber.nib { animation: nibShake .12s 2 alternate; }
@keyframes nibShake { to { transform: translate(-50%, var(--nib, 4px)); } }
.bobber.down { animation: bobDown .3s forwards; }
@keyframes bobDown { to { transform: translate(-50%, 36px) scale(.7); opacity: .3; } }
.ripple {
  position: absolute; left: 50%; top: 62%; width: 46px; height: 15px; margin-left: -23px;
  border: 2px solid rgba(255,255,255,.32); border-radius: 50%; animation: rip 2.6s ease-out infinite;
}
@keyframes rip { 0% { transform: scale(.4); opacity: .65; } 100% { transform: scale(2.7); opacity: 0; } }

/* 파이팅 */
.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); }
.fightline { position: absolute; inset: 0; }
.fightline .rodtip { position: absolute; right: 12%; top: 12%; width: 32%; max-width: 140px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.7)); }
.fightline .line {
  position: absolute; right: 24%; top: 30%; width: 2px; height: 34%;
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.12));
  transform-origin: top center;
}
.fightline .splash { position: absolute; right: 20%; top: 62%; font-size: 32px; animation: splash .7s infinite alternate; }
@keyframes splash { from { transform: translateY(0) scale(1); opacity: .75; } to { transform: translateY(-8px) scale(1.16); opacity: 1; } }

/* 결과 */
.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; } }
.failmark { position: absolute; inset: 0; display: grid; place-items: center; font-size: 76px; opacity: .8; animation: pop .4s both; }
.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; }
}