/* GREENVIVI · 시안 A "햇살 드는 욕실" + 정보 영역은 시안 C 편집 방식 */
:root { color-scheme: light;
  --white:#fff; --cream:#FBFAF6; --green:#4DB88C; --green-d:#23735A; --ink:#173D32; --muted:#4F6359; --line:#E6ECE8;
  --sky:#CFEAF6; --butter:#F6E7AF; --peach:#F6D1C9; --aqua:#C5EAE7; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif; color:var(--ink); background:var(--white); font-size:17px; line-height:1.7; word-break:keep-all; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
h1,h2,h3 { font-family:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-weight:400; line-height:1.3; }
.wrap { width:min(1180px, 100% - 48px); margin-inline:auto; }
.eyebrow { font-size:13px; letter-spacing:.14em; color:var(--green-d); font-weight:700; text-transform:uppercase; }
.skip { position:absolute; left:-999px; }
.skip:focus { left:16px; top:12px; z-index:99; background:#fff; padding:8px 12px; }

/* header */
.site-header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:68px; gap:24px; }
.logo { font-weight:700; letter-spacing:.08em; color:var(--green-d); text-decoration:none; font-size:20px; }
.site-nav { display:flex; gap:26px; font-size:15px; }
.site-nav a { text-decoration:none; color:var(--muted); }
.site-nav a:hover, .site-nav a[aria-current] { color:var(--ink); }
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px; background:var(--ink); color:#fff; text-decoration:none; font-weight:500; font-size:16px; transition:transform .2s; border:1px solid var(--ink); }
.btn:hover { transform:translateY(-2px); }
.btn.naver { background:#028A3E; border-color:#028A3E; }
.btn.ghost { background:#fff; color:var(--ink); }
.btn.sm { padding:9px 18px; font-size:14px; }
.link { font-weight:500; text-decoration:underline; text-decoration-color:var(--green); text-underline-offset:5px; text-decoration-thickness:2px; }

/* home hero */
.hero { display:grid; grid-template-columns:42fr 58fr; gap:56px; align-items:center; padding:72px 0 88px; }
.hero h1 { font-size:58px; margin:18px 0 22px; }
.lead { font-size:19px; color:var(--muted); max-width:34ch; }
.cta { display:flex; align-items:center; gap:22px; margin-top:34px; flex-wrap:wrap; }
.hero figure { border-radius:28px; overflow:hidden; aspect-ratio:1/1; }
.hero figure img { width:100%; height:100%; object-fit:cover; }
.facts { display:flex; gap:28px; margin-top:44px; padding-top:24px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); flex-wrap:wrap; }
.facts b { display:block; font-size:22px; color:var(--ink); font-family:"Gowun Dodum"; font-weight:400; }
.asof { font-size:13px; color:var(--muted); }

/* sections */
section { padding:96px 0; }
section.tint { background:var(--cream); }
.sec-head { max-width:680px; margin-bottom:44px; }
.sec-head h2 { font-size:38px; margin:10px 0 14px; }
.sec-head p { color:var(--muted); }

/* shelf */
.shelf { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; }
.feature { background:var(--peach); border-radius:28px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; }
.feature img { aspect-ratio:1/1; object-fit:cover; }
.feature .body { padding:30px 34px 36px; }
.tag { display:inline-block; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:#fff; margin-bottom:12px; }
.feature h3 { font-size:30px; margin-bottom:8px; }
.meta { font-size:14px; color:var(--muted); }
.rows { display:flex; flex-direction:column; }
.row { display:grid; grid-template-columns:132px 1fr auto; gap:24px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.row:first-child { padding-top:0; }
.row img { border-radius:18px; aspect-ratio:1/1; object-fit:cover; }
.row h3 { font-size:23px; margin-bottom:4px; }
.row p { font-size:15px; color:var(--muted); }
.arrow { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:.2s; flex:none; }
.row:hover .arrow { background:var(--ink); color:#fff; }
.swatch { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }

/* routine */
.steps { display:grid; grid-template-columns:repeat(3,1fr); position:relative; list-style:none; }
.steps::before { content:""; position:absolute; top:27px; left:16%; right:16%; border-top:2px dashed #CFE3D8; }
.step { text-align:center; padding:0 28px; position:relative; }
.step .num { width:56px; height:56px; border-radius:50%; margin:0 auto 22px; display:grid; place-items:center; font-family:"Gowun Dodum"; font-size:22px; }
.step h3 { font-size:24px; margin-bottom:8px; }
.step p { font-size:15px; color:var(--muted); }
.note-card { margin-top:56px; display:grid; grid-template-columns:220px 1fr auto; gap:32px; align-items:center; background:#fff; border-radius:24px; padding:22px; }
.note-card img { border-radius:16px; aspect-ratio:1/1; object-fit:cover; }

/* compare table (시안 C) */
.compare { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:#fff; font-size:15px; }
th, td { padding:15px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
thead th { font-family:"Gowun Dodum"; font-weight:400; font-size:18px; vertical-align:bottom; }
tbody th { color:var(--muted); font-weight:500; width:130px; white-space:nowrap; }
td a { font-weight:500; color:var(--green-d); }

/* proof */
.proof { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.proof figure { border-radius:28px; overflow:hidden; }
dl.records dt { font-family:"Gowun Dodum"; font-size:21px; padding-top:20px; border-top:1px solid var(--line); }
dl.records dd { color:var(--muted); font-size:15px; padding:6px 0 20px; }
small.src { display:block; font-size:13px; margin-top:4px; color:var(--muted); }

/* faq */
.faq { max-width:860px; }
.faq details { border-bottom:1px solid var(--line); padding:22px 0; }
.faq summary { font-family:"Gowun Dodum"; font-size:21px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--green); font-size:26px; line-height:1; flex:none; }
.faq details[open] summary::after { content:"−"; }
.faq details p { margin-top:12px; color:var(--muted); }
.faq .src { font-size:12px; color:#8CA197; margin-top:6px; }

/* brand */
.brand { background:var(--ink); color:#fff; border-radius:32px; padding:72px; display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.brand h2 { font-size:44px; }
.brand ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.brand li b { display:block; font-family:"Gowun Dodum"; font-weight:400; font-size:20px; color:#9FE0C4; }
.brand li { font-size:15px; color:#D7E6DF; }

/* product page */
.crumbs { font-size:13px; color:var(--muted); padding-top:24px; }
.crumbs a { text-decoration:none; }
.crumbs ol { list-style:none; display:flex; gap:8px; flex-wrap:wrap; }
.crumbs li + li::before { content:"/"; margin-right:8px; color:#B7C6BF; }
.p-hero { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:36px 0 80px; }
.p-hero .gallery { display:grid; grid-template-columns:1fr; gap:14px; }
.p-hero .gallery img { border-radius:28px; aspect-ratio:1/1; object-fit:cover; width:100%; }
.p-hero h1 { font-size:46px; margin:14px 0 6px; }
.p-hero .en { font-size:14px; letter-spacing:.06em; color:var(--muted); }
.p-hero .summary { font-size:18px; margin:22px 0; }
.spec { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); margin:26px 0; }
.spec div { padding:14px 12px; font-size:13px; color:var(--muted); }
.spec div + div { border-left:1px solid var(--line); }
.spec b { display:block; font-size:17px; color:var(--ink); font-weight:500; }
.chips { display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.chips li { background:var(--cream); border:1px solid var(--line); border-radius:999px; padding:5px 13px; font-size:14px; }
.toc { position:sticky; top:68px; z-index:5; background:#fff; border-bottom:1px solid var(--line); }
.toc ul { display:flex; gap:26px; list-style:none; overflow-x:auto; padding:14px 0; font-size:15px; white-space:nowrap; }
.toc a { text-decoration:none; color:var(--muted); }
.toc a:hover { color:var(--ink); }
.answer { font-size:19px; max-width:760px; }
.points { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:44px; list-style:none; }
.points li { border-top:2px solid var(--ink); padding-top:18px; }
.points h3 { font-size:22px; margin-bottom:8px; }
.points p { font-size:15px; color:var(--muted); }
.points .num { font-family:"Gowun Dodum"; font-size:30px; color:var(--green-d); display:block; }
.how { list-style:none; counter-reset:how; display:grid; gap:14px; max-width:760px; }
.how li { counter-increment:how; display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start; }
.how li::before { content:counter(how); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-family:"Gowun Dodum"; font-size:19px; background:var(--tone, var(--cream)); }
.dict .entry { padding:18px 0; border-bottom:1px solid var(--line); }
.dict .entry:first-child { padding-top:0; }
.dict h3 { font-size:20px; }
.dict h3 small { font-family:inherit; font-size:13px; color:var(--muted); margin-left:8px; }
.dict p { font-size:15px; color:var(--muted); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.inci { background:var(--cream); border-radius:20px; padding:26px 28px; font-size:14px; color:var(--muted); line-height:1.9; }
.info-table th { width:150px; }
.buy { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:20px; list-style:none; }
.buy a { display:block; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; transition:transform .2s; height:100%; }
.buy a:hover { transform:translateY(-3px); }
.buy img { aspect-ratio:1/1; object-fit:cover; width:100%; }
.buy div { padding:16px 18px 20px; }
.buy h3 { font-size:18px; }
.buy p { font-size:13px; color:var(--muted); }
.related { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; list-style:none; }
.related a { display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; text-decoration:none; padding:14px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.related img { border-radius:14px; aspect-ratio:1/1; object-fit:cover; }
.related h3 { font-size:18px; }
.related p { font-size:13px; color:var(--muted); }
.notice { font-size:13px; color:var(--muted); margin-top:14px; }
.buybar { display:none; }

/* footer */
.site-footer { padding:56px 0 72px; font-size:14px; color:var(--muted); border-top:1px solid var(--line); margin-top:40px; }
.site-footer .wrap { display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.site-footer a { text-decoration:none; display:inline-block; padding:3px 0; min-height:24px; }
.site-footer a:hover { text-decoration:underline; }

@media (max-width:900px) {
  body { font-size:16px; }
  .site-nav { display:none; }
  .hero, .shelf, .proof, .brand, .p-hero, .two { grid-template-columns:1fr; }
  .hero { padding:40px 0 64px; gap:32px; }
  .hero h1 { font-size:38px; }
  .p-hero { padding:20px 0 56px; gap:28px; }
  .p-hero h1 { font-size:32px; }
  .p-hero .gallery img:nth-child(n+2) { display:none; }
  .p-hero .gallery img { aspect-ratio:4/3; }
  .sec-head h2 { font-size:28px; }
  section { padding:64px 0; }
  .steps, .points, .related { grid-template-columns:1fr; gap:28px; }
  .steps::before { display:none; }
  .row { grid-template-columns:96px 1fr; }
  .row .arrow { display:none; }
  .note-card { grid-template-columns:1fr; }
  .brand { padding:40px 28px; }
  .brand ul { grid-template-columns:1fr; }
  .compare table { min-width:680px; }
  .buybar { display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:20; }
  .buybar .btn { flex:1; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.18); }
  .has-buybar { padding-bottom:84px; }
}

/* 가이드 */
.guide-cards { list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px; }
.guide-cards a { display:flex; flex-direction:column; height:100%; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:transform .2s; }
.guide-cards img { width:100%; aspect-ratio:4/3; object-fit:cover; border-bottom:6px solid var(--tone, var(--green)); }
.g-body { display:flex; flex-direction:column; gap:8px; padding:20px 24px 24px; flex:1; }
.guide-cards a:hover { transform:translateY(-3px); }
.guide-cards h3 { font-size:21px; }
.guide-cards p { font-size:15px; color:var(--muted); flex:1; }
.g-tag { align-self:flex-start; font-size:12px; font-weight:700; background:var(--tone, var(--cream)); border-radius:999px; padding:3px 10px; }
.g-more { font-size:14px; font-weight:700; color:var(--green-d); }
.guide-cards.small { grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); }
.guide-cards.small p { display:none; }
.article { max-width:820px; padding-bottom:40px; }
.article .a-head { margin:26px 0 22px; }
.article h1 { font-size:40px; margin:10px 0 12px; }
.a-meta { font-size:14px; color:var(--muted); }
.answer-box { background:var(--tone, var(--cream)); border-radius:18px; padding:20px 24px; font-size:18px; font-weight:500; }
.a-fig { margin:28px 0; }
.a-fig img { border-radius:24px; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; }
.a-fig figcaption { font-size:13px; color:var(--muted); margin-top:8px; }
.a-body h2 { font-size:28px; margin:40px 0 14px; }
.a-body p { margin-bottom:14px; }
.a-body ol, .a-body ul { padding-left:22px; margin-bottom:16px; }
.a-body li { margin:6px 0; }
.a-body a { color:var(--green-d); font-weight:500; }
.src-note { font-size:13px; color:var(--muted); }
.product-cta { display:grid; grid-template-columns:160px 1fr; gap:26px; align-items:center; background:var(--tone, var(--cream)); border-radius:24px; padding:24px; margin:48px 0; }
.product-cta:not(:has(img)) { grid-template-columns:1fr; }
.product-cta img { border-radius:16px; aspect-ratio:1/1; object-fit:cover; }
.product-cta h2 { font-size:26px; margin:6px 0; }
.product-cta .cta { margin-top:16px; }
.a-more h2 { font-size:24px; margin-bottom:18px; }
@media (max-width:900px) {
  .article h1 { font-size:30px; }
  .a-body h2 { font-size:23px; }
  .answer-box { font-size:16px; }
  .product-cta { grid-template-columns:1fr; }
  .product-cta img { max-width:160px; }
}

/* 데스크톱만 Noto Sans KR 웹폰트 (모바일은 기기 기본 한글 폰트로 속도 우선) */
@media (min-width:901px) { body { font-family:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; } }

/* 푸터 채널 로고 */
.channels { list-style:none; display:grid; gap:10px; align-content:start; }
.channels a { display:inline-flex; align-items:center; gap:9px; }
.channels svg { width:22px; height:22px; flex:none; }