/* 컴집 — 클린 · 바이올렛(확정). 그림자/틴트/고스트까지 전부 팔레트 변수로 → 주황 흔적 0 */
:root{
  --ac:#6d3bef;--ac2:#5a2fd0;--or:#8b5cf6;        /* --or: 보조 포인트(바이올렛 계열) */
  --bg:#f9f8fd;--card:#fff;--ink:#211d2b;--sub:#615c70;--gray:#a49eb2;
  --line:#ece7f7;--soft:#f2ecfd;--gold:#ffb400;
  --glow:109,59,239;                              /* 그림자용 RGB */
  --tint:#f3ecfd;--tint2:#efe9fc;--tintline:#e2d5fb;--ghost:#ded1fb;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;line-height:1.64;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{max-width:740px;margin:0 auto;padding:0 16px}.muted{color:var(--gray);font-weight:400}

/* 헤더/푸터 */
.site-hd{background:rgba(249,248,253,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.hd-row{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{font-weight:800;font-size:21px;color:var(--ac);letter-spacing:-.5px}.brand span{color:var(--ink)}
.nav{display:flex;gap:16px;overflow-x:auto;font-size:14px;font-weight:600}
.nav a{color:#6f6a7a;white-space:nowrap}.nav a:hover{color:var(--ac)}
.site-ft{background:#fff;border-top:1px solid var(--line);margin-top:30px;padding:24px 0}
.site-ft p{font-size:12px;color:#6f6a7a;margin:4px 0}
.ft-nav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.ft-nav a{font-size:13px;color:var(--sub);font-weight:600}.ft-nav a:hover{color:var(--ac)}
/* 정적 페이지 */
.staticpage h1{font-size:24px;margin:8px 0 16px}
.page-body{font-size:15px;color:#3a3542;line-height:1.75}
.page-body h3{font-size:16px;margin:22px 0 8px;color:var(--ink)}
.page-body p{margin:0 0 12px}
.page-body a{color:var(--ac);font-weight:600}

/* 홈/카테고리 */
.home-hero{padding:38px 0 20px}.home-hero h1{font-size:27px;margin:0 0 8px;letter-spacing:-.7px}
.home-hero p{color:var(--sub);margin:0}
.home-cat{margin:26px 0}.home-cat-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.home-cat-hd h2{font-size:19px;margin:0}.home-cat-hd a{font-size:13px;color:var(--ac);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.14s}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(var(--glow),.14)}
.tile-img{aspect-ratio:1/1;background:#efeef4}.tile-img img{width:100%;height:100%;object-fit:cover}
.tile-body{padding:12px 13px}.tile-cat{font-size:11px;color:var(--ac);font-weight:700}
.tile-body h3{font-size:14px;margin:5px 0 0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-title{font-size:25px;margin:14px 0 18px}
.empty{background:#fff;border:1px dashed var(--line);border-radius:16px;padding:44px;text-align:center;color:var(--gray)}

/* 아티클 컨테이너 */
.art{background:#fff;margin:16px 0 40px;border-radius:22px;padding:24px 22px 32px;box-shadow:0 2px 20px rgba(33,29,43,.05)}
.topdisc{font-size:11.5px;color:var(--sub);background:#f2f2f4;border-radius:9px;padding:8px 12px;margin-bottom:14px;line-height:1.5}
.topdisc b{color:var(--ink)}
.crumb{font-size:12px;color:var(--gray);margin-bottom:16px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.crumb a:hover{color:var(--ac)}.crumb em{color:var(--sub);font-style:normal}

/* 히어로 */
.cat-tag{display:inline-block;background:var(--soft);color:var(--ac);font-size:12px;font-weight:700;padding:5px 12px;border-radius:8px;margin-bottom:13px}
.hero h1{font-size:27px;line-height:1.35;margin:0 0 10px;letter-spacing:-.6px}
.lead{font-size:16px;color:var(--sub);font-weight:500;margin:0 0 13px}
.byline{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--gray);border-bottom:1px solid var(--line);padding-bottom:16px}
.byline i{font-style:normal;color:#d6d0e0}

/* 결론부터 — 상황별 픽 */
.verdict{margin:20px 0;border-radius:18px;padding:16px 16px 18px;
  background:linear-gradient(135deg,var(--tint),var(--tint2));border:1px solid var(--tintline)}
.verdict-hd{font-size:13px;font-weight:800;color:var(--ac2);margin-bottom:12px}
.verdict-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vpick{background:#fff;border:1px solid var(--tintline);border-radius:14px;padding:13px 12px;display:flex;flex-direction:column;gap:3px;transition:.12s}
.vpick:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:0 6px 16px rgba(var(--glow),.16)}
.vp-emoji{font-size:20px}.vp-kind{font-size:12px;font-weight:800;color:var(--ac)}
.vp-name{font-size:12.5px;color:var(--ink);line-height:1.35;min-height:34px}
.vp-price{font-size:15px;font-weight:800;color:var(--ink)}

.intro{color:#3a3542;font-size:15px;margin:20px 2px}

/* ★선정 기준(투명성 킥) */
.method{margin:20px 0;border:1px solid var(--tintline);border-radius:16px;padding:15px 16px;background:#fff}
.method-hd{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:7px}
.method p{font-size:13.5px;color:#4a4454;margin:0 0 11px}
.formula{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.formula .fpart{background:var(--soft);border-radius:9px;padding:6px 11px;font-size:12px;color:var(--sub)}
.formula .fpart b{color:var(--ac);font-weight:800}
.formula i{font-style:normal;color:var(--gray);font-weight:700}
.formula .fsum{background:var(--ac);color:#fff;border-radius:9px;padding:6px 12px;font-size:12px;font-weight:800}
.fresh{font-size:12px;color:var(--sub);background:var(--soft);border-radius:9px;padding:8px 11px}
.fresh b{color:var(--ac2)}

/* ★컴집 점수(카드) */
.cscore{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.cs-badge{font-size:12px;color:var(--sub);white-space:nowrap}
.cs-badge b{font-size:16px;color:var(--ac);font-weight:800}.cs-badge small{color:var(--gray)}
.cs-bar{flex:1;height:6px;background:var(--line);border-radius:4px;overflow:hidden}
.cs-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ac),#9b7bf5);border-radius:4px}

/* 광고 슬롯 */
.adslot{margin:22px 0;text-align:center;min-height:90px;position:relative}
.ad-label{position:absolute;top:-8px;left:10px;font-size:9px;color:var(--gray);background:var(--bg);padding:0 5px;letter-spacing:1px}

/* 비교 제품 칩 점프(목차 역할) */
.jump{margin:20px 0}
.jump-hd{display:block;font-size:12px;font-weight:700;color:var(--gray);margin-bottom:9px}
.jump-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.jchip{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 13px 7px 9px;
  font-size:12.5px;color:var(--sub);display:flex;align-items:center;gap:6px;white-space:nowrap}
.jchip b{background:var(--ink);color:#fff;font-size:11px;border-radius:50%;width:18px;height:18px;display:grid;place-items:center}
.jchip:hover{border-color:var(--ac);color:var(--ac)}

/* 제품 카드 — 고스트 넘버 + 상황 태그 */
.item{position:relative;margin:26px 0;scroll-margin-top:72px}
.ghost{position:absolute;top:-16px;left:-4px;font-size:64px;font-weight:900;line-height:1;
  color:#fff;-webkit-text-stroke:2px var(--ghost);z-index:1;pointer-events:none}
.item-card{position:relative;z-index:2;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}
.item-media{position:relative;aspect-ratio:16/10;background:#efeef4}
.item-media img{width:100%;height:100%;object-fit:cover}
.off{position:absolute;top:12px;right:12px;background:var(--ac);color:#fff;font-weight:800;font-size:16px;
  padding:6px 11px;border-radius:12px;display:flex;align-items:baseline;gap:2px;box-shadow:0 4px 12px rgba(var(--glow),.35)}
.off small{font-size:9px;font-weight:700}
.item-info{padding:16px 17px 19px}
.tag{display:inline-block;background:var(--ink);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:7px;margin-bottom:9px}
.item-info h2{font-size:16.5px;line-height:1.44;margin:0 0 10px}
.rate{display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:9px}
.stars{position:relative;font-size:15px;color:#e4e0ec;letter-spacing:1px}
.stars::before{content:"★★★★★";position:absolute;left:0;top:0;width:var(--r);overflow:hidden;color:var(--gold);white-space:nowrap}
.rate b{color:var(--ink)}
.price{display:flex;align-items:baseline;gap:9px;margin-bottom:12px}
.price>b{font-size:23px;color:var(--ac);font-weight:800}.price s{color:var(--gray);font-size:14px}
.specs{list-style:none;margin:0 0 13px;padding:0;display:grid;gap:6px}
.specs li{font-size:13px;color:#574f60;padding-left:16px;position:relative}
.specs li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--or)}
.specs li b{color:var(--ink);font-weight:700;margin-right:2px}
/* 한줄 설명 — 박스 제거, 얇은 회색 라인만(시선은 CTA로) */
.note{color:#5c5566;font-size:13px;line-height:1.55;margin:0 0 15px;padding-left:12px;border-left:2px solid var(--line)}
/* ★CTA — 카드의 주인공. 가장 눈에 띄고 누르고 싶게 */
.go{display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,#7c4dff,#6d3bef);color:#fff;font-weight:800;
  font-size:16.5px;padding:17px;border-radius:14px;transition:transform .16s,box-shadow .16s;
  box-shadow:0 8px 22px rgba(var(--glow),.42);letter-spacing:-.2px}
.go:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(var(--glow),.55)}
.go:active{transform:translateY(0);box-shadow:0 5px 14px rgba(var(--glow),.4)}
.go i{font-style:normal;font-size:20px;transition:transform .16s}
.go:hover i{transform:translateX(4px)}

/* 가격·평점 비교표 */
.compare{margin:30px 0}.compare h2{font-size:19px;margin:0 0 12px}
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
table.cmp{width:100%;border-collapse:collapse;font-size:13px;min-width:460px}
table.cmp th{background:var(--soft);color:var(--ac2);font-weight:700;text-align:left;padding:11px 12px;font-size:12px}
table.cmp td{padding:11px 12px;border-top:1px solid var(--line)}
.c-rank{font-weight:800;color:var(--ac);text-align:center}
.c-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-price{font-weight:700;white-space:nowrap}.c-off{color:var(--ac);font-weight:700}
table.cmp td a{color:var(--ac);font-weight:700}
table.cmp tbody tr:hover{background:var(--soft)}

/* FAQ */
.qa{margin:28px 0}.qa h2{font-size:19px;margin:0 0 13px}
.qa details{border:1px solid var(--line);border-radius:14px;margin-bottom:9px;overflow:hidden}
.qa summary{cursor:pointer;padding:14px 16px;font-weight:600;font-size:14.5px;list-style:none;background:#fff;display:flex;align-items:center;gap:9px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";background:var(--ac);color:#fff;font-weight:800;font-size:12px;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:0 0 auto}
.qa details[open] summary{border-bottom:1px solid var(--line)}
.qa-a{padding:13px 16px 15px;font-size:14px;color:#453f4e}
/* 공유 버튼 — 바이라인 우측 끝에 인라인 */
.byline{flex-wrap:wrap}
.share{display:flex;gap:6px;margin-left:auto}
.sh-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--sub);display:grid;place-items:center;cursor:pointer;transition:.14s}
.sh-btn:hover{border-color:var(--ac);color:var(--ac);transform:translateY(-1px)}
.sh-kakao{background:#FEE500;border-color:#FEE500;color:#3c1e1e}
.sh-kakao:hover{color:#3c1e1e;border-color:#f5d900;background:#f5d900}
.sh-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:var(--ink);
  color:#fff;font-size:13px;padding:10px 18px;border-radius:22px;z-index:9999;transition:opacity .3s;
  box-shadow:0 6px 20px rgba(0,0,0,.25)}
/* 관련 글 */
.related{margin:30px 0}.related h2{font-size:19px;margin:0 0 13px}
.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rel-card{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:9px;transition:.14s}
.rel-card:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:0 6px 16px rgba(var(--glow),.12)}
.rel-img{flex:0 0 56px;width:56px;height:56px;border-radius:10px;overflow:hidden;background:#efeef4}
.rel-img img{width:100%;height:100%;object-fit:cover}
.rel-title{font-size:13px;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.disclosure{font-size:11.5px;color:var(--gray);margin-top:26px;border-top:1px solid var(--line);padding-top:15px}
@media(max-width:520px){.rel-grid{grid-template-columns:1fr}}
@media(max-width:520px){.hero h1{font-size:23px}.verdict-grid{grid-template-columns:1fr}.ghost{font-size:52px}}