/* ============================================================
   웹담다 토큰 — 업체마다 바꾸는 건 --brand / --ink / --paper 3개뿐
   나머지는 전부 자동 파생. 건드리지 않는다.
   근거: docs/디자인규칙_v0벤치.md
   ============================================================ */

:root{
  /* ══ 업체마다 바꾸는 것 (이 3개만) ══ */
  --brand:  #C41E3A;   /* 홈페이지사랑 — 로고 하트 레드 */
  --ink:    #14161A;
  --paper:  #FFFFFF;

  /* ══ 자동 파생 ══ */
  --bg:         var(--paper);
  --surface:    color-mix(in srgb, var(--ink)  4%, var(--paper));
  --surface-2:  color-mix(in srgb, var(--ink)  8%, var(--paper));
  --line:       color-mix(in srgb, var(--ink) 14%, var(--paper));
  --text:       color-mix(in srgb, var(--ink) 92%, var(--paper));
  --text-mute:  color-mix(in srgb, var(--ink) 55%, var(--paper));
  --brand-soft: color-mix(in srgb, var(--brand) 14%, var(--paper));
  --on-brand:   var(--paper);

  /* ══ 타이포 스케일 ══
     🚨 한글은 같은 수치에서 영문보다 작아 보인다. 기준을 올려 잡는다.
     방문자가 조절하는 배율은 --fs (1 / 1.12 / 1.25) 로 곱해진다. */
  --f-hero: clamp(2.4rem, 6.2vw, 4.6rem);
  --f-h2:   clamp(1.75rem, 3.4vw, 2.6rem);
  --f-h3:   clamp(1.26rem, 2.2vw, 1.58rem);
  --f-num:  clamp(2.1rem, 4.6vw, 3.2rem);
  --f-body: clamp(1.08rem, 1.25vw, 1.24rem);
  --f-cap:  clamp(.88rem, 1vw, .96rem);
  --f-sm:   clamp(1rem, 1.1vw, 1.09rem);

  /* ══ 여백 스케일 (고정) ══ */
  --sp-sec: clamp(64px, 11vw, 148px);
  --sp-lg:  48px;
  --sp-md:  24px;
  --sp-sm:  12px;

  /* ══ 기타 (고정) ══ */
  --r-lg: 20px;
  --r-md: 12px;
  --r-sm: 8px;
  --wrap: 1320px;   /* 좌우 여백을 덜 버린다 */
  --ls-en: -.03em;    /* 영문 대형 타이포 */
  --ls-ko: -.015em;   /* 한글은 덜 좁힌다 */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Segoe UI", system-ui, sans-serif;
  --serif: "Nanum Myeongjo", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* 다크 = ink 와 paper 를 뒤집는다 */
[data-tone="dark"]{
  --ink:   #F4F0E8;
  --paper: #14120F;
}

/* ── 업체 프리셋 ─────────────────────────────────────────── */
[data-preset="clinic"]{ --brand:#C9A96A; --ink:#F4F0E8; --paper:#14120F; }
[data-preset="academy"]{ --brand:#2563EB; --ink:#0F172A; --paper:#FFFFFF; }
[data-preset="estate"]{ --brand:#0F766E; --ink:#111827; --paper:#FAFAF8; }
[data-preset="food"]{   --brand:#B45309; --ink:#1C1917; --paper:#FDFBF7; }

/* ── 기본 리셋 ───────────────────────────────────────────── */
/* 방문자가 고르는 글자 크기 배율 — 기본 1 */
html{ --fs:1; font-size:calc(100% * var(--fs)) }
html[data-fs="l"]{ --fs:1.12 }
html[data-fs="xl"]{ --fs:1.25 }

*,*::before,*::after{ box-sizing:border-box }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:var(--f-body);
  line-height:1.7; letter-spacing:var(--ls-ko);
  -webkit-font-smoothing:antialiased;
}
.wrap{ width:min(var(--wrap), calc(100% - clamp(36px, 7vw, 108px)));
  margin-inline:auto }

/* 🚨 한국어 줄바꿈 — 이게 없으면 어절 중간에서 끊긴다
   ("만들었 / 습니다" 같은 현상). 한국어 웹 타이포의 기본이다. */
body,h1,h2,h3,p,li,dt,dd,summary,label,button,a{ word-break:keep-all;
  overflow-wrap:break-word }
h1,h2,h3{ text-wrap:balance }          /* 줄 길이를 고르게 */
p,li{ text-wrap:pretty }               /* 마지막 줄에 한 단어만 남지 않게 */