/* NEMA 현장대응팀 — 어두운 단일 테마. 도깨비불 청록 한 가지만 강조색으로 쓴다. */
:root {
  --bg: #0b0e14; --bg2: #0f141d; --panel: #141a25; --panel2: #1a2230; --line: #273145;
  --fg: #e8e5dc; --dim: #8f98a9; --flame: #4fe3c1; --flame-d: #123f37; --gold: #e6b85c;
  --bad: #f06262; --good: #79d98d; --warn: #f0a458; --mp: #6aa7ff;
  --display: 'Hahmlet', 'Noto Serif KR', serif;
  --body: 'IBM Plex Sans KR', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body {
  color: var(--fg); font-family: var(--body); font-size: 15px; line-height: 1.6; -webkit-text-size-adjust: 100%;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 8px 48px;
  background: radial-gradient(1200px 500px at 50% -120px, #12202a 0%, var(--bg) 70%) no-repeat, var(--bg);
}
#app { max-width: 980px; margin: 0 auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; line-height: 1.25; text-wrap: balance; }
h2 { font-size: 24px; } h3 { font-size: 16px; margin: 18px 0 8px; }
p { margin: 0 0 10px; } small { color: var(--dim); font-size: 12.5px; }
b { font-weight: 600; }
.dim { color: var(--dim); } .fine { color: var(--dim); font-size: 12.5px; }
.kick { font-size: 12px; letter-spacing: .14em; color: var(--flame); margin: 0 0 4px; }
.gold { color: var(--gold); } .ok { color: var(--good); } .no { color: var(--bad); }
.bad { color: var(--bad); } .win { color: var(--flame); }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }

/* 상단 바 */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.brand { display: flex; align-items: baseline; gap: 8px; } .brand b { font-family: var(--display); font-size: 20px; letter-spacing: .1em; }
.brand span { color: var(--dim); font-size: 12px; letter-spacing: .3em; }
.meta { display: flex; gap: 14px; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; } .meta .gold { color: var(--gold); font-weight: 600; }
.screen { display: block; }

/* 버튼 */
.btn { font: inherit; color: var(--fg); background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 9px 14px; cursor: pointer; text-align: center; line-height: 1.3; transition: border-color .12s, background .12s; }
.btn:hover:not(:disabled) { border-color: var(--flame); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--flame); border-color: var(--flame); color: #06241e; font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #7af0d5; }
.btn.ghost { background: transparent; color: var(--dim); } .btn.on { border-color: var(--flame); color: var(--flame); background: var(--flame-d); }
.btn.danger { background: #3a1517; border-color: var(--bad); color: #ffb3b3; }
.btn.plus { padding: 2px 10px; font-weight: 600; }
.btn.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; text-align: left; } .btn.tile small { color: inherit; opacity: .7; }
.btn.tile.primary small { color: #06241e; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.stack { display: flex; flex-direction: column; gap: 10px; max-width: 280px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 14px; min-width: 0; }
.notice { background: var(--flame-d); border: 1px solid #1c5c50; color: #b8f5e6; border-radius: 6px; padding: 9px 12px; margin: 10px 0; font-size: 14px; }
.errtxt { color: var(--bad); font-size: 13px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chip { display: inline-block; font-size: 11.5px; padding: 0 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--dim); line-height: 1.7; }
.chip.bad { color: var(--bad); border-color: #5c2a2c; } .chip.good { color: var(--flame); border-color: #1c5c50; } .chip.warn { color: var(--warn); border-color: #5c4021; }
.line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.coin { image-rendering: pixelated; vertical-align: -4px; margin-right: 4px; }
.itm { display: flex; align-items: center; gap: 10px; } .ii { flex: none; width: 34px; display: flex; justify-content: center; } .ii img { image-rendering: pixelated; display: block; }
.line:last-child { border-bottom: 0; } .line > span:first-child { min-width: 0; }
.buy { display: flex; gap: 6px; flex-shrink: 0; }

/* 바 */
.bar { height: 8px; background: #0a0d13; border: 1px solid #1d2636; border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--flame); transition: width .35s ease; }
.bar.hp > i { background: var(--good); } .bar.low > i { background: var(--bad); } .bar.mp > i { background: var(--mp); } .bar.xp > i { background: var(--gold); } .bar.st > i { background: #7e8aa3; }
.bar.slim { height: 4px; margin-top: 3px; }
.bar.pr > i { background: linear-gradient(90deg, var(--flame-d), var(--flame)); } .bar.pr.full > i { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.mini { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; margin-top: 4px; } .mini b { color: var(--fg); font-weight: 500; }

/* 타이틀 */
.title { position: relative; padding: 56px 0 24px; overflow: hidden; }
.title h1 { font-size: clamp(88px, 24vw, 168px); font-weight: 800; letter-spacing: .06em; line-height: 1; color: var(--fg); text-shadow: 0 0 18px rgba(79, 227, 193, .55), 0 0 60px rgba(79, 227, 193, .25); margin-left: -.04em; }
.title .hanja { font-family: var(--display); color: var(--flame); letter-spacing: .6em; font-size: 15px; margin: 6px 0 22px; }
.title .lede { max-width: 460px; color: var(--dim); } .title .stack { margin: 22px 0 14px; }
.flames i { position: absolute; width: 9px; height: 13px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--flame); box-shadow: 0 0 14px 4px rgba(79, 227, 193, .5); opacity: .7; animation: flicker 4s ease-in-out infinite; }
.flames i:nth-child(1) { right: 14%; top: 22%; } .flames i:nth-child(2) { right: 26%; top: 48%; animation-delay: -1s; transform: scale(.7); }
.flames i:nth-child(3) { right: 8%; top: 64%; animation-delay: -2s; transform: scale(1.2); } .flames i:nth-child(4) { right: 36%; top: 16%; animation-delay: -3s; transform: scale(.6); }
.flames i:nth-child(5) { right: 18%; top: 82%; animation-delay: -1.6s; transform: scale(.8); }
@keyframes flicker { 0%, 100% { opacity: .35; translate: 0 0; } 50% { opacity: .9; translate: 0 -10px; } }
.prose h3 { color: var(--flame); } .prose ul { padding-left: 18px; margin: 6px 0; }

/* 생성 */
.field { display: block; font-size: 12.5px; color: var(--dim); margin-bottom: 4px; }
.input { width: 100%; max-width: 320px; font: inherit; color: var(--fg); background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; }
.clsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cls { font: inherit; color: var(--fg); text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cls:hover { border-color: #3a4a66; } .cls.on { border-color: var(--flame); background: var(--flame-d); }
.cls .hj { font-family: var(--display); color: var(--dim); font-size: 12px; letter-spacing: .3em; } .cls b { font-family: var(--display); font-size: 18px; } .cls small { color: var(--dim); } .cls em { font-style: normal; font-size: 12.5px; color: var(--fg); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 6px; } .detail > div { min-width: 0; }
.stats { display: grid; gap: 6px; } .srow { display: grid; grid-template-columns: 56px 1fr 34px auto; align-items: center; gap: 8px; font-size: 13.5px; font-variant-numeric: tabular-nums; } .srow b { text-align: right; } .srow > span:first-child { white-space: nowrap; }
.skl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .skl li { font-size: 14px; } .skl li.lock { opacity: .45; }
.derived { color: var(--dim); font-size: 13px; margin-top: 12px; }

/* 허브 */
.hubhead { margin-bottom: 8px; } .party { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.pc { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; min-width: 0; } .pc.lead { border-color: #1c5c50; }
.pc-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .pc-h b { font-family: var(--display); font-size: 16px; }
.menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }

/* 지역 */
.zlist { display: grid; gap: 10px; margin-top: 12px; } .zcard { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.zcard > div { min-width: 0; } .zcard.locked { opacity: .55; } .zcard h3 { margin: 0 0 2px; font-size: 18px; } .zcard p { margin-bottom: 6px; }
.zonehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .clock { text-align: right; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; } .clock b { font-family: var(--display); font-size: 24px; color: var(--flame); } .clock span { font-size: 12px; color: var(--dim); }
.presence { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; font-size: 13px; color: var(--dim); margin-bottom: 10px; } .presence b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.log { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; height: 220px; overflow-y: auto; font-size: 14px; }
.log p { margin: 0 0 5px; } .l-dim, .l-miss { color: var(--dim); } .l-good, .l-heal { color: var(--good); } .l-bad, .l-ko { color: var(--bad); } .l-crit { color: var(--warn); font-weight: 600; }
.l-act { color: var(--fg); font-weight: 600; } .l-round { color: var(--dim); font-size: 12px; text-align: center; letter-spacing: .2em; margin: 8px 0 6px !important; } .l-dot { color: var(--warn); } .l-boss { color: var(--bad); font-weight: 600; }
.acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.bossbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid var(--bad); background: #2a1215; border-radius: 8px; padding: 12px 16px; }
.story, .intro { font-size: 15.5px; line-height: 1.8; max-width: 62ch; } .intro { color: #d9c9c9; font-style: italic; }
.choices { display: grid; gap: 8px; max-width: 520px; margin-top: 14px; } .choices .btn { text-align: left; }
.effects { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 4px; } .effects .good { color: var(--good); } .effects .bad { color: var(--bad); } .effects .dim { color: var(--dim); }
.levelup { color: var(--gold); font-weight: 600; }
.picks { display: grid; gap: 8px; } .pick { font: inherit; color: var(--fg); text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .pick.on { border-color: var(--flame); background: var(--flame-d); } .pick:disabled { cursor: default; }
.dawn h2 { color: var(--gold); }

/* 전투 */
.side { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.side.e { padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.unit { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; min-width: 0; transition: border-color .15s, opacity .3s; }
.unit.enemy { background: #17141b; } .unit.boss { border-color: #6b2a2f; grid-column: 1 / -1; } .unit.active { border-color: var(--flame); box-shadow: 0 0 0 1px var(--flame) inset; }
.unit.dead { opacity: .35; } .unit.tg { cursor: pointer; border-color: var(--warn); } .unit.tg:hover { background: #2a2216; }
.unit.hit { animation: shake .3s; } @keyframes shake { 0%, 100% { translate: 0 0; } 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.u-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 13px; } .u-h b { font-size: 14.5px; overflow-wrap: anywhere; }
.u-n { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin-top: 3px; font-variant-numeric: tabular-nums; } .chips { display: flex; flex-wrap: wrap; gap: 3px; min-height: 4px; margin-top: 4px; }
.bottom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; } .bottom .log { height: 330px; } .bottom > * { min-width: 0; }
.cmd { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; max-height: 260px; overflow-y: auto; }
.turn { margin-bottom: 8px; } .cmds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.slist { display: grid; gap: 6px; } .skb { font: inherit; color: var(--fg); text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; cursor: pointer; display: flex; flex-direction: column; } .skb:hover:not(:disabled) { border-color: var(--flame); } .skb:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 640px) {
  .detail, .bottom { grid-template-columns: 1fr; } .log { height: 200px; } .bottom .log { height: 280px; } .cmd { max-height: none; }
  .zcard { flex-direction: column; align-items: stretch; } .line { flex-wrap: wrap; } h2 { font-size: 21px; }
  .side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .flames i, .unit.hit { animation: none; } .bar > i { transition: none; } }

/* ===== 온라인판 추가 ===== */
#toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 50; display: grid; gap: 6px; justify-items: center; pointer-events: none; }
#toast .t { background: #1d2738; border: 1px solid var(--line); color: var(--fg); padding: 9px 14px; border-radius: 6px; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.5); max-width: min(92vw, 420px); }
#toast .t.err { border-color: var(--bad); color: #ffc2c2; } #toast .t.ok { border-color: #1c5c50; color: #b8f5e6; }
.banner { background: #3a2a10; border: 1px solid #6b4d1b; color: #ffd9a0; padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 14px; }
.center { text-align: center; padding: 40px 0; }
/* 아바타 */
.av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--panel2); border: 1px solid var(--line); flex: none; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; color: var(--flame); font-size: 15px; }
.av.sm { width: 28px; height: 28px; font-size: 12px; } .av.lg { width: 72px; height: 72px; font-size: 26px; } .av.xl { width: 128px; height: 128px; font-size: 44px; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; } .who > div { min-width: 0; line-height: 1.3; } .who b { font-family: var(--display); display: block; overflow-wrap: anywhere; } .who small { display: block; }
.top .who b { font-size: 14px; } .meta .gold { white-space: nowrap; }
.badge { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 4px; border: 1px solid #1c5c50; color: var(--flame); background: var(--flame-d); letter-spacing: .02em; white-space: nowrap; }
.org { border: 1px solid var(--line); background: linear-gradient(180deg, #121a26, #0f141d); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.org .abbr { font-family: var(--display); font-weight: 800; letter-spacing: .3em; color: var(--flame); font-size: 13px; } .org p { margin: 2px 0 0; color: var(--dim); font-size: 13px; }
/* 인증 */
.auth { max-width: 420px; margin: 24px auto 0; } .auth h1 { font-size: clamp(72px, 22vw, 120px); line-height: 1; margin: 6px 0 4px; text-shadow: 0 0 18px rgba(79,227,193,.55), 0 0 60px rgba(79,227,193,.25); letter-spacing: .06em; }
.form { display: grid; gap: 12px; margin-top: 14px; } .form .input { max-width: none; } .hint { color: var(--dim); font-size: 12.5px; margin-top: -6px; }
/* 직급 진행 */
.progress { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; color: var(--dim); margin-top: 8px; } .progress b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.me-card { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; } .me-card .who b { font-size: 20px; }
/* 로비 */
.lobby-list .line { align-items: center; } .members { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 10px 0; }
.mem { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; } .mem.host { border-color: #1c5c50; }
.chatbox { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; height: 160px; overflow-y: auto; font-size: 14px; } .chatbox p { margin: 0 0 4px; overflow-wrap: anywhere; } .chatbox b { color: var(--flame); font-weight: 500; }
.chatform { display: flex; gap: 8px; margin-top: 8px; } .chatform .input { max-width: none; flex: 1; min-width: 0; }
/* 랭킹 */
.rank-table { width: 100%; border-collapse: collapse; font-size: 14px; } .rank-table th, .rank-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); } .rank-table th { color: var(--dim); font-weight: 500; font-size: 12.5px; } .rank-table td.n { font-variant-numeric: tabular-nums; text-align: right; } .rank-wrap { overflow-x: auto; }
.rank-table tr.me td { background: #10211f; }
/* 프로필 */
.profile-grid { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; } .cropper { display: grid; gap: 8px; max-width: 280px; } .cropper canvas { width: 256px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); background: #0a0d13; }
.cropper label { font-size: 12.5px; color: var(--dim); display: grid; gap: 2px; } .cropper input[type=range] { width: 100%; accent-color: var(--flame); }
input[type=file] { font: inherit; color: var(--dim); max-width: 100%; }
.unit .u-h { align-items: center; } .unit .who { gap: 8px; } .unit .u-top { display: flex; gap: 8px; align-items: center; }
.cd { color: var(--warn); font-variant-numeric: tabular-nums; font-weight: 600; }
.turnbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
@media (max-width: 640px) { .profile-grid { grid-template-columns: 1fr; } .me-card { grid-template-columns: 1fr; } }

/* 상단바: 프로필(좌) · 랭킹(우) */
.whobtn { background: none; border: 0; padding: 4px 8px 4px 4px; margin: -4px; border-radius: 10px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.whobtn:hover, .whobtn:focus-visible { background: var(--panel2); outline: 0; }
.rankbtn { background: var(--panel2); border: 1px solid var(--line); color: var(--dim); font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; cursor: pointer; }
.rankbtn:hover, .rankbtn:focus-visible { color: var(--flame); border-color: var(--flame); outline: 0; }
.meta { align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; }

/* 거점 메뉴 아래 여백 축소 */
.menu { gap: 8px; }
.btn.tile { padding: 10px 14px; }
.lobby-list { margin-top: 10px; padding: 10px 14px; margin-bottom: 8px; }
.lobby-list h3 { margin: 0 0 4px; }
.lobby-list p { margin: 6px 0 2px; }

/* 랭킹 표: 숫자 열은 머리글도 오른쪽 정렬, 칸 세로 가운데 */
.rank-table th, .rank-table td { vertical-align: middle; white-space: nowrap; }
.rank-table th.n, .rank-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.rank-table th:first-child, .rank-table td:first-child { width: 28px; text-align: center; padding-left: 2px; padding-right: 2px; }
.rank-table td .who { display: inline-flex; align-items: center; gap: 8px; }

/* 랭킹 표: 고정 열 너비로 간격을 고르게 */
.rank-table { table-layout: fixed; min-width: 330px; }
.rank-table th, .rank-table td { padding: 9px 6px; overflow: hidden; text-overflow: ellipsis; }
.rank-table th:nth-child(1), .rank-table td:nth-child(1) { width: 7%; text-align: center; padding-left: 0; padding-right: 0; }
.rank-table th:nth-child(2), .rank-table td:nth-child(2) { width: 25%; }
.rank-table th:nth-child(3), .rank-table td:nth-child(3) { width: 32%; }
.rank-table th:nth-child(4), .rank-table td:nth-child(4) { width: 14%; }
.rank-table th:nth-child(5), .rank-table td:nth-child(5) { width: 9%; text-align: right; }
.rank-table th:nth-child(6), .rank-table td:nth-child(6) { width: 13%; text-align: right; }
.rank-table td .who { max-width: 100%; }
.rank-table td .who b { overflow: hidden; text-overflow: ellipsis; }
.rank-table td:nth-child(3) { text-overflow: clip; }
.rank-table th:nth-child(1), .rank-table td:nth-child(1) { width: 6%; }
.rank-table th:nth-child(2), .rank-table td:nth-child(2) { width: 30%; }
.rank-table th:nth-child(3), .rank-table td:nth-child(3) { width: 28%; }
.rank-table th:nth-child(4), .rank-table td:nth-child(4) { width: 13%; }
.rank-table th:nth-child(5), .rank-table td:nth-child(5) { width: 8%; }
.rank-table th:nth-child(6), .rank-table td:nth-child(6) { width: 15%; }
@media (max-width: 520px) { .rank-table td .av { display: none; } }

/* ===== 랜덤 옵션 장비 ===== */
.g0 { --gc: #cfd3da; } .g1 { --gc: #79d98d; } .g2 { --gc: #6aa7ff; } .g3 { --gc: #b48cff; } .g4 { --gc: #e6b85c; } .g5 { --gc: #a8e0ff; }
.gn { color: var(--gc); font-weight: 600; }
.gtag { display: inline-block; font-size: 11.5px; padding: 0 7px; border: 1px solid var(--gc); border-radius: 4px; color: var(--gc); line-height: 1.7; vertical-align: 1px; }
.gbar { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.gbar b, .curline b { color: var(--fg); font-weight: 600; }
.glist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 14px; }
.gear { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gc); border-radius: 8px; padding: 11px 13px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gear.g4 { box-shadow: 0 0 0 1px rgba(230, 184, 92, .25) inset; }
.ax li.uq { color: #cdeeff; }
.gear .gh { font-size: 15px; } .gear .gsub { font-size: 12.5px; }
.ax { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; }
.ax li::before { content: '◆ '; color: var(--dim); font-size: 9px; vertical-align: 2px; }
.ax li.dim::before { content: ''; }
.ax li.lg { color: var(--gold); } .ax li.lg::before { color: var(--gold); }
.gdelta { font-size: 12.5px; color: var(--dim); margin-top: 2px; } .gdelta .up { color: var(--good); } .gdelta .down { color: var(--bad); }
.gbtns { margin-top: 8px; } .gbtns .btn { padding: 6px 10px; font-size: 13px; } .gbtns .btn small { opacity: .7; margin-left: 4px; }

/* ===== 강화소 ===== */
.fpick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.fchip { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-left: 3px solid var(--gc); border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.fchip.on { background: rgba(255, 255, 255, .08); border-color: var(--gc); }
.fchip small { color: var(--dim); }
.p-hi { color: var(--good); } .p-mid { color: var(--warn); } .p-lo { color: var(--bad); }
.pity { display: inline-flex; align-items: center; gap: 4px; }
.pity i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--dim); }
.pity i.on { background: var(--warn); border-color: var(--warn); }
.flash-ok { animation: fok .9s ease-out; } .flash-bad { animation: fbad .9s ease-out; }
@keyframes fok { 0% { box-shadow: 0 0 0 0 rgba(121, 217, 141, .9); } 100% { box-shadow: 0 0 0 14px rgba(121, 217, 141, 0); } }
@keyframes fbad { 0% { box-shadow: 0 0 0 0 rgba(226, 98, 98, .9); transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 100% { box-shadow: 0 0 0 14px rgba(226, 98, 98, 0); transform: translateX(0); } }
.rrrow { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.rrrow.pend { background: rgba(230, 184, 92, .07); }
.rrb { display: flex; flex-wrap: wrap; gap: 6px; } .rrb .btn { padding: 5px 9px; font-size: 12.5px; } .rrb .btn small { opacity: .7; margin-left: 3px; }
.rrpend { border: 1px dashed var(--gold); border-radius: 8px; padding: 9px 11px; margin: 8px 0; display: grid; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .flash-ok, .flash-bad { animation: none; } }

/* ===== 확률 시뮬레이터 페이지 ===== */
  .simwrap { max-width: 880px; margin: 0 auto; padding: 20px 16px 60px; }
  .simwrap h1 { font-family: var(--display); font-size: 24px; margin: 0 0 4px; }
  .ctl { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin: 12px 0; }
  .ctl label { display: grid; gap: 3px; font-size: 12.5px; color: var(--dim); }
  .ctl select, .ctl input { background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font: inherit; }
  .tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13.5px; }
  .tbl th, .tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; }
  .tbl th:first-child, .tbl td:first-child { text-align: left; }
  .tbl th { color: var(--dim); font-weight: 500; }
  .tw { overflow-x: auto; }
  .bar2 { display: inline-block; height: 8px; border-radius: 4px; background: var(--flame); vertical-align: middle; }
  .note { color: var(--dim); font-size: 13px; line-height: 1.6; }

/* ===== 이벤트 선택지: 성공 확률 경고색 / 직업 전용 ===== */
.choices .btn.ev-hi { border-left: 4px solid var(--good); }
.choices .btn.ev-mid { border-left: 4px solid var(--warn); }
.choices .btn.ev-lo { border-left: 4px solid var(--bad); background: rgba(240, 98, 98, .08); }
.choices .btn.ev-unk { border-left: 4px solid var(--mp); }
.evp { font-size: 12.5px; color: var(--dim); }
.ev-hi .evp { color: var(--good); } .ev-mid .evp { color: var(--warn); } .ev-lo .evp { color: var(--bad); font-weight: 600; }
.choices .btn:disabled .chip { opacity: .8; }
.nightfx { margin: 6px 0 0; } .nightfx .up { color: var(--good); } .nightfx .down { color: var(--bad); }
.shd { color: #7fd1ff; font-weight: 600; }

.cgrp { border-left: 3px solid var(--gc); margin-top: 10px; }
.cgrp h3 { margin: 0 0 6px; font-size: 14px; }
.cgrp .cpre { color: #fff; }
.lk { color: #fff; display: inline-flex; vertical-align: -2px; margin-left: 4px; }
.dgr { margin: 6px 0 10px; } .chipb { background: transparent; border: 1px solid var(--line); color: var(--gc); } .chipb.on { background: rgba(255,255,255,.1); border-color: var(--gc); font-weight: 700; } .chipb small { opacity: .7; }
.cfm { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cfm-box { background: var(--panel, #11161d); border: 1px solid var(--line); border-radius: 10px; padding: 18px; max-width: 420px; width: 100%; }
.cfm-box.warn { border-color: #ff7a59; box-shadow: 0 0 18px rgba(255,122,89,.25); }
.cfm-t { white-space: pre-line; margin: 0 0 14px; line-height: 1.6; }
.cfm-box .row { justify-content: flex-end; margin: 0; }
.gtot { margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--line); } .gtot h3 { margin: 6px 0; font-size: 14px; } .gtot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; }

.gt-sec { margin-top: 8px; font-size: 13.5px; } .gt-sec > .dim { display: block; margin-bottom: 4px; }
.gt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; } .gt-grid > div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px solid var(--line); } .gt-grid b { font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 520px) { .gt-grid { grid-template-columns: 1fr; } }
.gt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tipchip { position: relative; display: inline-block; cursor: help; padding: 2px 10px; border: 1px solid #8a6d2b; border-radius: 999px; color: var(--gold); font-size: 12.5px; outline: none; }

.tipchip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: min(300px, 80vw); padding: 8px 10px; background: #1b222c; border: 1px solid var(--line); border-radius: 6px; color: var(--ink, #e6e9ee); font-size: 12.5px; line-height: 1.5; white-space: normal; text-align: left; box-shadow: 0 4px 16px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 50; }
.tipchip:hover::after, .tipchip:focus::after { opacity: 1; }
.tipchip::after { left: 0; transform: none; } .tipchip:nth-child(n+3)::after { left: auto; right: 0; }

/* 전설: 금색 + 흰색이 은은하게 번쩍임 / 고유: 프리즘 */
@keyframes shimG { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.gn.g4, .gtag.g4, .cgrp h3.g4 { background: linear-gradient(100deg, #e6b85c 0%, #e6b85c 38%, #fff7dc 50%, #e6b85c 62%, #e6b85c 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shimG 3.6s linear infinite; }
.gear.g4 { box-shadow: 0 0 0 1px rgba(230, 184, 92, .3) inset, 0 0 12px rgba(255, 244, 214, .08); }
.gtag.g4, .gtag.g5 { border-color: transparent; position: relative; }
.gtag.g4::before, .gtag.g5::before { content: ''; position: absolute; inset: 0; border-radius: 4px; padding: 1px; background: linear-gradient(100deg, #e6b85c, #fff7dc, #e6b85c); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.gtag.g5::before { background: linear-gradient(100deg, #8fd3ff, #ffffff, #8fd3ff); }
@media (prefers-reduced-motion: reduce) { .gn.g4, .gn.g5, .gtag.g4, .gtag.g5 { animation: none; } }
.gt-grid { column-gap: 0; } .gt-grid > div:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--line); } .gt-grid > div:nth-child(even) { padding-left: 14px; }
@media (max-width: 520px) { .gt-grid > div:nth-child(odd) { border-right: 0; padding-right: 0; } .gt-grid > div:nth-child(even) { padding-left: 0; } }

/* 고유: 옅은 하늘색 ↔ 흰색이 천천히 흐르고, 글자 주변이 은은하게 빛난다 */
@keyframes uqFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes uqGlow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(150, 215, 255, .55)); } 50% { filter: drop-shadow(0 0 8px rgba(200, 238, 255, .9)); } }
.gn.g5 { background: linear-gradient(100deg, #8fd3ff 0%, #bfe8ff 22%, #ffffff 40%, #bfe8ff 60%, #8fd3ff 80%, #8fd3ff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: uqFlow 6s linear infinite, uqGlow 3.2s ease-in-out infinite; }
.gtag.g5 { background: linear-gradient(100deg, #8fd3ff, #ffffff, #8fd3ff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: uqFlow 6s linear infinite, uqGlow 3.2s ease-in-out infinite; }
.tipchip.uq { border-color: rgba(150, 215, 255, .7); }
.gear.g5 { border-left-color: #bfe8ff; box-shadow: 0 0 0 1px rgba(150, 215, 255, .35) inset, 0 0 16px rgba(150, 215, 255, .16); }
.tipchip.uq { box-shadow: 0 0 8px rgba(150, 215, 255, .35); }
@media (prefers-reduced-motion: reduce) { .gn.g5, .gtag.g5 { animation: none; } }

/* 정비: 부위 라벨 · 남은 포인트 · 스탯 미리보기 */
.slotl { display: inline-block; font-size: 12px; line-height: 1.6; padding: 0 8px; margin-right: 4px; border: 1px solid #4a5568; border-radius: 4px; color: var(--dim); background: rgba(255,255,255,.03); }
.pts { display: inline-block; margin-left: 6px; padding: 1px 12px; border-radius: 999px; background: #f0c24b; color: #1a1405; font-size: 13px; font-weight: 800; }
.pv { color: #5be38a !important; } .bar.st > i.pv { background: #5be38a; }
.bar.st { display: flex; } .bar.st > i { flex: none; } .stats b.pv { text-shadow: 0 0 6px rgba(91,227,138,.35); }
.sbtns { display: inline-flex; gap: 3px; } .sbtns .btn { padding: 2px 6px; font-size: 12px; min-width: 30px; } .sbtns .btn.minus { color: #ff9a9a; }
.sact { margin: 10px 0 0; }
@media (max-width: 560px) { .srow { grid-template-columns: 56px 1fr 34px; } .sbtns { grid-column: 1 / -1; justify-self: end; margin-bottom: 4px; } }
/* 전설·고유 효과 칩 */
.lgl { line-height: 1.9; } .lgc { display: inline-block; padding: 0 10px; margin-right: 4px; border: 1px solid rgba(230, 184, 92, .65); border-radius: 999px; box-shadow: 0 0 9px rgba(255, 226, 150, .28); font-weight: 600; }
.lgc.uq { border-color: rgba(150, 215, 255, .75); box-shadow: 0 0 10px rgba(150, 215, 255, .35); }
.lgc .gn.g4, .tipchip .gn.g4 { filter: drop-shadow(0 0 4px rgba(255, 232, 170, .7)); } .lgc .gn.g5, .tipchip .gn.g5 { }
.tipchip { box-shadow: 0 0 8px rgba(255, 226, 150, .3); } .tipchip.uq { box-shadow: 0 0 9px rgba(150, 215, 255, .38); }
/* 전설: 이름·태그에도 칩과 같은 금빛 발광 */
@keyframes goldGlow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 226, 150, .5)); } 50% { filter: drop-shadow(0 0 8px rgba(255, 240, 190, .9)); } }
.gn.g4, .gtag.g4 { animation: shimG 3.6s linear infinite, goldGlow 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gn.g4, .gtag.g4 { animation: none; } }
.gtot li > .dim:first-child { display: inline-block; min-width: 3.4em; margin-right: 12px; }
.gtot li > .slotl { min-width: 4.6em; text-align: center; margin-right: 8px; } .gt-sec > .slotl { margin-bottom: 4px; }
.gtot li { display: flex; align-items: baseline; flex-wrap: wrap; }
.gt-sec > small.dim { display: inline; margin-left: 6px; }

/* 정비: 넓은 화면은 2단, 장비는 한 줄 요약 + 접기 */
.pf-art { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; max-height: 420px; margin: 12px 0; border: 1px dashed var(--line); border-radius: 8px; background: var(--panel2); overflow: hidden; } .pf-art > img:not(.av) { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 999px) { .pf-art { aspect-ratio: auto; height: 170px; } }
.slot .cs { align-items: center; } .cs-main { min-width: 0; line-height: 1.7; } .cs-btns { display: inline-flex; gap: 6px; flex: none; } .cs-btns .btn { padding: 3px 10px; font-size: 12.5px; }
.slot.open { background: rgba(255,255,255,.02); border-radius: 6px; padding-bottom: 4px; }
.skl { gap: 6px; } .skl li small { color: var(--dim); }
.cs-main .lgc { font-size: 12px; padding: 0 8px; margin-left: 2px; }
.tipchip::after { display: none; } .tipchip:hover::after, .tipchip:focus::after { display: block; }
.sallb { float: right; padding: 3px 10px; font-size: 12.5px; }

/* 정비 위에 뜨는 장비 가방 팝업 */
.bagm { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; padding: 14px; }
.bagm-box { background: var(--bg, #0b0f15); border: 1px solid var(--line); border-radius: 12px; width: min(940px, 100%); max-height: min(92vh, 980px); display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.bagm-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); } .bagm-h h2 { margin: 0; font-size: 20px; }
.bagm-body { overflow-y: auto; padding: 12px 16px 18px; overscroll-behavior: contain; }
.mini { grid-template-columns: 38px 1fr 76px; } .mini b { text-align: right; }

.riskb{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:3px;background:#5a1620;color:#ff9aa6;border:1px solid #a63a4a;font-size:.8em;letter-spacing:.05em}
.solo{margin:6px 0;padding:6px 9px;border-left:3px solid #6fb7c9;background:rgba(111,183,201,.09);font-size:.9em;color:var(--fg)} .solo b{color:#8fd3e6;margin-right:6px}
.slist{max-height:60vh;overflow-y:auto}

.tut{margin:0 0 12px;padding:10px 12px;border:1px solid #3b6b78;border-left:4px solid #6fb7c9;border-radius:8px;background:rgba(111,183,201,.08)}
.tut-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tut-k{font-size:.78em;color:#8fd3e6;border:1px solid #3b6b78;border-radius:3px;padding:0 6px}
.tut-x{margin-left:auto;font:inherit;font-size:.78em;color:var(--dim);background:none;border:1px solid var(--line);border-radius:4px;padding:2px 8px;cursor:pointer}.tut-x:hover{color:var(--fg)}
.tut p{margin:6px 0;font-size:.92em;line-height:1.55}.tut-f{display:grid;gap:4px}.tut-f small{color:var(--dim)}
.dq{display:grid;grid-template-columns:1fr minmax(110px,170px) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}.dq:last-child{border-bottom:0}
.dq.done{opacity:.55}.dq-p{display:grid;gap:3px;font-size:.8em;color:var(--dim)}
.dq-bonus{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.newb{color:#ffd777}
@media(max-width:560px){.dq{grid-template-columns:1fr auto}.dq-p{grid-column:1/3;order:3}}

.qbox{width:min(640px,100%)}.qtabs{display:flex;gap:6px;margin-bottom:8px}
.qtab{flex:1;font:inherit;padding:8px 10px;border:1px solid var(--line);background:var(--panel2);color:var(--dim);border-radius:8px;cursor:pointer}.qtab.on{color:var(--fg);border-color:#6fb7c9;background:rgba(111,183,201,.12)}
.qnote{font-size:.85em;margin:4px 0 8px}.dq-b{display:flex;gap:6px}
@media(max-width:560px){.dq{grid-template-columns:1fr}.dq-p{grid-column:auto;order:0}.dq-b{justify-content:flex-end}}

.dec{display:block;font-size:.72em;color:#c9a3ff;letter-spacing:.02em;line-height:1.2}
.dz{margin:16px 0 6px;font-size:1em}.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.mc{border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--panel2);display:grid;gap:4px;align-content:start}
.mc.unk{opacity:.55;border-style:dashed}.mc.t2{border-color:#3b6b78}.mc.t3{border-color:#c9a14a;background:rgba(201,161,74,.07)}
.mc-h{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.mc-h small{margin-left:auto}.mc-t{display:flex;gap:4px;flex-wrap:wrap}
.tt{font-size:.7em;border:1px solid var(--line);border-radius:999px;padding:0 7px;color:var(--dim)}.tt.on{color:#9fe3c2;border-color:#3f8f6b}
.mc-i{margin:0;font-size:.82em}.mc-l{margin:2px 0;font-size:.82em;color:#cdbf9d;line-height:1.5}.mc-r{margin:0;font-size:.82em;color:var(--dim)}.mc-r.got{color:#ffd777}
.ec h3{margin:0 0 2px}.ec-m{font-size:.84em;margin:6px 0}.ok{color:#9fe3c2}.evchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.evc{font-size:.76em;border:1px dashed var(--line);border-radius:5px;padding:1px 7px;color:var(--dim)}.evc.on{border-style:solid;color:var(--fg);background:rgba(111,183,201,.1)}
.slots3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}.slotb{border:1px dashed var(--line);border-radius:8px;padding:8px 10px;display:grid;gap:2px}.slotb.on{border:1px solid #c9a3ff;background:rgba(201,163,255,.08)}
.tr{display:grid;grid-template-columns:1fr minmax(100px,160px) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.tr:last-child{border-bottom:0}.tr.cur{background:rgba(201,163,255,.06)}.tr-p{display:grid;gap:3px;font-size:.8em;color:var(--dim)}
@media(max-width:560px){.slots3{grid-template-columns:1fr}.tr{grid-template-columns:1fr auto}.tr-p{grid-column:1/3;order:3}.mgrid{grid-template-columns:1fr}}

.mgrid{align-items:stretch}.mgrid>.mc{height:100%;box-sizing:border-box}

/* 강적(노랑) · 주인(빨강) 강조 */
.mc.e{border-color:#a8861f;border-left:4px solid #f2c733;background:linear-gradient(90deg,rgba(242,199,51,.10),transparent 60%),var(--panel2)}
.mc.e .mc-h b{color:#ffd23f}.chip.ke{color:#1a1400;background:#f2c733;border-color:#f2c733;font-weight:700}
.mc.b{border-color:#b3302a;border-left:4px solid #ff4d4d;background:linear-gradient(90deg,rgba(255,77,77,.14),transparent 65%),var(--panel2);box-shadow:0 0 12px rgba(255,77,77,.18)}
.mc.b .mc-h b{color:#ff5c5c;font-size:1.06em}.chip.kb{color:#fff;background:#d6322c;border-color:#d6322c;font-weight:700}

/* 도감 카드: 라벨/내용 구분, 분석 효과는 맨 아래 */
.mc-row{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:baseline;font-size:.84em;line-height:1.5}
.lbl{display:inline-block;text-align:center;font-size:.8em;font-weight:700;padding:1px 0;border-radius:4px;background:rgba(111,183,201,.16);color:#8fd3e6;border:1px solid rgba(111,183,201,.35)}
.mc-l{margin:4px 0 2px;padding:6px 8px;border-left:2px solid #6b5f45;background:rgba(0,0,0,.18);border-radius:0 4px 4px 0;font-style:italic}
.mc-an{margin-top:6px;padding-top:7px;border-top:1px dashed var(--line);display:grid;gap:6px}
.mc-ar{display:grid;grid-template-columns:62px 1fr;gap:8px;align-items:baseline;font-size:.82em;line-height:1.5;color:var(--dim)}.mc-ar.on{color:var(--fg)}
.lbl.a2{background:rgba(111,183,201,.12);color:#8fd3e6}.lbl.a3{background:rgba(201,161,74,.14);color:#ffd777;border-color:rgba(201,161,74,.45)}
.mc-ar:not(.on) .lbl{opacity:.55}.rw{color:#ffd777}
@media(max-width:560px){.mc-row{grid-template-columns:40px 1fr}}

/* 도감 카드 정리: 기술·재료 내용 글자 축소, 분석 효과는 항상 카드 맨 아래에 정렬 */
.mc{display:flex;flex-direction:column;gap:4px}
.mc-row>span:last-child{font-size:.9em}
.mc-an{margin-top:auto}.mc-l+.mc-an,.mc-row+.mc-an,.mc-i+.mc-an,.bar+.mc-an{margin-top:auto}
.mc-t,.mc-h{flex:none}
.mc-an .mc-ar:first-child{min-height:1.6em}.mc-an .mc-ar:last-child{min-height:3.2em}

.eqd{display:inline-block;padding:6px 12px;border-radius:8px;border:1px solid #c9a3ff;color:#c9a3ff;background:rgba(201,163,255,.12);font-weight:700;font-size:.9em;white-space:nowrap}
.slotb .slotx{justify-self:start;margin-top:4px;padding:2px 10px;font-size:.8em}
.dec{text-align:left}

/* 칭호 목록: 이름·효과 / 진행도 / 상태 버튼을 고정 칸으로 정렬 */
.tr{grid-template-columns:minmax(0,1fr) 190px 92px;column-gap:16px}
.tr-p{align-content:center;justify-items:start}.tr-p .bar{width:100%}.tr-p span{line-height:1.2}
.bar.done i{background:#3fae86}
.tr-b{display:flex;justify-content:flex-end}
.tr-b>*{width:92px;box-sizing:border-box;text-align:center;justify-content:center}
.tr-b .btn{padding-left:0;padding-right:0}
.nod{padding:6px 0;border-radius:8px;border:1px dashed var(--line);color:var(--dim);font-size:.9em;white-space:nowrap}
.eqd{padding-left:0;padding-right:0}
@media(max-width:560px){.tr{grid-template-columns:minmax(0,1fr) 92px;column-gap:10px}.tr-p{grid-column:1/3;order:3}}

/* 스토리 장면 */
.scn{position:fixed;inset:0;z-index:1100;background:rgba(3,5,9,.86);display:flex;align-items:center;justify-content:center;padding:14px;cursor:pointer}
.scn-box{width:min(620px,100%);max-height:92vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#10151f,#0a0d14);border:1px solid #2c3a4d;border-radius:12px;padding:16px 18px;box-shadow:0 14px 50px rgba(0,0,0,.7);cursor:default}
.scn-box h2{margin:2px 0 10px;font-size:1.35em}.scn-body{overflow-y:auto;display:grid;gap:10px;padding:4px 2px 10px;min-height:120px;overscroll-behavior:contain}
.sl{margin:0;line-height:1.75;opacity:.62}.sl.cur{opacity:1;animation:slin .35s ease}.sl.nar{color:#cfd6e0;font-style:italic}.sl.say{color:#f0e8d6}
.sp{display:block;font-size:.78em;letter-spacing:.04em;color:#8fd3e6;margin-bottom:1px}.sl.say .sp{font-style:normal}
.scn-f{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:10px;flex-wrap:wrap}.scn-f span{display:flex;gap:8px;margin-left:auto}
@keyframes slin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:560px){.scn-box{padding:14px}.scn-f small{width:100%}}

.star{color:#ffd23f;font-style:normal}.star2{color:#8fd3e6;font-style:normal}
.rec{margin:6px 0 10px;padding:8px 11px;border:1px solid #3b6b78;border-left:4px solid #ffd23f;border-radius:8px;background:rgba(255,210,63,.05);font-size:.92em}.rec p{margin:4px 0 0}

/* 정비: 넓게 펼쳐 3단 */
.wide { width: min(1240px, calc(100vw - 32px)); position: relative; left: 50%; transform: translateX(-50%); }
.mng { display: grid; gap: 0 14px; grid-template-columns: minmax(0, 1fr); align-items: start; } .mng > .panel { min-width: 0; }
@media (min-width: 760px) { .mng { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "pf pf" "st eq" "st sk"; grid-template-rows: auto auto 1fr; } }
@media (min-width: 1180px) { .mng { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(420px, 1.05fr); grid-template-areas: "pf st eq" "pf st sk"; grid-template-rows: auto 1fr; } }
@media (min-width: 760px) { .g-pf { grid-area: pf; } .g-sk { grid-area: sk; } .g-st { grid-area: st; } .g-eq { grid-area: eq; } }
/* 특수 효과 툴팁: 한 줄, 무기(볼드) | 설명 */
.tipchip::after, .tipchip:hover::after, .tipchip:focus::after { display: none !important; content: none; }
.tipbox { display: none; position: absolute; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: none; padding: 7px 12px; background: #1b222c; border: 1px solid var(--line); border-radius: 6px; color: var(--ink, #e6e9ee); font-size: 12.5px; font-weight: 400; line-height: 1.5; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.5); z-index: 50; pointer-events: none; }
.tipbox b { font-weight: 800; }
.tipchip:hover .tipbox, .tipchip:focus .tipbox { display: block; }
.tipchip:nth-child(n+3) .tipbox { left: auto; right: 0; }
/* 장비 칸: 이름 줄바꿈 금지 */
.cs-main b { white-space: nowrap; } .cs-main { white-space: nowrap; } .cs-main .dim, .cs-main small { white-space: nowrap; }

@media (min-width: 760px) and (max-width: 1179px) {
  .pf { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; align-content: start; }
  .pf > .pc-h, .pf > .mini, .pf > .solo { grid-column: 2; margin: 0 0 10px; }
  .pf { grid-template-rows: auto auto auto auto auto 1fr; } .pf > .pf-fig { grid-column: 1; grid-row: 1 / span 6; } .pf-fig .pf-art { aspect-ratio: 3 / 4; height: auto; max-height: none; margin: 0; }
}

/* 메뉴 제목 아래 여백 */
section:not(.panel) > h2 { margin-bottom: 18px; }
.forge-n { line-height: 1.8; } .forge-n b { color: var(--fg); }

/* 반신 이미지 */
.pf-art.has-bust { border-style: solid; padding: 0; } .pf-art > img.pf-bust { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-art { position: relative; flex-direction: column; gap: 10px; } .pf-hint { color: var(--dim); font-size: 12px; text-align: center; line-height: 1.5; }
@media (max-width: 759px) { .pf-art.has-bust { aspect-ratio: 3 / 4; height: auto; width: min(260px, 100%); margin-left: auto; margin-right: auto; } }
.bust-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; } .bust-prev { width: 120px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); } .bust-prev.empty { display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 13px; }
.cropper canvas.bust { width: 240px; aspect-ratio: 3 / 4; border-radius: 8px; }

.cropper canvas { cursor: grab; touch-action: none; } .cropper canvas:active { cursor: grabbing; } .crop-hint { margin: 0; line-height: 1.6; }

/* 캐릭터 한마디 말풍선: 반신 이미지 바로 밑, 흰 바탕, 꼬리는 위쪽 */
.pf-fig { min-width: 0; } .pf-fig .pf-art { margin-top: 0; }
.say { margin: 12px 0 14px; }
.say-b { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: #fff; color: #1b212b; border-radius: 12px; text-align: center; }
.say-b::before { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.say-b q { quotes: none; font-size: 14.5px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; } .say-b q.dim { color: #7a8494; font-weight: 400; }
.say-b .btn { padding: 2px 10px; font-size: 12px; flex: none; background: #eef1f5; color: #3a4452; border: 1px solid #d3d9e2; } .say-b .btn.primary { background: #2c8f78; color: #fff; border-color: #2c8f78; }
.say-b .input { width: 100%; max-width: none; background: #fff; color: #1b212b; border: 1px solid #c9d0da; box-sizing: border-box; } .say-b .row { margin: 0; justify-content: center; }
/* 자기소개 */
.pf-bio { margin: 0 0 12px; } .pf-bio-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .pf-bio-h .btn { padding: 3px 10px; font-size: 12.5px; }
.pf-bio .bio-t { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; font-size: 14px; } .pf-bio textarea { width: 100%; max-width: none; resize: vertical; box-sizing: border-box; } .pf-bio .row { margin-top: 6px; }
@media (min-width: 760px) and (max-width: 1179px) { .pf-bio { grid-column: 2; } }
@media (min-width: 760px) and (max-width: 1179px) { .pf > .solo { align-self: start; } }

.say-b[data-a] { cursor: pointer; } .say-b[data-a]:hover { background: #f1f5f9; } .say-b[data-a]:hover::before { background: #f1f5f9; } .say-b[data-a]:focus-visible { outline: 2px solid var(--flame); }

/* 프로필 칸 머리 */
.pf-h { justify-content: space-between; align-items: center; flex-wrap: nowrap; } .pf-id { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; } .pf .pf-name { font-size: 21px; } .pf-lv { flex: none; font-weight: 700; color: var(--dim); font-size: 14px; margin-left: 10px; }
.chip.deco { color: #c9a3ff; border-color: rgba(201,163,255,.55); background: rgba(201,163,255,.08); }

.pf-lv .pf-cls { font-weight: 500; }

.pf-lv { display: inline-flex; align-items: center; gap: 8px; color: var(--ink, #e6e9ee); font-size: 15px; font-weight: 800; }
.pf-lv .pf-cls { font-size: 12.5px; font-weight: 600; color: var(--flame); padding: 1px 9px; border: 1px solid rgba(72,214,178,.45); border-radius: 999px; background: rgba(72,214,178,.1); }

/* 상단 바: 이름·일차·골드 | 로고 | 버튼 */
.top.tb { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.tb-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tb-name { font-size: 14px; } .tb-sub { display: flex; gap: 10px; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; } .tb-sub .gold { color: var(--gold); font-weight: 600; white-space: nowrap; }
.tb-logo { display: flex; align-items: baseline; justify-content: center; gap: 8px; } .tb-logo b { font-family: var(--display); font-size: 22px; letter-spacing: .12em; } .tb-logo span { color: var(--dim); font-size: 12px; letter-spacing: .3em; }
.tb-r { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
@media (max-width: 520px) { .top.tb { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; } .tb-r .rankbtn { padding: 3px 7px; } }
/* 프로필 카드 글자 */
.me-id { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .me-id .me-name { font-family: var(--display); font-size: 20px; line-height: 1.25; } .me-id .me-deco { font-size: 13px; color: #c9a3ff; font-weight: 800; } .me-id .me-cls { font-size: 13.5px; color: var(--dim); } .me-id .me-cls b { color: var(--ink, #e6e9ee); font-weight: 800; }
/* 알림 점 */
.tile { position: relative; } .dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 6px rgba(255, 210, 63, .8); }
.acts.zsub { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10px; } .acts.zsub .tile { width: 220px; max-width: calc(50% - 4px); }

.me-card .me-id b.me-deco { font-size: 13px; } .me-card .me-id b.me-name { font-size: 20px; } .me-card .me-id .me-cls b { font-size: inherit; display: inline; }

.warnline { color: var(--gold); margin: 6px 0; }

/* 메뉴 버튼: 작게, 한 줄 */
.mrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.mbtn { position: relative; padding: 7px 16px; font-size: 14px; font-weight: 600; line-height: 1.3; border-radius: 8px; }
.mbtn.on { border-color: var(--flame); color: var(--flame); box-shadow: inset 0 0 0 1px var(--flame); }
.mbtn.primary.on { color: #05201a; }
.mbtn .dot { top: 4px; right: 4px; width: 8px; height: 8px; }
.mrow.zact { margin: 10px 0; } .mrow.zact .mbtn.primary { padding-left: 22px; padding-right: 22px; }

/* 상단 로고: 로그인 화면 로고와 같은 글꼴·네온 효과, 누르면 메인으로 */
button.tb-logo { display: flex; flex-direction: column; align-items: center; gap: 0; background: none; border: 0; padding: 0 6px; cursor: pointer; font: inherit; color: inherit; line-height: 1; }
.tb-logo b { font-family: var(--display); font-size: 38px; font-weight: 800; letter-spacing: .06em; color: var(--fg); text-shadow: 0 0 10px rgba(79,227,193,.55), 0 0 30px rgba(79,227,193,.25); }
.tb-logo i { font-style: normal; font-family: var(--display); color: var(--flame); letter-spacing: .6em; margin-right: -.6em; font-size: 10px; margin-top: 2px; }
button.tb-logo:hover b, button.tb-logo:focus-visible b { text-shadow: 0 0 14px rgba(79,227,193,.85), 0 0 36px rgba(79,227,193,.4); } button.tb-logo:focus-visible { outline: 0; }

@media (max-width: 520px) { .tb-logo b { font-size: 28px; } .tb-logo i { font-size: 8px; } .tb-sub { gap: 6px; font-size: 11.5px; } }

/* 메인 화면 꾸미기: /img/home.jpg 를 넣으면 배경으로 깔립니다 (없으면 아래 그라데이션) */
.home{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;background-size:cover;background-position:center}
.home.th-market{background-image:linear-gradient(180deg,rgba(8,10,18,.2),rgba(8,10,18,.82)),url(/img/home.jpg),radial-gradient(ellipse at 20% 0%,#3a2a1c,transparent 60%),linear-gradient(180deg,#141a28,#0b0f17)}
.home.th-station{background-image:linear-gradient(180deg,rgba(8,10,18,.2),rgba(8,10,18,.82)),url(/img/home.jpg),radial-gradient(ellipse at 80% 0%,#1c3a40,transparent 60%),linear-gradient(180deg,#0f1a1f,#0a0e12)}
.home.th-dawn{background-image:linear-gradient(180deg,rgba(8,10,18,.15),rgba(8,10,18,.8)),url(/img/home.jpg),radial-gradient(ellipse at 50% 100%,#6b4a3a,transparent 65%),linear-gradient(180deg,#1a1f33,#0d1018)}
.home-in{padding:14px 14px 0}.home .org{background:rgba(10,14,22,.55);backdrop-filter:blur(2px);display:inline-block;margin:0;padding:8px 12px}
.home-deco{display:flex;gap:6px;justify-content:flex-end;padding:60px 12px 10px;flex-wrap:wrap}.home-deco .mbtn{opacity:.8}.home-deco .mbtn.on{opacity:1}
.sl.say.boss{font-style:italic;color:#f3d9d4}.sl.say.boss .sp{color:#ff5a5a;font-style:normal;font-weight:700}
/* 출동(탐색) 화면 로그 창 */
.presence + .log { height: 330px; }
@media (max-width: 760px) { .presence + .log { height: 280px; } }

/* 프로필 카드 오른쪽 정보(체력·기력·계급 진행)는 폭을 줄여 오른쪽 정렬 */
.me-card { max-width: 725px; margin-left: auto; margin-right: auto; }
.me-card .me-r { width: 100%; }
@media (max-width: 640px) { .me-card .me-r { width: 100%; justify-self: stretch; } }
/* 강화소: 왼쪽 장비 목록 + 오른쪽 상세/강화/재련 */
.fgrid { display: grid; gap: 12px; margin-top: 8px; }
.fgrid .fpick { margin: 0; align-content: start; }
.fbody { display: grid; gap: 10px; min-width: 0; align-content: start; }
.fbody > .panel { margin: 0; }
@media (min-width: 900px) {
  .fgrid { grid-template-columns: 230px 1fr; }
  .fgrid .fpick { flex-direction: column; flex-wrap: nowrap; }
  .fgrid .fchip { text-align: left; }
  .fbody { grid-template-columns: 1fr 1fr; }
  .fbody > .gear { grid-column: 1 / -1; }
}
/* 출동 버튼은 가장 중요하니 더 넓게 */
.mrow .mbtn[data-v="zones"] { min-width: 120px; padding-left: 26px; padding-right: 26px; }

.mrow { justify-content: center; }

/* 분해 경고문: 등급 이름은 굵고 등급 색으로 빛남, 경고 아이콘은 빨강 */
.cfm-t .wi { color: #ff4d4d; font-style: normal; font-weight: 800; text-shadow: 0 0 8px rgba(255,77,77,.6); }
.cfm-t b.gn { font-weight: 800; }
.cfm-t b.gn.g3 { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gc) 70%, transparent)); }
.cfm-t b.gn.g4 { filter: drop-shadow(0 0 5px rgba(255, 232, 170, .75)); }
.cfm-t b.gn.g5 { filter: drop-shadow(0 0 5px rgba(143, 211, 255, .8)); }

/* 사건 기록집: 고위험 기록은 구분선으로 떼어 보여줌 */
.evsep { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; color: #ff9a85; font-size: 12.5px; letter-spacing: .12em; }
.evsep hr { flex: 1; border: 0; border-top: 1px solid #5a2a2a; margin: 0; } .evsep span { order: -1; }
.panel.ec.risk { border-color: #5a2a2a; background: linear-gradient(180deg, rgba(90, 30, 30, .18), transparent 60%), var(--panel); }
.panel.ec.risk h3 { color: #ff9a85; }

.ec-an { display: grid; gap: 5px; margin: 8px 0 4px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ec-an .mc-ar { grid-template-columns: 52px 1fr; }

/* 사건 팝업: 출동 화면 위에 띄움(선택을 마쳐야 닫힘) */
.evm { position: fixed; inset: 0; z-index: 1000; background: rgba(3, 5, 9, .72); display: flex; align-items: center; justify-content: center; padding: 14px; }
.evm-box { width: min(640px, 100%); max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; border-radius: 12px; box-shadow: 0 14px 50px rgba(0, 0, 0, .7); }
.evm-box > .panel { margin: 0; }
.mbtn.autob { color: var(--dim); } .mbtn.autob.on { color: #0b1a14; background: #4ee0b8; border-color: #4ee0b8; font-weight: 700; }

/* 파견 */
.dopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 10px; }
.dopt { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 8px; font: inherit; cursor: pointer; display: grid; gap: 4px; text-align: center; }
.dopt small { color: var(--dim); line-height: 1.4; } .dopt.on { border-color: #4ee0b8; background: rgba(78, 224, 184, .1); }
.dis-t { margin: 8px 0 2px; font-size: 1.05em; }
/* 사건 팝업 테두리: 경고 팝업처럼 눈에 띄게 */
.evm-box { border: 2px solid #ff7a59; box-shadow: 0 0 22px rgba(255, 122, 89, .45), 0 14px 50px rgba(0, 0, 0, .7); background: var(--panel, #11161d); animation: evGlow 2.4s ease-in-out infinite; }
.evm-box > .panel { border: 0; background: transparent; }
@keyframes evGlow { 0%, 100% { box-shadow: 0 0 14px rgba(255, 122, 89, .35), 0 14px 50px rgba(0, 0, 0, .7); } 50% { box-shadow: 0 0 28px rgba(255, 122, 89, .65), 0 14px 50px rgba(0, 0, 0, .7); } }
@media (prefers-reduced-motion: reduce) { .evm-box { animation: none; } }

/* 출동 화면: 약초탕·기력환 버튼은 체력·기력 줄 오른쪽에 */
.mini.mi-b { grid-template-columns: 38px 1fr 76px 96px; }
.mini.mi-b .mbtn.sm { padding: 3px 8px; font-size: 12px; min-height: 0; justify-self: end; white-space: nowrap; }
.mini.mi-b:not(:has(.mbtn)) { grid-template-columns: 38px 1fr 76px; }
/* 전투 화면: 로그와 명령 창 높이를 같게 */
.bottom { align-items: stretch; }
.bottom .log, .bottom .cmd { height: 330px; max-height: none; box-sizing: border-box; }
.bottom .cmd { overflow-y: auto; }
@media (max-width: 760px) { .bottom .log { height: 280px; } .bottom .cmd { height: auto; min-height: 200px; } }

/* 로그 구분선: 출동 로그는 행동(탐색·이벤트·전투)마다, 전투 로그는 라운드마다 */
.log .logsep { border: 0; border-top: 1px dashed #34445a; margin: 8px 0 7px; }
.log p.l-round { border-top: 1px dashed #34445a; padding-top: 7px; margin-top: 8px; }
.log p.l-round:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.zbtns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.zbtns .btn.danger { font-weight: 700; }

/* 재료 판매 수량 막대 */
.sellctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sqr { width: 150px; accent-color: #4ee0b8; } .sqv { min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .sellrow { flex-wrap: wrap; } .sellctl { width: 100%; justify-content: flex-start; } .sqr { flex: 1; min-width: 120px; } }

/* 프로필 카드: 왼쪽은 칭호·이름·밑줄·직업/레벨, 직급 배지는 오른쪽 진행 막대 앞으로 */
.me-card { max-width: 760px; }
.me-card .me-id { gap: 2px; min-width: 96px; }
.me-card .me-id .me-line { display: block; align-self: stretch; height: 0; border-top: 1px solid #6b7686; margin: 3px 0 2px; }
.me-card .me-id .me-cls { font-size: 14px; }
.me-card .progress .badge { margin: 0; }
.me-card .curline { margin-top: 7px; }
.scn-ch{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.scn-ch .btn{width:100%;text-align:left;justify-content:flex-start;white-space:normal;line-height:1.45}
.tb-logo em { font-style: normal; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .42em; margin-right: -.42em; color: #4fe3c1; text-shadow: 0 0 8px rgba(79,227,193,.5); margin-bottom: 1px; }
@media (max-width: 520px) { .tb-logo em { font-size: 9px; letter-spacing: .34em; margin-right: -.34em; } }
.axb{color:var(--dim);opacity:.65;font-size:.92em}
.promo{margin-bottom:12px}.promo .plist{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:6px}.promo .plist li{display:flex;gap:8px;align-items:baseline;color:var(--dim)}.promo .plist li span:nth-child(2){flex:1}.promo .plist li b{font-weight:600;font-variant-numeric:tabular-nums}
.promo .plist li.ok{color:var(--fg)}.promo .plist li.ok .pk{color:var(--flame)}.promo.ready{border-color:var(--flame);box-shadow:0 0 14px rgba(79,227,193,.28)}
.promo-ready{color:var(--flame)!important;text-shadow:0 0 8px rgba(79,227,193,.5)}
.frow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line,rgba(255,255,255,.08))}.frow:first-of-type{border-top:0}
.frow .who{display:flex;align-items:center;gap:10px;min-width:0}.frow .fbtns{display:flex;gap:6px;flex-shrink:0}
.on-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6ee7a0;box-shadow:0 0 6px #6ee7a0;vertical-align:middle}
.fadd{gap:8px;flex-wrap:nowrap}.fadd .input{flex:1;min-width:0}
.mycode{font-family:var(--display);font-size:28px;letter-spacing:.3em;color:var(--flame);text-shadow:0 0 10px rgba(79,227,193,.4);user-select:all;margin-right:6px}
.fprof{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}.fp-name{font-family:var(--display);font-size:22px}.fp-say{display:block;margin:6px 0 8px;color:var(--dim);font-style:italic}
@media (max-width:520px){.fprof{grid-template-columns:1fr}.frow{flex-wrap:wrap}}
.rankbtn{position:relative}.rankbtn .dot{position:absolute;top:-3px;right:-3px}
/* ===== 메신저 (폰 모양 팝업) ===== */
#phone{position:relative;z-index:70}
.phfab{position:fixed;right:16px;bottom:16px;width:50px;height:50px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--flame);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.5);padding:0}
.phfab:hover,.phfab.on{border-color:var(--flame);box-shadow:0 0 14px rgba(79,227,193,.35)}
.ph-un{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;font-style:normal;line-height:1}
.phfab .ph-un{position:absolute;top:-4px;right:-4px}
.ph-bd{display:none}
.phone{position:fixed;right:16px;bottom:76px;width:300px;height:min(560px,calc(100vh - 100px));display:flex;flex-direction:column;background:#05070b;border:2px solid #2c3446;border-radius:36px;padding:9px;box-shadow:0 16px 50px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04) inset}
.ph-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:74px;height:18px;border-radius:10px;background:#000;z-index:2}
.ph-scr{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg2);border-radius:27px;overflow:hidden}
.ph-st{display:flex;justify-content:space-between;padding:12px 20px 4px;font-size:11px;color:var(--dim)}
.ph-h{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line)}
.ph-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}.ph-t b{font-size:15px}.ph-t small{color:var(--dim);font-size:11px}
.ph-b{background:none;border:0;color:var(--fg);font-size:20px;line-height:1;width:30px;height:30px;border-radius:50%;cursor:pointer}.ph-b:hover{background:var(--panel2)}
.ph-list{flex:1;overflow-y:auto;padding:4px 6px}
.ph-row{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-radius:12px;padding:8px;color:var(--fg);font:inherit;text-align:left;cursor:pointer}.ph-row:hover{background:var(--panel)}
.ph-rt{flex:1;min-width:0;display:flex;flex-direction:column}.ph-rt b{font-size:14px}.ph-rt small{color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-empty{color:var(--dim);text-align:center;font-size:13px;padding:30px 12px;line-height:1.6}
.ph-chat{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.dm{display:flex;flex-direction:column;max-width:80%}.dm.me{align-self:flex-end;align-items:flex-end}.dm.th{align-self:flex-start;align-items:flex-start}
.dmb{padding:7px 11px;border-radius:16px;font-size:14px;line-height:1.4;word-break:break-word;white-space:pre-wrap}
.dm.me .dmb{background:var(--flame-d);border:1px solid rgba(79,227,193,.45);border-bottom-right-radius:5px}.dm.th .dmb{background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:5px}
.dm small{font-size:10px;color:var(--dim);margin-top:2px}
.ph-in{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}.ph-in .input{flex:1;min-width:0;padding:8px 12px;border-radius:18px}.ph-in .btn{padding:6px 12px;border-radius:18px}
.ph-home{height:5px;width:90px;border-radius:3px;background:#2c3446;margin:7px auto 1px}
@media (max-width:600px){.ph-bd{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55)}.phone{right:50%;transform:translateX(50%);bottom:16px;width:min(340px,92vw);height:min(600px,calc(100vh - 32px))}}
.ph-scr.wall{background:radial-gradient(120% 80% at 20% 0%,#16324a 0%,#0f1c2d 45%,#0a0f18 100%)}
.ph-scr.wall .ph-st{color:#c9d3e3;font-weight:600}
.ph-home-s{flex:1;min-height:0;display:flex;flex-direction:column;padding:18px 14px 12px}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 8px;align-content:start;flex:1}
.ph-app{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:#e3e9f4;font:inherit;cursor:pointer;padding:0}
.ph-ic{position:relative;width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 80%,#fff 20%),var(--ac));box-shadow:0 3px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.ph-app small{font-size:11px;line-height:1.2;text-align:center;min-height:13px;color:#cfd8e8}
.ph-app.off .ph-ic{filter:saturate(.45) brightness(.7)}.ph-app.off small{color:#8794ab}
.ph-app:not(.off):hover .ph-ic{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.2)}
.ph-ic .ph-un{position:absolute;top:-5px;right:-5px}
.ph-dock{display:flex;gap:8px;padding:10px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}.ph-dock .btn{flex:1;padding:9px 6px;border-radius:14px;font-size:13px}
/* ===== 휴게실 ===== */
.lg-tabs{margin:8px 0 12px}
.lgbox{height:300px;overflow-y:auto;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px}
.lm{display:flex;align-items:flex-start;gap:9px;margin:0 0 10px;line-height:1.45;word-break:break-word}.lm .av{flex-shrink:0}.lmb{flex:1;min-width:0;display:flex;flex-direction:column}.lmb b{color:var(--flame);font-size:13px}.lm.mine .lmb b{color:var(--gold)}.lm small{color:var(--dim);font-size:10px;margin-top:3px;flex-shrink:0}
.lmems{display:flex;flex-wrap:wrap;gap:8px 16px}.lmem{display:flex;align-items:center;gap:8px}.lmem span:last-child{display:flex;flex-direction:column;line-height:1.25}
.rpp{padding:12px 0;border-top:1px solid var(--line)}.rpp:first-of-type{border-top:0}.rph{display:flex;justify-content:space-between;align-items:center}.rph .who{display:flex;align-items:center;gap:8px}
.rpt{margin:8px 0 6px;line-height:1.55;word-break:break-word}
.rpa{display:flex;gap:12px}.lnk{background:none;border:0;color:var(--dim);font:inherit;font-size:13px;padding:2px 0;cursor:pointer}.lnk:hover,.lnk.on{color:var(--flame)}
.rpbox{margin-top:8px;padding:10px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:10px}
.rpc{padding:6px 0;border-top:1px solid rgba(255,255,255,.05)}.rpc:first-child{border-top:0}.rpc .who{display:inline-flex;align-items:center;gap:6px}.rpc p{margin:4px 0 2px;line-height:1.5;word-break:break-word}.rpc.sub{margin-left:22px;padding-left:10px;border-left:2px solid var(--line)}
.rp-to{margin:8px 0 0;font-size:13px;color:var(--flame)}.rpbox .fadd{margin-top:8px}
.lm .av.sm{width:44px;height:44px;font-size:17px}.lm{gap:11px;align-items:center}
.lg-chat{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px;align-items:start}
.lg-mem .lmems{flex-direction:column;flex-wrap:nowrap;gap:12px}
.lg-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}.lg-head h3{margin:0}.lg-head .fine{margin:0}
.lgform{display:flex;gap:8px;align-items:stretch}.lgform .input{flex:1;min-width:0;margin:0;height:44px;box-sizing:border-box}.lgform .btn{height:44px;box-sizing:border-box;padding:0 18px;margin:0;display:flex;align-items:center;justify-content:center}
@media (max-width:720px){.lg-chat{grid-template-columns:1fr}.lg-mem .lmems{flex-direction:row;flex-wrap:wrap}}
.fadd{align-items:stretch}.fadd .input{height:44px;box-sizing:border-box;margin:0}.fadd .btn{height:44px;box-sizing:border-box;margin:0;display:flex;align-items:center;justify-content:center}
/* 휴게실: 두 카드 높이 맞춤 */
.lg-chat{align-items:stretch}
.lg-mem{display:flex;flex-direction:column;min-height:0}.lg-hr{border:0;border-top:1px solid var(--line);margin:6px 0 12px;width:100%}
.lg-mem .lmems{flex:1;min-height:0;overflow-y:auto;max-height:470px}
.lg-main{display:flex;flex-direction:column}.lg-main .lgbox{height:380px}
.lgform{align-items:center;justify-content:center;margin-top:2px}
.lgform .emo{width:44px;padding:0;flex-shrink:0;color:var(--dim)}.lgform .emo:hover{color:var(--flame);border-color:var(--flame)}
@media (max-width:720px){.lg-mem .lmems{max-height:none}}
.lgform{width:100%;box-sizing:border-box;padding:8px 0 0}
.lgform .input,.fadd .input{max-width:none}
.phfab{width:62px;height:62px;right:18px;bottom:18px}.phfab svg{width:28px;height:28px}.phone{bottom:92px}
@media (max-width:600px){.phone{bottom:18px}}
.lounge .panel h3{margin:0 0 8px}.lg-head .btn{padding:5px 12px;font-size:13px}.lg-head{align-items:center}
.rpc.sub{margin-left:calc(var(--d,1) * 16px);padding-left:10px;border-left:2px solid var(--line)}
.lounge .panel{padding:14px 16px}
/* 역극 댓글: 평평한 스레드 */
.rpt-wrap{padding:8px 0;border-top:1px solid rgba(255,255,255,.07)}.rpt-wrap:first-child{border-top:0}
.rpc-h{display:flex;justify-content:space-between;align-items:center;gap:8px}.rpc-h .who{display:inline-flex;align-items:center;gap:6px;min-width:0}.rpc-h small{flex-shrink:0;text-align:right}
.rp-thread{margin:4px 0 0 18px;display:flex;flex-direction:column;gap:2px}
.rpc.sub,.rpc.sub.mine{margin-left:0!important;padding:6px 0 6px 12px;border-left:2px solid var(--line);border-top:0}
.rpc.sub.mine{border-left-color:var(--flame)}
.rp-at{color:var(--flame);font-weight:600;margin-right:2px}
.rp-more{align-self:flex-start;margin:2px 0 4px 12px;color:var(--flame)}
.rp-new{margin-left:2px;padding:1px 8px;border-radius:9px;background:rgba(240,98,98,.18);color:#ff8a8a;font-size:12px;font-weight:600;align-self:center}
.lg-tabs .btn .ph-un{margin-left:6px;vertical-align:1px}
/* ===== 지원 요청 띠 (WARNING / SAFETY) ===== */
.sbar{--c:#e3c15a;display:flex;align-items:stretch;margin-top:10px;margin-bottom:8px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--c) 9%,var(--bg2))}
.sbar.safe{--c:#5ea8ea}
.sbar::before,.sbar::after{content:"";flex:0 0 8px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 55%,transparent) 0 5px,transparent 5px 10px)}
.sbar::before{order:0}
.sb-tag{order:1;display:flex;align-items:center;gap:7px;padding:0 12px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.16em;color:#17130a;background:var(--c)}
.sbar.safe .sb-tag{color:#07131f}
.sb-ic{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:rgba(0,0,0,.28);color:inherit;font-style:normal;font-size:11px;font-weight:900;letter-spacing:0}
.sb-run{order:2;flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.sb-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:sbrun 30s linear infinite}
.sb-seg{display:inline-block;min-width:900px;padding:9px 0 9px 24px;font-size:13.5px;color:color-mix(in srgb,var(--c) 78%,#fff 22%)}
.sb-m{animation-duration:26s}.sb-l{animation-duration:44s}.sb-xl{animation-duration:48s}
.sbar:hover .sb-track{animation-play-state:paused}
@keyframes sbrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sb-act{order:3;display:flex;align-items:center;padding:0 8px;background:color-mix(in srgb,var(--c) 7%,var(--bg2))}
.sb-btn{padding:4px 12px;font-size:13px;border-radius:6px;background:var(--c);color:#17130a;border-color:var(--c);font-weight:700}.sb-btn:disabled{opacity:.45}
.sbar::after{order:4}
.sb-list{margin-top:0}
@media (prefers-reduced-motion:reduce){.sb-track{animation:none}.sb-run{-webkit-mask-image:none;mask-image:none}.sb-seg{min-width:0;overflow:hidden;text-overflow:ellipsis}.sb-seg + .sb-seg{display:none}}
@media (max-width:520px){.sb-tag{padding:0 8px;letter-spacing:.1em;font-size:12px}.sb-ic{display:none}}
/* ===== 패밀리어 / 사령계약 (폰 앱) ===== */
.gn{--gc:#9aa3b2}.gr{--gc:#5ea8ea}.gh{--gc:#b585e6}.gs{--gc:#e8b84f}
.pk-e{font-size:26px;line-height:1}
.pact,.fm-care{padding:8px 12px 12px;display:flex;flex-direction:column;gap:10px}
.pk-pick{border:1px solid color-mix(in srgb,#e8b84f 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,#e8b84f 14%,var(--panel)),var(--panel));border-radius:12px;padding:9px 11px}
.pk-pick small{color:#e8b84f;font-size:11px;letter-spacing:.06em}.pk-pick div{display:flex;align-items:center;gap:8px;margin-top:3px}.pk-pick b{font-size:14px}.pk-pick p{margin:4px 0 0;font-size:12px;color:var(--dim);line-height:1.45}
.pk-pity{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:center;font-size:12px}.pk-pity i{height:6px;border-radius:4px;background:var(--panel2);overflow:hidden}.pk-pity i b{display:block;height:100%;background:#e8b84f}.pk-pity small{grid-column:1/-1;color:var(--dim);font-size:11px}
.pk-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pk-btns .btn,.fm-btns .btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;line-height:1.2}.pk-btns small,.fm-btns small{font-size:11px;opacity:.75}
.pk-fine{margin:0;font-size:11px;color:var(--dim);line-height:1.55}
.pk-res{display:grid;grid-template-columns:1fr;gap:6px}.pk-res.ten{grid-template-columns:repeat(2,1fr)}
.pk-c{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;padding:7px 4px;border-radius:10px;border:1px solid color-mix(in srgb,var(--gc) 60%,transparent);background:color-mix(in srgb,var(--gc) 10%,var(--panel));animation:pkin .35s ease-out both}
.pk-c b{font-size:12px;line-height:1.25}.pk-c small{font-size:10.5px;color:var(--gc)}.pk-c.gs{box-shadow:0 0 12px color-mix(in srgb,#e8b84f 45%,transparent)}
.pk-res .pk-c:nth-child(2){animation-delay:.04s}.pk-res .pk-c:nth-child(3){animation-delay:.08s}.pk-res .pk-c:nth-child(4){animation-delay:.12s}.pk-res .pk-c:nth-child(5){animation-delay:.16s}.pk-res .pk-c:nth-child(n+6){animation-delay:.2s}
@keyframes pkin{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}
.pk-ok{justify-content:center;margin-top:-2px}
.fm-tabs{display:flex;gap:6px;padding:8px 12px 0}
.fm-pet{position:relative;align-self:center;width:112px;height:112px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--gc) 22%,var(--panel)),var(--panel));border:2px solid color-mix(in srgb,var(--gc) 55%,transparent);margin-top:4px}
.fm-em{font-size:58px;line-height:1;display:block}
.fm-pet.good .fm-em{animation:fmhop 1.1s ease-in-out infinite}.fm-pet.ok .fm-em{animation:fmbob 2.8s ease-in-out infinite}.fm-pet.bad .fm-em{animation:fmshake .6s ease-in-out infinite;filter:saturate(.5)}.fm-pet.sleep .fm-em{filter:grayscale(.6) brightness(.8);animation:fmbob 4s ease-in-out infinite}
.fm-z{position:absolute;right:8px;top:6px;font-weight:800;color:#8fb7ff;font-size:20px;animation:fmz 2s ease-in-out infinite}.fm-z small{font-size:13px}
@keyframes fmhop{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes fmbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes fmshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes fmz{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
.fm-nm{display:flex;align-items:baseline;justify-content:center;gap:6px;text-align:center}.fm-nm b{font-size:15px}.fm-nm small{color:var(--gc);font-size:11px;font-weight:700}
.fm-mood{margin:-4px 0 0;text-align:center;font-size:12.5px;color:var(--dim)}.fm-mood.good{color:#6fd18a}.fm-mood.bad{color:#e07a6a}.fm-mood.sleep{color:#8fb7ff}
.fm-lv,.fm-b{display:grid;grid-template-columns:46px 1fr 46px;gap:8px;align-items:center;font-size:12px}.fm-lv span,.fm-b span{color:var(--dim)}.fm-lv em,.fm-b em{font-style:normal;text-align:right;color:var(--dim);font-size:11px}
.fm-lv span{color:var(--fg);font-weight:700}
.fm-lv i,.fm-b i{height:8px;border-radius:5px;background:var(--panel2);overflow:hidden}.fm-lv i b,.fm-b i b{display:block;height:100%;border-radius:5px;transition:width .3s}
.fm-lv i b{background:#b585e6}.fm-b.hun i b{background:#e8a24f}.fm-b.joy i b{background:#e87aa5}.fm-b.nrg i b{background:#5ea8ea}
.fm-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fm-fx{border-top:1px solid var(--line);padding-top:8px;font-size:12px}.fm-fx b{font-size:12px}.fm-fx p{margin:3px 0 4px;line-height:1.5}.fm-fx small{display:block;color:var(--dim);line-height:1.5;font-size:11px}.fm-fx .fm-pend{color:#c9a15a}
.fm-row{display:flex;align-items:center;gap:9px;padding:8px;border-radius:12px;border:1px solid transparent;margin:2px 0}.fm-row.on{border-color:color-mix(in srgb,var(--gc) 55%,transparent);background:color-mix(in srgb,var(--gc) 9%,transparent)}
.fm-rt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}.fm-rt b{font-size:13px}.fm-rt small{color:var(--gc);font-size:11px}.fm-rt .fm-ef{color:var(--dim);margin-top:1px}.fm-rt u{text-decoration:none;color:#c9a15a}
.fm-with{font-size:11px;color:var(--gc);font-weight:700;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.fm-pet .fm-em,.fm-z,.pk-c{animation:none!important}}
.pact>*,.fm-care>*{flex:none}.fm-pet{width:112px;height:112px}
.fi{max-width:none;image-rendering:pixelated;vertical-align:bottom;display:block}      /* 크기는 <img width/height> 로 정한다 (그림마다 원래 크기가 다르다) */
.pk-e:has(.fi){display:flex;align-items:flex-end;justify-content:center;width:48px;height:48px;flex:none}
.fm-em:has(.fi){display:flex;align-items:flex-end;justify-content:center;height:104px}
/* 돌보기 화면: 원 대신 밤 거리 풍경 (바닥에 서 있는 모습) */
.fm-pet{width:100%;height:136px;border-radius:14px;border:1px solid color-mix(in srgb,var(--gc) 35%,var(--line));align-items:flex-end;justify-content:center;padding-bottom:26px;overflow:hidden;margin-top:2px;
  background:radial-gradient(1.5px 1.5px at 14% 22%,#cfe0ff 60%,transparent),radial-gradient(1px 1px at 33% 12%,#cfe0ff 60%,transparent),radial-gradient(1.5px 1.5px at 71% 18%,#cfe0ff 60%,transparent),radial-gradient(1px 1px at 86% 34%,#cfe0ff 60%,transparent),radial-gradient(1px 1px at 52% 30%,#cfe0ff 50%,transparent),
  linear-gradient(180deg,#0b1424 0%,#14223a 58%,#1a2b3a 58%,#101a24 100%)}
.fm-pet::before{content:"";position:absolute;left:0;right:0;top:calc(58% + 0px);height:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gc) 55%,#fff 0%),transparent);opacity:.55}
.fm-pet::after{content:"";position:absolute;left:50%;bottom:16px;width:84px;height:12px;margin-left:-42px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
.fm-pet .fm-em{position:relative;z-index:1;font-size:56px}
.fm-pet.sleep{background:radial-gradient(1.5px 1.5px at 14% 22%,#8fa8d8 60%,transparent),radial-gradient(1.5px 1.5px at 71% 18%,#8fa8d8 60%,transparent),linear-gradient(180deg,#070c16 0%,#0c1424 58%,#121c26 58%,#0a1118 100%)}
.fm-z{right:calc(50% - 64px);top:14px}
.pk-tk{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;border:1px dashed color-mix(in srgb,#e8b84f 55%,transparent);background:color-mix(in srgb,#e8b84f 8%,transparent);font-size:12.5px}.pk-tk b{color:#e8b84f}

/* 공지 · 의견 */
.notice{display:flex;align-items:flex-start;gap:8px;background:#1d2a3a;border:1px solid #3b5878;color:#cfe4ff;padding:9px 12px;border-radius:6px;margin-bottom:12px;font-size:14px;line-height:1.5}
.notice .nt-t{flex:1;min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}.notice .nt-x{background:none;border:0;color:inherit;font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.fb-in{max-width:none;min-height:120px;resize:vertical;box-sizing:border-box}.fbk{margin:10px 0}.fbk-b{cursor:pointer;font:inherit}.fbk-b.on{outline:2px solid var(--flame);color:var(--fg)}
.fbk-b{background:var(--bg2);color:var(--dim);border:1px solid var(--line);padding:6px 14px;border-radius:14px}.fbk-b.on{color:var(--fg);border-color:var(--flame)}

/* 소리 설정 패널 (public/audio.js 가 만든다) */
.sndp { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 54px); right: 8px; z-index: 120; width: min(270px, calc(100vw - 16px)); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.55); display: grid; gap: 10px; font-size: 13px; color: var(--fg); }
.sndp[hidden] { display: none; }
.sndp b { font-family: var(--display); font-size: 14px; }
.sndp-r { display: grid; grid-template-columns: 4.5em 1fr 2.8em; align-items: center; gap: 8px; color: var(--dim); }
.sndp-r output { text-align: right; color: var(--fg); font-variant-numeric: tabular-nums; }
.sndp input[type=range] { width: 100%; accent-color: var(--flame); }
.sndp-mute { display: flex; align-items: center; gap: 6px; color: var(--dim); cursor: pointer; }
.sndfab { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; z-index: 110; }