/* WK-18 — wukong 공통 반응형 스타일시트 (전 페이지 1개 파일 공유)
   원칙: 뷰포트별 사본 금지. 유동 단위(clamp·auto-fill)로 기본을 잡고,
   레이아웃이 실제로 달라지는 두 지점(내비 위치 760px, 2단 분할 960px)에서만 미디어쿼리를 쓴다.
   색·등급 값의 출처는 WK-05 style_guide.md, 등급 8종은 WK-17 확장분이다. */

:root{
  --bg:#12101a; --bg2:#1b1826; --panel:#201c2e; --line:#322b46;
  --ink:#efe9f7; --dim:#a99cc0; --gold:#e8b33a;
  --el-metal:#d9c27e; --el-wood:#4e9a5a; --el-water:#3b7dd8; --el-fire:#d9453c; --el-earth:#a8763e;
  --r-N:#8c8c8c; --r-R:#c9d2dc; --r-SR:#6b4fd6; --r-SSR:#e8b33a;
  --r-UR:#d64ea8; --r-AR:#4fd6e8; --r-SAR:#f58179; --r-SEC:#ffd76a;
  --pad:clamp(12px,3vw,28px);
  --nav-h:60px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100dvh; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 "Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:min(1180px,100%);margin:0 auto;padding-inline:var(--pad)}

/* ───────── 상단 바 ───────── */
.top{position:sticky;top:0;z-index:20;background:#12101ae6;backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:56px}
.brand{font-weight:800;letter-spacing:.02em;font-size:clamp(15px,2.6vw,19px);white-space:nowrap}
.brand em{font-style:normal;color:var(--gold)}
.purse{margin-left:auto;display:flex;align-items:center;gap:6px;
  font-size:clamp(12px,2.4vw,14px);color:var(--dim);white-space:nowrap}
.purse b{color:var(--gold);font-variant-numeric:tabular-nums}

/* ───────── 내비 — PC·태블릿은 상단, 모바일은 하단 탭 ───────── */
.tabs{display:flex;gap:2px;width:min(1180px,100%);margin:0 auto;padding-inline:var(--pad);
  border-bottom:1px solid var(--line)}
.tabs a{display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:48px;padding:0 clamp(10px,1.6vw,18px);border-radius:10px;
  color:var(--dim);font-size:clamp(13px,1.6vw,15px);white-space:nowrap}
.tabs a[aria-current]{color:var(--ink);background:var(--panel)}
.tabs .ico{display:none}

@media (max-width:760px){
  .tabs{position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);
    gap:0;width:100%;margin:0;background:#181423f2;
    border-top:1px solid var(--line);border-bottom:none;
    padding-inline:0;padding-bottom:env(safe-area-inset-bottom)}
  .tabs a{flex-direction:column;gap:2px;min-height:56px;border-radius:0;font-size:11px;padding:0}
  .tabs a[aria-current]{background:none;color:var(--gold);box-shadow:inset 0 2px 0 var(--gold)}
  .tabs .ico{display:block;font-size:17px;line-height:1}
  main{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* ───────── 공통 블록 ───────── */
main{padding-block:clamp(16px,3vw,32px) 40px}
section{margin-bottom:clamp(24px,4vw,44px)}
h1{font-size:clamp(20px,4.2vw,30px);line-height:1.3;margin-bottom:6px}
h2{font-size:clamp(16px,2.6vw,21px);margin-bottom:12px;color:var(--gold)}
p.lead{color:var(--dim);font-size:clamp(13px,2.2vw,15px)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:clamp(14px,2.4vw,22px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 clamp(16px,3vw,26px);border-radius:10px;border:1px solid var(--line);
  background:var(--bg2);color:var(--ink);font:inherit;font-size:clamp(14px,2.2vw,16px);cursor:pointer}
.btn.primary{background:linear-gradient(160deg,#6b4fd6,#3a2b6e);border-color:#6b4fd6;font-weight:700}
.btn.wide{width:100%}
.row{display:flex;flex-wrap:wrap;gap:10px}

/* 히어로 — 모바일 1단, 태블릿 이상 2단 */
.hero{display:grid;gap:clamp(14px,3vw,28px);align-items:center;
  grid-template-columns:1fr;
  background:radial-gradient(120% 120% at 20% 0%,#2a2140 0%,#14111c 65%);
  border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3.5vw,34px)}
@media (min-width:761px){ .hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} }
.hero .art{aspect-ratio:4/3;border-radius:14px;background:
  radial-gradient(60% 60% at 50% 40%,#6b4fd655,#0000 70%),
  linear-gradient(160deg,#5b3fa8,#2b2140 55%,#8a6a2e);
  display:grid;place-items:center;color:#ffffff26;font-size:clamp(38px,9vw,90px);font-weight:800}

/* 메뉴 타일·카드 그리드 — auto-fill 하나로 세 뷰포트를 덮는다 */
.tiles{display:grid;gap:clamp(10px,2vw,16px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(140px,42vw,220px),1fr))}
.tile{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:clamp(14px,2.4vw,20px);min-height:96px}
.tile b{display:block;font-size:clamp(15px,2.4vw,17px);margin-bottom:4px}
.tile span{color:var(--dim);font-size:clamp(12px,2vw,13.5px)}

.grid{display:grid;gap:clamp(8px,1.6vw,14px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(104px,21vw,168px),1fr))}
.card{position:relative;border-radius:10px;overflow:hidden;background:#0f0d16;
  border:2px solid var(--rc,#332c46);aspect-ratio:3/4}
.card img{width:100%;height:100%;object-fit:cover}
.card .ph{width:100%;height:100%;display:grid;place-items:center;color:#ffffff2e;
  font-size:clamp(22px,5vw,44px);font-weight:800;
  background:linear-gradient(165deg,var(--ec,#2b2140),#14111c)}
.card .cap{position:absolute;inset:auto 0 0;background:#0f0d16d9;padding:5px 6px;
  font-size:clamp(10px,1.8vw,12px);line-height:1.35}
.card .cap b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .cap span{color:var(--rc,#a99cc0);font-size:.86em}
.card.locked{filter:grayscale(1) brightness(.45)}

/* 필터 칩 — 넘치면 가로 스크롤(모바일), 넓으면 줄바꿈 */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
@media (min-width:761px){ .chips{flex-wrap:wrap;overflow:visible} }
.chip{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;padding:0 14px;
  border-radius:999px;border:1px solid var(--line);background:var(--bg2);
  color:var(--dim);font-size:13px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--panel);color:var(--ink);border-color:#6b4fd6}

/* 2단 분할 — 대전·스토리. 960px 미만은 1단으로 접힌다 */
.split{display:grid;gap:clamp(12px,2.4vw,20px);grid-template-columns:1fr}
@media (min-width:960px){ .split{grid-template-columns:minmax(0,2fr) minmax(0,1fr)} }

.slots{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(clamp(64px,14vw,96px),1fr))}
.slot{aspect-ratio:3/4;border:1px dashed var(--line);border-radius:8px;display:grid;place-items:center;
  color:#5f5578;font-size:clamp(11px,2vw,13px);background:#171325}

.list{display:grid;gap:10px}
.item{display:grid;gap:4px 14px;grid-template-columns:auto 1fr auto;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:clamp(10px,2vw,16px);min-height:64px}
.item .no{width:38px;height:38px;border-radius:9px;background:#2a2140;display:grid;place-items:center;
  color:var(--gold);font-weight:700;font-size:14px}
.item b{font-size:clamp(14px,2.2vw,16px)}
.item small{grid-column:2;color:var(--dim);font-size:clamp(11.5px,1.9vw,13px)}
.item .st{font-size:12px;color:var(--dim);white-space:nowrap}
@media (max-width:420px){
  .item{grid-template-columns:auto 1fr}
  .item .st{grid-column:2;justify-self:start}
}

.bar{height:8px;border-radius:99px;background:#2a2438;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#6b4fd6,var(--gold))}

.foot{color:#6f6588;font-size:12px;padding:24px 0 8px;border-top:1px solid var(--line);margin-top:8px}