/* 오늘시작 디자인 토큰 v1.0 (2026-10-17) — 외모 > 사용자 정의 > 추가 CSS */
:root{
  --color-brand:#4A3728;--color-accent:#7A5C42;--color-bg:#F6F2EC;--color-surface:#FFFFFF;--color-text:#1F1A17;--color-muted:#6B625A;
  --color-line:color-mix(in srgb,var(--color-muted) 25%,transparent);
  --text-1:12px;--text-2:14px;--text-3:16px;--text-4:20px;--text-5:24px;--text-6:clamp(32px,4vw + 16px,40px);
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --leading-tight:1.3;--leading-body:1.65;
  --space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px;--space-7:64px;--space-8:96px;
  --radius-sm:4px;--radius-md:12px;--radius-full:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);--shadow-md:0 4px 12px rgba(0,0,0,.06);
  --focus-ring:0 0 0 3px color-mix(in srgb,var(--color-accent) 40%,transparent);
  /* --- 레이아웃 --- */
  --container:1200px;   /* 콘텐츠 최대 폭 */
  --measure:640px;      /* 본문 한 줄 최대 폭 */
  --control-h:48px;     /* 버튼·입력창 높이 */
  --control-h-sm:40px;  /* 작은 버튼 */
  --border:1px;         /* 선 두께 */
  --gutter-l:max(var(--space-3),env(safe-area-inset-left,0px));
  --gutter-r:max(var(--space-3),env(safe-area-inset-right,0px));
  --gutter-l-lg:max(var(--space-4),env(safe-area-inset-left,0px));
  --gutter-r-lg:max(var(--space-4),env(safe-area-inset-right,0px));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--color-brand:#C9A98A;--color-accent:#C9A98A;--color-bg:#1F1A17;--color-surface:#2A2420;--color-text:#F6F2EC;--color-muted:#A89E94;color-scheme:dark;}}
:root[data-theme="dark"]{--color-brand:#C9A98A;--color-accent:#C9A98A;--color-bg:#1F1A17;--color-surface:#2A2420;--color-text:#F6F2EC;--color-muted:#A89E94;color-scheme:dark;}
html{scroll-behavior:smooth}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-3);line-height:var(--leading-body);margin:0;}
h1,h2,h3{text-wrap:balance;margin-top:0}
h1{font-size:var(--text-6);line-height:var(--leading-tight);font-weight:700;}
h2{font-size:var(--text-5);line-height:var(--leading-tight);font-weight:700;}
h3{font-size:var(--text-4);line-height:var(--leading-tight);font-weight:700;}
a{color:var(--color-accent);}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-h);padding:0 var(--space-4);font-size:var(--text-3);font-weight:600;line-height:1;border-radius:var(--radius-sm);border:var(--border) solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,color .15s,border-color .15s;}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.btn--primary{background:var(--color-brand);color:var(--color-bg);border-color:var(--color-brand);}
.btn--primary:hover{background:var(--color-accent);border-color:var(--color-accent);}
.btn--secondary{background:transparent;color:var(--color-brand);border-color:var(--color-brand);}
.btn--secondary:hover{background:var(--color-surface);}
.btn--sm{min-height:var(--control-h-sm);padding:0 var(--space-3);font-size:var(--text-2);}
.btn--block{width:100%;}
.card{background:var(--color-surface);border:var(--border) solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--shadow-sm);transition:box-shadow .15s;}
.card:hover{box-shadow:var(--shadow-md);}
.card__title{font-size:var(--text-4);margin:0 0 var(--space-2);}
.card__body{font-size:var(--text-3);margin:0 0 var(--space-3);}
.card__meta{font-size:var(--text-2);color:var(--color-muted);}
.card__img{display:block;width:100%;border-radius:var(--radius-sm);margin-bottom:var(--space-3);}
.badge{display:inline-block;padding:var(--space-1) var(--space-2);font-size:var(--text-1);font-weight:600;color:var(--color-bg);background:var(--color-accent);border-radius:var(--radius-full);}
.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3);}
.field__label{font-size:var(--text-2);font-weight:600;color:var(--color-text);}
.field__input{width:100%;min-height:var(--control-h);padding:0 var(--space-3);font-size:var(--text-3);font-family:inherit;color:var(--color-text);background:var(--color-surface);border:var(--border) solid var(--color-muted);border-radius:var(--radius-sm);}
.field__input::placeholder{color:var(--color-muted);}
.field__input:focus{outline:none;border-color:var(--color-brand);box-shadow:var(--focus-ring);}
.field__help{font-size:var(--text-1);color:var(--color-muted);}
textarea.field__input{min-height:calc(var(--control-h) * 2.5);padding:var(--space-3);line-height:var(--leading-body);}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* ============================================================
   공통 헤더 (모든 페이지 상단)
   ============================================================ */
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--color-surface); }
.header{ position:sticky; top:env(safe-area-inset-top,0px); z-index:9; background:var(--color-surface); border-bottom:var(--border) solid var(--color-line); }
.header__inner{ max-width:var(--container); margin:0 auto; min-height:var(--space-7); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding-left:max(var(--space-3),env(safe-area-inset-left,0px)); padding-right:max(var(--space-3),env(safe-area-inset-right,0px)); }
.header__logo{ font-size:var(--text-4); font-weight:700; color:var(--color-text); text-decoration:none; letter-spacing:-0.02em; display:inline-flex; align-items:baseline; gap:var(--space-1); white-space:nowrap; }
.header__logo small{ font-size:var(--text-1); font-weight:600; color:var(--color-accent); }
.header__logo:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.nav{ display:none; }
.nav__list{ list-style:none; margin:0; padding:0; display:flex; gap:var(--space-4); }
.nav__link{ font-size:var(--text-2); font-weight:600; color:var(--color-text); text-decoration:none; letter-spacing:.02em; padding:var(--space-2) 0; border-bottom:var(--border) solid transparent; }
.nav__link:hover,.nav__link[aria-current="page"]{ border-bottom-color:var(--color-brand); }
.nav__link:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.header__cta{ display:none; }
.menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:var(--control-h-sm); height:var(--control-h-sm); border:var(--border) solid var(--color-line); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); cursor:pointer; padding:0; }
.menu-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.menu-btn svg{ width:var(--space-4); height:var(--space-4); }
.menu-btn .ic-close{ display:none; }
.header.is-open .menu-btn .ic-open{ display:none; }
.header.is-open .menu-btn .ic-close{ display:block; }
.mnav{ display:none; background:var(--color-surface); border-bottom:var(--border) solid var(--color-line); }
.header.is-open .mnav{ display:block; }
.mnav__list{ list-style:none; margin:0; padding:var(--space-2) max(var(--space-3),env(safe-area-inset-right,0px)) var(--space-4) max(var(--space-3),env(safe-area-inset-left,0px)); display:grid; }
.mnav__link{ display:grid; gap:var(--space-1); padding:var(--space-3) 0; border-bottom:var(--border) solid var(--color-line); text-decoration:none; color:var(--color-text); font-size:var(--text-3); font-weight:700; }
.mnav__link span{ font-size:var(--text-2); font-weight:400; color:var(--color-muted); }
.mnav__link:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.mnav__cta{ display:flex; gap:var(--space-2); padding-top:var(--space-3); }
@media (min-width:900px){
  .nav{ display:block; } .header__cta{ display:inline-flex; } .menu-btn{ display:none; } .header.is-open .mnav{ display:none; }
  .header__inner{ padding-left:max(var(--space-4),env(safe-area-inset-left,0px)); padding-right:max(var(--space-4),env(safe-area-inset-right,0px)); }
}
/* ============================================================
   섹션 7. 후기(자리만, 비공개) + 섹션 8. 푸터 — 추가 CSS 맨 아래에 이어서 붙여넣기
   ============================================================ */
/* 7. 후기 — hidden 속성 제거 전까지 화면에 나오지 않음 */
.reviews{ background:var(--color-surface); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.reviews[hidden]{ display:none; }
.reviews__inner{ max-width:var(--container); margin:0 auto; }
.reviews__eyebrow{ margin:0 0 var(--space-2); font-size:var(--text-2); font-weight:600; color:var(--color-accent); }
.reviews__title{ margin:0 0 var(--space-2); }
.reviews__lead{ margin:0 0 var(--space-5); color:var(--color-muted); font-size:var(--text-2); word-break:keep-all; }
.reviews__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--space-3); }
.rcard{ padding:var(--space-4); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); background:var(--color-bg); display:grid; gap:var(--space-2); }
.rcard__q{ margin:0; font-size:var(--text-3); line-height:var(--leading-body); word-break:keep-all; }
.rcard__meta{ margin:0; font-size:var(--text-1); color:var(--color-muted); }
@media (min-width:900px){ .reviews{ padding-block:var(--space-8); padding-inline:var(--gutter-l-lg) var(--gutter-r-lg); } .reviews__grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-4); } }

