/* ===== 글꼴 =====
   docs/폰트원본 의 ttf·otf 를 `_폰트굽기.py` 가 woff2 로 줄여 구운 것이다.
   바깥 글꼴 서버를 타지 않는다 — 비행기 모드에서도 같은 글씨가 나온다.

   본문(400)과 굵은명조(700~900)를 **한 식구로 묶어 두었다.**
   그래서 font-weight:700 이 걸린 자리는 저절로 굵은명조를 집는다 —
   브라우저가 획을 부풀려 만드는 가짜 굵기가 끼지 않는다.
   글자를 더 넣거나 갈았으면 `python _폰트굽기.py --쓰기` 를 돌리고 아래 ?v= 를 올린다 */

/* ── 본문 식구 "Chosun Body" — 화면 글씨의 기본이다 (v118)
   400 자리를 **조선100년체**가 맡는다. 명조보다 획이 촘촘하고 세로로 길어 무협의 결이 산다.
   700 자리는 **굵은명조** 그대로다 — 100년체에는 굵은 판이 아예 없어서,
   한 식구로 안 묶으면 브라우저가 획을 부풀린 가짜 굵기를 만들어 작은 글자에서 뭉갠다.
   ⚠ 100년체는 상용 2,350자만 구워져 있다(폰트 기획 §4). 거기 없는 글자는 뒤의 "Chosun"(명조 11,172자)이 받는다 —
      명호처럼 사람이 직접 치는 칸에서 글꼴이 갈릴 수 있으니, 원본이 있는 집 컴퓨터에서 한 번 다시 구울 것 */
