/* 공용 스타일 — 라이트 에디토리얼
   public/ 에서 손으로 관리하는 유일한 파일이다. build.js 가 덮어쓰지 않는다.

   원칙 네 가지. 고칠 때 이걸 깨지 말 것.
     1. 배경은 흰색과 종이결 두 가지뿐이다. 그러데이션을 쓰지 않는다.
     2. 구분은 그림자가 아니라 1px 선과 여백으로 한다.
     3. 강조색은 링크와 값에만 쓴다. 면으로 칠하지 않는다.
        예외는 하단 고정 배너의 CTA 버튼 하나뿐이다. 거기까지 조용하면
        배너의 존재 이유가 없어진다.
     4. 글로우 · 펄스 같은 장식 효과를 넣지 않는다. */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#14161A;          /* 제목 · 강한 텍스트 */
  --body:#5B6069;         /* 본문 */
  --muted:#8A9099;        /* 보조 */
  --line:#E8E8E4;         /* 1px 선 */
  --line-strong:#D6D6D0;
  --bg:#FFFFFF;
  --paper:#FAFAF8;        /* 종이결 — 섹션 교차용 */
  --accent:#1A5FD0;       /* 선명한 파랑. 아주 조금만 */
  --accent-dark:#144BA6;
  --warn:#B4540E;         /* 경고 텍스트 전용. 면으로 쓰지 않는다 */
}
html{scroll-behavior:smooth}
body{
  font-family:'Pretendard','Noto Sans KR','Malgun Gothic',-apple-system,sans-serif;
  color:var(--body); background:var(--bg); line-height:1.75;
  -webkit-text-size-adjust:100%; overflow-x:hidden; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.sec{padding:92px 0}
.sec-ice{background:var(--paper)}
.sec-navy{background:var(--paper)}      /* 어두운 섹션을 없앤다 */
section[id]{scroll-margin-top:80px}

.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:12px 18px;z-index:999}
.skip:focus{left:12px;top:12px}

/* 섹션 머리 — 가운데 정렬을 버리고 왼쪽으로 붙인다 */
.eyebrow{display:block;text-align:left;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
h2.sec-title{font-size:clamp(25px,3.6vw,38px);font-weight:700;color:var(--ink);
  text-align:left;line-height:1.3;letter-spacing:-.035em}
.sec-lead{text-align:left;color:var(--body);font-size:16px;margin:16px 0 0;
  max-width:620px;line-height:1.85}
.rule{width:100%;height:1px;background:var(--line);margin:40px 0 44px;border-radius:0}

/* HEADER */
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(180%) blur(12px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:baseline;gap:9px;font-weight:700;font-size:19px;
  color:var(--ink);letter-spacing:-.02em}
.logo b{font-weight:700;color:var(--ink)}
.logo small{font-size:10.5px;font-weight:500;color:var(--muted);letter-spacing:.14em}
.nav-menu{display:flex;gap:26px;list-style:none}
.nav-menu a{font-size:14px;font-weight:500;color:var(--body);transition:color .18s}
.nav-menu a:hover{color:var(--ink)}
.nav-menu a.cur{color:var(--ink);font-weight:600}
.burger{display:none;width:34px;height:34px;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px}
.burger span{display:block;height:1.5px;background:var(--ink);border-radius:2px}

/* HERO — 흰 배경, 왼쪽 정렬 */
.hero{position:static;background:var(--bg);color:var(--ink);padding:84px 0 72px;
  border-bottom:1px solid var(--line);overflow:visible}
.hero::after{content:none}
.hero .wrap{position:static;text-align:left}
.hero h1{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px}
.hero-copy{font-size:clamp(32px,5.4vw,58px);font-weight:700;line-height:1.22;
  letter-spacing:-.045em;color:var(--ink);margin-bottom:24px;max-width:16ch}
.hero-copy em{font-style:normal;color:var(--accent)}
.hero-sub{font-size:clamp(15px,1.7vw,17.5px);font-weight:400;color:var(--body);
  max-width:600px;margin:0;line-height:1.9}

/* 지표 — 박스 대신 구분선 */
.hero-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-width:none;margin:52px 0 0;border-top:1px solid var(--line)}
.fact{padding:24px 24px 4px 0;border:0;border-right:1px solid var(--line);
  border-radius:0;background:none}
.fact:last-child{border-right:0}
.fact b{display:block;font-size:30px;font-weight:700;color:var(--ink);
  letter-spacing:-.04em;margin-bottom:8px;font-feature-settings:"tnum"}