/* 8. 푸터 */
.footer{ background:var(--color-bg); border-top:var(--border) solid var(--color-line); padding-block:var(--space-6) var(--space-5); padding-inline:var(--gutter-l) var(--gutter-r); font-size:var(--text-2); color:var(--color-muted); }
.footer__inner{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.footer__brand{ display:grid; gap:var(--space-2); align-content:start; }
.footer__logo{ font-size:var(--text-4); font-weight:700; color:var(--color-text); text-decoration:none; letter-spacing:-0.02em; }
.footer__logo small{ font-size:var(--text-2); font-weight:600; color:var(--color-accent); margin-left:var(--space-1); }
.footer__tag{ margin:0; word-break:keep-all; }
.footer__cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.footer__col h2{ margin:0 0 var(--space-2); font-size:var(--text-2); font-weight:700; color:var(--color-text); }
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-1); }
.footer a{ color:inherit; text-decoration:none; }
.footer a:hover{ color:var(--color-text); text-decoration:underline; text-underline-offset:var(--space-1); }
.footer a:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.footer__biz{ border-top:var(--border) solid var(--color-line); padding-top:var(--space-4); display:grid; gap:var(--space-1); font-size:var(--text-1); line-height:var(--leading-body); }
.footer__biz p{ margin:0; word-break:keep-all; }
.footer__biz span + span::before{ content:"·"; margin:0 var(--space-2); }
.footer__copy{ margin:var(--space-2) 0 0; font-size:var(--text-1); }
@media (min-width:900px){
  .footer{ padding-block:var(--space-7) var(--space-5); padding-inline:var(--gutter-l-lg) var(--gutter-r-lg); }
  .footer__inner{ grid-template-columns:1.2fr 2fr; }
  .footer__cols{ grid-template-columns:repeat(3,1fr); }
  .footer__biz{ grid-column:1 / -1; }
}
/* ===== 404 ===== */
.nf{ background:var(--color-bg); padding-block:var(--space-8); padding-inline:var(--gutter-l) var(--gutter-r); min-height:60vh; display:grid; place-items:center; }
.nf__inner{ max-width:var(--measure); display:grid; gap:var(--space-4); text-align:center; word-break:keep-all; }
.nf__code{ margin:0; font-size:var(--text-6); font-weight:700; color:var(--color-accent); letter-spacing:0.1em; }
.nf__title{ margin:0; font-size:var(--text-5); }
.nf__lead,.nf__contact{ margin:0; color:var(--color-muted); font-size:var(--text-2); }
.nf__links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2); }
.nf__contact a{ color:var(--color-brand); }
/* ============================================================
   섹션 1. 히어로  (오늘시작 압박복 공식 홈페이지)
   토큰 외 값 사용 없음. 외모 > 사용자 정의 > 추가 CSS 맨 아래에 추가.
   ============================================================ */
.hero{
  background:var(--color-bg);
  padding-block:var(--space-6) var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r);
}
.hero__copy{ word-break:keep-all; overflow-wrap:anywhere; }
.hero__inner{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-5);
  align-items:center;
}
.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-2);
  font-weight:600;
  color:var(--color-accent);
  margin:0 0 var(--space-3);
}
.hero__eyebrow::before{
  content:"";
  width:var(--space-2);
  height:var(--space-2);
  border-radius:var(--radius-full);
  background:var(--color-accent);
}
.hero__title{
  margin:0 0 var(--space-3);
  color:var(--color-text);
  letter-spacing:-0.02em;
}
.hero__lead{
  margin:0 0 var(--space-4);
  font-size:var(--text-4);
  line-height:var(--leading-body);
  color:var(--color-text);
}
.hero__lead strong{ font-weight:700; }
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin:0 0 var(--space-4);
}
.hero__tape{
  display:block;
  width:calc(var(--space-8) + var(--space-7));
  height:auto;
  margin:0 0 var(--space-4);
  color:var(--color-accent);
}
.hero__trust{
  list-style:none;
  margin:0;
  padding:var(--space-3) 0 0;
  border-top:var(--border) solid var(--color-line);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-4);
  font-size:var(--text-2);
  color:var(--color-muted);
}
.hero__trust li{ display:flex; align-items:center; gap:var(--space-2); }
.hero__trust li::before{
  content:"";
  width:var(--space-1);
  height:var(--space-1);
  border-radius:var(--radius-full);
  background:var(--color-muted);
}

/* 사진 프레임 */
.hero__media{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--color-surface);
  box-shadow:var(--shadow-md);
}
.hero__img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:50% 20%;
}
.hero__badge{
  position:absolute;
  top:var(--space-3);
  left:var(--space-3);
}
.hero__caption{
  position:absolute;
  left:var(--space-3);
  right:var(--space-3);
  bottom:var(--space-3);
  margin:0;
  padding:var(--space-2) var(--space-3);
  font-size:var(--text-2);
  color:var(--color-text);
  background:var(--color-surface);
  border:var(--border) solid var(--color-line);
  border-radius:var(--radius-sm);
}

/* 태블릿 이상: 좌 텍스트 / 우 사진 */
@media (min-width:900px){
  .hero{ padding-block:var(--space-8); padding-inline:var(--gutter-l-lg) var(--gutter-r-lg); }
  .hero__inner{ grid-template-columns:1.1fr 0.9fr; gap:var(--space-7); }
  .hero__img{ aspect-ratio:3 / 4; }
}
/* ============================================================
   섹션 2. 부위별 제품 4  — 추가 CSS 맨 아래에 이어서 붙여넣기
   ============================================================ */
.products{ background:var(--color-surface); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.products__inner{ max-width:var(--container); margin:0 auto; }
.products__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--space-2) var(--space-4); margin:0 0 var(--space-5);
  word-break:keep-all;
}
.products__title{ margin:0; }
.products__sub{ margin:var(--space-2) 0 0; color:var(--color-muted); font-size:var(--text-3); }
.products__all{
  font-size:var(--text-2); font-weight:600; color:var(--color-brand);
  text-decoration:none; border-bottom:var(--border) solid var(--color-brand); padding-bottom:var(--space-1);
}
.products__all:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.products__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--space-5) var(--space-3); list-style:none; margin:0; padding:0;
}
.pcard{ display:flex; flex-direction:column; }
.pcard__link{ color:inherit; text-decoration:none; display:block; border-radius:var(--radius-md); }
.pcard__link:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.pcard__media{
  position:relative; overflow:hidden;
  border-radius:var(--radius-md); background:var(--color-bg);
  border:var(--border) solid var(--color-line);
}
.pcard__img{ display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:50% 15%;
  transition:transform .3s; }
.pcard__link:hover .pcard__img{ transform:scale(1.03); }
.pcard__badge{ position:absolute; top:var(--space-2); left:var(--space-2); }
.pcard__part{
  margin:var(--space-3) 0 var(--space-1);
  font-size:var(--text-1); font-weight:600; letter-spacing:.04em; color:var(--color-accent);
}
.pcard__name{ margin:0 0 var(--space-1); font-size:var(--text-3); font-weight:700; line-height:var(--leading-tight); }
.pcard__desc{ margin:0; font-size:var(--text-2); color:var(--color-muted); }
@media (min-width:700px){
  .products__grid{ grid-template-columns:repeat(4,1fr); gap:var(--space-4); }
}
@media (min-width:900px){
  .products{ padding-block:var(--space-8); padding-inline:var(--gutter-l-lg) var(--gutter-r-lg); }
  .pcard__name{ font-size:var(--text-4); }
}
@media (prefers-reduced-motion:reduce){ .pcard__img{ transition:none; } .pcard__link:hover .pcard__img{ transform:none; } }
/* ============================================================
   섹션 3. 오늘시작이 하는 일 4가지 — 추가 CSS 맨 아래에 이어서 붙여넣기
   ============================================================ */
.features{ background:var(--color-bg); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); border-top:var(--border) solid var(--color-line); }
.features__inner{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.features__intro{ word-break:keep-all; }
.features__eyebrow{ margin:0 0 var(--space-2); font-size:var(--text-2); font-weight:600; color:var(--color-accent); }
.features__title{ margin:0 0 var(--space-3); }
.features__lead{ margin:0; color:var(--color-muted); }
.features__list{ list-style:none; margin:0; padding:0; border-top:var(--border) solid var(--color-line); }
.feature{
  display:grid; grid-template-columns:var(--space-6) 1fr; gap:var(--space-3);
  padding:var(--space-4) 0; border-bottom:var(--border) solid var(--color-line); align-items:start;
}
.feature__icon{
  width:var(--space-6); height:var(--space-6); border-radius:var(--radius-full);
  display:grid; place-items:center; color:var(--color-brand);
  background:var(--color-surface); border:var(--border) solid var(--color-line);
}
.feature__icon svg{ width:var(--space-5); height:var(--space-5); }
.feature__num{ font-size:var(--text-1); font-weight:600; color:var(--color-accent); letter-spacing:.06em; margin:0 0 var(--space-1); }
.feature__title{ margin:0 0 var(--space-1); font-size:var(--text-4); }
.feature__desc{ margin:0; font-size:var(--text-2); color:var(--color-muted); word-break:keep-all; }
@media (min-width:900px){
  .features{ padding-block:var(--space-8); padding-inline:var(--gutter-l-lg) var(--gutter-r-lg); }
  .features__inner{ grid-template-columns:0.8fr 1.2fr; gap:var(--space-7); align-items:start; }
  .features__list{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-6); border-top:0; }
  .feature{ border-top:var(--border) solid var(--color-line); border-bottom:0; padding:var(--space-4) 0 var(--space-5); }
}
/* ============================================================
   섹션 4. 회복 3단계 타임라인 — 추가 CSS 맨 아래에 이어서 붙여넣기
   ============================================================ */