@font-face{font-family:"Chosun Body";src:url("assets/fonts/chosun-story.woff2?v=4") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Chosun Body";src:url("assets/fonts/chosun-km.woff2?v=4") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* ── 명조 식구 "Chosun" — 이제 받침 노릇을 한다.
   100년체에 없는 글자를 받고, 붓글씨에 없는 한자도 여기로 떨어진다 */
@font-face{font-family:"Chosun";src:url("assets/fonts/chosun-nm.woff2?v=4") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
/* 굵기는 **700 하나만** 적는다. `700 900` 같은 범위 표기는 CSS Fonts 4 문법이라
   옛 사파리가 못 읽고 **@font-face 를 통째로 버린다** — 휴대폰에서만 글꼴이 안 나오던 까닭이다.
   700 하나만 적어도 800·900 인 자리는 글꼴 고르기 규칙에 따라 이 얼굴로 내려온다 */
@font-face{font-family:"Chosun";src:url("assets/fonts/chosun-km.woff2?v=4") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Chosun Story";src:url("assets/fonts/chosun-story.woff2?v=4") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
/* 붓글씨는 한자밖에 없다. 범위를 한자로 묶어 두면 한글·숫자가 잘못 집히지 않고,
   한자가 화면에 없는 동안에는 내려받지도 않는다 */
@font-face{font-family:"KW Brush";src:url("assets/fonts/kw-brush.woff2?v=4") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+4E00-9FFF,U+F900-FAFF}

:root{
  /* 잉크 먹빛 — 바탕 그림(bg_app_silk)의 채도에 맞춘다.
     색상(265도)은 원래도 그림과 같았다. 다른 것은 채도뿐이었다 — 25퍼센트는 그림(9퍼센트) 옆에서 보랏빛으로 튀었다.
     면은 11퍼센트로 내리고 강조색(--seal 계열·도 색)은 그대로 둔다. 면이 잠잠해야 강조가 산다 */
  --ink:#110f13; --ink-2:#19171c;
  --panel:#201d24; --panel-2:#29252e;
  --line:#393441; --line-soft:#2d2833;
  --fg:#ece5dc; --fg-mid:#8f94ae; --fg-faint:#62667f;   /* 보조 글자도 푸른 쪽(230도)으로 */
  /* 화면을 거드는 색. 스크롤·칩·화살표·초점 테두리가 다 이 색이다.
     보랏빛이 바탕과 따로 놀아 230도 푸른 쪽으로 옮기고 채도를 28퍼센트로 눌렀다.
     정파 파랑(215도/채도68)과는 색상도 채도도 갈려 헷갈리지 않는다 */
  --seal:#7c86b6; --seal-deep:#333957;
  /* 도(道) */
  --jeong:#5b93e0; --sa:#5fae62; --ma:#e05242; --yo:#a97cff; --hwang:#d4a843; --hyeol:#8c2f2f; --mudo:#8e8a9b;
  /* 카드 테두리 전용 — 도 색의 채도를 3할로 눌러(상한 26퍼센트) 명도 31퍼센트에 맞춘 것.
     원색을 그대로 두르면 카드 한 장 한 장이 소리를 질러 정작 그림이 안 보인다.
     글자·문양·막대에는 위의 원색을 그대로 쓴다 */
  --jeong-e:#3f4c5f; --sa-e:#475748; --ma-e:#60413e; --yo-e:#493a64; --hwang-e:#5f5236; --hyeol-e:#5b4343; --mudo-e:#4e4d51;
  /* 재화 */
  --chungi:#d4a843; --yeong:#a97cff; --jin:#7fd4b0;
  --ok:#6fcf97; --warn:#e8b45f; --danger:#e8695f; --ready:#4dffa0;
  /* 전체보기로 보면 위쪽을 카메라가 문다. 기기가 알려 주면 그 값을, 안 알려 주면 최소치를 쓴다.
     아티팩트는 iframe 안이라 env() 가 0 으로 오는 일이 잦아 최소치가 실제로 일하는 값이다 */
  --top-gap:max(env(safe-area-inset-top),20px);
  --bot-gap:env(safe-area-inset-bottom);
  /* 심경 */
  --simma:#e05a3c; --myeong:#6f7fd8; --chukgi:#57c9a6;
  /* 본문 기본 — 조선100년체(400) + 굵은명조(700). 뒤의 "Chosun"(명조)은 100년체에 없는 글자를 받는다 */
  --sans:"Chosun Body","Chosun","Apple SD Gothic Neo","Malgun Gothic",system-ui,serif;
  /* 제목도 본문과 한 가족이다. 굵기와 자간으로만 층을 나눈다 */
  --serif:var(--sans);
  /* ⚠ 숫자가 굴러가는 자리는 **명조에 남겨 둔다** — 본문만 100년체로 옮겼다 (v118).
     100년체는 숫자 폭이 466·614·634 로 제각각이라(굽기 전 원본부터 그렇다) 그대로 쓰면
     재화·시계가 구를 때마다 자릿수가 옆으로 흔들린다. tabular-nums 를 켜도 글꼴에 그 기능이 없으면 소용없다.
     명조·굵은명조는 둘 다 500 고정이라(§5 에서 굽는 자리에서 맞춰 두었다) 여기만 예전 그대로 둔다 */
  --mono:"Chosun","Apple SD Gothic Neo","Malgun Gothic",system-ui,serif;
  /* 카드 위의 수는 도안의 일부다. 굵기 700 이라 굵은명조를 집는다 */
  --num:var(--mono);
  /* 한자는 붓글씨로 — 한글과 결이 갈려 표식으로 읽힌다.
     이 글꼴에 없는 글자(綠·緣)는 뒤의 명조가 받는다. **본문을 바꿔도 한자는 건드리지 않는다** */
  --han:"KW Brush","Chosun",serif;
  /* 카드 이야기 — 이제 본문과 같은 얼굴이다(둘 다 100년체). 자리를 따로 두는 것은
     나중에 이야기만 다른 글꼴로 되돌리고 싶을 때를 위해서다 */
  --story:"Chosun Story","Chosun",serif;
  --r-s:4px; --r-m:8px; --app-w:430px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-text-size-adjust:100%}
/* ⚠⚠ **글자를 고를 수 없게 한다 — 화면 전체에 한 번만 걸고 다시는 손대지 않는다** (v155) ⚠⚠
   이것은 게임이지 웹페이지가 아니다. 단추나 하단 바를 연달아 두드리면 브라우저가
   **파란 선택 상자**를 쳐 버린다 — 눌린 것도 아니고 고른 것도 아닌 그 네모가 뜨면 판이 문서처럼 보인다.
   예전에는 자리마다 `user-select:none` 을 하나씩 붙였다. 그래서 화면을 고칠 때마다
   새로 만든 자리에 그게 빠져 같은 것이 되풀이해 살아났다 — **여러 번 고쳤고 그때마다 다시 났다.**
   이제 여기 한 줄이 다 맡는다. **새 요소에 따로 붙이지 말고, 이 줄을 지우지도 말 것.**
   글자를 집어야 하는 자리는 아래 `input·textarea` 뿐이다 (§9 · 인수인계 §8) */
html,body{-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
/* 사람이 글자를 치는 칸만 되돌린다 — 명호·명운 코드처럼 집어서 지우고 붙여야 하는 자리다 */
input,textarea{font:inherit;color:inherit;-webkit-user-select:text;user-select:text}
:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.stage{min-height:100svh;display:flex;justify-content:center;
  background:
    radial-gradient(900px 420px at 50% -8%,#2a1f3dcc 0%,transparent 62%),
    linear-gradient(90deg,#06080db8 0%,#110f1373 22%,#110f13c7 42%,#110f13c7 58%,#110f1373 78%,#06080db8 100%),
    url("assets/ui/bg_mountain_night.webp") center/cover no-repeat,
    var(--ink)}
.app{width:100%;max-width:var(--app-w);min-height:100svh;display:flex;flex-direction:column;
  background:var(--ink-2);border-inline:1px solid var(--line-soft);position:relative;overflow:hidden;
  box-shadow:0 0 72px 18px #03050ad9}
@media (min-width:520px){.app{min-height:auto;height:100svh}}
/* 수라 중에는 좌우 여백도 수라장 그림으로 — 산 그림이 남아 있으면 화면이 두 동강 난 것처럼 보인다 */
.stage.inbattle{background:
  linear-gradient(90deg,#05070ae8 0%,#05070a8c 20%,#05070a5c 42%,#05070a5c 58%,#05070a8c 80%,#05070ae8 100%),
  url("assets/ui/bg_battle_outer.webp?v=1") center/cover no-repeat,var(--ink)}
@media (max-width:519px){.stage,.stage.inbattle{background:var(--ink)}.app{box-shadow:none}}
/* 비단 바탕 — 순례길과 수라장을 뺀 모든 화면에 깐다.
   좌우 여백을 채우는 산 그림(.stage) 위에 한 겹 더 얹는 것이라 .app 쪽에 둔다.
   화면(.screen)은 .app 안에서 따로 구르므로 바탕은 스크롤해도 제자리에 있는다 */
.app.silk{background-color:var(--ink-2);
  background-image:
    linear-gradient(180deg,#0b0912c9 0%,#0b09124d 24%,#0b091240 64%,#0b0912d9 100%),
    url("assets/ui/bg_app_silk.webp");
  background-size:cover,cover;background-position:center top,center top;background-repeat:no-repeat}
/* 바탕이 생긴 화면에서는 상자를 딤드로 깔아 뒤가 비치게 한다 — 꽉 막으면 바탕을 깐 뜻이 없다 */
.app.silk .tile{background:linear-gradient(160deg,#201d24bf,#29252ebf);backdrop-filter:blur(3px)}
.app.silk .tile:hover{background:linear-gradient(160deg,#201d24d9,#29252ed9)}
.app.silk .fbtn{background:#201d24a8;backdrop-filter:blur(3px)}
.app.silk .fbtn.pri{background:color-mix(in srgb,var(--seal-deep) 82%,transparent)}
.app.silk .fbtn.dg{background:#241417a8}
.app.silk .ubtn,.app.silk .chip,.app.silk .fsel,.app.silk .fq{background:#201d24a0;backdrop-filter:blur(2px)}
.app.silk .chip.on{background:color-mix(in srgb,var(--seal-deep) 84%,transparent)}
.app.silk .topbar{background:#191320d9;backdrop-filter:blur(7px)}
.app.silk .ftog,.app.silk .askbox,.app.silk .jinbox,.app.silk .devbox{background:#1c1626c4;backdrop-filter:blur(3px)}
.app.silk .signin .si{background:#191320bf}
/* 한지 결 */
.app::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:repeating-linear-gradient(90deg,#ffffff04 0 1px,transparent 1px 3px)}
.app > *{position:relative;z-index:1}
/* ===== 빛무리 (v221 — 장작 연기를 걷고 새로 지었다) =====
   ⚠ **왜 연기를 걷었나.** v178 부터 v220 까지 여덟 판을 손봤지만
   **휴대폰에서 화면이 깜빡이는 것**을 끝내 못 잡았다. 까닭은 연기의 생김새 자체였다 —
   흐릿한 기둥 일곱을 겹치려니 `filter:blur()` 가 필요했고, 그것이 매 프레임 다시 그려졌다.
   v220 에 흐림을 걷었더니 이번에는 **연기처럼 안 보였다.**
   **값싸게 만들 수 없는 연출은 값을 깎는 것이 아니라 바꾸는 것이 맞다.**

   지금 것 — **흰 빛무리 셋**이 배경 바로 위, 다른 UI 뒤에서 천천히 돌아다닌다.
   빛이 스며 비치는 것처럼 보이게 하는 것이 전부다.

   ⚠⚠ **움직이는 것은 `transform` 과 `opacity` 뿐이다.** 그 둘은 다시 그리지 않고 **합치기만** 한다.
   `filter` · `box-shadow` · `backdrop-filter` 를 여기에 **절대 넣지 않는다** — 그 순간 v220 으로 돌아간다.
   부드러운 가장자리는 **그라디언트 멈춤점 여럿**이 만든다. 공짜다.

   ⚠ **가장자리에서 반드시 알파 0 으로 끝낸다.** 0 이 아닌 채로 칸이 끝나면
   그 둘레가 **선으로 보인다** — v221~v222 가 그랬다. 자세한 것은 아래 `.glow i` 주석.
   ⚠ 짙기를 만지는 자리는 **`background` 의 알파 한 곳**이다. 복판이 `26`(=15%)이고
   가장자리로 가며 0 이 된다. 더 흐리게 하려면 그 수만 내린다 —
   `.glow` 나 `i` 의 `opacity` 를 건드리면 숨쉬기(`glowbreathe`)와 겹쳐 셈이 엉킨다.

   수라장은 제 배경과 연출이 따로 있으므로 `.app.fog` 일 때만 켠다. */
.glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity .7s ease}
.app.fog .glow{opacity:1}
/* 원 하나. `aspect-ratio:1` 이라 폭만 주면 정원이 된다 */
.glow i{position:absolute;display:block;
  width:var(--gw,60%);aspect-ratio:1;
  left:var(--gx,20%);top:var(--gy,40%);
  /* ⚠⚠ **테두리 선이 보이던 까닭 셋** (v223). 셋 다 여기서 고쳤다.

     ① **`circle` 만 적으면 그라디언트의 100% 가 「가장 먼 모서리」다.**
        칸이 정사각이니 그 거리는 반지름의 1.41배다. 그래서 `border-radius:50%` 로 자르는
        자리(반지름)에서 그라디언트는 아직 **70% 지점**이었고, 알파가 `0.025` 쯤 남아 있었다.
        **남은 채로 잘리니 그 둘레가 선으로 보인다.**
        → `closest-side` 를 적어 **100% 를 칸의 가장자리에 맞췄다.** 거기서 알파가 0 이다.
     ② **`border-radius:50%` 를 걷었다.** 그라디언트가 가장자리에서 0 이면 자를 것이 없다.
        자르는 일 자체가 선을 만든다.
     ③ **`transparent` 를 `#ffffff00` 으로 바꿨다.** `transparent` 는 규격상 **투명한 검정**이라
        흰빛에서 그리로 건너가는 동안 **잿빛이 섞여 테가 진다.** 같은 흰빛의 알파 0 으로 적어야
        빛깔이 안 흔들린다.

     멈춤점도 여덟 → **열하나**로 늘렸다. 바깥 세 겹은 `04 · 02 · 01 · 00` 으로
     **한 칸(1/255)씩** 내려간다 — 눈이 띠로 못 잡는 폭이다 */
  background:radial-gradient(circle closest-side,
    #ffffff26 0%,#ffffff22 10%,#ffffff1b 22%,#ffffff14 34%,
    #ffffff0e 46%,#ffffff09 58%,#ffffff06 68%,#ffffff04 77%,
    #ffffff02 85%,#ffffff01 92%,#ffffff00 100%);
  will-change:transform,opacity;
  /* 도는 것과 숨쉬는 것을 **따로** 돌린다. 주기가 서로 나눠떨어지지 않아야
     셋이 같은 박자로 뛰지 않는다 — 소수(37·53·71 과 23·29·31)를 쓴다 */
  animation:var(--ga,glowdrift1) var(--gd,53s) ease-in-out infinite,
            glowbreathe var(--gb,29s) ease-in-out infinite}
.glow i:nth-child(1){--gw:66%;--gx:-12%;--gy:26%;--ga:glowdrift1;--gd:53s;--gb:29s}
.glow i:nth-child(2){--gw:52%;--gx: 46%;--gy: 4%;--ga:glowdrift2;--gd:71s;--gb:23s;animation-delay:-19s,-8s}
.glow i:nth-child(3){--gw:44%;--gx: 14%;--gy:58%;--ga:glowdrift3;--gd:37s;--gb:31s;animation-delay:-11s,-17s}
/* 셋 다 **처음과 끝이 같은 자리**다 — 그래야 한 바퀴 돌 때 튀지 않는다.
   길은 서로 다르게 그렸다. 같으면 셋이 줄지어 다니는 것처럼 보인다 */
@keyframes glowdrift1{
  0%,100%{transform:translate(  0%,  0%) scale(1)}
  25%    {transform:translate( 46%,-18%) scale(1.10)}
  50%    {transform:translate( 88%, 22%) scale(.92)}
  75%    {transform:translate( 34%, 46%) scale(1.04)}}
@keyframes glowdrift2{
  0%,100%{transform:translate(  0%,  0%) scale(1)}
  30%    {transform:translate(-52%, 34%) scale(.94)}
  60%    {transform:translate( 18%, 78%) scale(1.12)}
  82%    {transform:translate(-26%, 28%) scale(1)}}
@keyframes glowdrift3{
  0%,100%{transform:translate(  0%,  0%) scale(1)}
  22%    {transform:translate( 62%, 26%) scale(1.06)}
  48%    {transform:translate(104%,-14%) scale(.9)}
  74%    {transform:translate( 40%,-38%) scale(1.08)}}
/* 숨쉬기 — 밝기만 오르내린다. 자리와 따로 도므로 되풀이가 눈에 안 잡힌다 */
@keyframes glowbreathe{0%,100%{opacity:.62} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .glow i{animation:none;opacity:.7} }
/* ⚠⚠ **휴대폰에서는 `backdrop-filter` 를 끈다** (v220).
   `backdrop-filter` 는 **제 뒤에 깔린 것을 매 프레임 다시 읽어** 흐린다.
   그런데 그 뒤에서 연기가 **쉬지 않고 움직인다** — 그래서 이 딱지가 붙은 것들
   (윗줄 · 큰 칸 · 단추 · 칩 · 고르개 · 찾기 칸 · 필터 접기 · 물음 상자)이
   **전부 매 프레임 다시 그려진다.** 연보에서는 그런 칸이 열 개가 넘는다.

   휴대폰에서 3px 흐림은 **눈에 보이지도 않으면서 값은 가장 비싸다.** 끄고,
   대신 바탕을 조금 더 진하게 해 글자가 묻히지 않게 한다.
   ⚠ 넓은 화면(데스크톱)은 그대로 둔다 — 거기서는 값이 문제가 안 되고 보기에도 낫다 */
@media (max-width:640px){
  .app.silk .tile{backdrop-filter:none;background:linear-gradient(160deg,#201d24ef,#29252eef)}
  .app.silk .fbtn{backdrop-filter:none;background:#201d24e6}
  .app.silk .ubtn,.app.silk .chip,.app.silk .fsel,.app.silk .fq{backdrop-filter:none;background:#201d24e0}
  .app.silk .topbar{backdrop-filter:none;background:#191320f7}
  .app.silk .ftog,.app.silk .askbox,.app.silk .jinbox,.app.silk .devbox{backdrop-filter:none;background:#1c1626f0}
  /* ⚠ `.varr` 는 이 블록보다 **한참 아래**에 정의돼 있다. 같은 촘촘함이면 뒤가 이기므로
     `.app` 을 앞에 붙여 한 칸 올린다 — 자리와 상관없이 이긴다 */
  .app .varr{backdrop-filter:none;background:#0b0908ef}
  /* 빛무리는 셋뿐이라 줄일 것이 없다. `transform`·`opacity` 만 도므로 값이 거의 안 든다 */
}
/* 초식 시전 자리 — 눌러야 나간다. 패에서 누르자마자 나가면 되돌릴 틈이 없다.
   보이지 않을 때도 자리는 지킨다(visibility). display 로 감추면 고를 때마다 수라장이 위아래로 튄다 */
/* 폭은 수라장 한 줄과 같게 — 칸 5개(각 64px)와 사이 4군데(각 4px) */
/* 초식 시전 자리 — 누르면 나간다는 것이 색으로 읽혀야 한다.
   무채색으로 두면 그냥 빈 칸으로 보여 무엇을 더 해야 하는지 모른 채 멈춘다 */
.castzone{flex:none;height:46px;width:min(100%,calc(64px*5 + 4px*4));margin:2px auto 0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ok);border-radius:3px;
  background:linear-gradient(180deg,#14301fd9,#0d2417e6);
  font-size:12px;font-weight:700;letter-spacing:.3em;text-indent:.3em;color:#bff2d2;
  text-shadow:0 1px 3px #000;box-shadow:0 0 14px #6fcf9733,inset 0 1px 0 #ffffff14;
  visibility:hidden;opacity:0;transition:opacity .16s,transform .08s,box-shadow .12s,background .12s}
.castzone.on{visibility:visible;opacity:1;animation:czb 1.4s ease-in-out infinite}
/* 누르는 순간 눌려 들어간다 */
.castzone.on:hover{background:linear-gradient(180deg,#1a3d28d9,#11301de6);box-shadow:0 0 20px #6fcf9755,inset 0 1px 0 #ffffff1f}
.castzone.on:active{transform:translateY(1px) scale(.994);animation:none;
  background:linear-gradient(180deg,#0d2417e6,#14301fd9);box-shadow:0 0 26px #6fcf9788,inset 0 2px 5px #00000066}
@keyframes czb{50%{border-color:#b6f5cf;box-shadow:0 0 22px #6fcf9761,inset 0 1px 0 #ffffff1f}}
.rule{height:1px;flex:none;background:linear-gradient(90deg,transparent,var(--line) 12%,var(--fg-faint) 50%,var(--line) 88%,transparent);opacity:.7}

/* 하단 — 모바일에서 엄지가 닿는 자리다. 뒤로가기도 여기 있다.
   좌우 여백은 화면 본문(.screen)과 같은 16px 로 맞춘다 — 얼굴·이름이 타일 왼쪽 줄에 선다 */
.app.battle-wide .topbar{border-top:0;background:#0b0a0ceb}
/* **높이를 못 박는다** (v153). 예전에는 그 화면에서 가장 큰 아이가 높이를 정해,
   메인(65px)과 나머지(77px)가 달라 화면을 옮길 때마다 바가 들썩였다.
   이제 안쪽 60px 로 고정이라 무엇이 들고 나든 꿈쩍하지 않는다 */
.topbar{flex:none;display:flex;align-items:center;gap:8px;
  height:calc(60px + var(--bot-gap));padding:0 16px var(--bot-gap);
  background:var(--panel);border-top:1px solid var(--line-soft)}
/* 뒤로가기가 없는 화면에서는 자리까지 비운다 — visibility 로 숨기면 빈 칸이 남아 줄이 밀린다.
   v152 에 오른쪽 끝으로 옮겼다 — 재화가 왼쪽을 차지하므로 여기서 남은 자리를 다 밀어낸다 */
.backbtn{width:44px;height:40px;flex:none;margin-left:auto;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-s);color:var(--fg-mid);font-size:20px;-webkit-tap-highlight-color:transparent}
/* 이름은 **두 줄까지** 접고, 길면 글씨를 줄인다 (v176). 크기는 `fitName()` 이 재서 넣는다 —
   글자 수만 보고 정하면 「가나다라마바사아자차」와 「WWWWWWWWWW」의 폭이 딴판이라 한쪽이 넘친다.
   ⚠ **태그(#0000)는 절대 안 줄인다** — 이름이 밀려도 태그까지는 온전히 보여야 한다 */
.screen-name{font-family:var(--serif);font-weight:700;font-size:14.5px;letter-spacing:.06em;
  line-height:1.16;min-width:0;text-align:left;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-all;overflow-wrap:anywhere}
/* 메인에서만 눌린다 — 누르면 로그아웃을 묻는다 */
.whoami{position:relative;display:flex;align-items:center;gap:8px;min-width:0;padding:3px 6px;margin-left:-6px;margin-right:-4px;border-radius:2px}
/* 이름만 줄어들고 얼굴·태그는 제 크기를 지킨다 */
.whoami .tface,.whoami .tag-mini{flex:none}
.whoami .screen-name{flex:0 1 auto}
/* 뒤로가기가 숨으면 이름표가 제 손으로 오른쪽 끝까지 민다 */
.backbtn[hidden] + .whoami{margin-left:auto}
.whoami[hidden]{display:none}
/* 손가락 기기에서는 두드린 자리에 hover 가 들러붙는다 — 되돌아왔을 때
   왼쪽 아래 이름표가 골라진 것처럼 남았다 (v146) */
@media (hover:hover) and (pointer:fine){ .whoami.live:hover{background:var(--panel-2)} }
.whoami:not(.live){pointer-events:none}
/* 화살표 하나(38px)로는 엄지가 짚기에 좁다. **옆에 붙은 화면 이름까지가 뒤로가기 자리다** —
   결연이든 순례든 혈투든, 글씨를 짚어도 돌아간다. 메인에서는 그 자리가 계정(.live)이라 그대로 둔다.
   **이 규칙은 바로 위 `:not(.live)` 보다 뒤에 와야 한다.** 둘의 우선순위가 같아서
   앞에 두면 나중 것(pointer-events:none)이 이겨 글씨가 끝내 안 눌린다 — v126 에서 그랬다 */
.whoami.asback{pointer-events:auto;cursor:pointer;
  padding:12px 34px 12px 8px;margin-left:-8px;margin-right:-26px;border-radius:var(--r-s)}
/* **누를 때 상자를 띄우지 않는다** (v129) — 눌린 네모가 뜨면 고른 것처럼 보인다.
   화살표 쪽도 같다. 눌렸다는 것은 화면이 넘어가는 것으로 이미 알 수 있다 */
.whoami.asback:active,.whoami.asback:hover{background:none}
.backbtn:hover,.backbtn:active{background:none;color:var(--fg)}
.tface{width:26px;height:26px;flex:none;font-size:13px}
/* 얼굴 오른쪽 위 구석 — `.whoami` 는 얼굴·이름·태그가 가로로 선 줄이라
   오른쪽 끝에 붙이면 태그 옆으로 가 버린다. 얼굴 폭(26px)에서 되짚어 자리를 잡는다 */
.whoami .nudot{right:auto;left:26px;top:1px}
/* ⚠ **뒤로가기 노릇을 할 때는 딱지를 걷는다** (v192).
   `.whoami` 는 강호에서는 「내 이름」이고 다른 화면에서는 **뒤로가기**다.
   뒤로가기 옆의 점은 「이 화면에 볼 것이 있다」로 읽혀 거짓말을 한다 —
   결연에 서 있는데 무훈의 점이 거기 떠 있었다. 알림은 **강호에서만** 켠다 */
.whoami.asback .nudot{display:none}
/* 명호의 아이콘 단추 — 「바꾸기」 딱지(.edit)가 오른쪽 **아래**에 있으므로 위 구석을 쓴다 */
.avatar .nudot{right:2px;top:2px;width:9px;height:9px}
/* 고르기 격자의 낱낱 — 그 아이콘 하나가 새것이라는 표다 */
.facepick{position:relative}
.facepick .nudot{right:-1px;top:-1px}
.tface[hidden]{display:none}
.tag-mini{font-size:10.5px;color:var(--fg-faint);font-variant-numeric:tabular-nums;margin-left:-4px}
/* 전체보기 — **맨 왼쪽**이다 (v152). 그 옆이 천기·영석·연진 */
.fsbtn.far{margin-left:0}
.fsbtn{width:34px;height:34px;flex:none;margin-left:-6px;margin-right:2px;
  display:flex;align-items:center;justify-content:center;border-radius:2px;
  font-size:15px;line-height:1;color:var(--fg-faint)}
.fsbtn:hover{background:var(--panel-2);color:var(--fg)}
.fsbtn.on{color:var(--seal)}
.purse{display:flex;gap:10px;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.coin{display:flex;align-items:center;gap:4px;white-space:nowrap;padding:3px 5px;border-radius:var(--r-s)}
.coin:active{background:#ffffff14}
/* 재화를 누르면 뜨는 풀이 — 바 바로 위에 붙는다 */
.tip{position:absolute;left:12px;right:12px;z-index:45;padding:12px 14px;border-radius:var(--r-s);
  background:#1c1727f2;border:1px solid var(--line);box-shadow:0 12px 30px -12px #000;
  animation:fade .16s ease}
.tip h4{margin:0 0 6px;font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:.06em;
  display:flex;align-items:center;gap:7px}
.tip h4 .sig{font-family:var(--han);font-size:17px;color:var(--seal);margin-right:2px}
.tip p{margin:0;font-size:12px;line-height:1.75;color:var(--fg-mid)}
.tip p + p{margin-top:7px;color:var(--fg-faint)}
.tip b{color:var(--fg)}
/* ===== 각성 풀이의 빛깔 (v179) =====
   딱지(`.simg.심마` …)가 이미 각성마다 제 빛깔을 갖고 있다. **눌러서 뜨는 풀이도 같은 빛깔**이라야
   무엇을 눌렀는지가 상자에서 다시 읽힌다 — 딱지는 붉은데 풀이는 회색이면 둘이 남남으로 보인다.
   ⚠ 빛깔은 딱지와 **한 벌**이다. 한쪽을 고치면 다른 쪽도 같이 고친다 */
.tip.awk{border-color:var(--awkl,var(--line));
  background:linear-gradient(180deg,var(--awkb,#1c1727) 0%,#1c1727f2 62%);
  box-shadow:0 12px 30px -12px #000,inset 0 1px 0 var(--awkl,transparent)}
.tip.awk h4{color:var(--awkc,var(--fg))}
.tip.awk h4 .sig{color:var(--awkc,var(--seal))}
.tip.awk.심마{--awkc:var(--simma);--awkl:#5c2620;--awkb:#33150fee}
.tip.awk.명경지수{--awkc:var(--myeong);--awkl:#22375c;--awkb:#131f33ee}
.tip.awk.축기{--awkc:var(--chukgi);--awkl:#1e4d3e;--awkb:#0f2a22ee}
.tip.awk.무아지경{--awkc:#c3a9e8;--awkl:#463a5c;--awkb:#2a2333ee}
.tip.awk.결의{--awkc:var(--chungi);--awkl:#5c4a1e;--awkb:#2e2410ee}
.token-img{display:inline-block;width:18px;height:18px;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 1px 2px #000b)}
.mini-token{display:inline-block;width:15px;height:15px;object-fit:contain;vertical-align:-3px;margin-right:2px;filter:drop-shadow(0 1px 1px #000a)}
.tip h4 .token-img{width:25px;height:25px}
.coin.chungi{color:var(--chungi)} .coin.yeong{color:var(--yeong)} .coin.jin{color:var(--jin)}
.vpurse{grid-area:1/1;justify-self:start;margin-left:0;gap:9px;font-size:11px}

.screens{flex:1;min-height:0;position:relative}
.screen{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(10px + var(--top-gap)) 16px 28px;display:none;flex-direction:column;gap:18px}
.screen.on{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ── 화면 넘김 — 안개 ─────────────────────────────────────
   흐려졌다 또렷해지며 살짝 물러난다. 모든 화면 이동이 이것 하나로 간다.
   방향을 가리지 않으므로 들어가든 나오든 같다 — 고를 것이 없는 편이 조용하다.
   (책갈피·먹 번짐·두루마리·비단 장막·검흔도 만들어 봤으나 이것으로 정했다) */
.screen.on{animation:mistin .3s ease}
/* ⚠ **여기에 `filter:blur()` 를 되살리지 않는다** (v220).
   화면 하나를 통째로 흐리는 것은 **그 화면의 모든 것을 한 장으로 그려 두었다가 흐리는 일**이다.
   연보처럼 카드가 150장 깔린 화면에서는 그 한 장이 엄청나게 크다 —
   **명운 ↔ 강호를 오갈 때마다 깜빡이던 것이 이것이었다.**
   흐림 없이도 물러났다 다가오는 느낌은 `scale` 만으로 난다 */
@keyframes mistin{
  from{opacity:0;transform:scale(1.03)}
  to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .screen.on{animation:fade .18s ease}
}
/* ===== 표제 =====
   게임 이름은 한자 無名者 한 덩이다. 붓글씨라 자간을 크게 벌리지 않는다 —
   획이 서로 이어지는 맛으로 읽히는 글꼴이라 널찍이 떼어 놓으면 끊어져 보인다.
   줄높이를 1 로 두면 삐침이 위아래로 잘린다 */
.logo{display:flex;flex-direction:column;align-items:center}
.title{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:26px 0 6px;isolation:isolate}
/* ⚠ **글꼴이 아니라 그림이다** (v182). 붓으로 쓴 로고 한 장(`title_logo_mumyeongja_v2.webp`)을
   건다 — 글꼴로는 같은 획이 안 나온다. 그림의 잉크는 크림빛(246,237,221)이라
   `brightness(0) invert(1)` 로 **알파만 남기고 흰빛으로 다시 칠한다.**
   `filter` 로 칠하는 까닭: 흰 그림을 따로 두면 로고를 갈 때 두 장을 다 갈아야 한다.
   그림자도 `text-shadow` 가 아니라 `drop-shadow` 다 — 글자가 아니라 **모양**을 따라 진다 */
.t-main{position:relative;z-index:1;display:block;
  width:min(74vw,300px);height:auto;
  filter:brightness(0) invert(1)
         drop-shadow(0 2px 14px #000) drop-shadow(0 0 30px #a97cff2e);
  -webkit-user-select:none;user-select:none;pointer-events:none}
/* 한자 이름 바로 아래에 한글로 한 번 더 적는다. 읽으라고 두는 것이 아니라 낙관(落款)처럼
   두는 것이라 조선백년체로 작고 흐리게 깔고, 손이 닿아도 아무 일이 없게 둔다 */
.brandfoot{flex:none;margin-top:-2px;text-align:center;
  font-family:var(--story);font-size:13.5px;letter-spacing:.46em;text-indent:.46em;
  color:#a49b8b;opacity:.62;text-shadow:0 1px 4px #000;
  -webkit-user-select:none;user-select:none;pointer-events:none}
/* ===== 접속하고 들어가는 순간 (v187) =====
   전에는 단추를 누르는 즉시 강호로 튀었다 — 어디서 어디로 간 것인지 몸이 못 따라갔다.
   이제 **입력칸·단추·낙관이 먼저 스러지고, 로고만 남아 화면 한가운데로 내려간 뒤** 넘어간다.
   로고가 얼마나 내려갈지는 CSS 로 알 수 없다(폼 높이가 화면마다 다르다) — `titleBye()` 가 재어 넣는다.
   ⚠ 되돌아올 자리를 남긴다. `go("title")` 이 `bye` 와 인라인 값을 걷어 준다 */
/* 떠나는 접속 화면 — 강호가 떠오르는 **그 위에서** 스러진다 (v191).
   `.screen{display:none}`(0,1,0)을 이겨야 하므로 아이디로 적는다. 손은 이미 안 닿는다 */
#s-title.leaving{display:flex;z-index:30;pointer-events:none;animation:none}
#s-title.bye .signin,#s-title.bye .brandfoot{
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .42s ease,transform .42s ease}
/* 접속 화면 */
.signin{width:min(300px,100%);margin-top:46px;display:flex;flex-direction:column;gap:9px;
  transition:opacity .42s ease,transform .42s ease}
.signin .si{padding:11px 12px;font-size:13px;text-align:center}
.signin .fbtn{flex:none}
.si-or{display:flex;align-items:center;gap:10px;margin:4px 0 1px;
  font-size:10px;letter-spacing:.2em;color:var(--fg-faint)}
.si-or::before,.si-or::after{content:"";flex:1;height:1px;background:var(--line)}
/* 개발 중에만 쓰는 자리 — 단추처럼 보이지 않게 낮춰 둔다 */
.linkb{margin-top:6px;padding:7px;font-size:11px;letter-spacing:.06em;color:var(--fg-faint)}
.linkb:hover{color:var(--danger)}
/* ===== 메인 메뉴 =====
   **상자를 두르지 않는다.** 테와 바탕을 걷어내고 물건만 늘어놓는다 —
   격자에 담으면 게임이 아니라 설정 화면처럼 보인다.
   위에서부터 혈투·순례·결연이 굵게 서고, 자주 드나드는 넷은 하단 바 바로 위에 작게 깐다 */
/* .screen 이 이미 좌우 16px 과 카메라 자리(--top-gap)를 비워 둔다. 여기서 또 주지 않는다 */
.mscene{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding:0}
/* 맨 윗줄 — 왼쪽에 전서구·소리, 오른쪽에 이름 */
.mtop{flex:none;display:flex;align-items:center;gap:8px}
.mic{position:relative;flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-s);background:#0d0b11a6;
  font-family:var(--han);font-size:16px;line-height:1;color:#cfc6b6;
  -webkit-tap-highlight-color:transparent;transition:border-color .14s,color .14s,opacity .14s}
.mic:focus,.mic:focus-visible{outline:none}
.mic:active{border-color:var(--seal);color:var(--fg)}
.mic-pic{width:22px;height:22px;display:block;background:center/contain no-repeat;pointer-events:none}
.mic-pic.mail{background-image:url(assets/ui/icon_mail.webp?v=1)}
.mic-pic.sound{background-image:url(assets/ui/icon_sound.webp?v=1)}
/* 교서 물음표 — 전서구·소리와 **같은 네모, 같은 크기**다 (v172 · v176 에 그림으로) */
.mic-pic.help{background-image:url(assets/ui/icon_help.webp?v=1)}
/* 제보 — 두루마리와 붓, 그리고 경고 인장 (v196). 편지·소리와 같은 슬레이트 빛깔이다 */
.mic-pic.report{background-image:url(assets/ui/icon_report.webp?v=1)}
/* 언어 — 한·EN 두 글자를 세로로 겹쳐 세우고, 쓰는 쪽만 밝힌다 */
.mic.lang{flex-direction:column;gap:1px;font-family:var(--sans);font-weight:700;line-height:1}
.mic.lang span{font-size:10px;color:var(--fg-faint);transition:color .14s}
.mic.lang .lg-en{font-size:8.5px;letter-spacing:.04em}
.mic.lang:not(.en) .lg-ko,.mic.lang.en .lg-en{color:#f2ebdf}

/* ===== 전서구 (v187) =====
   갈래 셋(우편함·업데이트·개발자 노트)이 한 화면을 나눠 쓴다. 갈래 단추는 **교서와 같은 것**(`.hptab`)이다 —
   같은 손놀림에 같은 모양을 쓴다. 다만 셋뿐이라 가로를 고르게 나눈다.
   상자는 **무훈 상자(`.ftbox`)와 한 식구**다. 테·바탕·모서리를 그대로 쓰고,
   받을 것이 있을 때 테를 밝히는 것까지 같다 — 화면마다 상자 모양을 새로 지으면 같은 판으로 안 읽힌다 */
#s-mail .hptabs{gap:6px;margin-bottom:12px;flex:none}
#s-mail .hptab{flex:1;text-align:center;position:relative;padding:8px 6px;font-size:12px}
/* 갈래 위의 붉은 점 — 받을 우편이 있으면. 하단 바의 무훈 점과 같은 빛깔이다 */
.tabdot{position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;
  background:var(--warn);box-shadow:0 0 6px #e8b34dcc}
.mllist{display:flex;flex-direction:column;gap:9px;padding-bottom:6px}
/* 받을 것이 없을 때 — 갈래 단추 아래 **남은 자리의 한가운데**에 한 줄 (v192).
   빈 목록을 맨 위에 붙여 두면 화면이 잘못 열린 것처럼 보인다.
   `.screen` 이 세로 flex 라 `flex:1` 이면 남은 자리를 다 먹는다 */
.mlnone{flex:1;min-height:40vh;display:flex;align-items:center;justify-content:center;
  margin:0;text-align:center;font-size:12.5px;letter-spacing:.02em;color:var(--fg-faint)}
.mlbox{border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);
  padding:12px 13px;transition:border-color .16s,opacity .16s}
/* 받을 것이 있는 우편은 테를 밝혀 둔다 — 무훈의 `.ftbox.ok` 와 같은 규칙이다 */
.mlbox.ok{border-color:var(--seal);background:linear-gradient(180deg,#221b2acc,var(--panel))}
.mlbox.off{opacity:.46}
/* 우편 한 통 — **그림 · 글 · 단추** 세 칸이 가로로 선다.
   글 칸만 늘어나고(minmax 0) 나머지는 제 크기를 지킨다 — 제목이 길어도 단추가 밀리지 않는다 */
.mlbox.ok,.mlbox.off{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:11px}
.ml-ico{flex:none;display:flex;align-items:center;justify-content:center;gap:2px;
  width:46px;height:46px;border-radius:var(--r-s);
  background:#0e0b14;border:1px solid var(--line-soft);box-shadow:inset 0 0 12px #0009}
.ml-ico img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 2px #000b)}
/* 보상이 둘 이상이면 한 칸에 겹쳐 세운다 — 칸을 늘리면 글 자리가 줄어든다 */
.ml-ico img + img{width:20px;height:20px;margin-left:-6px}
.ml-t{font-family:var(--serif);font-size:13.5px;font-weight:800;letter-spacing:.02em;color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-d{margin-top:3px;font-size:11px;line-height:1.5;color:var(--fg-mid);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ml-f{display:flex;align-items:center;gap:8px;margin-top:6px}
.ml-pays{display:flex;align-items:center;gap:8px;min-width:0}
/* 재화마다 제 빛깔이다 — 하단 바(`.coin.*`)와 같은 색을 쓴다.
   셋을 한 색으로 적으면 아이콘을 들여다봐야 무엇인지 알 수 있다 */
.ml-pay{display:inline-flex;align-items:center;gap:3px;
  font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--fg-mid)}
.ml-pay.chungi{color:var(--chungi)} .ml-pay.yeong{color:var(--yeong)} .ml-pay.jin{color:var(--jin)}
.ml-pay .mini-token{margin:0}
/* 단추와 기한은 **한 기둥**이다 (v191) — 기한은 그 단추에 붙은 말이라 바로 아래 선다.
   글 칸 안에 두었더니 보상 줄과 나란히 서서 **보상의 일부처럼** 읽혔다 */
.ml-act{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px}
/* 남은 기간 — 평소엔 조용하고, 사흘 안이면 경고 빛깔로 돈다 */
.ml-left{flex:none;text-align:center;white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--fg-faint)}
.ml-left.soon{color:var(--warn)}
.ml-left.over{color:var(--danger)}
/* 수령 — 무훈의 수령 단추(`.ft-go`)와 같은 치수·같은 빛깔이다 */
.ml-go{flex:none;min-width:62px;padding:9px 12px;border-radius:var(--r-s);
  border:1px solid var(--chungi);background:#2a2110;color:var(--chungi);
  font-family:var(--serif);font-size:12px;font-weight:700;letter-spacing:.04em;
  box-shadow:0 0 10px -2px #d4a84355;-webkit-tap-highlight-color:transparent;transition:.14s}
.ml-go:not([disabled]):active{transform:scale(.97);background:#3a2d14}
.ml-go[disabled]{border-color:var(--line);border-style:dashed;background:var(--panel-2);
  color:var(--fg-faint);box-shadow:none}
/* 업데이트·개발자 노트 — 읽는 상자다. 가로로 나누지 않고 위에서 아래로 흐른다 */
.note-box{display:block}
.ml-h{display:flex;align-items:baseline;gap:9px;margin-bottom:7px;
  padding-bottom:7px;border-bottom:1px solid var(--line-soft)}
.ml-v{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--seal)}
/* 개발자 노트의 머리는 판 번호가 아니라 **글의 제목**이다 — 명조 대신 본문 얼굴로 */
.ml-v.alt{font-family:var(--serif);font-size:13.5px;font-weight:800;letter-spacing:.02em;color:var(--fg)}
.ml-date{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--fg-faint)}
.ml-li{margin:0;padding-left:15px;display:flex;flex-direction:column;gap:5px}
.ml-li li{font-size:11.5px;line-height:1.6;color:var(--fg-mid)}
.ml-li li::marker{color:var(--fg-faint)}
.ml-p{margin:0 0 7px;font-size:11.5px;line-height:1.75;color:var(--fg-mid)}
.ml-p:last-child{margin-bottom:0}
/* 맺는 한 줄 — 편지의 낙관이다. 오른쪽 끝에 붙이고 한 칸 띄운다 */
.ml-sig{margin:11px 0 0;text-align:right;
  font-family:var(--serif);font-size:11.5px;letter-spacing:.04em;color:var(--fg-faint)}

/* ===== 무훈 (v172 · 무훈 기획 §4.2) =====
   격자를 쓰지 않는다 — 글이 길고 하나씩 읽고 하나씩 누르는 자리라 **가로 폭을 꽉 채워** 세로로 쌓는다 */
/* 「받을 무훈이 N개 있습니다」 줄(`.ftnote`)은 걷었다 (v186) —
   **하단 바의 붉은 점이 이미 그 말을 한다.** 받을 것은 상자마다 천기 단추가 켜져 있어 눈으로 세진다 */
.ftlist{display:flex;flex-direction:column;gap:9px;padding-bottom:6px}
/* 무훈 진행도 — 위에 보상 넷, 가운데 막대, 아래 눈금 수. 끝 칸(100%)은 막대 끝에 붙는다 */
.ftprog{flex:none;margin-bottom:12px;padding:12px 14px 10px;border:1px solid var(--line);
  border-radius:var(--r-s);background:linear-gradient(180deg,#1d1824e6,var(--panel))}
.fp-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fp-t{font-family:var(--serif);font-size:14px;font-weight:800;letter-spacing:.04em;color:var(--fg)}
.fp-p{font-family:var(--num);font-size:15px;font-weight:800;color:var(--chungi);font-variant-numeric:tabular-nums}
/* 좌우 끝 보상이 상자 밖으로 안 나가게 안쪽으로 한 뼘 들인다 */
.fp-track{position:relative;margin:10px 26px 0 8px}
.fp-rws{position:relative;height:44px}
.fp-rw{position:absolute;bottom:4px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:46px;padding:4px 5px 3px;
  border:1px dashed var(--line);border-radius:var(--r-s);background:var(--panel-2);
  font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--fg-faint);font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;transition:.14s}
.fp-rw .mini-token{width:16px;height:16px;margin:0;filter:grayscale(1) opacity(.7)}
/* 받을 수 있다 — 무훈 수령 단추와 같은 천기 빛 */
.fp-rw.ok{border:1px solid var(--chungi);color:var(--chungi);background:#2a2110;
  box-shadow:0 0 10px -1px #d4a84377;animation:fpglow 1.6s ease-in-out infinite}
.fp-rw.ok .mini-token{filter:none}
.fp-rw.ok:active{transform:translateX(-50%) scale(.95)}
@keyframes fpglow{50%{box-shadow:0 0 16px 1px #d4a843aa}}
/* 이미 받았다 — 빛을 빼고 체크를 얹는다 */
.fp-rw.got{border-style:solid;border-color:#3d5a3f;opacity:.7}
.fp-ck{position:absolute;top:-6px;right:-6px;width:15px;height:15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;
  background:#2f7d45;color:#fff;box-shadow:0 1px 3px #000a}
.fp-bar{position:relative;height:6px;border-radius:3px;background:#ffffff12;border:1px solid #2a2530;overflow:hidden}
.fp-bar > i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#8a6f3a,var(--chungi));transition:width .4s ease}
.fp-tks{position:relative;height:16px}
.fp-tk{position:absolute;top:-10px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.fp-tk::before{content:"";width:7px;height:7px;border-radius:2px;background:#4a4352;border:1px solid #0008}
.fp-tk.on::before{background:var(--chungi)}
.fp-tk b{margin-top:2px;font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--fg-faint)}
.fp-tk.on b{color:#e6dccb}
.ftbox{border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);
  padding:12px 13px 11px;transition:border-color .16s,opacity .16s}
/* 받을 것이 있으면 테를 밝혀 둔다 — 목록에서 눈이 먼저 간다 */
.ftbox.ok{border-color:var(--seal);background:linear-gradient(180deg,#221b2acc,var(--panel))}
.ftbox.done{opacity:.46}
.ft-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ft-n{font-family:var(--serif);font-size:14.5px;font-weight:800;letter-spacing:.03em;color:var(--fg)}
.ft-t{font-family:var(--mono);font-size:10px;color:var(--fg-faint);white-space:nowrap;flex:none}
.ft-d{margin:4px 0 9px;font-size:11.5px;line-height:1.55;color:var(--fg-mid)}
.ft-bar{height:5px;border-radius:3px;background:#ffffff12;border:1px solid #2a2530;overflow:hidden}
.ft-bar > i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#6f5ba8,#b79bff);transition:width .3s ease}
.ftbox.ok .ft-bar > i{background:linear-gradient(90deg,#8a6f3a,var(--chungi))}
.ft-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.ft-c{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--fg-mid)}
/* 수령 단추 — 글자 대신 **천기 아이콘과 수**다. 무엇을 받는지가 한눈에 읽힌다 (v174).
   켜고 끄는 것이 눈에 보여야 한다 — 끈 것은 테도 글씨도 죽이고 아이콘까지 빛을 뺀다 */
.ft-go{flex:none;min-width:88px;padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-s);
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  font-family:var(--mono);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--fg-faint);background:var(--panel-2);
  -webkit-tap-highlight-color:transparent;transition:.14s}
.ft-go .mini-token{width:14px;height:14px;margin:0;transition:filter .14s}
/* 켜짐 — 천기 빛깔로 */
.ft-go:not([disabled]){border-color:var(--chungi);color:var(--chungi);background:#2a2110;
  box-shadow:0 0 10px -2px #d4a84355}
.ft-go:not([disabled]):active{transform:scale(.97);background:#3a2d14}
/* 꺼짐 — 아이콘의 빛을 빼서 「아직 아니다」가 그림에서도 읽히게 한다 */
.ft-go[disabled]{opacity:.42;border-style:dashed}
.ft-go[disabled] .mini-token{filter:grayscale(1) opacity(.7)}
/* 하단 넷의 붉은 점 — 받을 무훈이 있으면 */
.mdk{position:relative}
.mdk-dot{position:absolute;right:calc(50% - 30px);top:-2px;width:7px;height:7px;border-radius:50%;
  background:var(--warn);box-shadow:0 0 7px #e8b34dcc;pointer-events:none}
.mdk-dot[hidden]{display:none}
/* ===== 새로 열린 것을 알리는 노랑 딱지 (v179) =====
   `.mdk-dot` 과 **같은 빛깔·같은 크기**다. 다른 것은 자리를 잡는 방식뿐이라
   여기는 `--nx`·`--ny` 로 붙일 자리를 받는다. 빛깔을 두 벌로 두지 않는다 —
   한쪽만 고쳐지면 같은 뜻이 화면마다 다른 색으로 나온다 */
.nudot{position:absolute;right:var(--nx,-1px);top:var(--ny,-1px);
  width:7px;height:7px;border-radius:50%;
  background:var(--warn);box-shadow:0 0 7px #e8b34dcc;pointer-events:none;
  animation:nudotb 1.7s ease-in-out infinite}
.nudot[hidden]{display:none}
@keyframes nudotb{50%{box-shadow:0 0 12px 2px #e8b34d}}
/* 소리를 껐으면 눌린 채로 둔다 — 지금 어느 쪽인지 한눈에 보여야 한다 */
.mic.off{opacity:.42;border-style:dashed;color:var(--fg-faint)}
/* 이름은 오른쪽 구석에. 읽는 것이 아니라 낙관처럼 앉아 있는다.
   접속 인원은 그 바로 아래에 붙는다 — 예전에는 하단 넷 밑에 있었는데,
   거기서는 **네 칸을 하단 바에서 한 줄 띄워 놓는 군더더기**가 됐다 */
.mbrand{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0}
/* 같은 로고를 작게 건다 (v182). 여기는 **눌리는 자리**라(1초 꾹 = 개발용 도구)
   `pointer-events` 를 끄지 않는다 — 접속 화면의 표제와 다른 점은 그것뿐이다 */
.m-han{display:block;width:clamp(84px,26vw,116px);height:auto;opacity:.82;
  filter:brightness(0) invert(1)
         drop-shadow(0 1px 7px #000) drop-shadow(0 0 16px #a97cff22);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

/* 혈투·결연·순례 — 맨 윗줄과 하단 넷 사이 남은 자리를 다 차지하고, 그 안에서 세로 정중앙에 선다 (v126).
   지난 배치: 반개짜리 판 셋(v126) → 왼쪽 정렬(v150) → 판을 걷고 좌우로 흩음(v153) → 격자(v166) */
/* v166 — **혈투가 위 한 칸, 아래를 결연·순례가 반씩.**
   v150~v153 은 셋을 좌우로 흩어 놓고, 하단 넷의 그림 자리를 JS(`alignMenu()`)가 재어
   `--mpad`·`--mvx` 에 넣어야 줄이 맞았다. 격자로 세우니 CSS 혼자 선다 — 그 함수는 걷었다.
   **결연이 왼쪽인 것은 아래 「명운」 바로 위이기 때문이다** — 명운과 결연은 한 몸이다.

   ⚠ **단추 그림을 새로 그릴 때 볼 값은 이 둘뿐이다.**
     --arh  혈투     4 : 3 = 1.3333   (원본 1536 × 1152 권장)
     --arf  결연·순례  1 : 1 = 1        (원본 1024 × 1024 권장)
   **가로 ÷ 세로**를 숫자로 적는다 (`4/3` 이 아니라 `1.3333`). 아래 셈에 그대로 들어가기 때문이다 —
   `aspect-ratio` 는 숫자도 받으므로 한 값으로 둘을 다 쓴다. 세로로 긴 그림이면 `--arh:.8333` (5:6).
   그림이 칸을 **꽉 채우게** 되면 `--fit:cover` 로 바꾼다 — 지금은 귀퉁이가 비어 있어 `contain` 이다 */
.mmenu{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  /* 아래 `.mmg` 가 이 칸의 **높이**를 알아야 한다. `inline-size` 로는 모자라 `size` 로 잰다 */
  container-type:size}
/* 반 칸의 너비 하나로 셋이 다 정해진다. **가로로도 세로로도 안 넘치는 값**을 고른다 —
   비율만 박아 두면 짧은 화면(320×568)에서 혈투가 위로 17px 삐져나갔다 (v166 에 실제로 그랬다).
     세로로 다 쓰면  (2w+g)/arh + g + w/arf = 높이
     → w = (높이 − g(1 + 1/arh)) / (2/arh + 1/arf)
   비율을 바꿔도 이 셈이 따라오므로 짧은 화면을 다시 안 봐도 된다.
   ⚠ 이름이 `.mmg` 인 까닭 — `.mgrid` 는 **멀리건 패 격자**가 이미 쓰고 있다(§1483). 그걸 쓰면 덮인다 */
.mmg{
  --mgap:clamp(8px,2.6vw,14px);
  --arh:1.52;                 /* 혈투 칸 — 4:3 이던 것을 낮췄다 (v178) */
  --arf:1;
  /* 그림이 칸을 **가득 채운다** (v176). 세 그림의 비율이 칸과 같아(4:3 · 1:1) 잘리는 데가 없다 */
  --fit:cover;
  --half:min((100cqw - var(--mgap))/2,
             (100cqh - var(--mgap)*(1 + 1/var(--arh))) / (2/var(--arh) + 1/var(--arf)));
  display:grid;grid-template-columns:repeat(2,var(--half));gap:var(--mgap)}
.mbig{position:relative;min-width:0;padding:0;background:none;border:0;
  -webkit-tap-highlight-color:transparent;transition:transform .14s}
.mbig.hero{grid-column:1/-1;aspect-ratio:var(--arh)}
.mbig.half{aspect-ratio:var(--arf)}
/* 순례·비무 — 반 칸 하나를 위아래로 가른다. 바깥 틀은 결연과 같은 크기라 격자가 흔들리지 않는다 */
.mstack{aspect-ratio:var(--arf);min-width:0;display:grid;grid-template-rows:1fr 1fr;gap:var(--mgap)}
.mbig.quarter{min-height:0}
.mbig.quarter .mb-n::after{margin-top:4px}
.mbig.quarter .mb-e{font-size:clamp(6.5px,1.9vw,8px);letter-spacing:.16em;text-indent:.16em}
/* 비무 — 아직 열리지 않았다. 그림이 없으니 먹빛 바탕에 한자 낙관을 옅게 깐다 */
#tBimu .mb-img{background:radial-gradient(90% 120% at 50% 40%,#231d2c,#110e16)}
#tBimu .mb-img::before{content:"比武";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--han);font-size:clamp(34px,11vw,52px);color:#ffffff0d;letter-spacing:.08em}
.mbig.lockd{opacity:.66}
/* 칸의 테와 그늘. 그림이 위를 덮으므로 여기는 테만 맡는다.
   ⚠ 테는 **그림 위에** 그어야 보인다 — `::before` 는 그림 아래라 테가 가려진다.
   그래서 테는 `::after`(맨 위)가 긋고, 여기는 바탕과 그늘만 맡는다 (v177) */
.mbig::before{content:"";position:absolute;inset:0;border-radius:var(--r-m);
  background:#14111c;
  box-shadow:0 6px 18px #0009;
  transition:box-shadow .14s}
/* 기본 테두리색(`--line`)으로 칸을 두른다 (v177) */
.mbig::after{content:"";position:absolute;inset:0;border-radius:var(--r-m);pointer-events:none;
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 #ffffff0d;
  transition:border-color .14s,box-shadow .14s}
/* 그림의 **자리와 배율**은 단추마다 다를 수 있다 (v185) — `--ipos`·`--isz` 로 받는다.
   기본은 「가운데에 꽉 채우기」이고, 그림 한 귀퉁이를 잘라 내야 할 때만 단추에 적는다.
   ⚠ 값은 `index.html` 의 그 단추에 `--img` 와 **나란히** 적는다 —
   그림과 그 그림을 어떻게 앉힐지는 한 몸이라, 떨어뜨려 두면 그림을 갈 때 한쪽만 남는다 */
.mb-img{position:absolute;inset:0;border-radius:var(--r-m);overflow:hidden;
  background:var(--img) var(--ipos,center)/var(--isz,var(--fit)) no-repeat;
  transition:filter .14s;pointer-events:none}
/* **일러스트는 뒷배경이다** (v176) — 그대로 두면 글씨를 삼킨다. 한 겹 어둡게 덮는다.
   가운데를 조금 더 어둡게 해서 글씨가 앉을 자리를 만든다 */
.mb-img::after{content:"";position:absolute;inset:0;border-radius:var(--r-m);
  background:radial-gradient(120% 90% at 50% 50%,#000000a6 0%,#00000073 55%,#000000a8 100%)}
.mbig:focus,.mbig:focus-visible,.mdk:focus,.mdk:focus-visible{outline:none}
/* 이름은 칸 **정중앙**이다 (v176) — 영문 줄까지 묶어 한 덩이로 가운데에 앉힌다.
   일러스트를 이미 어둡게 덮어 두었으므로 글씨 밑에 먹을 따로 깔지 않는다 */
.mb-cap{position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px;pointer-events:none}
.mb-n{font-family:var(--serif);font-size:clamp(15px,4.4vw,20px);font-weight:800;
  letter-spacing:.2em;text-indent:.2em;color:#f6f0e4;
  /* 일러스트 위에 얹히므로 그림자를 겹겹이 준다 — 가까운 먹으로 획을 세우고, 먼 먹으로 바탕에서 띄운다 */
  text-shadow:0 1px 2px #000,0 2px 6px #000,0 3px 14px #000e,0 0 26px #000c;white-space:nowrap}
/* 이름 아래 가름선 — **카드명 밑줄(`.c-name::after`)과 같은 규격**이다 (v177).
   폭 25% · 두께 1px · 알파 0x80. ⚠ 1px 미만으로 내리지 않는다 (인수인계 §8) */
.mb-n::after{content:"";display:block;width:38%;height:1px;margin:5px auto 0;
  background:#ffffff8c;box-shadow:0 1px 3px #000c;pointer-events:none}
.mbig.hero .mb-n{font-size:clamp(19px,5.8vw,26px)}
/* 그 밑에 영문 한 줄 — 읽으라고 둔 것이 아니라 무엇을 하는 자리인지 가리키는 표다 */
.mb-e{font-family:var(--mono);font-size:clamp(7px,2vw,8.5px);font-weight:700;
  letter-spacing:.24em;text-indent:.24em;color:#d6cab4;opacity:.72;
  text-shadow:0 1px 3px #000,0 2px 8px #000d;white-space:nowrap}
.mbig.hero .mb-e{font-size:clamp(7.5px,2.4vw,9.5px)}
.mbig:active{transform:scale(.97)}
/* ⚠ 누름 표는 **하단 넷(`.mdk`)보다 세지 않게** 한다 (v197).
   큰 칸이라 같은 값을 줘도 더 크게 보이는데, 여기는 테까지 밝히고 바깥으로 고리까지 둘러
   하단 넷과 견주면 혼자 과했다. **바깥 고리를 걷고 테 빛깔도 한 단 낮춘다** */
.mbig:active::after{border-color:#6d6a84;box-shadow:inset 0 1px 0 #ffffff0d}
/* 누른 표는 **기본 강조색**(`--seal`)이다 (v178). 초록(`--ready`)은 수라장에서
   「이 연은 칠 수 있다」를 뜻하는 색이라, 메인에서까지 쓰면 그 뜻이 묽어진다 */
.mbig:active .mb-img{filter:drop-shadow(0 0 4px var(--seal)) drop-shadow(0 0 12px #7c86b68c)}
/* **`hover:hover` 만으로는 모자란다** (v145) — 손가락으로 두드리는 기기도 이 질문에 참이라
   답할 때가 있어, 눌렀던 단추가 돌아와도 밝은 채로 남았다(「무명자 단추가 골라져 있다」).
   `pointer:fine` 을 같이 물어 **마우스가 있는 자리에서만** 밝힌다 */
@media (hover:hover) and (pointer:fine){
  .mbig:hover::after{border-color:#6a6273;box-shadow:inset 0 1px 0 #ffffff1a}
  .mbig:hover .mb-img{filter:drop-shadow(0 0 6px #ffffff45) drop-shadow(0 7px 16px #000c)} }
/* 아직 열리지 않은 자리 */
#tPvp{opacity:.66}

/* 하단 바 바로 위 네 칸 — 자주 드나드는 것들. **아래로는 아무것도 두지 않는다** */
/* 하단 넷은 하단 바에 붙이지 않는다 — 한 줄 띄워야 「바의 일부」로 안 읽힌다 (v178) */
.mdock{flex:none;display:flex;align-items:flex-end;gap:4px;padding:4px 0 0;
  margin-bottom:clamp(10px,3.2vw,20px)}
/* 접속 인원 — 낙관 아래(.mbrand). 붙일 서버가 없으면 아예 안 뜬다 */
.mlive{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--fg-faint);white-space:nowrap}
.mlive:empty{display:none}
.mlive b{color:var(--ok);font-weight:700;font-variant-numeric:tabular-nums}
.mdk{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:0;-webkit-tap-highlight-color:transparent;transition:transform .14s}
.mdk-img{width:100%;max-width:66px;aspect-ratio:1;
  background:var(--img) center/contain no-repeat;
  filter:drop-shadow(0 0 4px #ffffff20) drop-shadow(0 3px 8px #000a);
  transition:filter .14s}
/* 명운과 만보각은 그림이 판을 꽉 채워 나머지 둘보다 커 보인다. 그 둘만 한 치수 내린다 (v129).
   명운은 거기서 한 번 더 내린다 — 책이 네모라 같은 폭이어도 가장 커 보인다 (v131).
   둘 다 그림 아래쪽에 여백이 없어 글씨에 붙어 보이므로 1px 만 끌어올린다 */
.mdk[data-go="deck"] .mdk-img,.mdk[data-go="store"] .mdk-img{transform:translateY(-1px)}
.mdk[data-go="store"] .mdk-img{max-width:59px}
.mdk[data-go="deck"] .mdk-img{max-width:55px}
/* 그림이 아직 없는 자리 — 빈 칸이 아니라 「자리가 있다」로 보여야 한다 */
.mdk-img.none{background:none;border:1px dashed #4a4455;border-radius:var(--r-s);opacity:.5}
.mdk-n{font-family:var(--serif);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-indent:.06em;
  color:#e8e0d2;text-shadow:0 2px 6px #000;white-space:nowrap;pointer-events:none}
.mdk:active{transform:scale(.95)}
.mdk:active .mdk-img{filter:drop-shadow(0 0 3px var(--seal)) drop-shadow(0 0 11px #7c86b6aa)}
@media (hover:hover) and (pointer:fine){ .mdk:hover .mdk-img{filter:drop-shadow(0 0 4px #ffffff40) drop-shadow(0 5px 12px #000b)} }
@media (max-width:360px){ .mdk-n{font-size:9.5px} .mb-n{font-size:16px} }

/* 메인 타일 (옛 격자 — 지금은 쓰지 않는다) */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tile{position:relative;min-height:98px;border:1px solid var(--line);border-radius:var(--r-s);
  background:linear-gradient(160deg,var(--panel),var(--panel-2));display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;overflow:hidden;transition:border-color .16s,transform .1s}
/* 수라 — 맨 위 큰 자리 */
.tile.hero,.tile.wide{grid-column:1/-1;aspect-ratio:auto;flex-direction:row;justify-content:flex-start;
  gap:15px;padding:0 20px}
.tile.hero{min-height:126px}
.tile.wide{min-height:70px;gap:13px;padding:0 18px}
.t-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.t-en{font-size:9px;font-weight:500;letter-spacing:.3em;color:var(--fg-faint)}
.tile.hero .t-glyph{font-size:52px} .tile.hero .t-name{font-size:25px;letter-spacing:.14em;margin:0}
.tile.t2 .t-txt,.tile.t3 .t-txt{align-items:center;gap:1px}
.tile.wide .t-glyph{font-size:31px} .tile.wide .t-name{font-size:17px;margin:0}
.tile.hero::after{background:radial-gradient(56% 130% at 18% 120%,var(--tc),transparent 72%)}
.tile.wide::after{background:radial-gradient(48% 150% at 16% 130%,var(--tc),transparent 72%)}
.tile.hero{--tc:#e05a3c4d}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 118%,var(--tc,#a97cff33),transparent 70%)}
.tile:hover{border-color:var(--seal)} .tile:active{transform:translateY(1px)}
.tile.t1{--tc:#d4a84338} .tile.t2{--tc:#4fb39a38} .tile.t3{--tc:#7c86b638} .tile.t4{--tc:#e05a3c38}
.tile.t5{--tc:#c9a85c38} .tile.t6{--tc:#6f7fae38} .tile.t7{--tc:#c4453a38}
.t7 .t-glyph{color:var(--seal)}
.tile.t7{opacity:.62} .tile.t7 .t-en{color:var(--fg-faint)}
.t5 .t-glyph{color:#d8b96b} .t6 .t-glyph{color:#8fa0d0}
.tile.t5 .t-txt,.tile.t6 .t-txt{align-items:center;gap:1px}
.t-glyph{font-family:var(--han);font-size:34px;font-weight:700;line-height:1;opacity:.9}
.t1 .t-glyph{color:var(--chungi)} .t2 .t-glyph{color:var(--jeong)}
.t3 .t-glyph{color:var(--seal)} .t4 .t-glyph{color:var(--ma)}
.t-name{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.1em;margin-top:4px}
/* 타일 밑에 붙이던 잔글씨 대신, 무슨 화면인지 아래에 한 번만 적는다 */
/* 강호 화면은 메뉴가 높이를 통째로 먹으므로 칸 사이 간격을 없앤다.
   아래 여백도 거의 없앤다 — **하단 넷은 하단 바에 붙어 서야 한다** */
#s-main{gap:0;padding-bottom:6px}
#s-main .tools{margin:0 16px 10px}
/* 누른 자리가 잠깐 눈에 남는다 — :active 만으로는 손가락을 떼는 순간 풀려서,
   화면이 넘어가는 동안 무엇을 눌렀는지 안 보인다 */
/* ⚠ 큰 칸은 **그림만** 빛낸다 (v197). 예전에는 `.mbig` 통째에 걸어
   테와 글씨까지 함께 빛나서 하단 넷보다 훨씬 무거웠다 — 하단 넷은 원래 그림만 빛난다 */
.mbig.press .mb-img,.mdk.press .mdk-img{
  filter:drop-shadow(0 0 3px var(--seal)) drop-shadow(0 0 11px #7c86b68c)}
.mdk.press .mdk-img.none{border-color:var(--seal);opacity:.9}
/* 명호 맨 아래 로그아웃 — 되돌릴 수 없는 쪽이라 붉고, 다른 단추와 떨어져 선다 */
.fbtn.dg.out{margin-top:20px;padding:13px;color:#ff9a8e;border-color:#5f2c26;background:#241417}
/* 고객센터는 로그아웃 바로 위 — 둘이 한 묶음으로 맨 아래에 선다 */
#pHelpdesk{margin-top:20px;padding:13px}
#pHelpdesk + .fbtn.dg.out{margin-top:8px}
[hidden]{display:none!important}
.tools{display:flex;flex-direction:column;gap:9px;border:1px dashed var(--line);border-radius:var(--r-s);padding:11px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
/* 격자 안에 안내 글 한 줄만 있을 때 — **칸 하나에 갇혀 좁게 접힌다** (v175).
   줄을 통째로 차지하고 가운데에 선다. 명운 고르기·출전 화면이 같이 쓴다 */
.note.none{grid-column:1/-1;margin:0;padding:22px 16px;text-align:center;line-height:1.85;
  border:1px dashed var(--line);border-radius:var(--r-s);background:#ffffff05}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.grid2 .prow,.grid3 .prow{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 11px}
.grid3 .prow{align-items:center;text-align:center}
.grid3 .prow span{margin-top:1px}
#s-title{justify-content:safe center;align-items:center;text-align:center;gap:0;padding:26px}
.brand-en{margin-top:11px}
.brand{font-family:var(--serif);font-weight:900;font-size:58px;letter-spacing:.3em;line-height:1;color:var(--fg);
  text-indent:.24em;text-shadow:0 0 34px #c4453a2e}
.brand-han{font-family:var(--han);font-size:15px;letter-spacing:.7em;color:var(--seal);margin-top:14px;text-indent:.7em}
.brand-en{font-family:var(--mono);font-size:9.5px;letter-spacing:.36em;color:var(--fg-faint);margin-top:9px}
.seal{width:44px;height:44px;margin:26px 0 22px;border:2px solid var(--seal);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:19px;font-weight:700;
  color:var(--seal);transform:rotate(-3deg);box-shadow:0 0 22px #c4453a33}
.han{font-family:var(--han)}
.epigraph{max-width:26ch;font-family:var(--han);font-size:15px;line-height:2;color:var(--fg-mid);text-wrap:balance}
.epigraph em{color:var(--fg);font-style:normal}
.start-btn{margin-top:30px;padding:12px 44px;border:1px solid var(--seal);border-radius:2px;
  font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.34em;text-indent:.34em;color:#f0e2dd;
  background:linear-gradient(180deg,#3a201c,#241412);transition:box-shadow .3s,transform .12s}
.start-btn:hover{box-shadow:0 0 26px #c4453a44}
.start-btn:active{transform:translateY(1px)}
.title-foot{margin-top:24px;font-family:var(--mono);font-size:9.5px;color:var(--fg-faint);letter-spacing:.1em}

/* 진입구 */
.gate{display:flex;align-items:center;gap:13px;text-align:left;width:100%;padding:15px 14px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);transition:border-color .18s,background .18s}
.gate:hover{border-color:var(--seal);background:var(--panel-2)}
.gate-mark{width:40px;height:40px;flex:none;border-radius:2px;display:flex;align-items:center;justify-content:center;
  font-family:var(--han);font-size:18px;font-weight:700;border:1px solid var(--line);background:var(--ink-2)}
.g1 .gate-mark{color:var(--chungi);border-color:#5c4a22}
.g2 .gate-mark{color:var(--jeong);border-color:#2f4f48}
.g3 .gate-mark{color:var(--yeong);border-color:#27505b}
.g4 .gate-mark{color:var(--seal);border-color:#5c2620}
.gate-body{flex:1;min-width:0}
.gate-name{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.06em;display:block}
.gate-desc{font-size:11.5px;color:var(--fg-mid);margin-top:2px;display:block}
.gate-arrow{color:var(--fg-faint);flex:none}
/* 명운 칸은 한 줄에 하나씩 — 두 줄로 깔면 이름도 장수도 잘려 무슨 명운인지 알아볼 수가 없다 */
/* 명운 격자 — 카드 뒷면을 늘어놓는다. 좁은 화면에서 셋, 넓으면 넷.
   **`minmax(0,1fr)` 이라야 한다** (v146) — 그냥 `1fr` 이면 격자 칸의 최소 너비가
   내용(줄바꿈 없는 긴 이름)을 따라가서 칸마다 폭이 달라진다. 실제로 430px 에서
   85~104px 로 제각각이었다 */
.gates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
@media (min-width:400px){ .gates{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* 도움말 */
#s-help{gap:0}
.hpsearch{flex:none;position:relative;padding:2px 0 10px}
.hpq{width:100%;padding:11px 34px 11px 13px;font:inherit;font-size:13.5px;color:var(--fg);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);outline:none}
.hpq:focus{border-color:var(--seal)}
.hpq::-webkit-search-cancel-button{display:none}
.hpx{position:absolute;right:6px;top:2px;width:34px;height:44px;background:none;border:0;
  color:var(--fg-faint);font-size:19px;cursor:pointer}
.hpbody{flex:1;min-height:0;overflow-y:auto;padding-bottom:12px}
.hpn{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--fg-faint);padding:2px 0 8px}
.hplist{display:flex;flex-direction:column;gap:7px;margin-bottom:13px}
.hpitem{border:1px solid var(--line-soft);border-radius:var(--r-s);background:#ffffff05;padding:10px 12px}
.hpk{font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--fg);margin-bottom:5px}
.hpt{font-size:11.5px;line-height:1.8;color:var(--fg-mid);white-space:pre-line}
.hpitem mark{background:#c4453a3d;color:var(--fg);border-radius:2px}
.head{display:flex;flex-direction:column;gap:3px}
.head h2{margin:0;font-family:var(--serif);font-size:19px;font-weight:800;letter-spacing:.08em}
.head p{margin:0;font-size:11.5px;color:var(--fg-mid)}
.sec{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--fg-faint);text-transform:uppercase;
  display:flex;align-items:center;gap:8px}
.sec::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.note{font-size:11px;color:var(--fg-faint);line-height:1.7}

/* 결연 */
/* ===== 순례길 (v135) =====
   그림 한 장이 곧 화면이다. 세로로 아주 길어(724×4216) 화면은 세로로 구른다.
   첫 관문이 **맨 아래**이고 위로 올라간다 — 산을 오르는 길이라 그렇다.
   관문은 그림 위의 자리(%)에 점으로 얹는다. `CAMP[].x/.y` 가 그 좌표다 */
#s-camp{padding:0;gap:0}
/* 세로를 원본의 60% 로 눌러 쓴다 (v137, 80%에서 한 번 더) — 원본 비율 그대로 두니
   길이 늘어난 것처럼 보이고 끝까지 굴리는 데도 오래 걸렸다.
   눌러도 관문 자리는 그대로다 — x·y 가 %라 세로를 고르게 줄이면 같이 줄어든다 */
/* 순례길 — 그림이 메인 배경보다 밝아 화면을 옮길 때마다 눈이 부셨다.
   먹을 한 겹 덮어 **강호(메인) 톤에 맞춘다** (v178). 그림 자체는 건드리지 않는다 */
.road{position:relative;width:100%;aspect-ratio:724/2530;
  background:url(assets/ui/bg_campaign_pilgrimage.webp?v=1) center/100% 100% no-repeat;
  background-color:#0d0b10}
.road::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#110f13de 0%,#110f13c4 18%,#110f13bd 82%,#110f13de 100%)}
/* 관문 점 — 나중에 그림 단추로 갈아 끼운다. 그때 .rnode 의 배경만 바꾸면 된다 */
/* ===== 관문 명패 (v188) =====
   동그란 점을 걷고 **팔각 명패 그림 두 장**으로 바꿨다 —
   `campaign_stage_available.png`(금빛 · 갈 수 있다) · `campaign_stage_locked.png`(잿빛 · 못 간다).
   그림이 제 테와 바탕을 갖고 있으므로 CSS 로는 테를 두르지 않는다 (경지 문양과 같은 규칙).
   지나온 관문도 **갈 수 있는 자리**라 금빛을 쓴다 — 잿빛은 「잠긴 것」 하나만 뜻한다.
   그림에 장식 여백이 배어 있어 예전 점(30~38px)보다 한 치수 키운다 */
.rnode{position:absolute;transform:translate(-50%,-50%);z-index:2;
  width:clamp(40px,11.4vw,50px);aspect-ratio:1;padding:0;border:0;background:none;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;transition:transform .14s,filter .18s}
.rnode::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--plate) center/contain no-repeat;
  filter:drop-shadow(0 2px 6px #000a)}
.rn-n{position:relative;z-index:1;
  font-family:var(--mono);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
  color:#e9dfcd;text-shadow:0 1px 3px #000;pointer-events:none}
.rnode:active{transform:translate(-50%,-50%) scale(.92)}
/* 갈 수 있는 자리 — 금빛 명패 */
.rnode.done,.rnode.open{--plate:url(assets/ui/campaign_stage_available.png?v=1)}
/* 지나온 관문 — 넘은 도의 빛깔로 ✓ 를 적는다. 어느 도를 넘었는지 길 위에 남는다 */
.rnode.done .rn-n{color:var(--pc);text-shadow:0 1px 3px #000,0 0 8px color-mix(in srgb,var(--pc) 60%,transparent)}
/* 지금 갈 관문 — **하나만 뛴다.** 명패에 테를 더하지 않고 그림째 빛난다 */
.rnode.open{animation:rnp 1.8s ease-in-out infinite}
.rnode.open .rn-n{color:#fbf1e6;font-size:15px}
@keyframes rnp{
  0%,100%{filter:drop-shadow(0 0 5px #c4453a66)}
  50%    {filter:drop-shadow(0 0 13px #c4453abb) brightness(1.1)}}
/* 아직 못 간 관문 — 잿빛 명패. 자리는 보이되 눌러도 이야기만 뜬다 */
.rnode.lock{--plate:url(assets/ui/campaign_stage_locked.png?v=1);opacity:.72}
.rnode.lock .rn-n{color:var(--fg-faint);text-shadow:0 1px 3px #000}

/* 관문 이야기 — 바깥을 누르면 닫힌다 */
.veil.stg{align-items:center;justify-content:center;padding:26px 18px;background:#08070bd9}
.stgbox{width:100%;max-width:340px;max-height:80%;overflow-y:auto;scrollbar-width:none;
  border:1px solid var(--line);border-radius:var(--r-m);
  background:linear-gradient(160deg,#1a1620f2,#120f18f2);
  box-shadow:0 18px 50px #000b;padding:20px 20px 18px}
.stgbox::-webkit-scrollbar{display:none}
.stg-t{margin:0;font-family:var(--serif);font-size:21px;font-weight:800;letter-spacing:.04em}
/* 상대는 오른쪽 끝에 — 제목과 마주 보게 둔다 */
.stg-w{margin-top:6px;text-align:right;font-family:var(--serif);font-size:13px;font-weight:700;
  color:var(--seal);letter-spacing:.03em}
.stg-s{margin:14px 0 0;font-size:12.5px;line-height:1.95;color:#ded6c8;white-space:pre-line}
.stg-go{width:100%;margin-top:18px;padding:13px}

/* 출전 화면 머리글 — 어느 관문에 나가는지 한 줄로 */
.sthead{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);
  border-radius:var(--r-s);background:linear-gradient(140deg,var(--panel),var(--panel-2))}
.st-bar{flex:none;width:3px;align-self:stretch;border-radius:1px}
.st-no{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--ink-2);font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.st-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.st-n{font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-s{font-size:10.5px;color:var(--fg-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 만보각은 위에서부터 쌓는다 — 월정액 한 칸, 그 아래 영석 넷 */
#s-store{justify-content:flex-start}
/* 월정액 — 그림이 위, 글이 아래. 잔여 기간은 오른쪽 위 구석에 선다 */
.mpass{position:relative;flex:none;display:flex;flex-direction:column;align-items:stretch;gap:10px;
  width:100%;padding:14px 15px 13px;margin-bottom:6px;text-align:left;
  border:1px solid #4a3a6e;border-radius:var(--r-s);
  background:radial-gradient(120% 90% at 50% 0%,#2a2140,transparent 70%),linear-gradient(160deg,var(--panel),var(--panel-2));
  -webkit-tap-highlight-color:transparent;transition:border-color .16s,transform .1s}
.mpass:hover{border-color:var(--yeong)}
.mpass:active{transform:scale(.99)}
.mp-left{position:absolute;top:10px;right:12px;z-index:1;padding:3px 8px;border-radius:999px;
  font-size:10.5px;letter-spacing:.03em;color:var(--fg-faint);background:#0d0b11c0;border:1px solid var(--line)}
.mp-left.on{color:var(--yeong);border-color:#6a4fb0}
.mp-art{display:flex;align-items:center;justify-content:center;height:clamp(104px,30vw,150px)}
.mp-img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 0 16px #a97cff55) drop-shadow(0 5px 12px #000b)}
.mp-body{display:flex;flex-direction:column;gap:5px}
.mp-name{font-family:var(--serif);font-size:16px;font-weight:800;letter-spacing:.05em;color:var(--fg)}
.mp-row{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--fg-mid)}
.mp-row b,.mp-sub b,.mp-p b{color:var(--yeong);font-variant-numeric:tabular-nums}
.mp-row .mini-token,.mp-sub .mini-token,.mp-p .mini-token{margin:0 2px 0 4px;vertical-align:-3px}
.mp-sub{font-size:11px;color:var(--fg-faint)}
/* 월정액 풀이 창 */
.mpbox .mp-art{margin:12px 0 6px}
.mp-p{margin:8px 0 0;font-size:12.5px;line-height:1.75;color:#ded6c8}
.mp-p.warn{font-size:11.5px;color:var(--fg-faint)}
.mp-now{margin:12px 0 12px;font-size:12px;color:var(--yeong);text-align:right}
.ystack{display:flex;flex-direction:column;gap:9px}
.yrow{display:flex;align-items:center;gap:13px;padding:14px 15px;border:1px solid var(--line);
  border-radius:var(--r-s);background:linear-gradient(140deg,var(--panel),var(--panel-2));
  text-align:left;transition:border-color .16s,transform .1s}
.yrow:hover{border-color:var(--yeong);transform:translateY(-1px)}
/* 상품 그림 — 묶음이 클수록 크게 놓는다. 뒤에 깔아 둔 빛이 영석임을 알린다 */
.ygem{flex:none;width:84px;height:58px;object-fit:contain;
  filter:drop-shadow(0 0 12px #4fb3c855) drop-shadow(0 4px 9px #000a)}
/* 자리 폭은 고정하고 높이만 키운다 — 그래야 이름 왼쪽 끝이 네 줄 다 맞는다 */
.yrow.s .ygem{height:46px}
.yrow.m .ygem{height:55px}
.yrow.l .ygem{height:65px}
.yrow.x .ygem{height:78px;filter:drop-shadow(0 0 18px #4fb3c877) drop-shadow(0 5px 11px #000b)}
.ybody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.yname{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.06em}
.yamt{font-size:12px;color:var(--yeong);font-variant-numeric:tabular-nums}
.yprice{flex:none;font-size:11.5px;color:var(--fg-faint);letter-spacing:.08em}
/* 명호 */
/* 아이콘 (v176) — 한자 표식이 아니라 **그림**이다. 각연자 그림은 위쪽을 잡아 얼굴이 나오게 한다 */
.face{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:#1a1622 center 22% / cover no-repeat;
  box-shadow:inset 0 -2px 6px #00000055,inset 0 0 0 1px #ffffff12}
/* 그림이 아직 없는 자리 — 첫 글자로 버틴다 */
.face.none{display:flex;align-items:center;justify-content:center;
  font-family:var(--han);font-size:.62em;font-weight:700;color:#8d8397;background:#221d2c}
/* 일곱 칸(무명자 + 각연자 여섯)이라 넷씩 두 줄이 딱 맞는다 */
.facegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px 9px}
.facepick{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0;border:0;background:none;font-size:22px;-webkit-tap-highlight-color:transparent}
.facepick .face{aspect-ratio:1;height:auto;border:1px solid var(--line);transition:.14s}
.facepick.on .face{border-color:var(--seal);box-shadow:0 0 0 1px var(--seal),0 0 14px #c4453a44}
@media (hover:hover) and (pointer:fine){ .facepick:not(.lock):hover .face{border-color:var(--seal)} }
.facepick:not(.lock):active .face{transform:scale(.95)}
.fc-n{font-size:9.5px;line-height:1.3;color:var(--fg-mid);text-align:center;
  width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 잠긴 아이콘 — 흐리게 죽이고 「잠김」을 얹는다. 누르면 무엇을 해야 열리는지 아래에 적힌다 */
.facepick.lock{position:relative}
.facepick.lock .face{filter:grayscale(1) brightness(.45);border-style:dashed}
.facepick.lock .fc-n{color:var(--fg-faint)}
.fc-lk{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:#cfc4b4;
  padding:2px 6px;border-radius:2px;background:#000000b3;pointer-events:none}
/* 고른 잠긴 칸은 테를 밝혀 어느 것을 눌렀는지 보여 준다.
   ⚠ 이름이 `.fc-sel` 인 까닭 — `.pick` 은 **명운 격자**가 이미 쓰고 있다(display:grid) */
.facepick.lock.fc-sel .face{border-color:var(--warn)}
.facemsg{min-height:1px;margin-top:14px;text-align:center;line-height:1.7}
.facemsg:empty{display:none}
.fc-way{display:block;margin-top:5px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;color:var(--seal)}
/* 단추의 기본 좌우 여백을 지운다 — 안 지우면 얼굴이 가로로 눌려 타원이 된다 */
.avatar{position:relative;width:78px;height:78px;font-size:34px;flex:none;padding:0}
.avatar .edit{position:absolute;right:-2px;bottom:-2px;width:25px;height:25px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  background:var(--panel);border:1px solid var(--line);color:var(--fg-mid)}
.avatar:hover .edit{border-color:var(--seal);color:var(--fg)}
/* 경지가 왼쪽 큰 칸, 오른쪽에 승수 둘이 위아래로 (v177) */
.wrow{display:flex;gap:9px;width:100%;align-items:stretch}
.wside{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.wcell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:11px 6px;
  border:1px solid var(--line-soft);border-radius:var(--r-s);background:#ffffff05}
.wcell b{font-size:26px;font-weight:900;color:var(--ok);font-variant-numeric:tabular-nums;line-height:1}
.wcell.pvp b{color:var(--seal)}
/* 승수 둘은 **가로 칸**이다 — 숫자와 이름이 한 줄에 선다 */
.wside .wcell{flex-direction:row;align-items:center;justify-content:center;gap:7px;padding:10px 8px}
.wside .wcell b{font-size:22px}
/* 경지 — 문양이 들어가므로 왼쪽 큰 칸을 차지한다 */
.wcell.gy{flex:0 0 40%;gap:6px;padding:13px 8px}
.wcell.gy .pg-em{--em:clamp(48px,15vw,62px)}
.wcell.gy .pg-ko{font-family:var(--serif);font-size:13.5px;font-weight:800;color:#f0e8da;letter-spacing:.04em}
/* 문양이 아직 없는 경지 — 한자로 버틴다 */
.wcell.gy .pg-han{font-family:var(--han);font-size:19px;font-weight:400;color:#e6d9b8;letter-spacing:.02em}
.wcell span{font-size:10.5px;color:var(--fg-faint);letter-spacing:.1em}
.namebox{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 16px;
  border:1px solid var(--line);border-radius:var(--r-s);background:linear-gradient(160deg,var(--panel),var(--panel-2))}
.nameline{display:flex;align-items:baseline;gap:3px}
.uname{font-family:var(--serif);font-size:27px;font-weight:800;letter-spacing:.08em}
.utag{font-size:13px;color:var(--fg-faint);font-variant-numeric:tabular-nums}
.namein{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--ink-2);color:var(--fg);font-family:inherit;font-size:15px;text-align:center}
.namein:focus{outline:none;border-color:var(--seal)}
.pkbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pkname{font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkstage{position:relative;display:flex;align-items:center}
.pkrail{flex:1;min-width:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;touch-action:pan-x pan-y}
.pkrail::-webkit-scrollbar{display:none}
/* 표지 하나만 가운데에 세운다 (v126) — 옆에 세우던 각연자 줄을 걷어냈다 */
.pkslide{flex:0 0 100%;scroll-snap-align:center;display:flex;justify-content:center;align-items:flex-start;
  gap:12px;padding:4px 6px}
/* 표지 + 「등장 카드 확인」 을 한 덩어리로.
   옆에 세울 것이 없어졌으니 폭은 화면에 맞춰 잡는다 — 너무 키우면 종이팩이 화면을 다 먹는다 */
.pkcover{flex:0 0 min(58%,208px);display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0;border:0;background:none;cursor:pointer}
.pkcover .packart{flex:none;width:100%}
/* 한지 외피 — 표지를 종이에 끼운 것처럼 보이게 뒤에 깔아 둔다.
   그림(1061×1482) 안쪽 판이 x 11.87~88.69%, y 8.97~88.93% 이라
   표지가 그 판에 정확히 들어가도록 밖으로 물린 만큼을 음수로 준다 */
/* 물린 만큼을 바깥에 여백으로 돌려놓는다 — 안 그러면 접힌 종이가 「등장 카드 확인」 을 덮는다 */
.pkskin{position:relative;flex:none;align-self:stretch;display:flex;
  margin:15.7% 0 19.3%}
.pkskin::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-15.5%;right:-14.7%;top:-11.2%;bottom:-13.8%;
  background:url(assets/ui/pack_hanji.webp?v=1) center/100% 100% no-repeat;
  filter:drop-shadow(0 12px 24px #000b)}
.pkskin .packart{position:relative;z-index:1}
.pk-see{font-size:11px;letter-spacing:.06em;color:var(--fg-mid);
  padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:#0e121880}
.pkcover:hover .pk-see{color:var(--fg);border-color:var(--seal)}
.parr{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:30px;height:46px;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--fg-mid);
  background:#0b0908cc;border:1px solid var(--line);border-radius:var(--r-s)}
.parr:hover{color:var(--fg);border-color:var(--seal)}
.parr.l{left:0} .parr.r{right:0}
.pkdots{display:flex;justify-content:center;gap:7px}
.pkdot{width:7px;height:7px;border-radius:50%;background:var(--line);padding:0;border:none}
.pkdot.on{background:var(--seal);box-shadow:0 0 8px #c4453a88}
.packbox{display:flex;flex-direction:column;align-items:center;gap:13px}
.packart{width:160px;aspect-ratio:63/88;border-radius:3px;position:relative;border:1px solid #5c4a22;
  background:radial-gradient(120% 70% at 50% 0%,#4a3a18 0%,transparent 60%),
             repeating-linear-gradient(122deg,#221c14 0 8px,#2a2218 8px 16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;overflow:hidden;
  box-shadow:0 12px 30px -14px #000}
.packart::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--chungi),transparent);box-shadow:0 0 14px 1px #d4a84366}
/* 표지 그림이 있으면 장식 선과 안개는 비킨다 */
.packart[style*="background-image"]::after,.packart[style*="background-image"]::before{display:none}
/* 이름 자리 — 아래쪽에 그늘을 깔고 그 위에 얹는다. 그늘이 없으면 밝은 표지에서 글자가 묻힌다 */
.packart .pk-n{position:absolute;left:8%;right:8%;bottom:7%;z-index:2;text-align:center;
  font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.2em;text-indent:.2em;
  color:#f6ecd6;text-shadow:0 2px 6px #000,0 0 14px #0009}
.packart .pk-n::before{content:"";position:absolute;left:-12%;right:-12%;bottom:-40%;top:-95%;z-index:-1;
  background:linear-gradient(180deg,transparent,#0b0908c4 46%,#0b0908e8 100%)}
.pk-han{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--han);font-size:66px;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(120deg,var(--t1),var(--t2));-webkit-background-clip:text;
  background-clip:text;color:transparent;opacity:.5}
.packart::before{background:radial-gradient(70% 48% at 50% 34%,var(--t1,#d4a84333),transparent 70%)}
.pkslide .pk-s{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;color:#b39a5e;z-index:1}
.pack-meta{text-align:center}
.pack-meta h3{margin:0;font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:.06em}
.pack-meta p{margin:5px 0 0;font-size:11.5px;color:var(--fg-mid);line-height:1.6}
.buys{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.buy{border:1px solid var(--line);border-radius:var(--r-s);padding:11px 8px;background:var(--panel);
  display:flex;flex-direction:column;align-items:center;gap:4px;transition:.18s}
.buy:hover:not([disabled]){border-color:var(--seal);background:var(--panel-2)}
.buy[disabled]{opacity:.4;cursor:default}
.buy b{font-family:var(--serif);font-size:14px;font-weight:700}
.buy span{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}
.buy.pg span{color:var(--chungi)} .buy.py span{color:var(--yeong)}
.links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.tlink{font-size:11.5px;color:var(--fg-mid);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.tlink:hover{color:var(--seal)}
.tbl{border:1px solid var(--line-soft);border-radius:var(--r-s);overflow:hidden}
.trow{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;font-size:12px;border-bottom:1px solid var(--line-soft)}
/* 무리의 합 — 낱낱보다 먼저 나오므로 굵게 세워 둔다 (v153) */
.trow.sum{color:var(--fg);font-weight:700;background:#ffffff08}
.trow.sum .v{color:var(--fg)}
.trow:last-child{border-bottom:none}
.trow.h{background:var(--panel);font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--fg-faint);text-transform:uppercase}
.trow .v{font-family:var(--mono);font-variant-numeric:tabular-nums}
.trow.acc .n{color:var(--chungi)}

/* ===== 카드 ===== */
.card{aspect-ratio:63/88;border-radius:3px;position:relative;overflow:hidden;border:1px solid #0b0d11;
  background:var(--panel);font-size:10px;container-type:inline-size}
/* 카드틀 — 실물 카드처럼 안쪽으로 둘러친다. 카드 폭을 따라 두께가 같이 커진다(cqw).
   ::after 는 이미 쓰는 데가 있어(.hcard.no) ::before 로 둔다 */
.card::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:2px;
  border:clamp(1.2px,1.7cqw,3px) solid var(--pc,var(--line));
  box-shadow:inset 0 0 0 1px #00000059,0 0 0 1px #00000070}
/* 틀에 사선 줄무늬 — 오른쪽 위에서 왼쪽 아래로 흐른다.
   테두리 칸에만 칠하려고 마스크로 안쪽을 도려낸다. 마스크를 못 쓰는 환경에서는
   위의 민무늬 테두리가 그대로 남도록 @supports 로 감싼다 — 안 그러면 줄무늬가 그림을 덮는다 */
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
  .card::before{
    border-color:transparent;
    background:repeating-linear-gradient(135deg,
      var(--pc,var(--line)) 0 .8px,
      color-mix(in srgb,var(--pc,var(--line)) 54%,#000) .8px 1.6px) border-box;
    -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 exclude,linear-gradient(#000 0 0)}
}
/* 보유하지 않은 카드 — 연보·엮기에서 쓸 수 없다는 것이 한눈에 보여야 한다 */
/* 미보유 카드 — 흑백으로 눌러 두되 **속은 비치지 않는다.**
   opacity 를 내리면 뒤 배경이 관통해 보여, 화면이 움직일 때 카드가 아니라 배경이 따라 움직인다 */
.card.locked{filter:grayscale(1) brightness(.42) contrast(.95)}
.c-art{position:absolute;inset:0}
.c-art::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(118deg,#0000 0 6px,#ffffff07 6px 7px)}
.c-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.c-sigil{position:absolute;left:0;right:0;top:27%;text-align:center;font-family:var(--han);font-weight:700;
  font-size:clamp(26px,32cqw,58px);line-height:1;opacity:.2;color:#fff;pointer-events:none}
.c-tbd{position:absolute;left:0;right:0;bottom:38%;text-align:center;font-family:var(--mono);
  font-size:clamp(5.5px,4.4cqw,7.5px);letter-spacing:.14em;color:#ffffff3d}
/* 위쪽 어둠은 얕게 — 이름이 아래로 내려갔으니 얼굴을 덮을 이유가 없다. 아래는 글이 얹히므로 깊게 */
.c-veil{position:absolute;inset:0;background:linear-gradient(180deg,#00000059 0 9%,transparent 20% 40%,#000000d6 62%,#000000f2 100%)}
/* 배지 도안은 `assets/ui/` 그림이다. 숫자는 그 위에 CSS 가 얹는다 — 그림에는 숫자가 없다.
   그림을 갈아 끼우면 `?v=` 뒤 숫자를 올려야 브라우저가 새로 받는다 (카드 그림과 달리 자동이 아니다) */
.c-cost,.c-atk,.c-hp{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;
  width:clamp(16px,19cqw,27px);aspect-ratio:1;font-size:clamp(9.5px,10.5cqw,14.5px);
  line-height:1;text-shadow:0 1px 2px #000c;
  /* 명조 숫자는 잉크가 줄 가운데보다 0.0345em 위에 앉는다(글꼴 상승 13 / 하강 3 의 비대칭).
     가운데 맞춤은 줄상자를 맞출 뿐이라 눈에는 위로 뜬다 — 그만큼 위쪽에 여백을 줘 눌러 앉힌다.
     여백이 도안까지 밀지 않도록 배경 기준을 border-box 로 못 박는다 */
  padding-top:.069em;
  background-size:100% 100%;background-repeat:no-repeat;background-origin:border-box}
.c-cost{top:4%;left:4%;background-image:url(assets/ui/badge_cost.png?v=3);color:#f4f2ec}
/* 비용이 제값이 아닌 카드 — 싸졌으면 초록, 비싸졌으면 붉다.
   숫자만 바뀌면 원래 그 값이었는지 손을 탄 것인지 알 수가 없다 */
.c-cost.dn{color:#7dffb4;text-shadow:0 0 7px #4dffa08c,0 1px 2px #000}
.c-cost.up{color:#ff9a8e;text-shadow:0 0 7px #e8695f8c,0 1px 2px #000}
.c-atk{bottom:3.5%;left:4%;background-image:url(assets/ui/badge_atk.png?v=3);color:#fff0e8}
.c-hp{bottom:3.5%;right:4%;background-image:url(assets/ui/badge_hp.png?v=3);color:#effaf0}
.c-path{position:absolute;top:3%;right:3%;width:clamp(18px,20cqw,28px);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;color:#fff;filter:drop-shadow(0 2px 2px #000c)}
/* 도 표식은 밝은 것(정파 같은)이 밝은 그림 위에 얹히면 묻힌다 — 검은 선을 한 겹 둘러 떼어 놓는다 */
.c-path-img{display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000)}
.c-sigil-img{width:92px;height:92px;object-fit:contain;opacity:.38;filter:drop-shadow(0 3px 4px #000c)}
/* 이름은 그림 위가 아니라 아래 글상자 맨 윗줄이다 — 일러스트의 얼굴이 위쪽에 있어 가린다 */
.c-name{padding:0 3px;text-align:center;font-family:var(--serif);font-weight:700;
  font-size:clamp(7.5px,6.4cqw,12px);line-height:1.3;color:#fff;text-shadow:0 1px 3px #000;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 수라장과 손패에서는 한 치수 내린다 (v128) — 60~70px 카드에서 이름이 두 줄로 접혀
   효과 태그를 밀어냈다. 자세히 보기·연보의 큰 카드는 그대로 둔다 */
.unit .c-name,.hcard .c-name{font-size:clamp(6px,5.6cqw,10px);line-height:1.22}
.unit .c-name::after,.hcard .c-name::after{margin-top:2px}
/* 이름과 효과 문구는 한 덩어리로 아래에서 쌓아 올린다.
   바닥은 코스트·공력·기력 구슬 바로 위 — 구슬 높이가 카드 크기마다 달라지므로 그 값 그대로 계산해 띄운다.
   (구슬 = 아래 3.5%(=4.9cqw) + 지름 clamp(16px,19cqw,27px)) */
/* 이름과 효과 문구 사이의 가름선 — **그림을 걷어내고 흰 줄 하나로** 바꿨다 (v128).
   뇌문 띠는 작은 카드에서 뭉개져 무늬가 아니라 때처럼 보였다.
   카드 폭을 다 채우지 않는다 — 절반만 그어야 이름 아래에 붙은 줄로 읽힌다 */
/* ⚠ **두께는 1px 이다. 1 미만으로 내리지 말 것** (v158).
   v139 에 0.34px 로 두었다 — 화소 밀도 3인 휴대폰에서 딱 1화소로 떨어지라고 잡은 값인데,
   밀도가 1·2인 화면에서는 줄이 놓인 세로 자리가 화소 경계에 맞느냐 아니냐에 따라
   **어떤 카드는 그어지고 어떤 카드는 통째로 사라졌다.** 있다 없다 하는 선은 없느니만 못하다.
   가늘어 보이게 하는 것은 두께가 아니라 **알파**가 맡는다.
   폭은 25% — 카드 폭을 다 채우면 가름선이 아니라 테두리로 읽힌다 */
.c-name::after{content:"";display:block;width:25%;height:1px;margin:3px auto 0;
  background:#ffffff80;pointer-events:none}
.c-foot{position:absolute;left:5%;right:5%;bottom:calc(4.9cqw + clamp(16px,19cqw,27px) + 3px);
  display:flex;flex-direction:column;gap:2px;pointer-events:none;max-height:70%;overflow:hidden}
/* 카드 종류(현신·각연자·초식…)는 맨 윗줄, 코스트 구슬과 도 표식 사이에 앉힌다.
   아래 글상자에서 빼내야 효과 문구가 쓸 자리가 그만큼 넓어진다 */
.c-type{position:absolute;top:4%;left:50%;transform:translateX(-50%);z-index:2;max-width:42%;
  text-align:center;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(5px,4.1cqw,7px);line-height:1.55;letter-spacing:.06em;text-indent:.06em;
  color:#efe6d6;padding:0 3px;border-radius:7px;background:#000000ab;text-shadow:0 1px 2px #000}
/* ⚠ **효과 자리는 비어 있어도 한 줄을 잡아 둔다** (v157).
   효과가 없는 카드와 한 줄짜리 효과를 가진 카드가 나란히 서면 이름 높이가 들쭉날쭉했다.
   한 줄만 잡아 둔다 — 두 줄짜리(길흉 같은 것)는 어차피 한 줄 더 넘어간다.
   `min-height` 는 줄높이(1.45)와 같은 em 이다. **글꼴 크기를 고치면 이 값은 따라온다** */
.c-text{font-size:clamp(5.5px,4.4cqw,8px);line-height:1.45;min-height:1.45em;color:#e9e2d6;
  text-align:center;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* 손패만 한 카드에서는 효과 문구가 6px 이라 어차피 안 읽힌다. 이름과 유형만 남긴다.
   컨테이너 쿼리는 특이도를 올려 주지 않으므로 반드시 `.c-text` 뒤에 와야 이긴다 */
@container (max-width:95px){ .c-text{display:none} }
/* 각연자 표식 — 아래 가운데는 보유 수량이 쓰는 자리라 서로 부딪혔다. 코스트 바로 아래로 옮긴다 */
.c-eng{position:absolute;left:4%;top:calc(4% + clamp(16px,19cqw,27px) + 1.6cqw);
  width:clamp(16px,19cqw,27px);text-align:center;font-family:var(--han);font-weight:800;
  font-size:clamp(5.5px,4.9cqw,8.5px);letter-spacing:0;line-height:1.05;color:var(--chungi);
  text-shadow:0 1px 3px #000,0 0 7px #000a}
/* 보유 수량은 공력·기력 구슬과 같은 줄, 두 구슬 사이 한가운데에 앉힌다.
   구슬 중심 높이 = 아래 4.9cqw + 지름의 절반 */
.c-own{position:absolute;left:50%;bottom:calc(4.9cqw + clamp(16px,19cqw,27px)/2);
  transform:translate(-50%,50%);padding:2px 6px;font-family:var(--mono);
  font-size:clamp(8px,7cqw,10px);font-weight:700;white-space:nowrap;
  background:#000000cc;color:var(--fg);z-index:3;border-radius:9px;border:1px solid #ffffff1f}
.c-own.z{color:var(--fg-faint)}
/* 자세히 보기 */
[data-cid],[data-pkpool]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pkcover[data-pkpool]{cursor:pointer}
.lp-on{outline:1px solid var(--seal);outline-offset:1px}

/* 연보 */
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
/* 줄 이름을 .frow 에서 .fline 으로 바꿨다 — 수라장의 줄(.frow, min-height:72px)과 이름이 겹쳐
   필터 다섯 줄이 저마다 72px 을 차지하고 있었다. 이름이 부딪치면 조용히 이런 일이 난다 */
.filters{display:flex;flex-direction:column;gap:5px}
.fline{display:flex;align-items:center;gap:8px;min-width:0;min-height:0}
.flab{flex:none;width:28px;font-size:10px;letter-spacing:.14em;color:var(--fg-faint)}
.fchips{flex:1;min-width:0;display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.fchips::-webkit-scrollbar{display:none}
.fsels{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
/* 명운 엮기에서는 필터를 접어 둔다 — 서른 장을 골라 담는 화면에서
   필터가 첫 화면의 반을 먹으면 카드를 보려고 계속 밀어 내려야 한다.
   접힌 채로도 무엇이 걸려 있는지는 한 줄로 보여 준다 */
.ftog{width:100%;display:flex;align-items:center;gap:9px;padding:7px 10px;
  border:1px solid var(--line);border-radius:2px;background:var(--panel);text-align:left}
.ftog-t{flex:none;font-size:10px;letter-spacing:.14em;color:var(--fg-faint)}
.ftog-s{flex:1;min-width:0;font-size:11.5px;color:var(--fg-mid);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftog-s.off{color:var(--fg-faint)}
.ftog-i{flex:none;font-size:9px;color:var(--fg-faint);transition:transform .18s}
.filters.open .ftog{border-color:var(--seal)}
.filters.open .ftog-i{transform:rotate(180deg)}
.fbody{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.fq{flex:1;min-width:0;padding:6px 10px;border:1px solid var(--line);border-radius:2px;
  font-size:12px;color:var(--fg);background:var(--panel);font-family:inherit}
.fq::placeholder{color:var(--fg-faint)}
.fq:focus{outline:none;border-color:var(--seal)}
.fsel{min-width:0;padding:5px 6px;border:1px solid var(--line);border-radius:2px;font-size:11px;
  color:var(--fg-mid);background:var(--panel);font-family:inherit;appearance:none;text-align:center}
.fsel:focus{outline:none;border-color:var(--seal);color:var(--fg)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:5px 11px;border:1px solid var(--line);border-radius:2px;font-size:11.5px;color:var(--fg-mid);white-space:nowrap}
.chip:hover{color:var(--fg)}
.chip.on{background:var(--seal-deep);border-color:var(--seal);color:#f3e4e1}
/* 잠긴 칩 — 명운 엮기에서 남의 종파 (v204). **지우지 않고 눌리지만 않게 한다** —
   자리가 사라지면 왜 못 고르는지가 안 보인다 */
.chip.off{opacity:.3;pointer-events:none;text-decoration:line-through}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gcard{position:relative;cursor:pointer}
/* 찾기 줄에 바짝 붙어 있으면 어디까지가 거르개고 어디부터가 카드인지 안 갈린다 */
.poolgrid{margin-top:9px;gap:11px}
#plBody{gap:9px}
.tally{display:flex;justify-content:flex-end;font-family:var(--mono);font-size:11px;color:var(--fg-mid);font-variant-numeric:tabular-nums}
.legacy{border:1px solid #5c4a22;background:#231c10;border-radius:var(--r-s);padding:9px 11px;font-size:11px;color:var(--chungi);line-height:1.7}

/* 명운(덱) */
.preset{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:12px 13px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel)}
.preset:hover{border-color:var(--seal)}
.preset.empty,.preset.locked{border-style:dashed;background:none}
.preset.locked{opacity:.62}
.p-no{font-family:var(--mono);font-size:11px;color:var(--fg-faint);width:14px;flex:none;text-align:center}
.p-body{flex:1;min-width:0}
.p-name{font-family:var(--serif);font-size:14.5px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-meta{font-size:11px;color:var(--fg-mid);margin-top:2px;display:block;font-family:var(--mono);font-variant-numeric:tabular-nums}
.p-meta.bad{color:var(--warn)}
.dots{display:flex;gap:3px;flex:none}
.dot{width:7px;height:7px;border-radius:50%}

#s-edit,#s-battle{padding:var(--top-gap) 0 0;gap:0}
.ed-head{flex:none;padding:11px 14px 9px;border-bottom:1px solid var(--line-soft);background:var(--panel);display:flex;flex-direction:column;gap:8px}
.ed-row{display:flex;gap:10px;align-items:center}
/* 이름칸은 좁게, 장수는 크게 — 엮는 동안 내내 보는 것은 이름이 아니라 장수다 */
.ed-name{flex:0 1 58%;min-width:0;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-s);
  padding:8px 10px;font-family:var(--serif);font-size:13.5px;font-weight:700}
.ed-cnt{margin-left:auto;font-family:var(--mono);font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;
  flex:none;color:var(--fg);letter-spacing:.01em;line-height:1}
.ed-cnt.full{color:var(--ok)} .ed-cnt.over{color:var(--danger)}
/* 코스트 분포는 가로 막대로 눕힌다 — 칸이 다섯뿐이라 세로로 세우면 오히려 안 읽힌다 */
.curve{display:flex;flex-direction:column;gap:4px}
.cv{display:flex;align-items:center;gap:8px}
.cv-n{flex:none;width:13px;text-align:center;font-family:var(--mono);font-size:10.5px;font-weight:700;
  color:var(--fg-mid);line-height:1;font-variant-numeric:tabular-nums}
.cv-t{flex:1;min-width:0;height:9px;border-radius:2px;background:#ffffff0d;overflow:hidden}
.cv-b{display:block;height:100%;background:var(--seal-deep);border-radius:2px;transition:width .2s}
.cv-b.z{background:transparent}
.cv-c{flex:none;width:16px;text-align:right;font-family:var(--mono);font-size:10px;color:var(--fg-faint);
  line-height:1;font-variant-numeric:tabular-nums}
.ed-body{flex:1;min-height:0;overflow-y:auto;padding:11px 14px 16px;display:flex;flex-direction:column;gap:11px}
/* 엮은 카드 — 위에 목록으로 둔다 */
.dkwrap{flex:none;border-bottom:1px solid var(--line-soft);background:var(--ink-2)}
.dkhead{display:flex;justify-content:space-between;align-items:center;padding:6px 14px 4px;
  font-size:9.5px;letter-spacing:.2em;color:var(--fg-faint)}
.dkn{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--fg-mid)}
.dklist{max-height:136px;overflow-y:auto;padding:0 10px 8px;display:flex;flex-direction:column;gap:3px;
  scrollbar-width:none}
.dklist::-webkit-scrollbar{display:none}
.dkrow{display:flex;align-items:center;gap:7px;width:100%;padding:4px 7px;border-radius:2px;
  background:var(--panel);border:1px solid transparent;text-align:left}
.dkrow:hover{border-color:var(--seal);background:var(--panel-2)}
.dkrow.miss{background:#221513;border-color:#5a3630}
.dkc{flex:none;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;background:linear-gradient(160deg,#4a7f8c,#1d3a42);color:#e6f6fa;font-variant-numeric:tabular-nums}
.dkbar{flex:none;width:3px;align-self:stretch;border-radius:1px}
.dkn2{flex:1;min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkq{flex:none;font-size:11px;font-weight:700;color:var(--fg-mid);font-variant-numeric:tabular-nums}
.dkq.e{font-family:var(--han);color:var(--chungi)}
/* 고르는 격자 */
.gcard.pickable{cursor:pointer}
.gcard.pickable:hover .card{box-shadow:0 0 0 1px var(--seal)}
/* 더 담을 수 없는 카드 (상한·보유·30장 참) */
.gcard.dead{opacity:.3}
.gcard.dead .card{filter:grayscale(.9) brightness(.55)}
/* 명운에 담은 장수 — 보유 수량(아래 가운데 칩)과 헷갈리지 않게 오른쪽 위에 따로 둔다 */
.gq{position:absolute;top:3px;right:3px;z-index:5;
  min-width:24px;height:19px;padding:0 6px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
  background:#0b0908ee;border:1px solid var(--ok);color:var(--ok);font-variant-numeric:tabular-nums}
.gcard.indeck .c-eng{display:none}
.gcard.indeck .card{box-shadow:0 0 0 1px var(--ok)}
/* 아직 없는 카드는 값을 붙여 둔다 — 눌러 보기 전에 얼마인지 알아야 누를지 말지를 정한다 */
.gcard.craftable .card{opacity:.82}
.gcraft{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:2px;padding:2px 7px;border-radius:2px;white-space:nowrap;
  font-size:10.5px;color:#dfe6f2;background:#181b26e8;border:1px solid #5b6a94aa;
  box-shadow:0 1px 5px #000a}
.gcraft.no{color:var(--fg-faint);border-color:var(--line);background:#14121ae8}
.gcraft .mini-token{width:12px;height:12px;margin:0}
.ed-foot{flex:none;display:flex;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);background:var(--panel)}
.result .fbtn{flex:none;width:min(220px,72%)}
/* flex:1 은 단추를 가로로 나눠 갖자는 뜻이다. 화면에 바로 놓이면 세로로 늘어나 버린다 */
.screen > .fbtn{flex:none}
.fbtn{flex:1;padding:11px;border:1px solid var(--line);border-radius:var(--r-s);font-size:13px;text-align:center;transition:.16s}
.fbtn:hover{border-color:var(--seal)}
.fbtn.pri{background:var(--seal-deep);border-color:var(--seal);color:#f3e4e1;font-weight:600}
.fbtn[disabled]{opacity:.4;cursor:default;background:var(--panel-2);border-color:var(--line);color:var(--fg-mid);font-weight:400}
/* ⚠ 이 `.warn` 은 **알림 상자** 전용이다. 시계 막대도 20초부터 `.warn` 을 달기 때문에
   가려 두지 않으면 시계에 테두리와 바탕이 함께 붙는다 — 갑자기 상자가 쳐진 것처럼 보였다 (v148) */
.warn:not(.tbar){border:1px solid #5c4220;background:#231a0f;border-radius:var(--r-s);padding:9px 11px;font-size:11.5px;color:var(--warn);line-height:1.7}

/* ===== 수라 ===== */
.battle-shell{flex:1;min-height:0;display:grid;grid-template-columns:minmax(430px,560px);grid-template-areas:"arena";justify-content:center;background:transparent;overflow:hidden}   /* 바탕은 #s-battle 이 진다 */
/* 수라 화면의 바탕 — 세로로 긴 그림 한 장이 위아래 끝까지 이어진다.
   수라장 칸에만 깔면 본체·패 칸에서 그림이 토막 나 화면이 여러 조각으로 보인다 */
.battle-arena{grid-area:arena;min-width:0;min-height:0;display:flex;flex-direction:column;
  box-shadow:0 0 36px #0009;position:relative;z-index:2;
  background:transparent}
/* 바탕은 수라 화면 전체가 진다 — 위쪽 카메라 여백(.screen 의 padding)까지 같은 그림이라야
   거기만 색이 달라 보이지 않는다. 그늘은 수라장(가운데)에서 멀어질수록 짙어진다 */
/* 바탕을 아주 약간만 눌러 둔다 — 카드와 글자가 흙바닥 위에서 더 또렷해진다.
   맨 앞의 평평한 한 겹(#0000001f)이 그 구실을 한다 */
#s-battle{background-color:#15120f;
  background-image:linear-gradient(#0000001f,#0000001f),
    linear-gradient(180deg,
    #070709ed 0%,#070709b0 9%,#0707095c 20%,#0707091f 33%,
    #07070900 50%,
    #0707091f 67%,#0707095c 80%,#070709b0 91%,#070709ed 100%),
    url(assets/ui/bg_battle_ground.webp?v=3);
  background-size:100% 100%,100% 100%,cover;background-position:center,center,center;background-repeat:no-repeat}
.battle-side{min-width:0;padding:14px 12px;background:linear-gradient(180deg,#0a0a0bb3,#07070ad9);position:relative;z-index:1}   /* 보랏빛을 빼고 중성으로 */
.battle-side.clock-side{grid-area:clock;display:flex;flex-direction:column;align-items:flex-end}
.hud-label{width:100%;font-size:9px;line-height:1;letter-spacing:.2em;color:var(--fg-faint);text-align:left;margin-bottom:7px}
.clock-side .hud-label{text-align:right}
.battle-side .clock{width:86px;min-height:52px;flex-direction:column;gap:1px;padding:6px 10px;background:#0b0b0dd9}
.clock::before{content:"남은 시간";font-size:8px;letter-spacing:.12em;color:var(--fg-faint)}
.battle-side .ck-n{font-size:24px;line-height:1.1}
@media (min-width:760px){
  .app.battle-wide{max-width:min(1100px,100vw)}
  .app.battle-wide .topbar{padding-inline:max(16px,calc((100% - 950px)/2))}
}
@media (max-width:759px){
  .battle-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"arena"}
  .battle-side{padding:5px 8px;border-bottom:1px solid var(--line-soft)}
  .battle-side.clock-side{align-items:flex-start;justify-content:center}
  .hud-label{display:none}
  .battle-side .clock{width:66px;min-height:31px;padding:2px 7px;flex-direction:row;gap:5px}
  .clock::before{content:"시간";font-size:7px}
  .battle-side .ck-n{font-size:16px}
  .battle-arena{border-inline:0}
}
@media (max-width:360px){
  .tray{gap:5px;padding-inline:6px}
}
.cmdr{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px;
  padding:6px 12px;background:transparent;border-bottom:0}
/* 이름은 본체에 붙인다 — 상대는 머리 위, 나는 발밑 */
.cm-c{grid-area:1/2;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.cmdr.mine{border:0}
.por{width:44px;height:44px;flex:none;border-radius:3px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  border:2px solid var(--line);position:relative;font-size:17px;font-weight:800;
  transition:box-shadow .16s,transform .1s}
.por:hover{transform:translateY(-1px)}
.pips{grid-area:1/3;justify-self:end}
/* 본체는 위폐(位牌) 그림으로. 그림이 제 테두리를 갖고 있어 네모 테두리와 바탕은 걷는다 */
/* 그림이 정사각 안의 정원이라 겨눔 테도 원형이어야 한다 — 네모 테를 두르면 그림 밖 빈 구석이 같이 빛난다 */
.por.foe,.por.me{border:0;border-radius:50%;background-repeat:no-repeat;background-position:center;
  background-size:contain;width:50px;height:50px}
.por.foe{background-image:url(assets/ui/battle_core_enemy.webp?v=7);color:#f7dcd4;
  text-shadow:0 1px 3px #000,0 0 7px #0009}
.por.me{background-image:url(assets/ui/battle_core_player.webp?v=7);color:#dff3ea;
  text-shadow:0 1px 3px #000,0 0 7px #0009}
.por.hit{animation:shake .3s}
/* ===== 각성한 본체 (v188 — 불을 걷고 후광으로) =====
   각성하면 본체 뒤에 **후광**(`battle_core_awakening_backplate_spin.png`)이 뜨고
   **판이 끝날 때까지 남는다.** v187 까지는 불이 잠깐 붙었다 꺼졌는데,
   각성은 **한 번 일어나면 되돌릴 수 없는 상태**다 — 스쳐 가는 연출로는 그 말이 안 된다.

   ⚠ **수라장 배경 바로 위**에 깔린다. 본체(위패)와 명(明)은 그 위에 얹히고 이름도 위에 선다 —
   그래서 후광을 `.por` 안에 넣지 않는다. 안에 넣으면 위패 그림 위로 올라와 얼굴을 가린다.
   `.porwrap` 이 본체를 감싸고, 후광은 그 안의 **형제**로 앉아 z-index 로 뒤에 깔린다.

   그림은 가운데가 뚫린 고리다. **도는 것을 전제로 그린 것**이라(`_spin`) 위아래가 없다 —
   v188 의 첫 판은 용 뿔이 위를 향해 있어 돌리면 어색했다.
   ⚠ **구멍이 폭의 48%** 다(첫 판은 55%였다). 본체 50px 이 그 구멍 안에 여유 있게 들어앉으려면
   구멍이 64px 쯤이라야 하므로 후광은 64 ÷ 0.48 ≈ **134px** 이다.
   그림을 갈면 이 셈을 다시 한다 — 구멍 지름부터 재고, 거기에 본체를 넣는다 */
/* ⚠ **후광은 가장 아래 칸에 둔다.** `.porwrap` 이 자리를 잡은(positioned) 상자라,
   z-index 를 안 주면 자리 안 잡은 형제들(이름·시계 줄) **위로** 올라가 글씨를 덮는다.
   `z-index:0` 으로 눌러 두고, 그 위에 올라야 할 것들에 `z-index:1` 을 준다 —
   본체·명은 이 상자 안에서, 이름과 시계 줄은 바깥에서 */
.porwrap{position:relative;z-index:0;flex:none;display:flex;align-items:center;justify-content:center}
.porwrap .por{position:relative;z-index:1}
.cm-halo{position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;
  width:var(--halo,clamp(104px,32vw,134px));aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  background:url(assets/ui/battle_core_awakening_backplate_spin.png?v=1) center/contain no-repeat;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,1.2,.35,1)}
/* 피어나는 순간 — 작게 시작해 부풀며 돈다. 그 뒤로는 아주 느리게 계속 돈다 */
.porwrap.awoke .cm-halo{opacity:.92;transform:translate(-50%,-50%) scale(1);
  animation:halospin 26s linear infinite}
@keyframes halospin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to  {transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .porwrap.awoke .cm-halo{animation:none} }
.por span{transition:color .2s}
.lowhp{color:var(--danger)!important}
.rolling{display:inline-block;animation:rollp .44s cubic-bezier(.2,1.4,.4,1)}
@keyframes rollp{0%{transform:scale(1)}32%{transform:scale(1.26)}100%{transform:scale(1)}}
.dmgf{position:absolute;left:50%;top:-2px;transform:translate(-50%,0);pointer-events:none;z-index:6;
  font-size:17px;font-weight:800;color:var(--danger);text-shadow:0 2px 7px #000,0 0 14px #c9524a88;white-space:nowrap}
.dmgf.up{color:var(--ok);text-shadow:0 2px 7px #000,0 0 14px #5da16b88}
.dmgf.down{top:auto;bottom:-2px}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* 이름은 **후광 위에 겹쳐** 선다 (v188) — 후광이 이름 자리까지 뻗으므로 글씨를 위로 올린다 */
.cm-n{position:relative;z-index:1;
  font-family:var(--serif);font-size:12.5px;font-weight:700;white-space:nowrap;
  max-width:42vw;overflow:hidden;text-overflow:ellipsis;text-align:center;
  text-shadow:0 1px 4px #000,0 0 10px #000b}
/* 본체 오른쪽 기둥 — 위에서부터 (상대만)포기 · 각성 딱지 · 내공이다.
   셋 다 `flex:none` 이라 **어느 하나가 비어도 나머지가 밀리지 않는다** (v161) */
.cm-r{grid-area:1/3;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.cm-r > *{flex:none}
/* 포기 — 상대 내공 **위**에 선다 (v155). 하단 바에서 올라온 것이다.
   판을 뜨는 단추가 차례 넘김 옆에 있으면 넘기려다 나간다. 여기는 엄지가 쉬는 자리에서 가장 먼 구석이다.
   **눈에 띄면 안 된다** — 흐린 글씨 한 조각으로 두고, 눌러야 비로소 묻는다 */
.givebtn{flex:none;padding:3px 9px;border-radius:9px;border:1px solid var(--line);
  background:#0d0b10a8;font-family:var(--serif);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-indent:.1em;color:var(--fg-faint);line-height:1.5;white-space:nowrap}
.givebtn:hover,.givebtn:active{color:var(--danger);border-color:#5c2620}
.givebtn[hidden]{display:none}
/* 남은 시간 — **내 본체 바로 위에 가로로 눕는 한 줄** (v129).
   예전에는 내공 위에 네모 시계로 앉아 있었다. 지금 두는 쪽의 시간이 흐르므로
   상대 차례에도 같은 줄을 본다 — 누구의 시간인지는 색으로 가른다.
   굵을 까닭이 없다. 손패 아래에서 걷어낸 스크롤막대와 같은 두께다 */
/* 시계 줄도 후광 위다 — 내 본체 바로 위라 후광의 윗자락이 여기까지 온다 */
.tbar{position:relative;z-index:1;
  flex:none;display:flex;flex-direction:column;align-items:stretch;gap:2px;
  padding:3px 10px 2px;transition:opacity .2s}
.tb-n{align-self:flex-end;font-family:var(--mono);font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.04em;
  /* **색 전환을 걸지 않는다.** color 에 transition 을 걸어 두면 값이 var() 에서 올 때
     크로미움이 처음 값을 물고 놓지 않는다 — 게이지는 바뀌는데 숫자만 그대로였다 (v139) */
  color:var(--tc)}
.tb-g{height:3px;border-radius:2px;background:#ffffff14;overflow:hidden}
.tb-g > i{display:block;height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 55%,#000),var(--tc));
  transition:width .22s linear,background .25s}
/* 색은 변수 하나로 묶는다 (v139) — 게이지와 숫자가 따로 놀지 않는다.
   내 시간은 초록, 상대 시간은 파랑, 20초부터 노랑, 10초부터 빨강.
   촉박한 색은 누구 차례든 같다 — 급한 것은 급한 것이다 */
.tbar{--tc:#7fdca0}
.tbar.foe{--tc:#8fb6f0}
.tbar.warn,.tbar.foe.warn{--tc:#f0d67e}
.tbar.hot,.tbar.foe.hot{--tc:#e8695f}
.tbar.hot .tb-n{animation:ckp 1s ease-in-out infinite}
.tbar.idle{opacity:.3}
@keyframes ckp{0%,100%{opacity:1}50%{opacity:.45}}
/* 기록 — 내 본체 왼쪽에 최근 넉 줄만 흘린다. 누르면 전체가 열린다 */
.logfeed{grid-area:1/1;justify-self:start;min-width:0;max-width:100%;display:flex;flex-direction:column;
  gap:1px;overflow:hidden;text-align:left;padding:2px 4px;border-radius:var(--r-s);cursor:pointer}
.logfeed:hover{background:#ffffff08}
.lf{font-size:8.5px;line-height:1.5;color:var(--fg-faint);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.lf.me{color:#9ad3b4} .lf.foe{color:#e0a59b} .lf.sys{color:var(--fg-faint)}
.lf:nth-last-child(1){opacity:1} .lf:nth-last-child(2){opacity:.7}
.lf:nth-last-child(3){opacity:.46} .lf:nth-last-child(n+4){opacity:.28}
/* 각성 딱지가 앉는 칸 — **비어 있어도 자리를 잡아 둔다** (v161).
   높이를 안 잡아 두면 각성이 터지고 꺼질 때마다 그 아래 내공 구슬이 위아래로 튄다.
   딱지는 한 판에 한 번뿐이라 각성 전에는 빈 칸이지만, **빈 칸도 같은 자리를 차지해야**
   본체·딱지·내공 셋이 판 내내 한자리에 붙어 있는다.
   ⚠ 딱지 높이(.simg 22px)와 같은 값이다. 글꼴이나 여백을 고치면 이 값도 같이 고친다 */
.cm-s{display:flex;gap:9px;height:22px;flex:none;justify-content:flex-end;align-items:center;
  font-family:var(--mono);font-size:10px;color:var(--fg-mid);font-variant-numeric:tabular-nums}
/* 각성 딱지 — **본체와 내공 사이**다 (v160). 본체에 난 일이니 본체 옆에 선다.
   한 판에 한 번뿐이므로 한 번 서면 **판이 끝날 때까지 남는다** (v169).
   **눌러서 다시 읽는 단추다** — 손가락 기기에는 `title` 이 없다 */
.simg{font-family:var(--serif);font-size:10.5px;padding:2px 7px;border-radius:2px;font-weight:700;
  border:1px solid;white-space:nowrap;animation:awkin .3s cubic-bezier(.2,1.3,.4,1);
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .14s}
.simg:active{filter:brightness(1.35)}
@media (hover:hover) and (pointer:fine){ .simg:hover{filter:brightness(1.2)} }
@keyframes awkin{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}
.simg.심마{background:#33150f;color:var(--simma);border-color:#5c2620}
.simg.명경지수{background:#131f33;color:var(--myeong);border-color:#22375c}
.simg.축기{background:#0f2a22;color:var(--chukgi);border-color:#1e4d3e}
.simg.무아지경{background:#2a2333;color:#c3a9e8;border-color:#463a5c}
.simg.결의{background:#2e2410;color:var(--chungi);border-color:#5c4a1e}
.pips{display:flex;gap:3px;align-items:center;flex:none}
.pip{width:9px;height:9px;border-radius:50%;background:var(--line)}
.pip.x{background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff12}
/* 찬 것 = 지금 쓸 수 있는 내공 — 초록. 얹힌 것 = 이번 차례만 더 쓰는 내공 — 노랑 */
.pip.f{background:linear-gradient(145deg,#8fe0a8,#2f7f4e);box-shadow:0 0 5px #2f7f4e99}
.pip.b{background:linear-gradient(145deg,#eccb7a,#b8892f);box-shadow:0 0 5px #b8892f99}
/* 내공은 한꺼번에 딸깍 켜지지 않는다 — 한 알씩 차례로 부풀어 오른다 */
@keyframes pipin{0%{transform:scale(0);opacity:0}
  58%{transform:scale(1.55);opacity:1}
  100%{transform:scale(1);opacity:1}}
.pip.new{animation:pipin .34s cubic-bezier(.3,1.5,.5,1) backwards}

/* `overflow-y` 만 정하면 가로축은 `visible` 이 `auto` 로 바뀐다 —
   카드 그림이 들어오는 동안 가로 스크롤막대가 떴고, 그게 시계 게이지 바로 위라
   게이지가 둘로 보였다. 가로는 아예 잠그고 세로 막대도 숨긴다 (v148) */
.board{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:6px 8px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  /* 아무것도 깔지 않는다. 여기에 그늘이나 테를 두면 바탕 그림 한가운데에 네모난 상자가 떠올라
     스크롤 칸처럼 보인다. 화면 전체의 그늘은 .battle-arena 가 한 번에 맡는다 */
  background:transparent}
.board::-webkit-scrollbar{display:none}
.frow{display:flex;gap:4px;justify-content:center;min-height:72px;align-items:center;position:relative;z-index:1}
.board .rule{display:none}   /* 가운데 가름선 — 흙바닥을 반으로 잘라 놓아 걷었다 */
/* 연이 설 자리는 늘 옅은 테로 그어 둔다 — 수라장이 몇 칸인지 보이지 않으면 어디에 놓을지 가늠이 안 된다 */
.slot{flex:1;max-width:64px;aspect-ratio:62/78;border-radius:2px;background:transparent;
  border:1px solid #d8c9a81f;box-shadow:inset 0 0 12px #0000003d}
/* 놓을 수 있는 빈 칸 — 판 위에서 **곁눈에도 걸리게** 짙게 깜빡인다 */
.slot.open{opacity:1;border:1.5px dashed var(--ok);background:#6fcf972e;
  box-shadow:inset 0 0 12px #6fcf9733,0 0 6px #6fcf9740;animation:sp 1.1s ease-in-out infinite}
.slot.open::after{content:"＋";display:flex;align-items:center;justify-content:center;height:100%;color:var(--ok);font-size:19px;opacity:.95}
@keyframes sp{50%{background:#6fcf9759;border-color:#b6f5cf;box-shadow:inset 0 0 18px #6fcf9766,0 0 14px #6fcf9780}}
/* 수라장의 연 — 손패 카드를 그대로 옮긴다. 테두리·효과만 겉에 두른다 */
.unit{flex:1;max-width:62px;position:relative;cursor:pointer;transition:transform .12s;border-radius:3px}
.unit .card{transition:box-shadow .18s}
/* 각연자는 어느 화면에서 작게 보든 금빛이 돈다 — 한 벌에 한 장뿐인 카드는 한눈에 갈려야 한다 */
.card.eng{box-shadow:0 0 0 1.5px #e8cf8fb0,0 0 9px 1px #d4a84366,inset 0 0 12px #d4a8431a;
  animation:engb 2.4s ease-in-out infinite}
@keyframes engb{50%{box-shadow:0 0 0 2px #f4e4b4,0 0 15px 3px #d4a84399,inset 0 0 16px #d4a8432e}}
/* ⚠ **목록에서는 여섯이 한꺼번에 깜빡이면 안 된다** (v213).
   v212 에 연보·명운 엮기의 기본 나열을 **고코스트 순**으로 바꿨더니,
   코스트 5인 **각연자 여섯 장이 목록 맨 앞에 나란히** 서게 됐다.
   여섯이 같은 순간에 애니메이션을 시작하므로 **2.4초마다 한 덩어리로 번쩍인다** —
   카드 하나가 빛나는 것이 아니라 **화면 윗부분이 깜빡이는 것**으로 보인다.

   카드 하나의 빛은 그대로 두고(한 벌에 한 장뿐인 카드는 크게 빛나야 한다),
   **시작점만 흩어** 서로 어긋나게 돈다. 감싸개(`.gcard`)의 차례로 여섯 갈래를 준다 —
   카드 자신은 늘 감싸개의 첫째 자식이라 `.card:nth-child()` 로는 갈리지 않는다.
   ⚠ 늦춤이 **음수**다. 0 에서 시작해 기다리는 것이 아니라 **이미 돌고 있던 것처럼** 시작한다 */
.gcard:nth-child(6n+1) .card.eng{animation-delay:0s}
.gcard:nth-child(6n+2) .card.eng{animation-delay:-.41s}
.gcard:nth-child(6n+3) .card.eng{animation-delay:-1.53s}
.gcard:nth-child(6n+4) .card.eng{animation-delay:-.92s}
.gcard:nth-child(6n+5) .card.eng{animation-delay:-2.07s}
.gcard:nth-child(6n+6) .card.eng{animation-delay:-1.24s}
/* ⚠ **수라장에서는 금테를 얇게 쓴다** (v180). 칸 사이가 4px 뿐이라(`.frow{gap:4px}`)
   테가 2px + 흐림 3px 로 뻗으면 **옆 각연현신 자리를 침범한다** — 누구의 빛인지 안 갈린다.
   여기서만 하드 테를 1px 로 줄이고 흐림도 반으로 죈다. 연보·결연처럼 자리가 넉넉한 화면은
   위 값을 그대로 쓴다 — **한 벌에 한 장뿐인 카드는 크게 보이는 자리에서 크게 빛나야 한다** */
.unit .card.eng{box-shadow:0 0 0 1px #e8cf8fc4,0 0 6px 0 #d4a8435c,inset 0 0 10px #d4a8431a;
  animation:engbu 2.4s ease-in-out infinite}
@keyframes engbu{50%{box-shadow:0 0 0 1.4px #f4e4b4,0 0 10px 1px #d4a84388,inset 0 0 13px #d4a8432e}}
/* 고르는 중이거나 겨눠진 연은 제 색이 우선이다 — 금빛이 그 위를 덮으면 무엇을 고른 건지 안 보인다.
   ⚠ **각연자도 겨눠지면 깜빡여야 한다** (v155). 여기서 `animation:none` 하나로 덮어 두었더니
   `.unit.tgt .card` 보다 이쪽이 더 촘촘해(0,3,1) 이겨서, 각연자만 붉게 굳은 채 서 있었다.
   금빛(engb)만 끄고 겨눔의 맥(plr·plg)은 그대로 돌려준다 */
.unit.sel .card.eng,.unit.ready .card.eng{animation:none}
.unit.tgt .card.eng{animation:plr .62s ease-in-out infinite}
.unit.tgt.good .card.eng{animation:plg .62s ease-in-out infinite}
/* 이번 차례에 칠 수 있는 연·각연자는 한눈에 보여야 한다 — 눌러 봐야 아는 것은 화면이 일을 안 한 것이다.
   고르는 중인 대상(맥박이 뛴다)과 달리 이쪽은 가만히 있는 테두리라 헷갈리지 않는다 */
/* ===== 금강 =====
   그림을 걷었다. **카드 안쪽 가장자리에 흰 테와 흰 빛**이 서고, 가운데로 올수록 스러져
   카드 그림은 그대로 보인다. 칸 밖으로는 한 픽셀도 나가지 않는다(옆 칸이 4px 뿐이다) */
/* ⚠ **그림 층(`.c-art`) 안에 깐다** — 코스트·이름·딱지·공력·기력 같은 UI 밑으로 가야 글이 안 가린다 */
.unit.gang .c-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px #ffffffcc,inset 0 0 7px 1px #ffffff99,inset 0 0 14px 3px #dff3ff36;
  background:radial-gradient(ellipse 75% 68% at 50% 50%,transparent 66%,#ffffff12 86%,#ffffff2b 100%);
  animation:gangb 2.1s ease-in-out infinite}
@keyframes gangb{50%{box-shadow:inset 0 0 0 1.5px #ffffffeb,inset 0 0 10px 2px #ffffffba,inset 0 0 19px 5px #dff3ff4d}}
/* ===== 파동 — 소환·사용 (`ripple`) =====
   카드 사각형과 같은 크기의 테가 겹겹이 퍼져 나간다. 초록은 「수라장에 나왔다」, 금빛은 각연자다 */
.ripfx{position:fixed;z-index:56;pointer-events:none;border-radius:6px;opacity:0;
  border:2px solid #7dffb4;
  box-shadow:0 0 10px 1px #4dffa088,inset 0 0 8px #4dffa044}
.ripfx.eng{border:3px solid #ffe08a;
  box-shadow:0 0 16px 3px #ffd25fcc,0 0 30px 8px #d4a84366,inset 0 0 12px #ffd25f66}
/* ===== 오오라 한 장 (v179) =====
   「펑」(`.boom`)은 **맞았다**는 말이다. 나은 것·굳은 것에 그 꼴을 쓰면 좋은 일과 나쁜 일이
   같은 그림으로 나온다. 이쪽은 자리를 감싸고 한 번 부풀었다 스민다 —
   크기는 감쌀 칸에서 재어 넣으므로(`auraAt`) 여기서는 빛깔만 정한다 */
.aurafx{position:fixed;z-index:58;pointer-events:none;transform:translate(-50%,-50%)}
.aurafx.heal{border:2px solid #7fe0a8;
  box-shadow:0 0 16px 4px #4fd08a80,0 0 34px 10px #4fd08a3d,inset 0 0 18px 4px #7fe0a84d;
  background:radial-gradient(closest-side,#4fd08a26,transparent 78%)}
/* 금강이 걸리는 순간은 따로 그리지 않는다 — 버프라 회복과 같은 초록 오오라(`.aurafx.heal`)를 쓴다 (`auraAt`) */
/* 막 내려앉은 자리 — 연이 그려지는 첫 순간에만 한 번 부푼다 */
.slot.land,.unit.land{animation:land .34s cubic-bezier(.2,1.5,.4,1)}
@keyframes land{0%{transform:scale(1.18)}100%{transform:scale(1)}}
.unit.ready .card{box-shadow:0 0 0 2px var(--ready),0 0 13px #4dffa055,inset 0 0 14px #4dffa01a}
/* 줄에 세워 둔 공격 — **이미 둔 수다** (v156). 초록 테를 끄는 것만으로는
   「칠 수 없는 연」과 구별이 안 되므로, 칼을 낸 쪽으로 반 발짝 나가 선 채로 기다린다 */
.unit.queued{transform:translateY(-2px)}
.unit.queued .card{box-shadow:0 0 0 1.5px #6f7fd8a0,0 0 10px #6f7fd844;animation:none}
.unit.queued .card::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:#0a0a1433}
/* 고르는 동안은 처음부터 끝까지 초록 하나로 간다 — 시전 자리·고른 연·겨눈 대상이 다 같은 색이다.
   자리마다 색이 갈리면 지금 무엇을 하는 중인지가 아니라 색이 무슨 뜻인지를 먼저 풀어야 한다 */
.unit.sel{transform:translateY(-5px)}
.unit.sel .card{box-shadow:0 0 0 2px var(--ok),0 0 14px #6fcf9777}
/* 겨누는 색은 **무엇을 하려는지**로 가른다 — 치러 가면 붉고, 이롭게 하면 초록이다.
   둘 다 초록으로 두면 상대를 고르는 건지 내 편을 고르는 건지 색으로 구별이 안 된다 */
/* 맥이 더 세게 뛴다 (v155) — 테만 굵어지는 정도로는 판이 어수선할 때 눈에 안 들어왔다.
   빠르게(1s → .62s), 테는 2→4px, 그리고 **밝기까지 함께 오르내린다**.
   테두리는 카드 바깥이라 그림에 묻히지만 밝기는 카드 얼굴 전체가 움직이므로 곁눈에도 걸린다 */
.unit.tgt .card{box-shadow:0 0 0 2px var(--danger),0 0 12px #c9524a99;animation:plr .62s ease-in-out infinite}
@keyframes plr{50%{box-shadow:0 0 0 4px #ff8a7e,0 0 26px #e8695fe6,inset 0 0 20px #c9524a5c;
  filter:brightness(1.22) saturate(1.1)}}
.unit.tgt.good .card{box-shadow:0 0 0 2px var(--ok),0 0 12px #6fcf9799;animation:plg .62s ease-in-out infinite}
@keyframes plg{50%{box-shadow:0 0 0 4px #b6f5cf,0 0 26px #6fcf97e6,inset 0 0 20px #6fcf975c;
  filter:brightness(1.2) saturate(1.1)}}
/* 겨눠진 무명자 본체 — 연과 **같은 맥**으로 뛴다 (v155).
   예전에는 자바스크립트가 그림자 값을 인라인으로 박아 두어 아예 깜빡이지 않았다.
   본체는 동그라미라 테도 동그라미다 */
.por.tgt{animation:plrp .62s ease-in-out infinite}
@keyframes plrp{
  0%,100%{box-shadow:0 0 0 3px var(--danger),0 0 14px #c9524aaa;filter:none}
  50%{box-shadow:0 0 0 5px #ff8a7e,0 0 30px #e8695fe6;filter:brightness(1.24)}}
.orb.good{background:radial-gradient(circle,#fff 0%,#b6f5cf 40%,#6fcf9766 70%,transparent)}
.boom.good{background:radial-gradient(circle,#f2fff6 0%,#9fe7bd 28%,#6fcf9788 54%,transparent 72%);
  animation:rise .5s ease-out forwards}
@keyframes rise{to{transform:translateY(-26px) scale(1.5);opacity:0}}
.unit.hit{animation:shake .3s}
/* 잠행 — 겨눌 수 없는 연이다. 한 겹 어둡게 깔아 두면 누르기 전에 알아본다 (v128) */
.unit.hid .card{filter:brightness(.6) saturate(.72)}
.unit.hid .card::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:#0a0712a1;mix-blend-mode:multiply}
/* 수라장에서는 효과 문구만 뺀다 — 62px 에서 문장은 읽히지 않는다. 나머지는 손패와 같다 */
.unit .c-text{display:none}
/* ── 키워드 상자 ───────────────────────────────────────────
   **작게 볼 때는 이름 밑줄 바로 아래**, 그 밑이 효과 문구다 (v157).
   줄이 하나 더 끼는 만큼 이름이 위로 올라간다 — 그래야 상자가 제 자리를 갖는다.
   꼴은 유형 표식(.c-type)과 같다. 카드 위에서 「상자에 담긴 낱말」은 한 가지 뜻이어야 한다 */
.c-kw{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;z-index:2}
/* ⚠ **테두리가 있어야 상자로 읽힌다.** 검은 바탕만 깔면 어두운 일러스트 위에서 그냥 글씨가 된다 */
.kb{font-family:var(--mono);font-size:clamp(5px,4.1cqw,7px);line-height:1.5;
  letter-spacing:.04em;text-indent:.04em;padding:0 4px;border-radius:7px;
  background:#0b0908d4;border:1px solid #ffffff33;
  color:#efe6d6;text-shadow:0 1px 2px #000;white-space:nowrap}
.kb.g{color:#96dfa0} .kb.s{color:#9fd6ff} .kb.y{color:#e0c98a}
/* ⚠ `.kb.more` (말줄임 딱지)는 **v166 에 걷었다.** 그것도 딱지라 「둘까지」가 셋이 되어
   하서진에서 줄이 접히고 카드명이 얼굴 위로 올라왔다. 넘친 딱지는 그냥 안 보인다 → core.js `kbHTML()` */
/* 새로 얻은 키워드 — 카드 **밖**에 세로로 선다. 내 것은 아래, 상대 것은 위 (`gainedTags`).
   카드 안 딱지와 같은 꼴이되, 얻은 것이라 테를 초록으로 하고 「+」를 붙인다 */
/* 딱지 한 줄 높이 13px(글 7px × 1.55 + 테 2px) + 사이 2px — **세 줄까지 보이고 넘치면 구른다** */
.ugain{--gh:13px;position:absolute;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:2px;width:max-content;max-width:calc(100% + 4px);
  max-height:calc(var(--gh) * 3 + 4px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.ugain::-webkit-scrollbar{display:none}
.unit[data-side="0"] .ugain{top:calc(100% + 3px)}
.unit[data-side="1"] .ugain{bottom:calc(100% + 3px);flex-direction:column-reverse}
.ugain .kb{flex:none;height:var(--gh);box-sizing:border-box;display:flex;align-items:center;
  font-size:7px;line-height:1;padding:0 5px;border-color:#6fcf9799;background:#0b0908eb;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* 넘칠 때 — 먼 끝을 흐려 「더 있다」를 알린다. 내 것은 아래 끝, 상대 것은 위 끝이 먼 끝이다 */
.unit[data-side="0"] .ugain.more{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.unit[data-side="1"] .ugain.more{-webkit-mask-image:linear-gradient(0deg,#000 72%,transparent);mask-image:linear-gradient(0deg,#000 72%,transparent)}
.unit.sel .ugain{transform:translateX(-50%) translateY(5px)}   /* 고른 연이 5px 떠도 딱지는 제자리 */
/* 누를 수 있는 딱지 (상세보기) — 단추라도 꼴은 그대로다 */
button.kb{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.14s}
button.kb:hover{background:#1a1613ee;border-color:#ffffff59}
button.kb.on{background:var(--seal-deep);border-color:var(--seal);color:#f3e4e1}
/* 키워드는 없지만 효과 문구를 가진 연 — 수라장에서는 문구를 지우므로 가진 줄도 모르고 지나간다 */
.kb.e{color:#cbb6ff}
/* 카드에 적힌 값과 다른 수 — 오르면 초록, 깎이면 붉다 (v128).
   코스트는 뜻이 반대라(싼 쪽이 좋다) 위쪽 .c-cost 규칙을 그대로 둔다 */
.c-atk.up,.c-hp.up{color:#7dffb4;text-shadow:0 0 7px #4dffa08c,0 1px 2px #000}
.c-atk.dn,.c-hp.dn{color:#ff9a8e;text-shadow:0 0 7px #e8695f8c,0 1px 2px #000}
.c-hp.hurt{color:#ff6b5e;text-shadow:0 0 6px #00000099}
/* 새로 맺은 연 — 코스트 구슬 **바로 아래**에 노랑 NEW.
   붉은 점은 무슨 뜻인지 배워야 알지만 글자는 그냥 읽힌다 */
.c-new{position:absolute;left:4%;top:calc(4% + clamp(16px,19cqw,27px) + 1.2cqw);z-index:7;
  width:clamp(16px,19cqw,27px);text-align:center;
  font-family:var(--mono);font-weight:800;line-height:1.1;
  font-size:clamp(5.5px,4.8cqw,8.5px);letter-spacing:.04em;
  color:var(--chungi);text-shadow:0 1px 3px #000,0 0 8px #d4a84388;
  animation:newpulse 1.6s ease-in-out infinite}
@keyframes newpulse{50%{opacity:.5}}
.c-ar{position:absolute;bottom:3.5%;left:50%;transform:translateX(-50%);z-index:2;
  font-size:clamp(7px,7cqw,10px);font-weight:700;color:#9fd6ff;text-shadow:0 1px 3px #000}

/* 명운(왼쪽) — 패 — 황천(오른쪽) */
/* 판때기는 비운다 — 바탕 그림이 위아래 끝까지 이어져야 한다.
   덱·황천·패·본체는 제 배경을 갖고 있고, 최하단 줄만 불투명하게 남긴다 */
/* 판때기도 선도 두지 않는다 — 화면 전체에 깔린 그라데이션 그늘이 글자를 지킨다 */
/* 각성 후광은 **배경 바로 위**다 — 패·명운 더미·황천은 그 위에 선다 (v194).
   후광이 본체보다 훨씬 커서 위아래 줄까지 뻗는데, 자리 안 잡은 줄은 후광(positioned) 밑으로 깔린다 */
.tray{position:relative;z-index:1;
  flex:none;display:flex;gap:7px;padding:4px 8px;background:transparent;align-items:flex-end}
/* 상대 패는 본체와 같은 3칸 격자에 얹는다 — 가운데 칸에 놓아야 머리 바로 아래에 든 것처럼 보인다 */
.tray.foe{display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.tray.foe .pile.deck{grid-area:1/1;justify-self:start}
.tray.foe .ohand{grid-area:1/2;justify-self:center}
.tray.foe .pile.grave{grid-area:1/3;justify-self:end}
.tray.foe{border-bottom:1px solid var(--line-soft);align-items:flex-start;padding:3px 8px}
.tray.mine{border:0}
/* 더미는 장수만 읽히면 된다 — 작게 둘수록 수라장이 넓어진다.
   화면이 짧으면 연이 더미 줄과 겹쳐 버리므로 여기서 아낀 높이가 그대로 수라장으로 간다 */
.pile{flex:none;width:30px;aspect-ratio:63/88;border-radius:3px;position:relative;overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.tray.foe .pile{width:26px}
.pile::before{display:none}
.pile.deck{background-color:#11151b;background-image:linear-gradient(#080a0b24,#080a0b52),url(assets/ui/pile_deck_back.webp?v=1);
  background-position:center;background-size:cover;background-repeat:no-repeat;border-color:#5d5548;
  box-shadow:2px 1px 0 #17191d,4px 2px 0 #0b0c0e,0 2px 7px #000b}
/* 황천은 죽은 자리다 — 검은 막을 한 겹 더 씌워 명운 더미와 한눈에 갈린다 (v148) */
.pile.grave{background-color:#08080a;background-image:linear-gradient(#000000a8,#000000cc),url(assets/ui/pile_grave_back.webp?v=1);
  background-position:center;background-size:cover;background-repeat:no-repeat;border-color:#413c3f;
  box-shadow:2px 1px 0 #101012,4px 2px 0 #080809,0 2px 7px #000c}
.pile.empty{opacity:.42}
.pile.grave{cursor:pointer} .pile.grave:hover{border-color:var(--seal)}
.pl-n{position:relative;z-index:1;font-size:12px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 4px #000}
.tray.foe .pl-n{font-size:11px}
.pl-l{position:relative;z-index:1;font-size:6.5px;letter-spacing:.1em;color:var(--fg-faint);text-indent:.1em}
.tray.foe .pl-l{font-size:6px}
/* 상대 패 — 뒷면만 겹쳐 놓는다. 몇 장인지가 곧 정보다 */
/* 상대 패도 더미와 같은 높이로 낮춘다 — 이 줄이 높으면 더미만 줄여 봐야 수라장이 넓어지지 않는다 */
.ohand{min-width:0;max-width:100%;display:flex;justify-content:center;align-items:flex-start;padding-top:1px;height:37px}
.oc{flex:none;width:22px;aspect-ratio:63/88;border-radius:2px;border:1px solid #2d2740;margin-left:-9px;
  background-color:#11151b;
  background-image:linear-gradient(#080a0b1f,#080a0b47),url(assets/ui/pile_deck_back.webp?v=1);
  background-size:cover;background-position:center;
  box-shadow:0 1px 4px #0008}
.oc:first-child{margin-left:0}
/* 드러난 상대 패 — 뒷면 사이에서 혼자 앞면으로 선다. 겹치지 않게 조금 넓다 */
.oc.shown{width:31px;margin-left:-3px;border-color:#6b5a3a;background-image:none;cursor:pointer;
  box-shadow:0 0 0 1px #d4a84366,0 1px 5px #000a}
.oc.shown .card{width:100%;border-radius:1px}
.oc.shown .c-path,.oc.shown .c-type,.oc.shown .c-foot,.oc.shown .c-atk,.oc.shown .c-hp{display:none}
/* 손패도 같은 까닭으로 금빛 테가 위아래로 잘렸다 — 안쪽에 자리를 두고 바깥으로 되돌린다 */
.hand{flex:1;min-width:0;display:flex;gap:5px;overflow-x:auto;padding:7px 6px 5px;
  margin:-7px -6px -3px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;cursor:grab}
.hand.grabbing{cursor:grabbing;scroll-snap-type:none}
.hand.grabbing .hcard{pointer-events:none}
/* 스크롤막대는 어디에도 안 보인다 (v128) — 손패 아래에 떠 있던 7px 짜리 막대가
   게이지처럼 읽혔다. 밀어서 넘기는 자리는 카드가 잘려 보이는 것으로 이미 알 수 있다 */
.hand::-webkit-scrollbar{display:none}
.hcard{flex:none;width:60px;cursor:pointer;transition:transform .12s;position:relative;scroll-snap-align:center}
.hcard.sel{transform:translateY(-8px)}
.hcard.sel .card{box-shadow:0 0 0 2px var(--seal),0 0 16px #c4453a66}
/* 지금 낼 수 없는 카드 — 일러스트가 원래 어두워서 약하게 누르면 낼 수 있는 카드와 구별이 안 된다.
   색을 완전히 빼고 더 눌러 앉힌 뒤, 위에 어둠을 한 겹 덮어 확실히 갈라 놓는다 */
/* 지금 내공으로 낼 수 있는 패 — 초록으로 숨 쉰다. 무엇을 낼 수 있는지 세어 보지 않아도 보인다 */
.hcard.can .card{box-shadow:0 0 0 1.5px #6fcf97b0,0 0 10px #6fcf9755;animation:hcb 1.5s ease-in-out infinite}
@keyframes hcb{50%{box-shadow:0 0 0 2px var(--ok),0 0 15px #6fcf97a0}}
.hcard.sel.can .card{animation:none}
/* 내공이 모자라 못 내는 카드 — 예전에는 거의 검정이라 무슨 카드인지도 안 보였다 (v128).
   회색으로 물리되 그림과 글씨는 읽히게 둔다 */
.hcard.no .card{filter:grayscale(.92) brightness(.72) contrast(.94);opacity:.9}
.hcard.no .card::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:#1a17204d}
.actbar{flex:none;display:flex;gap:8px;align-items:center;padding:11px 12px calc(11px + var(--bot-gap));
  background:var(--panel);border-top:1px solid var(--line-soft)}
.hint{flex:1;min-width:0;font-size:11px;color:var(--fg-mid);line-height:1.4}
.hint b{color:var(--seal)}
/* 하단 바의 오른쪽 끝. 전체보기가 그 왼쪽에 붙는다.
   ⚠ `margin-left:auto` 로 **제 손으로 오른쪽 끝까지 민다** (v162).
   수라에서는 재화도 뒤로가기도 이름표도 다 숨으므로, 밀어 줄 것이 아무것도 없다 —
   6px 만 두었더니 전체보기 옆에 붙어 왼쪽으로 쏠렸다. 엄지가 닿는 자리는 오른쪽이다 */
.endbtn{flex:none;margin-left:auto;margin-right:-4px;padding:9px 15px;min-height:38px;
  border:1px solid var(--seal);border-radius:var(--r-s);background:var(--seal-deep);
  color:#f3e4e1;font-size:12.5px;font-weight:600}
.endbtn[hidden]{display:none}
/* 눌러 뒀지만 아직 연출이 남았다 */
.endbtn.wait{opacity:.6}
.endbtn[disabled]{opacity:.42;background:var(--panel-2);border-color:var(--line);color:var(--fg-mid)}
.cbtn{flex:none;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-s);font-size:12.5px;color:var(--fg-mid)}
.logpane{position:absolute;left:0;right:0;bottom:0;max-height:52%;background:#100d0bf7;border-top:1px solid var(--line);z-index:12;display:none;flex-direction:column}
.logpane.on{display:flex}
.lh{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line-soft)}
.lh span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--fg-faint)}
.loglist{flex:1;overflow-y:auto;padding:8px 12px 14px;display:flex;flex-direction:column;gap:3px}
.lg{font-size:10px;line-height:1.55;color:var(--fg-mid)}
.lg.me{color:#bfe0d2} .lg.foe{color:#e8c4bb} .lg.sys{color:var(--fg-faint)}

.fieldmsg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.95);z-index:14;
  padding:11px 20px;border-radius:var(--r-s);background:#1c1713f5;border:1px solid var(--line);
  font-size:13px;color:var(--fg);text-align:center;max-width:82%;line-height:1.5;pointer-events:none;
  opacity:0;transition:opacity .16s,transform .16s;box-shadow:0 10px 26px -10px #000}
.fieldmsg.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fieldmsg b{color:var(--seal)}
.fieldmsg.w{border-color:#5c4220;color:var(--warn)}
/* 규칙 풀이는 아래에 한 칸 띄워 흐리게 — 왜 막혔는지 바로 읽히게 한다 */
.nsub{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--line-soft);
  font-size:11px;line-height:1.6;color:var(--fg-mid);font-weight:400}
/* 차례가 넘어가면 수라장 한가운데에 한 번 크게 적는다 */
.turnban{position:absolute;left:0;right:0;top:50%;z-index:15;display:flex;justify-content:center;
  pointer-events:none;opacity:0;transform:translateY(-50%)}
.tb-t{font-size:20px;font-weight:800;letter-spacing:.22em;text-indent:.22em;padding:9px 30px;
  background:#0b0908e8;border-top:1px solid var(--seal);border-bottom:1px solid var(--seal);
  color:var(--fg);text-shadow:0 2px 9px #000;box-shadow:0 8px 26px -12px #000}
.turnban.foe .tb-t{border-color:#8a4a44;color:#f0d2cb}
/* 각성 — 차례 넘김과 **같은 자리**다. 다만 그림 액자를 쓴다 (v170).
   `dialog_awakening.webp` 는 2097×750 이고 글자를 얹을 판이 셋이다.
   ⚠ 아래 %값은 **그 그림에서 직접 잰 것**이다(어둡고 불투명한 칸을 줄마다 훑어서).
   그림을 갈아 끼우면 이 값도 다시 잰다 — 안 그러면 글자가 무늬 위로 올라앉는다 */
.turnban.awk{padding:0}
.awkbx{position:relative;display:block;
  /* 글자 크기를 **액자 폭**에 맞춘다(`cqw`) — 좁은 화면에서 액자만 줄고 글자가 그대로면 판 밖으로 넘친다 */
  container-type:inline-size;
  /* ⚠ 폭은 **%** 다. `96vw` 로 두었더니 창이 넓고 낮은 자리에서(앱 틀이 화면보다 훨씬 좁아진다)
     액자만 혼자 540px 로 서서 **틀 밖으로 삐져나갔다** — 인수인계 §8 의 그 덫이다 (v186) */
  width:min(96%,540px);aspect-ratio:2097/750;
  background:url(assets/ui/dialog_awakening.webp?v=1) center/100% 100% no-repeat;
  filter:drop-shadow(0 14px 34px #000c)}
/* ⚠ `.awkbx > span` 은 (0,1,1) 이라 `.aw-sub` (0,1,0) 보다 **촘촘하다.**
   여기에 `left/right` 를 두면 아래 개별 규칙이 못 이긴다 — 가로 자리는 낱낱이 정한다 */
.awkbx > span{position:absolute;display:flex;align-items:center;justify-content:center;
  text-align:center;white-space:nowrap}
/* 맨 위 작은 현판 — **다시 쟀다** (v186). 어두운 판의 속은 x 41.6~58.6% · **y 19.5~30.1%** 다.
   17.3~28.8% 에 얹어 두었더니 **위로 2%가 삐져나가** 용 머리 장식을 밟고,
   글자 상자(15px + 줄높이)가 판 속 높이(20px)보다 커서 아래로도 넘쳤다.
   ⚠ 판이 얕으므로 `line-height:1` 로 못을 박는다 — 줄높이가 기본이면 글자보다 상자가 먼저 넘친다.
   글꼴은 **100년체**(`--serif`)다. `--han` 은 붓글씨인데 그 글꼴에는 **한자밖에 없어서**
   「각성」 두 글자가 뒤의 명조로 떨어지고 있었다 — 액자 안에서만 결이 달라 보인 까닭이다 */
.aw-cap{left:0;right:0;top:19.8%;height:10.3%;font-family:var(--serif);
  font-size:clamp(8.5px,2.6cqw,12.5px);line-height:1;
  letter-spacing:.34em;text-indent:.34em;
  color:#f5e0ab;text-shadow:0 1px 4px #000,0 0 10px #d4a84366}
/* 가운데 넓은 판 — x 31~68%, y 35~55% */
.aw-name{left:0;right:0;top:33%;height:22%;font-family:var(--serif);font-weight:800;
  font-size:clamp(17px,5.6cqw,27px);letter-spacing:.14em;text-indent:.14em;
  color:#f8efdb;text-shadow:0 2px 10px #000,0 0 22px #d4a84366}
/* 아래 긴 판 — x 11~89%, y 61~85%. 여기만 두 줄까지 간다 */
.aw-sub{left:12%;right:12%;top:60%;height:26%;
  font-size:clamp(9.5px,3.1cqw,13.5px);line-height:1.42;white-space:normal;
  color:#dccfb6;text-shadow:0 1px 5px #000}
/* 상대 것은 붉은 쪽으로 반 발짝. 액자는 그대로 두고 **글자만** 기운다 —
   그림을 물들이면 금박까지 같이 죽는다 */
.turnban.awk.foe .aw-cap{color:#e8b2a6}
.turnban.awk.foe .aw-name{color:#f6ded6;text-shadow:0 2px 10px #000,0 0 22px #a8524466}
/* 효과가 터진 자리에 무엇이 걸렸는지 띄운다 — 점혈·산공·내공 같은 것들 */
/* 같은 자리에 여러 개가 뜨면 먼저 뜬 것이 한 칸씩 위로 밀려 올라간다(--row).
   그래야 효과 표기와 피해 표기가 서로를 덮지 않는다. 두 줄까지만 세우고 그 위는 걷는다 */
.fxpopw{position:fixed;z-index:61;pointer-events:none;
  transform:translate(-50%,calc(-50% - var(--row,0) * 27px));
  transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.fxpopw.out{transition:transform .2s,opacity .2s;opacity:0}
.fxpop{font-size:12.5px;font-weight:800;white-space:nowrap;letter-spacing:.02em;
  padding:3px 10px;border-radius:11px;background:#0c0a09f0;border:1px solid var(--line);
  color:var(--fg);text-shadow:0 1px 3px #000;box-shadow:0 5px 16px -6px #000}
.fxpop.bad{color:#ff8f80;border-color:#5f2c26}
.fxpop.good{color:#8fe0a8;border-color:#2c5a3c}
/* 회복은 좋은 일 가운데서도 **가장 초록**이다 — 같은 자리에 초록 오오라가 함께 돈다 (v179) */
.fxpop.heal{color:#7fe0a8;border-color:#2c5a3c;text-shadow:0 0 10px #4fd08a66}
.fxpop.ki{color:#eccb7a;border-color:#5f4a1f}
/* 「1차례 남음」 — 값이 아니라 남은 횟수라 눈에 덜 띄어야 한다 */
.fxpop.dim{color:#b6ada0;border-color:#3b3731;font-weight:700;font-size:11px}
.boom{position:fixed;z-index:60;pointer-events:none;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
  background:radial-gradient(circle,#fff2e0 0%,#f0b070 26%,#c4453a88 52%,transparent 72%)}
/* 검선 — 벤 자리에 남는 한 줄. 카드 밖으로 조금 삐져나가야 「그었다」로 읽힌다 */
/* **한가운데를 지난다** (v155). v147 에 좌상단으로 7·9px 밀어 두었던 것을 걷었다 —
   숫자와 겹치는 것보다 줄이 카드 복판에서 벗어나 보이는 쪽이 더 어색했다 */
.slashfx{position:fixed;z-index:60;pointer-events:none}
/* 막대의 **오른쪽 끝**을 카드 우상단 꼭지점에 두고 그 점을 축으로 돌린다.
   각도는 카드마다 다르다(대각선) — 자바스크립트가 잰다.
   ⚠ `margin-top` 은 막대 두께의 **절반을 음수로** 적는다 — 회전축(`transform-origin:100% 50%`)의
   세로를 카드 위쪽 모서리(y=0)에 정확히 올려놓기 위한 값이다. 이게 어긋나면 줄이 아래로 처진다.
   두께를 고치면 이 값도 같이 고친다 (지금 10px → −5px).
   **가운데가 두껍고 양끝이 얇다** — clip-path 로 방추형으로 깎는다. 칼자국은 균일한 막대가 아니다 */
.slashfx > i{position:absolute;right:0;top:0;height:10px;margin-top:-5px;display:block;
  transform-origin:100% 50%;
  background:linear-gradient(90deg,transparent 0,#cfe8ff 8%,#fff 50%,#cfe8ff 92%,transparent 100%);
  filter:drop-shadow(0 0 6px #ffffffee) drop-shadow(0 0 16px #bfe0ffcc) drop-shadow(0 0 30px #7fb4ee77);
  clip-path:polygon(0 50%,14% 30%,38% 6%,62% 6%,86% 30%,100% 50%,86% 70%,62% 94%,38% 94%,14% 70%)}
/* 베인 자리 — 붉은 딤드가 한 겹 얹혔다 걷힌다.
   **그림이 비쳐야 한다** — 통째로 덮으면 무엇이 맞았는지가 안 보인다 */
.bleed::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:3px;
  /* multiply 로 깔면 어두운 카드에서는 그냥 어두워지기만 한다 — 그대로 덮어 붉은 기를 준다 */
  background:radial-gradient(130% 95% at 50% 45%,#ff5242 0%,#c4271b 58%,#7a1109 100%);
  animation:bleedf .52s ease-out forwards}
@keyframes bleedf{0%{opacity:0}16%{opacity:.46}100%{opacity:0}}
.orb{position:fixed;z-index:59;pointer-events:none;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#9fd6ff 40%,#4e9cc466 70%,transparent)}
/* 터진 진(陣) — 수라장 한가운데에 선 동안 테를 두르고 숨을 쉰다.
   **누구의 진인지를 색으로 가른다** (v140) — 내 것은 초록, 상대 것은 붉다.
   금빛은 각연자 몫으로 비워 둔다. 한 색이 두 가지를 뜻하면 둘 다 안 읽힌다 */
.formfx .card{box-shadow:0 0 0 2px var(--fc),0 0 22px 3px var(--fg2),0 10px 30px -10px #000;
  animation:formb 1.1s ease-in-out infinite}
.formfx.mine{--fc:#7fdca0c4;--fg2:#3f9e6366;--fc2:#bff3d4;--fg3:#3f9e6388}
.formfx.foe {--fc:#e8918ac4;--fg2:#a8342c66;--fc2:#f6c5c0;--fg3:#a8342c88}
@keyframes formb{50%{box-shadow:0 0 0 2px var(--fc2),0 0 30px 5px var(--fg3),0 10px 30px -10px #000}}
/* 카드가 떠 있는 동안 빈 자리가 어디였는지 남겨 둔다 — 되돌아갈 자리가 보여야 눈이 따라간다 */
.unit.firing .card{opacity:.22;filter:grayscale(.6)}
.unit.firing{box-shadow:inset 0 0 0 1px #ffffff2e}

.result{position:absolute;inset:0;z-index:30;background:#100d0bf7;display:flex;flex-direction:column;align-items:center;
  justify-content:safe center;gap:15px;padding:26px;text-align:center}
/* 길흉 동전 */
/* ===== 심안녀 — 첫 접속 안내 =====
   강제 진행이라 화면 전체를 덮는다. 아무 데나 누르면 다음 말로 넘어간다 */
.tuto{position:fixed;inset:0;z-index:95;background:#05040788;
  cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden;
  /* 발 높이와 말칸 너비 — 말칸은 이 둘로 자기 자리를 잡는다 */
  /* --tu-bar 는 하단바 높이 — tutoStart() 가 재서 넣는다.
     말칸은 바 바로 위에 서고, 심안녀는 그 위에 선다 */
  --tu-bot:calc(var(--tu-bar,0px) + 6px); --tu-bw:min(100vw,520px)}
.tuto[hidden]{display:none}
.tu-face{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tu-bot) + var(--tu-bw) * 0.3336 - 8px);
  width:min(74vw,330px);max-height:52vh;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 14px 38px #000d);pointer-events:none}
/* 말칸은 발 밑에 붙인다 — 1400×467 그림이라 높이는 너비의 0.3336배다 */
.tu-box{position:absolute;left:50%;transform:translateX(-50%);
  width:var(--tu-bw);aspect-ratio:1400/467;
  bottom:var(--tu-bot);
  background:url(assets/ui/dialog_simannyeo.webp?v=1) center/100% 100% no-repeat}
/* 이름칸·본문칸 자리는 그림에 그려진 틀에 맞춘다 (비율로 잡아야 어느 폭에서나 맞는다) */
/* 그림에 그려진 이름판 **안쪽**에 딱 맞춴 놓는다 (1400×467 기준 x 106~390, y 98~150).
   글자 크기도 말칸 너비를 따라가야 어느 폭에서든 판 안에 남는다 */
.tu-name{position:absolute;left:7.6%;top:21%;width:20.3%;height:11.1%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--serif);font-size:clamp(9px,calc(var(--tu-bw) * 0.028),13px);
  font-weight:800;letter-spacing:.06em;text-indent:.06em;line-height:1;
  color:#efe2c4;text-shadow:0 2px 6px #000}
.tu-text{position:absolute;left:8%;right:9%;top:37%;margin:0;
  font-size:clamp(12px,3.3vw,15px);line-height:1.75;color:#ece5dc;text-shadow:0 2px 7px #000}
.tu-next{position:absolute;right:6%;bottom:16%;font-size:12px;color:#d8c9a8;
  animation:tunext 1.2s ease-in-out infinite}
@keyframes tunext{50%{transform:translateY(4px);opacity:.45}}
@media (max-width:380px){ .tu-face{width:80vw} }
/* 패에서 꺼내 보이는 카드 — 앞면으로 크게, 아래에 무엇이 걸렸는지 */
.revwrap{position:fixed;z-index:58;pointer-events:none;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px}
.rev-card{width:96px}
.rev-lab{font-family:var(--serif);font-size:15px;font-weight:800;letter-spacing:.2em;text-indent:.2em;
  padding:4px 13px;border-radius:2px;background:#0c0a10e8;border:1px solid var(--line);
  text-shadow:0 2px 7px #000}
.rev-lab.bad{color:#f0a89f;border-color:#7d3c39}
.rev-lab.good{color:#9fe0b6;border-color:#2f5c42}
/* 상대가 뽑고 버리는 카드 — 뒷면만 보인다 */
.backfly{position:fixed;z-index:56;pointer-events:none;width:38px;aspect-ratio:63/88;border-radius:2px;
  border:1px solid #2d2740;background-color:#11151b;
  background-image:linear-gradient(#080a0b1f,#080a0b47),url(assets/ui/pile_deck_back.webp?v=1);
  background-size:cover;background-position:center;box-shadow:0 3px 10px #000a}
.coinfly{position:fixed;z-index:58;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:7px}
.cf-disc{width:82px;height:82px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--han);font-size:38px;font-weight:700;
  background:radial-gradient(60% 55% at 38% 32%,#f0dfae,#a98d4e 62%,#5e4a22);
  border:2px solid #f3e6c0;box-shadow:0 8px 26px #000b,0 0 22px #d4a84355;
  animation:cfspin .62s cubic-bezier(.25,.6,.3,1)}
@keyframes cfspin{0%{transform:rotateY(0) scale(.7)}100%{transform:rotateY(1080deg) scale(1)}}
.coinfly.good .cf-disc{color:#2c4a2f}
.coinfly.bad  .cf-disc{color:#5a2622;
  background:radial-gradient(60% 55% at 38% 32%,#e0c4b2,#9b6b58 62%,#4e2c22);border-color:#e8cbb9}
.cf-lab{font-family:var(--serif);font-size:15px;font-weight:800;letter-spacing:.3em;text-indent:.3em;
  color:#f2e7d2;text-shadow:0 2px 8px #000}
.coinfly.bad .cf-lab{color:#e9b7ab}
.rwd{display:flex;align-items:center;gap:11px}
.coinbig{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 9px #d4a84366)}
.rwd-n{font-size:27px;font-weight:800;color:var(--chungi);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.rwd-l{margin:0;font-size:11.5px;color:var(--fg-faint);letter-spacing:.06em}

/* 승패 — **조선100년체로 굵게** 찍는다 (v155). 한자 붓글씨(勝利·敗北)에서 한글로 바꿨다.
   ⚠ 100년체에는 굵은 판이 아예 없어서 여기만은 **브라우저가 만드는 굵기를 그대로 쓴다.**
   본문에서 그것을 금한 까닭은 작은 글자에서 획이 뭉개지기 때문인데, 여기는 38px 한 낱말이라 상하지 않는다.
   그래서 `--sans`(700 자리가 굵은명조로 넘어간다)가 아니라 **`--story` 를 직접 집는다** */
.result h2{margin:0;font-family:var(--story);font-size:38px;font-weight:700;letter-spacing:.14em;text-indent:.14em;
  text-shadow:0 4px 22px #000c}
.result.w h2{color:var(--ok)} .result.l h2{color:var(--danger)} .result.d h2{color:var(--fg-mid)}
/* 한자로 되돌릴 자리 — 붓글씨는 획이 굵어 가짜 굵기를 얹지 않는다 */
.result h2.han{font-family:var(--han);font-weight:400;letter-spacing:-.02em;text-indent:-.02em}
.result p{margin:0;font-size:12px;color:var(--fg-mid);font-family:var(--mono)}
/* 아래 .result p 보다 뒤에 와야 한다 — 거기서 색과 고정폭 글꼴이 덮어씌워진다 */
.result p.rsay{margin:-4px 0 2px;font-size:12px;line-height:1.85;color:var(--fg-faint);font-family:var(--sans);letter-spacing:.03em;text-align:center}

/* 멀리건 */
/* 멀리건은 **세로 가운데**에 선다 (v128). 위로 붙여 두었더니 여섯 장 아래가 통째로 비어
   화면이 반만 쓰인 것처럼 보였다. 카드가 많아 넘치면 그때만 위에서부터 흐른다 */
.mull{position:absolute;inset:0;z-index:25;background:#100d0bf7;display:flex;flex-direction:column;
  justify-content:center;
  padding:calc(10px + var(--top-gap)) 14px calc(16px + var(--bot-gap));gap:13px}
.mull h3{margin:0;font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:.08em;text-align:center}
.mturn{font-size:27px!important;font-weight:900!important;letter-spacing:.26em!important;text-indent:.26em;
  color:var(--fg);text-shadow:0 2px 20px #0009}
/* **각연자의 금빛 테가 잘리지 않게 안쪽에 자리를 둔다** (v134).
   그 테는 카드 바깥으로 퍼지는 box-shadow 라, overflow 를 가진 그릇이 그대로 잘라 먹었다.
   테두리가 세 변만 이어지고 한 변이 없어 보이던 것이 이 때문이다.
   padding 으로 벌리고 같은 만큼 margin 으로 되돌려 자리는 그대로 둔다 */
.mgrid{flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:center;
  padding:9px;margin:-9px}
.mgrid::-webkit-scrollbar{display:none}
.mcard{position:relative;cursor:pointer;transition:transform .12s,opacity .15s}
/* 물릴 수 없는 카드 — 후공에게 주는 주과. 눌러도 아무 일 없다.
   ⚠ **눌리지 않는다는 것을 눌러 보기 전에 알려 준다** (v186).
   전에는 아무 표도 없어, 눌러 보고 나서야 「이건 안 되는구나」를 알았다.
   고른 카드(`.x`)와 **같은 꼴**로 덮되 글씨만 다르다 — 같은 자리에 두 가지 모양을 만들지 않는다.
   다만 빛깔은 도장 빛이 아니라 흐린 회색이다. 이것은 **내가 고른 것이 아니라 못 고르는 것**이다 */
/* 고른 카드는 **내보낼 것**이라 깊이 죽이고, 못 고르는 카드는 **그냥 못 고를 뿐**이라 덜 죽인다 (v193).
   둘을 같은 .4 로 두었더니 주과가 너무 어두워 무슨 카드인지 읽히지 않았다.
   ⚠ 주과는 **눌러서 펼쳐 볼 수는 있다** — 손이 닿는 자리이므로 커서도 손가락이다 */
.mcard.fixed{cursor:pointer;opacity:.74}
.mcard.x{opacity:.4;transform:scale(.94)}
.mcard.fixed:active{transform:scale(.97)}
.mcard.fresh{animation:fresh 1s cubic-bezier(.2,1.5,.4,1) both}
@keyframes fresh{from{transform:translateY(18px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.mcard.x::after,.mcard.fixed::after{content:"교체";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:13px;font-weight:700;color:var(--seal);
  background:#000000a8;border:1px solid var(--seal);border-radius:3px}
/* 덮개도 밝힌다 — 글씨는 잠긴 아이콘(`.fc-lk`)과 같은 빛깔, 바탕은 카드가 비칠 만큼만 */
.mcard.fixed::after{content:"교체 불가";font-size:11.5px;letter-spacing:.02em;font-weight:700;
  color:#cfc4b4;border-color:#4d4657;background:#0000007a;
  text-shadow:0 1px 3px #000}

/* 수진(手盡) — 명운이 비어 뽑을 것이 없다. 뽑기와 같은 길로 오되 **뒷면**이다 (v128).
   명운 더미(.pile)와 같은 등가죽을 써서 「저기서 온 것」으로 읽히게 한다 */
.tireback{border-radius:4px;border:1px solid #4a4130;
  background:url(assets/ui/pile_deck_back.webp?v=1) center/cover no-repeat,#151119;
  box-shadow:0 10px 26px #000c,0 0 0 1px #00000080;
  filter:grayscale(.45) brightness(.72)}

/* 교서 — 갈래 단추. 한 줄로 흐르고 넘치면 옆으로 민다 (v132) */
.hptabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 0 2px;margin:0 0 4px}
.hptabs::-webkit-scrollbar{display:none}
.hptab{flex:none;padding:6px 12px;border:1px solid var(--line);border-radius:2px;
  font-size:11.5px;color:var(--fg-mid);white-space:nowrap;background:var(--panel);
  -webkit-tap-highlight-color:transparent}
.hptab:hover{color:var(--fg)}
.hptab.on{background:var(--seal-deep);border-color:var(--seal);color:#f3e4e1}

/* 덮개 */
/* ⚠ 카드 상세(`#vInfo`)는 **멀리건(`.mull`, z 25) 위**에 떠야 한다 (v193).
   멀리건에서 주과를 눌러 펼치는 길이 생겼는데, 20 으로는 멀리건 뒤에 깔려 아무것도 안 보였다 */
#vInfo{z-index:28}
.veil{position:absolute;inset:0;z-index:20;background:#100d0bf7;display:none;flex-direction:column;
  padding:calc(10px + var(--top-gap)) 16px calc(20px + var(--bot-gap))}
.veil.on{display:flex;animation:fade .2s ease}
.vh{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:13px;flex:none}
.vh h3{grid-area:1/2;justify-self:center;text-align:center;margin:0;font-family:var(--serif);
  font-size:16px;font-weight:700;letter-spacing:.06em;
  max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 상세 창은 아래에 바를 하나 두고 닫기를 뒤로가기 자리(왼쪽 끝)에 앉힌다 — 화면의 뒤로가기와 같은 손놀림이 된다 */
.veil.vfooted{padding-bottom:0}
.vfoot{flex:none;display:flex;align-items:center;gap:8px;margin:13px -16px 0;
  padding:15px 16px calc(15px + var(--bot-gap));
  background:var(--panel);border-top:1px solid var(--line-soft)}
/* 닫기는 바 전체를 차지한다 — 왼손이든 오른손이든 엄지가 닿는 곳에 있다 */
.vclose{flex:1;min-height:38px;display:flex;align-items:center;justify-content:center;
  font-size:13.5px;letter-spacing:.2em;text-indent:.2em;color:var(--fg-mid)}   /* 38px 은 하단 바의 뒤로가기와 같은 키 */
.vclose:hover{color:var(--fg)}
.vx{grid-area:1/3;justify-self:end;color:var(--fg-mid);font-size:13px;padding:5px 9px;border:1px solid var(--line);border-radius:var(--r-s)}
.vx:hover{color:var(--fg);border-color:var(--seal)}
/* ⚠ **가로는 잠근다** (v192). `overflow-y` 만 정하면 가로축은 `visible` 이 `auto` 로 바뀐다.
   10봉을 열면 각연자의 금빛 테(`.engaura::after{inset:-5px}`)가 칸 밖으로 5px 뻗어
   **가로 스크롤막대가 떠올랐고, 그것이 하단의 게이지처럼 보였다.**
   수라장에서 v148 에 같은 덫을 밟았다(`.board`) — 이번에는 창 쪽이다.
   테가 잘리지 않게 좌우로 7px 을 벌리고 같은 만큼 되돌린다(`.mgrid` 와 같은 수법) */
.vb{position:relative;flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  padding-inline:7px;margin-inline:-7px;
  display:flex;flex-direction:column;gap:13px}
.vb::-webkit-scrollbar{display:none}
/* ===== 세로 가운데에 서는 창 (v187) =====
   버릴 카드 고르기는 **멀리건과 같은 일**이다 — 패를 펼쳐 놓고 고른다.
   그런데 멀리건은 가운데에 서고 이쪽만 위에 붙어 있었다. 같은 손놀림은 같은 자리에서 한다.
   `flex:0 1 auto` 라 **카드가 적으면 가운데에 모이고, 넘치면 그 자리에서 스크롤**한다
   (멀리건 `.mgrid` 와 같은 얼개다). 스크롤 막대는 숨긴다 — 검은 화면에 흰 막대가 튄다.
   ⚠ **각연자의 금빛 테가 잘리지 않게** 안쪽에 자리를 두고 같은 만큼 되돌린다(`.mgrid` §1773 과 같은 까닭) */
.veil.mid{justify-content:center}
.veil.mid .vb{flex:0 1 auto;scrollbar-width:none;padding:9px;margin:-9px}
.veil.mid .vb::-webkit-scrollbar{display:none}
.veil.mid .vb > .grid{align-content:center}
/* 창 본문은 세로 flex 인데 안이 넘치면 형제들이 밀려 줄어든다 — 찾기 줄이 0px 로 짜부라져
   입력칸이 카드 위로 삐져나오고 종수 글자와 겹쳤다. 스크롤되는 칸에서는 아무도 줄어들면 안 된다 */
.vb > *{flex:none}
/* 세로만 브라우저에 넘기고 가로 제스처는 우리가 받는다 — 이게 없으면 모바일에서 넘김이 죽는다 */
#iBody{touch-action:pan-y}
#iBody img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
/* 연보에서는 좌우로 넘긴다 */
.varr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:52px;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--fg-mid);
  background:#0b0908cc;border:1px solid var(--line);border-radius:var(--r-s);backdrop-filter:blur(2px)}
.varr:hover{color:var(--fg);border-color:var(--seal)}
.varr.l{left:4px} .varr.r{right:4px}
.varr[hidden]{display:none}
@media (max-width:420px){.varr{width:28px;height:46px;opacity:.82}}
.rstage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:15px}
.rone{width:min(208px,62vw)}
.pop{animation:pop .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.74) rotateY(20deg);opacity:0}to{transform:none;opacity:1}}
.eburst{animation:eb 1.1s ease-out}
@keyframes eb{0%{box-shadow:0 0 0 0 #d4a843cc}70%{box-shadow:0 0 42px 12px #d4a84300}100%{box-shadow:0 0 0 0 #d4a84300}}
/* 연진 전환 — 카드샵 §3.2 */
.dust{animation:dust 1.1s ease-in forwards}
/* 수라장에서 쓰는 짧은 판 — 결연은 한 장을 천천히 보여 주지만, 판에서는 다음 수가 기다린다 */
.dust.q{animation-duration:.6s}
@keyframes dust{0%{opacity:1;filter:none}55%{opacity:.7;filter:blur(1px) brightness(1.3)}100%{opacity:0;filter:blur(7px) brightness(1.6);transform:translateY(-12px) scale(.95)}}
.rcount{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--fg-faint)}
.rhint{font-size:11.5px;color:var(--fg-mid);text-align:center;line-height:1.6}
.rhint.jin{color:var(--jin)}
.trow.tap{width:100%;text-align:left;cursor:pointer}
.trow.tap:hover{background:#ffffff0a}
/* 확률표의 각연자 — 이름만으로는 누구인지 모른다. 얼굴을 붙이고 누르면 그 카드가 펼쳐진다.
   카드 그림은 위쪽에 얼굴이 오도록 그려져 있어 top 을 물린다 */
.trow.ofa{align-items:center;gap:10px}
.trow.ofa .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oface{flex:none;width:34px;height:34px;border-radius:var(--r-s);
  background:center 18%/150% no-repeat;border:1px solid var(--line-soft);
  background-color:#14111a}
.oface[data-none]{background-image:linear-gradient(150deg,#2a2233,#171320)}
/* 각연자는 금빛과 흰빛이 함께 돈다 — 한 장씩 보는 화면과 건너뛴 화면에서 같은 표를 쓴다 */
.engaura{position:relative;border-radius:3px;
  box-shadow:0 0 0 2px #ffe9a8,0 0 13px 2px #ffd25fcc,0 0 30px 6px #fff3c866;
  animation:engglow 1.9s ease-in-out infinite}
@keyframes engglow{
  50%{box-shadow:0 0 0 2px #fffdf2,0 0 19px 4px #ffdf86,0 0 44px 10px #fff6d688}}
.engaura::after{content:"";position:absolute;inset:-5px;border-radius:5px;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%,#fff2c02e,transparent 72%)}
.gstamp{position:relative}
.tapz{position:absolute;inset:0;z-index:1}
/* 한 봉에서 나오는 장수(PACK)에 맞춰 칸을 나눈다.
   다섯 칸으로 못 박아 두면 세 장을 뽑았을 때 오른쪽 두 칸이 빈 채 남아 카드가 쭈그러든다.
   칸 수는 그리는 쪽이 `--g` 로 알려 준다 */
/* ⚠ **`minmax(0,1fr)` 이라야 한다** (v192). `1fr` 만 적으면 칸은 **카드의 최소 너비 아래로 못 줄어든다** —
   다섯 칸이 21px 넘쳐 가로 스크롤막대가 떠올랐고, 그것이 하단의 게이지처럼 보였다.
   `minmax(0,…)` 이 그 바닥을 풀어 준다. 격자를 새로 짤 때마다 이 한 줄을 본다 */
.g5{display:grid;grid-template-columns:repeat(var(--g,5),minmax(0,1fr));gap:6px}
@media (max-width:380px){.g5{grid-template-columns:repeat(min(var(--g,5),4),minmax(0,1fr))}}
.jinbox{border:1px solid #4a4133;border-radius:var(--r-s);padding:10px 12px;background:#1f1a14}
.jinbox h4{margin:0 0 6px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--jin);text-transform:uppercase}
.jinbox ul{margin:0;padding-left:16px;font-size:11.5px;color:var(--fg-mid);line-height:1.8}
.jinbox b{color:var(--jin);font-family:var(--mono)}

.detail{display:flex;flex-direction:column;gap:13px;align-items:center}
.dfull{width:100%;max-width:300px;aspect-ratio:63/88;border-radius:3px;overflow:hidden;
  border:1px solid var(--line);position:relative;cursor:pointer;align-self:center}
/* 큰 그림 위에 얹는 표기. 작게 볼 때와 같은 배지를 쓰되 크기는 큰 화면에 맞춰 따로 잡는다 */
.dover{position:absolute;inset:0;pointer-events:none;container-type:inline-size;
  transition:opacity .18s}
.dfull.bare .dover{opacity:0}
/* 그림만 보는 자리 — 그림 밖은 전부 검다. **어디를 눌러도 닫힌다** (v158에도 그대로다).
   세로로 셋을 쌓는다: 위 여백(타이틀이 얹힌다) · 그림 · 닫기 단추.
   그림은 `flex:1` 인 가운데 칸의 한가운데에 서므로, 단추가 아래를 먹는 만큼 저절로 위로 올라간다 */
.artfull{position:fixed;inset:0;z-index:90;background:#000;cursor:zoom-out;
  display:flex;flex-direction:column;align-items:stretch;
  padding:calc(var(--top-gap) + 8px) 12px calc(12px + var(--bot-gap))}
.af-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.artfull img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.artfull .af-none{width:min(92vw,520px);max-height:100%;aspect-ratio:63/88;border-radius:3px}
/* 위쪽 빈 자리의 낙관 — **강호의 것과 같은 붓 로고**다 (v187). 크기도 같다(`.m-han`).
   글꼴로 찍던 것을 그림으로 바꿨다 — 화면마다 다른 얼굴이 서 있으면 같은 이름으로 안 읽힌다.
   누르면 그림과 똑같이 닫힌다(겉틀이 받는다) */
.af-mark{align-self:flex-end;display:block;width:clamp(84px,26vw,116px);height:auto;
  opacity:.34;filter:brightness(0) invert(1) drop-shadow(0 1px 6px #000);
  pointer-events:none;user-select:none;padding:2px 2px 8px;box-sizing:content-box}
/* 닫기 — **다른 창과 같은 꼴**이다 (v187). 여기만 알약 단추라 혼자 달라 보였다.
   바 전체를 차지한다(`.vfoot` + `.vclose` 와 같은 치수) — 왼손이든 오른손이든 엄지가 닿는다 */
.af-x{flex:none;align-self:stretch;margin:12px -12px calc(-12px - var(--bot-gap)) -12px;
  min-height:38px;padding:15px 16px calc(15px + var(--bot-gap));
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:0;border-top:1px solid var(--line-soft);
  font-size:13.5px;letter-spacing:.2em;text-indent:.2em;color:var(--fg-mid);transition:color .14s}
.af-x:hover,.af-x:active{color:var(--fg)}
/* 아래쪽 딤 — **작은 카드보다 옅게 깐다** (v158).
   작은 카드(.c-veil)의 값을 그대로 가져왔더니 큰 화면에서는 그림 아래 절반이 통째로 검게 죽었다.
   글씨가 큰 만큼 덜 깔아도 읽힌다. 다 걷으면 밝은 그림에서 이름이 묻히므로 없애지는 않는다 */
.dover::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#00000047 0 10%,transparent 22% 46%,#0000008c 72%,#000000bf 100%)}
.dover .c-cost,.dover .c-atk,.dover .c-hp{width:clamp(26px,10.5cqw,36px);font-size:clamp(14px,5.8cqw,20px)}
.dover .c-path{width:clamp(27px,11cqw,38px);top:3.2%;right:3.2%}
.dover .c-eng{left:4%;top:calc(4% + clamp(26px,10.5cqw,36px) + 1.2cqw);
  width:clamp(26px,10.5cqw,36px);font-size:clamp(11px,4.4cqw,15px)}
/* 큰 그림 위의 이름과 효과 문구 — 작은 카드와 같은 자리, 큰 글씨 */
.dover .c-foot{left:7%;right:7%;bottom:calc(3.4cqw + clamp(26px,10.5cqw,36px) + 6px);gap:4px}
.dover .c-name{font-size:clamp(15px,5.4cqw,22px);line-height:1.25}
.dover .c-name::after{margin-top:4px}
.dover .c-text{font-size:clamp(11px,3.6cqw,14px);line-height:1.6;min-height:1.6em;-webkit-line-clamp:7}
/* 유형(현신·각연자·초식…)은 **작은 카드와 같은 자리** — 코스트와 도 문양 사이, 위 가운데다 (v157).
   v126~v156 에는 혼자 아래 가운데에 앉아 있어 큰 카드와 작은 카드의 배치가 갈렸다 */
.dover .c-type{top:3.4%;max-width:44%;padding:2px 12px;border-radius:11px;
  font-family:var(--serif);font-weight:800;font-size:clamp(10px,3.2cqw,13px);
  letter-spacing:.14em;text-indent:.14em;line-height:1.5;
  color:#e7dfd1;background:#0b0908d9;border:1px solid var(--line);text-shadow:0 1px 3px #000}
/* 딱지는 작은 카드와 **같은 자리** — 이름 밑줄 바로 아래다 (v158).
   다만 여기서는 눌러서 풀이를 편다. `.c-foot` 이 pointer-events:none 이라 이 줄만 되살린다 */
.dover .c-kw{gap:5px;pointer-events:auto}
.dover .kb{font-size:clamp(10px,3.1cqw,12.5px);padding:1px 10px;border-radius:11px;
  border-color:var(--line);background:#0b0908ee}
.craftb{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;
  border:1px solid var(--jin);border-radius:var(--r-s);background:#1c1a2699;color:var(--fg);transition:.16s}
.craftb:hover{background:#232735;box-shadow:0 0 16px #7c86b633}
.craftb.no{opacity:.45}
.cr-l{font-size:13px;font-weight:700;letter-spacing:.04em}
.cr-v{font-size:12.5px;font-weight:700;color:var(--jin);font-variant-numeric:tabular-nums}
.craftn{margin:0;text-align:center;font-size:11px;color:var(--fg-faint)}
/* 맺기 창은 하단 재화 바를 덮는다 — 가진 연진을 여기 한 번 더 적는다 */
.crhave{display:flex;align-items:center;justify-content:center;gap:5px;position:relative;
  font-size:11.5px;color:var(--fg-mid)}
/* 보유액은 무엇으로 치르는지에 따라 색이 다르다 — 연진은 초록, 천기는 금빛 */
.crhave b{font-family:var(--mono);color:var(--jin);font-weight:700}
.crhave b.gold{color:var(--chungi)}
.craftn.short{color:var(--warn)}
.fbtn.no{opacity:.45}
.fout{position:absolute;left:50%;top:-2px;transform:translate(-50%,0);pointer-events:none;z-index:8;
  font-family:var(--mono);font-size:13px;font-weight:800;white-space:nowrap;
  color:var(--danger);text-shadow:0 2px 6px #000}
.fout.jin{color:var(--jin)}
.fout.up{color:var(--ok)}
.dkws{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
/* 눌러서 풀이를 펴는 단추다 — 손가락이 닿게 36px 을 확보한다 */
.dkw{font-size:12.5px;font-weight:700;letter-spacing:.06em;padding:0 14px;min-height:36px;border-radius:var(--r-s);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--seal);background:#c4453a18;border:1px solid #c4453a55;transition:.14s}
/* 추가 효과(대전에서 붙은 것) — 오른 것은 초록, 깎인 것은 붉다 */
.dkw.up{border-color:#2f5c42;color:#9fe0b6;background:#12241a}
.dkw.dn{border-color:#5c3230;color:#e6a9a2;background:#241615}
.dbase{display:block;font-family:var(--sans);font-size:10px;color:var(--fg-faint);letter-spacing:.02em;margin-top:1px}
/* 명호의 계정 자리 */
.linkbox{display:flex;flex-direction:column;gap:9px}
.linkbox .signin{width:100%;margin-top:0}
.acct{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--panel);font-size:12px;color:var(--fg-mid)}
.acct b{color:var(--fg);font-weight:700}
.acct .tag{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--fg-faint)}
.dkw[data-kw]{cursor:pointer} .dkw[data-kw]:hover{background:#c4453a30}
.dkw.on{background:var(--seal-deep);color:#f3e4e1}
.dkw.flat{opacity:.75;cursor:default}
.dkw.sm{font-size:12px;padding:0 12px;min-height:34px;margin:0 6px 6px 0}
.kwl{display:flex;flex-wrap:wrap}
/* 목록 줄의 딱지는 풀이가 **위**에 선다 (v156) — 여백도 위가 아니라 아래에 둔다 */
.kwtip{margin:0 0 7px;padding:9px 11px;border-left:2px solid var(--seal);background:#c4453a12;
  border-radius:0 2px 2px 0;font-size:11.5px;line-height:1.75;color:var(--fg-mid);animation:fade .16s ease;
  white-space:pre-line}
/* 카드 맨 아랫줄의 딱지는 카드 **바로 밑**에 편다 (v157) — 단추 바로 아래다 */
.kwtip.under{margin:7px 0 0}
/* 풀이를 여는 낱말 — 밑줄만 그어 둔다. 단추처럼 보이면 목록이 단추밭이 된다 */
.tword{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
  text-decoration-color:var(--fg-faint)}
.tword:hover,.tword.on{color:var(--seal);text-decoration-color:var(--seal)}
/* `.dmain` 은 걷어냈다 (v157) — 카드 밖에 효과 문단을 따로 두던 자리다. 글은 그림 위에만 있다 */
/* \ud6a8\uacfc \ubb38\uad6c\u00b7\uce74\ub4dc \uc124\uba85\u00b7\ud6a8\uacfc \ud0dc\uadf8\ub97c \uac00\uc6b4\ub370\ub85c \ubaa8\uc740\ub2e4 \u2014 \uce74\ub4dc \uadf8\ub9bc\uc774 \uac00\uc6b4\ub370 \uc11c \uc788\uc5b4 \uae00\ub3c4 \uac19\uc740 \ucd95\uc744 \ub530\ub978\ub2e4 */
/* 카드가 저 혼자 하는 이야기. 규칙이 아니라 세계관이라 글꼴부터 갈라 둔다 */
.dcon{margin:0;padding:10px 13px;text-align:center;background:#ffffff04;
  font-family:var(--story);font-size:12px;line-height:1.9;color:var(--fg-faint)}
.dwarn{display:block;margin-top:6px;font-size:10.5px;color:var(--warn)}
/* 태그 줄에 섞여 서는 자리 — 줄을 새로 잡지 않고 옆에 붙는다 */
.dkws .dwarn{display:inline-flex;align-items:center;margin:0 0 0 2px}
.dl{width:100%;display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:var(--r-s);overflow:hidden}
.dl div{display:flex;gap:12px;padding:8px 12px;font-size:12px;border-bottom:1px solid var(--line-soft)}
.dl div:last-child{border-bottom:none}
.dl dt{flex:none;width:68px;color:var(--fg-faint);font-size:11px}
.dl dd{margin:0;flex:1}
.dl dd.m{font-family:var(--mono);font-variant-numeric:tabular-nums}
.concept{font-family:var(--serif);font-size:13px;line-height:1.9;color:var(--fg-mid);text-align:center;max-width:32ch}
.codebox{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 11px;
  font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--fg);resize:vertical;min-height:84px;word-break:break-all}
.btnrow{display:flex;gap:8px}
/* 되돌릴 수 없는 쪽은 붉게 — 눌러도 되는 것과 눈으로 갈린다 */
.fbtn.dg{border-color:#7d3c39;color:#e6a9a2}
.fbtn.dg:hover{background:#2a1716;border-color:var(--danger);color:#ffd9d3}
.veil.ask{align-items:center;justify-content:center;padding:24px}
.askbox{width:min(340px,100%);display:flex;flex-direction:column;gap:18px;
  padding:22px 20px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel)}
/* ===== 획득 창 (v195) =====
   우편·무훈·만보각이 **한 창을 쓴다.** 받는 자리마다 다른 알림을 띄우면
   같은 일이 세 가지 모양으로 나온다. 안내(toast)로 흘려보내던 것을 여기로 모았다 */
.gainbox{gap:15px}
.gain-h{text-align:center;font-family:var(--serif);font-size:13px;font-weight:800;
  letter-spacing:.28em;text-indent:.28em;color:var(--chungi);
  padding-bottom:11px;border-bottom:1px solid var(--line-soft)}
.gain-list{display:flex;flex-direction:column;gap:10px}
/* 한 줄 = 그림 + 이름 + 수. 수는 오른쪽 끝에 붙어 여러 줄이 자릿수로 정렬된다 */
.gain-row{display:flex;align-items:center;gap:11px}
.gain-ic{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-s);background:#0e0b14;border:1px solid var(--line-soft);
  box-shadow:inset 0 0 12px #0009}
.gain-ic img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 2px #000b)}
.gain-n{flex:1;min-width:0;font-size:13px;color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gain-q{flex:none;font-family:var(--mono);font-size:17px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--chungi);
  text-shadow:0 0 10px #d4a84355,0 1px 2px #000b}
/* ⚠ **「×3,500」이 아니라 「+3,500」이다** (v212). 곱셈표는 「세 벌을 산다」처럼 읽히는데
   여기는 **받아서 늘어나는 자리**다. 수를 만드는 곳은 `gain2()` 한 군데다 */

/* 받은 것이 **쾅 박힌다** — 결연에서 카드가 나올 때(`.pop`)와 같은 결이되 더 세다.
   크게 들어와 제자리에 박히고 한 번 되튄다. 줄마다 `--i` 만큼 늦춰 차례로 떨어진다 */
.gain-ic,.gain-q{animation:gainslam .46s cubic-bezier(.2,1.3,.35,1) backwards;
  animation-delay:calc(var(--i,0) * .11s)}
@keyframes gainslam{
  0%  {opacity:0; transform:scale(2.5)}
  52% {opacity:1; transform:scale(.86)}
  74% {           transform:scale(1.07)}
  100%{opacity:1; transform:scale(1)}
}
/* 박히는 순간의 파문. 그림 칸에만 걸어 둔다 — 숫자에까지 걸면 지저분하다.
   ⚠ `.gain-ic` 는 `overflow` 가 없어야 파문이 테 밖으로 퍼진다 */
.gain-ic{position:relative}
.gain-ic::after{content:"";position:absolute;inset:0;border-radius:var(--r-s);
  pointer-events:none;
  animation:gainring .52s ease-out backwards;
  animation-delay:calc(var(--i,0) * .11s + .16s)}
@keyframes gainring{
  from{box-shadow:0 0 0 0 #d4a843bb,0 0 18px 4px #d4a84366}
  to  {box-shadow:0 0 0 16px #d4a84300,0 0 0 0 #d4a84300}
}
@media (prefers-reduced-motion:reduce){
  .gain-ic,.gain-q{animation:none}
  .gain-ic::after{animation:none}
}

/* ===== 제보 (v195) ===== */
#s-report .hptabs{gap:6px;flex-wrap:wrap}
#s-report .hptab{flex:1 1 auto;min-width:78px;text-align:center;padding:8px 10px;font-size:12px}
/* ⚠ `.fq` 는 **가로줄에 놓으라고 만든 것**이라 `flex:1 1 0%` 다 (찾기 줄·이름 칸).
   세로로 쌓는 이 화면에서는 그대로 두면 **제목 칸이 본문만큼 부푼다** — 195px 이 됐다.
   여기서는 셋 다 제 키를 지킨다 */
#s-report .fq,#s-report .fbtn{flex:none}
#s-report #rpTitle{padding:11px 12px;font-size:13px}
.rp-body{flex:none;resize:none;height:168px;padding:11px 12px;font-size:13px;line-height:1.7}
.rp-note{margin:0;font-size:10.5px;line-height:1.6;color:var(--fg-faint)}
#rpGo[disabled]{opacity:.4}
.ask-q{margin:0;text-align:center;font-size:14.5px;line-height:1.6;color:var(--fg)}
.btnrow.one{justify-content:center}
.btnrow.one .fbtn{flex:none;min-width:min(220px,64%)}
/* 안내는 화면 한가운데에 띄운다. 아래 구석에 뜨면 손이 가려 못 보고 지나간다.
   수라장에서만 아래로 내린다 — 가운데는 차례 배너와 연이 쓰는 자리다 */
.toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);z-index:40;
  padding:13px 20px;border-radius:3px;
  background:#251f1ae8;border:1px solid var(--line);box-shadow:0 8px 30px #000a;
  font-size:13px;line-height:1.5;color:var(--fg);pointer-events:none;opacity:0;
  transition:opacity .2s,transform .2s;max-width:78%;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.app.battle-wide .toast{top:auto;bottom:96px;transform:translate(-50%,6px) scale(.96)}
.app.battle-wide .toast.on{transform:translate(-50%,0) scale(1)}
.devbox{border:1px dashed var(--line);border-radius:var(--r-s);padding:11px 12px;display:flex;flex-direction:column;gap:9px}
.devb{display:flex;gap:7px;flex-wrap:wrap}
.mini{padding:6px 11px;border:1px solid var(--line);border-radius:var(--r-s);font-size:11.5px;color:var(--fg-mid)}
.mini:hover{border-color:var(--seal);color:var(--fg)}
.mini.dg:hover{border-color:var(--danger);color:var(--danger)}
/* 출전 화면도 **같은 격자**다 — 칸 수와 폭이 어긋나면 같은 명운이 다르게 보인다 */
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
@media (min-width:400px){ .pick{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* ===== 혈투 로비 (v151 · 혈투 기획 §9) =====
   가운데가 지금 경지, 왼쪽이 내려앉을 자리, 오른쪽이 올라설 자리.
   `1fr auto 1fr` 이라 한쪽이 비어도 **가운데는 가운데에 선다** */
/* 혈투 로비 — **혈투 단추를 바닥에 붙인다** (v171). 아래에 아무 글도 두지 않으므로 하단 바 바로 위에 온다.
   ⚠ `.screen.on` 이 이미 세로 flex 다. 여기에 `#s-pvp{display:flex}` 를 또 쓰면 **화면이 안 감춰진다** —
   `.screen{display:none}`(0,1,0) 보다 아이디(1,0,0)가 이겨 늘 떠 있게 된다. v172 에 그렇게 당했다 */
#s-pvp > #pvGo{margin-top:auto}
/* 24칸을 다 깔고 옆으로 민다 (v152). 좌우 여백은 첫 칸·끝 칸도 가운데까지 올 수 있게 넉넉히.
   ⚠ 위 여백은 **경지 문양이 들어올 자리**를 미리 비워 둔 것이다 (v171) — 문양이 붙으면 다시 잰다 */
.pvrail{display:flex;align-items:center;gap:clamp(3px,1.2vw,8px);
  /* 칸 너비를 **큰 문양에 맞춰 고정**한다 (v181). 가운데 칸이 커질 때 줄 전체가 밀리면
     스크롤이 손에서 미끄러진다 — 너비가 늘 같으면 커지는 것은 문양뿐이고 줄은 가만히 있다.
     칸이 넓어진 만큼 **사이(gap)는 좁힌다** — 안 그러면 한 화면에 세 칸도 안 들어온다 */
  --pvw:clamp(78px,23vw,100px);
  /* ⚠ **위아래로 자리를 벌린다** (v192). `overflow-x:auto` 는 세로축도 `auto` 로 바꾸므로
     1단의 금빛 빛무리(`.pv-em.art.d1::before` 의 `box-shadow`, 밖으로 26px)가 **잘려 나갔다.**
     줄 안쪽에 14px 을 벌리고 바깥 여백에서 같은 만큼 되돌린다 — 자리는 그대로고 잘림만 없어진다.
     세로 막대도 숨긴다. 이 줄은 옆으로만 미는 자리다 */
  /* ⚠ 1단 금빛이 깜빡일 때는 밖으로 38px 까지 번진다 — 위아래 36px 을 벌린다.
     출전 명운의 「30/30 · 출전 가능」 줄을 걷은 만큼 전체가 아래로 내려앉는다 */
  margin:calc(26px + var(--top-gap) - 14px) -16px 2px;padding:36px 44%;
  /* **`scroll-behavior:smooth` 를 걸지 않는다.** 걸어 두면 `scrollLeft=…` 이 부드러운 이동으로 바뀌는데,
     화면이 가려져 있거나 방금 켜진 참이면 그 이동이 끝나지 못해 **아예 안 움직인다** (v152) */
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.pvrail::-webkit-scrollbar{display:none}
.pvcell{flex:none;width:var(--pvw);display:flex;flex-direction:column;align-items:center;gap:3px;
  opacity:.34;transition:opacity .2s}
.pvcell.past{opacity:.2}            /* 이미 지나온 칸은 한 겹 더 물린다 */
.pvcell.now{opacity:1}
/* ===== 줄 한가운데에 온 칸 (v181) =====
   밀어서 가운데에 온 경지는 **지금 칸과 같은 크기**로 선다 — 문양도 이름도.
   작은 문양 46px 로는 여덟 경지가 서로 안 갈렸다. 가운데만 크면 **미는 대로 하나씩 읽힌다.**
   ⚠ 다만 **켜지지는 않는다.** 크기만 같고 밝기는 중간이며, 「지금」 딱지도 금빛 깜빡임도 없다 —
   커진 것이 곧 내 경지로 읽히면 몇 단인지 헷갈린다. 지금 칸은 여전히 저 혼자 또렷하다 */
.pvcell.mid:not(.now){opacity:.62}
.pvcell.mid:not(.now) .pv-em{--em:clamp(74px,22vw,96px)}
.pvcell.mid:not(.now) .pv-ko{font-size:clamp(15px,4.4vw,18px);letter-spacing:.04em;color:#e6dccb}
.pvcell.mid:not(.now) .pv-dan{font-size:10px}
.pvcell:not(.now) .pv-cap:empty{min-height:1em}   /* 딱지가 없어도 높이는 같게 — 줄이 들쭉날쭉하지 않는다 */
.pv-cap{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-indent:.2em;color:var(--fg-faint)}
.pv-cap.dn{color:#e0928a} .pv-cap.up{color:#8fe0a8}
/* 문양이 아직 없다 — 한자를 새긴 원패로 대신한다. `assets/ui/rank_*.webp` 가 오면 갈아 끼운다 */
.pv-em{position:relative;display:flex;align-items:center;justify-content:center;
  width:var(--em,46px);height:var(--em,46px);border-radius:50%;
  transition:width .18s ease,height .18s ease;
  font-family:var(--han);font-size:calc(var(--em,46px) * .34);line-height:1;color:#efe4cf;
  border:1px solid #5b5040;background:radial-gradient(70% 70% at 50% 34%,#2b2536,#15121c);
  box-shadow:inset 0 0 14px #0009,0 3px 10px #0008;
  text-align:center;padding:2px;word-break:keep-all}
.pv-em.big{--em:clamp(74px,22vw,96px);border-color:var(--seal);color:#f6ecd8;
  box-shadow:inset 0 0 18px #0009,0 0 0 1px #00000080,0 6px 20px #000a,0 0 22px #a97cff1f}
/* ── 경지 문양 (v173) ─────────────────────────────────────────
   그림은 둘레가 투명한 256×256 이다. 원패 바탕과 테는 걷고 **그림만** 세운다 —
   바탕을 깔면 그림의 빛무리가 네모난 판 위에 얹힌 것처럼 보인다 */
.pv-em.art{border:0;background:none;box-shadow:none;padding:0;overflow:visible}
.pv-emi{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 6px #000a)}
/* 단(段)마다 테가 다르다. **3 → 2 → 1 로 갈수록 밝아진다** — 경지 안에서 어디까지 왔는지가 한눈에 읽힌다.
   테는 그림 뒤에 원으로 깐다(`::before`) — 그림 자체에 테를 두르면 빛무리까지 잘린다 */
.pv-em.art::before{content:"";position:absolute;inset:6%;border-radius:50%;pointer-events:none}
/* 3단 — **채도만 낮춘다** (v177). 흑백으로 돌렸더니 여덟 경지의 3단이 다 똑같아 보였다.
   빛깔이 남아 있어야 절정 3단은 보랏빛, 이류 3단은 풀빛으로 서로 갈린다.
   ⚠ **어둡게(brightness) 하지 않는다.** 이 문양은 나중에 맞대결 화면에도 그대로 쓴다 —
   딤드를 문양에 박아 두면 거기서도 죽은 채로 나온다. 흐리게 할 일이 있으면 **칸 쪽**에서 한다 */
.pv-em.art.d3 .pv-emi{filter:saturate(.38) drop-shadow(0 2px 6px #000a)}
.pv-em.art.d3::before{border:1px solid #7a7480aa}
/* 2단 — 빛깔이 거의 돌아오고 은색 테가 붙는다 */
.pv-em.art.d2 .pv-emi{filter:saturate(.82) drop-shadow(0 2px 6px #000a)}
.pv-em.art.d2::before{border:1px solid #cdd6e0;
  box-shadow:0 0 7px #aab7c480,inset 0 0 9px #cdd6e024}
/* 1단 — 각연자와 **같은 금빛**이다 (`.engaura` 와 한 몸). 경지를 넘기 직전이라는 표다 */
.pv-em.art.d1::before{border:2px solid #ffe9a8;
  box-shadow:0 0 12px 2px #ffd25fb0,0 0 26px 5px #fff3c855,inset 0 0 12px #ffdf8630;
  animation:engglow2 1.9s ease-in-out infinite}
@keyframes engglow2{
  50%{box-shadow:0 0 17px 4px #ffdf86,0 0 38px 9px #fff6d677,inset 0 0 16px #ffdf8644}}
/* 지나온 칸은 흐리게 두되(`.pvcell.past`) **금빛까지 깜빡이면 눈이 아프다** — 지금 칸에서만 돈다 */
.pvcell:not(.now) .pv-em.art.d1::before{animation:none}
/* 「지금」 칸에만 도는 빛무리 (v181) — 가운데 칸도 같은 크기로 서게 되면서
   **크기만으로는 둘이 안 갈린다.** `.pv-em.big` 의 테·빛은 `.art` 가 걷어 버려(문양은 바탕이 없다)
   그림 문양에는 아무 표가 남지 않았다. 여기서 도장 빛(`--seal`)으로 한 겹 두른다.
   ⚠ **문양 자체는 건드리지 않는다** — 칸 쪽에서 두르는 것이라 맞대결 화면에 그대로 옮겨도 된다 */
.pvcell.now .pv-em.art::after{content:"";position:absolute;inset:-7%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 20px 5px #a97cff38,inset 0 0 26px #a97cff24}
.pv-ko{font-family:var(--serif);font-size:11px;font-weight:700;color:#ddd3c2;white-space:nowrap;
  transition:font-size .18s ease,color .18s ease}
.pvcell.now .pv-ko{font-size:clamp(15px,4.4vw,18px);color:#f2ebdf;letter-spacing:.04em}
.pv-dan{font-family:var(--mono);font-size:8.5px;color:var(--fg-faint);letter-spacing:.06em}
.pvcell.now .pv-dan{font-size:10px}
/* 공 막대 — 100이면 한 단 오른다 */
.pvbarw{margin-bottom:16px}
.pvbar{height:7px;border-radius:4px;background:#ffffff12;overflow:hidden;
  border:1px solid #2a2530}
.pvbar > i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#6f5ba8,#b79bff);transition:width .3s ease}
.pvmeta{display:flex;justify-content:space-between;gap:10px;margin-top:5px;
  font-family:var(--mono);font-size:10px;color:var(--fg-faint)}
.pvmeta > span:last-child{text-align:right}
.pvmeta > span.bad{color:var(--warn)}
/* 출전 명운 한 칸 — 명운 화면과 같은 타일을 단추 속에 넣는다 */
/* 출전 명운 — 타일 하나와 그 **아래 한 줄**. 혈투 단추는 아래에서 밀어 하단 바에 붙는다 */
.pvdeckw{display:flex;flex-direction:column;align-items:center;gap:9px;margin:8px 0 18px}
.pvpick{margin:0;font-size:11.5px;line-height:1.6;color:var(--fg-faint);text-align:center;max-width:86%}
.pvpick:empty{display:none}
.pvdeck{width:clamp(96px,30vw,118px);padding:0;background:none;border:0;
  -webkit-tap-highlight-color:transparent;transition:transform .12s}
.pvdeck:active{transform:scale(.96)}
/* 시즌 종료 보상 단추 — 혈투 화면 좌측 상단에 붙는다 */
.pvrwd{position:absolute;z-index:2;top:calc(var(--top-gap) + 6px);left:16px;
  display:flex;align-items:center;gap:5px;height:32px;padding:0 10px 0 7px;
  border:1px solid #5c4a22;border-radius:var(--r-s);background:#0d0b11c0;
  font-family:var(--serif);font-size:12px;font-weight:700;color:var(--chungi);
  -webkit-tap-highlight-color:transparent;transition:transform .12s,border-color .14s}
.pvrwd img{width:18px;height:18px;object-fit:contain}
.pvrwd:active{transform:scale(.95);border-color:var(--chungi)}
/* 시즌 종료 보상 창 — 머리와 닫기는 서 있고 목록만 구른다 */
.ssbox{display:flex;flex-direction:column;max-height:84%;overflow:hidden}
.ss-d{margin:8px 0 12px;font-size:12px;line-height:1.7;color:var(--fg-mid)}
.sslist{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  display:flex;flex-direction:column;gap:4px;margin:0 -6px 14px;padding:0 6px}
.ssrow{flex:none;display:grid;grid-template-columns:34px 76px 1fr auto;align-items:center;gap:8px;
  padding:5px 8px;border:1px solid transparent;border-radius:var(--r-s);background:#ffffff06}
.ssrow.now{border-color:#a97cff66;background:#a97cff14}
.ssrow .pv-em{--em:34px;font-size:11px}
.ssrow .pv-em.art.d1::before{animation:none;box-shadow:0 0 6px 1px #ffd25f90}
.ss-n{font-family:var(--serif);font-size:12.5px;font-weight:700;color:#e6dccb;white-space:nowrap}
.ss-n i{margin-left:5px;font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:#b79bff}
.ss-g{height:6px;border-radius:3px;background:#ffffff10;overflow:hidden}
.ss-g > i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#8a6f3a,var(--chungi))}
.ss-p{display:flex;align-items:center;gap:3px;justify-content:flex-end;min-width:62px;
  font-family:var(--num);font-size:12px;font-weight:700;color:var(--chungi);font-variant-numeric:tabular-nums}
/* 맞수를 찾는 동안 */
.veil.match{align-items:center;justify-content:center;background:#07060ae8}
.mbox{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:300px;width:100%}
.mspin{position:relative;width:54px;height:54px}
.mspin > i{position:absolute;inset:0;border-radius:50%;border:1px solid transparent;
  border-top-color:#b79bff;animation:mspin 1.15s linear infinite}
.mspin > i:last-child{inset:8px;border-top-color:transparent;border-bottom-color:#6f5ba8;
  animation-duration:1.7s;animation-direction:reverse}
@keyframes mspin{to{transform:rotate(360deg)}}
.mtx{margin:0;text-align:center;font-family:var(--serif);font-size:13.5px;line-height:1.7;color:#ddd3c2;
  min-height:2.6em;display:flex;align-items:center}
.mbox .fbtn{flex:none;min-width:130px}

/* ===== 명운 타일 (v145) =====
   뒷면 그림 · 그 한가운데 도 문양 · 아래에 이름과 장수.
   명운 화면과 출전 화면이 이 한 벌을 나눠 쓴다 */
.dtile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;min-width:0;
  background:none;border:0;text-align:center;-webkit-tap-highlight-color:transparent;
  transition:transform .12s}
.dtile:active{transform:scale(.96)}
.dt-back{position:relative;width:100%;aspect-ratio:63/88;border-radius:4px;
  background:url(assets/ui/pile_deck_back.webp?v=1) center/cover no-repeat,#151119;
  border:1px solid #4a4130;box-shadow:0 6px 16px #0009,inset 0 0 22px #00000066;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
/* 문양은 뒷면 한가운데. 도 색으로 은은한 빛을 깔아 뒤에서 떠오르게 한다 */
.dt-back::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 42% at 50% 50%,color-mix(in srgb,var(--pc,#8a7c5a) 42%,transparent),transparent 72%)}
.dt-sig{position:relative;z-index:1;width:56%;display:flex;align-items:center;justify-content:center}
.dt-sig-img{width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 2px 6px #000c) drop-shadow(0 0 10px #0008)}
.dt-ok{position:absolute;right:4px;top:3px;z-index:2;font-size:11px;font-weight:800;color:var(--ok);
  text-shadow:0 1px 3px #000,0 0 8px #3f9e6388}
.dt-n{font-family:var(--serif);font-size:12px;font-weight:700;line-height:1.25;
  width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-m{font-family:var(--mono);font-size:9.5px;font-variant-numeric:tabular-nums;color:var(--fg-faint);
  line-height:1.2;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-m.bad{color:var(--warn)}
/* 30장이 안 찬 명운 — 뒷면을 죽여 둔다. 출전 화면에서는 아예 못 고른다 */
.dtile.no .dt-back{filter:grayscale(.7) brightness(.62)}
.dtile[disabled]{opacity:.45;cursor:default}
.dtile[disabled]:active{transform:none}
/* 뒷면에 손을 올리거나 누르면 다른 단추들과 같은 빛이 돈다 (v150).
   `filter` 가 아니라 `box-shadow` 로 두른다 — 30장이 안 찬 명운은 filter 로 죽여 두었다 */
@media (hover:hover) and (pointer:fine){
  .dtile:not([disabled]):not(.empty):not(.lock):hover .dt-back{
    border-color:#4dffa055;box-shadow:0 0 0 1px #4dffa055,0 0 14px #4dffa04d,0 6px 16px #0009}
}
.dtile:not([disabled]):not(.empty):not(.lock):active .dt-back{
  border-color:var(--ready);box-shadow:0 0 0 2px var(--ready),0 0 18px #4dffa0aa,0 6px 16px #0009}
.dtile.on .dt-back{border-color:var(--seal);box-shadow:0 0 0 2px var(--seal),0 6px 18px #0009}
.dtile.on .dt-n{color:#f3e4e1}
/* 빈 칸·잠긴 칸 */
.dtile.empty .dt-back,.dtile.lock .dt-back{background:none;border-style:dashed;border-color:var(--line);box-shadow:none}
.dtile.empty .dt-back::before,.dtile.lock .dt-back::before{display:none}
.dtile.lock{opacity:.6}
.dt-lock{font-size:22px;color:var(--fg-faint);line-height:1}
@media (hover:hover) and (pointer:fine){
  .dtile:not([disabled]):hover .dt-back{border-color:var(--seal)}
}

/* 도 문양 고르기 */
.edsig{flex:none;display:flex;align-items:center;gap:5px;padding:6px 9px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--ink-2);
  font-size:11px;letter-spacing:.06em;color:var(--fg-mid);-webkit-tap-highlight-color:transparent}
.edsig:active{border-color:var(--seal);color:var(--fg)}
.edsig-i{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.edsig-i .dt-sig-img{width:20px;height:20px}
.sigpick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 4px}
.sigb{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);
  font-size:11px;color:var(--fg-mid);-webkit-tap-highlight-color:transparent}
.sigb .dt-sig-img{width:34px;height:34px}
.sigb.on{border-color:var(--seal);background:var(--seal-deep);color:#f3e4e1}
.sigb.on .dt-sig-img{filter:drop-shadow(0 0 8px #c4453a88)}
/* 잠긴 문양 — 이 명운의 종파가 아닌 것 (v204). 제 종파와 무도만 고를 수 있다 */
.sigb.off{opacity:.26;pointer-events:none}
.sigb.off .dt-sig-img{filter:grayscale(1)}

.prow{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--panel);text-align:left;width:100%}
.prow:hover{border-color:var(--seal)}
.prow[disabled]{opacity:.38;cursor:default}
.prow.on{border-color:var(--seal);background:var(--panel-2)}
.prow b{font-family:var(--serif);font-size:14px;font-weight:700;display:block}
.prow span{font-size:11px;color:var(--fg-mid);display:block;margin-top:2px}