/* 포켓장터 — 수묵·한지 스타일 공통 */
:root {
  --paper: #F4EEE2;
  --paper2: #FBF8F1;
  --ink: #2B2622;
  --ink2: #4A433B;
  --muted: #5E564C;
  --line: #D9CDB8;
  --line2: #E6DCC9;
  --gold: #B08D57;
  --gold-soft: #D8C092;
  --red: #A63A2A;
  /* 검은 옻칠 바탕: 그라데이션은 일부 휴대폰(삼성 등)에서 줄무늬로 깨져 그려져서 단색 */
  --lacquer: none;
  --serif: 'Hahmlet', 'Noto Serif KR', serif;
  --display: 'Song Myung', serif;
  --sans: 'Noto Sans KR', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #E9E1D1; color: var(--ink); -webkit-text-size-adjust: 100%; }
body { font-family: var(--serif); }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

.app {
  position: relative; width: 100%; max-width: 480px; min-height: 100dvh; margin: 0 auto;
  background: var(--paper); display: flex; flex-direction: column; overflow-x: hidden; overflow-x: clip;
}
/* overflow-x: hidden 은 아래 탭바·결제 버튼 같은 '화면에 붙는' 줄을 풀어 버림 → clip 으로 (붙어 있게)
   clip 을 모르는 옛 브라우저: 탭바만이라도 화면 아래에 고정 */
@supports not (overflow-x: clip) {
  .tabbar { position: fixed !important; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; }
  .app:has(.tabbar) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
/* 금빛 글씨 (입체): 바탕은 단색 금빛 + 아래로 부드럽게 떨어지는 그림자 → 어느 휴대폰에서나 보임
   그 위에 같은 글자를 위는 밝고 아래는 어두운 금빛 그라데이션으로 한 겹 더 얹음 (지원하는 브라우저만,
   혹시 그 겹이 안 그려져도 아래 단색 글씨는 그대로 보임) */
.gold { color: #D6B47A; text-shadow: 0 1px 1px rgba(0,0,0,.5), 0 2px 3px rgba(0,0,0,.45); }
/* (글자에 그라데이션을 입히는 background-clip:text 겹은 휴대폰에서 화면이 깨지는 원인이 될 수 있어 쓰지 않음) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 옻칠 현판 */
.plaque { position: relative; text-align: center; background: #211C19 var(--lacquer); border-radius: 3px; box-shadow: 0 14px 26px rgba(30,20,12,.3), inset 0 1px 0 rgba(255,255,255,.08); }
.plaque::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--gold); border-radius: 2px; pointer-events: none; }
.plaque::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(176,141,87,.4); pointer-events: none; }
.plaque h1, .plaque .title { position: relative; margin: 0; font-family: var(--display); font-weight: 400; line-height: 1; white-space: nowrap; }
.plaque .sub { position: relative; margin: 10px 0 0; letter-spacing: 6px; color: var(--gold-soft); }
.seal { position: absolute; right: -9px; bottom: -10px; z-index: 1; display: flex; align-items: center; justify-content: center; background: var(--red); color: #F6E9DC; font-family: var(--display); border-radius: 2px; transform: rotate(-4deg); box-shadow: 0 2px 4px rgba(0,0,0,.25); }

/* 화면 상단 수묵 띠 + 제목 현판 */
.topbar { position: relative; height: 108px; flex-shrink: 0; overflow: hidden; background: var(--paper); }
.topbar .scene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 41%; }
.topbar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(244,238,226,.15), rgba(244,238,226,.55) 70%, var(--paper)); }
.topbar .row { position: absolute; inset: 0; z-index: 1; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; }
.topbar .plaque { padding: 10px 26px 9px; }
.topbar .plaque::after { display: none; }
.topbar .plaque::before { inset: 4px; }
.topbar .plaque .title { font-size: 24px; letter-spacing: 4px; }
.iconbtn { width: 44px; height: 44px; border-radius: 22px; border: 1px solid rgba(43,38,34,.35); background: rgba(250,247,240,.85); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.iconbtn.ghost { visibility: hidden; }

.content { flex: 1; padding: 10px 22px 24px; display: flex; flex-direction: column; gap: 24px; }
.footer { position: sticky; bottom: 0; padding: 14px 22px calc(18px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); font-family: var(--sans); }

.brush-ul { background: url(/assets/brushline.png) left bottom / 132px 11px no-repeat; padding-bottom: 12px; }
h2.heading { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.45; }
.lead { margin: 0; font-family: var(--sans); font-size: 13px; line-height: 1.7; color: var(--ink2); }
.note { margin: 0; padding: 12px 14px; border-left: 2px solid var(--gold); background: rgba(176,141,87,.08); font-family: var(--sans); font-size: 12px; line-height: 1.7; color: var(--ink2); }
.small { font-family: var(--sans); font-size: 11.5px; line-height: 1.7; color: var(--muted); }

/* 진행 표시 */
.progress { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.progress .step { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
.progress .num { width: 22px; height: 22px; box-sizing: border-box; border-radius: 11px; border: 1px solid #B3A58E; color: #6E6458; font-family: var(--display); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.progress .on { color: var(--ink); font-weight: 700; }
.progress .on .num { background: #1F1B17; border-color: #1F1B17; color: #E8D3A2; }
.progress .done .num { background: #8C7A62; border-color: #8C7A62; color: var(--paper); }
.progress .bar { flex: 1; min-width: 10px; height: 1px; background: #CDBFA6; }

/* 버튼 */
.btn { width: 100%; min-height: 56px; border: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; }
.btn-ink { background: #211C19 var(--lacquer); color: var(--paper); box-shadow: 0 8px 18px rgba(30,20,12,.2); }
.btn-ink:disabled { background: #DDD3C2; color: #6E6458; box-shadow: none; cursor: not-allowed; }
.btn-line { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.btn-kakao { position: relative; background: #FEE500; color: rgba(0,0,0,.85); font-weight: 700; box-shadow: 0 6px 16px rgba(60,40,10,.14); }
.btn-kakao svg { position: absolute; left: 20px; }
.btn:focus-visible, .iconbtn:focus-visible, input:focus-visible, .chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* 체크박스 */
.check { position: relative; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { width: 22px; height: 22px; flex-shrink: 0; border-radius: 3px; border: 1.5px solid #8C7A62; background: var(--paper2); display: flex; align-items: center; justify-content: center; }
.check .box svg { opacity: 0; }
.check input:checked + .box { background: #1F1B17; border-color: #1F1B17; }
.check input:checked + .box svg { opacity: 1; }
.check input:focus-visible + .box { outline: 2px solid var(--red); outline-offset: 2px; }

.all { padding: 18px 16px; background: var(--paper2); border: 1px solid #CDBFA6; border-radius: 6px; }
.all .box { width: 26px; height: 26px; }
.terms-list { margin: -8px 0 0; padding: 0; list-style: none; }
.terms-list li { display: flex; align-items: center; border-bottom: 1px solid var(--line2); }
.terms-list .check { flex: 1; min-width: 0; padding: 15px 4px; }
.tag { width: 34px; flex-shrink: 0; font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--muted); }
.tag.req { color: var(--red); }
.view { flex-shrink: 0; min-height: 44px; padding: 0 4px 0 10px; border: 0; background: transparent; font-family: var(--sans); font-size: 12px; color: var(--muted); cursor: pointer; }

/* 아래에서 올라오는 시트 */
.sheet-back { position: fixed; inset: 0; z-index: 50; background: rgba(23,19,17,.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet-back[hidden] { display: none; }
.sheet-back { overscroll-behavior: contain; touch-action: pan-y; }
html.sheet-open, html.sheet-open body { overflow: hidden; overscroll-behavior: none; }
html.sheet-open body { position: fixed; left: 0; right: 0; width: 100%; }
.sheet { width: 100%; max-width: 480px; height: 88dvh; background: var(--paper); border-radius: 16px 16px 0 0; display: flex; flex-direction: column; }
.sheet header { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 12px 22px; border-bottom: 1px solid var(--line); }
.sheet header h2 { margin: 0; font-size: 18px; }
.sheet .body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 18px; }
.sheet .body h3 { margin: 0 0 6px; font-size: 14.5px; }
.sheet .body p { margin: 0; white-space: pre-line; font-family: var(--sans); font-size: 13px; line-height: 1.75; color: #3A332D; }
.sheet footer { padding: 12px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

/* 닉네임 */
.nameplate { align-self: center; min-width: 200px; padding: 18px 28px 16px; }
.nameplate .sub { margin: 0 0 6px; font-family: var(--sans); font-size: 10.5px; letter-spacing: 4px; color: #BDA67A; }
.nameplate .title { font-size: 30px; line-height: 1.2; letter-spacing: 2px; min-height: 36px; }
.field label { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: 13px; font-weight: 700; }
.field .wrap { position: relative; }
.field input { width: 100%; height: 54px; padding: 0 64px 0 16px; border-radius: 10px; border: 1px solid #B3A58E; background: var(--paper2); font-family: var(--serif); font-size: 17px; color: var(--ink); }
.field input:focus { outline: none; border-color: var(--ink); }
.field .count { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 12px; color: var(--muted); }
.msg { margin: 8px 0 0; min-height: 18px; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.msg.bad { color: var(--red); }
.msg.good { color: #2F6B3A; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid #CDBFA6; background: var(--paper2); font-family: var(--serif); font-size: 14.5px; cursor: pointer; }
.linkbtn { min-height: 36px; padding: 0 10px; border: 0; background: transparent; font-family: var(--sans); font-size: 12.5px; color: var(--muted); cursor: pointer; }

/* 오류 안내 띠 */
.toast { padding: 12px 14px; border-radius: 10px; background: #F6E3DE; border: 1px solid #E2B7AC; color: #7A2A1C; font-family: var(--sans); font-size: 13px; }
.toast[hidden] { display: none; }

/* 시작 화면 */
  .start { min-height: 100dvh; position: relative; overflow: hidden; }
  .start .scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: 0; animation: ink 1.6s ease-out both; }
  .start .stage { position: relative; z-index: 2; isolation: isolate; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 0 24px calc(32px + env(safe-area-inset-bottom)); }
  .start .spacer { flex: 1; min-height: 56dvh; }
  .start .hang { position: relative; width: 260px; animation: drop 1.3s cubic-bezier(.2,.8,.3,1) .7s both; transform-origin: 50% -300px; }
  .start .rope { position: absolute; left: 0; top: -600px; width: 260px; height: 600px; }
  .start .plaque { padding: 26px 16px 20px; }
  .start .plaque h1 { font-size: 46px; letter-spacing: 3px; }
  .start .plaque .sub { font-size: 12.5px; }
  .start .seal { width: 34px; height: 34px; font-size: 22px; }
  .start .tagline { margin: 26px 0 0; display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 15px; letter-spacing: 2px; color: #3A332D; font-weight: 400; animation: rise .8s ease 1.9s both; }
  .start .tagline span { width: 28px; height: 1px; background: #8C7A62; }
  .start .bottom { width: 100%; margin-top: 28px; display: flex; flex-direction: column; gap: 14px; animation: rise .7s cubic-bezier(.2,.8,.3,1) 2.3s both; }
  .start .bottom .small { text-align: center; }
  .start.logins-2 .spacer { min-height: 48dvh; }
  .start.logins-3 .spacer { min-height: 38dvh; }
  .start.logins-2 .tagline, .start.logins-3 .tagline { margin-top: 18px; }
  .start.logins-2 .bottom, .start.logins-3 .bottom { margin-top: 20px; gap: 10px; }
  /* 휴대폰에서 버벅이지 않게 큰 배경 그림은 투명도만 움직임 (흐림·확대 없음) */
  @keyframes ink { from { opacity: 0; } to { opacity: 1; } }
  @keyframes drop { 0% { transform: translateY(-560px) rotate(-3deg); } 62% { transform: translateY(8px) rotate(1.4deg); } 80% { transform: translateY(-3px) rotate(-.6deg); } 100% { transform: none; } }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  /* 글꼴·배경 그림이 준비되고 로그인 확인이 끝난 뒤에 시작 (도중에 글꼴이 바뀌며 흔들리거나, 로그인된 사람에게 반쯤 보이다 넘어가는 것 방지) */
  .start:not(.go) .scene, .start:not(.go) .hang, .start:not(.go) .tagline, .start:not(.go) .bottom { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) { .start * { animation: none !important; } }

/* 작은 낙관 / 닉네임 */
.seal-sm { width: 24px; height: 24px; font-size: 15px; right: -8px; bottom: -9px; }
.chips-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.chips-title { margin: 0; font-size: 15px; }

/* 홈 */
.home-head { position: relative; height: 252px; flex-shrink: 0; overflow: hidden; }
.home-head .scene { position: absolute; left: 0; right: 0; top: -196px; width: 100%; height: 844px; object-fit: cover; object-position: top; }
.home-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(180deg, rgba(244,238,226,0), var(--paper)); }
.home-head .hb-left, .home-head .hb-right { position: absolute; top: 12px; z-index: 2; color: var(--ink); }
.home-head .hb-left { left: 14px; }
.home-head .hb-right { right: 14px; }
.home-head .hb-bell { position: absolute; top: 12px; right: 66px; z-index: 2; color: var(--ink); }
.hb-bell .badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #A8432F; color: #fff; font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.hb-bell .badge[hidden] { display: none; }
.hang-sm { position: absolute; left: 50%; top: 66px; z-index: 1; width: 204px; transform: translateX(-50%); }
.hang-sm .rope { position: absolute; left: 0; top: -70px; width: 204px; height: 70px; }
.hang-sm .plaque { padding: 18px 12px 14px; }
.hang-sm .plaque h1 { font-size: 36px; letter-spacing: 3px; }
.hang-sm .plaque .sub { margin-top: 8px; font-size: 11px; letter-spacing: 5px; }
.home-body { padding: 4px 16px 24px; gap: 22px; }
.greet { margin: 0; font-size: 17px; }
.search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; background: var(--paper2); border: 1px solid #CDBFA6; border-radius: 12px; }
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--sans); font-size: 14px; color: var(--ink); }
.menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; }
.menu-item { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13.5px; text-decoration: none; color: var(--ink); }
.enso { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: url(/assets/enso.png) center / 100% 100% no-repeat; color: var(--ink); }
.promo { position: relative; padding: 20px 18px; background: var(--paper2); border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; gap: 10px; }
.promo-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; }
.seal-static { position: absolute; right: 16px; top: 16px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--red); color: #F6E9DC; border-radius: 2px; font-family: var(--display); font-size: 18px; }
.pill { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 22px; background: #211C19 var(--lacquer); color: var(--paper); font-family: var(--sans); font-size: 14px; text-decoration: none; }
.sec-head h2 { margin: 0; font-size: 19px; }
.news { margin: 6px 0 0; padding: 0; list-style: none; font-family: var(--sans); font-size: 13.5px; }
.news li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.news .k { width: 52px; flex-shrink: 0; font-size: 12px; color: #8C6B3A; }
.tabbar { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; padding: 8px 8px calc(16px + env(safe-area-inset-bottom)); background: var(--paper2); border-top: 1px solid var(--line); font-family: var(--sans); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--ink2); text-decoration: none; }
.tabbar a.on { color: var(--red); font-weight: 700; }
.tabbar .fab { justify-self: center; width: 48px; height: 48px; border-radius: 24px; background: #211C19 var(--lacquer); box-shadow: inset 0 0 0 1px var(--gold), 0 6px 12px rgba(30,20,12,.22); justify-content: center; }
.soon { position: fixed; left: 50%; bottom: 110px; z-index: 60; transform: translateX(-50%); padding: 10px 16px; border-radius: 20px; background: rgba(31,27,23,.9); color: var(--paper); font-family: var(--sans); font-size: 13px; white-space: normal; max-width: calc(100vw - 32px); width: max-content; text-align: center; }
.sheet-short { height: auto; }

/* ── 카드 도감 ─────────────────────────────── */
.dex-body { padding: 4px 16px 24px; gap: 18px; }
.crumbs { margin: 0; display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.dex-title { margin: 0; font-size: 20px; line-height: 1.4; }
.dex-sub { margin: 4px 0 0; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.series h2 { margin: 0 0 4px; font-size: 17px; }
.set-list { margin: 0; padding: 0; list-style: none; }
.set-list a { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 2px; border-bottom: 1px solid var(--line2); text-decoration: none; color: var(--ink); }
.set-list .code { display: block; margin-bottom: 2px; font-family: var(--sans); font-size: 11px; font-weight: 700; color: #8C6B3A; }
.set-list .nm { flex: 1; min-width: 0; font-size: 15px; line-height: 1.4; }
.set-list .meta { flex-shrink: 0; text-align: right; font-family: var(--sans); font-size: 11px; color: var(--muted); line-height: 1.5; }
.pending { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 8px; background: #EFE6D4; font-family: var(--sans); font-size: 10.5px; font-weight: 500; color: #8C6B3A; vertical-align: 2px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.tile .ph, .detail .ph { position: relative; aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); box-shadow: 0 2px 6px rgba(30,20,12,.14); }
.tile img, .detail img { width: 100%; height: 100%; object-fit: cover; }
img.wait { opacity: 0; }
img { transition: opacity .18s ease-out; }
.ph .noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; font-family: var(--sans); font-size: 10.5px; color: #8C7A62; }
/* 이미지 없는 카드: 줄무늬 없이 카드 틀 + 몬스터볼 표시 */
.tile .ph .noimg, .detail .ph .noimg { flex-direction: column; gap: 6px; margin: 6%; border: 1.5px solid rgba(140,122,98,.35); border-radius: 5px; background: linear-gradient(160deg, #F1E8D6, #E4D7BE); }
.noimg .noimg-mark { width: 30%; max-width: 64px; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(140,122,98,.45); background: linear-gradient(rgba(140,122,98,.14) 0 46%, rgba(140,122,98,.45) 46% 54%, transparent 54%); position: relative; }
.noimg .noimg-mark::after { content: ''; position: absolute; left: 50%; top: 50%; width: 28%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #EDE3CF; border: 2px solid rgba(140,122,98,.45); }
.detail .ph .noimg { font-size: 14px; }
.tile .nm { font-size: 12.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile .no { font-family: var(--sans); font-size: 10.5px; color: var(--muted); }
.rar { display: inline-block; padding: 0 5px; border-radius: 3px; background: #1F1B17; color: #E8D3A2; font-family: var(--sans); font-size: 10px; font-weight: 700; line-height: 16px; }
.empty { grid-column: 1 / -1; margin: 24px 0; text-align: center; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.more { min-height: 48px; }
.detail { display: flex; flex-direction: column; gap: 16px; }
.detail .ph { width: 70%; align-self: center; border-radius: 10px; }
.detail-img { position: relative; display: flex; justify-content: center; }
.detail-img .ph { width: 70%; }
.detail-img .lang-tag { position: absolute; top: 8px; left: calc(15% + 8px); padding: 0 8px; height: 22px; border-radius: 11px; background: rgba(43,38,34,.82); color: #F4EEE2; font-family: var(--sans); font-size: 11.5px; line-height: 22px; pointer-events: none; }
.detail h3 { margin: 0; font-size: 20px; }
.detail .ja { margin: 2px 0 0; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.spec { margin: 0; display: grid; grid-template-columns: 88px 1fr; row-gap: 8px; font-family: var(--sans); font-size: 13px; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; }
.legal-foot { margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--line2); font-family: var(--sans); font-size: 10.5px; line-height: 1.7; color: var(--muted); }
.legal-foot a { color: var(--muted); }

/* ── 법적 고지 / 신고 ─────────────────────────── */
.legal h2 { margin: 0 0 8px; font-size: 17px; }
.legal p, .legal li { font-family: var(--sans); font-size: 13px; line-height: 1.8; color: #3A332D; }
.legal p { margin: 0 0 8px; }
.legal ul { margin: 0; padding-left: 18px; }
.legal details { margin-top: 6px; font-family: var(--sans); font-size: 12px; }
.legal summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; color: var(--ink2); }
.legal pre { white-space: pre-wrap; word-break: break-word; margin: 0; padding: 12px; background: var(--paper2); border: 1px solid var(--line2); border-radius: 6px; font-size: 11px; line-height: 1.6; color: var(--ink2); }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: 13px; font-weight: 700; }
.form input[type=text], .form input[type=email], .form textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #B3A58E; background: var(--paper2); font-family: var(--sans); font-size: 15px; color: var(--ink); }
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--ink); }
.opt { font-weight: 400; color: var(--muted); }

/* ── 관리자 ──────────────────────────────── */
.tabs { display: flex; gap: 8px; }
.tabs button { flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid #CDBFA6; background: var(--paper2); font-family: var(--sans); font-size: 13.5px; cursor: pointer; }
.tabs button[aria-selected=true] { background: #1F1B17; border-color: #1F1B17; color: #E8D3A2; }
.row-edit { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line2); }
.row-edit .thumb { width: 52px; flex-shrink: 0; }
.row-edit .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--sans); font-size: 12px; }
.row-edit input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid #B3A58E; background: var(--paper2); font-family: var(--sans); font-size: 14px; }
.row-edit .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mini { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ink); background: transparent; font-family: var(--sans); font-size: 12.5px; cursor: pointer; }
.mini.ink { background: #1F1B17; color: #E8D3A2; border-color: #1F1B17; }
.report { padding: 12px 0; border-bottom: 1px solid var(--line2); font-family: var(--sans); font-size: 12.5px; line-height: 1.7; }
.report .body { white-space: pre-wrap; word-break: break-word; margin: 6px 0; color: #3A332D; }
.agree-text { font-family: var(--sans); font-size: 13px; color: var(--ink); }
.toast.ok { background: #E4EFE2; border-color: #B5CFB0; color: #2F5A2A; }
.row-edit .ph { aspect-ratio: 63 / 88; border-radius: 4px; overflow: hidden; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); }
.row-edit .ph img { width: 100%; height: 100%; object-fit: cover; }

/* 확장팩 박스 이미지 */
.box { width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--paper2); border: 1px solid var(--line2); overflow: hidden; }
.box img { width: 100%; height: 100%; object-fit: contain; }
.box.card { padding: 4px 0; background: linear-gradient(160deg, #2C2622, #171311); border-color: #B08D57; }
.box.card img { width: auto; max-width: 100%; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.box .nobox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-family: var(--display); font-size: 13px; color: #8C7A62; text-align: center; padding: 6px; word-break: normal; overflow-wrap: break-word; line-height: 1.2; }
.box .nobox b { font-size: 10.5px; color: #4A3F35; font-weight: 700; }
.box .nobox small { font-family: var(--sans); font-size: 9.5px; color: #8C7A62; }
.grid .grid-sec { grid-column: 1 / -1; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; color: #4A3F35; }
.box-lg { width: 96px; height: 96px; }
.set-head { display: flex; align-items: center; gap: 14px; }

/* ── 판 선택 · 모으기 ─────────────────────────── */
.ed-tabs button { min-height: 40px; font-size: 13px; }
.note + .series, .dex-sub + .series { margin-top: -4px; }
.set-list .orig { display: block; margin-top: 2px; font-family: var(--sans); font-size: 11px; color: var(--muted); }
.orig { margin: 2px 0 0; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.box.logo { background: #FFFDF8; padding: 6px; }
.prog { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.prog .bar { flex: 1; height: 6px; border-radius: 3px; background: #E6DCC9; overflow: hidden; }
.prog .fill { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #B08D57, #A63A2A); }
.prog .txt { flex-shrink: 0; font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--ink2); }
.set-prog { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--paper2); border: 1px solid var(--line2); }
.set-prog .prog { margin: 0; }
.set-prog .prog .bar { height: 8px; }
.set-prog .left { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.chip[aria-pressed=true] { background: #1F1B17; border-color: #1F1B17; color: #E8D3A2; }
.tile { position: relative; }
/* 안 모은 카드: 흐리게만 (카드마다 filter 를 걸면 휴대폰 그래픽 부담이 커서 투명도만) */
.tile.miss .ph::after { content: ''; position: absolute; inset: 0; background: rgba(243,236,224,.58); pointer-events: none; }
.tile.miss .nm, .tile.miss .no { color: #9A8D7C; }
.tile.have .ph { box-shadow: 0 0 0 2px #B08D57, 0 2px 6px rgba(30,20,12,.18); }
.tile .got { position: absolute; top: 6px; right: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--red); color: #F6E9DC; font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.collect { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--paper2); border: 1px solid var(--line2); font-family: var(--sans); font-size: 13px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper .mini { min-width: 44px; min-height: 40px; font-size: 18px; }
.stepper .mini:disabled { opacity: .35; cursor: not-allowed; }
.stepper .qty { min-width: 64px; text-align: center; font-weight: 700; }
#view { display: flex; flex-direction: column; gap: 14px; }
#view > .series + .series { margin-top: 10px; }
.form select { width: 100%; height: 48px; padding: 0 12px; border-radius: 10px; border: 1px solid #B3A58E; background: var(--paper2); font-family: var(--sans); font-size: 15px; color: var(--ink); }
.tabs { flex-wrap: wrap; }
/* 올드백 안내 · 다른 판(영문) 이미지 표시 */
.old-note { margin: 0 0 12px; }
.set-head + .old-note { margin-top: 12px; }
.tile .lang-tag { position: absolute; top: 6px; left: 6px; padding: 0 6px; height: 18px; border-radius: 9px; background: rgba(43,38,34,.78); color: #F4EEE2; font-family: var(--sans); font-size: 10px; font-weight: 500; line-height: 18px; letter-spacing: .02em; pointer-events: none; }

/* ── 카드 등록 ──────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0 16px 6px; list-style: none; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.steps li { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; border-bottom: 2px solid var(--line2); white-space: nowrap; }
.steps .dot { flex-shrink: 0; }
.steps .dot { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; border: 1px solid #CDBFA6; font-family: var(--display); font-size: 12px; color: #8C7A62; background: var(--paper2); }
.steps li.on { color: var(--ink); font-weight: 700; border-color: var(--ink); }
.steps li.on .dot { background: #1F1B17; border-color: #1F1B17; color: #E8D3A2; }
.steps li.past .dot { background: var(--red); border-color: var(--red); color: #F6E9DC; }
.reg-body { padding: 10px 16px 24px; gap: 18px; }
.reg-h { margin: 0; font-size: 19px; line-height: 1.4; }
.reg-foot { z-index: 6; display: flex; flex-direction: column; gap: 6px; }
.reg-foot[hidden] { display: none; }
.reg-foot #next[hidden] { display: none; }
.reg-foot .msg { margin: 0; min-height: 0; color: var(--red); }
.reg-foot .msg:empty { display: none; }
.ed-tabs .chip[aria-selected=true], .chips .chip[aria-pressed=true] { background: #1F1B17; border-color: #1F1B17; color: #E8D3A2; }
.scan-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px dashed #B3A58E; background: rgba(251,248,241,.6); text-align: left; cursor: pointer; color: var(--ink); font-family: var(--sans); }
.scanner { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanner .shade { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.scanner .guide { position: relative; height: min(64vh, calc(80vw / 0.716)); aspect-ratio: 63 / 88; border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(0,0,0,.55); outline: 2px solid rgba(232,211,162,.9); }
.scanner .guide .c { position: absolute; width: 26px; height: 26px; border: 4px solid #E8D3A2; }
.scanner .guide .tl { top: -4px; left: -4px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.scanner .guide .tr { top: -4px; right: -4px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.scanner .guide .bl { bottom: -4px; left: -4px; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.scanner .guide .br { bottom: -4px; right: -4px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.scan-top { position: relative; display: flex; justify-content: space-between; align-items: center; padding: max(14px, env(safe-area-inset-top)) 16px 0; }
.scan-x { width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.scan-msg { position: relative; margin: auto 16px 12px; text-align: center; color: #fff; font-family: var(--sans); font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.scan-bar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 20px max(20px, env(safe-area-inset-bottom)); }
.scan-album { justify-self: start; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.4); color: #fff; font-family: var(--sans); font-size: 13.5px; cursor: pointer; }
.shutter { width: 72px; height: 72px; border-radius: 50%; border: 5px solid #fff; background: #E8D3A2; box-shadow: 0 0 0 3px rgba(0,0,0,.35); cursor: pointer; }
.shutter:disabled { opacity: .5; }
body.no-scroll { overflow: hidden; }
.scan-res { display: flex; flex-direction: column; gap: 10px; }
.scan-res > .grid { margin-bottom: 6px; }
.read-line { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(176,141,87,.12); font-family: var(--sans); font-size: 13px; color: #5C5249; }
.read-line.fail { background: #FAEEE3; color: #9A4B1E; word-break: break-all; }
.read-line strong { color: #2B2622; letter-spacing: .02em; }
.scan-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; font-family: var(--sans); font-size: 15px; }
.tile.best .ph { outline: 3px solid #B08D57; outline-offset: 2px; }
.tile .no.strong { font-weight: 700; color: #2B2622; }
.scan-btn > span { display: flex; flex-direction: column; gap: 2px; }
.scan-btn strong { font-size: 14.5px; }
.picked { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--paper2); border: 1px solid var(--line); border-radius: 10px; }
.picked .thumb { width: 58px; flex-shrink: 0; }
.picked .ph, .thumb-lg .ph { position: relative; aspect-ratio: 63 / 88; border-radius: 5px; overflow: hidden; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); }
.picked img, .thumb-lg img { width: 100%; height: 100%; object-fit: cover; }
.picked .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.picked .info strong { font-size: 16px; line-height: 1.35; }
.ed-badge { align-self: flex-start; padding: 1px 8px; border-radius: 9px; background: var(--red); color: #F6E9DC; font-family: var(--sans); font-size: 10.5px; font-weight: 700; line-height: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.flabel { margin: 0; font-family: var(--sans); font-size: 13px; font-weight: 700; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg button, .cond button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid #CDBFA6; background: var(--paper2); text-align: left; cursor: pointer; }
.seg strong, .cond strong { font-size: 15px; }
.seg span, .cond span { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.seg button[aria-checked=true], .cond button[aria-checked=true] { background: #1F1B17; border-color: #1F1B17; color: #E8D3A2; }
.seg button[aria-checked=true] span, .cond button[aria-checked=true] span { color: #CDB98E; }
.cond { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cond button { align-items: center; text-align: center; padding: 10px 6px; }
.sel, .reg-body input[type=text], .reg-body textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #B3A58E; background: var(--paper2); font-family: var(--sans); font-size: 15px; color: var(--ink); }
.reg-body textarea { resize: vertical; min-height: 84px; }
.sel:focus, .reg-body input:focus, .reg-body textarea:focus { outline: none; border-color: var(--ink); }
.field .count { position: static; align-self: flex-end; font-family: var(--sans); font-size: 11px; color: var(--muted); }
.won { position: relative; }
.reg-body .won input { padding-right: 40px; text-align: right; }
.reg-body .won input::placeholder { color: #A89B86; }
.won span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 14px; color: var(--muted); }
.qty-step { display: flex; align-items: center; width: 168px; border: 1px solid #B3A58E; border-radius: 10px; background: var(--paper2); overflow: hidden; }
.qty-step button { width: 52px; height: 48px; border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.qty-step button:disabled { color: #BDB2A0; cursor: default; }
.qty-step output { flex: 1; text-align: center; font-family: var(--sans); font-size: 15px; font-weight: 700; }
.tips { margin: -6px 0 0; padding-left: 18px; font-family: var(--sans); font-size: 12.5px; line-height: 1.8; color: var(--ink2); }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.photo { position: relative; aspect-ratio: 63 / 88; border-radius: 10px; border: 1.5px dashed #B3A58E; background: var(--paper2); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.photo.main { border-color: var(--ink); }
.photo.filled { border-style: solid; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .cam { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--sans); font-size: 13px; color: var(--ink2); }
.photo .cam em { font-style: normal; font-size: 10.5px; padding: 1px 7px; border-radius: 8px; background: #EFE6D4; color: #8C6B3A; }
.photo .remove { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 16px; border: 0; background: rgba(31,27,23,.78); color: #F4EEE2; font-size: 18px; line-height: 32px; cursor: pointer; }
.photo:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.dex-ask { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px; border: 1px solid #D9C7A2; background: rgba(176,141,87,.1); }
.dex-ask-t { margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.6; }
.dex-ask-t .seal-in { display: inline-flex; vertical-align: -6px; margin-right: 8px; }
.seal-in { position: static; width: 26px; height: 26px; font-size: 15px; flex-shrink: 0; }
.done { display: flex; flex-direction: column; gap: 14px; }
.seal-done { position: static; align-self: center; width: 46px; height: 46px; font-size: 26px; transform: rotate(-4deg); }
.done .reg-h { text-align: center; }
.thumb-lg { width: 55%; align-self: center; }
.reg-link { margin-top: 4px; }
.cond.grader { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 등급 선택 (회사별 등급표) */
.grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.grades button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 6px 4px; border-radius: 10px; border: 1px solid #CDBFA6; background: var(--paper2); cursor: pointer; }
.grades strong { font-family: var(--sans); font-size: 16px; }
.grades span { font-family: var(--sans); font-size: 10px; letter-spacing: .02em; color: var(--muted); line-height: 1.3; text-align: center; }
.grades button.top { border-color: #B08D57; background: linear-gradient(180deg, #FBF3DF, #F1E2BE); }
.grades button.top span { color: #8C6B3A; font-weight: 700; }
.grades button[aria-checked=true] { background: #1F1B17; border-color: #1F1B17; color: #E8D3A2; }
.grades button[aria-checked=true] span { color: #CDB98E; }
.subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.subs .sub { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; font-family: var(--sans); font-size: 13px; }
.subs .sub .sel { width: 100%; padding: 10px; }
/* 등급 선택 (정리판) */
.grader-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.grader-chips .chip { padding: 0; min-height: 42px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; }
.chips .chip[aria-checked=true] { background: #1F1B17; border-color: #1F1B17; color: #E8D3A2; }
.cert-row { display: flex; gap: 8px; }
.cert-row input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.cert-row input[aria-invalid=true] { border-color: #A8432F; }
.btn-check { flex: none; min-width: 84px; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid #1F1B17; background: #1F1B17; color: #E8D3A2; font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-check:disabled { opacity: .55; cursor: default; }
.cert-scan { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 14px; border-radius: 10px; border: 1px dashed #B3A58E; background: rgba(251,248,241,.6); color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer; }
.cert-scan:active { background: rgba(232,211,162,.35); }
.scanner .guide.slab { height: auto; width: min(86vw, 420px); aspect-ratio: 3 / 1.25; }
.cert-result { margin-top: 8px; }
.cert-result.ok, .cert-result.bad, .cert-result.wait { padding: 10px 12px; border-radius: 10px; border: 1px solid; font-family: var(--sans); }
.cert-result.ok { background: #EEF3E6; border-color: #9DB27E; }
.cert-result.bad { background: #F7E7E2; border-color: #D29A8B; }
.cert-result.wait { background: #F6EEDC; border-color: #D3BC8E; }
.cr-t { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 14px; }
.cert-result.ok .cr-t strong { color: #3F5A23; }
.cert-result.bad .cr-t strong { color: #8E3424; }
.cert-result.wait .cr-t strong { color: #7A5A22; }
.cr-t span { font-weight: 700; color: #2B2622; }
.cr-m { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #5C5249; }
.cr-d { margin: 4px 0 0; font-size: 12px; color: #7A6F64; }
.cert-result.open { padding: 10px 12px; border-radius: 10px; border: 1px solid #9DB27E; background: #F1F5E9; font-family: var(--sans); }
.cert-result.down { padding: 10px 12px; border-radius: 10px; border: 1px solid #D9A77F; background: #FAEEE3; font-family: var(--sans); }
.cert-result.open .cr-t strong { color: #3F5A23; }
.cert-result.down .cr-t strong { color: #9A4B1E; }
.cr-why { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #2B2622; }
.cr-why .k { flex: none; padding: 1px 7px; border-radius: 6px; background: rgba(43,38,34,.08); font-size: 11.5px; font-weight: 700; color: #5C5249; }
.cr-why .since { font-size: 12px; color: #7A6F64; }
.cr-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: #7A6F64; }
.cr-link { display: block; margin-top: 10px; font-family: var(--sans); font-size: 13px; color: #6E5228; text-align: center; }
.btn-check:disabled { background: #D8CDBB; border-color: #D8CDBB; color: #5C5249; }
.cert-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.cert-item .btn-check { margin-top: 10px; width: 100%; }
.reg-h.sm { font-size: 16px; margin-top: 8px; }
.noti-list { list-style: none; margin: 0; padding: 0; }
.noti > a, .noti > div { display: flex; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.noti.unread > a, .noti.unread > div { background: rgba(176,141,87,.08); }
.noti-ic { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: #A8432F; color: #F4EEE2; font-family: var(--brush, serif); font-size: 17px; }
.noti-ic.k-cert-site-up, .noti-ic.k-cert-verified, .noti-ic.k-dex-photo-ok { background: #3F5A23; }
.noti-tx { display: grid; gap: 3px; font-family: var(--sans); }
.noti-tx strong { font-size: 14.5px; }
.noti-tx span { font-size: 13px; line-height: 1.5; color: #5C5249; }
.noti-tx time { font-size: 11.5px; color: #8C8174; }
.small.center { text-align: center; }
.pend-box { text-align: left; margin: 4px 0 14px; }
.pend-box .btn-check { margin-top: 10px; width: 100%; }
.grade-pick { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px solid #CDBFA6; border-radius: 12px; background: var(--paper2); }
.grade-pick .grade-co { font-family: var(--sans); font-weight: 700; font-size: 14px; color: #8C6B3A; }
.grade-pick .grade-sel { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; font-family: var(--sans); font-size: 16px; font-weight: 700; }
.grade-pick.locked { background: #EEF3E6; border-color: #9DB27E; }
.grade-pick.locked .grade-sel { color: #2B2622; opacity: 1; appearance: none; -webkit-appearance: none; }
.grade-pick .lock { flex: none; padding: 4px 8px; border-radius: 999px; background: #3F5A23; color: #fff; font-family: var(--sans); font-size: 11.5px; font-weight: 700; }
.subs-box { border: 1px solid var(--line); border-radius: 10px; background: var(--paper2); }
.subs-box summary { min-height: 46px; display: flex; align-items: center; padding: 0 14px; font-family: var(--sans); font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none; }
.subs-box summary::after { content: '＋'; margin-left: auto; color: var(--muted); font-weight: 400; }
.subs-box[open] summary::after { content: '－'; }
.subs-box summary::-webkit-details-marker { display: none; }
.subs-box .subs { padding: 0 14px 14px; }

/* ── 내 자산 ─────────────────────────────── */
.my-body { padding: 4px 16px 24px; gap: 22px; }
.ledger { position: relative; padding: 22px 20px 18px; background: #211C19 var(--lacquer); border-radius: 4px; color: var(--paper); box-shadow: 0 16px 30px rgba(30,20,12,.3), inset 0 1px 0 rgba(255,255,255,.06); }
.ledger::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--gold); border-radius: 2px; pointer-events: none; }
.ledger::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(176,141,87,.35); pointer-events: none; }
.ledger > * { position: relative; }
.ledger .k { font-family: var(--sans); font-size: 12px; letter-spacing: 3px; color: var(--gold-soft); }
.ledger .top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ledger .big { font-family: var(--serif); font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -.5px; }
.ledger .rate { flex-shrink: 0; text-align: right; font-family: var(--sans); }
.ledger .rate .r { display: block; font-family: var(--serif); font-size: 23px; font-weight: 700; line-height: 1.1; color: #F08C74; }
.ledger .rate .r.dn { color: #8FB4F0; }
.ledger .rate .w { font-size: 12px; color: #F0B4A6; }
.ledger .rate .w.dn { color: #B9CDF0; }
.ledger .rate .wait { display: inline-block; padding: 3px 9px; border-radius: 10px; border: 1px solid rgba(176,141,87,.6); font-size: 11.5px; color: var(--gold-soft); }
.ledger .memo { margin-top: 8px; font-family: var(--sans); font-size: 11.5px; color: #CFC4B2; }
.ledger .rule { height: 1px; margin: 16px 0 14px; background: linear-gradient(90deg, rgba(176,141,87,0), rgba(176,141,87,.7), rgba(176,141,87,0)); }
.ledger .row2 { display: grid; grid-template-columns: 1fr 1fr; }
.ledger .row2 > div + div { padding-left: 14px; border-left: 1px solid rgba(176,141,87,.35); }
.ledger .row2 .k { letter-spacing: 1px; font-size: 11.5px; }
.ledger .row2 b { display: block; margin-top: 4px; font-family: var(--serif); font-size: 18px; color: #F4E7CC; }
.ledger .bar { display: flex; gap: 3px; height: 4px; margin-top: 16px; }
.ledger .bar span { border-radius: 2px; }
.ledger .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-family: var(--sans); font-size: 11.5px; color: #CFC4B2; }
.ledger .legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 1px; }
.my-head { display: flex; justify-content: space-between; align-items: flex-end; }
.my-head h2 { margin: 0; font-size: 19px; }
.my-head .sort { padding-bottom: 12px; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.my-chips .chip { font-family: var(--sans); font-size: 13.5px; padding: 0 14px; }
.my-chips .chip[aria-pressed="true"] { background: #211C19 var(--lacquer); border-color: transparent; color: #E8D3A2; box-shadow: inset 0 0 0 1px var(--gold); }
.own { list-style: none; margin: 0; padding: 0; }
.own li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line2); }
.own .ph { position: relative; width: 62px; height: 87px; flex-shrink: 0; border-radius: 5px; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); box-shadow: 0 0 0 1px rgba(176,141,87,.55), 0 3px 8px rgba(30,20,12,.16); }
.own .ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.own .ph .gr { position: absolute; left: -4px; bottom: -6px; padding: 1px 6px; border-radius: 2px; background: var(--red); color: #F6E9DC; font-family: var(--sans); font-size: 10.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.own .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.own .t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.own .nm { font-size: 16.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.own .qty { flex-shrink: 0; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.own .meta { font-family: var(--sans); font-size: 12px; color: var(--ink2); }
.own .meta .ed { color: #8C6B3A; font-weight: 700; }
.own .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-family: var(--sans); font-size: 11px; }
.own .tags span { padding: 1px 8px; border-radius: 9px; border: 1px solid #CDBFA6; color: var(--ink2); }
.own .tags .ok { border-color: #B08D57; color: #6E5A3A; }
.own .tags .wait { border-style: dashed; }
.own .tags .date { margin-left: auto; padding: 1px 0; border: 0; color: #8C6B3A; }
.own .pr { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); font-family: var(--sans); font-size: 12px; color: var(--muted); }
.own .pr b { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.own .pr .soon2 { font-size: 11.5px; color: #8C6B3A; }
.my-empty { padding: 28px 18px; text-align: center; background: var(--paper2); border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.my-empty p { margin: 0; }
.my-more { align-self: center; }
.my-more[hidden], .ledger [hidden] { display: none; }

/* 화면 밖 카드 칸은 그리지 않음 (확장팩 하나에 카드가 수백 장이어도 휴대폰이 보이는 칸만 그림) */
.grid > .tile { content-visibility: auto; contain-intrinsic-size: auto 190px; }
.own > li { content-visibility: auto; contain-intrinsic-size: auto 130px; }

/* ───────── 거래소 (메인과 같은 한지·옻칠·금박 결) ───────── */
.mk-body { padding: 4px 16px 24px; gap: 18px; }
.iconbtn { position: relative; }
.iconbtn .dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 4px; background: var(--red); box-shadow: 0 0 0 2px var(--paper2); }
.mk-filter { display: flex; flex-direction: column; gap: 10px; }
.mk-filter .chip { min-height: 36px; padding: 0 13px; font-size: 13.5px; }
.mk-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mk-sort, .mk-sel { min-height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid #CDBFA6; background: var(--paper2); font-family: var(--sans); font-size: 13px; color: var(--ink); }
.mk-count { margin: -6px 0 -6px; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.mk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.mk-tile { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; content-visibility: auto; contain-intrinsic-size: auto 300px; }
.mk-tile .ph, .mk-sellcard .ph, .mk-orow .ph { position: relative; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); box-shadow: 0 0 0 1px rgba(176,141,87,.45), 0 3px 8px rgba(30,20,12,.14); }
.mk-tile .ph img, .mk-sellcard .ph img, .mk-orow .ph img { width: 100%; height: 100%; object-fit: cover; }
.mk-tile .gr, .mk-head .gr { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 3px; background: var(--red); color: #F6E9DC; font-family: var(--sans); font-size: 11px; font-weight: 700; }
.mk-tile .gr.raw, .mk-head .gr.raw { background: rgba(43,38,34,.82); }
.mk-tile .rsv, .mk-tile .ofr { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 10px; background: rgba(31,27,23,.85); color: #E8D3A2; font-family: var(--sans); font-size: 10.5px; }
.mk-tile .ofr { left: auto; right: 6px; background: var(--red); color: #F6E9DC; }
.mk-tile .nm { margin-top: 4px; font-size: 15px; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mk-tile .meta { font-family: var(--sans); font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-tile .pr { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.mk-tile .pr b { font-size: 17px; }
.mk-ok, .mk-warn { display: inline-block; padding: 1px 7px; border-radius: 9px; font-family: var(--sans); font-size: 10.5px; white-space: nowrap; }
.mk-ok { border: 1px solid #B08D57; color: #6E5A3A; background: rgba(176,141,87,.1); }
.mk-warn { border: 1px dashed #A63A2A; color: #8A2E21; background: rgba(166,58,42,.06); }
.mk-empty { grid-column: 1 / -1; }
.mk-guide { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--paper2); border: 1px solid var(--line); border-radius: 8px; }
.mk-guide h2 { margin: 0; font-size: 17px; align-self: flex-start; }
.mk-guide ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 8px; }
.mk-guide li { counter-increment: s; display: grid; grid-template-columns: 26px 44px 1fr; align-items: baseline; gap: 6px; font-family: var(--sans); font-size: 12.5px; color: var(--ink2); }
.mk-guide li::before { content: counter(s); width: 22px; height: 22px; border-radius: 11px; background: #1F1B17; color: #E8D3A2; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.mk-guide li b { font-family: var(--serif); font-size: 14px; color: var(--ink); }
.mk-two { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.mk-two .btn { min-height: 50px; }

/* 매물 자세히 */
.mk-gallery { display: flex; flex-direction: column; gap: 8px; }
.mk-main { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #211C19 var(--lacquer); box-shadow: 0 10px 22px rgba(30,20,12,.22); display: flex; align-items: center; justify-content: center; }
.mk-main img { width: 100%; height: 100%; object-fit: contain; }
.mk-main .cap { position: absolute; left: 10px; bottom: 10px; padding: 2px 9px; border-radius: 10px; background: rgba(31,27,23,.8); color: #E8D3A2; font-family: var(--sans); font-size: 11px; }
.mk-main .noimg { color: var(--gold-soft); font-family: var(--sans); font-size: 13px; }
.mk-thumbs { display: flex; gap: 8px; overflow-x: auto; }
.mk-thumbs button { flex: none; width: 58px; height: 58px; padding: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--paper2); cursor: pointer; }
.mk-thumbs button[aria-pressed=true] { border: 2px solid var(--gold); }
.mk-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.mk-head { display: flex; flex-direction: column; gap: 4px; }
.mk-head .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-head .tags span { position: static; padding: 2px 8px; border-radius: 3px; font-family: var(--sans); font-size: 11.5px; }
.mk-head .ed { background: rgba(176,141,87,.15); color: #6E5A3A; }
.mk-head .rsv { background: #1F1B17; color: #E8D3A2; }
.mk-head h2 { margin: 4px 0 0; font-size: 23px; line-height: 1.3; }
.mk-head .meta { margin: 0; font-family: var(--sans); font-size: 12.5px; color: var(--ink2); }
.mk-head .seller { margin: 2px 0 0; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.mk-price { padding: 16px 18px; border-radius: 6px; background: #211C19 var(--lacquer); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(176,141,87,.6); }
.mk-price .row { display: flex; justify-content: space-between; align-items: baseline; }
.mk-price .row span { font-family: var(--sans); font-size: 12px; letter-spacing: 2px; color: var(--gold-soft); }
.mk-price .row b { font-size: 28px; }
.mk-price .small { margin: 6px 0 0; color: #CFC4B2; }
.mk-cert { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 6px; border: 1px dashed #A63A2A; background: rgba(166,58,42,.04); }
.mk-cert.ok { border: 1px solid #B08D57; background: rgba(176,141,87,.07); }
.mk-cert .h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mk-cert .h b { font-size: 16px; }
.mk-cert p { margin: 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.65; color: var(--ink2); }
.mk-cert .no { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; background: var(--paper2); font-family: var(--sans); font-size: 13px; }
.mk-cert .copy { min-height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--ink); background: transparent; font-family: var(--sans); font-size: 12px; cursor: pointer; }
.mk-cert .mk-link { min-height: 46px; font-size: 14px; }
.mk-cert .small { font-size: 11.5px; color: var(--muted); }
.mk-note p { margin: 6px 0 0; white-space: pre-line; font-family: var(--sans); font-size: 13.5px; line-height: 1.7; color: var(--ink2); }
.mk-sub { margin: 0; font-size: 15px; }
.mk-actions { display: flex; flex-direction: column; gap: 10px; }
.mk-myoffer { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 6px; background: rgba(176,141,87,.1); font-family: var(--sans); font-size: 12.5px; }
.mk-won { display: flex; align-items: center; gap: 8px; }
.mk-won input { flex: 1; min-width: 0; height: 54px; padding: 0 14px; border-radius: 10px; border: 1px solid #B3A58E; background: var(--paper2); font-family: var(--serif); font-size: 20px; color: var(--ink); text-align: right; }
.mk-won input:focus, .mk-body textarea:focus, .mk-ship input:focus { outline: none; border-color: var(--ink); }
.mk-won span { font-family: var(--sans); font-size: 15px; }
.mk-offers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mk-offers li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 6px; background: var(--paper2); border: 1px solid var(--line); }
.mk-offers li > div:first-child { display: flex; flex-direction: column; }
.mk-offers b { font-size: 18px; }
.mk-offers .act { display: flex; align-items: center; gap: 4px; }
.mk-danger { align-self: center; color: var(--red); }

/* 판매하기 */
.mk-sellcard { display: flex; gap: 14px; padding: 14px; border-radius: 6px; background: var(--paper2); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.mk-sellcard .ph { width: 72px; flex: none; aspect-ratio: 63 / 88; }
.mk-sellcard .body { min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.mk-sellcard .nm { font-size: 17px; font-weight: 700; }
.mk-sellcard .meta { font-family: var(--sans); font-size: 12px; color: var(--ink2); }
.mk-alert { margin: 0; padding: 12px 14px; border-left: 2px solid var(--red); background: rgba(166,58,42,.06); font-family: var(--sans); font-size: 12.5px; line-height: 1.7; color: var(--ink2); }
.mk-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mk-tabs[hidden] { display: none; }
.field .mk-slot, .mk-slot { margin: 0; position: relative; aspect-ratio: 3 / 4; border-radius: 6px; border: 1px dashed #B3A58E; background: var(--paper2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; cursor: pointer; }
.mk-slot.need { border-color: var(--red); }
.mk-slot.has { border-style: solid; border-color: var(--gold); cursor: default; }
.mk-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-slot .plus { font-size: 24px; line-height: 1; color: #8C7A62; }
.field .mk-slot .lb, .mk-slot .lb { position: relative; padding: 1px 6px; border-radius: 8px; font-family: var(--sans); font-size: 10.5px; color: var(--ink2); }
.mk-slot.has .lb { position: absolute; left: 4px; bottom: 4px; background: rgba(31,27,23,.78); color: #E8D3A2; }
.mk-err { margin: 0; color: var(--red); }
.mk-body textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #B3A58E; background: var(--paper2); font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--ink); resize: vertical; }
.own .pr .sell { padding: 3px 12px; border-radius: 14px; border: 1px solid var(--ink); font-family: var(--sans); font-size: 12px; color: var(--ink); text-decoration: none; }
.own .pr .sell.on { border-color: var(--red); background: var(--red); color: #F6E9DC; }

/* 내 거래 */
.mk-tabs button { font-family: var(--serif); font-size: 15px; }
.mk-orders li { padding: 0; }
.mk-orow { display: flex; gap: 12px; width: 100%; padding: 14px 0; color: var(--ink); text-decoration: none; }
.mk-orow .ph { width: 60px; flex: none; aspect-ratio: 63 / 88; }
.mk-orow .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mk-orow .t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mk-orow .nm { font-size: 15.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-orow .st { flex: none; padding: 1px 8px; border-radius: 9px; background: rgba(176,141,87,.15); font-family: var(--sans); font-size: 11px; color: #6E5A3A; }
.mk-orow .st-canceled { background: #E6DCC9; color: var(--muted); }
.mk-orow .st-completed { background: #1F1B17; color: #E8D3A2; }
.mk-rbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 12px; padding: 10px 12px; border-radius: 8px; background: #F7EEDB; border: 1px dashed #D9BE86; font-family: var(--sans); font-size: 13px; color: #7A5A1E; }
.mk-rbar .btn-check { flex: none; }
.mk-rbar.done { background: transparent; border-style: solid; border-color: var(--line2); color: #B07A1E; }
.mk-orow .st-settled { background: #2F5D3A; color: #F1F6EE; }
.mk-orow .st-settling { background: #F1E3C4; color: #7A5A1E; }
/* 판매자 정산 현황 */
.mk-settle { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 14px; border-radius: 6px; overflow: hidden; background: rgba(176,141,87,.5); box-shadow: 0 8px 18px rgba(30,20,12,.16); }
.mk-settle > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #211C19 var(--lacquer); color: var(--paper); }
.mk-settle .lb { font-family: var(--sans); font-size: 12px; color: #CFC4B2; }
.mk-settle b { font-size: 20px; color: var(--gold-soft); }
.mk-settled { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 8px; background: #EAF1E6; border: 1px solid #9DBA97; }
.mk-settled b { font-size: 17px; color: #2F5D3A; }
.mk-settled.wait { background: #F7EEDB; border-color: #D9BE86; }
.mk-settled.wait b { color: #7A5A1E; }
.mk-orow .meta { font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.mk-orow .pr { display: flex; align-items: baseline; gap: 6px; }
.mk-orow .pr b { font-size: 16px; }
.mk-orow .todo { align-self: flex-start; margin-top: 2px; padding: 2px 9px; border-radius: 10px; background: var(--red); color: #F6E9DC; font-family: var(--sans); font-size: 11px; font-weight: 700; }
.mk-backlist { align-self: flex-start; padding: 0; }
.mk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.mk-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.mk-steps li + li::before { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.mk-steps li.done + li::before, .mk-steps li.done + li.now::before { background: #8C7A62; }
.mk-steps .n { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 14px; border: 1.5px solid #CDBFA6; background: var(--paper2); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.mk-steps .done .n { background: #8C7A62; border-color: #8C7A62; color: var(--paper); }
.mk-steps .now .n { background: #1F1B17; border-color: var(--gold); color: #E8D3A2; }
.mk-steps .now { color: var(--ink); font-weight: 700; }
.mk-canceled { margin: 0; padding: 12px 14px; border-radius: 6px; background: #E6DCC9; font-family: var(--sans); font-size: 13px; color: var(--ink2); }
.mk-amt { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 16px; border-radius: 6px; background: var(--paper2); border: 1px solid var(--line); font-family: var(--sans); font-size: 13px; }
.mk-amt dt { color: var(--muted); }
.mk-amt dd { margin: 0; text-align: right; }
.mk-amt dd.b { font-family: var(--serif); font-size: 19px; font-weight: 700; }
.mk-track { margin: 0; padding: 10px 14px; border-radius: 6px; background: rgba(176,141,87,.1); font-family: var(--sans); font-size: 13px; }
.mk-wait { margin: 0; padding: 14px; border-radius: 6px; background: var(--paper2); border: 1px dashed #CDBFA6; text-align: center; font-family: var(--sans); font-size: 13px; color: var(--ink2); }
.mk-ship { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.mk-ship input { min-width: 0; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #B3A58E; background: var(--paper2); font-family: var(--sans); font-size: 15px; }
.mk-sel { height: 44px; }
.mk-times { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line2); display: flex; flex-direction: column; gap: 4px; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.mk-times li { display: flex; justify-content: space-between; }

.my-list { display: flex; flex-direction: column; gap: 12px; }

/* 경매 */
.field[hidden], .mk-auc-fields[hidden] { display: none; }
.mk-auc-fields { display: flex; flex-direction: column; gap: 18px; }
.mk-tile .auc { position: absolute; top: 6px; right: 6px; padding: 2px 8px; border-radius: 10px; background: #1F1B17; color: #E8D3A2; font-family: var(--sans); font-size: 10.5px; box-shadow: inset 0 0 0 1px var(--gold); }
.mk-tile .aucp { display: flex; flex-direction: column; }
.mk-tile .aucp small { font-family: var(--sans); font-size: 10.5px; color: #8C6B3A; }
.mk-restrict { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 8px; border: 1px solid var(--red); background: rgba(166,58,42,.07); }
.mk-restrict b { font-size: 16px; color: #8A2E21; }
.mk-restrict p { margin: 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.65; color: var(--ink2); }
.mk-restrict.soft { border-style: dashed; }
.mk-auction { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 6px; background: #211C19 var(--lacquer); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(176,141,87,.6); }
.mk-auction .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mk-auction .top span { font-family: var(--sans); font-size: 12px; letter-spacing: 2px; color: var(--gold-soft); }
.mk-auction .top b { font-size: 28px; }
.mk-auction .left { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 12.5px; color: #CFC4B2; }
.mk-auction .left .t { color: #F4E7CC; font-weight: 700; }
.mk-auction .me { padding: 8px 12px; border-radius: 6px; font-family: var(--sans); font-size: 12.5px; }
.mk-auction .me.win { background: rgba(176,141,87,.25); color: #F4E7CC; }
.mk-auction .me.lose { background: rgba(166,58,42,.45); color: #FBE3DC; }
.mk-auction .small { margin: 0; color: #CFC4B2; }
.mk-bids { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mk-bids li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line2); font-family: var(--sans); font-size: 12.5px; color: var(--ink2); }
.mk-bids li:first-child b { color: var(--red); }
.mk-bids .who { display: flex; gap: 6px; align-items: center; }
.mk-bids .auto { padding: 0 6px; border-radius: 8px; background: rgba(176,141,87,.15); font-size: 10.5px; color: #6E5A3A; }
.mk-check { display: flex; align-items: flex-start; gap: 8px; font-family: var(--sans); font-size: 13px; color: var(--ink2); }
.mk-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #1F1B17; }
.mk-second { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 8px; border: 1px solid var(--gold); background: rgba(176,141,87,.1); }
.mk-second b { font-size: 16px; }
.mk-second p { margin: 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.6; color: var(--ink2); }
.mk-pay { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mk-pay li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 8px; background: var(--paper2); border: 1px solid var(--line); }
.mk-pay li.def { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.mk-pay .nm { display: flex; flex-direction: column; gap: 2px; }
.mk-pay .nm b { font-size: 16px; }
.mk-pay .nm span { font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.mk-pay .act { display: flex; gap: 2px; }
.mk-form { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 8px; background: var(--paper2); border: 1px solid var(--line); }
.mk-form .row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.mk-form input { min-width: 0; height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid #B3A58E; background: #fff; font-family: var(--sans); font-size: 15px; letter-spacing: 3px; }
.app > .mk-restrict { margin: 4px 16px 4px; }
.mk-restrict p { white-space: pre-line; }
.mk-h { margin: 0; align-self: flex-start; font-size: 18px; }
.tabbar[hidden] { display: none; }
.iconbtn[hidden] { visibility: hidden; }

/* 거래소 거르기: 줄마다 한 줄로 (넘치면 옆으로 밀어 보기) */
.mk-filter { gap: 8px; }
.mk-filter .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mk-filter .chips::-webkit-scrollbar { display: none; }
.mk-filter .chip { flex: none; min-height: 34px; padding: 0 14px; }
.mk-filter .chips + .chips { border-top: 1px dashed var(--line2); padding-top: 8px; }
.mk-countrow { margin: -4px 0 -6px; }
.mk-countrow .mk-count { margin: 0; }

/* ── 크림식 카드 묶음 ── */
.mk-ctile .ph.card { aspect-ratio: 63 / 88; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); }
.mk-ctile .ph.card img { object-fit: contain; }
.mk-ctile .ph .noimg, .mk-hero .ph .noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; font-size: 15px; color: #8C7A62; }
.mk-ctile .eds { display: flex; gap: 4px; margin-top: 6px; }
.mk-ctile .eds span { padding: 0 6px; border-radius: 3px; background: rgba(176,141,87,.15); font-family: var(--sans); font-size: 10.5px; color: #6E5A3A; }
.mk-ctile .last { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.mk-seller { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); text-decoration: none; font-family: var(--sans); font-size: 12.5px; }
.mk-seller .nick { font-weight: 700; text-decoration: underline; text-decoration-color: rgba(43,38,34,.3); text-underline-offset: 3px; }
.mk-seller .star { color: #B07A1E; font-weight: 700; }
.mk-seller .star.new { color: var(--muted); font-weight: 400; }
.mk-head .seller { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.mk-tocard { align-self: flex-start; font-family: var(--sans); font-size: 12.5px; color: #8C6B3A; text-decoration: none; }
.mk-hero { display: flex; gap: 16px; align-items: center; }
.mk-hero .ph { position: relative; width: 38%; flex: none; aspect-ratio: 63 / 88; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); box-shadow: 0 0 0 1px rgba(176,141,87,.5), 0 10px 22px rgba(30,20,12,.22); }
.mk-hero .ph img { width: 100%; height: 100%; object-fit: contain; }
.mk-hero h2 { margin: 0; font-size: 24px; line-height: 1.25; }
.mk-hero .meta { margin: 6px 0 0; font-family: var(--sans); font-size: 12.5px; color: var(--ink2); }
.mk-pick { display: flex; flex-direction: column; gap: 8px; }
.mk-pick .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mk-pick .chips::-webkit-scrollbar { display: none; }
.mk-pick .chip { flex: none; min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.mk-pick .chip small { font-family: var(--sans); font-size: 11px; opacity: .7; }
.mk-pick .chip small.z { opacity: .35; }
/* 옆으로 더 있는 줄: 끝을 흐리게 + ‹ › 화살표 */
.mk-scroll { position: relative; }
.mk-arrow { position: absolute; top: 0; bottom: 2px; width: 44px; display: none; align-items: center; border: 0; padding: 0; line-height: 1; cursor: pointer; }
.mk-arrow.next { right: -2px; justify-content: flex-end; padding-right: 2px; background: linear-gradient(90deg, rgba(244,237,226,0), var(--paper) 55%); }
.mk-arrow.prev { left: -2px; justify-content: flex-start; padding-left: 2px; background: linear-gradient(270deg, rgba(244,237,226,0), var(--paper) 55%); }
.mk-arrow span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #1F1B17; color: #E8D3A2; font-size: 18px; padding-bottom: 2px; box-shadow: 0 2px 6px rgba(30,20,12,.25); }
.mk-scroll.has-next .mk-arrow.next, .mk-scroll.has-prev .mk-arrow.prev { display: flex; }
.mk-nums .mk-arrow.next { background: linear-gradient(90deg, rgba(240,230,214,0), #EFE6D6 55%); }
.mk-nums .mk-arrow.prev { background: linear-gradient(270deg, rgba(240,230,214,0), #EFE6D6 55%); }
.mk-board { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 12px; border-radius: 6px; background: #211C19 var(--lacquer); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(176,141,87,.6), 0 12px 24px rgba(30,20,12,.22); }
.mk-board .k { font-family: var(--sans); font-size: 12px; letter-spacing: 1px; color: var(--gold-soft); }
.mk-board .lb { display: block; font-family: var(--sans); font-size: 11.5px; color: #CFC4B2; }
.mk-board .top { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.mk-board .top b { font-size: 28px; line-height: 1.15; }
.mk-board .aucn { padding: 3px 9px; border-radius: 10px; border: 1px solid rgba(176,141,87,.6); font-family: var(--sans); font-size: 11.5px; color: var(--gold-soft); }
.mk-board .row2 { display: grid; grid-template-columns: 1fr 1fr; padding-top: 12px; border-top: 1px solid rgba(176,141,87,.35); }
.mk-board .row2 > div + div { padding-left: 14px; border-left: 1px solid rgba(176,141,87,.35); }
.mk-board .row2 b { display: block; margin-top: 2px; font-size: 19px; color: #F4E7CC; }
.mk-board .chg { font-family: var(--sans); font-size: 11.5px; color: #CFC4B2; }
.mk-board .chg.up { color: #F08C74; }
.mk-board .chg.dn { color: #8FB4F0; }
.mk-board .warn { margin: 0; font-family: var(--sans); font-size: 11.5px; color: #F0B4A6; }
.mk-sparkbox { display: flex; flex-direction: column; gap: 2px; }
.mk-spark { width: 100%; height: 64px; }
.mk-sparkbox .ax { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 10.5px; color: #A89C88; }
.mk-ctabs button { font-family: var(--serif); font-size: 15px; }
.mk-asks, .mk-trades, .mk-reviews { list-style: none; margin: 0; padding: 0; }
.mk-ask { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.mk-ask .phl { flex: none; width: 58px; }
.mk-ask .ph { position: relative; aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); }
.mk-ask .ph img { width: 100%; height: 100%; object-fit: cover; }
.mk-ask .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-ask .body { display: flex; flex-direction: column; gap: 3px; color: var(--ink); text-decoration: none; }
.mk-ask .t { display: flex; justify-content: space-between; gap: 8px; font-family: var(--sans); font-size: 12.5px; }
.mk-ask .gd { font-weight: 700; color: var(--ink2); }
.mk-ask .kind { flex: none; padding: 0 8px; border-radius: 9px; border: 1px solid #CDBFA6; font-size: 11px; color: var(--muted); }
.mk-ask .kind.auc { border-color: #1F1B17; background: #1F1B17; color: #E8D3A2; }
.mk-ask .p { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mk-ask .p b { font-size: 18px; }
.mk-trades li { display: grid; grid-template-columns: 84px 1fr auto; gap: 8px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line2); font-family: var(--sans); font-size: 12px; }
.mk-trades .when { color: var(--muted); font-size: 11.5px; }
.mk-trades .what { display: flex; flex-direction: column; gap: 2px; color: var(--ink2); }
.mk-trades .how { align-self: flex-start; padding: 0 7px; border-radius: 8px; background: rgba(176,141,87,.15); font-size: 10.5px; color: #6E5A3A; }
.mk-trades .how.auc { background: #1F1B17; color: #E8D3A2; }
.mk-trades b { font-family: var(--serif); font-size: 16px; }
.mk-dock { position: sticky; bottom: 84px; z-index: 4; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 10px 0 4px; background: linear-gradient(180deg, rgba(244,238,226,0), var(--paper) 30%); }
.mk-dock .btn { min-height: 54px; flex-direction: column; gap: 0; line-height: 1.2; }
.mk-dock .btn b { font-family: var(--serif); font-size: 17px; }
.mk-dock .btn span { font-size: 12px; }
.btn-sell { background: var(--red); color: #F6E9DC; text-decoration: none; box-shadow: 0 8px 18px rgba(120,30,20,.2); }
.btn-sell small { font-size: 10.5px; opacity: .85; }
/* 판매자 */
.mk-prof { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 8px; background: var(--paper2); border: 1px solid var(--line); }
.mk-prof .who { display: flex; align-items: center; gap: 12px; }
.mk-prof .who > div { flex: 1; min-width: 0; }
.mk-prof h2 { margin: 0; font-size: 21px; }
.mk-prof .small { margin: 2px 0 0; }
.seal-av { flex: none; width: 52px; height: 52px; border-radius: 6px; background: var(--red); color: #F6E9DC; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 26px; box-shadow: inset 0 0 0 2px rgba(246,233,220,.35); }
.mk-follow { width: auto; min-height: 40px; padding: 0 18px; font-size: 14px; }
.mk-prof .stat { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 12px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.mk-prof .stat > div { display: flex; flex-direction: column; gap: 2px; }
.mk-prof .stat > div + div { border-left: 1px solid var(--line2); }
.mk-prof .stat b { font-size: 22px; }
.mk-prof .stat b.gold { color: #B07A1E; }
.mk-prof .stat span { font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.mk-prof .dist { display: flex; flex-direction: column; gap: 4px; }
.mk-prof .dist .r { display: grid; grid-template-columns: 30px 1fr 24px; gap: 8px; align-items: center; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.mk-prof .dist .bar { height: 6px; border-radius: 3px; background: var(--line2); overflow: hidden; }
.mk-prof .dist .fill { display: block; height: 100%; background: #B07A1E; }
.mk-prof .dist .n { text-align: right; }
.mk-reviews li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line2); }
.mk-reviews .t { display: flex; justify-content: space-between; align-items: center; }
.mk-reviews .card { margin: 0; font-family: var(--sans); font-size: 11.5px; color: #8C6B3A; }
.mk-reviews .tx { margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--ink2); }
.mk-stars i { font-style: normal; color: #D8CDBB; font-size: 14px; }
.mk-stars i.on { color: #B07A1E; }
.mk-starpick { display: flex; gap: 6px; }
.mk-starpick button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 30px; color: #D8CDBB; cursor: pointer; }
.mk-starpick button[aria-checked=true] { color: #B07A1E; }
.mk-form textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #B3A58E; background: #fff; font-family: var(--sans); font-size: 14px; }
.mk-review-done { padding: 14px 16px; border-radius: 8px; background: rgba(176,141,87,.1); }
.mk-review-done b { color: #B07A1E; }
.mk-review-done p { margin: 6px 0 0; font-family: var(--sans); font-size: 13px; color: var(--ink2); }

/* 구매 희망 */
.mk-board .top.two { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.mk-board .top.two > div + div { padding-left: 14px; border-left: 1px solid rgba(176,141,87,.35); }
.mk-board .top.two b { font-size: 22px; }
.mk-board .sellp { color: #F0B4A6; }
.mk-board > .aucn { align-self: flex-start; }
.mk-dock .btn b { font-size: 16px; }
.mk-wants, .mk-mywants { list-style: none; margin: 0; padding: 0; }
.mk-wants li { display: grid; grid-template-columns: 1fr 1.3fr 50px; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line2); font-family: var(--sans); font-size: 12.5px; color: var(--ink2); }
.mk-wants li.h { padding: 6px 0; font-size: 11px; color: var(--muted); }
.mk-wants li span:last-child { text-align: right; }
.mk-wants b { font-family: var(--serif); font-size: 16px; color: #8A2E21; }
.mk-wantsbox { display: flex; flex-direction: column; gap: 10px; }
.mk-mywants li { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; margin-bottom: 6px; border-radius: 6px; background: rgba(166,58,42,.06); border: 1px dashed rgba(166,58,42,.5); }
.mk-mywants li > div { display: flex; flex-direction: column; }
.mk-quick { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-radius: 8px; background: #211C19 var(--lacquer); color: var(--paper); text-decoration: none; }
.mk-quick b { font-family: var(--serif); font-size: 20px; color: #E2C485; }
.mk-quick .small { margin-left: auto; color: #CFC4B2; }
.mk-sellrow { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 8px; background: var(--paper2); border: 1px solid var(--line); }
.mk-sellrow > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.mk-sellrow .act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-sellrow .act .btn { min-height: 46px; font-size: 13.5px; text-decoration: none; }
.mk-sellrow .act .btn:only-child { grid-column: 1 / -1; }
.mk-wl { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.mk-seller .role { padding: 0 6px; border-radius: 3px; background: rgba(43,38,34,.08); font-size: 10.5px; color: var(--muted); }

/* 체결가 줄: 가격 먼저, 오른쪽에 판매가/경매 표시와 날짜 */
.mk-trades li { grid-template-columns: 1fr auto; }
.mk-trades .what { gap: 3px; }
.mk-trades .what b { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.mk-trades .right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.mk-trades .how { align-self: flex-end; padding: 1px 9px; font-size: 11.5px; font-weight: 700; }
.mk-trades .sub { font-size: 10.5px; color: var(--muted); }
.mk-ctabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 50px; font-size: 14px; line-height: 1.2; }
.mk-ctabs button small { font-family: var(--sans); font-size: 11px; opacity: .75; }
.mk-board .top.two .chg { display: block; }

/* 카드 이름 아래 현재 시세 */
.mk-hero { align-items: stretch; }
.mk-hero .ph { align-self: flex-start; height: auto; }
.mk-hero .ph img { object-fit: cover; display: block; }
.mk-hero .info { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.mk-quote { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding: 12px 14px; border-radius: 6px; background: var(--paper2); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--gold); }
.mk-quote .lb { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.mk-quote b { font-family: var(--serif); font-size: 24px; line-height: 1.2; color: var(--ink); }
.mk-quote .sub { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.mk-quote .chg.up { color: var(--red); font-weight: 700; }
.mk-quote .chg.dn { color: #2F5C9A; font-weight: 700; }
.mk-quote .warn { font-family: var(--sans); font-size: 10.5px; color: #8A2E21; }

/* 등급 숫자 줄: 회사를 고르면 아래에 붙어서 나옴 */
.mk-nums { padding: 8px 10px; border-radius: 8px; background: rgba(176,141,87,.1); border: 1px solid rgba(176,141,87,.35); }
.mk-nums .chip { background: var(--paper); }
.mk-buy-sel { display: flex; flex-direction: column; gap: 8px; }
.mk-sel:disabled { opacity: .55; }
.mk-rbar .btn-check { min-height: 36px; min-width: 76px; font-size: 13px; }
.mk-steps.five { grid-template-columns: repeat(5, 1fr); }
.mk-orders li.has-rbar { flex-direction: column; gap: 0; }
.mk-orders li.has-rbar .mk-rbar { margin: 0 0 14px; }

.mk-orow .when { display: block; margin-top: 2px; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.mk-prof .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-prof .acts .mk-follow { width: 100%; }

/* ── 1:1 메시지 ── */
.mk-chats { list-style: none; margin: 0; padding: 0; }
.mk-chats li + li { border-top: 1px solid var(--line2); }
.mk-chats a { display: flex; align-items: center; gap: 12px; padding: 14px 2px; color: inherit; text-decoration: none; }
.mk-chats .b { flex: 1; min-width: 0; }
.mk-chats .t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mk-chats .t b { font-size: 16px; }
.mk-chats .last { margin: 3px 0 0; font-family: var(--sans); font-size: 13px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-chats .un { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #A8322A; color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mk-room-page { padding-bottom: 96px; }
.mk-room-head { display: flex; justify-content: space-between; align-items: center; }
.mk-safe { margin: 8px 0 4px; padding: 10px 12px; border-radius: 8px; background: #F7EEDB; border: 1px solid #E2CB98; font-family: var(--sans); font-size: 12px; line-height: 1.55; color: #7A5A1E; }
.mk-msgs { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.mk-msgs .day { align-self: center; margin: 8px 0 2px; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.mk-msgs .me, .mk-msgs .you { display: flex; align-items: flex-end; gap: 6px; max-width: 86%; }
.mk-msgs .me { align-self: flex-end; flex-direction: row-reverse; }
.mk-msgs .you { align-self: flex-start; }
.mk-msgs .bb { padding: 9px 12px; border-radius: 14px; font-family: var(--sans); font-size: 14.5px; line-height: 1.5; }
.mk-msgs .bb p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.mk-msgs .me .bb { background: #1F1B17; color: #F3E7CC; border-bottom-right-radius: 4px; }
.mk-msgs .you .bb { background: var(--paper2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.mk-msgs .ctx { display: block; margin-bottom: 3px; font-size: 11px; opacity: .7; }
.mk-msgs .t { flex: none; font-family: var(--sans); font-size: 10.5px; color: var(--muted); }
.mk-msgs .sys { align-self: stretch; }
.mk-msgs .sys > div { padding: 12px 14px; border-radius: 8px; background: #EFE6D3; border: 1px dashed #C9AE78; font-family: var(--sans); }
.mk-msgs .sys b { font-size: 12px; color: #8C6A2A; }
.mk-msgs .sys p { margin: 4px 0; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.mk-msgs .sys .t { display: block; text-align: right; }
.mk-compose { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); z-index: 20; box-sizing: border-box; }
.mk-compose textarea { flex: 1; min-height: 42px; max-height: 120px; resize: none; padding: 10px 12px; border-radius: 20px; border: 1px solid #CDBFA6; background: #FFFDF8; font-family: var(--sans); font-size: 15px; line-height: 1.4; }
.mk-compose .send { flex: none; height: 42px; padding: 0 16px; border-radius: 21px; border: 0; background: #1F1B17; color: #E8D3A2; font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; }
.mk-compose .send:disabled { opacity: .5; }
.mk-who-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-who-row .pill { flex: none; }
.mk-tabs .tablink { flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid #CDBFA6; background: var(--paper2); font-family: var(--serif); font-size: 15px; display: flex; align-items: center; justify-content: center; position: relative; text-decoration: none; color: inherit; }
.mk-tabs .tablink .dot { position: absolute; top: 6px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #A8322A; }
.mk-tabs .tablink .dot[hidden] { display: none; }
.mk-deadline { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 8px; background: var(--paper2); border: 1px solid var(--line); }
.mk-deadline b { font-size: 15px; }
.mk-deadline p { margin: 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.6; color: var(--ink2); white-space: pre-line; }
.mk-deadline.hot { background: #FBEDE9; border-color: #E0A79D; }
.mk-deadline.hot b { color: #A8322A; }
.mk-refund { display: flex; flex-direction: column; gap: 10px; }
.mk-refund .why { padding: 12px 14px; border-radius: 8px; background: #EFE6D3; border: 1px dashed #C9AE78; }
.mk-refund .why b { font-size: 14px; }
.mk-refund .why p { margin: 4px 0 0; font-family: var(--sans); font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.mk-orow .st-refund { background: #FBEDE9; color: #A8322A; }
.mk-pstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 8px; }
.mk-pstrip a { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #E9DFCB; }
.mk-pstrip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-msgs .bb .mk-pstrip { grid-template-columns: repeat(2, 96px); }
.mk-slot .rm { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 12px; border: 0; background: rgba(31,27,23,.8); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.mk-steps.three { grid-template-columns: repeat(3, 1fr); }

/* ── 배지 · 찜 · 신고 ── */
.mk-seller .bdg { padding: 1px 6px; border-radius: 8px; background: #EFE3C6; color: #7A5A1E; font-size: 10.5px; font-weight: 700; }
.mk-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-badges .b { padding: 3px 9px; border-radius: 10px; background: #EFE3C6; color: #7A5A1E; font-family: var(--sans); font-size: 11.5px; font-weight: 700; }
.mk-badges .b-fast { background: #E3EEDD; color: #2F5D3A; }
.mk-badges .b-rating { background: #F7E7C2; color: #8C5A00; }
.mk-badges .b-norefund { background: #E4EAF2; color: #2E4A6B; }
.mk-like { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid #CDBFA6; background: var(--paper2); font-family: var(--sans); font-size: 13px; cursor: pointer; color: var(--ink); }
.mk-like .h { font-size: 17px; line-height: 1; color: #A8322A; }
.mk-like.on { border-color: #A8322A; background: #FBEDE9; }
.mk-headrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mk-report { font-family: var(--sans); font-size: 12px; color: var(--muted); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 4px 0; }
.mk-counter { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 8px; background: #FBEDE9; border: 1px solid #E0A79D; }
.mk-counter b { font-size: 17px; color: #A8322A; }
.mk-counter .small { margin: 0; }
.mk-offers .act { display: flex; align-items: center; gap: 10px; }
.mk-alertbtn { margin-top: 8px; width: 100%; min-height: 34px; border-radius: 17px; border: 1px solid #B08D57; background: transparent; color: #7A5A1E; font-family: var(--sans); font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* 거래소: 자동완성 · 바로 가기 · 가격대 */
.search { position: relative; }
.mk-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 4px 0; border-radius: 10px; background: #FFFDF8; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(30,20,12,.18); }
.mk-suggest[hidden] { display: none; }
.mk-suggest a { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 9px 14px; color: inherit; text-decoration: none; }
.mk-suggest a b { font-size: 15px; }
.mk-suggest a .small { grid-column: 1; }
.mk-suggest a .n { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--sans); font-size: 12px; color: #7A5A1E; }
.mk-suggest li + li { border-top: 1px solid var(--line2); }
.mk-quick-links { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.mk-quick-links::-webkit-scrollbar { display: none; }
.ql { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 13px; border-radius: 17px; border: 1px solid #CDBFA6; background: var(--paper2); color: var(--ink); font-family: var(--sans); font-size: 13px; text-decoration: none; cursor: pointer; }
.ql b { color: #A8322A; font-size: 12px; }
.mk-range { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--line2); }
.mk-range input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #CDBFA6; background: #FFFDF8; font-family: var(--sans); font-size: 13.5px; text-align: right; }
/* 관심 */
.mk-likecell { position: relative; }
.mk-likecell .mk-like { position: absolute; top: 6px; right: 6px; min-height: 30px; padding: 0 8px; background: rgba(251,248,241,.92); }
.mk-likecell .mk-like .n { display: none; }
.mk-tile.gone { opacity: .5; }
.mk-alerts { list-style: none; margin: 0; padding: 0; }
.mk-alerts li { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line2); }
.mk-alerts .b { flex: 1; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.mk-alerts .b b { font-size: 16px; }
.mk-alerts .p { font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: #7A5A1E; }
.mk-alerts .now { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.mk-alerts .now.on { color: #2F5D3A; font-weight: 700; }
/* 장바구니 */
.mk-cartgroup { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 8px; background: var(--paper2); border: 1px solid var(--line); }
.mk-cartgroup + .mk-cartgroup { margin-top: 14px; }
.mk-cartgroup .h { display: flex; justify-content: space-between; align-items: center; }
.mk-cartlist { list-style: none; margin: 0; padding: 0; }
.mk-cartlist li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line2); }
.mk-cartlist li.gone { opacity: .5; }
.mk-cartlist .r { flex: 1; display: flex; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.mk-cartlist .ph { flex: none; width: 52px; aspect-ratio: 63 / 88; border-radius: 4px; overflow: hidden; background: #E9DFCB; }
.mk-cartlist .ph img { width: 100%; height: 100%; object-fit: cover; }
.mk-cartlist .r > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-cartlist .pr { font-weight: 700; }
/* 설정 */
.mk-setsec { display: flex; flex-direction: column; gap: 12px; }
.mk-setsec + .mk-setsec { margin-top: 26px; }
.mk-setsec h2 { margin: 0; font-size: 18px; }
.mk-toggles { list-style: none; margin: 0; padding: 0; }
.mk-toggles li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.mk-toggles li > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mk-switch { flex: none; position: relative; width: 50px; height: 30px; border-radius: 15px; border: 0; background: #CDBFA6; cursor: pointer; transition: background .15s; }
.mk-switch .k { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.mk-switch.on { background: #2F5D3A; }
.mk-switch.on .k { transform: translateX(20px); }
.mk-acct { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 8px; background: var(--paper2); border: 1px solid var(--gold); }
.mk-acct b { font-size: 16px; }
.mk-form input[type=text] { height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid #CDBFA6; background: #FFFDF8; font-family: var(--sans); font-size: 15px; }
.mk-setsec .mk-form input { letter-spacing: normal; }
/* 묶음 · 배송 조회 · 정산 계좌 안내 */
.mk-bundle { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 8px; background: #EFE6D3; border: 1px solid #D9C49A; }
.mk-bundle ul { list-style: none; margin: 0; padding: 0; }
.mk-bundle li a { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 7px 0; color: inherit; text-decoration: none; border-top: 1px dashed #D9C49A; }
.mk-bundle li .small { grid-column: 1; }
.mk-bundle li .st { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--sans); font-size: 11.5px; color: #7A5A1E; }
.mk-bundle li.me a > span:first-child { font-weight: 700; }
.mk-trackbox { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 8px; background: #EFE6D3; }
.mk-trackbox .h { display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); font-size: 14px; }
.mk-trackbox .ok { padding: 2px 8px; border-radius: 9px; background: #2F5D3A; color: #fff; font-size: 11.5px; }
.mk-trackbar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.mk-trackbar li { padding-top: 6px; border-top: 4px solid #D9CDB8; font-family: var(--sans); font-size: 10px; color: var(--muted); text-align: center; }
.mk-trackbar li.done { border-color: #8C7A62; color: var(--ink); font-weight: 700; }
.mk-tracksteps { list-style: none; margin: 0; padding: 0; }
.mk-tracksteps li { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px dashed #D9C49A; font-family: var(--sans); font-size: 13px; }
.mk-payout-need { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; padding: 12px 14px; border-radius: 8px; background: #FBEDE9; border: 1px solid #E0A79D; color: inherit; text-decoration: none; font-family: var(--sans); }
.mk-payout-need b { color: #A8322A; font-size: 14px; }
.mk-payout-need span { font-size: 12.5px; color: var(--ink2); }
.mk-room-head .acts { display: inline-flex; gap: 14px; }
/* 거래 관리 */
.adm-list { display: flex; flex-direction: column; gap: 12px; }
.adm-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 8px; background: var(--paper2); border: 1px solid var(--line); font-family: var(--sans); }
.adm-card .why { padding: 10px 12px; border-radius: 6px; background: #EFE6D3; }
.adm-card .why p { margin: 4px 0 0; white-space: pre-wrap; }
.adm-card textarea { padding: 10px; border-radius: 8px; border: 1px solid #CDBFA6; font-family: var(--sans); }
.adm-msgs { list-style: none; margin: 8px 0 0; padding: 0; }
.adm-msgs li { padding: 8px 0; border-top: 1px dashed var(--line2); font-size: 13px; }
.adm-msgs p { margin: 2px 0; white-space: pre-wrap; }
.adm-card .mk-form input[type=text] { letter-spacing: normal; height: 42px; }
.adm-card label.small { display: flex; align-items: center; gap: 6px; }
.adm-card label.small input { width: 18px; height: 18px; }
.mk-cartgroup .h a { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink); }
.collect > .btn { flex: 1 1 100%; }
.collect > .small, .collect > strong { flex: 1 1 100%; margin: 0; }
.mk-filter .chip small.n { font-family: var(--sans); font-size: 11px; opacity: .7; }
.mk-filter .chip small.z { opacity: .35; }
.mk-filter .mk-arrow.next { background: linear-gradient(90deg, rgba(244,237,226,0), var(--paper) 55%); }
.mk-filter .mk-scroll + .mk-scroll { border-top: 1px dashed var(--line2); padding-top: 8px; }
.mk-filter .mk-scroll + .mk-scroll .mk-arrow { top: 8px; }
.mk-filter .mk-sub { margin-top: 8px; }
.mk-filter .mk-sub[hidden] { display: none; }
.mk-filter .mk-sub .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mk-filter .mk-sub .chips::-webkit-scrollbar { display: none; }
.mk-filter .mk-sub .chip { flex: none; background: var(--paper); }
.mk-filter .mk-sub .mk-arrow.next { background: linear-gradient(90deg, rgba(240,230,214,0), #EFE6D6 55%); }
.mk-filter .mk-sub .mk-arrow.prev { background: linear-gradient(270deg, rgba(240,230,214,0), #EFE6D6 55%); }
.mk-filter .mk-sub .chip[aria-pressed=true] { background: #1F1B17; border-color: #1F1B17; color: #E8D3A2; }

/* 거래소 검색 목록 (이미지 · 판 묶음 · 스크롤) */
.mk-suggest { max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; }
.mk-suggest li.head { padding: 8px 14px; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.mk-suggest .r { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.mk-suggest .th { flex: none; width: 40px; aspect-ratio: 63 / 88; border-radius: 3px; overflow: hidden; background: #E9DFCB; }
.mk-suggest .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-suggest .b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-suggest .b b { font-size: 15px; }
.mk-suggest .b .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-suggest .eds { display: flex; gap: 4px; flex-wrap: wrap; }
.mk-suggest .eds .ed { padding: 1px 6px; border-radius: 6px; background: #EFE6D3; color: #7A5A1E; font-family: var(--sans); font-size: 10.5px; text-decoration: none; }
.mk-suggest .n { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: var(--sans); font-size: 12px; color: #7A5A1E; }
.mk-suggest .n b { font-size: 12px; }
.mk-suggest .n span { font-size: 11px; color: var(--ink2); }
.grid .more-sentinel { grid-column: 1 / -1; }
.btn[hidden], .pill[hidden], .chip[hidden] { display: none; }

/* ── 거래소 도구: 즉시판매 · 배송 조회 · 시세 비교 ── */
.btn.sm { width: auto; min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; white-space: nowrap; }
.tool-h { margin: 6px 0 0; font-size: 16px; }
.tool-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tool-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--paper2); border: 1px solid var(--line); border-radius: 10px; }
.tool-row .th { flex: none; width: 54px; aspect-ratio: 63 / 88; border-radius: 4px; overflow: hidden; background: #E9DFCB; display: block; }
.tool-row .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tool-row .th-link { flex: none; }
.tool-row .b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tool-row .b > b { font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-row .b .small { line-height: 1.45; }
.tool-row .price strong { font-size: 17px; color: var(--red); }
.tool-row .muted, .muted { color: var(--muted); }
.tool-row .warn { color: #A0502E; }
.tool-row .act { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tool-row.deliv { flex-direction: column; align-items: stretch; gap: 8px; }
.tool-row.deliv .top { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.tool-row.deliv .go { flex: none; font-size: 22px; color: var(--muted); }
.tool-row.deliv .btn.sm { align-self: flex-start; }
.stag { align-self: flex-start; padding: 1px 8px; border-radius: 9px; font-family: var(--sans); font-size: 11px; font-weight: 700; background: #EFE6D3; color: #7A5A1E; }
.stag.move { background: #DCE8F5; color: #2C5A8C; }
.stag.done { background: #DCEFD9; color: #2F6B2A; }
.stag.ret { background: #F6E0D9; color: #9A3A26; }
.trk { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--paper); border: 1px dashed var(--line); }
.trk .no { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.trk .no b { font-family: var(--sans); font-size: 14px; }
.trk .last { margin: 0; font-family: var(--sans); font-size: 13px; color: var(--ink); }
.trk .ok { color: #2F6B2A; }
.trk .linkbtn { align-self: flex-start; padding: 0; min-height: 30px; text-decoration: underline; }

.cmp-hero { display: flex; gap: 14px; align-items: center; }
.cmp-hero .ph { flex: none; width: 30%; max-width: 140px; aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); box-shadow: 0 6px 14px rgba(30,20,12,.18); }
.cmp-hero .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-hero h2 { margin: 0; font-size: 21px; line-height: 1.25; }
.cmp-hero p { margin: 4px 0 0; }
.cmp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cmp-chips::-webkit-scrollbar { display: none; }
.cmp-chips .chip { flex: none; min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.cmp-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper2); }
.cmp-h, .cmp-r { display: grid; grid-template-columns: 1.05fr 1fr 1fr 1fr; gap: 6px; padding: 10px 10px; align-items: center; }
.cmp-h { background: #1F1B17; color: #E8D3A2; font-family: var(--sans); font-size: 11.5px; }
.cmp-r { color: inherit; text-decoration: none; border-top: 1px solid var(--line); }
.cmp-r span { display: flex; flex-direction: column; min-width: 0; }
.cmp-r b { font-family: var(--sans); font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-r small { font-family: var(--sans); font-size: 10.5px; color: var(--muted); }
.cmp-r i { font-style: normal; color: #B6A98F; }
.cmp-r .ed b { font-family: var(--serif); font-size: 14.5px; }
.cmp-r .best { background: #F5E7C4; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.cmp-r .best b { color: #7A4E12; }

/* ── 커뮤니티 ── */
.cm-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--sans); font-size: 14px; }
.cm-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cm-cats::-webkit-scrollbar { display: none; }
.cm-cats .chip { flex: none; min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.cm-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cm-bar .small { line-height: 1.4; }
.cm-bar .linkbtn { flex: none; color: var(--ink); font-weight: 700; }
.cm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cm-list > li + li { border-top: 1px solid var(--line); }
.cm-item { display: flex; gap: 12px; padding: 14px 2px; color: inherit; text-decoration: none; }
.cm-item .b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cm-item .t { font-size: 16px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cm-item .pv { margin: 0; font-family: var(--sans); font-size: 13px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-item .meta { display: flex; justify-content: space-between; gap: 8px; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.cm-item .cnt { display: flex; gap: 8px; flex: none; }
.cm-item .th { flex: none; position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: #E9DFCB; }
.cm-item .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-item .th i { position: absolute; right: 4px; bottom: 4px; padding: 0 5px; border-radius: 6px; background: rgba(31,27,23,.75); color: #fff; font-style: normal; font-family: var(--sans); font-size: 10.5px; }
.cm-cat { align-self: flex-start; padding: 1px 8px; border-radius: 9px; font-family: var(--sans); font-size: 11px; font-weight: 700; background: #EFE6D3; color: #7A5A1E; }
.cm-cat.c-question { background: #DCE8F5; color: #2C5A8C; }
.cm-cat.c-show { background: #F6E0D9; color: #9A3A26; }
.cm-cat.c-info { background: #DCEFD9; color: #2F6B2A; }
.cm-write { position: fixed; right: max(16px, calc(50% - 224px)); bottom: 96px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 18px; border-radius: 24px; background: #211C19; color: #E8D3A2; font-family: var(--sans); font-size: 14.5px; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px var(--gold), 0 8px 18px rgba(30,20,12,.28); }
.cm-post { display: flex; flex-direction: column; gap: 10px; }
.cm-post h2 { margin: 0; font-size: 21px; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.cm-post .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--sans); font-size: 13px; }
.cm-post .meta a { color: var(--ink); font-weight: 700; }
.cm-post .meta .acts { margin-left: auto; display: flex; }
.cm-post .body { padding: 6px 0 4px; font-family: var(--sans); font-size: 15px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1px solid var(--line); padding-top: 14px; }
.cm-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper2); color: inherit; text-decoration: none; }
.cm-card .th { flex: none; width: 44px; aspect-ratio: 63 / 88; border-radius: 3px; overflow: hidden; background: #E9DFCB; }
.cm-card .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-card .b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-actions { display: flex; justify-content: center; padding: 6px 0; }
.cm-like { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 18px; border-radius: 21px; border: 1px solid #CDBFA6; background: var(--paper2); font-family: var(--sans); font-size: 14px; cursor: pointer; }
.cm-like.on { border-color: var(--red); color: var(--red); background: #FBEDE8; }
.cm-csec { display: flex; flex-direction: column; gap: 8px; border-top: 6px solid var(--line2); padding-top: 14px; }
.cm-ch { margin: 0; font-size: 15px; }
.cm-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cm-comments li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cm-comments .h { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; }
.cm-comments .h a { color: var(--ink); font-weight: 700; }
.cm-comments .ca { margin-left: auto; }
.cm-comments .ca .linkbtn { min-height: 28px; }
.cm-comments p { margin: 4px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-compose { display: flex; gap: 8px; align-items: flex-end; }
.cm-compose textarea { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #CDBFA6; background: var(--paper2); font-family: var(--sans); font-size: 14px; resize: none; }
.cm-form input[type=text], .cm-form textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #CDBFA6; background: var(--paper2); font-family: var(--sans); font-size: 15px; }
.cm-form textarea { resize: vertical; min-height: 200px; line-height: 1.6; }
.cm-left { align-self: flex-end; margin-top: -6px; }
.cm-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.cm-photos .pv { position: relative; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; background: #E9DFCB; }
.cm-photos .pv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-photos .rm { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 12px; border: 0; background: rgba(31,27,23,.75); color: #fff; font-size: 15px; line-height: 24px; padding: 0; cursor: pointer; }
.cm-addph { width: 76px; height: 76px; border-radius: 8px; border: 1px dashed #B9A988; background: var(--paper2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 20px; cursor: pointer; }
.cm-cardpick .search { position: relative; }
.cm-cardpick input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--sans); font-size: 14px; }
.cm-form input { letter-spacing: normal; }
.cm-form .search input, .cm-form .cm-cardpick input { height: auto; padding: 0; border: 0; background: transparent; }
.cm-form .search { background: #fff; }
.box-lg .nobox b { font-size: 14px; }
.box-lg .nobox small { font-size: 11px; }
.mk-cmplink { display: block; margin-top: 8px; text-align: center; font-family: var(--sans); font-size: 12.5px; color: #7A5A1E; text-decoration: underline; }
.mk-suggest li.head.hint, .search-hint { color: #7A5A1E; background: #F7EEDB; }
.search-hint { margin: 0; padding: 8px 12px; border-radius: 8px; font-family: var(--sans); font-size: 12.5px; line-height: 1.5; }
.grid > .search-hint { grid-column: 1 / -1; }

/* ── 포켓장터에 팔기 (매입) ── */
.seg-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg-row button { align-items: center; }
.bb-promo { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 8px; background: #211C19; color: var(--paper); }
.bb-promo b { font-size: 16px; color: #E8D3A2; }
.bb-promo p { margin: 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.7; color: #DCD2C2; }
.bb-promo .pill { background: var(--paper); color: var(--ink); min-height: 38px; font-size: 13px; }
.tool-row .act { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.bb-btn { min-height: 34px; font-size: 12px; white-space: nowrap; }
.bb-sheet { height: 92dvh; }
.bb-sheet .body { gap: 14px; }
.bb-dots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bb-dots li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--sans); font-size: 10.5px; color: var(--muted); text-align: center; }
.bb-dots li span { width: 24px; height: 24px; border-radius: 12px; border: 1.5px solid #CDBFA6; display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--paper2); }
.bb-dots li em { font-style: normal; line-height: 1.3; }
.bb-dots li.on { color: var(--ink); font-weight: 700; }
.bb-dots li.on span { background: var(--red); border-color: var(--red); color: #F6E9DC; }
.bb-dots li.done span { background: #8C7A62; border-color: #8C7A62; color: var(--paper); }
.bb-title { margin: 0; font-size: 17px; }
.bb-card { display: flex; gap: 12px; align-items: center; }
.bb-card img, .bb-card .ph { width: 54px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; background: #E3D8C4; flex: none; }
.bb-card b { display: block; font-size: 16px; }
.bb-money { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 10px; background: #211C19; color: var(--paper); }
.bb-money .lb { font-family: var(--sans); font-size: 12px; color: #CDB98E; }
.bb-money b { font-size: 26px; color: #E8D3A2; }
.bb-money .small { color: #CFC4B2; }
.bb-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-family: var(--sans); font-size: 13px; line-height: 1.65; color: #3A332D; }
.bb-list b { color: var(--ink); }
.bb-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-family: var(--sans); font-size: 13px; line-height: 1.65; }
.bb-steps li b { display: block; color: var(--ink); }
.bb-warn { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(166,58,42,.08); color: var(--red) !important; font-weight: 700; }
.bb-agree { padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--ink); background: var(--paper2); color: var(--ink); font-weight: 700; }
.bb-addr { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--paper2); border: 1px dashed #B3A58E; font-family: var(--sans); font-size: 13px; line-height: 1.7; white-space: pre-line; display: flex; flex-direction: column; gap: 6px; }
.bb-addr p { margin: 0; white-space: pre-line; }
.bb-addr .lb { font-size: 11.5px; color: var(--muted); }
.bb-addr .btn { align-self: flex-start; width: auto; min-height: 34px; padding: 0 14px; font-size: 12.5px; }
.bb-item { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 10px; background: var(--paper2); border: 1px solid var(--line); }
.bb-item.focus { border-color: var(--red); box-shadow: 0 0 0 2px rgba(166,58,42,.15); }
.bb-head { display: flex; gap: 12px; align-items: flex-start; }
.bb-head .th { width: 52px; flex: none; aspect-ratio: 63 / 88; border-radius: 4px; overflow: hidden; background: #E3D8C4; }
.bb-head .th img { width: 100%; height: 100%; object-fit: cover; }
.bb-head .b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bb-head .b > b { font-size: 16px; }
.bb-head b.gold { color: #8A6A2E; text-shadow: none; white-space: nowrap; }
.bb-amt strong { font-size: 17px; color: var(--ink); }
.bb-amt strong.muted { font-size: 14px; color: var(--muted); }
.bb-tag { flex: none; padding: 3px 8px; border-radius: 10px; font-family: var(--sans); font-size: 11px; font-weight: 700; background: #E7DFCF; color: var(--ink2); white-space: nowrap; }
.bb-tag.act { background: var(--red); color: #F6E9DC; }
.bb-tag.ok { background: #2F5D45; color: #E9F2EC; }
.bb-tag.bad { background: #6E2B22; color: #F6E9DC; }
.bb-tag.muted { background: #E7DFCF; color: var(--muted); }
.bb-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bb-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--sans); font-size: 10px; color: var(--muted); text-align: center; line-height: 1.25; }
.bb-track li::before { content: ''; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: #DCCFB6; }
.bb-track li:first-child::before { display: none; }
.bb-track i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 6px; background: #DCCFB6; }
.bb-track li.done i, .bb-track li.done::before, .bb-track li.on::before { background: #8C7A62; }
.bb-track li.on i { background: var(--red); box-shadow: 0 0 0 3px rgba(166,58,42,.2); }
.bb-track li.on { color: var(--ink); font-weight: 700; }
.bb-track.failed li.on i { background: #6E2B22; }
.bb-msg { margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.7; color: var(--red); font-weight: 700; }
.bb-msg.bad { color: #6E2B22; }
.bb-due { margin: 0; font-family: var(--sans); font-size: 12.5px; font-weight: 700; }
.bb-ship { padding: 12px; }
.bb-ship .row { grid-template-columns: 1fr 1.3fr; }
.bb-ship input { letter-spacing: 0; }
.bb-oripa { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: #211C19; color: #E8D3A2; text-decoration: none; font-family: var(--sans); font-size: 13px; }
.bb-oripa .small { color: #CFC4B2; }
.bar { display: block; height: 6px; border-radius: 3px; background: rgba(176,141,87,.25); overflow: hidden; }
.bar .fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #B08D57, #D6B47A); }
.bb-hist summary { font-family: var(--sans); font-size: 12px; color: var(--muted); cursor: pointer; }
.bb-hist ul { list-style: none; margin: 8px 0 0; padding: 0; font-family: var(--sans); font-size: 12px; }
.bb-hist li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted #DCCFB6; }
.small.warn { color: var(--red); }

/* ── 오리파 ── */
.op-tabs a { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #CDBFA6; background: var(--paper2); font-family: var(--sans); font-size: 13.5px; color: var(--ink); text-decoration: none; }
.op-tabs a.on { background: #1F1B17; border-color: #1F1B17; color: #E8D3A2; }
.op-hero { padding: 16px; border-radius: 10px; background: #211C19; color: var(--paper); }
.op-hero b { font-size: 18px; color: #E8D3A2; }
.op-hero p { margin: 6px 0 0; font-family: var(--sans); font-size: 12.5px; color: #DCD2C2; line-height: 1.7; }
.op-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.op-tile { display: flex; gap: 14px; padding: 14px; border-radius: 10px; background: var(--paper2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.op-tile.out { opacity: .65; }
.op-stack { position: relative; width: 92px; height: 112px; flex: none; }
.op-stack .op-th { position: absolute; width: 62px; top: 0; }
.op-stack .op-th:nth-child(1) { left: 26px; z-index: 3; }
.op-stack .op-th:nth-child(2) { left: 12px; top: 6px; z-index: 2; transform: rotate(-6deg); }
.op-stack .op-th:nth-child(3) { left: 0; top: 12px; z-index: 1; transform: rotate(-12deg); }
.op-th { display: block; aspect-ratio: 63 / 88; border-radius: 4px; overflow: hidden; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); box-shadow: 0 2px 6px rgba(30,20,12,.2); }
.op-th img { width: 100%; height: 100%; object-fit: cover; }
.op-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.op-name { font-size: 17px; }
.op-price strong { font-size: 18px; color: var(--red); }
.op-price span { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.op-best { color: #8A6A2E; }
.op-rules summary { font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 0; }
.op-rules ul { margin: 6px 0 0; padding-left: 18px; font-family: var(--sans); font-size: 12.5px; line-height: 1.75; color: var(--ink2); }
.op-head { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 10px; background: var(--paper2); border: 1px solid var(--line); }
.op-head p { margin: 0; }
.op-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.op-tier { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 10px; background: var(--paper2); border: 1px solid var(--line); text-align: center; }
.op-tier b { font-size: 20px; }
.op-tier span { font-family: var(--sans); font-size: 13px; font-weight: 700; }
.op-tier em { font-style: normal; font-family: var(--sans); font-size: 10px; color: var(--muted); line-height: 1.3; }
.tS b, .tier.tS, .op-cell.tS .tier { color: #B07A1E; }
.tA b { color: var(--red); }
.op-drawbar { position: sticky; bottom: 86px; z-index: 4; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--paper); border: 1px solid #CDBFA6; box-shadow: 0 8px 24px rgba(30,20,12,.15); }
.op-count { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.op-count button { align-items: center; padding: 10px 4px; }
.op-pay { display: flex; flex-direction: column; gap: 8px; }
.op-pay .mk-sel { width: 100%; }
.op-sum { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--sans); font-size: 13px; }
.op-sum b { font-size: 18px; }
.op-soldout { margin: 0; padding: 14px; text-align: center; border-radius: 10px; background: #E7DFCF; font-family: var(--sans); font-weight: 700; }
.op-lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.op-cell { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.op-cell b { font-size: 12.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-cell .small { font-size: 10.5px; line-height: 1.4; }
.op-cell .v { color: var(--ink2); font-weight: 700; }
.op-cph { display: block; aspect-ratio: 63 / 88; border-radius: 5px; overflow: hidden; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); box-shadow: 0 0 0 1px rgba(176,141,87,.45); }
.op-cph img { width: 100%; height: 100%; object-fit: cover; }
.op-cell .tier { position: absolute; top: 4px; left: 4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 4px; background: rgba(33,28,25,.85); color: #E8D3A2; font-family: var(--sans); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.op-cell.drawn .op-cph { filter: grayscale(1) brightness(.75); }
.op-cell.drawn b, .op-cell.drawn .small { opacity: .55; }
.op-cell .stamp { position: absolute; top: 28%; left: 50%; transform: translateX(-50%) rotate(-12deg); padding: 2px 8px; border: 2px solid var(--red); border-radius: 4px; color: var(--red); background: rgba(244,238,226,.85); font-family: var(--display); font-size: 15px; letter-spacing: 2px; }
.op-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-family: var(--sans); font-size: 12.5px; }
.op-recent li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dotted #DCCFB6; }
.op-recent .tier { font-weight: 700; text-align: center; }
.op-recent time { color: var(--muted); font-size: 11px; }
.op-reveal { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px max(16px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom)); background: radial-gradient(100% 70% at 50% 30%, #3A1E18 0%, #120E0C 75%); color: var(--paper); overflow-y: auto; }
.op-reveal h2 { margin: 8px 0 0; font-size: 19px; color: #E8D3A2; text-align: center; }
.op-reveal .small { color: #CFC4B2; text-align: center; }
.op-reveal .mk-two { width: 100%; max-width: 420px; }
.op-reveal .btn-line { border-color: #CDB98E; color: #E8D3A2; }
.op-reveal .linkbtn { color: #CFC4B2; }
.op-flips { width: 100%; max-width: 420px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.op-flip { position: relative; aspect-ratio: 63 / 100; border: 0; padding: 0; background: transparent; perspective: 900px; cursor: pointer; color: inherit; }
.op-flip > span { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.op-flip .back { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #6E2B22 0 8px, #5A231C 8px 16px); box-shadow: inset 0 0 0 2px #D6B47A; font-family: var(--display); font-size: 15px; color: #E8D3A2; letter-spacing: 2px; }
.op-flip .front { transform: rotateY(180deg); display: flex; flex-direction: column; gap: 4px; padding: 6px; background: #F4EEE2; color: var(--ink); text-align: left; }
.op-flip .front b { font-size: 12.5px; line-height: 1.3; }
.op-flip .front .small { font-size: 10.5px; line-height: 1.35; }
.op-flip .front .tier { position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; border-radius: 4px; background: #211C19; color: #E8D3A2; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 13px; }
.op-fph { display: block; flex: 1; min-height: 0; border-radius: 5px; overflow: hidden; background: #E3D8C4; }
.op-fph img { width: 100%; height: 100%; object-fit: cover; }
.op-flip.open .back { transform: rotateY(180deg); }
.op-flip.open .front { transform: rotateY(360deg); }
.op-flip.tS.open .front { box-shadow: 0 0 0 2px #D6B47A, 0 0 28px rgba(214,180,122,.75); }
.op-flip.tA.open .front { box-shadow: 0 0 0 2px var(--red), 0 0 18px rgba(166,58,42,.6); }
.op-points { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 10px; background: #211C19; color: var(--paper); }
.op-points .lb { font-family: var(--sans); font-size: 12px; color: #CDB98E; }
.op-points b { font-size: 26px; color: #E8D3A2; }
.op-points .small { color: #CFC4B2; }
.op-boxlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.op-boxrow { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--paper2); border: 1px solid var(--line); }
.op-boxrow.done { opacity: .7; }
.op-boxrow input[type=checkbox] { width: 22px; height: 22px; flex: none; accent-color: #1F1B17; }
.op-boxrow .op-th { width: 44px; flex: none; }
.op-boxrow .b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.op-boxbar { position: sticky; bottom: 86px; z-index: 4; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--paper); border: 1px solid #CDBFA6; box-shadow: 0 8px 24px rgba(30,20,12,.15); }
.op-boxbar .small { margin: 0; }
.op-ships, .op-logs { list-style: none; margin: 8px 0 0; padding: 0; font-family: var(--sans); font-size: 12.5px; }
.op-ships li, .op-logs li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px dotted #DCCFB6; }
.op-logs .up { color: #2F5D45; }
.op-logs .dn { color: var(--red); }
.op-addr { display: flex; flex-direction: column; gap: 8px; }
.op-addr input, .op-date, .ad-settings input[type=text], .ad-list .mk-form input[type=text], .ad-make input[type=text] { width: 100%; min-width: 0; height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid #B3A58E; background: #fff; font-family: var(--sans); font-size: 15px; letter-spacing: 0; color: var(--ink); }

/* ── 관리자: 오리파·매입 ── */
.ad-tabs { overflow-x: auto; flex-wrap: nowrap; }
.ad-tabs button { flex: none; padding: 0 12px; white-space: nowrap; }
.ad-list { display: flex; flex-direction: column; gap: 12px; }
.ad-photos { display: flex; gap: 6px; overflow-x: auto; }
.ad-photos img { width: 64px; height: 88px; object-fit: cover; border-radius: 4px; }
.ad-links { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-family: var(--sans); font-size: 12.5px; }
.ad-est p { margin: 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.7; }
.ad-est .gold { color: #2F5D45; text-shadow: none; font-weight: 700; }
.ad-est .warn { color: var(--red); font-weight: 700; }
.ad-settle { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 12.5px; }
.ad-settle li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px dotted #DCCFB6; }
.ad-field { display: flex; flex-direction: column; gap: 4px; font-family: var(--sans); font-size: 12.5px; color: var(--ink2); }
.op-left b { font-family: var(--sans); font-size: 15px; color: var(--ink); }
/* 라스트원 상 */
.op-last { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; background: linear-gradient(120deg, #2A1A12, #5A2A1C); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(214,180,122,.6); }
.op-last .op-th { width: 54px; flex: none; }
.op-last .b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.op-last .k { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #D6B47A; }
.op-last b { font-size: 16px; color: #F3E6CC; }
.op-last .small { color: #CFC4B2; }
.op-last.got { opacity: .7; }
.op-lastchip { align-self: flex-start; padding: 2px 8px; border-radius: 10px; background: #2A1A12; color: #E8D3A2; font-family: var(--sans); font-size: 11px; font-weight: 700; }
.op-lastlabel { position: absolute; bottom: 6px; left: 6px; right: 6px; padding: 2px 0; border-radius: 4px; background: #B07A1E; color: #fff; font-family: var(--sans); font-size: 10.5px; font-weight: 700; text-align: center; }
/* 홈 오리파 배너 (다시) */
.op-banner { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; border-radius: 14px; text-decoration: none; color: var(--paper);
  background: radial-gradient(90% 120% at 85% 10%, rgba(214,180,122,.28) 0%, rgba(214,180,122,0) 55%), radial-gradient(120% 140% at 0% 100%, #6E2B22 0%, #241915 55%, #120E0C 100%);
  box-shadow: inset 0 0 0 1px rgba(214,180,122,.55), 0 10px 26px rgba(40,15,10,.35); }
.op-banner::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 22px, rgba(255,255,255,.025) 22px 23px); pointer-events: none; }
.opb-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.opb-k { font-family: var(--sans); font-size: 11.5px; letter-spacing: 3px; color: #D6B47A; }
.opb-live { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; background: rgba(166,58,42,.9); font-family: var(--sans); font-size: 11px; font-weight: 700; color: #FBEDE6; }
.opb-live i { width: 6px; height: 6px; border-radius: 3px; background: #FFD7C9; animation: opbPulse 1.4s ease-in-out infinite; }
.opb-hot { margin-left: auto; padding: 2px 8px; border-radius: 10px; border: 1px solid #D6B47A; font-family: var(--sans); font-size: 11px; font-weight: 700; color: #F3E6CC; }
.opb-body { position: relative; z-index: 1; display: flex; gap: 14px; align-items: center; }
.opb-fan { position: relative; width: 132px; height: 150px; flex: none; }
.opb-card { position: absolute; top: 6px; width: 96px; aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #3A2A22, #1C1512); box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.opb-card img { width: 100%; height: 100%; object-fit: cover; }
.opb-card.main { left: 28px; z-index: 3; box-shadow: 0 0 0 2px #D6B47A, 0 0 26px rgba(214,180,122,.55), 0 10px 22px rgba(0,0,0,.5); animation: opbFloat 3.6s ease-in-out infinite; }
.opb-card.main::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 48%, rgba(255,255,255,0) 62%); transform: translateX(-120%); animation: opbShine 3.2s ease-in-out infinite; }
.opb-card.side.s0 { left: 0; top: 18px; transform: rotate(-12deg); opacity: .85; }
.opb-card.side.s1 { left: 14px; top: 10px; transform: rotate(-5deg); z-index: 2; opacity: .92; }
.opb-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opb-title { font-size: 15px; color: #F3E6CC; line-height: 1.35; margin-bottom: 6px; }
.opb-lb { font-family: var(--sans); font-size: 10.5px; letter-spacing: 1px; color: #B9A78A; }
.opb-best { font-size: 18px; color: #fff; line-height: 1.3; }
.opb-val { font-family: var(--sans); font-size: 12px; color: #CFC4B2; }
.opb-val strong { font-family: var(--serif); font-size: 22px; color: #E8C88A; text-shadow: 0 0 12px rgba(214,180,122,.35); }
.opb-last { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 10px; background: rgba(214,180,122,.16); box-shadow: inset 0 0 0 1px rgba(214,180,122,.35); }
.opb-last-t { min-width: 0; display: flex; flex-direction: column; font-family: var(--sans); }
.opb-last-t em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #D6B47A; }
.opb-last-t b { font-size: 13px; color: #F3E6CC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opb-last-img { width: 34px; flex: none; aspect-ratio: 63 / 88; border-radius: 3px; overflow: hidden; background: #3A2A22; box-shadow: 0 0 0 1px #D6B47A, 0 0 10px rgba(214,180,122,.45); }
.opb-last-img img { width: 100%; height: 100%; object-fit: cover; }
.opb-meter { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.opb-meter .bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); }
.opb-meter .bar .fill { background: linear-gradient(90deg, #A63A2A, #D6B47A); }
.opb-left { font-family: var(--sans); font-size: 12px; color: #CFC4B2; }
.opb-left b { font-size: 14px; color: #fff; }
.opb-cta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; border-radius: 12px; background: linear-gradient(180deg, #E2C28A, #B8904F); color: #2A1A12; font-family: var(--sans); font-size: 13.5px; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.opb-cta b { font-size: 15px; }
.op-banner:not(.live) .opb-title { font-size: 18px; }
.op-banner:not(.live) .opb-cta { justify-content: center; font-weight: 700; }
@keyframes opbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes opbFloat { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes opbShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .opb-card.main, .opb-card.main::after, .opb-live i { animation: none; } }
/* 홈 피드 */
.hm-me { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--paper2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.hm-me[hidden], .hm-ticker[hidden], .hm-sec[hidden] { display: none; }
.hm-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; border-right: 1px solid var(--line); }
.hm-stat:nth-child(3) { border-right: 0; }
.hm-stat b { font-size: 19px; }
.hm-stat span { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.hm-go { font-family: var(--sans); font-size: 12px; color: var(--ink2); padding-left: 6px; white-space: nowrap; }
.hm-ticker { position: relative; height: 44px; overflow: hidden; border-radius: 10px; background: #211C19; }
.hm-tick { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; text-decoration: none; color: var(--paper); font-family: var(--sans); font-size: 12.5px; opacity: 0; transform: translateY(100%); transition: opacity .4s, transform .4s; }
.hm-tick.on { opacity: 1; transform: none; }
.hm-tick .k { flex: none; padding: 2px 7px; border-radius: 8px; background: var(--red); color: #FBEDE6; font-size: 10.5px; font-weight: 700; }
.hm-tick .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-tick b { flex: none; color: #E8C88A; }
.hm-tick time { flex: none; color: #B9A78A; font-size: 11px; }
.hm-sec { display: flex; flex-direction: column; gap: 10px; }
.hm-head { display: flex; align-items: baseline; justify-content: space-between; }
.hm-head h2 { margin: 0; font-size: 19px; }
.hm-more { font-family: var(--sans); font-size: 12.5px; color: var(--ink2); text-decoration: none; }
.hm-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none; overscroll-behavior-x: contain; }
.hm-row::-webkit-scrollbar { display: none; }
.hm-row > * { flex: 0 0 132px; scroll-snap-align: start; min-width: 0; }
.hm-hot { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--ink); }
.hm-hot .ph { position: relative; display: block; aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); box-shadow: 0 0 0 1px rgba(176,141,87,.45), 0 3px 8px rgba(30,20,12,.14); }
.hm-hot .ph img { width: 100%; height: 100%; object-fit: cover; }
.hm-hot .rank { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: rgba(33,28,25,.85); color: #E8D3A2; font-family: var(--sans); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hm-hot .nm { font-size: 13.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-hot .meta { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.hm-hot .pr { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hm-hot .pr strong { font-size: 14.5px; }
.hm-hot .chg { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--muted); }
.hm-hot .chg.up { color: var(--red); }
.hm-hot .chg.dn { color: #2F5D8C; }
.hm-reg { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 56px 14px 16px; border-radius: 12px; background: var(--paper2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.hm-reg b { font-size: 15px; }
.hm-reg .seal-static { top: 50%; transform: translateY(-50%); }
.hm-row .mk-tile { content-visibility: visible; }
.hm-row .mk-tile .nm { font-size: 13.5px; }

/* ── 홈 시안: 생동감·입체감 (html.depth) ── */
.depth .home-head .scene { will-change: transform; }
.depth .home-head::before { content: ''; position: absolute; inset: -20% -40%; z-index: 1; pointer-events: none; background: radial-gradient(40% 18% at 30% 70%, rgba(255,255,255,.55), transparent 70%), radial-gradient(35% 14% at 75% 82%, rgba(255,255,255,.45), transparent 70%); animation: dMist 14s ease-in-out infinite alternate; }
.depth .hang-sm { transform: translateX(-50%) translateY(var(--lift, 0px)); }
.depth .hang-sm .plaque { transform-origin: 50% -70px; animation: dSway 5.5s ease-in-out infinite; box-shadow: 0 22px 30px -6px rgba(30,20,12,.45), 0 4px 0 #0F0C0A, inset 0 1px 0 rgba(255,255,255,.12); }
.depth .hang-sm .rope { transform-origin: 50% 0; animation: dSway 5.5s ease-in-out infinite; }
.depth .home-head .iconbtn { box-shadow: 0 6px 14px rgba(30,20,12,.18), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(6px); }
.depth .menu-item { opacity: 0; transform: translateY(14px); animation: dRise .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0ms); -webkit-tap-highlight-color: transparent; }
.depth .menu-item { isolation: isolate; }
/* 수묵: 붓 원 뒤에 옅은 먹 번짐 (메뉴마다 방향이 조금씩 달라 손으로 그린 느낌) */
.depth .menu-item .enso { position: relative; transition: transform .2s; }
.depth .menu-item .enso::before { content: ''; position: absolute; inset: -9px; z-index: -1; background: url(/assets/inkwash.png?v=d176445d16) center / 100% 100% no-repeat; transform: rotate(var(--wr, 0deg)) scale(var(--ws, 1)); }
.depth .menu-item:nth-child(2) .enso::before { --wr: 70deg; --ws: .94; }
.depth .menu-item:nth-child(3) .enso::before { --wr: 150deg; --ws: 1.04; }
.depth .menu-item:nth-child(4) .enso::before { --wr: 215deg; --ws: .97; }
.depth .menu-item:nth-child(5) .enso::before { --wr: 300deg; --ws: 1.02; }
.depth .menu-item:nth-child(6) .enso::before { --wr: 25deg; --ws: .96; }
.depth .menu-item:nth-child(7) .enso::before { --wr: 110deg; --ws: 1.05; }
.depth .menu-item:nth-child(8) .enso::before { --wr: 250deg; --ws: .95; }
.depth .menu-item .enso svg { position: relative; z-index: 1; stroke-width: 1.7; filter: drop-shadow(0 0 .5px rgba(43,38,34,.7)) drop-shadow(0 0 1.5px rgba(43,38,34,.15)); }
.depth .menu-item:active .enso { transform: scale(.94); }
.depth .menu-item span:last-child { font-family: var(--serif); letter-spacing: .5px; }

/* 한지: 화면 바탕에 닥섬유·바랜 얼룩 */
.depth .app.home { background: var(--paper) url(/assets/hanji.webp) repeat; background-size: 360px 360px; }
.depth .home-head::after { background: linear-gradient(180deg, rgba(244,237,223,0), rgba(244,237,223,.95)); }
/* 표구: 상자마다 비단 테두리처럼 얇은 두 줄 */
.depth .search, .depth .hm-me, .depth .hm-reg { background: rgba(250,246,237,.82) url(/assets/hanji.webp) repeat; background-size: 360px 360px; background-blend-mode: multiply; border: 1px solid #C9B48C; box-shadow: inset 0 0 0 3px rgba(250,246,237,.9), inset 0 0 0 4px rgba(150,120,70,.28), 0 6px 14px -10px rgba(60,40,20,.45); }
.depth .news { border-top: 1px solid rgba(150,120,70,.35); }
.depth .news li { border-color: rgba(150,120,70,.22); }
.depth .op-banner { transform: perspective(900px) rotateX(2deg); box-shadow: inset 0 0 0 1px rgba(214,180,122,.55), inset 0 1px 0 rgba(255,255,255,.15), 0 22px 36px -14px rgba(40,15,10,.6), 0 4px 0 #120E0C; }
.depth .opb-cta { box-shadow: 0 6px 0 #8A6A35, 0 12px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .12s, box-shadow .12s; }
.depth .op-banner:active .opb-cta { transform: translateY(4px); box-shadow: 0 2px 0 #8A6A35, 0 6px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.6); }
.depth .hm-ticker { box-shadow: 0 10px 20px -10px rgba(20,10,5,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.depth .hm-tick .k { animation: dGlow 2.2s ease-in-out infinite; }
.depth .hm-row { perspective: 700px; padding-top: 6px; padding-bottom: 14px; }
.depth .hm-hot .ph, .depth .hm-row .mk-tile .ph { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; box-shadow: 0 0 0 1px rgba(176,141,87,.45), 0 14px 20px -10px rgba(30,20,12,.45); }
.depth .hm-hot .ph.tilting, .depth .hm-row .mk-tile .ph.tilting { transition: transform .06s linear; box-shadow: 0 0 0 1px rgba(214,180,122,.8), 0 22px 28px -10px rgba(30,20,12,.55); }
.depth .hm-hot .ph::after, .depth .hm-row .mk-tile .ph::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(60% 50% at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.75), transparent 60%), linear-gradient(115deg, transparent 35%, rgba(255,230,180,.35) 48%, rgba(180,220,255,.3) 54%, transparent 66%); background-size: 100% 100%, 250% 100%; animation: dHolo 5s ease-in-out infinite; }
.depth .hm-reg .seal-static { box-shadow: 0 4px 0 #6E2418, 0 8px 12px rgba(0,0,0,.25); }
.depth .news li { transition: background .2s; }
.depth .tabbar { background: rgba(251,248,241,.82); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 -10px 24px -16px rgba(60,40,20,.45); }
.depth .tabbar .fab { animation: dFab 3s ease-in-out infinite; }
.depth .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.depth .reveal.in { opacity: 1; transform: none; }
.depth .op-banner.reveal.in { transform: perspective(900px) rotateX(2deg); }
@keyframes dSway { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }
@keyframes dRise { to { opacity: 1; transform: none; } }
@keyframes dMist { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes dHolo { 0%, 100% { background-position: 0 0, 120% 0; } 50% { background-position: 0 0, -20% 0; } }
@keyframes dGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(166,58,42,.0); } 50% { box-shadow: 0 0 0 4px rgba(166,58,42,.25); } }
@keyframes dFab { 0%, 100% { box-shadow: inset 0 0 0 1px var(--gold), 0 6px 12px rgba(30,20,12,.22); } 50% { box-shadow: inset 0 0 0 1px var(--gold), 0 6px 18px rgba(176,141,87,.55); } }
@media (prefers-reduced-motion: reduce) { .depth .menu-item, .depth .reveal { opacity: 1; transform: none; animation: none; } }

/* ── 오리파 뽑기 연출 ── */
.rv { position: fixed; inset: 0; z-index: 48; display: flex; flex-direction: column; background: radial-gradient(90% 60% at 50% 42%, #3A1E18 0%, #160F0C 70%, #0B0807 100%); color: var(--paper); touch-action: none; user-select: none; -webkit-user-select: none; }
.rv-top { display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.rv-mute, .rv-skip { min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid rgba(214,180,122,.4); background: rgba(255,255,255,.06); color: #E8D3A2; font-family: var(--sans); font-size: 13px; cursor: pointer; }
.rv-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12px max(16px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; }
.rv-hint { margin: 0; min-height: 22px; font-family: var(--sans); font-size: 14px; color: #CFC4B2; text-align: center; animation: rvBlink 1.6s ease-in-out infinite; }
.rv-count { margin: 0; font-family: var(--sans); font-size: 13px; letter-spacing: 3px; color: #B9A78A; }
/* 봉투 */
.rv-pack { --shake: 0px; position: relative; width: 210px; height: 290px; border-radius: 10px; cursor: grab; background: url(/assets/hanji.webp) center / 300px repeat, linear-gradient(160deg, #F1E6D0, #D8C7A6); background-blend-mode: multiply; box-shadow: 0 0 0 2px #B08D57, 0 0 0 6px rgba(176,141,87,.25), 0 30px 50px rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #3A2A20; animation: rvFloat 3s ease-in-out infinite; }
.rv-pack-flap { position: absolute; left: 0; right: 0; top: 0; height: 110px; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, #E6D6B6, #CDB88F); border-radius: 10px 10px 0 0; transform-origin: top; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.rv-pack-seal { position: relative; z-index: 1; margin-top: 40px; width: 58px; height: 58px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--red); color: #F6E9DC; font-family: var(--display); font-size: 30px; transform: rotate(-6deg); box-shadow: 0 4px 0 #6E2418, 0 8px 14px rgba(0,0,0,.35); }
.rv-pack-k { font-family: var(--display); font-size: 18px; letter-spacing: 4px; }
.rv-pack-n { font-family: var(--sans); font-size: 13px; color: #7A6248; }
.rv-pack.charging { animation: rvShake .09s linear infinite; }
.rv-pack.torn { animation: rvTorn .6s cubic-bezier(.4,0,.6,1) forwards; }
.rv-pack.torn .rv-pack-flap { transform: rotateX(180deg) translateY(-6px); }
.rv-flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255,250,235,.95), rgba(255,240,210,0) 60%); animation: rvFlash .8s ease-out forwards; }
.rv-flash.gold { background: radial-gradient(circle at 50% 45%, rgba(255,230,160,1), rgba(214,180,122,0) 65%); }
/* 카드 */
.rv-table { perspective: 1000px; }
.rv-card { --glow: 0; position: relative; width: 210px; aspect-ratio: 63 / 88; border: 0; padding: 0; background: transparent; cursor: pointer; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); animation: rvDeal .45s cubic-bezier(.2,.8,.2,1); }
.rv-card > span { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.rv-back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: repeating-linear-gradient(45deg, #6E2B22 0 10px, #5A231C 10px 20px); box-shadow: inset 0 0 0 3px #D6B47A, inset 0 0 0 8px #5A231C, inset 0 0 0 9px rgba(214,180,122,.6); }
.rv-back b { width: 64px; height: 64px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #2A1A12; color: #E8D3A2; font-family: var(--display); font-size: 34px; box-shadow: inset 0 0 0 2px #D6B47A; }
.rv-back em { font-style: normal; font-family: var(--display); letter-spacing: 4px; color: #E8D3A2; }
.rv-front { transform: rotateY(180deg); background: #F4EEE2; }
.rv-ph { position: absolute; inset: 0; display: block; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); }
.rv-ph img { width: 100%; height: 100%; object-fit: cover; }
.rv-tier { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 6px; background: rgba(33,28,25,.9); color: #E8D3A2; font-family: var(--sans); font-weight: 700; font-size: 13px; }
.rv-card.open { transform: rotateY(180deg) scale(1.04); }
/* 뒷면 빛 예고 */
.rv-card.aura.tB { filter: drop-shadow(0 0 calc(var(--glow) * 18px) rgba(90,150,255,.95)); }
.rv-card.aura.tA { filter: drop-shadow(0 0 calc(var(--glow) * 24px) rgba(255,70,50,.95)); }
.rv-card.aura.tS { filter: drop-shadow(0 0 calc(var(--glow) * 34px) rgba(255,210,110,1)) drop-shadow(0 0 calc(var(--glow) * 10px) #fff); }
.rv-card.aura.tS .rv-back { box-shadow: inset 0 0 0 3px #FFE9B0, inset 0 0 0 8px #5A231C, inset 0 0 0 9px rgba(255,233,176,.9), inset 0 0 calc(var(--glow) * 60px) rgba(255,210,110,.8); }
.rv-card.open.tS { filter: drop-shadow(0 0 30px rgba(255,210,110,.95)); }
.rv-card.open.tA { filter: drop-shadow(0 0 22px rgba(255,90,60,.8)); }
.rv-card.open.tB { filter: drop-shadow(0 0 14px rgba(90,150,255,.7)); }
.rv.quake .rv-table { animation: rvQuake .12s linear infinite; }
.rv.flash-gold::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255,220,140,.55), transparent 60%); animation: rvFlash .9s ease-out forwards; }
.rv-wow { color: #FFD98A; font-size: 17px; letter-spacing: 1px; text-shadow: 0 0 12px rgba(255,200,100,.8); }
.rv-wow.a { color: #FF8A70; text-shadow: 0 0 12px rgba(255,90,60,.7); }
.rv-info { min-height: 76px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; animation: rvUp .4s ease-out; }
.rv-name { font-size: 20px; color: #fff; }
.rv-meta { font-family: var(--sans); font-size: 12.5px; color: #CFC4B2; }
.rv-val { font-family: var(--sans); font-size: 13px; color: #CFC4B2; }
.rv-val strong { font-family: var(--serif); font-size: 24px; color: #E8C88A; }
.rv-spark { position: absolute; left: 50%; top: 45%; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; animation: rvSpark var(--t, .8s) cubic-bezier(.1,.7,.3,1) forwards; }
.rv-spark.gold { background: #FFE29A; box-shadow: 0 0 10px #FFC85A; }
.rv-spark.red { background: #FF9A80; box-shadow: 0 0 8px #FF5A3C; }
.rv-spark.blue { background: #A8C8FF; box-shadow: 0 0 8px #5A96FF; }
/* 결과 */
.rv-title { margin: 0; font-size: 22px; color: #E8D3A2; text-align: center; }
.rv-sum { margin: 0; font-family: var(--sans); font-size: 13px; color: #CFC4B2; }
.rv-sum strong { font-family: var(--serif); font-size: 20px; color: #E8C88A; }
.rv-grid { width: 100%; max-width: 420px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.rv-mini { position: relative; display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); font-size: 11px; color: #CFC4B2; animation: rvUp .4s ease-out both; }
.rv-mini .rv-ph { position: relative; aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; }
.rv-mini b { font-family: var(--serif); font-size: 12.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-mini.tS .rv-ph { box-shadow: 0 0 0 2px #FFD98A, 0 0 16px rgba(255,210,110,.7); }
.rv-mini.tA .rv-ph { box-shadow: 0 0 0 2px #FF8A70; }
.rv-mini.tB .rv-ph { box-shadow: 0 0 0 2px #8AB4FF; }
.rv-note { margin: 0; font-family: var(--sans); font-size: 12px; color: #B9A78A; text-align: center; }
.rv-btns { width: 100%; max-width: 420px; }
@keyframes rvFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes rvShake { 0% { transform: translate(var(--shake), 0) rotate(1deg); } 25% { transform: translate(0, var(--shake)) rotate(-1deg); } 50% { transform: translate(calc(var(--shake) * -1), 0) rotate(1deg); } 75% { transform: translate(0, calc(var(--shake) * -1)) rotate(-1deg); } 100% { transform: translate(var(--shake), 0); } }
@keyframes rvTorn { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: translateY(60vh) scale(.6); opacity: 0; } }
@keyframes rvFlash { from { opacity: 1; } to { opacity: 0; } }
@keyframes rvDeal { from { transform: translateY(40vh) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rvQuake { 0% { transform: translate(2px, 1px); } 25% { transform: translate(-2px, -1px); } 50% { transform: translate(1px, -2px); } 75% { transform: translate(-1px, 2px); } }
@keyframes rvSpark { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); opacity: 0; } }
@keyframes rvUp { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rvBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .rv-pack, .rv-card, .rv-hint, .rv.quake .rv-table { animation: none !important; } }
/* 감정 카드 (슬랩) + 덮개 끌기 */
.rv-holder { --glow: 0; --peek: 0; position: relative; width: min(230px, 62vw); aspect-ratio: 0.6; border-radius: 12px; overflow: hidden; touch-action: none; cursor: grab; animation: rvDeal .45s cubic-bezier(.2,.8,.2,1); }
.rv-holder.nudge { animation: rvQuake .1s linear 3; }
.rv-slab { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(220,230,240,.25) 40%, rgba(255,255,255,.5)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), inset 0 0 0 4px rgba(170,185,200,.45); }
.rv-label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 4px; background: linear-gradient(180deg, #FFFFFF, #ECEFF3); color: #1C1C1C; box-shadow: inset 0 0 0 2px #C8202C; }
.rv-co { font-family: var(--sans); font-weight: 900; font-size: 15px; color: #C8202C; letter-spacing: .5px; }
.rv-lname { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.rv-lname b { font-family: var(--sans); font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-lname small { font-family: var(--sans); font-size: 9.5px; color: #555; }
.rv-grade { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.rv-grade small { font-family: var(--sans); font-size: 7.5px; letter-spacing: 1px; color: #666; }
.rv-grade b { font-family: var(--sans); font-size: 22px; font-weight: 900; color: #1C1C1C; }
.rv-window { position: relative; flex: 1; min-height: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.rv-window .rv-ph { position: absolute; inset: 0; }
.rv-rar { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 4px; background: rgba(20,20,20,.82); color: #FFE29A; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.rv-cover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; will-change: transform;
  background: repeating-linear-gradient(45deg, #6E2B22 0 10px, #5A231C 10px 20px); box-shadow: inset 0 0 0 3px #D6B47A, inset 0 0 0 8px #5A231C, inset 0 0 0 9px rgba(214,180,122,.6); }
.rv-cover b { width: 64px; height: 64px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #2A1A12; color: #E8D3A2; font-family: var(--display); font-size: 34px; box-shadow: inset 0 0 0 2px #D6B47A; }
.rv-cover em { font-style: normal; font-family: var(--display); letter-spacing: 4px; color: #E8D3A2; }
.rv-grip { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--sans); font-size: 11px; color: #F3E6CC; opacity: .85; animation: rvBlink 1.6s ease-in-out infinite; }
.rv-grip.top { top: 14px; } .rv-grip.bot { bottom: 14px; }
/* 덮개 빛 예고 → 걷을수록 더 밝게 */





.rv-holder.open { animation: rvPop .5s cubic-bezier(.2,1.6,.4,1); }
.rv-holder.open.tS .rv-slab { box-shadow: inset 0 0 0 2px #FFE9B0, inset 0 0 0 4px rgba(255,210,110,.8), inset 0 0 40px rgba(255,220,140,.5); }
.rv.quake .rv-table { animation: rvQuake .12s linear infinite; }
.rv-wow.b { color: #9CC2FF; text-shadow: 0 0 10px rgba(90,150,255,.7); }
@keyframes rvPop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1.03); } }

/* ── 진열대 (샵에서 봉투 고르기) ── */
.op-shopbtn { flex-direction: column; gap: 2px; min-height: 64px; }
.op-shopbtn b { font-size: 17px; }
.op-shopbtn span { font-family: var(--sans); font-size: 12px; opacity: .85; }
.sh { position: fixed; inset: 0; z-index: 48; display: flex; flex-direction: column; color: var(--paper);
  background: radial-gradient(70% 45% at 50% 18%, rgba(255,214,150,.22), transparent 70%), linear-gradient(180deg, #2A1C15 0%, #1A110D 60%, #120C09 100%); }
.sh-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left)); }
.sh-title { display: block; font-size: 18px; color: #F3E6CC; }
.sh-left { font-family: var(--sans); font-size: 12px; color: #B9A78A; }
.sh-tickets { display: flex; gap: 8px; padding: 8px max(16px, env(safe-area-inset-left)); overflow-x: auto; scrollbar-width: none; }
.sh-tickets::-webkit-scrollbar { display: none; }
.sh-tickets button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 76px; padding: 8px 10px; border-radius: 10px; border: 1px dashed rgba(214,180,122,.55); background: rgba(255,255,255,.04); color: #E8D3A2; font-family: var(--sans); cursor: pointer; }
.sh-tickets button b { font-size: 15px; } .sh-tickets button span { font-size: 11px; color: #B9A78A; }
.sh-tickets button.on { border-style: solid; background: linear-gradient(180deg, #E2C28A, #B8904F); color: #2A1A12; box-shadow: 0 4px 12px rgba(214,180,122,.35); }
.sh-tickets button.on span { color: #4A3520; }
.sh-status { margin: 2px 0 0; padding: 0 16px; font-family: var(--sans); font-size: 13.5px; color: #CFC4B2; text-align: center; }
.sh-status b { color: #F3E6CC; } .sh-status b.ok { color: #9BE0A8; }
.sh-status.shake { animation: rvQuake .1s linear 3; }
.sh-room { flex: 1; min-height: 0; overflow-y: auto; padding: 14px max(14px, env(safe-area-inset-left)) 18px; }
/* 나무 선반 3줄씩 */
.sh-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 12px; padding: 6px 4px 16px;
  background-image: linear-gradient(180deg, transparent calc(100% - 14px), #5A3B26 calc(100% - 14px), #3A2416 calc(100% - 4px), rgba(0,0,0,.45) 100%); background-size: 100% 122px; }
.sh-env { --r: 0deg; --dx: 0px; --dl: 0s; position: relative; aspect-ratio: 0.72; border: 0; padding: 0; cursor: pointer; border-radius: 6px; transform: translateX(var(--dx)) rotate(var(--r)); transition: transform .25s cubic-bezier(.2,1.4,.4,1), box-shadow .25s, opacity .4s;
  background: url(/assets/hanji.webp) center / 240px repeat, linear-gradient(160deg, #F1E6D0, #D3C09A); background-blend-mode: multiply; box-shadow: 0 6px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(120,90,50,.35); animation: shIdle 4s ease-in-out infinite; animation-delay: var(--dl); }
.sh-env-flap { position: absolute; left: 0; right: 0; top: 0; height: 42%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, #E6D6B6, #C9B285); border-radius: 6px 6px 0 0; }
.sh-env-no { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--display); font-size: 17px; color: #3A2A20; }
.sh-env-seal { position: absolute; left: 50%; top: 34%; width: 22px; height: 22px; margin-left: -11px; border-radius: 3px; background: var(--red); color: #F6E9DC; font-family: var(--display); font-size: 13px; display: flex; align-items: center; justify-content: center; transform: rotate(-6deg); box-shadow: 0 2px 0 #6E2418; }
.sh-env.on { transform: translateY(-14px) rotate(0deg) scale(1.08); box-shadow: 0 0 0 2px #FFD98A, 0 0 22px rgba(255,210,110,.7), 0 16px 20px rgba(0,0,0,.6); animation: none; z-index: 2; }
.sh-env.on::after { content: '✓'; position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 12px; background: #FFD98A; color: #2A1A12; font-family: var(--sans); font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.sh-env.taken { cursor: default; animation: none; opacity: .35; filter: grayscale(1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); background: rgba(255,255,255,.04); }
.sh-env.taken .sh-env-flap, .sh-env.taken .sh-env-seal { display: none; }
.sh-env.taken .sh-env-no { color: #8A7A66; }
.sh-env-sold { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-family: var(--sans); font-size: 10.5px; color: #CFC4B2; }
.sh-env.gone { animation: shGone .7s ease-in forwards; }
.sh-env.mine { animation: shMine .7s cubic-bezier(.5,0,.7,.4) forwards; }
.sh-tools { display: flex; justify-content: center; padding: 0 16px 6px; }
.sh-random { min-height: 38px; padding: 0 16px; border-radius: 19px; border: 1px solid rgba(214,180,122,.45); background: rgba(255,255,255,.05); color: #E8D3A2; font-family: var(--sans); font-size: 13px; cursor: pointer; }
.sh-bar { display: flex; flex-direction: column; gap: 8px; padding: 12px max(16px, env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom)); background: rgba(244,238,226,.97); color: var(--ink); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 24px rgba(0,0,0,.4); }
.sh-bar .btn:disabled { background: #CFC4B2; color: #6E6458; box-shadow: none; }
/* 내 봉투 (손에 든 봉투) */
.rv-tray { width: 100%; max-width: 380px; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 14px; }
.rv-env { position: relative; aspect-ratio: 0.72; border: 0; padding: 0; border-radius: 6px; cursor: pointer;
  background: url(/assets/hanji.webp) center / 240px repeat, linear-gradient(160deg, #F1E6D0, #D3C09A); background-blend-mode: multiply; box-shadow: 0 0 0 2px rgba(214,180,122,.7), 0 10px 18px rgba(0,0,0,.55); animation: rvDeal .5s cubic-bezier(.2,.8,.2,1) both, shIdle 3s ease-in-out infinite; animation-delay: var(--dl), calc(var(--dl) + .5s); }
@keyframes shIdle { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes shGone { 0% { transform: translateX(var(--dx)) rotate(var(--r)); opacity: 1; } 100% { transform: translateY(-40px) scale(.6) rotate(12deg); opacity: 0; } }
@keyframes shMine { 0% { } 100% { transform: translateY(60vh) scale(.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sh-env, .rv-env { animation: none; } }

/* 연 뒤에만: 등급별 카드 테두리·빛 (열기 전엔 모두 같은 모양) */
.rv-holder { filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.rv-holder.done { overflow: visible; }
.rv-holder.open .rv-slab { transition: box-shadow .5s; }
.rv-holder.open.tC .rv-slab { box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 0 0 2px #B9A78A; }
.rv-holder.open.tB { filter: drop-shadow(0 0 16px rgba(90,150,255,.85)); }
.rv-holder.open.tB .rv-slab { box-shadow: inset 0 0 0 2px #CFE0FF, 0 0 0 3px #5A96FF; }
.rv-holder.open.tA { filter: drop-shadow(0 0 22px rgba(255,80,55,.9)); }
.rv-holder.open.tA .rv-slab { box-shadow: inset 0 0 0 2px #FFD2C8, 0 0 0 3px #E8452F; }
.rv-holder.open.tS { filter: drop-shadow(0 0 30px rgba(255,210,110,1)) drop-shadow(0 0 8px #fff); }
.rv-holder.open.tS .rv-slab { box-shadow: inset 0 0 0 2px #FFF3D0, 0 0 0 3px #FFD25A, 0 0 0 6px rgba(255,210,90,.35); animation: rvGold 2.4s ease-in-out infinite; }
@keyframes rvGold { 0%, 100% { box-shadow: inset 0 0 0 2px #FFF3D0, 0 0 0 3px #FFD25A, 0 0 0 6px rgba(255,210,90,.35); } 50% { box-shadow: inset 0 0 0 2px #FFF3D0, 0 0 0 3px #FFE9A0, 0 0 0 9px rgba(255,220,120,.5); } }

/* 덮개를 걷을수록: 주변이 어두워지고 조명이 카드로 좁혀짐 · 카드가 다가옴 · 심장 박동 */
.rv { --tz: 0; }
.rv::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; transition: opacity .2s;
  background: radial-gradient(calc(140% - var(--tz) * 85%) calc(110% - var(--tz) * 70%) at 50% 44%, transparent 35%, rgba(0,0,0,.92) 100%); opacity: calc(.25 + var(--tz) * .75); }
.rv-top, .rv-stage { position: relative; z-index: 1; }
.rv-table { transform: scale(calc(1 + var(--tz) * .07)); transition: transform .15s; }
.rv-table.thump { animation: rvThump .28s ease-out; }
.rv .rv-count, .rv .rv-hint { opacity: calc(1 - var(--tz) * .7); }
.rv-holder.touched .rv-grip { animation: none; opacity: 0; transition: opacity .3s; }
/* 숨 멎는 정적: 카드만 남고 모두 어둡게 */
.rv.hush::before { opacity: 1; background: radial-gradient(42% 32% at 50% 44%, transparent 40%, #000 100%); transition: background .6s, opacity .3s; }
.rv.hush .rv-table { transform: scale(1.1); transition: transform .8s cubic-bezier(.3,0,.2,1); }
.rv.hush .rv-top, .rv.hush .rv-count { opacity: 0; transition: opacity .3s; }
@keyframes rvThump { 0% { transform: scale(calc(1 + var(--tz) * .07)); } 30% { transform: scale(calc(1.025 + var(--tz) * .07)); } 100% { transform: scale(calc(1 + var(--tz) * .07)); } }
@media (prefers-reduced-motion: reduce) { .rv-table.thump { animation: none; } }

/* ── 오리파: 결제 중 봉투 · 동의 · 공정성 · 구간 상 · 내역 ── */
.sh-env-hold { display: none; position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-family: var(--sans); font-size: 10.5px; font-weight: 700; color: #5A2A1C; letter-spacing: 1px; }
.sh-env.held { cursor: default; animation: none; opacity: .55; box-shadow: inset 0 0 0 1px rgba(214,180,122,.5); }
.sh-env.held .sh-env-hold { display: block; animation: sh-hold 1.4s ease-in-out infinite; }
.sh-env.held .sh-env-seal { display: none; }
.sh-env.taken .sh-env-hold { display: none; }
@keyframes sh-hold { 50% { opacity: .45; } }
.sh-agree { display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); font-size: 12.5px; }
.sh-agree .mk-check { align-items: flex-start; }
.sh-agree summary { cursor: pointer; padding: 2px 0 2px 30px; }
.sh-agree details p { margin: 4px 0 0; }
.sh-agree details a { display: inline-block; margin-top: 4px; }
.op-cert { display: inline-block; margin-top: 3px; font-family: var(--sans); font-size: 10.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.op-prizes { display: flex; flex-direction: column; gap: 8px; }
.op-prize { background: linear-gradient(120deg, #142430, #1F4A5A); box-shadow: inset 0 0 0 1px rgba(150,200,214,.55); }
.op-prize .k { color: #9FD0DE; }
.op-events { list-style: none; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--paper2); border: 1px dashed var(--line); font-family: var(--sans); font-size: 12.5px; }
.op-events li { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; }
.op-events b { color: #8A2A1C; }
.op-fair p { margin: 8px 0; }
.op-fair-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.op-fair-list li { display: flex; flex-direction: column; gap: 4px; }
.op-fair-list code { font-size: 10.5px; word-break: break-all; background: rgba(0,0,0,.05); padding: 4px 6px; border-radius: 6px; }
.op-fair-raw { max-height: 160px; overflow: auto; margin: 4px 0; padding: 6px; font-size: 10px; background: rgba(0,0,0,.05); border-radius: 6px; white-space: pre-wrap; word-break: break-all; }
.op-fair-btn { min-height: 36px; font-size: 12.5px; align-self: flex-start; }
.small.ok { color: #2E6B3A; font-weight: 700; }
.op-ship { flex-wrap: wrap; align-items: center; }
.op-ship .b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.op-mini { min-height: 34px; padding: 0 12px; font-size: 12px; }
.op-histlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.op-hist { padding: 12px; border-radius: 12px; background: var(--paper2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.op-hist.refunded { opacity: .75; }
.op-hist-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-family: var(--sans); font-size: 13.5px; font-weight: 700; }
.op-hist-top a { color: var(--ink); }
.op-hist-cards { display: flex; flex-direction: column; gap: 6px; }
.op-hist-card { display: flex; gap: 8px; align-items: center; padding-left: 8px; border-left: 3px solid var(--line); }
.op-hist-card.tS { border-color: #C9A24A; } .op-hist-card.tA { border-color: #B23A2A; } .op-hist-card.tB { border-color: #3A6E8A; }
.op-hist-card > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.op-hist-card b { font-size: 13px; }
.op-th.sm { width: 34px; flex: none; }
.op-receipt { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; padding-top: 8px; border-top: 1px dotted var(--line); font-family: var(--sans); font-size: 12px; }
.op-receipt dt { color: var(--muted); }
.op-receipt dd { margin: 0; text-align: right; word-break: break-all; }
/* 진동이 안 되는 기기(아이폰): 화면을 살짝 흔들어 대신 */
.jolt-sm { animation: jolt .18s ease-in-out 1; }
.jolt-md { animation: jolt .26s ease-in-out 1; --j: 4px; }
.jolt-lg { animation: jolt .34s ease-in-out 2; --j: 7px; }
@keyframes jolt { 25% { translate: calc(var(--j, 2px) * -1) 0; } 75% { translate: var(--j, 2px) 0; } }
.hm-win { color: #B8862F; font-weight: 700; }
.ad-tools { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.03); border: 1px dashed var(--line); }
.ad-tools summary { cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 700; }
.ad-tools select[multiple] { min-height: 110px; }
.btn.warn { color: #8A2A1C; border-color: #C9A79E; }
.ad-settle li.paid { opacity: .65; }
.ad-settle li .row { display: flex; gap: 6px; width: 100%; }
.ad-settle li .row input { flex: 1; min-width: 0; }
.ad-report { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 12.5px; }
.ad-report th, .ad-report td { padding: 7px 4px; border-bottom: 1px dotted var(--line); text-align: right; }
.ad-report th { text-align: left; font-weight: 500; color: var(--muted); }
.ad-settle li { flex-wrap: wrap; }
.ad-report td { white-space: nowrap; }
.ad-report th { white-space: normal; }
main input[type=month] { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper2); font-family: var(--sans); font-size: 14px; color: var(--ink); }

/* ── 장터 팩 (보따리) ── */
.pk-king { --pk: #A8321F; --pk2: #D4553A; --pkk: #E3BC63; }
.pk-daegam { --pk: #5E2443; --pk2: #8A3A66; --pkk: #D9B06A; }
.pk-yangban { --pk: #26425F; --pk2: #3D6286; --pkk: #CFC2A0; }
.pk-seonbi { --pk: #3B5A40; --pk2: #58805D; --pkk: #D8CFAE; }
.pk-baekseong { --pk: #8A5E32; --pk2: #B07E49; --pkk: #E3D2AE; }
.pk-nobi { --pk: #7D7568; --pk2: #A39A8A; --pkk: #CFC6B4; }
.pk-art { position: relative; width: 120px; aspect-ratio: 1; flex: none; filter: drop-shadow(0 6px 10px rgba(40,25,10,.28)); }
.pk-art.sm { width: 64px; }
.pk-art.lg { width: 128px; }
.pk-art.xl { width: 190px; }
.pk-cloth { position: absolute; inset: 18% 4% 2%; border-radius: 38% 38% 30% 30% / 30% 30% 26% 26%;
  background: radial-gradient(120% 90% at 30% 25%, rgba(255,255,255,.28), transparent 45%), repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 6px, transparent 6px 12px), linear-gradient(160deg, var(--pk2), var(--pk));
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.12); }
.pk-knot { position: absolute; left: 50%; top: 6%; width: 26%; height: 22%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--pk2), var(--pk)); box-shadow: inset 0 -3px 5px rgba(0,0,0,.3); }
.pk-knot::before, .pk-knot::after { content: ''; position: absolute; top: -40%; width: 90%; height: 95%; border-radius: 60% 60% 40% 40%; background: linear-gradient(160deg, var(--pk2), var(--pk)); box-shadow: inset 0 -3px 5px rgba(0,0,0,.25); }
.pk-knot::before { left: -70%; transform: rotate(-38deg); }
.pk-knot::after { right: -70%; transform: rotate(38deg); }
.pk-label { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); padding: 6% 7%; writing-mode: vertical-rl; letter-spacing: .12em; background: url(/assets/hanji.webp) center / 120px repeat, #F3EAD6; background-blend-mode: multiply; color: #2B2622; font-family: var(--display); font-size: 15px; line-height: 1; border: 1px solid var(--pkk); box-shadow: 0 2px 4px rgba(0,0,0,.25); white-space: nowrap; }
.pk-art.sm .pk-label { font-size: 9.5px; padding: 5% 6%; }
.pk-art.lg .pk-label { font-size: 17px; }
.pk-art.xl .pk-label { font-size: 24px; }
.pk-seal { position: absolute; right: 12%; bottom: 10%; width: 16%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 2px; background: var(--red); color: #F6E9DC; font-family: var(--display); font-size: 9px; transform: rotate(-8deg); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.pk-art.lg .pk-seal, .pk-art.xl .pk-seal { font-size: 14px; }
.pk-sec { display: flex; flex-direction: column; gap: 8px; }
.pk-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pk-sec-h .tool-h { margin: 0; }
.pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pk-tile { position: relative; display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; text-decoration: none; color: var(--ink);
  background: url(/assets/hanji.webp) center / 260px repeat, var(--paper2); background-blend-mode: multiply; border: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--pk), 0 2px 6px rgba(60,40,20,.08); }
.pk-tile:active { transform: translateY(1px); }
.pk-tile.paused { opacity: .7; }
.pk-tinfo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pk-name { font-family: var(--display); font-size: 17px; letter-spacing: 1px; }
.pk-price { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink2); }
.pk-tinfo .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-chip { align-self: flex-start; padding: 0 7px; border-radius: 8px; font-family: var(--sans); font-size: 10.5px; font-weight: 700; line-height: 18px; }
.pk-chip.k-gold { background: rgba(201,162,74,.18); color: #8A6418; box-shadow: inset 0 0 0 1px rgba(201,162,74,.5); }
.pk-hero { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 14px; color: #F3E6CC;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.12), transparent 50%), linear-gradient(135deg, var(--pk), #1F1915); box-shadow: inset 0 0 0 1px var(--pkk), 0 6px 18px rgba(30,20,10,.25); }
.pk-hinfo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pk-title { margin: 0; font-family: var(--display); font-size: 26px; letter-spacing: 3px; color: #FFF3DA; }
.pk-hero .small { color: #D8CBB2; }
.pk-hprice strong { font-family: var(--serif); font-size: 22px; color: var(--pkk); }
.pk-hprice span { font-family: var(--sans); font-size: 12px; color: #CFC2A8; }
.pk-buybox { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--paper2); border: 1px solid var(--line); }
.pk-counts { padding: 0; }
.pk-counts button { border-color: #CDBFA6; background: #fff; color: var(--ink); flex: 1; }
.pk-counts button span { color: var(--muted); }
.pk-counts button em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #8A6418; }
.pk-counts button.on em { color: #4A3520; }
.pk-buy { min-height: 52px; font-size: 15px; }
.pk-buy:disabled { background: #CFC4B2; color: #6E6458; box-shadow: none; }
.pk-odds { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pk-row { border-bottom: 1px solid var(--line); }
.pk-row summary { list-style: none; display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; min-height: 56px; cursor: pointer; }
.pk-row summary::-webkit-details-marker { display: none; }
.pk-dot { width: 12px; height: 12px; border-radius: 50%; }
.pk-tname { display: flex; flex-direction: column; gap: 1px; }
.pk-tname b { font-family: var(--display); font-size: 17px; letter-spacing: 1px; }
.pk-tname small { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.pk-pct { font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--ink2); }
.pk-row[open] .pk-pct::after { content: ' ▴'; font-size: 11px; color: var(--muted); }
.pk-row:not([open]) .pk-pct::after { content: ' ▾'; font-size: 11px; color: var(--muted); }
.k-gold .pk-dot { background: radial-gradient(circle at 35% 30%, #FFE7A8, #C9A24A); box-shadow: 0 0 6px rgba(201,162,74,.8); }
.k-red .pk-dot { background: #B23A2A; }
.k-blue .pk-dot { background: #3A6E8A; }
.k-earth .pk-dot { background: #8A6A44; }
.k-rice .pk-dot { background: #F4EFE4; box-shadow: inset 0 0 0 1px #B9AE98; }
.pk-row.k-gold .pk-tname b { color: #8A6418; }
.pk-row.k-red .pk-tname b { color: #8E2A1C; }
.pk-row.k-blue .pk-tname b { color: #2D5870; }
.pk-cards { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-card { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--paper2); border: 1px solid var(--line2, #E6DAC4); }
.pk-card .b { min-width: 0; display: flex; flex-direction: column; }
.pk-card .b b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-prob { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--ink2); }
.pk-mini { display: inline-block; padding: 0 6px; border-radius: 7px; font-family: var(--sans); font-size: 10.5px; font-weight: 700; line-height: 17px; white-space: nowrap; }
.pk-mini.k-gold { background: #C9A24A; color: #2A1A08; }
.pk-mini.k-red { background: #B23A2A; color: #FBEDE6; }
.pk-mini.k-blue { background: #3A6E8A; color: #EAF3F7; }
.pk-mini.k-earth { background: #8A6A44; color: #F6EEDF; }
.pk-mini.k-rice { background: #F1EBDD; color: #4A433B; box-shadow: inset 0 0 0 1px #C9BEA8; }
.op-recent .pk-mini { justify-self: start; }
.op-recent li:has(.pk-mini) { grid-template-columns: 64px 1fr auto; }
/* 개봉: 보따리 */
.rv-bundle { background: none !important; box-shadow: none !important; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }
.rv-bundle .pk-art { width: 100%; }
.rv-bundle .sh-env-no { position: absolute; left: 6px; top: 4px; font-size: 13px; color: #E8D3A2; }
.rv-pack-bundle { background: none; box-shadow: none; width: 230px; height: 280px; }
.rv-pack-bundle .rv-pack-n { color: #CFC4B2; }
.rv-pack-bundle.charging .pk-knot { animation: pkTug .18s ease-in-out infinite; }
.rv-pack-bundle.torn { animation: rvTorn .6s cubic-bezier(.4,0,.6,1) forwards; }
.rv-pack-bundle.torn .pk-knot { animation: pkUntie .45s ease-out forwards; }
.rv-pack-bundle.torn .pk-cloth { animation: pkSpread .5s ease-out forwards; }
@keyframes pkTug { 50% { transform: translateX(-50%) scale(1.12) rotate(6deg); } }
@keyframes pkUntie { to { transform: translateX(-50%) translateY(-40px) scale(1.4); opacity: 0; } }
@keyframes pkSpread { to { transform: scale(1.35, .7); opacity: 0; } }
.rv-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 4px; padding: 6px 18px 7px; border-radius: 22px; animation: rvBadge .55s cubic-bezier(.2,1.6,.4,1) both; }
.rv-badge b { font-family: var(--display); font-size: 26px; letter-spacing: 6px; line-height: 1.1; }
.rv-badge small { font-family: var(--sans); font-size: 12px; }
.rv-badge.k-gold { background: linear-gradient(180deg, #FFE7A8, #C9A24A); color: #3A2508; box-shadow: 0 0 0 2px #FFF3D0, 0 0 28px rgba(255,210,110,.9); }
.rv-badge.k-red { background: linear-gradient(180deg, #E05A42, #9E2B1F); color: #FFF0E8; box-shadow: 0 0 0 2px #FFC9BC, 0 0 20px rgba(255,90,60,.7); }
.rv-badge.k-blue { background: linear-gradient(180deg, #5E93AE, #2D5870); color: #EEF6FA; box-shadow: 0 0 0 2px #CFE6F2, 0 0 14px rgba(90,150,200,.6); }
.rv-badge.k-earth { background: linear-gradient(180deg, #A9865A, #6E5232); color: #FBF3E4; box-shadow: 0 0 0 1px #E3CFA8; }
.rv-badge.k-rice { background: #F4EFE4; color: #3A332B; box-shadow: 0 0 0 1px #CFC4B2; }
@keyframes rvBadge { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.rv-pt { margin-top: 2px; font-family: var(--sans); font-size: 12px; color: #B9A78A; }
.rv-note.gold { color: #E8C88A; font-weight: 700; }
.rv-mini .pk-mini { align-self: flex-start; }
.rv-holder.open.tD .rv-slab { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #E6DFD0; }
.rv-mini.tD .rv-ph { box-shadow: 0 0 0 1px #E6DFD0; }
/* 진열대: 아직 안 나온 최고 카드 */
.op-topleft { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(176,141,87,.08); border: 1px solid rgba(176,141,87,.35); }
.op-topleft .k { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 1px; color: #8A6418; }
.op-tl-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.op-tl { flex: none; width: 92px; display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); }
.op-tl .op-th { width: 100%; }
.op-tl b { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-tl small { font-size: 11px; color: var(--muted); }
/* 천장 · 야시장 · 한정 */
.pk-pity { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(178,58,42,.08), rgba(201,162,74,.12)); border: 1px solid rgba(178,58,42,.25); }
.pk-pity-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--sans); font-size: 13px; }
.pk-pity-h b { font-family: var(--display); font-size: 17px; letter-spacing: 2px; color: #8E2A1C; }
.pk-pity .bar { height: 8px; }
.pk-pity .bar .fill { background: linear-gradient(90deg, #C9A24A, #B23A2A); }
.pk-pity .small { margin: 0; }
.pk-limbox { margin: 0; padding: 10px 12px; border-radius: 10px; background: #1F1915; color: #F3E6CC; font-family: var(--sans); font-size: 13px; box-shadow: inset 0 0 0 1px #C9A24A; }
.pk-limbox b { color: #E3BC63; letter-spacing: 1px; }
.pk-lim { color: #8E2A1C !important; font-weight: 700; }

/* 개수 고르기: 한지 칩 (어두운 진열대 단추 대신) */
.pk-counts { gap: 6px; }
.pk-counts button { min-width: 0; flex: 1; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper2); color: var(--ink); box-shadow: none; }
.pk-counts button b { font-size: 15px; }
.pk-counts button span { color: var(--muted); font-size: 11px; }
.pk-counts button em { font-size: 10px; color: #8E2A1C; }
.pk-counts button.on { border-color: transparent; background: #211C19 var(--lacquer); color: #E8D3A2; box-shadow: inset 0 0 0 1px var(--gold); }
.pk-counts button.on span { color: #CFC2A8; }
.pk-counts button.on em { color: #E8C88A; }
.pk-buybox { background: url(/assets/hanji.webp) center / 300px repeat, var(--paper2); background-blend-mode: multiply; }
.pk-limbox { background: transparent; color: var(--ink); box-shadow: none; border: 1px solid #8E2A1C; border-left: 4px solid #8E2A1C; border-radius: 6px; }
.pk-limbox b { color: #8E2A1C; }
.pk-pity { background: url(/assets/hanji.webp) center / 300px repeat, var(--paper2); background-blend-mode: multiply; border: 1px solid var(--line); }

/* 개봉 등급 표시: 도장처럼 평면 (빛 번짐 없이) */
.rv-badge { border-radius: 4px; padding: 5px 16px 6px; animation: rvStamp .45s cubic-bezier(.2,1.5,.4,1) both; }
.rv-badge b { font-size: 24px; letter-spacing: 6px; }
.rv-badge.k-gold { background: #E3C477; color: #5A1D12; box-shadow: inset 0 0 0 2px #8E2A1C, inset 0 0 0 4px #E3C477, inset 0 0 0 5px #8E2A1C; }
.rv-badge.k-red { background: #A63A2A; color: #FBEDE6; box-shadow: inset 0 0 0 2px #FBEDE6, inset 0 0 0 3px #A63A2A; }
.rv-badge.k-blue { background: #34557A; color: #EEF4F8; box-shadow: inset 0 0 0 2px #EEF4F8, inset 0 0 0 3px #34557A; }
.rv-badge.k-earth { background: #8A6A44; color: #FBF3E4; box-shadow: none; }
.rv-badge.k-rice { background: #F1EBDD; color: #3A332B; box-shadow: inset 0 0 0 1px #9A8E7C; }
@keyframes rvStamp { 0% { transform: scale(1.8) rotate(-8deg); opacity: 0; } 70% { transform: scale(.95) rotate(-2deg); opacity: 1; } 100% { transform: rotate(-2deg); } }

@media (max-width: 340px) {
  .pk-r4 .pk-price, .pk-r5 .pk-price, .pk-r6 .pk-price { font-size: 11px; }
  .pk-r1 .pk-name { font-size: 19px; }
}
/* 진열대 오리파 머리도 한지로 */
.op-hero { background: url(/assets/hanji.webp) center / 300px repeat, var(--paper2); background-blend-mode: multiply; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.op-hero b { color: var(--ink); }
.op-hero p { color: var(--ink2); }

/* ═══ 장터 팩: 신분별 칸·머리·보따리 (옻칠·비단·한지 / 가는 선) ═══ */
.pk-r1 { --bg: #15110E; --bg2: #2B2119; --ac: #C9A45C; --line: rgba(201,164,92,.55); --tx: #EAD7A4; --tx2: #B3A587; --pr: #F5ECD6; --lim: #E8A48E; }
.pk-r2 { --bg: #22151D; --bg2: #3A2432; --ac: #CDA08A; --line: rgba(205,160,138,.5); --tx: #EDD7CB; --tx2: #B39C93; --pr: #F5EAE4; --lim: #E8A48E; }
.pk-r3 { --bg: #141C27; --bg2: #233248; --ac: #B4BFCA; --line: rgba(180,191,202,.45); --tx: #DEE5EC; --tx2: #97A3AF; --pr: #F1F4F7; --lim: #E8A48E; }
.pk-r4 { --bg: #E2E7DD; --bg2: #F0F2EA; --ac: #5D7869; --line: rgba(93,120,105,.38); --tx: #2F4237; --tx2: #5E6E64; --pr: #2B2622; --lim: #8E2A1C; }
.pk-r5 { --bg: #EEE6D6; --bg2: #F7F2E8; --ac: #8C7552; --line: rgba(140,117,82,.36); --tx: #4A3B28; --tx2: #786852; --pr: #2B2622; --lim: #8E2A1C; }
.pk-r6 { --bg: #E3DCCD; --bg2: #ECE7DC; --ac: #857C6B; --line: rgba(133,124,107,.45); --tx: #4E473C; --tx2: #7B7367; --pr: #3E382F; --lim: #8E2A1C; }

.pk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pk-tile, .pk-hero { position: relative; overflow: hidden; isolation: isolate; text-decoration: none; color: var(--tx);
  background: radial-gradient(130% 100% at 18% 0%, var(--bg2), var(--bg) 72%); border: 1px solid var(--line); box-shadow: none; }
.pk-tile::before, .pk-tile::after, .pk-hero::before, .pk-hero::after { content: none; }
.pk-r1, .pk-r2, .pk-r3 { box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 3.6px var(--line); }
.pk-r1 { box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 3.6px var(--line), 0 10px 24px -10px rgba(20,12,6,.55); }
.pk-r6 { border-style: dashed; }
.pk-tile { grid-column: span 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 6px 11px; border-radius: 10px; }
.pk-tile:active { transform: translateY(1px); }
.pk-r2, .pk-r3 { grid-column: span 3; padding: 14px 8px 13px; }
.pk-r1 { grid-column: 1 / -1; flex-direction: row; text-align: left; gap: 14px; padding: 16px 18px; }
.pk-tinfo { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-width: 0; }
.pk-r1 .pk-tinfo { align-items: flex-start; gap: 4px; }
.pk-name { margin: 0; font-family: var(--display); font-weight: 400; color: var(--tx); font-size: 14px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pk-r2 .pk-name, .pk-r3 .pk-name { font-size: 16px; letter-spacing: 2px; }
.pk-r1 .pk-name { font-size: 23px; letter-spacing: 5px; }
.pk-price { font-family: var(--serif); font-weight: 700; color: var(--pr); font-size: 12.5px; letter-spacing: .3px; white-space: nowrap; }
.pk-r1 .pk-price { font-size: 16px; }
.pk-tinfo .small { color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pk-r1 .pk-tinfo .small { white-space: normal; }
.pk-chip { align-self: center; margin-top: 2px; padding: 0 7px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--ac); font-family: var(--sans); font-size: 10.5px; font-weight: 500; line-height: 18px; letter-spacing: .4px; white-space: nowrap; }
.pk-r1 .pk-chip { align-self: flex-start; }
.pk-lim { color: var(--lim) !important; font-family: var(--sans); font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pk-limtag { position: absolute; top: 8px; right: 8px; padding: 0 6px; border-radius: 2px; background: #9E2E20; color: #F6E9DC; font-family: var(--sans); font-size: 10px; font-weight: 700; line-height: 17px; letter-spacing: 1px; transform: none; }
.pk-r1::after { content: '御'; position: absolute; right: 14px; bottom: 12px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 2px; background: #9E2E20; color: #F3E3C8; font-family: var(--display); font-size: 13px; transform: rotate(-4deg); opacity: .92; }
.pk-tile.paused { opacity: .7; }

/* 상세 머리 */
.pk-hinfo { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pk-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 25px; letter-spacing: 4px; color: var(--tx); }
.pk-hero.pk-r1 .pk-title { font-size: 27px; letter-spacing: 6px; }
.pk-hero .small { color: var(--tx2); margin: 0; }
.pk-hprice strong { font-family: var(--serif); font-size: 22px; color: var(--pr); }
.pk-hprice span { font-family: var(--sans); font-size: 12px; color: var(--tx2); }
.pk-hero.pk-r1::after { top: 12px; bottom: auto; }

/* 보따리 */
.pk-art { position: relative; flex: none; aspect-ratio: 1; filter: none; width: 120px; margin: 0; }
.pk-art::before, .pk-art::after { content: none; }
.pk-art.xs { width: 58px; }
.pk-art.sm { width: 86px; }
.pk-art.md { width: 104px; }
.pk-art.lg { width: 122px; }
.pk-art.xl { width: 196px; }
.pkb { display: block; width: 100%; height: 100%; overflow: visible; }
.pkb .pkb-name, .pkb .pkb-glyph { font-family: var(--display); }
.pkb .pkb-knot, .pkb .pkb-body, .pkb .pkb-tag { transform-box: view-box; }
.pkb .pkb-knot { transform-origin: 60px 42px; }
.pkb .pkb-body, .pkb .pkb-tag { transform-origin: 60px 110px; }
.rv-pack-bundle.charging .pkb-knot { animation: pkbTug .18s ease-in-out infinite; }
.rv-pack-bundle.torn .pkb-knot { animation: pkbUntie .45s ease-out forwards; }
.rv-pack-bundle.torn .pkb-body, .rv-pack-bundle.torn .pkb-tag { animation: pkbSpread .5s ease-out forwards; }
@keyframes pkbTug { 50% { transform: scale(1.08) rotate(5deg); } }
@keyframes pkbUntie { to { transform: translateY(-34px) scale(1.3); opacity: 0; } }
@keyframes pkbSpread { to { transform: scale(1.3, .72); opacity: 0; } }

/* 여는 화면: 어둠 속에 그 팩의 선그림이 은은하게 */
.rv-scene { position: fixed; left: 0; right: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 400 / 240; transform: translateY(-58%); pointer-events: none; opacity: .55; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 40%, transparent 100%); }
.rv-pk > .rv-top, .rv-pk > .rv-stage { position: relative; z-index: 1; }
@media (max-width: 340px) { .pk-r1 .pk-name { font-size: 20px; letter-spacing: 3px; } .pk-r4 .pk-price, .pk-r5 .pk-price, .pk-r6 .pk-price { font-size: 11px; } }

/* 배경 장면: 칸 위쪽 띠에 집 한 장면, 아래로 바탕색에 스며듦 · 보따리는 띠 끝에 걸쳐 앉음 */
.pk-band { position: absolute; left: 0; right: 0; top: 0; height: var(--band, 100px); z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.pk-band .pk-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pk-tile { --band: 84px; padding-top: 44px; }
.pk-r2, .pk-r3 { --band: 112px; padding-top: 62px; }
.pk-r1 { --band: 150px; display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 14px; padding: 104px 18px 16px; }
.pk-r1 .pk-art { margin-top: -54px; }
.pk-r1::after { top: 12px; right: 12px; bottom: auto; }
.pk-hero { --band: 176px; display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 14px; padding: 120px 16px 16px; border-radius: 12px; }
.pk-hero .pk-art { margin-top: -66px; }
.pk-hero.pk-r1::after { top: 12px; }
.pk-hinfo { padding-bottom: 2px; }
.pk-r2, .pk-r3 { --band: 124px; padding-top: 88px; }
.pk-tile { --band: 92px; padding-top: 58px; }
.pk-r2, .pk-r3 { --band: 124px; padding-top: 88px; }
.pk-r1 { --band: 160px; padding-top: 138px; }
.pk-r1 .pk-art { margin-top: -70px; }
.pk-hero { --band: 190px; padding-top: 168px; }
.pk-hero .pk-art { margin-top: -86px; }
/* 장면 마감: 한지 결 + 가장자리 어둡게 (그림이 화면에 붙은 느낌 대신 종이에 그린 느낌) */
.pk-band::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: url(/assets/hanji.webp) center / 260px repeat; mix-blend-mode: multiply; opacity: .45; }
.pk-band::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 95% at 50% 40%, transparent 55%, rgba(0,0,0,.28) 100%); }
.pk-r4 .pk-band::before, .pk-r5 .pk-band::before, .pk-r6 .pk-band::before { background: radial-gradient(120% 95% at 50% 40%, transparent 60%, rgba(60,40,20,.14) 100%); }
.pk-r1 .pk-band::after, .pk-r2 .pk-band::after, .pk-r3 .pk-band::after { mix-blend-mode: soft-light; opacity: .55; }
/* 함: 여는 순간 뚜껑만 들리고 몸통은 제자리에서 사라짐 */
.pkb-box .pkb-knot { transform-origin: 60px 46px; }
.rv-pack-bundle.torn .pkb-box .pkb-body { animation: pkbFade .5s ease-out forwards; }
@keyframes pkbFade { to { transform: scale(1.04); opacity: 0; } }
.rv-pack-bundle.charging .pkb-box .pkb-knot { animation: pkbRattle .16s ease-in-out infinite; }
@keyframes pkbRattle { 50% { transform: translateY(-2px) rotate(-1.5deg); } }
.pk-r6 { --bg: #CFC6B5; --bg2: #DAD3C4; }
/* ═══ 살아 있는 장면 ═══ */
.sc-grain { mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
.sc-light { mix-blend-mode: screen; pointer-events: none; }
.sc-fx *, .sc-fg { transform-box: fill-box; }
.sc-fx > circle[fill^="url"] { transform-origin: center; animation: scFlicker 2.6s ease-in-out infinite; }
.sc-fx > circle[fill^="url"]:nth-of-type(2n) { animation-duration: 3.3s; animation-delay: -1.2s; }
@keyframes scFlicker { 0%, 100% { opacity: .85; transform: scale(1); } 30% { opacity: 1; transform: scale(1.06); } 55% { opacity: .7; transform: scale(.97); } 75% { opacity: .95; } }
.fx-mote { animation: scMote 9s linear infinite; opacity: 0; }
.fx-mote:nth-child(3n) { animation-duration: 12s; animation-delay: -4s; }
.fx-mote:nth-child(3n+1) { animation-duration: 10s; animation-delay: -7s; }
.fx-mote:nth-child(4n) { animation-delay: -2s; }
@keyframes scMote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .7; } 100% { transform: translate(8px, -26px); opacity: 0; } }
.fx-smoke { stroke-dasharray: 40 160; animation: scSmoke 5s linear infinite; }
.fx-smoke:nth-of-type(2n) { animation-duration: 6.5s; animation-delay: -2.5s; }
@keyframes scSmoke { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
.fx-shimmer { animation: scShimmer 6s ease-in-out infinite; }
@keyframes scShimmer { 0%, 100% { opacity: .18; } 50% { opacity: .42; } }
.fx-twinkle { animation: scTwinkle 3s ease-in-out infinite; }
.fx-twinkle:nth-child(2n) { animation-delay: -1.1s; animation-duration: 2.4s; }
.fx-twinkle:nth-child(3n) { animation-delay: -2s; animation-duration: 3.8s; }
@keyframes scTwinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.fx-firefly { animation: scFly 7s ease-in-out infinite; }
.fx-firefly:nth-child(2n) { animation-duration: 9s; animation-delay: -3s; }
.fx-firefly:nth-child(3n) { animation-duration: 11s; animation-delay: -6s; }
@keyframes scFly { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate(14px, -10px); opacity: .4; } 80% { opacity: 1; } 100% { transform: translate(-6px, 6px); opacity: 0; } }
.fx-fall { animation: scFall 8s linear infinite; opacity: 0; }
.fx-fall:nth-child(2n) { animation-duration: 10s; animation-delay: -3s; }
.fx-fall:nth-child(3n) { animation-duration: 12s; animation-delay: -6s; }
.fx-fall:nth-child(5n) { animation-delay: -9s; }
@keyframes scFall { 0% { transform: translate(0, -20px) rotate(0); opacity: 0; } 10% { opacity: .95; } 90% { opacity: .9; } 100% { transform: translate(46px, 90px) rotate(260deg); opacity: 0; } }
.fx-drift { animation: scDrift 22s ease-in-out infinite alternate; }
@keyframes scDrift { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
.fx-sway { transform-origin: 0 0; animation: scSway 5s ease-in-out infinite alternate; }
@keyframes scSway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.4deg); } }
.fx-fly { animation: scBird 14s linear infinite; }
.fx-fly + .fx-fly { animation-duration: 17s; animation-delay: -5s; }
@keyframes scBird { from { transform: translate(-60px, 10px); } to { transform: translate(460px, -20px); } }
.fx-rain { animation: scRain .7s linear infinite; }
.fx-rain2 { animation-duration: 1s; }
@keyframes scRain { from { transform: translate(8px, -24px); } to { transform: translate(-8px, 24px); } }
.fx-ripple { transform-origin: center; animation: scRipple 1.6s ease-out infinite; }
.fx-ripple:nth-of-type(2n) { animation-delay: -.6s; }
.fx-ripple:nth-of-type(3n) { animation-delay: -1.1s; }
@keyframes scRipple { from { transform: scale(.3); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.fx-drip { animation: scDrip 1.8s ease-in infinite; }
.fx-drip:nth-of-type(2n) { animation-delay: -.7s; }
@keyframes scDrip { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }
/* 스크롤 시차: 장면은 천천히, 전경은 반대로 → 깊이 */
.pk-band .pk-scene { transform: translateY(calc(var(--py, 0) * 5px)) scale(1.04); transform-origin: 50% 100%; will-change: transform; }
.pk-band .sc-fg { transform: translateY(calc(var(--py, 0) * -12px)); }
@media (prefers-reduced-motion: reduce) { .sc-fx *, .sc-fg, .fx-rain, .fx-sway, .fx-drift { animation: none !important; } .pk-band .pk-scene { transform: scale(1.04); } }
/* 야시장 한정 */
.pk-lanterns { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: auto; aspect-ratio: 400 / 46; z-index: 0; pointer-events: none; }
.pk-lantern { transform-box: fill-box; transform-origin: 50% 0; animation: pkLantern 3.2s ease-in-out infinite alternate; }
.pk-lantern:nth-of-type(2n) { animation-duration: 2.6s; animation-delay: -1s; }
.pk-lantern circle { animation: scFlicker 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pkLantern { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.pk-hero .pk-limtag { top: 52px; right: 12px; left: auto; z-index: 2; font-size: 11px; line-height: 19px; padding: 0 8px; letter-spacing: 1px; }
.pk-tile .pk-limtag { top: 48px; z-index: 2; }
.pk-title { white-space: nowrap; }
.pk-title.long { font-size: 21px; letter-spacing: 2px; }
.pk-night { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; color: #F3E6CC;
  background: radial-gradient(120% 140% at 0% 0%, rgba(242,184,102,.18), transparent 55%), linear-gradient(160deg, #2A1A24, #170F15); border: 1px solid rgba(205,160,138,.5); box-shadow: inset 0 0 0 3px #1E141A, inset 0 0 0 3.6px rgba(205,160,138,.35); }
.pk-night-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pk-night-t { font-family: var(--display); font-size: 17px; letter-spacing: 3px; color: #F2C77A; }
.pk-night-c { display: flex; align-items: baseline; gap: 6px; }
.pk-night-lab { font-family: var(--sans); font-size: 11.5px; color: #C9B49C; }
.pk-night-clock { font-family: var(--serif); font-size: 20px; letter-spacing: 1px; color: #FFF1D6; font-variant-numeric: tabular-nums; }
.pk-night .bar { height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.pk-night .bar .fill { display: block; height: 100%; background: linear-gradient(90deg, #B8352A, #F2B866); border-radius: 3px; }
.pk-night .small { margin: 0; color: #D9C6B0; }
@media (prefers-reduced-motion: reduce) { .pk-lantern, .pk-lantern circle { animation: none; } }

/* ═══════════ 장터 팩 화면 (그림 시안 적용) ═══════════ */
/* 머리: 궁궐 처마·벚꽃·초롱 그림 위에 금빛 현판 */
.pk-theme .topbar { position: relative; aspect-ratio: 724 / 150; height: auto; min-height: 0; padding: 0; background: #1A1626 url(/assets/packs/header.webp?v=f66bcd172e) center top / 100% auto no-repeat; border: 0; box-shadow: none; overflow: hidden; }
.pk-theme .topbar .scene { display: none; }
.pk-theme .topbar .row { position: absolute; inset: 0; padding: 0; margin: 0; }
.pk-theme .topbar .iconbtn { position: absolute; top: 50%; width: 8%; height: auto; aspect-ratio: 1; min-width: 0; padding: 0; transform: translate(-50%, -54%); background: transparent; border: 0; box-shadow: none; color: #2B2116; display: flex; align-items: center; justify-content: center; }
.pk-theme .topbar .iconbtn:first-child { left: 13.8%; }
.pk-theme .topbar .iconbtn:last-child { left: 86.3%; }
.pk-theme .topbar .plaque { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); width: 30%; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; display: flex; justify-content: center; }
.pk-theme .topbar .plaque::before, .pk-theme .topbar .plaque::after { content: none; }
.pk-theme .topbar .title { margin: 0; font-family: var(--display); font-size: clamp(20px, 6.6vw, 30px); letter-spacing: .18em; color: #F4D98E; text-shadow: 0 1px 0 #6A4A14, 0 0 10px rgba(244,200,110,.45); background: none; -webkit-text-fill-color: #F4D98E; }
.pk-theme .topbar .title::before, .pk-theme .topbar .title::after { content: none; }
/* 탭 */
.pk-theme .op-tabs { gap: 8px; background: none; padding: 0; border: 0; }
.pk-theme .op-tabs a { flex: 1; border-radius: 10px; padding: 10px 4px; text-align: center; font-family: var(--display); font-size: 16px; color: #2B2116; background: linear-gradient(#FBF4E4, #EFE2C6); border: 1.5px solid #C9A45C; box-shadow: inset 0 0 0 2px #FBF4E4, 0 2px 4px rgba(90,60,20,.12); }
.pk-theme .op-tabs a.on { color: #F4D98E; background: linear-gradient(#2A2118, #15100C); border-color: #D8B464; box-shadow: inset 0 0 0 2px #15100C, inset 0 0 0 3px rgba(216,180,100,.6); }
/* 칸: 그림 카드 + 글자 */
.pk-grid { gap: 10px; }
.pk-tile.pk-img, .pk-hero.pk-img { position: relative; display: block; padding: 0; overflow: hidden; background: none; border: 0; box-shadow: 0 6px 14px -8px rgba(60,35,10,.55); border-radius: 12px; isolation: isolate; text-align: center; }
.pk-tile.pk-img::before, .pk-tile.pk-img::after, .pk-hero.pk-img::before, .pk-hero.pk-img::after { content: none !important; }
.pk-tile-art { display: block; width: 100%; height: auto; border-radius: inherit; }
.pk-img .pk-tinfo, .pk-img .pk-hinfo { position: absolute; left: 4%; right: 4%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; background: none; max-width: none; }
.pk-img .pk-name, .pk-img .pk-title { margin: 0; font-family: var(--display); font-weight: 400; white-space: nowrap; letter-spacing: 1px; color: #F4D98E; text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.5); -webkit-text-fill-color: currentColor; }
.pk-img .pk-price, .pk-img .pk-hprice strong { font-family: var(--serif); font-weight: 700; color: #FFF6E2; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.pk-img .pk-hprice span { color: #E8DCC4; font-size: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.pk-img .pk-chip { margin-top: 3px; padding: 1px 12px; border: 1px solid #D8B464; border-radius: 3px; background: rgba(20,14,8,.55); color: #F0D592; font-family: var(--serif); font-size: 12.5px; font-weight: 500; line-height: 20px; box-shadow: inset 0 0 0 2px rgba(20,14,8,.55), inset 0 0 0 2.6px rgba(216,180,100,.45); }
.pk-img .pk-sub { margin-top: 2px; font-family: var(--serif); font-size: 12.5px; color: #F0D592; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.pk-img .pk-lim { margin-top: 2px; font-size: 11px; color: #FFB49C !important; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.pk-img .pk-limtag { position: absolute; top: 3.2%; right: 6%; left: auto; z-index: 2; padding: 1px 8px; border-radius: 3px; background: #B8261C; color: #FFF0DC; font-family: var(--display); font-size: 13px; letter-spacing: 1px; line-height: 20px; transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
/* 임금님: 가로 한 줄 · 글자는 오른쪽 */
.pk-r1.pk-img { grid-column: 1 / -1; }
.pk-r1.pk-img .pk-tinfo { left: 40%; right: 7%; top: 50%; }
.pk-r1.pk-img .pk-name { font-size: clamp(24px, 8vw, 34px); letter-spacing: 3px; }
.pk-r1.pk-img .pk-price { font-size: clamp(15px, 4.6vw, 19px); }
/* 대감·양반: 두 칸 */
.pk-r2.pk-img, .pk-r3.pk-img { grid-column: span 3; }
.pk-r2.pk-img .pk-tinfo, .pk-r3.pk-img .pk-tinfo { top: 64.5%; }
.pk-r2.pk-img .pk-name, .pk-r3.pk-img .pk-name { font-size: clamp(16px, 5.4vw, 22px); }
.pk-r2.pk-img .pk-price, .pk-r3.pk-img .pk-price { font-size: clamp(13px, 4vw, 16px); }
/* 선비·백성·노비: 세 칸 · 밝은 바탕에 먹 글씨 */
.pk-r4.pk-img, .pk-r5.pk-img, .pk-r6.pk-img { grid-column: span 2; border-radius: 10px; }
.pk-r4.pk-img .pk-tinfo, .pk-r5.pk-img .pk-tinfo, .pk-r6.pk-img .pk-tinfo { top: 73%; }
.pk-r4.pk-img .pk-name, .pk-r5.pk-img .pk-name, .pk-r6.pk-img .pk-name { font-size: clamp(14px, 4.6vw, 19px); color: #2B2116; text-shadow: 0 1px 0 rgba(255,250,240,.7); }
.pk-r4.pk-img .pk-price, .pk-r5.pk-img .pk-price, .pk-r6.pk-img .pk-price { font-size: clamp(12px, 3.6vw, 15px); color: #2B2116; text-shadow: 0 1px 0 rgba(255,250,240,.7); }
.pk-r4.pk-img .pk-sub, .pk-r5.pk-img .pk-sub, .pk-r6.pk-img .pk-sub { color: #8E2A1C; text-shadow: none; }
.pk-tile.pk-img.paused { opacity: 1; }
/* 상세 머리: 같은 그림 카드를 크게 */
.pk-hero.pk-img { margin: 0 auto; min-height: 0; }
.pk-hero.pk-img:not(.pk-r1) { max-width: 330px; width: 100%; }
.pk-hero.pk-r1.pk-img .pk-hinfo { left: 40%; right: 7%; top: 52%; }
.pk-hero.pk-r2.pk-img .pk-hinfo, .pk-hero.pk-r3.pk-img .pk-hinfo { top: 65%; }
.pk-hero.pk-r4.pk-img .pk-hinfo, .pk-hero.pk-r5.pk-img .pk-hinfo, .pk-hero.pk-r6.pk-img .pk-hinfo { top: 73%; }
.pk-hero.pk-img .pk-title { font-size: clamp(24px, 8vw, 34px); letter-spacing: 3px; }
.pk-hero.pk-img .pk-title.long { font-size: clamp(20px, 6.6vw, 28px); }
.pk-hero.pk-img .pk-hprice strong { font-size: clamp(18px, 5.6vw, 24px); }
.pk-hero.pk-r4.pk-img .pk-title, .pk-hero.pk-r5.pk-img .pk-title, .pk-hero.pk-r6.pk-img .pk-title, .pk-hero.pk-r4.pk-img .pk-hprice strong, .pk-hero.pk-r5.pk-img .pk-hprice strong, .pk-hero.pk-r6.pk-img .pk-hprice strong { color: #2B2116; text-shadow: 0 1px 0 rgba(255,250,240,.7); }
.pk-hero.pk-r4.pk-img .pk-hprice span, .pk-hero.pk-r5.pk-img .pk-hprice span, .pk-hero.pk-r6.pk-img .pk-hprice span { color: #5A4A36; text-shadow: none; }
.pk-hcap { margin: 6px 2px 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.pk-hcap b { color: var(--ink2); font-weight: 600; }
/* 여는 화면: 그림 카드 */
.pk-img-art { aspect-ratio: auto; }
.pk-img-art img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.rv-pack-bundle { width: min(78vw, 320px); height: auto; }
.rv-pack-bundle .pk-art.xl { width: 100%; }
.rv-pack-bundle.charging .pk-img-art { animation: pkImgTug .16s ease-in-out infinite; }
.rv-pack-bundle.torn .pk-img-art { animation: pkImgOpen .5s ease-out forwards; }
@keyframes pkImgTug { 50% { transform: translateY(-2px) rotate(-.8deg); } }
@keyframes pkImgOpen { to { transform: translateY(-30px) scale(1.08); opacity: 0; } }
.rv-bundle .pk-art { width: 100%; }
/* 진열대 안내 카드 · 카드 묶음 그림 · 바닥 그림 */
.pk-theme .op-hero { position: relative; overflow: hidden; background: url(/assets/packs/inkart.webp?v=6de173568a) right center / auto 100% no-repeat, linear-gradient(#FBF4E4, #F1E4C8); border: 1.5px solid #C9A45C; box-shadow: inset 0 0 0 3px #FBF4E4, inset 0 0 0 3.8px rgba(201,164,92,.5); padding-right: 34%; }
.op-stack-art { background: url(/assets/packs/cards.webp?v=9d58ab619c) center / contain no-repeat; }
.op-stack-art > * { visibility: hidden; }
.pk-theme .op-tile { border: 1.5px solid #D9C49A; }
.pk-footer-art { margin: 12px -16px -8px; aspect-ratio: 724 / 144; background: url(/assets/packs/footer.webp?v=376a54f2d6) center / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%); mask-image: linear-gradient(180deg, transparent 0, #000 28%); }
/* 가운데 + 단추 금테 */
.pk-theme .fab { box-shadow: 0 0 0 3px #1E1612, 0 0 0 5px #D8B464, 0 6px 14px rgba(0,0,0,.35); }
.pk-img .pk-tinfo, .pk-img .pk-hinfo { align-items: center !important; text-align: center; max-width: none !important; overflow: visible; }
.pk-img .pk-name, .pk-img .pk-title { overflow: visible; max-width: none; text-overflow: clip; }
.pk-r1.pk-img .pk-tinfo { left: 40%; right: 6%; top: 49%; gap: 3px; }
.pk-r1.pk-img .pk-name { font-size: clamp(22px, 7.4vw, 31px); }
.pk-r2.pk-img .pk-tinfo, .pk-r3.pk-img .pk-tinfo { top: 61%; }
.pk-hero.pk-r2.pk-img .pk-hinfo, .pk-hero.pk-r3.pk-img .pk-hinfo { top: 62%; }
.pk-theme .topbar .plaque { transform: translate(-50%, -52%); }
.pk-img .pk-tinfo, .pk-img .pk-hinfo { width: auto !important; }
.pk-theme .topbar .plaque { top: 60%; transform: translate(-50%, -50%); }
.pk-theme .op-hero { padding-right: 30%; }
/* 가격표: 예전 '수라상' 칩 모양 그대로 (어두운 판 + 금테 두 줄) */
.pk-img .pk-price, .pk-img .pk-hprice { display: inline-flex; align-items: baseline; gap: 2px; margin-top: 4px; padding: 2px 14px; border: 1px solid #D8B464; border-radius: 3px; background: rgba(20,14,8,.6); box-shadow: inset 0 0 0 2px rgba(20,14,8,.6), inset 0 0 0 2.6px rgba(216,180,100,.45); line-height: 1.35; }
.pk-img .pk-price { color: #F4DDA0; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.pk-img .pk-hprice strong { color: #F4DDA0; }
.pk-img .pk-hprice span { color: #D9C9A6; }
.pk-r4.pk-img .pk-price, .pk-r5.pk-img .pk-price, .pk-r6.pk-img .pk-price,
.pk-hero.pk-r4.pk-img .pk-hprice strong, .pk-hero.pk-r5.pk-img .pk-hprice strong, .pk-hero.pk-r6.pk-img .pk-hprice strong { color: #F4DDA0; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.pk-hero.pk-r4.pk-img .pk-hprice span, .pk-hero.pk-r5.pk-img .pk-hprice span, .pk-hero.pk-r6.pk-img .pk-hprice span { color: #D9C9A6; }
.pk-r4.pk-img .pk-price, .pk-r5.pk-img .pk-price, .pk-r6.pk-img .pk-price { padding: 1px 10px; margin-top: 3px; }
.pk-r1.pk-img .pk-tinfo { top: 52%; }
.pk-r2.pk-img .pk-tinfo, .pk-r3.pk-img .pk-tinfo { top: 64%; }
.pk-r4.pk-img .pk-tinfo, .pk-r5.pk-img .pk-tinfo, .pk-r6.pk-img .pk-tinfo { top: 72%; }
.pk-r4.pk-img .pk-tinfo, .pk-r5.pk-img .pk-tinfo, .pk-r6.pk-img .pk-tinfo { top: 64%; gap: 0; }
.pk-r4.pk-img .pk-name, .pk-r5.pk-img .pk-name, .pk-r6.pk-img .pk-name { font-size: clamp(14px, 4.4vw, 18px); }
.pk-r4.pk-img .pk-price, .pk-r5.pk-img .pk-price, .pk-r6.pk-img .pk-price { font-size: clamp(11.5px, 3.4vw, 14px); padding: 0 9px; }
.pk-r4.pk-img .pk-tinfo, .pk-r5.pk-img .pk-tinfo, .pk-r6.pk-img .pk-tinfo { top: 69%; }
/* ═══ 복주머니 풀기 애니메이션 ═══
   누르는 동안: 매듭에 금빛이 모이고 그림이 어두워지며 떨림 → 풀리는 순간: 매듭에서 빛줄기·금빛 불꽃이 터지고 주머니 쪽으로 빨려 들어가듯 확대 → 흰 빛 */
.rv-pack-bundle { --charge: 0; animation: pkFloat 3s ease-in-out infinite; }
@keyframes pkFloat { 50% { transform: translateY(-5px); } }
.rv-pack-bundle .pk-img-art { position: relative; overflow: visible; transform-origin: var(--kx) var(--ky); }
.rv-pack-bundle .pk-img-art img { transition: filter .15s; filter: brightness(calc(1 - var(--charge) * .35)) saturate(calc(1 + var(--charge) * .3)); }
.pk-veil { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; background: radial-gradient(circle at var(--kx) var(--ky), transparent 12%, rgba(0,0,0,calc(var(--charge) * .55)) 46%); }
.pk-kglow { position: absolute; left: var(--kx); top: var(--ky); width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(calc(.2 + var(--charge) * .8)); border-radius: 50%; pointer-events: none; opacity: calc(var(--charge) * 1.1);
  background: radial-gradient(circle, rgba(255,250,220,1) 0, rgba(255,214,120,.85) 14%, rgba(255,180,60,.35) 36%, transparent 66%); mix-blend-mode: screen; transition: transform .12s, opacity .12s; }
.rv-pack-bundle.charging .pk-kglow { animation: pkPulse .22s ease-in-out infinite alternate; }
@keyframes pkPulse { to { filter: brightness(1.35); } }
.rv-pack-bundle.charging .pk-img-art { animation: pkShake .09s linear infinite; }
@keyframes pkShake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(calc(var(--shake) * -.5), calc(var(--shake) * .3)) rotate(-.5deg); } 50% { transform: translate(calc(var(--shake) * .5), 0) rotate(.4deg); } 75% { transform: translate(calc(var(--shake) * -.3), calc(var(--shake) * -.3)) rotate(-.3deg); } 100% { transform: translate(0, 0); } }
.pk-rays { position: absolute; left: var(--kx); top: var(--ky); width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,150,.85) 0 5deg, transparent 5deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 60%); mask-image: radial-gradient(circle, #000 0, transparent 60%); }
.pk-sparks { position: absolute; left: var(--kx); top: var(--ky); width: 0; height: 0; pointer-events: none; }
.pk-sparks i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #FFF6D8, #F2C46A 60%, transparent 70%); opacity: 0; }
.pk-sparks i:nth-child(3n) { width: 4px; height: 4px; }
.pk-sparks i:nth-child(4n) { width: 9px; height: 2px; border-radius: 2px; }
/* 풀리는 순간 */
.rv-pack-bundle.torn { animation: none; }
.rv-pack-bundle.torn .rv-pack-n { opacity: 0; transition: opacity .2s; }
.rv-pack-bundle.torn .pk-img-art { animation: pkSuck 1s cubic-bezier(.5,0,.75,0) forwards; }
.rv-pack-bundle.torn .pk-img-art img { filter: brightness(1); animation: pkWhite 1s ease-in forwards; }
.rv-pack-bundle.torn .pk-kglow { opacity: 1; animation: pkBloom 1s ease-out forwards; }
.rv-pack-bundle.torn .pk-rays { animation: pkRays 1s ease-out forwards; }
.rv-pack-bundle.torn .pk-sparks i { animation: pkSpark .9s cubic-bezier(.15,.7,.3,1) var(--dl) forwards; }
.rv-pack-bundle.torn .pk-veil { opacity: 0; transition: opacity .2s; }
@keyframes pkSuck { 0% { transform: scale(1); } 18% { transform: scale(.94) rotate(-1deg); } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes pkWhite { 0% { filter: brightness(1); } 100% { filter: brightness(2.6) saturate(.4); } }
@keyframes pkBloom { 0% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(5); opacity: .9; } }
@keyframes pkRays { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.1) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(40deg); } }
@keyframes pkSpark { 0% { opacity: 1; transform: translate(0, 0) scale(1.2); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 40px)) scale(.4); } }
@media (prefers-reduced-motion: reduce) { .rv-pack-bundle, .rv-pack-bundle * { animation: none !important; } }
/* 봉투: 시안의 용무늬 봉투 그림 (카드 덮개 · 진열대 봉투) */
.rv-cover { background: url(/assets/packs/envelope.webp?v=b120544174) center / 100% 100% no-repeat, #E9D6A8; box-shadow: 0 0 0 1px rgba(120,60,20,.5); }
.rv-cover b, .rv-cover em { visibility: hidden; }
.rv-cover .rv-grip { left: 50%; right: auto; transform: translateX(-50%); width: max-content; padding: 2px 10px; border-radius: 10px; background: rgba(40,20,10,.72); color: #F6E6C0; }
.rv-pack:not(.rv-pack-bundle), .rv-env:not(.rv-bundle) { background: url(/assets/packs/envelope.webp?v=b120544174) center / 100% 100% no-repeat, #E9D6A8; background-blend-mode: normal; }
.rv-pack:not(.rv-pack-bundle) .rv-pack-flap, .rv-pack:not(.rv-pack-bundle) .rv-pack-seal { display: none; }
.rv-pack:not(.rv-pack-bundle) .rv-pack-k, .rv-pack:not(.rv-pack-bundle) .rv-pack-n { position: relative; z-index: 1; padding: 2px 10px; border-radius: 10px; background: rgba(40,20,10,.72); color: #F6E6C0; letter-spacing: 1px; }
.rv-pack:not(.rv-pack-bundle) { justify-content: flex-end; padding-bottom: 22px; }
.rv-env:not(.rv-bundle) .sh-env-no { color: #6E2418; text-shadow: 0 1px 0 rgba(255,250,235,.8); }

/* ═══ 여는 화면 (장터 팩): 장면이 화면 가득 + 가운데 복주머니 ═══ */
.rv-scene-wrap { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--sky) 0%, var(--sky) 30%, var(--ground) 70%, var(--ground) 100%); transition: filter .6s, opacity .6s; }
.rv-scene-img { position: absolute; max-width: none; display: block; }
.rv-scene-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 72%, rgba(0,0,0,.6) 100%), radial-gradient(120% 70% at 50% 54%, transparent 45%, rgba(0,0,0,.45) 100%); }
.rv-pk:not(.rv-opening) .rv-scene-wrap { filter: brightness(.36) blur(5px) saturate(.8); }
.rv-pk > .rv-top, .rv-pk > .rv-stage { position: relative; z-index: 1; }
.rv-pk.rv-opening .rv-stage { position: fixed; inset: 0; display: block; padding: 0; }
.rv-pk-count { position: absolute; left: 0; right: 0; top: 13%; margin: 0; text-align: center; font-family: var(--display); font-size: 20px; letter-spacing: 4px; color: #F4D98E; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
.rv-pk-hint { position: absolute; left: 16px; right: 16px; bottom: calc(10% + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.rv-pk-hint b { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: 1px; color: #FFF1D0; text-shadow: 0 1px 4px rgba(0,0,0,.9); animation: rvBlink 1.8s ease-in-out infinite; }
.rv-pk-hint span { font-size: 12px; color: rgba(255,240,210,.7); text-shadow: 0 1px 3px rgba(0,0,0,.9); }
/* 복주머니 */
.rv-pouch { --charge: 0; --shake: 0px; position: fixed; z-index: 2; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; transform-origin: 50% 92%; animation: pouchIdle 3.2s ease-in-out infinite; }
.rv-pouch-img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)) brightness(calc(1 + var(--charge) * .12)); }
.rv-pouch::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -3%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); z-index: 0; }
@keyframes pouchIdle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(.6deg); } }
.rv-pouch.charging { animation: pouchShake .08s linear infinite; }
@keyframes pouchShake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(calc(var(--shake) * -.6), 0) rotate(calc(var(--charge) * -2deg)); } 50% { transform: translate(calc(var(--shake) * .6), calc(var(--shake) * -.3)) rotate(calc(var(--charge) * 1.6deg)); } 75% { transform: translate(calc(var(--shake) * -.3), 0) rotate(calc(var(--charge) * -1deg)); } 100% { transform: translate(0, 0); } }
.rv-pouch .pk-kglow { position: absolute; z-index: 2; left: var(--kx); top: var(--ky); width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(calc(.25 + var(--charge) * .9)); border-radius: 50%; pointer-events: none; opacity: calc(var(--charge) * 1.1); mix-blend-mode: screen;
  background: radial-gradient(circle, #FFFBE6 0, rgba(255,220,130,.9) 12%, rgba(255,180,60,.4) 34%, transparent 66%); transition: transform .12s, opacity .12s; }
.rv-pouch.charging .pk-kglow { animation: pkPulse .2s ease-in-out infinite alternate; }
.rv-pouch .pk-rays { position: absolute; z-index: 0; left: var(--kx); top: var(--ky); width: 420%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,150,.8) 0 4deg, transparent 4deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 58%); mask-image: radial-gradient(circle, #000 0, transparent 58%); }
.rv-pouch .pk-sparks { position: absolute; z-index: 3; left: var(--kx); top: var(--ky); width: 0; height: 0; pointer-events: none; }
.rv-pouch .pk-sparks i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #FFF6D8, #F2C46A 60%, transparent 70%); opacity: 0; }
.rv-pouch .pk-sparks i:nth-child(3n) { width: 4px; height: 4px; }
.rv-pouch .pk-sparks i:nth-child(4n) { width: 10px; height: 2px; border-radius: 2px; }
/* 누르는 동안 장면은 어두워지고 복주머니에 빛이 모임 (화면은 흔들리지 않음) */
.rv-pk.rv-opening .rv-scene-wrap { filter: brightness(calc(1 - var(--dim, 0) * .5)); }
/* 풀리는 순간 */
.rv-pouch.torn { animation: pouchOpen 1s cubic-bezier(.5,0,.7,.2) forwards; }
.rv-pouch.torn .rv-pouch-img { animation: pkWhite .9s ease-in forwards; }
.rv-pouch.torn .pk-kglow { opacity: 1; animation: pouchBloom 1s ease-out forwards; }
.rv-pouch.torn .pk-rays { animation: pkRays 1.1s ease-out forwards; }
.rv-pouch.torn .pk-sparks i { animation: pkSpark .95s cubic-bezier(.15,.7,.3,1) var(--dl) forwards; }
.rv-pk.rv-opening:has(.rv-pouch.torn) .rv-pk-hint, .rv-pk.rv-opening:has(.rv-pouch.torn) .rv-pk-count { opacity: 0; transition: opacity .2s; }
@keyframes pouchOpen { 0% { transform: scale(1); } 15% { transform: scale(.92, 1.06); } 30% { transform: scale(1.06, .96); } 100% { transform: scale(1.5) translateY(-6%); opacity: 0; } }
@keyframes pouchBloom { 0% { transform: translate(-50%, -50%) scale(1.1); } 100% { transform: translate(-50%, -50%) scale(6); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .rv-pouch, .rv-pouch * { animation: none !important; } }
/* ═══ 카드 공개: 실물 슬랩 + 포켓장터 봉투를 손가락으로 마음대로 밀어 엿보기 ═══ */
.rv-holder { width: min(250px, 66vw); aspect-ratio: 0.588; overflow: visible; animation: rvRise .5s cubic-bezier(.2,.8,.2,1); filter: none; }
@keyframes rvRise { from { transform: translateY(30vh); opacity: 0; } to { transform: none; opacity: 1; } }
.rv-slab-photo { padding: 0; background: #1a1a1a; overflow: hidden; border-radius: 12px; box-shadow: 0 14px 30px rgba(0,0,0,.6); }
.rv-slab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 58%); background-size: 260% 100%; animation: rvGlare 3.4s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes rvGlare { 0% { background-position: 130% 0; } 60%, 100% { background-position: -40% 0; } }
.rv-env-cover { inset: -2.5%; background: none !important; box-shadow: none !important; border-radius: 8px; transform-origin: 50% 50%; will-change: transform; filter: drop-shadow(0 calc(6px + var(--lift, 0) * 16px) calc(10px + var(--lift, 0) * 14px) rgba(0,0,0,calc(.45 + var(--lift, 0) * .2))); }
.rv-env-cover::before, .rv-env-cover::after { content: none !important; }
.rv-env-cover .pj-env { display: block; width: 100%; height: 100%; }
.pj-env-ch { font-family: var(--display); }
.rv-holder.touched .rv-env-cover { cursor: grabbing; }
/* 엿볼수록 주변이 어두워지고 카드에만 빛 */
.rv-pk .rv-scene-wrap { transition: filter .3s; }
.rv-pk:not(.rv-opening) .rv-scene-wrap { filter: brightness(calc(.36 - var(--tz, 0) * .22)) blur(5px) saturate(.8); }
/* ═══ 진열대 오리파: 포켓장터 봉투 ═══ */
.sh-env, .rv-env:not(.rv-bundle) { background: none !important; box-shadow: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.sh-env .pj-env, .rv-env:not(.rv-bundle) .pj-env { display: block; width: 100%; height: 100%; }
.sh-env.on { box-shadow: none; filter: drop-shadow(0 0 10px rgba(255,210,110,.9)) drop-shadow(0 14px 14px rgba(0,0,0,.55)); }
.sh-env.taken { background: none; box-shadow: none; opacity: .3; }
.sh-env.taken .pj-env { filter: grayscale(1) brightness(.8); }
.sh-env-sold { top: auto; bottom: 6%; z-index: 1; padding: 1px 0; background: rgba(30,20,12,.75); color: #F3E6CC; }
.sh-env-hold { z-index: 1; }
/* 뜯기 화면: 띠와 몸통 */
.rv:not(.rv-pk) { background: radial-gradient(90% 60% at 50% 48%, #3A2618 0, #1A100A 60%, #0C0705 100%); }
.rv-pack-env { --charge: 0; position: fixed; left: 50%; top: 50%; width: min(64vw, 260px); height: auto; aspect-ratio: 200 / 340; margin: 0; padding: 0; transform: translate(-50%, -52%); background: none; box-shadow: none; border-radius: 8px; touch-action: none; -webkit-user-select: none; user-select: none; animation: envIdle 3.2s ease-in-out infinite; filter: drop-shadow(0 22px 24px rgba(0,0,0,.6)); }
@keyframes envIdle { 0%, 100% { transform: translate(-50%, -52%); } 50% { transform: translate(-50%, calc(-52% - 6px)); } }
.rv-env-body, .rv-env-strip { position: absolute; inset: 0; display: block; }
.rv-env-body .pj-env, .rv-env-strip .pj-env { display: block; width: 100%; height: 100%; }
.rv-env-body { clip-path: polygon(0 11%, 4% 10.6%, 9% 11.4%, 15% 10.5%, 21% 11.3%, 28% 10.6%, 35% 11.4%, 42% 10.5%, 50% 11.3%, 58% 10.6%, 65% 11.4%, 72% 10.5%, 79% 11.3%, 86% 10.6%, 93% 11.4%, 100% 10.8%, 100% 100%, 0 100%); }
.rv-env-strip { clip-path: polygon(0 0, 100% 0, 100% 10.8%, 93% 11.4%, 86% 10.6%, 79% 11.3%, 72% 10.5%, 65% 11.4%, 58% 10.6%, 50% 11.3%, 42% 10.5%, 35% 11.4%, 28% 10.6%, 21% 11.3%, 15% 10.5%, 9% 11.4%, 4% 10.6%, 0 11%); transform-origin: 0% 11%; }
.rv-tearline { position: absolute; left: 4%; right: 4%; top: 11%; height: 0; border-top: 1.5px dashed rgba(156,42,30,calc(.25 + var(--charge) * .75)); pointer-events: none; }
.rv-slit { position: absolute; left: 6%; right: 6%; top: 10%; height: 3%; border-radius: 50%; background: radial-gradient(closest-side, #FFF6D8, rgba(255,210,120,.8) 40%, transparent); opacity: calc(var(--charge) * .9); filter: blur(2px); z-index: 2; pointer-events: none; }
.rv-pack-env.charging { animation: envShake .08s linear infinite; }
.rv-pack-env.charging .rv-env-strip { transform: rotate(calc(var(--charge) * -4deg)) translateY(calc(var(--charge) * -3px)); }
@keyframes envShake { 0% { transform: translate(-50%, -52%); } 25% { transform: translate(calc(-50% - var(--shake) * .6), -52%) rotate(-.6deg); } 50% { transform: translate(calc(-50% + var(--shake) * .6), calc(-52% - var(--shake) * .3)) rotate(.5deg); } 75% { transform: translate(calc(-50% - var(--shake) * .3), -52%); } 100% { transform: translate(-50%, -52%); } }
.rv-pack-env.torn { animation: envOpen .9s cubic-bezier(.5,0,.7,.2) forwards; }
.rv-pack-env.torn .rv-env-strip { animation: stripFly .7s cubic-bezier(.2,.7,.4,1) forwards; }
.rv-pack-env.torn .rv-slit { opacity: 1; animation: slitBurst .9s ease-out forwards; }
.rv:has(.rv-pack-env.torn) .rv-pk-hint, .rv:has(.rv-pack-env.torn) .rv-pk-count { opacity: 0; transition: opacity .2s; }
@keyframes stripFly { 0% { transform: none; } 30% { transform: rotate(-10deg) translate(-4px, -10px); } 100% { transform: rotate(-38deg) translate(-60%, -160%); opacity: 0; } }
@keyframes slitBurst { 0% { transform: scaleY(1); } 60% { transform: scale(1.4, 8); opacity: 1; } 100% { transform: scale(1.6, 14); opacity: 0; } }
@keyframes envOpen { 0%, 35% { transform: translate(-50%, -52%); opacity: 1; } 100% { transform: translate(-50%, -30%) scale(.94); opacity: 0; } }
.rv:not(.rv-pk) .rv-stage { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .rv-pack-env, .rv-pack-env * { animation: none !important; } }
.rv.rv-opening .rv-stage { position: fixed; inset: 0; display: block; padding: 0; }
.sh-env:not(.on):not(.gone):not(.mine) { transform: none; }
.rv-tray:has(> :only-child) { display: flex; justify-content: center; } .rv-tray:has(> :only-child) > * { width: min(36vw, 140px); }
/* 봉투 뜯은 뒤: 앞면 찢긴 가장자리 · 안쪽 뒷면 · 안에서 카드가 올라옴 */
.rv-env-back { position: absolute; left: 1.5%; right: 1.5%; top: 9%; bottom: 1%; border-radius: 6px; background: linear-gradient(180deg, #B89A64 0, #D9C08E 18%, #E6D2A6 100%); box-shadow: inset 0 0 0 2px rgba(156,42,30,.5); }
.rv-env-card { position: absolute; left: 9%; right: 9%; top: 13%; height: 78%; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #6E2B22 0 8px, #5A231C 8px 16px); box-shadow: inset 0 0 0 2px #D6B47A, inset 0 0 0 6px #5A231C, inset 0 0 0 7px rgba(214,180,122,.6), 0 0 0 rgba(255,214,130,0); }
.rv-env-card b { width: 30%; aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #2A1A12; color: #E8D3A2; font-family: var(--display); font-size: clamp(18px, 6vw, 28px); box-shadow: inset 0 0 0 2px #D6B47A; }
.rv-env-body { filter: drop-shadow(0 -2px 2px rgba(60,30,10,.35)); }
.rv-env-fiber { position: absolute; left: 0; right: 0; top: 10.4%; height: 1.4%; opacity: 0; background: repeating-linear-gradient(90deg, #FBF3DE 0 3px, #EFE0BC 3px 5px, #FFF8E8 5px 9px); clip-path: polygon(0 40%, 4% 0, 9% 70%, 15% 10%, 21% 60%, 28% 5%, 35% 75%, 42% 0, 50% 60%, 58% 10%, 65% 75%, 72% 0, 79% 65%, 86% 10%, 93% 75%, 100% 30%, 100% 100%, 0 100%); }
.rv-pack-env .rv-env-back, .rv-pack-env .rv-env-card { visibility: hidden; }
.rv-pack-env.torn { animation: none; transform: translate(-50%, -52%); }
.rv-pack-env.torn .rv-env-back, .rv-pack-env.torn .rv-env-card { visibility: visible; }
.rv-pack-env.torn .rv-env-fiber { opacity: 1; }
.rv-pack-env.torn .rv-env-card { animation: cardRise 1.2s cubic-bezier(.3,.1,.2,1) .35s both; z-index: 0; }
.rv-pack-env.torn .rv-env-body { z-index: 1; animation: bodyDrop 1.2s cubic-bezier(.4,0,.2,1) .35s both; }
.rv-pack-env.torn .rv-env-back { animation: bodyDrop 1.2s cubic-bezier(.4,0,.2,1) .35s both; }
.rv-pack-env.torn .rv-env-strip { z-index: 3; }
.rv-pack-env.torn .rv-slit { z-index: 2; animation: slitBurst .9s ease-out forwards; }
@keyframes cardRise { 0% { transform: translateY(6%); box-shadow: inset 0 0 0 2px #D6B47A, inset 0 0 0 6px #5A231C, inset 0 0 0 7px rgba(214,180,122,.6), 0 0 0 rgba(255,214,130,0); } 70% { transform: translateY(-58%); box-shadow: inset 0 0 0 2px #D6B47A, inset 0 0 0 6px #5A231C, inset 0 0 0 7px rgba(214,180,122,.6), 0 0 30px rgba(255,214,130,.8); } 100% { transform: translateY(-62%); box-shadow: inset 0 0 0 2px #D6B47A, inset 0 0 0 6px #5A231C, inset 0 0 0 7px rgba(214,180,122,.6), 0 0 40px rgba(255,214,130,.9); } }
@keyframes bodyDrop { 0%, 30% { transform: none; opacity: 1; } 100% { transform: translateY(40%); opacity: 0; } }

/* ═══════════ 진열대 (시안: 궁궐 밤 · 금박 나무 진열장 · 매화 봉투) ═══════════ */
.sh { background: #160E09; color: #F3E6CC; }
.sh-head { position: relative; flex: none; aspect-ratio: 1024 / 212; padding: 0; display: block; }
.sh-head .sh-title { position: absolute; left: 25%; right: 25%; top: 56%; transform: translateY(-50%); text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(15px, 5.2vw, 24px); letter-spacing: 1px; color: #F6DC9A; text-shadow: 0 1px 0 #5A3A10, 0 0 10px rgba(244,200,110,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-head .sh-left { position: absolute; left: 0; right: 0; top: 88%; transform: translateY(-50%); text-align: center; font-family: var(--serif); font-size: clamp(11px, 3.4vw, 14px); color: #F0D592; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.sh-head .rv-skip { position: absolute; right: 4.5%; top: 59%; transform: translateY(-50%); min-height: 0; height: auto; padding: 4px 12px; border-radius: 20px; background: linear-gradient(#2A1E14, #120C08); border: 1.5px solid #D8B464; color: #F0D592; font-family: var(--display); font-size: clamp(12px, 3.6vw, 15px); box-shadow: 0 0 0 2px #120C08, 0 0 0 3px rgba(216,180,100,.45); }
.sh-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 8%, transparent 92%, rgba(0,0,0,.45)), repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 3px, rgba(0,0,0,.04) 3px 7px), linear-gradient(180deg, #3A2416, #24160D); border-left: 3px solid #4A2E18; border-right: 3px solid #4A2E18; }
.sh-deco { position: absolute; top: 4px; width: 9%; max-width: 46px; height: auto; z-index: 3; pointer-events: none; -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 55%, transparent 100%); mask-image: radial-gradient(70% 60% at 50% 45%, #000 55%, transparent 100%); }
.sh-deco.lantern-l { left: -1%; } .sh-deco.lantern-r { right: -1%; }
.sh-tickets { justify-content: center; gap: 2.4%; padding: 10px 10% 6px; overflow: visible; }
.sh-tickets button { flex: 1 1 0; min-width: 0; padding: 7px 2px 6px; border-radius: 4px; border: 1.5px solid #C9A45C; background: linear-gradient(#2E2016, #1A110A); color: #F6E6C0; font-family: var(--serif); box-shadow: inset 0 0 0 2px #1A110A, inset 0 0 0 3px rgba(201,164,92,.5); position: relative; }
.sh-tickets button::before, .sh-tickets button::after { content: ''; position: absolute; width: 8px; height: 8px; border: 1.5px solid #E2C27A; }
.sh-tickets button::before { left: 3px; top: 3px; border-right: 0; border-bottom: 0; }
.sh-tickets button::after { right: 3px; bottom: 3px; border-left: 0; border-top: 0; }
.sh-tickets button b { font-family: var(--display); font-weight: 400; font-size: clamp(14px, 4.4vw, 19px); }
.sh-tickets button span { font-family: var(--serif); font-size: clamp(10px, 3vw, 13px); color: #E8D3A2; }
.sh-tickets button.on { background: linear-gradient(#F6D98E, #D9A848 55%, #B8862E); color: #2A1A0C; border-color: #FFE7A8; box-shadow: inset 0 0 0 2px rgba(255,240,200,.6), 0 0 14px rgba(246,200,110,.55); }
.sh-tickets button.on span { color: #3A2410; }
.sh-tickets button.on::before, .sh-tickets button.on::after { border-color: #6A4210; }
.sh-status { position: relative; padding: 2px 15%; font-family: var(--serif); font-size: clamp(12px, 3.6vw, 15px); color: #F0D592; }
.sh-status::before, .sh-status::after { content: ''; position: absolute; top: 50%; width: 11%; height: 1px; background: linear-gradient(90deg, transparent, #C9A45C); }
.sh-status::before { left: 3%; } .sh-status::after { right: 3%; transform: scaleX(-1); }
.sh-status b { color: #FFE7A8; }
.sh-room { padding: 12px 10% 8px; }
.sh-cabinet { position: relative; padding: 18px 10px 4px; border-radius: 6px; background: linear-gradient(180deg, #2A170D, #1B0F08); border: 2px solid #6A4520; box-shadow: inset 0 0 0 2px #1B0F08, inset 0 0 0 3.5px rgba(201,164,92,.55), inset 0 10px 30px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.5); }
.sh-orn { position: absolute; top: -4px; width: 17%; height: auto; z-index: 2; pointer-events: none; -webkit-mask-image: linear-gradient(135deg, #000 55%, transparent 80%); mask-image: linear-gradient(135deg, #000 55%, transparent 80%); }
.sh-orn.orn-l { left: -4px; } .sh-orn.orn-r { right: -4px; -webkit-mask-image: linear-gradient(225deg, #000 55%, transparent 80%); mask-image: linear-gradient(225deg, #000 55%, transparent 80%); }
.sh-shelf { gap: 26px 9px; padding: 4px 2px 14px; background: none; }
.sh-env, .sh-env:not(.on):not(.gone):not(.mine) { aspect-ratio: 164 / 204; transform: none; filter: drop-shadow(0 6px 6px rgba(0,0,0,.55)); overflow: visible; }
.sh-env .shv-img, .rv-env .shv-img, .rv-env-body .shv-img, .rv-env-strip .shv-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.shv-no { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-family: var(--serif); font-weight: 700; font-size: clamp(15px, 5vw, 24px); color: #2A1E14; text-shadow: 0 1px 0 rgba(255,250,235,.7); pointer-events: none; }
/* 선반 판자 (봉투 아래로 이어짐) + 작은 조명 */
.sh-env::after { content: ''; position: absolute; left: -14%; right: -14%; bottom: -13px; height: 9px; border-radius: 1px; background: linear-gradient(#7A4E28, #4A2C14); box-shadow: 0 -1px 0 #C9A45C inset, 0 4px 6px rgba(0,0,0,.6); z-index: -1; }
.sh-env::before { content: ''; position: absolute; left: 32%; right: 32%; top: -11px; height: 4px; border-radius: 50%; background: #FFE2A0; box-shadow: 0 0 8px 2px rgba(255,214,130,.8), 0 14px 26px 10px rgba(255,214,130,.12); }
.sh-env.on, .sh-env.on:not(.gone) { transform: translateY(-4px); filter: drop-shadow(0 0 2px #FFE7A8) drop-shadow(0 0 10px rgba(255,200,90,.95)) drop-shadow(0 10px 10px rgba(0,0,0,.5)); }
.sh-env.on .shv-img { box-shadow: 0 0 0 2px #FFD98A; }
.sh-env.on::after { content: ''; }
.sh-env.on .shv-no::after { content: '✓'; position: absolute; top: auto; right: -2%; left: auto; }
.sh-env.on .shv-no::after { display: none; }
.sh-env-check { display: none; }
.sh-env.taken .shv-img { filter: grayscale(1) brightness(.55); }
.sh-env.taken { opacity: .55; }
.sh-tools { padding: 6px 16px 10px; }
.sh-random { min-height: 40px; padding: 0 26px; border-radius: 6px; background: linear-gradient(#2E2016, #140D08); border: 1.5px solid #D8B464; color: #F6DC9A; font-family: var(--display); font-size: clamp(14px, 4.4vw, 18px); box-shadow: inset 0 0 0 2px #140D08, inset 0 0 0 3px rgba(216,180,100,.45), 0 4px 10px rgba(0,0,0,.5); }
.sh-bar { margin: 0 3% calc(6px + env(safe-area-inset-bottom)); padding: 12px 14px 12px; border-radius: 12px; background: url(/assets/hanji.webp) center / 260px repeat, linear-gradient(#FBF4E2, #EFE2C4); background-blend-mode: multiply; border: 2px solid #C9A45C; box-shadow: inset 0 0 0 3px #FBF4E2, inset 0 0 0 4px rgba(201,164,92,.5), 0 -6px 18px rgba(0,0,0,.45); }
.sh-bar .btn { border-radius: 8px; font-family: var(--display); font-size: 16px; }
.sh-bar .btn:not(:disabled) { background: linear-gradient(#B8392A, #8E2418); box-shadow: inset 0 0 0 1.5px #E8B070; }
.sh-bar .btn:disabled { background: linear-gradient(#E3D3B0, #CDB98E); color: #8A7650; box-shadow: inset 0 0 0 1.5px rgba(160,130,80,.5); }
/* 손에 든 봉투 · 뜯기 화면도 같은 봉투 */
.rv-env:not(.rv-bundle) { aspect-ratio: 164 / 204; }
.rv-pack-env { aspect-ratio: 164 / 204; width: min(66vw, 280px); }
.rv-pack-env .shv-no { font-size: clamp(26px, 9vw, 40px); }
.sh-check { display: none; position: absolute; top: -12px; right: -10px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #3A2A18, #120C08); border: 2px solid #F0CF86; color: #FFE7A8; font-family: var(--sans); font-weight: 900; font-size: 14px; box-shadow: 0 0 8px rgba(255,210,110,.8); }
.sh-env.on .sh-check { display: flex; }
.sh-env.on::after, .sh-env.on:not(.gone)::after { content: ''; }
.sh-env.on::after { content: ''; top: auto; left: -14%; right: -14%; bottom: -13px; width: auto; height: 9px; border-radius: 1px; display: block; background: linear-gradient(#7A4E28, #4A2C14); color: transparent; box-shadow: 0 -1px 0 #C9A45C inset, 0 4px 6px rgba(0,0,0,.6); z-index: -1; }
.sh-head .sh-title { left: 23%; right: 23%; font-size: clamp(13px, 4.3vw, 21px); letter-spacing: 0; }
.shv-no { font-size: clamp(14px, 4.4vw, 21px); bottom: 5%; }
.sh-env.on, .sh-env.on:not(.gone) { transform: none; }
.sh-orn { width: 13%; top: -8px; }
.sh-orn.orn-l { left: -8px; } .sh-orn.orn-r { right: -8px; }
.sh-cabinet { padding-top: 22px; }
.sh-env, .sh-env:not(.on):not(.gone):not(.mine) { animation: none; }
.rv-env-shelf .shv-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; border-radius: 8px; }
.rv-env-shelf .shv-no { font-size: clamp(22px, 7vw, 34px); bottom: 4%; }
/* 엿보기 덮개(진열대 봉투): 자르지 않고 원래 비율 그대로 — 슬랩보다 넓은 봉투가 통째로 덮음 */
.rv-env-cover.rv-env-shelf { inset: auto; left: -21%; right: -21%; top: -2%; bottom: -2%; }
.rv-env-shelf .shv-img { object-fit: fill; border-radius: 8px; }
.rv:not(.rv-pk) .rv-holder { width: min(220px, 56vw); }

/* 진열대 그림 (코드로 그림) */
.sh-head { aspect-ratio: 400 / 120; overflow: hidden; }
.shx-head { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sh-head .sh-title { left: 29%; right: 29%; top: 77%; font-size: clamp(12px, 3.9vw, 19px); }
.sh-head .sh-left { top: auto; bottom: -1px; transform: none; display: none; }
.sh-head .rv-skip { top: 79%; right: 3%; padding: 3px 10px; font-size: clamp(11px, 3.3vw, 14px); }
.sh-head .shx-ch, .shx-ch, .shx-no { font-family: var(--serif); }
.sh-status-left { display: block; margin-bottom: 2px; font-size: .85em; color: #D9C08A; }
.sh-deco { width: 9%; max-width: 40px; top: 0; -webkit-mask-image: none; mask-image: none; }
.sh-deco svg { display: block; width: 100%; height: auto; overflow: visible; }
.shx-lantern { transform-origin: 50% 0; animation: shxSway 4s ease-in-out infinite alternate; }
.shx-glow { animation: scFlicker 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes shxSway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.shx-star { animation: scTwinkle 3s ease-in-out infinite; }
.shx-star:nth-of-type(2n) { animation-delay: -1.3s; }
.shx-win { animation: scFlicker 3.4s ease-in-out infinite; }
.sh-orn { width: 14%; top: -6px; -webkit-mask-image: none; mask-image: none; }
.sh-orn.orn-l { left: -6px; } .sh-orn.orn-r { right: -6px; -webkit-mask-image: none; mask-image: none; }
.sh-orn svg { display: block; width: 100%; height: auto; }
.sh-env { aspect-ratio: 200 / 250; }
.sh-env .shx-env, .rv-env .shx-env, .rv-env-shelf .shx-env { display: block; width: 100%; height: 100%; border-radius: 6px; }
.sh-env.on .shx-env { box-shadow: 0 0 0 2px #FFD98A; border-radius: 6px; }
.sh-env.taken .shx-env { filter: grayscale(1) brightness(.55); }
.rv-env:not(.rv-bundle) { aspect-ratio: 200 / 250; }
.rv-env-cover.rv-env-shelf { left: -18%; right: -18%; top: -3%; bottom: -3%; }
.mk-linkbtn.danger { margin-top: 14px; background: none; border: 0; padding: 6px 0; color: #9C2A1E; font-family: var(--sans); font-size: 13px; text-decoration: underline; cursor: pointer; }
.mk-legal-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-family: var(--sans); font-size: 12.5px; }
.mk-legal-links a { color: var(--ink2); }
.btn-naver { position: relative; margin-top: 8px; background: #03C75A; color: #fff; font-weight: 700; box-shadow: 0 6px 16px rgba(10,60,30,.14); }
.btn-naver svg { position: absolute; left: 22px; }
.btn-apple { position: relative; margin-top: 8px; background: #000; color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.btn-apple svg { position: absolute; left: 20px; }
.btn-naver[hidden], .btn-apple[hidden] { display: none; }
.pol-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.pol-tabs::-webkit-scrollbar { display: none; }
.pol-tabs a { flex: none; padding: 7px 12px; border-radius: 16px; border: 1px solid var(--line); font-family: var(--sans); font-size: 13px; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.pol-tabs a.on { background: #211C19; color: #E8D3A2; border-color: transparent; }

/* ═══ 아이폰·안드로이드 앱 호환 ═══ */
/* 앱 화면이 상태 표시줄(시계·노치) 밑까지 그려질 때 머리 단추가 가려지지 않게 (일반 브라우저에서는 0이라 변화 없음) */
.topbar { height: calc(108px + env(safe-area-inset-top)); }
.topbar .row { top: env(safe-area-inset-top); }
.pk-theme .topbar, .sh-head { box-sizing: content-box; border-top: env(safe-area-inset-top) solid #0A1028; }
.pk-theme .topbar { height: auto; }
/* 아이폰: 글자 칸 글씨가 16px보다 작으면 누를 때 화면이 확대됨 → 손가락 기기에서는 16px 이상 */
@media (pointer: coarse) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1em) !important; } }
/* 누를 때 회색 사각형 · 길게 누르면 뜨는 메뉴 · 글자 선택 막기 (단추·그림) */
a, button, [role=button] { -webkit-tap-highlight-color: transparent; }
button, .btn, .sh-env, .rv-env, .rv-pouch, .rv-holder, .pk-tile, img { -webkit-touch-callout: none; }
.rv, .sh { -webkit-user-select: none; user-select: none; }
/* 오래된 기기(아이폰 15.4·안드로이드 크롬 108 이전)는 dvh 를 몰라서 vh 로 대신 */
@supports not (height: 1dvh) {
  .app { min-height: 100vh; }
  .sheet { height: 88vh; }
  .bb-sheet { height: 92vh; }
  .start, .start .stage { min-height: 100vh; }
  .start .spacer { min-height: 56vh; }
}
/* 화면 끝에서 당겨도 페이지 전체가 튀지 않게 (안드로이드 당겨서 새로고침 방지 포함) */
html { overscroll-behavior-y: none; }

/* ── 참고 시세 · 시세 흐름 · 다른 곳에서 찾아보기 (카드 화면) ── */
.mk-refs { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 6px; background: var(--paper2); box-shadow: inset 0 0 0 1px #D9CBB0; }
.mk-refs h3 { margin: 0 0 6px; font-size: 15px; }
.mk-refs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mk-refs li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px dashed #D9CBB0; }
.mk-refs li:first-child { border-top: 0; padding-top: 2px; }
.mk-refs li .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-refs li .t b { font-family: var(--sans); font-size: 13.5px; }
.mk-refs li .v { font-size: 17px; white-space: nowrap; }
.mk-refs li.bj-li { display: block; padding: 0 0 10px; border-top: 0; }
.mk-refs li.bj-li[hidden] { display: none; }
.bj-list { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px 10px; border-radius: 6px; background: #FBF7EF; box-shadow: inset 0 0 0 1px #E6DCC9; }
.bj-row { display: flex; align-items: center; gap: 8px; min-height: 40px; border-top: 1px dashed #E6DCC9; color: var(--ink); text-decoration: none; font-family: var(--sans); font-size: 13px; }
.bj-row:first-child { border-top: 0; }
.bj-st { flex: none; font-size: 11px; color: var(--muted); }
.bj-st.on { color: #2E6B35; }
.bj-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bj-list .small { margin: 6px 0 0; }
.bj-more { min-height: 32px; padding: 0; border: 0; background: none; font-family: var(--sans); font-size: 12px; color: #8A6A35; text-decoration: underline; cursor: pointer; }
.mk-refs .links { display: flex; flex-direction: column; gap: 6px; }
.mk-refs .links .row { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-extlink { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid #CDBFA6; background: #FBF7EF; font-family: var(--sans); font-size: 13px; color: var(--ink); text-decoration: none; }
.mk-hist { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid #D9CBB0; }
.mk-hist .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-hist .hd b { font-family: var(--sans); font-size: 13.5px; }
.mk-hist .hd .chips { flex-wrap: nowrap; gap: 6px; }
.mk-hist .nums { display: flex; gap: 18px; }
.mk-hist .nums span { display: flex; flex-direction: column; }
.mk-hist .nums small { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.mk-hist .nums b { font-size: 16px; }
.mk-hist .nums .up b { color: #B33A2B; }
.mk-hist .nums .dn b { color: #2F5D8A; }
.mk-hist .mk-spark { height: 96px; }
.mk-hist .ax { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 11px; color: var(--muted); }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.mk-proof img { max-width: 140px; max-height: 140px; border-radius: 6px; object-fit: cover; }
/* 판매 화면: 가격 정할 때 참고 시세 */
.mk-sellquote:empty { display: none; }
.mk-sellquote { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px 14px; border-radius: 6px; background: var(--paper2); box-shadow: inset 0 0 0 1px #D9CBB0; }
.mk-sellquote .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mk-sellquote .hd b { font-family: var(--sans); font-size: 13px; }
.mk-sellquote .big { display: flex; flex-direction: column; }
.mk-sellquote .big b { font-size: 22px; }
.mk-sellquote .row { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mk-sellquote .links { display: flex; flex-wrap: wrap; gap: 6px; }
/* 내 자산: 많이 움직인 카드 */
.ledger .movers { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(176,141,87,.35); }
.ledger .movers .mv { display: flex; justify-content: space-between; gap: 10px; font-family: var(--sans); font-size: 12.5px; color: #E9DFCC; }
.ledger .movers .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger .movers .p { flex-shrink: 0; color: #F08C74; }
.ledger .movers .p.dn { color: #8FB4F0; }
/* 관리자: 시세 관리 */
.adm-links { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-reflist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.adm-reflist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--sans); font-size: 12.5px; }
.adm-hist { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px dashed #D9CBB0; }
.adm-card > input[type="text"] { min-height: 44px; padding: 0 12px; border: 1px solid #CDBFA6; border-radius: 8px; background: #FBF7EF; font-family: var(--sans); font-size: 16px; color: var(--ink); }
.mk-refs li .vv { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.mk-refs li .vv a { color: #8C6B3A; }
.adm-ext { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px dashed #D9CBB0; }
.adm-ext .err { color: var(--red); }
.adm-switch { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 6px; background: var(--paper2); box-shadow: inset 0 0 0 1px #D9CBB0; }
.adm-switch.on { box-shadow: inset 0 0 0 2px #2F5D3A; }
.adm-ext input { min-height: 44px; padding: 0 12px; border: 1px solid #CDBFA6; border-radius: 8px; background: #FBF7EF; font-family: var(--sans); font-size: 16px; color: var(--ink); }
.adm-switch .btn { width: auto; min-width: 84px; flex-shrink: 0; padding: 0 16px; }
/* 체결 출처 (포켓장터 / 크림 / 스니덩) */
.mk-trades li { grid-template-columns: 1fr auto; }
.mk-trades .what .top { display: flex; align-items: center; gap: 6px; }
.mk-trades .right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mk-src { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; font-family: var(--sans); font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap; vertical-align: middle; }
.mk-src.pj { background: #211C19; color: #E8D3A2; }
.mk-src.kream { background: #E9E9E9; color: #111; box-shadow: inset 0 0 0 1px #BDBDBD; }
.mk-src.snkrdunk { background: #E8F6F5; color: #00756F; box-shadow: inset 0 0 0 1px #8ED3CF; }
.mk-board .lb .mk-src { margin-left: 2px; }
.adm-ratio { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.adm-ratio summary { font-family: var(--sans); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.adm-ratio input { min-height: 44px; padding: 0 12px; border: 1px solid #CDBFA6; border-radius: 8px; background: #FBF7EF; font-size: 16px; }

/* ── 주소록 · 배송지 ── */
.addr-sheet .body { gap: 10px; }
.addr-sheet input[type="text"], .addr-sheet input[type="tel"] { min-height: 46px; padding: 0 12px; border: 1px solid #CDBFA6; border-radius: 8px; background: #FBF7EF; font-family: var(--sans); font-size: 16px; color: var(--ink); width: 100%; box-sizing: border-box; }
.addr-sheet input[readonly] { background: #F1EADB; color: #5A4E40; }
.addr-ziprow { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.addr-find { min-height: 46px; padding: 0 16px; white-space: nowrap; }
.addr-frame { height: 420px; border: 1px solid #CDBFA6; border-radius: 8px; overflow: hidden; }
.addr-frame[hidden] { display: none; }
.addr-card { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.addr-card .top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.addr-card .top b { font-size: 15px; }
.addr-card .ph { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.addr-card .line { margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.addr-card .memo { margin: 0; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.addr-card.masked .line { color: var(--muted); }
.addr-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; background: #211C19; color: #E8D3A2; font-family: var(--sans); font-size: 10.5px; font-weight: 700; }
.addr-tag.ret { background: #F1E3C4; color: #7A5A1E; }
.addr-tag.lb { background: transparent; color: #6E5A3A; box-shadow: inset 0 0 0 1px #CDBFA6; }
.addr-list { display: flex; flex-direction: column; gap: 10px; }
.addr-item { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 8px; background: var(--paper2); box-shadow: inset 0 0 0 1px #D9CBB0; }
.addr-item .acts { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.addr-pick { display: flex; flex-direction: column; gap: 10px; }
.addr-opt { display: block; width: 100%; padding: 14px; border: 0; border-radius: 8px; background: var(--paper2); box-shadow: inset 0 0 0 1px #D9CBB0; cursor: pointer; }
.addr-opt[aria-checked="true"] { box-shadow: inset 0 0 0 2px #211C19; background: #FBF7EF; }
.mk-shipto { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 8px; background: var(--paper2); box-shadow: inset 0 0 0 1px #D9CBB0; }
.mk-shipto .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mk-shipto .hd b { font-family: var(--sans); font-size: 13px; }
.mk-shipto.need { box-shadow: inset 0 0 0 2px var(--red); }
/* 글자 단추 (밑줄) */
.mk-linkbtn { background: none; border: 0; padding: 6px 0; color: #8C6B3A; font-family: var(--sans); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mk-linkbtn.danger { color: #9C2A1E; }
.addr-item .acts .mk-linkbtn, .mk-shipto .mk-linkbtn { margin: 0; }

/* ───── 여러 장 팔기 · 세트 매물 ───── */
.my-bulk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.my-bulk a { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper2); color: var(--ink); text-decoration: none; }
.my-bulk b { font-size: 14px; }
.my-bulk span { font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.sm-guide { border: 1px solid var(--line); border-radius: 8px; background: var(--paper2); padding: 10px 12px; }
.sm-guide summary { cursor: pointer; font-family: var(--sans); font-size: 13.5px; font-weight: 700; }
.sm-guide ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-family: var(--sans); font-size: 12.5px; }
.sm-guide li b { display: block; font-size: 13px; }
.sm-guide li span { color: var(--muted); }
.sm-search { width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid #B3A58E; background: var(--paper2); font-family: var(--sans); font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.sm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sm-row { border: 1px solid var(--line); border-radius: 8px; background: var(--paper2); }
.sm-row.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.sm-row.off { opacity: .6; }
.field .sm-head { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px; cursor: pointer; font-weight: 400; font-size: inherit; font-family: var(--serif); }
.sm-head input[type=checkbox] { width: 22px; height: 22px; flex: none; accent-color: #1F1B17; }
.sm-head .ph, .mk-setlist .ph { flex: none; width: 44px; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; background: linear-gradient(160deg, #E9DFCB, #DCCFB6); }
.sm-head .ph img, .mk-setlist .ph img { width: 100%; height: 100%; object-fit: cover; }
.sm-head .bd, .mk-setlist .bd { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sm-head .bd b, .mk-setlist .bd b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-extra { display: grid; gap: 8px; padding: 0 10px 10px 42px; }
.sm-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sm-price .mk-won { flex: 1 1 150px; }
.sm-price .mk-won input { height: 44px; font-size: 17px; }
.sm-photos { display: flex; gap: 8px; }
.field .sm-ph { margin: 0; font-weight: 400; }
.sm-ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 72px; height: 88px; border-radius: 6px; border: 1.5px dashed #B3A58E; font-family: var(--sans); font-size: 11.5px; color: var(--muted); overflow: hidden; cursor: pointer; }
.sm-ph .plus { font-size: 22px; line-height: 1; }
.sm-ph.has { border-style: solid; border-color: var(--ink); color: var(--ink); }
.sm-ph.has img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.sm-ph.has span { position: relative; font-weight: 700; }
.sm-foot { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 5; display: grid; gap: 6px; padding: 12px; margin: 0 -4px; border-radius: 10px; background: rgba(251,248,241,.97); border: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(30,20,12,.1); }
.sm-sum { margin: 0; font-family: var(--sans); font-size: 13.5px; font-weight: 700; }
.sm-foot .mk-err:empty { display: none; }
.sm-done h2 { margin: 6px 0; font-size: 19px; }
.sm-result { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.sm-result li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper2); }
.sm-result li.no { border-color: var(--red); }
.sm-result li b { font-size: 14px; }
.sm-result li .small { grid-column: 1; }
.sm-result li .pill { grid-column: 2; grid-row: 1 / span 2; }
.sm-done-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-tile .gr.set { background: #1F1B17; color: #E8D3A2; }
.mk-tile .ph.stack { box-shadow: 0 0 0 1px rgba(176,141,87,.45), 4px -4px 0 -1px #E4D8C2, 4px -4px 0 0 rgba(176,141,87,.5), 8px -8px 0 -1px #DCCFB6, 8px -8px 0 0 rgba(176,141,87,.4); margin: 8px 8px 0 0; }
.mk-head .tags .set { background: #1F1B17; color: #E8D3A2; font-weight: 700; }
.mk-setbox { display: grid; gap: 8px; }
.mk-setlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mk-setlist li > a, .mk-setlist.plain li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper2); color: var(--ink); text-decoration: none; }
.mk-setlist .no { flex: none; width: 22px; height: 22px; border-radius: 11px; background: #1F1B17; color: #E8D3A2; font-family: var(--sans); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mk-setlist .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.mk-setlist .tags span { padding: 1px 6px; border-radius: 3px; font-family: var(--sans); font-size: 11px; }
.mk-setlist .tags .gr { background: var(--red); color: #F6E9DC; font-weight: 700; }
.mk-setlist .tags .gr.raw { background: rgba(43,38,34,.82); }
.mk-setlist .tags .ok { background: rgba(60,110,70,.14); color: #2F5A38; }
.mk-setlist .tags .wait { background: rgba(176,141,87,.18); color: #6E5A3A; }
.mk-setlist .go { color: var(--muted); font-size: 20px; }
.mk-sets { display: grid; gap: 6px; margin: 4px 0 14px; }
.mk-sets .mk-sub small { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.mk-setrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 38%); gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; }
.mk-setrow .mk-tile { scroll-snap-align: start; }

/* ───── 공개 순간 카드 뒤로 퍼지는 빛 (등급마다 색·세기·광선) ───── */
.rv-table { position: relative; }
.rv-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: -1; }
.rv-table > .rv-holder { position: relative; z-index: 1; }
.rv-burst i { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%) scale(.2); opacity: 0; }
.rv-burst .halo { width: var(--hs, 300px); height: var(--hs, 300px); background: radial-gradient(circle, var(--c1) 0%, var(--c2) 38%, transparent 70%); animation: rvHalo .9s cubic-bezier(.2,.9,.3,1) forwards, rvBreath 2.6s ease-in-out .9s infinite; }
.rv-burst .rays { width: var(--rs, 0px); height: var(--rs, 0px); background: repeating-conic-gradient(from 0deg, var(--c1) 0deg 5deg, transparent 5deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: rvRaysIn .8s ease-out forwards, rvSpin var(--spin, 14s) linear infinite; }
@keyframes rvHalo { to { transform: translate(-50%, -50%) scale(1); opacity: var(--ho, .9); } }
@keyframes rvBreath { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.07); } }
@keyframes rvRaysIn { to { opacity: var(--ro, .6); } }
@keyframes rvSpin { from { transform: translate(-50%, -50%) rotate(0deg) scale(1); } to { transform: translate(-50%, -50%) rotate(360deg) scale(1); } }
/* 은빛 (C·주먹밥/국밥): 은은한 흰빛만 */
.rv-burst.tC, .rv-burst.tD { --c1: rgba(255,255,255,.55); --c2: rgba(220,220,230,.18); --hs: 290px; --ho: .7; }
/* 푸른빛 (B) */
.rv-burst.tB { --c1: rgba(120,175,255,.85); --c2: rgba(60,120,255,.32); --hs: 360px; --rs: 420px; --ro: .35; --spin: 22s; }
/* 붉은빛 (A) */
.rv-burst.tA { --c1: rgba(255,110,80,.95); --c2: rgba(230,50,30,.4); --hs: 420px; --rs: 520px; --ro: .55; --spin: 16s; }
/* 금빛 (S·라스트원) */
.rv-burst.tS { --c1: rgba(255,226,140,1); --c2: rgba(255,190,70,.5); --hs: 500px; --rs: 680px; --ro: .8; --spin: 10s; }
.rv-burst.tS .halo { background: radial-gradient(circle, #fff 0%, var(--c1) 18%, var(--c2) 42%, transparent 70%); }
.rv-mini.tB .rv-ph { box-shadow: 0 0 0 2px #7FB0FF, 0 0 10px rgba(90,150,255,.55); }
.rv-mini.tC .rv-ph { box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
@media (prefers-reduced-motion: reduce) { .rv-burst i { animation: rvHalo .01s forwards !important; } .rv-burst .rays { display: none; } }

/* 여러 팩 고르기: 배경 없이 보따리만 */
.rv-bundle { position: relative; aspect-ratio: 1; padding: 0; border: 0; margin-bottom: 14px; }
.rv-bundle .rv-bundle-pouch { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); transition: transform .2s; }
.rv-bundle:hover .rv-bundle-pouch, .rv-bundle:focus-visible .rv-bundle-pouch { transform: translateY(-3px) scale(1.04); }
.rv-bundle .sh-env-no { left: 50%; top: auto; bottom: -18px; transform: translateX(-50%); font-size: 14px; text-shadow: 0 1px 3px #000; }
.rv-lname .rv-year { font-weight: 700; color: #1F1B17; letter-spacing: .2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-lname .rv-year:empty { display: none; }

/* 본인인증 */
.id-ways { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; padding: 0; }
.id-ways li { padding: 6px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper2); font-family: var(--sans); font-size: 13px; font-weight: 700; }
.id-ok b, p.id-ok { color: #2F5A38; }
.id-return { display: grid; gap: 10px; justify-items: center; text-align: center; }
.id-return .btn { min-width: 160px; }
.id-ways-big { justify-content: center; margin: 18px 0 10px; }
.id-ways-big li { padding: 10px 16px; font-size: 15px; }
.id-note { margin-top: 18px; color: var(--muted); }

/* ───── 장터 팩 목록 (낮 장터 칸) ───── */
.pkd-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pkd-tile { position: relative; overflow: hidden; isolation: isolate; display: block; border-radius: 14px; text-decoration: none; color: #3A2416; background: #EFE4D2;
  box-shadow: 0 0 0 1px rgba(176,141,87,.35), 0 6px 14px -8px rgba(40,24,12,.45); }
.pkd-tile:active { transform: translateY(1px); }
.pkd-tile.paused { filter: saturate(.6); }
.pkd-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.pkd-big { grid-column: 1 / -1; aspect-ratio: 990 / 378; box-shadow: 0 0 0 2px #E2C99A, 0 0 0 3px rgba(150,110,60,.4), 0 10px 22px -10px rgba(40,24,12,.55); }
.pkd-mid { grid-column: span 3; aspect-ratio: 478 / 298; }
.pkd-sm { grid-column: span 2; aspect-ratio: 310 / 232; }
.pkd-text { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pkd-name { font-family: var(--serif); font-weight: 700; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(255,250,240,.9), 0 0 10px rgba(255,248,235,.9); }
.pkd-price { font-family: var(--serif); font-weight: 700; text-shadow: 0 1px 0 rgba(255,250,240,.9), 0 0 8px rgba(255,248,235,.9); }
.pkd-btn { margin-top: 6px; padding: 5px 14px 6px; border-radius: 999px; background: linear-gradient(180deg, #8A5A3C, #6B4128); color: #FBEFDF; font-family: var(--sans); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,230,200,.35), 0 2px 4px rgba(60,30,10,.35); white-space: nowrap; }
.pkd-big .pkd-text { right: 9%; top: 50%; transform: translateY(-50%); }
.pkd-big .pkd-name { font-size: clamp(24px, 8vw, 38px); }
.pkd-big .pkd-price { font-size: clamp(17px, 5.4vw, 26px); }
.pkd-big .pkd-btn { font-size: clamp(13px, 3.8vw, 16px); padding: 7px 22px 8px; }
.pkd-mid .pkd-text { right: 6%; bottom: 8%; }
.pkd-mid .pkd-name { font-size: clamp(17px, 5.4vw, 24px); }
.pkd-mid .pkd-price { font-size: clamp(13px, 3.9vw, 17px); }
.pkd-mid .pkd-btn { font-size: clamp(11px, 3.1vw, 13px); }
.pkd-sm .pkd-text { left: 0; right: 0; bottom: 7%; }
.pkd-sm .pkd-name { font-size: clamp(14px, 4.4vw, 18px); }
.pkd-sm .pkd-price { font-size: clamp(11px, 3.2vw, 13px); font-weight: 400; color: #5B3E2A; }
.pkd-badge { position: absolute; left: 4%; top: 7%; padding: 4px 12px 5px; border-radius: 999px; background: linear-gradient(180deg, #7A3E2A, #5C2A1A); color: #FBE7C2; font-family: var(--sans); font-size: clamp(11px, 3.2vw, 14px); font-weight: 700; box-shadow: 0 0 0 1px rgba(232,200,140,.6); }
.pkd-badge span { color: #F2C14E; }
.pkd-tag { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(40,24,12,.78); color: #FBE7C2; font-family: var(--sans); font-size: 11px; font-weight: 700; }
.pkd-info { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border-radius: 12px; background: rgba(251,248,241,.94); box-shadow: 0 0 0 1px rgba(176,141,87,.3); }
.pkd-infobtn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 4px; border: 0; background: none; color: #3A2E26; font-family: var(--sans); font-size: 13px; cursor: pointer; }
.pkd-infobtn + .pkd-infobtn { border-left: 1px solid rgba(176,141,87,.35); }
.pkd-infolist { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-family: var(--sans); font-size: 14px; line-height: 1.55; }
/* 폰 폭에 맞춘 위치 조정 */
.pkd-big .pkd-text { left: 50%; right: 15%; top: 50%; transform: translateY(-50%); }
.pkd-big .pkd-name { font-size: clamp(22px, 6.6vw, 32px); }
.pkd-big .pkd-price { font-size: clamp(15px, 4.4vw, 22px); }
.pkd-big .pkd-btn { font-size: clamp(12px, 3.4vw, 15px); padding: 6px 18px 7px; margin-top: 8px; }
.pkd-mid .pkd-text { right: 4%; bottom: 9%; left: auto; width: 44%; }
.pkd-mid .pkd-name { font-size: clamp(15px, 4.6vw, 22px); letter-spacing: 0; }
.pkd-mid .pkd-price { font-size: clamp(12px, 3.4vw, 16px); }
.pkd-mid .pkd-btn { font-size: clamp(10.5px, 2.9vw, 13px); padding: 4px 10px 5px; margin-top: 4px; }
.pkd-sm { aspect-ratio: 310 / 280; background: linear-gradient(180deg, #EADFCB, #F3EADB); }
.pkd-sm .pkd-art { height: 80%; object-position: 50% 20%; }
.pkd-sm::after { content: ''; position: absolute; left: 0; right: 0; top: 62%; height: 18%; background: linear-gradient(180deg, rgba(240,231,216,0), #F0E7D8); z-index: -1; }
.pkd-sm .pkd-text { bottom: 6%; gap: 0; }
.pkd-sm .pkd-name { font-size: clamp(14px, 4.2vw, 18px); letter-spacing: 0; }
.pkd-sm { aspect-ratio: 1 / 1; }
.pkd-sm .pkd-art { inset: 0 0 auto 0; height: auto; aspect-ratio: 310 / 232; }
.pkd-sm::after { top: 58%; height: 18%; }
.pkd-sm .pkd-text { bottom: 7%; }

/* ───── 운수대통 오리파 칸 ───── */
.un-tile { display: flex; flex-direction: column; gap: 10px; }
.un-top { display: flex; gap: 12px; align-items: stretch; }
.un-limit { align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: linear-gradient(180deg, #B4392A, #8E2A1E); color: #FBEFE2; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .3px; }
.un-last { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, #3B1F16, #5A2C1E 60%, #3B1F16); color: #F6E6C8; box-shadow: inset 0 0 0 1px rgba(230,190,120,.55), 0 4px 10px -6px rgba(40,20,10,.6); }
.un-last-th { flex: none; width: 54px; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; background: linear-gradient(160deg, #E9DFCB, #CDBB98); box-shadow: 0 0 0 2px #E8C77E, 0 0 12px rgba(232,199,126,.55); }
.un-last-th img { width: 100%; height: 100%; object-fit: cover; }
.un-last-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.un-last-k { align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: #E8C77E; color: #3B1F16; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.un-last-b b { font-size: 16px; color: #FFF3DA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.un-last-b .small { color: #E7D3AE; }
.un-last-note { font-family: var(--sans); font-size: 11.5px; color: #D8BE90; }
.op-hero b, .op-hero p { position: relative; max-width: 64%; }

/* ───── 오리파 목록 위쪽: 시안 그대로 ───── */
body.pkm .topbar { display: none; }
.pkm-head { position: relative; margin: -4px -16px -6px; }
.pkm-head img { display: block; width: 100%; height: auto; }
.pkm-hb { position: absolute; top: 28%; width: 11%; height: 60%; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.pkm-hb.back { left: 1.5%; }
.pkm-hb.help { left: 79.5%; }
.pkm-hb.hist { left: 88.5%; }
.pkm-hb:focus-visible { outline: 2px solid #8A5A3C; }
.pkm-grid { gap: 8px; }
.pkm-tile { position: relative; display: block; border-radius: 3.2vw; overflow: hidden; }
.pkm-tile img { display: block; width: 100%; height: auto; }
.pkm-tile:active { transform: translateY(1px); }
.pkm-tile.paused { filter: saturate(.6); }
.pkm-big { grid-column: 1 / -1; }
.pkm-mid { grid-column: span 3; }
.pkm-sm { grid-column: span 2; }
@media (min-width: 560px) { .pkm-tile { border-radius: 18px; } }
/* 운수대통 소개: 수묵화를 칸 전체로 펼치고 글은 칸 전체 폭으로 (왼쪽은 한지색으로 살짝 밝혀 글이 잘 보이게) */
.pk-theme .op-hero { padding: 18px 18px 20px; min-height: 150px; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(90deg, rgba(251,244,228,.92) 0%, rgba(251,244,228,.78) 45%, rgba(251,244,228,.35) 100%), url(/assets/packs/inkart.webp?v=6de173568a) right center / cover no-repeat, #F4E8CF; }
.op-hero b, .op-hero p { max-width: none; }
.pk-theme .op-hero b { font-size: 19px; }
.pk-theme .op-hero p { font-size: 13.5px; line-height: 1.65; color: #3A2E26; text-shadow: 0 0 6px rgba(251,244,228,.9); }
.pk-theme .op-hero { background: linear-gradient(90deg, rgba(251,244,228,.9) 0%, rgba(251,244,228,.84) 55%, rgba(251,244,228,.45) 85%, rgba(251,244,228,.2) 100%), url(/assets/packs/inkart.webp?v=6de173568a) right 0 top 18% / cover no-repeat, #F4E8CF; }
.pk-theme .op-hero b { text-shadow: 0 0 8px rgba(251,244,228,1), 0 0 2px rgba(251,244,228,1); }
.pk-theme .op-hero { background-blend-mode: normal; }

/* 홈: 오리파 하러가기 그림 배너 */
.op-go { display: block; margin: 4px 0 6px; border-radius: 18px; overflow: hidden; aspect-ratio: 1216 / 1180; box-shadow: 0 10px 24px rgba(60,30,8,.25); }
.op-go img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform .25s; }
.op-go:active img { transform: scale(.98); }
/* 홈 오리파 배너: 가로로 길게 (글자 + 앞줄 오리) */
.op-go { aspect-ratio: 16 / 8.4; }
.op-go img { object-position: 50% 42%; }
.op-go { aspect-ratio: 16 / 9.2; }
.op-go img { object-position: 50% 36%; }
/* 홈 오리파 배너: 가로 배너 그림 그대로 (2172 × 724) */
.op-go { aspect-ratio: 2172 / 724; border-radius: 14px; }
.op-go img { object-fit: contain; object-position: 50% 50%; }

/* ── 카드 화면: 등급별 시세 표 (판·등급을 하나로 안 골랐을 때) ── */
.mk-board .top b.sm { font-size: 20px; }
.mk-gt { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border-radius: 6px; background: var(--paper2); box-shadow: inset 0 0 0 1px var(--line); }
.mk-gt .gt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mk-gt .gt-head h3 { margin: 0; font-family: var(--serif); font-size: 16px; }
.mk-gt .gt-head span { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.mk-gt .gt-eds { display: flex; gap: 6px; }
.mk-gt .gt-eds button { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 5px; min-height: 36px; padding: 6px 8px; border-radius: 18px; border: 1px solid var(--line); background: #fff; font-family: var(--sans); font-size: 13px; color: var(--ink2); }
.mk-gt .gt-eds button small { font-size: 10.5px; color: var(--muted); }
.mk-gt .gt-eds button.on { border-color: #211C19; background: #211C19; color: #F4E7CC; }
.mk-gt .gt-eds button.on small { color: var(--gold-soft); }
.mk-gt .gt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-gt .gt-tile { --c: #B08D57; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 10px 10px 9px 13px; border-radius: 6px; border: 1px solid var(--line2); background: #fff; text-align: left; color: var(--ink); cursor: pointer; overflow: hidden; }
.mk-gt .gt-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.mk-gt .gt-tile:active { transform: scale(.98); }
.mk-gt .gt-name { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mk-gt .gt-won { font-family: var(--serif); font-size: 18px; line-height: 1.2; }
.mk-gt .gt-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: #EFE7D8; overflow: hidden; }
.mk-gt .gt-bar i { display: block; height: 100%; border-radius: 2px; background: var(--c); }
.mk-gt .gt-sub { font-family: var(--sans); font-size: 10.5px; color: var(--muted); }
.mk-gt .k-none .gt-won { font-size: 14px; color: #A89C88; }
.mk-gt .k-derived .gt-won::after { content: ' 추정'; font-family: var(--sans); font-size: 10.5px; font-weight: 400; color: var(--muted); }
.mk-gt .k-derived .gt-bar i { background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 9px); }
.mk-gt .c-raw { --c: #B08D57; }
.mk-gt .c-psa { --c: #C8102E; }
.mk-gt .c-bgsbl { --c: #1B1B1B; }
.mk-gt .c-bgsgold { --c: #C9A227; }
.mk-gt .c-bgs { --c: #3A3A3A; }
.mk-gt .c-cgc { --c: #1F4E9C; }
.mk-gt .c-brg { --c: #2E7D4F; }
.mk-gt .c-sgc { --c: #4B4B4B; }
.mk-gt .c-tag { --c: #6C3FB5; }
.mk-gt .gt-more { margin: 4px 0 0; font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--muted); }
/* 등급 칸: 시세 흐름(30일 전 대비 · 꺾은선) · 가격 알림 종 */
.mk-gt .gt-cell { position: relative; display: flex; min-width: 0; }
.mk-gt .gt-cell > .gt-tile { flex: 1; }
.mk-gt .gt-cell .gt-name { max-width: calc(100% - 20px); }
.mk-gt .gt-bell { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 15px; background: transparent; color: #A8926A; cursor: pointer; }
.mk-gt .gt-bell svg { width: 15px; height: 15px; fill: currentColor; }
.mk-gt .gt-bell:active { background: #F3EADA; color: #7A5A1E; }
.mk-gt .gt-trend { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 15px; }
.mk-gt .gt-chg { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.mk-gt .gt-chg.up { color: var(--red); }
.mk-gt .gt-chg.dn { color: #2F5C9A; }
.mk-gt .gt-spark { flex: 1; min-width: 0; height: 15px; color: #B9AC96; overflow: visible; }
.mk-gt .gt-trend.up .gt-spark { color: var(--red); }
.mk-gt .gt-trend.dn .gt-spark { color: #2F5C9A; }
.mk-gt .gt-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mk-gt .gt-note { margin: 0; font-family: var(--sans); font-size: 10.5px; color: var(--muted); }

/* 관리자 한눈에 보기 */
.adm-tabs { flex-wrap: wrap; }
.adm-tabs button { flex: 1 0 auto; padding: 0 12px; white-space: nowrap; }
.adm-pages { display: flex; flex-direction: column; gap: 18px; }
.adm-pages[hidden] { display: none; }
.ov-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ov-top .small { margin: 0; word-break: keep-all; }
.ov-top .mini { flex-shrink: 0; min-height: 36px; }
.ov-todo { padding: 14px 16px; border-radius: 10px; background: #F6E3DE; border: 1px solid #E2B7AC; font-family: var(--sans); }
.ov-todo.calm { background: #E4EFE2; border-color: #B5CFB0; }
.ov-todo h3 { margin: 0; font-size: 14px; font-weight: 700; color: #7A2A1C; }
.ov-todo.calm h3 { color: #2F5A2A; }
.ov-todo ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ov-todo li { border-top: 1px dashed #E2B7AC; }
.ov-todo li a, .ov-todo li span, .ov-todo .ov-link { display: flex; align-items: center; min-height: 40px; padding: 4px 0; font-size: 13px; color: var(--ink); text-decoration: none; }
.ov-todo .ov-link { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ov-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px 14px; border-radius: 10px; background: var(--paper2); border: 1px solid var(--line); font-family: var(--sans); }
.ov-card.wide { grid-column: 1 / -1; }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 32px; padding-bottom: 8px; border-bottom: 1px solid var(--line2); color: var(--ink); text-decoration: none; }
.ov-head h3 { margin: 0; font-family: var(--serif); font-size: 15px; font-weight: 700; }
.ov-go { font-size: 12px; color: var(--gold); font-weight: 700; white-space: nowrap; }
.ov-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.ov-card:not(.wide) .ov-stats { grid-template-columns: 1fr; }
.ov-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-num { font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--ink); letter-spacing: -0.5px; overflow-wrap: anywhere; }
.ov-stat.warn .ov-num { color: var(--red); }
.ov-label { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--ink2); }
.ov-dot { width: 7px; height: 7px; border-radius: 4px; background: var(--red); flex-shrink: 0; }
.ov-note { margin: 0; word-break: keep-all; font-size: 11px; line-height: 1.5; color: var(--muted); }
.ov-more { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-more a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid #CDBFA6; background: var(--paper2); font-family: var(--sans); font-size: 13px; color: var(--ink); text-decoration: none; }
.ov-more a::after { content: ' →'; white-space: pre; }

/* ── 시세 그래프 (눈금 · 날짜 · 누르면 말풍선) ── */
.pc { position: relative; }
.pc-svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; overflow: visible; }
.pc-svg text { font-family: var(--sans); }
.pc-tip { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 9px; border-radius: 8px; background: #211C19; color: #F4E7CC; font-family: var(--sans); white-space: nowrap; pointer-events: none; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.pc-tip small { font-size: 10.5px; color: #CFC4B2; }
.pc-tip b { font-size: 13.5px; }
.pc-tip.dark { background: #F4E7CC; color: #211C19; }
.pc-tip.dark small { color: #6E6458; }
.mk-sparkbox .ax { justify-content: center !important; }
.mk-hist .ax { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 11px; color: var(--muted); }
/* ── 감정서 확인: 직접 조회 방법 · 구매 전 확인 ── */
.mk-cert .mk-ok { padding: 2px 9px; border-radius: 10px; background: #2E6B47; color: #fff; font-family: var(--sans); font-size: 11.5px; }
.mk-cert .mk-warn { padding: 2px 9px; border-radius: 10px; background: #A63A2A; color: #fff; font-family: var(--sans); font-size: 11.5px; }
.mk-cert .no b { font-family: var(--sans); letter-spacing: .5px; }
.mk-cert-steps { margin: 0; padding: 10px 12px 10px 30px; border-radius: 6px; background: #fff; border: 1px solid var(--line2); font-family: var(--sans); font-size: 12.5px; line-height: 1.6; color: var(--ink2); }
.mk-cert-steps li + li { margin-top: 3px; }
.mk-cert-steps li:last-child { color: #A63A2A; }
.cert-gate-ack { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 6px; background: var(--paper2); border: 1px solid var(--line); font-family: var(--sans); font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.cert-gate-ack input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #211C19; }
.cert-gate-ack:has(input:disabled) { opacity: .55; }
.cert-gate-hint { margin: 6px 0 0; }

/* 관리자 오리파 만들기 (단계별) */
.wz { padding: 2px 0 110px; font-family: var(--sans); }
.wz-steps { display: flex; gap: 4px; margin: 6px 0 14px; }
.wz-steps i { flex: 1; height: 5px; border-radius: 3px; background: #E3D8C4; }
.wz-steps i.on { background: #B08D57; }
.wz-k { font-size: 12px; color: #8A6A2F; font-weight: 800; letter-spacing: .5px; }
.wz h2 { font-size: 20px; margin: 4px 0 6px; font-family: var(--serif); }
.wz .sub { font-size: 13px; color: #7A6A55; line-height: 1.55; margin: 0 0 14px; word-break: keep-all; }
.wz-kind { display: flex; flex-direction: column; gap: 10px; }
.wz-kind button { display: flex; gap: 12px; align-items: center; width: 100%; padding: 14px; border-radius: 14px; background: #fff; border: 1.5px solid #E2D6C0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.wz-kind button.on { border-color: #2B2118; box-shadow: 0 0 0 2px #2B2118 inset; background: #FFF9EC; }
.wz-kind .n { flex: none; width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; background: #2B2118; color: #E9D3A0; font-weight: 800; }
.wz-kind b { display: block; font-size: 16px; }
.wz-kind span:not(.n) { font-size: 12.5px; color: #7A6A55; }
.wz-big { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.wz-big input { flex: 1; min-width: 0; font-size: 30px; font-weight: 800; text-align: center; padding: 14px; border: 1.5px solid #D9CDB8; border-radius: 14px; background: #fff; }
.wz-big em { font-style: normal; font-size: 20px; font-weight: 800; }
.wz-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.wz-quick button { min-height: 36px; padding: 0 14px; border-radius: 18px; background: #fff; border: 1px solid #D9CDB8; font: inherit; font-size: 13px; cursor: pointer; }
.wz-quick button.on { background: #2B2118; color: #fff; border-color: #2B2118; }
.wz-tip { background: #FFF8E8; border: 1px solid #E7D3A6; border-radius: 12px; padding: 11px 13px; font-size: 13px; line-height: 1.55; margin: 10px 0; word-break: keep-all; }
.wz-cnt { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; min-height: 22px; background: var(--paper, #F4ECDD); padding: 10px 0; border-bottom: 1px solid #E2D6C0; }
.wz-cnt .bar { flex: 1; height: 8px; border-radius: 4px; background: #E3D8C4; overflow: hidden; }
.wz-cnt .bar i { display: block; height: 100%; background: #B08D57; }
.wz-cnt b { font-size: 15px; white-space: nowrap; }
.wz-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.wz-list li { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid #E6DCCB; }
.wz-list li.on { border-color: #B08D57; background: #FFF9EC; }
.wz-list img, .wz-noimg { width: 42px; height: 58px; border-radius: 4px; object-fit: cover; flex: none; background: #EFE6D3; }
.wz-list .b { flex: 1; min-width: 0; }
.wz-list .b b { display: block; font-size: 14px; }
.wz-list .b span { display: block; font-size: 12px; color: #7A6A55; }
.wz-list .b span.wz-tag { display: inline-block; }
.wz-list input[type=checkbox], .wz-list input[type=radio] { width: 22px; height: 22px; flex: none; accent-color: #2B2118; }
.wz-pr { flex: none; width: 112px; }
.wz-pr input { width: 100%; padding: 9px 8px; border: 1px solid #D9CDB8; border-radius: 9px; font-size: 14px; text-align: right; background: #fff; box-sizing: border-box; }
.wz-pr input.ed { border-color: #A63A2A; background: #FFF4F1; }
.wz-pr small { display: block; font-size: 10.5px; color: #A63A2A; text-align: right; margin-top: 2px; min-height: 1px; }
.wz-tag { font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: #2B2118; color: #E9D3A0; margin-left: 4px; vertical-align: 1px; }
.wz-sum { background: #fff; border: 1px solid #E2D6C0; border-radius: 14px; padding: 14px; margin: 12px 0; }
.wz-sum .row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 5px 0; }
.wz-sum .row span { color: #6B5C48; }
.wz-sum .row.m b { color: #A63A2A; white-space: nowrap; }
.wz-sum .row.t { border-top: 1px solid #E6DCCB; margin-top: 6px; padding-top: 10px; font-size: 17px; }
.wz-sum .row.t b { color: #1E7A3A; font-size: 20px; white-space: nowrap; }
.wz-sum .row.t.loss b { color: #C8102E; }
.wz-sum .row.big b { font-size: 20px; }
.wz-btns { display: flex; gap: 8px; margin-top: 14px; }
.wz-btns button { flex: 1; min-height: 52px; padding: 0 10px; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 800; border: 1.5px solid #2B2118; background: #fff; color: #2B2118; cursor: pointer; }
.wz-btns button.k { flex: 1.6; background: #2B2118; color: #fff; }
.wz-btns button.go { flex: 1.6; background: #A63A2A; border-color: #A63A2A; color: #fff; }
.wz-btns button:disabled { opacity: .45; cursor: default; }
.wz-back { margin-top: 10px; padding: 8px 0; border: 0; background: none; font: inherit; font-size: 13px; color: #7A6A55; text-decoration: underline; cursor: pointer; }
.wz-add { display: flex; gap: 8px; margin: 8px 0; }
.wz-add .btn { flex: 1; }
.wz-filter { display: flex; gap: 6px; overflow-x: auto; margin: 8px 0; }
.wz-filter button { flex: none; min-height: 32px; font: inherit; font-size: 12px; padding: 0 10px; border-radius: 14px; background: #fff; border: 1px solid #E2D6C0; cursor: pointer; }
.wz-filter button.on { border-color: #B08D57; color: #8A6A2F; font-weight: 700; }
.wz-ok { font-size: 13px; color: #1E7A3A; font-weight: 700; }
.wz-warn { font-size: 13px; color: #A63A2A; font-weight: 700; margin: 6px 0; word-break: keep-all; }
.wz-warn.big { font-size: 14.5px; padding: 10px 12px; border-radius: 10px; background: #FBE9E5; border: 1px solid #E8B8AC; }
.wz-done { display: flex; flex-direction: column; gap: 10px; padding: 22px 16px; border-radius: 14px; background: #fff; border: 1px solid #E2D6C0; text-align: center; }
.wz-done b { font-size: 18px; }
/* 무한 오리파 준비 중 */
.ob.ob-soon { pointer-events: none; filter: grayscale(.75) brightness(.78); }
.ob-soon .ob-go { background: rgba(0, 0, 0, .45) !important; color: #ddd !important; }
.ob-ribbon { position: absolute; z-index: 6; top: 14px; right: -38px; transform: rotate(35deg); background: #A63A2A; color: #fff; font: 800 13px/1 var(--sans); letter-spacing: 2px; padding: 8px 46px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.ob-soonbox { margin: 18px 0; padding: 22px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line2); text-align: center; }
.ob-soonbox b { display: block; font-size: 19px; margin: 10px 0 6px; }
.ob-soonbox .pill-soon { display: inline-block; padding: 5px 12px; border-radius: 14px; background: #A63A2A; color: #fff; font-size: 12px; font-weight: 700; }
.wz-sugbox { margin: 2px 0 6px; }
.wz-sug { width: 100%; min-height: 44px; border-radius: 12px; border: 1.5px dashed #B08D57; background: #FFF9EC; color: #6B4E1F; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.wz-open { margin: 6px 0 4px; }
.wz-open input[type=datetime-local] { width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid #D9CDB8; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; box-sizing: border-box; }
/* 최근 본 카드 */
.rc-sec .rc-clear { border: 0; background: none; padding: 6px 4px; font: inherit; cursor: pointer; }
.rc-row .rc-card .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-countrow + .rc-sec, .rc-sec + .mk-row { margin-top: 10px; }
/* 설정: 내 회원 ID */
.mk-idrow { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); }
.mk-idrow > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mk-myid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; user-select: all; -webkit-user-select: all; color: var(--ink); }
.mk-idrow .mini { flex: none; width: auto; min-height: 40px; margin: 0; padding: 0 16px; }
.mk-setsec .mk-idrow { align-items: flex-start; }

/* 오리파 다음 일정 (완판 · 개봉 끝 · 열린 방이 없을 때) */
.nx-box { margin: 10px 0 4px; padding: 14px 14px 12px; border-radius: 14px; background: linear-gradient(180deg, #FFF9EC, #FFF3DC); border: 1.5px solid #E2C68C; font-family: var(--sans); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.nx-k { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #fff; background: #A63A2A; padding: 4px 10px; border-radius: 12px; }
.nx-box b { font-size: 19px; color: #2B2118; word-break: keep-all; }
.nx-memo { font-size: 13px; color: #6B5434; }
.nx-cd { font-size: 13px; font-weight: 800; color: #A63A2A; font-variant-numeric: tabular-nums; }
.nx-none { font-size: 13px; color: #7A6A55; }
.nx-btn { margin-top: 4px; min-height: 44px; border-radius: 12px; border: 1.5px solid #2B2118; background: #2B2118; color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.nx-btn.on { background: #fff; color: #2B2118; }
.nx-btn:disabled { opacity: .6; }
.ob-line.nx-line { font-weight: 800; color: #A63A2A; }
.nx-adm .nx-row2 { display: flex; gap: 8px; }
.nx-adm .nx-row2 > * { flex: 1; min-width: 0; }
.nx-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nx-list li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #FAF5EA; font-size: 13.5px; }
.nx-list li > span:not(.nx-tag) { flex: 1; min-width: 0; }
.nx-tag { flex: none; white-space: nowrap; font-size: 11px; padding: 2px 7px; border-radius: 7px; background: #2B2118; color: #E9D3A0; }
.nx-link { flex: none; border: 0; background: none; color: #A63A2A; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px 2px; }

/* 오리파 만 19세 이상 */
.pkm-head .pkm-19 { position: absolute; left: calc(50% + 58px); top: 50%; transform: translateY(-50%); z-index: 5; font-family: var(--sans); font-size: 10.5px; font-weight: 800; color: #fff; background: #A63A2A; padding: 3px 7px; border-radius: 999px; pointer-events: none; }
.op-adult { margin: 10px 0 12px; padding: 14px; border-radius: 14px; background: #FFF0EC; border: 1.5px solid #E2A08C; font-family: var(--sans); display: flex; gap: 12px; align-items: flex-start; }
.op-adult i { font-style: normal; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #A63A2A; color: #fff; font-weight: 900; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.op-adult b { display: block; font-size: 15px; color: #2B2118; }
.op-adult p { margin: 4px 0 0; font-size: 13px; color: #6B5434; line-height: 1.45; word-break: keep-all; }
.op-shopbtn.locked, .pk-buy:disabled.locked { background: #B9AC98; box-shadow: none; color: #4A3D2E; }

/* 관리자: 회원 찾기 · 포인트 주기·빼기 */
.pm-srch { display: flex; gap: 8px; margin: 6px 0 4px; }
.pm-srch input { flex: 1; min-width: 0; width: auto; }
.pm-srch .btn { flex: none; width: auto; padding: 0 18px; }
.pm-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pm-list li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: #FFFBF2; border: 1.5px solid #E5D6B8; font-family: var(--sans); cursor: pointer; }
.pm-list li.on { border-color: #A63A2A; box-shadow: 0 0 0 2px #A63A2A inset; background: #FFF3DC; }
.pm-av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #2B2118; color: #E9D3A0; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.pm-m { flex: 1; min-width: 0; }
.pm-m > b { display: block; font-size: 15px; color: #2B2118; }
.pm-m > span { display: block; font-size: 12px; color: #7A6A55; margin-top: 2px; overflow-wrap: anywhere; }
.pm-tag { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: #E7F3E6; color: #2F6B2C; margin-left: 4px; vertical-align: 1px; }
.pm-tag.no { background: #F1E6D2; color: #7A5A3A; }
.pm-pt { flex: none; font-weight: 800; color: #A63A2A; font-size: 14px; }
.pm-sel { margin-top: 14px; padding: 14px; border-radius: 14px; background: #fff; border: 1.5px solid #D9C7A8; font-family: var(--sans); display: flex; flex-direction: column; gap: 8px; }
.pm-sel h3 { margin: 0; font-size: 16px; }
.pm-bal { font-size: 22px; font-weight: 900; color: #2B2118; }
.pm-quick { display: flex; gap: 6px; }
.pm-quick button { flex: 1; min-height: 40px; border-radius: 10px; border: 1.5px solid #D9C7A8; background: #FFFBF2; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.pm-quick button.neg { color: #A63A2A; }

/* 개인정보 제3자 제공 동의 창 */
.tc-body .tc-lead { margin: 0 0 12px; font-weight: 500; }
.tc-rows { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0 0 12px; padding: 12px; border: 1px solid var(--line, #d8ccb4); border-radius: 10px; }
.tc-rows dt { color: var(--sub, #6b5d4a); font-size: 13px; }
.tc-rows dd { margin: 0; font-size: 14px; }
.pol-biz { margin-top: 24px; opacity: .8; }

/* 확률표 (한정 · 모이면 출발) */
.od-box { margin: 16px 0; padding: 14px; border: 1px solid #d9ccb3; border-radius: 14px; background: #fbf6ec; }
.od-box .tool-h { margin: 0 0 2px; }
.od-sub { margin: 0 0 6px; }
.od-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.od-tbl th { text-align: left; font-size: 12px; font-weight: 500; color: #7a6a55; padding: 6px 4px; border-bottom: 1px solid #d9ccb3; }
.od-tbl td { padding: 8px 4px; border-bottom: 1px dashed #e3d8c3; }
.od-tbl .od-p { font-weight: 700; }
.od-tier { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: #efe4cf; color: #3b2f22; }
.od-tier.tS { background: linear-gradient(135deg, #E85D75, #E89A00, #3BA7E0); color: #fff; }
.od-tier.tA { background: #B23A2B; color: #fff; }
.od-tier.tB { background: #2457C5; color: #fff; }
.od-note { margin: 8px 0 0; }
.op-cell .tier { font-size: 10px; }

/* 홈 메뉴: 화면보다 길면 안에서 스크롤 (위 '메뉴'·닫기가 잘리지 않게) · 목록형 */
.sheet-short { max-height: 88dvh; }
.sheet-short .body { gap: 0; padding: 4px 20px calc(16px + env(safe-area-inset-bottom)); }
.mn-g { margin: 14px 0 2px; font-family: var(--sans); font-size: 12px; color: #7a6a55; }
.sheet .body p.mn-g { font-size: 12px; color: #7a6a55; }
.mn-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink, #2B2622); text-decoration: none; }
.mn-row::after { content: '›'; font-size: 20px; color: #a08f78; }
.mn-acc { display: flex; justify-content: center; gap: 22px; margin-top: 18px; }
.mn-acc a, .mn-acc button { border: 0; background: none; padding: 6px; font: inherit; font-size: 13.5px; color: #7a6a55; text-decoration: underline; cursor: pointer; }

/* 내 자산 요약: 숫자와 꼬리표가 길면 다음 줄로 (카드 밖으로 넘치지 않게) */
.ledger .top { flex-wrap: wrap; }
.ledger .rate { flex-shrink: 1; min-width: 0; max-width: 100%; margin-left: auto; }
.ledger .rate .wait { white-space: normal; }