/* ═══════════════════════════════════════════════════════════
   목포 3개교 학교 디지털트윈 — 3D 화면
   색은 학교마다 다릅니다 (sites.js 의 color · color2 · ink 를 화면이 읽어 아래 변수에 넣습니다)
     --deep    : 머리판·안내판 바탕 (학교의 짙은 색)
     --accent2 : 강조선·단추 (학교의 둘째 색)
     --paper   : 설명 카드 종이색
     --mark    : 학교 표지 동그라미 (학교의 대표 색)
   ═══════════════════════════════════════════════════════════ */
@font-face{ font-family:'Pretendard'; src:url('fonts/PretendardVariable.woff2') format('woff2'); font-weight:45 920; font-style:normal; font-display:swap; }
@font-face{ font-family:'MaruBuri'; src:url('fonts/MaruBuri-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --deep:#0f1d3d;
  --deep-2:#1d2f55;
  --accent2:#f2c230;
  --accent2-l:#f7d565;
  --paper:#f6f4ee;
  --mark:#2b4ea2;
  --glass:color-mix(in srgb, var(--deep) 86%, transparent);
  --rule:color-mix(in srgb, var(--accent2) 55%, transparent);
  --serif:'MaruBuri','Noto Serif KR','Noto Serif JP','Noto Serif SC','Batang','Yu Mincho','SimSun',serif;
  --sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR','Yu Gothic','Microsoft YaHei','Microsoft JhengHei',system-ui,sans-serif;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ margin:0; height:100%; background:var(--deep); color:var(--paper); overflow:hidden; overscroll-behavior:none; }
body{ word-break:keep-all; font-family:var(--sans); -webkit-font-smoothing:antialiased; letter-spacing:-.005em; }
button, select{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
:focus-visible{ outline:2px solid var(--accent2-l); outline-offset:2px; }

.viewer{ position:fixed; inset:0; background:var(--deep); overflow:hidden; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
/* 손가락으로 끌어도 브라우저가 화면을 밀거나 확대하지 않게 (아이폰·갤럭시) */
.viewer canvas{ display:block; width:100% !important; height:100% !important; touch-action:none; }
.viewer button, .viewer select{ touch-action:manipulation; }

/* ── 표지 모드: 화면 위 글자·단추를 모두 감추고 3D 만 보인다 ── */
.covermode .bar, .covermode .chips, .covermode .hint, .covermode .poicard, .covermode .tourbar, .covermode #joy, .covermode #jumpBtn{ display:none !important; }
.covermode .load{ opacity:0; pointer-events:none; }

/* ── 머리판: 쪽빛 띠 + 아래 황포 금선 ── */
.bar{ position:absolute; left:0; right:0; top:0; z-index:8; display:flex; align-items:stretch; gap:0;
  padding-top:env(safe-area-inset-top,0px); padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px);
  background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule); box-shadow:0 1px 0 rgba(0,0,0,.35); }
.bar::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:3px;
  background:repeating-linear-gradient(90deg, var(--accent2) 0 18px, transparent 18px 22px); opacity:.75; pointer-events:none; }
.back{ display:flex; align-items:center; gap:8px; padding:0 15px; font-size:12.5px; font-weight:600; color:var(--paper);
  border-right:1px solid rgba(255,255,255,.12); white-space:nowrap; }
.back::before{ content:''; width:8px; height:8px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-top:1px; }
.back:hover{ background:rgba(255,255,255,.06); }
.ttl{ display:flex; align-items:center; gap:10px; padding:8px 16px; min-width:0; }
.seal{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--mark); color:#fff; display:grid; place-items:center;
  font-size:17px; font-weight:700; line-height:1; text-align:center; letter-spacing:0; box-shadow:0 0 0 2px var(--accent2), inset 0 0 0 2px rgba(255,255,255,.25); }