.timeline{ background:var(--color-surface); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.timeline__inner{ max-width:var(--container); margin:0 auto; }
.timeline__head{ max-width:var(--measure); margin:0 0 var(--space-5); word-break:keep-all; }
.timeline__eyebrow{ margin:0 0 var(--space-2); font-size:var(--text-2); font-weight:600; color:var(--color-accent); }
.timeline__title{ margin:0 0 var(--space-3); }
.timeline__lead{ margin:0; color:var(--color-muted); }
.timeline__steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0; position:relative; }
.step{
  position:relative; display:grid; grid-template-columns:var(--space-5) 1fr; gap:var(--space-3);
  padding:0 0 var(--space-6);
}
.step::before{ /* 세로 연결선 */
  content:""; position:absolute; left:calc(var(--space-5) / 2); top:var(--space-5); bottom:0;
  border-left:var(--border) solid var(--color-line);
}
.step:last-child::before{ display:none; }
.step__dot{
  width:var(--space-5); height:var(--space-5); border-radius:var(--radius-full);
  background:var(--color-brand); color:var(--color-bg);
  display:grid; place-items:center; font-size:var(--text-2); font-weight:700;
}
.step__body{ display:grid; gap:var(--space-3); }
.step__media{ border-radius:var(--radius-md); overflow:hidden; border:var(--border) solid var(--color-line); background:var(--color-bg); max-width:calc(var(--space-8) * 3 + var(--space-5)); }
.step__img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 10%; }
.step__when{ margin:0; font-size:var(--text-1); font-weight:600; letter-spacing:.06em; color:var(--color-accent); }
.step__title{ margin:var(--space-1) 0 var(--space-2); font-size:var(--text-4); }
.step__desc{ margin:0 0 var(--space-2); font-size:var(--text-2); color:var(--color-text); word-break:keep-all; }
.step__products{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-1); }
.step__products li{
  font-size:var(--text-1); font-weight:600; color:var(--color-brand);
  border:var(--border) solid var(--color-brand); border-radius:var(--radius-full); padding:var(--space-1) var(--space-2);
}
.timeline__note{
  margin:var(--space-4) 0 0; padding:var(--space-3) var(--space-4);
  border-left:var(--space-1) solid var(--color-accent); background:var(--color-bg);
  font-size:var(--text-2); color:var(--color-text); word-break:keep-all;
}
@media (min-width:900px){
  .timeline{ padding-block:var(--space-8); padding-inline:var(--gutter-l-lg) var(--gutter-r-lg); }
  .timeline__steps{ grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
  .step{ grid-template-columns:1fr; grid-template-rows:auto auto; padding:0; }
  .step::before{ /* 가로 연결선 */
    left:calc(var(--space-5) + var(--space-2)); right:calc(-1 * var(--space-5)); top:calc(var(--space-5) / 2); bottom:auto;
    border-left:0; border-top:var(--border) solid var(--color-line);
  }
  .step__body{ margin-top:var(--space-3); }
  .step__media{ max-width:none; }
  .step__img{ aspect-ratio:3/4; }
  .timeline__note{ margin-top:var(--space-6); }
}
/* ============================================================
   섹션 5. 피팅 매장 안내 — 추가 CSS 맨 아래에 이어서 붙여넣기
   ============================================================ */
.store{ background:var(--color-brand); color:var(--color-bg); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.store__inner{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.store__eyebrow{ margin:0 0 var(--space-2); font-size:var(--text-2); font-weight:600; opacity:.8; }
.store__title{ margin:0 0 var(--space-3); color:inherit; word-break:keep-all; }
.store__lead{ margin:0 0 var(--space-4); word-break:keep-all; }
.store__facts{ margin:0 0 var(--space-4); display:grid; gap:0; border-top:var(--border) solid color-mix(in srgb, var(--color-bg) 25%, transparent); }
.store__facts > div{
  display:grid; grid-template-columns:var(--space-8) 1fr; gap:var(--space-3);
  padding:var(--space-3) 0; border-bottom:var(--border) solid color-mix(in srgb, var(--color-bg) 25%, transparent);
  font-size:var(--text-2);
}
.store__facts dt{ font-weight:600; opacity:.8; margin:0; }
.store__facts dd{ margin:0; word-break:keep-all; }
.store__facts a{ color:inherit; text-decoration:underline; text-underline-offset:var(--space-1); }
.store__facts a:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.store__hours{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-1); }
.store__hours span{ display:inline-block; min-width:var(--space-7); }
.store__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
/* 브랜드 배경 위 버튼: 토큰 색 반전 */
.store .btn--primary{ background:var(--color-bg); color:var(--color-brand); border-color:var(--color-bg); }
.store .btn--primary:hover{ background:var(--color-surface); border-color:var(--color-surface); }
.store .btn--secondary{ color:var(--color-bg); border-color:var(--color-bg); }
.store .btn--secondary:hover{ background:color-mix(in srgb, var(--color-bg) 12%, transparent); }
.store__map{
  background:var(--color-bg); color:var(--color-text);
  border-radius:var(--radius-md); padding:var(--space-4); display:grid; gap:var(--space-3);
}
.store__map svg{ width:100%; height:auto; display:block; }
.store__mapcap{ margin:0; font-size:var(--text-1); color:var(--color-muted); word-break:keep-all; }
.store__maplinks{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.store__map .btn--secondary{ color:var(--color-brand); border-color:var(--color-brand); }
.store__map .btn--secondary:hover{ background:var(--color-surface); }
@media (min-width:900px){
  .store{ padding-block:var(--space-8); padding-inline:var(--gutter-l-lg) var(--gutter-r-lg); }
  .store__inner{ grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:center; }
}
/* ============================================================
   섹션 6. 압박복 가이드 — 추가 CSS 맨 아래에 이어서 붙여넣기
   ============================================================ */
.guide{ background:var(--color-bg); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.guide__inner{ max-width:var(--container); margin:0 auto; }
.guide__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-2) var(--space-4); margin:0 0 var(--space-5); word-break:keep-all; }
.guide__eyebrow{ margin:0 0 var(--space-2); font-size:var(--text-2); font-weight:600; color:var(--color-accent); }
.guide__title{ margin:0; }
.guide__all{ font-size:var(--text-2); font-weight:600; color:var(--color-brand); text-decoration:none; border-bottom:var(--border) solid var(--color-brand); padding-bottom:var(--space-1); }
.guide__all:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.guide__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-4); }
/* 대표 글 */
.gfeat{ display:grid; grid-template-columns:1fr; background:var(--color-surface); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:inherit; }
.gfeat:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.gfeat__img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:50% 20%; }
.gfeat__body{ padding:var(--space-4); word-break:keep-all; }
.gmeta{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3); margin:0 0 var(--space-2); font-size:var(--text-1); color:var(--color-muted); }
.gmeta b{ color:var(--color-accent); font-weight:600; }
.gfeat__title{ margin:0 0 var(--space-2); font-size:var(--text-4); }
.gfeat__desc{ margin:0 0 var(--space-3); font-size:var(--text-2); color:var(--color-muted); }
.gfeat__more{ font-size:var(--text-2); font-weight:600; color:var(--color-brand); }
/* 보조 글 2개 */
.glist{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); }
.gitem{ display:grid; grid-template-columns:var(--space-8) 1fr; gap:var(--space-3); align-items:center; text-decoration:none; color:inherit; padding:var(--space-3); background:var(--color-surface); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); }
.gitem:hover{ box-shadow:var(--shadow-md); }
.gitem:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.gitem__img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-sm); }
.gitem__title{ margin:0 0 var(--space-1); font-size:var(--text-3); font-weight:700; line-height:var(--leading-tight); word-break:keep-all; }
.gitem__desc{ margin:0; font-size:var(--text-2); color:var(--color-muted); word-break:keep-all; }
/* FAQ 안내 줄 */
.guide__faq{ margin:var(--space-5) 0 0; padding:var(--space-3) var(--space-4); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-2) var(--space-4); font-size:var(--text-2); word-break:keep-all; }
.guide__faq p{ margin:0; }
@media (min-width:900px){
  .guide{ padding-block:var(--space-8); padding-inline:var(--gutter-l-lg) var(--gutter-r-lg); }
  .guide__grid{ grid-template-columns:1.2fr 0.8fr; gap:var(--space-5); }
  .gfeat{ grid-template-columns:1fr; }
  .gfeat__img{ aspect-ratio:16/9; }
  .gfeat__title{ font-size:var(--text-5); }
  .glist{ grid-auto-rows:1fr; }
  .glist > li{ display:grid; }
  .gitem{ grid-template-columns:2fr 3fr; padding:var(--space-3); }
  .gitem__img{ height:100%; aspect-ratio:auto; min-height:calc(var(--space-8) + var(--space-7)); }
}
/* ============================================================
   PRODUCT 리스팅 페이지
   ============================================================ */
