/* QUIZSHOP (파란 UI U2, 상점UI-계획.md S2~S6, 시안 검증/시안/S1/01-QUIZSHOP.png 승인 2026-10-21).
   blue-ui.css 다음에 불러온다. 색·글꼴 토큰은 blue-ui.css :root. */
.qs-root { position: absolute; left: 0; right: 0; top: var(--qp-top-height); bottom: var(--qp-bottom-height); z-index: 1;
  display: grid; grid-template-columns: minmax(220px, 262px) minmax(0, 1fr) minmax(250px, 314px); gap: 12px; padding: 10px 12px;
  background: radial-gradient(120% 90% at 50% -10%, #7ab2f2 0%, #4a7ad8 40%, #3358b4 75%, #2b4ca6 100%);
  font-family: "NanumSquareRound", sans-serif; color: var(--bu-text); overflow: hidden; }
.qs-root *, .qs-root *::before { box-sizing: border-box; }
.qs-root h2, .qs-root h3 { margin: 0; font-weight: normal; }

/* 두꺼운 은청 베벨 틀의 코발트 창 · 하늘 광택 제목 캡 · 회청빛 우물(blue-ui.css 토큰, 2026-10-23 큐플레이 비교 C1·C2·C11) */
.qs-win { min-height: 0; border-radius: 18px; padding: 5px; display: flex; flex-direction: column; gap: 7px;
  border: var(--bu-frame-w) solid transparent; background: var(--bu-body) padding-box, var(--bu-frame) border-box; box-shadow: var(--bu-frame-shadow); }
.qs-band { flex: none; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px;
  background: var(--bu-cap); border: 2px solid var(--bu-cap-line); box-shadow: var(--bu-cap-shadow); }
.qs-well { border-radius: 9px; background: linear-gradient(var(--bu-well), var(--bu-well2)); border: 2px solid var(--bu-line); box-shadow: var(--bu-well-shadow); }
.qs-sub { flex: none; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 14px; font-size: 16px;
  background: linear-gradient(#5a90f0, #2f61cf); border: 1px solid #0b2a7a; box-shadow: inset 0 1px 0 #a9d4ff; }
.qs-sub::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 40% 35%, #fff8c4, #ffc928 60%, #c98100); border: 1px solid #6b3a00; }

/* 알약 버튼: 파랑(보통)·주황(주요) */
.qs-pill { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 15px; cursor: pointer; border: 2px solid var(--bu-ink);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(0,0,0,.22), 0 2px 0 #051a50; white-space: nowrap; }
.qs-pill.b { background: linear-gradient(#bfe8ff 0%, #7cd0ff 35%, #1f6fe0 100%); }
.qs-pill.o { background: linear-gradient(#ffe2a0 0%, #ffc04a 35%, #f26c00 100%); }
.qs-pill.s { height: 30px; font-size: 14px; padding: 0 8px; border-width: 1.5px; }
.qs-pill:is(:hover, :focus-visible):not(:disabled) { filter: brightness(1.08); }
.qs-pill:active:not(:disabled) { translate: 0 2px; scale: .97; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 0 #051a50; }
.qs-pill:disabled { cursor: default; filter: grayscale(.75) brightness(.85); opacity: .8; }
.qs-root button:focus-visible { outline: 3px solid var(--bu-focus-dark); outline-offset: 2px; }
.qs-row { display: flex; gap: 6px; }
.qs-row .qs-pill { flex: 1; }

/* 왼쪽: 나의 캐릭터 · 착용 아이템 · 내 소지금 (슬라임 상점도 .qs-stage를 같이 씀) */
.qs-stage { flex: 1; min-height: 180px; display: grid; place-items: end center; padding-bottom: 20px; overflow: hidden; position: relative;
  background: radial-gradient(80% 60% at 50% 85%, #7cb2f4 0%, #4373d0 55%, #2d54a8 100%); }
/* 받침(C24, 2026-10-25): 캐릭터가 둥근 무대판 위에 서게(발이 판 가운데쯤, padding-bottom 20px). 판은 UI 부품이고 아바타 위에는 아무것도 얹지 않는다. */
.qs-stage::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 66%; height: 28px; translate: -50% 0; border-radius: 50%; z-index: 0;
  background: linear-gradient(#f4fbff, #b7dbf9 50%, #8fbdf0); border: 2px solid var(--bu-ink); box-shadow: inset 0 2px 0 #fff, 0 6px 0 #2c4c9e, 0 8px 0 var(--bu-ink); }
.qs-stage > svg { position: relative; z-index: 1; max-width: 100%; max-height: 100%; height: auto; }
/* 옷 상점 캐릭터는 크게 키우지 않는다: 큐플레이 상점처럼 칸 높이의 절반쯤(2026-10-23 사용자 "너무 크게 확대하지마", 받침대·책상은 없음).
   칸 높이는 착용 아이템·소지금을 뺀 나머지이고 캐릭터는 그 56%(1536×864에서 칸 약 340px, 캐릭터 약 190px), 발은 칸 아래 12% 자리. */
.qs-root #pvStage { flex: 1 1 0; min-height: 170px; container-type: size; place-items: center; padding-bottom: 0;
  background: radial-gradient(80% 60% at 50% 80%, #7cb2f4 0%, #4373d0 55%, #2d54a8 100%); }
.qs-root #pvStage::after { bottom: calc(12cqh - 7px); width: min(46%, 120px); height: 14px; }
.qs-root #pvStage > svg { position: relative; z-index: 1; width: auto; height: 56cqh; max-width: 100%; max-height: none; translate: 0 10cqh; }
.qs-loading { align-self: center; font: 800 15px "NanumSquareRound", sans-serif; color: #bfe3ff; }
.qs-admin-only { flex: none; }
.qs-purse { flex: none; padding: 6px 8px; }
.qs-purse table { width: 100%; border-collapse: separate; border-spacing: 0 3px; font: 700 15px "NanumSquareRound", sans-serif; }
.qs-purse :is(th, td) { padding: 4px 8px; background: var(--bu-groove); font-weight: 700; }
.qs-purse th { border-radius: 6px 0 0 6px; color: #bcd6ff; text-align: left; width: 64px; white-space: nowrap; }
.qs-purse td { border-radius: 0 6px 6px 0; text-align: right; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
.qs-purse-gold { color: var(--bu-gold) !important; }
.qs-purse-gold b { font: 15px var(--bu-outline); color: var(--bu-gold); text-shadow: 0 1px 0 #3a1d00; }
.qs-coin { display: inline-flex; vertical-align: -3px; margin-right: 3px; }
.qs-coin .qp-coin { display: block; }

/* 가운데: 탭 · 상품 칸 · 쪽 넘김 */
.qs-mid { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.qs-tabs { flex: none; display: flex; gap: 3px; padding: 0 6px; height: 34px; align-items: flex-end; overflow: hidden; }
.qs-tab { flex: none; height: 30px; padding: 0 12px; border-radius: 12px 12px 0 0; cursor: pointer; font: 800 16px "NanumSquareRound", sans-serif; color: #284c96;
  background: linear-gradient(#ffffff, #c9e3fb); border: 2px solid #0b2a7a; border-bottom: 0; }
.qs-tab.on { height: 34px; color: #fff; text-shadow: 0 1px 0 #0b2a7a; background: linear-gradient(#8fdcff, #3a8ff0); }
.qs-tab:is(:hover, :focus-visible):not(.on) { background: linear-gradient(#ffffff, #e2f2ff); }
.qs-shelf { flex: 1; border-top-left-radius: 0; padding: 8px 10px; gap: 6px; }
.qs-subrow { flex: none; display: flex; align-items: center; gap: 8px; min-height: 28px; }
.qs-chips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.qs-chip, .qs-filter button { height: 30px; padding: 0 13px; border-radius: 15px; cursor: pointer; font: 800 14px "NanumSquareRound", sans-serif; color: #dcecff;
  background: #173a8f; border: 1.5px solid var(--bu-line); box-shadow: inset 0 1px 0 #4f7fd8; }
.qs-chip.on, .qs-filter button.on { color: #082060; background: linear-gradient(#ffffff, #bfe6ff); }
.qs-chip-label { font: 800 15px "NanumSquareRound", sans-serif; color: #fff; padding-left: 4px; text-shadow: var(--bu-stroke-1); }
/* 칸 칩과 색 시리즈 칩 사이 세로 줄(상의 탭: 상의·겉옷 | 캔디·파스텔) */
.qs-chip-sep { width: 2px; height: 20px; margin: 0 3px; border-radius: 1px; background: #0b2a7a; box-shadow: 1px 0 0 #4f7fd8; align-self: center; }
.qs-filter { display: flex; gap: 3px; flex: none; }
.qs-feature { flex: none; padding: 7px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qs-grid { flex: 1; min-height: 0; padding: 7px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qs-feature .qs-cell { height: 108px; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-template-rows: 22px minmax(0, 1fr); grid-template-areas: "pic name" "pic acts"; column-gap: 6px; row-gap: 3px; }
.qs-feature .qs-acts { align-self: end; }
.qs-empty-note { grid-column: 1 / -1; grid-row: 1 / -1; margin: auto; padding: 16px; text-align: center; font: 800 15px/1.6 "NanumSquareRound", sans-serif; color: #bcd8ff; }
.qs-pager { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; height: 32px; }
.qs-pager b { font-size: 16px; min-width: 56px; text-align: center; }
.qs-arrow { width: 28px; height: 28px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 2px solid var(--bu-ink);
  background: radial-gradient(70% 60% at 50% 25%, #fff, #9fdcff 45%, #2f7fe6); box-shadow: 0 2px 0 #051a50; }
.qs-arrow svg { width: 12px; height: 12px; fill: none; stroke: #0a2a77; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.qs-arrow:disabled { opacity: .4; cursor: default; }

/* 상품 칸: 흰 그림 상자가 칸 높이 대부분 + 이름 띠 + 알약 둘. 가격은 그림 상자 왼쪽 아래에 겹친 알약(한 층을 줄여 그림을 키움,
   2026-10-23 큐플레이 비교 C5·C20: 그림이 넓고 낮은 흰 상자의 18~25%만 차지해 허전했음). 그림은 상자에 맞춰 키운다. */
.qs-cell { position: relative; min-width: 0; min-height: 0; border-radius: 9px; padding: 5px; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "pic" "name" "acts"; gap: 3px; cursor: pointer;
  background: linear-gradient(#6aa6f2, #4a84e2); border: 2px solid #0b2a7a; box-shadow: inset 0 0 0 1px #c4e6ff, inset 0 2px 0 #e2f4ff; }
.qs-cell.on { box-shadow: inset 0 0 0 2px var(--bu-gold), 0 0 0 2px var(--bu-gold); }
.qs-pic { grid-area: pic; min-height: 0; width: 100%; padding: 0; position: relative; display: block; overflow: hidden; cursor: pointer;
  border-radius: 6px; background: radial-gradient(circle closest-side at 50% 50%, #e2eefb 0 84%, #e2eefb00 86%), linear-gradient(#ffffff, #eef6ff); border: 2px solid #9fd2ff; }
/* 그림(SVG)은 상자에 맞춰 키운다(비율 그대로, 예전에는 64px 그대로라 큰 상자에서 작았음). 옅은 원판이 크림·연분홍 옷의 윤곽을 살린다. */
.qs-pic > svg { position: absolute; left: 6%; top: 6%; display: block; width: 88%; height: 88%; }
.qs-pic > .qps { position: absolute; left: 50%; top: 56%; translate: -50% -50%; }
.qs-pic > .qs-none-x { position: absolute; inset: 0; display: grid; place-items: center; }
.qs-pic:is(:hover, :focus-visible):not(:disabled) { border-color: var(--bu-gold); }
.qs-name { grid-area: name; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
  background: linear-gradient(#2c58bd, #1f449c); font: 800 14px "NanumSquareRound", sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-price { grid-area: pic; align-self: end; justify-self: start; z-index: 1; margin: 0 0 4px 4px; height: 20px; display: flex; align-items: center; gap: 1px; padding: 0 7px 0 2px; border-radius: 10px;
  background: #0b1f5ee0; border: 1.5px solid #ffffffd9; box-shadow: 0 1px 0 #0b1f5e66; pointer-events: none; font: 15px var(--bu-outline); color: var(--bu-gold); text-shadow: 0 2px 0 #3a1d00, 1px 0 0 #3a1d00, -1px 0 0 #3a1d00, 0 -1px 0 #3a1d00, 1px 1px 0 #3a1d00, -1px 1px 0 #3a1d00, 1px -1px 0 #3a1d00, -1px -1px 0 #3a1d00; white-space: nowrap; }
.qs-price-own { font: 800 14px "NanumSquareRound", sans-serif; color: #e2ffef; text-shadow: 0 1px 0 #0b3a2a, 1px 0 0 #0b3a2a, -1px 0 0 #0b3a2a, 0 -1px 0 #0b3a2a; }
.qs-price-wait { font: 800 14px "NanumSquareRound", sans-serif; color: #fff; text-shadow: var(--bu-stroke-1); }
.qs-acts { grid-area: acts; display: flex; gap: 4px; }
/* 가진 것은 초록 알약, 준비 중은 그림 위 글자가 이미 있어 가격 알약을 숨긴다. 그림 오른쪽 위 '가진 것' 표는 가격 알약과 겹쳐 뺀다. */
.qs-cell.own .qs-price { background: #0b6b3f; padding-left: 7px; }
.qs-wait .qs-price, .qs-own { display: none; }
.qs-acts .qs-pill { flex: 1; padding: 0; }
.qs-tag { position: absolute; left: -4px; top: -6px; z-index: 2; padding: 1px 6px; border-radius: 7px; rotate: -8deg; pointer-events: none;
  font: 12px var(--bu-outline); color: #fff; text-shadow: 0 1px 0 #6b1300; background: linear-gradient(#ff8a5c, #e8360c); border: 1.5px solid #4a0c00; }
.qs-tag.new { background: linear-gradient(#7af0a0, #13a54a); border-color: #063d1b; text-shadow: 0 1px 0 #063d1b; }
.qs-own { position: absolute; right: 3px; top: 3px; padding: 1px 5px; border-radius: 6px; font: 800 11px "NanumSquareRound", sans-serif; color: #fff;
  background: #1aa86a; border: 1.5px solid #fff; }
.qs-wait .qs-pic > svg { filter: grayscale(.85) opacity(.45); }
.qs-wait-label { position: absolute; inset: auto 0 38% 0; font-size: 15px; text-align: center; }
.qs-wait .qs-name { background: #3a5294; color: #d6e2fa; }
.qs-none-x { font: 900 30px "NanumSquareRound", sans-serif; color: #7f9fd8; }
.qs-empty { display: grid; grid-template-areas: none; grid-template-rows: none; place-items: center; cursor: default; background: linear-gradient(#5677c2, #4867b4); box-shadow: inset 0 0 0 1px #8fb4ec; }
/* 빈 칸 도장: 볼록한 원판에 EMPTY(빈 상품 칸·빈 가방 칸, C6: 예전에는 바탕과 거의 같은 색 글자만 있었음) */
.qs-empty-disc { display: grid; place-items: center; width: min(72%, 48px); aspect-ratio: 1; border-radius: 50%; font: 11px/1 var(--bu-outline); font-style: normal; letter-spacing: .3px; color: #fff;
  background: radial-gradient(circle at 40% 30%, #a9c4f4, #6a8ad2 58%, #4f6ebc); border: 2px solid #2a4486; box-shadow: inset 0 2px 0 #d6e6ff, inset 0 -2px 0 #3e5ca8, 0 2px 0 #1f3a80;
  text-shadow: var(--bu-stroke-1); }
.qs-empty .qs-empty-disc { width: min(52%, 68px); font-size: 13px; }
/* 도장 아래 줄의 빈 가방 칸은 조용하게(EMPTY 도장이 벽처럼 늘어서지 않게, look-8) */
.qs-slot-empty.quiet { background: linear-gradient(#4b69b5, #4362ae); box-shadow: inset 0 0 0 1px #6f8fd0; }
/* 가방이 한 줄 높이도 안 될 만큼 낮으면 칸 높이를 가방에 맞춘다(index.html fitSlots, code-1) */
.qs-bag.qs-bag-short { grid-template-rows: minmax(0, 1fr); }
.qs-bag.qs-bag-short .qs-slot { aspect-ratio: auto; }

/* 칸 설명 상자(마우스를 올리거나 키보드로 고를 때) */
.qs-tip { display: none; position: absolute; z-index: 30; left: 50%; top: calc(100% - 4px); translate: -50% 0; width: 210px; padding: 9px 11px; border-radius: 8px; pointer-events: none;
  background: rgba(8, 26, 79, .94); border: 1.5px solid var(--bu-rim2); font: 700 14px/1.55 "NanumSquareRound", sans-serif; color: var(--bu-text); text-align: left; }
.qs-tip b { display: block; margin-bottom: 2px; font: 15px var(--bu-outline); color: var(--bu-gold); font-weight: normal; }
.qs-cell:is(:hover, :focus-within) .qs-tip { display: block; }
.qs-grid .qs-cell:nth-child(n+5) .qs-tip { top: auto; bottom: calc(100% - 4px); }

/* 착용 아이템(왼쪽, 캐릭터 아래) · 선택한 아이템 · 아이템가방(오른쪽) */
.qs-slots { flex: none; padding: 7px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.qs-worn { grid-auto-rows: 68px; padding: 6px; gap: 5px; }
/* 착용 칸은 기본 8칸 + 입은 장신구(2026-10-25, main). 칸 높이 68px(얼굴 표정이 보이게, polish C)이라 석 줄까지 보이고 더 입으면 안에서 스크롤(왼쪽 창이 캐릭터 칸을 밀지 않게) */
.qs-worn { max-height: calc(68px * 3 + 5px * 2 + 12px + 4px); overflow-y: auto; }
/* 가방: 칸은 정사각에 가깝게(세로 1.2배) 위에서부터, 줄 수는 가방 높이에 맞춰 index.html fitSlots가 정한다(예전에는 8칸이 남는 높이로 길게 늘어났음, C5) */
.qs-bag { flex: 1; min-height: 0; overflow: hidden; grid-auto-rows: auto; align-content: start; }
.qs-bag .qs-slot { aspect-ratio: 1 / 1.2; }
/* 얼굴·머리 그림(avatar.js focus, 1배 그대로): 이름표(19px) 위 창의 가운데에 얼굴을 두어 눈·입이 이름표에 가리지 않게.
   1배 머리는 66×52px라 착용 칸(62px)과 가방 칸(세로 1.2배)에 눈썹~턱이 들어온다(2026-10-25 polish C, 예전엔 입·턱이 잘렸음). */
.qs-slot.full > .qp-av-clip { bottom: 19px; }
/* 착용 칸(68px → 창 45px)에서는 얼굴을 3px 올려 눈·코·입이 모두 들어오게(정수 px만, 도트 그대로). 가방 칸(세로 1.2배, 창 52px)은 머리 전체가 들어온다. */
.qs-worn .qs-slot.full > .qp-av-clip > .qp-av-focus { top: calc(50% - 3px); } /* translate는 avatar.css가 얼굴 초점에 쓰므로 건드리지 않는다 */
.qs-slot { position: relative; min-width: 0; padding: 0; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
  font: 800 12px "NanumSquareRound", sans-serif; color: #e6efff; text-shadow: 0 1px 0 var(--bu-cap-line); background: linear-gradient(#5677c2, #4867b4); border: 2px solid #0b2a7a; box-shadow: inset 0 0 0 1px #8fb4ec; }
.qs-slot.full { cursor: pointer; background: linear-gradient(#ffffff, #e5f1ff); box-shadow: inset 0 0 0 2px #8fcaff; padding-bottom: 18px; }
.qs-slot.full > svg { position: absolute; left: 8%; top: 5%; width: 84%; height: calc(93% - 19px); }
.qs-slot.on { box-shadow: inset 0 0 0 2px var(--bu-gold), 0 0 0 2px var(--bu-gold); }
.qs-slot.qs-wait > svg { filter: grayscale(.85) opacity(.5); }
.qs-slot .lbl { position: absolute; left: 0; right: 0; bottom: 0; height: 19px; display: grid; place-items: center; padding: 0 2px; overflow: hidden; white-space: nowrap;
  background: #1f449c; color: #fff; font: 800 13px "NanumSquareRound", sans-serif; }
/* 빈 착용 칸: 부위 실루엣 + 이름표(index.html SLOT_ICONS) */
.qs-slot-empty { padding-bottom: 18px; }
.qs-slot-ico { width: 28px; height: 28px; fill: none; stroke: #ffffffb8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 var(--bu-cap-line)); }
.qs-slot-empty .lbl { background: #3a5aa8; color: #e6efff; }
.qs-bag .qs-slot-empty { padding-bottom: 0; }
.qs-bagband { justify-content: space-between; padding: 0 3px; }
.qs-bagband h2 { font-size: 16px; }
.qs-bagband .qs-arrow { width: 22px; height: 22px; }
.qs-bagband .qs-arrow svg { width: 10px; height: 10px; }
.qs-info, .qs-root #shInfo { flex: none; min-height: 104px; padding: 8px !important; display: flex; gap: 8px; align-items: center; color: var(--bu-text);
  background: linear-gradient(var(--bu-well), var(--bu-well2)); }
.qs-info-note { margin: auto; text-align: center; font: 800 15px/1.6 "NanumSquareRound", sans-serif; color: #bcd8ff; }
.qs-info:has(> .qs-info-note:only-child), .qs-root #shInfo:has(> .qs-info-note:only-child) { min-height: 0; }
.qs-info > .qs-info-note:only-child { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 2px 4px; word-break: keep-all; text-wrap: balance; }
.qs-info > .qs-info-note:only-child::before { content: ""; flex: none; width: 22px; height: 22px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M9 11V4.5a1.5 1.5 0 0 1 3 0V10m0-1.5a1.5 1.5 0 0 1 3 0V11m0-1a1.5 1.5 0 0 1 3 0v4.5c0 3.5-2.4 6-6 6h-1c-2.2 0-3.6-.9-4.8-2.6L4.6 14a1.5 1.5 0 0 1 2.4-1.8L9 14.5%27 fill=%27%23fff6c8%27 stroke=%27%23081a4f%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); }
.qs-info-pic { position: relative; flex: none; width: 82px; height: 84px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(#ffffff, #e5f1ff); border: 2px solid #8fcaff; }
.qs-info-pic > svg { max-width: 92%; max-height: 92%; width: auto; height: auto; }
/* 새 아바타 원화 칸 그림(index.html shopArt): 뷰박스가 아이템에 맞춰져 있어 칸을 채운다. 옷 기록을 부르는 동안은 옅은 빛만. */
.qs-info-pic > svg.qs-art { width: 88%; height: 88%; max-width: none; max-height: none; }
.qs-art-wait { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, #d6e9ff, transparent); }
.qs-info-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.qs-info-body .shop-info-title { font: 16px var(--bu-outline); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 2px 0 var(--bu-ink), 1px 0 0 var(--bu-ink), -1px 0 0 var(--bu-ink); }
.qs-info-body .shop-detail-price { font: 800 14px "NanumSquareRound", sans-serif; color: #cfe6ff; display: flex; align-items: center; }
.qs-info-body .qs-pill { height: 32px; font-size: 14px; padding: 0 10px; }
.qs-info-warn { margin: 0; font: 800 12px/1.4 "NanumSquareRound", sans-serif; color: #ffd0c8; word-break: keep-all; }

/* 아래 바의 안내 줄 */
.qs-hint { text-overflow: ellipsis; }

/* 낮은 노트북 화면(높이 800px 아래): 추천 칸을 가로형으로 줄여 아래 상품 그림 자리를 확보 */
@media (max-height: 800px) and (min-width: 1000px) {
  .qs-acts .qs-pill .px-icon { display: none; } /* 낮은 화면(1280×720·125%)에서는 칸 알약 63px에 눈 아이콘이 안 들어가 숨긴다(verify-visual-polish shop-1280) */
  /* 두꺼운 틀(9px)이 상품 그림 칸 높이를 먹지 않게 낮은 화면에서는 6px 틀 + 좁은 여백, 추천 칸 88px(1280×720에서 그림 칸 40px 이상. 캐릭터·슬라임 줄이 생긴 뒤 36px로 줄어 있었음, 2026-10-23) */
  .qs-root { padding: 8px 12px; --bu-frame-w: 6px; }
  .qs-win { padding: 4px; gap: 6px; }
  .qs-feature { padding: 6px; }
  .qs-feature .qs-cell { height: 88px; grid-template-rows: 20px minmax(0, 1fr); }
  .qs-grid .qs-pic > svg { left: 30%; width: 66%; }
  .qs-grid .qs-pic > .qps { left: 62%; }
  /* 글씨는 13px 그대로 두고 띠·알약 높이만 예전 값으로: 1280×720에서 상품 칸 아래가 5px 넘쳤음(2026-10-25 typeset) */
  .qs-cell { gap: 2px; }
  .qs-name { height: 20px; font-size: 13px; }
  .qs-pill.s { height: 26px; font-size: 13px; }
}
/* 낮은 노트북 화면(1280×720·1366×768): 캐릭터|슬라임 알약이 분류 탭 줄 오른쪽 끝에 얹히므로(ox-survival.css) 탭 줄 오른쪽을 비우고 탭을 조금 줄인다
   (글씨를 키운 뒤 1280×720에서 '장신구' 탭이 알약과 2px 겹쳤음. 예전엔 이 규칙이 ox-survival.css에 있어 여기 기본값에 덮였음, 2026-10-25) */
@media (max-height: 800px) and (min-width: 1240px) {
  .qs-tabs { padding-right: 176px; }
  .qs-tab { padding: 0 8px; font-size: 15px; }
}
/* 125% 확대 노트북(1229×691)처럼 높이 720px 아래: '이번 주 추천' 줄을 숨겨 상품 그림(도트 60px, 정수 배율 유지)이 잘리지 않게(2026-10-25 polish C, audit P2-4) */
@media (max-height: 720px) and (min-width: 1000px) {
  #shopFeatured { display: none; }
  /* 왼쪽 창이 31px 넘쳐 착용 칸을 낮춘다(얼굴은 눈까지만 보임) */
  .qs-left { gap: 6px; }
  .qs-worn { grid-auto-rows: 52px; }
  .qs-worn .qs-slot.full > .qp-av-clip > .qp-av-focus { top: 50%; }
}
/* 탭 10개(2026-10-25): 1400px 아래(1366×768)에서는 탭 글자·여백을 조금, 1300px 아래(1280×720)에서는 더 줄여 오른쪽 끝 캐릭터·슬라임 단추(ox-survival.css가 탭 줄 오른쪽 150px를 비움)와
   한 줄에 다 들어가게. 선택자는 ox-survival.css의 .qs-root:not(.qs-slime) .qs-tab보다 구체적으로. */
@media (max-width: 1400px) { .qs-root .qs-mid .qs-tabs .qs-tab { padding: 0 8px; font-size: 13px; } .qs-root .qs-mid .qs-tabs { gap: 2px; } }
@media (max-width: 1300px) { .qs-root .qs-mid .qs-tabs .qs-tab { padding: 0 6px; font-size: 12px; } }
/* 작은 화면(1000px 아래): 세 창을 세로로 쌓고 스크롤 */
@media (max-width: 999px) {
  .qs-root { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow-y: auto; }
  .qs-stage { min-height: 300px; }
  .qs-tabs { overflow-x: auto; }
  .qs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 160px; }
  .qs-feature { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qs-hint { display: none; }
  .qs-bag .qs-slot { aspect-ratio: auto; height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .qs-pill:active:not(:disabled) { translate: none; } }

/* 구매 확인 창(2026-10-25 사용자 선택 '파란 확인 창', index.html confirmPurchase): 그림 + 이름 + 값·남는 골드 + [사기][그만두기] */
.qs-confirm { display: grid; justify-items: center; gap: 10px; text-align: center; }
.qs-confirm-pic { position: relative; width: 124px; height: 124px; border-radius: 14px; background: var(--bu-well); box-shadow: var(--bu-well-shadow); overflow: hidden; } /* 칸 그림(.qp-av-clip·svg)은 .qs-pic처럼 absolute라 relative 상자가 필요 */
.qs-confirm-pic > svg { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; }
.qs-confirm-q { margin: 0; font: 800 19px "NanumSquareRound", sans-serif; color: var(--bu-text-dark); }
.qs-confirm-q b { color: var(--bu-ink2); }
.qs-confirm-gold { margin: 0; display: grid; gap: 2px; font: 800 16px "NanumSquareRound", sans-serif; color: var(--bu-text-dark); }
.qs-confirm-left { font-size: 14px; color: #2c4c9e; }
.qs-confirm .qs-coin { display: inline-block; vertical-align: -3px; margin-right: 3px; }
.qs-confirm-acts { display: flex; gap: 10px; margin-top: 4px; }
/* 알약·단추 앞 작은 도트 아이콘(C13) */
.qs-pill .px-icon, .qs-pill .qs-coin { margin-right: 0; } /* 알약은 inline-flex gap 5px가 간격을 맡는다 */