.ttl .tx{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.ttl small{ font-size:11px; color:var(--accent2-l); letter-spacing:.14em; }
.ttl b{ font-size:17px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acts{ margin-left:auto; display:flex; align-items:stretch; }
.acts > *{ display:flex; align-items:center; gap:7px; padding:0 13px; font-size:12.5px; font-weight:600; border-left:1px solid rgba(255,255,255,.12); white-space:nowrap; }
.acts button:hover{ background:rgba(255,255,255,.06); }
.acts button.on{ color:var(--accent2-l); box-shadow:inset 0 -2px 0 var(--accent2); }
.acts .guide{ background:var(--accent2); color:var(--deep); font-weight:700; }
.acts .guide:hover{ background:var(--accent2-l); }
.acts .guide::before{ content:''; width:0; height:0; border-left:8px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.ic{ display:inline-block; width:15px; height:15px; flex:none; background:currentColor; -webkit-mask:var(--svg) center/contain no-repeat; mask:var(--svg) center/contain no-repeat; }
.ic-fs{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E"); }
.acts .fsb.on .ic-fs{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M20 15h-5v5M4 15h5v5'/%3E%3C/svg%3E"); }
.ic-ai{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c.5 3.6 2.2 5.3 5.8 5.8-3.6.5-5.3 2.2-5.8 5.8-.5-3.6-2.2-5.3-5.8-5.8 3.6-.5 5.3-2.2 5.8-5.8ZM5.5 14.5c.3 2 1.2 2.9 3.2 3.2-2 .3-2.9 1.2-3.2 3.2-.3-2-1.2-2.9-3.2-3.2 2-.3 2.9-1.2 3.2-3.2Z'/%3E%3C/svg%3E"); }
.acts .ai .ic{ color:var(--accent2-l); } .acts .fsb .ic{ color:var(--paper); }
.acts .ai[aria-expanded="true"]{ color:var(--accent2-l); box-shadow:inset 0 -2px 0 var(--accent2); }
.lang{ position:relative; }
.lang select{ appearance:none; -webkit-appearance:none; padding:6px 22px 6px 8px; background:transparent; color:var(--paper); font-weight:600; font-size:13px;
  border:1px solid rgba(255,255,255,.2); border-radius:2px; }
.lang select option{ color:#111; background:#fff; }
.lang::after{ content:''; position:absolute; right:24px; top:50%; width:6px; height:6px; margin-top:-5px; border-right:1.5px solid var(--paper); border-bottom:1.5px solid var(--paper); transform:rotate(45deg); pointer-events:none; }
.lang span{ font-size:11px; color:var(--accent2-l); letter-spacing:.08em; }

/* ── 교내 핵심 공간 목록 (왼쪽, 번호 붙은 유리판) ── */
.chips{ position:absolute; left:calc(12px + env(safe-area-inset-left,0px)); top:calc(68px + env(safe-area-inset-top,0px)); z-index:3; width:150px; max-height:calc(100% - 120px);
  display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
  background:color-mix(in srgb, var(--deep) 62%, transparent); border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); }
.chips:empty{ display:none; }
.chips .ch{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:7px 10px 5px; font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--accent2-l); border-bottom:1px solid rgba(255,255,255,.1); pointer-events:none; }
.chips .ch em{ font-style:normal; font-size:11px; letter-spacing:0; opacity:.7; font-variant-numeric:tabular-nums; }
.chips .cl{ display:flex; flex-direction:column; padding:4px; gap:1px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.chips button{ display:flex; align-items:center; gap:7px; text-align:left; padding:3px 7px 3px 4px; border-radius:8px; font-size:11.5px; font-weight:600; color:var(--paper); transition:background .15s, transform .15s; }
.chips button i{ flex:none; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--deep); background:var(--accent2); box-shadow:0 0 0 1px rgba(0,0,0,.2) inset; }
.chips button span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chips button:hover{ background:rgba(255,255,255,.1); transform:translateX(2px); }
.chips button.on{ background:var(--accent2); color:var(--deep); }
.chips button.on i{ background:var(--deep); color:var(--accent2-l); box-shadow:none; }

/* ── 설명 카드: 사진 + 반투명 유리판 ── */
.poicard{ position:absolute; right:calc(12px + env(safe-area-inset-right,0px)); top:calc(68px + env(safe-area-inset-top,0px)); width:min(272px, calc(100% - 32px)); z-index:4;
  background:color-mix(in srgb, var(--deep) 80%, transparent); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  color:var(--paper); border:1px solid rgba(255,255,255,.14); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateX(18px) scale(.98); opacity:0; pointer-events:none; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s; }
.poicard.on{ transform:none; opacity:1; pointer-events:auto; }
.poicard .pi{ position:relative; aspect-ratio:16/9; background:color-mix(in srgb, var(--deep) 60%, black); }
.poicard .pi img{ display:block; width:100%; height:100%; object-fit:cover; }
.poicard .pi::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 30%, color-mix(in srgb, var(--deep) 92%, transparent) 100%); }
.poicard .pt{ position:absolute; left:13px; right:13px; bottom:9px; z-index:1; display:grid; gap:4px; }
.poicard .pk{ justify-self:start; font-size:9.5px; font-weight:700; letter-spacing:.08em; color:var(--deep); background:var(--accent2); padding:2px 7px; border-radius:999px; }
.poicard .pn{ font-family:var(--serif); font-size:17px; font-weight:700; line-height:1.25; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.poicard .pn small{ font-family:var(--sans); font-size:11px; font-weight:400; opacity:.75; margin-left:6px; }
.poicard .px{ position:absolute; right:8px; top:8px; z-index:2; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,.35); color:#fff; font-size:12px; display:grid; place-items:center; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .15s; }
.poicard .px:hover{ background:rgba(255,255,255,.28); }
.poicard .pb{ padding:10px 13px 10px; }
.poicard .pd{ font-size:12.5px; line-height:1.6; color:rgba(246,244,238,.88); }
.poicard .pf{ margin-top:8px; padding-top:7px; border-top:1px solid rgba(255,255,255,.12); font-size:10.5px; color:rgba(246,244,238,.6); display:flex; align-items:center; gap:8px; }
.poicard .pm{ margin-left:auto; font-size:11.5px; font-weight:700; color:var(--deep); background:var(--accent2-l); padding:1px 8px; border-radius:999px; font-variant-numeric:tabular-nums; }

.tourbar:not([hidden]) ~ .hint{ display:none; }
.hint{ position:absolute; left:50%; bottom:calc(14px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:3; pointer-events:none;
  font-size:12px; padding:6px 14px; background:color-mix(in srgb, var(--deep) 74%, transparent); border:1px solid rgba(255,255,255,.12); white-space:nowrap; }

/* ── 표지 ── */
.cover{ position:absolute; inset:0; z-index:7; display:flex; align-items:flex-end; background:center/cover no-repeat var(--deep); }
.cover::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, color-mix(in srgb, var(--deep) 94%, transparent) 0%, color-mix(in srgb, var(--deep) 72%, transparent) 40%, color-mix(in srgb, var(--deep) 8%, transparent) 78%); }
.cover .in{ position:relative; padding:0 clamp(20px,6vw,80px) calc(clamp(28px,9vh,90px) + env(safe-area-inset-bottom,0px)) max(clamp(20px,6vw,80px), env(safe-area-inset-left,0px)); max-width:640px; }
.cover .k{ display:flex; align-items:center; gap:10px; color:var(--accent2-l); font-size:13px; letter-spacing:.14em; }
.cover .k::before{ content:''; width:28px; height:1px; background:var(--accent2); }
.cover h1{ word-break:keep-all; margin:12px 0 14px; font-size:clamp(32px,4.6vw,54px); font-weight:700; line-height:1.18; text-wrap:balance; }
.cover p{ margin:0 0 26px; font-size:15px; line-height:1.85; opacity:.9; max-width:34em; white-space:pre-line; }   /* 설명은 문장마다 줄을 나눈다 */
.cover .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; }
.cover .go{ background:var(--accent2); color:var(--deep); font-weight:700; font-size:16px; padding:13px 26px; border-radius:2px; text-align:left; }
.cover .go:hover{ background:var(--accent2-l); }
.cover .go small{ display:block; font-size:11.5px; font-weight:400; opacity:.8; margin-top:2px; }
.cover .langs{ display:flex; flex-wrap:wrap; gap:0; border:1px solid rgba(255,255,255,.25); align-self:center; }
.cover .langs button{ padding:8px 12px; font-size:13px; border-left:1px solid rgba(255,255,255,.18); }
.cover .langs button:first-child{ border-left:0; }
.cover .langs button.on{ background:var(--paper); color:var(--deep); font-weight:700; }
.cover.off{ display:none; }

.load{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:color-mix(in srgb, var(--deep) 90%, transparent); z-index:5; text-align:center; padding:20px; }
.load.on{ display:flex; }
.load .t{ font-size:18px; font-weight:700; }
.load .s{ font-size:13px; opacity:.8; font-variant-numeric:tabular-nums; }
.load .s2{ font-size:14px; font-weight:600; color:var(--accent2-l); }
.load .bar2{ width:min(320px,80%); height:2px; background:rgba(255,255,255,.15); overflow:hidden; }
.load .bar2 i{ display:block; height:100%; width:0; background:var(--accent2-l); transition:width .3s; }
.load .ver{ position:absolute; right:14px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); font-size:10.5px; letter-spacing:.04em; color:rgba(255,255,255,.4); font-variant-numeric:tabular-nums; }
.load button{ margin-top:6px; padding:8px 18px; background:var(--accent2); color:var(--deep); font-weight:700; }
.load .err{ color:#ffb3a7; }
.load code{ background:rgba(255,255,255,.12); padding:1px 6px; font-size:12px; font-family:Consolas,monospace; }

/* ── 해설 자막판: 영화 자막처럼 아래 가운데 ── */
.tourbar{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(48px + env(safe-area-inset-bottom,0px)); width:min(860px, calc(100% - 32px)); z-index:4;
  background:color-mix(in srgb, var(--deep) 88%, transparent); border-top:2px solid var(--accent2); padding:12px 20px 10px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.tourbar .tt{ display:flex; align-items:baseline; gap:12px; margin-bottom:4px; }
.tourbar .tt b{ color:var(--accent2-l); font-size:15px; font-weight:700; }
.tourbar .tt span{ font-size:11.5px; opacity:.65; font-variant-numeric:tabular-nums; }
.tourbar .tx{ font-size:16px; line-height:1.7; }
.tourbar .tc{ display:flex; gap:0; margin-top:8px; align-items:center; border-top:1px solid rgba(255,255,255,.1); padding-top:8px; }
.tourbar .tc button{ padding:3px 12px; font-size:13px; opacity:.85; }
.tourbar .tc button:hover{ opacity:1; }
.tourbar .tc button.sound{ margin-left:8px; background:#ffd23f; color:#2a1d08; font-weight:800; opacity:1; padding:5px 14px; border-radius:999px; animation:hpulse2 1s ease-in-out infinite; }
@keyframes hpulse2{ 50%{ transform:scale(1.06); } }
.tourbar .tc button.free{ margin-left:auto; background:var(--paper); color:var(--deep); font-weight:700; opacity:1; padding:5px 14px; }

#joy{ position:absolute; left:calc(16px + env(safe-area-inset-left,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:92px; height:92px; border-radius:50%; background:color-mix(in srgb, var(--deep) 45%, transparent); border:1px solid rgba(255,255,255,.25); z-index:4; touch-action:none; }
#joy i{ position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; background:color-mix(in srgb, var(--accent2) 92%, transparent); }
#jumpBtn{ position:absolute; right:calc(16px + env(safe-area-inset-right,0px)); bottom:calc(30px + env(safe-area-inset-bottom,0px)); width:50px; height:50px; border-radius:50%; background:color-mix(in srgb, var(--accent2) 92%, transparent); color:var(--deep); font-weight:700; font-size:12.5px; z-index:4; touch-action:none; }

/* 손가락으로 쓰는 기기: 아이폰은 16px 보다 작은 선택 상자를 누르면 화면을 확대해 버린다 */
/* 손가락으로 쓰는 기기: 아이폰은 16px 보다 작은 선택 상자를 누르면 화면을 확대해 버린다 */
@media (pointer:coarse){
  .lang select{ font-size:16px; padding:5px 22px 5px 8px; }
}
.lang .lcode{ display:none; }

/* ── 휴대폰 (세로) ── */
@media (max-width:860px){
  .ttl{ padding:8px 10px; gap:9px; min-width:0; flex:1 1 auto; } .seal{ width:30px; height:30px; font-size:14px; }
  .ttl b{ font-size:16px; }
  .acts{ flex:none; }
  .acts .home{ display:none; }
  .acts > *{ padding:0 10px; }
  .back{ padding:0 14px; font-size:0; } .back::before{ font-size:13px; }
  .hint{ display:none; }
  /* 언어: 좁은 머리판에서는 짧은 이름(KO · EN …)만 보이고, 누르면 원래 목록이 뜬다 */
  .lang span{ display:none; }
  .lang .lcode{ display:block; font-size:13px; font-weight:700; letter-spacing:.04em; padding-right:16px; }
  .lang select{ position:absolute; inset:0; width:100%; height:100%; opacity:0; }
  .lang::after{ right:10px; }
  /* 휴대폰 설명 카드: 사진 없이 이름 한 줄 + 설명 한 줄(누르면 전부) — 조이스틱 위에 얇게 */
  .poicard{ top:auto; bottom:calc(122px + env(safe-area-inset-bottom,0px)); right:auto; left:50%; transform:translateX(-50%) translateY(10px); width:calc(100% - 24px); border-radius:12px; cursor:pointer; }
  .poicard.on{ transform:translateX(-50%); }
  .poicard .pi{ aspect-ratio:auto; height:auto; background:none; } .poicard .pi img{ display:none; } .poicard .pi::after{ display:none; }
  .poicard .pt{ position:static; display:flex; align-items:center; gap:8px; padding:9px 38px 0 12px; }
  .poicard .pk{ font-size:9px; padding:2px 6px; } .poicard .pn{ font-size:15px; text-shadow:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .poicard .pn small{ display:none; }
  .poicard .px{ width:24px; height:24px; right:7px; top:7px; font-size:11px; }
  .poicard .pb{ display:flex; align-items:center; gap:8px; padding:5px 12px 9px; }
  .poicard .pd{ flex:1; min-width:0; font-size:12px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .poicard.open .pd{ white-space:normal; }
  .poicard .pf{ margin:0; padding:0; border:0; flex:none; } .poicard .pf > span:first-child{ display:none; } .poicard .pm{ font-size:11px; padding:1px 7px; }
  .tourbar{ bottom:calc(122px + env(safe-area-inset-bottom,0px)); padding:10px 14px 8px; }
  .tourbar .tx{ font-size:15px; line-height:1.65; }
}
@media (max-width:400px){
  .acts .guide{ padding:0 10px; font-size:12.5px; }
  .ttl small{ display:none; }
}
/* 안내 지점 목록: 휴대폰에서는 머리판 바로 아래 한 줄 띠 (옆으로 밀어 보기) — 3D 화면을 가리지 않게 */
@media (max-width:860px), (orientation:landscape) and (max-height:520px){
  .chips{ top:var(--bar-h, 50px); bottom:auto; left:0; right:0; width:auto; max-height:none; border-radius:0; box-shadow:none;
    border:0; border-bottom:1px solid rgba(255,255,255,.1); background:color-mix(in srgb, var(--deep) 68%, transparent); }
  .chips .cl{ flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:6px 8px; gap:4px;
    padding-left:max(8px, env(safe-area-inset-left,0px)); padding-right:max(8px, env(safe-area-inset-right,0px));
    scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x; }
  .chips .cl::-webkit-scrollbar{ display:none; }
  .chips button{ flex:none; padding:4px 10px 4px 4px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); gap:7px; }
  .chips button i{ width:20px; height:20px; font-size:11px; }
  .chips button:hover{ transform:none; }
  .acts .ai span, .acts .fsb span{ display:none; }
  .acts .ai, .acts .fsb{ padding:0 12px; }
}
/* ── 휴대폰을 가로로 돌렸을 때: 위아래가 좁으니 카드는 오른쪽 위, 조이스틱과 자막은 아래에 겹치지 않게 ── */
@media (orientation:landscape) and (max-height:520px){
  .ttl{ padding:5px 12px; } .seal{ width:26px; height:26px; font-size:12px; }
  .ttl small{ display:none; } .ttl b{ font-size:15px; }
  .hint{ display:none; }
  .chips button{ padding:3px 9px 3px 3px; font-size:12px; }
  .poicard{ top:calc(var(--bar-h, 44px) + 42px); bottom:auto; left:auto; right:12px; transform:translateX(12px); width:min(300px, 42vw); max-height:calc(100% - var(--bar-h, 44px) - 54px); overflow:auto; touch-action:pan-y; }
  .poicard.on{ transform:none; }
  .poicard .pi{ aspect-ratio:auto; height:auto; background:none; } .poicard .pi img{ display:none; } .poicard .pi::after{ display:none; }
  .poicard .pt{ position:static; padding:12px 40px 0 14px; } .poicard .pn{ font-size:17px; text-shadow:none; }
  .poicard .pb{ padding:8px 14px 10px; } .poicard .pd{ font-size:12.5px; line-height:1.6; }
  #joy{ bottom:calc(12px + env(safe-area-inset-bottom,0px)); width:84px; height:84px; }
  #joy i{ width:36px; height:36px; margin:-18px 0 0 -18px; }
  #jumpBtn{ bottom:calc(22px + env(safe-area-inset-bottom,0px)); width:46px; height:46px; }
  .tourbar{ bottom:calc(8px + env(safe-area-inset-bottom,0px)); width:min(560px, calc(100% - 300px)); min-width:300px; padding:8px 14px 6px; }
  .tourbar .tx{ font-size:13.5px; line-height:1.55; }
  .tourbar .tc{ margin-top:4px; padding-top:4px; }
  .cover{ align-items:center; overflow-y:auto; touch-action:pan-y; }
  .cover .in{ padding-top:16px; padding-bottom:16px; }
  .cover h1{ font-size:28px; margin:6px 0 8px; }
  .cover p{ margin-bottom:12px; font-size:13.5px; line-height:1.6; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* 제목만 명조 (굵고 큰 글씨) */
.seal, .ttl b, .cover h1, .poicard .pn, .tourbar .tt b{ font-family:var(--serif); }
.poicard .pn small{ font-family:var(--sans); }

@media (max-width:860px), (orientation:landscape) and (max-height:520px){ .chips .ch{ display:none; } }
.cover .k b{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--mark); color:#fff; font-size:13px; letter-spacing:0; box-shadow:0 0 0 2px var(--accent2); }
.cover .row .ghost{ background:transparent; color:var(--paper); border:1px solid rgba(255,255,255,.4); font-weight:700; font-size:15px; padding:12px 22px; border-radius:2px; }
.cover .row .ghost:hover{ background:rgba(255,255,255,.08); }
.cover .row .ghost small{ display:block; font-size:11.5px; font-weight:400; opacity:.8; margin-top:2px; }

/* ══════════ 보물찾기 놀이 (game.js) ══════════ */
.ic-hunt{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5A3.5 3.5 0 0 1 6.5 7h11a3.5 3.5 0 0 1 3.5 3.5V19H3Z'/%3E%3Cpath d='M3 11h18M12 11v3'/%3E%3Ccircle cx='12' cy='14.5' r='1.4' fill='%23000'/%3E%3C/svg%3E"); }
.ic-multi{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.5'/%3E%3Cpath d='M2.5 19c.6-3 2.7-5 5.5-5s4.9 2 5.5 5M13.5 18c.4-2 1.6-3.5 3-3.5s2.8 1.5 3.2 3.5'/%3E%3C/svg%3E"); }
.acts .multi-b{ position:relative; } .acts .multi-b .ic{ color:#7be3d8; }
.acts .multi-b.on{ color:#7be3d8; box-shadow:inset 0 -2px 0 #7be3d8; }
.mbadge{ position:absolute; top:6px; right:6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#7be3d8; color:#062a26; font-size:11px; font-weight:800; font-style:normal; display:grid; place-items:center; }
/* 함께 걷기 판 */
.mpanel{ position:absolute; right:calc(12px + env(safe-area-inset-right,0px)); top:calc(68px + env(safe-area-inset-top,0px)); z-index:7; width:min(340px, calc(100% - 24px)); background:color-mix(in srgb, var(--deep) 92%, transparent); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:12px 14px 12px; box-shadow:0 20px 50px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); font-size:13px; line-height:1.5; }
.mpanel .mh{ display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; letter-spacing:.12em; color:#7be3d8; margin-bottom:8px; }
.mpanel .mx{ width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.1); font-size:11px; }
.mpanel p{ margin:0 0 10px; color:rgba(246,244,238,.85); font-size:12.5px; }
.mpanel label{ display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:6px; margin-bottom:7px; }
.mpanel label span{ font-size:11px; color:rgba(246,244,238,.7); }
.mpanel input{ min-width:0; padding:8px 10px; border-radius:9px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:var(--paper); font-size:14px; }
.mpanel .mnew{ font-size:11.5px; padding:6px 9px; }
.mpanel .mb{ display:flex; justify-content:flex-end; gap:6px; margin-top:6px; }
.mpanel .go{ background:#7be3d8; color:#062a26; font-weight:800; padding:8px 16px; border-radius:999px; }
.mpanel .ghost{ border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:6px 12px; }
.mpanel .mn{ font-size:11px; color:rgba(246,244,238,.55); margin-top:6px; }
.mpanel .mst{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:6px; } .mpanel .mst b{ font-size:14px; } .mpanel .mst span{ font-size:11.5px; color:rgba(246,244,238,.65); }
.mlist{ display:flex; flex-wrap:wrap; gap:5px; max-height:120px; overflow:auto; }
.mlist span{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 6px; border-radius:999px; background:rgba(255,255,255,.08); font-size:12px; }
.mlist span i{ width:8px; height:8px; border-radius:50%; } .mlist .dim{ background:none; color:rgba(246,244,238,.55); }
.macts{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.macts button{ flex:1; padding:8px 6px; border-radius:10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font-size:12.5px; font-weight:700; }
.macts button:hover{ background:rgba(123,227,216,.25); }
.merr{ margin-top:8px; padding:7px 10px; border-radius:9px; background:rgba(255,107,107,.15); border:1px solid rgba(255,107,107,.4); font-size:12px; }
.acts .hunt-b .ic{ color:#ffd23f; }
.acts .hunt-b.on{ color:#ffd23f; box-shadow:inset 0 -2px 0 #ffd23f; }
.hunting .chips{ display:none !important; }
.hunt{ position:absolute; inset:0; z-index:6; pointer-events:none; font-family:var(--sans); color:var(--paper); }
.hunt > *{ pointer-events:auto; }
.hunt .go{ background:#ffd23f; color:#2a1d08; font-weight:800; font-size:15px; padding:11px 22px; border-radius:999px; box-shadow:0 4px 0 #c99a12; transition:transform .1s, box-shadow .1s; }
.hunt .go:hover{ background:#ffe07a; } .hunt .go:active{ transform:translateY(3px); box-shadow:0 1px 0 #c99a12; }
.hunt .ghost{ background:rgba(255,255,255,.08); color:var(--paper); border:1px solid rgba(255,255,255,.28); font-weight:700; font-size:14px; padding:10px 18px; border-radius:999px; }
.hunt .ghost:hover{ background:rgba(255,255,255,.16); }
.hunt .hb{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }

/* 시작 화면 */
.hstart{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:color-mix(in srgb, var(--deep) 72%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); overflow:auto; }
.hp{ width:min(520px, 100%); background:color-mix(in srgb, var(--deep) 94%, black); border:1px solid rgba(255,210,63,.45); border-radius:18px; padding:26px 28px 22px; box-shadow:0 30px 80px rgba(0,0,0,.5); position:relative; overflow:hidden; }
.hp::before{ content:''; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,#ffd23f,#ff6b8a,#5fd0ff,#8dff8d,#ffd23f); }
.hp .hk{ font-size:11px; font-weight:700; letter-spacing:.14em; color:#ffd23f; }
.hp h2{ font-family:var(--serif); font-size:34px; font-weight:700; margin:6px 0 10px; line-height:1.15; }
.hp h2::before{ content:''; display:inline-block; width:34px; height:34px; margin:0 10px -6px 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd23f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5A3.5 3.5 0 0 1 6.5 7h11a3.5 3.5 0 0 1 3.5 3.5V19H3Z'/%3E%3Cpath d='M3 11h18M12 11v3'/%3E%3Ccircle cx='12' cy='14.5' r='1.4' fill='%23ffd23f'/%3E%3C/svg%3E") center/contain no-repeat; }
.hp p{ font-size:14.5px; line-height:1.7; color:rgba(246,244,238,.9); margin:0 0 16px; }
.hp p b{ color:#ffd23f; }
.hl{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.hl > span{ width:38px; font-size:12.5px; font-weight:700; opacity:.75; }
.hlv{ display:flex; gap:6px; }
.hlv button{ padding:8px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.3); font-size:14px; font-weight:700; color:var(--paper); background:transparent; }
.hlv button.on{ background:#ffd23f; color:#2a1d08; border-color:#ffd23f; }
.hname{ flex:1; min-width:0; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:var(--paper); font-size:16px; font-family:inherit; }
.hname::placeholder{ color:rgba(246,244,238,.45); }
.hn{ margin-top:14px; font-size:11.5px; opacity:.6; }

/* 진행판 (왼쪽 위, 장소 목록 자리) */
.hhud{ position:absolute; left:calc(12px + env(safe-area-inset-left,0px)); top:calc(68px + env(safe-area-inset-top,0px)); width:250px; background:color-mix(in srgb, var(--deep) 88%, transparent); border:1px solid rgba(255,210,63,.4); border-radius:14px; padding:10px 12px 12px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hh{ display:flex; align-items:center; justify-content:space-between; }
.hcount{ font-size:13px; letter-spacing:.06em; font-weight:700; color:#ffd23f; } .hcount b{ font-size:20px; font-family:var(--serif); }
.hquit{ width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.12); font-size:11px; color:var(--paper); }
.hquit:hover{ background:rgba(255,255,255,.25); }
.hdots{ display:flex; gap:4px; margin:6px 0 8px; }
.hdots i{ flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.18); }
.hdots i.f{ background:#ffd23f; } .hdots i.c{ background:rgba(255,210,63,.45); animation:hpulse 1.2s ease-in-out infinite; }
@keyframes hpulse{ 50%{ background:#ffd23f; } }
.hhint{ font-size:13px; line-height:1.55; color:rgba(246,244,238,.92); }
.hhint b{ display:block; font-size:10.5px; letter-spacing:.1em; color:#ffd23f; margin-bottom:2px; }
.hmeter[hidden]{ display:none; }
.hmeter{ position:relative; margin-top:9px; height:22px; border-radius:11px; background:rgba(255,255,255,.1); overflow:hidden; display:flex; align-items:center; padding:0 9px; font-size:11.5px; font-weight:700; }
.hmeter i{ position:absolute; left:0; top:0; bottom:0; width:4%; background:#5fa8ff; border-radius:11px; transition:width .4s, background .4s; }
.hmeter[data-z="mid"] i{ background:#ffa94d; } .hmeter[data-z="near"] i{ background:#ff6b6b; }
.hmeter span{ position:relative; } .hmeter .hdist{ margin-left:auto; opacity:.8; font-variant-numeric:tabular-nums; }

/* 문제 카드 */
.hcard{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.35); }
.hq{ width:min(620px, 100%); background:#fffdf5; color:#2a1d08; border-radius:18px; padding:20px 22px 18px; box-shadow:0 30px 80px rgba(0,0,0,.5); border:3px solid #ffd23f; }
.hqk{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.htag{ font-size:11px; font-weight:800; letter-spacing:.06em; color:#2a1d08; background:#ffd23f; padding:3px 10px; border-radius:999px; }
.hqno{ font-size:12px; font-weight:700; color:#8a6a1a; }
.hqq{ font-size:18px; font-weight:700; line-height:1.55; text-wrap:balance; }
.hqa{ display:grid; gap:8px; margin-top:14px; }
.hqa button{ display:flex; align-items:center; gap:10px; text-align:left; padding:11px 14px; border-radius:12px; border:2px solid #efe6c8; background:#fff; color:#2a1d08; font-size:15px; line-height:1.45; font-weight:600; transition:border-color .15s, background .15s; }
.hqa button i{ flex:none; font-style:normal; font-size:18px; color:#c99a12; }
.hqa button:hover:not(:disabled){ border-color:#ffd23f; background:#fff8dc; }
.hqa button.ok{ border-color:#3bb54a; background:#e8f8ea; } .hqa button.ok i{ color:#3bb54a; }
.hqa button.no{ border-color:#e57373; background:#fdecec; opacity:.7; } .hqa button.no i{ color:#e57373; }
.hqa button:disabled:not(.ok):not(.no){ opacity:.55; }
.hqf{ margin-top:12px; padding:11px 13px; border-radius:12px; background:#fdecec; font-size:13.5px; line-height:1.6; color:#7a2e2e; }
.hqf b{ display:block; font-size:14.5px; margin-bottom:2px; }
.hqf.good{ background:#e8f8ea; color:#245c2c; }
/* 맞힌 뒤: 왼쪽 그림 + 오른쪽 설명 (pics.js) */
.hqf.haspic{ display:grid; grid-template-columns:250px 1fr; gap:12px; align-items:center; padding:10px; }
.hqp{ border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.hqp svg{ display:block; width:100%; height:auto; }
.hqa.done button:not(.ok){ display:none; }     /* 맞히면 다른 보기는 접고 맞는 보기 + 그림·설명만 크게 */
.hqa.done + .hqf{ margin-top:6px; }
.hqb{ display:flex; justify-content:flex-end; margin-top:12px; }
.hqb .go{ font-size:15px; padding:10px 22px; }
.hconf{ position:absolute; width:10px; height:10px; border-radius:2px; pointer-events:none; z-index:9; animation:hconf 1.2s ease-out forwards; }
@keyframes hconf{ to{ transform:translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity:0; } }

/* ── v3: 난이도 · 모은 글자 · OX · 순서 · 임무 · 낱말 맞추기 ── */
.hlv button small{ display:block; font-size:10px; font-weight:600; opacity:.75; letter-spacing:0; margin-top:1px; }
.hlv button.on small{ opacity:.85; }
.hlet{ display:flex; align-items:center; gap:4px; margin-top:9px; flex-wrap:wrap; }
.hlet span{ font-size:10.5px; letter-spacing:.1em; color:#ffd23f; margin-right:4px; }
.hlet b{ width:24px; height:26px; border-radius:6px; display:grid; place-items:center; font-size:13px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.45); }
.hlet b.on{ background:#ffd23f; color:#2a1d08; border-color:#ffd23f; }
.hhint .hmt{ display:block; font-style:normal; font-weight:700; color:#ffd23f; margin-top:4px; font-variant-numeric:tabular-nums; }
.hclock{ display:inline-flex; align-items:center; gap:6px; margin-left:10px; vertical-align:middle; font-size:13px; font-weight:800; color:#c97a12; }
.hclock i{ display:block; width:60px; height:6px; border-radius:3px; background:#ffd23f; transition:width 1s linear; }
.hqa.ox{ grid-template-columns:1fr 1fr; }
.hqa.ox button{ justify-content:center; flex-direction:column; gap:2px; padding:16px 10px; }
.hqa.ox button i{ font-size:34px; font-weight:900; line-height:1; }
.hqa.ox button[data-v="0"] i{ color:#e57373; }
.hord{ display:grid; gap:8px; } .hordn{ font-size:12px; color:#8a7a50; margin-top:6px; text-align:right; }
.hord button i{ width:26px; height:26px; border-radius:50%; background:#efe6c8; display:grid; place-items:center; font-size:14px; color:#8a6a10; }
.hord button.ok i{ background:#3bb54a; color:#fff; }
.hord button.no{ animation:hshake .4s; }
@keyframes hshake{ 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }
.hgo2{ padding:12px 14px; border-radius:12px; background:#fff8dc; border:2px dashed #ffd23f; font-size:14px; line-height:1.55; color:#5a4310; }
.hgo2 b{ color:#c97a12; margin-right:6px; } .hgo2 span{ display:block; font-size:12.5px; opacity:.85; margin-top:2px; }
.hqletter{ grid-column:1 / -1; margin-top:8px; padding:8px 12px; border-radius:10px; background:#fff; border:1px solid #ffd23f; font-size:13.5px; color:#5a4310; display:flex; align-items:center; gap:8px; }
.hqletter b{ display:grid; place-items:center; width:32px; height:34px; border-radius:8px; background:#ffd23f; color:#2a1d08; font-size:20px; margin:0; }
.hqa.wordq{ display:block; }
.hwout{ display:flex; gap:6px; justify-content:center; margin:4px 0 14px; }
.hwout b{ width:40px; height:46px; border-radius:8px; border:2px dashed #e5d9b0; background:#fffdf3; display:grid; place-items:center; font-size:22px; color:#2a1d08; }
.hwt{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.hwt button{ width:48px; height:52px; justify-content:center; padding:0; font-size:22px; font-weight:800; border-radius:10px; }
.hwt button.ok{ opacity:.25; } .hwt button.no{ animation:hshake .4s; border-color:#e57373; }
.hqb .hwskip{ margin-right:auto; font-size:13px; }

/* 상장 */
.hdone{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; background:color-mix(in srgb, var(--deep) 78%, transparent); overflow:auto; }
.hcert{ width:min(600px, 100%); }
.hcert-in{ background:#fffdf3; color:#2a1d08; padding:8px; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.hcert-in > *{ border-color:#c9a53a; }
.hcert-in{ position:relative; }
.hcert-in::before{ content:''; position:absolute; inset:8px; border:3px double #c9a53a; border-radius:3px; pointer-events:none; }
.hcert-in > *{ position:relative; margin-left:26px; margin-right:26px; }
.hck{ margin-top:28px; text-align:center; font-family:var(--serif); font-size:15px; letter-spacing:.5em; color:#8a6a1a; }
.hct{ text-align:center; font-family:var(--serif); font-size:36px; font-weight:700; margin-top:4px; color:#2a1d08; }
.hcn{ text-align:center; font-size:22px; font-weight:800; margin-top:16px; }
.hcp{ text-align:center; font-size:14.5px; line-height:1.8; margin:12px 0 0; }
.hctags{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px; }
.hctags span{ font-size:11.5px; font-weight:700; color:#8a6a1a; border:1px solid #e3cf8a; padding:3px 9px; border-radius:999px; background:#fff8dc; }
.hcs{ text-align:center; margin-top:14px; font-size:14px; color:#8a6a1a; letter-spacing:.04em; } .hcs b{ font-size:18px; color:#2a1d08; }
.hcf{ display:flex; justify-content:space-between; align-items:baseline; margin-top:22px; margin-bottom:26px; font-size:13px; color:#5a4a2a; }
.hcf b{ font-family:var(--serif); font-size:17px; color:#2a1d08; }

@media (max-width:860px){
  .acts .hunt-b span{ display:none; } .acts .multi-b span{ display:none; }
  .hhud{ width:calc(100% - 24px); padding:8px 11px 10px; }
  .hhint{ font-size:12.5px; }
  .hp{ padding:20px 18px 18px; } .hp h2{ font-size:28px; } .hp p{ font-size:13.5px; }
  .hq{ padding:16px 15px 14px; } .hqq{ font-size:16px; } .hqa button{ font-size:14px; padding:9px 12px; }
  .hqf.haspic{ grid-template-columns:1fr; gap:8px; } .hqp{ max-width:300px; margin:0 auto; }
  .hct{ font-size:28px; } .hcn{ font-size:19px; } .hcp{ font-size:13px; }
}
@media print{
  .bar, .chips, .hint, .poicard, .tourbar, #joy, #jumpBtn, .hhud, .hcard, .hb, canvas, .aiw{ display:none !important; }
  .hunt, .hdone{ position:static; background:none; padding:0; }
  .hcert{ width:100%; } .hcert-in{ box-shadow:none; }
}

/* ══════════ 아바타 고르기 ══════════ */
.ic-av{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='3.5'/%3E%3Cpath d='M5 20.5c0-3.9 3.1-6.5 7-6.5s7 2.6 7 6.5'/%3E%3C/svg%3E"); }
.acts .avb .ic{ color:var(--paper); }
.acts .avb[aria-expanded="true"]{ color:var(--accent2-l); box-shadow:inset 0 -2px 0 var(--accent2); }
.avpick{ position:absolute; right:calc(12px + env(safe-area-inset-right,0px)); top:calc(68px + env(safe-area-inset-top,0px)); z-index:7; background:color-mix(in srgb, var(--deep) 90%, transparent); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:10px 10px 8px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 18px 50px rgba(0,0,0,.4); }
.avpick .avh{ font-size:10.5px; font-weight:700; letter-spacing:.12em; color:var(--accent2-l); padding:0 4px 8px; }
.avl{ display:flex; flex-wrap:wrap; gap:8px; max-width:min(392px, calc(100vw - 48px)); }
.hava{ display:flex; flex-wrap:wrap; gap:8px; }
.avl button span small, .hava button span small{ display:block; font-size:10px; font-weight:600; opacity:.7; letter-spacing:.02em; }
.avl button, .hava button{ display:grid; justify-items:center; gap:4px; width:84px; padding:8px 4px 7px; border-radius:12px; border:2px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--paper); font-size:12px; font-weight:700; transition:border-color .15s, background .15s; }
.avl button img, .hava button img{ width:64px; height:80px; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.avl button:hover, .hava button:hover{ background:rgba(255,255,255,.12); }
/* 처음 들어올 때 아바타 고르기 창 */
.avstart{ position:absolute; inset:0; z-index:8; display:grid; place-items:center; padding:calc(var(--bar-h, 56px) + 12px) 16px 16px; background:color-mix(in srgb, var(--deep) 55%, transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.avstart[hidden]{ display:none; }
body:has(#avstart:not([hidden])) .tut-fab{ display:none; }   /* 고르는 동안 AI 튜터 단추가 카드를 가리지 않게 */
.avs-in{ width:min(660px, 100%); max-height:100%; overflow:auto; overscroll-behavior:contain; padding:20px 20px 16px; border-radius:18px; color:var(--paper);
  background:color-mix(in srgb, var(--deep) 94%, transparent); border:1px solid rgba(255,255,255,.18); box-shadow:0 24px 70px rgba(0,0,0,.5); }
.avs-k{ font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--accent2-l); }
.avs-in h3{ margin:4px 0 4px; font-size:21px; font-weight:800; letter-spacing:-.01em; text-wrap:balance; }
.avs-in p{ margin:0 0 14px; font-size:13px; line-height:1.55; opacity:.75; word-break:keep-all; }
.avstart .avs-l{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; max-width:none; }
.avstart .avs-l button{ width:auto; padding:10px 4px 8px; }
.avstart .avs-l button img{ width:72px; height:92px; }
.avstart .avs-l button:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; }
.avs-f{ display:flex; justify-content:flex-end; margin-top:14px; }
.avs-go{ padding:11px 22px; border:0; border-radius:999px; font:inherit; font-size:14px; font-weight:800; cursor:pointer; color:var(--deep); background:var(--accent2); }
.avs-go:hover{ filter:brightness(1.06); }
@media (max-width:520px){ .avs-in{ padding:16px 14px 12px; } .avs-in h3{ font-size:18px; } .avstart .avs-l{ grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:7px; } .avstart .avs-l button img{ width:56px; height:72px; } .avs-go{ width:100%; } }
@media (orientation:landscape) and (max-height:520px){ .avstart{ padding-top:calc(var(--bar-h, 44px) + 6px); padding-bottom:6px; } .avs-in{ padding:12px 14px 10px; } .avs-in p{ display:none; } .avstart .avs-l{ grid-template-columns:repeat(auto-fill, minmax(70px, 1fr)); gap:6px; } .avstart .avs-l button img{ width:44px; height:56px; } .avs-f{ margin-top:8px; } }
.avl button.on, .hava button.on{ border-color:var(--accent2); background:color-mix(in srgb, var(--accent2) 18%, transparent); }
.hava button{ width:78px; padding:6px 4px 6px; } .hava button img{ width:56px; height:70px; }
@media (max-width:860px){
  .acts .avb span{ display:none; }
  .avpick{ right:8px; left:8px; } .avl{ justify-content:center; }
}

/* ── 앱 안 브라우저(카카오톡 등) 알림 띠 (inapp.js) ── */
.inapp{ position:fixed; left:12px; right:12px; top:calc(64px + env(safe-area-inset-top,0px)); z-index:40; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; background:#fff8dc; color:#2a1d08; font-size:12.5px; line-height:1.4; box-shadow:0 8px 24px rgba(0,0,0,.35); border:1px solid #ffd23f; }
.inapp span{ flex:1; }
.inapp a{ flex:none; background:#2a1d08; color:#ffd23f; font-weight:800; padding:7px 12px; border-radius:999px; text-decoration:none; white-space:nowrap; }
.inapp b{ flex:none; font-size:12px; }
.inapp button{ flex:none; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.1); font-size:11px; color:#2a1d08; }

/* ── 휴대폰 가로 방향: 위아래가 좁으니 글씨 · 단추 · 판을 모두 한 단계 작게 ── */
@media (orientation:landscape) and (max-height:520px){
  .bar{ font-size:12px; } .acts > *{ padding:0 9px; font-size:11.5px; gap:5px; }
  .acts .hunt-b span, .acts .avb span, .acts .home{ display:none; }
  .acts .guide{ padding:0 11px; font-size:12px; }
  .chips .cl{ padding:4px 8px; } .chips button{ padding:2px 8px 2px 2px; font-size:11px; } .chips button i{ width:17px; height:17px; font-size:10px; }
  /* 해설 자막판 */
  .tourbar{ width:min(520px, calc(100% - 250px)); padding:6px 12px 5px; border-top-width:1px; }
  .tourbar .tt{ margin-bottom:2px; gap:8px; } .tourbar .tt b{ font-size:12.5px; } .tourbar .tt span{ font-size:10px; }
  .tourbar .tx{ font-size:12px; line-height:1.5; max-height:54px; overflow:auto; }
  .tourbar .tc{ margin-top:3px; padding-top:3px; } .tourbar .tc button{ padding:1px 8px; font-size:11px; }
  .tourbar .tc button.free{ padding:3px 10px; font-size:11px; } .tourbar .tc button.sound{ padding:3px 10px; font-size:11px; }
  /* 설명 카드 · 아바타 고르기 · 앱 알림 */
  .poicard .pn{ font-size:14px; } .poicard .pd{ font-size:11.5px; } .poicard .pk{ font-size:9px; }
  .avpick, .mpanel{ padding:6px 8px 6px; max-height:calc(100% - var(--bar-h, 44px) - 16px); overflow:auto; touch-action:pan-y; } .mpanel{ top:calc(var(--bar-h, 44px) + 8px); font-size:12px; } .mpanel p{ display:none; } .avpick .avh{ font-size:9.5px; padding-bottom:5px; }
  .avl button{ width:64px; padding:5px 3px 4px; font-size:11px; } .avl button img{ width:44px; height:56px; }
  .inapp{ top:calc(46px + env(safe-area-inset-top,0px)); padding:6px 10px; font-size:11.5px; gap:8px; } .inapp a{ padding:5px 10px; font-size:11.5px; }
  /* 보물찾기 */
  .hhud{ width:200px; padding:6px 9px 8px; top:calc(var(--bar-h, 44px) + 40px); }
  .hcount{ font-size:11px; } .hcount b{ font-size:15px; } .hquit{ width:20px; height:20px; font-size:10px; }
  .hdots{ margin:4px 0 5px; } .hdots i{ height:4px; }
  .hhint{ font-size:11px; line-height:1.4; } .hhint b{ font-size:9px; margin-bottom:1px; }
  .hmeter{ height:18px; margin-top:6px; font-size:10px; }
  .hstart{ padding:calc(var(--bar-h, 44px) + 6px) 8px 8px; align-items:flex-start; overflow:auto; }
  .hp{ padding:10px 16px 10px; border-radius:12px; width:min(620px, 100%); }
  .hp .hk{ font-size:9.5px; } .hp h2{ font-size:20px; margin:2px 0 4px; } .hp h2::before{ width:22px; height:22px; margin:0 6px -4px 0; }
  .hp p{ font-size:11.5px; line-height:1.45; margin:0 0 6px; } .hp p br{ display:none; }
  .hl{ gap:8px; margin-top:4px; } .hl > span{ width:34px; font-size:11px; }
  .hlv button{ padding:4px 10px; font-size:12px; }
  .hava button{ width:56px; padding:3px 2px 3px; font-size:10px; gap:2px; } .hava button img{ width:34px; height:42px; }
  .hname{ padding:5px 10px; font-size:14px; }
  .hunt .hb{ margin-top:8px; gap:6px; } .hunt .go{ font-size:12.5px; padding:7px 14px; box-shadow:0 2px 0 #c99a12; } .hunt .ghost{ font-size:12px; padding:6px 12px; }
  .hn{ margin-top:6px; font-size:10px; }
  .hcard{ padding:calc(var(--bar-h, 44px) + 6px) 8px 8px; align-items:flex-start; }
  .hq{ width:min(680px, 100%); padding:9px 14px 9px; border-radius:12px; border-width:2px; max-height:calc(100% - 4px); overflow:auto; }
  .hqk{ margin-bottom:4px; } .htag{ font-size:9.5px; padding:2px 8px; } .hqno{ font-size:10.5px; }
  .hqq{ font-size:14px; line-height:1.4; }
  .hqa{ gap:5px; margin-top:7px; } .hqa button{ padding:6px 10px; font-size:12.5px; border-radius:9px; gap:7px; } .hqa button i{ font-size:14px; }
  .hqa.ox button{ padding:8px 6px; } .hqa.ox button i{ font-size:24px; } .hwout b{ width:30px; height:34px; font-size:17px; } .hwt button{ width:38px; height:40px; font-size:17px; } .hlet b{ width:20px; height:22px; font-size:11px; } .hlv button small{ display:none; }
  .hqf{ margin-top:7px; padding:7px 10px; font-size:11.5px; line-height:1.45; } .hqf b{ font-size:12px; }
  .hqf.haspic{ grid-template-columns:170px 1fr; gap:9px; padding:7px; }
  .hqb{ margin-top:6px; } .hqb .go{ font-size:12.5px; padding:6px 14px; }
  .hdone{ padding:calc(var(--bar-h, 44px) + 6px) 8px 8px; align-items:flex-start; overflow:auto; }
  .hcert{ width:min(560px, 100%); } .hcert-in > *{ margin-left:18px; margin-right:18px; }
  .hck{ margin-top:14px; font-size:11px; } .hct{ font-size:22px; margin-top:0; } .hcn{ font-size:16px; margin-top:8px; }
  .hcp{ font-size:11.5px; line-height:1.5; margin-top:6px; } .hctags{ margin-top:6px; } .hctags span{ font-size:10px; padding:2px 7px; }
  .hcs{ margin-top:8px; font-size:12px; } .hcs b{ font-size:14px; } .hcf{ margin-top:10px; margin-bottom:12px; font-size:11px; } .hcf b{ font-size:14px; }
  #dbg{ font-size:9px; }
}

/* ══════════ 모험 · 롤플레잉 (adventure.js) ══════════ */
/* ── 모험 디자인 토큰 (Phase 1) ─────────────────────────────────────────────
   학교 색(--deep · --accent2 · --mark)은 그대로 두고, 모험 화면에만 쓰는 값을 --a-* 로 모았다.
   색 · 글자 · 간격(8px 격자) · 모서리 · 그림자 · 움직임을 여기서만 바꾸면 모험 화면 전체가 바뀐다. */
.viewer{
  /* 색 */
  --a-primary:#ffd23f;       --a-primary-hover:#ffe07a;  --a-primary-press:#c99a12;  --a-primary-soft:#fff3c4;   /* 주 강조: 시작 · 계속 단추, 레벨 */
  --a-accent:#9ff0b5;        --a-accent-hover:#c3f7d1;   --a-accent-ink:#10301c;                               /* 둘째 강조: 길 안내 · 링크 · 진행 */
  --a-ink:#2a1d08;           --a-ink-soft:#8a6a1a;       --a-ink-mute:#8a7a50;                                 /* 종이 위 글자 */
  --a-paper:#fffdf5;         --a-paper-line:#efe6c8;                                                           /* 카드 · 대화창 바탕 */
  --a-ok:#3bb54a;  --a-ok-soft:#f1f9f3;  --a-ok-ink:#245c2c;   --a-no:#e57373;  --a-no-soft:#fdecec;             /* 정답 · 오답 */
  --a-nuri:#49ad69;  --a-npc:#3f6fc2;  --a-dust:#6c6f86;  --a-heart:#ff5a7a;                                     /* 말하는 이 · 하트 */
  --a-panel:color-mix(in srgb, var(--deep) 88%, transparent);  --a-panel-solid:color-mix(in srgb, var(--deep) 95%, black);   /* 어두운 판 (학교 색) */
  /* 글자 (H1 시작 제목 · H2 카드·창 제목 · 본문 · 작은 글) */
  --a-fs-h1:clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);    --a-lh-h1:1.15;  --a-fw-h1:700;    /* 28 → 40px */
  --a-fs-h2:clamp(1.25rem, 1.1rem + .5vw, 1.5rem);     --a-lh-h2:1.3;   --a-fw-h2:700;    /* 20 → 24px */
  --a-fs-lead:clamp(1rem, .94rem + .3vw, 1.125rem);    --a-lh-lead:1.6;                   /* 16 → 18px 대화 · 문제 */
  --a-fs-body:.9375rem;  --a-lh-body:1.65;  --a-fw-body:500;                                /* 15px */
  --a-fs-small:.75rem;   --a-lh-small:1.45; --a-fw-small:700;                               /* 12px */
  --a-fs-micro:.6875rem;                                                                    /* 11px 딱지 */
  /* 간격 — 8px 격자 */
  --a-sp-4:4px; --a-sp-8:8px; --a-sp-16:16px; --a-sp-24:24px; --a-sp-32:32px; --a-sp-48:48px; --a-sp-64:64px;
  /* 모서리 */
  --a-r-btn:999px;   /* 단추 · 딱지 */  --a-r-card:16px;  /* 벤토 카드 · 판 */  --a-r-card-lg:20px;  /* 대화창 · 기억 조각 카드 */
  --a-r-item:12px;   /* 보기 · 도감 카드 안 */  --a-r-chip:8px;  /* 사진 · 배지 */
  /* 그림자 */
  --a-shadow-card:0 24px 60px rgba(0,0,0,.45);  --a-shadow-hover:0 16px 32px -16px rgba(0,0,0,.6);
}

.ic-adv{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3'/%3E%3Cpath d='M12 7.2l1.6 3.2 3.2 1.6-3.2 1.6L12 16.8l-1.6-3.2L7.2 12l3.2-1.6Z' fill='%23000'/%3E%3C/svg%3E"); }
.acts .adv-b .ic{ color:var(--a-accent); }
.adventuring .chips{ display:none !important; }
.adv{ position:absolute; inset:0; z-index:6; pointer-events:none; font-family:var(--sans); color:var(--paper); }
.adv > *{ pointer-events:auto; }
.adv .go{ background:var(--a-primary); color:var(--a-ink); font-weight:800; font-size:15px; padding:11px 22px; border-radius:999px; box-shadow:0 4px 0 var(--a-primary-press); transition:transform .1s, box-shadow .1s; }
.adv .go:hover{ background:var(--a-primary-hover); } .adv .go:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--a-primary-press); }
.adv .ghost{ background:rgba(255,255,255,.08); color:var(--paper); border:1px solid rgba(255,255,255,.28); font-weight:700; font-size:14px; padding:10px 18px; border-radius:999px; }
.adv .ghost:hover{ background:rgba(255,255,255,.16); }
.adv .hb{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }
.adv .hcard{ z-index:2; }

/* 시작 화면 */
.astart{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:color-mix(in srgb, var(--deep) 72%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); overflow:auto; }
.ap::before{ background:linear-gradient(90deg,var(--a-nuri),var(--a-accent),var(--a-primary),#b8a6e0,var(--a-nuri)) !important; }
.ap h2::before{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ff0b5'%3E%3Cpath d='M12 2.5l2.4 6.1 6.1 2.4-6.1 2.4L12 19.5l-2.4-6.1L3.5 11l6.1-2.4Z'/%3E%3Ccircle cx='19' cy='19' r='1.6'/%3E%3Ccircle cx='5' cy='18' r='1.1'/%3E%3C/svg%3E") center/contain no-repeat !important; }
.ap p b{ color:var(--a-accent); }
.apv{ display:flex; align-items:center; justify-content:center; gap:10px; margin:-4px 0 6px; }
.apv img{ width:92px; height:92px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.apv .apn{ animation:afloat 2.6s ease-in-out infinite; }
.apv .apd{ animation:afloat 2.1s ease-in-out infinite reverse; }
.apv .apc{ width:70px; height:70px; opacity:.9; }
.apv .apd::after{ content:''; }
.apv .apc{ position:relative; }
@keyframes afloat{ 50%{ transform:translateY(-6px); } }

/* 진행판 */
.ahud{ position:absolute; left:calc(12px + env(safe-area-inset-left,0px)); top:calc(68px + env(safe-area-inset-top,0px)); width:272px; background:color-mix(in srgb, var(--deep) 88%, transparent); border:1px solid color-mix(in srgb, var(--a-accent) 45%, transparent); border-radius:14px; padding:10px 12px 11px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:opacity .2s; display:grid; gap:7px; }
.ahud.dim{ opacity:.35; }
.ah1{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ach{ font-size:13px; font-weight:700; line-height:1.3; } .ach b{ color:var(--a-accent); margin-right:4px; font-family:var(--serif); font-size:15px; }
.alv2{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:2px 8px; }
.alvn{ grid-row:span 2; font-size:12px; font-weight:900; color:var(--a-ink); background:var(--a-primary); border-radius:8px; padding:5px 7px; font-variant-numeric:tabular-nums; }
.alvt{ font-size:12px; font-weight:700; color:#ffe89a; }
.axp{ display:block; height:6px; border-radius:3px; background:rgba(255,255,255,.14); overflow:hidden; }
.axp i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--a-primary),var(--a-accent)); border-radius:3px; transition:width .6s; }
.aobj{ font-size:13.5px; line-height:1.45; font-weight:600; } .aobj b{ color:var(--a-primary); font-variant-numeric:tabular-nums; }
.adir{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; }
.aarr{ flex:none; width:28px; height:28px; border-radius:50%; background:color-mix(in srgb, var(--a-accent) 16%, transparent); border:1px solid color-mix(in srgb, var(--a-accent) 50%, transparent); position:relative; transition:transform .12s linear; }
.aarr::before{ content:''; position:absolute; left:50%; top:4px; margin-left:-6px; border:6px solid transparent; border-bottom:11px solid var(--a-accent); border-top:0; }
.aarr::after{ content:''; position:absolute; left:50%; top:14px; margin-left:-2px; width:4px; height:8px; border-radius:2px; background:var(--a-accent); }
.adist{ flex:1; font-variant-numeric:tabular-nums; opacity:.9; }
.aguide{ background:var(--a-accent); color:var(--a-accent-ink); font-weight:800; font-size:12px; padding:5px 11px; border-radius:999px; }
.aguide:hover{ background:var(--a-accent-hover); }
.abtn{ display:flex; gap:6px; }
.abtn button{ font-size:11.5px; font-weight:700; color:var(--paper); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); padding:4px 10px; border-radius:999px; }
.abtn button b{ color:var(--a-primary); margin-left:2px; font-variant-numeric:tabular-nums; }
.abtn .asnd[aria-pressed="false"]{ opacity:.55; text-decoration:line-through; }

/* 대화창 */
.adlg{ position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:min(780px, calc(100% - 24px)); z-index:3; animation:adlgin .22s ease-out; }
@keyframes adlgin{ from{ opacity:0; transform:translate(-50%, 14px); } }
.adl-in{ position:relative; display:grid; grid-template-columns:104px 1fr; gap:14px; align-items:start; background:var(--a-paper); color:var(--a-ink); border:3px solid var(--a-primary); border-radius:20px; padding:14px 18px 16px 14px; box-shadow:0 24px 60px rgba(0,0,0,.45); cursor:pointer; }
.adf{ width:104px; height:104px; border-radius:18px; object-fit:contain; background:radial-gradient(circle at 50% 40%, #fffbe6, #f2e7bf); box-shadow:inset 0 0 0 2px #f0e0a8; }
.adf.nuri{ background:radial-gradient(circle at 50% 40%, #effff3, #c9efd4); box-shadow:inset 0 0 0 2px #a8e0b8; }
.adf.boss{ background:radial-gradient(circle at 50% 40%, #f4f1ff, #d9d3ee); box-shadow:inset 0 0 0 2px #c4bbe0; }
.adf.npc{ background:radial-gradient(circle at 50% 40%, #eef6ff, #cfe0f5); box-shadow:inset 0 0 0 2px #b3cbe8; }
.adn{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.03em; padding:3px 11px; border-radius:999px; background:var(--a-primary); color:var(--a-ink); margin:2px 0 7px; }
.adn.nuri{ background:var(--a-nuri); color:#fff; } .adn.boss{ background:var(--a-dust); color:#fff; } .adn.npc{ background:var(--a-npc); color:#fff; }
.adx{ font-size:17.5px; line-height:1.62; font-weight:600; min-height:3.2em; word-break:keep-all; }
.adc{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.adc:empty{ display:none; }
.adc button{ font-size:15px; font-weight:800; color:var(--a-ink); background:var(--a-primary-soft); border:2px solid var(--a-primary); padding:8px 16px; border-radius:999px; }
.adc button:hover{ background:var(--a-primary); }
.adm{ position:absolute; right:16px; bottom:8px; font-style:normal; font-size:13px; color:var(--a-primary-press); animation:ablink 1s steps(2) infinite; }
@keyframes ablink{ 50%{ opacity:0; } }

/* 퀴즈 대결 */
.abattle{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:calc(64px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(ellipse at 50% 30%, rgba(40,30,70,.55), rgba(10,12,28,.86)); overflow:auto; }
.abt{ display:flex; align-items:center; gap:16px; width:min(620px, 100%); }
.abb{ flex:none; width:150px; height:150px; animation:afloat 2.2s ease-in-out infinite; }
.abb img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.abb.hit img{ animation:ahit .55s ease-out; }
.abb.laugh img{ animation:alaugh .6s ease-out; }
@keyframes ahit{ 0%{ filter:brightness(3) drop-shadow(0 0 20px #fff6c8); transform:translateX(0) rotate(0); } 20%{ transform:translateX(-10px) rotate(-6deg); } 40%{ transform:translateX(9px) rotate(5deg); } 60%{ transform:translateX(-6px) rotate(-3deg); } 100%{ filter:none; transform:none; } }
@keyframes alaugh{ 30%{ transform:scale(1.14) translateY(-6px); } 60%{ transform:scale(.96); } }
.abinfo{ flex:1; min-width:0; }
.abn{ font-family:var(--serif); font-size:24px; font-weight:700; }
.abhp{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:6px; }
.abhp span{ font-size:11px; font-weight:800; letter-spacing:.08em; color:#c9c3e6; margin-right:4px; }
.abhp i{ width:26px; height:14px; border-radius:7px; border:2px solid rgba(201,195,230,.6); background:transparent; transition:background .3s, transform .3s; }
.abhp i.on{ background:linear-gradient(180deg,#b3aed0,var(--a-dust)); border-color:#d9d3ee; }
.abline{ margin-top:8px; font-size:14px; font-weight:700; color:var(--a-primary-soft); min-height:1.4em; }
.abq{ width:min(620px, 100%); }
.abme{ display:flex; align-items:center; gap:12px; width:min(620px, 100%); }
.abmi{ width:56px; height:64px; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.abmn{ font-size:13px; font-weight:800; }
.abh{ display:flex; gap:4px; margin-top:2px; }
.abh i{ font-style:normal; font-size:22px; line-height:1; color:rgba(255,255,255,.2); transition:color .3s, transform .3s; }
.abh i.on{ color:var(--a-heart); text-shadow:0 0 10px rgba(255,90,122,.5); }
.ashot{ position:absolute; z-index:4; font-style:normal; font-size:26px; color:#fff3a8; text-shadow:0 0 12px var(--a-primary), 0 0 24px #fff; pointer-events:none; animation:ashot .7s cubic-bezier(.4,.1,.5,1) forwards; }
@keyframes ashot{ 0%{ transform:translate(0,0) scale(.6); opacity:0; } 15%{ opacity:1; } 90%{ opacity:1; } 100%{ transform:translate(var(--tx), var(--ty)) scale(1.3) rotate(180deg); opacity:0; } }
.adust{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 30% 40%, rgba(150,150,170,.85) 0 12%, transparent 30%), radial-gradient(circle at 70% 55%, rgba(140,140,160,.8) 0 14%, transparent 34%), radial-gradient(circle at 50% 75%, rgba(160,160,180,.75) 0 10%, transparent 30%), radial-gradient(circle at 55% 25%, rgba(130,130,150,.7) 0 9%, transparent 26%); }
.adust.on{ animation:adust 1.1s ease-out; }
@keyframes adust{ 0%{ opacity:0; transform:scale(.8); } 25%{ opacity:1; } 100%{ opacity:0; transform:scale(1.25); } }
.hqf.bad{ background:var(--a-no-soft); color:#7a2e2e; }

/* 기억 조각 카드 */
.amem{ position:absolute; inset:0; z-index:7; display:flex; align-items:center; justify-content:center; padding:16px; background:color-mix(in srgb, var(--deep) 70%, transparent); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); overflow:auto; }
.amc{ position:relative; width:min(440px, 100%); background:var(--a-paper); color:var(--a-ink); border-radius:20px; padding:16px 18px 18px; border:3px solid var(--a-primary); box-shadow:0 0 0 6px color-mix(in srgb, var(--a-primary) 18%, transparent), 0 30px 80px rgba(0,0,0,.5); animation:amemin .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes amemin{ from{ transform:scale(.82) rotate(-3deg); } }
.amk{ font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--a-ink-soft); } .amk b{ color:var(--a-ink); margin-left:4px; font-variant-numeric:tabular-nums; }
.ami{ margin-top:8px; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background:#eee; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.ami img{ width:100%; height:100%; object-fit:cover; display:block; }
.ami.logo{ background:#fff; } .ami.logo img{ object-fit:contain; padding:14px; box-sizing:border-box; }
.amt{ font-family:var(--serif); font-size:22px; line-height:1.3; margin:12px 0 4px; text-wrap:balance; }
.amx{ font-size:14.5px; line-height:1.7; margin:0; }
.ams{ font-size:11px; color:var(--a-ink-mute); margin-top:6px; }
.amxp{ display:grid; gap:4px; margin-top:10px; }
.amxp:empty{ display:none; }
.amxp div{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; padding:5px 10px; border-radius:8px; background:var(--a-ok-soft); color:var(--a-ok-ink); }
.amxp b{ font-variant-numeric:tabular-nums; }
.amc .hb{ justify-content:flex-end; margin-top:12px; }

/* 기억 도감 */
.alb{ position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; padding:16px; background:color-mix(in srgb, var(--deep) 72%, transparent); overflow:auto; }
.alb-in{ width:min(640px, 100%); background:color-mix(in srgb, var(--deep) 95%, black); border:1px solid color-mix(in srgb, var(--a-accent) 45%, transparent); border-radius:18px; padding:14px 16px 16px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.alb-h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; } .alb-h b{ font-family:var(--serif); font-size:20px; } .alb-h span{ flex:1; color:var(--a-accent); font-weight:800; font-variant-numeric:tabular-nums; }
.alb-g{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.alb-g button{ display:grid; gap:6px; text-align:left; padding:6px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--paper); }
.alb-g button img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:8px; background:#fff; }
.alb-g button img.logo{ object-fit:contain; padding:6px; box-sizing:border-box; }
.alb-g button i{ display:grid; place-items:center; aspect-ratio:16/10; border-radius:8px; background:rgba(255,255,255,.06); font-style:normal; font-size:28px; font-weight:900; color:rgba(255,255,255,.3); border:2px dashed rgba(255,255,255,.18); }
.alb-g button span{ font-size:12.5px; font-weight:700; line-height:1.35; } .alb-g button span small{ display:block; font-size:10px; color:var(--a-accent); letter-spacing:.06em; }
.alb-g button.got:hover{ border-color:var(--a-primary); }
.alb-g button:disabled > *{ opacity:.6; }

/* 레벨 업 */
.alvup{ position:absolute; left:50%; top:22%; z-index:8; transform:translateX(-50%); pointer-events:none !important; }
.alvup > div{ display:grid; justify-items:center; gap:2px; padding:14px 28px; border-radius:18px; background:linear-gradient(180deg,#fff6c8,var(--a-primary)); color:var(--a-ink); box-shadow:0 0 0 4px rgba(255,255,255,.4), 0 20px 50px rgba(0,0,0,.4); }
.alvup b{ font-family:var(--serif); font-size:30px; } .alvup span{ font-size:14px; font-weight:800; }
.alvup.on > div{ animation:alvl 2.6s ease-out forwards; }
@keyframes alvl{ 0%{ transform:scale(.6); } 12%{ transform:scale(1.12); } 20%{ transform:scale(1); } 85%{ opacity:1; } 100%{ opacity:0; transform:translateY(-20px); } }
.aend{ z-index:5; }

/* ── 토큰 적용 (Phase 1): 글자 · 간격 · 모서리 — 모든 화면 공통 ── */
.adv .go{ font-size:var(--a-fs-body); padding:12px var(--a-sp-24); border-radius:var(--a-r-btn); }
.adv .ghost{ font-size:.875rem; padding:11px var(--a-sp-16); border-radius:var(--a-r-btn); }
.adv .hb{ gap:var(--a-sp-8) var(--a-sp-16); margin-top:var(--a-sp-24); }
.astart{ padding:var(--a-sp-24); }
.adv .ap{ border-radius:var(--a-r-card-lg); padding:var(--a-sp-24) var(--a-sp-32); }
.adv .ap h2{ font-size:var(--a-fs-h1); line-height:var(--a-lh-h1); font-weight:var(--a-fw-h1); margin:var(--a-sp-8) 0 var(--a-sp-16); }
.adv .ap p{ font-size:var(--a-fs-body); line-height:var(--a-lh-body); margin:0 0 var(--a-sp-16); }
.adv .ap .hk{ font-size:var(--a-fs-micro); margin:calc(-1 * var(--a-sp-8)) calc(-1 * var(--a-sp-32)) var(--a-sp-8); padding:var(--a-sp-8) var(--a-sp-32); }   /* 머리글은 카드 가장자리까지 */
.adv .ap .hn{ font-size:var(--a-fs-small); font-weight:500; margin-top:var(--a-sp-16); }
.adv .ap .hl{ gap:var(--a-sp-16); margin-top:var(--a-sp-8); }
.ahud{ width:288px; padding:var(--a-sp-16); gap:var(--a-sp-8); border-radius:var(--a-r-card); background:var(--a-panel); }
.alvn{ border-radius:var(--a-r-chip); }
.aobj{ font-size:.875rem; } .adist, .alvt{ font-size:var(--a-fs-small); }
.adl-in{ border-radius:var(--a-r-card-lg); gap:var(--a-sp-16); padding:var(--a-sp-16) var(--a-sp-24) var(--a-sp-16) var(--a-sp-16); }
.adf{ border-radius:var(--a-r-card); } .adn{ font-size:var(--a-fs-small); }
.adx{ font-size:var(--a-fs-lead); line-height:var(--a-lh-lead); }
.adv .hq{ border-radius:var(--a-r-card-lg); padding:var(--a-sp-24); }
.adv .hqq{ font-size:var(--a-fs-lead); }
.adv .hqa{ gap:var(--a-sp-8); margin-top:var(--a-sp-16); }
.adv .hqa > button, .adv .hord button{ border-radius:var(--a-r-item); padding:12px var(--a-sp-16); font-size:var(--a-fs-body); }
.adv .hqf{ border-radius:var(--a-r-item); }
.abattle{ gap:var(--a-sp-16); }
.abn{ font-size:var(--a-fs-h2); line-height:var(--a-lh-h2); }
.amem{ padding:var(--a-sp-24); }
.amc{ border-radius:var(--a-r-card-lg); padding:var(--a-sp-16) var(--a-sp-24) var(--a-sp-24); }
.ami{ border-radius:var(--a-r-item); }
.amt{ font-size:var(--a-fs-h2); line-height:var(--a-lh-h2); margin:var(--a-sp-16) 0 var(--a-sp-4); }
.amx{ font-size:var(--a-fs-body); line-height:var(--a-lh-body); } .ams{ font-size:var(--a-fs-micro); }
.amxp{ gap:var(--a-sp-4); margin-top:var(--a-sp-16); } .amxp div{ border-radius:var(--a-r-chip); font-size:var(--a-fs-small); padding:var(--a-sp-4) var(--a-sp-8); }
.alb{ padding:var(--a-sp-24); }
.alb-in{ border-radius:var(--a-r-card-lg); padding:var(--a-sp-16) var(--a-sp-24) var(--a-sp-24); background:var(--a-panel-solid); }
.alb-h b{ font-size:var(--a-fs-h2); }
.alb-g{ gap:var(--a-sp-16); }
.alb-g button{ border-radius:var(--a-r-card); padding:var(--a-sp-8); gap:var(--a-sp-8); align-content:start; }
.alb-g button img, .alb-g button i{ border-radius:var(--a-r-chip); }
.alb-g button span{ font-size:.8125rem; }

/* ── 반응형 (Phase 2) — 휴대폰 <768 · 태블릿 768~1023 · 데스크톱 1024+ ── */
/* 데스크톱: 시작 화면 2열(왼쪽 글 · 오른쪽 캐릭터 무대) · 대결 2열 · 기억 조각 2열 · 도감 4열 벤토 */
@media (min-width:1024px){
  .adv .ap{ width:min(920px, 100%); display:grid; grid-template-columns:minmax(0, 1fr) 340px; column-gap:var(--a-sp-32); align-items:start; }
  .adv .ap > *{ grid-column:1; }
  .adv .ap .apv{ grid-column:2; grid-row:1 / span 9; align-self:stretch; min-height:360px; margin:0; display:block; position:relative; border-radius:var(--a-r-card);
    background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--a-accent) 24%, transparent), transparent 62%), color-mix(in srgb, var(--deep) 72%, black);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--a-accent) 28%, transparent); overflow:hidden; }
  .adv .ap .apv .apl{ position:absolute; }
  .adv .ap .apv .apl:nth-child(1){ left:50%; top:12%; margin-left:-80px; } .adv .ap .apv .apl:nth-child(1) img{ width:160px; height:160px; }
  .adv .ap .apv .apl:nth-child(2){ left:10%; bottom:14%; } .adv .ap .apv .apl:nth-child(2) img{ width:128px; height:128px; }
  .adv .ap .apv .apl:nth-child(3){ right:10%; bottom:18%; } .adv .ap .apv .apl:nth-child(3) img{ width:96px; height:96px; }
  .adv .ap .apv::before{ bottom:12%; left:10%; right:10%; height:20px; }
  .abattle{ display:grid; grid-template-columns:320px minmax(0, 640px); grid-template-rows:1fr auto; grid-template-areas:"boss q" "me q"; justify-content:center; align-content:center; align-items:center; column-gap:var(--a-sp-32); row-gap:var(--a-sp-16); }
  .abt{ grid-area:boss; width:auto; flex-direction:column; align-items:center; text-align:center; gap:var(--a-sp-16); }
  .abb{ width:200px; height:200px; } .abhp{ justify-content:center; }
  .abq{ grid-area:q; width:auto; } .abme{ grid-area:me; width:auto; justify-content:center; align-self:start; }
  .amc{ width:min(780px, 100%); display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas:"kick kick" "img title" "img text" "img src" "img xp" "btn btn"; column-gap:var(--a-sp-24); align-content:start; }
  .amk{ grid-area:kick; } .ami{ grid-area:img; align-self:start; aspect-ratio:4/3; margin-top:var(--a-sp-8); } .amt{ grid-area:title; } .amx{ grid-area:text; } .ams{ grid-area:src; } .amxp{ grid-area:xp; } .amc .hb{ grid-area:btn; }
  .alb-in{ width:min(880px, 100%); }
  .alb-g{ grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-flow:dense; }   /* 6장 = 크게 1장(2×2) + 5장 → 3×3 이 꼭 맞는다 */
  .alb-g button.feat{ grid-column:span 2; grid-row:span 2; grid-template-rows:minmax(0, 1fr) auto; align-content:stretch; }
  .alb-g button.feat img{ aspect-ratio:auto; height:0; min-height:100%; } .alb-g button.feat span{ font-size:1rem; }
  .adlg{ width:min(780px, calc(100% - 48px)); }
}
/* 태블릿: 한 줄로 쌓기 — 제목 → 캐릭터 → 설명 → 고르기 → 단추. 도감 2열(최근 조각은 2칸) · 대결은 위아래 */
@media (min-width:768px) and (max-width:1023.98px){
  .adv .ap{ width:min(640px, 100%); display:flex; flex-direction:column; }
  .adv .ap .hk{ order:1; } .adv .ap h2{ order:2; } .adv .ap .apv{ order:3; margin:0 0 var(--a-sp-16); }
  .adv .ap p{ order:4; } .adv .ap .hl{ order:5; } .adv .ap .hb{ order:6; } .adv .ap .hn{ order:7; }
  .apv img{ width:112px; height:112px; } .apv .apc{ width:84px; height:84px; }
  .ahud{ width:320px; } .adlg{ width:min(720px, calc(100% - 48px)); }
  .aguide{ padding:8px var(--a-sp-16); }
  .abattle{ justify-content:flex-start; } .abt, .abq, .abme{ width:min(640px, 100%); } .abb{ width:132px; height:132px; }
  .amc{ width:min(560px, 100%); }
  .alb-in{ width:min(680px, 100%); } .alb-g{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .alb-g button.feat, .alb-g[data-go="1"] .lastg{ grid-column:span 2; } .alb-g button.feat img, .alb-g[data-go="1"] .lastg img{ aspect-ratio:16/7; }
  .alb-g button:disabled{ grid-template-columns:48px minmax(0, 1fr); align-items:center; } .alb-g button:disabled i{ font-size:20px; aspect-ratio:1; }   /* 못 찾은 조각은 작게 */
  .alb-g[data-lo="1"] .lastl{ grid-column:span 2; }
}
/* 휴대폰: 한 줄 · 단추는 가로 가득 · 도감은 1열 목록(사진 왼쪽 · 글 오른쪽, 최근 조각만 크게) */
@media (max-width:767.98px){
  .acts .adv-b span{ display:none; }
  .astart, .amem, .alb{ padding:var(--a-sp-16); }
  .adv .ap{ display:flex; flex-direction:column; padding:var(--a-sp-16) var(--a-sp-16) var(--a-sp-24); }
  .adv .ap .hk{ order:1; margin-inline:calc(-1 * var(--a-sp-16)); padding-inline:var(--a-sp-16); } .adv .ap h2{ order:2; } .adv .ap .apv{ order:3; margin:0 0 var(--a-sp-8); }
  .adv .ap p{ order:4; } .adv .ap .hl{ order:5; } .adv .ap .hb{ order:6; flex-direction:column; align-items:stretch; } .adv .ap .hn{ order:7; }
  .adv .ap .hb .alink{ align-self:center; }
  .apv img{ width:72px; height:72px; } .apv .apc{ width:56px; height:56px; }
  .ahud{ width:calc(100% - 24px); padding:var(--a-sp-8) var(--a-sp-16) var(--a-sp-16); gap:var(--a-sp-4) var(--a-sp-8); grid-template-columns:1fr auto; }
  .ahud .ah1, .ahud .aobj{ grid-column:1 / -1; } .ahud .alv2{ grid-column:1; } .ahud .abtn{ grid-column:2; grid-row:2; align-self:center; } .ahud .adir{ grid-column:1 / -1; }
  .aobj{ font-size:.8125rem; }
  .adl-in{ grid-template-columns:72px 1fr; gap:var(--a-sp-8); padding:var(--a-sp-8) var(--a-sp-16) var(--a-sp-16) var(--a-sp-8); border-radius:var(--a-r-card); } .adf{ width:72px; height:72px; border-radius:var(--a-r-item); }
  .adx{ font-size:var(--a-fs-body); line-height:1.55; min-height:3.1em; } .adn{ font-size:var(--a-fs-micro); margin-bottom:var(--a-sp-4); }
  .adc button{ font-size:.875rem; padding:8px var(--a-sp-16); }
  .adv .hq{ padding:var(--a-sp-16); } .adv .hqq{ font-size:var(--a-fs-body); } .adv .hqa > button, .adv .hord button{ font-size:.875rem; padding:10px 12px; }
  .abattle{ gap:var(--a-sp-8); padding-top:calc(56px + env(safe-area-inset-top,0px)); justify-content:flex-start; }
  .abb{ width:104px; height:104px; } .abline{ font-size:.8125rem; } .abhp i{ width:20px; height:12px; }
  .amc{ padding:var(--a-sp-16); } .amc .hb .go{ width:100%; }
  .alb-g{ grid-template-columns:1fr; gap:var(--a-sp-8); }
  .alb-g button{ grid-template-columns:104px minmax(0, 1fr); align-items:center; }
  .alb-g button img, .alb-g button i{ aspect-ratio:4/3; }
  .alb-g button.feat{ grid-template-columns:1fr; } .alb-g button.feat img{ aspect-ratio:16/9; } .alb-g button.feat span{ font-size:.9375rem; }
  .alb-g button:disabled{ grid-template-columns:56px minmax(0, 1fr); } .alb-g button:disabled i{ font-size:20px; aspect-ratio:1; }
}

@media (orientation:landscape) and (max-height:520px){
  .acts .adv-b span{ display:none; }
  .ahud{ width:220px; padding:6px 9px 7px; gap:4px; top:calc(var(--bar-h, 44px) + 40px); grid-template-columns:1fr; }
  .ahud .abtn{ grid-column:auto; grid-row:auto; }
  .ach{ font-size:11.5px; } .ach b{ font-size:13px; } .alvn{ font-size:10px; padding:3px 5px; } .alvt{ font-size:10.5px; } .aobj{ font-size:11px; }
  .aarr{ width:22px; height:22px; } .aarr::before{ top:3px; border-width:0 5px 9px; margin-left:-5px; } .aarr::after{ top:11px; height:6px; }
  .adir{ font-size:10.5px; } .aguide{ font-size:10.5px; padding:3px 9px; } .abtn button{ font-size:10px; padding:2px 8px; }
  .adlg{ bottom:calc(8px + env(safe-area-inset-bottom,0px)); width:min(700px, calc(100% - 220px)); }
  .adl-in{ grid-template-columns:58px 1fr; gap:9px; padding:7px 10px 10px 7px; border-width:2px; } .adf{ width:58px; height:58px; }
  .adx{ font-size:13px; line-height:1.45; min-height:2.9em; } .adn{ font-size:10px; padding:2px 8px; margin:0 0 3px; }
  .abattle{ flex-direction:row; flex-wrap:wrap; align-content:flex-start; justify-content:center; gap:6px 12px; padding:calc(var(--bar-h, 44px) + 6px) 10px 8px; }
  .abt{ width:auto; flex:0 0 190px; flex-direction:column; align-items:center; text-align:center; gap:4px; }
  .abb{ width:84px; height:84px; } .abn{ font-size:15px; } .abhp{ justify-content:center; } .abhp span{ display:none; } .abline{ font-size:11px; margin-top:3px; }
  .abq{ flex:1 1 420px; max-width:640px; padding:9px 14px 9px; max-height:calc(100vh - var(--bar-h, 44px) - 20px); overflow:auto; }
  .abme{ position:absolute; left:14px; bottom:10px; width:auto; } .abmi{ width:34px; height:40px; } .abmn{ font-size:10.5px; } .abh i{ font-size:15px; }
  .amem, .alb, .astart{ padding:calc(var(--bar-h, 44px) + 6px) 8px 8px; align-items:flex-start; }
  .amc{ width:min(560px, 100%); display:grid; grid-template-columns:200px 1fr; gap:4px 14px; padding:10px 14px 12px; } .amk{ grid-column:1 / -1; } .ami{ grid-row:span 4; margin-top:4px; }
  .amt{ font-size:16px; margin:2px 0 2px; } .amx{ font-size:12px; line-height:1.5; } .amxp div{ font-size:11px; padding:3px 8px; } .amc .hb{ grid-column:1 / -1; margin-top:6px; }
  .alb-g{ grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; } .alb-g button span{ font-size:10.5px; }
  .apv{ display:none; }
}
@media print{ .ahud, .adlg, .abattle, .amem, .alb, .adv .hb{ display:none !important; } .adv, .aend{ position:static; background:none; padding:0; } }

/* ══════════ 모험 · 움직임 (Phase 3: 마이크로 인터랙션 · 등장 · 패럴랙스 · 상단 바) ══════════
   토큰: 등장 400ms · 호버 180ms · 누름 110ms · 이징 cubic-bezier(.22,1,.36,1) · 떠오르는 거리 16px · 순서 간격 60ms
   transform · opacity 만 움직인다 (3D 화면과 함께 돌아도 가볍게) */
.adv{ --a-ease:cubic-bezier(.22,1,.36,1); --a-reveal:400ms; --a-hover:180ms; --a-press:110ms; --a-dist:16px; --a-stagger:60ms; }

/* 1) 등장: 화면·스크롤 상자에 들어오면 아래에서 떠오르며 */
.adv [data-rv]{ opacity:0; transform:translateY(var(--a-dist)); transition:opacity var(--a-reveal) var(--a-ease) calc(var(--i,0) * var(--a-stagger)), transform var(--a-reveal) var(--a-ease) calc(var(--i,0) * var(--a-stagger)); }
.adv [data-rv].rv-in{ opacity:1; transform:none; }
.adv .abt[data-rv]{ transform:translateY(calc(var(--a-dist) * -1)); }          /* 먼지깨비는 위에서 내려오고 */
.adv .abt[data-rv].rv-in{ transform:none; }
.adv .abme[data-rv]{ transform:translateX(calc(var(--a-dist) * -1.5)); }       /* 나는 왼쪽에서 */
.adv .abme[data-rv].rv-in{ transform:none; }
.aflip{ animation:aflip .38s var(--a-ease); }
@keyframes aflip{ from{ transform:translateY(8px); opacity:.2; } }
/* 문제 카드: 카드가 살짝 커지며 · 보기는 45ms 씩 차례로 */
.adv .acard .hq{ animation:acardin .32s var(--a-ease); }
@keyframes acardin{ from{ transform:translateY(12px) scale(.96); } }
.adv .hqa > button, .adv .hord{ animation:arise .34s var(--a-ease) both; animation-delay:calc(var(--i,0) * 45ms); }
@keyframes arise{ from{ opacity:0; transform:translateY(8px); } }
.adv .hqf:not([hidden]){ animation:arise .3s var(--a-ease); }

/* 2) 단추 호버 · 누름 */
.adv .go{ position:relative; overflow:hidden; isolation:isolate; transition:transform var(--a-hover) var(--a-ease), box-shadow var(--a-hover) var(--a-ease), background-color var(--a-hover) var(--a-ease); }
.adv .go::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); transform:translateX(-120%); transition:transform .6s var(--a-ease); pointer-events:none; }
.adv .go:focus-visible{ outline:3px solid var(--a-accent); outline-offset:3px; }
.adv .ghost{ transition:background-color var(--a-hover) var(--a-ease), border-color var(--a-hover) var(--a-ease), color var(--a-hover), transform var(--a-hover) var(--a-ease); }
.adv .hqa > button, .adv .hord button{ transition:transform var(--a-hover) var(--a-ease), border-color .15s, background-color .15s, box-shadow var(--a-hover) var(--a-ease); }
.adv .hqa > button i{ transition:transform var(--a-hover) var(--a-ease); }
.adv .adc button, .adv .aguide, .alb-g button, .adv .hquit{ transition:transform var(--a-hover) var(--a-ease), background-color var(--a-hover), box-shadow var(--a-hover) var(--a-ease), border-color var(--a-hover); }
.alb-g button img{ transition:transform .5s var(--a-ease); }
@media (hover:hover){
  .adv .go:hover{ background:var(--a-primary-hover); transform:translateY(-2px) scale(1.02); box-shadow:0 6px 0 var(--a-primary-press), 0 12px 24px color-mix(in srgb, var(--a-primary) 32%, transparent); }
  .adv .go:hover::after{ transform:translateX(120%); }
  .adv .ghost:hover{ background:color-mix(in srgb, var(--a-accent) 14%, transparent); border-color:var(--a-accent); color:#fff; transform:translateY(-1px); }
  .adv .hqa > button:hover:not(:disabled), .adv .hord button:hover:not(:disabled){ transform:translateX(4px); box-shadow:0 6px 14px -8px rgba(90,60,0,.35); }
  .adv .hqa > button:hover:not(:disabled) i{ transform:scale(1.18); }
  .adv .hqa.ox > button:hover:not(:disabled){ transform:translateY(-3px); }
  .adv .adc button:hover{ transform:translateY(-2px); box-shadow:0 6px 14px -6px rgba(201,154,18,.6); }
  .adv .aguide:hover{ transform:translateY(-1px) scale(1.05); box-shadow:0 0 0 4px color-mix(in srgb, var(--a-accent) 18%, transparent); }
  .adv .hquit:hover{ transform:rotate(90deg); }
  .alb-g button.got:hover{ transform:translateY(-4px); box-shadow:0 16px 28px -14px rgba(0,0,0,.6); }
  .alb-g button.got:hover img{ transform:scale(1.06); }
  .adl-in:hover .adm{ transform:translateY(2px); }
}
.adv .go:active{ transform:translateY(3px) scale(.99); box-shadow:0 1px 0 var(--a-primary-press); transition-duration:var(--a-press); }
.adv .ghost:active, .adv .adc button:active, .adv .hqa > button:active:not(:disabled){ transform:scale(.97); transition-duration:var(--a-press); }
/* 글 링크: 밑줄이 왼쪽에서 오른쪽으로 그어진다 */
.adv button.alink{ padding:3px 1px; border:0; border-radius:0; background:none; color:inherit; font-weight:700; font-size:13px; opacity:.85;
  background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px;
  transition:background-size .28s var(--a-ease), color var(--a-hover), opacity var(--a-hover); }
.adv button.alink:hover, .adv button.alink:focus-visible{ background-size:100% 1.5px; color:var(--a-accent); opacity:1; outline:none; }
.adv .abtn button.alink{ font-size:11.5px; padding:2px 0; margin-right:10px; }
.adv .abtn button.alink b{ color:var(--a-primary); }
.adv .abtn button.alink[aria-pressed="false"]{ text-decoration:line-through; opacity:.55; }
.adm{ transition:transform .2s; }

/* 3) 시작 화면 캐릭터: 마우스를 따라 3겹 패럴랙스 (가까운 먼지깨비가 더 많이 움직임) */
.apv{ --mx:0; --my:0; position:relative; perspective:700px; }
.apv::before{ content:''; position:absolute; left:18%; right:18%; bottom:4px; height:14px; border-radius:50%; background:radial-gradient(ellipse, rgba(0,0,0,.32), transparent 70%);
  transform:translateX(calc(var(--mx) * -6px)); transition:transform .5s var(--a-ease); }
.apl{ display:inline-block; transform:translate3d(calc(var(--mx) * var(--d, 10) * 1px), calc(var(--my) * var(--d, 10) * .7px), 0) rotateY(calc(var(--mx) * var(--r, 6) * 1deg)) rotateX(calc(var(--my) * var(--r, 6) * -1deg));
  transition:transform .6s var(--a-ease); will-change:transform; }
.apv.live .apl, .apv.live::before{ transition-duration:.14s; }
/* 기억 조각 카드: 마우스 쪽으로 살짝 기울고, 사진은 반대로 · 빛 반사 */
.amc{ --mx:0; --my:0; transform:perspective(900px) rotateX(calc(var(--my) * -5deg)) rotateY(calc(var(--mx) * 6deg)); transition:transform .5s var(--a-ease); }
.amc.live{ transition-duration:.12s; }
.ami{ position:relative; }
.ami img{ transform:scale(1.08) translate(calc(var(--mx) * -8px), calc(var(--my) * -6px)); transition:transform .5s var(--a-ease); }
.amc.live .ami img{ transition-duration:.12s; }
.ami.logo img{ transform:none; }
.aglare{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(circle at calc(50% + var(--mx) * 45%) calc(50% + var(--my) * 45%), rgba(255,255,255,.42), transparent 58%); mix-blend-mode:soft-light; }
.amc.live .aglare{ opacity:1; }

/* 4) 머리글: 스크롤 상자 안에서 위에 붙고(sticky), 내려가면 불투명 + 그림자 */
.adv .ap{ overflow:clip; }
.adv .ap .hk{ position:sticky; z-index:3; transition:background-color .25s var(--a-ease), box-shadow .25s var(--a-ease); }
.astart.scrolled .ap .hk{ background:color-mix(in srgb, var(--deep) 96%, black); box-shadow:0 10px 18px -12px rgba(0,0,0,.7); }
.alb-h{ position:sticky; top:0; z-index:3; margin:calc(-1 * var(--a-sp-16)) calc(-1 * var(--a-sp-24)) var(--a-sp-16); padding:var(--a-sp-16) var(--a-sp-24) var(--a-sp-8); border-radius:var(--a-r-card-lg) var(--a-r-card-lg) 0 0; transition:background-color .25s var(--a-ease), box-shadow .25s var(--a-ease); }
.alb.scrolled .alb-h{ background:color-mix(in srgb, var(--deep) 97%, black); box-shadow:0 10px 18px -12px rgba(0,0,0,.7); }
@media (max-width:767.98px), (orientation:landscape) and (max-height:520px){
  .aend .hb{ position:sticky; bottom:0; z-index:3; padding:12px 4px 14px; background:linear-gradient(transparent, color-mix(in srgb, var(--deep) 92%, transparent) 30%); }
}
/* 5) 상단 바: 모험 중 걷는 동안 반투명 (3D 가 더 보이게) · 마우스를 올리거나 단추에 초점이 가면 바로 원래대로 */
.adventuring .bar{ transition:background-color .45s var(--a-ease), box-shadow .45s var(--a-ease), -webkit-backdrop-filter .45s, backdrop-filter .45s; }
.adventuring .bar .acts > *, .adventuring .bar .ttl, .adventuring .bar .back{ transition:opacity .45s var(--a-ease); }
.adventuring.amove .bar{ background:color-mix(in srgb, var(--deep) 38%, transparent); box-shadow:none; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.adventuring.amove .bar .acts > *:not(.on), .adventuring.amove .bar .back{ opacity:.6; }
.adventuring.amove .bar:hover, .adventuring.amove .bar:focus-within{ background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.adventuring.amove .bar:hover .acts > *, .adventuring.amove .bar:focus-within .acts > *, .adventuring.amove .bar:hover .back{ opacity:1; }

/* 움직임 줄이기 */
@media (prefers-reduced-motion:reduce){
  .adv [data-rv]{ opacity:1 !important; transform:none !important; }
  .apl, .amc, .ami img, .apv::before{ transform:none !important; }
  .adv .go::after, .aglare{ display:none; }
  .adv .hqa > button, .adv .hord, .adv .acard .hq, .aflip{ animation:none !important; }
}

/* 모험 창들은 상단 바 아래에서 시작 (스크롤해도 머리글이 바 밑에 붙게) · 내용이 길면 위에서부터 (가운데 정렬로 위가 잘리지 않게) */
.astart, .amem, .alb, .adv .aend{ top:var(--bar-h, 56px); align-items:flex-start; justify-content:flex-start; }
.astart > .hp, .amem > .amc, .alb > .alb-in, .adv .aend > .hcert{ margin:auto; }
@media (orientation:landscape) and (max-height:520px){ .amem, .alb, .astart, .adv .aend{ padding:6px 8px 8px; } }
/* sticky 머리글은 스크롤 상자의 안쪽 여백만큼 위로 붙인다 (그 여백 사이로 글이 비치지 않게) */
.adv .ap .hk{ top:calc(-1 * var(--a-sp-24)); } .alb-h{ top:calc(-1 * var(--a-sp-24)); }
@media (max-width:767.98px){ .adv .ap .hk, .alb-h{ top:calc(-1 * var(--a-sp-16)); } }
@media (orientation:landscape) and (max-height:520px){ .adv .ap .hk{ top:-6px; } .alb-h{ top:-6px; } }
/* 가로 휴대폰(높이 520px 이하): 규칙은 그대로 두고 토큰 값만 촘촘하게 — 글자 · 간격이 한꺼번에 줄어든다 */
@media (orientation:landscape) and (max-height:520px){
  .viewer{ --a-fs-h1:1.25rem; --a-lh-h1:1.2; --a-fs-h2:1rem; --a-fs-lead:.875rem; --a-lh-lead:1.45; --a-fs-body:.8125rem; --a-lh-body:1.5; --a-fs-small:.6875rem; --a-fs-micro:.625rem;
    --a-sp-8:6px; --a-sp-16:10px; --a-sp-24:12px; --a-sp-32:16px; }
  .adv .ap{ width:min(620px, 100%); }
  .adv .go{ padding:9px var(--a-sp-24); } .adv .ghost{ padding:8px var(--a-sp-16); font-size:.8125rem; }
  .adv .ap .hb{ flex-direction:row; align-items:center; } .amc .hb .go{ width:auto; }
  /* 휴대폰 · 태블릿 규칙과 겹쳐도 가로 휴대폰은 6칸 한 줄 */
  .alb-g button, .alb-g button:disabled, .alb-g button.feat{ grid-template-columns:none; grid-template-rows:none; align-items:start; }
  .alb-g button img, .alb-g button i, .alb-g button.feat img{ aspect-ratio:16/10; height:auto; min-height:0; } .alb-g button:disabled i{ font-size:20px; }
  .alb-g button.feat, .alb-g[data-go] .lastg, .alb-g[data-lo] .lastl{ grid-column:auto; grid-row:auto; } .alb-g button.feat span{ font-size:11px; }
}

/* ══════════ 보물찾기 · 「보물 수호 대작전」 (game.js · 2026-09-25) ══════════
   남색 + 금색 판타지 전장. 각진 금테 창(모서리를 비스듬히 자른 모양) · 스킬 바 · 미니맵 · 순위판
   토큰은 .arena 에 모았다 — 색 · 글자 · 간격 · 모서리 자르기(--g-cut) */
.arena{
  --g-night:#060b19; --g-navy:#0b1630; --g-navy2:#12244a; --g-navy3:#1a3163;
  --g-gold:#e2bd5e; --g-gold-hi:#fff0bd; --g-gold-lo:#8f6d25; --g-line:rgba(226,189,94,.5);
  --g-cyan:#5fe0f0; --g-cyan-lo:#1f8fb0; --g-red:#ef5a66; --g-green:#48d68d; --g-violet:#a978ff;
  --g-ink:#eef3ff; --g-ink-soft:#b3c0de; --g-ink-mute:#7282a8;
  --g-fs-title:clamp(2rem, 1.4rem + 2.4vw, 3.25rem); --g-fs-h:clamp(1.125rem, 1rem + .5vw, 1.375rem); --g-fs-q:clamp(1.0625rem, .98rem + .35vw, 1.25rem);
  --g-fs-body:.9375rem; --g-fs-small:.75rem; --g-fs-micro:.6875rem;
  --g-sp-4:4px; --g-sp-8:8px; --g-sp-12:12px; --g-sp-16:16px; --g-sp-24:24px; --g-sp-32:32px;
  --g-cut:12px; --g-ease:cubic-bezier(.22,1,.36,1);
  --g-top:calc(var(--bar-h, 56px) + 10px);
  --hc:#5b8cff;
  position:absolute; inset:0; z-index:6; pointer-events:none; font-family:var(--sans); color:var(--g-ink); -webkit-font-smoothing:antialiased;
}
.arena[hidden], .arena [hidden]{ display:none !important; }
.arena > *{ pointer-events:auto; }
.arena .ar-hud, .arena .ar-ann, .arena .ar-fx{ pointer-events:none; }
.arena .ar-hud > *{ pointer-events:auto; }
.arena .ar-hud > .ar-arrow{ pointer-events:none; }
.arena button{ font-family:inherit; cursor:pointer; }
.arena button:focus-visible{ outline:2px solid var(--g-cyan); outline-offset:2px; }

/* 각진 금테 창: 바깥은 금빛, ::before 가 안쪽 남색 판 */
.arena .ar-obj, .arena .ar-card, .arena .ar-shop-in, .arena .ar-board-in, .arena .ar-dock, .arena .ar-rank, .arena .ar-mini, .arena .ar-show, .arena .ar-win-in, .arena .ar-boss{
  --c:var(--g-cut); position:relative; isolation:isolate;
  background:linear-gradient(155deg, var(--g-gold-hi), var(--g-gold) 28%, var(--g-gold-lo) 62%, var(--g-gold));
  clip-path:polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.arena .ar-obj::before, .arena .ar-card::before, .arena .ar-shop-in::before, .arena .ar-board-in::before, .arena .ar-dock::before, .arena .ar-rank::before, .arena .ar-mini::before, .arena .ar-show::before, .arena .ar-win-in::before, .arena .ar-boss::before{
  content:''; position:absolute; inset:1.5px; z-index:-1;
  clip-path:polygon(calc(var(--c) - 1px) 0, calc(100% - var(--c) + 1px) 0, 100% calc(var(--c) - 1px), 100% calc(100% - var(--c) + 1px), calc(100% - var(--c) + 1px) 100%, calc(var(--c) - 1px) 100%, 0 calc(100% - var(--c) + 1px), 0 calc(var(--c) - 1px));
  background:var(--fr, linear-gradient(180deg, rgba(19,36,74,.96), rgba(8,15,34,.97)));
}

/* 단추 */
.arena .ar-btn{ --c:9px; position:relative; border:0; padding:12px 26px; font-size:var(--g-fs-body); font-weight:800; letter-spacing:.02em; color:var(--g-ink);
  background:linear-gradient(180deg, var(--g-navy3), var(--g-navy2)); box-shadow:inset 0 0 0 1.5px var(--g-line);
  clip-path:polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% 50%, calc(100% - var(--c)) 100%, var(--c) 100%, 0 50%);
  transition:transform .18s var(--g-ease), filter .18s, background .18s; }
.arena .ar-btn small{ display:block; font-size:var(--g-fs-micro); font-weight:600; color:var(--g-ink-soft); margin-top:2px; }
.arena .ar-btn.primary{ color:#2a1a02; background:linear-gradient(180deg, var(--g-gold-hi), var(--g-gold) 55%, #c79a33); box-shadow:inset 0 -3px 0 rgba(120,80,10,.45), inset 0 1px 0 #fff; }
.arena .ar-btn:disabled{ opacity:.5; cursor:default; }
@media (hover:hover){
  .arena .ar-btn:not(:disabled):hover{ transform:translateY(-2px) scale(1.02); filter:brightness(1.1); }
}
.arena .ar-btn:not(:disabled):active{ transform:translateY(1px) scale(.99); }
.arena .ar-link{ background:none; border:0; color:var(--g-ink-soft); font-weight:700; font-size:.875rem; padding:8px 6px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(179,192,222,.35); }
.arena .ar-link:hover{ color:var(--g-ink); text-decoration-color:var(--g-gold); }
.arena .ar-x{ width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:var(--g-ink); font-size:15px; }
.arena .ar-x:hover{ background:rgba(255,255,255,.18); }
.arena .ar-coin{ display:inline-block; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff6c8, #f2c649 45%, #a87a1c); box-shadow:inset 0 0 0 1.5px #8f6d25; vertical-align:-2px; margin-right:5px; }

/* ── 수호자 고르기 ── */
.arena .ar-sel{ position:absolute; left:0; right:0; bottom:0; top:var(--bar-h, 56px); overflow:auto; overscroll-behavior:contain; padding:var(--g-sp-24);
  background:radial-gradient(1200px 600px at 70% 0%, color-mix(in srgb, var(--hc) 26%, transparent), transparent 60%), radial-gradient(900px 700px at 0% 100%, rgba(95,224,240,.12), transparent 60%), linear-gradient(180deg, #081231, #050a18);
  transition:background .5s; }
.arena .ar-sel::before{ content:''; position:fixed; inset:0; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(115deg, rgba(226,189,94,.07) 0 1px, transparent 1px 44px); }
.arena .ar-sel-in{ position:relative; max-width:1180px; margin:0 auto; display:grid; gap:var(--g-sp-16) var(--g-sp-32); }
.arena .ar-kick{ font-size:var(--g-fs-micro); font-weight:800; letter-spacing:.22em; color:var(--g-gold); }
.arena .ar-title{ margin:6px 0 10px; font-size:var(--g-fs-title); line-height:1.05; font-weight:900; letter-spacing:-.01em; text-wrap:balance;
  background:linear-gradient(180deg, #fff9e2, var(--g-gold) 55%, #b88a2c); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
.arena .ar-story{ margin:0; font-size:var(--g-fs-body); line-height:1.65; color:var(--g-ink-soft); max-width:46ch; }
.arena .ar-story b{ color:var(--g-ink); }
.arena .ar-pick{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--g-sp-12); }
.arena .ar-hb{ position:relative; --c:10px; padding:0 0 10px; border:0; color:var(--g-ink); text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--hc) 55%, #0b1630), #0b1630 70%);
  clip-path:polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%, 0 var(--c));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14); transition:transform .22s var(--g-ease), box-shadow .22s, filter .22s; filter:saturate(.7) brightness(.85); }
.arena .ar-hb img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.arena .ar-hb b{ display:block; font-size:1rem; font-weight:900; margin-top:2px; }
.arena .ar-hb small{ display:inline-block; font-size:var(--g-fs-micro); font-weight:800; letter-spacing:.12em; color:var(--hc); background:rgba(0,0,0,.35); padding:2px 8px; margin-top:4px; }
.arena .ar-hb.on{ filter:none; box-shadow:inset 0 0 0 2.5px var(--g-gold), 0 0 0 0 transparent; transform:translateY(-4px); }
.arena .ar-hb.on::after{ content:''; position:absolute; left:50%; bottom:0; width:0; height:0; border:8px solid transparent; border-bottom-color:var(--g-gold); transform:translateX(-50%); }
@media (hover:hover){ .arena .ar-hb:not(.on):hover{ filter:saturate(.95) brightness(1); transform:translateY(-2px); } }
.arena .ar-show{ --c:18px; padding:var(--g-sp-24); display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--g-sp-16); align-content:start;
  --fr:radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--hc) 40%, transparent), transparent 55%), linear-gradient(180deg, rgba(19,36,74,.95), rgba(7,13,30,.98)); }
.arena .ar-stage{ position:relative; display:grid; place-items:center; min-height:220px; }
.arena .ar-stage::before{ content:''; position:absolute; inset:-10% 10%; border-radius:50%; opacity:.55;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--hc) 60%, transparent) 0 6deg, transparent 6deg 18deg); -webkit-mask:radial-gradient(circle, #000 20%, transparent 68%); mask:radial-gradient(circle, #000 20%, transparent 68%); animation:ar-spin 40s linear infinite; }
@keyframes ar-spin{ to{ transform:rotate(1turn); } }
.arena .ar-big{ position:relative; width:min(280px, 70%); aspect-ratio:1; filter:drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.arena .ar-show.flip .ar-big{ animation:ar-heroin .5s var(--g-ease); }
@keyframes ar-heroin{ from{ transform:translateY(18px) scale(.94); opacity:.2; } }
.arena .ar-rolechip{ position:absolute; top:6px; left:6px; font-size:var(--g-fs-micro); font-weight:900; letter-spacing:.2em; color:#07101f; background:var(--hc); padding:4px 10px; clip-path:polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.arena .ar-hname{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.arena .ar-hname b{ font-size:clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight:900; color:var(--g-ink); text-shadow:0 0 22px color-mix(in srgb, var(--hc) 70%, transparent); }
.arena .ar-hname span{ font-size:var(--g-fs-body); font-weight:800; color:var(--hc); letter-spacing:.08em; }
.arena .ar-kit{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:10px; }
.arena .ar-kit li{ display:grid; grid-template-columns:44px minmax(0, 1fr); gap:12px; align-items:start; }
.arena .ar-kit img{ width:44px; height:44px; border-radius:6px; box-shadow:0 0 0 1.5px var(--g-line); background:#0a1226; }
.arena .ar-kit b{ display:flex; align-items:center; gap:8px; font-size:.9375rem; font-weight:800; }
.arena .ar-kit b em{ font-style:normal; font-size:var(--g-fs-micro); font-weight:900; color:#1a1102; background:var(--g-gold); min-width:22px; padding:1px 6px; text-align:center; border-radius:3px; }
.arena .ar-kit p{ margin:2px 0 0; font-size:.8125rem; line-height:1.5; color:var(--g-ink-soft); }
.arena .ar-opts{ display:grid; gap:10px; align-content:start; }
.arena .ar-row{ display:grid; grid-template-columns:72px minmax(0, 1fr); gap:10px; align-items:center; }
.arena .ar-row[hidden]{ display:none; }
.arena .ar-row > span{ font-size:var(--g-fs-small); font-weight:800; letter-spacing:.1em; color:var(--g-gold); }
.arena .ar-seg{ display:flex; flex-wrap:wrap; gap:6px; }
.arena .ar-seg button{ flex:1 1 0; min-width:0; border:0; padding:9px 10px; font-size:.875rem; font-weight:800; color:var(--g-ink-soft); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); border-radius:3px; transition:all .18s; }
.arena .ar-seg button small{ display:block; font-size:var(--g-fs-micro); font-weight:600; opacity:.8; margin-top:2px; }
.arena .ar-seg button.on{ color:var(--g-ink); background:linear-gradient(180deg, rgba(226,189,94,.28), rgba(226,189,94,.1)); box-shadow:inset 0 0 0 1.5px var(--g-gold); }
.arena .ar-name{ width:100%; box-sizing:border-box; padding:10px 12px; font:inherit; font-size:16px; color:var(--g-ink); background:rgba(0,0,0,.35); border:0; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.arena .ar-name:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--g-gold); }
.arena .ar-avs{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
.arena .ar-avs button{ flex:0 0 auto; width:58px; border:0; padding:3px 3px 4px; background:rgba(255,255,255,.05); color:var(--g-ink-soft); border-radius:4px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.arena .ar-avs button.on{ box-shadow:inset 0 0 0 1.5px var(--g-gold); color:var(--g-ink); }
.arena .ar-avs img{ width:100%; aspect-ratio:3/4; object-fit:contain; display:block; }
.arena .ar-avs span{ font-size:10px; font-weight:700; }
.arena .ar-room{ font-size:.8125rem; line-height:1.5; color:var(--g-ink-soft); padding:8px 12px; border-left:3px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04); }
.arena .ar-room:empty{ display:none; }
.arena .ar-room.on{ border-left-color:var(--g-cyan); color:var(--g-ink); background:rgba(95,224,240,.08); }
.arena .ar-room b{ color:var(--g-cyan); }
.arena .ar-go{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.arena .ar-go .ar-start{ font-size:1.125rem; padding:15px 44px; }
/* 데스크톱: 왼쪽(제목 · 고르기 · 설정 · 시작) | 오른쪽(고른 수호자 크게) */
@media (min-width:1024px){
  .arena .ar-sel-in{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas:"head show" "pick show" "opts show" "go show"; align-items:start; }
  .arena .ar-sel-h{ grid-area:head; } .arena .ar-pick{ grid-area:pick; } .arena .ar-opts{ grid-area:opts; } .arena .ar-go{ grid-area:go; } .arena .ar-show{ grid-area:show; position:sticky; top:0; }
  .arena .ar-stage{ min-height:300px; }
}
/* 태블릿 · 휴대폰: 제목 → 수호자 고르기 → 고른 수호자 → 설정 → 시작(아래에 붙음) */
@media (max-width:1023.98px){
  .arena .ar-sel-in{ grid-template-columns:minmax(0, 1fr); padding-bottom:84px; }
  .arena .ar-go{ position:sticky; bottom:calc(-1 * var(--g-sp-24)); z-index:2; margin:0 calc(-1 * var(--g-sp-24)); padding:12px var(--g-sp-24) calc(12px + env(safe-area-inset-bottom, 0px)); background:linear-gradient(180deg, rgba(5,10,24,0), rgba(5,10,24,.94) 30%); }
}
@media (min-width:768px) and (max-width:1023.98px){
  .arena .ar-show{ grid-template-columns:240px minmax(0, 1fr); align-items:center; }
  .arena .ar-big{ width:100%; }
}
@media (max-width:767.98px){
  .arena .ar-sel{ padding:var(--g-sp-16); }
  .arena .ar-go{ bottom:calc(-1 * var(--g-sp-16)); margin:0 calc(-1 * var(--g-sp-16)); padding-left:var(--g-sp-16); padding-right:var(--g-sp-16); }
  .arena .ar-go .ar-start{ flex:1 1 100%; }
  .arena .ar-pick{ gap:8px; } .arena .ar-hb b{ font-size:.875rem; } .arena .ar-hb small{ padding:1px 5px; letter-spacing:.06em; }
  .arena .ar-show{ padding:var(--g-sp-16); } .arena .ar-stage{ min-height:170px; } .arena .ar-big{ width:180px; }
  .arena .ar-row{ grid-template-columns:minmax(0, 1fr); gap:6px; }
}

/* ── 입장 화면 ── */
.arena .ar-load{ position:absolute; left:0; right:0; bottom:0; top:var(--bar-h, 56px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--g-sp-24); padding:var(--g-sp-24);
  background:radial-gradient(800px 400px at 50% 40%, rgba(226,189,94,.18), transparent 70%), #050a18; }
.arena .ar-load-t{ text-align:center; } .arena .ar-load-t small{ display:block; font-size:var(--g-fs-small); font-weight:800; letter-spacing:.2em; color:var(--g-gold); }
.arena .ar-load-t b{ font-size:var(--g-fs-title); font-weight:900; background:linear-gradient(180deg, #fff9e2, var(--g-gold) 60%, #b88a2c); -webkit-background-clip:text; background-clip:text; color:transparent; }
.arena .ar-load-c{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--g-sp-16); }
.arena .ar-lc{ --c:12px; width:170px; padding-bottom:12px; text-align:center; background:linear-gradient(180deg, color-mix(in srgb, var(--hc) 45%, #0b1630), #0b1630 75%);
  clip-path:polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  box-shadow:inset 0 0 0 1.5px var(--g-line); animation:ar-cardin .5s var(--g-ease) both; animation-delay:calc(var(--i) * 90ms); }
.arena .ar-lc.me{ box-shadow:inset 0 0 0 2.5px var(--g-gold); }
.arena .ar-lc img{ width:100%; aspect-ratio:1; display:block; }
.arena .ar-lc b{ display:block; font-size:1rem; font-weight:900; } .arena .ar-lc span{ font-size:var(--g-fs-small); color:var(--g-ink-soft); }
@keyframes ar-cardin{ from{ opacity:0; transform:translateY(24px) scale(.95); } }
.arena .ar-load-tip{ font-size:.8125rem; color:var(--g-ink-soft); text-align:center; }

/* ── 퀘스트 배너 (위 가운데) : 탑 줄 · 시계 | 목표 | 점수 · 힌트 · 거리 막대 ──
   아이들이 가장 먼저 보는 화면 위 가운데에 둔다. 반투명 판이라 뒤 장면이 비치고,
   걷는 동안에는 한 줄로 접혀 화면을 덜 가린다(멈추면 다시 펼침 · 눌러도 접기/펴기).
   --side : 오른쪽 위 판(순위판 · 미니맵) 몫 — 양쪽을 같은 폭으로 비워 늘 가운데에 온다 */
.arena{ --side:284px; }
.arena .ar-obj{ --c:12px; position:absolute; left:50%; top:var(--g-top); transform:translateX(-50%); width:min(600px, calc(100% - 2 * var(--side))); box-sizing:border-box;
  padding:8px 16px 12px; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
  --fr:linear-gradient(180deg, rgba(12,24,52,.78), rgba(6,12,28,.84)); }
.arena .ar-obj::before{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.arena .ar-obj-tog{ position:absolute; left:50%; bottom:4px; width:30px; height:3px; margin-left:-15px; border-radius:2px; background:rgba(226,189,94,.5); pointer-events:none; }
.arena .ar-obj-s{ display:flex; justify-content:center; margin-bottom:6px; }
.arena .ar-obj-h{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:10px; }
.arena .ar-obj-l{ justify-self:start; display:flex; align-items:center; gap:6px; }
.arena .ar-obj-r{ justify-self:end; display:flex; align-items:center; gap:6px; }
.arena .ar-obj-t{ font-size:1.125rem; font-weight:900; color:var(--g-gold-hi); white-space:nowrap; letter-spacing:.01em; }
.arena .ar-obj-t em{ font-style:normal; font-size:var(--g-fs-micro); font-weight:800; color:#1a1102; background:var(--g-gold); padding:1px 7px; border-radius:3px; margin-left:6px; vertical-align:3px; }
.arena .ar-clock{ font-variant-numeric:tabular-nums; font-weight:800; font-size:.875rem; color:var(--g-ink); background:rgba(0,0,0,.35); padding:2px 8px; border-radius:3px; }
.arena .ar-score2{ font-size:var(--g-fs-small); font-weight:700; color:var(--g-ink-soft); white-space:nowrap; }
.arena .ar-score2 b{ font-size:1.0625rem; font-weight:900; color:var(--g-gold-hi); font-variant-numeric:tabular-nums; margin-right:2px; }
.arena .ar-sound{ border:0; background:none; color:var(--g-ink-mute); font-size:var(--g-fs-micro); font-weight:700; padding:2px 4px; white-space:nowrap; }
.arena .ar-sound[aria-pressed="true"]{ color:var(--g-ink-soft); }
.arena .ar-quit{ flex:0 0 auto; width:26px; height:26px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:var(--g-ink-soft); font-size:12px; }
.arena .ar-quit:hover{ background:rgba(239,90,102,.35); color:#fff; }
.arena .ar-obj-p{ margin:6px auto 0; max-width:48ch; font-size:.9375rem; line-height:1.5; font-weight:600; color:var(--g-ink); text-wrap:balance; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.arena .ar-obj-p:empty{ display:none; }
.arena .ar-mt{ display:block; margin-top:2px; font-weight:800; color:var(--g-cyan); font-variant-numeric:tabular-nums; }
/* 거리 막대: 얇은 줄 + 오른쪽에 말 · 거리 */
.arena .ar-mrow{ display:flex; align-items:center; gap:10px; margin:8px auto 0; max-width:440px; }
.arena .ar-meter{ position:relative; flex:1 1 auto; height:6px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; }
.arena .ar-meter i{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:3px; background:linear-gradient(90deg, #2c5fa8, #5fe0f0); transition:width .4s var(--g-ease), background .4s; }
.arena .ar-mrow[data-z="mid"] .ar-meter i{ background:linear-gradient(90deg, #5fe0f0, #e2bd5e); }
.arena .ar-mrow[data-z="near"] .ar-meter i{ background:linear-gradient(90deg, #e2bd5e, #ff9b5e); }
.arena .ar-mw{ font-size:.8125rem; font-weight:800; color:#9fe8f5; white-space:nowrap; }
.arena .ar-mrow[data-z="mid"] .ar-mw{ color:var(--g-gold-hi); } .arena .ar-mrow[data-z="near"] .ar-mw{ color:#ffc08a; }
.arena .ar-md{ font-size:.8125rem; font-weight:800; color:var(--g-ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.arena .ar-md:empty{ display:none; }
/* 접힌 모습: 탑 줄 · 힌트를 숨기고 제목 한 줄 + 거리 막대만 */
.arena .ar-obj.mini{ padding:6px 16px 10px; }
.arena .ar-obj.mini .ar-obj-s, .arena .ar-obj.mini .ar-obj-p{ display:none; }
.arena .ar-obj.mini .ar-mrow{ margin-top:6px; }
.arena .ar-obj.mini .ar-obj-tog{ background:var(--g-gold); }
.arena .ar-obj:not(.mini) .ar-obj-p{ animation:ar-rise .3s var(--g-ease); }

/* 탑 7개 · 대장 (배너 맨 위 작은 줄) */
.arena .ar-pips{ display:flex; gap:4px; }
.arena .ar-pips i{ position:relative; width:18px; height:21px; display:grid; place-items:center; font-style:normal;
  background:#2a2640; clip-path:polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%); }
.arena .ar-pips i b{ font-size:9px; font-weight:900; color:#8f89a8; margin-top:5px; }
.arena .ar-pips i.lit{ background:linear-gradient(180deg, #d9fbff, var(--g-cyan) 60%, var(--g-cyan-lo)); } .arena .ar-pips i.lit b{ color:#062431; }
.arena .ar-pips i.cur{ background:linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); animation:ar-pulse 1.2s ease-in-out infinite; } .arena .ar-pips i.cur b{ color:#2a1a02; }
.arena .ar-pips i.boss{ width:32px; background:#3a1f2c; } .arena .ar-pips i.boss b{ color:#c98a95; font-size:8.5px; }
.arena .ar-pips i.boss.cur{ background:linear-gradient(180deg, #ff9aa4, var(--g-red)); } .arena .ar-pips i.boss.cur b{ color:#fff; }
.arena .ar-pips i.boss.lit{ background:linear-gradient(180deg, #fff6c8, var(--g-gold)); } .arena .ar-pips i.boss.lit b{ color:#2a1a02; }
@keyframes ar-pulse{ 50%{ filter:brightness(1.35); transform:translateY(-2px); } }

/* 방향 화살표: 아래 가운데 (수호자 판 위) — 위쪽은 배너 자리 */
.arena .ar-arrow{ position:absolute; left:50%; bottom:calc(158px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
.arena .ar-arrow[hidden]{ display:none; }
.arena .ar-arrow i{ width:0; height:0; border:14px solid transparent; border-bottom:26px solid var(--g-gold); border-top:0; transition:transform .15s linear; }
.arena .ar-arrow span{ font-size:var(--g-fs-small); font-weight:900; color:var(--g-gold-hi); font-variant-numeric:tabular-nums; }

/* ── 방 순위 (오른쪽 위) ── */
.arena .ar-rank{ --c:10px; position:absolute; right:12px; top:var(--g-top); width:260px; padding:8px 10px 10px; }
.arena .ar-rank[hidden]{ display:none; }
.arena .ar-rank-h{ display:flex; width:100%; align-items:baseline; gap:8px; border:0; background:none; color:var(--g-ink); padding:2px 2px 6px; text-align:left; }
.arena .ar-rank-h b{ font-size:.875rem; font-weight:900; color:var(--g-gold); } .arena .ar-rank-h span{ font-size:var(--g-fs-small); color:var(--g-ink-soft); font-weight:700; }
.arena .ar-rank ol, .arena .ar-win-rank ol{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.arena .ar-rank li, .arena .ar-win-rank li{ display:grid; grid-template-columns:18px 26px minmax(0, 1fr) auto; grid-template-areas:"n i b s" "n i t s"; column-gap:6px; align-items:center; padding:3px 6px; background:rgba(255,255,255,.04); border-radius:3px; }
.arena .ar-rank li.me, .arena .ar-win-rank li.me{ background:rgba(226,189,94,.16); box-shadow:inset 0 0 0 1px var(--g-line); }
.arena .ar-rank li em, .arena .ar-win-rank li em{ grid-area:n; font-style:normal; font-weight:900; font-size:.875rem; color:var(--g-gold); text-align:center; }
.arena .ar-rank li img, .arena .ar-win-rank li img{ grid-area:i; width:26px; height:26px; border-radius:50%; background:#0a1226; }
.arena .ar-rank li b, .arena .ar-win-rank li b{ grid-area:b; font-size:.8125rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:3px solid var(--pc, #fff); padding-left:5px; }
.arena .ar-rank li span, .arena .ar-win-rank li span{ grid-area:t; font-size:var(--g-fs-micro); color:var(--g-ink-soft); padding-left:8px; }
.arena .ar-rank li strong, .arena .ar-win-rank li strong{ grid-area:s; font-size:.875rem; font-weight:900; color:var(--g-gold-hi); font-variant-numeric:tabular-nums; }
.arena .ar-rank li.won span, .arena .ar-win-rank li.won span{ color:var(--g-cyan); font-weight:800; }

/* ── 미니맵 (오른쪽 아래) ── */
.arena .ar-mini{ --c:12px; position:absolute; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); width:196px; height:196px; padding:4px; transition:width .3s var(--g-ease), height .3s var(--g-ease); }
.arena .ar-mini canvas{ display:block; width:100%; height:100%; cursor:crosshair; touch-action:none; clip-path:polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); }
.arena .ar-mini.big{ width:min(380px, calc(100vw - 24px)); height:min(380px, calc(100vw - 24px)); }
.arena .ar-mini-z{ position:absolute; left:8px; top:8px; width:26px; height:26px; border:0; border-radius:3px; background:rgba(6,11,25,.75); color:var(--g-gold); font-size:14px; }
.arena .ar-ping{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border:2.5px solid var(--g-gold); border-radius:50%; pointer-events:none; animation:ar-ping .7s ease-out forwards; }
@keyframes ar-ping{ from{ transform:scale(.3); opacity:1; } to{ transform:scale(1.6); opacity:0; } }

/* ── 아래 가운데: 수호자 · 기력 · 스킬 · 가방 ── */
.arena .ar-dock{ --c:14px; position:absolute; left:50%; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); display:flex; align-items:center; gap:14px; padding:10px 16px; z-index:3; clip-path:none; background:none; }
.arena .ar-dock::before{ inset:0; z-index:-2; background:linear-gradient(155deg, var(--g-gold-hi), var(--g-gold) 28%, var(--g-gold-lo) 62%, var(--g-gold));
  clip-path:polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.arena .ar-dock::after{ content:''; position:absolute; inset:1.5px; z-index:-1; background:linear-gradient(180deg, rgba(19,36,74,.96), rgba(8,15,34,.97));
  clip-path:polygon(calc(var(--c) - 1px) 0, calc(100% - var(--c) + 1px) 0, 100% calc(var(--c) - 1px), 100% calc(100% - var(--c) + 1px), calc(100% - var(--c) + 1px) 100%, calc(var(--c) - 1px) 100%, 0 calc(100% - var(--c) + 1px), 0 calc(var(--c) - 1px)); }
.arena .ar-me.deny{ animation:ar-shake .3s; }
@keyframes ar-shake{ 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }
/* 1024~1439px: 아래 판을 왼쪽에 붙여 미니맵과 겹치지 않게 */
@media (min-width:1024px) and (max-width:1439.98px){
  .arena:not(.touch) .ar-dock{ left:12px; transform:none; }
  .arena:not(.touch) .ar-mini{ width:180px; height:180px; }
  .arena:not(.touch) .ar-bars{ width:160px; }
}
/* 1023px 이하 (마우스 쓰는 좁은 창): 판을 줄이고 미니맵은 오른쪽 위로 */
@media (max-width:1023.98px){
  .arena:not(.touch) .ar-dock{ left:12px; transform:none; gap:10px; padding:8px 12px; }
  .arena:not(.touch) .ar-bars{ width:130px; } .arena:not(.touch) .ar-slots{ display:none; }
  .arena:not(.touch) .ar-mini{ width:132px; height:132px; bottom:auto; top:var(--g-top); }
  .arena:not(.touch) .ar-rank{ top:calc(var(--g-top) + 142px); width:200px; }
}
.arena .ar-me{ display:flex; align-items:center; gap:10px; }
.arena .ar-face{ position:relative; width:64px; height:64px; flex:0 0 auto; border-radius:50%; background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--hc) 70%, #fff), var(--hc) 60%, #0b1630); box-shadow:0 0 0 2.5px var(--g-gold), 0 0 16px color-mix(in srgb, var(--hc) 60%, transparent); }
.arena .ar-face img{ width:100%; height:100%; border-radius:50%; display:block; }
.arena .ar-face.up{ animation:ar-lvup .8s var(--g-ease); }
@keyframes ar-lvup{ 30%{ transform:scale(1.18); box-shadow:0 0 0 3px var(--g-gold-hi), 0 0 30px var(--g-cyan); } }
.arena .ar-lv{ position:absolute; right:-4px; bottom:-4px; min-width:22px; height:22px; padding:0 4px; display:grid; place-items:center; font-size:.75rem; font-weight:900; color:#1a1102; background:var(--g-gold); border-radius:3px; box-shadow:0 0 0 2px #0b1630; }
.arena .ar-bars{ width:190px; display:grid; gap:5px; }
.arena .ar-hp{ display:flex; gap:3px; height:16px; }
.arena .ar-hp i{ flex:1 1 0; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transform:skewX(-14deg); transition:background .25s; }
.arena .ar-hp i.on{ background:linear-gradient(180deg, #8ff0b2, var(--g-green) 55%, #1f9a5c); }
.arena .ar-hp.shielded i.on{ box-shadow:inset 0 0 0 2px #dffbff, 0 0 8px var(--g-cyan); }
.arena .ar-xp{ height:5px; background:rgba(255,255,255,.08); } .arena .ar-xp i{ display:block; height:100%; width:0; background:linear-gradient(90deg, #7b5cff, var(--g-violet)); transition:width .5s var(--g-ease); }
.arena .ar-stat{ display:flex; justify-content:space-between; gap:8px; font-size:var(--g-fs-small); font-weight:700; color:var(--g-ink-soft); }
.arena .ar-gold b{ font-size:.9375rem; font-weight:900; color:var(--g-gold-hi); font-variant-numeric:tabular-nums; }
.arena .ar-skills{ display:flex; gap:8px; }
.arena .ar-sk{ --cd:0; position:relative; width:54px; height:54px; padding:0; border:0; background:#0a1226; border-radius:6px; box-shadow:0 0 0 1.5px var(--g-line); overflow:visible; transition:transform .15s var(--g-ease), box-shadow .2s; }
.arena .ar-sk img{ width:100%; height:100%; border-radius:6px; display:block; }
.arena .ar-sk .ar-cd{ position:absolute; inset:0; border-radius:6px; pointer-events:none; background:conic-gradient(rgba(4,8,20,.78) calc(var(--cd) * 360deg), transparent 0); }
.arena .ar-sk .ar-cdn{ position:absolute; inset:0; display:grid; place-items:center; font-size:1rem; font-weight:900; color:#fff; text-shadow:0 1px 3px #000; pointer-events:none; }
.arena .ar-sk em{ position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); font-style:normal; font-size:10px; font-weight:900; color:#1a1102; background:var(--g-gold); padding:0 5px; border-radius:2px; line-height:15px; }
.arena .ar-sk.ctx{ filter:grayscale(.8) brightness(.7); }
.arena .ar-sk.ready{ box-shadow:0 0 0 2px var(--g-gold), 0 0 12px rgba(226,189,94,.5); }
.arena .ar-sk.ult{ width:60px; height:60px; }
.arena .ar-sk.ult.ready{ box-shadow:0 0 0 2.5px var(--hc), 0 0 18px var(--hc); animation:ar-ultrdy 1.4s ease-in-out infinite; }
@keyframes ar-ultrdy{ 50%{ box-shadow:0 0 0 2.5px #fff, 0 0 26px var(--hc); } }
.arena .ar-sk.active{ box-shadow:0 0 0 2.5px var(--g-cyan), 0 0 16px var(--g-cyan); }
.arena .ar-sk.fire{ animation:ar-fire .45s var(--g-ease); }
@keyframes ar-fire{ 30%{ transform:scale(1.18); filter:brightness(1.6); } }
@media (hover:hover){ .arena .ar-sk:hover{ transform:translateY(-3px); } }
.arena .ar-sk:active{ transform:scale(.94); }
.arena .ar-tip{ position:absolute; left:50%; bottom:calc(100% + 14px); transform:translateX(-50%) translateY(6px); width:240px; padding:10px 12px; text-align:left; font-size:.8125rem; line-height:1.5; color:var(--g-ink-soft);
  background:rgba(6,11,25,.96); box-shadow:0 0 0 1px var(--g-line), 0 12px 30px rgba(0,0,0,.5); border-radius:4px; opacity:0; visibility:hidden; transition:opacity .15s, transform .15s; pointer-events:none; z-index:5; }
.arena .ar-tip b{ display:block; color:var(--g-gold-hi); font-size:.875rem; margin-bottom:3px; } .arena .ar-tip small{ display:block; color:var(--g-cyan); margin-top:4px; font-weight:700; }
@media (hover:hover){ .arena .ar-sk:hover .ar-tip, .arena .ar-sk:focus-visible .ar-tip{ opacity:1; visibility:visible; transform:translateX(-50%); } }
.arena .ar-bag{ display:flex; align-items:center; gap:10px; }
.arena .ar-slots{ display:grid; grid-template-columns:repeat(3, 32px); gap:4px; }
.arena .ar-slot{ position:relative; width:32px; height:32px; padding:0; border:0; background:rgba(0,0,0,.35); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); border-radius:3px; }
.arena .ar-slot img{ width:100%; height:100%; border-radius:3px; display:block; }
.arena .ar-slot b{ position:absolute; right:1px; bottom:0; font-size:10px; font-weight:900; color:#fff; text-shadow:0 1px 2px #000; }
.arena .ar-slot.use{ cursor:pointer; box-shadow:inset 0 0 0 1.5px var(--g-gold); }
.arena .ar-shop-b{ display:flex; flex-direction:column; align-items:center; gap:2px; border:0; padding:6px 10px; font-size:var(--g-fs-small); font-weight:900; color:var(--g-gold-hi); background:linear-gradient(180deg, rgba(226,189,94,.24), rgba(226,189,94,.08)); box-shadow:inset 0 0 0 1.5px var(--g-line); border-radius:4px; }
.arena .ar-shop-b .ar-coin{ width:18px; height:18px; margin:0; }
.arena .ar-shop-b em{ font-style:normal; font-size:9px; color:var(--g-ink-mute); }
.arena .ar-shop-b:hover{ background:linear-gradient(180deg, rgba(226,189,94,.4), rgba(226,189,94,.14)); }

/* ── 문제 카드 ── */
.arena .ar-cardwrap{ position:absolute; left:0; right:0; top:var(--bar-h, 56px); bottom:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px 16px 118px;
  background:radial-gradient(ellipse at center, rgba(6,11,25,.55), rgba(6,11,25,.82)); animation:ar-fade .25s ease-out; overflow:auto; }
@keyframes ar-fade{ from{ opacity:0; } }
.arena .ar-card{ --c:16px; width:min(660px, 100%); max-height:100%; overflow:auto; overscroll-behavior:contain; padding:var(--g-sp-24) var(--g-sp-24) var(--g-sp-16); animation:ar-pop .35s var(--g-ease); flex:0 1 auto; }
@keyframes ar-pop{ from{ transform:translateY(14px) scale(.96); opacity:0; } }
.arena .ar-card-h{ display:flex; align-items:center; gap:10px; }
.arena .ar-tag{ font-size:var(--g-fs-small); font-weight:900; letter-spacing:.06em; color:#1a1102; background:var(--g-gold); padding:3px 10px; clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.arena .ar-no{ font-size:var(--g-fs-small); font-weight:800; color:var(--g-ink-soft); letter-spacing:.06em; }
.arena .ar-q{ margin:14px 0 16px; font-size:var(--g-fs-q); line-height:1.55; font-weight:800; color:var(--g-ink); text-wrap:pretty; }
.arena .ar-clock2{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; vertical-align:2px; }
.arena .ar-clock2 i{ display:inline-block; width:60px; height:6px; background:var(--g-gold); transition:width 1s linear; }
.arena .ar-clock2 b{ font-size:.875rem; color:var(--g-gold); font-variant-numeric:tabular-nums; }
.arena .ar-a{ display:grid; gap:8px; }
.arena .ar-a > button, .arena .ar-ord button{ position:relative; display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:0; padding:13px 16px; font-size:var(--g-fs-body); font-weight:700; color:var(--g-ink);
  background:linear-gradient(180deg, rgba(26,49,99,.9), rgba(18,36,74,.9)); box-shadow:inset 0 0 0 1px rgba(226,189,94,.3); border-radius:4px;
  animation:ar-rise .34s var(--g-ease) both; animation-delay:calc(var(--i, 0) * 50ms); transition:transform .16s var(--g-ease), box-shadow .16s, background .16s, opacity .2s; }
@keyframes ar-rise{ from{ opacity:0; transform:translateY(8px); } }
.arena .ar-a > button i, .arena .ar-ord button i{ flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; font-style:normal; font-weight:900; font-size:.8125rem; color:#1a1102; background:var(--g-gold); clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@media (hover:hover){ .arena .ar-a > button:not(:disabled):hover, .arena .ar-ord button:not(:disabled):hover{ transform:translateX(4px); box-shadow:inset 0 0 0 1.5px var(--g-gold), 0 0 14px rgba(226,189,94,.25); } }
.arena .ar-a > button:not(:disabled):active, .arena .ar-ord button:not(:disabled):active{ transform:scale(.98); }
.arena .ar-a > button.ok, .arena .ar-ord button.ok{ background:linear-gradient(180deg, rgba(40,160,120,.55), rgba(20,90,80,.6)); box-shadow:inset 0 0 0 2px var(--g-green), 0 0 18px rgba(72,214,141,.35); opacity:1; }
.arena .ar-a > button.ok i, .arena .ar-ord button.ok i{ background:var(--g-green); color:#04200f; }
.arena .ar-a > button.no, .arena .ar-ord button.no{ background:linear-gradient(180deg, rgba(160,40,60,.55), rgba(90,20,36,.6)); box-shadow:inset 0 0 0 2px var(--g-red); animation:ar-no .35s; }
@keyframes ar-no{ 20%, 60%{ transform:translateX(-5px); } 40%, 80%{ transform:translateX(5px); } }
.arena .ar-a > button.cut{ opacity:.28; text-decoration:line-through; box-shadow:none; }
.arena .ar-a > button.cut::after{ content:'지움'; margin-left:auto; font-size:var(--g-fs-micro); font-weight:900; color:var(--g-gold); text-decoration:none; }
.arena .ar-a > button.glow, .arena .ar-ord button.hintnext{ box-shadow:inset 0 0 0 2px var(--g-cyan), 0 0 18px rgba(95,224,240,.45); animation:ar-glow 1s ease-in-out infinite; }
@keyframes ar-glow{ 50%{ box-shadow:inset 0 0 0 2px #fff, 0 0 26px rgba(95,224,240,.7); } }
.arena .ar-ord button.hintnum::after{ content:attr(data-hint); margin-left:auto; min-width:22px; text-align:center; font-weight:900; color:#062431; background:var(--g-cyan); border-radius:3px; padding:0 5px; }
.arena .ar-a:disabled > button:disabled:not(.ok):not(.no):not(.cut), .arena .ar-a.done > button:not(.ok):not(.no){ opacity:.55; }
.arena .ar-a.ox{ grid-template-columns:1fr 1fr; gap:12px; }
.arena .ar-a.ox > button{ flex-direction:column; justify-content:center; padding:16px 10px 14px; gap:6px; }
.arena .ar-a.ox > button i{ width:auto; height:auto; clip-path:none; background:none; font-size:2.75rem; line-height:1; }
.arena .ar-a.ox > button:first-child i{ color:var(--g-cyan); } .arena .ar-a.ox > button:last-child i{ color:#ff8a94; }
.arena .ar-a.ox > button span{ font-size:.875rem; }
.arena .ar-ord{ display:grid; gap:8px; } .arena .ar-ordn{ margin-top:6px; font-size:var(--g-fs-small); color:var(--g-ink-soft); }
.arena .ar-ord button i{ clip-path:none; border-radius:50%; background:rgba(255,255,255,.1); color:var(--g-ink); }
.arena .ar-gomsg{ font-size:.9375rem; line-height:1.6; color:var(--g-ink); } .arena .ar-gomsg b{ color:var(--g-gold); } .arena .ar-gomsg span{ display:block; color:var(--g-cyan); font-weight:700; }
.arena .ar-f{ margin-top:14px; padding:12px 14px; font-size:.875rem; line-height:1.6; color:var(--g-ink-soft); background:rgba(255,255,255,.05); border-left:3px solid var(--g-gold); animation:ar-rise .3s var(--g-ease); }
.arena .ar-f.good{ background:rgba(72,214,141,.1); border-left-color:var(--g-green); } .arena .ar-f.bad{ background:rgba(239,90,102,.1); border-left-color:var(--g-red); }
.arena .ar-f.haspic{ display:grid; grid-template-columns:120px minmax(0, 1fr); gap:12px; align-items:start; }
.arena .ar-fp{ border-radius:4px; overflow:hidden; background:#fff; } .arena .ar-fp svg, .arena .ar-fp img{ display:block; width:100%; height:auto; }
.arena .ar-ft b{ display:block; color:var(--g-ink); font-size:.9375rem; margin-bottom:2px; }
.arena .ar-rune{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin-top:8px; font-weight:800; color:var(--g-gold-hi); }
.arena .ar-rune b{ display:grid; place-items:center; width:36px; height:36px; font-size:1.25rem; color:#1a1102; background:linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation:ar-fire .6s var(--g-ease); }
.arena .ar-card-b{ display:flex; justify-content:flex-end; margin-top:14px; }
.arena .ar-card-b .ar-btn[hidden]{ display:none; }
/* 봉인 주문 */
.arena .ar-a.wordq{ gap:14px; }
.arena .ar-wout{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.arena .ar-wout b{ width:40px; height:46px; display:grid; place-items:center; font-size:1.375rem; font-weight:900; color:var(--g-gold-hi); background:rgba(0,0,0,.35); box-shadow:inset 0 0 0 1.5px var(--g-line); border-radius:3px; }
.arena .ar-wt{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.arena .ar-wt button{ width:52px; height:52px; border:0; font-size:1.5rem; font-weight:900; color:#1a1102; background:linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation:ar-rise .3s var(--g-ease) both; animation-delay:calc(var(--i) * 40ms); }
.arena .ar-wt button.ok{ opacity:.25; } .arena .ar-wt button.no{ animation:ar-no .35s; filter:hue-rotate(-40deg) saturate(2); }

/* 대장 머리판 */
.arena .ar-boss{ --c:12px; width:min(660px, 100%); display:grid; grid-template-columns:84px minmax(0, 1fr); gap:14px; align-items:center; padding:10px 16px; flex:0 0 auto;
  --fr:linear-gradient(90deg, rgba(90,20,40,.95), rgba(20,14,34,.96)); animation:ar-pop .4s var(--g-ease); }
.arena .ar-boss[hidden]{ display:none; }
.arena .ar-boss-i{ width:84px; height:84px; border-radius:50%; background:radial-gradient(circle, #3a2440, #140c1e); box-shadow:0 0 0 2.5px var(--g-red), 0 0 20px rgba(239,90,102,.5); }
.arena .ar-boss-i.hit{ animation:ar-bhit .5s; } .arena .ar-boss-i.laugh{ animation:ar-blaugh .6s; }
@keyframes ar-bhit{ 20%{ transform:translateX(-8px) rotate(-8deg); filter:brightness(2); } 50%{ transform:translateX(6px) rotate(6deg); } }
@keyframes ar-blaugh{ 25%{ transform:scale(1.12) rotate(-4deg); } 60%{ transform:scale(1.08) rotate(4deg); } }
.arena .ar-boss-t b{ font-size:1.0625rem; font-weight:900; color:#ffd0d4; letter-spacing:.04em; }
.arena .ar-boss-hp{ display:flex; align-items:center; gap:3px; margin:6px 0 4px; }
.arena .ar-boss-hp i{ flex:1 1 0; height:14px; background:rgba(255,255,255,.1); transform:skewX(-14deg); transition:background .3s; }
.arena .ar-boss-hp i.on{ background:linear-gradient(180deg, #ff9aa4, var(--g-red) 60%, #9c2a36); }
.arena .ar-boss-hp span{ margin-left:8px; font-size:var(--g-fs-small); font-weight:900; color:#ffd0d4; font-variant-numeric:tabular-nums; }
.arena .ar-boss-line{ display:block; font-size:.8125rem; color:var(--g-ink-soft); font-style:italic; }
.arena .ar-shot{ position:absolute; z-index:9; font-style:normal; font-size:24px; pointer-events:none; text-shadow:0 0 10px currentColor; animation:ar-shot .75s cubic-bezier(.5,0,.8,.6) forwards; }
@keyframes ar-shot{ to{ transform:translate(var(--tx), var(--ty)) scale(1.5) rotate(200deg); opacity:.2; } }

/* ── 상점 · 순위판 ── */
.arena .ar-shop, .arena .ar-board{ position:absolute; left:0; right:0; top:var(--bar-h, 56px); bottom:0; z-index:4; display:flex; align-items:flex-start; justify-content:center; padding:24px 16px; background:rgba(6,11,25,.72); overflow:auto; animation:ar-fade .2s; }
.arena .ar-shop-in, .arena .ar-board-in{ --c:16px; width:min(760px, 100%); margin:auto; padding:18px 22px 22px; }
.arena .ar-shop-h, .arena .ar-board-h{ display:flex; align-items:center; gap:12px; }
.arena .ar-shop-h > b, .arena .ar-board-h > b{ font-size:var(--g-fs-h); font-weight:900; color:var(--g-gold-hi); } .arena .ar-shop-h .ar-x, .arena .ar-board-h .ar-x{ margin-left:auto; }
.arena .ar-gold2 b{ font-size:1.0625rem; }
.arena .ar-shop-p{ margin:6px 0 14px; font-size:.8125rem; color:var(--g-ink-soft); }
.arena .ar-goods{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.arena .ar-good{ display:grid; grid-template-columns:52px minmax(0, 1fr); grid-template-areas:"i t" "b b"; gap:8px 12px; padding:12px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); border-radius:4px; }
.arena .ar-good img{ grid-area:i; width:52px; height:52px; border-radius:4px; box-shadow:0 0 0 1.5px var(--g-line); }
.arena .ar-good > div{ grid-area:t; } .arena .ar-good b{ font-size:.9375rem; font-weight:900; } .arena .ar-good b small{ color:var(--g-cyan); }
.arena .ar-good p{ margin:3px 0 0; font-size:.8125rem; line-height:1.5; color:var(--g-ink-soft); }
.arena .ar-good.own{ box-shadow:inset 0 0 0 1.5px rgba(95,224,240,.5); background:rgba(95,224,240,.06); }
.arena .ar-buy{ grid-area:b; display:flex; align-items:center; justify-content:center; gap:2px; flex-wrap:wrap; border:0; padding:9px 10px; font-size:.9375rem; font-weight:900; color:#1a1102; background:linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); border-radius:3px; }
.arena .ar-buy small{ flex:1 1 100%; font-size:var(--g-fs-micro); font-weight:700; }
.arena .ar-buy small:empty{ display:none; }
.arena .ar-buy:disabled{ background:rgba(255,255,255,.08); color:var(--g-ink-mute); cursor:default; }
.arena .ar-board table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:.875rem; font-variant-numeric:tabular-nums; }
.arena .ar-board th{ text-align:left; font-size:var(--g-fs-micro); letter-spacing:.1em; color:var(--g-gold); padding:6px 8px; border-bottom:1px solid var(--g-line); }
.arena .ar-board td{ padding:8px; border-bottom:1px solid rgba(255,255,255,.07); }
.arena .ar-board td i{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.arena .ar-board tr.me td{ background:rgba(226,189,94,.12); }
.arena .ar-board-in{ overflow-x:auto; }

/* ── 기력 0 · 귀환 · 알림 · 효과 ── */
.arena .ar-dead{ position:absolute; inset:0; z-index:7; display:grid; place-items:center; background:rgba(20,24,34,.55); -webkit-backdrop-filter:grayscale(1) blur(2px); backdrop-filter:grayscale(1) blur(2px); animation:ar-fade .3s; }
.arena .ar-dead-in{ text-align:center; } .arena .ar-dead-in b{ display:block; font-size:var(--g-fs-h); font-weight:900; color:#ffd0d4; }
.arena .ar-dead-n{ display:block; font-size:4.5rem; font-weight:900; line-height:1.1; color:#fff; font-variant-numeric:tabular-nums; text-shadow:0 0 24px rgba(239,90,102,.7); }
.arena .ar-dead-in p{ margin:0; color:var(--g-ink-soft); }
.arena .ar-chan{ --p:0; position:absolute; left:50%; bottom:calc(120px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:3; pointer-events:none; }
.arena .ar-chan-in{ display:flex; flex-direction:column; align-items:center; gap:6px; } .arena .ar-chan-in span{ font-size:var(--g-fs-small); font-weight:800; color:#cfe6ff; text-shadow:0 1px 3px #000; }
.arena .ar-chan-in i{ width:64px; height:64px; border-radius:50%; background:conic-gradient(#7fc8ff calc(var(--p) * 360deg), rgba(255,255,255,.12) 0); -webkit-mask:radial-gradient(circle, transparent 55%, #000 57%); mask:radial-gradient(circle, transparent 55%, #000 57%); }
.arena .ar-ann{ position:absolute; left:0; right:0; top:24%; z-index:8; display:grid; justify-items:center; }
.arena .ar-ann-i{ grid-area:1 / 1; padding:10px 60px; text-align:center; animation:ar-annin .45s var(--g-ease); background:linear-gradient(90deg, transparent, rgba(6,11,25,.78) 20%, rgba(6,11,25,.78) 80%, transparent); border-top:1px solid var(--g-line); border-bottom:1px solid var(--g-line); }
.arena .ar-ann-i span{ font-size:clamp(1.25rem, 1rem + 1.2vw, 2rem); font-weight:900; letter-spacing:.02em; background:linear-gradient(180deg, #fff9e2, var(--g-gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.arena .ar-ann-i.out{ animation:ar-annout .4s forwards; }
@keyframes ar-annin{ from{ opacity:0; transform:scaleX(.6); letter-spacing:.3em; } }
@keyframes ar-annout{ to{ opacity:0; transform:translateY(-12px); } }
.arena .ar-ann-i.small span, .arena .ar-ann-i.peer span{ font-size:clamp(.9375rem, .9rem + .3vw, 1.125rem); }
.arena .ar-ann-i.peer span{ background:linear-gradient(180deg, #e6fdff, var(--g-cyan)); -webkit-background-clip:text; background-clip:text; }
.arena .ar-ann-i.down span, .arena .ar-ann-i.boss span{ background:linear-gradient(180deg, #ffe0e3, var(--g-red)); -webkit-background-clip:text; background-clip:text; }
.arena .ar-ann-i.lvl span, .arena .ar-ann-i.ult span{ background:linear-gradient(180deg, #fff, var(--g-cyan)); -webkit-background-clip:text; background-clip:text; }
.arena .ar-ann-i.streak span{ background:linear-gradient(180deg, #fff3c4, #ff9b5e); -webkit-background-clip:text; background-clip:text; }
.arena .ar-ann-i.win span{ font-size:clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.arena .ar-float{ position:absolute; z-index:9; font-style:normal; font-weight:900; font-size:1rem; color:var(--g-gold-hi); text-shadow:0 1px 3px #000; white-space:nowrap; pointer-events:none; transform:translateX(-50%); animation:ar-float 1.2s var(--g-ease) forwards; }
.arena .ar-float.score{ color:#fff; } .arena .ar-float.hurt{ color:#ff9aa4; } .arena .ar-float.shield, .arena .ar-float.heal{ color:var(--g-cyan); } .arena .ar-float.buy{ color:var(--g-gold); }
@keyframes ar-float{ from{ opacity:0; transform:translate(-50%, 6px) scale(.8); } 20%{ opacity:1; transform:translate(-50%, -8px) scale(1.1); } to{ opacity:0; transform:translate(-50%, -54px); } }
.arena .ar-conf{ position:absolute; z-index:9; width:8px; height:12px; pointer-events:none; animation:ar-conf 1.2s ease-out forwards; }
@keyframes ar-conf{ to{ transform:translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity:0; } }
.arena.hurt::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:9; box-shadow:inset 0 0 120px 30px rgba(239,90,102,.6); animation:ar-hurt .5s ease-out forwards; }
@keyframes ar-hurt{ to{ opacity:0; } }
.arena.sprinting::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(95,224,240,.18) 80%), repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 7deg, rgba(223,252,255,.07) 7deg 8deg);
  -webkit-mask:radial-gradient(ellipse at center, transparent 50%, #000 85%); mask:radial-gradient(ellipse at center, transparent 50%, #000 85%); }

/* ── 승리 ── */
.arena .ar-win{ --tc:var(--g-gold); position:absolute; left:0; right:0; top:var(--bar-h, 56px); bottom:0; z-index:6; overflow:auto; padding:24px 16px;
  background:radial-gradient(900px 500px at 50% 10%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 65%), rgba(5,10,24,.94); animation:ar-fade .4s; }
.arena .ar-win-in{ --c:20px; width:min(820px, 100%); margin:0 auto; padding:28px 32px 24px; display:grid; gap:20px; }
.arena .ar-win-h{ text-align:center; }
.arena .ar-win-h h2{ margin:4px 0 6px; font-size:clamp(3rem, 2.2rem + 4vw, 5rem); font-weight:900; line-height:1; letter-spacing:.04em;
  background:linear-gradient(180deg, #fffbe8, var(--g-gold) 55%, #a87a1c); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 0 rgba(0,0,0,.4)); animation:ar-winin .8s var(--g-ease); }
@keyframes ar-winin{ from{ transform:scale(1.6); opacity:0; letter-spacing:.3em; } }
.arena .ar-win-s{ margin:0; color:var(--g-ink-soft); font-size:.9375rem; }
.arena .ar-win-m{ display:grid; grid-template-columns:240px minmax(0, 1fr); gap:24px; align-items:center; }
.arena .ar-tier{ text-align:center; } .arena .ar-tier img{ width:100%; max-width:220px; aspect-ratio:1; animation:ar-heroin .9s var(--g-ease); }
.arena .ar-tier b{ display:block; font-size:var(--g-fs-h); font-weight:900; color:var(--tc); text-shadow:0 0 18px color-mix(in srgb, var(--tc) 60%, transparent); }
.arena .ar-tier span{ font-size:var(--g-fs-small); color:var(--g-ink-soft); }
.arena .ar-final small{ display:block; font-size:var(--g-fs-small); font-weight:800; letter-spacing:.14em; color:var(--g-gold); }
.arena .ar-final b{ font-size:clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight:900; font-variant-numeric:tabular-nums; color:var(--g-ink); }
.arena .ar-stats{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 20px; margin:12px 0 0; }
.arena .ar-stats div{ display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.arena .ar-stats dt{ font-size:.8125rem; color:var(--g-ink-soft); } .arena .ar-stats dd{ margin:0; font-weight:800; font-variant-numeric:tabular-nums; }
.arena .ar-word{ margin-top:12px; font-size:.9375rem; color:var(--g-ink-soft); } .arena .ar-word b{ color:var(--g-gold-hi); }
.arena .ar-word:empty{ display:none; }
.arena .ar-win-rank b{ display:block; font-size:.875rem; font-weight:900; color:var(--g-gold); margin-bottom:6px; }
.arena .ar-win-rank[hidden]{ display:none; }
.arena .ar-win-cert{ display:none; }
.arena .ar-win-b{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 14px; }

/* ── 손가락 기기: 조이스틱(왼쪽 아래) · 스킬은 점프 단추 둘레에 둥글게(오른쪽 아래) ── */
.arena.touch .ar-dock{ left:calc(118px + env(safe-area-inset-left, 0px)); right:calc(160px + env(safe-area-inset-right, 0px)); transform:none; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); padding:8px 10px; gap:8px; justify-content:center; flex-wrap:wrap; z-index:3; }
.arena.touch .ar-face{ width:44px; height:44px; } .arena.touch .ar-lv{ min-width:18px; height:18px; font-size:10px; }
.arena.touch .ar-bars{ width:auto; min-width:80px; flex:1 1 auto; } .arena.touch .ar-me{ flex:1 1 auto; min-width:0; }
.arena.touch .ar-hp{ height:12px; } .arena.touch .ar-stat .ar-hpn{ display:none; }
.arena.touch .ar-skills{ position:fixed; right:0; bottom:0; width:0; height:0; }
.arena.touch .ar-sk{ position:fixed; width:50px; height:50px; border-radius:50%; } .arena.touch .ar-sk img, .arena.touch .ar-sk .ar-cd{ border-radius:50%; }
.arena.touch .ar-sk em{ bottom:-6px; font-size:9px; line-height:13px; }
/* 점프 단추(오른쪽 16 · 아래 30)를 둘러싼 부채꼴: Q W E 가 가까이, 궁극기 R 은 크게, 귀환 B 는 작게 위쪽 */
.arena.touch .ar-sk[data-s="q"]{ right:calc(90px + env(safe-area-inset-right, 0px)); bottom:calc(24px + env(safe-area-inset-bottom, 0px)); }
.arena.touch .ar-sk[data-s="w"]{ right:calc(96px + env(safe-area-inset-right, 0px)); bottom:calc(82px + env(safe-area-inset-bottom, 0px)); }
.arena.touch .ar-sk[data-s="e"]{ right:calc(40px + env(safe-area-inset-right, 0px)); bottom:calc(100px + env(safe-area-inset-bottom, 0px)); }
.arena.touch .ar-sk[data-s="r"]{ right:calc(94px + env(safe-area-inset-right, 0px)); bottom:calc(142px + env(safe-area-inset-bottom, 0px)); width:56px; height:56px; }
.arena.touch .ar-sk[data-s="b"]{ right:calc(26px + env(safe-area-inset-right, 0px)); bottom:calc(160px + env(safe-area-inset-bottom, 0px)); width:40px; height:40px; }
.arena.touch .ar-tip{ display:none; }
.arena.touch .ar-bag{ gap:6px; } .arena.touch .ar-slots{ display:none; }
.arena.touch .ar-slots:has(.use){ display:flex; } .arena.touch .ar-slot:not(.use){ display:none; }
.arena.touch .ar-shop-b{ padding:5px 8px; } .arena.touch .ar-shop-b em{ display:none; }
.arena.touch .ar-mini{ width:112px; height:112px; bottom:auto; top:var(--g-top); right:8px; padding:3px; }
.arena.touch .ar-mini.big{ width:min(340px, calc(100vw - 16px)); height:min(340px, calc(100vw - 16px)); z-index:5; }
.arena.touch .ar-mini-z{ width:22px; height:22px; font-size:12px; left:5px; top:5px; }
.arena.touch .ar-rank{ top:calc(var(--g-top) + 120px); right:8px; width:112px; padding:4px 6px; }
.arena.touch .ar-rank ol{ display:none; } .arena.touch .ar-rank-h{ flex-direction:column; gap:0; padding:2px; } .arena.touch .ar-rank-h span{ font-size:10px; }
.arena.touch .ar-cardwrap{ padding-bottom:calc(210px + env(safe-area-inset-bottom, 0px)); justify-content:flex-start; }
.arena.touch .ar-chan{ bottom:calc(200px + env(safe-area-inset-bottom, 0px)); }
/* 태블릿 · 휴대폰: 위 가운데 판 대신 진행판 안에 탑 줄 · 점수 */
@media (max-width:1023.98px){
  .arena .ar-arrow{ bottom:calc(210px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width:767.98px){
  .arena{ --g-cut:10px; }
  .arena .ar-card{ padding:var(--g-sp-16); } .arena .ar-q{ margin:10px 0 12px; }
  .arena .ar-a > button, .arena .ar-ord button{ padding:11px 12px; font-size:.875rem; }
  .arena .ar-f.haspic{ grid-template-columns:84px minmax(0, 1fr); }
  .arena .ar-boss{ grid-template-columns:60px minmax(0, 1fr); padding:8px 12px; } .arena .ar-boss-i{ width:60px; height:60px; }
  .arena .ar-goods{ grid-template-columns:minmax(0, 1fr); }
  .arena .ar-shop-in, .arena .ar-board-in{ padding:14px 14px 16px; }
  .arena .ar-win-in{ padding:20px 16px; } .arena .ar-win-m{ grid-template-columns:minmax(0, 1fr); gap:8px; } .arena .ar-tier img{ max-width:160px; }
  .arena .ar-stats{ grid-template-columns:minmax(0, 1fr); gap:0; }
  .arena .ar-win-b .ar-btn{ flex:1 1 40%; }
  .arena .ar-ann-i{ padding:8px 28px; }
}
/* 가로로 눕힌 휴대폰: 토큰만 줄여 한꺼번에 촘촘하게 */
@media (orientation:landscape) and (max-height:520px){
  .arena{ --g-fs-title:1.75rem; --g-fs-h:1rem; --g-fs-q:.9375rem; --g-fs-body:.8125rem; --g-cut:9px; --g-top:calc(var(--bar-h, 44px) + 6px); }
  .arena .ar-sel{ padding:10px 14px; } .arena .ar-sel-in{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-areas:"head show" "pick show" "opts show" "go go"; gap:10px 16px; padding-bottom:64px; }
  .arena .ar-sel-h{ grid-area:head; } .arena .ar-pick{ grid-area:pick; } .arena .ar-opts{ grid-area:opts; } .arena .ar-go{ grid-area:go; } .arena .ar-show{ grid-area:show; grid-template-columns:minmax(0, 1fr); padding:12px; }
  .arena .ar-story{ display:none; } .arena .ar-stage{ min-height:120px; } .arena .ar-big{ width:130px; } .arena .ar-kit li{ grid-template-columns:32px minmax(0, 1fr); gap:8px; } .arena .ar-kit img{ width:32px; height:32px; } .arena .ar-kit p{ font-size:.75rem; }
  .arena .ar-hb b{ font-size:.8125rem; } .arena .ar-row{ grid-template-columns:60px minmax(0, 1fr); } .arena .ar-seg button{ padding:6px 8px; font-size:.8125rem; }
  .arena .ar-go{ bottom:-10px; margin:0 -14px; padding:8px 14px; }
  .arena .ar-lc{ width:120px; }
  .arena.touch .ar-mini{ width:92px; height:92px; } .arena.touch .ar-rank{ top:calc(var(--g-top) + 98px); width:92px; }
  .arena.touch .ar-dock{ left:calc(118px + env(safe-area-inset-left, 0px)); right:calc(166px + env(safe-area-inset-right, 0px)); flex-wrap:nowrap; }
  .arena .ar-cardwrap{ padding:8px 12px 8px; justify-content:flex-start; }
  .arena.touch .ar-cardwrap{ padding:8px 170px calc(8px + env(safe-area-inset-bottom, 0px)) 12px; }
  .arena .ar-card{ padding:12px 14px; } .arena .ar-q{ margin:8px 0 10px; } .arena .ar-a{ gap:6px; } .arena .ar-a > button, .arena .ar-ord button{ padding:8px 12px; }
  .arena .ar-a.ox > button i{ font-size:2rem; } .arena .ar-f.haspic{ grid-template-columns:72px minmax(0, 1fr); } .arena .ar-card-b{ margin-top:8px; }
  .arena .ar-boss{ grid-template-columns:48px minmax(0, 1fr); padding:6px 12px; } .arena .ar-boss-i{ width:48px; height:48px; } .arena .ar-boss-hp{ margin:3px 0 2px; } .arena .ar-boss-hp i{ height:10px; }
  .arena .ar-win-in{ padding:16px 20px; gap:12px; } .arena .ar-win-m{ grid-template-columns:160px minmax(0, 1fr); } .arena .ar-tier img{ max-width:140px; }
  .arena .ar-ann{ top:18%; }
}

/* 게임 중에는 아래 안내 글줄(걷기 방법 · 알림)을 수호자 판 위로 올린다 */
.arena-on .hint{ bottom:calc(116px + env(safe-area-inset-bottom, 0px)); }
/* 한 줄 화면(태블릿 · 휴대폰)에서는 수호자 고르기 줄을 고른 수호자 설명보다 먼저 */
@media (max-width:1023.98px){
  .arena .ar-sel-h{ order:0; } .arena .ar-pick{ order:1; } .arena .ar-show{ order:2; } .arena .ar-opts{ order:3; } .arena .ar-go{ order:4; }
}
/* 세로 휴대폰: 수호자 · 기력 · 골드 판은 조이스틱 위(왼쪽 아래)에 — 가운데는 아바타가 보이게 비워 둔다 */
@media (max-width:767.98px){
  .arena.touch .ar-dock{ left:calc(8px + env(safe-area-inset-left, 0px)); right:auto; bottom:calc(112px + env(safe-area-inset-bottom, 0px)); flex-wrap:nowrap; padding:6px 10px; gap:8px; }
  .arena.touch .ar-me{ flex:0 0 auto; } .arena.touch .ar-bars{ width:104px; min-width:0; flex:0 0 auto; }
}
/* 가로 휴대폰: 문제 카드가 아래 판에 가리지 않게 · 고르기 화면은 한 화면에 (얼굴 작게 · 설명 줄 줄이기 · 걷는 모습은 위 「아바타」 단추로) */
@media (orientation:landscape) and (max-height:520px){
  .arena.touch .ar-cardwrap{ padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }
  .arena .ar-sel-in{ align-items:start; grid-template-rows:auto auto 1fr auto; }
  .arena .ar-title{ margin:2px 0 4px; }
  .arena .ar-hb{ padding-bottom:6px; } .arena .ar-hb img{ width:58px; margin:6px auto 0; }
  .arena .ar-opts{ gap:6px; } .arena .ar-seg button small{ display:none; } .arena .ar-name{ padding:6px 10px; }
  .arena .ar-avrow{ display:none; } .arena .ar-room{ padding:4px 10px; font-size:.75rem; }
}

/* ── 퀘스트 배너 · 화면 크기별 ──
   손가락 기기 · 좁은 창은 미니맵이 오른쪽 위에 있으므로 그 폭만큼 양쪽을 비운다.
   휴대폰 세로는 배너가 가로 가득 → 미니맵 · 순위는 배너 바로 아래 오른쪽으로 (배너가 접히면 따라 올라감) */
.arena.touch{ --side:136px; }
@media (max-width:1023.98px){ .arena:not(.touch){ --side:156px; } }
@media (max-width:767.98px){
  .arena .ar-obj{ left:8px; right:8px; width:auto; transform:none; padding:7px 10px 11px; }
  .arena .ar-obj.mini{ padding:5px 10px 9px; }
  .arena .ar-obj-h{ gap:6px; }
  .arena .ar-obj-t{ font-size:.9375rem; } .arena .ar-obj-t em{ margin-left:4px; padding:1px 5px; }
  .arena .ar-clock{ font-size:.75rem; padding:1px 6px; } .arena .ar-score2 b{ font-size:.9375rem; }
  .arena .ar-sound{ display:none; } .arena .ar-quit{ width:24px; height:24px; }
  .arena .ar-obj-p{ font-size:.875rem; margin-top:5px; }
  .arena .ar-pips{ gap:3px; } .arena .ar-pips i{ width:15px; height:18px; } .arena .ar-pips i b{ font-size:8px; margin-top:4px; } .arena .ar-pips i.boss{ width:26px; }
  .arena .ar-mrow{ margin-top:6px; gap:8px; } .arena .ar-mw, .arena .ar-md{ font-size:.75rem; }
  .arena .ar-mini, .arena.touch .ar-mini{ top:calc(var(--g-top) + var(--obj-h, 110px) + 8px); bottom:auto; transition:top .25s var(--g-ease), width .3s var(--g-ease), height .3s var(--g-ease); }
  .arena.touch .ar-rank{ top:calc(var(--g-top) + var(--obj-h, 110px) + 128px); transition:top .25s var(--g-ease); }
  .arena:not(.touch) .ar-rank{ top:calc(var(--g-top) + var(--obj-h, 110px) + 148px); transition:top .25s var(--g-ease); }
}
@media (orientation:landscape) and (max-height:520px){
  .arena.touch, .arena{ --side:116px; }
  .arena .ar-obj{ width:min(500px, calc(100% - 2 * var(--side))); padding:5px 12px 9px; } .arena .ar-obj.mini{ padding:4px 12px 8px; }
  .arena .ar-obj-s{ margin-bottom:3px; } .arena .ar-pips i{ width:14px; height:16px; } .arena .ar-pips i b{ font-size:7.5px; margin-top:4px; } .arena .ar-pips i.boss{ width:24px; }
  .arena .ar-obj-t{ font-size:.875rem; } .arena .ar-clock{ font-size:.6875rem; padding:1px 5px; } .arena .ar-score2 b{ font-size:.875rem; }
  .arena .ar-sound{ display:none; } .arena .ar-quit{ width:22px; height:22px; font-size:11px; }
  .arena .ar-obj-p{ font-size:.75rem; line-height:1.4; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .arena .ar-mrow{ margin-top:5px; } .arena .ar-mw, .arena .ar-md{ font-size:.6875rem; }
}
/* 가운데 알림은 배너 바로 아래 (배너 높이를 따라감) */
.arena .ar-ann, .arena.touch .ar-ann{ top:calc(var(--g-top) + var(--obj-h, 120px) + 22px); transition:top .25s var(--g-ease); }

/* 움직임 줄이기 */
@media (prefers-reduced-motion:reduce){
  .arena *, .arena *::before, .arena *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .arena .ar-stage::before{ animation:none; }
}
/* 인쇄: 승리 화면의 상장만 */
@media print{
  .arena-on .arena > *:not(.ar-win){ display:none !important; }
  .arena .ar-win{ position:static; background:#fff; padding:0; overflow:visible; }
  .arena .ar-win-in{ clip-path:none; background:none; color:#222; } .arena .ar-win-in::before{ display:none; }
  .arena .ar-win-in > *:not(.ar-win-cert){ display:none !important; }
  .arena .ar-win-cert{ display:block; margin:30mm 20mm; padding:18mm 16mm; border:3px double #b88a2c; text-align:center; color:#222; font-family:var(--sans); }
  .arena .ar-win-cert::before{ content:'상 장'; display:block; font-size:34px; font-weight:900; letter-spacing:.6em; margin-bottom:12mm; }
  .arena .ar-cert-n{ display:block; font-size:24px; font-weight:800; margin-bottom:10mm; }
  .arena .ar-win-cert p{ font-size:16px; line-height:1.9; margin:0 0 14mm; }
  .arena .ar-cert-d{ font-size:14px; }
}

/* ── 장면 전환 디졸브 (2026-10-03) — 해설 투어가 장면을 바꿀 때 지금 화면을 덮어 두고 새 장면으로 녹아들 듯 바꾼다 (twin.html 의 trans) ── */
.veil{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; background:var(--deep); opacity:0; visibility:hidden; transition:opacity .9s ease, visibility 0s linear .9s; }
.veil.on{ opacity:1; visibility:visible; transition:none; }
.veil canvas, .veil img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform-origin:50% 55%; }
.veil [hidden]{ display:none; }
.veil.kb canvas, .veil.kb img{ animation:veilkb 5s cubic-bezier(.25,.6,.35,1) forwards; }
@keyframes veilkb{ from{ transform:scale(1); } to{ transform:scale(1.045); } }
@media (prefers-reduced-motion: reduce){ .veil.kb canvas, .veil.kb img{ animation:none; } .veil{ transition:opacity .35s ease, visibility 0s linear .35s; } }
/* 해설 투어 중: 걷기용 조이스틱 · 점프 단추는 숨기고, 가로로 든 휴대폰에서는 장소 띠도 숨겨 3D 화면을 넓게 (화면을 누르면 투어가 끝나고 다시 보인다) */
.viewer.touring #joy, .viewer.touring #jumpBtn{ opacity:0; pointer-events:none; transition:opacity .3s; }
@media (orientation:landscape) and (max-height:520px){ .viewer.touring .chips{ opacity:0; pointer-events:none; transition:opacity .3s; } }
/* 다른 3D 로 떠날 때 학교 색으로 덮기 (trans.dip) · 덮개 위 한 줄 */
.veil.dip{ opacity:1; visibility:visible; transition:opacity .45s ease; }
.veil .vmsg{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-family:var(--serif); font-size:clamp(18px, 3.2vw, 28px); color:var(--paper, #f6f4ee); letter-spacing:.02em; opacity:0; transition:opacity .3s ease .1s; }
.veil.dip .vmsg{ opacity:.92; }
/* 이어진 3D 단추 (실내 보기 ↔ 실외로 나가기) */
.ic-door{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4.5A1.5 1.5 0 0 1 6.5 3h8A1.5 1.5 0 0 1 16 4.5V21'/%3E%3Cpath d='M3 21h18'/%3E%3Ccircle cx='12.5' cy='12.5' r='.9' fill='%23000'/%3E%3Cpath d='M19 9l2 2-2 2M16 11h5'/%3E%3C/svg%3E"); }
.acts .lnk{ color:var(--accent2-l); font-weight:700; box-shadow:inset 0 -2px 0 var(--accent2); }
.acts .lnk:hover{ background:rgba(255,255,255,.07); }
.acts .lnk .s{ display:none; }
@media (max-width:860px), (orientation:landscape) and (max-height:520px){ .acts .lnk .l{ display:none; } .acts .lnk .s{ display:inline; } }