.phead{ background:var(--color-surface); border-bottom:var(--border) solid var(--color-line); padding-block:var(--space-6); padding-inline:var(--gutter-l) var(--gutter-r); }
.phead__inner{ max-width:var(--container); margin:0 auto; display:grid; gap:var(--space-3); }
.crumb{ list-style:none; margin:0; padding:0; display:flex; gap:var(--space-2); font-size:var(--text-1); color:var(--color-muted); }
.crumb a{ color:inherit; text-decoration:none; } .crumb li+li::before{ content:"/"; margin-right:var(--space-2); }
.phead__title{ margin:0; }
.phead__lead{ margin:0; max-width:var(--measure); color:var(--color-muted); word-break:keep-all; }
/* 필터 바 */
.filter{ position:sticky; top:calc(var(--space-7) + env(safe-area-inset-top,0px)); z-index:8; background:var(--color-bg); border-bottom:var(--border) solid var(--color-line); padding-inline:var(--gutter-l) var(--gutter-r); }
.filter__inner{ max-width:var(--container); margin:0 auto; display:flex; gap:var(--space-2); overflow-x:auto; padding-block:var(--space-2); scrollbar-width:none; }
.filter__inner::-webkit-scrollbar{ display:none; }
.chip{ flex:none; min-height:var(--control-h-sm); padding:0 var(--space-3); border:var(--border) solid var(--color-line); border-radius:var(--radius-full); background:var(--color-surface); color:var(--color-text); font-size:var(--text-2); font-weight:600; cursor:pointer; font-family:inherit; }
.chip[aria-pressed="true"]{ background:var(--color-brand); border-color:var(--color-brand); color:var(--color-bg); }
.chip:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.filter__count{ flex:none; align-self:center; margin-left:auto; font-size:var(--text-1); color:var(--color-muted); white-space:nowrap; }
/* 그리드 */
.plist{ background:var(--color-bg); padding-block:var(--space-5) var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.plist__inner{ max-width:var(--container); margin:0 auto; }
.plist__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5) var(--space-3); }
.plist__grid .pcard[hidden]{ display:none; }
.plist__empty{ display:none; padding:var(--space-6) 0; text-align:center; color:var(--color-muted); }
.plist__grid:not(:has(.pcard:not([hidden]))) + .plist__empty{ display:block; }
.pcard__tags{ display:flex; flex-wrap:wrap; gap:var(--space-1); margin:var(--space-2) 0 0; padding:0; list-style:none; }
.pcard__tags li{ font-size:var(--text-1); color:var(--color-muted); border:var(--border) solid var(--color-line); border-radius:var(--radius-full); padding:var(--space-1) var(--space-2); }
/* 데일리 */
.daily{ background:var(--color-surface); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.daily__inner{ max-width:var(--container); margin:0 auto; display:grid; gap:var(--space-5); }
.daily__head{ max-width:var(--measure); word-break:keep-all; }
.daily__eyebrow{ margin:0 0 var(--space-2); font-size:var(--text-2); font-weight:600; color:var(--color-accent); }
.daily__title{ margin:0 0 var(--space-2); }
.daily__lead{ margin:0; color:var(--color-muted); }
.daily__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--space-4); }
.dcard{ display:grid; grid-template-columns:2fr 3fr; gap:var(--space-3); align-items:center; text-decoration:none; color:inherit; background:var(--color-bg); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); overflow:hidden; }
.dcard:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.dcard__img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 10%; aspect-ratio:3/4; }
.dcard__body{ padding:var(--space-3) var(--space-3) var(--space-3) 0; display:grid; gap:var(--space-1); word-break:keep-all; justify-items:start; }
.dcard__name{ margin:0; font-size:var(--text-4); }
.dcard__desc{ margin:0; font-size:var(--text-2); color:var(--color-muted); }
/* 선택 도움 3단 + FAQ 미리보기 */
.choose{ background:var(--color-bg); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); border-top:var(--border) solid var(--color-line); }
.choose__inner{ max-width:var(--container); margin:0 auto; display:grid; gap:var(--space-5); }
.choose__title{ margin:0; }
.choose__steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); counter-reset:c; }
.choose__steps li{ display:grid; grid-template-columns:var(--space-5) 1fr; gap:var(--space-3); align-items:start; word-break:keep-all; }
.choose__steps li::before{ counter-increment:c; content:counter(c); width:var(--space-5); height:var(--space-5); border-radius:var(--radius-full); background:var(--color-brand); color:var(--color-bg); display:grid; place-items:center; font-size:var(--text-2); font-weight:700; }
.choose__steps b{ display:block; margin-bottom:var(--space-1); }
.choose__steps p{ margin:0; font-size:var(--text-2); color:var(--color-muted); }
.faqmini{ display:grid; gap:var(--space-2); }
.faqmini details{ background:var(--color-surface); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); }
.faqmini summary{ cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:var(--space-3); }
.faqmini summary::-webkit-details-marker{ display:none; }
.faqmini summary::after{ content:"+"; color:var(--color-accent); font-weight:700; }
.faqmini details[open] summary::after{ content:"−"; }
.faqmini summary:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.faqmini p{ margin:var(--space-2) 0 0; font-size:var(--text-2); color:var(--color-muted); word-break:keep-all; }
@media (min-width:700px){ .plist__grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-5) var(--space-4); } .daily__grid{ grid-template-columns:repeat(auto-fit,minmax(0,calc(var(--container) / 2 - var(--space-4)))); } }
@media (min-width:900px){
  .phead,.plist,.daily,.choose{ padding-inline:var(--gutter-l-lg) var(--gutter-r-lg); }
  .phead{ padding-block:var(--space-7); } .plist{ padding-block:var(--space-6) var(--space-8); } .daily,.choose{ padding-block:var(--space-8); }
  .plist__grid{ grid-template-columns:repeat(3,1fr); }
  .choose__inner{ grid-template-columns:1fr 1fr; gap:var(--space-7); }
  .choose__title{ grid-column:1 / -1; }
}
/* ============================================================
   제품 상세 페이지
   ============================================================ */
.pd{ background:var(--color-bg); padding-block:var(--space-5) var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.pd__inner{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.pd__crumb{ grid-column:1 / -1; }
/* 갤러리 */
.gal{ display:grid; gap:var(--space-2); }
.gal__main{ border-radius:var(--radius-md); overflow:hidden; background:var(--color-surface); border:var(--border) solid var(--color-line); }
.gal__main img{ display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:50% 10%; }
.gal__thumbs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-2); }
.gal__thumb{ display:block; width:100%; padding:0; border:var(--border) solid var(--color-line); border-radius:var(--radius-sm); overflow:hidden; background:var(--color-surface); cursor:pointer; }
.gal__thumb img{ display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
.gal__thumb[aria-current="true"]{ border-color:var(--color-brand); box-shadow:0 0 0 var(--border) var(--color-brand); }
.gal__thumb:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
/* 정보 */
.pinfo{ display:grid; gap:var(--space-4); align-content:start; word-break:keep-all; }
.pinfo__code{ margin:0; font-size:var(--text-2); font-weight:600; color:var(--color-accent); letter-spacing:.04em; }
.pinfo__name{ margin:0; }
.pinfo__sub{ margin:0; color:var(--color-muted); }
.pinfo__tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-1); }
.pinfo__tags li{ font-size:var(--text-1); font-weight:600; color:var(--color-brand); border:var(--border) solid var(--color-brand); border-radius:var(--radius-full); padding:var(--space-1) var(--space-2); }
.spec{ margin:0; border-top:var(--border) solid var(--color-line); }
.spec > div{ display:grid; grid-template-columns:var(--space-8) 1fr; gap:var(--space-3); padding:var(--space-2) 0; border-bottom:var(--border) solid var(--color-line); font-size:var(--text-2); }
.spec dt{ color:var(--color-muted); font-weight:600; } .spec dd{ margin:0; }
.swatch{ display:inline-flex; gap:var(--space-2); align-items:center; }
.swatch span{ display:inline-block; width:var(--space-4); height:var(--space-4); border-radius:var(--radius-full); border:var(--border) solid var(--color-line); }
.pinfo__buy{ display:grid; gap:var(--space-2); }
.pinfo__note{ margin:0; font-size:var(--text-1); color:var(--color-muted); }
/* 본문 섹션 */
.pdesc{ background:var(--color-surface); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); border-top:var(--border) solid var(--color-line); }
.pdesc__inner{ max-width:var(--container); margin:0 auto; display:grid; gap:var(--space-6); }
.pdesc__block{ display:grid; gap:var(--space-3); align-content:start; word-break:keep-all; }
.pdesc__block h2{ margin:0; }
.pdesc__block p{ margin:0; max-width:var(--measure); }
.feat3{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--space-3); }
.feat3 li{ display:grid; grid-template-columns:var(--space-6) 1fr; gap:var(--space-3); align-items:start; padding:var(--space-3); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); background:var(--color-bg); }
.feat3 .ic{ width:var(--space-6); height:var(--space-6); border-radius:var(--radius-full); background:var(--color-surface); border:var(--border) solid var(--color-line); display:grid; place-items:center; color:var(--color-brand); }
.feat3 .ic svg{ width:var(--space-4); height:var(--space-4); }
.feat3 b{ display:block; margin-bottom:var(--space-1); } .feat3 p{ margin:0; font-size:var(--text-2); color:var(--color-muted); }
/* 사이즈표 */
.sizet{ overflow-x:auto; }
.sizet table{ border-collapse:collapse; width:100%; font-size:var(--text-2); font-variant-numeric:tabular-nums; }
.sizet th,.sizet td{ padding:var(--space-2) var(--space-3); border-bottom:var(--border) solid var(--color-line); text-align:left; }
.sizet th{ color:var(--color-muted); font-weight:600; background:var(--color-bg); }
.sizet td.empty{ color:var(--color-muted); }
.sizet__cta{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; padding:var(--space-3) var(--space-4); background:var(--color-bg); border-left:var(--space-1) solid var(--color-accent); font-size:var(--text-2); }
/* 관련 제품 */
.rel{ background:var(--color-bg); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.rel__inner{ max-width:var(--container); margin:0 auto; display:grid; gap:var(--space-4); }
.rel__inner h2{ margin:0; }
.rel__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); }
@media (min-width:700px){ .feat3{ grid-template-columns:repeat(3,1fr); } .rel__grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:900px){
  .pd,.pdesc,.rel{ padding-inline:var(--gutter-l-lg) var(--gutter-r-lg); }
  .pd{ padding-block:var(--space-6) var(--space-8); } .pdesc,.rel{ padding-block:var(--space-8); }
  .pd__inner{ grid-template-columns:1.1fr 0.9fr; gap:var(--space-7); align-items:start; }
  .pinfo{ position:sticky; top:calc(var(--space-7) + var(--space-4) + env(safe-area-inset-top,0px)); }
  .pdesc__inner{ grid-template-columns:1fr 1fr; gap:var(--space-7) var(--space-7); }
  .pdesc__block--wide{ grid-column:1 / -1; }
}

