/* 말랑 놀이터(서버형) — 최종 시안 1-A2 '메이슨 자' (크림·깅엄·크라프트). 값은 design/final/tokens.md.
   css/lab.css(랩 mallang·viewer·share 원본) 위에 얹는다: 토큰을 크림·초록으로 덮고, 목록(선반·병)은 새로 그린다. */

:root {
  --bg-cream: #FBF3E3;
  --surface: #FFFBF2;
  --ink-main: #3E3226;
  --ink-icon: #5C4630;
  --muted: #9A7A55;
  --primary: #1F8A6E;
  --primary-dark: #17705A;
  --border-kraft: #D9C29C;
  --border-line: #E8D7B8;
  --dashed: #B88A55;
  --kraft-tag: #EBD2A6;
  --kraft-ink: #6B4A26;
  --kraft-stitch: #A07444;
  --shelf: #E6C38F;
  --shelf-front: #C99A5E;
  --label-paper: #FFFDF6;
  --check-band: rgba(47, 165, 132, 0.45);

  /* 랩 토큰 덮어쓰기 → 뷰어도 같은 톤으로 */
  --bg: var(--bg-cream);
  --paper: var(--surface);
  --ink: var(--ink-main);
  --ink-soft: var(--muted);
  --ink-faint: #C4AE8C;
  --pink-25: #FFFDF6;
  --pink-50: #FFFBF2;
  --pink-100: #F6E8CC;
  --pink-200: #E8D7B8;
  --pink-300: #D9C29C;
  --pink-400: #2FA584;
  --pink-500: #1F8A6E;
  --pink-600: #1F8A6E;
  --pink-700: #17705A;
  --jelly-depth: 0 3px 0 -1px #D9C29C, 0 10px 18px -12px rgba(120, 80, 30, 0.45);
  --jelly-depth-sm: 0 2px 0 -1px #D9C29C, 0 6px 12px -8px rgba(120, 80, 30, 0.4);
  --font-title: 'Jua', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --font-body: 'Jua', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --font-num: 'Gaegu', 'Jua', system-ui, sans-serif;
  color-scheme: light;
}

html { background: var(--bg-cream); -webkit-text-size-adjust: 100%; }
/* 랩 viewer.css의 html,body{overflow:hidden;height:100%}를 목록에서는 푼다(종 화면에서만 잠금) */
html, body { height: auto; min-height: 100%; overflow: visible; }
html.viewing, html.viewing body { overflow: hidden; height: 100%; }
body { margin: 0; background: var(--bg-cream); color: var(--ink-main); font-family: var(--font-title); font-weight: 400; }
button, input, textarea, select { font-family: inherit; }
[hidden] { display: none !important; }
.pc-only { display: none; }
img { -webkit-user-drag: none; }

.gingham-band {
  height: 10px;
  background-color: #fff;
  background-image: linear-gradient(90deg, var(--check-band) 50%, transparent 50%), linear-gradient(0deg, var(--check-band) 50%, transparent 50%);
  background-size: 10px 10px;
}