.fact b i{font-style:normal;color:var(--ink)}
.fact span{font-size:12.5px;color:var(--muted);line-height:1.65}

/* 라인업 */
.lineup{display:flex;gap:0;overflow-x:auto;padding:44px 0 4px;list-style:none;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  border-top:1px solid var(--line);margin-top:44px}
.lineup::-webkit-scrollbar{display:none}
.lineup li{flex:0 0 auto;width:172px;border-right:1px solid var(--line)}
.lineup li:last-child{border-right:0}
.lineup a{display:block;text-align:left;padding:0 20px 0 0;border-radius:0;
  background:none;border:0;transition:opacity .2s;height:100%}
.lineup li:not(:first-child) a{padding-left:20px}
.lineup a:hover{opacity:.6;transform:none;background:none}
.thumb{height:112px;border-radius:0;background:none;display:flex;align-items:center;
  justify-content:flex-start;margin-bottom:16px;padding:0;overflow:hidden}
.thumb img{max-height:100%;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.li-name{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.5}
.li-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.li-price{display:block;font-size:13px;font-weight:600;color:var(--body);margin-top:8px;
  font-feature-settings:"tnum"}

/* 버튼 — 검정 솔리드와 텍스트 링크 */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:28px;margin-top:48px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;
  border-radius:6px;font-weight:600;font-size:15px;transition:.18s;cursor:pointer;border:0;
  font-family:inherit;letter-spacing:-.01em}
.btn-solid{background:var(--ink);color:#fff;box-shadow:none}
.btn-solid:hover{background:#000;transform:none}
.btn-blue{background:#fff;color:var(--ink);border:1px solid var(--line-strong);box-shadow:none}
.btn-blue:hover{background:var(--paper);border-color:var(--ink);transform:none}
.btn-ghost{background:none;color:var(--body);border:0;padding:15px 0;font-weight:500}
.btn-ghost:hover{background:none;color:var(--ink);border:0}
.btn-sm{padding:12px 24px;font-size:14px}
.btn-ghost.btn-sm{padding:12px 0}

/* 서브페이지 히어로 */
.hero-sub-page{background:var(--bg);color:var(--ink);padding:56px 0 52px;
  border-bottom:1px solid var(--line);position:static;overflow:visible}
.hero-sub-page::after{content:none}
.hero-sub-page .wrap{position:static}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:20px}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 8px;opacity:.5}
.hero-sub-page h1{font-size:clamp(28px,4.6vw,44px);font-weight:700;color:var(--ink);
  letter-spacing:-.04em;line-height:1.25;margin-bottom:18px}
.hero-sub-page p{font-size:clamp(15px,1.7vw,17px);color:var(--body);font-weight:400;
  line-height:1.9;max-width:640px}

/* 본문 */
.prose{max-width:720px;margin:0 auto;font-size:16.5px}
.prose h2{font-size:clamp(21px,2.8vw,27px);font-weight:700;color:var(--ink);letter-spacing:-.03em;
  line-height:1.35;margin:64px 0 20px;padding-bottom:0;border-bottom:0}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;font-weight:600;color:var(--ink);margin:38px 0 12px;letter-spacing:-.02em}
.prose p{line-height:1.95;margin-bottom:20px}
.prose ul,.prose ol{margin:0 0 24px 0;padding-left:20px}
.prose li{line-height:1.9;margin-bottom:10px}
.prose a{color:var(--accent);font-weight:500;border-bottom:1px solid rgba(26,95,208,.25)}
.prose a:hover{border-bottom-color:var(--accent)}
.prose strong{color:var(--ink);font-weight:600}
.prose table{margin:28px 0}
.prose figure{margin:32px 0}

/* 카드 — 테두리만 */
.grid{display:grid;gap:0;border-top:1px solid var(--line)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:none;border:0;border-right:1px solid var(--line);border-radius:0;
  padding:30px 28px 30px 0;transition:none}
.grid .card:last-child{border-right:0}
.card:hover{box-shadow:none;transform:none}
.card h3{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:12px;letter-spacing:-.02em}
.card p{font-size:14.5px;line-height:1.85;color:var(--body)}
.chip{display:inline-block;height:auto;padding:0;border-radius:0;background:none;
  color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.06em;margin-bottom:14px;
  text-transform:uppercase}
.g2 .card:not(:first-child),.g3 .card:not(:first-child),.g4 .card:not(:first-child){padding-left:28px}