.sizet+.sizet{ margin-top:var(--space-4); }
.sizet caption{ text-align:left; font-weight:600; font-size:var(--text-2); padding-block:0 var(--space-2); color:var(--color-text); }
.sizet th:first-child,.sizet td:first-child{ position:sticky; left:0; background:var(--color-surface); }
.sizet th:first-child{ background:var(--color-bg); }
/* ===== SIZE GUIDE ===== */
.sg-head{ background:var(--color-surface); border-bottom:var(--border) solid var(--color-line); padding-block:var(--space-5) var(--space-6); padding-inline:var(--gutter-l) var(--gutter-r); }
.sg-head__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-4); }
.sg-head__title{ font-size:var(--text-6); line-height:1.2; margin:0; word-break:keep-all; }
.sg-head__summary{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); max-width:var(--measure); font-size:var(--text-3); word-break:keep-all; }
.sg-head__summary li{ padding-left:var(--space-4); position:relative; }
.sg-head__summary li::before{ content:""; position:absolute; left:0; top:0.6em; width:var(--space-2); height:var(--space-2); border-radius:var(--radius-pill); background:var(--color-accent); }
.sg-head__jump{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.sg-head__jump a{ font-size:var(--text-2); color:var(--color-brand); text-decoration:none; border:var(--border) solid var(--color-line); border-radius:var(--radius-pill); padding:var(--space-1) var(--space-3); min-height:var(--control-h-sm); display:inline-flex; align-items:center; }
.sg-head__jump a:hover{ border-color:var(--color-brand); }
.sg-head__jump a:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

.sg-how{ background:var(--color-bg); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.sg-how__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-6); align-items:start; }
.sg-how h2,.sg-rules h2,.sg-tables h2,.sg-between h2,.sg-faq h2{ font-size:var(--text-5); margin:0 0 var(--space-4); }
.sg-fig{ background:var(--color-surface); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); padding:var(--space-4); display:grid; gap:var(--space-3); justify-items:center; }
.sg-fig__svg{ width:100%; max-width:calc(var(--measure) / 2); height:auto; color:var(--color-text); }
.sg-fig__cap{ margin:0; font-size:var(--text-1); color:var(--color-muted); text-align:center; word-break:keep-all; }
.sg-howto{ margin:0; padding:0; list-style:none; counter-reset:how; display:grid; gap:var(--space-2); }
.sg-howto li{ counter-increment:how; display:grid; grid-template-columns:var(--space-5) 1fr; column-gap:var(--space-3); align-items:baseline; padding:var(--space-2) 0; border-bottom:var(--border) solid var(--color-line); word-break:keep-all; }
.sg-howto li::before{ content:counter(how); grid-row:1 / span 2; align-self:start; width:var(--space-5); height:var(--space-5); border-radius:var(--radius-pill); background:var(--color-brand); color:var(--color-surface); font-size:var(--text-1); font-weight:700; display:grid; place-items:center; }
.sg-howto b{ font-size:var(--text-3); }
.sg-howto span{ grid-column:2; font-size:var(--text-2); color:var(--color-muted); }
.sg-note{ margin:var(--space-4) 0 0; font-size:var(--text-2); color:var(--color-muted); word-break:keep-all; }

.sg-rules{ background:var(--color-surface); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.sg-rules__inner{ max-width:var(--container); margin-inline:auto; }
.sg-rules__list{ margin:0; padding:0; list-style:none; counter-reset:rule; display:grid; gap:var(--space-3); }
.sg-rules__list li{ counter-increment:rule; background:var(--color-bg); border-radius:var(--radius-md); padding:var(--space-4); display:grid; gap:var(--space-2); word-break:keep-all; }
.sg-rules__list li::before{ content:"0" counter(rule); font-size:var(--text-1); font-weight:700; color:var(--color-accent); letter-spacing:0.1em; }
.sg-rules__list b{ font-size:var(--text-4); }
.sg-rules__list p{ margin:0; font-size:var(--text-2); color:var(--color-muted); }

.sg-tables{ background:var(--color-bg); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.sg-tables__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-5); }
.sg-tables__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-3); }
.sg-tables__head h2{ margin:0; }
.sg-tables__ctrl{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.seg{ display:inline-flex; border:var(--border) solid var(--color-line); border-radius:var(--radius-pill); padding:var(--space-1); background:var(--color-surface); }
.seg__btn{ min-height:var(--control-h-sm); padding:0 var(--space-4); border:0; border-radius:var(--radius-pill); background:transparent; color:var(--color-muted); font:inherit; font-size:var(--text-2); font-weight:600; cursor:pointer; }
.seg__btn[aria-pressed="true"]{ background:var(--color-brand); color:var(--color-surface); }
.seg__btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.sg-pane{ display:grid; gap:var(--space-4); }
.sg-table table{ background:var(--color-surface); }
.sg-table caption{ text-align:left; font-weight:700; font-size:var(--text-3); padding-block:0 var(--space-2); color:var(--color-text); }
.sg-table th[scope="row"]{ font-weight:600; color:var(--color-text); }
.sg-table thead th{ text-align:center; }
.sg-table thead th:first-child{ text-align:left; }
.sg-table td{ text-align:center; white-space:nowrap; }
.sg-pane--chest{ border-top:var(--border) solid var(--color-line); padding-top:var(--space-5); justify-items:start; }
.sg-pane--chest h3{ margin:0; font-size:var(--text-4); }
.sg-pane__grid{ display:grid; gap:var(--space-4); width:100%; }

.sg-between{ background:var(--color-brand); color:var(--color-surface); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.sg-between__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-6); align-items:start; }
.sg-between .sg-note{ color:var(--color-surface); opacity:0.8; }
.sg-between__list{ margin:0; padding:0; list-style:none; display:grid; gap:var(--space-3); word-break:keep-all; }
.sg-between__list li{ display:grid; gap:var(--space-1); padding-bottom:var(--space-3); border-bottom:var(--border) solid color-mix(in srgb, var(--color-surface) 25%, transparent); }
.sg-between__list b{ font-size:var(--text-3); }
.sg-between__list span{ font-size:var(--text-2); opacity:0.85; }
.sg-between__cta{ background:var(--color-surface); color:var(--color-text); border-radius:var(--radius-md); padding:var(--space-5); display:grid; gap:var(--space-3); word-break:keep-all; }
.sg-between__cta p{ margin:0; }
.sg-between__cta .btn--secondary{ color:var(--color-brand); border-color:var(--color-brand); }