/* ---------- 머리: 제목 · 분류 · 촉감 ---------- */
.site-top { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.site-title { margin: 0; font-size: 30px; font-weight: 400; line-height: 1; color: var(--primary); letter-spacing: -1px; white-space: nowrap; }
.site-title a { color: inherit; text-decoration: none; }
.row-label { font-size: 12px; color: var(--muted); margin-right: 2px; flex: none; }
.cat-row, .feel-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cat-tabs, .feel-btns { display: flex; gap: 6px; align-items: center; min-width: 0; }
.top-spacer { display: none; }

.cat-tab {
  height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 4px;
  border-radius: 8px; background: #fff; color: var(--ink-main); border: 1.5px solid var(--border-kraft);
  font-size: 13px; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
}
.cat-tab img { width: 18px; height: 18px; display: block; }
.cat-tab.is-here { background: var(--primary); color: #fff; border-color: var(--primary); }
.cat-tab.is-here img { filter: drop-shadow(0 0 0.5px #fff); }
.cat-tab:disabled { opacity: .45; cursor: default; }

.feel-btn {
  flex: none; width: 36px; height: 30px; padding: 0; border-radius: 15px; border: 1px dashed var(--dashed);
  background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .2s var(--spring), background .15s, box-shadow .15s;
}
.feel-btn img { width: 20px; height: 20px; display: block; }
.feel-btn[aria-pressed='true'] { background: #DDF2EA; border: 1.5px solid var(--primary); box-shadow: 0 0 0 2px rgba(31, 138, 110, .18); }
.feel-btn.is-zero { opacity: .4; }
.feel-btn:active { transform: scale(.92); }

.filter-line { display: flex; align-items: center; gap: 10px; padding: 10px 16px 0; flex-wrap: wrap; min-height: 28px; }
.mine-toggle {
  height: 28px; padding: 0 12px; border-radius: 14px; border: 1px dashed var(--dashed); background: var(--surface);
  color: var(--ink-main); font-size: 12px; cursor: pointer;
}
.mine-toggle[aria-pressed='true'] { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.result-count { font-size: 12px; color: var(--muted); }
.text-btn { border: 0; background: none; padding: 4px 2px; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.text-btn:hover { color: var(--primary); }
.gpu-note { margin: 8px 16px 0; padding: 8px 12px; border-radius: 8px; background: #FFF4D6; border: 1px dashed var(--dashed); font-size: 13px; color: var(--kraft-ink); }

/* ---------- 선반 ---------- */
.shelves { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.shelf { display: flex; flex-direction: column; gap: 4px; scroll-margin-top: 8px; }
.shelf-head { padding: 0 16px; display: flex; align-items: baseline; gap: 6px; }
.shelf-head h2 { margin: 0; font-size: 17px; font-weight: 400; }
.shelf-head .top-name { font-size: 11px; color: var(--muted); }
.shelf-head .n { font-size: 11px; color: var(--muted); }
.shelf-head .grow { flex: 1; }
.shelf-head .all-btn { display: none; }
.shelf-nav { display: none; }
.rail-wrap { position: relative; }
.rail {
  position: relative; display: flex; gap: 12px; padding: 0 16px 16px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail::before { /* 나무 선반: 병 바닥(위에서 140px)에 붙음 — 줄 전체 폭 */
  content: ''; position: absolute; left: 0; top: 140px; height: 10px; width: var(--rail-w, 100%); min-width: 100%;
  background: var(--shelf); border-bottom: 4px solid var(--shelf-front); box-shadow: 0 6px 10px rgba(120, 80, 30, .2);
}
.shelf.expanded .rail { flex-wrap: wrap; overflow: visible; row-gap: 26px; }
.shelf.expanded .rail::before { display: none; }
.shelf.expanded .jar::after { /* 펼친 상태: 병마다 선반 조각 */
  content: ''; position: absolute; left: -20px; right: -20px; top: 140px; height: 10px; z-index: -1;
  background: var(--shelf); border-bottom: 4px solid var(--shelf-front);
}

/* ---------- 병 카드 ---------- */
.jar {
  --w: 100px; --cloth-w: 94px; --cloth-h: 20px; --band-w: 82px; --body-w: 96px; --body-h: 116px; --th: 76px;
  position: relative; flex: 0 0 var(--w); width: var(--w); display: flex; flex-direction: column; align-items: center;
  color: var(--ink-main); text-decoration: none; scroll-snap-align: start; z-index: 1; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.jar[hidden] { display: none; }
.jar .cloth {
  position: relative; z-index: 2; width: var(--cloth-w); height: var(--cloth-h); border-radius: 9px 9px 0 0; background-color: #fff;
  background-image: linear-gradient(90deg, var(--check) 50%, transparent 50%), linear-gradient(0deg, var(--check) 50%, transparent 50%);
  background-size: 10px 10px;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 95% 100%, 90% 72%, 85% 100%, 80% 72%, 75% 100%, 70% 72%, 65% 100%, 60% 72%, 55% 100%, 50% 72%, 45% 100%, 40% 72%, 35% 100%, 30% 72%, 25% 100%, 20% 72%, 15% 100%, 10% 72%, 5% 100%, 0 72%);
  transition: transform .35s var(--spring);
}
.jar .string { position: relative; z-index: 3; width: var(--band-w); height: 4px; margin-top: -6px; border-radius: 2px; background: var(--dashed); }
.jar .string::after { content: ''; position: absolute; left: calc(50% - 6px); top: -4px; width: 12px; height: 10px; border: 2px solid var(--dashed); border-radius: 50%; box-sizing: border-box; }
.jar .lid { width: var(--band-w); height: 6px; background: repeating-linear-gradient(180deg, #F1EDE6 0 1.5px, #B9B2A5 1.5px 3px); border-radius: 0 0 2px 2px; }
.jar .body {
  position: relative; display: block; width: var(--body-w); height: var(--body-h); box-sizing: border-box; border-radius: 16px 16px 14px 14px;
  background: linear-gradient(90deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.2) 28%, rgba(255,255,255,.1) 72%, rgba(255,255,255,.45) 100%);
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 1px rgba(150,120,80,.25), inset 0 -9px 0 rgba(255,255,255,.4), inset 0 0 0 4px rgba(255,255,255,.22), 0 8px 10px -6px rgba(120,80,30,.35);
  transition: transform .35s var(--spring);
}
.jar .body > .thumb, .jar .glass { position: absolute; left: 8px; top: 6px; width: var(--th); height: var(--th); border-radius: 12px; }
.jar .body > .thumb { object-fit: cover; opacity: .93; filter: saturate(.95) contrast(.96); background: #fff; }
.jar .glass {
  background: linear-gradient(90deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(255,255,255,.35) 100%), linear-gradient(180deg, rgba(255,255,255,.18), rgba(200,220,215,.12));
  box-shadow: inset 0 0 6px rgba(255,255,255,.7); pointer-events: none;
}
.jar .hl1, .jar .hl2, .jar .hl3 { position: absolute; border-radius: 3px; pointer-events: none; }
.jar .hl1 { left: 7px; top: 8px; width: 6px; height: calc(var(--th) - 4px); background: rgba(255,255,255,.85); }
.jar .hl2 { left: 17px; top: 12px; width: 2px; height: calc(var(--th) * .66); background: rgba(255,255,255,.7); }
.jar .hl3 { right: 5px; top: 10px; width: 3px; height: calc(var(--body-h) - 24px); background: rgba(255,255,255,.55); }
.jar .label {
  position: absolute; left: 6px; right: 6px; bottom: 9px; box-sizing: border-box; padding: 6px 4px 4px; border-radius: 5px; transform: rotate(-2deg);
  background-color: var(--label-paper);
  background-image: linear-gradient(90deg, rgba(110,80,40,.14) 0%, rgba(110,80,40,0) 16%, rgba(255,255,255,.5) 40%, rgba(110,80,40,0) 60%, rgba(110,80,40,0) 84%, rgba(110,80,40,.14) 100%), radial-gradient(rgba(120,90,50,.09) .6px, transparent .9px);
  background-size: 100% 100%, 4px 4px;
  box-shadow: inset 0 0 0 2.5px var(--label-paper), inset 0 0 0 3.5px var(--ink-line), 0 1px 1.5px rgba(80,50,20,.28), 0 0 0 .5px rgba(80,50,20,.12);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.jar .label .nm {
  width: 100%; text-align: center; font-size: 11.5px; line-height: 1.15; word-break: keep-all; color: var(--ink-main);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jar .stamp {
  position: absolute; left: -4px; top: -15px; height: 19px; padding: 0 3px; border-radius: 10px; background: #fff; border: 1px solid var(--ink-line);
  display: flex; align-items: center; gap: 1px; box-sizing: border-box; box-shadow: 0 1px 1px rgba(80,50,20,.2);
}
.jar .stamp img { width: 14px; height: 14px; display: block; }
.jar .tag {
  position: absolute; z-index: 4; right: -10px; top: 34px; width: 50px; height: 26px; background: var(--kraft-tag);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); transform: rotate(10deg); transform-origin: 0 50%;
  display: flex; align-items: center; justify-content: center; padding-left: 4px; box-sizing: border-box;
  font-family: var(--font-num); font-weight: 700; font-size: 14px; color: var(--kraft-ink); box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.jar .tag::before { content: ''; position: absolute; top: 3px; right: 3px; bottom: 3px; left: 9px; border: 1px dashed var(--kraft-stitch); border-radius: 2px; }
.jar .tag img { width: 11px; height: 11px; margin-right: 1px; }
.jar .tag.none { color: #A88D68; }
.jar .done { /* 내가 평가한 병: 라벨 오른쪽 위 작은 체크 */
  position: absolute; right: -2px; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); color: #fff;
  font-size: 9px; line-height: 14px; text-align: center; box-shadow: 0 0 0 1.5px var(--label-paper);
}
.jar:hover .body, .jar:focus-visible .body { transform: translateY(-3px); }
.jar:hover .cloth, .jar:focus-visible .cloth { transform: translateY(-3px) rotate(-2deg); }
.jar:focus-visible .body { box-shadow: 0 0 0 3px var(--primary), 0 8px 10px -6px rgba(120,80,30,.35); }
.jar:active .body { transform: scale(.97); }

/* ---------- 고민되면? 캡슐 ---------- */
.gacha-btn {
  position: fixed; z-index: 30; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 76px; height: 84px; padding: 7px 0 8px; box-sizing: border-box; border: 0; border-radius: 38px 38px 26px 26px;
  background: var(--primary); color: #fff; font-size: 12px; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  box-shadow: 0 0 0 3px var(--bg-cream), 0 0 0 5px var(--dashed), 0 10px 20px rgba(31,138,110,.35); cursor: pointer;
  transition: transform .3s var(--spring);
}
.gacha-ball { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--surface); }
.gacha-ball img { width: 46px; height: 46px; display: block; }
.gacha-btn:hover { transform: translateY(-2px); }
.gacha-btn:active { transform: scale(.95); }
.gacha-btn.spin .gacha-ball img { animation: gacha-spin .28s ease-out; }
@keyframes gacha-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gacha-btn.spin .gacha-ball img { animation: none; } }

.empty-note { padding: 24px 16px 140px; text-align: center; color: var(--muted); }
.site-foot { padding: 8px 100px 130px 16px; /* 아래·오른쪽 = 캡슐 자리 */ font-size: 11.5px; color: var(--muted); line-height: 1.5; max-width: 300px; }
.site-foot p { margin: 0; }

/* ---------- #stats ---------- */
.stats-view { min-height: 100vh; }
.stats-head { padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.stats-sub { margin: 0; font-size: 13px; color: var(--muted); }
.stats-wrap { padding: 0 16px 40px; overflow-x: auto; }
.stats-table { border-collapse: collapse; width: 100%; max-width: 760px; font-size: 14px; background: var(--surface); border: 1.5px solid var(--border-line); }
.stats-table th, .stats-table td { padding: 8px 10px; border-bottom: 1px dashed var(--border-kraft); text-align: right; white-space: nowrap; }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; white-space: normal; }
.stats-table th { color: var(--muted); font-weight: 400; background: #F6EBD6; }

/* ---------- 종 화면(랩 뷰어 재사용) ---------- */
.site-viewer { background: radial-gradient(900px 600px at 40% 30%, #FFFDF6 0%, var(--bg-cream) 70%); }
.site-viewer .panel-inner { background: var(--surface); }
.site-viewer .still { background: radial-gradient(circle at 50% 38%, #fff 0%, #FFF6E3 55%, var(--bg-cream) 100%); }
.site-viewer .name { color: var(--ink-main); }
.feel-stamp { display: inline-flex; gap: 2px; align-items: center; padding: 1px 4px; border-radius: 10px; background: #fff; border: 1px solid var(--border-kraft); }
.feel-stamp:empty { display: none; }
.feel-stamp img { width: 18px; height: 18px; display: block; }
.site-viewer .msg-blob { background: radial-gradient(circle at 35% 30%, #fff, #9ED9C2 60%, #2FA584); }

.site-viewer .block { display: flex; flex-direction: column; gap: 8px; }
.blk-head { display: flex; align-items: baseline; gap: 8px; }
.blk-head h3 { margin: 0; font-size: 17px; font-weight: 400; color: var(--primary); }
.sum-line, .blk-head .count { font-size: 12px; color: var(--muted); }
.mine-tag { font-size: 11px; color: var(--primary); background: #DDF2EA; padding: 1px 8px; border-radius: 10px; }

.react-btns { display: flex; gap: 8px; }
.react-btn {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 4px; min-height: 56px;
  border-radius: 14px; border: 1px dashed var(--dashed); background: #fff; color: var(--ink-main); font-size: 13px; cursor: pointer;
  transition: transform .25s var(--spring), background .15s;
}
.react-btn img { width: 28px; height: 28px; display: block; }
.react-btn b { font-weight: 400; }
.react-btn .n { font-size: 11px; color: var(--muted); min-height: 13px; }
.react-btn[aria-pressed='true'] { background: #DDF2EA; border: 2px solid var(--primary); padding: 7px 3px 5px; }
.react-btn[aria-pressed='true'] .n { color: var(--primary); }
.react-btn:active { transform: scale(.94); }
.react-btn:disabled { opacity: .55; cursor: progress; }
.save-msg { margin: 0; min-height: 0; font-size: 12px; color: var(--primary); }
.save-msg:empty { display: none; }
.save-msg.warn { color: #C0552A; }

.review-form { display: flex; flex-direction: column; gap: 8px; }
.star-pick { display: flex; gap: 4px; }
.star-pick button {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform .25s var(--spring);
}
.star-pick button img { width: 30px; height: 30px; display: block; filter: grayscale(1) opacity(.35); transition: filter .15s; }
.star-pick button.is-on img { filter: none; }
.star-pick.preview button img { filter: grayscale(1) opacity(.35); }
.star-pick.preview button.pv img { filter: none; }
.star-pick button:active { transform: scale(.9); }
.review-form textarea, .review-form input {
  box-sizing: border-box; width: 100%; border: 1.5px solid var(--border-kraft); border-radius: 10px; background: #fff; color: var(--ink-main);
  font-family: 'Gowun Dodum', var(--font-body); font-size: 15px; padding: 8px 10px; resize: vertical;
}
.review-form textarea { min-height: 66px; }
.review-form textarea:focus, .review-form input:focus { outline: 2px solid rgba(31,138,110,.35); border-color: var(--primary); }
.form-line { display: flex; gap: 8px; align-items: center; }
.form-line input { flex: 1; min-width: 0; }
.form-line .count { font-size: 11px; color: var(--muted); flex: none; }
.submit-btn {
  flex: none; height: 38px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--primary); color: #fff; font-size: 15px; cursor: pointer;
  box-shadow: 0 3px 0 var(--primary-dark);
}
.submit-btn:disabled { background: #BFD9CF; box-shadow: none; cursor: default; }

.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.review-list li { background: #fff; border: 1px solid var(--border-line); border-radius: 10px; padding: 8px 10px; }
.review-list li.mine { border-color: var(--primary); }
.rv-head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rv-name { color: var(--ink-main); }
.rv-stars { display: inline-flex; gap: 1px; }
.rv-stars img { width: 13px; height: 13px; }
.rv-date { margin-left: auto; font-size: 11px; color: var(--muted); }
.rv-body { margin: 4px 0 0; font-family: 'Gowun Dodum', var(--font-body); font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.list-empty { margin: 0; font-size: 13px; color: var(--muted); }
.browser-note { margin: 4px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5; }

/* 패널 안 순서: 반응 → 별점·리뷰 → 목록 → 정보 */
.site-viewer .panel-inner { gap: 16px; overflow-y: auto; }

/* 뷰어 버튼을 크림 톤으로 */
.site-viewer .jelly { --c: #fff; --c-top: #fff; --c-edge: var(--border-kraft); }
.site-viewer .variants .chip.is-on { --c: var(--primary); --c-top: #2FA584; --c-edge: var(--primary-dark); color: #fff; }
.site-viewer .drag-seg button[aria-checked='true'], .site-viewer .drag-seg button.is-on { background: var(--primary); color: #fff; }

/* ---------- PC ---------- */
@media (min-width: 900px) {
  .pc-only { display: block; }
  .gallery-view > .gingham-band:first-child { display: none; }
  .gingham-band { height: 8px; background-size: 8px 8px; }
  .site-top {
    position: sticky; top: 0; z-index: 20; height: 64px; box-sizing: border-box; padding: 0 40px; flex-direction: row; align-items: center; gap: 28px;
    background: var(--surface); border-bottom: 1.5px solid var(--border-line);
  }
  .site-title { font-size: 28px; }
  .row-label { font-size: 14px; margin-right: 6px; }
  .cat-row { height: 64px; gap: 4px; }
  .cat-tabs { gap: 0; height: 64px; }
  .cat-tab { height: 64px; padding: 0 14px; gap: 6px; font-size: 16px; border: 0; border-radius: 0; background: transparent; }
  .cat-tab img { width: 20px; height: 20px; }
  .cat-tab.is-here { background: transparent; color: var(--primary); box-shadow: inset 0 -4px 0 var(--primary); }
  .cat-tab:hover { color: var(--primary); }
  .top-spacer { display: block; flex: 1; }
  .feel-btn { width: 44px; height: 36px; border-radius: 18px; background: #fff; }
  .feel-btn img { width: 24px; height: 24px; }
  .filter-line { padding: 14px 40px 0; }
  .gpu-note { margin: 10px 40px 0; }

  .shelves { padding: 22px 0 24px 40px; gap: 14px; margin-top: 0; }
  .shelf { gap: 6px; scroll-margin-top: 80px; }
  /* 오른쪽 150px은 비워 둔다: 떠 있는 캡슐(92+40)이 '모두 보기'·화살표를 가리지 않게 */
  .shelf-head { padding: 0 150px 0 0; align-items: center; gap: 10px; }
  .shelf-head h2 { font-size: 22px; }
  .shelf-head .top-name, .shelf-head .n { font-size: 13px; }
  .shelf-head .all-btn { display: inline; border: 0; background: none; padding: 0; font-size: 13px; color: var(--muted); cursor: pointer; }
  .shelf-head .all-btn:hover { color: var(--primary); }
  .shelf-nav { display: flex; gap: 10px; }
  .shelf-nav button { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
  .shelf-nav button img { width: 18px; height: 18px; }
  .shelf-nav .prev { border: 1.5px solid var(--border-kraft); background: #fff; }
  .shelf-nav .next { border: 0; background: var(--primary); }
  .shelf-nav button:disabled { opacity: .35; cursor: default; }
  .shelf.expanded .shelf-nav { visibility: hidden; }
  .rail { gap: 40px; padding: 0 90px 20px 4px; scroll-padding: 0 4px; }
  .rail::before { top: 173px; height: 12px; border-bottom-width: 5px; box-shadow: 0 8px 12px rgba(120,80,30,.2); }
  .rail-wrap::after { /* 오른쪽 페이드 */
    content: ''; position: absolute; z-index: 5; right: 0; top: 0; bottom: 0; width: 90px; pointer-events: none;
    background: linear-gradient(90deg, rgba(251,243,227,0), var(--bg-cream) 85%);
  }
  .rail-wrap.at-end::after { opacity: 0; }
  .shelf.expanded .rail-wrap::after { display: none; }
  .shelf.expanded .rail { padding-right: 150px; row-gap: 30px; }
  .shelf.expanded .jar::after { top: 173px; height: 12px; border-bottom-width: 5px; }
  .jar { --w: 124px; --cloth-w: 116px; --cloth-h: 24px; --band-w: 102px; --body-w: 120px; --body-h: 144px; --th: 96px; }
  .jar .cloth { background-size: 12px 12px; }
  .jar .string { height: 5px; }
  .jar .lid { height: 7px; }
  .jar .body { border-radius: 20px 20px 16px 16px; box-shadow: 0 0 0 1px rgba(150,120,80,.25), inset 0 -11px 0 rgba(255,255,255,.4), inset 0 0 0 5px rgba(255,255,255,.22), 0 10px 12px -7px rgba(120,80,30,.35); }
  .jar .body > .thumb, .jar .glass { left: 10px; top: 7px; }
  .jar .label { left: 8px; right: 8px; bottom: 11px; padding: 7px 5px 5px; box-shadow: inset 0 0 0 3px var(--label-paper), inset 0 0 0 4px var(--ink-line), 0 1px 2px rgba(80,50,20,.28), 0 0 0 .5px rgba(80,50,20,.12); }
  .jar .label .nm { font-size: 14px; }
  .jar .stamp { height: 20px; }
  .jar .stamp img { width: 16px; height: 16px; }
  .jar .tag { width: 58px; height: 30px; right: -12px; top: 40px; font-size: 16px; }
  .jar .tag::before { left: 10px; }
  .jar .tag img { width: 13px; height: 13px; }

  .gacha-btn { right: 40px; bottom: 28px; width: 92px; height: 102px; border-radius: 46px 46px 30px 30px; font-size: 14px; }
  .gacha-ball { width: 66px; height: 66px; }
  .gacha-ball img { width: 56px; height: 56px; }
  .empty-note { padding-left: 40px; }
  .site-foot { padding: 8px 160px 150px 40px; max-width: 560px; }
  .stats-head, .stats-wrap { padding-left: 40px; padding-right: 40px; }
}