/* NeverCopang 공통 스타일 (phase7-plan 5절). 마크업 계약은 app/render.py · assets/app.js 의 카드와 같다. */
:root{
  --bg:#f4f5f7;--card:#fff;--fg:#14161a;--muted:#6b7280;--line:#e6e8ec;--soft:#f0f2f5;
  --brand:#0b8f7f;--brand-d:#08766a;--accent:#e8352b;--save:#e8352b;--warn:#b45309;--chip:#eef6f5;
  --coupang:#d63b30;--st11:#ff0038;--shadow:0 1px 2px rgba(16,24,40,.06);--shadow-l:0 12px 32px rgba(16,24,40,.18);
  --radius:12px;--hd:60px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0e1013;--card:#171a20;--fg:#e8eaee;--muted:#9aa1ad;--line:#272c35;--soft:#1e222a;
    --chip:#13302c;--shadow:0 1px 2px rgba(0,0,0,.4);--warn:#fbbf24;--brand:#2dd4bf;--brand-d:#14b8a6}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic",sans-serif;letter-spacing:-.01em}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
main.wrap{padding-top:18px;padding-bottom:48px;min-height:60vh}
h1{font-size:22px;margin:4px 0 6px;letter-spacing:-.03em}
h2{font-size:18px;margin:0;letter-spacing:-.02em}

/* ── 헤더 ── */
.hd{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line)}
.hd-in{max-width:1160px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.logo{font-weight:900;font-size:22px;letter-spacing:-.05em;text-decoration:none;color:var(--fg);white-space:nowrap}
.logo span{color:var(--brand)}
.sch{position:relative;flex:1;display:flex;max-width:640px}
.sch input{flex:1;min-width:0;height:44px;padding:0 14px;font-size:16px;border:2px solid var(--brand);border-right:0;border-radius:10px 0 0 10px;background:var(--card);color:var(--fg);outline:none}
.sch button{width:52px;border:0;border-radius:0 10px 10px 0;background:var(--brand);color:#fff;cursor:pointer;display:grid;place-items:center}
.sch button:hover{background:var(--brand-d)}
.ac{position:absolute;left:0;right:52px;top:46px;margin:0;padding:6px 0;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-l);z-index:60;max-height:60vh;overflow:auto}
.ac li a{display:flex;justify-content:space-between;gap:8px;padding:9px 14px;text-decoration:none;font-size:14px}
.ac li a small{color:var(--muted)}
.ac li.on a,.ac li a:hover{background:var(--soft)}
.hd-ext{font-size:13px;color:var(--muted);text-decoration:none;white-space:nowrap}
.hd-ext:hover{color:var(--brand)}
.cats{border-top:1px solid var(--line)}
.cats-in{max-width:1160px;margin:0 auto;padding:0 8px;display:flex;overflow-x:auto;scrollbar-width:none}
.cats-in::-webkit-scrollbar{display:none}
.cats a{flex:none;padding:10px 10px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
.cats a:hover{color:var(--fg)}
.cats a.on{color:var(--fg);border-bottom-color:var(--brand)}

/* ── 공통 조각 ── */
.muted{color:var(--muted)}
.est{color:var(--warn);font-size:.9em;white-space:nowrap}
.save{color:var(--save)}
.rocket{display:inline-block;font-size:11px;font-weight:800;color:#fff;background:#346aff;border-radius:4px;padding:1px 5px;margin-right:5px;vertical-align:2px}
.disc{font-size:12px;color:var(--muted)}
.lead{color:var(--muted);margin:0 0 14px;font-size:14px}
.crumb{font-size:13px;color:var(--muted);margin:0 0 4px}
.crumb a{text-decoration:none}

/* ── 툴바: 정렬·필터·보기 ── */
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 12px}
.bar .sp{flex:1}
.chip{height:34px;padding:0 12px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--fg);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.chip[aria-pressed=true]{border-color:var(--brand);background:var(--chip);color:var(--brand-d);font-weight:700}
.sorts{display:flex;gap:2px;flex-wrap:wrap}
.sorts button{border:0;background:none;font:inherit;font-size:13px;color:var(--muted);padding:6px 8px;cursor:pointer}
.sorts button[aria-pressed=true]{color:var(--fg);font-weight:800}
.sorts button+button::before{content:"";display:inline-block;width:1px;height:10px;background:var(--line);margin:0 8px 0 -8px}
.wowsw{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;user-select:none}
.wowsw input{width:18px;height:18px;accent-color:var(--brand)}
.count{font-size:13px;color:var(--muted)}

/* ── 카드 (목록형 기본) ── */
.cards{display:flex;flex-direction:column;gap:8px}
.card{display:grid;grid-template-columns:104px 1fr auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.card .thumb{display:block;width:104px;height:104px;border-radius:8px;overflow:hidden}
.card .thumb img{background:#fff}
.card .thumb img{width:100%;height:100%;object-fit:contain}
.card .body{min-width:0}
.card .title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;font-weight:600;line-height:1.4;text-decoration:none}
.card .title:hover{text-decoration:underline}
.card .meta{margin-top:6px;font-size:13px;color:var(--muted)}
.card .meta .unit{color:var(--fg);font-weight:700}
.card .meta>span+span::before{content:" · ";color:var(--muted);font-weight:400}
.card .thumb{background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a7b4' stroke-width='1.5'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E") center/32px no-repeat}
.card .rank{margin-top:4px;font-size:13px;color:var(--muted)}
.card .price{text-align:right;min-width:150px;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.card .amt{font-size:14px;white-space:nowrap}
.card .amt b{font-size:22px;font-weight:900;letter-spacing:-.03em}
.card .basis{font-size:11.5px;color:var(--muted)}
.buy{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;margin-top:6px;border-radius:8px;background:var(--brand);color:#fff;font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap}
.buy:hover{background:var(--brand-d)}
.cmp{font-size:12.5px;color:var(--brand-d);text-decoration:none;font-weight:700;padding:6px 0 0}
.cmp:hover{text-decoration:underline}

/* 격자형 (홈·카테고리) */
.cards.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.cards.grid .card{grid-template-columns:1fr;grid-template-rows:auto;padding:0 0 12px;gap:0;align-items:stretch}
.cards.grid .thumb{width:100%;height:auto;aspect-ratio:1/1;border-radius:var(--radius) var(--radius) 0 0;border-bottom:1px solid var(--line)}
.cards.grid .body{padding:10px 12px 0}
.cards.grid .title{font-size:14px;font-weight:500;min-height:2.8em}
.cards.grid .meta{font-size:12px}
.cards.grid .meta .seller{display:none}
.cards.grid .rank{font-size:12px}
.cards.grid .price{order:-1;align-items:flex-start;text-align:left;padding:8px 12px 0;min-width:0;grid-row:3}
.cards.grid .buy{display:none}
.cards.grid .cmp{padding-top:2px}

/* 레일 (홈) */
.rail{margin:28px 0}
.rail-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.rail-h a{font-size:13px;color:var(--muted);text-decoration:none;white-space:nowrap}
.rail-h p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.rail .cards.grid{grid-template-columns:repeat(4,1fr)}
.tile{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-decoration:none;box-shadow:var(--shadow)}
.tile:hover{border-color:var(--brand)}
.tile .tt{font-weight:700;font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .big{font-size:20px;font-weight:900;letter-spacing:-.03em}
.tile .sm{font-size:12.5px;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.catgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.catgrid a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;font-size:13px;font-weight:700;text-align:center}
.catgrid a small{font-weight:400;color:var(--muted);font-size:11.5px}
.catgrid a:hover{border-color:var(--brand)}
.hero{background:linear-gradient(135deg,var(--brand),#0f6e8c);color:#fff;border-radius:16px;padding:26px 24px;margin:4px 0 20px}
.hero h1{font-size:26px;margin:0 0 6px;color:#fff}
.hero p{margin:0;opacity:.92;font-size:14.5px}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hero .facts span{background:rgba(255,255,255,.16);border-radius:99px;padding:5px 12px;font-size:13px}
.kws{display:flex;flex-wrap:wrap;gap:8px}
.kws a{padding:7px 13px;font-size:13px;border:1px solid var(--line);border-radius:99px;background:var(--card);text-decoration:none}
.kws a:hover{border-color:var(--brand);color:var(--brand-d)}
.kws.scroll{margin-bottom:6px}
.more-btn{display:block;width:100%;margin:14px 0 0;height:46px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);font:inherit;font-weight:700;cursor:pointer}
.empty{text-align:center;color:var(--muted);padding:48px 0}

/* ── 상세 시트 ── */
.sheet{position:fixed;inset:0;z-index:100}
.sheet-bg{position:absolute;inset:0;background:rgba(10,12,16,.5)}
.sheet-in{position:absolute;top:0;right:0;bottom:0;width:min(660px,100%);background:var(--card);overflow:auto;box-shadow:var(--shadow-l);padding:0 0 32px;overscroll-behavior:contain}
.sh-top{position:sticky;top:0;background:var(--card);display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);z-index:2}
.sh-top b{font-size:14px}
.x{width:44px;height:44px;border:0;background:var(--soft);border-radius:50%;font-size:20px;cursor:pointer;color:var(--fg)}
.sh-body{padding:16px 18px}
.sh-hero{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
.sh-hero img{width:120px;height:120px;object-fit:contain;background:#fff;border-radius:10px;border:1px solid var(--line)}
.sh-hero h2{font-size:17px;line-height:1.4;margin:0 0 6px}
.sh-price b{font-size:28px;font-weight:900;letter-spacing:-.03em}
.sh-sub{font-size:13px;color:var(--muted);margin-top:2px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:3px;margin:16px 0 4px;background:var(--soft)}
.seg button{border:0;background:none;font:inherit;font-size:13px;padding:6px 14px;border-radius:99px;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--card);color:var(--fg);font-weight:800;box-shadow:var(--shadow)}
.sh-sec{margin-top:18px}
.sh-sec h3{font-size:15px;margin:0 0 8px}
.offers{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.offers li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:11px 12px;border-top:1px solid var(--line)}
.offers li:first-child{border-top:0;background:var(--chip)}
.offers .no{font-weight:900;color:var(--muted);text-align:center}
.offers li:first-child .no{color:var(--brand-d)}
.offers .who{font-size:14px;font-weight:700}
.offers .who small{font-weight:400;color:var(--muted)}
.offers .calc{font-size:12px;color:var(--muted);margin-top:2px}
.offers .hint{font-size:12px;color:var(--brand-d);margin-top:2px}
.offers .odd{font-size:12px;color:var(--warn);margin-top:2px}
.offers .pr{text-align:right}
.offers .pr b{font-size:17px;font-weight:900;white-space:nowrap}
.offers .pr .buy{min-height:40px;padding:0 10px;font-size:13px;margin-top:4px}
.conds{width:100%;border-collapse:collapse;font-size:13.5px}
.conds td{padding:9px 6px;border-top:1px solid var(--line);vertical-align:top}
.conds tr:first-child td{border-top:0}
.conds td.v{text-align:right;font-weight:800;white-space:nowrap;width:1%}
.conds td.v.na{color:var(--warn);font-weight:700}
.conds small{color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.links a{font-size:13px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;text-decoration:none}
.ext-cta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--soft);font-size:13px}
.ext-cta a{font-weight:800;color:var(--brand-d);white-space:nowrap}
.note{font-size:12px;color:var(--muted)}

/* ── 기존 /g/ · /x/ · 허브 본문 ── */
.ssr{margin:12px 0 0;padding-left:20px;line-height:1.85;font-size:14px}
.ssr li{margin-bottom:6px}
.ssr a{text-decoration:none}
.ssr a:hover{text-decoration:underline}
.ssr span{color:var(--muted);font-size:12.5px}
.ssr .save{color:var(--save)}
.ssr.hub{columns:220px 4;column-gap:24px;padding-left:18px}
.ssr.hub li{break-inside:avoid}
.backlink{margin:18px 0 0;font-size:13px}
.backlink a{color:var(--muted)}
.disclosure{font-size:12.5px;color:var(--muted)}
#results>h1:first-child{margin-top:4px}

/* ── 문서 페이지 (/ext/ · /privacy/) ── */
.doc{max-width:780px;line-height:1.7}
.doc h1{font-size:24px}.doc h2{font-size:18px;margin-top:1.8em}
.doc table{border-collapse:collapse;width:100%;background:var(--card);font-size:14px;margin:8px 0}
.doc th,.doc td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.doc th{background:var(--soft)}
.doc .ok{color:var(--brand-d);font-weight:700}.doc .no{color:var(--warn);font-weight:700}
.doc .disclosure{background:#fffbe6;color:#5b4a12;border:1px solid #f0d77a;padding:10px 12px;border-radius:8px}
.doc code{background:var(--soft);padding:1px 5px;border-radius:4px}
.doc a{color:var(--brand-d)}
@media (max-width:720px){.doc table{display:block;overflow-x:auto}}

/* ── 푸터 ── */
.ft{border-top:1px solid var(--line);background:var(--card);padding:22px 0 30px;font-size:12.5px;color:var(--muted);line-height:1.7}
.ft p{margin:0 0 8px}
.ft a{color:var(--muted)}

@media (max-width:1000px){
  .rail .cards.grid,.tiles{grid-template-columns:repeat(3,1fr)}
  .catgrid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:720px){
  :root{--hd:104px}
  .hd-in{flex-wrap:wrap;gap:10px;padding:8px 16px}
  .logo{font-size:20px}
  .hd-ext{margin-left:auto}
  .sch{order:3;flex-basis:100%;max-width:none}
  .sch input{height:42px}
  .card{grid-template-columns:84px 1fr;gap:10px;padding:10px 12px}
  .card .thumb{width:84px;height:84px}
  .card .price{grid-column:2;align-items:flex-start;text-align:left;min-width:0;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
  .card .buy{margin-top:0;min-height:40px}
  .card .title{font-size:14px}
  .cards.grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .cards.grid .card{grid-template-columns:1fr;padding:0 0 10px;gap:0}
  .cards.grid .thumb{width:100%;height:auto}
  .cards.grid .price{grid-column:auto}
  .cards.grid .body{padding:8px 10px 0}
  .cards.grid .price{padding:6px 10px 0}
  .cards.grid .title{font-size:13px}
  .cards.grid .price{flex-direction:column;gap:0}
  .rail .cards.grid{display:flex;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:4px}
  .rail .cards.grid .card{flex:0 0 44%;scroll-snap-align:start}
  .tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .tiles .tile{flex:0 0 72%;scroll-snap-align:start}
  .catgrid{grid-template-columns:repeat(4,1fr);gap:6px}
  .catgrid a{padding:10px 4px;font-size:12px}
  .hero{padding:20px 18px;border-radius:14px}
  .hero h1{font-size:21px}
  .sheet-in{top:6vh;width:100%;border-radius:16px 16px 0 0}
  .sh-hero{grid-template-columns:88px 1fr}
  .sh-hero img{width:88px;height:88px}
  .ssr.hub{columns:1}
  .kws.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 6px;padding:0 16px}
  .kws.scroll a{flex:none}
}