.sg-faq{ background:var(--color-surface); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.sg-faq__inner{ max-width:var(--measure); margin-inline:auto; display:grid; gap:var(--space-4); }
.sg-updated{ margin:0; font-size:var(--text-1); color:var(--color-muted); word-break:keep-all; }

@media (min-width:900px){
  .sg-how__inner{ grid-template-columns:2fr 3fr; }
  .sg-rules__list{ grid-template-columns:repeat(4,1fr); }
  .sg-pane__grid{ grid-template-columns:1fr 1fr; }
  .sg-between__inner{ grid-template-columns:3fr 2fr; }
  .sg-faq__inner{ max-width:var(--container); }
}
.sg-pane[hidden]{ display:none; }
.sg-table th[scope="row"]{ white-space:nowrap; }
/* ===== FITTING STORE ===== */
.fs-hero{ background:var(--color-brand); color:var(--color-surface); padding-block:var(--space-5) 0; padding-inline:var(--gutter-l) var(--gutter-r); }
.fs-hero__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-4); padding-bottom:var(--space-7); }
.fs-hero .crumb,.fs-hero .crumb a{ color:var(--color-surface); opacity:0.75; }
.fs-hero__eyebrow{ margin:0; font-size:var(--text-2); font-weight:600; letter-spacing:0.08em; opacity:0.8; }
.fs-hero__title{ margin:0; font-size:var(--text-6); line-height:1.2; word-break:keep-all; }
.fs-hero__lead{ margin:0; max-width:var(--measure); font-size:var(--text-3); opacity:0.9; word-break:keep-all; }
.fs-hero__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.fs-hero .btn--primary{ background:var(--color-surface); color:var(--color-brand); border-color:var(--color-surface); }
.fs-hero .btn--secondary{ color:var(--color-surface); border-color:color-mix(in srgb, var(--color-surface) 60%, transparent); }
.fs-hero .btn--secondary:hover{ background:color-mix(in srgb, var(--color-surface) 12%, transparent); }
.fs-facts{ max-width:var(--container); margin:0 auto; display:grid; gap:var(--border); background:var(--color-line); border-radius:var(--radius-md) var(--radius-md) 0 0; overflow:hidden; transform:translateY(var(--space-5)); }
.fs-facts__item{ background:var(--color-surface); color:var(--color-text); padding:var(--space-4); display:grid; gap:var(--space-1); word-break:keep-all; }
.fs-facts dt{ font-size:var(--text-1); color:var(--color-muted); font-weight:600; letter-spacing:0.06em; }
.fs-facts dd{ margin:0; font-size:var(--text-2); line-height:1.6; }

.fs-flow{ background:var(--color-surface); padding-block:var(--space-8) var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.fs-flow__inner,.fs-photos__inner,.fs-way__inner,.fs-prep__inner{ max-width:var(--container); margin-inline:auto; }
.fs-flow h2,.fs-way h2,.fs-prep h2,.fs-faq h2{ font-size:var(--text-5); margin:0 0 var(--space-4); word-break:keep-all; }
.fs-flow__steps{ margin:0; padding:0; list-style:none; counter-reset:step; display:grid; gap:var(--space-4); }
.fs-flow__steps li{ counter-increment:step; position:relative; display:grid; grid-template-columns:var(--space-6) 1fr; column-gap:var(--space-3); row-gap:var(--space-1); padding:var(--space-4) 0; border-top:var(--border) solid var(--color-line); word-break:keep-all; }
.fs-flow__steps li::before{ content:"0" counter(step); grid-column:1 / -1; font-size:var(--text-1); font-weight:700; color:var(--color-accent); letter-spacing:0.1em; }
.fs-flow__ic{ grid-row:2 / span 2; width:var(--space-6); height:var(--space-6); border-radius:var(--radius-pill); background:var(--color-bg); color:var(--color-brand); display:grid; place-items:center; }
.fs-flow__ic svg{ width:var(--space-5); height:var(--space-5); }
.fs-flow__steps b{ font-size:var(--text-4); align-self:center; }
.fs-flow__steps p{ margin:0; grid-column:2; font-size:var(--text-2); color:var(--color-muted); }
.fs-note{ margin:var(--space-4) 0 0; font-size:var(--text-2); color:var(--color-muted); word-break:keep-all; }

.fs-photos{ background:var(--color-bg); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.fs-photos__grid{ margin:0; padding:0; list-style:none; display:grid; gap:var(--space-3); }
.fs-photos__grid li{ border-radius:var(--radius-md); overflow:hidden; background:var(--color-surface); }
.fs-photos__grid img{ display:block; width:100%; height:100%; aspect-ratio:3 / 2; object-fit:cover; }

.fs-way{ background:var(--color-surface); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.fs-way__inner{ display:grid; gap:var(--space-6); align-items:start; }
.fs-way__map{ background:var(--color-bg); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); padding:var(--space-4); color:var(--color-text); display:grid; gap:var(--space-3); }
.fs-way__map svg{ width:100%; height:auto; }
.fs-way__map .store__mapcap{ margin:0; font-size:var(--text-1); color:var(--color-muted); }
.fs-way__map .store__maplinks{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.fs-way__map .btn--secondary{ color:var(--color-brand); border-color:var(--color-brand); }
.fs-way__list{ margin:0 0 var(--space-4); display:grid; gap:var(--space-3); }
.fs-way__list div{ display:grid; grid-template-columns:var(--space-8) 1fr; gap:var(--space-3); padding-bottom:var(--space-3); border-bottom:var(--border) solid var(--color-line); word-break:keep-all; }
.fs-way__list dt{ font-weight:600; color:var(--color-muted); font-size:var(--text-2); }
.fs-way__list dd{ margin:0; font-size:var(--text-2); line-height:1.6; }
.fs-way__sub{ color:var(--color-muted); }

.fs-prep{ background:var(--color-bg); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.fs-prep__inner{ display:grid; gap:var(--space-4); }
.fs-prep__card{ background:var(--color-surface); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); padding:var(--space-5); word-break:keep-all; }
.fs-prep__card h2{ font-size:var(--text-4); }
.fs-prep__list{ margin:0; padding:0; list-style:none; display:grid; gap:var(--space-3); }
.fs-prep__list li{ display:grid; gap:var(--space-1); padding-left:var(--space-4); position:relative; }
.fs-prep__list li::before{ content:""; position:absolute; left:0; top:0.55em; width:var(--space-2); height:var(--space-2); border-radius:var(--radius-pill); background:var(--color-accent); }
.fs-prep__list b{ font-size:var(--text-3); }
.fs-prep__list span{ font-size:var(--text-2); color:var(--color-muted); }
.fs-prep__card--contact{ background:var(--color-brand); color:var(--color-surface); border-color:var(--color-brand); }
.fs-prep__card--contact .fs-note{ color:var(--color-surface); opacity:0.8; }
.fs-contact{ margin:0; padding:0; list-style:none; display:grid; gap:var(--space-2); }
.fs-contact li{ display:grid; grid-template-columns:var(--space-8) 1fr; gap:var(--space-3); align-items:center; min-height:var(--control-h-sm); border-bottom:var(--border) solid color-mix(in srgb, var(--color-surface) 25%, transparent); }
.fs-contact span{ font-size:var(--text-2); opacity:0.8; }
.fs-contact a{ color:var(--color-surface); font-weight:600; text-decoration:none; }
.fs-contact a:hover{ text-decoration:underline; }
.fs-contact a:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }

.fs-faq{ background:var(--color-surface); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.fs-faq__inner{ max-width:var(--measure); margin-inline:auto; display:grid; gap:var(--space-4); }
.fs-updated{ margin:0; font-size:var(--text-1); color:var(--color-muted); word-break:keep-all; }

@media (min-width:720px){
  .fs-facts{ grid-template-columns:repeat(2,1fr); }
  .fs-photos__grid{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
  .fs-photos__main{ grid-row:1 / span 2; }
  .fs-photos__main img{ aspect-ratio:auto; }
}
@media (min-width:900px){
  .fs-facts{ grid-template-columns:repeat(4,1fr); }
  .fs-flow__steps{ grid-template-columns:repeat(4,1fr); gap:var(--space-5); }
  .fs-flow__steps li{ grid-template-columns:1fr; border-top:var(--space-1) solid var(--color-line); }
  .fs-flow__steps li::before{ grid-column:1; }
  .fs-flow__ic{ grid-row:auto; }
  .fs-flow__steps p{ grid-column:1; }
  .fs-way__inner{ grid-template-columns:1fr 1fr; }
  .fs-prep__inner{ grid-template-columns:3fr 2fr; }
  .fs-faq__inner{ max-width:var(--container); }
}
/* ===== FAQ ===== */
.faq-head{ background:var(--color-surface); border-bottom:var(--border) solid var(--color-line); padding-block:var(--space-5) var(--space-6); padding-inline:var(--gutter-l) var(--gutter-r); }
.faq-head__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-4); }
.faq-head__title{ margin:0; font-size:var(--text-6); line-height:1.2; word-break:keep-all; }
.faq-head__summary{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); max-width:var(--measure); font-size:var(--text-2); color:var(--color-muted); word-break:keep-all; }
.faq-head__summary li{ padding-left:var(--space-4); position:relative; }
.faq-head__summary li::before{ content:""; position:absolute; left:0; top:0.55em; width:var(--space-2); height:var(--space-2); border-radius:var(--radius-pill); background:var(--color-accent); }
.faq-head__summary b{ color:var(--color-text); }
.faq-search{ display:grid; grid-template-columns:1fr auto; gap:var(--space-3); align-items:center; max-width:var(--measure); }
.faq-search .field__input{ width:100%; }
.faq-search output{ font-size:var(--text-2); color:var(--color-muted); white-space:nowrap; }
.faq-head__chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.faq-head__chips .chip{ text-decoration:none; }

.faq-body{ background:var(--color-bg); padding-block:var(--space-6) var(--space-8); padding-inline:var(--gutter-l) var(--gutter-r); }
.faq-body__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-6); align-items:start; }
.faq-nav{ display:none; }
.faq-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-1); position:sticky; top:calc(var(--control-h) + var(--space-5)); }
.faq-nav a{ display:flex; justify-content:space-between; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); color:var(--color-text); text-decoration:none; font-size:var(--text-2); font-weight:600; word-break:keep-all; }
.faq-nav a span{ color:var(--color-muted); font-weight:400; }
.faq-nav a:hover{ background:var(--color-surface); }
.faq-nav a:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.faq-main{ display:grid; gap:var(--space-6); min-width:0; }
.faq__sec{ display:grid; gap:var(--space-3); scroll-margin-top:calc(var(--control-h) + var(--space-4)); }
.faq__sec h2{ margin:0; font-size:var(--text-4); }
.faq__list{ display:grid; gap:var(--space-2); }
.faq__item{ background:var(--color-surface); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); scroll-margin-top:calc(var(--control-h) + var(--space-4)); }
.faq__item summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:var(--space-6) 1fr auto; gap:var(--space-3); align-items:center; padding:var(--space-3) var(--space-4); min-height:var(--control-h); font-weight:700; word-break:keep-all; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; color:var(--color-accent); font-weight:700; }
.faq__item[open] summary::after{ content:"−"; }
.faq__item summary:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-md); }
.faq__num{ color:var(--color-accent); font-size:var(--text-1); font-weight:700; letter-spacing:0.04em; }
.faq__a{ padding:0 var(--space-4) var(--space-4); }
.faq__a p{ margin:0; font-size:var(--text-2); line-height:1.75; color:var(--color-text); word-break:keep-all; }
.faq__a a{ color:var(--color-brand); }
.faq__empty{ margin:0; padding:var(--space-5); background:var(--color-surface); border-radius:var(--radius-md); color:var(--color-muted); text-align:center; word-break:keep-all; }

