:root{--color-brand:#2272eb;--color-brand-strong:#1957c2;--color-brand-soft:#e8f3ff;--color-accent:#f57800;--color-highlight:#fff0a8;--color-text:#191f28;--color-text-subtle:#4e5968;--color-text-muted:#6b7684;--color-surface:#fff;--color-surface-muted:#f2f4f6;--color-line:#e5e8eb;--color-danger:#d22030;--shadow-card:0 8px 28px rgba(25,31,40,.06);--shadow-hover:0 14px 38px rgba(25,31,40,.11)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--color-surface);color:var(--color-text);font-family:SUIT,Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif;font-size:16px;line-height:1.72;letter-spacing:-.015em}a{color:var(--color-brand);text-underline-offset:3px}a,button,summary{transition:color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px;border-radius:8px}header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;min-height:70px;padding:10px max(24px,calc((100% - 1160px)/2));background:rgba(255,255,255,.94);border-bottom:1px solid var(--color-line);backdrop-filter:blur(12px)}.brand{color:var(--color-text);font-size:1.2rem;font-weight:900;text-decoration:none;white-space:nowrap}.brand::before{content:"S";display:inline-grid;place-items:center;width:34px;height:34px;margin-right:9px;border-radius:11px;background:var(--color-brand);color:#fff;font-size:1rem}nav{display:flex;gap:4px;overflow-x:auto}nav a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:11px;color:var(--color-text-subtle);font-size:.92rem;font-weight:750;text-decoration:none;white-space:nowrap}nav a:hover{background:var(--color-brand-soft);color:var(--color-brand)}main{max-width:1160px;margin:auto;padding:48px 24px 96px}article{max-width:820px;margin:auto}h1,h2,h3{line-height:1.25;letter-spacing:-.04em}h1{margin:.2em 0 .35em;font-size:clamp(2.2rem,5vw,3.65rem)}article h1{font-size:clamp(2.1rem,4vw,3.25rem)}h2{margin:2.2em 0 .75em;font-size:clamp(1.55rem,3vw,2rem)}h3{font-size:1.2rem}.eyebrow{margin:0 0 8px;color:var(--color-brand);font-size:.9rem;font-weight:850}.lead{max-width:680px;margin:0;color:var(--color-text-subtle);font-size:1.13rem;line-height:1.65}.hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);align-items:center;gap:28px;padding:60px 64px;border-radius:30px;background:linear-gradient(135deg,var(--color-brand-soft),#f8fbff 62%,#fff7ed);overflow:hidden}.hero p{max-width:680px}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.hero-actions a,.buy{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 20px;border-radius:14px;background:var(--color-brand);color:#fff;font-weight:850;text-decoration:none;box-shadow:0 7px 18px rgba(34,114,235,.22)}.hero-actions a:hover,.buy:hover{background:var(--color-brand-strong);transform:translateY(-1px)}.hero-actions .secondary{background:#fff;color:var(--color-brand);border:1px solid #c9e2ff;box-shadow:none}.hero-phone{display:grid;place-items:center;min-height:260px}.hero-phone::before,.phone-art::before{content:"";display:block;width:132px;height:242px;border:8px solid var(--color-text);border-radius:30px;background:linear-gradient(145deg,#64a8ff,#2272eb 58%,#ffbd51);box-shadow:0 22px 44px rgba(25,31,40,.22);transform:rotate(7deg)}.hero-phone span::before,.phone-art span::before{content:"";position:absolute;width:48px;height:7px;border-radius:99px;background:var(--color-text)}.article-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);align-items:center;gap:28px;margin-bottom:28px;padding:34px;border-radius:26px;background:linear-gradient(135deg,var(--color-brand-soft),#fff)}.article-hero figure{margin:0}.article-hero img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow-card)}.verdict{display:grid;grid-template-columns:auto 1fr;gap:16px;margin:26px 0 36px;padding:24px;border:2px solid #90c2ff;border-radius:22px;background:#fff;box-shadow:var(--shadow-card)}.verdict>span,.recommend-badge{align-self:start;padding:6px 10px;border-radius:999px;background:var(--color-accent);color:#fff;font-size:.8rem;font-weight:900;white-space:nowrap}.verdict b{display:block;font-size:1.28rem;line-height:1.35}.verdict p{margin:.55em 0 0}.verdict .target{padding-top:10px;border-top:1px solid var(--color-line);color:var(--color-text-subtle)}mark{padding:0 .18em;background:linear-gradient(transparent 42%,var(--color-highlight) 42% 94%,transparent 94%);color:inherit;font-weight:800}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-top:72px}.section-head h2{margin:.1em 0}.section-head>a{font-weight:800;white-space:nowrap}.grid,.products,.reason-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid{margin-top:24px}.grid a,.product,.reason-grid>div{position:relative;padding:22px;border:1px solid var(--color-line);border-radius:20px;background:#fff;box-shadow:var(--shadow-card)}.grid a{color:var(--color-text);text-decoration:none}.grid a:hover{border-color:#90c2ff;box-shadow:var(--shadow-hover);transform:translateY(-2px)}.grid b,.grid strong,.grid small{display:block}.grid b{margin-top:18px;font-size:1.22rem}.grid strong{margin:9px 0;color:var(--color-text-subtle);font-size:.95rem}.grid small{color:var(--color-text-muted)}.rank,.reason-grid span{color:var(--color-brand);font-size:.82rem;font-weight:900}.confidence{margin:76px -24px 0;padding:48px 24px;border-radius:28px;background:var(--color-surface-muted)}.reason-grid>div{box-shadow:none}.reason-grid h3{margin:.45em 0}.reason-grid p{margin:0;color:var(--color-text-subtle)}.topic-pills{display:flex;flex-wrap:wrap;gap:10px}.topic-pills a{display:inline-flex;align-items:center;min-height:44px;padding:9px 15px;border-radius:999px;background:var(--color-brand-soft);color:var(--color-brand-strong);font-weight:800;text-decoration:none}.products{grid-template-columns:repeat(2,minmax(0,1fr));margin:22px 0}.product{overflow:hidden}.product .phone-art{float:right;display:grid;place-items:center;width:74px;height:110px;margin-left:10px}.product .phone-art::before{width:42px;height:78px;border-width:4px;border-radius:12px;box-shadow:none;transform:rotate(5deg)}.product h3{margin:14px 0 18px}.price-label{margin:0;color:var(--color-text-muted);font-size:.83rem;font-weight:750}.price{margin:0;color:var(--color-accent);font-size:1.55rem;font-weight:900}.card-note,.pending{color:var(--color-text-muted);font-size:.9rem}.pending{clear:both;padding:10px 12px;border-radius:10px;background:var(--color-surface-muted)}article>section:not(.article-hero){scroll-margin-top:90px}article>section>p{font-size:1.04rem}details{border-top:1px solid var(--color-line);padding:0}details:last-of-type{border-bottom:1px solid var(--color-line)}summary{cursor:pointer;padding:18px 42px 18px 4px;font-weight:850;list-style:none}summary::after{content:"＋";float:right;margin-right:-32px;color:var(--color-brand);font-size:1.25rem}details[open] summary::after{content:"−"}details p{margin:0 0 20px;padding:0 4px;color:var(--color-text-subtle)}.sources{margin-top:72px;padding:24px;border-radius:18px;background:var(--color-surface-muted)}.sources h2{margin-top:0;font-size:1.3rem}.source,.review{margin:.45em 0;color:var(--color-text-muted);font-size:.88rem}footer{padding:40px max(24px,calc((100% - 1160px)/2));background:var(--color-text);color:#d1d6db;font-size:.92rem}footer a{color:#fff}@media(max-width:820px){header{align-items:flex-start;flex-direction:column;padding:10px 18px}.brand{min-height:44px;display:flex;align-items:center}nav{width:100%;padding-bottom:2px}main{padding:28px 18px 72px}.hero,.article-hero{grid-template-columns:1fr;padding:30px 24px}.hero-phone{min-height:170px}.hero-phone::before{width:92px;height:165px;border-width:6px;border-radius:23px}.article-hero figure{order:-1}.verdict{grid-template-columns:1fr}.grid,.products,.reason-grid{grid-template-columns:1fr}.confidence{margin-left:0;margin-right:0}.section-head{align-items:flex-start;flex-direction:column}.section-head>a{align-self:flex-end}}@media(max-width:460px){body{font-size:16px}h1,article h1{font-size:2rem}.hero,.article-hero{padding:26px 20px;border-radius:22px}.article-hero figure{margin:0 -2px}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions a{width:100%;min-height:52px}.verdict{padding:20px}.product{padding:20px}.topic-pills a{min-height:46px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.article-hero figure{display:grid;place-items:center;min-height:350px;padding:20px;text-align:center;background:#fff;border:1px solid var(--color-line);border-radius:22px;overflow:hidden}
.article-hero img{width:100%;height:310px;object-fit:contain;background:#fff;box-shadow:none}
.article-hero figcaption,.product-image figcaption,.wide-product figcaption{display:none}
.product-image{float:right;width:42%;margin:0 0 8px 12px;text-align:center}
.product-image img{display:block;width:100%;height:140px;padding:8px;object-fit:contain;background:#fff;border-radius:14px}
.wide-product{max-width:680px;margin:28px auto 0;padding:18px;border:1px solid var(--color-line);border-radius:22px;background:#fff;text-align:center;overflow:hidden}
.wide-product img{display:block;width:100%;height:320px;object-fit:contain;background:#fff;border-radius:14px}
.next-steps{margin-top:72px;padding:28px;border-radius:24px;background:var(--color-brand-soft)}
.next-steps h2{margin-top:.1em}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.related-grid a{display:flex;flex-direction:column;min-height:170px;padding:18px;border:1px solid #c9e2ff;border-radius:16px;background:#fff;color:var(--color-text);text-decoration:none;box-shadow:var(--shadow-card)}
.related-grid a:hover{border-color:var(--color-brand);transform:translateY(-2px)}
.related-grid b{font-size:1.03rem;line-height:1.4}.related-grid span{margin-top:8px;color:var(--color-text-subtle);font-size:.9rem}.related-grid em{margin-top:auto;padding-top:12px;color:var(--color-brand);font-style:normal;font-weight:850}
@media(max-width:460px){.article-hero figure{min-height:250px;padding:12px}.article-hero img{height:230px}.product-image img{height:125px}.wide-product{padding:10px}.wide-product img{height:230px}}
@media(max-width:820px){.related-grid{grid-template-columns:1fr}.related-grid a{min-height:0}.next-steps{padding:22px}}

.content-block > p { max-width: 720px; margin: .8em 0; }
.takeaway { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin: 22px 0; padding: 18px 20px; border: 1px solid #b9d8ff; border-radius: 16px; background: var(--color-brand-soft); }
.takeaway span { padding: 5px 9px; border-radius: 999px; background: var(--color-brand); color: #fff; font-size: .78rem; font-weight: 900; white-space: nowrap; }
.takeaway strong { font-size: 1.05rem; line-height: 1.55; }
.table-scroll { overflow-x: auto; margin: 22px 0; border: 1px solid var(--color-line); border-radius: 18px; background: #fff; }
.compare-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 15px 16px; border-bottom: 1px solid var(--color-line); text-align: left; }
.compare-table thead th { background: var(--color-brand-soft); color: var(--color-text-subtle); font-size: .9rem; }
.compare-table tbody th { font-weight: 850; }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }
.compare-table td:nth-child(2) { background: #f7faff; color: var(--color-brand); font-weight: 850; }
.step-list { display: grid; gap: 12px; margin: 22px 0; padding: 0; list-style: none; counter-reset: steps; }
.step-list li { display: flex; gap: 14px; padding: 17px 18px; border: 1px solid var(--color-line); border-radius: 16px; background: #fff; counter-increment: steps; }
.step-list li::before { content: counter(steps); display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--color-brand); color: #fff; font-weight: 900; }
.step-list b, .check-list b { display: block; font-size: 1.04rem; }
.step-list p, .check-list p { margin: 3px 0 0; color: var(--color-text-subtle); line-height: 1.55; }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 12px; padding: 17px; border-radius: 16px; background: var(--color-brand-soft); }
.check-list li > span { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--color-brand); color: #fff; font-weight: 900; }
@media (max-width: 620px) {
  .takeaway { grid-template-columns: 1fr; }
  .takeaway span { justify-self: start; }
  .check-list { grid-template-columns: 1fr; }
  .content-block > p { margin: .68em 0; line-height: 1.7; }
  .step-list li { padding: 15px; }
  .compare-table th, .compare-table td { padding: 13px 12px; }
}
.affiliate-offer{display:grid;gap:6px;clear:both;margin-top:12px}.affiliate-offer .buy{width:100%;text-align:center}.affiliate-offer small{color:var(--color-text-muted);font-size:.78rem;line-height:1.45}

/* 2026-08-24 모바일 육안 검수에서 잡은 결함 수정 (Claude 총괄)
   1) 모바일 네비가 글자끼리 붙어 한 덩어리로 보이고 오른쪽이 잘려 스크롤 가능한지 알 수 없었다.
      → 알약(pill) 형태로 분리하고, 잘리는 쪽에 페이드를 넣어 더 있다는 것을 보이게 한다.
   2) 제품 이미지 프레임의 회색 띠는 원본 파일에서 제거했다(tools/whiten_backgrounds.py). */

@media (max-width: 820px) {
  header { gap: 4px; padding-bottom: 6px; }
  nav {
    position: relative;
    gap: 8px;
    width: 100%;
    padding: 2px 20px 8px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  }
  nav::-webkit-scrollbar { display: none; }
  nav a {
    flex: 0 0 auto;          /* flex 축소로 라벨이 잘리던 문제 */
    white-space: nowrap;
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text);
    font-size: .9rem;
    font-weight: 800;
  }
  nav a:hover { background: var(--color-brand-soft); color: var(--color-brand-strong); }
}

/* PC 가독 폭 — 대표 지적 "웹으로 보면 너무 넓어서 한눈에 안 들어온다" (2026-08-24)
   본문 한 줄이 길면 시선이 되돌아올 지점을 잃는다. 글 본문은 760px 안으로 묶고,
   히어로·표처럼 넓어야 하는 블록만 예외로 조금 더 준다. */
article { max-width: 880px; }
article > section > p,
article > section > .body-p,
article .content-block p,
article details p,
article .takeaway { max-width: 760px; }
article > section > h2,
article .content-block h2 { max-width: 760px; }
.article-hero { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 24px; padding: 30px; }
.article-hero .lead { max-width: 100%; }
.article-hero figure { min-height: 300px; padding: 14px; }
.article-hero img { height: 270px; }
article h1 { font-size: clamp(1.85rem, 2.5vw, 2.45rem); }
@media (min-width: 1100px) {
  main { max-width: 1120px; }
}

/* 제품 카드의 "지금 최저가" 블록 — 공식가 대비 얼마나 싼지를 카드에서 바로 보여준다 */
.price-now { display: grid; gap: 2px; margin: 10px 0 6px; padding: 12px 14px; border-radius: 14px; background: #fff6ef; border: 1px solid #ffd6bd; }
.price-now span { color: var(--color-text-muted); font-size: .8rem; font-weight: 750; }
.price-now strong { color: var(--color-accent); font-size: 1.5rem; font-weight: 900; line-height: 1.2; }
.price-now em { color: #b4531a; font-size: .88rem; font-style: normal; font-weight: 800; }
.affiliate-offer { margin-top: 10px; }
.affiliate-offer .buy { width: 100%; }
.offer-meta, .offer-colors { display: block; margin-top: 5px; color: var(--color-text-muted); font-size: .82rem; }
.offer-colors a { font-weight: 700; }

/* 홈 히어로: CSS 도형 대신 실제 제품 사진을 쓴다 (대표 지시: 사진 최대한 많이) */
.hero-shot { margin: 0; display: grid; place-items: center; }
.hero-shot img { width: 100%; max-width: 420px; height: auto; object-fit: contain; background: #fff; border: 1px solid var(--color-line); border-radius: 22px; padding: 14px; }
@media (max-width: 820px) { .hero-shot img { max-width: 320px; padding: 10px; } }

/* 제품 이미지 프레임: 흰 배경 위 얇은 테두리로 통일한다(회색 띠 금지) */
.article-hero figure,
.wide-product,
.product-image img { background: #fff; }
.article-hero img,
.wide-product img,
.product-image img { mix-blend-mode: normal; }

/* 표는 가로 스크롤 컨테이너 안에 갇혀야 한다 — 페이지가 통째로 밀리면 안 된다 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-line);
  border-radius: 16px;
}
.table-scroll table { margin: 0; }
/* 가격이 "1,290,000 / 원" 으로 쪼개져 읽히던 문제 — 마지막 설명 열만 줄바꿈을 허용한다 */
.table-scroll .compare-table { width: max-content; min-width: 100%; }
.table-scroll .compare-table th:not(:last-child),
.table-scroll .compare-table td:not(:last-child) { white-space: nowrap !important; }
.table-scroll .compare-table th:last-child,
.table-scroll .compare-table td:last-child { word-break: keep-all; min-width: 200px !important; }

/* 제품 카드 사진을 키운다 — 대표 지시: 상품 사진은 크고 많이 */
.product-image { width: 46%; }
.product-image img { height: 170px; }
@media (max-width: 460px) {
  .product-image { float: none; width: 100%; margin: 0 0 12px; }
  .product-image img { height: 190px; }
}
@media (max-width: 460px) {
  .table-scroll { mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%); }
}

*{min-width:0}html,body{width:100%;max-width:100%;overflow-x:hidden}h1,p,a{overflow-wrap:anywhere}@media(max-width:760px){main,article,section,.hero,.products,.grid{width:100%;max-width:100%}main{width:100%;padding-left:18px;padding-right:18px}.hero-actions{display:grid;grid-template-columns:minmax(0,1fr)}.hero-actions a{display:block;width:100%;max-width:100%;text-align:center}.product,.grid a,aside{width:100%;max-width:100%}h1,article h1{max-width:100%;font-size:1.78rem;line-height:1.28;word-break:break-all;overflow-wrap:anywhere}.lead{font-size:1.02rem}.hero{padding:28px 22px}}