/* 디자인 토큰 — 단일 선언.
   v0050: 청록(slate) 계열 → 오크·호박 계열로 전환.
   위스키·전통주 사진이 전부 따뜻한 색인데 크롬이 차가운 청록이라 서로 싸웠다.
   갈색으로 전면을 덮으면 촌스러워지므로, 중성색의 언더톤만 데우고
   포인트는 기존 gold 하나로 유지한다. 되돌리려면 아래 주석의 구 값으로 교체.

   구 값(v0049): --navy:#181310 --navy2:#221a15 --slate:#5a4132 --slate2:#3d2b20
                 --slate-l:#d9bf9f --bg:#faf9f7 --paper2:#f4f3f0 --ink:#141a20
                 --ink2:#5a6570 --ink3:#93a0a9 --line:#e8e6e1 --rust:#b8483a  */
:root{
  /* 어두운 면 — 청색 언더톤 → 에스프레소. 거의 검정이라 촌스럽지 않으면서 사진이 산다 */
  --navy:#181310; --navy2:#221a15;
  /* 크롬(네비·버튼) — 오크통 */
  --slate:#5a4132; --slate2:#3d2b20; --slate-l:#d9bf9f;
  /* 지면 — 미색 종이 */
  --paper:#fff; --paper2:#f4f0e9; --paper3:#ebe5da;
  --bg:#faf8f4; --card:#ffffff;
  /* 글자 — 완전 무채색보다 아주 살짝 따뜻하게 (가독성은 유지) */
  --ink:#1a1613; --ink2:#5d5348; --ink3:#98897b;
  --line:#e9e3d9; --line2:#f2ede4;
  /* 포인트 — 위스키 호박색 + 구리 */
  --rust:#b0472e; --gold:#d8a449;
  --up:#2e8b62; --down:#c4452f;
  --r-sm:10px; --r:14px; --r-lg:18px;
  --sh-1:0 1px 2px rgba(28,20,14,.05);
  --sh-2:0 6px 20px rgba(28,20,14,.09);
  --sh-3:0 20px 50px rgba(28,20,14,.16);
  --w:1120px;
  --thumb:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere;font-feature-settings:"ss05","tnum";font-size:15px;line-height:1.5;letter-spacing:-.012em;min-height:100dvh}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
