:root{
/* --muted 는 라벨/설명 공통색 — 판독성 위해 패널 대비 7:1 이상 유지(#b39c7d 는 5:1 미달이었다) */
--bg:#221a14; --panel:#2f2519; --panel2:#3a2d1d; --ink:#f3e6cf; --muted:#c9b491;
--dirt:#6b4f2e; --dirt-lo:#4a3620; --gold:#f2c14e; --gold-lo:#b8862b;
--com:#9aa0a6; --unc:#5fd38a; --rare:#5aa9e6; --epic:#b06ee6; --leg:#f2a13e;
--line:#1a130d;
/* 채굴장 창 높이 — 가로/내용물은 원래 크기 그대로, 이 값만 키우면 하늘(세로 여백)이 늘어난다(원래 100px). */
--mine-h:130px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:"Galmuri11","Galmuri9",monospace;
background:var(--bg);
color:var(--ink);
image-rendering:pixelated;
-webkit-font-smoothing:none;
/* align-items:flex-start — #app 을 stretch 로 뷰포트 높이에 가두지 않고 내용만큼 자라게 한다.
(stretch 면 내용이 길 때 #app 박스가 뷰포트에 갇혀 하단 패딩·패널 테두리가 잘려 보였다) */
display:flex;justify-content:center;align-items:flex-start;
background-size:16px 16px;
}
#app{width:100%;max-width:460px;min-height:100%;padding:12px;display:flex;flex-direction:column;gap:12px}
/* 하단 내비 자리(--page-pad · dungeon.css body 절)는 body 대신 여기서 비운다 — body 여백은 일부 모바일 엔진에서 스크롤 끝에 안 붙는다. */
body.idle-open{padding-bottom:0}body.idle-open #app{padding-bottom:calc(var(--page-pad,8px) + 12px)}
/* 한글 문단은 **낱말 단위**로 접는다(2026-09-26). 기본값은 글자마다 끊을 수 있어 폰에서 '자동 누 / 적' · '처음 / 부터' 처럼
낱말 가운데가 잘렸다. 한 낱말이 칸보다 길 때만 그 자리에서 쪼갠다(overflow-wrap) — 넘침은 생기지 않는다.
문단(p)만이다: 칩 · 단추 · 표는 최소 폭 계산이 달라지므로 건드리지 않는다. */
p{word-break:keep-all;overflow-wrap:break-word}
/* 스켈레톤 로딩 — 데이터 준비 전, 빈 틀 대신 뜨는 고정 오버레이(광고는 이 위 z-index 9998). */
.loading-screen{position:fixed;inset:0;z-index:50;display:flex;justify-content:center;align-items:flex-start;
background:var(--bg);overflow:auto;
background-size:16px 16px}
.loading-screen.hidden{display:none}
.loading-inner{width:100%;max-width:460px;min-height:100%;padding:12px;display:flex;flex-direction:column;gap:12px}
.skel{position:relative;overflow:hidden;background:var(--panel);border:3px solid var(--line);
box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.10) 50%,transparent 100%);
animation:skelShimmer 1.3s ease-in-out infinite}
@keyframes skelShimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}
.skel-bar{height:46px}
.skel-hud{height:118px}
.skel-site{height:230px}
.skel-tabs{display:flex;gap:6px}
.skel-tab{flex:1;height:34px}
.skel-panel{height:200px}
.skel-balance{height:52px}
.skel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.skel-card{height:150px}
.skel-row{height:44px}
/* 픽셀 박스 공통 */
.bar,.hud,.site,.panel,.claim-box,.pet-banner,.pet-slot,.pet-card,.shop-balance-bar{
background:var(--panel);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px}
/* 신원 묶음 — 네 화면(방치·던전/배틀·상점·컬렉션)이 game-header.js 한 벌을 쓰므로
여기 규칙 하나가 전부다. 왼쪽부터 계정 뱃지+레벨 → 장착 꾸미기 → 닉네임. */
.who{display:flex;align-items:center;min-width:0;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;white-space:nowrap}
/* 계정 뱃지 + 레벨 — 10단계(레벨 1~100). 색은 레벨마다 달라진다(game-header.js 가
--gh-accent 를 심는다). 누르면 지금 등급이 무엇인지 토스트로 알려 준다 —
휴대폰에서는 title 툴팁이 안 뜨기 때문이다. */
.gh-badge{flex:none;display:inline-flex;align-items:center;gap:3px;margin-right:6px;
padding:2px 5px 2px 3px;border:2px solid var(--gh-accent,var(--line));background:var(--panel2);
color:var(--gh-accent,var(--gold));font:inherit;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;
cursor:pointer;touch-action:manipulation}
.gh-badge[hidden]{display:none}
.gh-badge:hover,.gh-badge:focus-visible{background:#3a2d20;outline:none}
.gh-badge-art{display:block;width:18px;height:18px}
.gh-badge-art svg{display:block;width:100%;height:100%}
.gh-badge-lv{font-weight:700;letter-spacing:-.02em}
/* 끝판왕(10단계)만 숨을 쉰다 — 매 단계가 반짝이면 아무것도 특별하지 않다. */
.gh-badge[data-tier="10"]{animation:ghBadgePulse 2.4s ease-in-out infinite}
@keyframes ghBadgePulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 9px var(--gh-accent)}}
/* 헤더에는 페이지 이름이 없다 — 어느 화면인지는 하단 모드 내비가 이미 보여준다.
남는 것은 계정 이름(왼쪽)과 소리·설정 아이콘(오른쪽)뿐이다. 슬롯은 bgm.js 가 .who
**앞에** 꽂으므로 order 로 자리를 되돌린다. */
/* ⚠️ 여기에 `.bar.has-bgm-control{...}` 컨테이너 선언을 다시 만들지 말 것 — `.bar` 와 값이
같아 얻는 게 없고, 클래스가 하나 더 많아 좁은 화면 규칙(@media .bar)을 조용히 이긴다.
실제로 gap 이 그렇게 무효화돼 있었다. 남길 것은 자리(order) 규칙뿐이다. */
/* ⚠️ `flex:1` 이 이 배치의 핵심이다 — 닉네임 묶음이 **남는 폭을 전부** 먹어야
지갑과 도구 묶음이 오른쪽에서 한 덩어리로 붙는다. 예전에는 이게 없어
space-between 이 지갑을 헤더 한가운데로 밀어 놓았고, 어느 쪽에도 속하지 않은
것처럼 홀로 떠 보였다(2026-08-29 제보). */
.bar.has-bgm-control>.who{order:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bar.has-bgm-control>.gh-wallet{order:1}
.bar.has-bgm-control>.bgm-header-slot{order:2;flex:none;display:flex}
/* 엑스 지갑 — **도구 묶음(소리·게시판·설정) 바로 왼쪽**에 붙는다. 헤더 오른쪽 끝의
칩 한 줄(지갑 · 🔊 · 📋 · ⚙️)로 읽히는 것이 목표다.
⚠️ 가운데에 홀로 두지 말 것 — 그러면 왼쪽 신원과도 오른쪽 버튼과도 무관한 물체로 보인다.
자리는 위 order 규칙이 잡고, 높이(28px)는 버튼과 맞춰 같은 줄로 보이게 한다.
⚠️ 줄어드는 쪽은 **닉네임**이지 지갑이 아니다(flex:none) — 잔액은 잘리면 다른 숫자가 된다. */
.gh-wallet{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:28px;
padding:3px 7px 3px 4px;border:2px solid var(--line);background:var(--panel2);
color:var(--gold);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1;white-space:nowrap;
box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),inset 2px 2px 0 rgba(255,255,255,.06)}
.gh-wallet[hidden]{display:none}
/* 아이콘 자체는 `.gi gi-x` 가 그린다(위 아이콘 한 벌). 크기도 거기 맡긴다 —
`.gi` 의 em 규칙이 칩 글자 크기를 따라가므로 16.5px(좁은 화면 15px)로 저절로 맞는다.
여기서 px 를 다시 적지 않는다: `.gi` 가 뒤에 있어 특정성이 같으면 어차피 지고,
이기게 만들어 봐야 좁은 화면 축소분을 손으로 또 적어야 한다. 남기는 건 발광뿐이다. */
.gh-wallet-icon{
/* 원본이 사방으로 빛나는 보석이라, 어두운 헤더에서는 은은한 발광을 한 겹 준다. */
filter:drop-shadow(0 0 3px rgba(214,120,255,.55))}
/* 자리를 **미리** 잡아 둔다. 0 에 맞춰 좁게 시작하면 잔액이 늘 때마다 칩이 넓어지면서
왼쪽 닉네임과 오른쪽 소리·설정을 밀어 헤더 전체가 움찔거린다.
6ch = 다섯 자리 + 천 단위 쉼표("12,345"). `ch` 는 숫자 한 글자 폭이라 좁은 화면에서
글자가 작아지면 예약 폭도 같이 줄어든다 — 별도 규칙이 필요 없다.
tabular-nums 와 짝이어야 한다(1 과 8 의 폭이 달라지면 예약이 어긋난다).
⚠️ 예약한 자리 안에서는 **가운데 정렬**이다. 한쪽으로 붙이면 자릿수가 적을 때
반대쪽만 휑하게 비어 칩이 한쪽으로 쏠려 보인다. 가운데로 두면 좌우 여백이 늘
같아서, 0 이든 99,999 든 어색한 순간이 없다(자릿수는 양옆으로 고르게 자란다). */
.gh-wallet-val{font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
min-width:6ch;text-align:center}
/* 잔액이 0 이면 예약을 풀어 준다(2026-09-26). 6ch 예약은 **자라는 숫자**가 헤더를 움찔거리게 하지 않으려는 것인데,
0 은 자라는 중이 아니다 — 엑스는 구매 · 지급 때만 바뀌어 0 → N 넘어감은 한 번뿐이다. 그 대신 폰(360~412px)에서
닉네임이 한 글자('개…')로 잘리던 폭을 돌려받는다. 표식(is-zero)은 game-header.js 가 단다. */
.gh-wallet.is-zero .gh-wallet-val{min-width:0}
/* ── 헤더 도구 단추 한 벌 — 소리 · 게시판 · 부족 대화 · 가방(10-13) · 알림함 · 설정 (2026-09-26) ──────────────
여섯이 한 줄에 나란히 서는 **한 부품**인데, 생김새가 파일 셋(style · notification-center · tribe-chat)에
따로 적혀 폭(34 · 28 · 30 · 34 · 30px)과 모양(부족 대화만 둥근 모서리 · 다른 바탕)이 갈라져 있었다.
모양은 **여기 한 곳**이 정한다 — 각 파일에는 그 단추만의 것(뱃지 · 안 읽음 점 · 이퀄라이저)만 남긴다.
⚠️ 좁은 화면 크기도 아래 조임 블록에서 여섯을 **함께** 줄인다(하나만 줄이면 줄이 들쭉날쭉해진다).
⚠️ 전투 독(`.battle-top-actions`)·월드보스 독은 자기 규칙으로 덮는다(특이도가 더 높다). */
.bgm-toggle,.gh-board,.gh-chat,.gh-bag,.nc-inbox-open,.gs-open-btn{position:relative;flex:none;
display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:28px;
padding:4px 6px;border-radius:0;
font:inherit;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1;white-space:nowrap;cursor:pointer;touch-action:manipulation;}
.bgm-toggle:focus-visible,.gh-board:focus-visible,.gh-chat:focus-visible,.nc-inbox-open:focus-visible,
.gs-open-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* 게시판 버튼 — 제보·개선 요청 창구를 여는 단 하나의 입구. 자리는 **소리와 설정 사이**다
(#bgmControl 안 · index.html). 그래서 도구 묶음이 옮겨 다녀도 늘 ⚙️ 왼쪽에 붙어 있다.
⚠️ 뱃지(안 읽은 댓글 수)는 버튼 **밖으로** 튀어나온다(position:absolute + overflow 없음).
버튼 안에 흐름으로 넣으면 숫자가 생길 때마다 버튼 폭이 변해 헤더가 움찔거린다.
⚠️ 전투·월드 독에서는 감춘다 — 그 독들은 화면을 덮는 전투 중에 **소리만** 끄고 켜라고
있는 자리다(아래 규칙). 여기에 게시판이 따라가면 원정 중에 글 목록이 열린다. */
.gh-board-icon{display:block;}
/* 헤더 도구 단추 그림(2026-10-02) — 이모지 대신 월드 평면 스티커(/world/ui/*.svg · 한 장 1KB 안팎). 항상 보이는 자리라 가벼운 쪽이다.
크기는 em — 단추 글자 크기(13 → 12px)를 그대로 따라 좁은 화면에서 함께 줄어든다. */
.ghi{display:block;width:1.4em;height:1.4em;background-position:center;background-repeat:no-repeat;background-size:contain}
.ghi-book{background-image:url(/world/ui/book.svg)}
.ghi-bag{background-image:url(/world/ui/bag.svg)}
.ghi-chat{background-image:url(/world/ui/chat.svg)}
.ghi-bell{background-image:url(/world/ui/bell.svg)}
.ghi-gear{background-image:url(/world/ui/gear.svg)}
.gh-board-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 3px;
display:inline-flex;align-items:center;justify-content:center;border:2px solid #241c15;
background:#d8452f;color:#fff;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-weight:700;line-height:1;
font-variant-numeric:tabular-nums}
.gh-board-badge[hidden]{display:none}
/* 전투 상단(던전) · 월드보스 독 · 월드 독 — 소리만 남기고 게시판 · 가방은 감춘다. */
.battle-top-actions .gh-board,
#worldBossBgmDock .gh-board,
#worldBgmDock .gh-board{display:none}
.battle-top-actions .gh-bag,
#worldBossBgmDock .gh-bag,
#worldBgmDock .gh-bag{display:none}
.bgm-control{display:inline-flex;align-items:stretch;gap:2px;min-width:0;max-width:100%}
.bgm-toggle{gap:5px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.bgm-label{flex:none}
.bgm-track-title{min-width:0;max-width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f7d99b}
.bgm-toggle.is-off .bgm-track-title{color:var(--muted)}
.bgm-next{flex:none;min-width:28px;padding:3px 5px;border:2px solid var(--line);background:#34291f;color:#d9d4c9;font:inherit;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1;cursor:pointer;box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),inset 2px 2px 0 rgba(255,255,255,.06)}
.bgm-next:hover:not(:disabled){background:#453528;color:var(--gold)}
.bgm-next:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bgm-next:disabled{cursor:not-allowed;opacity:.42}
.bgm-equalizer{display:flex;align-items:flex-end;gap:1px;width:13px;height:12px}
.bgm-equalizer i{display:block;width:2px;height:3px;background:#fbbf24;transform-origin:bottom;image-rendering:pixelated;box-shadow:0 0 3px currentColor}
.bgm-equalizer i:nth-child(2){background:#fb7185}.bgm-equalizer i:nth-child(3){background:#22d3ee}.bgm-equalizer i:nth-child(4){background:#a3e635}
.bgm-equalizer i:nth-child(2){height:8px}.bgm-equalizer i:nth-child(3){height:5px}.bgm-equalizer i:nth-child(4){height:10px}
.bgm-toggle.playing .bgm-equalizer i{animation:bgmEq .72s steps(3,end) infinite alternate,bgmEqColor 1.8s steps(4,end) infinite}
.bgm-toggle.playing .bgm-equalizer i:nth-child(2){animation-delay:-.28s,-.42s}.bgm-toggle.playing .bgm-equalizer i:nth-child(3){animation-delay:-.51s,-.86s}.bgm-toggle.playing .bgm-equalizer i:nth-child(4){animation-delay:-.16s,-1.28s}
@keyframes bgmEq{to{transform:scaleY(.35)}}
@keyframes bgmEqColor{0%,100%{background:#fbbf24}25%{background:#fb7185}50%{background:#22d3ee}75%{background:#a3e635}}
@media (prefers-reduced-motion:reduce){.bgm-toggle.playing .bgm-equalizer i{animation:none}}
/* ── 게임 아이콘 한 벌 ──────────────────────────────────────────────────────
이모지를 대신하는 PNG 묶음. 원본은 `core/media/icon/`(300px 안팎·200KB 급)이고,
`web/assets/icon/` 에 128px·9KB 로 구워 둔 것이 화면이 쓰는 정본이다.
왜 바꿨나 — 이모지는 **기기마다 그림이 다르다.** 안드로이드·아이폰·윈도우가 각각 다른
⚔️ 를 그리고, 어떤 조합(🏴☠️ 처럼 여러 글자를 이어 붙인 것)은 아예 네모로 깨진다.
같은 화면이 사람마다 달라 보이던 것을 한 벌로 고정한다.
⚠️ **![]()
가 아니라 배경 이미지다.** 기존 CSS 가 `.game-mode-nav button span`·
`.dtab-icon`·`.cta-icon` 을 잡아 애니메이션·filter 를 걸고 있어서, 안에 ![]()
를
넣으면 그 규칙들이 바깥 span 에만 걸려 빗나간다. 자리(span)는 그대로 두고 그림만 바꾼다.
⚠️ 기본 크기는 `em` 이지만, 실제로는 **쓰는 자리마다 px 로 덮는다**(내비 32px ·
서브탭 24~26px · 지갑 18px). em 은 어디에도 안 걸린 경우의 안전한 기본값일 뿐이니,
"font-size 를 줄이면 아이콘도 따라 줄어든다"고 기대하지 말 것 — 크기를 바꾸려면
그 자리의 px 규칙을 고쳐야 한다. */
.gi{display:inline-block;flex:none;width:1.5em;height:1.5em;vertical-align:-.34em;
background-position:center;background-repeat:no-repeat;background-size:contain}
.gi-crystal{background-image:url(/assets/icon/crisctal.png?v=20260829a)}
.gi-door{background-image:url(/assets/icon/door.png?v=20260829a)}
.gi-battle{background-image:url(/assets/icon/battle.png?v=20260829a)}
.gi-boss{background-image:url(/assets/icon/boss.png?v=20260829a)}
.gi-map{background-image:url(/assets/icon/map.png?v=20260829a)}
.gi-store{background-image:url(/assets/icon/sotre.png?v=20260829a)}
.gi-scroll{background-image:url(/assets/icon/scroll.png?v=20260829a)}
.gi-pet{background-image:url(/assets/icon/pet.png?v=20260829a)}
.gi-bag{background-image:url(/assets/icon/bag.png?v=20260829a)}
.gi-shield{background-image:url(/assets/icon/shield.png?v=20260829a)}
.gi-sword{background-image:url(/assets/icon/sord.png?v=20260829a)}
.gi-box{background-image:url(/assets/icon/box.png?v=20260829a)}
.gi-calendar{background-image:url(/assets/icon/calender.png?v=20260829a)}
.gi-mix{background-image:url(/assets/icon/mix.png?v=20260829a)}
/* 엑스(현금성 재화) — 헤더 지갑 칩. 나머지와 같은 한 벌이라 캐시버스터도 같이 움직인다. */
.gi-x{background-image:url(/assets/icon/x.png?v=20260829a)}
.hud{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:12px}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.stat .label{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;}
.stat .val{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;}
.stat.big{grid-column:1/-1;padding-bottom:10px;position:relative}
.stat.big .label{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
.unit{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;}
/* 초당 채굴 줄 — 값과 단위(/s)를 **한 줄**로(2026-09-26). `.stat` 이 세로 쌓기라 단위가 값 밑에 한 줄을 따로
먹어 '402' 아래 '/s' 가 홀로 떠 있었다. 라벨만 한 줄을 차지하고 값 · 단위는 나란히 선다. 칸 폭(전체)도
여기서 준다 — index.html 의 인라인 style 을 걷었다. */
.hud .stat:not(.big){grid-column:1/-1;flex-flow:row wrap;justify-content:center;align-items:baseline;column-gap:3px}
.hud .stat:not(.big)>.label{flex-basis:100%}
.site{padding:18px;display:flex;flex-direction:column;align-items:center;gap:10px}
.dig-btn{
font-family:inherit;cursor:pointer;color:var(--ink);
background:var(--dirt);border:3px solid var(--line);
box-shadow:inset -4px -4px 0 var(--dirt-lo), inset 4px 4px 0 rgba(255,255,255,.08);
width:160px;height:160px;border-radius:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
transition:transform .03s;
}
.dig-btn:active{transform:translateY(3px);box-shadow:inset -4px -4px 0 var(--dirt-lo)}
.dig-emoji{font-size:54px;line-height:1}
.dig-text{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;color:var(--gold)}
.hint{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);text-align:center;line-height:1.6}
/* 자동 채굴 버튼 — 1시간 서버 타이머 부스트(무료·재시작). 진행 중엔 카운트다운 + 펄스. */
.auto-mine-btn{font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;font-size:12px;padding:9px 14px;width:100%;
display:flex;align-items:center;justify-content:center;gap:6px}
.auto-mine-btn:active{transform:translateY(2px)}
.auto-mine-btn .am-sub{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;}
.auto-mine-btn.active{cursor:pointer;
box-shadow:inset -3px -3px 0 rgba(0,0,0,.3);}
.auto-mine-btn.active .am-sub{font-variant-numeric:tabular-nums}
@keyframes autoMinePulse{
0%,100%{box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),0 0 6px rgba(242,193,78,.4)}
50%{box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),0 0 13px rgba(242,193,78,.85)}}
@media (prefers-reduced-motion:reduce){.auto-mine-btn.active{animation:none}}
/* ── 채굴장 — 펫이 우측 광산 ↔ 좌측 수레 왕복 운반 (Kenney 배경 타일맵 하늘 + 흙 바닥 + GHUB 펫 SVG) ──
⚠️ .mine 은 흔한 단어라 다른 화면의 '내 것' 표시(class="mine")와 겹친다 — 2026-09-10 보스전
확률표 '내 스킨' 줄에 채굴장 높이·구름 띠가 붙어 풍경 그림이 떴다. 그래서 규칙은 id 로만 건다. */
#mine{position:relative;width:100%;height:var(--mine-h);overflow:hidden;cursor:pointer;
user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
/* Kenney tilemap-backgrounds(파랑 테마) 하늘 — 구름·나무 띠는 .mine::before, 흙 바닥은 .mine-floor */
background:linear-gradient(180deg,#eafbfa 0%,#dff6f5 48%,#d4f1f2 100%);}
/* 원경 구름+나무 실루엣 띠 — Kenney 배경 타일셋 파랑 row1 [8,9,10,11]을 가로로 무한 타일.
하단을 바닥 타일(.mine-floor 32px) 뒤로 8px 끼워(bottom 24px + 높이 40px) 단색 밑단을 가리고,
z-index:0 이라 바닥·펫·광산입구(z≥1)보다 뒤·하늘 그라데이션보다 앞에 그려진다. 아주 느리게 흐른다. */
#mine::before{content:"";position:absolute;left:0;width:calc(100% + 160px);bottom:24px;height:40px;z-index:0;
pointer-events:none;image-rendering:pixelated;will-change:transform;
background:url(/assets/bg/cloudband.png) repeat-x left center / auto 40px;
animation:cloudDrift 90s linear infinite}
/* 한 타일(160px)만큼 transform 이동=1바퀴. background-position(매 프레임 재페인트) 대신 transform(GPU 합성).
요소를 컨테이너보다 160px 넓혀(.mine overflow:hidden 이 클립) 이동 내내 빈틈 없이 덮는다. */
@keyframes cloudDrift{from{transform:translateX(0)}to{transform:translateX(-160px)}}
@media (prefers-reduced-motion:reduce){#mine::before{animation:none}}
.mine-tap-hint{position:absolute;top:4px;left:4px;z-index:7;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;
color:#4a3620;background:rgba(255,255,255,.55);padding:2px 5px;border-radius:2px;pointer-events:none}
.mine-floor{position:absolute;left:0;right:0;bottom:0;height:32px;image-rendering:pixelated;
background:url(/assets/mine/tile_0002.png) left bottom / 32px 32px repeat-x;
border-top:2px solid rgba(0,0,0,.3)}
/* 우측 광산 입구(굴) */
.mine-entrance{position:absolute;right:0;bottom:24px;width:80px;height:76px;
background:url(/assets/mine/entrance.svg) right bottom / 80px 76px no-repeat}
.mine-entrance.back{z-index:1;clip-path:inset(0 50% 0 0)} /* 왼쪽 절반 — 펫 뒤(나올 때 펫이 앞) */
.mine-entrance.front{z-index:5;clip-path:inset(0 0 0 50%)} /* 오른쪽 절반 — 펫 앞(들어가면 가려짐) */
.mine-entrance-label{position:absolute;right:18px;bottom:74px;width:44px;text-align:center;
z-index:6;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#4a3620;text-shadow:0 1px 0 rgba(255,255,255,.6)}
/* 좌측 수레 */
.mine-cart{position:absolute;left:4px;bottom:28px;width:32px;height:28px;z-index:3;
background:url(/assets/mine/cart.svg) center bottom / 32px 28px no-repeat;image-rendering:pixelated}
/* 펫 왕복 컨테이너 */
.mine-crew{position:absolute;inset:0;z-index:2}
.mine-empty{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
text-align:center;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.miner{position:absolute;bottom:24px;left:0;width:32px;height:32px;will-change:transform} /* 위치는 mineTick(JS)가 transform 으로 매 프레임 설정(GPU 합성 레이어) */
.miner-pet{display:block;width:32px;height:32px}
.miner-pet .pet-img{display:block;image-rendering:auto;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}
/* 오라 스킨 광산 자국 — 조각을 돌려 쓴다(game.js mineTrailSpawn · WAAPI). 펫 **뒤에** 깔린다
(.mine-crew 가 z-index 로 쌓임 맥락을 만들어 -1 이 광산 밖으로 새지 않는다). */
.mine-trail{position:absolute;left:0;bottom:24px;width:5px;height:5px;border-radius:50%;pointer-events:none;opacity:0;z-index:-1;
will-change:transform,opacity}
/* 자국 모양 — 이름은 3D 레시피의 `shape` 와 같다(꽃잎·물방울·별·불꽃 조각·불씨). 5px 조각이라 윤곽만 준다. */
.mine-trail.t-petal{border-radius:70% 0 70% 0}
.mine-trail.t-drop{border-radius:50% 50% 50% 50%/65% 65% 35% 35%}
/* 비눗방울 — 속이 비친다(테두리만). 3D 는 고리 한 벌, 2D 는 얇은 테두리로 같은 뜻을 낸다. */
.mine-trail.t-bubble{background:transparent!important;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor,0 0 3px currentColor}
.mine-trail.t-star{border-radius:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.mine-trail.t-spark{border-radius:1px;clip-path:polygon(55% 0,100% 45%,45% 100%,0 55%)}
.mine-trail.t-ember{border-radius:50% 50% 50% 50%/35% 35% 65% 65%}
.miner-rock{position:absolute;top:-13px;left:50%;transform:translateX(-50%);opacity:0;
width:15px;height:15px;background-size:contain;background-repeat:no-repeat;background-position:center;
image-rendering:pixelated}
/* 크리티컬 — 들고 나오는 광물이 다이아(tile_0067)로, 반짝 */
.miner-rock.crit{background-image:url(/assets/mine/tile_0067.png)!important;
filter:drop-shadow(0 0 4px var(--gold)) drop-shadow(0 0 2px #fff)}
/* 카트 담기 연출 — 펫이 카트에 도착하면 광물이 머리에서 카트로 톡 떨어진다(JS가 .ore-toss 1회 생성) */
.ore-toss{position:absolute;left:50px;bottom:50px;width:14px;height:14px;
background-size:contain;background-repeat:no-repeat;image-rendering:pixelated;
z-index:4;pointer-events:none;animation:oreToCart .55s cubic-bezier(.45,0,.7,1) forwards}
.ore-toss.crit{filter:drop-shadow(0 0 3px #6fd6ff)}
@keyframes oreToCart{
0% {transform:translate(0,0) scale(1); opacity:1}
35% {transform:translate(-10px,-12px) scale(1.05); opacity:1} /* 살짝 떠오름(포물선 정점) */
100% {transform:translate(-34px,20px) scale(.4); opacity:0} /* 카트(좌하)로 쏙 */
}
.tabs{display:flex;gap:6px}
/* 탭은 완전한 테두리(4면) — 과거 border-bottom:none 은 패널과 붙는 폴더탭 의도였으나
#app gap(12px)이 연결을 끊어 '바닥 잘린 상자'로 보였다. 4면 테두리로 완성형 탭 버튼이 된다. */
.tab{flex:1;font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;font-size:12px;padding:10px 4px;color:var(--muted);
background:var(--panel2);border:3px solid var(--line)}
.tab.active{color:var(--gold);background:var(--panel);transform:translateY(0);box-shadow:inset 0 3px 0 var(--gold)}
.panel{padding:12px;display:flex;flex-direction:column;gap:10px}
.panel.hidden{display:none}
.panel h2{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;}
.panel h3{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;margin-top:6px}
.big-action{font-family:"Galmuri14","Galmuri11",sans-serif;cursor:pointer;font-size:15px;padding:14px;width:100%}
.big-action:active{transform:translateY(2px)}
/* 누를 수 없는 단추 한 벌(2026-09-26) — 큰 단추 · 상자 단추 · 모달 단추가 같은 흐림이다. 예전엔 .45 · .4 · .5+회색으로
제각각이었고, 모달 단추는 아예 규칙이 없어 캡슐 「이 펫 받기」 · 교환 「교환하기」가 고르기 전에도 밝았다. */
.big-action:disabled,.box-open-btn:disabled,.offline-btn:disabled{opacity:.45;cursor:not-allowed;}
/* 설명 · 상태 줄 한 벌 — 펫 · 아이템 · 룬 적립 탭이 같은 글자 크기 · 색을 쓴다(강조 b 는 금색). */
.ghub-desc,.ghub-state,.pet-desc,.item-desc{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted);line-height:1.6}
.pet-desc b,.item-desc b{color:var(--gold)}
.claim-box{padding:14px;display:flex;flex-direction:column;gap:10px;align-items:center}
.claimable{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
/* 큰 금색 숫자 한 벌 — 적립 가능 룬 · 펫 배너 · 모달 획득량(적립 가능 룬만 그림자가 빠져 있었다). */
.claimable strong,.pet-banner strong,.offline-gain{font-family:"Galmuri11","Galmuri9",sans-serif;}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
padding:12px 16px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;max-width:90%;text-align:center;z-index:50;}
.toast.hidden{display:none}
.toast.legendary{border-color:var(--leg);box-shadow:0 0 14px var(--leg)}
.toast.epic{border-color:var(--epic)}
.toast.rare{border-color:var(--rare)}
@keyframes pop{0%{transform:translate(-50%,8px) scale(.9);opacity:0}100%{transform:translate(-50%,0) scale(1);opacity:1}}
.toast:not(.hidden){animation:pop .15s ease-out}
/* ── 로그인 게이트 (미인증 401) ────────────────────────── */
.login-gate{
position:fixed;inset:0;z-index:40;
/* 🔴 세로 가운데 정렬(align-items:center) + overflow 기본값(visible) 조합은,
카드가 화면보다 길어지는 순간 **위쪽을 화면 밖으로 밀어내고 스크롤도 막는다** —
아래에 있는 버튼에 영영 닿을 수 없다. 2026-08-26 에 가입 화면이 정확히 그렇게
막혔다(375×812 에서 가입 카드 1242px, 가입 버튼 y=915 → 가입 자체가 불가능).
그래서 가운데 정렬을 align-items 가 아니라 **자식의 margin:auto** 로 잡는다:
남는 공간이 있으면 가운데에 두고, 넘치면 위에서부터 정상 스크롤된다. */
display:flex;align-items:flex-start;justify-content:center;padding:24px;
overflow-y:auto;overscroll-behavior:contain;
background:var(--bg);
background-image:linear-gradient(rgba(0,0,0,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.25) 1px,transparent 1px);
background-size:16px 16px;
}
.login-gate.hidden{display:none}
.gate-card{
/* 🔴 width 를 반드시 명시한다. 없으면 카드 너비가 "내용이 밀어낸 만큼"으로 정해지는데,
제목 자리에 width:100% 인 그림(로고)을 넣으면 퍼센트는 너비 계산에 기여하지 않아
카드가 통째로 쪼그라든다(실제로 313px → 131px 로 무너졌다). */
width:100%;max-width:340px;text-align:center;
/* 세로·가로 가운데 정렬 — 넘칠 때 잘리지 않는 방식이다(.login-gate 주석 참조). */
margin:auto;
background:var(--panel);border:3px solid var(--line);
box-shadow:inset -4px -4px 0 rgba(0,0,0,.3),6px 6px 0 var(--line);
padding:28px 22px;
}
.gate-emoji{font-size:44px;line-height:1;margin-bottom:6px}
.gate-title{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;color:var(--gold);text-shadow:2px 2px 0 var(--line);margin-bottom:4px}
/* 부제 — 제목과 한 덩어리(로고 락업)로 읽히도록 간격을 좁게 붙인다.
이름을 한 줄에 다 넣으면 340px 카드에서 어중간하게 줄바꿈된다. */
/* 로그인 카드 제목 자리에 로고 그림을 넣는다. 그림 안에 게임 이름이 이미 있어
텍스트를 겹쳐 쓰지 않는다(h1 은 남기고 alt 가 이름을 대신한다).
⚠️ .gate-title 은 가입·카카오·복구 카드도 함께 쓰므로 **전용 클래스에만** 건다 —
전역으로 line-height 를 0 으로 만들면 나머지 세 카드의 제목이 겹쳐 버린다. */
.gate-title-logo{line-height:0;margin-bottom:2px}
.gate-logo{display:block;width:100%;max-width:200px;height:auto;margin:0 auto}
.gate-tagline{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);letter-spacing:.05em;margin-bottom:16px}
.gate-msg{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink);line-height:1.8;margin-bottom:18px}
.gate-msg b{color:var(--gold)}
.gate-input{
display:block;width:100%;box-sizing:border-box;margin:8px 0;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;color:var(--ink);
background:var(--panel2);border:3px solid var(--line);padding:11px 12px;
}
.gate-input::placeholder{color:var(--muted)}
.gate-input:focus{outline:none;border-color:var(--gold)}
.gate-btn{
display:block;width:100%;box-sizing:border-box;margin-top:6px;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;color:#2a1d0c;background:var(--gold);
border:3px solid var(--line);box-shadow:inset -3px -3px 0 var(--gold-lo);
padding:11px 22px;text-decoration:none;cursor:pointer;
}
.gate-btn:active{transform:translateY(2px)}
.gate-btn:disabled{opacity:.55;cursor:not-allowed}
.gate-err{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:#f0907e;line-height:1.5;margin-top:10px}
.gate-err.hidden{display:none}
.gate-sub{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.6;margin-top:16px}
/* ── 초대 계정 (가입 · 비밀번호 찾기) ─────────────────────────
같은 .login-gate 안에서 카드만 갈아 끼운다(별도 화면을 만들면 배경·중앙정렬을
두 벌로 관리하게 된다). 접두사 extgate- 는 전역 클래스 충돌을 피하려는 것. */
.gate-card.hidden{display:none}
.extgate-links{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.extgate-sep{color:var(--line)}
.extgate-link{font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;color:var(--gold);line-height:1.6;
background:none;border:none;padding:2px 0;cursor:pointer;text-decoration:underline;
}
.extgate-link:active{transform:translateY(1px)}
.extgate-note{text-align:left;margin-top:12px;color:var(--ink);opacity:.85}
.extgate-note b{color:var(--gold)}
.extgate-ok{color:var(--gold)}
.extgate-ok.hidden{display:none}
/* ── 카카오 로그인 ────────────────────────────────────────
브랜드 색(#FEE500·글자 85% 검정)은 카카오 가이드가 정한 값이라 테마 변수로
빼지 않는다 — 다크·라이트 어느 쪽에서도 같아야 하는 남의 브랜드다.
대신 테두리·그림자는 게임의 픽셀 톤(.gate-btn)과 맞춰 이질감을 줄인다. */
.kakao-block{margin-bottom:4px}
.kakao-block.hidden{display:none}
.kakao-btn{
display:flex;align-items:center;justify-content:center;gap:8px;
width:100%;box-sizing:border-box;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;color:rgba(0,0,0,.85);background:#FEE500;
border:3px solid var(--line);box-shadow:inset -3px -3px 0 #d9c400;
padding:11px 18px;cursor:pointer;
}
.kakao-btn:active{transform:translateY(2px)}
.kakao-btn:disabled{opacity:.55;cursor:not-allowed}
.kakao-symbol{width:18px;height:18px;flex:0 0 auto}
/* 구분선 — "또는 아이디로". 선 사이에 글자를 앉힌다. */
.gate-divider{
display:flex;align-items:center;gap:10px;
margin:16px 0 4px;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;
}
.gate-divider::before,.gate-divider::after{
content:"";flex:1;height:3px;background:var(--line);
}
/* 이어받기를 켜면 닉네임 칸이 잠긴다 — 그 이유를 바로 아래에 적는다. */
.claim-locked-note{text-align:left;margin-top:6px;color:var(--gold)}
.claim-locked-note.hidden{display:none}
.gate-input:disabled{opacity:.55;cursor:not-allowed}
/* ── 헤더 닉네임 = 변경 화면을 여는 버튼 ───────────────────
헤더에 연필 아이콘 + 입력칸을 함께 두던 방식을 걷어냈다. 헤더가 좁아 그 컨트롤이
옆 요소로 밀려 나왔고(2026-08-27 제보), 1회성 경고·중복 확인을 놓을 자리도 없었다.
지금은 **이름 자체가 버튼**이고 실제 편집은 #nickModal 이 맡는다.
글자처럼 보이되 누를 수 있다는 것은 점선 밑줄로 알린다. */
.who-name{
font:inherit;color:inherit;background:none;border:none;padding:0;
max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
border-bottom:1px dotted currentColor;cursor:pointer;
}
.who-name:hover,.who-name:focus-visible{color:var(--gold);outline:none}
/* ── 운영 안내 모달 (offline-modal 틀 재사용) ────────────────
여러 건이 쌓일 수 있어 카드 목록 + 세로 스크롤이다. 지급 내용과 **사유**를 한 줄씩
나눠 보여 준다 — 사유는 관리자가 직접 쓴 말이라 본문과 섞으면 어디까지가 안내인지 모른다. */
.notice-card{max-width:340px}
.nt-count{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted)}
.nt-list{max-height:46vh;overflow-y:auto;text-align:left;margin:6px 0 12px}
.nt-item{display:flex;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.nt-item:last-child{border-bottom:0}
.nt-icon{font-size:20px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.2}
.nt-icon.nt-portrait{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.nt-body{flex:1;min-width:0}
.nt-title{margin:0 0 3px;font:700 12px "Galmuri11","Galmuri9",sans-serif;color:var(--gold)}
/* 본문 · 사유(.nt-reason) · 설문 문항(.sv-prompt)의 줄바꿈은 카드(.offline-card)의 '한글 줄바꿈 한 벌'을 물려받는다
(2026-09-26). 따로 두던 word-break:break-word(= normal + anywhere)가 그걸 덮어 폰에서 '확정됩니 / 다.' 처럼
낱말 가운데가 잘렸다. 긴 주소 같은 한 덩어리는 물려받은 overflow-wrap 이 넘칠 때만 쪼갠다. */
.nt-text{margin:0;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.7;color:var(--ink)}
.nt-reason{
margin:5px 0 0;padding:5px 7px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.6;
background:rgba(255,255,255,.06);border-left:3px solid var(--gold);
color:var(--ink);
}
.nt-reason b{margin-right:5px;color:var(--gold)}
.nt-when{margin:4px 0 0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
/* ── 전쟁 선포 모달 (운영 안내 카드를 그대로 재사용) ────────────
단추 줄(.war-acts)은 모달 단추 줄 한 벌(모달 공통 절 `.claim-actions,…`)이다. 색은 거점 화면과 같은 언어다 —
금색 = 우리가 공격 · 붉은색 = 우리가 수비(`.op-war-note`). */
/* 거절은 **두 번째 선택지**다. 같은 무게로 두면 습관적으로 왼쪽을 누른다. */
.war-acts .war-no{background:#46372d;color:#dcccb3;box-shadow:inset 0 2px 0 #665243}
.war-acts .war-no:hover{background:#544336}
#warModal .nt-title{color:var(--gold)}
#warModal.is-defend .nt-title{color:#ffb0a8}
#warModal .nt-when{color:var(--gold)}
/* ── 설문 모달 (운영 안내 카드를 그대로 재사용) ────────────────
⚠ `.sv-notice`(익명 아님 고지)는 **폼 위**에 둔다 — 다 답하고 나서 보는 고지는 늦다.
닉네임 변경 경고와 같은 이유·같은 자리다. */
/* 🔴 세로 배치는 **머리(제목·고지) 고정 · 가운데(문항)만 스크롤 · 꼬리(단추) 고정** 이다.
문항 칸에 `44vh` 같은 화면 비율을 주면 고정분과 합이 화면 높이를 넘겨서 밑단이
잘렸다 — 화면이 낮을수록 더 잘린다(제보 2026-09-07, 세로 모바일).
`flex:1 1 auto`+`min-height:0` 이면 문항 칸이 **남는 만큼만** 차지하므로
어떤 화면 높이에서도 제출 단추가 화면 안에 남는다.
⚠ 폭은 `.offline-card.survey-card` 로 적어야 한다 — `.offline-card` 규칙이
파일 뒤쪽에 있어서 그냥 `.survey-card` 로 적으면 320px 로 덮인다. */
.offline-card.survey-card{max-width:360px;display:flex;flex-direction:column}
.survey-card > *{flex:none}
.sv-intro{margin:0 0 8px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.7;color:var(--ink);white-space:pre-line;text-align:left}
.sv-notice{
margin:0 0 10px;padding:6px 8px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;text-align:left;
background:rgba(255,255,255,.06);border-left:3px solid var(--gold);color:var(--muted);
}
.sv-form{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;text-align:left;margin:0 0 12px}
.sv-q{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.sv-q:last-child{border-bottom:0}
.sv-prompt{margin:0 0 6px;font:700 12px "Galmuri11","Galmuri9",sans-serif;color:var(--gold)}
.sv-hint{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);margin-left:4px}
.sv-opt{display:flex;align-items:flex-start;gap:6px;padding:3px 0;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.6;color:var(--ink);cursor:pointer}
.sv-opt input{margin-top:2px;flex:none}
.sv-text{
width:100%;box-sizing:border-box;min-height:56px;resize:vertical;padding:6px;
font:inherit;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.6;color:var(--ink);
background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.18);border-radius:4px;
}
.sv-count{display:block;margin-top:3px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);text-align:right}
/* 단추 줄(.sv-acts)은 모달 단추 줄 한 벌(모달 공통 절 `.claim-actions,…`)이다. 설문만 다른 두 가지는 여기서 덮는다
(한 벌보다 앞 줄이라 `.survey-card` 로 한 단 높인다): 위 폼이 이미 12px 을 두므로 줄 위 여백이 없다 ·
⚠ 좁은 폭에서 `.offline-btn` 의 좌우 여백(28px)이 글자를 밀어내 '다시/보지/않기' 로
3줄이 됐다 — 단추 줄만 70px 였다. 여백 · 글자를 줄이고 `keep-all`(카드에서 상속)로 낱말 안에서는 안
쪼개지게 해서 최대 2줄로 잡는다(그만큼 문항 칸이 넓어진다). */
.survey-card .sv-acts{margin-top:0}
.survey-card .sv-acts>.offline-btn{padding:10px 6px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.35}
/* 미루기·거절은 **두 번째 선택지**다(전쟁 모달의 거절과 같은 규칙). */
.sv-acts .sv-later,.sv-acts .sv-never{background:#46372d;color:#dcccb3;box-shadow:inset 0 2px 0 #665243}
.sv-acts .sv-later:hover,.sv-acts .sv-never:hover{background:#544336}
/* 낮은 화면(작은 폰·가로로 눕힌 폰)에서는 장식이 문항 칸을 다 먹는다 —
그림·여백만 줄이고 **고지와 단추는 그대로** 둔다(둘 다 지우면 안 되는 것들이다). */
@media (max-height:680px){
#surveyModal .offline-card{padding:16px 14px}
#surveyModal .offline-emoji{font-size:30px;margin-bottom:4px}
#surveyModal .offline-title{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;margin-bottom:8px}
#surveyModal .sv-intro{margin-bottom:6px}
#surveyModal .sv-notice{margin-bottom:8px}
#surveyModal .sv-form{margin-bottom:8px}
}
/* 🔴 창이 떠 있는 동안 하단 내비를 **치운다**. z-index 만 올리면 반투명 막 뒤로
비쳐서 설문 단추와 내비 단추가 같은 자리에 두 겹으로 보인다 — 이용 동의 게이트가
같은 이유로 같은 방법(`display:none!important`)을 쓴다.
부족 대화 말풍선(`.tc-bubble` = 1240)도 같이 치운다 — 그건 하단 막대 **바로 위 경계선**에
얹히도록 만든 판이라 설문 단추와 정확히 같은 자리를 노린다. 겉틀 순서(75)로는 못 이긴다.
⚠ `#surveyModal` 이 셋보다 마크업에서 **앞**이라 `~` 로 닿는다(모두 body 직계).
index.html 에서 순서를 바꾸면 이 규칙이 조용히 죽는다. */
#surveyModal:not(.hidden) ~ .game-mode-nav,
#surveyModal:not(.hidden) ~ .context-subnav,
#surveyModal:not(.hidden) ~ .tc-bubble{display:none!important}
/* ── 닉네임 변경 모달 (offline-modal 틀 재사용) ─────────────
1회성이라 경고를 **입력칸 위**에 둔다 — 다 짓고 나서 보는 경고는 늦다. */
.nick-card{max-width:300px}
.nick-warn{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold);line-height:1.9;margin-bottom:10px}
.nick-current{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted);margin-bottom:12px}
.nick-input{font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;color:var(--ink);width:100%;box-sizing:border-box;
background:var(--panel2);border:2px solid var(--line);padding:9px 10px;text-align:center;
}
.nick-input:focus{outline:none;border-color:var(--gold)}
/* 중복 확인 결과가 뜨는 줄. 높이를 고정해 결과가 바뀔 때 카드가 덜컹거리지 않게 한다. */
.nick-hint{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);margin-top:9px;min-height:15px;line-height:1.6}
.nick-hint.ok{color:#8ddc8d}
.nick-hint.bad{color:#ff9c9c}
.nick-used{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink);line-height:1.9}
/* ⚠️ 이 파일에는 전역 .hidden 규칙이 없다 — 숨길 요소마다 직접 준다.
빠뜨리면 class 만 붙고 화면에는 그대로 남는다. */
.nick-form.hidden,.nick-used.hidden,.nick-save.hidden,.nick-warn.hidden{display:none}
/* ── 이용 동의 게이트 ──────────────────────────────────────
로그인 뒤 게임 진입 전 관문. 본문이 길어 카드 안쪽만 스크롤한다
(카드 전체를 스크롤시키면 동의 버튼이 화면 밖으로 밀린다). */
/* z-index 는 하단 모드 내비(.game-mode-nav = 70)보다 위여야 한다.
게이트가 아래에 깔리면 동의 전에 게임 내비가 노출되고 안내 문구까지 가린다. */
.consent-gate{
position:fixed;inset:0;z-index:80;
display:flex;align-items:center;justify-content:center;padding:16px;
background:var(--bg);
background-image:linear-gradient(rgba(0,0,0,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.25) 1px,transparent 1px);
background-size:16px 16px;
}
.consent-gate.hidden{display:none}
/* 게이트가 떠 있는 동안은 게임 UI(하단 모드 내비)를 완전히 치운다 —
z-index 만으로는 내비가 게이트 카드 아래 여백에 그대로 보인다. */
body.consent-open .game-mode-nav{display:none!important}
.consent-card{
width:100%;max-width:520px;max-height:calc(100vh - 32px);
display:flex;flex-direction:column;text-align:center;
background:var(--panel);border:3px solid var(--line);
box-shadow:inset -4px -4px 0 rgba(0,0,0,.3),6px 6px 0 var(--line);
padding:20px 18px;box-sizing:border-box;
}
.consent-emoji{font-size:36px;line-height:1;margin-bottom:4px}
.consent-title{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;color:var(--gold);text-shadow:2px 2px 0 var(--line);margin-bottom:10px}
.consent-intro{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);line-height:1.8;margin-bottom:14px;text-align:left}
.consent-items{
flex:1;min-height:0;overflow-y:auto;text-align:left;
border:3px solid var(--line);background:var(--panel2);padding:10px;
}
.consent-item{padding:9px 0;border-bottom:2px dashed var(--dirt-lo)}
.consent-item:last-child{border-bottom:none}
.consent-item-head{display:flex;align-items:flex-start;gap:7px;cursor:pointer}
.consent-item-head input{margin-top:2px;flex-shrink:0;width:14px;height:14px;accent-color:var(--gold)}
.consent-item-title{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold);line-height:1.5}
.consent-item-req{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#f0907e;margin-left:4px}
.consent-item-body{
font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);line-height:1.9;margin-top:6px;padding-left:21px;
white-space:pre-line; /* 본문 개행(\n)을 그대로 보여준다 */
}
.consent-all{
display:flex;align-items:center;gap:8px;justify-content:center;
font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink);margin-top:12px;cursor:pointer;
}
.consent-all input{width:16px;height:16px;accent-color:var(--gold)}
.consent-err{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#f0907e;line-height:1.5;margin-top:8px}
.consent-err.hidden{display:none}
.consent-actions{display:flex;gap:8px;margin-top:12px}
.consent-btn{
flex:1;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;
border:3px solid var(--line);padding:11px 10px;cursor:pointer;
}
.consent-btn.primary{color:#2a1d0c;background:var(--gold);box-shadow:inset -3px -3px 0 var(--gold-lo)}
.consent-btn.ghost{color:var(--muted);background:var(--panel2);box-shadow:inset -3px -3px 0 rgba(0,0,0,.25)}
.consent-btn:active{transform:translateY(2px)}
.consent-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.consent-sub{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.7;margin-top:10px}
.consent-sub b{color:var(--ink)}
.consent-version{display:block;margin-top:3px;opacity:.7}
/* ── 펫 도우미 ──────────────────────────────────────────── */
.pet-banner{display:flex;align-items:center;gap:10px;padding:12px;position:relative}
.pet-banner-label{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted)}
.pet-count{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted);margin-left:auto}
.pet-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pet-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:10px 4px;min-height:104px;text-align:center;position:relative}
.pet-slot.empty{background:var(--panel2);box-shadow:none;border-style:dashed;border-color:var(--dirt-lo);opacity:.85}
.pet-slot.filled{cursor:pointer}
.pet-slot-plus{font-size:24px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--dirt-lo)}
.pet-slot-hint{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.pet-slot-name{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--pet-lc,var(--ink));line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pet-slot-bonus{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold)}
.pet-slot-x{position:absolute;top:2px;right:4px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.pet-slot.filled:hover .pet-slot-x{color:#f0907e}
.pet-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* 가상 스크롤 스페이서 — 화면 밖 행 자리를 대신 차지해 스크롤 길이를 보존한다(game.js renderPetWindow).
한 줄을 통째로 먹어야 아래 카드가 그 옆에 끼어들지 않는다. */
.pet-vpad{grid-column:1/-1}
.pet-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;text-align:center}
.pet-card-art{height:54px;display:flex;align-items:center;justify-content:center}
.pet-card-name{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--pet-lc,var(--ink));max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 높이 3줄 고정 — 가상 스크롤(game.js renderPetWindow)이 '행 높이는 일정하다'를 전제로 스페이서를
계산하는데, 이 줄이 2줄↔3줄로 접히면 행마다 어긋난다(실측 카드 높이 190.28 / 205.28 = 15px 차).
그대로 두면 스크롤할 때마다 평균 행 피치가 흔들려 스크롤 위치가 튄다.
이름(.pet-card-name)이 이미 말줄임을 쓰는 것과 같은 방침으로, 넘치는 줄은 감춘다. */
.pet-card-meta{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.35;height:calc(1.35em * 3);overflow:hidden}
.pet-card-bonus{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--gold)}
.pet-card.is-deployed{box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),0 0 6px var(--gold)}
/* 카드 단추 한 벌 — 펫 카드(.pet-btn) · 아이템 카드(.item-btn). 아이템 쪽만 위아래가 1px 얇다(아이템 가방 절). */
.pet-btn,.item-btn{margin-top:4px;font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;font-size:12px;width:100%;
color:#2a1d0c;background:var(--gold);border:2px solid var(--line);box-shadow:inset -2px -2px 0 var(--gold-lo);padding:6px}
.pet-btn.off,.item-btn.off{background:var(--panel2);color:var(--muted);box-shadow:inset -2px -2px 0 rgba(0,0,0,.3)}
.pet-btn:active,.item-btn:active{transform:translateY(1px)}
.pet-img{image-rendering:auto} /* 펫은 벡터 SVG — 픽셀화 끔 */
/* 등급 오라 — GHUB(pet_auras.py)가 오라 SVG(애니 포함)를 내려주면 펫 뒤(z-0)에 펫보다 크게 깐다.
래퍼는 펫 크기, 오라는 150%로 넘쳐 그려지고(overflow:visible) 펫 본체는 그 위(z-1). */
.pet-aura-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:bottom;line-height:0}
.pet-aura{position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.pet-aura-front{z-index:2;clip-path:inset(50% -10% -10% -10%)}
.pet-aura,.pet-aura svg{display:block;overflow:visible}
.pet-aura svg{width:100%;height:100%}
.pet-mystic-aura{overflow:visible}
.pet-mystic-aura-back{z-index:0}
.pet-mystic-aura-front{z-index:2}
.mystic-web-halo,.mystic-web-core,.mystic-web-orbit-path,.mystic-web-magic-circle,.mystic-web-orb{position:absolute;display:block}
.mystic-web-halo{left:50%;top:50%;width:66%;height:66%;transform:translate(-50%,-50%);border:1px solid rgba(246,217,120,.48);border-radius:50%;background:radial-gradient(circle,rgba(201,175,255,.13),transparent 64%);box-shadow:0 0 8px rgba(246,217,120,.4),0 0 16px rgba(185,146,255,.28)}
.mystic-web-core{left:50%;top:50%;width:42%;height:42%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.72),rgba(246,217,120,.16) 36%,rgba(125,232,255,.07) 58%,transparent 76%);filter:blur(3px)}
.mystic-web-orbit-path{left:50%;top:50%;width:84%;height:44%;transform:translate(-50%,-50%) rotate(30deg);border:1px solid rgba(125,232,255,.28);border-radius:50%;box-shadow:0 0 6px rgba(125,232,255,.16)}
.mystic-web-orbit-path-gold{width:68%;height:36%;transform:translate(-50%,-50%) rotate(-30deg);border-color:rgba(246,217,120,.34);box-shadow:0 0 6px rgba(185,146,255,.18)}
.mystic-web-magic-circle{left:50%;top:83%;width:64%;height:17%;transform:translate(-50%,-50%);border:1px solid rgba(125,232,255,.48);border-radius:50%;box-shadow:0 0 5px rgba(125,232,255,.36),inset 0 0 5px rgba(185,146,255,.3)}
.mystic-web-orb{width:14px;height:14px;transform:translate(-50%,-50%) scale(var(--mystic-scale,1));will-change:left,top,transform,opacity}
.mystic-web-orb[hidden]{display:none!important}
.mystic-web-orb-core{position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0 12%,#ffe792 28%,currentColor 55%,transparent 78%);box-shadow:0 0 5px #fff,0 0 10px currentColor,0 0 18px currentColor}
.mystic-web-orb-blue{color:#7de8ff}
.mystic-web-orb-gold{color:#f6d978}
.mystic-web-orb-trail{position:absolute;left:-38px;top:5px;width:42px;height:4px;transform-origin:100% 50%;transform:rotate(var(--mystic-tangent,0deg));border-radius:999px;opacity:.72;filter:blur(1.5px);background:linear-gradient(90deg,transparent,currentColor)}
.mystic-web-orb-gold .mystic-web-orb-trail{background:linear-gradient(90deg,transparent,#b992ff,currentColor)}
.pet-mystic-aura.fx-off .mystic-web-orb{display:none!important}
.pet-aura-wrap>.pet-img{position:relative;z-index:1}
.pet-empty{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted);text-align:center;line-height:1.7;padding:8px}
/* 전역 .hidden 규칙이 없는 저장소다 — 이 줄이 없어서 펫이 있어도 목록 끝에 '아직 펫이 없어요' 가 늘 떠 있었다
(목록이 길면 맨 아래라 안 보였고, 필터로 목록이 짧아지자 드러났다). */
.pet-empty.hidden{display:none}
/* 첫 펫이 없을 때의 길 안내 — 뽑기 입구가 컬렉션 안에 숨어 있어 처음 오는 사람은 못 찾는다. */
.pet-empty-go{display:block;margin:12px auto 4px;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;
color:#2a1d0c;background:var(--gold);border:3px solid var(--line);
box-shadow:inset -3px -3px 0 var(--gold-lo);padding:10px 18px;cursor:pointer}
.pet-empty-go:active{transform:translateY(2px)}
/* 희귀도별 배치 슬롯 (등급당 N칸) */
.pet-h3-sub{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.pet-slots-rarity{display:flex;flex-direction:column;gap:6px}
.pet-rarity-row{display:flex;align-items:stretch;gap:6px}
.pet-rarity-tag{flex:0 0 34px;display:flex;align-items:center;justify-content:center;text-align:center;
font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.2;padding:2px;border:2px solid var(--line);background:var(--panel2)}
.pet-rarity-cells{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pet-rarity-cells .pet-slot{min-height:72px;padding:6px 3px;gap:2px}
.pet-rarity-cells .pet-slot .pet-slot-name{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.pet-rarity-cells .pet-slot .pet-slot-bonus{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.pet-rarity-tag.common{color:var(--com)}
.pet-rarity-tag.uncommon{color:var(--unc)}
.pet-rarity-tag.rare{color:var(--rare)}
.pet-rarity-tag.epic{color:var(--epic)}
.pet-rarity-tag.legendary{color:var(--leg)}
.pet-btn.full{background:var(--panel2);color:var(--muted);box-shadow:inset -2px -2px 0 rgba(0,0,0,.3);cursor:not-allowed;opacity:.7}
/* ── 유물 조각 오도미터(자릿수 0~9 롤링) + 크리티컬 ───────────── */
#shards.odo{display:inline-flex;justify-content:center;line-height:1}
.odo-digit{display:inline-block;height:1em;line-height:1em;overflow:hidden;width:.62em;vertical-align:bottom}
.odo-strip{display:flex;flex-direction:column;will-change:transform}
.odo-strip>span{height:1em;line-height:1em;text-align:center}
.crit-flash{animation:critFlash .9s}
@keyframes critFlash{0%,100%{filter:none}30%,60%{filter:brightness(1.7) drop-shadow(0 0 6px var(--gold))}}
.crit-pop{position:absolute;top:4px;right:6px;z-index:10;
font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;
padding:3px 7px;white-space:nowrap;animation:critPop .9s ease-out}
.crit-pop.hidden{display:none}
@keyframes critPop{
0%{transform:translateY(8px) scale(.8);opacity:0}
25%{transform:translateY(0) scale(1.12);opacity:1}
70%{transform:translateY(-2px) scale(1);opacity:1}
100%{transform:translateY(-12px);opacity:0}}
/* ── 오프라인 복귀 보상 모달 ───────────────────────────── */
.offline-modal{
/* 🔴 하단 모드 내비(`.game-mode-nav` = 70)·서브내비(`.context-subnav` = 69)보다
**위**여야 한다. 60 이던 시절 설문 창의 제출 단추가 내비 뒤에 깔려 아예 눌리지
않았다(제보 2026-09-07). 세로 360px 에서는 내비가 두 줄이라 화면 밑 120px 를 먹는다.
이용 동의 게이트(80)·도감(85)·펫 상세(85)보다는 아래다 — 그쪽이 더 나중에 뜬다. */
position:fixed;inset:0;z-index:75;
display:flex;align-items:center;justify-content:center;
/* 🔴 모바일 브라우저는 주소창이 보일 때 `inset:0` 인 fixed 상자를 **보이는 높이보다
크게** 잡는다(레이아웃 뷰포트는 주소창이 숨은 상태 기준이다). 가운데 정렬이라
넘친 만큼 카드가 아래로 밀려 밑단이 주소창 뒤로 들어갔다 — 설문 창의 제출 단추가
그렇게 잘렸다(제보 2026-09-07). dvh 는 지금 보이는 높이다; 못 읽는 브라우저는
위의 vh 로 떨어진다(그 경우 예전과 같다).
여백에 안전영역을 더하는 것은 index.html 이 `viewport-fit=cover` 라서다 —
노치·홈 인디케이터 밑으로 단추가 들어가면 눌리지 않는다. */
height:100vh;
height:100dvh;
padding:24px;
padding-top:calc(24px + env(safe-area-inset-top, 0px));
padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
}
.offline-modal.hidden{display:none}
.offline-card{
max-width:320px;text-align:center;
padding:26px 22px;
animation:offlinePop .22s ease-out;
/* 🔴 목록이 긴 창은 카드가 화면보다 길어진다. 감싸는 .offline-modal 이 fixed+center 라
넘친 부분은 위아래로 잘려 나가고 **밀어 올릴 수도 없다** — 세로 화면에서 맨 아래
'분해하기' 버튼이 통째로 화면 밖이었다(제보 #1674, 1170×2532).
이 틀을 13개 모달이 함께 쓰므로 여기서 막으면 전부 함께 낫는다.
dvh 는 모바일 주소창 높이를 반영한다 — 못 읽는 브라우저는 위의 vh 로 떨어진다. */
max-height:calc(100vh - 48px);
max-height:calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
overflow-y:auto;
overscroll-behavior:contain;
}
@keyframes offlinePop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
/* 한글 줄바꿈 한 벌(2026-09-26) — 모달 카드(13개 모달의 틀) · 아이템 탭 · 룬 적립 탭은 한글을 **낱말 단위**로 접는다
(넘칠 때만 쪼갬 · 상속되는 속성이라 이 한 줄이 그 안 전체에 닿는다). 모달 제목 · 단추가 두 줄이 되면 줄 길이를 고르게 나눈다.
예전엔 '투구(한 / 정판)' · '754장 전량 추 / 출' · '상한 올리 / 기' · '전설 상 / 자' · '하 / 루' · '생명 / 의가루로' 처럼 낱말 가운데가 잘렸다. */
.offline-card,#tab-item,#tab-ghub{word-break:keep-all;overflow-wrap:break-word}
.offline-card .offline-title,.offline-btn{text-wrap:balance}
.offline-emoji{line-height:1;margin-bottom:8px}
.offline-title{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;margin-bottom:14px}
.offline-msg{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink);line-height:1.9}
.offline-capped{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;margin-top:10px}
.offline-capped.hidden{display:none}
.offline-btn{
margin-top:18px;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;cursor:pointer;
padding:11px 28px;
}
.offline-btn:active{transform:translateY(2px)}
/* 누를 수 없는 모달 단추의 흐림은 '누를 수 없는 단추 한 벌'(큰 단추 절 `.big-action:disabled,…`)이다. */
.offline-btn:active:disabled{transform:none}
/* 모달 단추 줄 한 벌(2026-09-26) — 적립 · 닉네임 · 칭호(.claim-actions) · 확인창(분해 · 추출 — .unlock-confirm-actions) ·
고르기 창(캡슐 · 확장권 · 치장 획득권 · 교환 — .capsule-actions) · 전쟁(.war-acts) · 설문(.sv-acts)이 한 규칙이다.
**보이는 단추끼리** 폭을 나눈다(flex) — 2칸 격자이던 시절, 단추가 하나뿐인 분해 확인창은 「분해하기」가 왼쪽 칸에만
붙어 오른쪽이 비었고 '200개 / 분해하 / 기' 세 줄로 꺾였다. 좌우 여백도 28px → 8px(모달 단추 기본값은 홀로 선 단추용이다).
확인창(적립 · 닉네임 · 분해 · 추출)의 주 단추(ghost 가 아닌 것)는 1.35 배로 넓다. 고르기 창 · 전쟁 · 설문은 같은 폭이다.
줄마다 따로 두던 시절엔 적립 · 닉네임 창만 단추가 가운데로 몰린 두 덩이(여백 28px)였고 전쟁 · 설문은 틈이 달랐다. */
.claim-actions,.unlock-confirm-actions,.capsule-actions,.war-acts,.sv-acts{display:flex;gap:6px;width:100%;margin-top:10px}
.claim-actions>.offline-btn,.unlock-confirm-actions>.offline-btn,.capsule-actions>.offline-btn,.war-acts>.offline-btn,.sv-acts>.offline-btn{flex:1 1 0;min-width:0;margin-top:0;padding:10px 8px;line-height:1.3}
.claim-actions>.offline-btn:not(.ghost),.unlock-confirm-actions>.offline-btn:not(.ghost){flex-grow:1.35}
.unlock-confirm-actions .hidden{display:none}
.claim-sub{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;}
.claim-cap-note{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;margin-top:12px}
/* 등급 테두리 (펫) — --pet-bc 는 GHUB 펫 마스터의 종별 지정색(인라인 주입). 없으면 등급 기본색. */
.pet-slot.common,.pet-card.common,.craft-cell.common,.craft-slot.common,.gacha-item.common,.fx-cell.common{border-color:var(--pet-bc,var(--com))}
.pet-slot.uncommon,.pet-card.uncommon,.craft-cell.uncommon,.craft-slot.uncommon,.gacha-item.uncommon,.fx-cell.uncommon{border-color:var(--pet-bc,var(--unc))}
.pet-slot.rare,.pet-card.rare,.craft-cell.rare,.craft-slot.rare,.gacha-item.rare,.fx-cell.rare{border-color:var(--pet-bc,var(--rare))}
.pet-slot.epic,.pet-card.epic,.craft-cell.epic,.craft-slot.epic,.gacha-item.epic,.fx-cell.epic{border-color:var(--pet-bc,var(--epic))}
.pet-slot.legendary,.pet-card.legendary,.craft-cell.legendary,.craft-slot.legendary,.gacha-item.legendary,.fx-cell.legendary{border-color:var(--pet-bc,var(--leg));
box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),0 0 8px var(--pet-bc,var(--leg))}
/* 종별 지정색(.bc) — 등급색 5종만으로는 히든/이벤트 종이 같은 레전드 노랑에 묻힌다.
3px 기본 테두리 + 안쪽 3px 링 = 실질 6px, 배경도 그 색 틴트로 깔고 바깥 글로우까지 준다.
⚠ 두께는 반드시 box-shadow(inset 링)로 낸다 — border-width 를 키우면 카드 높이가 종마다
달라져 펫 목록 가상 스크롤(game.js renderPetWindow)의 '행 높이 일정' 전제가 깨진다. */
.pet-card.bc,.pet-slot.filled.bc{
border-color:var(--pet-bc);
background-image:linear-gradient(165deg,var(--pet-bc-soft) 0%,rgba(0,0,0,0) 72%);
box-shadow:
inset 0 0 0 3px var(--pet-bc),
inset -3px -3px 0 rgba(0,0,0,.35),
inset 3px 3px 0 rgba(255,255,255,.06),
0 0 11px var(--pet-bc-glow);
}
/* 배치 완료 카드는 금색 글로우가 지정색 글로우를 덮지 않게 둘 다 남긴다. */
.pet-card.bc.is-deployed{
box-shadow:
inset 0 0 0 3px var(--pet-bc),
inset -3px -3px 0 rgba(0,0,0,.35),
0 0 6px var(--gold),
0 0 12px var(--pet-bc-glow);
}
/* ── 아이템 가방 ─────────────────────────────────────────── */
/* 아이템 탭의 글자는 **낱말 단위**로 접는다 — 한글 줄바꿈 한 벌(모달 공통 절 `.offline-card,#tab-item,#tab-ghub`).
설명 줄(.item-desc)은 설명 · 상태 줄 한 벌(큰 단추 절 아래)이다. */
/* 상자 섹션 */
.box-section{display:flex;flex-direction:column;gap:8px}
/* 상자 카드(2026-09-26) — 첫 줄은 [그림 · '보물상자 12,469개'](한 줄 고정), 둘째 줄은 **카드 폭 전체의 같은 폭 단추 줄**.
예전엔 개수와 단추가 한 줄을 다퉈 폭마다 모양이 달랐다 — 360px 은 '전설 상 / 자 46 / 개' + 단추 세 줄, PC 는 '12469 / 개' +
2+1 줄. 단추 글자가 길어지면(열 수 · 새 단추) 칸 안에서 낱말 단위 두 줄로 접히고, 한 줄의 단추 높이는 늘 같다.
⚠ `.box-info` 는 `display:contents` 다 — 마크업을 그대로 두고 두 자식(개수 · 단추 줄)을 이 격자의 칸으로 올린다. */
.box-card{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px 12px;padding:12px;
background:var(--panel);border:3px solid var(--line);
box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06)}
.box-card.legend{border-color:var(--leg);box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),0 0 10px var(--leg)}
.box-card.hidden{display:none}
.box-img{width:44px;height:44px;image-rendering:pixelated;animation:boxBob 2.4s ease-in-out infinite}
@keyframes boxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.box-img{animation:none}}
.box-info{display:contents}
.box-count{grid-column:2;min-width:0;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box-count strong,.dust-count strong{font-size:18px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold);text-shadow:2px 2px 0 var(--line)}
.box-open-btn{font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;font-size:12px;padding:10px 14px;white-space:nowrap}
.box-open-btn:active:not(:disabled){transform:translateY(2px)}
.box-open-btn.legend{background:var(--leg)}
/* 상자 분해 — 되돌릴 수 없는 소모라 '열기'와 색으로 구분한다(라임=분해 계열). */
.box-open-btn.decompose{background:#b6d97a}
.box-open-btn.decompose.hidden{display:none}
/* 칩 줄 한 벌 — 활성 부스트 바 · 장착(전시) 줄 · 전설 장비 줄(형광 테두리만 다르다 — 아래 .legend-row). */
.active-boosts,.equipped-row,.legend-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;
background:var(--panel2);border:3px solid var(--line)}
.active-boosts.hidden,.equipped-row.hidden,.legend-row.hidden{display:none}
.ab-title{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.ab-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;
background:var(--panel);border:2px solid var(--line);padding:3px 6px}
.ab-chip img{width:16px;height:16px;image-rendering:pixelated}
.ab-chip.rate{border-color:var(--unc)}
.ab-chip.crit{border-color:var(--leg)}
.ab-label{color:var(--ink)}
.ab-time{color:var(--gold);font-variant-numeric:tabular-nums}
/* 장착(전시) 줄 — 모양은 칩 줄 한 벌(위 .active-boosts) */
.eq-title{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.eq-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;cursor:pointer;
background:var(--panel);border:2px solid var(--gold);padding:3px 6px}
.eq-chip img{width:18px;height:18px;image-rendering:pixelated}
/* 카테고리 필터 칩 */
.item-filters{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;font-size:12px;color:var(--muted);
background:var(--panel2);border:2px solid var(--line);padding:6px 9px}
.chip.active{color:var(--gold);border-color:var(--gold)}
/* 가방 그리드 */
/* ⚠ `minmax(0,1fr)` 이다 — `1fr`(= minmax(auto,1fr))이면 줄바꿈 금지 이름('심해모사사우루스 조각')이 칸을 넓혀 360px 에서
격자가 39px 넘쳐 셋째 줄 카드가 잘렸고, 412px 도 칸 폭이 106/118/118 로 들쭉날쭉했다(2026-09-26 실측). */
.item-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* 상점 */
/* 상점 = 독립 화면(모드). 방치/던전 셸과 같은 폭 + 하단 모드나브 여백. */
.shop-shell{padding:12px 12px calc(var(--mode-nav-height,54px) + 24px);color:var(--ink);min-height:100vh;min-height:100dvh}
.shop-shell>.bar{margin-bottom:12px}
.shop-balance-bar{display:flex;align-items:stretch;gap:12px;margin:0 0 12px;padding:12px 14px}
.sbb-item{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.sbb-item.points{border-left:2px solid var(--dirt-lo);padding-left:12px}
.shop-balance-bar .label{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted)}
.shop-balance-label{display:flex;align-items:center;gap:5px}
.shop-balance-label img{width:15px;height:15px;display:block}
.shop-balance-bar .val{font-size:20px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.sbb-item.points .val{color:var(--unc)}
.shop-balance{margin:0 0 10px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
.shop-balance strong{color:var(--gold,#ffd76a)}
.shop-catalog{display:flex;flex-direction:column;gap:14px}
.shop-section{padding:10px;}
.shop-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;padding-bottom:7px;border-bottom:2px solid var(--dirt-lo)}
.shop-section-head>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.shop-section-head strong{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;}
.shop-section-head span{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.shop-section-head em{flex:0 0 auto;font-style:normal;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;padding:2px 6px;border:1px solid var(--dirt-lo);border-radius:999px}
.shop-section-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.shop-section-empty{grid-column:1/-1;margin:0;padding:16px 4px;text-align:center;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;}
.shop-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 8px;text-align:center;
background:var(--panel);border:3px solid var(--line);
box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06)}
.shop-item.sold-out{opacity:.55}
.shop-item-art{position:relative;display:grid;place-items:center;width:48px;height:48px;flex:0 0 auto}
.shop-img{position:absolute;inset:0;display:block;width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
.shop-img[hidden]{display:none}
.shop-img-ph{display:grid;place-items:center;width:46px;height:46px;background:rgba(0,0,0,.10);color:var(--muted)}
.shop-img-ph::before{content:"";width:10px;height:10px;border:2px solid var(--dirt);border-top-color:var(--gold);border-radius:50%;animation:shopIconLoading .7s steps(8,end) infinite}
.shop-item-art.image-ready .shop-img-ph{visibility:hidden}
.shop-item-art.image-fallback .shop-img-ph{color:var(--gold)}
.shop-item-art.image-fallback .shop-img-ph::before{content:"?";width:auto;height:auto;border:0;border-radius:0;animation:none;font:700 15px/1 "Galmuri14","Galmuri11",sans-serif}
@keyframes shopIconLoading{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.shop-img-ph::before{animation:none}}
.shop-item-name{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;font-weight:bold;line-height:1.2}
.shop-item-desc{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted,#9aa);line-height:1.25}
.shop-item-stock{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted,#9aa);line-height:1.35;min-height:18px}
/* 재고/구매 현황 칩 — ① 글로벌 재고(전체·오늘) ② 내가 살 수 있는 수량 */
.ss{display:inline-flex;align-items:baseline;gap:1px;padding:2px 6px;background:var(--panel2);border:2px solid var(--line);color:var(--muted);white-space:nowrap}
.ss b{color:var(--ink);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;font-weight:bold}
.ss i{font-style:normal;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.ss-mine{border-color:var(--gold-lo);color:var(--gold)}
.ss-mine b{color:var(--gold)}
.ss-out{border-color:#8a3b32;color:#e8907f;background:#3a201c}
.ss-out b{color:#f2b3a6}
.ss-muted{opacity:.7}
.shop-buy-btn{margin-top:2px;width:100%;padding:6px 4px;font:inherit;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;color:#fff;
background:var(--accent,#4a7a55);border:none;
box-shadow:inset -2px -2px 0 rgba(0,0,0,.35),inset 2px 2px 0 rgba(255,255,255,.12)}
.shop-buy-btn:disabled{opacity:.5;cursor:not-allowed}
.shop-price{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--gold);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;font-weight:bold;line-height:1}
.shop-currency-icon{display:block;width:16px;height:16px;flex:0 0 auto}
.shop-empty{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted,#9aa);text-align:center;padding:20px 0}
.shop-empty.hidden{display:none}
.item-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;
padding:8px 4px;text-align:center;
background:var(--panel);border:3px solid var(--line);
box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06)}
.item-art{height:40px;display:flex;align-items:center;justify-content:center}
.item-art img{width:32px;height:32px;image-rendering:pixelated}
.item-count{position:absolute;top:2px;right:4px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold)}
/* 이름은 **두 줄까지** 다 보인다(낱말 단위 · 그보다 길면 두 줄째 끝을 자른다). 한 줄 말줄임이던 시절엔 칸을 밀어냈다(위 격자). */
.item-name{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);line-height:1.25;max-width:100%;overflow:hidden;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.item-rarity{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.item-btn{padding:5px} /* 모양은 카드 단추 한 벌(.pet-btn,.item-btn — 펫 절) */
.item-btn.on{background:var(--unc)}
/* 단추 묶음은 카드 **바닥**에 붙는다 — 한 줄의 카드는 높이가 같으므로(격자 stretch) 이름 줄 수 · 진행도 줄이 달라도
옆 카드와 단추 높이가 맞는다(예전엔 '소닉스타 조각' 의 교환이 옆 카드 콕!/분해보다 떠 있었다). */
.item-card>button:first-of-type{margin-top:auto}
.item-card>:is(.item-rarity,.item-effect){margin-bottom:4px}
.item-card.equipped{box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),0 0 6px var(--gold)}
.item-empty,.item-empty-cat{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted);text-align:center;line-height:1.7;padding:8px;grid-column:1/-1}
.item-empty.hidden{display:none}
/* 등급 테두리/색 (아이템) */
.item-card.common{border-color:var(--com)} .item-rarity.common{color:var(--com)}
.item-card.uncommon{border-color:var(--unc)} .item-rarity.uncommon{color:var(--unc)}
.item-card.rare{border-color:var(--rare)} .item-rarity.rare{color:var(--rare)}
.item-card.epic{border-color:var(--epic)} .item-rarity.epic{color:var(--epic)}
.item-card.legendary{border-color:var(--leg);box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),0 0 8px var(--leg)}
.item-rarity.legendary{color:var(--leg)}
/* 미스틱 · 불멸(2026-09-08 등급) — 펫 카드에만 규칙이 있어 **아이템**(조각 · 교환권)은 테두리도 등급 글자도 색이 빠져 있었다. */
.item-card.mystic{border-color:var(--mystic);box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),0 0 8px var(--mystic)}
.item-rarity.mystic{color:var(--mystic)}
.item-card.immortal{border-color:var(--immortal);box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),0 0 8px var(--immortal),0 0 16px var(--immortal)}
.item-rarity.immortal{color:var(--immortal)}
/* ── 전설 장비(legend) — 형광 테두리 + 영구 효과 표시 ───────────────────────── */
.item-effect{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#7CFFB2;text-shadow:0 0 4px #39ff14}
.item-card.lg .item-art{height:54px}
.item-card.lg .item-art img{width:auto;height:54px;max-width:100%}
.item-card.lg{border-color:#39ff14;animation:legendNeon 2s linear infinite}
@keyframes legendNeon{
0%,100%{border-color:#39ff14;box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),0 0 7px #39ff14,0 0 14px #39ff14}
33%{border-color:#00e5ff;box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),0 0 9px #00e5ff,0 0 18px #00e5ff}
66%{border-color:#ff3df0;box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),0 0 9px #ff3df0,0 0 18px #ff3df0}
}
/* 장착된 전설 장비 효과 행(형광) — 줄 모양은 칩 줄 한 벌(.active-boosts), 테두리만 형광이다. */
.legend-row{border-color:#39ff14;box-shadow:0 0 8px rgba(57,255,20,.4)}
.lr-title{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#7CFFB2}
.lr-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;cursor:pointer;
background:var(--panel);border:2px solid #39ff14;padding:3px 7px;box-shadow:0 0 5px rgba(57,255,20,.5)}
.lr-chip img{width:auto;height:20px;image-rendering:pixelated}
.lr-chip span{color:var(--ink)}
/* 전설 장비 리빌 — 형광 + 큰 메달 */
.box-reveal.lg{border-color:#39ff14!important;animation:legendNeon 2s linear infinite}
.box-reveal.lg .reveal-rarity{color:#39ff14;border-color:#39ff14}
.box-reveal.lg .reveal-art{height:104px}
.box-reveal.lg .reveal-art img{width:auto;height:96px}
@media (prefers-reduced-motion:reduce){.item-card.lg,.box-reveal.lg{animation:none}}
.offline-boxes{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;margin-top:8px}
.offline-boxes.hidden{display:none}
/* 상자 리빌 모달 */
.box-reveal{position:relative;overflow:hidden}
.reveal-burst{position:absolute;left:50%;top:46%;width:160px;height:160px;transform:translate(-50%,-50%);
background:radial-gradient(circle,rgba(242,193,78,.45) 0%,transparent 60%);animation:revealBurst 1s ease-out;pointer-events:none}
@keyframes revealBurst{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}40%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
.reveal-emoji{font-size:34px;line-height:1}
.reveal-art{height:72px;display:flex;align-items:center;justify-content:center;margin:6px 0}
.reveal-art img{width:60px;height:60px;image-rendering:pixelated;animation:revealPop .4s cubic-bezier(.2,1.4,.5,1)}
@keyframes revealPop{0%{transform:scale(.2) rotate(-20deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.reveal-rarity{display:inline-block;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;padding:2px 8px;border:2px solid var(--line);margin-bottom:6px}
.box-reveal.common .reveal-rarity{color:var(--com);border-color:var(--com)}
.box-reveal.uncommon .reveal-rarity{color:var(--unc);border-color:var(--unc)}
.box-reveal.rare .reveal-rarity{color:var(--rare);border-color:var(--rare)}
.box-reveal.epic .reveal-rarity{color:var(--epic);border-color:var(--epic)}
.box-reveal.legendary .reveal-rarity{color:var(--leg);border-color:var(--leg)}
.box-reveal.epic{box-shadow:inset -4px -4px 0 rgba(0,0,0,.3),0 0 14px var(--epic)}
.box-reveal.legendary{box-shadow:inset -4px -4px 0 rgba(0,0,0,.3),0 0 18px var(--leg)}
.box-reveal.mystic .reveal-rarity{color:var(--mystic);border-color:var(--mystic)}
.box-reveal.immortal .reveal-rarity{color:var(--immortal);border-color:var(--immortal)}
.box-reveal.mystic{box-shadow:inset -4px -4px 0 rgba(0,0,0,.3),0 0 18px var(--mystic)}
.box-reveal.immortal{box-shadow:inset -4px -4px 0 rgba(0,0,0,.3),0 0 20px var(--immortal)}
/* 럭키 오버레이 (상자 드롭 — 크리티컬처럼 잠깐) */
.lucky-overlay{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;pointer-events:none}
.lucky-overlay.hidden{display:none}
.lucky-inner{display:flex;flex-direction:column;align-items:center;gap:8px}
.lucky-box{width:72px;height:72px;image-rendering:pixelated}
.lucky-text{font-size:24px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold);text-shadow:2px 2px 0 var(--line),0 0 12px var(--gold);text-align:center;line-height:1.4}
.lucky-text span{display:block;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink)}
.lucky-overlay.show .lucky-inner{animation:luckyPop 1.5s ease-out}
@keyframes luckyPop{0%{transform:scale(.4);opacity:0}15%{transform:scale(1.15);opacity:1}30%{transform:scale(1)}80%{transform:scale(1);opacity:1}100%{transform:scale(1.05) translateY(-10px);opacity:0}}
@media (prefers-reduced-motion:reduce){.lucky-overlay.show .lucky-inner{animation:none}.reveal-art img{animation:none}}
/* 럭키 상자 토스(카트로) — ore-toss 변형, 더 크고 금빛 */
.ore-toss.box{width:22px;height:22px;filter:drop-shadow(0 0 5px var(--gold));z-index:6}
/* ── 샤이니 잭팟 오오라 — 카드 틀을 넘쳐 눈부시게 빛난다(보유/배치/채굴 공통) ── */
.pet-card.shiny,.pet-slot.shiny.filled{position:relative;z-index:1;border-color:#fff6b0!important;
animation:shinyPulse 1.6s ease-in-out infinite}
@keyframes shinyPulse{
0%,100%{box-shadow:0 0 10px #ffe27a,0 0 22px rgba(255,226,122,.6),0 0 34px rgba(174,244,255,.3)}
50%{box-shadow:0 0 20px #fff,0 0 40px #ffe27a,0 0 64px rgba(174,244,255,.55)}}
/* 사선 광택 스윕(유리 반짝임) — 보유 카드 */
.pet-card.shiny::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.9) 49%,transparent 58%);
background-size:280% 100%;background-repeat:no-repeat;animation:shinySweep 2.6s ease-in-out infinite}
@keyframes shinySweep{0%{background-position:200% 0}60%,100%{background-position:-120% 0}}
/* 채굴 중 펫 — 미너 SVG 에 금빛 광휘(mine 은 overflow:hidden 이라 글로우로) */
.miner.shiny .miner-pet{animation:minerShiny 1.5s ease-in-out infinite}
@keyframes minerShiny{
0%,100%{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #ffe27a)}
50%{filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 16px #ffd24d)}}
@media (prefers-reduced-motion:reduce){
.pet-card.shiny,.pet-slot.shiny.filled,.pet-card.shiny::after,.miner.shiny .miner-pet{animation:none}
.pet-card.shiny,.pet-slot.shiny.filled{box-shadow:0 0 16px #ffe27a}}
/* ── 장착 꾸미기 핀 — 공통 컴포넌트 (2026-09-01) ─────────────────────────────
장착한 치장 셋(스티커·훈장·명화)은 **전부 같은 모습**이다: 헤더 오른쪽 위에
테두리도 받침도 없이 **그림만** 둥둥 떠 있다. 그리는 곳은 `.cb` 한 벌뿐이다.
예전에는 같은 성격의 셋이 두 갈래로 갈려 있었다 —
· 스티커: `body.has-sticker .bar::after` 로 코너에 떠다니는 핀
· 훈장·명화: `.who` 안에서 테두리를 두른 채 줄을 서는 배지
그래서 스티커는 **두 번** 그려졌고(핀 하나 + 배지 하나), 셋의 생김새가 달랐다.
::after 를 없애고 셋 다 이 한 벌로 모았다.
🔴 흐름 밖(absolute)인 것이 핵심이다 — `.who`(뱃지+꾸미기+닉네임)는 헤더에서
**남는 만큼만** 받는 칸인데 거기에 배지가 앉아 있었다:
레벨 뱃지 60.3px + 꾸미기 3종 74px = 134.3px > `.who` 121.5px (375px 기기 실측)
그래서 닉네임 몫이 **0px** 이 됐다 — 이름이 한 글자도 안 보였다.
⚠️ `pointer-events:none` — 아래 설정 버튼 위를 지나므로, 클릭을 먹으면
휴대폰에서 설정을 아예 못 연다. 핀은 장식이라 눌릴 일이 없다.
⚠️ 그리는 마크업은 game.js `renderCosmetics` 하나뿐이다(`.cb` 는 여기 말고 안 쓴다). */
.cosmetic-badges{position:absolute;z-index:3;top:-9px;right:9px;
display:inline-flex;align-items:center;gap:4px;margin:0;pointer-events:none}
/* 장착한 게 없으면 빈 상자가 코너에 남는다 — 통째로 없앤다. */
.cosmetic-badges:empty{display:none}
/* 핀 하나 — 테두리도 받침도 없이 **그림만** 뜬다. 액자에 꽂은 스티커처럼 흔들린다. */
.cb{display:block;width:20px;height:20px;image-rendering:pixelated;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));
animation:cosmeticPin 2.6s ease-in-out infinite}
.cb img{display:block;width:100%;height:100%;image-rendering:pixelated}
/* 셋이 한 몸처럼 같이 흔들리면 덩어리로 보인다 — 시작점을 어긋나게 둔다. */
.cb:nth-child(2){animation-delay:-.9s}
.cb:nth-child(3){animation-delay:-1.7s}
@keyframes cosmeticPin{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-2px) rotate(7deg)}}
/* 좁은 화면 — 예전엔 던전 헤더에만 있던 조임을 헤더 한 벌 전체에 준다.
⚠️ 헤더 조임 규칙은 **아래 두 블록(≤420 · ≤360)뿐이어야 한다.** 예전에는 `.bar.has-bgm-control` 을
노린 블록이 위쪽에 따로 있었는데, 클래스가 하나 더 많아 특이도로 이겨서 여기 적은
값이 조용히 무시됐다(gap 이 그랬다). 값을 바꾸려면 여기만 고치면 된다.
≤420 은 흔한 폰(390 · 412)이다 — 도구 단추 다섯이 34 · 28 · 30 · 34 · 30px 로 들쭉날쭉하던 시절,
닉네임 칸이 17~28px 만 남아 '개…' 로 잘렸다(2026-09-26 실측). */
@media(max-width:420px){
.bgm-toggle,.gh-board,.gh-chat,.gh-bag,.nc-inbox-open,.gs-open-btn{min-width:29px;padding:3px 4px}
.gh-board,.gh-chat,.gh-bag,.nc-inbox-open,.gs-open-btn{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
}
@media(max-width:360px){
.bar{gap:4px;padding:8px}
.who{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
/* 아이콘 크기는 안 적는다 — `.gi` 의 em 이 이 font-size 축소를 그대로 따라간다(15px). */
.gh-wallet{padding:2px 5px 2px 3px;gap:3px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.bgm-toggle,.gh-board,.gh-chat,.gh-bag,.nc-inbox-open,.gs-open-btn{min-width:27px;min-height:26px}
.ghi{width:1.25em;height:1.25em}
.gh-badge{margin-right:4px;padding:2px 4px 2px 2px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.gh-badge-art{width:15px;height:15px}
/* 꾸미기 핀은 흐름 밖이라 좁은 화면에서도 닉네임을 밀지 않는다 — 그래도 헤더가
조여지는 만큼 함께 조금 줄인다(그림은 100% 라 따라 줄어든다). */
.cb{width:18px;height:18px}
}
/* 스티커 장착 시에도 기본(베이스) 픽셀 테두리는 그대로 유지 — 테두리 색을 스티커색으로 덮어쓰지 않고,
스티커 색은 은은한 외곽 글로우로만 입힌다(치장). 타이틀 글로우·헤더 코너 핀은 아래에서 별도 유지. */
body.has-sticker .bar,
body.has-sticker .hud,
body.has-sticker .site,
body.has-sticker .panel,
body.has-sticker .pet-banner,
body.has-sticker .shop-balance-bar,
body.has-sticker .shop-item,
body.has-sticker .shop-cat-heading{box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06),0 0 9px var(--sticker)}
/* 방치 탭 바 전체에는 아주 옅은 빛을 두르고, 선택된 탭은 한 단계 더 또렷하게 표시한다. */
body.has-sticker .tabs{filter:drop-shadow(0 0 3px var(--sticker))}
body.has-sticker .tab.active{box-shadow:inset 0 3px 0 var(--sticker),0 0 6px var(--sticker);text-shadow:0 0 7px var(--sticker)}
body.has-sticker .shop-section-head{border-bottom-color:var(--sticker)}
/* 꾸미기 핀의 기준점. `body.has-sticker` 조건을 뗐다(2026-09-01) — 이 코너를 쓰는 것이
스티커 하나가 아니게 됐다. 조건부로 두면 스티커 없이 훈장만 낀 사람에게는 기준점이
없어 배지가 헤더가 아닌 엉뚱한 조상 기준으로 떠 버린다. */
.bar{position:relative}
/* ⚠️ 여기 있던 `body.has-sticker .bar::after` **스티커 전용 핀은 없앴다**(2026-09-01).
셋이 서로 다르게 생긴 게 문제였다 — 스티커만 ::after 로 떠다니고 훈장·명화는
`.who` 안에서 테두리 배지로 줄을 섰다. 게다가 스티커는 그 탓에 **두 번** 그려졌다
(핀 하나 + 배지 하나). 이제 셋 다 위쪽 `.cb` 공통 핀 한 벌이 그린다. */
/* 스티커만 자기 장착 색으로 숨을 쉰다 — 그 색(--sticker)이 이 아이템의 정체성이라서다.
테두리가 없어졌으므로 box-shadow 가 아니라 **그림 자체의 글로우**로 준다.
흔들림(cosmeticPin)과 함께 돌려야 하므로 애니메이션을 둘 다 적는다. */
/* 🔴 흔들림(cosmeticPin)을 여기서 **다시 적지 않는다.** 예전에는 글로우를 얹으려고
`animation:cosmeticPin …,stickerGlow …` 를 통째로 다시 썼는데, 두 가지가 망가졌다:
① 2.6s 타이밍이 두 곳에 복제돼 `.cb` 만 고치면 스티커 핀만 어긋난다.
② 이 선택자가 (0,2,1)이라 아래 멀미 방지 규칙(0,1,0)을 **이겨서**,
reduce 를 켠 사람에게도 스티커만 영원히 움직였다(글로우는 매 프레임 blur 재계산).
글로우는 자식 ![]()
에 걸어 합성한다 — 검은 그림자는 부모 `.cb` 가 이미 깔았다. */
body.has-sticker .cb-sticker img{animation:stickerGlow 2.2s ease-in-out infinite}
@keyframes stickerGlow{
0%,100%{filter:drop-shadow(0 0 3px var(--sticker))}
50%{filter:drop-shadow(0 0 9px var(--sticker))}}
@media (prefers-reduced-motion:reduce){.cb,.cb img{animation:none}}
/* ── 피버 상태 (부스트 2개+ 겹침) — 화면 반짝임 + 🔥FEVER 배지 ──────────────── */
.fever-overlay{position:fixed;inset:0;z-index:45;pointer-events:none;display:none}
body.fever .fever-overlay{display:block}
/* 피버는 방치 채굴 연출이다 — 방치 화면이 아닐 땐 끈다(2026-09-27 월드 제보: 월드 iframe(z30) 위로 반짝이며 렉).
body.fever 는 방치 화면에서만 갱신돼(refreshIdleSecondTick) 다른 화면에선 부스트가 끝나도 남아 있었다.
전체 화면 inset box-shadow 애니는 합성이 안 돼 매 프레임 화면 전체를 다시 칠한다 — 3D 화면 위에선 곧 렉. */
body:not(.idle-open) .fever-overlay{display:none}
.fever-ring{position:absolute;inset:0;animation:feverRing 1.1s ease-in-out infinite}
@keyframes feverRing{
0%,100%{box-shadow:inset 0 0 14px rgba(242,193,78,.30), inset 0 0 38px rgba(242,161,62,.12)}
50%{box-shadow:inset 0 0 calc(16px + var(--fever-n,2)*7px) rgba(242,193,78,.65),
inset 0 0 calc(46px + var(--fever-n,2)*9px) rgba(242,161,62,.32)}
}
.fever-sparkles span{position:absolute;font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;opacity:0;
filter:drop-shadow(0 0 4px var(--gold));animation:feverTwinkle 1.6s ease-in-out infinite}
.fever-sparkles span:nth-child(1){left:8%;top:18%;animation-delay:0s}
.fever-sparkles span:nth-child(2){left:87%;top:23%;animation-delay:.2s}
.fever-sparkles span:nth-child(3){left:15%;top:63%;animation-delay:.5s}
.fever-sparkles span:nth-child(4){left:81%;top:69%;animation-delay:.8s}
.fever-sparkles span:nth-child(5){left:49%;top:11%;animation-delay:.35s}
.fever-sparkles span:nth-child(6){left:6%;top:43%;animation-delay:.95s}
.fever-sparkles span:nth-child(7){left:92%;top:49%;animation-delay:.6s;font-size:24px;font-family:"Galmuri11","Galmuri9",sans-serif}
.fever-sparkles span:nth-child(8){left:58%;top:83%;animation-delay:1.15s}
@keyframes feverTwinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(15deg)}}
.fever-badge{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:8;
font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;padding:3px 11px;white-space:nowrap;animation:feverBadge .8s ease-in-out infinite}
.fever-badge.hidden{display:none}
@keyframes feverBadge{
0%,100%{transform:translateX(-50%) scale(1);box-shadow:0 0 8px var(--gold)}
50%{transform:translateX(-50%) scale(1.07);box-shadow:0 0 17px var(--leg)}
}
/* 피버 중엔 '초당 채굴' 수치가 주황빛으로 — 부스트가 강하게 걸렸음을 직접 체감 */
body.fever #rate{color:var(--leg);text-shadow:0 0 9px var(--gold)}
@media (prefers-reduced-motion:reduce){
.fever-ring,.fever-sparkles span,.fever-badge{animation:none}
body.fever .fever-ring{box-shadow:inset 0 0 24px rgba(242,193,78,.5)}
.fever-sparkles span{opacity:.7}
}
/* ── 생명의가루(재료) + 적립 한도 증가권(제작) ─────────────────────────────── */
/* ✨ 는 제목 줄에 붙는다(flex-start) — 가운데 정렬이면 설명 · 단추 · 결과 줄로 카드가 길어질수록 왼쪽 한가운데에 홀로 떴다. */
.dust-card{display:flex;align-items:flex-start;gap:10px;margin:4px 0 10px;padding:9px 11px;
background:var(--panel2);border:3px solid var(--line);box-shadow:inset -3px -3px 0 rgba(0,0,0,.28)}
.dust-emoji{font-size:20px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1;filter:drop-shadow(0 0 4px var(--gold))}
.dust-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.dust-count{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink)}
.dust-hint{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.6}
.dust-hint b{color:var(--gold)}
/* 분해 가능 재고의 결과별 내역 — 총합만 보면 전부 가루로 읽히는 걸 막는 한 줄. */
.dust-breakdown{display:block;margin-top:4px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.5}
.dust-breakdown[hidden]{display:none}
.item-btn.decompose{background:var(--panel2);color:var(--gold);box-shadow:inset -2px -2px 0 rgba(0,0,0,.32)}
.cap-boost-card{margin-top:14px;padding:11px;background:var(--panel2);
border:3px solid var(--line);box-shadow:inset -3px -3px 0 rgba(0,0,0,.28)}
.cap-boost-head{display:flex;align-items:center;gap:8px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink);
padding-bottom:9px;margin-bottom:9px;border-bottom:2px solid var(--line)}
.cap-boost-head strong{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;color:var(--gold);text-shadow:2px 2px 0 var(--line)}
.cap-boost-body{display:flex;align-items:center;gap:10px}
.cap-boost-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cap-boost-name{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold)}
.cap-boost-desc{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.6}
.cap-boost-desc b{color:var(--ink)}
.cap-boost-state{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.5}
.cap-boost-body .big-action{width:auto;flex:0 0 auto;padding:11px 16px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
/* 좁은 폰(≤380)에서는 「제작」을 설명 아래 한 줄로 내린다(2026-09-26) — 옆에 두면 360px 에서 설명 칸이 206px 로 좁아져
설명이 3줄 · 상태가 2줄이었다(내리면 278px · 2줄 · 1줄). 412px 은 옆에 두어도 2줄 · 1줄이라 그대로 둔다 — 내리면 카드만 40px 길어진다.
상자 카드(.box-card)와 같은 경계다. 내려온 단추는 위 「룬으로 적립」과 같은 폭 넓은 단추다. */
@media(max-width:380px){.cap-boost-body{flex-direction:column;align-items:stretch}.cap-boost-body .big-action{width:100%}}
.cap-bonus-inline{color:var(--gold)}
/* ── 버닝타임 연출 (전역 오버레이 + 채굴장 하늘 + 자동채굴 ×2) ──────────────────── */
/* 전역 오버레이: body.burning 이면 노출(방치/상점/던전 공통). */
/* style = server burning.style(sunset/aurora/meteor/festival) → body[data-burn-style]. */
/* 버닝 배너 색상 토큰 — style.css/dungeon.css 공유(스타일별 그라디언트 단일 소스, 두 파일 동기화 방지). */
:root{
--burn-grad:linear-gradient(90deg,#ff2d95,#ff7a18);
--burn-grad-aurora:linear-gradient(90deg,#1f9e8a,#38c46a);
--burn-grad-meteor:linear-gradient(90deg,#6a4bff,#28a0d0);
--burn-grad-festival:linear-gradient(90deg,#ff2d95,#f4c430,#28c8e0);
}
.burning-overlay{position:fixed;inset:0;z-index:46;pointer-events:none;display:none}
body.burning .burning-overlay{display:block}
/* 무지개 프레임 — 정지한 테두리 창(마스크) 안에서 무지개 conic 이 회전(색만 돈다) */
.burn-frame{position:absolute;inset:0;padding:3px;overflow:hidden;opacity:.85;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.burn-frame::before{content:"";position:absolute;inset:-50%;
background:conic-gradient(from 0deg,#ff004c,#ff7a18,#f4e400,#38e04a,#28c8e0,#7a5cff,#ff2d95,#ff004c);
animation:burnFrameSpin 7s linear infinite}
@keyframes burnFrameSpin{to{transform:rotate(360deg)}}
body[data-burn-style="sunset"] .burn-frame::before{filter:hue-rotate(-14deg) saturate(1.15)}
body[data-burn-style="aurora"] .burn-frame::before{filter:hue-rotate(55deg) saturate(1.05)}
body[data-burn-style="meteor"] .burn-frame::before{filter:hue-rotate(200deg) saturate(1.1)}
/* 모바일: 회전하는 거대 레이어 대신 **테두리 자체를 흐르게** 한다.
`::before` 는 `inset:-50%` 라 뷰포트의 4배 면적이고, 거기에 부모의 mask-composite 와 자신의
hue-rotate 필터가 겹친다 — 아이폰 390×844·DPR3 이면 약 11.9M 디바이스 픽셀이 7초마다 한 바퀴
돈다(파티클보다 한 자릿수 크다). 아래 규칙은 레이어를 뷰포트 크기로 줄이고 회전·필터를 없애며,
마스크가 실제로 칠하는 3px 링만 남긴다. 무지개가 흐르는 인상은 그대로다.
⚠️ 계열별 색조(hue-rotate)는 모바일에서 포기한다 — 배너 색이 그 역할을 대신한다. */
@media (pointer: coarse) {
.burn-frame::before{display:none}
.burn-frame{background:linear-gradient(90deg,#ff004c,#ff7a18,#f4e400,#38e04a,#28c8e0,#7a5cff,#ff2d95,#ff004c);
background-size:300% 100%;animation:burnFrameFlow 7s linear infinite}
@keyframes burnFrameFlow{to{background-position:300% 0}}
}
/* 상단 배너 — 지배 축·배율 표시(슬라이드 다운).
⚠️ **헤더 위 띠**에 앉는다(2026-09-26). 예전 자리(top:7px · 높이 30px)는 헤더 내용 줄 위쪽 6px 를 덮어
지갑 · 닉네임을 가렸다(던전은 배너가 둘이라 폰에서 헤더가 통째로 가려졌다). 이제 버닝 중에는 헤더가
12px 내려앉고(아래 margin-top) 배너는 그 띠(2~24px)에만 뜬다 — 떠다니는 폭도 위아래 2px 로 줄였다.
던전 배너(dungeon.css `.dungeon-burn-banner`)와 **한 규칙**이다 — 자리 · 크기 · 모양은 여기 한 곳이고,
던전 쪽은 fixed · 맥박만 덧붙인다(따로 두던 시절 둘이 어긋나 던전에서만 헤더를 가렸다). */
.burn-banner,.dungeon-burn-banner{top:2px;left:50%;transform:translate(-50%,0);
display:inline-flex;align-items:center;gap:5px;font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;color:#fff;
padding:3px 11px;border-radius:999px;white-space:nowrap;
background:var(--burn-grad);border:2px solid var(--line);
box-shadow:0 4px 16px -4px #ff7a18,inset 0 0 0 1px rgba(255,255,255,.18)}
.burn-banner{position:absolute;opacity:0}
/* 등장(슬라이드다운) 1회 → 구름처럼 둥둥 떠다니는 플로트 무한반복(translate 의 -50% 중앙정렬 유지) */
body.burning .burn-banner{opacity:1;animation:bannerEnter .55s cubic-bezier(.2,1.35,.4,1),bannerFloat 5.5s ease-in-out .55s infinite}
.burn-banner .bb-flame{animation:burnFlame 1.1s ease-in-out infinite}
@keyframes burnFlame{50%{transform:translateY(-2px) rotate(-7deg)}}
@keyframes bannerEnter{from{opacity:0;transform:translate(-50%,-46px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes bannerFloat{0%,100%{transform:translate(-50%,0)}30%{transform:translate(calc(-50% - 5px),-1px)}62%{transform:translate(calc(-50% + 4px),-2px)}}
/* 배너 띠 — 버닝 중에는 다섯 화면의 헤더가 한 칸 내려앉아 배너 자리를 비운다(월드는 헤더가 없다). */
body.burning header[data-game-header]{margin-top:12px}
body[data-burn-style="aurora"] .burn-banner{background:var(--burn-grad-aurora)}
body[data-burn-style="meteor"] .burn-banner{background:var(--burn-grad-meteor)}
body[data-burn-style="festival"] .burn-banner{background:var(--burn-grad-festival);
background-size:220% 100%;animation:burnFestival 3.2s linear infinite}
@keyframes burnFestival{to{background-position:220% 0}}
/* 버닝 중 채굴장 하늘 교체/글로우는 제거(요청) — 하늘은 항상 기본(.mine background)을 유지한다. */
/* 자동채굴 ×2 익사이팅 연출 — .mine.boosting(자동채굴 활성) 게이트 */
.mine-boost-fx{position:absolute;inset:0;z-index:6;pointer-events:none;display:none}
#mine.boosting .mine-boost-fx{display:block}
.mbf-badge{position:absolute;top:4px;right:7px;font-size:19px;font-family:"Galmuri11","Galmuri9",sans-serif;color:#fff;letter-spacing:-.02em;
text-shadow:0 0 8px #ff7a18,0 2px 0 #7a1420,0 0 15px #ff2d95;-webkit-text-stroke:2px #7a1420;
animation:mbfPulse .7s ease-in-out infinite}
@keyframes mbfPulse{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.2) rotate(4deg)}}
/* 좌우 세로 스피드라인(.mine-boost-fx::before)은 제거(요청) — 뱃지·버스트 링만 남긴다. */
#mine.boost-burst .mine-boost-fx::after{content:"";position:absolute;top:13px;right:15px;width:16px;height:16px;
border-radius:50%;border:3px solid var(--gold);transform:translate(50%,-50%) scale(.2);opacity:0;animation:mbfBurst .6s ease-out}
@keyframes mbfBurst{0%{opacity:.9;transform:translate(50%,-50%) scale(.2)}100%{opacity:0;transform:translate(50%,-50%) scale(6)}}
@media (prefers-reduced-motion:reduce){
.burn-frame,.burn-frame::before,.burn-banner,.burn-banner .bb-flame,.mbf-badge,
#mine.boost-burst .mine-boost-fx::after{animation:none}
.burn-banner{transition:none}
}
/* 서버 드레인·연결 끊김 안내 — 읽기 화면은 유지하고 경제 작업만 요청 계층에서 차단한다. */
.service-status-banner{position:fixed;top:max(8px,env(safe-area-inset-top));left:50%;z-index:10020;
width:min(92vw,520px);transform:translateX(-50%);padding:10px 14px;border:1px solid #f2b84b;
border-radius:12px;background:#fff4cc;color:#6d4700;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;font-weight:800;text-align:center;
box-shadow:0 8px 24px rgba(76,51,0,.2)}
.service-status-banner[hidden]{display:none}
body.service-unavailable .big-action,body.service-unavailable .item-btn,
body.service-unavailable .dbag-use,body.service-unavailable .fb-go,
body.service-unavailable #claimConfirm,body.service-unavailable [data-shop-buy]{
filter:grayscale(.7);opacity:.58;cursor:not-allowed
}
/* ── 모바일 절전(무입력 60초) ────────────────────────────────────────────────
방치 게임은 '화면 켜둔 채 안 보는' 시간이 대부분인데, 그 동안에도 브라우저는 페이지를
'보이는 중'으로 취급해 장식 애니메이션을 전부 60fps 로 돌린다(발열·방전). 적립은 서버
권위(accrue)라 연출을 멈춰도 획득량 손해가 0 이므로, 무입력이 이어지면 장식만 정지한다.
game.js 가 body.power-save 를 토글하고 터치 즉시 해제한다. 레이아웃에 영향 주는 속성은
건드리지 않는다(animation 만 정지 → 위치·크기·색 그대로). */
body.power-save #mine::before,
body.power-save .box-img,
body.power-save .item-card.lg,
body.power-save .miner.shiny .miner-pet,
body.power-save .pet-card.shiny,
body.power-save .pet-slot.shiny.filled,
body.power-save .pet-card.shiny::after,
body.power-save .auto-mine-btn.active,
body.power-save .fever-ring,
body.power-save .fever-badge,
body.power-save .mbf-badge,
body.power-save .fever-sparkles span,
body.power-save .cb,
body.power-save .cb img,
body.power-save .gh-badge,
body.power-save .burn-banner,
body.power-save .burn-banner .bb-flame,
body.power-save .burn-frame,
body.power-save .burn-frame::before,
body.power-save .pet-fx{
animation:none!important
}
/* ===== 2026-08-03 일괄 개봉 · 일괄 분해 =====
상자·에그가 1개씩만 처리돼 아무도 끝까지 못 했다(실측 미개봉 1,519개, 최다 보유자 885번 클릭).
확률·수율은 그대로 두고 조작만 없앤 경로라 룬 발행량은 변하지 않는다. */
.box-btns{grid-column:1/-1;display:flex;gap:6px}
.box-btns>.box-open-btn{flex:1 1 0;min-width:0;padding:9px 6px;white-space:normal;line-height:1.25;text-wrap:balance}
/* 360px 급(국내 주력 폰)에서 세 단추가 한 줄에 들도록 카드 좌우 여백 · 단추 간격을 줄인다 — 단추 한 칸 88 → 100px
('전부 열기 (46)' 이 두 줄로 접히지 않는다). 더 긴 글자는 여전히 낱말 단위 두 줄로 접힌다. */
@media(max-width:380px){.box-card{padding:10px 8px}.box-btns{gap:4px}.box-btns>.box-open-btn{padding:9px 3px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}}
.box-open-btn.bulk{background:#3c5a4a;color:#c9f5e0}
.box-open-btn.bulk:disabled{opacity:.45;cursor:not-allowed}
/* 전역 .hidden 규칙이 없는 프로젝트라 여기서 선언해야 숨기기가 먹는다(구 백엔드 대비 게이트). */
.box-open-btn.hidden{display:none}
.dust-info .box-open-btn.bulk{margin-top:7px;align-self:flex-start}
.bulk-result{max-width:340px}
/* 200개를 열면 종류가 많아진다 — 목록만 스크롤시키고 제목·확인 버튼은 고정. */
.bulk-result .unlock-reveal-rows{max-height:min(44vh,290px);overflow-y:auto;scrollbar-width:thin}
/* ===== 2026-08-03 치장 추출(제한 해제) =====
쌓이기만 하던 스티커·메달·명화를 태워 적립 한도의 '상한'을 넓히는 가챠.
⚠ 생명의가루 카드(.cap-boost-card = 한도 자체를 올림)와 축이 다르다. 강조색을 시안 계열로
따로 잡아 두 카드를 색으로도 구분한다 — 문구만으로는 계속 헷갈린다는 게 이 기능의 출발점이다. */
.unlock-card{margin-top:10px;padding:10px;background:var(--panel2);border:3px solid var(--line);
box-shadow:inset -3px -3px 0 rgba(0,0,0,.3)}
/* 이 프로젝트엔 전역 .hidden 규칙이 없다(클래스마다 따로 선언). 빠뜨리면 숨기기가 안 먹는다. */
.unlock-card.hidden,.unlock-gauge.hidden{display:none}
.unlock-head{display:flex;align-items:center;gap:8px}
.unlock-emoji{flex:none;font-size:20px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1}
.unlock-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.unlock-title strong{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink)}
.unlock-sub{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5;color:var(--muted)}
.unlock-sub b{color:#7cf5ff}
.unlock-avail{flex:none;padding:4px 7px;background:var(--panel);border:2px solid var(--line);
font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.unlock-avail b{color:#7cf5ff;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
.unlock-stock{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.unlock-chip{display:flex;align-items:center;gap:5px;min-height:32px;padding:4px 7px;
background:var(--panel);border:2px solid var(--line);color:var(--ink);
font:700 10px "Galmuri9","Galmuri11",sans-serif;cursor:pointer;touch-action:manipulation}
.unlock-chip:hover{background:#453520}
.unlock-chip img{width:18px;height:18px;image-rendering:pixelated}
.unlock-chip .uc-count{color:var(--muted)}
.unlock-chip .uc-reward{color:#7cf5ff}
.unlock-chip.rare{border-color:var(--rare)}
.unlock-chip.epic{border-color:var(--epic)}
.unlock-empty{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;color:var(--muted)}
.unlock-actions{margin-top:9px}
.unlock-note{margin-top:7px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7;color:var(--muted)}
.unlock-note b{color:#7cf5ff}
/* 결과 연출 — 추출한 장 수만큼 칸이 순차로 켜지고(성공만 발광) 총 해제 P가 카운트업된다. */
.unlock-reveal-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;
max-width:264px;margin:10px auto 4px}
.ur-cell{width:12px;height:12px;background:#3a2d1d;border:1px solid var(--line);
animation:urPop .34s ease-out backwards;animation-delay:var(--d,0ms)}
.ur-cell.ok{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.ur-cell.rare.ok{background:var(--rare);box-shadow:0 0 6px var(--rare)}
.ur-cell.epic.ok{background:var(--epic);box-shadow:0 0 7px var(--epic)}
.ur-more{align-self:center;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
@keyframes urPop{from{opacity:0;transform:scale(.2) rotate(-25deg)}to{opacity:1;transform:none}}
.unlock-reveal-rows{display:grid;gap:3px;width:100%;margin-top:9px}
/* 목록 줄의 이름은 **왼쪽**에서 시작한다 — 카드의 가운데 정렬이 번져 줄마다 시작점이 달라 보였다(2026-09-26). */
.ur-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:7px;padding:4px 7px;text-align:left;
background:#2a2018;border:1px solid var(--line);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.ur-row>span{min-width:0}
.ur-row b{color:var(--ink)}
.ur-row em{font-style:normal;color:#7cf5ff}
.ur-row.rare b{color:var(--rare)}
.ur-row.epic b{color:var(--epic)}
.ur-row.uncommon b{color:var(--unc)}
.ur-row.legendary b{color:var(--leg)}
.ur-row.mystic b{color:var(--mystic)}
.ur-row.immortal b{color:var(--immortal)}
.unlock-reveal-foot{margin-top:8px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;color:var(--muted)}
/* 감속 모드에서도 **끄지 않는다**. 이 사내 PC 들은 Windows '애니메이션 표시' OFF 라 일반 크롬도
prefers-reduced-motion:reduce 를 보고한다 — animation:none 으로 처리하면 실사용자에게는
연출이 통째로 사라진 정지 화면만 남는다(전광판·시즌 쇼케이스·3D 단상에서 같은 원인으로 3건 제보).
그래서 재생은 유지하고 회전·확대 폭만 줄인다. */
@media (prefers-reduced-motion:reduce){
.ur-cell{animation-name:urPopSoft}
.us-wheel{animation-name:usSpinSoft}
}
@keyframes urPopSoft{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes usSpinSoft{from{transform:rotate(0)}to{transform:rotate(720deg)}}
/* ── 추출 전 확인 — 되돌릴 수 없는 소모라 '최대'와 '기대'를 함께 보여준다.
최대치만 내걸면 25% 가챠에서 기대를 부풀리게 된다. ── */
.unlock-confirm{max-width:330px}
/* 확인창의 품목 목록은 **안에서** 스크롤한다 — 버튼이 늘 제자리에 보이는 편이,
카드째 스크롤해 버튼을 찾아 내려가는 것보다 낫다(결과창은 이미 이렇게 한다). */
.unlock-confirm .unlock-reveal-rows{max-height:min(38vh,240px);overflow-y:auto;scrollbar-width:thin}
/* 최소·기대·최대 3칸 — 가운데(기대)만 강조하면 평균을 준다고 읽히므로 최대를 금색으로 세운다. */
.unlock-confirm-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:100%;margin-top:9px}
.unlock-confirm-sum>div{padding:6px 3px;background:#2a2018;border:2px solid var(--line);text-align:center}
.unlock-confirm-sum span{display:block;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.unlock-confirm-sum b{display:block;margin-top:3px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted)}
.unlock-confirm-sum>div.exp b{color:#7cf5ff}
.unlock-confirm-sum>div:last-child b{color:var(--gold)}
.unlock-confirm-roll{margin-top:8px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.65;color:var(--ink)}
.unlock-confirm-roll b{color:var(--gold)}
.unlock-confirm-warn{margin-top:6px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.65;color:var(--muted)}
/* 단추 줄 · ghost 단추는 모달 단추 줄 한 벌(모달 공통 절 `.claim-actions,…`)이다. */
.offline-btn.wide{width:100%;margin-top:6px}
/* 결과 게이지 — 0 ~ 최대(전부 성공) 중 이번 결과의 위치 */
.unlock-gauge{width:100%;height:9px;margin:2px 0 5px;background:#2a2018;border:2px solid var(--line);overflow:hidden}
.unlock-gauge>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7cf5ff,var(--gold));
transition:width .5s ease-out}
.unlock-gauge-label{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);margin-bottom:6px}
/* ── 가챠 돌림판(3초) → 결과. 한 모달 안에서 data-phase 로 단계만 바꾼다. ── */
#unlockModal[data-phase="spin"] .unlock-reveal-grid,
#unlockModal[data-phase="spin"] .reveal-rarity,
#unlockModal[data-phase="spin"] .offline-title,
#unlockModal[data-phase="spin"] .offline-msg,
#unlockModal[data-phase="spin"] .unlock-reveal-rows,
#unlockModal[data-phase="spin"] .unlock-reveal-foot,
#unlockModal[data-phase="spin"] .unlock-gauge,
#unlockModal[data-phase="spin"] .unlock-gauge-label,
#unlockModal[data-phase="spin"] .offline-btn{display:none}
#unlockModal[data-phase="result"] .unlock-spin,
#unlockModal[data-phase="result"] .unlock-spin-msg{display:none}
.unlock-spin{position:relative;width:136px;height:136px;margin:10px auto 4px}
.us-wheel{width:100%;height:100%;border-radius:50%;border:3px solid var(--line);
background:conic-gradient(var(--gold) 0 12.5%,#3a2d1d 0 25%,var(--rare) 0 37.5%,#3a2d1d 0 50%,
var(--epic) 0 62.5%,#3a2d1d 0 75%,#7cf5ff 0 87.5%,#3a2d1d 0);
box-shadow:inset 0 0 12px rgba(0,0,0,.6),0 0 14px rgba(242,193,78,.35);
animation:usSpin 3s cubic-bezier(.16,.86,.28,1) forwards}
.us-hub{position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
border-radius:50%;background:var(--panel2);border:3px solid var(--line)}
.us-pointer{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
color:var(--gold);font-size:17px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1;text-shadow:0 2px 0 var(--line)}
/* 🔴 돌림판이 돌 때 카드에 **가로 스크롤이 켜졌다 꺼졌다** 해서 레이아웃이 흔들렸다(제보 2026-10-09 · 뽑기).
카드(.offline-card)는 내용 폭만큼만 줄어드는데 뽑는 중에는 바퀴 136px 와 짧은 글자뿐이라 안쪽 폭이 180px 다.
회전한 정사각형 상자의 바깥 폭은 45° 근처에서 192px — 카드 틀이 overflow-y:auto 라 가로도 auto 가 되어
그 12px 를 스크롤로 잡았다. 바퀴 원은 상자 안에 그대로 들어가므로 가로만 잘라도 그림은 안 잘린다.
바퀴를 쓰는 두 창(뽑기·조합 연출 / 치장 추출)에만 건다 — 다른 모달의 가로 넘침 동작은 그대로. */
#fxModal .offline-card,#unlockModal .offline-card{overflow-x:hidden}
/* 5.5바퀴 — 가속 후 천천히 멈춘다. 실제 결과와 각도를 맞추지는 않는다(여러 장을 한 번에 굴리므로). */
@keyframes usSpin{from{transform:rotate(0)}to{transform:rotate(1980deg)}}
.unlock-spin-msg{margin-top:6px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);animation:usPulse 1.1s ease-in-out infinite}
@keyframes usPulse{0%,100%{opacity:.55}50%{opacity:1}}
/* ── 복권(스크래치) — 은박 캔버스를 문지르면 아래의 당첨 룬이 드러난다 ──
단계는 data-phase 하나로만 가른다(추출 돌림판과 같은 규율). 긁는 중에는 '확인'을 감춰
결과를 못 본 채 닫는 사고를 막고, 결과에서는 카드 어디를 눌러도 닫힌다. */
.lottery-card{max-width:320px}
#lotteryModal[data-phase="scratch"] .offline-btn,
#lotteryModal[data-phase="scratch"] .reveal-burst,
#lotteryModal[data-phase="scratch"] .unlock-reveal-foot{display:none}
#lotteryModal[data-phase="result"] .lt-scratch{pointer-events:none}
.lottery-ticket{
position:relative;width:100%;max-width:264px;height:120px;margin:8px auto 10px;
border:3px solid var(--line);background:linear-gradient(155deg,#3b2c15,#241a0e 60%,#3b2c15);
box-shadow:inset 0 0 14px rgba(0,0,0,.55);overflow:hidden;
}
/* 티켓 좌우의 절취선 자국 — 장식이라 클릭을 먹지 않게 pointer-events 를 끈다. */
.lottery-ticket::before,.lottery-ticket::after{
content:"";position:absolute;top:0;bottom:0;width:6px;pointer-events:none;
background:repeating-linear-gradient(180deg,var(--line) 0 5px,transparent 5px 11px);
}
.lottery-ticket::before{left:6px}
.lottery-ticket::after{right:6px}
.lt-prize{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.lt-prize-label{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;letter-spacing:1px;color:var(--muted)}
.lt-prize-amount{font-size:24px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1;color:var(--gold);text-shadow:2px 2px 0 var(--line)}
#lotteryModal[data-phase="result"] .lt-prize-amount{animation:ltPop .32s ease-out}
@keyframes ltPop{0%{transform:scale(.72)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
/* 은박 코팅 — 캔버스가 실제 스크래치 면이다. 열리면 투명도로 사라진다(캔버스를 지우면
되감기가 불가능해져 재시도 표시가 어렵다). touch-action:none 이 없으면 모바일에서
문지르기가 페이지 스크롤로 먹힌다. */
.lt-scratch{position:absolute;inset:0;width:100%;height:100%;
touch-action:none;cursor:crosshair;transition:opacity .45s ease-out}
/* ── 부화캡슐(펫 선택) — 그 등급의 종을 격자로 깔고 하나를 고른다 ────────── */
.capsule-card{width:min(100%,360px);max-width:360px}
.capsule-search{width:100%;margin:6px 0 8px;padding:7px 9px;font:inherit;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;
color:var(--ink);background:#2a2018;border:2px solid var(--line)}
.capsule-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:5px;
width:100%;max-height:min(46vh,300px);overflow-y:auto;scrollbar-width:thin;
padding:4px;background:#2a2018;border:2px solid var(--line)}
.capsule-cell{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 3px;
background:#3a2d1d;border:2px solid var(--line);color:var(--ink);font:inherit;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;
cursor:pointer;touch-action:manipulation}
.capsule-cell:hover{background:#453520}
.capsule-cell.picked{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.capsule-cell-art{width:40px;height:40px;display:grid;place-items:center}
.capsule-cell-name{width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.capsule-empty{grid-column:1/-1;padding:12px;text-align:center;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
/* 선택 표시 — 한 줄 고정(넘치면 말줄임)이라 이름이 길어도 카드가 안 밀린다. */
.capsule-picked{margin-top:6px;min-height:14px;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--gold)}
#capsuleModal[data-phase="result"] .capsule-picked{display:none}
.capsule-result{grid-column:1/-1;display:grid;place-items:center;padding:10px}
/* 단추 줄 모양은 위 「모달 단추 줄」 규칙이 정한다(결과 단계의 한 칸 규칙은 flex 에선 저절로 한 칸이다). */
/* 결과 단계에서는 검색·닫기를 감춘다 — 획득 카드에 필요 없고 오조작만 만든다. */
#capsuleModal[data-phase="result"] .capsule-search,
#capsuleModal[data-phase="result"] #capsuleCancel{display:none}
#capsuleModal[data-phase="result"] .capsule-actions{grid-template-columns:1fr}
#capsuleModal[data-phase="pick"] .reveal-burst{display:none}
/* 획득권 조각 교환 — 캡슐과 같은 단계 전환(틀 클래스는 전부 capsule-* 를 그대로 쓴다). */
#exchangeModal[data-phase="result"] .capsule-picked,
#exchangeModal[data-phase="result"] #exchangeCancel,
#exchangeModal[data-phase="result"] #exchangeNote{display:none}
#exchangeModal[data-phase="result"] .capsule-actions{grid-template-columns:1fr}
#exchangeModal[data-phase="pick"] .reveal-burst{display:none}
/* 조각 진행도 — 종마다 "37/100". 다 모으면 색이 바뀐다(누를 수 있다는 신호). */
.capsule-cell .ex-have{display:block;margin-top:2px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#af9876;font-variant-numeric:tabular-nums}
.capsule-cell .ex-have.ready{color:#2f8f5b;font-weight:700}
.capsule-cell .ex-have.replaced{color:#e6a23c;font-weight:700}
/* 이미 가진 스킬 — 먹여도 칸이 안 바뀌어 고를 수 없다. */
.capsule-cell.is-owned{opacity:.45;cursor:default}
/* 스킬 칸이 꽉 찬 펫 — 지울 종 스킬 고르기(2026-09-14). 고른 칸은 취소선으로 "사라진다"를 먼저 보인다. */
.ex-replace{margin-top:6px;padding:6px;border:2px solid #e6a23c;background:#2a1e10;text-align:left}
.ex-replace-title{margin:0 0 5px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.4;color:#ffcf8a}
.ex-replace-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.ex-replace-opt{min-width:0;min-height:34px;padding:4px 6px;border:2px solid var(--line);background:#2b2118;
color:inherit;font:inherit;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
cursor:pointer;touch-action:manipulation}
.ex-replace-opt.picked{border-color:#ff7a59;background:#4a2016;color:#ffb39e;text-decoration:line-through}
.ex-warn{display:block;color:#ff9e7d;font-weight:700;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
#exchangeModal .offline-btn{word-break:keep-all;overflow-wrap:anywhere}
/* 레벨 확장권 — 캡슐 틀 + 펫 가상 격자(IdlePetPicker). 🔴 칸 높이 고정이 계약이다:
game.js `renderLevelCapGrid` 의 rowHeight 91 = 칸 86px + 격자 틈 5px. 바꾸면 둘 다 바꾼다. */
.levelcap-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-content:start}
.levelcap-cell{position:relative;height:86px;min-width:0;justify-content:center}
.levelcap-lv{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.levelcap-bonus{position:absolute;top:-2px;right:-2px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;padding:2px 3px;
background:var(--gold);color:var(--bg);border:2px solid var(--line)}
.levelcap-cell.at-cap .levelcap-lv{color:#e0a458}
.levelcap-summary{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.levelcap-summary b{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;color:var(--gold)}
#levelCapModal[data-phase="result"] .capsule-picked,
#levelCapModal[data-phase="result"] #levelCapCancel{display:none}
#levelCapModal[data-phase="result"] .capsule-actions{grid-template-columns:1fr}
#levelCapModal[data-phase="pick"] .reveal-burst{display:none}
.capsule-cell .ex-match{display:block;margin-top:1px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#2f8f5b}
.capsule-cell .ex-match.warn{color:#b06a2c}
/* 가방 카드의 조각 진행도 — 다 모으면 색이 바뀐다(누를 수 있다는 신호). */
.item-card .item-progress{display:block;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#af9876;font-variant-numeric:tabular-nums}
.item-card .item-progress.done{color:#2f8f5b;font-weight:700}
/* 쓸 수 없게 된 칭호 이용권 — 「이미 보유」·「이미 뽑음」은 분해로 정리, 「받을 수 없음」은 그대로 둔다. */
.item-card .item-ticket-state{display:block;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-weight:700;color:#b06a2c}
.item-card .item-ticket-state.missing{color:#af9876}
/* ── 펫 상점(랜덤 출몰) 패널 — #shopMode 최상단, 창이 닫히면 통째로 사라진다 ──
무지개 연출 규율은 dungeon.css 의 모드 내비 규칙과 같다: 색은 정적 background,
@keyframes 는 움직임만. 이 PC 는 항상 reduced-motion 이라 정지 상태가 기본 외형이다. */
.pet-shop-panel{
margin:0 0 12px;padding:12px;border:3px solid #120d0a;
background-color:#2d2118;
background-image:linear-gradient(135deg,rgba(255,77,109,.22),rgba(255,159,28,.18),rgba(61,220,132,.18),rgba(76,201,240,.2),rgba(177,92,255,.24));
box-shadow:inset 0 3px 0 rgba(255,255,255,.18),4px 4px 0 #110c09;
}
.pet-shop-panel[hidden]{display:none!important}
.pet-shop-panel[data-mood="golden"],.pet-shop-panel[data-mood="mythic"]{
background-image:linear-gradient(135deg,rgba(255,214,10,.3),rgba(255,159,28,.24),rgba(255,243,176,.28),rgba(255,107,53,.24));
border-color:#6b4d05;
}
.ps-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ps-title{font:700 15px "Galmuri14","Galmuri11",sans-serif;color:#fff7df}
.ps-mood{margin-left:7px;padding:2px 6px;background:#1c140e;border:2px solid #110c09;color:#ffe14d;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.ps-clock{font:700 12px "Galmuri11","Galmuri9",sans-serif;color:#ffd9a8}
.ps-clock b{color:#fff;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
.ps-desc{margin:8px 0 10px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.6;color:#f3e8d8}
.ps-desc b{color:#ffe14d}
.ps-cap{display:block;margin-top:4px;color:#ffb0a0}
.ps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.ps-card{
padding:8px 6px;text-align:center;border:2px solid #110c09;background:#211913;
display:flex;flex-direction:column;align-items:center;gap:4px;
}
.ps-card.sold{opacity:.45;filter:grayscale(.85)}
.ps-card.mine{border-color:#63a38c;box-shadow:inset 0 0 0 2px rgba(99,163,140,.45)}
/* position:relative 는 좌상단 '미보유' 배지(.dex-badge-lock, absolute)의 기준점이다 — 빼면 배지가
카드 밖 조상으로 올라가 엉뚱한 자리에 뜬다. */
.ps-art{width:72px;height:72px;display:grid;place-items:center;position:relative}
.ps-tier{font:700 10px "Galmuri9","Galmuri11",sans-serif;letter-spacing:.5px;color:#b6a894}
.ps-card.t-hidden .ps-tier{color:#ff8ae2}
.ps-card.t-legendary .ps-tier{color:#ffd60a}
.ps-card.t-epic .ps-tier{color:#c792ea}
.ps-card.t-rare .ps-tier{color:#79c0ff}
.ps-card.t-uncommon .ps-tier{color:#7ee787}
.ps-name{font:700 12px "Galmuri11","Galmuri9",sans-serif;color:#f8f2e9;line-height:1.3}
/* 조각 매물(2026-10-08) — 펫 그림 왼쪽 아래에 조각표(가방의 펫 조각과 같은 그림), 오른쪽 아래에 수량.
좌상단은 '미보유' 배지 자리라 아래 두 귀퉁이만 쓴다. */
.ps-frag-icon{position:absolute;left:-2px;bottom:-2px;width:22px;height:22px;image-rendering:pixelated;
filter:drop-shadow(1px 1px 0 #110c09)}
.ps-frag-qty{position:absolute;right:-4px;bottom:-2px;padding:1px 4px;border:2px solid #110c09;background:#443123;
font:700 12px "Galmuri11","Galmuri9",sans-serif;color:#fff7df;line-height:1.1}
.ps-card.frag .ps-name{color:#f5ecde}
.ps-price{display:flex;align-items:center;justify-content:center;gap:3px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#ffe14d}
.ps-buy{
width:100%;margin-top:2px;padding:6px 4px;border:2px solid #110c09;background:#513d2f;
color:#fff7df;font:700 10px "Galmuri9","Galmuri11",sans-serif;cursor:pointer;touch-action:manipulation;
}
.ps-buy:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.6)}
/* 히든 카드는 정지 상태에서도 홀로그램으로 보여야 한다(색은 정적) */
.ps-card.t-hidden{
border-color:#8a3fbf;
background-image:linear-gradient(135deg,rgba(255,138,226,.28),rgba(124,77,255,.24),rgba(76,201,240,.24));
}
@keyframes petShopCardShine{to{background-position:200% 50%}}
@media (prefers-reduced-motion: no-preference){
.ps-card.t-hidden{background-size:200% 100%;animation:petShopCardShine 4s linear infinite}
}
/* ── 개인 펫 상점 — 공용과 나란히 뜨므로 **색으로 갈라야 한다** ────────────────
색 배정의 근거(바꾸려면 셋을 함께 볼 것):
· 공용 패널 = 무지개(적→보라) · 히든 카드 = 자홍 홀로그램(#ff8ae2/#8a3fbf)
· 개인 패널 = **청록**(#38e0c8 계열) — 위 둘 어디와도 겹치지 않는 유일한 축이다.
개인 상점에 자홍·보라를 쓰면 "히든이 떴다"로 읽힌다(그게 이 분리의 이유다). */
.pet-shop-panel.personal{
background-color:#132b2c;
background-image:linear-gradient(135deg,rgba(56,224,200,.22),rgba(76,201,240,.18),rgba(30,144,160,.24));
border-color:#0a1c1d;
}
/* 무드 배경(황금·전설)은 공용 전용이다 — 개인 패널까지 금색이 되면 분리가 무너진다. */
.pet-shop-panel.personal[data-mood="golden"],
.pet-shop-panel.personal[data-mood="mythic"]{
background-image:linear-gradient(135deg,rgba(56,224,200,.3),rgba(255,214,10,.16),rgba(30,144,160,.26));
border-color:#0a1c1d;
}
.pet-shop-panel.personal .ps-title{color:#dffbf5}
.pet-shop-panel.personal .ps-clock{color:#a9ece2}
.pet-shop-panel.personal .ps-desc b{color:#5ee6d0}
.ps-card.personal{border-color:#1d5f63;background:#14232a}
.ps-card.personal .ps-buy{background:#1f5f63}
/* 진열이 없을 때의 한 줄 상태 — '지금 열기'(보장 장치, 추후 방문권)가 여기 붙는다. */
.ps-personal-idle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:0;color:#cdeee8}
.ps-open{
padding:6px 12px;border:2px solid #0a1c1d;background:#2aa79a;
color:#04201d;font:700 12px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;touch-action:manipulation;
}
.ps-open:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.6)}
/* ── 컬렉션(도감·확률·뱃지·통계) ────────────────────────────
GHUB 게이미피케이션 화면을 옮겨온 읽기 전용 뷰. 값은 전부 서버(GHUB) 권위라
여기 스타일은 표시에만 관여한다. */
.col-note{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.7}
.col-note b{color:var(--ink)}
/* 하위 보기 여덟(도감 · 치장 · 확률 · 통계 · 퀘스트 · 조합 · 흡수 · 뽑기)은 **4열 두 줄**이다(2026-09-26).
3열이던 시절에는 3+3+2 로 마지막 줄에 빈칸이 남았다. 360px 에서도 칸이 75px 라 '✨ 치장 도감' 이 들어간다.
flex 로 두면 마지막 줄만 늘어나 칸 폭이 줄마다 달라지므로 grid 를 쓴다. */
.col-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.col-seg-btn{flex:1;font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;font-size:12px;padding:9px 2px;
color:var(--muted);background:var(--panel2);border:2px solid var(--line);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-seg-btn.active{color:var(--gold);border-color:var(--gold);background:var(--panel)}
/* 360px 급에서는 칸 안쪽이 70px 남짓이라 11px 로는 '✨ 치장 도감' 이 단어 중간('치장 도' / '감')에서 접혔다 — 한 단계 줄인다. */
@media(max-width:380px){.col-seg-btn{padding:9px 1px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;letter-spacing:-.3px}}
.col-view{display:flex;flex-direction:column;gap:9px}
.col-view.hidden{display:none}
.col-summary{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink);line-height:1.7;
background:var(--panel2);border:2px solid var(--line);padding:9px 10px}
.col-summary b{color:var(--gold)}
.col-filters{display:flex;flex-wrap:wrap;gap:4px}
.col-loading{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted);text-align:center;padding:18px 0}
.col-error{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:#f0907e;text-align:center;padding:14px 0;line-height:1.7}
/* 실패 안내 안의 다시 시도 — 여기 말고는 사용자가 재시도할 방법이 없다(탭 이동뿐). */
.col-retry{margin-top:9px;min-height:30px;padding:5px 14px;border:2px solid var(--line);background:var(--panel);color:var(--gold);font:700 10px/1 "Galmuri9","Galmuri11",sans-serif;cursor:pointer;touch-action:manipulation;box-shadow:inset -2px -2px 0 rgba(0,0,0,.35),0 3px 0 rgba(0,0,0,.4)}
.col-retry:hover{background:var(--panel2);color:#fff3d6}
.col-retry:active{transform:translateY(2px)}
/* 도감 — GHUB DexTab 구성(진행도 → 필터/정렬 → 그리드 → 상세 모달) */
.dex-progress{background:var(--panel2);border:2px solid var(--line);padding:9px 10px;display:flex;flex-direction:column;gap:6px}
.dex-progress-head{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink)}
.dex-progress-head strong{color:var(--gold);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
.dex-bar{height:8px;background:var(--bg);border:2px solid var(--line);overflow:hidden}
.dex-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-lo),var(--gold));transition:width .5s}
.dex-progress-note{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.dex-chips{display:flex;flex-wrap:wrap;gap:4px}
.dex-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);
border:2px solid var(--line);padding:2px 6px;background:var(--bg)}
.dex-chip i{width:6px;height:6px;display:inline-block;font-style:normal}
.dex-chip b{color:var(--ink)}
.dex-chip.done b{color:#7ee081}
.dex-controls{display:flex;flex-direction:column;gap:6px}
.dex-ctl-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dex-ctl-label{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);width:26px;flex-shrink:0}
.dex-select{font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;color:var(--ink);background:var(--panel2);
border:2px solid var(--line);padding:5px 6px}
.dex-sort-hint{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.dex-sort-hint.hidden{display:none}
/* 카드 = 정사각 버튼(스프라이트) + 아래 이름. 미보유는 흐리게 + '미보유' 배지(도감 전체 공개). */
.dex-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dex-cell{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
/* 색은 JS 가 인라인 **CSS 변수**로 준다(예전엔 background/border-color 를 직접 박았는데,
연출이 background 레이어를 써야 해서 인라인이 규칙을 이기면 안 된다). 변수가 없으면 기본 틀. */
.dex-card{position:relative;width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
background:var(--dex-tint,var(--panel2));border:2px solid var(--pet-bc,var(--line));
cursor:pointer;padding:0;overflow:visible}
.dex-card.locked{opacity:.6}
.dex-card:active{transform:translateY(1px)}
.dex-badge-lock{position:absolute;top:1px;left:1px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);
background:rgba(0,0,0,.55);padding:0 3px;line-height:1.5}
/* '별 MAX' — 같은 자리(미보유와 배타적)를 쓰되, 중립색 대신 별 색으로 눈에 띄게 한다. */
.ps-badge-starmax{color:var(--gold)}
.dex-badge-stat{position:absolute;bottom:1px;left:1px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#2a1d0c;background:var(--gold);
padding:0 3px;line-height:1.5}
/* 역할 라벨은 우하단을 쓰므로, 등급 도트는 우상단으로 분리한다. */
.dex-dot{position:absolute;top:3px;right:3px;bottom:auto;width:6px;height:6px;border-radius:50%}
.dex-name{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.25;text-align:center;width:100%;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.dex-name.owned{font-weight:700;color:var(--pet-lc,var(--muted))}
/* 상세 모달 — 카드 안쪽만 스크롤(닫기 버튼이 화면 밖으로 밀리지 않게) */
.dex-modal,.cg-sheet{position:fixed;inset:0;z-index:85;display:flex;align-items:center;justify-content:center;padding:12px;
background:rgba(0,0,0,.62)}
.dex-modal.hidden,.cg-sheet.hidden{display:none}
.dex-modal-card{width:100%;max-width:360px;max-height:calc(100vh - 24px);display:flex;flex-direction:column;
background:var(--panel);border:3px solid var(--line);box-shadow:6px 6px 0 var(--line);box-sizing:border-box}
.dex-modal-glow{height:3px;flex-shrink:0}
.dex-modal-body{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px}
.dex-modal-head{display:flex;align-items:center;gap:10px}
.dex-modal-sprite{width:72px;height:72px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
border:2px solid var(--line)}
.dex-modal-title{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;color:var(--ink);line-height:1.3}
.dex-modal-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.dex-tag{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;padding:1px 6px;border:2px solid var(--line);background:var(--panel2);color:var(--muted)}
.dex-tag.rarity{border-color:currentColor}
/* 펫 최대 레벨 배지 — 레벨 확장권으로 만렙을 넓힌 펫에만 붙는다(pet-level-cap.js). 강조가 목적이라 금색·굵게·빛.
던전 펫 상세(#petDetailDescription)와 치장 창 태그(.dex-tag)가 같은 규칙을 쓴다. */
.pet-lvcap{display:inline-flex;align-items:center;gap:3px;margin-left:2px;padding:1px 6px;vertical-align:middle;
font-weight:800;color:#ffd45f;background:rgba(255,196,64,.14);border:2px solid #e8a93a;white-space:nowrap;
box-shadow:0 0 8px rgba(255,200,80,.45);text-shadow:0 0 6px rgba(255,212,95,.6)}
.pet-lvcap em{font-style:normal;font-size:.85em;color:#fff3c4}
.dex-tag.pet-lvcap{margin-left:0;color:#ffd45f;background:#3a2a0c;border-color:#e8a93a}
/* 이름 앞 표식(🔓) — 샤이니 ✨ 처럼 목록·슬롯·상세 제목에 붙는다. 이름이 그라데이션 글자(.grad 는
color·text-fill 이 transparent)여도 표식은 제 색으로 보이게 채움을 되돌린다(안 되돌리면 표식이 사라진다). */
.pet-lvcap-mark{display:inline-block;margin-right:2px;font-style:normal;line-height:1;
color:initial;-webkit-text-fill-color:initial;filter:drop-shadow(0 0 3px rgba(255,212,95,.85))}
.dex-unlocked{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#7ee081;margin-top:4px}
.dex-sec{background:var(--panel2);border:2px solid var(--line);padding:8px 9px}
.dex-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px}
.dex-sec-head span{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);letter-spacing:.3px}
.dex-sec-head strong{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.dex-desc{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);line-height:1.8;font-style:italic}
.dex-stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.dex-stat{display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--bg);padding:4px 1px}
.dex-stat-l{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dex-stat-v{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink)}
.dex-note{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);margin-top:5px;line-height:1.6}
.dex-own-bar{height:7px;background:var(--bg);border:2px solid var(--line);overflow:hidden}
.dex-own-fill{height:100%;transition:width .6s}
.dex-own-meta{display:flex;justify-content:space-between;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);margin-top:4px}
.dex-owned-line{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;padding:7px}
.dex-modal-foot{flex-shrink:0;border-top:2px solid var(--line);padding:9px 12px calc(9px + env(safe-area-inset-bottom))}
.dex-close{width:100%;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;color:var(--muted);background:var(--panel2);
border:3px solid var(--line);padding:10px;cursor:pointer}
.dex-close:active{transform:translateY(2px)}
/* 스킬 카드 — GHUB SkillCard 와 같은 정보 배치(속성·역할·궁극기·배수·쿨다운·요약·설명).
탭하면 카드 안에 skill-preview.html iframe 이 펼쳐져 실제 배틀 이펙트를 재생한다. */
.skill-card{background:var(--bg);border:2px solid var(--line);padding:7px 8px;margin-bottom:5px;cursor:pointer}
.skill-card:last-of-type{margin-bottom:0}
.skill-card.ult{border-color:var(--gold)}
.skill-card.sult{border-color:#d946ef;box-shadow:0 0 0 1px #d946ef55 inset}
.skill-head{display:flex;align-items:flex-start;gap:7px}
.skill-el{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
.skill-main{flex:1;min-width:0}
.skill-title{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.skill-slot{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.skill-name{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink)}
.skill-ult{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#2a1d0c;background:var(--gold);padding:0 4px}
.skill-ult.sult{color:#fff;background:#d946ef}
.skill-role{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);border:1px solid var(--dirt-lo);padding:0 4px}
.skill-behavior{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.5;margin-top:2px}
.skill-num{flex-shrink:0;text-align:right}
.skill-mult{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
.skill-cd{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.skill-chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
.skill-chips span{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);background:var(--panel2);border:1px solid var(--dirt-lo);padding:1px 4px}
.skill-desc{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);line-height:1.7;margin-top:5px;opacity:.85}
.skill-fx-hint{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);margin-top:5px;opacity:.7}
.skill-fx{margin-top:6px}
.skill-fx iframe{display:block;width:100%;height:170px;border:2px solid var(--line);background:#05040a}
/* 확률 */
.prob-body{display:flex;flex-direction:column;gap:9px}
.prob-sec{background:var(--panel2);border:2px solid var(--line);padding:9px 10px}
.prob-sec h3{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold);margin-bottom:6px}
.prob-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);padding:4px 0;border-bottom:1px dashed var(--dirt-lo);line-height:1.5}
.prob-row:last-child{border-bottom:none}
.prob-row .pv{color:var(--gold);white-space:nowrap;flex-shrink:0}
.prob-group{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--gold);opacity:.85;padding:7px 0 2px;letter-spacing:.3px}
.prob-group:first-child{padding-top:0}
.prob-sub{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.6;margin-top:5px}
.ornament-filters{display:flex;flex-wrap:wrap;gap:5px}
.ornament-dex-body{display:flex;flex-direction:column;gap:9px}
.ornament-section{background:var(--panel2);border:2px solid var(--line);padding:8px}
.ornament-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 1px 7px}
.ornament-section-head span{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold)}
.ornament-section-head strong{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.ornament-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ornament-card{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:7px;align-items:center;
min-height:64px;padding:7px;border:1px solid var(--line);background:var(--bg);overflow:hidden}
.ornament-card.locked{opacity:.58;filter:saturate(.45)}
.ornament-card.owned{border-color:#8b7742;background:linear-gradient(135deg,var(--bg),#282315)}
.ornament-art{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line)}
.ornament-art svg,.ornament-art img{display:block;max-width:34px;max-height:34px;width:34px;height:34px;object-fit:contain}
.ornament-art-title{background:linear-gradient(135deg,#4b3526,#281d15)}
.ornament-title-art{font-size:18px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1}
.ornament-art-empty{color:var(--muted);font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif}
.ornament-card-title{grid-template-columns:minmax(0,1fr);align-items:start;min-height:76px}
/* 칭호를 작은 배지로 축약하지 않는다. 실제 장착에 쓰는 판/그림을 공용 nameplate 부품으로
받은 뒤, 도감 카드에서는 크기와 줄바꿈 자리만 맡는다. */
.ornament-title-preview{display:flex;align-items:center;min-width:0;min-height:25px;padding:2px 0;overflow:hidden}
.ornament-title-preview .np-plate{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.25;white-space:nowrap;text-overflow:ellipsis}
.ornament-title-preview .np-img{height:24px;max-width:100%;object-fit:contain}
.ornament-title-fallback{overflow:hidden;color:var(--ink);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.ornament-copy{display:flex;min-width:0;flex-direction:column;gap:2px}
.ornament-copy strong{overflow:hidden;color:var(--ink);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.ornament-copy small{display:-webkit-box;overflow:hidden;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.ornament-kind{color:var(--gold);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1}
.ornament-card>em{position:absolute;right:4px;bottom:3px;color:#83d99b;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-style:normal}
.ornament-card.locked>em{color:var(--muted)}
/* 펫 치장 카드는 눌러서 3D 미리보기(런웨이)를 연다 — 그 줄 아래 한 칸을 통째로 쓴다(game.js toggleOrnamentPreview).
아이폰은 SVG 를 눌러도 click 을 만들지 않는다 — 그림은 누름을 받지 않고 카드가 받는다. */
.ornament-card[data-cosmetic-slot]{cursor:pointer;padding-bottom:13px}
.ornament-card[data-cosmetic-slot]:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.ornament-card[aria-expanded="true"]{border-color:var(--gold);opacity:1;filter:none}
.ornament-play{position:absolute;right:4px;top:3px;color:var(--gold);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-style:normal;pointer-events:none}
.ornament-art{position:relative;overflow:hidden}
.ornament-art svg,.ornament-art .ornament-mote{pointer-events:none}
/* 오라 스킨 카드 — 광산 자국과 같은 색 조각이 피어오른다. 모션 감소는 끄지 않고 느리게(치장 연출 규칙) · 절전은 멈춘다. */
.ornament-mote{position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--mote);
opacity:0;animation:ornament-mote 1.7s ease-out infinite;animation-delay:var(--delay)}
@keyframes ornament-mote{0%{transform:translate(var(--x0),0) scale(1);opacity:.95}
100%{transform:translate(calc(var(--x0) * -0.4),var(--rise)) scale(.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.ornament-mote{animation-duration:3.4s}}
body.power-save .ornament-mote{animation:none!important}
.ornament-preview{grid-column:1/-1;display:flex;flex-direction:column;gap:5px;padding:6px;border:1px solid #8b7742;background:var(--panel)}
.ornament-preview-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ornament-preview-head strong{color:var(--ink);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.ornament-preview-close{font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;padding:3px 9px;cursor:pointer;border:2px solid var(--line);background:var(--bg);color:var(--ink)}
.ornament-preview-note{margin:0;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5}
/* 통계 — 능력치 랭킹(표, 순위·닉네임·펫) + 반짝 쇼케이스(순위·닉네임·펫 리스트).
표는 열이 많아 좁은 화면에서 가로 스크롤한다(칸을 줄이면 숫자가 뭉개진다). */
.stats-body{display:flex;flex-direction:column;gap:10px}
.stats-sec{background:var(--panel2);border:2px solid var(--line);padding:9px 10px}
.stats-sec h3{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold);margin-bottom:6px}
/* 능력치 랭킹 등급 탭 — 전체+5등급 6개가 좁은 화면에서도 한두 줄에 들어가게 도감 칩보다 촘촘히.
활성 칩의 색은 인라인(등급색)으로 덮으므로 여기서는 크기만 정한다. */
.rk-tabs{margin-bottom:2px}
.rk-tabs .chip{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;padding:4px 7px}
.rk-wrap{overflow-x:auto;margin-top:6px}
.rk-table{width:100%;border-collapse:collapse;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;white-space:nowrap}
.rk-table th{padding:4px 3px;text-align:center;font-weight:normal;color:var(--muted);
border-bottom:2px solid var(--line)}
.rk-table th.rk-sort{cursor:pointer}
.rk-table th.rk-sort.on{color:var(--gold)}
.rk-table th.rk-th-pet{text-align:left}
.rk-table th.rk-th-name{text-align:left}
.rk-table td{padding:7px 3px;text-align:center;color:var(--ink);border-bottom:1px dashed var(--dirt-lo)}
.rk-table tr:last-child td{border-bottom:none}
.rk-table tr.shiny{background:rgba(251,191,36,.10)}
.rk-no{color:var(--muted)}
.rk-name{text-align:left!important}
.rk-name-txt{display:inline-block;vertical-align:middle;max-width:64px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.rk-pet{text-align:left!important}
.rk-sprite{display:inline-block;vertical-align:middle;width:22px;height:22px}
.rk-pname{display:inline-block;vertical-align:middle;max-width:92px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.rk-shiny{color:var(--gold)}
.rk-rarity{display:inline-block;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;padding:1px 4px}
.rk-num i{font-style:normal;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);margin-left:1px}
.rk-num.on{color:var(--gold)}
.rk-total{color:#7ee081}
.rk-star{color:var(--gold)}
/* 반짝 쇼케이스 — 순위 / 닉네임 / ✨보유수 / 작은 펫들. 닉네임 미설정자는 '익명 #N'. */
.sh-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--bg);
border:2px solid var(--line);padding:6px;margin-bottom:5px}
.sh-row:last-child{margin-bottom:0}
.sh-no{flex-shrink:0;width:16px;text-align:center;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--gold)}
.sh-name{flex:1 1 auto;min-width:0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-count{flex-shrink:0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#2a1d0c;background:var(--gold);padding:1px 5px}
/* 펫 줄은 **다음 줄로** 내린다 — 한 줄에 몰면 닉네임이 긴 사람의 이름과 ✨배지를 펫이 덮는다
(실측: '부엉이가부엉부엉' 행에서 이름이 가려짐). overflow 를 숨기지 않는 이유는 오라(몸통의
150%)가 잘리기 때문. */
.sh-pets{flex-basis:100%;display:flex;align-items:center;justify-content:flex-start;
gap:6px;margin-top:5px;overflow:visible}
.sh-pet{flex-shrink:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
border:2px solid var(--line);background:var(--panel2)}
.sh-more{flex-shrink:0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
/* 컬렉션 셸 — 하단 모드 내비에 가리지 않도록 아래 여백을 둔다(상점 셸과 같은 규칙). */
.collection-shell{padding:12px 12px calc(var(--mode-nav-height,54px) + 24px);min-height:100vh;min-height:100dvh}
.collection-shell .col-view{gap:9px}
/* 퀘스트 — 진행도는 GHUB 활동으로 오르고 여기서는 수령만 한다. */
.quest-body{display:flex;flex-direction:column;gap:6px}
.quest-row{background:var(--panel2);border:2px solid var(--line);padding:8px 9px;
display:flex;flex-direction:column;gap:5px}
.quest-row.ready{border-color:var(--gold)}
.quest-row.claimed{opacity:.55}
.quest-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.quest-type{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);border:1px solid var(--dirt-lo);padding:1px 4px;flex-shrink:0}
.quest-title{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink);flex:1;min-width:0}
.quest-reward{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--gold);flex-shrink:0}
.quest-desc{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.6}
.quest-foot{display:flex;align-items:center;gap:7px}
.quest-bar{flex:1;height:6px;background:var(--bg);border:2px solid var(--line);overflow:hidden}
.quest-bar i{display:block;height:100%;background:var(--gold);transition:width .4s}
.quest-count{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);flex-shrink:0}
.quest-claim{font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;color:#2a1d0c;background:var(--gold);
border:2px solid var(--line);padding:4px 9px;cursor:pointer;flex-shrink:0}
.quest-claim:active{transform:translateY(1px)}
.quest-claim:disabled{opacity:.6;cursor:not-allowed}
/* 요약 줄 안의 일괄 수령 — 줄 높이를 늘리지 않게 낱개 '받기'보다 한 치수 작다. */
.quest-claim-all{margin-left:6px;font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;color:#2a1d0c;
background:var(--gold);border:2px solid var(--line);padding:3px 8px;cursor:pointer;
touch-action:manipulation}
.quest-claim-all:active{transform:translateY(1px)}
.quest-claim-all:disabled{opacity:.6;cursor:not-allowed}
/* 지난 기간에 깨 놓고 못 받은 몫 — 오늘 몫과 섞이면 "왜 두 번 뜨지"가 된다. */
.quest-row.backlog{border-left:4px solid var(--gold)}
.quest-type.past{color:#2a1d0c;background:var(--gold);border-color:var(--gold)}
.quest-backlog-note{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.6;
padding:7px 9px;border:2px dashed var(--line);background:var(--panel)}
.quest-backlog-note b{color:var(--gold)}
.quest-done{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#7ee081;flex-shrink:0}
.quest-wait{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);flex-shrink:0}
/* 펫 꾸미기 — 카드 그림이 진입점이라 연필 힌트를 작게 얹는다. */
.pet-card-art{position:relative}
.pet-dress-hint{position:absolute;right:0;bottom:0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;opacity:.55;pointer-events:none}
/* 꾸미기 창 — 치장을 **그림 아이템**으로 고른다(2026-08-28).
예전엔 이름만 적힌 글자 버튼이라 무엇을 고르는지 알 수 없었고, 펫 미리보기가 56px 이라
모자를 씌워도 바뀐 게 보이지 않았다. 미리보기를 키우고 타일을 아이콘으로 바꾼다. */
#dressModal .dex-modal-card{max-width:400px}
/* --dress-w — 미리보기와 전광판이 **같은 폭**이어야 한다(한쪽만 바꾸면 전광판이 미리보기보다 좁거나 넓어진다). */
.dress-head{--dress-w:184px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.dress-preview{width:var(--dress-w,184px);height:var(--dress-w,184px);box-sizing:border-box;display:flex;align-items:center;
justify-content:center;border:2px solid var(--line);background:var(--bg)}
.dress-worn{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.7}
.dress-worn b{color:var(--ink)}
/* 걷기 미리보기(런웨이) — 게임이 서빙하는 3D 페이지를 끼운다(game.js syncDressRunway).
꾸미기 본문 **밖**(형제)이라 치장을 바꿔 본문을 다시 그려도 3D 가 처음부터 다시 뜨지 않는다. */
.dress-runway-btn{margin-top:2px;font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;padding:5px 10px;cursor:pointer;
border:2px solid var(--line);background:var(--panel);color:var(--ink)}
.dress-runway-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.dress-runway{margin:8px 12px 0}
.cosmetic-preview-frame{display:block;width:100%;height:220px;box-sizing:border-box;border:2px solid var(--line);background:#1e150f}
/* 치장 획득권 창 — 캡슐 틀 위에 3D 무대 한 칸(오라 스킨일 때만 채워진다). */
.cosmetic-grant-stage{width:100%;margin:6px 0 2px}
.cosmetic-grant-stage:empty{display:none}
#cosmeticGrantModal[data-phase="result"] #cosmeticGrantCancel,
#cosmeticGrantModal[data-phase="result"] .cosmetic-grant-stage{display:none}
#cosmeticGrantModal[data-phase="result"] .capsule-actions{grid-template-columns:1fr}
#cosmeticGrantModal[data-phase="confirm"] .reveal-burst{display:none}
.dress-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dress-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:inherit;
background:var(--bg);border:2px solid var(--line);padding:6px 3px 5px;cursor:pointer}
.dress-opt-art{width:100%;height:40px;display:flex;align-items:center;justify-content:center}
.dress-opt-img{width:100%;height:100%;display:block}
.dress-opt-off{font-size:17px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted);line-height:1}
.dress-opt.on{border-color:var(--gold);background:var(--panel)}
.dress-opt.on .dress-opt-name{color:var(--gold)}
.dress-opt.out{opacity:.38;cursor:not-allowed}
.dress-opt.busy{opacity:.55;cursor:progress}
.dress-opt-name{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:100%}
.dress-opt-qty{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.dress-opt-badge{position:absolute;top:-2px;right:-2px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;padding:2px 3px;
background:var(--gold);color:var(--bg);border:2px solid var(--line)}
.dress-empty{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);line-height:1.7;padding:6px 2px}
/* 메인 펫 고르기 — 치장 격자와 같은 골격(같은 행위는 같게 보여야 한다).
다만 칸마다 펫 그림이 들어가 4열은 너무 좁다 → 3열. */
#mainPetModal .dex-modal-glow{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.mainpet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-content:start;
max-height:min(58vh,520px);overflow-y:auto;overscroll-behavior:contain}
.pet-picker-spacer{grid-column:1/-1;min-width:0;pointer-events:none}
.mainpet-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
font-family:inherit;background:var(--bg);border:2px solid var(--line);padding:7px 3px 6px;
cursor:pointer;touch-action:manipulation}
.mainpet-opt-art{height:46px;display:flex;align-items:center;justify-content:center}
.mainpet-opt-name{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:100%}
.mainpet-opt-lv{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.mainpet-opt.on{border-color:var(--gold);background:var(--panel)}
.mainpet-opt.on .mainpet-opt-name{color:var(--gold)}
.mainpet-opt.busy{opacity:.55;cursor:progress}
.mainpet-opt-badge{position:absolute;top:-2px;right:-2px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;padding:2px 3px;
background:var(--gold);color:var(--bg);border:2px solid var(--line)}
/* 전투 역할 — 도감 카드는 아이콘만(자리가 없다), 모달·편성은 라벨까지. */
/* 역할 라벨 — 카드 왼쪽은 '미보유'(좌상)와 능력치(좌하)가 이미 쓰고 있어 **우하단**에 둔다.
색은 던전 화면과 같은 `.role-*`(아래) 를 얹는다. */
.dex-badge-role{position:absolute;right:4px;bottom:4px;padding:1px 3px;border:1px solid #644d3c;
background:#33271e;color:#dbc9ae;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.4;pointer-events:none}
.dex-tag.role{background:#33271e}
/* 던전 `.role-*` 와 같은 값 — 도감에서도 탱커는 파랑, 근접은 빨강이어야 한다. */
.role-tank{border-color:#6f9ec7;color:#a9d8ff}
.role-ranged{border-color:#62a77f;color:#a7e7bd}
.role-aoe{border-color:#a06dc2;color:#dcb4f5}
.role-support{border-color:#c1a35e;color:#ffe09a}
.role-melee{border-color:#b46868;color:#f2aaaa}
.role-healer{border-color:#c77fa8;color:#f7bcd9}
/* 사내 접속 안내 — 게임을 **통째로 덮는다**. 배경을 반투명으로 두면 뒤가 비쳐 "가렸다"는
뜻이 흐려지므로 불투명하게 칠한다. */
.return-overlay{position:fixed;z-index:300;inset:0;display:grid;place-items:center;
padding:24px;background:var(--bg)}
.return-card{width:min(100%,320px);padding:26px 20px;background:var(--panel);
border:3px solid var(--gold);box-shadow:0 10px 34px rgba(0,0,0,.55);text-align:center}
.return-icon{font-size:34px;line-height:1}
.return-card h2{margin:14px 0 0;color:var(--gold);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.6}
.return-card p{margin:12px 0 0;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.9}
.return-card button{width:100%;margin-top:20px;padding:11px;border:2px solid var(--gold);
background:var(--gold);color:#2a1d0c;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;font-weight:700;
cursor:pointer;touch-action:manipulation}
.return-card button:hover{background:transparent;color:var(--gold)}
/* 뒤 화면이 스크롤되면 덮개 아래에서 게임이 움직이는 게 느껴진다 — 잠근다. */
body.has-return-overlay{overflow:hidden}
/* 홈 화면 추가 안내 — **상단 토스트**(화면 위에 떠 있다가 스스로 사라진다).
예전에는 헤더 바로 아래 흐름 안에 끼워 넣었는데, 안내가 자리를 차지해 게임 화면이 그만큼
아래로 밀렸고 방치게임 헤더에 붙어 있어 던전·상점에서는 보이지도 않았다. fixed 로 띄우면
레이아웃을 전혀 밀지 않고 어느 모드에서 떠도 자리가 같다(위쪽이라 하단 내비와도 무관).
z-index 는 화면을 덮는 안내창(.ios-steps 310 · .notify-gate 320)보다 **아래**여야 한다 —
그 창들이 뜬 동안 토스트가 위에 남으면 카드 제목을 가린다. */
.install-toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 8px);z-index:300;
width:min(92vw,420px);display:flex;align-items:center;gap:10px;padding:9px 10px;
background:var(--panel2);border:2px solid var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.45);
transform:translate(-50%,calc(-100% - 24px));opacity:0;
transition:transform .3s cubic-bezier(.2,.9,.3,1),opacity .3s ease}
.install-toast.show{transform:translate(-50%,0);opacity:1}
.install-toast img{flex:none;width:38px;height:38px;display:block}
.install-toast .ic-text{flex:1;min-width:0}
.install-toast strong{display:block;color:var(--gold);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5}
.install-toast span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5}
.install-toast button{flex:none;font-family:inherit;cursor:pointer;touch-action:manipulation}
.install-toast .ic-go{padding:8px 10px;border:2px solid var(--gold);background:var(--gold);
color:#2a1d0c;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-weight:700}
.install-toast .ic-no{width:26px;padding:6px 0;border:2px solid var(--line);
background:transparent;color:var(--muted);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1}
@media (prefers-reduced-motion:reduce){.install-toast{transition:opacity .3s ease}}
/* 알림 종류 목록 · 카드 하단 안내문 (⚙️ 설정 모달 안)
카드 껍데기는 설정 화면 공용 `.gs-card` 를 쓴다 — 전용 `.push-card`/`.push-head`/
`.push-title`/`.push-actions` 는 2026-08-26 한 줄 스위치로 바꾸면서 사라졌다.
⚠️ 아래 둘은 `.gs-card`(flex column·gap 8px) 안에만 들어간다 — 그래서 자체 margin 이
없다. 다른 곳에 옮겨 쓰면 위아래가 붙는다. */
.push-prefs{display:flex;flex-direction:column;gap:1px}
/* 종류별 토글 — 라벨 전체가 누를 자리다(체크박스만 노리면 손가락으로 못 맞춘다). */
.push-prefs label{display:flex;align-items:center;gap:9px;padding:9px 8px;
background:var(--panel);color:var(--ink);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5;cursor:pointer}
.push-prefs input{flex:none;width:17px;height:17px;accent-color:var(--gold);margin:0}
.push-note{padding:9px;background:var(--panel);
color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.8}
/* 설치 직후 알림 안내 — 켜는 쪽이 기본이고 거절은 직접 누르게 한다.
'나중에' 같은 미루기 버튼을 일부러 안 뒀다. 미루기가 있으면 매번 미루다 영영 안 켜고,
그 사이 같은 창이 실행할 때마다 떠서 오히려 더 성가시다. */
.notify-gate{position:fixed;z-index:320;inset:0;display:grid;place-items:center;padding:22px;
background:rgba(10,7,5,.86)}
/* 목록이 6줄이라 작은 화면에서 넘칠 수 있다 — 카드 안에서 스크롤시킨다(화면이 밀리면 안 된다). */
.ng-card{width:min(100%,320px);max-height:100%;overflow-y:auto;padding:26px 20px;
background:var(--panel);border:3px solid var(--gold);
box-shadow:0 10px 34px rgba(0,0,0,.55);text-align:center}
.ng-icon{font-size:34px;line-height:1}
.ng-card h2{margin:14px 0 0;color:var(--gold);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.6}
.ng-card p{margin:12px 0 0;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.9}
.ng-lead{margin:10px 0 0}
/* 종류 목록 — 문구는 서버(push.KINDS)가 준다. 아이콘 열을 고정폭으로 잡아 글머리가 맞는다. */
.ng-list{display:flex;flex-direction:column;gap:1px;margin:12px 0 0;padding:0;list-style:none;
text-align:left}
.ng-list li{display:flex;align-items:center;gap:9px;padding:8px 10px;background:var(--panel2)}
.ng-list i{flex:none;width:18px;font-style:normal;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;text-align:center}
.ng-list span{min-width:0;color:var(--ink);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5}
.ng-hint{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.ng-ok{margin-top:18px;padding:12px;border:2px solid var(--gold);background:var(--gold);
color:#2a1d0c;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;font-weight:700}
.ng-card button{width:100%;font-family:inherit;cursor:pointer;touch-action:manipulation}
.ng-yes{margin-top:20px;padding:12px;border:2px solid var(--gold);background:var(--gold);
color:#2a1d0c;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;font-weight:700}
.ng-yes:disabled{opacity:.6}
/* 거절은 있되 눈에 덜 띄게 — 기본값이 '켜기'라는 걸 형태로도 말한다.
다만 **누르기 어려울 만큼 작게 만들지는 않는다**(약 41px). 거절을 방해하는 건 다크 패턴이고,
빗나간 탭은 결국 원치 않는 허용으로 이어진다. 차이는 색·테두리·글자 크기로만 준다. */
.ng-no{margin-top:8px;padding:11px;border:2px solid var(--line);background:transparent;
color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
/* iOS 전용 3단계 안내 — 사파리는 설치를 코드로 못 부르니 손으로 할 일을 그 자리에 띄운다. */
.ios-steps{position:fixed;z-index:310;inset:0;display:grid;place-items:center;padding:20px;
background:rgba(10,7,5,.82)}
.is-card{width:min(100%,320px);max-height:100%;overflow-y:auto;padding:20px;
background:var(--panel);border:3px solid var(--gold);box-shadow:0 10px 34px rgba(0,0,0,.55)}
.is-card h2{margin:0;color:var(--gold);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.6}
.is-card ol{margin:14px 0 0;padding-left:18px;color:var(--ink);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:2}
.is-card li+li{margin-top:9px}
.is-card li b{color:var(--gold)}
.is-card small{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.is-note{margin:14px 0 0;padding:9px;background:var(--panel2);
color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.8}
.is-card button{width:100%;margin-top:16px;padding:11px;border:2px solid var(--gold);
background:var(--gold);color:#2a1d0c;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;font-weight:700;
cursor:pointer;touch-action:manipulation}
/* ── 조합 탭 ────────────────────────────────────────────────────────────────
재료는 **되돌릴 수 없이** 사라진다. 그래서 화면 위쪽에 고른 재료를 항상 띄워 두고
(스크롤로 사라지지 않게), 실행 버튼은 미리보기를 받은 뒤에만 살린다. */
.craft-guide{margin-top:12px;padding:10px;background:var(--panel2);border:2px solid var(--line)}
.craft-guide-head{display:flex;align-items:flex-start;gap:8px}
.craft-guide-head>div{min-width:0;flex:1}
.craft-guide h3{margin:0;color:var(--gold);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.5}
.craft-guide-count{margin:3px 0 0;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.55}
.craft-guide-count b{color:var(--ink)}
.craft-guide-toggle{flex:none;padding:7px 8px;border:1px solid var(--line);background:var(--panel);
color:var(--gold);font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;cursor:pointer;touch-action:manipulation}
.craft-guide-toggle span{display:inline-block;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.craft-guide-toggle[aria-expanded="true"] span{transform:translateY(-1px)}
.craft-guide-tools{display:flex;gap:5px;margin-top:9px}
.craft-guide-tools input,.craft-guide-tools select{min-width:0;padding:7px;border:1px solid var(--line);
background:var(--panel);color:var(--ink);font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px}
.craft-guide-tools input{flex:1}
.craft-guide-tools select{max-width:112px}
/* 스크롤 색·두께·픽셀 트랙은 dungeon.css 공통 .dq-scroll이 담당한다. */
.craft-guide-list{display:flex;flex-direction:column;gap:5px;max-height:min(60vh,520px);margin-top:8px;overflow-y:auto;
overscroll-behavior:contain;padding-right:2px}
.craft-guide-row{padding:7px;background:var(--panel);border:1px solid var(--line)}
.craft-guide-row.can-craft{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(242,193,78,.24)}
.craft-guide-row.is-hidden{border-style:dashed}
.craft-guide-recipe{display:flex;flex-wrap:wrap;align-items:center;gap:4px;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5}
.craft-guide-chip{display:inline-flex;align-items:center;gap:3px;min-height:27px;padding:2px 5px;
border:1px solid color-mix(in srgb,var(--guide-border,var(--guide-color)) 60%,transparent);
background:color-mix(in srgb,var(--guide-color) 14%,transparent);color:var(--guide-color);white-space:nowrap}
.craft-guide-chip .pet-img{display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.craft-guide-chip.mystery{justify-content:center;min-width:23px;border-color:color-mix(in srgb,var(--guide-color) 60%,transparent);
font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;font-weight:700}
.craft-guide-chip.mystery span{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-weight:400}
.craft-guide-chip b{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.craft-guide-plus,.craft-guide-arrow{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.craft-guide-arrow{margin:0 1px;color:var(--gold)}
.craft-guide-badge{padding:2px 4px;background:var(--line);color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;white-space:nowrap}
.craft-guide-badge.found{background:#1e4a39;color:#bff3d6}
.craft-guide-fill{width:100%;margin-top:6px;padding:7px;border:1px solid var(--gold);background:rgba(242,193,78,.12);
color:var(--gold);font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;font-weight:700;cursor:pointer;touch-action:manipulation}
.craft-guide-fill:active{transform:scale(.99)}
.craft-guide-reason{margin:5px 0 0;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5}
.craft-guide-empty{padding:13px 8px;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;text-align:center}
.craft-guide-empty button{display:block;margin:7px auto 0;padding:6px 8px;border:1px solid var(--gold);
background:transparent;color:var(--gold);font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;cursor:pointer}
/* ── 공략집 필터 · 크게 보기 (2026-09-16) ─────────────────────────────────
칩은 도감 필터와 **같은 부품**(.col-filters + .chip)이다 — 같은 일을 하는 두 화면이
다르게 생기면 같은 기능인 줄 모른다. 공략집 칸이 좁아 글자·여백만 줄여 쓴다. */
.craft-guide-filters,.craft-pool-filters{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.cg-filter-row{display:flex;align-items:center;gap:5px}
/* 칸이 없는 줄은 줄째 숨긴다 — display:flex 가 [hidden] 의 display:none 을 이기므로 따로 얹는다. */
.cg-filter-row[hidden]{display:none}
.cg-filter-label{flex:none;width:24px;color:var(--muted);font-size:8px;font-family:"Galmuri7","Galmuri9",sans-serif}
.craft-guide-filters .col-filters,.craft-pool-filters .col-filters{flex:1;min-width:0}
.craft-guide-filters .chip,.craft-pool-filters .chip{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;padding:4px 7px;border-width:1px}
.craft-guide-expand{flex:none;padding:7px 9px;border:1px solid var(--line);background:var(--panel);
color:var(--gold);font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;line-height:1;cursor:pointer;touch-action:manipulation}
/* 크게 보기 — 도감 상세와 같은 골격(.dex-modal 계열 여백·테두리·닫기)을 쓴다.
⚠ 안쪽은 #craftGuideBody 를 **옮겨 온** 것이라, 목록의 max-height 를 여기서 풀어
시트 높이를 다 쓰게 한다(인라인일 때의 60vh 는 그대로 둔다). */
.cg-sheet-card{width:100%;max-width:460px;max-height:calc(100vh - 24px);display:flex;flex-direction:column;
background:var(--panel2);border:3px solid var(--line);box-shadow:6px 6px 0 var(--line);box-sizing:border-box}
.cg-sheet-slot{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 12px}
/* 슬롯에는 머리말과 본문 둘이 들어온다 — 늘어나는 건 본문뿐이다. */
.cg-sheet-slot>#craftGuideBody{flex:1;min-height:0;display:flex;flex-direction:column}
.cg-sheet .craft-guide-list{flex:1;min-height:0;max-height:none}
/* 점진 렌더 꼬리 — 목록은 한 묶음씩 그리고 스크롤이 끝에 닿으면 이어 그린다.
⚠ content-visibility 로는 못 한다: .pet-aura 가 칩 밖으로 넘쳐 그려지는데 paint
컨테인먼트가 그걸 잘라 오라 모양이 바뀐다(game.js '오프스크린 오라 SMIL 정지' 절). */
.cg-more{flex:none;padding:7px;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;text-align:center}
/* ── 조합 아이템(촉매) 칸 ─────────────────────────────────────────────────
펫 칸과 같은 언어를 쓰되 **테두리 색을 달리해** 두 축이 섞여 보이지 않게 한다
(펫=금색, 아이템=청록). 칸은 4개라 한 줄이지만 좁은 화면을 위해 2행으로 접힌다. */
.craft-catalysts{margin-top:11px;padding:9px 8px;background:var(--panel2);border:2px solid var(--line)}
.craft-cat-head{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.craft-cat-head h4{margin:0;color:#6fe3d8;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.craft-cat-note{margin:0;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5}
.craft-item-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.craft-item-slot{position:relative;display:grid;place-items:center;gap:2px;min-height:56px;
padding:5px 3px;background:var(--panel);border:2px solid var(--line)}
.craft-item-slot.filled{border-color:#6fe3d8;cursor:pointer}
.craft-item-slot.empty{border-style:dashed;color:var(--muted);font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif}
.craft-item-slot img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.craft-item-slot .ci-glyph{font-size:18px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1}
.craft-item-slot .cs-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
color:var(--ink);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.4}
.craft-item-slot .cs-x{position:absolute;top:1px;right:3px;color:#6fe3d8;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.craft-item-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:5px;margin-top:7px}
.craft-item-cell{display:grid;place-items:center;gap:2px;padding:6px 3px;
background:var(--panel);border:2px solid var(--line);color:var(--ink);cursor:pointer}
.craft-item-cell:hover:not(.disabled){border-color:#6fe3d8}
.craft-item-cell.disabled{opacity:.4;cursor:not-allowed}
.craft-item-cell img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.craft-item-cell .ci-glyph{font-size:17px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1}
.craft-item-cell .ci-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.4}
.craft-item-cell .ci-left{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.craft-item-cell .ci-bonus{color:#6fe3d8;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-style:normal}
/* 재료 8칸. **열은 4로 두고 줄바꿈에 맡긴다** — 2행 4열이 된다.
8열로 펴면 375px 화면에서 칸 하나가 43px 라 이름·레벨이 통째로 잘린다. */
.craft-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:10px}
.craft-slot{position:relative;display:grid;place-items:center;gap:2px;min-height:74px;
padding:5px 3px;background:var(--panel2);border:2px solid var(--line)}
.craft-slot.filled{border-color:var(--gold);cursor:pointer}
.craft-slot.empty{border-style:dashed;color:var(--muted);font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif}
.craft-slot .cs-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
color:var(--ink);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.4}
.craft-slot .cs-lv{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.3}
.craft-slot .cs-x{position:absolute;top:1px;right:3px;color:var(--gold);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.craft-preview{margin-top:11px;padding:10px;background:var(--panel2);border:2px solid var(--line)}
.craft-preview h4{margin:0 0 7px;color:var(--gold);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.craft-odds{display:flex;flex-direction:column;gap:4px}
.craft-odd{display:flex;align-items:center;gap:6px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5}
.craft-odd i{flex:none;width:9px;height:9px;font-style:normal}
.craft-odd b{flex:none;min-width:44px;color:var(--ink);text-align:right;
font-variant-numeric:tabular-nums}
.craft-odd span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
color:var(--muted)}
.craft-xp{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.8}
.craft-xp b{color:var(--ink)}
.craft-warn{margin-top:8px;padding:7px;background:#3a2418;border:1px solid var(--gold);
color:#ffe6bd;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7}
.craft-actions{margin-top:11px}
.craft-xfer{display:flex;align-items:center;gap:7px;margin-bottom:8px;
color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;cursor:pointer}
.craft-xfer input{flex:none;width:15px;height:15px;accent-color:var(--gold)}
.craft-go{width:100%;padding:12px;border:2px solid var(--gold);background:var(--gold);
color:#2a1d0c;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;font-weight:700;cursor:pointer;
touch-action:manipulation}
.craft-go:disabled{background:transparent;border-color:var(--line);color:var(--muted);
cursor:not-allowed}
.craft-h3{margin:16px 0 7px;color:var(--gold);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
.craft-h3-sub{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-weight:400}
.craft-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:5px}
/* 빈 상태 안내는 **줄 전체**를 쓴다 — 격자 자식이라 그냥 두면 64px 한 칸에 갇혀
"이 축으로 태울 / 수 있는 펫이 없 / 어요." 처럼 세로로 깨진다(조합·흡수 공통). */
.craft-pool > .col-note{grid-column:1/-1}
.craft-cell{display:grid;place-items:center;gap:2px;padding:6px 3px;background:var(--panel2);
border:2px solid var(--line);cursor:pointer;touch-action:manipulation}
.craft-cell.picked{border-color:var(--gold);background:var(--panel)}
.craft-cell.disabled{opacity:.4;cursor:not-allowed}
.craft-cell .cc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
color:var(--ink);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.4}
.craft-cell .cc-meta{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.3}
/* ── 뽑기 탭 ────────────────────────────────────────────────────────────────
쓰는 화폐가 상점(유물 조각)과 다르다 — 잔액을 맨 위에 크게 둬서 "무엇을 쓰는지"를
버튼보다 먼저 읽게 한다. */
.gacha-head{display:flex;align-items:baseline;gap:7px;margin-top:10px;padding:11px 12px;
background:var(--panel2);border:2px solid var(--gold)}
.gacha-p-label{flex:1;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.gacha-p{color:var(--gold);font-size:17px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1;font-variant-numeric:tabular-nums}
.gacha-p-unit{color:var(--gold);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
/* 메인 펫 — 먹이 경험치를 받는 펫. 잔액 카드와 뽑기 버튼 **사이**에 둔다:
"무엇을 쓰는가" 다음에 "무엇이 받는가"를 읽고 나서 버튼을 누르게 하는 순서다. */
.gacha-mainpet{display:flex;align-items:center;gap:9px;margin-top:8px;padding:9px 10px;
background:var(--panel2);border:2px solid var(--line)}
.gmp-art{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
background:var(--bg);border:2px solid var(--line)}
.gmp-art .pet-img{width:100%;height:100%}
.gmp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gmp-label{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;letter-spacing:.04em}
.gmp-name{color:var(--ink);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gmp-name.none{color:var(--muted)}
.gmp-hint{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5}
.gmp-btn{flex:none;font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;color:var(--gold);background:transparent;
border:2px solid var(--gold);padding:7px 10px;cursor:pointer;touch-action:manipulation}
.gmp-btn:disabled{color:var(--muted);border-color:var(--line);cursor:not-allowed}
.gmp-btn:active:not(:disabled){transform:translateY(2px)}
.gacha-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:11px}
.gacha-btn{display:grid;gap:3px;padding:13px 6px;border:2px solid var(--gold);
background:transparent;color:var(--gold);font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;font-weight:700;
cursor:pointer;touch-action:manipulation}
.gacha-btn span{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-weight:400}
.gacha-btn.ten{background:var(--gold);color:#2a1d0c}
.gacha-btn.ten span{color:#5c4415}
/* 100연차는 2열 그리드에서 한 줄을 통째로 쓴다 — 3열로 쪼개면 세로 화면에서 글자가 깨진다. */
.gacha-btn.hundred{grid-column:1/-1;border-color:var(--epic);background:var(--epic);color:#1b1030}
.gacha-btn.hundred span{color:#3d2560}
.gacha-btn.thousand{grid-column:1/-1;border-color:var(--leg);background:linear-gradient(90deg,var(--epic),var(--leg));color:#1b1030}
.gacha-btn.thousand span{color:#3d2560}
.gacha-btn:disabled{border-color:var(--line);background:transparent;color:var(--muted);
cursor:not-allowed}
.gacha-btn:disabled span{color:var(--muted)}
.gacha-result{margin-top:12px;padding:11px;background:var(--panel2);border:2px solid var(--gold)}
.gacha-result h4{margin:0 0 8px;color:var(--gold);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.gacha-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:5px}
.gacha-item{display:grid;place-items:center;gap:2px;padding:6px 3px;background:var(--panel);
border:2px solid var(--line)}
.gacha-item .gi-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
color:var(--ink);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.4}
.gacha-item .gi-tag{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.3}
/* 같은 결과를 한 칸으로 묶은 수량(×N) — 먹이 100개가 아이콘 100개로 뜨지 않게 */
.gacha-item,.fx-cell{position:relative}
.gacha-item .gi-count,.fx-cell .fc-count{position:absolute;top:2px;right:2px;padding:0 3px;background:var(--panel);
border:1px solid var(--gold);color:var(--gold);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.35;font-variant-numeric:tabular-nums}
.gacha-emoji{font-size:24px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.1}
.gacha-rates{display:flex;flex-direction:column;gap:4px}
.gacha-rate{display:flex;align-items:center;gap:6px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5}
.gacha-rate i{flex:none;width:9px;height:9px;font-style:normal}
.gacha-rate b{flex:none;min-width:42px;color:var(--ink);text-align:right;
font-variant-numeric:tabular-nums}
.gacha-rate span{flex:1;min-width:0;color:var(--muted)}
/* ── 뽑기·조합 연출 ─────────────────────────────────────────────────────────
치장 추출(unlock-reveal)과 **같은 시각 언어**를 쓴다. 게임 안에서 "뽑는다"는 행위가
화면마다 다르게 생기면 같은 기능인지 알아보지 못한다. 그래서 새 모달 골격을 만들지 않고
offline-modal / reveal-burst / us-wheel 을 그대로 재사용하고 여기서는 차이만 얹는다. */
/* ⚠️ **display 를 지정한 요소는 `hidden` 속성이 안 먹는다.** 작성자 스타일(display:grid)이
브라우저 기본 `[hidden]{display:none}` 을 이기기 때문이다. JS 가 `el.hidden = true` 로
숨겼다고 믿는 사이 화면에는 그대로 남는다 — 실제로 가챠 10연차 그리드가 **조합 결과 화면
아래에 계속 붙어 있었다**. `el.hidden` 만 찍어 보면 true 라 검사에서도 안 걸린다.
display 를 주는 요소에는 반드시 [hidden] 규칙을 같이 둔다. */
.fx-sprite[hidden],.fx-grid[hidden],.fx-rarity[hidden],.reveal-rarity[hidden]{display:none}
.fx-sprite{display:grid;place-items:center;min-height:78px;margin:4px 0 2px}
.fx-sprite .pet-img{filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
.fx-name{color:var(--gold);font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;line-height:1.5;text-shadow:2px 2px 0 var(--line)}
.fx-sub{margin-top:5px;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7}
/* 10연차·조합 결과 그리드 — 한 화면에 다 보이게 작게, 등급 테두리는 유지 */
/* ⚠️ 100연차는 20행이라 카드가 화면 밖으로 자라 **'확인' 버튼이 사라진다**(모달에 max-height
가 없다). 그리드 자체를 스크롤 영역으로 만든다 — 10연차(2행)는 이 높이에 닿지 않는다. */
.fx-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px;
max-height:46vh;overflow-y:auto;overscroll-behavior:contain}
.fx-cell{display:grid;place-items:center;gap:1px;padding:5px 2px;background:var(--panel2);
border:2px solid var(--line)}
.fx-cell .fc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
color:var(--ink);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.3}
/* 조합 융합 — 재료가 가운데로 빨려들어가 하나가 된다. 확률 화면이 아니라 '합쳐진다'를 보여야
재료가 사라진 이유가 납득된다. */
.fuse-stage{position:relative;display:grid;place-items:center;height:112px;margin:6px 0 2px}
.fuse-mat{position:absolute;animation:fuseIn .9s cubic-bezier(.5,0,.75,0) forwards}
@keyframes fuseIn{
0%{transform:translate(var(--fx),var(--fy)) scale(1);opacity:1}
70%{opacity:1}
100%{transform:translate(0,0) scale(.25);opacity:0}
}
.fuse-core{width:26px;height:26px;border-radius:50%;background:var(--gold);
box-shadow:0 0 18px 6px var(--gold);animation:fuseCore 1.5s ease-in-out infinite}
@keyframes fuseCore{0%,100%{transform:scale(.8)}50%{transform:scale(1.25)}}
@keyframes fuseCoreSoft{0%,100%{opacity:.72}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
/* 움직임만 줄인다 — 완전히 없애면 '진행 중'이라는 유일한 신호가 사라진다. */
.fuse-mat{animation-duration:.1s}
/* 끄지 않고 완만하게 — 이 PC 들은 항상 reduce 를 보고하므로 끄면 '진행 중' 신호가 사라진다. */
.fuse-core{animation-name:fuseCoreSoft;animation-duration:2.4s}
}
/* 재료 검색·정렬 · 편성 안내 */
.craft-tools{display:flex;align-items:center;gap:6px;margin:14px 0 7px}
/* 생김새는 한 벌로 — 위 `.craft-guide-tools` 와 같은 방식이다(요소 셀렉터). */
.craft-tools input,.craft-tools select{min-width:0;padding:7px;background:var(--panel2);
border:2px solid var(--line);color:var(--ink);font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px}
/* 검색이 남는 폭을 갖고 정렬은 제 폭만 쓴다(좁은 화면에서 정렬 글자가 잘리지 않게). */
.craft-tools input{flex:1}
.craft-tools select{flex:none;max-width:118px}
/* 필터 줄이 뒤따르므로 도구 줄 아래 여백을 줄인다(둘이 한 덩이로 읽히게). */
.craft-pool-filters{margin-bottom:7px}
.craft-locked-note{margin-top:6px;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7}
.craft-locked-note b{color:var(--gold)}
/* ── 흡수 승급 ──────────────────────────────────────────────────────────────
재료 격자·미리보기·실행 버튼은 조합(.craft-*)과 **같은 클래스를 그대로 쓴다** —
같은 성격의 조작(펫을 되돌릴 수 없이 태운다)이라 생김새가 갈리면 위험도도 다르게 읽힌다.
여기 있는 것은 흡수에만 있는 것들뿐이다: 상태 배너·대상 카드·축 탭·랭크 핍. */
/* ⚠️ `hidden` 은 UA 규칙(display:none)이라 **저자 규칙에 진다** — `.craft-pool{display:grid}`
나 `display:flex` 를 걸어 둔 자리는 `el.hidden = true` 로 사라지지 않는다(실제로 대상 목록이
재료 격자 위에 그대로 남았다). 껐다 켰다 하는 자리만 명시적으로 이긴다. */
.absorb-pool[hidden],
.absorb-picked[hidden],
.absorb-target-card[hidden]{display:none}
.absorb-banner{margin:0 0 9px;padding:8px 10px;border:2px solid var(--line);
background:var(--panel2);color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7}
.absorb-banner b{color:var(--ink)}
.absorb-banner.closed{border-color:var(--line)}
.absorb-banner.preview{border-color:var(--gold);color:var(--ink)}
.absorb-banner.preview b{color:var(--gold)}
.absorb-target{margin-bottom:11px}
.absorb-target-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
margin-bottom:7px}
.absorb-target-head h3{margin:0;color:var(--gold);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.absorb-change{padding:5px 9px;background:var(--panel2);border:2px solid var(--line);
color:var(--ink);font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;cursor:pointer}
.absorb-change:hover{border-color:var(--gold)}
.absorb-target-card{display:flex;align-items:center;gap:9px;padding:9px;
background:var(--panel2);border:2px solid var(--line)}
.absorb-target-card .atc-txt{display:grid;gap:3px;min-width:0}
.absorb-target-card strong{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.absorb-target-card span{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
/* 축은 두 개뿐이고 **효과가 반대**다 — 나란히 두고 고른 쪽만 강조한다. */
.absorb-axis{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:7px}
.absorb-axis-btn{display:grid;gap:2px;padding:9px 5px;background:var(--panel2);
border:2px solid var(--line);color:var(--muted);font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;cursor:pointer}
.absorb-axis-btn span{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;opacity:.85}
.absorb-axis-btn.active{border-color:var(--gold);background:var(--panel);color:var(--ink)}
.absorb-axis-hint{margin:0 0 9px;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7}
.absorb-axis-hint b{color:var(--ink)}
.absorb-now{margin-bottom:11px;padding:9px 10px;background:var(--panel2);border:2px solid var(--line)}
.absorb-now .an-row{display:flex;align-items:center;gap:7px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.absorb-now .an-row span{color:var(--muted)}
.absorb-now .an-row strong{margin-left:auto;color:var(--gold);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
.absorb-now .an-sub{margin-top:5px;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6}
/* 랭크는 0~5 라 숫자보다 칸이 읽기 쉽다(전·후 비교가 한눈에 들어온다). */
.absorb-pips{display:inline-flex;gap:2px;vertical-align:middle}
.absorb-pips i{width:9px;height:4px;background:var(--line)}
.absorb-pips i.on{background:var(--gold)}
/* 고른 재료는 **항상 화면에 떠 있어야 한다** — 격자를 스크롤해 내려가면 무엇을 태우는지
보이지 않는 채로 실행 버튼에 닿는다(조합의 슬롯이 같은 역할을 한다). */
.absorb-picked{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:7px}
.absorb-picked .ap-label{color:var(--gold);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;margin-right:3px}
.absorb-picked .ap-chip{padding:4px 7px;background:var(--panel2);border:2px solid var(--line);
color:var(--ink);font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;cursor:pointer}
.absorb-picked .ap-chip:hover{border-color:var(--gold)}
.absorb-preview .ab-row{display:flex;align-items:center;gap:7px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;margin-bottom:5px}
.absorb-preview .ab-row span{color:var(--muted)}
.absorb-preview .ab-row strong{margin-left:auto;color:var(--gold)}
.absorb-preview .ab-sub{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7}
.absorb-preview .ab-sub b{color:var(--gold)}
.absorb-warn{margin:7px 0 0;color:var(--gold);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7}
/* ★ 손실 표기 — "1마리"라는 말이 별 하나만 깎이는 것으로 읽혀 사고가 났다.
별이 붙은 재료는 칩부터 다르게 보이고, 실제 장수를 항상 옆에 붙인다. */
.absorb-picked .ap-copies{color:#ff9a62;font-weight:700}
.absorb-picked .ap-chip.starred{border-color:#e07a3f;color:#ffd8c4;
background:linear-gradient(180deg,rgba(224,122,63,.22),var(--panel2))}
.ab-sub .ap-copies{color:#ff9a62}
/* ★ 확인 창 — 2단 버튼과 달리 **다른 버튼**을 누르게 해서 손이 기억으로 누르지 못하게 한다 */
.absorb-confirm-card{max-width:340px}
.absorb-confirm-title{margin:0 0 8px;color:#ffb37a;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.6}
.acx-lead{margin:0 0 8px;color:var(--fg);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.8}
.acx-lead b{color:#ffb37a}
.acx-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:3px;
max-height:150px;overflow-y:auto}
.acx-list li{display:flex;align-items:center;gap:6px;padding:4px 7px;border-radius:5px;
background:var(--panel2);border:1px solid rgba(224,122,63,.45);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.acx-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acx-star{color:var(--gold);font-weight:700}
.acx-copies{color:#ff9a62;font-weight:700}
.acx-list li.heavy{border-color:#e04a3f;background:rgba(224,74,63,.16)}
.acx-list li.heavy .acx-star{color:#ff7a6e}
.acx-heavy{margin:0 0 6px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7;color:#ff7a6e}
.acx-total{margin:0 0 6px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7;color:var(--fg)}
.acx-total b{color:#ff9a62}
.acx-note{margin:0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7;color:var(--muted)}
.absorb-confirm-foot{display:flex;gap:6px;justify-content:flex-end}
.absorb-confirm-go{padding:7px 12px;border-radius:6px;border:2px solid #e07a3f;
background:linear-gradient(180deg,#c2562a,#8f3a18);color:#ffe6d5;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;
font-weight:700;cursor:pointer}
.absorb-confirm-go:hover{border-color:#ffb37a}
/* ── 흡수 승급 표기 (affinity.js 가 만드는 마크업) ──────────────────────────
두 축은 효과가 **반대**라 색도 반대편에서 고른다 — 공격(종족축)은 따뜻한 쪽,
방어(속성축)는 차가운 쪽. 랭크는 색을 다섯으로 나누지 않고 **세 단계**로만 묶는다
(작은 카드에서 다섯 색은 구분이 안 되고, 유저가 외워야 할 것만 늘어난다).
⚠️ 이 규칙은 던전 카드(dungeon.css 관할)와 컬렉션 격자(style.css 관할) **양쪽**에서
쓰인다. 둘 다 index.html 이 읽으므로 여기 한 곳에만 둔다 — 나누면 한쪽만 고쳐진다. */
:root{
--aff-atk:#e08a3c; /* 공격(종족축) — 유리 상성으로 때릴 때 곱해진다 */
--aff-def:#4ea3d8; /* 방어(속성축) — 약점을 찔릴 때 나눠진다 */
}
/* 카드용 미니 게이지 — 초상 아래 빈 자리에 얹는 얇은 막대.
미승급 펫에는 이 요소 자체가 없어서 카드 높이가 지금까지와 같다. */
/* 던전 펫 카드의 **우상단** 모서리 — 왼쪽 위는 등급·별(.pet-crest), 그 아래는 전투력
(.pet-power)이 이미 쓰고 있고 오른쪽 위만 비어 있다. 카드 자체가 position:relative 라
여기에 붙인다(초상 아래에 두면 피로도 막대와 같은 뜻으로 읽혔다). */
.pet-aff{position:absolute;z-index:4;top:3px;right:3px;display:flex;flex-direction:column;
align-items:flex-end;gap:2px;width:30px;padding:2px 3px;border-radius:4px;
border:1px solid rgba(0,0,0,.5);background:rgba(0,0,0,.42)}
/* 랭크가 먼저 읽히고, 막대는 "다음 랭크까지 얼마나"를 보조로 알려 준다. */
.pet-aff .aff-rank{font-style:normal;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;font-weight:700;
color:var(--aff-atk)}
.pet-aff .aff-rank::before{content:"🔥";font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;margin-right:1px}
/* 최대치 — 숫자 대신 MAX 를 띄우고 색을 한 단계 더 올린다(끝났다는 신호). */
.pet-aff.maxed .aff-rank{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#ffe9a8;letter-spacing:.02em}
.pet-aff.maxed{border-color:#ffd479}
.aff-chip.maxed{border-color:#ffe9a8;color:#ffe9a8;background:rgba(255,233,168,.16)}
.absorb-now.maxed{border-color:var(--gold)}
.absorb-now .an-max{margin-left:auto;font-style:normal;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-weight:700;
color:var(--gold);letter-spacing:.04em}
.absorb-now .an-max + strong{margin-left:6px}
.absorb-maxed{margin:0;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7}
.absorb-maxed b{color:var(--gold)}
.pet-detail-aff .aff-row-mult em{font-style:normal;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#ffe9a8}
.pet-aff .aff-bars{display:flex;flex-direction:column;gap:2px;width:100%}
.pet-aff .aff-bar{position:relative;width:100%;height:3px;background:rgba(255,255,255,.18);
border-radius:2px;overflow:hidden}
.pet-aff .aff-bar b{position:absolute;inset:0 auto 0 0;display:block;border-radius:2px}
.pet-aff .aff-bar.aff-a b{background:var(--aff-atk)}
.pet-aff .aff-bar.aff-d b{background:var(--aff-def)}
.pet-aff.tier-mid .aff-rank{color:#f0b657}
.pet-aff.tier-hi .aff-rank{color:#ffd479}
/* 높은 랭크만 은은하게 빛낸다 — 낮은 랭크까지 빛나면 신호가 죽는다. */
.pet-aff.tier-hi .aff-bar b{box-shadow:0 0 4px currentColor}
/* 재료 격자용 칩 — "태우면 아깝다"를 셀 안에서 한 글자로.
조합 슬롯·조합 격자·흡수 격자가 같은 칩을 쓴다(같은 뜻이면 같은 모양이어야 한다). */
.craft-cell,.craft-slot{position:relative}
.aff-chip{position:absolute;top:2px;right:2px;z-index:2;padding:1px 3px;border-radius:3px;
background:rgba(0,0,0,.55);border:1px solid var(--aff-atk);color:var(--aff-atk);
font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.3;font-weight:700;pointer-events:none}
/* 조합 슬롯만 왼쪽 — 그쪽 우상단은 '빼기(✕)' 버튼이 이미 쓰고 있다. */
.craft-slot .aff-chip{right:auto;left:2px}
.aff-chip.tier-mid{border-color:#f0b657;color:#f0b657}
.aff-chip.tier-hi{border-color:#ffd479;color:#ffd479;background:rgba(255,212,121,.14)}
/* 펫 상세 모달 섹션 — 숫자를 정확히 보여주는 유일한 자리. */
.pet-detail-aff{border-left:3px solid var(--aff-atk)}
.pet-detail-aff.tier-mid{border-left-color:#f0b657}
.pet-detail-aff.tier-hi{border-left-color:#ffd479}
.pet-detail-aff .aff-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.pet-detail-aff .aff-row-name{display:flex;align-items:baseline;gap:4px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.pet-detail-aff .aff-row-name em{font-style:normal;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;opacity:.7}
.pet-detail-aff .aff-row-mult{margin-left:auto;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold)}
.pet-detail-aff .aff-row-sub{margin:2px 0 0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;opacity:.75}
.pet-detail-aff .aff-pips{display:inline-flex;gap:2px}
.pet-detail-aff .aff-pips i{width:9px;height:4px;border-radius:1px;background:rgba(255,255,255,.16)}
.pet-detail-aff .aff-pips i.on{background:var(--aff-atk)}
.pet-detail-aff.tier-mid .aff-pips i.on{background:#f0b657}
.pet-detail-aff.tier-hi .aff-pips i.on{background:#ffd479}
/* ── 펫 등장 강조 연출 ──────────────────────────────────────────────────────
GHUB GachaRevealOverlay 와 같은 3단계(charge → burst → reveal)·같은 수치를 쓴다.
등급이 높을수록 오래 모으고, 광선·입자가 늘고, 전설만 색종이가 떨어진다.
⚠️ 펫에만 쓴다 — 먹이·치장까지 이 연출을 주면 "펫이 나왔다"는 신호가 죽는다. */
.pr-overlay{position:fixed;z-index:400;inset:0;display:grid;place-items:center;overflow:hidden;
background:radial-gradient(circle at 50% 46%,rgba(0,0,0,.72),rgba(0,0,0,.94))}
.pr-overlay.hidden{display:none}
/* 뽑기 3D 연출(2026-10-09) — 별개 문서(reveal.html)를 담는 덮개. 평소에는 보이지 않지만(visibility) **크기는 잡아 둔다** —
예열한 문서가 무대 크기를 알아야 재생 때 한 프레임도 틀리지 않는다. 입력은 이 덮개가 받는다(iframe 은 포인터를 안 받는다). */
.gr3d{position:fixed;inset:0;z-index:410;background:#000;visibility:hidden;pointer-events:none;overscroll-behavior:contain}
.gr3d.on{visibility:visible;pointer-events:auto}
.gr3d-frame,.gr3d-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.gr3d-frame iframe{pointer-events:none}
.gr3d-skip{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));min-width:88px;min-height:44px;padding:0 16px;
font:inherit;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:#faf6ef;background:rgba(29,21,15,.72);border:2px solid rgba(255,255,255,.55);cursor:pointer}
.gr3d-skip:hover,.gr3d-skip:focus-visible{border-color:#fff;outline:none}
/* 전설 이상이 여럿이면 「2 / 8」 과 「모두 건너뛰기」 — 차례로 보인다 */
.gr3d-count{position:absolute;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);padding:2px 12px;
font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:#faf6ef;background:rgba(29,21,15,.72);border:2px solid rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.gr3d-skipall{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));min-height:44px;padding:0 14px;
font:inherit;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:#f1e3cf;background:rgba(29,21,15,.55);border:2px solid rgba(255,255,255,.35);cursor:pointer}
.gr3d-skipall:hover,.gr3d-skipall:focus-visible{border-color:#fff;outline:none}
.gr3d-count[hidden],.gr3d-skipall[hidden]{display:none}
.gr3d-live{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* 모으기 — 가운데 빛덩이가 커지며 밝아진다 */
.pr-core{width:44px;height:44px;border-radius:50%;background:var(--pr-color,#f2c14e);
box-shadow:0 0 30px 12px var(--pr-color,#f2c14e);
animation:prCharge var(--pr-charge,900ms) cubic-bezier(.5,0,.9,.4) forwards}
@keyframes prCharge{
0%{transform:scale(.2);opacity:.5}
70%{transform:scale(1.1);opacity:1}
100%{transform:scale(2.6);opacity:1}
}
/* 폭발 — 화면 전체 섬광 */
.pr-flash{position:absolute;inset:0;background:var(--pr-color,#fff);
animation:prFlash 450ms ease-out forwards;pointer-events:none}
@keyframes prFlash{0%{opacity:.92}100%{opacity:0}}
/* 광선 — 뒤에서 회전. 등급이 높을수록 개수가 는다(개수는 JS 가 정한다). */
.pr-rays{position:absolute;width:340px;height:340px;pointer-events:none;
animation:prSpin 9s linear infinite}
.pr-ray{position:absolute;left:50%;top:50%;width:3px;height:170px;
background:linear-gradient(to top,transparent,var(--pr-color,#f2c14e));
transform-origin:50% 100%;opacity:.55}
@keyframes prSpin{to{transform:rotate(360deg)}}
.pr-particles{position:absolute;inset:0;pointer-events:none}
.pr-particle{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;
background:var(--pr-color,#f2c14e);
animation:prBurst 1.1s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes prBurst{
0%{transform:translate(-50%,-50%) scale(.4);opacity:1}
100%{transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(0);opacity:0}
}
/* 색종이 — 전설 전용. "이건 특별하다"를 딱 한 등급에만 준다. */
.pr-confetti{position:absolute;top:-14px;width:6px;height:11px;
animation:prFall linear forwards}
@keyframes prFall{to{transform:translateY(102vh) rotate(540deg);opacity:.2}}
.pr-card{position:relative;display:grid;justify-items:center;gap:8px;padding:22px 26px;
animation:prPop .42s cubic-bezier(.2,1.5,.4,1) both}
@keyframes prPop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.pr-badge{padding:3px 10px;border:2px solid var(--pr-color,#f2c14e);color:var(--pr-color,#f2c14e);
font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.pr-art{filter:drop-shadow(0 0 14px var(--pr-color,#f2c14e))}
.pr-name{color:#fff;font-size:19px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.4;text-shadow:2px 2px 0 rgba(0,0,0,.6)}
.pr-sub{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7;text-align:center}
.pr-shiny{color:#ffe08a;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
.pr-tap{margin-top:6px;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;opacity:.8}
@media (prefers-reduced-motion:reduce){
/* 화면 전체 섬광·낙하는 자극이 커서 없앤다. 등장 자체(pop)는 상태 신호라 남긴다. */
.pr-rays,.pr-confetti,.pr-flash{animation:none;opacity:.3}
.pr-particle{animation-duration:.1s}
.pr-core{animation-duration:.2s}
}
/* 설정 화면 --------------------------------------------------------------
헤더 톱니로 여는 전역 모달. 전투 패널(z-index:90) 위에 떠야 원정 중에도 소리를 맞출 수 있다.
클래스 접두사 gs- 는 전역 클래스명 충돌을 피하려는 것(CLAUDE.md 13). 열림 표시는
body.gs-modal-open 이라 버튼 클래스(.gs-open-btn)와 이름이 겹치지 않는다 - 겹치면 상태
클래스가 컴포넌트 스타일을 먹는다. */
/* 단추 모양은 위쪽 「헤더 도구 단추 한 벌」이 정한다(2026-09-26 — 여기 있던 사본을 걷었다). */
body.gs-modal-open{overflow:hidden}
/* 게시판도 같은 규약 — 열려 있는 동안 뒤 화면이 따라 스크롤되지 않는다. */
body.board-modal-open{overflow:hidden}
.gs-modal{position:fixed;inset:0;z-index:350;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(10,7,4,.78)}
/* 🔴 `hidden` **속성**은 author 의 display 선언에 진다(UA 스타일시트라 특정도가 0이다).
그래서 display 를 주는 클래스는 [hidden] 을 **하나하나 다시 막아야** 한다. 이 파일에는
전역 `.hidden` 규칙도 없으므로 빠뜨리면 속성만 붙고 화면에는 그대로 남는다.
2026-08-27 제보가 정확히 그것이었다 — 탈퇴 확인 폼(.gs-danger-box)이 '회원 탈퇴하기'를
누르지 않아도 설정을 열 때마다 보였고, 같은 이유로 알림·카카오 카드(.gs-card)와 조합
화면의 경험치 이월 체크박스(.craft-xfer)도 조건과 무관하게 떠 있었다.
⚠️ 여기는 **화면을 가리지 않고 모아 둔 가드 목록**이다(설정 전용이 아니다).
`hidden` 을 쓰는 새 요소의 클래스가 display 를 준다면 여기에 한 칸 더 적을 것 —
`tests/test_settings_delete_modal.py` 의 훑기 검사가 빠뜨린 자리를 찾아 준다. */
.gs-modal[hidden],.gs-card[hidden],.gs-pane[hidden],.gs-tab[hidden],.push-prefs[hidden],.gs-orient[hidden],.gs-orient-note[hidden],
.gs-danger-box[hidden],.gs-danger-label[hidden],.gs-danger-actions[hidden],
.craft-xfer[hidden]{display:none}
.gs-dialog{width:100%;max-width:380px;height:min(640px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);display:flex;flex-direction:column;background:var(--panel);border:3px solid var(--line);box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06),6px 6px 0 rgba(0,0,0,.5)}
.gs-dialog:focus{outline:none}
.gs-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:2px solid var(--line)}
.gs-head strong{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;color:var(--gold);text-shadow:2px 2px 0 var(--line)}
/* 화면 방향 — 머리 한가운데 「세로 | 가로」 한 쌍(2026-10-10). 폰 · 태블릿에서만 보인다(settings-panel.js 가 hidden 을 푼다).
단추 모양은 .gs-seg 를 그대로 쓰고 폭만 줄인다 · 그림은 CSS 로 그린 폰 윤곽 한 칸(이모지 · 화살표 글자 금지). */
.gs-orient{flex:none}
.gs-seg.gs-orient button{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;min-height:26px;padding:5px 8px;touch-action:manipulation}
.gs-orient-ico{flex:none;display:inline-block;box-sizing:border-box;border:2px solid currentColor}
.gs-orient-ico.is-portrait{width:8px;height:12px}
.gs-orient-ico.is-landscape{width:12px;height:8px}
.gs-orient-note{flex:none;margin:0;padding:6px 12px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5;color:#e8c07a;background:#2a2118;border-bottom:2px solid var(--line)}
.gs-close{display:inline-flex;align-items:center;justify-content:center;min-width:30px;min-height:26px;padding:0 6px;border:2px solid var(--line);background:#34291f;color:#d9d4c9;font:inherit;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1;cursor:pointer}
.gs-close:hover{background:#453528;color:var(--gold)}
.gs-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gs-body{flex:1;min-height:0;overflow-y:auto;padding:12px 12px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.gs-card{padding:10px;border:2px solid var(--line);background:var(--panel2);display:flex;flex-direction:column;gap:8px}
.gs-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gs-card-title{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink)}
.gs-switch{flex:none;min-width:46px;padding:6px 8px;border:2px solid var(--line);background:#3c6b4a;color:#eaf7ee;font:inherit;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;cursor:pointer;box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),inset 2px 2px 0 rgba(255,255,255,.08)}
.gs-switch.is-off{background:#4a3a2a;color:var(--muted)}
.gs-switch:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gs-slider-row{display:flex;align-items:center;gap:9px}
/* 단계 고르기(월드 그래픽 · 2026-09-27) — 한 줄 단추 묶음 · 고른 것만 금빛 */
.gs-seg{display:flex;gap:4px}
.gs-seg button{flex:1;min-width:0;padding:7px 4px;border:2px solid var(--line);background:#34291f;color:var(--muted);font:inherit;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1;cursor:pointer}
.gs-seg button.is-on{background:#3c6b4a;color:#eaf7ee}
.gs-seg button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gs-seg-sm{flex:none}
.gs-seg-sm button{flex:none;padding:6px 7px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.gs-switch:disabled,.gs-slider:disabled{opacity:.45;cursor:default}
.gs-value{flex:none;min-width:40px;text-align:right;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold)}
.gs-slider{flex:1;min-width:0;height:18px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.gs-slider:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gs-slider::-webkit-slider-runnable-track{height:8px;background:#241c12;border:2px solid var(--line)}
.gs-slider::-moz-range-track{height:8px;background:#241c12;border:2px solid var(--line)}
.gs-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:16px;margin-top:-6px;background:var(--gold);border:2px solid var(--line);box-shadow:inset -2px -2px 0 rgba(0,0,0,.3)}
.gs-slider::-moz-range-thumb{width:14px;height:16px;background:var(--gold);border:2px solid var(--line);border-radius:0}
.gs-track{display:flex;align-items:center;gap:6px;min-width:0}
.gs-track .bgm-label{flex:none;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
/* 헤더에서는 곡 제목을 좁게 잘랐지만, 설정 화면에서는 카드 폭만큼 다 쓴다. */
.gs-track .bgm-track-title{flex:1;min-width:0;max-width:none}
.gs-hint{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;color:var(--muted)}
/* 스위치가 아니라 **읽기 전용 상태**가 오는 자리(카카오 연결 여부). 눌러도 하는 일이
없는 버튼 대신 글자만 둔다 — 스위치와 같은 줄, 같은 오른쪽 끝. */
.gs-state{flex:none;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;color:var(--muted)}
.gs-state.is-on{color:var(--gold)}
/* 설정 카드 안의 큰 버튼은 한 치수 줄인다 — 본문 화면의 14px/14px 은 카드를 뭉갠다. */
.gs-card .big-action{padding:10px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
/* ── 설정 창 탭 · 그림 (2026-10-02) ──────────────────────────────────────────────
카드 열한 장을 소리 · 연출 · 월드 · 알림 · 계정 다섯 판(.gs-pane)에 나눠 담았다. 판은 hidden 으로 끄고 켠다 — 그래서 위쪽 가드 목록에
.gs-pane · .gs-tab 이 있다. 보이는 카드가 하나도 없는 판의 탭은 settings-panel.js 가 감춘다.
그림은 월드 블록 그림(/world/ui/block · 한 장 8~50KB)을 **배경**으로 건다 — ![]()
면 숨은 창 속 그림도 페이지를 열 때 전부 받아 간다.
배경은 그 칸이 보일 때 받는다(.gi 와 같은 방식 · 열지 않은 탭의 그림은 그 탭을 열 때). 창 높이를 고정한 것은 탭을 바꿀 때 창이 껑충거리지 않게다. */
.gs-tabs{flex:none;display:flex;gap:4px;padding:8px 12px 0;border-bottom:2px solid var(--line)}
.gs-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px 7px;border:2px solid var(--line);border-bottom:0;background:#34291f;color:var(--muted);font:inherit;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.gs-tab:hover{color:var(--gold)}
.gs-tab.is-on{background:var(--panel2);color:var(--gold);box-shadow:inset 0 3px 0 var(--gold)}
.gs-tab:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.gs-tab .gsi{width:22px;height:22px;opacity:.6}
.gs-tab.is-on .gsi{opacity:1}
.gs-pane{display:flex;flex-direction:column;gap:10px}
.gsi{display:inline-block;flex:none;width:20px;height:20px;background-position:center;background-repeat:no-repeat;background-size:contain}
.gs-head .gsi{width:22px;height:22px}
.gs-close .gsi,.bgm-next .gsi{width:16px;height:16px}
.bgm-next{display:inline-flex;align-items:center;justify-content:center}
.gsi-note{background-image:url(/world/ui/block/note.svg)}
.gsi-swords{background-image:url(/world/ui/block/swords.svg)}
.gsi-fire{background-image:url(/world/ui/block/fire.svg)}
.gsi-sparkle{background-image:url(/world/ui/block/sparkle.svg)}
.gsi-door{background-image:url(/world/ui/block/door.svg)}
.gsi-sound_on{background-image:url(/world/ui/block/sound_on.svg)}
.gsi-globe{background-image:url(/world/ui/block/globe.svg)}
.gsi-bolt{background-image:url(/world/ui/block/bolt.svg)}
.gsi-people{background-image:url(/world/ui/rail/people.svg)}
.gsi-orb{background-image:url(/world/ui/block/orb.svg)}
.gsi-telescope{background-image:url(/world/ui/block/telescope.svg)}
.gsi-clock{background-image:url(/world/ui/clock.svg)}
.gsi-umbrella{background-image:url(/world/ui/block/umbrella.svg)}
.gsi-ribbon{background-image:url(/world/ui/block/ribbon.svg)}
.gsi-boom{background-image:url(/world/ui/block/boom.svg)}
.gsi-moon{background-image:url(/world/ui/block/moon.svg)}
.gsi-sleep{background-image:url(/world/ui/block/sleep.svg)}
.gsi-bell{background-image:url(/world/ui/bell.svg)}
.gsi-chat{background-image:url(/world/ui/rail/chat.svg)}
.gsi-gift{background-image:url(/world/ui/block/gift.svg)}
.gsi-sos{background-image:url(/world/ui/block/sos.svg)}
.gsi-exit{background-image:url(/world/ui/block/exit.svg)}
.gsi-gear{background-image:url(/world/ui/block/gear.svg)}
.gsi-key{background-image:url(/world/ui/block/key.svg)}
.gsi-next{background-image:url(/world/ui/block/right.svg)}
.gsi-close{background-image:url(/world/ui/close.svg)}
/* 문의 주소 — 눌러서 메일 앱이 열려야 하므로 링크임이 보여야 한다. */
/* 문의 주소 — 카드 제목과 같은 줄, 오른쪽 끝(.gs-state 와 같은 자리·같은 규칙).
줄바꿈은 막는다: 주소가 두 줄로 접히면 그 줄만 높아져 헤더가 어긋난다. */
.gs-contact{flex:none;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold);text-decoration:underline;white-space:nowrap}
.gs-contact:active{opacity:.7}
/* ── 회원 탈퇴 카드 ───────────────────────────────────────────────────────
되돌릴 수 없는 유일한 조작이라 **보기부터 달라야** 한다 — 다른 카드와 같은 금색
버튼을 쓰면 소리 끄기와 같은 무게로 읽힌다. 그렇다고 카드 전체를 붉게 칠하지는
않는다(설정을 열 때마다 눈을 끈다). 테두리와 '영구 삭제' 버튼만 붉다. */
.gs-danger{border-color:#5a2420}
.gs-danger .gs-card-title{color:#e8a89c}
.gs-danger-btn{font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;font-size:12px;padding:10px;
color:#ffe9e4;background:#8c2f26;border:2px solid #1a130d;
box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),inset 2px 2px 0 rgba(255,255,255,.08)}
.gs-danger-btn:active{transform:translateY(2px)}
.gs-danger-btn:disabled{opacity:.45;cursor:not-allowed}
/* 접힌 상태의 '회원 탈퇴하기'와 펼친 뒤의 '취소' — 누른다고 무슨 일이 일어나지 않는
버튼이라 채우지 않는다. 붉은 것은 실제로 지우는 버튼 하나뿐이어야 한다. */
.gs-danger-btn.ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.gs-danger-box{display:flex;flex-direction:column;gap:8px;padding:10px;
border:2px solid #5a2420;background:rgba(140,47,38,.12)}
.gs-danger-lead{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:#e8a89c}
.gs-danger-list{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:4px;
font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;color:var(--muted)}
.gs-danger-list b{color:var(--ink)}
.gs-danger-label{display:flex;flex-direction:column;gap:6px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;color:var(--muted)}
.gs-danger-label b{color:var(--ink)}
.gs-danger-input{font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;padding:8px;color:var(--ink);
background:var(--bg);border:2px solid var(--line)}
.gs-danger-input:focus-visible{outline:2px solid #8c2f26;outline-offset:1px}
.gs-danger-err{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;color:#f0a99e}
/* 취소가 왼쪽, 삭제가 오른쪽 — 습관적으로 오른쪽을 누르는 손을 고려해 폭을 같게 두지
않는다(취소가 더 넓다). 잘못 눌러도 되돌릴 수 있는 쪽이 크다. */
.gs-danger-actions{display:flex;gap:8px}
.gs-danger-actions .gs-danger-btn{flex:1}
.gs-danger-actions .gs-danger-btn.ghost{flex:1.4}
/* 확인 팝업 — 설정 화면(z 350) **위**에 떠야 한다. 아래로 깔리면 설정 카드에 가려
아무것도 못 누른다. 틀은 다른 팝업(.offline-modal)과 같은 것을 쓴다. */
.gs-danger-modal{z-index:360}
.gs-danger-card{max-width:320px;display:flex;flex-direction:column;gap:10px;
text-align:left;border-color:#5a2420}
/* 그림·제목만 가운데 — 목록과 입력칸은 왼쪽 정렬이라야 읽힌다. */
.gs-danger-card .offline-emoji,.gs-danger-card .gs-danger-title{text-align:center}
.gs-danger-card .gs-danger-title{margin-bottom:2px;color:#e8a89c}
.gs-danger-card .gs-hint{text-align:center}
/* ── 회원가입 · 이어받기 코드 (Phase 2) ───────────────────────────────────
기본은 접혀 있다 — 대다수는 신규 가입이고, 코드 칸이 늘 보이면 "코드가 있어야
가입되나?" 하고 멈칫하게 된다.
⚠️ 클래스 이름에 `signup-` 접두사를 붙였다 — `.claim-box` 는 시즌 보상 수령 영역이
이미 쓰고 있어 그대로 쓰면 그쪽 레이아웃이 딸려 온다. */
.signup-claim{margin:10px 0 4px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.03)}
.signup-claim .claim-toggle,.signup-invite .claim-toggle{display:flex;align-items:center;gap:8px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;user-select:none}
.signup-claim .claim-toggle input,.signup-invite .claim-toggle input{width:16px;height:16px;cursor:pointer}
.signup-claim .claim-fields,.signup-invite .claim-fields{margin-top:8px}
.signup-claim .claim-hint,.signup-invite .claim-hint{margin:6px 2px 0;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.5}
.signup-claim .claim-hint-ok{color:#7ddba0}
.signup-claim .claim-hint-bad{color:#ff9d9d}
/* 가입 화면 약관 동의 — 접힌 상태가 기본이다. 두 줄짜리 체크 목록으로 보이고,
'보기'를 눌러야 본문이 펼쳐진다(첫 화면에 긴 글을 쏟지 않는다). */
.signup-terms{margin:10px 0 4px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);
border-radius:10px;background:rgba(255,255,255,.03)}
.signup-terms .terms-all{display:flex;align-items:center;gap:8px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;user-select:none}
.signup-terms .terms-all input{width:16px;height:16px;cursor:pointer}
.signup-terms .terms-all em{font-style:normal;color:var(--gold)}
.terms-items{margin-top:8px;border-top:1px solid rgba(255,255,255,.1);padding-top:8px}
.terms-row + .terms-row{margin-top:6px}
.terms-head{display:flex;align-items:center;gap:8px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;user-select:none}
.terms-head input{width:15px;height:15px;flex:none;cursor:pointer}
.terms-head .terms-title{flex:1;min-width:0}
.terms-head .terms-title em{font-style:normal;color:var(--muted)}
.terms-more{flex:none;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;color:var(--muted);background:none;
border:none;text-decoration:underline;cursor:pointer;padding:2px 4px}
.terms-body{margin:6px 0 0 23px;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.25);
color:var(--muted);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.75;white-space:pre-line;
max-height:180px;overflow-y:auto}
.terms-version{margin:8px 2px 0;color:var(--muted);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
/* 가입 카드에 남는 약관 **요약 한 줄** — 전문은 별도 화면(#termsForm)에서 본다.
가입 카드를 짧게 유지하는 것이 목적이므로 여기에 내용을 늘리지 말 것. */
.signup-terms-summary{margin:10px 0 4px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);
border-radius:10px;background:rgba(255,255,255,.03)}
.signup-terms-summary .sts-row{display:flex;align-items:center;gap:8px;text-align:left}
.signup-terms-summary .sts-state{flex:1;min-width:0;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.5;color:var(--muted)}
.signup-terms-summary .sts-state.sts-ok{color:#7ddba0}
.signup-terms-summary .sts-state.sts-bad{color:#ff9d9d}
.signup-terms-summary .sts-open{flex:none;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;color:var(--gold);
background:none;border:none;text-decoration:underline;cursor:pointer;padding:2px 4px}
.signup-terms-summary .sts-open:active{transform:translateY(1px)}
/* ── 친구 초대 (설정 ▸ 초대 카드 · 가입 화면 초대 코드) ─────────────────────
계획: docs/plans/INVITE_REFERRAL_PLAN.md
카드 껍데기는 설정 공용 `.gs-card` 를 그대로 쓴다 — 전용 껍데기를 만들면 카드마다
여백 규칙이 갈린다(알림·카카오 카드가 이미 그렇게 정리돼 있다). */
.invite-code-row{display:flex;align-items:stretch;gap:6px}
/* 코드는 **읽어서 불러 주는 값**이라 자간을 벌리고 고정폭으로 둔다.
혼동 문자(0 O 1 I L)는 애초에 코드에 없지만, 그래도 붙어 있으면 잘못 읽는다. */
.invite-code{flex:1 1 auto;min-width:0;padding:9px;background:var(--panel);
border:2px solid var(--line);font-family:"Galmuri14","Galmuri11",sans-serif;font-size:15px;letter-spacing:3px;
color:var(--gold);text-align:center;overflow:hidden;text-overflow:ellipsis}
.invite-copy{flex:0 0 auto;padding:0 12px;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;cursor:pointer;
color:var(--ink);background:var(--panel2);border:2px solid var(--line)}
.invite-copy:active{transform:translateY(1px)}
/* 카카오 노랑은 브랜드 색이라 게임 팔레트를 따르지 않는다(로그인 버튼과 같은 값). */
.big-action.invite-kakao{background:#fee500;color:#191600}
.invite-steps{display:flex;flex-direction:column;gap:4px}
.invite-step{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:7px 9px;background:var(--panel);border:2px solid var(--line);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted)}
.invite-step.is-done{color:var(--ink);border-color:var(--gold)}
.invite-step .is-tag{flex:none;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--gold)}
.invite-step.is-claimed .is-tag{color:var(--muted)}
/* 가입 화면 — 이어받기(.signup-claim)와 같은 규칙을 쓴다. 두 블록이 나란히 서므로
생김새가 다르면 "무엇이 무엇인지"가 더 헷갈린다. */
.signup-invite{display:flex;flex-direction:column;gap:6px;margin:2px 0}
/* 링크로 들어온 사람에게 보이는 확인 줄 — 여기서는 코드를 **입력할 수 없다**(이미 정해졌다). */
.invite-from{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:8px 9px;background:var(--panel);border:2px solid var(--gold);
font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink);text-align:left}
.invite-clear{flex:none;padding:2px 6px;font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;cursor:pointer;
color:var(--muted);background:transparent;border:1px solid var(--line)}
/* 🔴 이 파일에는 전역 `.hidden{display:none}` 이 없다 — 컴포넌트마다 따로 선언하는
방식이다(.gate-card.hidden · .kakao-block.hidden …). 초대 블록의 조각들도 각자 선언해야
한다. 빠뜨렸더니 `hidden` 클래스가 붙어도 그대로 보여서, 링크로 들어온 사람에게
"○○님의 초대"와 "코드 있어요" 토글이 **동시에** 떴다(2026-08-28). */
.invite-from.hidden,.signup-invite.hidden,.invite-steps[hidden],
.signup-invite .claim-toggle.hidden,.signup-invite .claim-fields.hidden{display:none}
/* ── 선택 분해(#1472) — 확인창에서 품목을 골라 태운다 ─────────────────
서버는 예전부터 `items[]` 로 골라 받았는데(초과분은 자르지 않고 거절) 클라가 빈 몸통을
보내 전량만 가능했다. 열쇠처럼 남기고 싶은 것이 섞이는 문제가 여기서 끝난다. */
.ur-row.pickable{cursor:pointer;display:flex;align-items:center;gap:7px}
.ur-row.pickable input{width:14px;height:14px;accent-color:var(--gold);flex:none;margin:0}
.ur-row.pickable.off{opacity:.4}
.ur-row.pickable.off b{text-decoration:line-through}
.decompose-pick-tools{display:flex;gap:6px;justify-content:center;margin-top:8px}
/* 🔴 `display:flex` 는 브라우저 기본 `[hidden]{display:none}` 을 이긴다 — 이 줄이 없으면
낱개 분해 확인창에서도 '전체 선택/해제'가 그대로 보인다(고를 게 없는데). */
.decompose-pick-tools[hidden]{display:none}
.decompose-pick-tools button{font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;cursor:pointer;padding:5px 9px;
color:var(--ink);background:var(--panel);border:2px solid var(--line);
}
.decompose-pick-tools button:active{transform:translateY(1px)}
/* 조합 재료 칸의 보유 표시(#1675) — 검색으로 한 마리씩 확인하지 않아도 공식 하나를 보는
순간 만들 수 있는지 알 수 있게. `+N` 은 편성·파티에 나가 있어 **조합에 못 쓰는** 몫이다. */
.craft-guide-chip .cg-own{
font-style:normal;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;margin-left:2px;padding:2px 3px;
color:#0d1b0d;background:var(--gold);border:1px solid var(--line);
}
.craft-guide-chip .cg-own.lack{color:#fff;background:#8d3b3b}
.craft-guide-chip .cg-own u{text-decoration:none;opacity:.75}
/* 하위 조합(craft-chain.js) — 없는 재료라도 **지금 가진 펫으로 먼저 만들 수 있으면** 그 칸에
'조합' 을 단다. 빨간 보유 0 을 그대로 두면 한 칩 안에서 "없다"와 "만들 수 있다"가 반대말을
해서 붉은색만 낮춘다. 색은 금색(바로 조합)과 갈라지게 청록 한 가지로 묶는다. */
.craft-guide-chip .cg-make{
font-style:normal;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;margin-left:2px;padding:2px 3px;
color:#06231e;background:#5fd4c0;border:1px solid var(--line);
}
.craft-guide-chip.can-make .cg-own.lack{color:var(--muted);background:var(--panel2)}
.craft-guide-chip.item{--guide-color:#c7a6ff}
/* 조합 아이템 그림(2026-09-30) — 가방 · 월드와 같은 그림(`/assets/items/…`)을 공략집 칩 · 미리보기 · 확인창 · 가까운 공식 안내에 쓴다.
전엔 공략집 칩이 🧪 이모지였다. 도트 그림이 흐려지지 않게 픽셀 그대로 키운다. */
.craft-item-ico{display:inline-block;flex:none;vertical-align:middle;object-fit:contain;image-rendering:pixelated;margin-right:2px}
.craft-guide-chip .craft-item-ico{display:block;margin-right:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
/* 재료 별 조건(★N↑ · 2026-09-30) — 그 별 이상인 펫만 칸을 채우고, 조합하면 별만 그만큼 빠진다(펫은 남는다).
보유 표시(금색 · 붉은색)와 섞이지 않게 테두리만 있는 호박색 한 가지로 둔다. */
.craft-guide-chip .cg-star{
margin-left:1px;padding:1px 3px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;color:#ffd97a;
border:1px solid rgba(255,217,122,.55);background:rgba(255,217,122,.08);
}
/* 조합 확인창(2026-09-30) — 공식인지 무작위인지 · 경험치 이전 · 사라지는 재료를 조합 **전에** 한 번 더.
틀은 고르기 창(.capsule-card)과 같다. 줄은 라벨 · 값뿐이고 경고는 미리보기와 같은 붉은 띠(.craft-warn)다.
무작위 조합이면 확정 단추를 붉게 — 공식이 아니라는 걸 단추만 봐도 알게 한다. */
.craft-confirm-card{width:min(100%,360px);max-width:360px}
.craft-confirm-body{text-align:left;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7;color:var(--muted)}
.craft-confirm-row{display:flex;gap:8px;padding:5px 0;border-top:1px dashed var(--line)}
.craft-confirm-row:first-child{border-top:0}
.craft-confirm-row>b{flex:none;width:62px;color:var(--gold);font-weight:700}
.craft-confirm-row>span{flex:1;min-width:0;color:var(--ink)}
.craft-confirm-row .pet-img{display:inline-block;vertical-align:middle;margin-right:3px}
#craftConfirmModal[data-kind="random"] .offline-title{color:#ff9d8a}
#craftConfirmModal[data-kind="random"] #craftConfirmOk{color:#fff;background:#b3473f;box-shadow:inset -3px -3px 0 #7a2c27}
/* ── 조합 「한 번에 · ×N」 · 목표 공식(2026-10-08 · docs/plans/CRAFT_CHAIN_PLAN.md) ─────────────────────────
공략집 줄과 같은 부품 · 색(청록 = 하위 조합 경로와 같은 「이어서 만든다」 색). 확인창은 조합 확인창 틀(.craft-confirm-*) 그대로. */
.craft-goal{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:4px 8px;margin-top:10px;padding:8px;
background:var(--panel);border:2px solid var(--gold);box-shadow:inset 0 0 0 1px rgba(242,193,78,.2)}
.craft-goal[hidden]{display:none}
.cgoal-label{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#2a1d0c;background:var(--gold);padding:2px 4px}
.cgoal-who{display:flex;align-items:center;gap:6px;min-width:0}
.cgoal-who .pet-img{flex:none}
.cgoal-who b{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cgoal-state{grid-column:2 / span 3;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#9fe8dc}
.cgoal-state.short{color:#ff9d8a}
.craft-goal .cg-once{grid-column:3;grid-row:1;flex:none}
.craft-goal .cg-pin{grid-column:4;grid-row:1}
.cg-acts{display:flex;gap:5px;margin-top:6px}
.cg-pin{flex:none;width:30px;min-height:30px;display:grid;place-items:center;padding:0;border:1px solid var(--line);background:var(--panel2);
cursor:pointer;touch-action:manipulation}
.cg-pin[aria-pressed="true"]{border-color:var(--gold);background:rgba(242,193,78,.14)}
.cg-once{flex:1;min-width:0;min-height:30px;padding:6px 8px;border:2px solid var(--line);background:#5fd4c0;color:#06231e;font-family:"Galmuri9","Galmuri11",sans-serif;
font-size:10px;font-weight:700;cursor:pointer;touch-action:manipulation;box-shadow:inset -2px -2px 0 #2f9c8b;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.cg-once.short{background:#4a3a2a;color:#ff9d8a;box-shadow:inset -2px -2px 0 rgba(0,0,0,.3)}
.cg-once:active{transform:translateY(1px)}
.cc-head{display:grid;place-items:center;min-height:56px;margin-bottom:4px}
#craftChainModal[data-kind="short"] .offline-title{color:#ff9d8a}
.cc-tag{font-style:normal;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;padding:1px 4px;margin-left:3px;background:#1e4a39;color:#bff3d6}
.cc-good{color:#8fe0c2}
.cc-bad{color:#ff9d8a}
.cc-seg{display:flex;flex-wrap:wrap;gap:4px}
.cc-seg button{min-width:40px;padding:5px 6px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-family:"Galmuri9","Galmuri11",sans-serif;
font-size:10px;cursor:pointer;touch-action:manipulation}
.cc-seg button[aria-pressed="true"]{color:#2a1d0c;background:var(--gold);border-color:var(--gold)}
.cc-seg button:disabled{color:#6d5e48;cursor:not-allowed}
.cc-more{margin-top:3px}
.cc-more summary{cursor:pointer;color:#9fe8dc;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;list-style:none;touch-action:manipulation}
.cc-more summary::-webkit-details-marker{display:none}
.cc-more summary::after{content:" ▾"}
.cc-more[open] summary::after{content:" ▴"}
.cc-list{display:flex;flex-direction:column;gap:3px;margin:5px 0 0;padding:0;list-style:none;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink)}
.cc-list li{display:flex;align-items:center;gap:4px}
.cc-list li>i{flex:none;display:grid;place-items:center;width:14px;height:14px;background:#5fd4c0;color:#06231e;font-size:8px;font-family:"Galmuri7","Galmuri9",sans-serif;font-style:normal}
.cc-list li.goal>i{background:var(--gold);color:#2a1d0c}
.cc-list li>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-list li>b{flex:none;color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.cc-switch{position:relative;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink)}
.cc-switch input{position:absolute;opacity:0;width:1px;height:1px}
.cc-track{flex:none;position:relative;width:34px;height:18px;border:2px solid var(--line);background:var(--panel2)}
.cc-track::after{content:"";position:absolute;top:1px;left:1px;width:12px;height:12px;background:var(--muted);transition:left .12s}
.cc-switch input:checked+.cc-track{background:#2f6b60}
.cc-switch input:checked+.cc-track::after{left:17px;background:#c8f5ec}
.cc-switch input:focus-visible+.cc-track{outline:2px solid var(--gold);outline-offset:2px}
.craft-confirm-row.cc-short{align-items:center}
.cc-short-head{display:flex;align-items:center;gap:3px;color:var(--ink)}
.craft-confirm-row>.cc-short-why{flex:0 1 auto;text-align:right;color:#ff9d8a}
.ccr-big{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px 12px;margin-bottom:8px;border:2px solid var(--line);
background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 30%,transparent),transparent 62%),var(--panel2)}
.ccr-rarity{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;padding:2px 6px;background:var(--c);color:#06231e}
.ccr-name{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;color:#fff7df}
.ccr-sub{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.ccr-power{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:4px}
.ccr-power[hidden]{display:none}
.ccr-power span{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;padding:3px 6px;border:1px solid #2f6b60;background:#173a34;color:#9fe8dc}
.ccr-power b{color:#fff}
.ccr-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;text-align:left}
.ccr-tile{display:flex;align-items:center;gap:4px;min-width:0;padding:4px;background:var(--panel2);border:1px solid var(--line);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.ccr-tile span{min-width:0}
.ccr-tile b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.ccr-tile i{font-style:normal;color:#9fe8dc}
.ccr-sum{margin-top:8px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.ccr-sum b{color:var(--ink)}
@media (max-width:380px){.ccr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 2판(2026-10-12 · CRAFT_CHAIN_V2_PLAN) — 단추 꼬리표 · 사라짐 ★ · 부화캡슐 줄 · 레전드↑ 경고 칸(확정 단추 바로 위) */
.cg-warn{display:inline-grid;place-items:center;margin-left:4px;padding:1px 2px;background:#5a1f1a;vertical-align:middle;font-style:normal}
.cg-warn-ico{display:block}
.cc-gone{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:2px}
.cc-gone>span{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.cc-gone-star{font-style:normal;color:#ff9d8a;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;margin-left:1px}
.cc-sub{margin-top:4px}
.cc-hiwarn{margin-top:8px;padding:8px;border:2px solid #b8473c;background:#3a1714;color:#ffd9cf;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;text-align:left}
.cc-hiwarn-head{display:flex;align-items:center;gap:6px;color:#ffb3a3;font-weight:700}
.cc-hiwarn-pets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 6px;margin:6px 0 7px}
.cc-hiwarn-pets>span{display:flex;align-items:center;gap:3px;min-width:0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#fff1ea}
.cc-hiwarn-pets b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.cc-hiwarn-pets i{flex:none;font-style:normal;color:#ffb3a3;font-variant-numeric:tabular-nums}
.cc-hiwarn .cc-switch{color:#fff1ea}
.ccr-tile.cap{border-color:#2f6b60}
.ccr-tile.cap i{color:#c8f5ec}
/* 부화캡슐을 눈에 띄게(2026-10-12 사용자) — 확인창은 캡슐마다 큰 그림 칩 · 단추 · 목표 칸 · 스위치는 작은 그림 */
.cc-caps{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0 1px}
.cc-cap{display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 3px;border:1px solid #2f6b60;background:#173a34;color:#c8f5ec;white-space:nowrap}
.cc-cap b{color:#fff;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
.cc-cap i{font-style:normal;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#9fe8dc}
.cc-cap .craft-item-ico{margin-right:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.cg-cap{display:inline-flex;align-items:center;gap:1px;vertical-align:middle}
.cg-cap .craft-item-ico{margin-right:0}
.cc-switch .craft-item-ico{margin-right:-3px}
@media (prefers-reduced-motion:reduce){.cc-track::after{transition:none}}
.craft-guide-row.can-chain{border-color:#5fd4c0;box-shadow:inset 0 0 0 1px rgba(95,212,192,.22)}
.cg-chain{margin-top:6px;padding:5px 6px;border-left:2px solid #5fd4c0;background:rgba(95,212,192,.06)}
.cg-chain-title{margin:0 0 4px;color:#9fe8dc;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5}
details.cg-chain>summary{margin:0;list-style:none;cursor:pointer;touch-action:manipulation}
details.cg-chain>summary::-webkit-details-marker{display:none}
details.cg-chain>summary::after{content:" ▾"}
details.cg-chain[open]>summary{margin-bottom:4px}
details.cg-chain[open]>summary::after{content:" ▴"}
.cg-steps{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;counter-reset:cg-step}
.cg-step{display:flex;align-items:center;gap:5px;counter-increment:cg-step}
.cg-step::before{content:counter(cg-step);flex:none;display:grid;place-items:center;width:14px;height:14px;
color:#06231e;background:#5fd4c0;font-size:8px;font-family:"Galmuri7","Galmuri9",sans-serif}
.cg-step:not(.ready)::before{color:var(--muted);background:var(--line)}
.cg-step>.craft-guide-recipe{flex:1;min-width:0}
.cg-step-fill{flex:none;min-height:28px;padding:0 8px;border:1px solid #5fd4c0;background:rgba(95,212,192,.12);
color:#9fe8dc;font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;font-weight:700;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.cg-step-fill:active{transform:scale(.98)}
.cg-step-wait{flex:none;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;white-space:nowrap}
/* ── 이름표 스킨(칭호) ───────────────────────────────────
던전앤파이터 칭호를 분석해 옮긴 **판(plate)** 이다. 색만 바꾸면 그냥 색 다른 이름이라
칭호로 안 읽힌다 — 지문은 넷이다: ①닉네임과 분리된 판 ②좌우 뾰족 장식 ③어두운 바탕에
중앙에서 번지는 등급색 ④얇은 등급색 테두리(고등급은 발광).
⚠️ 3D 머리 위 이름표는 CSS 를 못 써서 캔버스로 **같은 모양**을 그린다
(nameplate.js `paintNameplate`·`PLATE`). 한쪽만 고치면 두 이름표가 다른 물건이 된다.
⚠️ 마크업은 nameplate.js 한 곳뿐이고, 여기서는 클래스와 CSS 변수 둘(`--np-color`·
`--np-accent`)만 안다. 칭호마다 규칙을 새로 쓰면 운영자가 화면에서 칭호를 못 늘린다. */
.np{display:inline-flex;min-width:0;vertical-align:middle}
.np-stack{flex-direction:column;align-items:flex-start;gap:1px}
.np-inline{flex-direction:row;align-items:center;gap:5px}
.np-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* 판 — 좌우가 마름모로 뻗는 실루엣(clip-path)이 칭호의 지문이다.
테두리는 border 가 아니라 **바탕색이 비쳐 보이는 방식**이다: 배경색을 등급색으로 깔고
그 위에 어두운 그라데이션을 덮되 가운데만 옅게 해 등급색이 중앙에서 번지게 한다.
(clip-path 는 border 까지 잘라내서 테두리가 끝에서 사라진다 — 그래서 안 쓴다.) */
.np-plate{
display:inline-block;max-width:100%;overflow:hidden;
padding:1px 11px;
/* 좌우 모서리 깎임 — **글자 크기 배수**라 어느 크기에서도 같은 모양이다.
🔴 짝은 `nameplate.js` `PLATE.cutEm` 이고 3D 캔버스가 같은 값에서 파생된다.
px 로 적으면 자리마다 글자 크기가 달라 갈린다 — 그래서 자리별 덮어쓰기를 걷어냈다
(순위표·헤더·보스 순위판이 각각 6·7·6px 을 들고 있었다). */
--np-cut:.75em;
clip-path:polygon(var(--np-cut) 0,calc(100% - var(--np-cut)) 0,100% 50%,calc(100% - var(--np-cut)) 100%,var(--np-cut) 100%,0 50%);
background-color:var(--np-accent,#7fa8ff);
background-image:linear-gradient(90deg,rgba(8,10,17,.96),rgba(8,10,17,.60) 50%,rgba(8,10,17,.96));
color:var(--np-color,#e7d9ea);
font-size:.82em;font-weight:800;line-height:1.5;letter-spacing:.2px;white-space:nowrap;
text-shadow:0 1px 0 #05070c,0 0 4px var(--np-accent,transparent);
}
/* 고등급만 바깥 발광 — 흔해지면 고등급이 눈에 안 띈다.
drop-shadow 는 clip-path 실루엣을 그대로 따라가서 판 모양대로 빛난다(box-shadow 는 잘린다). */
.np-plate.is-glow{filter:drop-shadow(0 0 3px var(--np-accent))}
.np-badge{margin-right:3px;font-style:normal;text-decoration:none}
/* 그림 칭호(2026-09-09) — 판 대신 **그림 한 장**이 오는 경우.
규격은 docs/guides/TITLE_ASSET_SPEC.md(높이 96px 기준으로 그린다).
⚠️ 판(`.np-plate`)의 규칙을 물려받지 않는다 — 바탕·테두리·마름모 실루엣은 전부 그림이
들고 있다. 여기 규칙은 **얼마나 크게 놓을지**뿐이다.
⚠️ 자리마다 높이를 따로 준다(아래 `.gh-title`·`.wta-plate` · dungeon.css `.rank-meta` ·
worldboss.css `.wb-rank-row`). 판의 글자 크기를 정해 둔 자리와 **짝**이다 —
한쪽만 고치면 그림 칭호를 낀 사람만 크기가 어긋난다.
⚠️ `aspect-ratio` 는 서버가 잰 값이 인라인으로 온다. 없으면 로드 뒤 한 번 출렁인다. */
.np-img{
/* 🔴 판보다 조금 크다. 판은 9px 글자를 13px 상자에 담지만, 96px 원본을 그 크기로 줄인
래스터는 획이 통째로 사라진다(규격서 §함정 첫 줄). 자리를 흔들지 않는 선에서 키운다. */
display:inline-block;height:1.55em;width:auto;max-width:100%;
vertical-align:middle;object-fit:contain;
}
.np-img.is-glow{filter:drop-shadow(0 0 3px var(--np-accent))}
@keyframes npSparkle{0%,100%{filter:brightness(1)}45%{filter:brightness(1.5) saturate(1.15)}}
.np-plate.motion-sparkle{animation:npSparkle 2.4s ease-in-out infinite}
@keyframes npPulse{0%,100%{text-shadow:0 0 4px var(--np-accent)}50%{text-shadow:0 0 13px var(--np-accent),0 0 4px var(--np-color)}}
.np-plate.motion-pulse{animation:npPulse 1.9s ease-in-out infinite}
/* `flow` — 판 위로 빛이 흐른다(배경 두 겹 중 위쪽만 민다). */
@keyframes npPlateFlow{to{background-position:-220% 0,0 0}}
.np-plate.motion-flow{
background-image:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.30) 50%,transparent 65%),
linear-gradient(90deg,rgba(8,10,17,.96),rgba(8,10,17,.60) 50%,rgba(8,10,17,.96));
background-size:220% 100%,100% 100%;
animation:npPlateFlow 3.2s linear infinite;
}
/* ⚠️ 멀미 방지 — 판은 **진짜 배경**이라 애니메이션만 꺼도 그대로 보인다.
⚠️ 글자를 뚫어 배경을 비치는 방식(`background-clip:text`)으로 모션을 만들지 말 것 —
애니메이션을 끈 순간 글자가 투명한 채로 남아 **이름이 사라진다**. 2026-09-06 까지
맨 글자용 `flow` 가 그 방식이었고, 되돌림 규칙을 짝으로 달아야 했다. */
@media(prefers-reduced-motion:reduce){
.np-plate.motion-sparkle,.np-plate.motion-pulse,.np-plate.motion-flow{animation:none}
}
/* 칭호 판을 **줄줄이** 늘어놓는 목록(칭호 고르기 창 · 보스전 확률표) — 화면 밖 줄은 그리지 않는다(2026-09-16).
칭호 개수 상한이 없어졌다. 판 연출 셋 중 둘(맥동·색 흐름)은 GPU 합성이 안 돼 매 프레임 다시 칠하므로,
줄이 늘면 **안 보이는 줄**까지 칠하던 비용이 그대로 쌓였다(80줄 헤드리스 실측: 주 스레드 일 약 30% 감소).
`auto` 는 화면 안에서는 평소대로 그리고 밖으로 나가면 건너뛴다.
⚠ `contain-intrinsic-size` 는 **안쪽(content) 높이**이고, **아직 한 번도 안 그린 줄**에만 쓰인다
(`auto` 가 한 번 그린 뒤로는 실제 크기를 기억한다) — 즉 첫 스크롤 길이만 좌우한다. 테두리·여백까지
넣으면 그 길이가 출렁인다(처음 41px 로 넣었더니 80줄 목록이 3551→4499px).
⚠ 확률표 줄의 **모양은 worldboss.css 가 소유한다** — 그 파일에도 「이 값을 다시 재라」를 적어 뒀다.
규칙째 옮기는 편이 낫지만 그건 dungeon.js 캐시버스터 연쇄가 필요하다(다음 연쇄 몫).
⚠ 이 속성은 줄 안쪽을 **칠하기 경계로 자른다** — 발광(3px)은 여백(8·7px) 안이라 안 잘린다.
줄 밖으로 튀어나오는 장식을 달면 그 장식이 잘린다. 줄마다 픽셀 맞춤이 따로 돌아 윤곽이 0.5px 까지 밀릴 수 있다. */
.title-opt,.wb-odds-row{content-visibility:auto}
.title-opt{contain-intrinsic-size:auto 18.4px}
.wb-odds-row{contain-intrinsic-size:auto 18.5px}
/* 헤더 칭호 — 레벨 뱃지·꾸미기 핀과 나란한 한 칸이다(별개 축, 계획서 §0-2).
⚠️ `.who` 는 nowrap 한 줄이라 자리를 다투는 칸이다 — 칭호가 길면 이름을 밀어낸다.
그래서 폭 상한을 두고 넘치면 판 안에서 잘린다(이름이 우선이다). */
/* 판이 곧 버튼이다 — 테두리·배경을 얹으면 칭호 판 위에 또 상자가 생긴다. */
.gh-title{
display:inline-flex;align-items:center;min-width:0;max-width:38%;margin-right:4px;
padding:0;border:0;background:none;font:inherit;cursor:pointer;
}
.gh-title:active{transform:translateY(1px)}
.gh-title:empty{display:none}
.gh-title .np-img{height:18px}
.gh-title .np-plate{
font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;padding:0 8px;
overflow:hidden;text-overflow:ellipsis;
}
/* ── 칭호 축포(NEW TITLE) ─────────────────────────────────
처음 받은 칭호를 크게 한 번 보여 주는 **공용 부품**의 그림. 마크업은 title-award.js 가
만들고, 두 화면이 같은 판을 쓴다 — 월드보스 토벌 크레딧 상단과 경매 낙찰 축하 카드.
⚠️ **worldboss.css 가 아니라 여기 있는 이유**: 경매 무대에서는 보스 스타일시트가
로드되지 않는다(화면마다 필요한 시트만 받는다). 한쪽에만 두면 같은 부품이 한 화면에서
민무늬로 뜬다.
⚠️ 판(.np-plate) 그림은 위 「이름표 스킨(칭호)」 절이 그린다 — 여기 규칙은 **등장**뿐이다.
⚠️ **어디에 띄울지는 각 화면이 정한다**(worldboss.css .wb-title-award ·
auction-stage.css .au-title-award). 여기에 위치를 적으면 두 화면이 서로를 민다. */
/* 뒤에서 번지는 빛 — 판 자체를 건드리지 않고 '무대 조명'만 얹는다. */
.wta-ray{
position:absolute;z-index:-1;left:50%;top:46%;width:160%;height:210%;
transform:translate(-50%,-50%);
background:radial-gradient(ellipse at 50% 50%,rgba(255,232,163,.34),rgba(255,182,66,.12) 42%,transparent 72%);
filter:blur(3px);animation:wtaGlow 2.8s ease-out both;
}
.wta-eyebrow{
color:#ffd875;font-family:var(--wb-font,"Galmuri11","Galmuri9",sans-serif);font-weight:900;
font-size:clamp(8px,1.2vw,12px);line-height:1;letter-spacing:clamp(3px,1.2vw,9px);
text-shadow:0 2px 0 #190d08,0 0 16px rgba(255,191,61,.7);
opacity:0;animation:wtaEyebrowIn .5s ease-out both;
}
/* 한 줄 = 판 + 닉네임. `--wta-i` 로 줄마다 조금씩 늦게 들어온다(동시에 튀면 뭉쳐 보인다). */
.wta-row{
position:relative;z-index:0;display:grid;justify-items:center;gap:3px;
opacity:0;animation:wtaRowIn .74s cubic-bezier(.16,.86,.24,1.02) both;
animation-delay:calc(.22s + var(--wta-i,0) * .16s);
}
.wta-plate{font-size:clamp(15px,3.4vw,27px);line-height:1.2}
/* 축포의 그림 칭호 — 판과 같은 높이로 맞춘다(판은 .82em × 1.5 ≒ 1.23em). */
.wta-plate .np-img{height:1.5em}
.wta-who{
font-style:normal;color:#fff3d6;font-size:clamp(10px,1.7vw,15px);letter-spacing:.06em;
text-shadow:0 2px 0 #190d08,0 0 12px rgba(0,0,0,.8);
}
/* 판 뒤에서 한 번 퍼지고 사라지는 고리 — 등급색(`--wta-accent`)을 그대로 쓴다. */
.wta-ring{
position:absolute;z-index:-1;left:50%;top:30%;width:clamp(86px,20vw,168px);aspect-ratio:1;
border:2px solid var(--wta-accent,#ffd875);border-radius:50%;
opacity:0;animation:wtaRing 1.1s ease-out both;
animation-delay:calc(.3s + var(--wta-i,0) * .16s);
}
.wta-more{margin:2px 0 0;color:#e7d7bd;font-size:clamp(9px,1.3vw,12px);letter-spacing:.08em}
@keyframes wtaGlow{0%{opacity:0}30%{opacity:1}100%{opacity:.55}}
@keyframes wtaEyebrowIn{0%{opacity:0;letter-spacing:2px}100%{opacity:1}}
@keyframes wtaRowIn{
0%{opacity:0;transform:translateY(-18px) scale(.8)}
62%{opacity:1;transform:translateY(3px) scale(1.07)}
100%{opacity:1;transform:none}
}
@keyframes wtaRing{0%{opacity:.8;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.3)}}
/* ⚠️ 멈추기만 하면 **안 보인다** — 줄·머리글의 시작값이 opacity:0 이라 애니메이션이
끝값을 만들어 준다. 끄는 자리에서 끝값을 손으로 되돌려 놔야 한다(칭호 판 CSS 와 같은 함정).
⚠️ 부모(.wb-title-award 등)로 좁히지 않는다 — 좁히면 새로 붙는 화면마다 이 되돌림을
다시 적어야 하고, 빠뜨리면 그 화면에서만 축포가 **투명한 채로** 남는다. */
@media(prefers-reduced-motion:reduce){
.wta-eyebrow,.wta-row{animation:none;opacity:1;transform:none}
.wta-ray{animation:none;opacity:.55}
.wta-ring{animation:none;opacity:0}
}
/* ── 칭호 서랍 ─────────────────────────────────────────────
고르는 화면이다. 판 그림은 nameplate.js 가 그리고(`.np-plate`), 여기서는 **줄의 배치**만
정한다 — 판 모양을 여기서 다시 손대면 3D·순위표의 칭호와 다른 물건이 된다.
⚠️ 미보유 칭호도 흐리게 보여 준다. 뭘 모을 수 있는지 안 보이면 모을 이유가 안 생긴다
(도감과 같은 이유 · 펫 치장이 죽은 원인 중 하나가 "그림을 볼 화면이 없다"였다). */
.nick-title-link{
display:block;width:100%;margin:10px 0 0;padding:8px;font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;cursor:pointer;
color:var(--gold);background:transparent;border:2px dashed var(--line);
}
.nick-title-link:active{transform:translateY(1px)}
.title-card{max-width:340px}
.title-lead{margin:6px 0 10px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;color:var(--muted)}
.title-list{display:grid;gap:6px;max-height:46vh;overflow-y:auto;padding:2px}
.title-note{margin:8px 0 0;min-height:14px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.title-opt{
display:flex;align-items:center;gap:8px;width:100%;
padding:8px 9px;font-family:inherit;text-align:left;cursor:pointer;
color:var(--ink);background:var(--panel);border:2px solid var(--line);
}
.title-opt:active{transform:translateY(1px)}
/* 지금 걸고 있는 것 — 테두리 하나로만 말한다(판 자체가 이미 화려하다). */
.title-opt.on{border-color:var(--gold);background:rgba(242,193,78,.10)}
.title-opt.on::after{content:"착용중";margin-left:auto;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--gold)}
/* 미보유 — 누를 수는 없지만 **무엇인지는 보인다**. */
.title-opt.locked{cursor:not-allowed;opacity:.42;border-style:dashed}
.title-opt.locked::after{content:"미보유";margin-left:auto;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.title-opt-none{color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
/* 획득처 — 미보유 줄에만 붙는다. 「미보유」 표 왼쪽에 서서 "뭘 하면 받는지"를 말한다. */
.title-opt-how{margin-left:auto;padding-left:6px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--gold);opacity:.85}
.title-opt.locked .title-opt-how{opacity:1}
/* 획득처가 있으면 「미보유」 표가 그 오른쪽에 온다 — margin-left:auto 가 겹치지 않게. */
.title-opt.locked:has(.title-opt-how)::after{margin-left:6px}
/* ══ 종 지정색 그라데이션 + 도감 연출 프리셋 (2026-09-08) ═══════════════════
등급색 5종 위에 얹던 신호가 '색 하나'로 포화됐다(히든·이벤트 종이 늘면서 빨강 계열끼리
구분이 안 되기 시작). 축을 둘로 늘린다 —
.grad 짝 색이 색1과 **실제로 다를 때만** 붙는다 → 색 하나짜리 종은 지금과 픽셀 단위로 같다
.fx-* 연출 프리셋(core DEX_FX_KEYS 와 같은 닫힌 목록). 값은 클래스 이름으로만 쓰인다
같은 fx 클래스가 **카드와 글자 두 곳에** 붙는다(운영자는 '연출 하나'를 고르고, 그게
테두리와 이름을 함께 꾸민다). 그래서 규칙은 요소를 명시해 가른다 — 아래 두 목록이 그것이고,
새 화면에 연출을 붙이려면 해당 목록에 셀렉터를 추가한다.
⚠ 픽셀 테마라 모서리 둥글기가 없다 → 정지 그라데이션은 `border-image` 한 줄로 끝난다.
⚠ 흐르는 테두리는 background 2겹(안쪽 padding-box / 테두리 border-box)으로 만든다.
안쪽에 다시 칠할 색이 요소마다 달라서 `--fx-inner` 를 요소별로 준다. */
/* ── 정지 그라데이션 ─────────────────────────────────────────────────── */
.pet-card.grad,.pet-slot.filled.grad,.craft-cell.grad,.craft-slot.filled.grad,
.dex-card.grad,.sh-pet.grad,.dex-modal-card.grad,.craft-guide-chip.grad{
border-image:linear-gradient(135deg,var(--pet-bc),var(--pet-bc2)) 1;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.pet-card-name.grad,.pet-slot-name.grad,.dex-name.grad,.dex-tag.rarity.grad,.rk-rarity.grad{
/* ⚠ 폴백을 빼지 말 것 — 변수가 비면 그라데이션이 통째로 무효가 되고, 남는 건
`color:transparent` 뿐이라 **이름이 사라진다**. 실패해도 '중립색으로 보임'이어야 한다. */
background-image:linear-gradient(100deg,var(--pet-lc,#94a3b8),var(--pet-lc2,var(--pet-lc,#94a3b8)));
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
/* 등급 배지는 평소 배경 틴트로 모양을 낸다. 글자 연출이 켜지면 그 배경 자리를 글자용
그라데이션이 쓰므로(배경을 글자 모양으로 오려 쓴다) 틴트를 **테두리로 옮겨** 모양을 지킨다.
이때 game.js 는 인라인 `background`/`color` 를 아예 안 붙인다 — 붙으면 단축 속성이
그라데이션을 되돌려 글자가 사라진다. */
.dex-tag.rarity.grad,.rk-rarity.grad,
.dex-tag.rarity.fx-flow,.rk-rarity.fx-flow,
.dex-tag.rarity.fx-shimmer,.rk-rarity.fx-shimmer,
.dex-tag.rarity.fx-rainbow,.rk-rarity.fx-rainbow{
background-color:transparent;box-shadow:inset 0 0 0 1px var(--pet-lc,#94a3b8);
}
}
/* ── 연출: 흐르는 테두리 / 무지개 ────────────────────────────────────── */
.pet-card.pet-fx,.pet-slot.filled.pet-fx,.dex-modal-card.pet-fx{--fx-inner:var(--panel)}
.craft-cell.pet-fx,.craft-slot.filled.pet-fx,.dex-card.pet-fx,.sh-pet.pet-fx{--fx-inner:var(--panel2)}
.pet-card.fx-flow,.pet-slot.filled.fx-flow,.craft-cell.fx-flow,.craft-slot.filled.fx-flow,
.dex-card.fx-flow,.sh-pet.fx-flow,.dex-modal-card.fx-flow,
.pet-card.fx-shimmer,.pet-slot.filled.fx-shimmer,.craft-cell.fx-shimmer,.craft-slot.filled.fx-shimmer,
.dex-card.fx-shimmer,.sh-pet.fx-shimmer,.dex-modal-card.fx-shimmer,
.pet-card.fx-rainbow,.pet-slot.filled.fx-rainbow,.craft-cell.fx-rainbow,.craft-slot.filled.fx-rainbow,
.dex-card.fx-rainbow,.sh-pet.fx-rainbow,.dex-modal-card.fx-rainbow{
/* 테두리를 투명하게 비워 아래 그라데이션이 그 자리에 보이게 한다. 샤이니의 금테(!important)와
겹치면 이쪽이 이긴다 — 반짝임 자체(글로우·광택 스윕)는 그대로 남는다. */
border-color:transparent!important;
border-image:none;
background-image:linear-gradient(var(--fx-inner),var(--fx-inner)),var(--fx-ring);
background-origin:padding-box,border-box;
background-clip:padding-box,border-box;
background-repeat:no-repeat,repeat;
background-size:auto,200% 100%;
animation:petFxFlow 2.8s linear infinite;
}
/* ⚠ 띠는 **양 끝 색이 같아야** 한 바퀴가 이어진다 — 다르면 한 주기마다 색이 툭 끊긴다. */
.fx-flow{--fx-ring:linear-gradient(90deg,var(--pet-bc),var(--pet-bc2),var(--pet-bc))}
.fx-shimmer{--fx-ring:linear-gradient(100deg,
var(--pet-bc) 0%,var(--pet-bc2) 34%,#ffffff 50%,var(--pet-bc2) 66%,var(--pet-bc) 100%)}
/* 무지개는 지정색을 쓰지 않는다 — 여섯 색 고정 팔레트가 곧 이 연출의 정체다. */
.fx-rainbow{--fx-ring:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e,#0ea5e9,#8b5cf6,#f43f5e)}
@keyframes petFxFlow{from{background-position:0 0,0% 50%}to{background-position:0 0,200% 50%}}
/* ── 연출: 맥동 글로우 ───────────────────────────────────────────────── */
/* box-shadow 가 아니라 filter 로 낸다 — .bc 카드가 안쪽 링을 box-shadow 로 그리고 있어서
그쪽을 건드리면 링이 통째로 사라진다.
맥동은 **글자에도** 걸린다. 다만 글자 쪽은 색을 건드리지 않고 글로우만 준다 — 배경으로
오려 그리는 연출이 아니라서 등급 배지의 인라인 틴트를 그대로 둬도 된다(game.js textPaint). */
.pet-card.fx-pulse,.pet-slot.filled.fx-pulse,.craft-cell.fx-pulse,.craft-slot.filled.fx-pulse,
.dex-card.fx-pulse,.sh-pet.fx-pulse,.dex-modal-card.fx-pulse,.craft-guide-chip.fx-pulse{
animation:petFxPulse 1.9s ease-in-out infinite;
}
.pet-card-name.fx-pulse,.pet-slot-name.fx-pulse,.dex-name.fx-pulse,
.dex-tag.rarity.fx-pulse,.rk-rarity.fx-pulse{
animation:petFxPulseText 1.9s ease-in-out infinite;
}
@keyframes petFxPulse{
0%,100%{filter:drop-shadow(0 0 1px var(--pet-bc-glow))}
50%{filter:drop-shadow(0 0 7px var(--pet-bc-glow)) drop-shadow(0 0 13px var(--pet-bc-glow))}}
/* 글자는 글로우가 번지면 금방 뭉개진다 — 카드보다 훨씬 얕게 준다. */
@keyframes petFxPulseText{
0%,100%{filter:none}
50%{filter:drop-shadow(0 0 3px var(--pet-lc,#94a3b8)) drop-shadow(0 0 7px var(--pet-lc,#94a3b8))}}
/* ── 연출: 이름 반짝임 / 무지개 글자 ─────────────────────────────────── */
/* background-clip:text 를 못 쓰는 브라우저에서 글자가 통째로 사라지지 않도록 @supports 안에 둔다. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.pet-card-name.fx-flow,.pet-slot-name.fx-flow,.dex-name.fx-flow,
.dex-tag.rarity.fx-flow,.rk-rarity.fx-flow{
/* 폴백 이유는 위 `.grad` 와 같다 — 변수가 비어도 이름은 보여야 한다. */
background-image:linear-gradient(90deg,
var(--pet-lc,#94a3b8),var(--pet-lc2,var(--pet-lc,#94a3b8)),var(--pet-lc,#94a3b8));
background-size:200% 100%;background-repeat:repeat;
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
animation:petFxFlowText 2.8s linear infinite;
}
.pet-card-name.fx-shimmer,.pet-slot-name.fx-shimmer,.dex-name.fx-shimmer,
.dex-tag.rarity.fx-shimmer,.rk-rarity.fx-shimmer{
/* 양 끝이 같은 색이라 한 바퀴가 이어진다(끝을 다르게 두면 주기마다 색이 툭 끊긴다). */
background-image:linear-gradient(100deg,
var(--pet-lc,#94a3b8) 0%,var(--pet-lc2,var(--pet-lc,#94a3b8)) 34%,#ffffff 50%,
var(--pet-lc2,var(--pet-lc,#94a3b8)) 66%,var(--pet-lc,#94a3b8) 100%);
background-size:300% 100%;background-repeat:repeat;
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
animation:petFxShimmer 3s linear infinite;
}
.pet-card-name.fx-rainbow,.pet-slot-name.fx-rainbow,.dex-name.fx-rainbow,
.dex-tag.rarity.fx-rainbow,.rk-rarity.fx-rainbow{
background-image:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e,#0ea5e9,#8b5cf6,#f43f5e);
background-size:300% 100%;background-repeat:repeat;
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
animation:petFxShimmer 3.6s linear infinite;
}
}
@keyframes petFxShimmer{from{background-position:0% 50%}to{background-position:300% 50%}}
@keyframes petFxFlowText{from{background-position:0% 50%}to{background-position:200% 50%}}
/* ── 화면 밖에서는 재운다 ────────────────────────────────────────────── */
/* 도감은 카드를 200장까지 깐다. 등급 오라(SMIL)를 재우는 그 옵저버가 `fx-off` 를 토글해 준다
(game.js ensureAuraObserver) → 동시에 도는 애니 수가 '보이는 카드 수'로 고정된다. */
.fx-off{animation-play-state:paused!important}
/* 맥동만은 **멈추지 말고 끈다** — 일시정지는 filter 를 그 값에 얼려 두는 것이라,
화면 밖 카드가 저마다 렌더 표면을 계속 들고 있게 된다(색 계열은 멈춰도 공짜다). */
/* 움직이는 치장(game.js `cosmeticMotionPlan` — 키프레임은 치장 종류마다 한 벌) — 화면 밖(`fx-off`)·절전에서는 멈춘다.
변환 기준은 조각의 제자리 좌표(0,0) — 중심이 필요한 회전·크기는 레시피가 감싸는 묶음으로 옮겨 둔다. */
.pcm{transform-box:view-box;transform-origin:0 0}
.fx-off .pcm,body.power-save .pcm{animation-play-state:paused!important}
/* 오라 스킨 몸 빛(game.js `skinAuraMarkup` · 2026-09-15) — 펫 뒤 옅은 빛 + 몸 둘레를 도는 빛줄기 + 떠오르는 조각 셋.
색은 스킨마다 인라인 변수(--sa1~3)뿐이고 움직임은 이 한 벌이다. 등급 오라(.pet-aura)보다 **먼저** 깔려 그 뒤에 선다.
화면 밖 `fx-off` · 절전은 멈추고, 오라 움직임을 끄면(`still`) 빛만 남긴다. 모션 감소는 느리게(끄지 않는다). */
.pet-skin-aura{position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;border-radius:50%;
background:radial-gradient(circle at 50% 56%,color-mix(in srgb,var(--sa1) 46%,transparent) 0,color-mix(in srgb,var(--sa2) 18%,transparent) 42%,transparent 66%)}
.pet-skin-aura::before{content:"";position:absolute;inset:10%;border-radius:50%;
background:conic-gradient(from 0deg,transparent 0 58%,color-mix(in srgb,var(--sa3) 70%,transparent) 72%,color-mix(in srgb,var(--sa1) 80%,transparent) 80%,transparent 90%);
-webkit-mask:radial-gradient(circle,transparent 50%,#000 55%,#000 66%,transparent 71%);mask:radial-gradient(circle,transparent 50%,#000 55%,#000 66%,transparent 71%);
animation:petSkinSpin 2.6s linear infinite}
.pet-skin-aura i{position:absolute;left:47%;bottom:26%;width:9%;height:9%;border-radius:50%;background:var(--sa2);opacity:0;
box-shadow:0 0 4px var(--sa1);animation:petSkinMote 2.4s ease-out infinite}
.pet-skin-aura i:nth-child(2){left:28%;background:var(--sa1);animation-delay:.8s}
.pet-skin-aura i:nth-child(3){left:66%;background:var(--sa3);animation-delay:1.6s}
@keyframes petSkinSpin{to{transform:rotate(360deg)}}
@keyframes petSkinMote{0%{transform:translateY(0) scale(.7);opacity:0}25%{opacity:.95}100%{transform:translateY(-260%) scale(.25);opacity:0}}
.pet-skin-aura.still::before{animation:none}
.pet-skin-aura.still i{display:none}
.pet-skin-aura.fx-off::before,.pet-skin-aura.fx-off i,body.power-save .pet-skin-aura::before,body.power-save .pet-skin-aura i{animation-play-state:paused!important}
.ornament-skin-aura{width:118%;height:118%}
/* 요정(2D · game.js `cosmeticFrontMarkup` · 2026-09-15) — 펫 그림 오른쪽 위에서 둥실거리며 날갯짓한다. 색은 인라인 변수
(--fy1 몸 · --fy2 날개 · --fy3 빛)뿐이고 움직임은 이 한 벌이다. 화면 밖 `fx-off` · 절전은 멈추고 오라 움직임을 끄면 선다. */
.pet-fairy{position:absolute;left:68%;top:4%;width:24%;height:24%;pointer-events:none;z-index:2;animation:petFairyBob 1.7s ease-in-out infinite}
.pet-fairy b{position:absolute;left:30%;top:32%;width:40%;height:40%;border-radius:50%;background:var(--fy1);
box-shadow:0 0 0 1px color-mix(in srgb,var(--fy1) 55%,#000 45%),0 0 5px 2px var(--fy3)}
.pet-fairy i{position:absolute;top:6%;width:46%;height:46%;border-radius:60% 60% 45% 45%;background:color-mix(in srgb,var(--fy2) 82%,transparent);
animation:petFairyFlap .24s ease-in-out infinite alternate}
.pet-fairy i:first-child{left:-2%;transform-origin:100% 85%}
.pet-fairy i:nth-child(2){right:-2%;transform-origin:0 85%;animation-delay:-.12s}
@keyframes petFairyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-22%)}}
@keyframes petFairyFlap{from{transform:scaleX(1)}to{transform:scaleX(.3)}}
.pet-fairy.still,.pet-fairy.still i{animation:none}
.pet-fairy.fx-off,.pet-fairy.fx-off i,body.power-save .pet-fairy,body.power-save .pet-fairy i{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.pet-fairy{animation-duration:4.8s}.pet-fairy i{animation-duration:.7s}}
/* LED 고리(2D · game.js `cosmeticBackMarkup`) — 발밑 타원에 전구 조각이 둥글게 켜지고 돈다. 원을 돌리고(합성기 전용 transform)
부모가 납작하게 누른다 — 색은 인라인 변수(--led1~3)뿐. 화면 밖·절전은 멈추고 움직임을 끄면 선다. */
/* 타원 가운데 = 칸 높이 88%(발 언저리) — 아래 호가 칸 안(≈99%)에서 끝난다. 칸 밖으로 내리면 목록 카드에서 이름 줄을 긋는다(헤드리스 확인). */
.pet-led-ring{position:absolute;left:12%;width:76%;top:50%;aspect-ratio:1;pointer-events:none;z-index:0;transform:scaleY(.3)}
.pet-led-ring::before{content:"";position:absolute;inset:0;border-radius:50%;
background:conic-gradient(var(--led1) 0 11%,transparent 11% 17%,var(--led2) 17% 28%,transparent 28% 34%,var(--led3) 34% 45%,transparent 45% 50%,
var(--led1) 50% 61%,transparent 61% 67%,var(--led2) 67% 78%,transparent 78% 84%,var(--led3) 84% 95%,transparent 95%);
-webkit-mask:radial-gradient(circle,transparent 58%,#000 61%,#000 78%,transparent 81%);mask:radial-gradient(circle,transparent 58%,#000 61%,#000 78%,transparent 81%);
animation:petLedSpin 1.6s linear infinite}
@keyframes petLedSpin{to{transform:rotate(360deg)}}
.pet-led-ring.still::before{animation:none}
.pet-led-ring.fx-off::before,body.power-save .pet-led-ring::before{animation-play-state:paused!important}
/* 몸 LED(2D) — 펫 그림 테두리에 색 그림자. **계단 애니**(한 박자에 한 번 바뀐다)라 매 프레임 다시 칠하지 않는다. */
.pet-aura-wrap.led-body>.pet-img{filter:drop-shadow(0 0 1px var(--lb1)) drop-shadow(0 0 1.5px var(--lb1))}
.pet-aura-wrap.led-blink>.pet-img{animation:petLedBlink 1.8s steps(1,end) infinite}
.pet-aura-wrap.led-cycle>.pet-img{animation:petLedCycle 3.6s steps(1,end) infinite}
@keyframes petLedBlink{0%{filter:drop-shadow(0 0 1px var(--lb1)) drop-shadow(0 0 1.5px var(--lb1))}
50%{filter:drop-shadow(0 0 1px var(--lb2)) drop-shadow(0 0 1.5px var(--lb2))}}
@keyframes petLedCycle{0%{filter:drop-shadow(0 0 1px var(--lb1)) drop-shadow(0 0 1.5px var(--lb1))}
33%{filter:drop-shadow(0 0 1px var(--lb2)) drop-shadow(0 0 1.5px var(--lb2))}
66%{filter:drop-shadow(0 0 1px var(--lb3)) drop-shadow(0 0 1.5px var(--lb3))}}
.pet-aura-wrap.led-body.fx-off>.pet-img,body.power-save .pet-aura-wrap.led-body>.pet-img{animation-play-state:paused!important}
/* 탈것(2D · 발판형) — 펫을 같은 칸 안에서 줄여 발판 위로 올린다(목록 줄 높이·가상 스크롤 가정은 그대로). 발판은 CSS 한 벌. */
.pet-aura-wrap.mounted>.pet-img{transform:translateY(-12%) scale(.84)}
.pet-mount{position:absolute;left:8%;right:8%;bottom:0;height:22%;pointer-events:none;z-index:1;animation:petMountHover 2.4s ease-in-out infinite}
.pet-mount.m-cloud{background:
radial-gradient(ellipse 22% 42% at 26% 58%,#fff 95%,transparent 100%),
radial-gradient(ellipse 26% 52% at 50% 44%,#fff 95%,transparent 100%),
radial-gradient(ellipse 22% 42% at 74% 58%,#f4f8ff 95%,transparent 100%),
radial-gradient(ellipse 46% 30% at 50% 76%,#dfeaff 95%,transparent 100%)}
.pet-mount.m-board{bottom:6%;height:11%;border-radius:999px;background:#2b2d42;box-shadow:0 0 0 1px #8d99ae,0 3px 6px -1px #00f5d4;animation-duration:1.1s}
.pet-mount.m-board::before{content:"";position:absolute;left:13%;right:13%;top:38%;height:22%;border-radius:2px;background:#00f5d4}
@keyframes petMountHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-7%)}}
.pet-mount.still{animation:none}
.pet-mount.fx-off,body.power-save .pet-mount{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.pet-mount{animation-duration:6s}}
/* 꾸미기 창 전광판(계정) — 칸은 미리보기와 **같은 폭으로 고정**한다. 부모(`.dress-head`)가 세로 flex + 가운데
정렬이라 폭을 안 주면 칸이 글자 폭에 달라붙고(GG 는 21px), 그 좁은 창 안에서 글자가 계속 흘러 영영 다 안 보인다.
흐르기는 **넘칠 때만** — 3D 전광판(`cube/render/pet_cosmetic_fx.js` `drawSignBoard`)과 같은 규칙이다.
끝값 `translateX(calc(100cqw - 100%))` = `칸 폭 − 글자 칸 폭`(cqw 는 칸 자신 — `container-type`). 글자가
들어가면 `min-width:100%` 가 둘을 같게 만들어 이동량이 0 이고, 넘칠 때만 넘친 만큼 흐른다.
⚠ transform 만 움직인다 — margin 을 움직이면 창이 열려 있는 내내 매 프레임 레이아웃을 다시 짠다.
(cqw 를 모르는 옛 브라우저는 이 끝값을 버려 글자가 가운데 가만히 선다 — 못 읽는 일은 없다.) */
.dress-led-sign{width:var(--dress-w,184px);max-width:100%;container-type:inline-size;margin:0 auto 6px;overflow:hidden;border-radius:6px;background:#201711;border:1px dashed #ffb703;
color:#ffd166;font:700 13px/22px ui-monospace,monospace;letter-spacing:.12em;white-space:nowrap;text-align:center}
.dress-led-sign span{display:inline-block;min-width:100%;animation:petSignScroll 6s linear infinite}
.dress-led-sign.still span{animation:none}
@keyframes petSignScroll{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(calc(100cqw - 100%))}}
@media (prefers-reduced-motion:reduce){.pet-led-ring::before{animation-duration:4.6s}.dress-led-sign span{animation-duration:12s}}
/* 나만의 전광판(2026-09-28) — 새긴 글 판은 하늘색. 새기기 창은 닉네임 변경 창 틀(offline-modal · nick-*) 그대로이고,
꾸미기 창(dex-modal 85) 위에서 뜨므로 층만 올린다. */
.dress-led-sign.custom{border-color:var(--sign-frame,#ff4da6);color:var(--sign-color,#ff8fc7);font-family:"Galmuri11","Galmuri9",sans-serif;letter-spacing:.04em}
.sign-engrave-modal{z-index:90}
.sign-color-field{display:flex;align-items:center;gap:12px;margin:12px 0;text-align:left}
.sign-color-field .nick-input{flex:1;width:auto;margin:0}
#signEngravePreview{width:100%;padding:10px 8px;margin:16px 0;box-sizing:border-box}
#signEngravePreview span{white-space:normal;overflow-wrap:anywhere}
/* 꾸미기 창 칸 탭(2026-09-15 — 칸이 넷 이상일 때) — 도감 필터와 같은 칩이다. */
.dress-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
@media (prefers-reduced-motion:reduce){.pet-skin-aura::before{animation-duration:7.4s}.pet-skin-aura i{animation-duration:6.8s}}
@media (prefers-reduced-motion:reduce){
/* 움직임만 끄고 **색은 남긴다** — 그라데이션 테두리·글자는 그대로 보인다. */
}
/* ══ 미스틱 · 불멸 (2026-09-08) ═══════════════════════════════════════════
레전드 위로 두 등급을 얹었다. 색은 남아 있던 색상 공간을 골랐다 — 청록(미스틱)과
진분홍(불멸)은 기존 다섯(회색·초록·파랑·보라·주황) 어느 것과도 헷갈리지 않는다.
⚠️ `game.js PET_RARITY_HEX` 와 **같은 값**이어야 한다(인라인 주입용 사본이 거기 있다).
⚠️ **채굴장 슬롯은 레전드까지다** — 여기 규칙은 펫 목록·조합·도감 카드에만 쓰인다. */
:root{--mystic:#3fd8e8; --immortal:#ff6f8e}
.pet-slot.mystic,.pet-card.mystic,.craft-cell.mystic,.craft-slot.mystic,.gacha-item.mystic,.fx-cell.mystic{
border-color:var(--pet-bc,var(--mystic));
box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),0 0 10px var(--pet-bc,var(--mystic))}
.pet-slot.immortal,.pet-card.immortal,.craft-cell.immortal,.craft-slot.immortal,.gacha-item.immortal,.fx-cell.immortal{
border-color:var(--pet-bc,var(--immortal));
/* 최상위 등급 — 글로우를 한 겹 더 준다(등급 표시 자체가 신호여야 한다). */
box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),0 0 10px var(--pet-bc,var(--immortal)),0 0 20px var(--pet-bc,var(--immortal))}
.pet-rarity-tag.mystic{color:var(--mystic)}
.pet-rarity-tag.immortal{color:var(--immortal)}
.toast.mystic{border-color:var(--mystic);box-shadow:0 0 14px var(--mystic)}
.toast.immortal{border-color:var(--immortal);box-shadow:0 0 16px var(--immortal)}