.faq-ask{ background:var(--color-brand); color:var(--color-surface); border-radius:var(--radius-md); padding:var(--space-5); display:grid; gap:var(--space-3); word-break:keep-all; }
.faq-ask h2{ margin:0; font-size:var(--text-4); }
.faq-ask p{ margin:0; font-size:var(--text-2); opacity:0.9; }
.faq-ask__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.faq-ask .btn--primary{ background:var(--color-surface); color:var(--color-brand); border-color:var(--color-surface); }
.faq-ask .btn--secondary{ color:var(--color-surface); border-color:color-mix(in srgb, var(--color-surface) 60%, transparent); }

.faq-ref{ font-size:var(--text-2); color:var(--color-muted); word-break:keep-all; }
.faq-ref summary{ cursor:pointer; font-weight:600; color:var(--color-text); min-height:var(--control-h-sm); display:flex; align-items:center; }
.faq-ref summary:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.faq-ref ul{ margin:var(--space-2) 0; padding-left:var(--space-4); display:grid; gap:var(--space-1); }
.faq-ref a{ color:var(--color-brand); }
.faq-ref__note{ margin:var(--space-2) 0 0; font-size:var(--text-1); }

@media (min-width:900px){
  .faq-body__inner{ grid-template-columns:1fr 3fr; }
  .faq-nav{ display:block; }
  .faq-head__chips{ display:none; }
}
/* ===== ABOUT ===== */
.ab-hero{ background:var(--color-surface); padding-block:var(--space-5) var(--space-8); padding-inline:var(--gutter-l) var(--gutter-r); }
.ab-hero__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-4); }
.ab-hero__eyebrow{ margin:0; font-size:var(--text-2); font-weight:600; letter-spacing:0.08em; color:var(--color-accent); }
.ab-hero__title{ margin:0; font-size:var(--text-6); line-height:1.2; word-break:keep-all; max-width:var(--measure); }
.ab-hero__lead{ margin:0; max-width:var(--measure); font-size:var(--text-4); line-height:1.6; color:var(--color-muted); word-break:keep-all; }

.ab-name{ background:var(--color-bg); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.ab-name__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-5); align-items:center; }
.ab-name__media{ margin:0; border-radius:var(--radius-md); overflow:hidden; max-width:calc(var(--measure) / 2); }
.ab-name__media img{ display:block; width:100%; height:auto; aspect-ratio:3 / 4; object-fit:cover; }
.ab-name__copy{ display:grid; gap:var(--space-3); word-break:keep-all; }
.ab-name__copy h2{ margin:0; font-size:var(--text-5); line-height:1.3; }
.ab-name__copy p{ margin:0; line-height:1.75; }
.ab-name__sign{ color:var(--color-muted); font-size:var(--text-2); padding-top:var(--space-2); border-top:var(--border) solid var(--color-line); }
.ab-name__sign b{ color:var(--color-text); }

.ab-rules{ background:var(--color-brand); color:var(--color-surface); padding-block:var(--space-8); padding-inline:var(--gutter-l) var(--gutter-r); }
.ab-rules__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-5); }
.ab-rules h2{ margin:0; font-size:var(--text-5); }
.ab-rules__list{ margin:0; padding:0; list-style:none; counter-reset:r; display:grid; gap:var(--space-5); }
.ab-rules__list li{ counter-increment:r; display:grid; gap:var(--space-2); padding-top:var(--space-4); border-top:var(--border) solid color-mix(in srgb, var(--color-surface) 30%, transparent); word-break:keep-all; }
.ab-rules__list li::before{ content:"0" counter(r); font-size:var(--text-1); font-weight:700; letter-spacing:0.1em; opacity:0.7; }
.ab-rules__list b{ font-size:var(--text-4); }
.ab-rules__list p{ margin:0; font-size:var(--text-2); line-height:1.7; opacity:0.9; }

.ab-work{ background:var(--color-surface); padding-block:var(--space-8); padding-inline:var(--gutter-l) var(--gutter-r); }
.ab-work__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-5); }
.ab-work__head{ display:grid; gap:var(--space-2); max-width:var(--measure); word-break:keep-all; }
.ab-work__head h2{ margin:0; font-size:var(--text-5); }
.ab-work__head p{ margin:0; color:var(--color-muted); }
.ab-work__list{ margin:0; padding:0; list-style:none; display:grid; gap:var(--space-3); }
.ab-work__list li{ display:grid; gap:var(--space-2); padding:var(--space-4); background:var(--color-bg); border-radius:var(--radius-md); word-break:keep-all; }
.ab-work__ic{ width:var(--space-6); height:var(--space-6); border-radius:var(--radius-pill); background:var(--color-surface); color:var(--color-brand); display:grid; place-items:center; }
.ab-work__ic svg{ width:var(--space-5); height:var(--space-5); }
.ab-work__list b{ font-size:var(--text-3); }
.ab-work__list p{ margin:0; font-size:var(--text-2); color:var(--color-muted); line-height:1.65; }
.ab-work__list a{ color:var(--color-brand); font-size:var(--text-2); font-weight:600; text-decoration:none; min-height:var(--control-h-sm); display:inline-flex; align-items:center; }
.ab-work__list a::after{ content:" →"; }
.ab-work__list a:hover{ text-decoration:underline; }
.ab-work__list a:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }

.ab-kb{ background:var(--color-bg); padding-block:var(--space-8); padding-inline:var(--gutter-l) var(--gutter-r); scroll-margin-top:calc(var(--control-h) + var(--space-4)); }
.ab-kb__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-5); align-items:center; }
.ab-kb__copy{ display:grid; gap:var(--space-3); word-break:keep-all; }
.ab-kb__eyebrow{ margin:0; font-size:var(--text-2); font-weight:600; letter-spacing:0.08em; color:var(--color-accent); }
.ab-kb h2{ margin:0; font-size:var(--text-5); line-height:1.3; }
.ab-kb__copy>p{ margin:0; line-height:1.75; }
.ab-kb__points{ margin:0; padding:0; list-style:none; display:grid; gap:var(--space-2); font-size:var(--text-2); color:var(--color-muted); }
.ab-kb__points li{ padding-left:var(--space-4); position:relative; }
.ab-kb__points li::before{ content:""; position:absolute; left:0; top:0.6em; width:var(--space-2); height:var(--space-2); border-radius:var(--radius-pill); background:var(--color-accent); }
.ab-kb__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.ab-kb__media{ margin:0; border-radius:var(--radius-md); overflow:hidden; }
.ab-kb__media img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; }
.ab-note{ margin:0; font-size:var(--text-1); color:var(--color-muted); word-break:keep-all; }

