/* 귀카(GWICAR) 시제품 2차 — 흰 테마(기본: Cars & Bids + 크림) / 검은 테마(DriveGT) */
:root{
  --bg:#ffffff;--bg2:#f6f6f4;--card:#ffffff;--card2:#f8f8f7;--ink:#111214;--sub:#6c6d72;--faint:#a2a3a8;
  --line:#ebebe8;--chip:#f2f2f0;--chipon:var(--acc);--chipink:#ffffff;
  --acc:#3366dd;--acctx:#3366dd;--btn:var(--acc);--btnink:#ffffff;--accsoft:#edf2ff;
  --warn:#c2410c;--warnbg:#fff2ea;--ph:#ececea;--ph2:#dedeDB;--tab:rgba(255,255,255,.94);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
  --r:14px;--r2:20px;--hdr:56px;--tabh:64px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0b0d12;--bg2:#0f1218;--card:#151922;--card2:#1a1f29;--ink:#f1f3f7;--sub:#9aa3b2;--faint:#677085;
  --line:#232937;--chip:#1c212b;
  --acctx:var(--ink);--accsoft:#17223c;
  --warn:#ff9c66;--warnbg:#36200f;--ph:#1b2029;--ph2:#252c38;--tab:rgba(17,21,28,.92);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Pretendard Variable",Pretendard,"Malgun Gothic",system-ui,sans-serif;letter-spacing:-.15px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
svg.i{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.s{width:18px;height:18px}
svg.i.xs{width:15px;height:15px}
.muted{color:var(--sub)}
.faint{color:var(--faint)}
.num{font-variant-numeric:tabular-nums}
.hide{display:none!important}

/* ── 머리 ───────────────────────── */
.hdr{position:sticky;top:0;z-index:30;height:var(--hdr);display:flex;align-items:center;gap:8px;padding:0 12px 0 16px;background:var(--tab);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:baseline;gap:6px;font-weight:800;font-size:20px;letter-spacing:-.6px;white-space:nowrap}
.logo small{font-size:11px;font-weight:600;color:var(--sub);letter-spacing:0}
.hnav{display:none}
.hsp{flex:1}
.ib{width:40px;height:40px;border-radius:99px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);position:relative}
.ib:hover{background:var(--chip)}
.ib .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:9px;background:var(--warn);border:2px solid var(--bg)}
.hsearch{display:none}
.btn.hsell{display:none}
#hchips{padding-top:10px;padding-bottom:2px}

/* ── 아래 탭 ───────────────────── */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--tabh) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;background:var(--tab);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line)}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--faint);font-weight:600}
.tabs a.on{color:var(--ink)}
.tabs .plus{justify-self:center;width:52px;height:52px;border-radius:99px;background:var(--btn);color:var(--btnink);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.18);margin-top:-14px}
.tabs .plus svg{width:26px;height:26px;stroke-width:2.2}

main{padding:0 0 calc(var(--tabh) + 28px);min-height:calc(100vh - var(--hdr))}
.wrap{padding:0 16px}
.sec{margin-top:26px}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.sh h2{margin:0;font-size:19px;letter-spacing:-.4px;font-weight:750}
.sh h2 small{font-size:12px;font-weight:600;color:var(--sub);margin-left:6px;letter-spacing:0}
.sh a.more{font-size:13px;color:var(--sub);white-space:nowrap}
.pg-title{padding:18px 16px 4px}
.pg-title h1{margin:0;font-size:26px;letter-spacing:-.7px;font-weight:800}
.pg-title p{margin:4px 0 0;color:var(--sub);font-size:14px}