/* 효능 섹션의 카드 (예전 네이비 전용 블록) */
.scen-card{background:none !important;border:0 !important;border-right:1px solid var(--line) !important;
  border-radius:0 !important;padding:30px 28px 30px 0 !important}
.grid .scen-card:last-child{border-right:0 !important}
.scen-card h3{color:var(--ink) !important;font-size:17px !important;font-weight:600 !important}
.scen-card p{color:var(--body) !important}
.scen-card p strong{color:var(--accent) !important}
.g2 .scen-card:not(:first-child),.g4 .scen-card:not(:first-child){padding-left:28px !important}
.sec-navy .eyebrow{color:var(--muted)}
.sec-navy h2.sec-title{color:var(--ink)}
.sec-navy .sec-lead{color:var(--body)}
.sec-navy .sec-lead strong{color:var(--ink)}

/* SPLIT */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:start}
.split h2{text-align:left;font-size:clamp(24px,3.4vw,34px);font-weight:700;color:var(--ink);
  line-height:1.3;letter-spacing:-.04em;margin-bottom:26px}
.split p{font-size:16.5px;line-height:1.95;margin-bottom:20px}
.split-fig{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.split-fig img{border-radius:4px;mix-blend-mode:multiply}
.split-fig figcaption{font-size:13px;color:var(--muted);margin-top:18px;text-align:left;line-height:1.75}
.deflist{list-style:none;margin-top:12px;border-top:1px solid var(--line)}
.deflist li{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.deflist li:last-child{border-bottom:1px solid var(--line)}
.deflist b{flex:0 0 100px;font-size:14.5px;font-weight:600;color:var(--ink)}
.deflist span{font-size:14.5px;line-height:1.8;color:var(--body)}

/* TABLE */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:0;border:0;
  border-top:1px solid var(--ink)}
table{width:100%;border-collapse:collapse;background:none;min-width:600px}
th,td{padding:16px 18px 16px 0;text-align:left;font-size:14.5px;
  border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:none;color:var(--muted);font-weight:600;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;padding-top:14px;padding-bottom:14px}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:1px solid var(--ink)}
tbody th{font-weight:600;color:var(--ink);background:none;white-space:nowrap}
td.hl{color:var(--ink);font-weight:600}
.note{font-size:13.5px;color:var(--muted);margin-top:18px;line-height:1.85}

/* STEPS — 번호를 선 위에 */
.steps{counter-reset:s;display:grid;gap:0;max-width:760px;margin:0;
  border-top:1px solid var(--line)}
.step{counter-increment:s;position:relative;background:none;border:0;
  border-bottom:1px solid var(--line);border-radius:0;padding:26px 0 26px 60px}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:28px;
  width:auto;height:auto;border-radius:0;background:none;color:var(--muted);
  font-weight:600;font-size:13px;display:block;letter-spacing:.04em}