input,textarea{font:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 22px}
.eyebrow{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 95;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--ink3)}
.h{font-family:"Wanted Sans Variable","Wanted Sans",Pretendard,sans-serif;font-weight:760;letter-spacing:-.045em;line-height:1.08}
.t{font-family:"Wanted Sans Variable","Wanted Sans",Pretendard,sans-serif;font-weight:780;letter-spacing:-.04em;line-height:1.1}
.mono{font-family:"Pretendard Variable",Pretendard,sans-serif;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.num{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 78;font-weight:750;letter-spacing:-.03em;font-feature-settings:"tnum"}
.img{display:flex;align-items:center;justify-content:center}
.img img{max-height:100%;max-width:100%;object-fit:contain}
.btn{height:54px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;letter-spacing:-.02em;padding:0 22px}
.btn.scan{background:var(--rust);color:#fff;box-shadow:0 10px 30px rgba(184,72,58,.35)}
.btn.scan svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.btn.ghost{background:#fff;color:var(--navy)}
.btn.line{border:1.5px solid var(--line);background:#fff;color:var(--ink)}
/* ---------- age ---------- */
.age{position:fixed;inset:0;background:var(--navy);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;color:#fff}
.age.off{display:none}
.age-box{max-width:360px;width:100%}
.age-box .eyebrow{color:var(--gold)}
.age-box h2{font-family:"Wanted Sans Variable",Pretendard,sans-serif;font-size:32px;font-weight:800;letter-spacing:-.045em;line-height:1.08;margin-top:12px}
.age-box p{color:#cfbfa9;margin-top:14px;line-height:1.6}
.age-box button{display:block;width:100%;height:54px;background:var(--rust);color:#fff;border-radius:8px;font-weight:700;font-size:15.5px;margin-top:24px}
.age-box a{display:block;text-align:center;color:#c9b6a1;font-size:13px;margin-top:14px}
/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:10;background:var(--slate);color:#fff;padding:calc(12px + env(safe-area-inset-top)) 0 12px;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.nav .row{display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:9px;flex:none}.logo .mk{width:32px;height:32px;border-radius:9px;background:#fff;align-items:center;justify-content:center}
.logo .mk svg{width:19px;height:19px;stroke:var(--slate);fill:none;stroke-width:2.2}.nav .links{display:none;gap:22px;font-size:14px;font-weight:600;color:#ece3d6;margin-left:10px}
.nav .links a:hover{color:#fff}
.nav .row .srch{display:none}
.nav .cta{display:none;height:40px;padding:0 16px;background:var(--rust);color:#fff;border-radius:8px;align-items:center;gap:8px;font-size:14px;font-weight:700;flex:none}
.nav .cta svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}.srch{height:48px;background:#fff;border-radius:8px;display:flex;align-items:center;padding:0 5px 0 14px;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.srch svg.s{width:19px;height:19px;stroke:var(--ink3);fill:none;stroke-width:2;flex:none}
.srch input{flex:1;border:0;outline:0;font-size:15px;color:var(--ink);min-width:0;background:transparent}
.srch .go{height:38px;padding:0 14px;background:var(--navy);color:#fff;border-radius:6px;display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;flex:none}
.srch .go svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.srch.m{margin-top:12px}
/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;padding:40px 0 0;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:radial-gradient(80% 60% at 100% 0%, rgba(216,164,73,.18), transparent 60%),linear-gradient(180deg,#181310 0%,#121c28 70%,#181310 100%)}
.hero .wrap{position:relative;display:flex;flex-direction:column}
.hero .pick{order:3}
.hero .eyebrow{color:#a89685;font-size:10.5px;letter-spacing:.26em}.hero h1{margin-top:16px;font-size:38px;max-width:340px;font-weight:760;letter-spacing:-.045em}
.hero h1 em{font-style:normal;color:var(--gold)}.hero h1 .en{display:block;font-family:Archivo,sans-serif;font-variation-settings:"wdth" 70;font-weight:800;font-size:52px;letter-spacing:-.015em;text-transform:uppercase;line-height:.9;margin-top:8px}
.hero p{margin-top:14px;font-size:14.5px;line-height:1.7;color:#c3b19b;max-width:340px;font-weight:430}
.hero .cta{margin-top:22px;display:flex;gap:10px}
.hero .cta .btn{flex:1 1 0;min-width:0;height:54px;white-space:nowrap}
.hero .herosearch{display:none}
.stats div b{display:block;font-family:Archivo;font-variation-settings:"wdth" 84;font-size:30px;font-weight:650;line-height:1;letter-spacing:-.02em;font-feature-settings:"tnum"}
.stats div span{display:block;font-size:12px;color:#c9b6a1;margin-top:6px}
/* pick */
.pick{margin:0;position:relative;z-index:2;background:#111a25;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px 18px 18px;color:#fff;box-shadow:0 40px 70px rgba(0,0,0,.45);display:block}
.pick .eyebrow{color:var(--gold)}
.pick .img{height:220px;margin-top:6px;position:relative}
.pick .img{background:linear-gradient(180deg,#fff,#f3f1ec);border-radius:12px;padding:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.pick .img img{position:relative;filter:drop-shadow(0 12px 16px rgba(0,0,0,.18));mix-blend-mode:multiply}
.pick h2{font-size:23px;margin-top:8px;font-weight:740;letter-spacing:-.035em}.pick .meta{font-size:13px;color:#c9b6a1}
.pick .sc{display:flex;justify-content:space-between;align-items:flex-end;margin-top:16px}
.pick .sc .r{display:flex;align-items:baseline;gap:8px}
.pick .sc .r b{font-family:Archivo;font-variation-settings:"wdth" 84;font-weight:650;font-size:32px;color:var(--slate-l);line-height:1;letter-spacing:-.02em}
.pick .sc .r span{font-size:12px;color:#c9b6a1}
.pick .sc .p{text-align:right}
.pick .sc .p b{display:block;font-size:23px;font-weight:600;line-height:1}
.pick .sc .p small{display:block;font-size:11.5px;color:var(--down);font-weight:700;margin-top:5px}
.pick .b{margin-top:16px;height:50px;background:#fff;color:var(--navy);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
/* ---------- sections ---------- */
.sec{padding:44px 0 0}
.sec .eyebrow{color:var(--rust)}
.sec h3{font-size:27px;margin-top:8px;font-weight:740;letter-spacing:-.04em}
.sec p{font-size:14.5px;color:var(--ink2);line-height:1.62;margin-top:10px;font-weight:450;max-width:560px}
.sec .more{display:none;height:40px;padding:0 16px;border:1.5px solid var(--rust);color:var(--rust);border-radius:6px;align-items:center;font-weight:700;font-size:13.5px;flex:none}
.chips{display:flex;gap:8px;margin:18px -22px 0;padding:0 22px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;padding:11px 16px;border-radius:999px;border:1.5px solid var(--line);font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.015em;background:#fff}
.chips button.on{background:var(--slate);border-color:var(--slate);color:#fff}
.cards{display:flex;gap:12px;margin:16px -22px 0;padding:4px 22px 10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.cards::-webkit-scrollbar{display:none}
.card{flex:0 0 300px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px 18px;display:flex;gap:16px;align-items:center;position:relative;box-shadow:0 1px 2px rgba(17,24,32,.04);transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(17,24,32,.1)}
.card .img{width:92px;height:160px;flex:none}
.card .img img{filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}
.card .tx{flex:1;min-width:0}.card .tx .eyebrow{color:var(--ink3);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.card .tx b{display:block;font-size:18px;font-weight:740;letter-spacing:-.035em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card .tx span{display:block;font-size:12.5px;color:var(--ink2)}
.card .sc{margin-top:14px;display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.card .sc b{font-family:Archivo;font-variation-settings:"wdth" 84;font-weight:650;font-size:26px;color:var(--slate);line-height:1;margin:0;letter-spacing:-.02em}
.card .sc span{font-size:11.5px;color:var(--ink3);margin:0}
.card .sc .pr{font-style:normal;margin-left:auto;font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.card .nr{position:absolute;left:14px;top:12px;font-family:Archivo;font-variation-settings:"wdth" 84;font-weight:700;font-size:13px;color:var(--ink3);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper2)}
.cards .card:nth-child(-n+3) .nr{background:var(--ink);color:#fff}
/* live (dark) */
.live{margin-top:44px;background:var(--navy);color:#fff;padding:40px 0 44px;position:relative;overflow:hidden}
.live::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 0% 100%, rgba(65,96,111,.35), transparent 70%)}
.live .wrap{position:relative}
.live .head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.live .eyebrow{color:var(--slate-l);display:flex;align-items:center;gap:9px}
.live .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 4px rgba(46,166,111,.25)}
.live h3{font-size:30px;margin-top:10px}
.live p{font-size:14.5px;color:#cfbfa9;line-height:1.62;margin-top:10px;font-weight:450;max-width:520px}
.live .more{display:none;height:44px;padding:0 18px;background:#fff;color:var(--navy);border-radius:8px;align-items:center;font-weight:700;font-size:14px;flex:none}
.feed{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.f{background:#1a2430;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 14px;display:flex;gap:14px;align-items:center}
.f .img{width:52px;height:66px;flex:none;background:#fff;border-radius:8px;padding:4px}
.f .tx{flex:1;min-width:0}
.f small{display:block;font-size:11.5px;color:var(--up);font-weight:700}
.f b{display:block;font-size:15px;font-weight:700;letter-spacing:-.025em;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f span{display:block;font-size:15px;color:#e2d6c6;margin-top:3px}
.f span em{font-style:normal;color:var(--down);font-weight:700;margin-left:7px;font-family:"Pretendard Variable";font-size:12px}
.live .stats{margin-top:34px;padding:28px 0 0;border-top:1px solid rgba(255,255,255,.12)}
/* join */
.join{background:#0b0907;color:#fff;padding:44px 0 56px;position:relative;overflow:hidden}
.join::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 45% at 30% 100%, rgba(216,164,73,.2), transparent 70%)}
.join .wrap{position:relative}
.join .eyebrow{color:var(--gold)}
.join h3{font-size:32px;margin-top:10px}
.join p{font-size:14.5px;color:#b3aca2;line-height:1.62;margin-top:12px;font-weight:450;max-width:560px}
.feat{margin-top:22px;display:grid;gap:10px}
.feat>div{border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:20px;background:rgba(255,255,255,.02)}
.feat .ico{width:42px;height:42px;border-radius:10px;background:#1d1811;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.feat .ico svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.8}
.feat b{display:block;font-size:19px}
.feat span{display:block;font-size:13.5px;color:#b3aca2;line-height:1.58;margin-top:6px;font-weight:450}
.join .b{margin-top:22px;height:54px;background:var(--rust);color:#fff;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;padding:0 26px;width:100%}
/* ---------- list ---------- */
.list{padding:16px 0 40px;display:grid;gap:8px}
.li{display:grid;grid-template-columns:var(--thumb) 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);transition:border-color .15s}
.li:hover{border-color:var(--slate-l)}
.li .img{width:52px;height:66px}
.li .n{font-family:Archivo;font-variation-settings:"wdth" 80;font-weight:750;font-size:18px;color:var(--ink3);width:26px;text-align:center}
.li.rank{grid-template-columns:26px var(--thumb) 1fr auto}
.li.rank:nth-child(-n+3) .n{color:var(--rust)}.li b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em}.li .m{font-size:11.5px;color:var(--ink3)}
.li .p{text-align:right}
.li .p em{display:block;font-style:normal;font-family:"Pretendard Variable",Pretendard,sans-serif;font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;letter-spacing:-.03em}
.li .p small{display:block;font-size:11px;color:var(--ink3);margin-top:2px}
.li .p .sc{font-family:Archivo;font-variation-settings:"wdth" 78;font-weight:750;font-size:22px;color:var(--slate);line-height:1}
.page{padding-top:22px}
.page h2{font-size:28px;margin-top:8px}.page>p{margin-top:8px;font-size:14.5px}
/* ---------- bottle ---------- */
.bt-hero{background:var(--navy);color:#fff;padding:18px 0 24px;position:relative;overflow:hidden}
.bt-hero .bg{position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 30%, rgba(216,164,73,.22), transparent 65%)}
.bt-hero .wrap{position:relative}
.bt-hero .back{font-size:13px;color:#c9b6a1;display:inline-flex;gap:6px;align-items:center}
.bt-hero .grid{display:grid;gap:10px}
.bt-hero .img{height:260px;margin-top:8px}
.bt-hero .img img{filter:drop-shadow(0 26px 30px rgba(0,0,0,.65))}
.bt-hero h1{font-size:28px;margin-top:10px}.bt-hero .meta{font-size:13px}.bt-hero .row{display:flex;justify-content:space-between;align-items:flex-end}
.bt-hero .score b{font-size:42px;color:var(--slate-l);line-height:1}
.bt-hero .score span{font-size:12px;color:#c9b6a1;margin-left:8px}
.bt-hero .price{text-align:right}
.bt-hero .price b{display:block;font-size:28px;font-weight:700;line-height:1;letter-spacing:-.03em}
.bt-hero .price small{display:block;font-size:11.5px;color:#c9b6a1;margin-top:5px}.bt-act{display:flex}
.bt-act button,.bt-act a{flex:1;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.bt-act .p{background:var(--rust);color:#fff;border-color:var(--rust)}
.bt-act .on{background:var(--gold);border-color:var(--gold);color:#1c1206}
.bt-body{display:grid;gap:0}
.receipt{margin-top:28px}.receipt h4{font-variation-settings:"wdth" 95;font-weight:650;padding-bottom:8px;border-bottom:1.5px dashed var(--line)}
.rl{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed var(--line);color:inherit}
.rl:hover{background:var(--paper2)}
.rl .amt em{font-style:normal;color:var(--ink3);margin-left:6px;font-size:12px}
.rl .nm{display:flex;flex-direction:column;gap:2px;min-width:0}
.rl .nm span{font-size:11.5px;color:var(--ink3)}
.rl .nm i{font-style:normal;display:inline-block;padding:1px 6px;border-radius:4px;background:var(--paper2);font-size:10.5px;font-weight:700;color:var(--ink2);margin-right:5px}
.rl .amt{font-family:"Pretendard Variable",Pretendard,sans-serif;font-variant-numeric:tabular-nums;font-size:16px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.rl .amt.best{color:var(--up);font-weight:600}
.spark{width:100%;height:60px;margin-top:14px}
.spark polyline{fill:none;stroke:var(--slate);stroke-width:2;stroke-linejoin:round}
.rate{margin-top:28px;padding:18px;border-radius:14px;background:var(--paper2)}.rate .sl{display:flex;align-items:center;gap:14px;margin-top:12px}
.rate input[type=range]{flex:1;accent-color:var(--slate)}
.rate .v{font-family:Archivo;font-variation-settings:"wdth" 78;font-weight:750;font-size:34px;color:var(--slate);width:64px;text-align:right}.rate textarea{background:#fff}.wb a.link{display:inline-flex;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--slate);gap:6px}
/* ---------- scan ---------- */
.scan{padding:22px 0 40px}
.scan h2{font-size:28px}
.scan p{color:var(--ink2);margin-top:8px;font-size:14.5px;line-height:1.6}
.scan .grid{display:grid;gap:18px}.drop{margin-top:18px;border:2px dashed var(--line);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink2);position:relative;overflow:hidden;background:var(--paper2)}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.drop svg{width:40px;height:40px;stroke:var(--ink3);fill:none;stroke-width:1.6}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.scan .go{margin-top:14px;height:54px;width:100%;background:var(--rust);color:#fff;border-radius:8px;font-weight:700;font-size:15.5px}
.scan .go:disabled{opacity:.5}
.cand{margin-top:22px}
.cand .eyebrow{margin-bottom:10px}
.cand .li{margin-bottom:8px}
.cand .vis{font-size:12.5px;color:var(--ink2);background:var(--paper2);padding:10px 12px;border-radius:8px;margin-bottom:12px;font-family:"Pretendard Variable",Pretendard,sans-serif;font-variant-numeric:tabular-nums;line-height:1.5}
/* ---------- cabinet ---------- */
.cab{padding:22px 0 40px}
.cab .sum{background:var(--navy);color:#fff;border-radius:14px;padding:18px;margin-top:16px}
.cab .sum .eyebrow{color:var(--gold)}
.cab .sum b{display:block;font-size:36px;margin-top:8px;line-height:1}
.cab .sum span{display:block;font-size:12.5px;color:#c9b6a1;margin-top:6px}
.empty{padding:60px 22px;text-align:center;color:var(--ink3);font-size:14px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:13.5px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;z-index:50;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%)}
.skel{background:linear-gradient(90deg,#eee,#f6f6f6,#eee);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}
.foot{background:#0b0907;color:#8f8a82;font-size:12.5px;padding:40px 0 48px}
.foot .wrap{display:grid;gap:24px}
.foot b{font-family:Archivo;font-variation-settings:"wdth" 85;font-weight:800;font-size:14px;color:#9b9388;letter-spacing:.1em;display:block}
.foot .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.foot .cols div{display:flex;flex-direction:column;gap:8px}
.foot .cols strong{color:#d5cec4;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-family:Archivo;font-weight:700}
.foot .cols a:hover{color:#fff}
.foot .legal{border-top:1px solid rgba(255,255,255,.08);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11.5px}

/* =================== DESKTOP =================== */
@media (min-width:900px){
  body{font-size:15.5px}
  .nav{padding:14px 0}
  .nav .links{display:flex}.nav .row .srch{display:flex;max-width:420px;height:42px;margin-left:auto;box-shadow:none;border:1px solid rgba(255,255,255,.15);background:#fff}
  .nav .cta{display:flex}  .srch.m{display:none}
  .hero{padding:64px 0 0}
  .hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
  .hero .pick{order:0}  .hero h1{font-size:50px;max-width:560px;line-height:1.06}  .hero p{font-size:16px;max-width:500px;margin-top:16px}
  .hero .cta{display:none}
  .hero .herosearch{display:flex;margin-top:22px;max-width:520px;height:56px;background:#fff;border-radius:8px;align-items:center;padding:0 6px 0 18px;gap:12px}
  .hero .herosearch input{flex:1;border:0;outline:0;font-size:15.5px;color:var(--ink);background:transparent;min-width:0}
  .hero .herosearch button{height:44px;padding:0 22px;background:var(--rust);color:#fff;border-radius:6px;font-weight:700;font-size:14.5px}
  .stats{grid-column:1/-1;margin-top:40px;padding:28px 0 48px;border-top:1px solid rgba(255,255,255,.1);gap:64px}
  .stats div b{font-size:38px}
  .pick{margin:0;grid-column:2;grid-row:1;align-self:start;max-width:420px;justify-self:end;width:100%}
  .pick .img{height:260px}
  .sec{padding:72px 0 0}
  .sec h3{font-size:34px}
  .sec .more{display:inline-flex}
  .chips{margin:22px 0 0;padding:0;overflow:visible;flex-wrap:wrap}.cards{display:grid;margin:22px 0 0;padding:0;overflow:visible}
  .cards .card{flex:none;width:auto}
  .cards .card:nth-child(n+7){display:none}
  .card .img{width:92px;height:150px}
  .card .tx b{font-size:18px}
  .card .sc b{font-size:26px}
  .card .sc{padding-right:0}
  .live{margin-top:72px;padding:72px 0}
  .live h3{font-size:40px}
  .live .more{display:inline-flex}
  .feed{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
  .feed .f:nth-child(n+7){display:none}
  .live .stats{display:none}
  .join{padding:72px 0 80px}
  .join h3{font-size:44px}
  .feat{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
  .join .b{width:auto}
  .list{grid-template-columns:1fr;gap:0;padding:18px 0 56px;border-top:1px solid var(--line)}  .page h2{font-size:40px}
  .bt-hero{padding:32px 0 44px}.bt-hero .grid{align-items:center;margin-top:16px}.bt-hero .img{margin:0}
  .bt-hero h1{font-size:44px;margin-top:0}
  .bt-hero .meta{font-size:15px}
  .bt-hero .row{margin-top:28px;justify-content:flex-start;gap:56px}
  .bt-hero .price{text-align:left}
  .bt-hero .score b{font-size:56px}
  .bt-act{max-width:420px;margin-top:28px}.bt-body{align-items:start}
  .bt-body .side{margin-top:28px}
  .rate{margin-top:0}
  .wb{margin-top:16px}
  .scan .grid{grid-template-columns:460px 1fr;gap:40px;align-items:start}
  .drop{height:420px}
  .cand{margin-top:0}
  .cab .sum{display:flex;align-items:baseline;gap:28px;padding:24px 28px}
  .cab .sum b{margin-top:0}
  .foot{padding:56px 0}
  .foot .wrap{grid-template-columns:1fr 2fr;gap:48px}
  .foot .cols{grid-template-columns:repeat(4,1fr)}
  .foot .legal{grid-column:1/-1}
}

/* ===== v0002 ===== */
/* autocomplete */
.srch{position:relative}
.srch,.herosearch,.srch.m{position:relative}
.ac{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.28);z-index:60;color:var(--ink);display:none;max-height:min(60vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ac.on{display:block}
.ac .g{padding:10px 14px 4px;font-family:Archivo;font-variation-settings:"wdth" 95;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);font-weight:650;border-top:1px solid var(--line)}
.ac .g:first-child{border-top:0}
.ac a{display:flex;align-items:center;gap:12px;padding:8px 14px}
.ac a:hover{background:var(--paper2)}
.ac .th{width:36px;height:40px;border-radius:6px;background:var(--paper2);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.ac .th img{max-height:36px;max-width:32px}
.ac b{display:block;font-size:14px;font-weight:700;letter-spacing:-.02em}
.ac span{display:block;font-size:11.5px;color:var(--ink2);margin-top:1px}
.ac em{font-style:normal;margin-left:auto;font-family:"Pretendard Variable",Pretendard,sans-serif;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink2)}
/* search results */
.sr{padding:22px 22px 0}
.sr h3{font-size:30px}
.sr .tabs{display:flex;gap:8px;margin-top:18px;border-bottom:2px solid var(--line);overflow-x:auto;scrollbar-width:none}
.sr .tabs button{padding:12px 14px;font-size:14px;font-weight:700;color:var(--ink2);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.sr .tabs button.on{color:var(--ink);border-color:var(--slate)}
.sr .tabs button small{color:var(--ink3);margin-left:5px;font-weight:500}
.tools{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.tools select,.tools .fl{height:38px;border:1.5px solid var(--line);border-radius:8px;padding:0 10px;font:inherit;font-size:13px;background:#fff;color:var(--ink)}
.tools .fl{display:flex;align-items:center;gap:6px;font-weight:600}
.tools .fl.on{background:var(--slate);color:#fff;border-color:var(--slate)}
.tools .sp{flex:1}
.tools .cnt{font-size:12.5px;color:var(--ink2)}
.facets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.facets button{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);background:#fff}
.facets button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
table.res{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px}
table.res th{text-align:left;font-family:Archivo;font-variation-settings:"wdth" 95;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:650;padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
table.res th.on{color:var(--slate)}
table.res td{padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
table.res tr:hover td{background:#fbfaf8}
table.res .th{width:40px;height:56px;display:flex;align-items:center;justify-content:center}
table.res .th img{max-height:56px;max-width:40px}
table.res .nm b{display:block;font-size:15px;font-weight:700;letter-spacing:-.025em;line-height:1.25}
table.res .nm span{display:block;font-size:12.5px;color:var(--ink3);margin-top:3px}
table.res .nm a.var{display:inline-block;font-size:11.5px;color:var(--slate);font-weight:600;margin-top:4px;text-decoration:underline;text-underline-offset:2px}
table.res .num{font-family:"Pretendard Variable",Pretendard,sans-serif;font-variant-numeric:tabular-nums;font-size:14px;font-weight:500;color:var(--ink2);letter-spacing:-.01em;white-space:nowrap;text-align:right}
table.res td.price{font-weight:700;color:var(--ink);font-size:15px}
table.res th.r{text-align:right}
table.res .rt{font-family:Archivo;font-variation-settings:"wdth" 82;font-weight:700;font-size:17px;color:var(--slate);display:flex;align-items:center;gap:5px;white-space:nowrap;justify-content:flex-end}
table.res .rt svg{width:14px;height:14px;fill:var(--slate)}
table.res .rt small{font-family:Pretendard;font-weight:500;font-size:11px;color:var(--ink3)}
table.res .ok{color:var(--up);font-weight:700}
table.res tr.vars td{background:var(--paper2);padding:6px 8px 6px 60px;font-size:12.5px}
table.res tr.vars .v{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--line)}
table.res tr.vars .v:last-child{border:0}
table.res tr.vars .v span{color:var(--ink2);font-size:11.5px;margin-left:8px}
@media (max-width:899px){table.res .hide-m{display:none}}
.more-btn{margin:16px auto 40px;display:block;width:100%;max-width:360px;height:46px;border:1.5px solid var(--line);border-radius:8px;font-weight:700;font-size:14px;background:#fff;text-align:center;line-height:46px}
/* home category rails */
.rails{padding:44px 22px 0}
.rails .chips{margin-top:0}
.rail-grid{display:flex;gap:10px;margin:14px -22px 0;padding:0 22px 6px;overflow-x:auto;scrollbar-width:none}
.rail-grid::-webkit-scrollbar{display:none}.rc{flex:0 0 160px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 20px rgba(17,24,32,.05)}
.rc .img{height:120px;background:#fff;border-radius:10px}
.rc .img img{filter:drop-shadow(0 8px 12px rgba(0,0,0,.15))}.rc .eyebrow{color:var(--rust);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rc b{display:block;font-size:14px;font-weight:700;letter-spacing:-.025em;overflow:hidden}.rc .sc{display:flex;justify-content:space-between;align-items:baseline;white-space:nowrap}
.rc .sc em{font-style:normal;font-family:Archivo;font-variation-settings:"wdth" 78;font-weight:750;font-size:22px;color:var(--slate)}
.rc .sc small{font-family:"Pretendard Variable",Pretendard,sans-serif;font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--ink2)}
/* variants in detail */
.vars{margin:20px 22px 0}
.vars h4{font-size:11px;letter-spacing:.18em;color:var(--ink2);text-transform:uppercase;font-family:Archivo;font-variation-settings:"wdth" 95;font-weight:650;padding-bottom:8px;border-bottom:1.5px dashed var(--line)}
.vars .v{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);color:inherit}
.vars .v:hover{background:var(--paper2)}
.vars .v .img{width:40px;height:48px}
.vars .v b{font-size:13.5px;font-weight:600;display:block}
.vars .v span{font-size:11.5px;color:var(--ink3)}
.vars .v em{font-style:normal;font-family:"Pretendard Variable",Pretendard,sans-serif;font-variant-numeric:tabular-nums;font-size:13.5px}

@media (min-width:900px){.rail-grid{display:grid;margin:18px 0 0;padding:0;overflow:visible}.rc{flex:none}.rc b{font-size:15px;height:auto;max-height:40px}.rails .chips{margin-top:18px}}

.receipt h4 small{font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink3);font-family:Pretendard}

.li .d{font-size:12px;color:var(--ink2);margin-top:5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.li .m .mono{color:var(--ink)}.bt-hero .desc{font-size:14px}
.bt-hero .desc .morelink{color:var(--gold);font-weight:700;font-size:13px;margin-left:4px}

@media (min-width:900px){.nav .row .srch{position:relative}.nav .row .srch .ac{top:calc(100% + 8px)}}

.wb{margin:20px 22px 0;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.wb .wbrow{display:flex;align-items:center;gap:14px;justify-content:space-between}
.wb h4{font-size:14px;font-weight:700}
.wb p{font-size:12.5px;color:var(--ink2);margin-top:4px;line-height:1.5}
.wb .wbbtn{flex:none;height:42px;padding:0 16px;background:var(--slate);color:#fff;border-radius:8px;display:flex;align-items:center;font-weight:700;font-size:13.5px;white-space:nowrap}
.wb .wblink{margin-top:10px;font-size:12px;color:var(--ink3)}
.wb .wblink summary{cursor:pointer}
.wb .in{display:flex;gap:8px;margin-top:8px}
.wb input{flex:1;height:40px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font-size:13px;min-width:0}
.wb button{height:40px;padding:0 14px;background:var(--navy);color:#fff;border-radius:8px;font-weight:700;font-size:13px}
@media (min-width:900px){.wb{margin:16px 0 0}}

/* ===== mobile polish v0012 ===== */
@media (max-width:899px){
  .nav{padding:calc(10px + env(safe-area-inset-top)) 16px 12px}
  .logo .mk{width:30px;height:30px}.logo b{font-size:14px}  .srch.m{margin-top:10px;height:46px;border-radius:10px}
  .srch .go{height:36px;font-size:13px;padding:0 12px}  .hero .eyebrow{font-size:9.5px;letter-spacing:.22em}.hero h1{margin-top:12px}.hero p{font-size:13.5px;margin-top:10px;max-width:none}
  .hero .cta{margin-top:20px}
  .btn{height:50px;font-size:14.5px;border-radius:10px}.stats{margin-top:26px;padding-bottom:96px}
  .stats div b{font-size:26px}
  .stats div span{font-size:11.5px;margin-top:5px}
  .pick{margin:26px 0 0;padding:18px 16px 16px;border-radius:16px;
    background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}.pick .img{padding:10px}  .sec,.rails{padding-left:20px;padding-right:20px}
  .sec{padding-top:36px}  .sec p,.live p,.join p{font-size:13.5px;margin-top:8px}
  .chips{margin-top:14px}
  .chips button{padding:9px 13px;font-size:13px}
  .cards{margin:14px -20px 0;padding:4px 20px 8px}
  .card{flex:0 0 264px;padding:16px 14px 14px;gap:12px;border-radius:14px}
  .card .img{width:76px;height:120px}  .card .sc b{font-size:22px}
  .card .sc .pr{font-size:13px}  .rail-grid{margin:12px -20px 0;padding:0 20px 6px;gap:10px}
  .rc{flex:0 0 148px;padding:12px;border-radius:14px}
  .rc .img{height:108px;border-radius:10px}.rc b{height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}  .rc .sc small{font-size:11px}
  .live{margin-top:36px;padding:36px 20px 40px}
  .f{padding:11px 12px}
  .f b{font-size:14px}.f span{font-size:14px}
  .join{padding:40px 20px 52px}
  .feat>div{padding:16px}
  .feat .ico{width:38px;height:38px;margin-bottom:12px}
  .feat b{font-size:17px}.feat span{font-size:13px}
  .join .b{height:50px;font-size:14.5px}
  .foot{padding:28px 20px 36px}
  .li{padding:10px 12px;gap:10px}
  .li b{font-size:14px}
  .li .p .sc{font-size:20px}
  .bt-hero{padding:14px 20px 20px}
  .bt-hero .img{height:220px}
  .bt-hero h1{font-size:24px}
  .bt-hero .desc{font-size:13.5px}
  .bt-hero .score b{font-size:36px}
  .bt-hero .price b{font-size:24px}
  .bt-act{margin:14px 20px 0}
  .bt-act button,.bt-act a{height:46px;font-size:13.5px}
  .receipt,.rate,.wb,.vars{margin-left:20px;margin-right:20px}
  .sr{padding:18px 20px 0}
  .sr h3{font-size:24px}
}

.bt-hero .desc.muted{color:#8d9aa3}

/* ===== v0015 line-height / rhythm ===== */
.h{line-height:1.1}
.sec h3,.live h3,.join h3{line-height:1.12}
.hero h1{line-height:1.1}
.eyebrow{line-height:1.2}
.sec .eyebrow+h3,.live .eyebrow+h3,.join .eyebrow+h3{margin-top:10px}
.sec p,.live p,.join p{line-height:1.6;margin-top:10px}
.chips{margin-top:16px}
.rc .eyebrow{line-height:1.2;margin-top:10px;letter-spacing:.16em}
.rc b{line-height:1.28;margin-top:5px;height:auto;max-height:2.6em}.rc .sc{line-height:1}
.card .tx .eyebrow{line-height:1.2;letter-spacing:.16em}
.card .tx b{line-height:1.22;margin-top:7px}
.card .tx span{line-height:1.3;margin-top:5px}
.card .sc{line-height:1}
.li b{line-height:1.3}.li .m{line-height:1.4;margin-top:4px}
.pick h2{line-height:1.15}.pick .meta{line-height:1.45;margin-top:8px}
.bt-hero h1{line-height:1.15}.bt-hero .meta{line-height:1.5}@media (max-width:899px){
  .hero h1{font-size:32px;line-height:1.14}  .hero p{line-height:1.7}
  .sec h3,.live h3,.join h3{font-size:23px;line-height:1.18}
  .rails .sec h3{font-size:23px}
  .rc .eyebrow{font-size:8.5px;letter-spacing:.14em;margin-top:8px}
  .rc b{font-size:13.5px;line-height:1.28;margin-top:4px;max-height:2.6em}  .rc .sc em{font-size:19px}
  .card .tx .eyebrow{font-size:9px;letter-spacing:.14em}
  .card .tx b{font-size:15.5px;line-height:1.24}
  .rails{padding-top:32px}
  .eyebrow{font-size:10px;letter-spacing:.2em}
}

/* v0017: scan sources + signup modal */
.srcbtns{display:flex;gap:8px;margin-top:12px}
.srcbtn{flex:1;height:48px;border:1.5px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px;background:#fff;cursor:pointer;position:relative;overflow:hidden}
.srcbtn svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.9}
.srcbtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop{height:240px}
.drop input{display:none}
.modal{position:fixed;inset:0;background:rgba(14,22,32,.6);backdrop-filter:blur(4px);z-index:90;display:flex;align-items:flex-end;justify-content:center;padding:16px}
.mbox{background:#fff;border-radius:18px;padding:22px 20px 18px;width:100%;max-width:420px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.mbox h3{font-size:22px;margin-top:8px}
.mbox p{font-size:13.5px;color:var(--ink2);margin-top:8px;line-height:1.55}
.mbox input{width:100%;height:48px;border:1.5px solid var(--line);border-radius:10px;padding:0 14px;font-size:16px;margin-top:14px;font:inherit}
.mbox input:focus{outline:0;border-color:var(--slate)}
.mbox .err{font-size:12px;color:var(--down);min-height:16px;margin-top:6px}
.mbtns{display:flex;gap:8px;margin-top:10px}
.mbtns button{flex:1;height:48px;border-radius:10px;font-weight:700;font-size:14.5px;border:1.5px solid var(--line);background:#fff}
.mbtns button.p{background:var(--slate);color:#fff;border-color:var(--slate)}
@media (min-width:900px){.modal{align-items:center}}

.twobtn{display:flex;gap:8px;margin-top:14px}.twobtn .more-btn{margin:0;flex:1;max-width:none}

.bt-hero .rsrc{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bt-hero .rsrc a{font-size:11.5px;color:#ded2c2;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:4px 8px;border-radius:6px;white-space:nowrap}
.bt-hero .rsrc i{font-style:normal;font-weight:700;color:#fff;margin-right:4px}

/* v0020: rails breathing room */
.rails .rail-grid{padding-bottom:14px}
.rc{padding:14px 12px 14px}
.rc b{margin-bottom:2px}
.rc .sc{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
@media (min-width:900px){.rc .sc{margin-top:14px;padding-top:12px}}
@media (max-width:899px){.rails{padding-bottom:8px}.rc .sc{margin-top:11px;padding-top:9px}}

/* v0021 auction */
.auc{margin:16px 22px 0;padding:18px;border-radius:16px;background:linear-gradient(160deg,#1a1512,#241c16);color:#fff;border:1px solid rgba(255,255,255,.08)}
.auc h4{font-size:14px;font-weight:700}.auc h4 small{display:block;font-weight:500;color:#bda88f;font-size:11.5px;margin-top:3px;letter-spacing:0}.auc .vd{display:inline-block;font-size:12.5px;font-weight:700;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.08)}
.auc .vd.hi{background:rgba(180,71,47,.25);color:#ffb4a0}.auc .vd.lo{background:rgba(60,160,110,.25);color:#a8f0c6}.auc .vd.mid{color:#e6d5a8}.auc .grid{display:grid;grid-template-columns:1fr 1fr}.auc .k span{display:block;font-size:11px;color:#bda88f}.auc .k b{display:block;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.auc .k small{display:block;font-size:11px;color:#d7c8b4;margin-top:2px}
.auc .spark{width:100%;height:54px;margin-top:14px;display:block}.auc .ax{display:flex;justify-content:space-between;font-size:10.5px;color:#9c8877;margin-top:4px}
.auc .ft{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;font-size:11px;color:#9c8877}.auc .ft a{color:var(--gold);font-weight:700;white-space:nowrap}.li .p .sc.up{color:var(--down)}.li .p .sc.down{color:#2f8f5b}
.f span em.up{font-style:normal;color:var(--down);font-weight:700;margin-left:8px;font-size:12px}
@media (min-width:900px){.auc{margin:16px 0 0}.auc .grid{grid-template-columns:repeat(4,1fr)}}

/* v0022 mega menu */
.links .mm{position:relative}

.links .mm .mega>div,.mega{color:var(--ink)}
.mega{--cols:4}
.links .mm .mega .col{padding:0}
.links .mm .mega>.col{}
.mega>.col:first-child{}

.links .mm:hover .mega{display:flex;gap:36px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 26px;box-shadow:0 30px 60px rgba(17,24,32,.18);white-space:nowrap}
.links .mm .mega .col b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px;font-family:Archivo}
.links .mm .mega .col a{display:block;color:var(--ink);font-size:14px;font-weight:500;padding:5px 0;opacity:1}
.links .mm .mega .col a:hover{color:var(--rust)}

/* v0022 detail spec / crumb / auction search */
.crumb{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;color:#a89685;margin-bottom:10px}.crumb a{color:#dccfbe}.crumb a+a::before{content:"›";margin-right:6px;color:#5d6f7b}.spec{background:#fff;border:1px solid var(--line);border-radius:14px}
.spec h4{font-family:Archivo;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.spec table{width:100%;border-collapse:collapse}.spec th{text-align:left;font-weight:500;color:var(--ink3)}.spec td{font-weight:600;color:var(--ink)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.aucsr{margin-top:28px;border-top:1px solid var(--line);padding-top:18px}.aucsr h4{font-size:16px;margin-top:4px}.aucsr h4 small{font-weight:500;color:var(--ink3);font-size:12px;margin-left:6px}
.alist{margin-top:12px;display:grid;gap:8px}.al .img{width:46px;height:60px;background:var(--paper2);border-radius:8px;overflow:hidden}.al .img img{width:100%;height:100%;object-fit:contain}@media (min-width:900px){  .bt-hero .grid{grid-template-columns:440px 1fr;gap:56px}
  .bt-hero .img{height:440px}  .alist{grid-template-columns:repeat(2,1fr)}
}

.spec{margin:0 22px 14px}
@media (min-width:900px){.spec{margin:0 0 16px}}.rsort button.on{background:var(--ink);color:#fff;border-color:var(--ink)}.chart{display:block}.chartwrap .tag.hi{top:-6px}.chartwrap .tag.lo{bottom:32px;color:#e0cbae}
.chartwrap .ax{position:absolute;left:34px;right:0;bottom:0;display:flex;justify-content:space-between;font-size:10.5px;color:#9c8877}

/* v0024 table rows */
.li .col{display:none}
.li .nm b{display:block;font-size:15px;font-weight:700;letter-spacing:-.025em;line-height:1.3}
.li .sc.dim{color:var(--ink3);font-weight:500}
@media (min-width:900px){
  .list{border:0}.li,.li.rank{display:grid;gap:14px;align-items:center;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
  .li:not(.rank){grid-template-columns:var(--thumb) minmax(220px,1fr) 66px 66px 104px 116px 110px 52px}
  .li:hover{background:#fff;box-shadow:0 8px 24px rgba(17,24,32,.06);border-radius:12px}.li .img{background:#fff;border-radius:8px;padding:4px}.li .m{margin-top:4px}.li .d{-webkit-line-clamp:1}.li .col{display:block;font-variant-numeric:tabular-nums;color:var(--ink2);letter-spacing:-.01em}
  .li .col span{display:none}.li .col b{display:block;font-weight:700;color:var(--ink)}.li .col small{display:block;color:var(--ink3);margin-top:2px}
  .li .col b.up{color:var(--down)}.li .col b.down{color:#2f8f5b}
  .li .col i{font-style:normal;font-weight:700}.li .col i.ok{color:#2f8f5b}.li .col i.no{color:var(--ink3)}
  .li .p{min-width:0}  .list::before{content:"";display:block}.lhead{gap:14px;font-size:11px;text-transform:uppercase;font-family:Archivo;border-bottom:1px solid var(--line)}}

.lhead{display:none}
@media (min-width:900px){.lhead{display:grid}}

@media (min-width:900px){.li,.li.rank{min-height:0}  .li .mob-price{display:none}
  .lhead{margin-top:14px;padding-bottom:8px}
  .li .col{font-size:13px}.li .col b{font-size:13.5px}
  .li .p .sc{font-size:19px}.li .p small{font-size:10.5px}
  .li .nm b{font-size:15px}.li .m{font-size:12px}.li .d{font-size:11.5px;color:var(--ink3)}
}

/* v0025 community */
.feedpg .fhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.feedpg .fhead .btn{height:46px;padding:0 18px;flex:none}
.posts{margin-top:18px;display:grid;gap:14px;grid-template-columns:1fr 1fr}
.post{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.post .ph{display:block;aspect-ratio:1/1;background:var(--paper2)}.post .ph img{width:100%;height:100%;object-fit:cover;display:block}
.post .pb{padding:10px 12px 12px}
.post .who{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.post .who b{font-size:13px}.post .who span{font-size:11px;color:var(--ink3);white-space:nowrap}
.post .bt{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px 8px;border-radius:10px;background:var(--paper2);color:inherit}
.post .bt img{width:22px;height:30px;object-fit:contain}.post .bt span{font-size:12.5px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post .bt em{font-style:normal;font-family:Archivo;font-weight:700;color:var(--slate);font-size:16px}
.post p{font-size:13px;line-height:1.5;margin-top:8px;color:var(--ink2)}
.post .act{margin-top:8px}.post .like{font-size:12.5px;color:var(--ink3);padding:4px 0}.post .like.on{color:var(--rust)}
.posts.mini{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}.bposts .muted{font-size:13px;color:var(--ink3);margin-top:8px}
.cbox .drop.sm{height:160px;margin-top:12px}.cbox .drop.sm img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.cbox input[type=text],.cbox #cq,.cbox #cplace{width:100%;height:44px;border:1.5px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:14px;margin-top:10px}
.cbox textarea{width:100%;min-height:64px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;margin-top:10px;resize:vertical}
.cb-bottle{position:relative;margin-top:10px}.cb-bottle .sel{display:inline-block;padding:8px 12px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;font-weight:700}
.cres{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line);border-radius:10px;z-index:5;max-height:180px;overflow:auto;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.cres button{display:block;width:100%;text-align:left;padding:10px 12px;font-size:13.5px;border-bottom:1px solid var(--line)}
.cb-score{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px}.cb-score input{flex:1}.cb-score b{font-family:Archivo;font-size:20px;color:var(--slate);width:36px;text-align:right}
@media (min-width:900px){.posts{grid-template-columns:repeat(4,1fr);gap:16px}.posts.mini{grid-template-columns:repeat(4,1fr)}.mbox.cbox{max-width:520px}}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,185,125,.4)}70%{box-shadow:0 0 0 6px rgba(63,185,125,0)}100%{box-shadow:0 0 0 0 rgba(63,185,125,0)}}
/* v0027 home grid alignment */
@media (min-width:900px){
  :root{--w:1280px}
  .wrap{max-width:var(--w);padding:0 32px}
  .rails{max-width:var(--w);margin:0 auto;padding:72px 32px 0}
  .rails .sec{padding:0}
  .rails .sec .head,.sec .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
  .rail-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
  .rc{padding:18px 18px 16px}.rc .img{height:170px}
  .cards{grid-template-columns:repeat(3,1fr);gap:16px}
  .twobtn{max-width:520px}
  .aucsec .feed{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .sec .head .more{align-self:flex-end}
}
@media (min-width:900px){.rails .more-btn{margin-left:0;margin-right:0}.twobtn{margin-top:18px}.rails>.more-btn{display:inline-block;width:auto;padding:0 22px;margin-top:18px}}

/* v0028 mega menu redesign */
@media (min-width:900px){.nav{top:0;z-index:50}  .links .mm>a{position:relative;padding-bottom:4px}
  .links .mm>a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .18s}
  .links .mm:hover>a::after{transform:scaleX(1)}
  .links .mm .mega,.links .mm:hover .mega{position:absolute;left:0;right:0;top:100%;padding:0;border:0;border-radius:0;box-shadow:0 24px 50px rgba(17,24,32,.22);background:#fff;border-top:1px solid rgba(255,255,255,.12);white-space:normal;display:none}  .links .mm .mega .col b{font-size:11px;letter-spacing:.16em;color:var(--ink3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
  .links .mm .mega .col b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rust)}
  .links .mm .mega .col a{display:block;font-size:15px;font-weight:600;color:var(--ink);padding:8px 10px;margin:0 -10px;border-radius:8px;letter-spacing:-.02em;transition:background .12s,color .12s}
  .links .mm .mega .col a:hover{background:var(--paper2);color:var(--rust)}
  .links .mm .mega .col a small{display:block;font-size:11.5px;color:var(--ink3);font-weight:500;margin-top:1px}
  .mega .promo{background:linear-gradient(160deg,#1a1512,#241c16);color:#fff;border-radius:16px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;min-height:220px;position:relative;overflow:hidden}
  .mega .promo .eyebrow{color:var(--gold);font-size:10px}
  .mega .promo h5{font-size:20px;font-weight:740;letter-spacing:-.04em;line-height:1.18;margin-top:8px;font-family:"Wanted Sans Variable",Pretendard,sans-serif}
  .mega .promo p{font-size:12.5px;color:#c3b19b;margin-top:8px;line-height:1.55}
  .mega .promo .go{margin-top:14px;display:inline-flex;align-items:center;gap:6px;background:var(--rust);color:#fff;font-weight:700;font-size:13px;padding:9px 14px;border-radius:8px;align-self:flex-start}
  .mega .promo .go:hover{background:#c2533a}
}

/* v0029 guide rows */
.li .col.tr{position:relative}
.li .col .mini{display:block;width:100%;height:26px;margin-bottom:2px}@media (min-width:900px){
  .auc-row,.li.rank.auc-row{grid-template-columns:30px var(--thumb) minmax(240px,1fr) 120px 140px 140px 110px 110px;padding:12px 14px}
  .lhead.auc{grid-template-columns:30px var(--thumb) minmax(240px,1fr) 120px 140px 140px 110px 110px}
  .lhead{background:var(--ink);color:#fff;border-radius:10px;padding:10px 14px;border:0;font-weight:600;letter-spacing:.08em}
  .li .col small{font-size:10.5px}
  .li.auc-row .nm .d{color:var(--ink3)}
}

/* v0030 mega menu fix: styles independent of hover, close on click */
@media (min-width:900px){
  .links .mm .mega{position:absolute;left:0;right:0;top:100%;padding:0;border:0;border-radius:0;box-shadow:0 24px 50px rgba(17,24,32,.22);background:#fff;white-space:normal;display:none;flex-direction:row}  
}
@media (min-width:900px){
  .li,.li.rank{grid-template-columns:30px var(--thumb) minmax(200px,1fr) 66px 66px 104px 116px 126px 110px 52px}
  .li:not(.rank):not(.auc-row){grid-template-columns:var(--thumb) minmax(240px,1fr) 72px 72px 64px 120px 130px 110px 56px}
  .lhead{grid-template-columns:30px var(--thumb) minmax(240px,1fr) 72px 72px 64px 120px 130px 110px 56px}
  .lhead.norank{grid-template-columns:56px minmax(240px,1fr) 72px 72px 64px 120px 130px 110px 56px}
  .li .col b.dim{color:var(--ink3);font-weight:500}
}

/* sool.gg brand */
.logo{display:flex;align-items:center;gap:9px}
.logo .mark{width:30px;height:30px;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.logo .mk{display:none}
.logo b{font-family:Archivo,"Pretendard Variable",sans-serif;font-variation-settings:"wdth" 92;font-weight:800;font-size:20px;letter-spacing:-.04em;color:#fff;line-height:1}
.logo b span{color:var(--gold);font-weight:700}
.foot b.fb{font-family:Archivo;font-weight:800;font-size:20px;letter-spacing:-.04em}
.foot b.fb span{color:var(--gold)}
@media (min-width:900px){.logo .mark{width:34px;height:34px}.logo b{font-size:22px}}

.receipt .rl .nm i.agg{background:var(--gold);color:#3a2a10;font-weight:800}

@media (min-width:900px){  .links .mm.open>a::after{transform:scaleX(1)}
  .links .mm>a{display:inline-block;padding:14px 0;margin:-14px 0}
}

/* v0039 seller list */
.receipt .ph{margin:14px 0 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-family:Archivo}
.receipt .ph small{text-transform:none;letter-spacing:0;font-family:inherit;margin-left:6px;color:var(--ink3)}
.receipt .rl.dim{opacity:.55}
.receipt .soldout{margin-top:10px}
.receipt .soldout summary{cursor:pointer;font-size:12.5px;color:var(--ink3);padding:6px 0}

/* v0040 auction teaser cards */

/* v0041 nav */
@media (min-width:900px){
  .links{display:flex;align-items:center;gap:22px;flex:1}
  .links .navsp{flex:1}
  .links .mine{color:var(--gold)}
}

/* v0041 live auction */
.lsum{margin:14px 0 4px}
.live-bar{display:inline-flex;align-items:center;gap:9px;background:#1a1512;color:#fff;border-radius:10px;padding:9px 13px;font-size:13px}
.live-bar span:last-child{color:var(--gold);font-weight:700}
.lstat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.lstat div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.lstat b{display:block;font-size:21px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lstat span{font-size:11.5px;color:var(--ink3)}.lots{display:grid;gap:10px}
.lot .row .bids{color:var(--ink2)}.brow{display:grid;grid-template-columns:120px 1fr 130px;gap:12px;align-items:center;padding:5px 0}
.brow .bk{font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .bt{height:9px;background:var(--paper2);border-radius:5px;overflow:hidden}
.brow .bt i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--rust));border-radius:5px}
.brow .bv{text-align:right;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.brow .bv small{display:block;font-weight:500;font-size:10.5px;color:var(--ink3)}
@media (min-width:900px){.lstat{grid-template-columns:repeat(4,1fr)}}

/* v0042 */
.hero{overflow:visible}
.hero .wrap{overflow:visible}
.hero form.srch{position:relative;z-index:40}

.sec .head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.twobtn.tight{display:flex;gap:8px;margin:0;max-width:none}
.twobtn.tight .more-btn{width:auto;padding:0 16px;height:42px;line-height:42px;margin:0}

.herosearch{position:relative;z-index:45}
.herosearch .ac{top:calc(100% + 8px);max-height:min(52vh,380px)}

/* v0043 page rhythm */
.page{padding-top:34px}
.page .eyebrow{margin-bottom:10px}
.page h2.h{margin-bottom:10px}
.page>p{max-width:640px;color:var(--ink3);line-height:1.65}
.page .chips{margin-top:22px}
.page .rsort{margin-top:12px}
.page .lhead{margin-top:22px}
@media (min-width:900px){
  .page{padding-top:56px}
  .page h2.h{font-size:40px;letter-spacing:-.045em}
  .page>p{font-size:15px;margin-top:4px}
  .page .chips{margin-top:26px;gap:8px}
  .page .chips button{height:40px;padding:0 16px;font-size:13.5px}
  .page .rsort{margin-top:14px}
  .page .lhead{margin-top:26px}
  .list{padding-top:8px}
  .li,.li.rank{padding:14px}
  .li .img{width:52px;height:68px}
}.bandrow button.on{background:var(--rust);border-color:var(--rust);color:#fff}
.bandrow button.on i{background:rgba(255,255,255,.22);color:#fff}
/* ============ v0045 design system pass ============ */

body{background:var(--bg)}

/* --- bottle detail: unified dark hero + light body --- */
.bt-hero{background:linear-gradient(165deg,#181310 0%,#221a15 55%,#241c16 100%)}
.bt-hero .bg{opacity:.5}
.bt-hero .wrap{padding-top:26px;padding-bottom:44px}
.bt-hero .img{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.bt-hero .t{margin-top:8px}
.bt-hero .meta{margin-top:12px;color:#9fb3c0}
.bt-hero .desc{margin-top:14px;line-height:1.7;color:#cdbba4;max-width:56ch}
.bt-hero .row{margin-top:26px;gap:36px}
.bt-hero .score .num{font-size:44px}
.bt-act{margin-top:26px;gap:10px}
.bt-body{padding-top:30px;padding-bottom:70px}

/* cards share one language */
.spec,.receipt,.wb,.bposts,.auc,.rate{border-radius:var(--r);box-shadow:var(--sh-1)}
.spec,.receipt,.wb,.bposts,.rate{background:var(--card);border:1px solid var(--line)}
.spec{padding:20px 22px}
.receipt{padding:20px 22px}
.wb,.bposts{padding:20px 22px}
.spec+.receipt,.receipt+.wb,.wb+.bposts,.bposts+.auc,.receipt+.auc{margin-top:18px}
.spec h4,.receipt h4,.bposts h4{font-family:Archivo;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.receipt h4{display:flex;justify-content:space-between;align-items:center;text-transform:none;letter-spacing:-.01em;font-family:inherit;font-size:14px;color:var(--ink)}
.receipt h4 span:last-child{font-size:12px;color:var(--ink3);font-weight:600;letter-spacing:0}
.spec table{margin-top:6px}
.spec th{width:38%;padding:10px 0;font-size:13px;border-bottom:1px solid var(--line2)}
.spec td{padding:10px 0;font-size:13.5px;border-bottom:1px solid var(--line2)}
.receipt .rl{padding:12px 0;border-bottom:1px solid var(--line2)}
.receipt .rl:last-child{border-bottom:0}

/* auction card = same rhythm, dark accent */
.auc{margin:18px 0 0;padding:22px;background:linear-gradient(160deg,#181310,#241c16);border:1px solid rgba(255,255,255,.07)}
.auc .grid{gap:12px;margin-top:16px}
.auc .k{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:12px 14px}
.auc .k b{font-size:19px}
.auc .vd{margin-top:12px}
@media (min-width:900px){
  .bt-hero .wrap{padding-top:34px;padding-bottom:56px}
  .bt-body{grid-template-columns:1fr 360px;gap:34px;padding-top:36px}
  .spec,.receipt,.wb,.bposts,.auc{margin-left:0;margin-right:0}
  .spec+.receipt,.receipt+.wb,.wb+.bposts,.bposts+.auc,.receipt+.auc{margin-top:20px}
}
@media (max-width:899px){
  .spec,.receipt,.wb,.bposts,.auc{margin-left:20px;margin-right:20px}
  .bt-hero .wrap{padding-bottom:34px}
}
/* rating box */
.rate{padding:20px 22px}
.rate h4{font-size:14px;font-weight:700}
/* footer separation */
.foot{background:var(--navy);margin-top:0}

/* v0046 explore */
.crumb.dark{color:var(--ink3);margin-bottom:14px}
.crumb.dark a{color:var(--ink2)}
.crumb.dark a:hover{color:var(--rust)}
.crumb.dark span{color:var(--ink)}
.crumb.dark a+a::before,.crumb.dark a+span::before{content:"›";margin-right:6px;color:var(--ink3)}/* v0047 seller collapse */
.receipt .more-sellers{border-top:1px solid var(--line2);margin-top:4px}
.receipt .more-sellers>summary{cursor:pointer;list-style:none;padding:12px 0 10px;font-size:13px;color:var(--ink2);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px}
.receipt .more-sellers>summary::-webkit-details-marker{display:none}
.receipt .more-sellers>summary::after{content:"＋";color:var(--ink3);font-weight:600}
.receipt .more-sellers[open]>summary::after{content:"−"}
.receipt .more-sellers>summary b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;font-size:12.5px}
.receipt .more-sellers>summary small{color:var(--ink3);font-weight:500}
.receipt .more-sellers .rl:first-of-type{border-top:0}

/* v0048 lot card + live page rhythm */
.page .lsum{margin-top:18px}
.page .lstat{margin-top:14px}
.page #lchips{margin-top:20px}
.page #lbody{margin-top:6px}
.lots{margin-top:18px}
/* auth modal */
.authbox{max-width:400px}.authbox .tabs{display:flex;gap:6px;margin-top:16px;background:var(--paper2);padding:4px;border-radius:10px}
.authbox .tabs button{flex:1;height:38px;border-radius:8px;font-size:13.5px;font-weight:700;color:var(--ink3)}
.authbox .tabs button.on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.authbox input[type=text],.authbox input[type=password],.authbox #an{width:100%;height:48px;border:1.5px solid var(--line);border-radius:10px;padding:0 14px;font-size:15px;margin-top:10px}/* my page */
.mecard{margin-top:18px;background:linear-gradient(160deg,#181310,#241c16);border-radius:var(--r-lg);padding:22px;color:#fff}
.mecard .lv{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mecard .badge{background:var(--gold);color:#2a1f08;font-weight:800;font-size:12px;padding:4px 10px;border-radius:999px}
.mecard .lv b{font-family:Archivo;font-size:26px;font-weight:750;letter-spacing:-.02em}
.mecard .lv small{color:#bda88f;font-size:12px}
.mecard .bar{width:100%;height:7px;background:rgba(255,255,255,.12);border-radius:4px;margin-top:12px;overflow:hidden}
.mecard .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--rust))}
.mestat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.mestat>*{background:rgba(255,255,255,.07);border-radius:12px;padding:12px;text-align:center;color:#fff}
.mestat b{display:block;font-size:20px;font-weight:750;font-family:Archivo}
.mestat span{font-size:11.5px;color:#bda88f}
.secrow{display:flex;align-items:baseline;gap:10px;margin-top:30px}
.h3{font-family:"Wanted Sans Variable",Pretendard,sans-serif;font-weight:740;font-size:20px;letter-spacing:-.035em}
.secrow .hint{font-size:12px;color:var(--ink3)}
.ptlist{margin-top:12px;display:grid;gap:6px}
.ptlist>div{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:13.5px}
.ptlist b{color:var(--rust);font-weight:700}.ptlist small{color:var(--ink3);font-size:11.5px}
.mebtns{margin-top:26px}
@media (min-width:900px){
  .nav .row .cta{display:none}
  .nav .row .srch{flex:1}
  .mestat{grid-template-columns:repeat(3,220px)}
}


/* ── v0049: 900px 단일 브레이크포인트 사이의 빈 구간 보정 ───────────── */
@media (min-width:600px) and (max-width:899px){
  .wrap{padding:0 24px}
  .rail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .posts{grid-template-columns:repeat(2,1fr)}
  .lots{grid-template-columns:repeat(2,1fr)}  .lstat{grid-template-columns:repeat(2,1fr)}
  .mestat{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:420px){
  .wrap{padding:0 14px}
  .h{font-size:24px}
  .chips{gap:6px}
  .chips button{padding:8px 12px;font-size:13px}
  .li .col.c1,.li .col.c2,.li .col.c3{display:none}
}

/* 마이페이지 · 복구용 뒷 4자리 */
.p4card{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.p4card input{flex:1;min-width:140px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;letter-spacing:.18em}
.p4card .fine{flex-basis:100%;margin:0;color:var(--ink3);font-size:12px}
.authbox #ap4{letter-spacing:.18em}

/* ══ v0049b: 목록 썸네일 키우기 ═════════════════════════════════════
   기존 56×74에 4px 패딩 → 실제 병이 보이는 영역은 48×66에 불과했고,
   상품 사진 자체에 여백이 들어 있어 병은 그 안에서 또 절반 크기였음.
   ① 칸을 키우고 ② 패딩 제거 ③ 사진에 박힌 여백만큼 확대해 잘라내고
   ④ drop-shadow 로 흰 배경에서 병 실루엣이 뜨게 함 (.rc/.card 와 동일 처리) */
.li .img{
  width:var(--thumb);
  height:calc(var(--thumb) * 1.3);
  padding:0;
  background:linear-gradient(180deg,#fff 0%,var(--paper2) 100%);
  border:1px solid var(--line2);
  border-radius:9px;
  overflow:hidden;                       /* 확대분을 잘라냄 */
  flex:none;
}
.li .img img{
  width:100%; height:100%;
  object-fit:contain;
  transform:scale(1.14);                 /* 사진에 박힌 여백 상쇄 */
  filter:drop-shadow(0 4px 6px rgba(20,26,32,.22));
  mix-blend-mode:multiply;               /* 흰 배경 사진의 사각 테두리 제거 */
}
.li:hover .img img{transform:scale(1.2);transition:transform .18s ease}
.li .img:has(img[src=""]),
.li .img img[src=""]{display:none}

/* 세트 상품(2병 이상)은 사진 안에서 병이 더 작으니 확대를 조금 더 */
.li .img img.multi{transform:scale(1.2)}

@media (min-width:900px){ :root{--thumb:78px} }
@media (min-width:600px) and (max-width:899px){ :root{--thumb:66px} }
@media (max-width:599px){ :root{--thumb:60px} .li .img img{transform:scale(1.1)} }
@media (max-width:420px){ :root{--thumb:54px} }
/* ══ v0049d: 경매 가이드 카드 재설계 ═══════════════════════════════════
   기존 문제 — ① 두 가격의 "비교"가 핵심인데 경매값이 회색 잔글씨라 대비가 안 됨
   ② "국내 +134%" 만으로는 무엇 대비인지 안 읽힘 ③ 흰 썸네일 박스가 카드보다 튐
   ④ 여섯 장이 전부 같은 무게라 어느 게 심한 건지 안 보임
   해결 — 두 가격을 길이가 다른 막대로 나란히 놓고, 차액을 원화로 명시. */


/* 두 가격을 길이로 비교 */




/* ══ v0049e: 성인 게이트 (생년월일) ══════════════════════════════════ */
.age .agein{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 4px}
.age .agein input{width:88px;padding:13px 0;text-align:center;font:inherit;font-size:17px;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;border:1.5px solid rgba(255,255,255,.22);
  border-radius:10px;background:rgba(255,255,255,.07);color:#fff}
.age .agein input:nth-child(3),.age .agein input:nth-child(5){width:64px}
.age .agein input::placeholder{color:rgba(255,255,255,.34);letter-spacing:.04em}
.age .agein input:focus{outline:0;border-color:var(--gold);background:rgba(255,255,255,.12)}
.age .agein span{color:rgba(255,255,255,.35);font-size:17px}
.age .age-err{min-height:18px;margin-top:8px;font-size:13px;color:#ff9b84}
.age .age-fine{margin-top:16px;font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.4)}
.age.deny .age-box h2{color:#fff}
.age .deny-out{display:inline-block;margin-top:20px;color:rgba(255,255,255,.6);text-decoration:underline}
@media (max-width:420px){
  .age .agein input{width:74px;font-size:16px}
  .age .agein input:nth-child(3),.age .agein input:nth-child(5){width:56px}
}

/* ══ v0049f: 필터 패널 — 축별 그룹 ══════════════════════════════════
   기존 .facets 는 종류·원산지·지역·가격대 29개 칩을 한 줄에 쏟아부어서
   어느 칩이 어느 축인지 구분이 안 됐다. 축마다 라벨을 붙이고 줄을 나눈다.
   검색/랭킹/경매 세 화면이 같은 컴포넌트를 쓴다. */
.facets2{margin:16px 0 4px;display:grid;gap:2px}
.fgroup{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:start;
  padding:7px 0;border-top:1px solid var(--line2)}
.fgroup:first-child{border-top:0}
.fg-lb{font-size:11.5px;font-weight:600;color:var(--ink3);letter-spacing:-.01em;
  padding-top:8px;white-space:nowrap}
.fg-ch{display:flex;flex-wrap:wrap;gap:6px}
.fg-ch button,.fg-ch a{
  appearance:none;border:1px solid var(--line);background:var(--card);
  color:var(--ink2);font:inherit;font-size:13px;font-weight:500;letter-spacing:-.02em;
  padding:6px 11px;border-radius:999px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;line-height:1.45;
  transition:border-color .12s,background .12s,color .12s;white-space:nowrap}
.fg-ch button:hover,.fg-ch a:hover{border-color:var(--ink3);color:var(--ink)}
.fg-ch button.on,.fg-ch a.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.fg-ch i{font-style:normal;font-size:11px;font-weight:500;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.fg-ch .on i{color:rgba(255,255,255,.6)}
.fg-ch .fg-more{border-style:dashed;color:var(--ink3);font-weight:600}

/* 적용된 필터 */
.fapplied{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:start;
  padding:9px 0 10px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.fapplied .fg-lb{color:var(--rust)}
.fa{appearance:none;border:1px solid var(--rust);background:rgba(184,72,58,.07);
  color:var(--rust);font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.02em;
  padding:6px 10px;border-radius:999px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fa:hover{background:var(--rust);color:#fff}
.fa i{font-style:normal;font-size:11px;opacity:.75}
.fa.all{border-style:dashed;background:transparent}
.fa-n{align-self:center;font-size:12px;color:var(--ink3);
  font-variant-numeric:tabular-nums;margin-left:2px}

@media (max-width:599px){
  .fgroup,.fapplied{grid-template-columns:1fr;gap:5px}
  .fg-lb{padding-top:0}
  .fg-ch{gap:5px}
  .fg-ch button,.fg-ch a{font-size:12.5px;padding:5px 10px}
  /* 모바일에선 가로 스크롤로 한 줄 유지 — 화면을 칩이 다 먹지 않게 */
  .fgroup .fg-ch{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .fgroup .fg-ch::-webkit-scrollbar{display:none}
  .fapplied .fg-ch{flex-wrap:wrap}
}


/* ══ v0049g: 경매 통계 탐색 ═══════════════════════════════════════════ */
.stat{margin-top:14px}
.stat-find{position:relative;margin-bottom:6px}
.stat-find input{width:100%;padding:14px 16px;font:inherit;font-size:15px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.stat-find input:focus{outline:0;border-color:var(--navy)}
.stac{display:none;position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;
  max-height:340px;overflow:auto;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--sh-2);padding:6px}
.stac.on{display:block}
.stac .g{font-size:11px;font-weight:600;color:var(--ink3);padding:8px 10px 4px;letter-spacing:.02em}
.stac button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;
  border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);
  padding:9px 10px;border-radius:8px;cursor:pointer;text-align:left}
.stac button:hover{background:var(--paper2)}
.stac button small{color:var(--ink3);font-size:12px;font-variant-numeric:tabular-nums}.stat-chg.up b{color:var(--up)} .stat-chg.down b{color:var(--down)}
.chart{width:100%;height:190px;overflow:visible}
.chart .g{stroke:var(--line);stroke-width:1}
.chart .band{fill:rgba(65,96,111,.13)}
.chart .ln{fill:none;stroke:var(--slate);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--slate);opacity:.85}
.chart .ax{font-size:10px;fill:var(--ink3);text-anchor:end;font-family:Archivo,system-ui}
.chart .ax.mid{text-anchor:middle}.sb .k{color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}.stop{display:grid;gap:8px}
.stop>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:8px;border-bottom:1px solid var(--line2)}
.stop>div:last-child{border-bottom:0;padding-bottom:0}
.stop span{font-size:13px;color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stop em{font-style:normal;text-align:right;white-space:nowrap;font-weight:700;
  font-variant-numeric:tabular-nums;font-size:14px}
.stop em small{display:block;font-weight:500;font-size:11px;color:var(--ink3)}



/* ══ v0049h: 로그인/가입 모달 재설계 ═════════════════════════════════
   ① placeholder 에까지 letter-spacing 이 먹어 "휴 대 폰  뒷  4 자 리" 로 벌어지던 버그
   ② 선택 안 된 탭이 회색으로 채워져 오히려 눌린 것처럼 보이던 문제
   ③ 성인 게이트에서 생년월일을 이미 받았는데 체크박스로 또 묻던 중복
   ④ "닫기"가 확인 버튼과 같은 크기로 시선을 반씩 나눠 갖던 문제 */
.authbox{max-width:392px;padding:26px 24px 20px;position:relative;border-radius:20px}
.authbox .eyebrow{font-size:10.5px;letter-spacing:.14em}
.authbox h3.h{font-size:23px;font-weight:800;letter-spacing:-.045em;margin-top:6px}
.authbox .sub{font-size:13px;color:var(--ink3);margin-top:6px;line-height:1.55}

.mclose{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%;
  background:transparent;color:var(--ink3);font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.mclose:hover{background:var(--paper2);color:var(--ink)}

/* 세그먼트 — 선택된 쪽을 짙게. 안 선택된 쪽은 배경 없이 비운다 */
.seg{display:flex;gap:4px;margin-top:18px;background:var(--paper2);padding:4px;border-radius:11px}
.seg button{flex:1;height:38px;border:0;border-radius:8px;background:transparent;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--ink3);cursor:pointer;
  transition:background .14s,color .14s}
.seg button:hover{color:var(--ink2)}
.seg button.on{background:var(--navy);color:#fff}

.authbox .fields{display:grid;gap:8px;margin-top:16px}
.authbox .fields input{width:100%;height:50px;margin:0;border:1.5px solid var(--line);
  border-radius:11px;padding:0 14px;font:inherit;font-size:15px;background:var(--card);color:var(--ink);
  transition:border-color .12s,background .12s}
.authbox .fields input::placeholder{color:var(--ink3);letter-spacing:normal}
.authbox .fields input:focus{outline:0;border-color:var(--navy);background:#fff}

/* 뒷 4자리 — 앞자리를 마스크로 보여줘 무엇을 넣는지 설명 없이 알게 한다 */
.p4row{display:flex;align-items:center;gap:7px;height:50px;padding:0 14px;
  border:1.5px solid var(--line);border-radius:11px;background:var(--card);
  transition:border-color .12s,background .12s}
.p4row:focus-within{border-color:var(--navy);background:#fff}
.p4pre{font-size:15px;color:var(--ink3);font-variant-numeric:tabular-nums}
.p4d{color:var(--ink3);opacity:.55}
.p4mask{font-size:15px;color:var(--ink3);letter-spacing:.1em}
/* .authbox .fields input(0,3,0) 과 .p4card input 이 이 입력을 덮으므로
   특이도를 맞춰 이긴다. 이전엔 !important 5개로 눌렀다. */
.authbox .fields .p4row input,
.p4card .p4row input,
.p4row.p4row input{flex:1;height:auto;border:0;padding:0;
  background:transparent;font-size:16px;font-weight:700;
  letter-spacing:.22em;font-variant-numeric:tabular-nums;min-width:0}
.p4row input::placeholder{letter-spacing:.22em;font-weight:400;color:var(--ink3);opacity:.55}
.p4row input:focus{outline:0}

.authbox .hint{font-size:11.5px;color:var(--ink3);margin-top:8px;line-height:1.5}
.authbox .agree{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:12.5px;color:var(--ink2)}
.authbox .agree input{width:17px;height:17px;flex:none;accent-color:var(--navy)}
.agechk{display:flex;align-items:center;gap:7px;margin-top:12px;padding:9px 12px;
  background:var(--paper2);border-radius:9px;font-size:12.5px;color:var(--ink2)}
.agechk i{font-style:normal;color:var(--up);font-weight:800}
.agechk b{font-weight:600;color:var(--ink3);font-variant-numeric:tabular-nums}

.authbox .err{min-height:16px;margin-top:10px;font-size:12.5px;color:var(--down)}
.pbtn{width:100%;height:52px;margin-top:2px;border:0;border-radius:12px;
  background:var(--navy);color:#fff;font:inherit;font-size:15px;font-weight:700;
  letter-spacing:-.02em;cursor:pointer;transition:background .14s,transform .1s}
.pbtn:hover{background:var(--navy2)}
.pbtn:active{transform:scale(.985)}
.pbtn:disabled{opacity:.5;cursor:default}
.pbtn.busy{opacity:.6}
.authbox .fine{font-size:12px;color:var(--ink3);margin-top:14px;line-height:1.6;text-align:center}
.authbox #afindwrap a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.authbox #afindwrap a:hover{color:var(--ink)}

@media (max-width:420px){
  .authbox{padding:22px 18px 16px}
  .authbox h3.h{font-size:21px}
  .authbox .fields input,.p4row{height:48px}
}.shotbtn.p{border-color:var(--navy);background:var(--navy);color:#fff;height:42px;padding:0 18px}
.shotbtn.p:hover{background:var(--navy2)}.bposts .hd{display:flex;align-items:center;justify-content:space-between;gap:12px}


/* v0050: 푸터 버전 표기 */
.foot .ver{display:inline-block;padding:1px 7px;margin-left:2px;border-radius:5px;
  background:rgba(255,255,255,.08);color:var(--slate-l);font-size:11px;
  font-family:Archivo,system-ui;letter-spacing:.04em;font-variant-numeric:tabular-nums}


/* ══ v0049i: 전통주 맥락 ═══════════════════════════════════════════════
   전통주엔 숙성연수도 해외경매도 없다. 그 두 칸을 빈 채로 두는 대신
   초심자에게 실제로 필요한 양조장·지역·수상이력을 넣는다. */
.li .col.brew b{font-size:12.5px;font-weight:600;color:var(--ink2);
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .col.c6 .awd{display:block;font-size:10.5px;color:var(--gold);font-weight:600;margin-top:1px}

.soolctx{background:linear-gradient(180deg,#fff,var(--paper2));
  border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:14px}
.sc-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sc-hd h4{font-size:19px;font-weight:800;letter-spacing:-.04em;margin-top:2px}
.sc-hd .eyebrow{flex-basis:100%}
.sc-rg{font-size:12.5px;color:var(--ink3);background:var(--paper3);
  padding:3px 9px;border-radius:999px;font-weight:600}
.sc-awd{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:11px 13px;
  background:rgba(216,164,73,.1);border:1px solid rgba(216,164,73,.32);border-radius:11px}
.sc-awd i{font-style:normal;font-size:15px;line-height:1.3}
.sc-awd b{display:block;font-size:12px;font-weight:700;color:#8a6520;letter-spacing:-.02em}
.sc-awd span{display:block;font-size:13px;color:var(--ink2);line-height:1.5;margin-top:2px}
.sc-cat{margin-top:12px;font-size:13.5px;color:var(--ink2);line-height:1.65}
.sc-more{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;
  color:var(--rust);text-decoration:none}
.sc-more:hover{text-decoration:underline}
@media (max-width:599px){.soolctx{padding:15px 16px}.sc-hd h4{font-size:17px}}


/* ══ v0049j: 경매 UI 전면 재설계 ═══════════════════════════════════════
   [홈 카드] 이전엔 `grid-template-columns:56px 1fr auto` 라 값의 자릿수에 따라
   막대 트랙이 행마다 줄었다. 345,450 과 1,030,000 이 서로 다른 축 위에 그려져
   비교 자체가 성립하지 않았다. 숫자를 막대 위로 올려 트랙을 카드 폭으로 고정한다.
   [상세 패널] 거의 검정이던 배경을 페이지와 같은 밝은 카드로. 차트는
   preserveAspectRatio="none" 로 늘려 그리던 것을 정상 비율 viewBox 로 교체. */

/* ── 홈: 경매 가이드 카드 ── */


/* ── 상세: 해외 경매 시세 패널 ── */
.aucp{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px 16px;margin:16px 0}
.ap-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ap-hd h4{font-size:19px;font-weight:800;letter-spacing:-.04em;margin:3px 0 4px}
.ap-src{font-size:12px;color:var(--ink3)}
.ap-verdict{text-align:right;padding:8px 13px;border-radius:11px;white-space:nowrap}
.ap-verdict b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.ap-verdict span{font-size:11.5px;font-weight:600}
.ap-verdict.abroad{background:rgba(184,72,58,.09);border:1px solid rgba(184,72,58,.28);color:var(--rust)}
.ap-verdict.korea{background:rgba(46,166,111,.1);border:1px solid rgba(46,166,111,.3);color:var(--up)}

.ap-kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
@media (min-width:700px){.ap-kpi{grid-template-columns:repeat(4,1fr)}}
.ap-kpi>div{background:var(--paper2);border-radius:11px;padding:11px 13px}
.ap-kpi span{display:block;font-size:11px;color:var(--ink3);letter-spacing:-.01em}
.ap-kpi b{display:block;margin-top:3px;font-size:17px;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.ap-kpi small{display:block;margin-top:2px;font-size:11px;color:var(--ink3)}

.ap-chart{margin-top:16px}
.ap-ct{font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:8px}
.ap-ct small{font-weight:500;color:var(--ink3);margin-left:5px}
.apchart{width:100%;height:auto;display:block}
.apchart .g{stroke:var(--line);stroke-width:1}
.apchart .area{fill:rgba(216,164,73,.14)}
.apchart .ln{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.apchart .dot{fill:var(--gold)}
.apchart .dot.last{fill:#fff;stroke:var(--gold);stroke-width:2.5}
.apchart .ax{font-size:10.5px;fill:var(--ink3);text-anchor:end;font-family:Archivo,system-ui}.ap-ft{margin-top:14px;padding-top:11px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--ink2)}.ap-ft a{color:var(--rust);font-weight:600;text-decoration:none;white-space:nowrap}
.ap-ft a:hover{text-decoration:underline}
.ap-note{margin-top:8px;font-size:11px;color:var(--ink3);line-height:1.55}
.empty.sm{padding:30px 0;font-size:13px}
@media (max-width:599px){
  .aucp{padding:16px 16px 13px}
  .ap-hd h4{font-size:17px}
  .ap-kpi b{font-size:15px}
}


/* ══ v0049k: 리뷰 ════════════════════════════════════════════════════
   리뷰가 안 보이면 아무도 쓰지 않는다. 병 상세에서 리뷰를 주인공으로.
   사진 인증 리뷰는 시각적으로 확실히 구분해 "사진을 올릴 이유"를 만든다. */
.rate h4{font-size:14px;font-weight:700;margin-bottom:12px}
.rt-score{display:flex;align-items:center;gap:12px}
.rt-score input[type=range]{flex:1}
.rt-score b{font-size:28px;font-weight:800;letter-spacing:-.04em;min-width:48px;
  text-align:right;font-variant-numeric:tabular-nums}
.rt-guide{margin-top:4px;font-size:12.5px;color:var(--ink3);text-align:right}
.rate textarea{width:100%;margin-top:12px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:11px;font:inherit;font-size:14px;line-height:1.6;resize:vertical;min-height:92px}
.rate textarea:focus{outline:0;border-color:var(--navy)}
.rt-photo{display:block;margin-top:10px;padding:13px;border:1.5px dashed var(--line);
  border-radius:11px;text-align:center;font-size:13px;color:var(--ink2);cursor:pointer;
  transition:border-color .12s,background .12s}
.rt-photo:hover{border-color:var(--gold);background:rgba(216,164,73,.06)}
.rt-photo input{display:none}
.rt-photo em{font-style:normal;display:block;margin-top:3px;font-size:11.5px;color:var(--gold);font-weight:600}
.rt-prev:not(:empty){margin-top:10px}
.rt-prev img{width:100%;max-height:220px;object-fit:cover;border-radius:11px}
.rate button{width:100%;margin-top:12px;height:48px;border:0;border-radius:11px;
  background:var(--navy);color:#fff;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer}
.rate button:disabled{opacity:.45;cursor:default}
.rt-hint{margin-top:7px;font-size:12px;color:var(--ink3);text-align:center}

.revs{margin:16px 0}
.rv-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.rv-hd h4{font-size:17px;font-weight:800;letter-spacing:-.035em}
.rv-hd h4 span{color:var(--ink3);font-weight:600;margin-left:4px}
.rv-vn{font-size:11.5px;color:var(--gold);font-weight:600}
.rv-sort{display:flex;gap:5px}
.rv-sort button{border:1px solid var(--line);background:var(--card);color:var(--ink2);
  font:inherit;font-size:12.5px;padding:5px 11px;border-radius:999px;cursor:pointer}
.rv-sort button.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}

.rv-list{display:grid;gap:10px}
.rv{display:grid;grid-template-columns:1fr;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.rv.ver{grid-template-columns:104px 1fr;border-color:rgba(216,164,73,.4);
  background:linear-gradient(180deg,rgba(216,164,73,.05),var(--card))}
.rv-img{display:block;width:104px;height:104px;border-radius:11px;overflow:hidden;
  background:var(--paper2)}
.rv-img img{width:100%;height:100%;object-fit:cover}
.rv-body{min-width:0}
.rv-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rv-who{display:flex;align-items:center;gap:6px;text-decoration:none;min-width:0}
.rv-who b{font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-tt{font-style:normal;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;
  background:var(--paper3);color:var(--ink2);white-space:nowrap}
.rv-tt.top{background:linear-gradient(90deg,var(--gold),#c08b2e);color:#fff}
.rv-sc{font-size:19px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--slate)}
.rv-meta{margin-top:4px;font-size:11.5px;color:var(--ink3)}
.rv-meta em{font-style:normal;color:var(--gold);font-weight:600}
.rv-note{margin-top:8px;font-size:14px;line-height:1.68;color:var(--ink);white-space:pre-wrap}
.rv-act{margin-top:10px}
.rv-act button{border:1px solid var(--line);background:transparent;color:var(--ink2);
  font:inherit;font-size:12.5px;padding:6px 12px;border-radius:999px;cursor:pointer}
.rv-act button.on{border-color:var(--rust);color:var(--rust);background:rgba(184,72,58,.07)}
.rv-act button:disabled{opacity:.4;cursor:default}

/* 리뷰어 프로필 · 랭킹 */
.rp-hd{margin:16px 0 14px}
.rp-tt{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;padding:4px 11px;
  border-radius:999px;background:var(--paper3);color:var(--ink2)}
.rp-tt.top{background:linear-gradient(90deg,var(--gold),#c08b2e);color:#fff}
.rp-rk{margin-left:8px;font-size:12.5px;color:var(--ink3)}.rp-kpi{margin-bottom:8px}
@media (min-width:700px){.rp-kpi{grid-template-columns:repeat(4,1fr)}}
.rp-kpi>div{background:var(--paper2);border-radius:11px;padding:12px 14px}.rk-list{display:grid;gap:6px;margin-top:16px}
.rk{display:grid;grid-template-columns:38px minmax(0,1fr) 60px 60px 60px 54px;gap:10px;
  align-items:center;padding:12px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;text-decoration:none;color:var(--ink)}
.rk:hover{border-color:var(--ink3)}
.rk-n{font-size:15px;font-weight:800;color:var(--ink3);text-align:center;
  font-variant-numeric:tabular-nums}
.rk-n.top{color:var(--gold)}
.rk-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.rk-who b{font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-who .rv-tt{align-self:flex-start}
.rk-st{text-align:center}
.rk-st span{display:block;font-size:10.5px;color:var(--ink3)}
.rk-st b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.rk-tr{text-align:right;font-size:15px;font-weight:800;color:var(--gold);
  font-variant-numeric:tabular-nums}
@media (max-width:699px){
  .rk{grid-template-columns:32px minmax(0,1fr) 52px 52px;gap:8px}
  .rk-st:nth-of-type(3),.rk-tr{display:none}
  .rv.ver{grid-template-columns:80px 1fr}
  .rv-img{width:80px;height:80px}
}


/* ══ v0051: 낙찰 기록 전수 조회 ═══════════════════════════════════════ */
.lots-br{margin-top:14px}
.lt-cnt{font-size:12.5px;color:var(--ink3);margin:14px 0 8px;font-variant-numeric:tabular-nums}
.lthead,.lt{display:grid;grid-template-columns:44px minmax(200px,1fr) 110px 60px 58px 66px 74px 120px;
  gap:12px;align-items:center}
.lthead{padding:0 12px 9px;font-size:11px;color:var(--ink3);letter-spacing:.05em;
  text-transform:uppercase;font-family:Archivo,system-ui;border-bottom:1px solid var(--line)}
.ltlist{display:grid}
.lt{padding:9px 12px;border-bottom:1px solid var(--line2);text-decoration:none;color:inherit;
  transition:background .12s}
.lt:hover{background:var(--paper2)}
.lt .img{width:44px;height:56px;border-radius:6px;overflow:hidden;background:var(--paper2);
  display:flex;align-items:center;justify-content:center}
.lt .img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.lt .nm{min-width:0}
.lt .nm b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt .nm span{display:block;font-size:11px;color:var(--ink3);margin-top:1px}
.lt .c{font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt .pr{text-align:right}
.lt .pr b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lt .pr small{display:block;font-size:11px;color:var(--ink3)}
@media (max-width:899px){
  .lthead{display:none}
  .lt{grid-template-columns:44px 1fr auto;gap:10px;padding:10px 4px}
  .lt .c{display:none}
  .lt .nm b{white-space:normal;line-height:1.35}
  .lt .nm span{display:inline}
  .lt .nm::after{content:none}
}


/* ══ v0051: 메가메뉴 재배치 ═════════════════════════════════════════════
   랭킹 항목이 위스키/전통주 메뉴 안에 흩어져 있어 "랭킹" 을 눌러도
   정작 랭킹 목록이 안 보였다. 랭킹 메뉴로 모으고 컬럼 수에 맞게 그리드를 잡는다. */
@media (min-width:900px){
  /* 컬럼 수 = 자식 .col 개수. 메뉴마다 다르므로 개별 지정 */
  /* 오른쪽 끝 메뉴는 왼쪽으로 펼친다 (화면 밖 방지) */
}
.links .mm .mega .col a small{display:block;font-size:11px;color:var(--ink3);margin-top:2px;font-weight:400}


/* ══ v0052: 필터 줄 레이아웃 안정화 ═══════════════════════════════════
   원산지 줄을 display:none 으로 숨겼다가 응답 후 보여주니, 가격대를 누를 때마다
   페이지가 다시 그려지고 ~200ms 뒤 줄이 튀어나오며 아래가 통째로 밀렸다.
   숨길 때도 높이를 유지해 레이아웃이 흔들리지 않게 한다. */
.fgroup.off{visibility:hidden}
.fgroup.off .fg-ch::before{content:"";display:block;height:32px}
@media (max-width:599px){ .fgroup.off .fg-ch::before{height:30px} }

/* 숫자가 나중에 채워질 때 폭이 튀지 않도록 최소폭 확보 */
.fg-ch i{min-width:1.6em;display:inline-block;text-align:right}
.fg-ch i:empty{min-width:0}

/* 칩 자체의 등장/전환을 부드럽게 (숫자만 바뀔 때 깜빡임 억제) */
.fg-ch a,.fg-ch button{transition:border-color .12s,background .12s,color .12s}




/* ══ v0052: 진행 중 로트 1열 ═══════════════════════════════════════════
   2열이면 카드 폭이 좁아 긴 제목이 접히고 숫자 3개(현재가/과거시세/입찰)가 눌린다.
   한 줄에 하나씩 두고 남는 가로 공간을 정보에 쓴다. */
@media (min-width:900px){
  .lots{grid-template-columns:1fr;gap:10px}
  /* 숫자 3개를 한 줄에 넉넉히 */
}


/* ══ v0054: 경매 통계 전면 재설계 ══════════════════════════════════════
   기존엔 "증류소 20곳 중앙 낙찰가" 막대 하나뿐이라 월별 움직임도,
   특정 위스키 시세도 볼 수 없었다. 숫자를 표로 직접 보여준다. */
.stkpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0 22px}
@media (min-width:700px){.stkpi{grid-template-columns:repeat(4,1fr)}}
.stkpi>div{background:var(--paper2);border:1px solid var(--line2);border-radius:12px;padding:13px 15px}
.stkpi span{display:block;font-size:11.5px;color:var(--ink3);letter-spacing:-.01em}
.stkpi b{display:block;margin-top:4px;font-size:21px;font-weight:800;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.stkpi b.up{color:var(--up)} .stkpi b.dn{color:var(--rust)}
.stkpi small{display:block;margin-top:3px;font-size:11px;color:var(--ink3)}

.stsec{margin:26px 0}
.stsec h4{font-size:15px;font-weight:800;letter-spacing:-.03em;margin-bottom:10px}
.stsec h4 small{font-weight:500;font-size:12px;color:var(--ink3);margin-left:7px;letter-spacing:-.01em}

.stchart{width:100%;height:auto;display:block;margin:4px 0 6px}
.stchart .g{stroke:var(--line);stroke-width:1}
.stchart .band{fill:rgba(216,164,73,.16)}
.stchart .ln{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.stchart .dot{fill:var(--gold)}
.stchart .dot.last{fill:#fff;stroke:var(--gold);stroke-width:2.5}
.stchart .ax{font-size:11px;fill:var(--ink3);text-anchor:end;font-family:Archivo,system-ui}
.stchart .ax.mid{text-anchor:middle}

.sttbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.sttbl{width:100%;border-collapse:collapse;font-size:13px}
.sttbl th{position:sticky;top:0;background:var(--paper2);text-align:left;padding:10px 14px;
  font-size:11px;font-weight:700;color:var(--ink3);letter-spacing:.04em;text-transform:uppercase;
  border-bottom:1px solid var(--line);white-space:nowrap}
.sttbl td{padding:9px 14px;border-bottom:1px solid var(--line2);white-space:nowrap}
.sttbl tr:last-child td{border-bottom:0}
.sttbl .r{text-align:right}
.sttbl .mono{font-variant-numeric:tabular-nums;font-weight:600}
.sttbl .dim{color:var(--ink3);font-size:12px}
.sttbl.dist tr[data-dk]{cursor:pointer;transition:background .12s}
.sttbl.dist tr[data-dk]:hover{background:var(--paper2)}
.sttbl.dist td b{font-weight:700}
.sttbl .en{display:block;font-size:11px;color:var(--ink3);font-weight:400;margin-top:1px}
.minibar{display:inline-block;width:110px;height:7px;border-radius:4px;background:var(--paper3);
  overflow:hidden;vertical-align:middle;margin-right:9px}
.minibar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--rust))}
.lotn{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}

.mom{font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px}
.mom.up{color:var(--rust)} .mom.dn{color:var(--up)} .mom.flat{color:var(--ink3);font-weight:400}

.styear{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.styear>div{background:var(--paper2);border-radius:10px;padding:10px 12px;text-align:center}
.styear b{display:block;font-size:13px;font-weight:800;letter-spacing:-.02em}
.styear span{display:block;font-size:11px;color:var(--ink3);margin-top:2px}
.styear i{display:block;font-style:normal;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink2);margin-top:2px}

@media (max-width:599px){
  .stkpi b{font-size:18px}
  .sttbl{font-size:12.5px}
  .sttbl th,.sttbl td{padding:8px 10px}
  .minibar{width:64px}
}


/* ══ v0054: 진행 중 로트 검색/필터 ═══════════════════════════════════ */
.livebr{margin-top:16px}
.livebr .stat-find{margin-bottom:12px}
.livebr .facets2{margin-bottom:6px}
.lnote{margin-top:18px;padding-top:14px;border-top:1px solid var(--line2);
  font-size:12px;color:var(--ink3);line-height:1.65}
.lnote b{color:var(--ink2);font-weight:700}


/* 브랜드 칩은 24개까지 오므로 가로 스크롤 허용 */
#lvbrandrow .fg-ch{flex-wrap:wrap}
@media (max-width:899px){
  #lvbrandrow .fg-ch{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
  #lvbrandrow .fg-ch::-webkit-scrollbar{display:none}
}
.fg-ch button i{font-style:normal;margin-left:5px;font-size:11px;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.fg-ch button.on i{color:rgba(255,255,255,.72)}


/* ══ v0056: 경매 가이드 카드 — 축을 하나로 ═══════════════════════════
   막대 두 줄은 비교가 성립하지 않았다. 이 목록은 "국내가 더 비싼 병"만 모으므로
   국내 막대가 항상 100%로 붙박이고, 그러면 남는 정보는 해외 막대 하나뿐이다.
   트랙 전체 = 국내 최저가, 채운 부분 = 해외 경매가.
   비어 있는 나머지가 곧 국내에서 더 내는 돈 — 한눈에 읽힌다. */
.agq{margin-top:14px}

/* 카드 8장: 넓은 화면에서 4열 2줄로 떨어지게 */


/* ══ v0058: 내비게이션 재배치 ═══════════════════════════════════════════
   해외경매가 로그인 옆 빨간 알약 버튼이라 "광고 배너" 처럼 떠 보였고,
   메가메뉴도 오른쪽 끝에 붙어 다른 메뉴와 따로 놀았다.
   랭킹 오른쪽 정규 메뉴로 옮기고, 메가메뉴는 화면 전폭을 쓰게 한다. */

/* 좌측 메뉴 / 우측 계정 영역을 분리 */
.nav .links{flex:1;align-items:center}
.nav .links .navsp{flex:1}

/* 메가메뉴: 화면 전폭 드롭다운 (헤더 아래를 가득) */
@media (min-width:900px){
  .nav{position:relative}
  .links .mm{position:static}
  .links .mm .mega,
  .links .mm:hover .mega{
    position:absolute;left:0;right:0;top:100%;
    padding:0;border:0;border-radius:0;
    box-shadow:0 24px 50px rgba(17,24,32,.16);
    background:#fff;border-top:1px solid var(--line);
    white-space:normal}
  .links .mm .mega .inner{
    max-width:var(--w);margin:0 auto;padding:30px 32px 32px;
    display:grid;gap:34px;align-items:start}
}

/* 해외경매: 알약 버튼 대신 글자색 강조 + 밑줄 */
.links .mm.mm-auc>a{color:#ffb9a4}
.links .mm.mm-auc>a::after{background:var(--rust)}
.links .mm.mm-auc:hover>a{color:#fff}
.links .mm.mm-auc>a::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--rust);vertical-align:middle;margin-right:6px;
  box-shadow:0 0 0 3px rgba(184,72,58,.25)}

/* 우측 계정 링크 */
.nav .links>a{color:#cfc2b2}
.nav .links>a:hover{color:#fff}
.nav .links>a.mine{color:var(--gold);font-weight:700}

/* 컬럼 수가 메뉴마다 달라 한 곳에서 정한다 (프로모 1칸 포함) */
@media (min-width:900px){
  .links .mm .mega .inner{grid-template-columns:repeat(3,minmax(0,1fr)) 1.2fr}   /* 위스키 3 */
  .links .mm.mm-rank .mega .inner{grid-template-columns:repeat(4,minmax(0,1fr)) 1.1fr}
  .links .mm.mm-auc  .mega .inner{grid-template-columns:repeat(2,minmax(0,1fr)) 1.3fr}
}
  /* v0116: 전통주에 지역 열이 생겨 위스키와 같은 3열이 됐다 (기본 규칙과 동일하므로
     별도 선언이 필요 없지만, 열 수가 메뉴마다 다르다는 사실을 여기서 읽히게 남겨둔다) */
  @media (min-width:900px){
    .links .mm.mm-sool .mega .inner{grid-template-columns:repeat(3,minmax(0,1fr)) 1.2fr}
  }


/* ══ v0121: 리뷰어 프로필 ══════════════════════════════════════════════
   KPI 4개 + 리뷰 목록이 전부였다. 평점 데이터에 취향이 들어 있는데 안 쓰고 있었다. */
.rpage .rp-hd{display:flex;align-items:center;gap:18px;margin:6px 0 20px}
.rp-av{width:72px;height:72px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),#B4472F);color:#fff;
  font-family:Archivo;font-weight:800;font-size:30px;letter-spacing:-.02em}
.rp-id h2{margin:2px 0 0}
.rp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rp-tags span{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;
  background:var(--paper2);color:var(--ink2)}
.rp-tags .rp-tt{background:#efe6d6;color:#7a5a33}
.rp-tags .rp-jo{background:transparent;color:var(--ink3);padding-left:2px}
.rp-main{min-width:0}
.rp-side{min-width:0}
.rp-tags .rp-tt.top{background:linear-gradient(135deg,var(--gold),#B4472F);color:#fff}

.rp-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rp-kpi div{background:#fff;padding:13px 12px;text-align:center}
.rp-kpi span{display:block;font-size:11px;color:var(--ink3);letter-spacing:-.01em}
.rp-kpi b{display:block;margin-top:5px;font-family:Archivo;font-variation-settings:"wdth" 84;
  font-weight:700;font-size:22px;color:var(--slate);letter-spacing:-.02em}

.rp-grid{display:grid;gap:22px;margin-top:24px}
@media (min-width:1000px){ .rp-grid{grid-template-columns:1fr 300px;align-items:start} }

.tp{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;margin-bottom:14px}
.tp h5{font-size:12.5px;font-weight:700;color:var(--ink);margin:0 0 11px;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tp h5 small{font-weight:500;color:var(--ink3);font-size:11px}
.tp h5 em{font-style:normal;font-size:11.5px;font-weight:500;color:var(--ink2)}
.tp h5 em b{color:var(--slate);font-weight:700}

.tb{display:flex;flex-direction:column;gap:7px}
.tbr{display:grid;grid-template-columns:78px 1fr 34px;align-items:center;gap:8px;font-size:12px}
.tbr .k{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbr .g{height:7px;border-radius:99px;background:var(--paper2);overflow:hidden}
.tbr .g i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),#B4472F)}
.tbr .v{text-align:right;color:var(--ink3);font-variant-numeric:tabular-nums}

.hist{display:flex;align-items:flex-end;gap:8px;height:104px}
.hb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}
.hb i{display:block;width:100%;max-width:44px;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--gold),#B4472F)}
.hb span{font-size:10px;color:var(--ink3);white-space:nowrap}
.hb em{font-style:normal;font-size:11px;font-weight:700;color:var(--ink2);order:-1}

.mos{display:flex;align-items:flex-end;gap:5px;height:66px;overflow-x:auto}
.mo{flex:1;min-width:20px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}
.mo i{display:block;width:100%;max-width:16px;border-radius:3px;background:var(--slate-l,#8a7f70)}
.mo span{font-size:9px;color:var(--ink3);white-space:nowrap}

.mbs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mb{display:flex;gap:9px;align-items:center;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:10px;padding:8px}
.mb:hover{border-color:var(--slate)}
.mb .im{width:34px;height:46px;flex:none;display:grid;place-items:center}
.mb .im img{max-width:100%;max-height:100%;object-fit:contain}
.mb b{display:block;font-size:12.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mb em{font-style:normal;font-size:11px;color:var(--slate);font-weight:700}

.rp-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.rpp{text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.rpp:hover{border-color:var(--slate)}
.rpp .im{aspect-ratio:1;background:var(--paper2)}
.rpp .im img{width:100%;height:100%;object-fit:cover}
.rpp .tx{padding:8px 10px 10px}
.rpp .tx b{display:block;font-size:12.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rpp .tx span{display:block;font-size:11px;color:var(--ink3);margin-top:3px}

@media (max-width:599px){
  .rpage .rp-hd{gap:13px}
  .rp-av{width:56px;height:56px;font-size:23px}
  .tbr{grid-template-columns:66px 1fr 30px}
  .mbs{grid-template-columns:1fr}
}

/* ══ v0120: 통합검색 결과를 표로 ══════════════════════════════════════
   카드 나열은 사진 44px + 제목 + 가격이 전부였다. 경매 데이터에는 빈티지·병입연도·
   캐스크번호·한정수량이 이미 있는데 한 줄도 못 보여주고 있었다.
   집에서 쓰던 .lhead/.li 표 패턴 위에 통합검색 전용 열 구성을 얹는다. */
.aslist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.li.asrow{align-items:center}
.li.asrow .ims{display:flex;gap:4px;align-items:center;justify-content:center}
.li.asrow .ims img{width:44px;height:60px;object-fit:contain;border-radius:4px;background:#fff}
.li.asrow .ims img.bk{opacity:.72}
.li.asrow .nm b{display:block;font-size:15px;font-weight:730;letter-spacing:-.025em;line-height:1.3}
.li.asrow .nm .m{font-size:12px;color:var(--ink2);margin-top:3px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.li.asrow .nm .tg{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.li.asrow .nm .tg em{font-style:normal;font-size:10.5px;font-weight:600;padding:2px 7px;
  border-radius:999px;letter-spacing:-.01em;line-height:1.5}
.li.asrow .tg em.kr{background:#e8f2ec;color:#2f6b4f}
.li.asrow .tg em.auc{background:#f2ece2;color:#7a5a33}
.li.asrow .tg em.two{background:#ece9f5;color:#544a80}
.li.asrow .tg em.ltd{background:#f6ece9;color:#8a4a3a}
.li.asrow .tg em.ctry{background:var(--paper2);color:var(--ink3)}
.li.asrow .p b{display:block;font-family:"Pretendard Variable",Pretendard,sans-serif;
  font-variant-numeric:tabular-nums;font-size:16px;font-weight:700;letter-spacing:-.03em}
.li.asrow .p small{display:block;font-size:11px;color:var(--ink3);margin-top:2px}
.li.asrow .p small.alt{color:var(--slate)}
.li.asrow .p small.yoy.up{color:var(--up,#b4472f)}
.li.asrow .p small.yoy.dn{color:var(--down,#2f6b4f)}
.li.asrow .col .sc{font-family:Archivo;font-variation-settings:"wdth" 78;font-weight:750;
  font-size:19px;color:var(--slate);line-height:1}
.li.asrow .col i.ok{font-style:normal;color:#2f6b4f;font-weight:700}
.li.asrow .col i.no{font-style:normal;color:var(--ink3)}

@media (max-width:899px){
  /* 모바일은 표가 성립하지 않는다. 사진·이름·가격만 남기고 나머지는 이름 밑 태그로 산다. */
  .li.asrow{grid-template-columns:auto 1fr auto;gap:11px}
  .li.asrow .col{display:none}
  .lhead.as{display:none}
  .li.asrow .ims img:nth-child(2){display:none}
}
@media (min-width:900px){
  /* 열 10개 중 캐스크·평점을 접으므로 보이는 건 8개 → 그리드도 8열이어야 어긋나지 않는다 */
  .li.asrow{grid-template-columns:96px minmax(200px,1fr) 62px 62px 58px 96px 122px 46px;
    gap:10px;padding:11px 14px}
  .lhead.as{grid-template-columns:96px minmax(200px,1fr) 62px 62px 58px 96px 122px 46px;
    gap:10px;display:grid;align-items:center}
  /* 캐스크·평점은 좁은 데스크톱에서 먼저 접는다 */
  .li.asrow .col.c5,.li.asrow .col.c6{display:none}
  .lhead.as span:nth-child(7),.lhead.as span:nth-child(8){display:none}
}
@media (min-width:1160px){
  .li.asrow{grid-template-columns:96px minmax(220px,1fr) 62px 62px 58px 100px 84px 62px 128px 46px}
  .lhead.as{grid-template-columns:96px minmax(220px,1fr) 62px 62px 58px 100px 84px 62px 128px 46px}
  .li.asrow .col.c5,.li.asrow .col.c6{display:block}
  .lhead.as span:nth-child(7),.lhead.as span:nth-child(8){display:block}
}

/* ── v0119: 빈 상태는 최대한 작게. 없는 정보가 있는 정보보다 자리를 많이 먹고 있었다 ── */
.none-1{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;font-size:12.5px;color:var(--ink3);border-top:1px solid var(--line2)}
.none-1 a{color:var(--slate);font-weight:600;text-decoration:none;white-space:nowrap}
.none-1 a:hover{text-decoration:underline}
.aucp.none{margin-top:10px}
.aucp.none .none-1{border-top:none}
.revs-none{padding:9px 0;font-size:12.5px;color:var(--ink3);border-top:1px solid var(--line2)}
.receipt h4 small{white-space:normal}

/* ── v0118: 경매 카드가 div → a 가 됐다. 링크 기본 스타일을 지우고 커서를 준다.
   .ap 는 원래 클릭 대상이 아니어서 hover 반응이 없었다. ── */
a.ap{color:inherit;text-decoration:none;cursor:pointer}
a.ap:hover{background:var(--paper2)}
a.ap:hover .nm b{color:var(--slate)}

/* ══ v0058: 모바일 하단 탭바 ══════════════════════════════════════════
   900px 미만에서 .nav .links 가 display:none 인데 대체 내비가 없었다.
   즉 모바일에서는 랭킹·해외경매·내 술장으로 갈 방법이 아예 없었다. */
.tabbar{display:none}
@media (max-width:899px){
  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(24,19,16,.96);backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,.09);
    padding:6px 2px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;color:#a2958a;text-decoration:none;font-size:10.5px;font-weight:600;
    letter-spacing:-.02em;transition:color .14s}
  .tabbar svg{width:21px;height:21px;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a.on{color:var(--gold)}
  .tabbar a:active{color:#fff}
  /* 탭바에 가리지 않게 본문 하단 여백 */
  #app{padding-bottom:74px}
  .foot{margin-bottom:66px}
}


/* ══ v0059: 섹션 링크를 헤더 우상단으로 통일 ═══════════════════════════
   "우리 술 전체 보기" 는 목록 아래 좌측에, 경매는 하단에 버튼 두 개("직구가
   유리한 병"·"오르는 병")가 있어 섹션마다 규칙이 달랐다. 다른 섹션(구매순 전체)과
   같은 위치·같은 형태로 맞춘다. 경매 하위 목록 두 개는 없애고 전체 보기 하나로. */
.sec .head>div:first-child{min-width:0}
.sec .head .more{white-space:nowrap;flex:none}
@media (max-width:599px){
  .sec .head{align-items:flex-start;flex-direction:column;gap:12px}
  .sec .head .more{align-self:flex-start}
}


/* ══ v0060: 모바일 전수 점검 수정 ═════════════════════════════════════
   375px 기기를 기준으로 실제 렌더 폭을 계산해 문제만 골라 고친다. */

/* ① 토스트가 하단 탭바(z-index 70, 높이 ~62px) 뒤에 깔려 안 보였다 */
@media (max-width:899px){
  .toast{bottom:calc(74px + env(safe-area-inset-bottom));z-index:80}
}

/* ② .mestat 이 모바일에서도 3열 고정이라 숫자가 눌렸다 */
@media (max-width:599px){
  .mestat{grid-template-columns:repeat(2,1fr)}
}

/* ③ 필터 칩 터치 타깃이 ~29px. 손가락으로 누르기엔 작다(권장 44px) */
@media (max-width:899px){
  .fg-ch button,.fg-ch a,.chips button,.rsort button,.rv-sort button{
    min-height:38px;padding-top:9px;padding-bottom:9px}
  .facets button{min-height:38px}
}

/* ④ 큰 숫자가 좁은 폭에서 줄바꿈되며 카드가 깨졌다 */
@media (max-width:420px){  .stkpi b{font-size:17px}
  .ap-verdict b{font-size:17px}
  .ap-kpi b{font-size:14px}
}

/* ⑤ 증류소 표: 모바일에선 미니바를 숨겨 이름·숫자에 폭을 준다 */
@media (max-width:599px){
  .sttbl.dist .minibar{display:none}
  .sttbl.dist .en{display:none}
  .sttbl-wrap{-webkit-overflow-scrolling:touch}
}

/* ⑥ 상세 경매 패널·통계 차트가 좁은 폭에서 눈금과 겹치지 않게 */
@media (max-width:599px){
  .stchart .ax,.apchart .ax{font-size:13px}   /* viewBox 스케일 보정 */
  .stsec h4 small{display:block;margin:2px 0 0}
}

/* ⑦ 로트 검색창·정렬이 탭바에 가리지 않도록 여유 */
@media (max-width:899px){
  .livebr,.lots-br{padding-bottom:8px}
}


/* ══ v0060: iOS 입력 확대 방지 ═════════════════════════════════════════
   iOS Safari 는 input/select/textarea 의 폰트가 16px 미만이면 포커스 시
   화면을 강제로 확대한다. 검색·필터를 누를 때마다 레이아웃이 튀어
   다시 축소해야 하는 상태였다. 모바일에서만 16px 로 올린다. */
@media (max-width:899px){
  input,select,textarea,
  /* iOS 는 16px 미만 입력에 자동 확대가 걸린다. id 선택자(0,1,0,0)로
     특이도를 확보해 !important 없이 이긴다. */
  #ltq,#lvq,#stq,#q,#hq,#cq,#cpla,#p4in,#ap4{font-size:16px}
  .srch input,.herosearch input,.stat-find input,.cbox input,
  .mbox input,.authbox input,.age .agein input{font-size:16px}
  /* 16px 로 커진 만큼 높이도 맞춰 준다 */
  .srch input,.stat-find input{height:46px}
}

/* 이미지·미디어가 컨테이너를 넘지 않게 (전역 안전장치) */
img,svg,video,canvas{max-width:100%}
/* 긴 영문 술 이름이 가로 스크롤을 만들지 않게 */
@media (max-width:599px){
  .bt-hero .t,.h,.rc b,.card b,.lt .nm b{overflow-wrap:anywhere}
}


/* ══ v0061: 진행 중 로트 — 필터 압축 + 판정 우측 고정 ═══════════════════
   [필터] 브랜드 24 + 금액대 7 + 입찰 5 + 정렬 5 = 칩 41개가 5줄로 깔려
   목록보다 필터가 화면을 더 차지했다. 네 개의 선택 컨트롤로 접는다.
   개수는 옵션 라벨에 넣어(예: "5만원 미만 (182)") 정보를 잃지 않는다.
   [카드] .lot .vd 에 grid-column:2 규칙이 나중에 나와 3열 배치를 덮어써
   판정이 항상 카드 아래로 떨어졌다. 규칙 25개를 걷어내고 한 벌로 다시 쓴다. */

.lvbar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 6px}
.lvsel{display:flex;flex-direction:column;gap:4px;min-width:0}
.lvsel>span{font-size:11px;color:var(--ink3);letter-spacing:-.01em;padding-left:2px}
.lvsel select{
  width:100%;height:40px;padding:0 30px 0 11px;font-size:13.5px;font-weight:600;
  color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:9px;
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2398897b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px;
  text-overflow:ellipsis}
.lvsel select:focus{outline:0;border-color:var(--ink3)}

/* ── 로트 카드: 사진 / 내용 / 판정 3열 ── */
.lot{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  color:inherit;text-decoration:none;transition:border-color .14s,box-shadow .14s}
.lot:hover{border-color:var(--ink3);box-shadow:var(--sh-1)}
.lot .img{width:64px;height:82px;background:var(--paper2);border-radius:9px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.lot .img img{width:100%;height:100%;object-fit:contain}
.lot .tx{min-width:0}
.lot b{display:block;font-size:14.5px;font-weight:700;line-height:1.35;letter-spacing:-.02em}
.lot .sub{font-size:11.5px;color:var(--ink3);margin-top:3px}
.lot .row{display:flex;gap:20px;margin-top:9px;flex-wrap:wrap}
.lot .row span{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.lot .row i{display:block;font-style:normal;font-size:10.5px;color:var(--ink3);
  font-weight:500;margin-top:1px}
.lot .row .fair{color:var(--ink3)}
.lot .vd{text-align:right;white-space:nowrap;flex:none}
.lot .vd span{display:block;font-family:Archivo;font-weight:750;font-size:19px;letter-spacing:-.02em}
.lot .vd .good{color:var(--up)}
.lot .vd .bad{color:var(--rust)}
.lot .vd .neu{color:var(--ink3)}
.lot .vd small{display:block;font-size:10.5px;color:var(--ink3);margin-top:3px}

@media (min-width:900px){
  .lot{grid-template-columns:80px minmax(0,1fr) 200px;gap:20px;padding:14px 20px}
  .lot .img{width:80px;height:100px}
  .lot b{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lot .row{gap:28px;flex-wrap:nowrap}
}
@media (max-width:599px){
  .lvbar{grid-template-columns:repeat(2,1fr);gap:8px}
  .lvsel select{height:42px;font-size:13px}
  /* 좁은 화면에선 판정을 이름 아래로 (3열을 유지하면 이름이 뭉개진다) */
  .lot{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:13px 14px}
  .lot .img{width:56px;height:72px}
  .lot .vd{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:8px;
    margin-top:9px;padding-top:9px;border-top:1px dashed var(--line2)}
  .lot .vd span{display:inline;font-size:16px}
  .lot .vd small{display:inline;margin:0;font-size:11px}
  .lot .row{gap:16px}
}

.lvbar.one{grid-template-columns:minmax(0,220px)}
@media (max-width:599px){ .lvbar.one{grid-template-columns:1fr} }

/* select 도 16px 미만이면 iOS 가 포커스 시 확대한다 */
@media (max-width:899px){ .lvsel select{font-size:16px} }


/* ══ v0062: 환율 근거 표기 + 월별 이동 ══════════════════════════════════
   원화는 "낙찰 당시 월평균 EUR→KRW" 로 환산하는데 그 근거가 화면에 없었다.
   같은 €가 달마다 다른 원화로 보이는 이유를 알 수 없던 상태. */
.lt-cnt .fxn{color:var(--ink3);font-weight:400}
.lt .pr small{white-space:nowrap}
.sttbl .fxr{display:block;font-style:normal;font-size:10.5px;color:var(--ink3);
  font-weight:400;margin-top:1px}
.sttbl th small{display:block;font-weight:400;font-size:9.5px;text-transform:none;
  letter-spacing:0;margin-top:1px}

/* 월 행 → 낙찰 기록 이동 */
.sttbl tr.ymrow{cursor:pointer;transition:background .12s}
.sttbl tr.ymrow:hover{background:var(--paper2)}
.sttbl .goym{font-style:normal;color:var(--ink3);margin-left:6px;opacity:0;transition:opacity .12s}
.sttbl tr.ymrow:hover .goym{opacity:1;color:var(--rust)}

.lvbar.two{grid-template-columns:minmax(0,200px) minmax(0,200px)}
@media (max-width:599px){ .lvbar.two{grid-template-columns:1fr 1fr} }


/* ══ v0065: 국내에 없는 술 — 경매 기록으로 안내 ═══════════════════════
   "보모어 38년" 처럼 국내 유통이 없는 술은 검색 결과가 0건이었다.
   하지만 74만 건 경매 기록에는 35건이 있다. 그걸 앞세운다. */
.aucst{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 4px}
.aucst>div{background:var(--paper2);border-radius:11px;padding:11px 14px}
.aucst span{display:block;font-size:11px;color:var(--ink3)}
.aucst b{display:block;margin-top:3px;font-size:17px;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.aucst small{display:block;margin-top:2px;font-size:11px;color:var(--ink3)}

/* 국내 결과가 0건이면 경매 블록이 주인공이 된다 */
.aucsr.lead{background:linear-gradient(180deg,rgba(216,164,73,.09),transparent 60%);
  border:1px solid rgba(216,164,73,.32);border-radius:16px;padding:20px 22px;margin-top:6px}
.aucsr.lead .hd h4{font-size:18px}
.aucsr.lead .eyebrow{color:var(--rust)}
.empty b{color:var(--ink);font-weight:800}
@media (max-width:599px){ .aucst b{font-size:15px} }


/* ══ v0066: 모바일 첫 화면 재설계 ═════════════════════════════════════
   콘텐츠가 나오기 전에 헤더 아이콘 4개 + 검색 + 아이브로우 + 제목 + 태그 +
   문단 + 버튼 2개가 전부 쌓여 있었다. 스크롤을 한참 내려야 술이 보였다.
   레퍼런스(whiskybase)처럼 "한 화면에 한 가지"로 정리한다.
     헤더 = 로고 + 검색      (나머지 이동 경로는 하단 탭바가 이미 담당)
     히어로 = 제목 + 한 줄 + 검색 하나
   버튼 두 개(라벨 찍기 / 랭킹 보기)는 서로 경쟁만 했다. 검색이 주행동이므로
   카메라는 검색창 안으로 넣고, 랭킹은 탭바에 이미 있다. */

@media (max-width:899px){
  /* ── 헤더: 두 줄 → 한 줄 ── */
  .nav .wrap{padding-top:10px;padding-bottom:10px}
  .nav .row{gap:10px}
  .nav .cta{display:none}          /* '병 찍기' 는 히어로 검색창 안으로 */
  .nav .srch.m{display:none}       /* 헤더 하단 검색줄 제거 — 히어로에 있다 */
  .logo b{font-size:19px}

  /* ── 히어로 ── */
  .hero{padding:30px 0 34px}
  .hero .wrap{display:block}
  .hero-tx{max-width:none}
  .hero .h{font-size:clamp(30px,8.6vw,40px);line-height:1.14;letter-spacing:-.045em;
    margin:0 0 14px;word-break:keep-all}
  .hero .lead{font-size:14.5px;line-height:1.62;color:#cbbba8;margin:0 0 20px;
    word-break:keep-all}
  .hero .lead b{color:#fff;font-weight:700}
  .hero .brm{display:none}

  /* 통계 3개는 히어로에서 빼고 아래로 (첫 화면을 가볍게) */
  .hero .stats{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:left}
  .hero .stats b{font-size:19px;letter-spacing:-.04em}
  .hero .stats span{font-size:10.5px;line-height:1.35}
}

/* ── 검색창: 아이콘 + 입력 + 카메라 (데스크톱/모바일 공통) ── */
.herosearch{position:relative;display:flex;align-items:center;gap:0;
  background:#fff;border-radius:14px;padding:0;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.22)}
.herosearch .i{width:19px;height:19px;flex:none;margin-left:16px;
  fill:none;stroke:#98897b;stroke-width:2;stroke-linecap:round}
.herosearch input{flex:1;min-width:0;border:0;outline:0;background:none;
  font:inherit;font-size:16px;color:var(--ink);padding:16px 12px}
.herosearch input::placeholder{color:#a99c8e}
.herosearch button{display:none}
.herosearch .cam{flex:none;display:flex;align-items:center;justify-content:center;
  width:52px;align-self:stretch;background:var(--rust);color:#fff;text-decoration:none;
  transition:filter .14s}
.herosearch .cam:hover{filter:brightness(1.08)}
.herosearch .cam svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.herohint{margin-top:12px;font-size:12.5px;color:#a2958a}
.herohint a{color:var(--gold);font-weight:600;text-decoration:none}
.herohint a:hover{text-decoration:underline}

@media (min-width:900px){
  .hero .lead{font-size:16px;line-height:1.65;color:#cbbba8;margin:0 0 24px;max-width:30em}
  .hero .lead b{color:#fff}
  .hero .brm{display:inline}
  .herosearch{max-width:520px}
}


/* ══ v0066: 섹션 리듬 — 레퍼런스와 같은 호흡 ═══════════════════════════
   기존엔 섹션 간 여백이 들쭉날쭉하고 제목·설명·콘텐츠 간격이 좁아
   전체가 빽빽해 보였다. 레퍼런스는 "작은 라벨 → 큰 제목 → 한 줄 → 여백 → 콘텐츠". */
@media (max-width:899px){
  .sec{padding:38px 0 6px}
  .sec .eyebrow{font-size:10.5px;letter-spacing:.16em;margin-bottom:9px}
  .sec .h,.sec h3.h{font-size:clamp(22px,6.2vw,27px);line-height:1.2;letter-spacing:-.04em}
  .sec .head p,.sec>.wrap>p{font-size:13.5px;line-height:1.6;color:var(--ink3);
    margin-top:8px;word-break:keep-all}
  .rails{margin-top:22px}
  .rail-grid,.cards{gap:12px}

  /* 카드 내부 위계: 브랜드(작게·컬러) → 이름(굵게) → 숫자(크게) */
  .rc .eyebrow,.card .eyebrow{font-size:9.5px;letter-spacing:.13em;color:var(--rust)}
  .rc b,.card .tx b{letter-spacing:-.035em}
  .rc .sc em,.card .sc em{font-size:19px;font-weight:800;letter-spacing:-.04em}}



/* ══ v0067: 경매 가이드 카드 — 최소 단위로 ═════════════════════════════
   카드 하나가 250px 를 먹고 있었다. 원인은 중복:
     차이 금액이 두 번(막대 아래 + 푸터), 비율도 두 번(해외 43% + +131%).
   같은 사실을 두 번 말하면 카드만 커지고 읽히지는 않는다.
   정보는 한 번씩만: 이름·프리미엄 / 두 금액 / 막대 / 차이·근거. */
/* ══ v0068: 로트에 국내가 표기 ═════════════════════════════════════════
   "지금 €190 에 올라온 이 술, 한국에선 42만원" — 이게 이 서비스의 존재 이유다.
   현재가와 나란히 두어 판단이 한 줄에서 끝나게 한다. */
.lot .krbox{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--line);font-size:12px;color:var(--ink3)}
.lot .krbox .kn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.lot .krbox .kn b{color:var(--ink2);font-weight:600}
.lot .krbox .kp{font-weight:800;font-size:14px;color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.lot .krbox .kp i{font-style:normal;font-size:11px;font-weight:500;color:var(--ink3)}
.lot .krbox em{font-style:normal;font-size:11px;font-weight:700;color:var(--rust);
  background:rgba(184,72,58,.09);border:1px solid rgba(184,72,58,.26);
  padding:2px 7px;border-radius:6px;white-space:nowrap}
@media (max-width:599px){
  .lot .krbox{font-size:11.5px;gap:7px}
  .lot .krbox .kp{font-size:13px}
}


/* ══ v0069: 경매 가이드 필터·안내 정리 ═════════════════════════════════
   칩 18개가 3줄, 안내가 3덩이(마감 배지 / 근거 건수 / 산출 주석)로 흩어져
   정작 목록은 화면 밖에 있었다. 선택 컨트롤 3개 + 안내 한 줄로 접는다. */
.ameta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:14px 0 18px;
  padding:10px 14px;background:var(--paper2);border-radius:11px;
  font-size:12px;color:var(--ink3);letter-spacing:-.01em}
.ameta b{color:var(--ink);font-weight:700}
.ameta .dot{width:7px;height:7px;border-radius:50%;background:var(--up);flex:none;
  box-shadow:0 0 0 3px rgba(46,166,111,.18)}
.ameta .sp{color:var(--line)}
.ameta .anote-t{border:0;background:none;color:var(--rust);font:inherit;font-size:11.5px;
  font-weight:700;cursor:pointer;padding:2px 4px;margin-left:auto}
.ameta .anote{flex-basis:100%;margin-top:8px;padding-top:9px;
  border-top:1px solid var(--line);font-size:11.5px;line-height:1.65;color:var(--ink3)}
.ameta .anote b{color:var(--ink2)}
@media (max-width:599px){
  .ameta{font-size:11.5px;gap:6px;padding:9px 12px}
  .ameta .anote-t{margin-left:0}
}


/* ══ v0070: 경매 차트 축 정리 ═══════════════════════════════════════════
   x축 마지막 두 라벨(26-06 / 26-08)이 붙어 "26-0626-08" 로 겹쳐 보였다.
   y축도 €799 · €540 같은 데이터값이 그대로 눈금이 되어 읽히지 않았다. */
.apchart .ax{font-size:11px;fill:var(--ink3);text-anchor:end;
  font-family:Archivo,system-ui;font-variant-numeric:tabular-nums}
.apchart .ax.mid{text-anchor:middle}
.ap-ft{align-items:center}
.ap-ft span{font-variant-numeric:tabular-nums}
.ap-ft em{font-style:normal;color:var(--ink3);font-size:11.5px}
@media (max-width:599px){
  .apchart .ax{font-size:10px}
  .ap-ft{flex-direction:column;align-items:flex-start;gap:6px}
}


/* ══ v0072: 검색에 해외 경매 탭 ═══════════════════════════════════════
   "macallan" 검색 시 국내 190병만 보이고, 경매 기록 2만여 건은
   목록 50개 아래에 12건만 파묻혀 있었다. 탭으로 올린다. */
.tabs button[data-auc]{position:relative}
.tabs button[data-auc]::before{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--rust);vertical-align:middle;margin-right:6px}
#aucfull{margin-top:16px}
#aucfull .aucst{margin:0 0 16px}


/* ══ v0073: 경매를 제품 단위로 ═════════════════════════════════════════
   맥캘란 낙찰 21,925건을 그대로 나열하니 같은 술이 수백 번 반복됐다.
   실제 제품은 345종. 종류로 묶어야 "무엇이 있고 얼마인지" 가 보인다. */
.aphead,.ap{display:grid;grid-template-columns:40px minmax(0,1fr) 58px 58px 66px 62px 140px;
  gap:12px;align-items:center}

/* ══ v0074: 경매 가이드 카드 재설계 ═════════════════════════════════════
   이 목록의 결론은 "국내가 얼마나 더 비싼가" 하나다. 그런데 그 숫자가
   회색 작은 글씨로 맨 아래 있고, 정작 이름 옆 +131% 가 시선을 먹었다.
   차액을 주인공으로 올리고 두 가격·막대는 근거로 내린다. */


/* ══ v0076: 빈티지 표기 ═════════════════════════════════════════════════
   숙성(몇 년 묵혔나)과 빈티지(언제 증류했나)는 다른 정보다.
   같은 12년이라도 1990 증류와 2012 증류는 전혀 다른 술이다. */
.li .col.c3 .vin{display:block;margin-top:2px;font-size:10.5px;color:var(--ink3);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
@media (max-width:899px){ .li .col.c3 .vin{display:none} }

/* 빈티지(증류)와 출시연도는 성격이 다르므로 색으로 구분 */
.li .col.c3 .vin.vt{color:var(--rust)}
.li .col.c3 .vin.rl{color:var(--ink3)}


/* 스펙표 안의 외부 링크 (최근 낙찰 → 경매 원본 로트) */
.spec .speclink{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2);
  transition:color .14s,border-color .14s}
.spec .speclink:hover{color:var(--rust);border-bottom-color:var(--rust)}
.spec .speclink i{font-style:normal;margin-left:5px;font-size:11px;color:var(--ink3)}
.spec .speclink:hover i{color:var(--rust)}


/* ══ v0081: 양조장 이름 온전히 ═══════════════════════════════════════════
   "(주)1932…" 처럼 잘려 무슨 양조장인지 알 수 없었다.
   폭을 넓히되, 법인 형태 표기(농업회사법인·주식회사…)는 서버에서 걷어내
   실제 상호만 남긴다(평균 6.2 → 5.1자). */
.li .col.c3.brew b{white-space:normal;line-height:1.28;word-break:keep-all;
  font-size:12.5px;overflow:visible;text-overflow:clip;display:block}
@media (max-width:899px){ .li .col.c3.brew b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} }


/* ══ v0086: 대표 가격을 앞에 ═══════════════════════════════════════════
   최저가를 헤드라인으로 두면 "그 가격엔 못 산다" 가 된다.
   맥캘란 18 셰리오크 2024 는 98곳 중 40만원이 1곳(이자카야)뿐이고
   나머지는 49만원대였다. 표본 194종 중 94종(48.5%)이 같은 상황.
   → 대부분이 파는 가격대를 크게, 최저가는 근거로 아래에. */
.bt-hero .price b.band{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.045em;
  white-space:nowrap}
.bt-hero .price b.band i{font-style:normal;margin:0 2px;opacity:.5;font-weight:500}
.bt-hero .pxlow{margin-top:9px;padding:8px 12px;border-radius:9px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  font-size:12px;color:#cfc2b2;letter-spacing:-.01em}
.bt-hero .pxlow b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:599px){
  .bt-hero .price b.band{font-size:22px}
  .bt-hero .pxlow{font-size:11.5px;padding:7px 10px}
}


/* ══ v0088: 경매 제품 목록 — 크게, 정보 많게 ═════════════════════════════
   이미지 40px·글씨 13.5px 라 잘 안 보였다. 사진을 키우고 활자를 올린다.
   그리고 살릴 수 있는 정보를 다 싣는다(시리즈·병입자·캐스크·빈티지·병입연도·
   생산병수·거래기간·가격범위). 경매 데이터가 국내보다 훨씬 풍부하다. */
.aphead,.ap{display:grid;
  grid-template-columns:64px minmax(0,1fr) 64px 64px 74px 72px 168px;
  gap:16px;align-items:center}
.aphead{padding:0 14px 10px;font-size:11.5px;color:var(--ink3);letter-spacing:.06em;
  text-transform:uppercase;font-family:Archivo,system-ui;border-bottom:1px solid var(--line)}
.aplist{display:grid}
.ap{padding:14px;border-bottom:1px solid var(--line2);transition:background .14s}
.ap:hover{background:var(--paper2)}
.ap:last-child{border-bottom:0}

.ap .img{width:64px;height:80px;border-radius:8px;overflow:hidden;background:#fff;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line2)}
.ap .img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

.ap .nm{min-width:0}
.ap .nm b{display:block;font-size:15px;font-weight:700;letter-spacing:-.025em;
  line-height:1.32;color:var(--ink)}
.ap .nm .m1{display:block;margin-top:3px;font-size:12px;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap .nm .m2{display:block;margin-top:2px;font-size:11.5px;color:var(--ink3);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ap .c{font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ap .pr{text-align:right}
.ap .pr b{font-size:16px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ap .pr small{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px}
.ap .pr small.rng{font-size:10.5px;opacity:.75}
.ap .pr em{font-style:normal;font-weight:700}
.ap .pr em.up{color:var(--rust)} .ap .pr em.dn{color:var(--up)}

@media (max-width:1099px){
  .aphead,.ap{grid-template-columns:56px minmax(0,1fr) 60px 66px 150px}
  .aphead span:nth-child(4),.aphead span:nth-child(5),
  .ap .c:nth-of-type(2),.ap .c:nth-of-type(3){display:none}
}
@media (max-width:699px){
  .aphead{display:none}
  .ap{grid-template-columns:56px minmax(0,1fr) auto;gap:12px;padding:12px 4px}
  .ap .c{display:none}
  .ap .img{width:56px;height:70px}
  .ap .nm b{font-size:14px;white-space:normal}
  .ap .pr b{font-size:15px}
}


/* 경매 시세 없음 안내 — 섹션을 숨기지 않고 이유를 알린다 */
.aucp.none{background:var(--card);border:1px dashed var(--line);border-radius:16px;
  padding:20px 22px}
.aucp.none .empty.sm{padding:14px 0 4px;font-size:13.5px;line-height:1.7}


/* ══ v0093: 경매장 비교 ═════════════════════════════════════════════════
   두 경매장을 "섞지 않고 나란히". 통화·수수료·배송이 달라 하나의 숫자로
   뭉개면 안 된다. 싼 쪽에만 표시를 준다. */
.vchead,.vc{display:grid;grid-template-columns:56px minmax(0,1fr) 150px 170px 110px;
  gap:14px;align-items:center}
.vchead{padding:0 14px 10px;font-size:11.5px;color:var(--ink3);letter-spacing:.05em;
  text-transform:uppercase;font-family:Archivo,system-ui;border-bottom:1px solid var(--line)}
.vclist{display:grid}
.vc{padding:13px 14px;border-bottom:1px solid var(--line2)}
.vc:last-child{border-bottom:0}
.vc:hover{background:var(--paper2)}
.vc .img{width:56px;height:70px;border-radius:8px;overflow:hidden;background:#fff;
  border:1px solid var(--line2);display:flex;align-items:center;justify-content:center}
.vc .img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.vc .nm{min-width:0}
.vc .nm b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.025em;line-height:1.3}
.vc .nm span{display:block;margin-top:3px;font-size:11.5px;color:var(--ink3)}
.vc .v{padding:7px 10px;border-radius:9px;border:1px solid transparent}
.vc .v b{display:block;font-size:15px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink2)}
.vc .v small{display:block;margin-top:2px;font-size:11px;color:var(--ink3)}
.vc .v.win{background:rgba(46,139,98,.08);border-color:rgba(46,139,98,.28)}
.vc .v.win b{color:var(--up)}
.vc .gap{text-align:right}
.vc .gap em{font-style:normal;font-size:16px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.vc .gap em.dn{color:var(--up)} .vc .gap em.up{color:var(--rust)}
.vc .gap small{display:block;margin-top:2px;font-size:11px;color:var(--ink3)}

/* 병 상세의 경매장별 시세 */
.vsrc{margin-top:14px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px}
.vsrc-hd{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:12px}
.vsrc-hd span{margin-left:8px;font-weight:500;font-size:11px;color:var(--ink3)}
.vsrc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vsrc .vs{padding:11px 13px;border-radius:11px;background:var(--paper2);
  border:1px solid transparent}
.vsrc .vs .nm{display:block;font-size:11px;color:var(--ink3);margin-bottom:4px}
.vsrc .vs b{display:block;font-size:17px;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.vsrc .vs small{display:block;margin-top:2px;font-size:11px;color:var(--ink3)}
.vsrc .vs.win{background:rgba(46,139,98,.09);border-color:rgba(46,139,98,.3)}
.vsrc .vs.win b{color:var(--up)}
.vsrc-ft{margin-top:11px;padding-top:10px;border-top:1px solid var(--line2);
  font-size:12.5px;color:var(--ink2)}
.vsrc-ft em{font-style:normal;font-weight:800;color:var(--up)}

@media (max-width:899px){
  .vchead{display:none}
  .vc{grid-template-columns:56px minmax(0,1fr) 92px;gap:11px;padding:12px 4px}
  .vc .v{display:none}
  .vsrc-row{grid-template-columns:1fr}
}


/* ══ v0094: 통합 검색 ═══════════════════════════════════════════════════
   국내 판매 + 해외 경매 2곳을 한 화면에. 출처는 배지로 구분한다.
   사진은 앞·뒤 2장 — 경매 원본에 99.9% 가 2장 이상 있다. */
.astabs{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.astabs button{border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:8px 16px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink2);
  cursor:pointer;transition:all .14s}
.astabs button small{margin-left:6px;font-size:11.5px;color:var(--ink3);font-weight:500}
.astabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.astabs button.on small{color:rgba(255,255,255,.7)}
.astabs button:hover:not(.on){border-color:var(--ink3)}

.aslist{display:grid;gap:10px}

/* 앞·뒤 2장 */





/* ══ v0096: 스캔 결과 ═══════════════════════════════════════════════════
   못 찾아도 "무엇을 읽었는지" 는 보여준다. 그래야 다음 행동을 정할 수 있다.
   확신도에 따라 테두리 색을 달리해 신뢰 수준을 전달한다. */
.visbox{border-radius:14px;padding:14px 16px;border:1px solid var(--line);
  background:var(--card);margin-top:4px}
.visbox.ok {border-color:rgba(46,139,98,.4);  background:rgba(46,139,98,.05)}
.visbox.mid{border-color:rgba(216,164,73,.45); background:rgba(216,164,73,.06)}
.visbox.low{border-color:rgba(184,72,58,.35);  background:rgba(184,72,58,.04)}
.visbox .vh{display:flex;justify-content:space-between;align-items:baseline;
  font-size:11.5px;color:var(--ink3);letter-spacing:-.01em;margin-bottom:7px}
.visbox .vh em{font-style:normal;font-weight:700;color:var(--ink2);
  font-variant-numeric:tabular-nums}
.visbox .vr{font-size:15px;line-height:1.45;color:var(--ink);letter-spacing:-.02em}
.visbox .vr b{font-weight:800}
.visbox .vt{margin-top:8px;padding-top:8px;border-top:1px solid var(--line2);
  font-size:11.5px;color:var(--ink3);line-height:1.5;word-break:break-all}
.scanacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.scanacts .more-btn{margin-top:0}


/* ══ v0097: 스캔 후보 — 스펙과 근거를 보여준다 ═══════════════════════════
   도수·빈티지가 값을 가른다. 맥캘란 12년 안에서만 13만원~760만원(58배).
   그래서 "왜 이 후보인지"(도수 일치 · 빈티지 일치)를 명시한다. */
.visbox .vr u{text-decoration:none;font-weight:800;color:var(--rust);
  border-bottom:2px solid rgba(184,72,58,.3)}
.sclist{display:grid;gap:8px}
.scc{display:grid;grid-template-columns:56px minmax(0,1fr) 108px;gap:13px;align-items:center;
  padding:11px 13px;background:var(--card);border:1px solid var(--line);border-radius:13px;
  color:var(--ink);text-decoration:none;transition:border-color .14s,box-shadow .14s}
.scc:hover{border-color:var(--rust);box-shadow:var(--sh-2)}
.scc .im{width:56px;height:68px;border-radius:8px;overflow:hidden;background:#fff;
  border:1px solid var(--line2);display:flex;align-items:center;justify-content:center}
.scc .im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.scc .tx{min-width:0}
.scc .bd{display:flex;gap:5px;margin-bottom:4px;flex-wrap:wrap}
.scc .bd em{font-style:normal;font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px}
.scc .bd em.kr{background:rgba(46,139,98,.11);color:var(--up)}
.scc .bd em.auc{background:rgba(184,72,58,.1);color:var(--rust)}
.scc .bd em.why{background:var(--paper3);color:var(--ink2);font-weight:600}
.scc .tx b{display:block;font-size:14px;font-weight:700;letter-spacing:-.025em;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scc .tx span{display:block;margin-top:3px;font-size:11.5px;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.scc .pr{text-align:right}
.scc .pr b{font-size:14.5px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.scc .pr small{display:block;font-size:10.5px;color:var(--ink3);margin-top:2px}
@media (max-width:599px){
  .scc{grid-template-columns:48px minmax(0,1fr) 88px;gap:10px;padding:10px}
  .scc .im{width:48px;height:60px}
  .scc .tx b{font-size:13px}
}

/* ══ v0105: 경매 카드 — 8장 격자 유지, 카드 안을 표로 ═══════════════════
   격자는 그대로 두되 카드 내부를 라벨/값 2열 표로 정리한다.
   화살표·막대 같은 장식을 없애고 정렬만으로 비교가 읽히게 한다. */
.agrid{display:grid;gap:12px}
@media (min-width:700px){ .agrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .agrid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1280px){ .agrid{grid-template-columns:repeat(4,1fr)} }

.ag{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:14px 16px 12px;color:var(--ink);text-decoration:none;
  transition:border-color .15s,box-shadow .15s}
.ag:hover{border-color:rgba(184,72,58,.38);box-shadow:0 6px 18px rgba(28,20,14,.08)}

/* 이름 */
/* 병 사진을 키운다 — 30px 은 무슨 술인지 알아보기 어려웠다 */
.ag-hd{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;
  padding-bottom:12px;border-bottom:1px solid var(--line2)}
.ag-hd img{width:44px;height:56px;object-fit:contain;mix-blend-mode:multiply}
.ag-t{min-width:0}
.ag-t b{display:block;font-size:13px;font-weight:700;letter-spacing:-.03em;line-height:1.28;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-t span{display:block;margin-top:2px;font-size:10.5px;color:var(--ink3);
  font-variant-numeric:tabular-nums}

/* 카드 안 표: 라벨 왼쪽 · 값 오른쪽 정렬 */
.ag-dl{display:grid;grid-template-columns:auto 1fr;gap:0 10px;margin:0;padding-top:9px}
.ag-dl dt{font-size:11px;color:var(--ink3);line-height:1.9;white-space:nowrap}
.ag-dl dd{margin:0;text-align:right;font-size:13.5px;font-weight:600;line-height:1.9;
  letter-spacing:-.03em;color:var(--ink2);font-variant-numeric:tabular-nums}
.ag-dl dd.kr{color:var(--ink);font-weight:700}
.ag-dl dt.g{padding-top:7px;margin-top:5px;border-top:1px dashed var(--line2);color:var(--ink2)}
.ag-dl dd.g{padding-top:7px;margin-top:5px;border-top:1px dashed var(--line2);
  color:var(--rust);font-weight:800;font-size:14px}
.ag-dl dd.g em{font-style:normal;margin-left:6px;font-size:11px;font-weight:700;
  color:var(--rust);background:rgba(184,72,58,.09);border-radius:5px;padding:2px 6px}

@media (max-width:599px){
  .ag{padding:13px 14px 11px}
  .ag-dl dd{font-size:13px}
  .ag-dl dd.g{font-size:13.5px}
}


/* ══ v0106: 모바일 히어로 — 이주의 술이 팝업처럼 떠 있던 문제 ══════════
   .pick 에 margin:-84px 가 걸려 히어로를 덮고 있었다(데스크톱 겹침 배치의
   잔재). 모바일에서는 히어로 아래로 자연스럽게 이어져야 한다. */
@media (max-width:899px){
  .hero{padding:28px 0 34px}
  .hero .pick{order:3;margin-top:26px}
  /* 히어로 안에서 어두운 배경 위에 놓이므로 카드를 살짝 밝게 띄운다 */
  .pick{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
    box-shadow:none;backdrop-filter:blur(2px)}
  .pick .img{height:180px;background:#fff;border-radius:12px}
  .pick h2{font-size:19px;line-height:1.3;margin-top:10px}
  .pick .meta{font-size:12px;line-height:1.5}
  .pick .sc{margin-top:14px;align-items:center}
  .pick .sc .r b{font-size:25px}
  .pick .sc .p b{font-size:19px}
  .pick .b{height:44px;font-size:13.5px;margin-top:14px}
  .pick .eyebrow{font-size:10px;letter-spacing:.14em}
}


/* ══ v0106: 모바일 마감 ══════════════════════════════════════════════════
   구조적 겹침·넘침은 없었다. 손에 닿는 감각을 다듬는다. */
@media (max-width:899px){
  /* 가로 넘침 원천 차단 — 긴 영문명·URL 이 화면을 밀어내는 것을 막는다 */
  html,body{overflow-x:hidden}
  .wrap{max-width:100%}
  .li b,.rc b,.asc .tx b,.scc .tx b{word-break:keep-all;overflow-wrap:anywhere}

  /* 터치 영역 44px 확보 (애플·구글 권장 최소치) */
  .lvsel select,.tools select,#sort{min-height:44px}
  .fg-ch button,.astabs button{min-height:40px}
  .more-btn{min-height:46px}

  /* 스크롤 관성 + 스냅 — 가로 레일이 뚝뚝 끊기지 않게 */
  .cards,.rail-x{-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    scroll-padding-left:20px}
  .cards>*,.rail-x>*{scroll-snap-align:start}

  /* 탭 눌림 피드백 — 모바일은 hover 가 없어 반응이 없으면 먹통처럼 느껴진다 */
  .li:active,.rc:active,.ag:active,.asc:active,.scc:active,.card:active{
    transform:scale(.985);transition:transform .08s}
  a,button{-webkit-tap-highlight-color:rgba(184,72,58,.12)}

  /* 표 계열은 가로 스크롤 대신 열을 줄인다(이미 적용). 남은 곳만 안전장치 */
  .lthead,.ltlist{min-width:0}

  /* 입력 확대 방지는 상단 .srch 규칙에서 !important 로 이미 처리됨 */
}


/* ══ v0107: 메가메뉴 표시 규칙 일원화 ═══════════════════════════════════
   .mega 의 display 규칙이 18개로 흩어져 세대가 겹쳐 있었다.
   그 결과 모바일에서 데스크톱 규칙이 이겨 !important 로 눌러야 했다.
   여기 한 곳으로 모은다. 아래 세 줄이 최종 판정이다. */
.links .mm .mega{display:none}
@media (min-width:900px){
  .links .mm.open .mega{display:flex}
}


/* ══ v0108: 경매 가이드 섹션 여백 ═══════════════════════════════════════
   ① "해외 경매 전체" 가 위에 붙어 보였다 — align-items:flex-end 가
      설명문 하단선에 맞추는데, 제목 블록이 3줄(아이브로우+제목2줄+설명)이라
      버튼이 그 끝에 걸린다. 제목 블록만 보면 위쪽이라 어색하다.
      → 제목 묶음의 시각적 중심(제목 줄)에 맞춘다.
   ② 헤더와 격자가 바로 붙어 있었다. 사이 여백을 준다. */
.aucsec .head{align-items:center}
.aucsec .head>div{padding-bottom:2px}
.aucsec .head p{margin-top:9px;max-width:56ch}
.aucsec .agrid{margin-top:22px}
/* 섹션 자체의 위아래 숨통 — 앞 레일과 뒤 섹션에서 충분히 떨어뜨린다 */
.aucsec{margin-top:8px;padding-bottom:12px}

@media (max-width:899px){
  .aucsec .head{align-items:flex-start;flex-direction:column;gap:12px}
  .aucsec .head .more{align-self:flex-start}
  .aucsec .agrid{margin-top:18px}
}


/* ══ v0109: 약관·개인정보처리방침 ═══════════════════════════════════════
   법적 문서는 훑는 게 아니라 읽는 것이다. 본문 폭을 좁히고 행간을 넓힌다. */
.legal-doc{max-width:760px}
.ldoc{margin-top:26px;font-size:14.5px;line-height:1.85;color:var(--ink2)}
.ldoc h3{margin:30px 0 10px;font-size:15.5px;font-weight:700;color:var(--ink);
  letter-spacing:-.025em}
.ldoc h3:first-child{margin-top:0}
.ldoc p{margin:0 0 12px}
.ldoc p.lead-p{padding:14px 16px;background:var(--paper2);border-radius:11px;
  border-left:3px solid var(--rust);margin-bottom:26px}
.ldoc p.note{font-size:13px;color:var(--ink3);background:var(--paper2);
  padding:12px 14px;border-radius:10px;line-height:1.75}
.ldoc ul{margin:0 0 14px;padding-left:19px}
.ldoc li{margin-bottom:7px}
.ldoc b{color:var(--ink);font-weight:700}
.ldoc a{color:var(--rust);text-decoration:underline;text-underline-offset:2px}

.ltab{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:13.5px}
.ltab th,.ltab td{padding:10px 12px;border:1px solid var(--line);text-align:left;
  vertical-align:top}
.ltab th{background:var(--paper2);font-weight:600;color:var(--ink);font-size:12.5px;
  white-space:nowrap}

.legal-foot{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink3);line-height:1.8}
.legal-foot b{display:block;color:var(--ink);font-size:14px;font-weight:700;margin-bottom:3px}
.legal-foot a{color:var(--rust)}

@media (max-width:599px){
  .ldoc{font-size:14px;line-height:1.8}
  .ldoc h3{font-size:15px;margin:26px 0 9px}
  .ltab{font-size:12.5px}
  .ltab th,.ltab td{padding:8px 9px}
}


/* ══ v0110: 데이터 규모를 전면에 ═══════════════════════════════════════
   117만 건의 경매 낙찰 기록이 이 서비스의 최대 자산인데 통계에 없었다.
   히어로 첫 칸으로 올리고 강조한다. */
.stats{margin-top:30px;padding-bottom:110px;display:grid;
  grid-template-columns:repeat(4,auto);gap:0 34px;justify-content:start}
.stats>div.hi b{color:var(--gold)}
.stats>div.hi span i{display:block;font-style:normal;margin-top:2px;font-size:10.5px;
  color:rgba(255,255,255,.42);letter-spacing:0}

/* 푸터 — 데이터 규모를 브랜드 설명 아래에 */
.foot .fbrand p{margin-top:10px;line-height:1.65}
.foot .fbrand p b{color:#cfd8de}
.fstat{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fstat span{font-size:11.5px;color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);border-radius:7px;padding:5px 10px;
  letter-spacing:-.01em;white-space:nowrap}
.fstat b{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}

@media (max-width:899px){
  .stats{grid-template-columns:repeat(2,1fr);gap:16px 20px}
}
@media (max-width:420px){
  .fstat span{font-size:11px;padding:4px 8px}
}


/* ══ v0112: 경매 가이드 — 필터·요약·표 좌우 정렬 ═════════════════════
   표 행(.li)은 좌우 14px 안쪽 여백을 갖는데 필터 바(.lvbar)는 0 이라
   셀렉트 왼쪽 끝이 표의 번호 열보다 안쪽으로 들어가 있었다.
   같은 축에 세운다: 셀렉트 라벨·값과 표 행의 좌측선을 14px 로 통일. */
.aucpage .lvbar{padding:0 14px}
.aucpage .lvsel>span{padding-left:12px}   /* 셀렉트 테두리 1.5 + 안쪽 11 ≈ 12 */
.aucpage .ameta{margin-left:14px;margin-right:14px}

/* 요약 줄과 표 사이 숨통 */
.aucpage .ameta{margin-top:12px;margin-bottom:6px}

@media (max-width:899px){
  .aucpage .lvbar{padding:0}
  .aucpage .lvsel>span{padding-left:2px}
  .aucpage .ameta{margin-left:0;margin-right:0}
}

/* ══ v0123: 첫 화면 · 여백 정리 ════════════════════════════════════════
   실측한 문제 다섯 가지를 한 축에서 잡는다. 전부 "빈 곳이 내용보다 크다" 는 같은 병이다. */

/* ① 히어로 아래 검은 공백 — 정체는 .stats 의 padding-bottom:110px 이었다.
      모바일 히어로 하단에 110px 짜리 빈 검은 띠가 그대로 깔린다.
      통계 아래에 더 놓을 게 없으므로 숨통만 남긴다. */
.stats{padding-bottom:34px}
@media (max-width:899px){
  .stats{margin-top:22px;padding-bottom:26px;gap:14px 18px}
  .stats div b{font-size:24px}
  .stats div span{font-size:11px;margin-top:4px}
  .hero{padding-bottom:0}
}

/* ② 경매 가이드 카드가 모바일에서 폭을 통째로 먹었다 → 2열.
      카드 안도 줄간격 1.9 로 늘어져 있어 조인다. */
.agrid{grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:1000px){ .agrid{grid-template-columns:repeat(3,1fr);gap:12px} }
@media (min-width:1280px){ .agrid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:899px){
  .ag{padding:11px 12px 10px;border-radius:12px}
  .ag-hd{grid-template-columns:34px minmax(0,1fr);gap:9px;padding-bottom:9px}
  .ag-hd img{width:34px;height:44px}
  .ag-t b{font-size:12px;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .ag-t span{font-size:10px}
  .ag-dl{padding-top:7px;gap:0 6px}
  .ag-dl dt{font-size:10px;line-height:1.6}
  .ag-dl dd{font-size:12px;line-height:1.6}
  .ag-dl dt.g,.ag-dl dd.g{padding-top:6px;margin-top:4px}
  .ag-dl dd.g{font-size:12.5px}
  .ag-dl dd.g em{display:block;margin:2px 0 0;padding:1px 5px;font-size:10px}
}

/* ③ "오늘 당기는 쪽으로" 리듬 — 제목 → 칩 → 카드 간격이 들쭉날쭉했다.
      44 / 18 / 14 을 32 / 14 / 12 로 좁혀 한 호흡으로 만든다. */
@media (max-width:899px){
  .rails{padding-top:32px}
  .rails .chips{margin-top:14px}
  .rail-grid{margin-top:12px;padding-bottom:8px}
  .rails .rail-grid{padding-bottom:10px}
  .rails .sec h3{margin-top:6px}
}

/* ④ 모바일에서 "이번 주 새로 들어온 병" 은 숨긴다.
      첫 화면이 너무 길어진다. 데스크톱은 가로로 4장이라 부담이 없어 그대로 둔다. */
@media (max-width:899px){ .rails.nw-sec{display:none} }

/* ⑤ 스캔 화면의 드롭 영역이 화면을 꽉 채웠다.
      사진을 올리기 전엔 안내만 하면 되므로 높이를 줄이고, 올린 뒤에만 키운다. */
.scan .drop{min-height:170px;aspect-ratio:auto}
.scan .drop:has(img){min-height:0;aspect-ratio:3/4;max-height:56vh}
@media (min-width:900px){ .scan .drop{min-height:220px} }

/* ⑥ 모바일 헤더 우상단 스캔 버튼 — 서비스의 핵심 동작인데 모바일 헤더에 없었다.
      헤더 하단 검색줄은 v0100대에 히어로로 옮기며 감췄고, 그때 찍기 입구도 함께 사라졌다. */
.nav .row{position:relative}
.navscan{display:none}
@media (max-width:899px){
  .navscan{display:inline-flex;align-items:center;gap:6px;margin-left:auto;
    height:34px;padding:0 12px;border-radius:999px;
    background:var(--rust);color:#fff;text-decoration:none;
    font-size:12.5px;font-weight:700;letter-spacing:-.02em;
    box-shadow:0 4px 14px rgba(184,72,58,.32)}
  .navscan svg{width:15px;height:15px;fill:none;stroke:currentColor;
    stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .navscan:active{filter:brightness(.94)}
}

/* ⑦ 히어로 조판 — 투박하던 지점 세 곳.
      제목이 38px/max-width 340px 라 두 줄이 어중간하게 끊겼고,
      리드문과 검색창 사이가 붙어 있었다. */
@media (max-width:899px){
  .hero{padding-top:30px}
  .hero h1{font-size:34px;max-width:9.5em;line-height:1.14;letter-spacing:-.05em}
  .hero .lead{margin-top:12px;font-size:13.5px;line-height:1.62;max-width:22em}
  .hero .herosearch{margin-top:20px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.28)}
  .hero .herosearch input{font-size:16px;padding:14px 10px}
  .hero .herosearch .cam{width:48px}
  .herohint{margin-top:10px;font-size:12px}
}

/* ⑧ 로고 마크 — 30px 에 그라디언트 사각형 + 흰 잔이라 뭉개져 보였다.
      모서리를 조금 더 둥글게, 드롭섀도는 얕게. 워드마크 자간도 조인다. */
.logo .mark{filter:drop-shadow(0 1px 4px rgba(0,0,0,.22))}
.logo b{letter-spacing:-.05em}
@media (max-width:899px){
  .logo{gap:8px}
  .logo .mark{width:27px;height:27px}
  .logo b{font-size:18px}
}