/* 파란 UI 공통 틀 (6단계 U1, 파란UI-계획.md, S1 시안 승인 2026-10-21).
   맨 마지막에 불러와 옛 위쪽 띠(qplay·quiz-hud·world-explorer)를 덮는다. 옛 규칙은 화면을 옮긴 뒤 지운다.
   테두리 글씨 글꼴: 메이플스토리 Bold(assets/fonts/Maplestory-사용조건.txt). */
@font-face { font-family: "QuizOutline"; src: url("./assets/fonts/MaplestoryBold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bu-rim: #c4ecff; --bu-rim2: #6fb9f2; --bu-cobalt: #4a80e4; --bu-cobalt2: #3567cf;
  /* 칸 속(우물)은 큐플레이처럼 회청빛 중간 밝기(밝기 약 30~35%). 가장 짙은 남색은 숫자 줄·이름표 같은 작은 홈(--bu-groove·--bu-navy)에만.
     (2026-10-23 큐플레이 비교: 우물이 거의 검은 남색이라 UI 화면이 '꺼진 구멍'처럼 허전해 보였음, 검증/큐플레이비교/분석.md C1) */
  --bu-well: #3d5aa6; --bu-well2: #314c94; --bu-groove: #213c86; --bu-navy: #0c2160; --bu-ink: #081a4f; --bu-sky: #7fd6ff;
  --bu-gold: #ffe36b; --bu-text: #eaf4ff;
  --bu-focus: #ffd84a; --bu-focus-dark: #fff3a0;
  --bu-line: #061a52; --bu-cap-line: #0b2a77; --bu-text-dark: #10296f; --bu-ink2: #0b2f74; /* 2026-10-26 토큰 정리: line=틀 바깥 남색 선, cap-line=제목 띠·칸 테두리 남색, text-dark=밝은 바탕 위 남색 글자, ink2=단추 글자 테두리·그림자 남색 */
  /* 글자 외곽선 스택(2026-10-26 토큰 정리, 전에는 같은 목록이 17곳에 복붙): 1px 4방향, 1px+2px 아래, 2px 4방향+3px 아래, 1px 8방향 */
  --bu-stroke-1: 0 1px 0 var(--bu-ink), 1px 0 0 var(--bu-ink), -1px 0 0 var(--bu-ink), 0 -1px 0 var(--bu-ink);
  --bu-stroke-1-drop2: 0 2px 0 var(--bu-ink), 1px 0 0 var(--bu-ink), -1px 0 0 var(--bu-ink), 0 -1px 0 var(--bu-ink);
  --bu-stroke-2-drop3: 0 2px 0 var(--bu-ink), 2px 0 0 var(--bu-ink), -2px 0 0 var(--bu-ink), 0 -2px 0 var(--bu-ink), 0 3px 0 var(--bu-ink);
  --bu-stroke-1-8: 0 1px 0 var(--bu-ink), 1px 0 0 var(--bu-ink), -1px 0 0 var(--bu-ink), 0 -1px 0 var(--bu-ink), 1px 1px 0 var(--bu-ink), -1px 1px 0 var(--bu-ink), 1px -1px 0 var(--bu-ink), -1px -1px 0 var(--bu-ink); /* 초점 고리: 밝은 바탕은 금색, 남색 바탕은 연노랑(2026-10-25 토큰 정리, 전에는 hex 7종) */
  --bu-outline: "QuizOutline", "NanumSquareRound", sans-serif;
  --qp-bottom-height: 40px;
  /* 두꺼운 창 틀(C2): 바깥 남색 홈 → 위가 밝은 은청 베벨(1366×768에서 9px) → 안쪽 남색 선 → 위가 하늘빛인 코발트 몸통.
     쓰는 법: border: var(--bu-frame-w) solid transparent; background: var(--bu-body) padding-box, var(--bu-frame) border-box; box-shadow: var(--bu-frame-shadow); */
  --bu-frame-w: 9px;
  --bu-frame: linear-gradient(#f2faff 0, #c8e2f8 26px, #a9c7ec 90px, #8fb3e3 100%);
  --bu-frame-shadow: 0 0 0 2px var(--bu-ink), 0 4px 0 2px #061a52, 0 10px 18px #04103a59, inset 0 0 0 2px var(--bu-ink);
  --bu-body: linear-gradient(#76aef3 0%, var(--bu-cobalt) 24%, var(--bu-cobalt2) 100%);
  /* 창 제목 띠(C11): 짙은 남색 알약 대신 하늘 광택 캡(위 흰 반사선 → 아래 코발트), 글자는 흰 글자 + 남색 테두리 */
  --bu-cap: linear-gradient(#e2f7ff 0%, #96d6ff 28%, #4aa3ee 60%, #2b79d9 100%);
  --bu-cap-shadow: inset 0 2px 0 #ffffffd9, inset 0 -2px 0 #1d5cc4, 0 2px 0 #061a5280;
  /* 우물 안쪽 그늘(예전 #04103a는 너무 짙어 칸이 파여 보였음) */
  --bu-well-shadow: inset 0 2px 4px #0b1f5e8c;
}
html body { --qp-top-height: 58px; }

/* 도트 아이콘(ui-icons.js px·pxImg, 2026-10-25): 1배 16px(왕관 PNG는 원본 20×19)로만, 흐림 없이. 2배가 필요하면 32px. */
.px-icon { image-rendering: pixelated; vertical-align: -3px; } /* 도트 아이콘(ui-icons.js): width·height 속성이 원본 화소, 정수 배율 */
.px-icon.px-img { width: auto; height: auto; }
.px-icon.px-tall { vertical-align: -5px; } /* 21px 높이(사람 머리) */

/* 흰 글자 + 남색 테두리(제목·탭·버튼·숫자) */
.bu-o { font-family: var(--bu-outline); color: #fff; text-shadow:
  0 2px 0 var(--bu-ink), 2px 0 0 var(--bu-ink), -2px 0 0 var(--bu-ink), 0 -2px 0 var(--bu-ink),
  2px 2px 0 var(--bu-ink), -2px 2px 0 var(--bu-ink), 2px -2px 0 var(--bu-ink), -2px -2px 0 var(--bu-ink), 0 3px 0 var(--bu-ink); }

/* ── 위쪽 띠 ── 큐플레이처럼 밝은 하늘 → 코발트 광택 띠, 맨 위 흰 반사선, 아래는 남색 홈 + 밝은 베벨로 몸통과 잇는다(C9) */
html body .top.qp-topbar{
  height: var(--qp-top-height); padding: 0 14px 0 10px; gap: 10px; display: flex; align-items: center;
  background: linear-gradient(#86cbfa 0%, #4f9cee 22%, #2c72da 62%, #2259c2 100%); border: 0; border-bottom: 3px solid var(--bu-cap-line);
  box-shadow: inset 0 2px 0 #eaf8ffd9, inset 0 -2px 0 #1a4fb0, 0 2px 0 #8fd0ff, 0 4px 0 var(--bu-line); color: var(--bu-text);
}
html body .top.qp-topbar > .nm.qp-brand { display: flex; align-items: flex-end; gap: 6px; flex: none; min-width: 0; text-shadow: none; }
.qp-logo { display: block; height: 50px; width: auto; overflow: visible; }
.qp-logo text { font-family: var(--bu-outline); font-size: 40px; stroke-linejoin: round; }
.qp-logo-shadow { fill: var(--bu-line); stroke: var(--bu-line); stroke-width: 11px; transform: translateY(2px); }
.qp-logo-rim { fill: var(--bu-cap-line); stroke: var(--bu-cap-line); stroke-width: 8px; }
.qp-logo-face { stroke: #fff; stroke-width: 2.2px; paint-order: stroke; }
.qp-logo-quiz { fill: #6fd3ff; }
.qp-logo-rest { fill: #ffffff; }
.qp-crumb { font: 800 14px "NanumSquareRound", sans-serif; color: #fff; margin-bottom: 7px; white-space: nowrap; display: flex; align-items: center; gap: 5px;
  text-shadow: var(--bu-stroke-1); }
.qp-crumb::before { content: ""; border: 5px solid transparent; border-left: 6px solid var(--bu-gold); border-right: 0; filter: drop-shadow(0 1px 0 var(--bu-ink)); }

/* 둥근 크롬 아이콘(글자 없음, 2026-10-21 사용자 선택): 짙은 파랑 유리구슬 + 위쪽 흰 반사, 그림이 가장 밝게(C9, 예전 흰 원판은 그림을 묻었음) */
html body .top.qp-topbar .icb.qp-chrome{
  width: 48px !important; height: 48px !important; padding: 0; flex: none; display: grid; place-items: center; border-radius: 50%;
  color: #0a2a77; background: radial-gradient(58% 34% at 50% 20%, #ffffffd0 0%, #ffffff00 100%), radial-gradient(110% 90% at 50% 100%, #4aa6f4 0%, #1f62d2 46%, #0f3a98 100%) !important;
  border: 2px solid var(--bu-line); box-shadow: inset 0 0 0 2px #7fc4ff, inset 0 -4px 0 #0b3a96, 0 2px 0 #051a50; transform: none; filter: none;
}
html body .top.qp-topbar .icb.qp-chrome::before, html body .top.qp-topbar .icb.qp-chrome::after { display: none; content: none; }
html body .top.qp-topbar .icb.qp-chrome :is(.candy-icon, .rich-icon) { width: 30px !important; height: 30px !important; filter: drop-shadow(0 1px 0 var(--bu-line)); }
html body .top.qp-topbar .icb.qp-chrome .qp-tool-label { display: none; }
html body .top.qp-topbar .icb.qp-chrome:is(:hover, :focus-visible) { filter: brightness(1.08); }
html body .top.qp-topbar .icb.qp-chrome:focus-visible { outline: 3px solid var(--bu-focus-dark); outline-offset: 2px; }
html body .top.qp-topbar .icb.qp-chrome:is(:active, .qp-pressed) { box-shadow: inset 0 -1px 0 #1450b8, 0 1px 0 #051a50; translate: 0 2px; scale: .96; }

/* 금화 알약 */
html body .top.qp-topbar .gold.qp-gold{
  height: 38px; min-width: 0; padding: 0 14px 0 4px; gap: 6px; display: flex; align-items: center; border-radius: 19px; flex: none;
  background: linear-gradient(#0f2a72, #091d58); border: 2px solid var(--bu-cap-line); box-shadow: inset 0 2px 3px #00000066, 0 1px 0 #bfe6ff; font-size: 0;
}
html body .top.qp-topbar .gold.qp-gold .coin { width: 30px; height: 30px; flex: 0 0 30px; margin: 0; background: none; border: 0; box-shadow: none; display: block; }
html body .top.qp-topbar .gold.qp-gold b { font: 22px var(--bu-outline); color: var(--bu-gold); text-shadow: 0 2px 0 #4a2600; letter-spacing: .5px; }
.qp-coin { display: block; }

/* 운영자 탭: 작은 주황 알약 */
html body .top.qp-topbar .qp-admin-tab { height: 32px; border-radius: 16px; font: 15px var(--bu-outline); }

/* ── 아래 바 ── 위쪽 띠와 같은 광택 띠(위 흰 반사선, 남색 홈). 가운데에는 화면마다 도움말이 흐르는 홈, 오른쪽에 전체 화면·나가기(C8:
   예전에는 '뒤로'와 '나가기' 사이 약 1000px가 빈 남색이었음) */
.qp-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--qp-bottom-height);
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: linear-gradient(#6fb6f6 0%, #3f88e6 24%, #2a68d2 64%, #2256bd 100%); border-top: 3px solid var(--bu-cap-line);
  box-shadow: inset 0 2px 0 #e2f6ffcc, 0 -2px 0 #8fd0ff;
}
.qp-bar-slot { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
/* 도움말 홈(상점은 자기 안내 줄 .qs-hint로 바꿔 끼운다) */
.qp-bar-tip { flex: 0 1 auto; max-width: 800px; min-width: 0; height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 14px; overflow: hidden; white-space: nowrap;
  background: #0a1f5c; border: 1.5px solid var(--bu-cap-line); box-shadow: inset 0 2px 3px #00000066, 0 1px 0 #bfe6ff; font: 800 14px "NanumSquareRound", sans-serif; color: #cfe6ff; }
.qp-bar-tip::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #4a2600;
  background: radial-gradient(circle at 35% 30%, #fff6c4, #ffc928 60%, #d89a10); }
.qp-bar-tip span { overflow: hidden; text-overflow: ellipsis; }
.qp-bar-tip b { color: var(--bu-gold); font-weight: 800; }
html body .qp-bottom .qp-bar-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; border-radius: 16px; cursor: pointer;
  font: 800 15px "NanumSquareRound", sans-serif !important; color: #e6f3ff !important; white-space: nowrap; min-height: 0 !important;
  background: linear-gradient(#2a5bc8, #173c94) !important; border: 1.5px solid var(--bu-line) !important; box-shadow: inset 0 1px 0 #7fb6ff !important; transform: none;
}
html body .qp-bottom .qp-bar-btn:is(:hover, :focus-visible) { filter: brightness(1.12); }
html body .qp-bottom .qp-bar-btn:focus-visible { outline: 3px solid var(--bu-focus-dark); outline-offset: 2px; }
html body .qp-bottom .qp-bar-btn.qp-bar-exit { background: linear-gradient(#f26d5c, #c4301f) !important; box-shadow: inset 0 1px 0 #ffb0a3 !important; }
.qp-bar-icon { width: 16px; height: 16px; }
html body .qp-bottom .qp-bar-btn[aria-pressed="true"] { background: linear-gradient(#ffd27a, #e88a10) !important; box-shadow: inset 0 1px 0 #fff0c4 !important; color: #fff !important; }

/* 아래 바가 있는 화면은 내용이 바 위에서 끝난다. 퀴즈 모드 화면은 U5에서 옮길 때까지 바를 숨긴다. */
body:has(#qpBottom) :is(.qq-root, #campusRoot.school-room-host, .tsplit) { bottom: var(--qp-bottom-height) !important; height: auto; }
body:has(.rq-root, .fq-root, .ox-room) #qpBottom { display: none; }
/* 서바이벌 OX는 자기 채팅 바에 뒤로·나가기가 있어 공용 아래 띠를 숨기고 맨 아래까지(예전에는 빈 띠가 두 겹이었음, C8) */
body:has(#qpBottom):has(.ox-room) :is(.qq-root, #campusRoot.school-room-host, .tsplit) { bottom: 0 !important; }
/* 자유·순서·라운드·팀 화면(index.html fqScreen): 위쪽 띠 아래 칸(free-quiz.js의 .fq-host는 방장 상자라 다른 이름). 퀴즈 맵에서는 아래 바가 없으므로 맨 아래까지.
   바닥은 로비와 같은 빛 도는 파랑(방 만들기 창 둘레가 단색 남색이라 섬처럼 떠 보였음, C7) */
.qq-fq-frame { position: absolute; left: 0; right: 0; top: var(--qp-top-height); bottom: var(--qp-bottom-height); overflow: hidden;
  background: radial-gradient(ellipse at 50% -20%, #7ab2f2 0%, #4a7ad8 45%, #3358b4 85%); }
body:has(.fq-root) .qq-fq-frame { bottom: 0; }
.qq-fq-frame > .qq-fq-mount { height: 100%; }
/* 체험 모드 상자는 아래 바 안(나가기 왼쪽)에 한 줄로 */
body:has(#qpBottom):not(:has(.rq-root, .fq-root, .ox-room)) .qp-demo-toolbar { bottom: 3px; right: 214px; z-index: 41; flex-wrap: nowrap; max-width: none;
  padding: 2px 6px; gap: 4px; border: 0; border-radius: 16px; background: #0a2066 !important; box-shadow: none; color: #bfe3ff; }
body:has(#qpBottom):not(:has(.rq-root, .fq-root, .ox-room)) .qp-demo-toolbar small { display: none; }
body:has(#qpBottom):not(:has(.rq-root, .fq-root, .ox-room)) .qp-demo-toolbar button { height: 28px; min-height: 0; padding: 0 10px; font-size: 12px; }
/* 서바이벌 OX(아래 띠 없음): 체험 모드 상자는 라운드전처럼 위 가운데로(채팅 바의 뒤로·나가기를 가리지 않게) */
html body:has(.ox-room) .qp-demo-toolbar { top: 9px; bottom: auto; right: auto; left: 50%; translate: -50% 0; z-index: 60; flex-wrap: nowrap; }
html body:has(.ox-room) .qp-demo-toolbar small { display: none; }

/* ── 알림 창(모달) ── */
html body #modal .mbox.pnl { border-radius: 18px; padding: 4px; border: 8px solid transparent;
  background: var(--bu-body) padding-box, var(--bu-frame) border-box; box-shadow: var(--bu-frame-shadow); }
html body #modal .mbox > .pnl-h { height: 32px; margin: 0 0 8px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--bu-cap); border: 2px solid var(--bu-cap-line); box-shadow: var(--bu-cap-shadow); font: 17px var(--bu-outline); color: #fff;
  text-shadow: 0 2px 0 var(--bu-ink), 2px 0 0 var(--bu-ink), -2px 0 0 var(--bu-ink), 0 -2px 0 var(--bu-ink); }
html body #modal .mbox > .pnl-h::before { display: none; }
html body #modal .mbox > .mbody { border-radius: 9px; background: #f4f9ff; color: var(--bu-text-dark); }
html body #modal .mbox:focus-visible { outline: 3px solid var(--bu-focus); outline-offset: 2px; }

/* ── 고르기 칸(select, 2026-10-25 큐플레이 비교 C17): 브라우저 기본 흰 상자·꺾쇠 대신 흰→하늘 광택 칸 + 오른쪽 둥근 파란 ▼ 단추
   (라운드 수 −/+ 단추(free-quiz.css .fq-stepper)와 같은 재질). 방 만들기 창(quizquiz.js)과 방 만들기 2단계(free-quiz.js) 둘 다. ── */
html body .qq-create select.inp, html body .fq-fields select { appearance: none; -webkit-appearance: none; height: 42px; padding: 0 46px 0 12px; border-radius: 10px; border: 2px solid var(--bu-ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%239ddcff'/%3E%3Cstop offset='.46' stop-color='%2352b4f7'/%3E%3Cstop offset='.52' stop-color='%232a83de'/%3E%3Cstop offset='1' stop-color='%231c66c8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='15' cy='15' r='13' fill='url(%23g)' stroke='%23081a4f' stroke-width='2'/%3E%3Cpath d='M9 12.5h12l-6 7.5z' fill='%23fff' stroke='%23081a4f' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 5px center / 30px 30px, linear-gradient(#ffffff, var(--bu-rim));
  box-shadow: inset 0 2px 0 #ffffff, 0 2px 0 var(--bu-line); color: var(--bu-ink); font: 800 18px "NanumSquareRound", sans-serif; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 상태는 알약 단추와 같은 규칙(DESIGN.md Buttons): hover 밝게, focus 노란 테(옆 입력 칸과 같은 3px·offset 1px), disabled 회청 */
html body :is(.qq-create select.inp, .fq-fields select):hover:not(:disabled) { border-color: var(--bu-cobalt); filter: brightness(1.08); }
html body :is(.qq-create select.inp, .fq-fields select):focus-visible { outline: 3px solid var(--bu-focus); outline-offset: 1px; box-shadow: inset 0 2px 0 #ffffff, 0 2px 0 var(--bu-line); }
html body :is(.qq-create select.inp, .fq-fields select):disabled { cursor: default; color: #5d6a80; border-color: #6c7c94; filter: none; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='13' fill='%23ccd6e3' stroke='%236c7c94' stroke-width='2'/%3E%3Cpath d='M9 12.5h12l-6 7.5z' fill='%23fff' stroke='%236c7c94' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(#e4eaf2, #ccd6e3); }
/* ── 소리 설정 창(index.html showSoundSettings, 2026-10-25 polish B): 옛 민트 줄(candy-panels.css에서 지움) 대신 파란 UI 흰→하늘 광택 칸,
   남색 글자(var(--bu-text-dark), 하늘 바탕 위 9:1), 코발트 슬라이더(손잡이 24px), 볼륨 숫자는 굵은 남색 ── */
html body .qp-audio-row { background: linear-gradient(#ffffff, var(--bu-rim)); border: 2px solid var(--bu-rim2); border-radius: 12px; box-shadow: inset 0 1px 0 #ffffff, 0 2px 0 var(--bu-rim2); }
html body .qp-audio-label, html body .qp-audio-volume, html body .qp-audio-volume output { color: var(--bu-text-dark); }
html body .qp-audio-label small, html body .qp-audio-state { color: var(--bu-text-dark); opacity: .8; }
html body .qp-audio-volume input[type="range"] { accent-color: var(--bu-cobalt); height: 24px; }
html body .qp-audio-volume input[type="range"]:focus-visible { outline: 3px solid var(--bu-focus); outline-offset: 2px; border-radius: 12px; }
html body .qp-audio-volume output { font-weight: 800; min-width: 44px; }

/* 방 만들기 2단계의 문제 수 칸(input[type=number])도 옆 고르기 칸과 같은 단차로 한 줄 높이를 맞춘다 */
html body .fq-fields input[type=number] { box-shadow: inset 0 2px 0 #dbe9ff, 0 2px 0 var(--bu-line); }
/* 방 만들기 창의 방 제목 칸도 같은 높이·남색 테두리·같은 포커스 테 */
html body .qq-create input.inp { height: 42px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--bu-ink); background: #fff; box-shadow: inset 0 2px 0 #dbe9ff; color: var(--bu-ink); font: 800 18px "NanumSquareRound", sans-serif; }
html body .qq-create input.inp:focus { border-color: var(--bu-cobalt); box-shadow: inset 0 2px 0 #dbe9ff; outline: 3px solid var(--bu-focus); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) { html body .top.qp-topbar .icb.qp-chrome:is(:active, .qp-pressed) { translate: none; } }

/* ── U4 맵 위 UI(마을·교실·놀이터와 자유·순서·팀 퀴즈 맵 공통, 맵 그림은 그대로) ── */
html body:has(.fq-root) .sr-room-title { min-width: 180px; padding: 6px 14px 7px; border-radius: 12px; border: 2px solid var(--bu-ink); border-image: none;
  background: linear-gradient(var(--bu-cobalt), var(--bu-cobalt2)); box-shadow: inset 0 0 0 2px var(--bu-rim2), inset 0 3px 0 2px var(--bu-rim), 0 3px 0 var(--bu-line); }
html body:has(.fq-root) .sr-room-title strong { font: 21px var(--bu-outline); color: #fff; line-height: 1.3; letter-spacing: .3px;
  text-shadow: var(--bu-stroke-2-drop3); }
html body:has(.fq-root) .sr-network { margin-top: 3px; font-weight: 800; color: #cfe7ff; }
html body:has(.fq-root) .sr-friend-count { padding: 8px 14px; border-radius: 18px; font-weight: 800; color: var(--bu-text);
  background: linear-gradient(#18348a, #0b1f5e); border: 2px solid var(--bu-ink); box-shadow: inset 0 2px 0 #3a64c8, 0 3px 0 var(--bu-line); }
html body:has(.fq-root) .sr-friend-count b { font: 18px var(--bu-outline); color: var(--bu-gold); text-shadow: 0 2px 0 #4a2600; }
html body:has(.fq-root) .sr-tools { padding: 6px; border-radius: 14px; border: 2px solid var(--bu-ink);
  background: linear-gradient(var(--bu-cobalt), var(--bu-cobalt2)); box-shadow: inset 0 0 0 2px var(--bu-rim2), 0 3px 0 var(--bu-line); }
html body .sr-help { color: var(--bu-text-dark); background: #f4f9ff; border: 2px solid var(--bu-ink); border-radius: 12px; box-shadow: inset 0 0 0 3px var(--bu-rim2), 0 4px 0 var(--bu-line); }

/* 작은 지도: 코발트 창 + 남색 제목 띠 + 우물 */
html body .wm-mini { padding: 7px; border-radius: 12px; border: 2px solid var(--bu-ink); border-image: none; color: var(--bu-text);
  background: linear-gradient(var(--bu-cobalt), var(--bu-cobalt2)); box-shadow: inset 0 0 0 2px var(--bu-rim2), inset 0 3px 0 2px var(--bu-rim), 0 3px 0 var(--bu-line); }
html body .wm-mini-head { margin: 0 0 6px; height: 28px; padding: 0 4px 0 10px; border-radius: 14px;
  background: var(--bu-cap); border: 2px solid var(--bu-cap-line); box-shadow: var(--bu-cap-shadow); }
html body .school-room-host .wm-mini-head button { min-height: 22px; font: 14px var(--bu-outline); color: #fff;
  text-shadow: var(--bu-stroke-1-drop2) !important; }
html body .school-room-host .wm-mini-head .wm-fold { width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 17px; line-height: 18px; background: #2a5bc8; border: 1.5px solid var(--bu-line); }
html body .wm-mini .wm-board { border-radius: 8px; border: 2px solid var(--bu-line); box-shadow: 0 0 0 1px var(--bu-rim2); }
html body .wm-mini .wm-legend { padding-top: 6px; color: var(--bu-text); }
html body .wm-mini .wm-legend i { box-shadow: 0 0 0 1.5px var(--bu-line); }

/* M 지도 창: 코발트 테두리, 남색 제목, 왼쪽 장소 우물, 오른쪽 밝은 내용 */
html body .school-room-host .wm-dialog { padding: 8px; border-radius: 14px; border: 2px solid var(--bu-ink); color: var(--bu-text-dark);
  background: linear-gradient(var(--bu-cobalt), var(--bu-cobalt2)); box-shadow: inset 0 0 0 2px var(--bu-rim2), inset 0 3px 0 2px var(--bu-rim), 0 6px 0 var(--bu-line), 0 20px 60px #0b1440aa; }
html body .wm-header { height: 64px; padding: 0 10px 0 22px; border-radius: 12px; border: 2px solid var(--bu-cap-line);
  background: var(--bu-cap); box-shadow: var(--bu-cap-shadow); }
html body .wm-header small { margin-bottom: 2px; color: var(--bu-cap-line); font-size: 12px; letter-spacing: .5px; text-shadow: 0 1px 0 #ffffffb0; }
html body .wm-header h2 { font: 25px var(--bu-outline); color: #fff;
  text-shadow: var(--bu-stroke-2-drop3); }
html body .wm-body { margin-top: 8px; height: calc(100% - 64px - 8px - 44px - 8px); gap: 8px; }
html body .wm-places { padding: 8px; gap: 6px; border: 2px solid var(--bu-line); border-radius: 10px;
  background: linear-gradient(var(--bu-well), var(--bu-well2)); box-shadow: var(--bu-well-shadow); }
html body .school-room-host .wm-place { min-height: 58px; border-radius: 10px; border: 1.5px solid #0b2a7a; background: linear-gradient(#3c6fd8, #2a54b8); box-shadow: inset 0 1px 0 #8fc1ff; }
html body .school-room-host .wm-place:is(:hover, :focus-visible) { filter: brightness(1.1); }
html body .school-room-host .wm-place[aria-pressed="true"] { background: linear-gradient(#ffb340, #f08a12); border-color: #7a3c00; box-shadow: inset 0 1px 0 #ffe1a3, 0 0 0 2px #fff; }
html body .wm-place img { border: 1.5px solid var(--bu-line); }
html body .wm-place b { color: #fff; font: 15px var(--bu-outline); text-shadow: var(--bu-stroke-1); }
html body .wm-place small { color: #dbeaff; font-weight: 700; }
html body .school-room-host .wm-place[aria-pressed="true"] small { color: #4a2600; }
html body .wm-detail { border-radius: 10px; background: #f4f9ff; border: 2px solid var(--bu-line); }
html body .wm-detail-head h3 { font: 22px var(--bu-outline); color: var(--bu-text-dark); }
html body .wm-detail-head p { color: #3a5490; font-weight: 700; }
html body .wm-map-area { background: #dcecfb; border: 2px solid #9fcaf0; }
html body .school-room-host .wm-connections button { border-radius: 14px; font-weight: 800; color: #fff; background: linear-gradient(#4f86ea, #2c5fcc); border: 1.5px solid #0b2a7a; box-shadow: inset 0 1px 0 #a9d4ff; }
html body .wm-route { background: #e3f1fd; border: 1.5px solid #b8d8f6; color: var(--bu-text-dark); }
html body .wm-footer { height: 44px; margin-top: 8px; padding: 0 16px; border: 0; border-radius: 12px; color: #dbeaff; font-weight: 700;
  background: linear-gradient(#18348a, #0b1f5e); box-shadow: inset 0 2px 0 #3a64c8; }
html body .wm-footer .wm-legend { padding: 0; gap: 14px; font-size: 12px; }

/* 단추 앞 작은 도트 아이콘(C13, 2026-10-25): 보내기·나가기·정답 공개·입어보기 */
.btn .px-icon { margin-right: 4px; }
.qq-me-shop .candy-icon { width: 20px; height: 20px; vertical-align: -5px; margin-right: 3px; }