.step h3{font-size:16.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.step p{font-size:14.5px;line-height:1.85}

/* CALLOUT / ALERT — 왼쪽 선만 */
.callout{max-width:720px;margin:0;background:none;border:0;
  border-left:2px solid var(--ink);border-radius:0;padding:4px 0 4px 26px}
.callout h3{font-size:16.5px;font-weight:600;color:var(--ink);margin-bottom:10px}
.callout p{font-size:15px;line-height:1.9}
.callout a{color:var(--accent);font-weight:500}
.alert{max-width:720px;margin:0;background:none;border:0;
  border-left:2px solid var(--warn);border-radius:0;padding:4px 0 4px 26px}
.alert h3{font-size:16.5px;font-weight:600;color:var(--warn);margin-bottom:10px;letter-spacing:-.02em}
.alert>p{font-size:15px;line-height:1.9;color:var(--body);margin-bottom:18px}
.alert ul{list-style:none;display:grid;gap:12px}
.alert ul li{display:flex;gap:10px;font-size:14.5px;line-height:1.8;color:var(--body);font-weight:400}
.alert ul li b{flex:0 0 auto;color:var(--muted);font-weight:400}
.alert ul li strong{color:var(--ink);font-weight:600}
.prose .callout,.prose .alert{margin:32px 0}

/* 구매 바로가기 */
.buy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.buy{display:flex;flex-direction:column;background:none;border:0;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0;padding:26px 24px 26px 0;transition:opacity .2s;height:100%}
.buy:hover{transform:none;box-shadow:none;border-color:var(--line);opacity:.6}
.buy-grid .buy:nth-child(4n){border-right:0}
.buy-grid .buy:not(:nth-child(4n+1)){padding-left:24px}
.buy-thumb{background:none;border:0;border-radius:0;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;margin-bottom:18px}
.buy-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.buy-name{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.5;letter-spacing:-.01em}
.buy-form{display:block;font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.6}
.buy-foot{margin-top:auto;padding-top:18px;display:flex;align-items:baseline;
  justify-content:space-between;gap:10px}
.buy-price{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.02em;font-feature-settings:"tnum"}
.buy-go{font-size:12.5px;font-weight:500;color:var(--accent);background:none;
  padding:0;border-radius:0;white-space:nowrap}
.buy:hover .buy-go{background:none;color:var(--accent-dark)}
.buy-note{max-width:720px;margin:32px 0 0;text-align:left;font-size:13.5px;
  color:var(--muted);line-height:1.9}
.buy-note a{color:var(--accent);font-weight:500}

/* 주제별 카드(네이버 캐러셀과 같은 원천) */
.ot-cards__list{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;
  border-top:1px solid var(--line)}
.ot-cards__list[data-n="9"]{grid-template-columns:repeat(3,1fr)}
.ot-cards__list[data-n="6"]{grid-template-columns:repeat(3,1fr)}
.ot-cards__item{display:flex;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.ot-cards__list[data-n="9"] .ot-cards__item:nth-child(3n),
.ot-cards__list[data-n="6"] .ot-cards__item:nth-child(3n){border-right:0}
.ot-cards__list:not([data-n="9"]):not([data-n="6"]) .ot-cards__item:nth-child(4n){border-right:0}
.ot-cards__link{display:flex;flex-direction:column;width:100%;background:none;
  border:0;border-radius:0;padding:26px 24px 26px 0;transition:opacity .2s}
.ot-cards__item:not(:first-child) .ot-cards__link{padding-left:24px}
.ot-cards__link:hover{transform:none;box-shadow:none;opacity:.6}
.ot-cards__thumb{display:block;background:none;border:0;border-radius:0;
  aspect-ratio:4/3;overflow:hidden;margin-bottom:18px}
.ot-cards__img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ot-cards__name{display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.ot-cards__go{display:block;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.6}

/* FAQ */
.faq{max-width:760px;margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.faq-item{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;overflow:hidden}
.faq-q{width:100%;border:0;background:none;cursor:pointer;text-align:left;padding:24px 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;font-family:inherit}
.faq-q span.qt{font-size:16px;font-weight:500;color:var(--ink);line-height:1.6}
.faq-q span.qn{color:var(--muted);font-weight:500;font-style:normal;margin-right:12px}
.faq-q .arw{flex:0 0 auto;width:9px;height:9px;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .25s;margin-top:6px}
.faq-item.open .faq-q span.qt{font-weight:600}
.faq-item.open .faq-q .arw{transform:rotate(225deg);margin-top:11px}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 0 26px;font-size:15px;line-height:1.95;color:var(--body);max-width:62ch}

/* 핵심 요약 (AEO) */
.answer{max-width:760px;margin:0;background:none;border:0;
  border-top:2px solid var(--ink);border-radius:0;padding:32px 0 0;box-shadow:none}
.answer h2{font-size:clamp(19px,2.4vw,24px);font-weight:700;color:var(--ink);
  letter-spacing:-.03em;margin-bottom:26px;padding-bottom:0;border-bottom:0}
.answer ul{list-style:none;display:grid;gap:0}
.answer li{position:relative;padding:16px 0;font-size:16px;line-height:1.85;color:var(--body);
  border-bottom:1px solid var(--line)}
.answer li::before{content:none}
.answer-src{margin-top:20px;padding-top:0;border-top:0;font-size:12.5px;color:var(--muted)}

/* FOOTER */
footer{background:var(--bg);color:var(--body);padding:72px 0 210px;font-size:13.5px;
  border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:56px;
  border-bottom:1px solid var(--line);padding-bottom:44px}
footer h4{color:var(--ink);font-size:16px;font-weight:700;letter-spacing:-.02em;margin-bottom:18px}
footer h5{color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:18px}
footer p{font-size:13.5px;line-height:1.9;opacity:1;color:var(--body);max-width:44ch}
footer p+p{margin-top:14px}
footer ul{list-style:none}
footer ul li{margin-bottom:11px}
footer ul a{font-size:13.5px;opacity:1;color:var(--body);transition:.18s}
footer ul a:hover{opacity:1;color:var(--ink)}
.f-disc{margin-top:32px;font-size:12.5px;line-height:1.9;color:var(--muted);max-width:76ch;opacity:1}
.f-disc strong{color:var(--body);font-weight:600}
.copy{margin-top:24px;font-size:12px;color:var(--muted);opacity:1;text-align:left}

/* STICKY CTA — 하단 고정 배너
   본문이 흰 여백 위주라 배너까지 조용하면 존재감이 없다.
   여기만 유일하게 색면(강조 파랑 버튼)을 쓴다. 대신 형태는 그대로 —
   1px 선, 그림자 없음, 라운드 최소. 6초 뒤 스스로 접혀 본문을 비켜 준다. */
#sticky{position:fixed;left:0;right:0;bottom:0;z-index:950;transform:translateY(105%);
  transition:transform .42s cubic-bezier(.22,1,.36,1)}
#sticky.show{transform:translateY(0)}
.sticky-box{position:relative;background:#fff;border-top:1px solid var(--line-strong);
  box-shadow:0 -18px 46px -28px rgba(20,22,26,.28);
  padding-bottom:env(safe-area-inset-bottom,0px)}

/* 접기 탭 — 배너 위로 튀어나온 손잡이 */
.sticky-toggle{position:absolute;top:-25px;left:50%;transform:translateX(-50%);
  width:62px;height:26px;background:#fff;border:1px solid var(--line-strong);border-bottom:0;
  border-radius:9px 9px 0 0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;z-index:2}
.sticky-toggle i{display:block;width:9px;height:9px;border-right:1.6px solid var(--muted);
  border-bottom:1.6px solid var(--muted);transform:rotate(45deg);margin-top:-4px;
  transition:transform .28s,margin .28s}
.sticky-toggle:hover i{border-color:var(--ink)}
#sticky.folded .sticky-toggle i{transform:rotate(225deg);margin-top:3px}

.sticky-close{position:absolute;top:14px;right:16px;border:0;background:none;cursor:pointer;
  font-size:22px;line-height:1;color:var(--muted);padding:2px 8px;z-index:3}
.sticky-close:hover{color:var(--ink)}
#sticky.folded .sticky-close{display:none}

.sticky-body{max-height:260px;overflow:hidden;transition:max-height .42s cubic-bezier(.22,1,.36,1)}
#sticky.folded .sticky-body{max-height:0}

.sticky-inner{max-width:1080px;margin:0 auto;padding:26px 56px 26px 24px;
  display:flex;align-items:center;gap:32px}

.sticky-thumb{display:block;width:96px;height:96px;flex:0 0 auto;padding:0;background:none}
.sticky-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

.sticky-txt{flex:1 1 auto;min-width:0}
.sticky-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;
  font-size:12.5px;color:var(--muted)}
.sticky-badge{display:inline-block;padding:4px 10px;border-radius:999px;
  background:#EFF4FD;border:1px solid #DCE7FA;color:var(--accent);
  font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.sticky-head{font-size:clamp(19px,2.2vw,25px);font-weight:700;color:var(--ink);
  line-height:1.32;letter-spacing:-.035em;margin:0}
.sticky-head em{font-style:normal;color:var(--accent);margin-left:6px}
.sticky-sub{font-size:14.5px;color:var(--body);margin-top:8px;line-height:1.6}

.sticky-act{flex:0 0 auto;text-align:center}
.sticky-btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-weight:700;font-size:16.5px;
  padding:17px 38px;border-radius:8px;white-space:nowrap;letter-spacing:-.02em;
  transition:background .18s,transform .12s}
.sticky-btn:hover{background:var(--accent-dark);transform:none}
.sticky-btn:active{transform:scale(.98)}
.sticky-price{font-size:12.5px;color:var(--muted);margin-top:10px;white-space:nowrap;
  font-feature-settings:"tnum"}
.sticky-price b{color:var(--body);font-weight:600;margin-left:4px}
@media (prefers-reduced-motion:reduce){
  #sticky,.sticky-body,.sticky-toggle i{transition:none}
}

/* RESPONSIVE */
@media (max-width:1000px){
  .buy-grid,.ot-cards__list{grid-template-columns:repeat(3,1fr)}
  .buy-grid .buy:nth-child(4n){border-right:1px solid var(--line)}
  .buy-grid .buy:nth-child(3n){border-right:0}
  .buy-grid .buy:not(:nth-child(4n+1)){padding-left:0}
  .buy-grid .buy:not(:nth-child(3n+1)){padding-left:24px}
}
@media (max-width:960px){
  .sec{padding:68px 0}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .g3 .card:nth-child(2n),.g4 .card:nth-child(2n),
  .g4 .scen-card:nth-child(2n){border-right:0 !important}
  .split{grid-template-columns:1fr;gap:44px}
  .f-grid{grid-template-columns:1fr;gap:34px}
  .nav-menu{gap:17px}
  .nav-menu a{font-size:13px}
}
@media (max-width:760px){
  .buy-grid,.ot-cards__list,.ot-cards__list[data-n="9"]{grid-template-columns:repeat(2,1fr)}
  .buy-grid .buy:nth-child(3n){border-right:1px solid var(--line)}
  .buy-grid .buy:nth-child(2n){border-right:0}
  .buy-grid .buy:not(:nth-child(3n+1)){padding-left:0}
  .buy-grid .buy:not(:nth-child(2n+1)){padding-left:20px}
  .ot-cards__list .ot-cards__item:nth-child(3n){border-right:1px solid var(--line)}
  .ot-cards__list .ot-cards__item:nth-child(2n){border-right:0}
  .ot-cards__item:not(:first-child) .ot-cards__link{padding-left:0}
  .ot-cards__item:not(:nth-child(2n+1)) .ot-cards__link{padding-left:20px}
}
@media (max-width:680px){
  .wrap{padding:0 20px}
  .sec{padding:56px 0}
  .hero{padding:52px 0}
  .hero-sub-page{padding:36px 0 40px}
  .hero-copy{max-width:none}
  .burger{display:flex}
  .nav-menu{position:fixed;top:72px;left:0;right:0;background:#fff;flex-direction:column;
    gap:0;padding:0 20px;max-height:0;overflow:hidden;transition:max-height .3s ease;
    border-bottom:1px solid var(--line)}
  .nav-menu.open{max-height:460px}
  .nav-menu li{border-bottom:1px solid var(--line)}
  .nav-menu li:last-child{border-bottom:0}
  .nav-menu a{display:block;padding:15px 0;font-size:15px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .grid .card,.grid .scen-card{border-right:0 !important;
    border-bottom:1px solid var(--line) !important;padding:26px 0 !important}
  .grid .card:last-child,.grid .scen-card:last-child{border-bottom:0 !important}
  .hero-facts{grid-template-columns:1fr 1fr}
  .fact{padding:20px 16px 12px 0}
  .fact:nth-child(2n){border-right:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .fact b{font-size:26px}
  .step{padding:22px 0 22px 48px}
  .step::before{top:24px}
  .deflist li{flex-direction:column;gap:6px}
  .deflist b{flex:none}
  .alert,.callout{padding-left:20px}
  /* 모바일에서는 자동으로 접지 않는다(build.js). 손잡이 대신 닫기만 둔다.
     max-height 를 vh 로 두어 문구가 길어져도 버튼이 잘리지 않는다. */
  .sticky-toggle{display:none}
  .sticky-inner{flex-direction:column;align-items:stretch;gap:14px;padding:18px 20px 20px}
  .sticky-thumb{display:none}
  .sticky-body{max-height:62vh;overflow-y:auto}
  .sticky-meta{margin-bottom:8px;font-size:11.5px;gap:8px}
  .sticky-head{font-size:18.5px;line-height:1.35;padding-right:28px}
  .sticky-sub{font-size:13px;margin-top:6px}
  .sticky-act{width:100%;text-align:left}
  .sticky-btn{width:100%;padding:16px 20px;font-size:16px}
  .sticky-price{text-align:center;margin-top:8px}
  .sticky-close{top:8px;right:10px;font-size:20px}
  .prose{font-size:16px}
  .cta-row{gap:18px}
}

/* ── 콘텐츠에 박혀 있는 인라인 가운데 정렬 무력화 ──────────────────────
   content/*.js 의 섹션 HTML 에 style="text-align:center" 가 들어 있다.
   이 디자인은 전부 왼쪽 정렬이므로 여기서 덮는다.
   콘텐츠를 20개 고치는 대신 한 곳에서 처리한다. */
.sec .wrap > p[style*="text-align:center"],
.sec .wrap p.note[style*="text-align:center"],
.sec .wrap p.sec-lead[style]{text-align:left !important;margin-left:0 !important;margin-right:0 !important}
.sec .wrap > p[style*="text-align:center"] .btn + .btn{margin-left:14px !important}
.answer h2,.faq,.steps,.callout,.alert{margin-left:0;margin-right:0}