.ab-info{ background:var(--color-surface); border-top:var(--border) solid var(--color-line); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.ab-info__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-6); align-items:start; }
.ab-info h2{ margin:0 0 var(--space-4); font-size:var(--text-4); }
.ab-info__list{ margin:0; display:grid; gap:var(--space-2); }
.ab-info__list div{ display:grid; grid-template-columns:calc(var(--space-8) + var(--space-5)) 1fr; gap:var(--space-3); padding-bottom:var(--space-2); border-bottom:var(--border) solid var(--color-line); font-size:var(--text-2); word-break:keep-all; }
.ab-info__list dt{ color:var(--color-muted); font-weight:600; }
.ab-info__list dd{ margin:0; }
.ab-info__list a{ color:var(--color-brand); }
.ab-info__channels ul{ margin:0 0 var(--space-4); padding:0; list-style:none; display:grid; gap:var(--space-2); }
.ab-info__channels li{ display:grid; grid-template-columns:calc(var(--space-8) + var(--space-7)) 1fr; gap:var(--space-3); align-items:center; min-height:var(--control-h-sm); border-bottom:var(--border) solid var(--color-line); font-size:var(--text-2); }
.ab-info__channels span{ color:var(--color-muted); font-weight:600; }
.ab-info__channels a{ color:var(--color-brand); font-weight:600; text-decoration:none; }
.ab-info__channels a:hover{ text-decoration:underline; }
.ab-info__channels a:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }

@media (min-width:900px){
  .ab-name__inner{ grid-template-columns:2fr 3fr; }
  .ab-rules__inner{ grid-template-columns:1fr 2fr; align-items:start; }
  .ab-rules__list{ gap:var(--space-5); }
  .ab-work__list{ grid-template-columns:repeat(3,1fr); }
  .ab-kb__inner{ grid-template-columns:1fr 1fr; }
  .ab-info__inner{ grid-template-columns:3fr 2fr; }
}
/* ===== COMPRESSION GUIDE 허브 ===== */
.ghub-head{ background:var(--color-surface); border-bottom:var(--border) solid var(--color-line); padding-block:var(--space-5) var(--space-6); padding-inline:var(--gutter-l) var(--gutter-r); }
.ghub-head__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-4); }
.ghub-head__title{ margin:0; font-size:var(--text-6); line-height:1.2; }
.ghub-head__lead{ margin:0; max-width:var(--measure); color:var(--color-muted); word-break:keep-all; }
.ghub-head__links{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.ghub{ background:var(--color-bg); padding-block:var(--space-6) var(--space-8); padding-inline:var(--gutter-l) var(--gutter-r); }
.ghub__inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-4); }
.ghub__list{ margin:0; padding:0; list-style:none; display:grid; gap:var(--space-3); }
.ghub__card{ display:grid; grid-template-columns:var(--space-8) 1fr; gap:var(--space-4); background:var(--color-surface); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); padding:var(--space-3); color:inherit; text-decoration:none; }
.ghub__card:hover{ border-color:var(--color-brand); }
.ghub__card:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.ghub__thumb{ border-radius:var(--radius-sm); overflow:hidden; background:var(--color-bg); }
.ghub__thumb img{ display:block; width:100%; height:100%; aspect-ratio:3 / 4; object-fit:cover; }
.ghub__body{ display:grid; gap:var(--space-2); align-content:start; word-break:keep-all; }
.ghub__meta{ margin:0; font-size:var(--text-1); color:var(--color-muted); }
.ghub__title{ margin:0; font-size:var(--text-4); line-height:1.3; }
.ghub__desc{ display:none; margin:0; font-size:var(--text-2); color:var(--color-muted); line-height:1.65; }
.ghub__more{ font-size:var(--text-2); font-weight:600; color:var(--color-brand); }
.ghub__updated{ margin:0; font-size:var(--text-1); color:var(--color-muted); }

/* ===== 글 템플릿 ===== */
.art__head{ background:var(--color-surface); border-bottom:var(--border) solid var(--color-line); padding-block:var(--space-5) var(--space-6); padding-inline:var(--gutter-l) var(--gutter-r); }
.art__head-inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-4); }
.art__eyebrow{ margin:0; font-size:var(--text-2); font-weight:600; color:var(--color-accent); letter-spacing:0.04em; }
.art__title{ margin:0; font-size:var(--text-6); line-height:1.25; max-width:var(--measure); word-break:keep-all; }
.art__summary{ background:var(--color-bg); border-left:var(--space-1) solid var(--color-accent); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:var(--space-4) var(--space-5); max-width:var(--measure); display:grid; gap:var(--space-2); }
.art__summary-label{ margin:0; font-size:var(--text-1); font-weight:700; color:var(--color-accent); letter-spacing:0.06em; }
.art__summary ul{ margin:0; padding-left:var(--space-4); display:grid; gap:var(--space-2); font-size:var(--text-2); line-height:1.7; word-break:keep-all; }
.art__meta{ margin:0; font-size:var(--text-1); color:var(--color-muted); word-break:keep-all; }

.art__body{ background:var(--color-bg); padding-block:var(--space-6) var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.art__body-inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-6); align-items:start; }
.art__toc{ display:none; }
.art__toc p{ margin:0 0 var(--space-2); font-size:var(--text-1); font-weight:700; color:var(--color-muted); letter-spacing:0.06em; }
.art__toc ol{ margin:0; padding-left:var(--space-4); display:grid; gap:var(--space-2); font-size:var(--text-2); position:sticky; top:calc(var(--control-h) + var(--space-5)); }
.art__toc a{ color:var(--color-text); text-decoration:none; word-break:keep-all; }
.art__toc a:hover{ color:var(--color-brand); text-decoration:underline; }
.art__toc a:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.art__main{ display:grid; gap:var(--space-5); max-width:var(--measure); }
.art__fig{ margin:0; border-radius:var(--radius-md); overflow:hidden; max-width:calc(var(--measure) / 2); }
.art__fig img{ display:block; width:100%; height:auto; aspect-ratio:3 / 4; object-fit:cover; }
.art__sec{ display:grid; gap:var(--space-3); scroll-margin-top:calc(var(--control-h) + var(--space-4)); }
.art__sec h2{ margin:0; font-size:var(--text-5); line-height:1.3; word-break:keep-all; }
.art__sec p{ margin:0; line-height:1.8; word-break:keep-all; }
.art__notice{ background:var(--color-surface); border:var(--border) solid var(--color-line); border-radius:var(--radius-md); padding:var(--space-4) var(--space-5); display:grid; gap:var(--space-2); word-break:keep-all; }
.art__notice b{ font-size:var(--text-3); }
.art__notice p{ margin:0; font-size:var(--text-2); color:var(--color-muted); line-height:1.7; }
.art__faq{ display:grid; gap:var(--space-3); }
.art__faq h2{ margin:0; font-size:var(--text-4); }

.art__rel{ background:var(--color-surface); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.art__rel-inner,.art__next-inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-4); }
.art__rel h2,.art__next h2{ margin:0; font-size:var(--text-4); }
.art__next{ background:var(--color-bg); padding-block:var(--space-7); padding-inline:var(--gutter-l) var(--gutter-r); }
.art__next-list{ grid-template-columns:1fr; }
@media (min-width:720px){ .art__next-list{ grid-template-columns:1fr 1fr; } }

@media (min-width:720px){
  .ghub__card{ grid-template-columns:calc(var(--space-8) + var(--space-7)) 1fr; }
  .ghub__desc{ display:block; }
}
@media (min-width:900px){
  .art__body-inner{ grid-template-columns:1fr 3fr; }
  .art__toc{ display:block; }
}
/* ===== 약관·개인정보 ===== */
.legal__head{ background:var(--color-surface); border-bottom:var(--border) solid var(--color-line); padding-block:var(--space-5) var(--space-6); padding-inline:var(--gutter-l) var(--gutter-r); }
.legal__head-inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-3); }
.legal__eyebrow{ margin:0; font-size:var(--text-2); color:var(--color-muted); }
.legal__title{ margin:0; font-size:var(--text-6); line-height:1.2; }
.legal__intro{ margin:0; max-width:var(--measure); line-height:1.75; word-break:keep-all; }
.legal__meta{ margin:0; font-size:var(--text-1); color:var(--color-muted); }
.legal__body{ background:var(--color-bg); padding-block:var(--space-6) var(--space-8); padding-inline:var(--gutter-l) var(--gutter-r); }
.legal__body-inner{ max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-6); align-items:start; }
.legal__toc{ display:none; }
.legal__toc p{ margin:0 0 var(--space-2); font-size:var(--text-1); font-weight:700; color:var(--color-muted); letter-spacing:0.06em; }
.legal__toc ol{ margin:0; padding-left:var(--space-4); display:grid; gap:var(--space-2); font-size:var(--text-2); position:sticky; top:calc(var(--control-h) + var(--space-5)); }
.legal__toc a{ color:var(--color-text); text-decoration:none; word-break:keep-all; }
.legal__toc a:hover{ color:var(--color-brand); text-decoration:underline; }
.legal__toc a:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.legal__main{ display:grid; gap:var(--space-5); max-width:var(--measure); }
.legal__sec{ display:grid; gap:var(--space-2); scroll-margin-top:calc(var(--control-h) + var(--space-4)); }
.legal__sec h2{ margin:0; font-size:var(--text-4); }
.legal__sec p{ margin:0; font-size:var(--text-2); line-height:1.8; word-break:keep-all; }
.legal__foot{ margin:0; padding-top:var(--space-4); border-top:var(--border) solid var(--color-line); font-size:var(--text-1); color:var(--color-muted); word-break:keep-all; }
@media (min-width:900px){
  .legal__body-inner{ grid-template-columns:1fr 3fr; }
  .legal__toc{ display:block; }
}