/* 칩 */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 16px;margin:0 -16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:var(--card);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.chip.on{background:var(--chipon);border-color:var(--chipon);color:var(--chipink)}
.chip.dd::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:2px;opacity:.7}
.tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:6px;background:var(--chip);font-size:12px;font-weight:600;color:var(--sub);white-space:nowrap}
.tag.warn{background:var(--warnbg);color:var(--warn)}
.tag.acc{background:var(--accsoft);color:var(--acctx)}
.tag.ink{background:var(--ink);color:var(--bg)}
.tbd{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;border:1px dashed var(--faint);color:var(--sub);font-size:12px;font-weight:600;white-space:nowrap}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--chip);border-radius:12px;padding:3px;gap:3px}
.seg button{height:36px;border:0;border-radius:9px;background:transparent;font-weight:650;color:var(--sub);font-size:14px}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.utabs{display:flex;gap:18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.utabs::-webkit-scrollbar{display:none}
.utabs button{flex:none;border:0;background:none;padding:10px 0;font-size:14px;font-weight:650;color:var(--faint);border-bottom:2px solid transparent;margin-bottom:-1px}
.utabs button.on{color:var(--ink);border-bottom-color:var(--ink)}

/* 단추 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-weight:700;font-size:15px;white-space:nowrap}
.btn.pri{background:var(--btn);border-color:var(--btn);color:var(--btnink)}
.btn.sm{height:34px;padding:0 12px;font-size:13px;border-radius:10px}
.btn.wide{width:100%}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.45;cursor:default}
.link{color:var(--acctx);font-weight:650;text-decoration:underline;text-underline-offset:2px}

/* ── 사진 ──────────────────────── */
.ph{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--ph),var(--ph2));border-radius:var(--r);aspect-ratio:16/10}
.ph>img{width:100%;height:100%;object-fit:cover}
.ph.sq{aspect-ratio:1/1}.ph.tall{aspect-ratio:4/5}.ph.wide{aspect-ratio:16/9}
.ph .none{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--faint);font-size:12px;font-weight:600}
.ph .none svg{width:58%;max-width:220px;height:auto}
.ex{position:absolute;left:0;right:0;top:0;height:22px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.2px;color:#fff;background:repeating-linear-gradient(135deg,rgba(17,18,20,.78) 0 9px,rgba(17,18,20,.66) 9px 18px);z-index:2}
.cr{position:absolute;right:0;bottom:0;max-width:58%;padding:10px 8px 4px 24px;font-size:10px;line-height:1.3;color:rgba(255,255,255,.88);background:linear-gradient(90deg,transparent,rgba(0,0,0,.45) 24px);border-top-left-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2}
.pill{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:9px;background:rgba(17,18,20,.82);color:#fff;font-size:13px;font-weight:700;z-index:2}
.pill .lb{font-weight:500;opacity:.75}
.fav{position:absolute;right:8px;top:30px;width:36px;height:36px;border-radius:99px;border:0;background:rgba(17,18,20,.45);color:#fff;display:flex;align-items:center;justify-content:center;z-index:3}
.fav.on svg{fill:#ff5a5a;stroke:#ff5a5a}
.credit{margin-top:6px;font-size:11px;line-height:1.35;color:var(--faint);overflow-wrap:anywhere}
.credit a{text-decoration:underline;text-underline-offset:2px}

/* ── 스토리 동그라미 ──────────── */
.stories{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:14px 16px 4px}
.stories::-webkit-scrollbar{display:none}
.story{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink);text-align:center}
.story .rg{width:66px;height:66px;border-radius:99px;padding:2.5px;background:var(--acc)}
.story .rg.seen{background:var(--line)}
.story .in{width:100%;height:100%;border-radius:99px;border:2.5px solid var(--bg);overflow:hidden;background:linear-gradient(160deg,var(--ph),var(--ph2));display:flex;align-items:center;justify-content:center;color:var(--sub)}
.story .in img{width:100%;height:100%;object-fit:cover}
.story span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story.me .in{background:var(--chip)}

/* ── 큰 주목 카드 ─────────────── */
.feat .ph{aspect-ratio:4/3;border-radius:var(--r2)}
.feat .lbl{position:absolute;left:12px;top:32px;z-index:2;height:24px;padding:0 9px;border-radius:7px;background:rgba(255,255,255,.92);color:#111;font-size:11px;font-weight:800;display:flex;align-items:center;letter-spacing:.3px}
.feat .ttl{position:absolute;left:14px;right:14px;bottom:44px;z-index:2;color:#fff;font-size:22px;font-weight:800;letter-spacing:-.5px;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.feat .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6));z-index:1}

/* ── 매물 카드(Cars & Bids) ───── */
.lgrid{display:grid;grid-template-columns:1fr;gap:26px}
.lc{display:block;position:relative}
.lc .ph{border-radius:var(--r)}
.lc .hd{display:flex;align-items:flex-start;gap:10px;margin-top:10px}
.lc .t{flex:1;min-width:0;font-weight:750;font-size:16.5px;letter-spacing:-.3px;line-height:1.3}
.lc .s{font-size:14px;color:var(--ink);opacity:.86;margin-top:3px;line-height:1.4}
.lc .rg{font-size:13px;color:var(--sub);margin-top:2px}
.lc .tg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.star{flex:none;width:30px;height:30px;border:0;background:none;color:var(--ink);display:flex;align-items:center;justify-content:center;margin:-3px -4px 0 0}
.star.on svg{fill:currentColor}
.lc.mini .t{font-size:14.5px}
.lc.mini .s{font-size:12.5px}

/* 가로 넘김 줄 */
.hs{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.hs::-webkit-scrollbar{display:none}
.hs>*{scroll-snap-align:start;min-width:0}
.hs.w44{grid-auto-columns:44%}

/* ── 릴스 2열(갤러리) ─────────── */
.reels{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.reel{display:block;min-width:0}
.reel .ph{aspect-ratio:4/5;border-radius:var(--r)}
.reel .cap{margin-top:7px;font-weight:700;font-size:14px;line-height:1.3;letter-spacing:-.2px}
.reel .eye{position:absolute;left:10px;bottom:9px;z-index:2;display:flex;align-items:center;gap:4px;color:#fff;font-size:12px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* ── 피드 글 ──────────────────── */
.post{padding:18px 0;border-top:1px solid var(--line)}
.post:first-child{border-top:0}
.ph-row{display:flex;align-items:center;gap:10px}
.av{flex:none;width:40px;height:40px;border-radius:99px;background:var(--chip);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.who{flex:1;min-width:0}
.who b{font-size:15px;font-weight:750;display:inline-flex;align-items:center;gap:6px}
.who .muted{font-size:12px;display:block;margin-top:1px}
.post p.txt{margin:10px 0 12px;font-size:14.5px;line-height:1.55}
.acts{display:flex;align-items:center;gap:16px;margin-top:10px;color:var(--sub);font-size:13px;font-weight:600}
.acts span,.acts button{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:inherit;padding:0}
.acts .r{margin-left:auto}
.acts button.on{color:#e5484d}
.acts button.on svg{fill:#e5484d;stroke:#e5484d}
.listbox{margin-top:10px;background:var(--card2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;align-items:center;gap:12px}
.listbox .t{font-weight:750}
.listbox .p{font-size:20px;font-weight:800;letter-spacing:-.4px}
.listbox .grow{flex:1;min-width:0}
.buildstrip{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* 투표 */
.poll{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pollo{position:relative;height:44px;border-radius:11px;background:var(--chip);border:0;display:flex;align-items:center;justify-content:space-between;padding:0 14px;overflow:hidden;font-weight:650;font-size:14px;text-align:left}
.pollo i{position:absolute;left:0;top:0;bottom:0;background:var(--line);border-radius:11px}
.pollo.me i{background:var(--acc);opacity:.28}
.pollo span{position:relative}
.pollo .pc{font-variant-numeric:tabular-nums}

/* ── 상세 ──────────────────────── */
.det-ph{position:relative;margin:0 -16px}
.det-ph .ph{border-radius:0;aspect-ratio:4/3}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}
.thumbs div{aspect-ratio:1/1;border-radius:8px;background:var(--ph);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--faint);font-weight:600}
.det-h{margin-top:14px}
.det-h h1{margin:0;font-size:24px;letter-spacing:-.6px;line-height:1.25}
.det-h .trim{color:var(--sub);font-size:14px;margin-top:2px}
.pricebar{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.pricebar .p{font-size:28px;font-weight:850;letter-spacing:-.8px}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.box+.box{margin-top:12px}
.box h3{margin:0 0 12px;font-size:16px;letter-spacing:-.3px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px}
.box h3 small{font-size:12px;color:var(--sub);font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;min-height:84px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.tile svg{color:var(--sub)}
.tile .k{font-size:12px;color:var(--sub);margin-top:6px}
.tile .v{font-weight:750;font-size:15px;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.warn{background:var(--warnbg);border-color:transparent}
.tile.warn .v,.tile.warn svg{color:var(--warn)}
/* 고정 칸 표 */
.kv{display:grid;grid-template-columns:96px 1fr;border-top:1px solid var(--line)}
.kv>div{padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;min-width:0}
.kv>div:nth-child(odd){color:var(--sub)}
.kv .src{font-size:11px;color:var(--faint);margin-left:4px}
.st-row{display:grid;grid-template-columns:24px 92px 1fr;gap:8px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.st-row:last-child{border-bottom:0}
.st-row .k{color:var(--sub)}
.st-row .v b{font-weight:700}
.st-row .v .muted{font-size:12.5px;display:block;margin-top:2px}
.st-row svg{margin-top:1px}
.st-row.warn svg,.st-row.warn .v b{color:var(--warn)}
.st-row.ok svg{color:var(--sub)}
ul.dots{margin:0;padding:0 0 0 18px}
ul.dots li{margin:4px 0}
.tl{position:relative;padding-left:20px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tli{position:relative;padding:0 0 14px}
.tli::before{content:"";position:absolute;left:-19px;top:6px;width:10px;height:10px;border-radius:99px;background:var(--card);border:2px solid var(--ink)}
.tli .d{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.tli .t{font-weight:700;font-size:14.5px;margin-top:1px}
.tli .m{display:grid;grid-template-columns:1fr auto auto;gap:10px;font-size:12.5px;color:var(--sub);margin-top:3px;align-items:center}
.tli .m .c{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:650;text-align:right;min-width:64px}
.rc{font-size:11.5px;font-weight:700;color:var(--sub);border:1px solid var(--line);border-radius:6px;padding:1px 6px;white-space:nowrap}
.rc.no{border-style:dashed;color:var(--faint)}
/* 시세 막대 */
.range{position:relative;height:40px;margin:22px 4px 6px}
.range .bar{position:absolute;left:0;right:0;top:17px;height:6px;border-radius:9px;background:var(--chip)}
.range .fill{position:absolute;top:17px;height:6px;border-radius:9px;background:var(--faint)}
.range .mk{position:absolute;top:10px;width:2px;height:20px;background:var(--ink);transform:translateX(-1px)}
.range .mk span{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:750;white-space:nowrap;background:var(--ink);color:var(--bg);padding:1px 6px;border-radius:6px}
.range .md{position:absolute;top:14px;width:12px;height:12px;border-radius:99px;background:var(--card);border:2px solid var(--sub);transform:translateX(-6px)}
.range .lab{position:absolute;top:30px;font-size:11px;color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
.cond{display:grid;grid-template-columns:62px 1fr 92px;gap:10px;align-items:center;padding:8px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.cond:last-child{border-bottom:0}
.cond .b{position:relative;height:8px;border-radius:9px;background:var(--chip)}
.cond .b i{position:absolute;top:0;bottom:0;border-radius:9px;background:var(--sub);opacity:.55}
.cond .b em{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;background:var(--ink)}
.cond .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
.tbl th{text-align:left;font-weight:600;color:var(--sub);font-size:12px;padding:0 0 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top;overflow:hidden;text-overflow:ellipsis}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.qa{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.qa:last-of-type{border-bottom:0}
.qa .a{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--card2);font-size:13.5px}
.qa .a b{font-size:12px;color:var(--sub);display:block}
.inrow{display:flex;gap:8px;margin-top:12px}
.fld,.inrow input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--card2);outline:none}
textarea.fld{height:auto;min-height:120px;padding:10px 12px;line-height:1.55;resize:vertical;width:100%}
.fld:focus,.inrow input:focus{border-color:var(--ink)}
.seller{display:flex;align-items:center;gap:12px}
.seller .grow{flex:1;min-width:0}
.cta{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;gap:8px;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--tab);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.cta .grow{flex:1}
.cta .btn{height:48px}
body.has-cta .tabs{display:none}
body.has-cta main{padding-bottom:110px}
.side{display:none}
.note{font-size:12.5px;color:var(--sub);margin:10px 0 0;line-height:1.5}
.warnbox{display:flex;gap:8px;align-items:flex-start;background:var(--warnbg);color:var(--warn);border-radius:12px;padding:10px 12px;font-size:13px;font-weight:600;line-height:1.45}
.warnbox svg{margin-top:1px}

/* ── 내 차고(AutoStore) ───────── */
.gh{padding:18px 16px 6px}
.gh .hi{font-size:22px;font-weight:800;letter-spacing:-.6px}
.gh p{margin:4px 0 0;color:var(--sub);font-size:14px}
.mycars{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scrollbar-width:none;padding:6px 16px 4px;scroll-snap-type:x mandatory;scroll-padding-inline:16px}
.mycars::-webkit-scrollbar{display:none}
.vc{scroll-snap-align:start;background:var(--card2);border:1.5px solid var(--line);border-radius:18px;padding:12px;text-align:left;display:block;width:100%}
.vc.on{border-color:var(--acc)}
.vc .top{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.vc .ph{margin:8px 0 10px;border-radius:12px;aspect-ratio:16/9}
.vc .mk{font-size:12px;color:var(--sub)}
.vc .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.vc .md{font-size:17px;font-weight:750;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc .pl{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.vc.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--sub);font-weight:650;min-height:220px;border-style:dashed}
.docs{display:flex;flex-direction:column;gap:10px}
.doc{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:14px}
.doc .r1{display:flex;justify-content:space-between;align-items:center;color:var(--sub);font-size:12px}
.doc .t{font-weight:700;font-size:15.5px;margin-top:10px}
.doc .s{font-size:13px;color:var(--sub)}
.doc .r2{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;font-weight:700}
.doc.miss{border-style:dashed;background:transparent}
.doc.miss .t{color:var(--sub)}

/* 빌드 카드 */
.bcard{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.bcard .ph{border-radius:0;aspect-ratio:4/3}
.bcard .in{padding:16px}
.bcard .kick{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:.3px}
.bcard h2{margin:4px 0 0;font-size:22px;letter-spacing:-.6px}
.bstats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bstats div{padding:10px 0;text-align:center;border-left:1px solid var(--line)}
.bstats div:first-child{border-left:0}
.bstats b{display:block;font-size:17px;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.bstats span{font-size:11.5px;color:var(--sub)}
.bfoot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:12px;color:var(--sub)}
.bfoot b{color:var(--ink);font-weight:800;letter-spacing:-.3px}

/* ── 등록 흐름 ─────────────────── */
.steps-h{position:sticky;top:var(--hdr);z-index:20;background:var(--bg);padding:12px 16px 10px;border-bottom:1px solid var(--line)}
.steps-h .bars{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.steps-h .bars i{height:4px;border-radius:9px;background:var(--line)}
.steps-h .bars i.on{background:var(--acc)}
.steps-h .lbl{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--sub);font-weight:600}
.steps-h .lbl b{color:var(--ink);font-size:16px;letter-spacing:-.3px}
.ai{display:flex;gap:10px;align-items:flex-start;background:var(--accsoft);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.5}
.ai .ic{flex:none;width:28px;height:28px;border-radius:99px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center}
.ai .ic svg{width:16px;height:16px}
.ai b{display:block;font-size:13px;color:var(--acctx);margin-bottom:2px}
.think{display:flex;align-items:center;gap:10px;padding:18px 14px;border-radius:14px;background:var(--card2);color:var(--sub);font-size:14px;font-weight:600}
.spin{width:18px;height:18px;border-radius:99px;border:2.5px solid var(--line);border-top-color:var(--acc);animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;border:1.5px dashed var(--faint);border-radius:16px;color:var(--sub);text-align:center;padding:16px;font-size:14px;cursor:pointer}
.drop b{color:var(--ink);font-size:15px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pslot{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--ph);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--faint);font-weight:650}
.pslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pslot .lb{position:absolute;left:6px;bottom:6px;height:20px;padding:0 6px;border-radius:6px;background:rgba(17,18,20,.75);color:#fff;font-size:11px;display:flex;align-items:center;z-index:2}
.pslot .pm{position:absolute;right:6px;top:6px;height:20px;padding:0 6px;border-radius:6px;background:rgba(255,255,255,.9);color:#111;font-size:10.5px;display:flex;align-items:center;font-weight:700;z-index:2}
.opt{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);text-align:left;margin-top:8px}
.opt.on{border-color:var(--acc)}
.opt .rd{flex:none;width:20px;height:20px;border-radius:99px;border:2px solid var(--faint)}
.opt.on .rd{border:6px solid var(--acc)}
.opt .grow{flex:1;min-width:0}
.opt .t{font-weight:700}
.opt .s{font-size:12.5px;color:var(--sub)}
.opt .pc{font-weight:750;font-variant-numeric:tabular-nums;color:var(--sub);font-size:13px}
.conf{height:6px;border-radius:9px;background:var(--line);overflow:hidden;margin-top:8px}
.conf i{display:block;height:100%;background:var(--acc);border-radius:9px}
.modrow{display:grid;grid-template-columns:1fr 112px;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.modrow:last-child{border-bottom:0}
.modrow .t{font-weight:700;font-size:14.5px}
.modrow .s{font-size:12.5px;color:var(--sub)}
.modrow select{height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card2);padding:0 8px;font-size:13px;width:100%}
.modrow.warn select{border-color:var(--warn);color:var(--warn)}
.ck{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.ck:last-child{border-bottom:0}
.ck .bx{width:24px;height:24px;border-radius:7px;border:2px solid var(--faint);display:flex;align-items:center;justify-content:center;background:transparent;padding:0;color:transparent}
.ck .bx.on{background:var(--acc);border-color:var(--acc);color:#fff}
.ck .t{font-weight:700;font-size:14.5px}
.ck .s{font-size:12.5px;color:var(--sub)}
.ck .st{font-size:12px;font-weight:700;color:var(--sub);white-space:nowrap}
.ck .st.warn{color:var(--warn)}
.flow-nav{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:110px 1fr;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--tab);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.flow-nav .btn{height:50px}
.tones{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}

/* ── 차종 허브 ─────────────────── */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mc{display:block;min-width:0}
.mc .ph{aspect-ratio:4/3}
.mc .t{font-weight:750;margin-top:8px;font-size:15px;letter-spacing:-.3px}
.mc .s{font-size:12.5px;color:var(--sub)}
.hub-hero{position:relative}
.hub-hero .ph{border-radius:0;aspect-ratio:16/10}
.hub-hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65));z-index:1}
.hub-hero .tt{position:absolute;left:16px;right:16px;bottom:30px;z-index:2;color:#fff}
.hub-hero .tt h1{margin:0;font-size:28px;letter-spacing:-.8px;line-height:1.15}
.hub-hero .tt .en{font-size:13px;opacity:.85;font-weight:600}
.gen{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.gen:last-child{border-bottom:0}
.gen .yr{font-weight:750;font-variant-numeric:tabular-nums;font-size:13px}
.gen .nm{font-weight:700}
.gen .ds{font-size:13px;color:var(--sub);margin-top:2px}
.gen.now .yr{color:var(--acctx)}
.srcs{margin:0;padding:0 0 0 18px;font-size:12.5px;color:var(--sub)}
.srcs li{margin:3px 0;overflow-wrap:anywhere}
.srcs a{text-decoration:underline;text-underline-offset:2px}
.exlabel{font-size:11px;font-weight:700;color:var(--sub);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.issue{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.issue:last-child{border-bottom:0}
.issue .s{font-size:12.5px;color:var(--sub)}

/* 판매 기록 숫자 칸 */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px}
.stat .k{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .v{font-size:18px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.stat .r{font-size:11.5px;color:var(--sub);font-variant-numeric:tabular-nums}

/* ── 설정 ──────────────────────── */
.names{display:flex;flex-direction:column;gap:8px}
.nmc{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);text-align:left}
.nmc.on{border-color:var(--acc)}
.nmc .t{font-weight:800;letter-spacing:-.3px}
.nmc .s{font-size:12.5px;color:var(--sub)}
.mock{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg)}
.mock .mh{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-bottom:1px solid var(--line)}
.mock .mh b{font-size:19px;letter-spacing:-.6px;font-weight:850}
.mock .mb{padding:14px;display:flex;gap:12px;align-items:center}
.appic{width:58px;height:58px;border-radius:15px;background:var(--btn);color:var(--btnink);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;letter-spacing:-.6px;text-align:center;line-height:1.05}

/* 창·시트·알림 */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.42);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet .pn{width:100%;max-width:560px;max-height:86vh;overflow:auto;background:var(--card);border-radius:22px 22px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom))}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:var(--line);margin:4px auto 12px}
.sheet h3{margin:0 0 12px;font-size:18px;letter-spacing:-.4px}
.sheet .big{display:flex;gap:14px;align-items:center;padding:14px;border-radius:16px;border:1px solid var(--line);margin-bottom:10px;width:100%;background:var(--card);text-align:left}
.sheet .big .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--chip);display:flex;align-items:center;justify-content:center}
.sheet .big b{display:block;font-size:15.5px;color:var(--ink)}
.sheet .big span{font-size:13px;color:var(--sub)}
.lightbox .pn{max-width:900px;background:#0b0d12;color:#f1f3f7}
.lightbox img{width:100%;border-radius:12px}
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 20px);transform:translateX(-50%);z-index:80;background:#111214;color:#fff;padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;max-width:calc(100vw - 32px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
:root[data-theme="dark"] .toast{background:#f1f3f7;color:#111214}
.toast[hidden]{display:none}
.msgs{height:260px;overflow:auto;background:var(--card2);border-radius:12px;padding:10px;font-size:14px;display:flex;flex-direction:column;gap:8px}
.msgs p{margin:0;padding:8px 11px;border-radius:12px;background:var(--chip);max-width:85%}
.msgs p.me{align-self:flex-end;background:var(--btn);color:var(--btnink)}
.msgs p.sys{max-width:none;background:var(--warnbg);color:var(--warn);font-size:13px;font-weight:600}
.empty{padding:40px 16px;text-align:center;color:var(--sub);font-size:14px}
.foot{margin:36px 16px 0;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--faint);line-height:1.6}

.hub-side{display:grid;gap:12px;margin-top:12px}
.home-top{display:block}

/* ── PC ─────────────────────────── */
@media (min-width:960px){
  .hide-pc{display:none!important}
  .mseg{max-width:360px;margin-top:14px}
  .home-cols .rail{margin-top:26px}
  .hub .hub-side{margin-top:0;position:sticky;top:calc(var(--hdr) + 16px)}
  :root{--hdr:64px}
  .hdr{padding:0 28px;gap:14px}
  .hnav{display:flex;gap:2px;margin-left:18px}
  .hnav a{height:38px;padding:0 14px;border-radius:10px;display:flex;align-items:center;font-weight:650;color:var(--sub);font-size:15px}
  .hnav a.on{color:var(--ink);background:var(--chip)}
  .hsearch{display:flex;align-items:center;gap:8px;flex:1;max-width:420px;height:42px;padding:0 14px;border-radius:12px;background:var(--chip);color:var(--sub);margin-left:auto}
  .hsearch input{flex:1;border:0;background:transparent;outline:none;min-width:0}
  .hsp{display:none}
  .btn.hsell{display:inline-flex}
  .ib.srch{display:none}
  .tabs{display:none}
  main{padding-bottom:60px}
  .wrap,.pg-title,.gh{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px}
  .stories{max-width:1180px;margin:0 auto;padding:18px 28px 4px}
  .chips{margin:0;padding:2px 0;flex-wrap:wrap}
  .hs{margin:0;padding:0;grid-auto-columns:calc((100% - 36px)/4)}
  .hs.w44{grid-auto-columns:calc((100% - 48px)/5)}
  .utabs{margin:0;padding:0}
  .lgrid{grid-template-columns:repeat(3,1fr);gap:28px 22px}
  .reels{grid-template-columns:repeat(4,1fr);gap:16px}
  .mgrid{grid-template-columns:repeat(4,1fr);gap:18px}
  .home-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start}
  .feed{max-width:640px}
  .home-cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start}
  .home-cols .rail{position:sticky;top:calc(var(--hdr) + 16px)}
  .det{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start;max-width:1180px;margin:0 auto;padding:20px 28px 0}
  .det .wrap{padding:0;max-width:none}
  .det-ph{margin:0}
  .det-ph .ph{border-radius:var(--r2)}
  .side{display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(var(--hdr) + 16px)}
  body.has-cta .cta{display:none}
  body.has-cta main{padding-bottom:60px}
  .mycars{max-width:1180px;margin:0 auto;padding:6px 28px 4px;grid-auto-columns:300px}
  .gar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
  .hub{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}
  .hub-hero .ph{aspect-ratio:21/8}
  .hub-hero .tt{max-width:1180px;margin:0 auto;left:0;right:0;padding:0 28px}
  .flow{max-width:720px;margin:0 auto}
  .steps-h{padding-left:calc(50% - 360px + 16px);padding-right:calc(50% - 360px + 16px)}
  .flow-nav{left:50%;transform:translateX(-50%);max-width:720px;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:16px 16px 0 0}
  .toast{bottom:28px}
  .stats{grid-template-columns:repeat(4,1fr)}
  .sheet{align-items:center}
  .sheet .pn{border-radius:22px;max-height:80vh}
  .bwrap{max-width:460px;margin:0 auto}
}
@media (min-width:600px) and (max-width:959px){
  .lgrid{grid-template-columns:1fr 1fr}
  .reels{grid-template-columns:repeat(3,1fr)}
  .mgrid{grid-template-columns:repeat(3,1fr)}
  .hs{grid-auto-columns:42%}
}

/* ── 차종 페이지 확장: 연식별 변경점·튜닝 가이드·리콜·비교·질문·가이드(2026-10-28 3차) ── */
.seg a{height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:650;color:var(--sub);font-size:14px}
.seg a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.innav{position:sticky;top:var(--hdr);z-index:15;background:var(--bg);padding-top:10px;padding-bottom:10px;margin-top:14px;border-bottom:1px solid var(--line)}
.innav .chip{height:32px;font-size:13px}
.box[id],section[id]{scroll-margin-top:calc(var(--hdr) + 64px)}
.mylist .my{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.mylist .my:last-child{border-bottom:0}
.my .yr{font-weight:800;font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:-.3px}
.my .yr span{display:block;font-size:11.5px;font-weight:600;color:var(--sub);letter-spacing:0}
.my.now .yr{color:var(--acctx)}
.my ul{margin:0;padding:0 0 0 16px}
.my li{margin:2px 0}
.my .kr{margin-top:6px;font-size:13px;color:var(--sub)}
.my .kr b{color:var(--ink);font-size:12px;margin-right:4px}
.my .srcl{font-size:11px;color:var(--faint);margin-top:4px}
.tunes{display:grid;gap:10px}
.tn{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card2);min-width:0}
.tn-h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.tn-h b{font-size:14.5px}
.tn-w{font-size:13.5px;margin-top:4px}
.tn-c{font-size:12.5px;color:var(--sub);margin-top:4px}
.tn-f{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:12px;color:var(--sub)}
.tn-f a{text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.tag.t-cond{background:transparent;border:1px solid var(--line);color:var(--ink)}
.tag.t-unk{background:transparent;border:1px dashed var(--faint)}
.issue .dot{width:8px;height:8px;border-radius:9px;background:var(--faint);margin:7px 0 0 6px}
.box{min-width:0}
.vs-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
.tbl.vs{min-width:420px}
.tbl.vs td,.tbl.vs th{padding-right:8px;overflow-wrap:break-word}
.vslinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vslinks .chip{height:32px;font-size:13px}
.faq{border-bottom:1px solid var(--line)}
.faq:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:11px 0;font-weight:650;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--sub);font-weight:500}
.faq[open] summary::after{content:"–"}
.faq p{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--sub)}
.mc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.vs-hero{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vs-hero a{display:flex;flex-direction:column;gap:2px;min-width:0}
.vs-hero b{margin-top:6px;font-size:15px}
.vs-hero span{font-size:12.5px}
.vs2{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:14px}
.glist{display:grid;gap:12px}
.gcard{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px}
.gcard b{font-size:16px}
.gcard span.muted{grid-column:1;font-size:13px}
.gcard svg{grid-column:2;grid-row:1/3}
.guide .box+.box{margin-top:12px}
.lead{font-size:15px;line-height:1.65;margin:0 0 14px}
ol.steps{margin:0;padding:0 0 0 20px;font-size:14px}
ol.steps li{margin:0 0 10px}
ol.steps li:last-child{margin-bottom:0}
ol.steps .s{font-size:13px;color:var(--sub);margin-top:2px}
/* 검색용 정적 페이지 */
.crumb{font-size:12.5px;color:var(--sub);padding:14px 16px 0;display:flex;flex-wrap:wrap;gap:6px}
.crumb a{text-decoration:underline;text-underline-offset:2px}
.applink{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.stat-note{font-size:12px;color:var(--faint);margin-top:6px}
@media (min-width:960px){
  .innav{margin-top:18px}
  .vs-hero{grid-template-columns:repeat(2,minmax(0,380px))}
  .glist{grid-template-columns:repeat(2,1fr)}
  .crumb{max-width:1180px;margin:0 auto;padding:18px 28px 0}
  .tunes{grid-template-columns:1fr 1fr}
}

/* ── 큰 PC 화면(1400px 이상): 가운데 1180px 고정 대신 화면 폭을 다 쓴다(2026-10-28 3차) ── */
@media (min-width:1400px){
  .wrap,.pg-title,.gh,.crumb{max-width:none;padding-left:40px;padding-right:40px}
  .stories{max-width:none;padding:18px 40px 4px}
  .det{max-width:none;padding:20px 40px 0;grid-template-columns:minmax(0,1fr) 400px}
  .det-ph .ph{aspect-ratio:16/9}
  .mycars{max-width:none;padding:6px 40px 4px}
  .hub-hero .tt{max-width:none;padding:0 40px}
  .home-cols{grid-template-columns:minmax(0,1fr) 400px}
  .feat .ph{aspect-ratio:21/9}
  .feed{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:start}
  .lgrid{grid-template-columns:repeat(4,1fr)}
  .mgrid{grid-template-columns:repeat(6,1fr)}
  .reels{grid-template-columns:repeat(6,1fr)}
  .home-cols .reels{grid-template-columns:repeat(4,1fr)}
  .hs{grid-auto-columns:calc((100% - 48px)/5)}
  .hub{grid-template-columns:minmax(0,1fr) 420px}
  .hub-main{display:block!important;columns:2;column-gap:12px}
  .hub-main>.box{break-inside:avoid;margin:0 0 12px}
  .hub-main .tunes{grid-template-columns:1fr}
  .glist{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1800px){
  .lgrid{grid-template-columns:repeat(5,1fr)}
  .mgrid{grid-template-columns:repeat(7,1fr)}
}

/* ── 매물 찾기(상세검색)·공개용 미리보기 — 2026-10-28 4차 ── */
.livebar{position:sticky;top:var(--hdr);z-index:29;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:8px 16px;background:var(--accsoft);color:var(--acctx);font-size:13px;font-weight:650;text-align:center}
.livebar[hidden]{display:none}
.livebar button{border:0;background:none;color:inherit;text-decoration:underline;font-weight:750;font-size:13px;padding:0}
.srch{margin-top:12px}
.sres{min-width:0}
.sbar{display:flex;gap:8px}
.sin{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--card2);color:var(--sub)}
.sin input{flex:1;min-width:0;border:0;background:transparent;outline:none;color:var(--ink)}
.sin:focus-within{border-color:var(--ink)}
.btn.fopen{height:46px;padding:0 14px}
.fopen b{min-width:20px;height:20px;border-radius:99px;background:var(--acc);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.fopen b:empty{display:none}
.qchips{margin-top:12px}
.chip.fc{height:34px;font-size:13.5px;border-radius:99px}
.applied{margin-top:12px}
.chip.ap{height:32px;font-size:13px;background:var(--accsoft);border-color:transparent;color:var(--acctx)}
.sline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 4px;font-size:14px}
.sline .link{border:0;background:none;padding:0;font-size:14px}
.saved{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.hl{font-size:12px;font-weight:700;color:var(--sub);margin-right:4px}
.sv{display:inline-flex;align-items:center;max-width:100%;border:1px solid var(--line);border-radius:99px;background:var(--card);overflow:hidden}
.sv button{border:0;background:none;height:30px;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:650;padding:0 6px 0 12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv button+button{flex:none;padding:0 10px 0 4px;color:var(--faint)}
.hits{margin-top:14px}
.hitrow{display:grid;gap:8px;margin-top:6px}
.hit{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);min-width:0}
.hit .grow{flex:1;min-width:0}
.hit b{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14.5px}
.hit span{font-size:12.5px;color:var(--sub)}
.sempty b{display:block;font-size:16px}
.sempty p{margin:6px 0 12px;color:var(--sub);font-size:14px;line-height:1.55}
.sempty .row,.first-hero .row{display:flex;gap:8px;flex-wrap:wrap}
.kick{font-size:12px;font-weight:750;color:var(--acctx);letter-spacing:.2px;margin-bottom:6px}
.first-hero{margin-top:16px}
.first-hero h2{margin:0;font-size:22px;letter-spacing:-.6px;line-height:1.3}
.first-hero p{margin:8px 0 14px;color:var(--sub);font-size:14.5px;line-height:1.6}
/* 상세 조건 칸 — 폰: 화면 전체 덮개, PC: 왼쪽 고정 칸 */
.fpanel{position:fixed;inset:0;z-index:55;background:var(--bg);display:none;flex-direction:column}
.fpanel.open{display:flex}
body.fp-open{overflow:hidden}
.fp-h{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px 0 16px;border-bottom:1px solid var(--line);font-size:17px;flex:none}
.fp-b{flex:1;overflow:auto;padding:0 16px 20px;overscroll-behavior:contain}
.fp-f{flex:none;display:flex;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}
.fp-f .grow{flex:1}
.fsec{padding:16px 0;border-bottom:1px solid var(--line)}
.fsec:last-child{border-bottom:0}
.fsec h4{margin:0 0 10px;font-size:15px;display:flex;align-items:baseline;gap:8px}
.fsec h4 small{font-size:12px;color:var(--acctx);font-weight:650}
.fl{font-size:12.5px;font-weight:650;color:var(--sub);margin:12px 0 6px}
.fcs{display:flex;flex-wrap:wrap;gap:6px}
.fcs+.fcs{margin-top:6px}
.fc{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--ink)}
.fc.on{border-color:var(--acc);background:var(--accsoft);color:var(--acctx)}
.fc .n{font-size:11.5px;color:var(--faint);font-weight:600;margin-left:2px}
.mkrow{display:flex;align-items:center;gap:10px;width:100%;height:42px;border:0;background:none;padding:0 2px;font-size:14.5px;font-weight:600;text-align:left}
.mkrow .bx{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid var(--faint);display:flex;align-items:center;justify-content:center;color:transparent}
.mkrow.on .bx{background:var(--acc);border-color:var(--acc);color:#fff}
.mkrow .grow{flex:1}
.mkrow .n{font-size:12.5px;color:var(--faint)}
.mdlist{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 10px 30px}
.two{display:flex;align-items:center;gap:8px}
.fld.fs{height:40px;flex:1;min-width:0;padding:0 10px}
.tunesec{background:var(--card2);margin:0 -16px;padding:16px;border-bottom:0}
.rulehint{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);display:grid;gap:6px;font-size:13px}
.rulehint div{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rulehint .link{font-size:12.5px}
@media (min-width:600px) and (max-width:959px){
  .sres .lgrid,.hitrow{grid-template-columns:1fr 1fr}
}
@media (min-width:960px){
  .srch{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}
  .fpanel{position:sticky;inset:auto;top:calc(var(--hdr) + 16px);z-index:auto;display:flex;max-height:calc(100vh - var(--hdr) - 32px);border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
  .fp-h [data-fclose],.fp-f [data-fclose],.btn.fopen{display:none}
  .fp-h{height:50px;font-size:16px}
  .fp-f #freset{width:100%}
  body.fp-open{overflow:auto}
  .sres .lgrid{grid-template-columns:repeat(2,1fr)}
  .hitrow{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1200px){
  .sres .lgrid,.hitrow{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1700px){
  .srch{grid-template-columns:320px minmax(0,1fr)}
  .sres .lgrid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:2100px){
  .sres .lgrid{grid-template-columns:repeat(5,1fr)}
}