/* =========================================================================
   seran-tokens.css — 세란 디자인 토큰 · 웹폰트 · 최소 타이포 기본값

   모듈: static-pages — 소유 파일 (CONTRACT-FRONT.md §3).
   전 모듈이 참조하는 단일 원천이다. 다른 seran-*.css 는 여기서 선언한
   var() 만 쓰고 hex 를 직접 적지 않는다 (CONTRACT-FRONT.md §0-4).

   로드 순서 (중요):
     clinic-skin-style(style.css)  →  seran-tokens  →  seran-{layout,home,…}
     style.css 의 :root 와 같은 특정도이므로 **뒤에** 실려야 이긴다.
     배선은 _wiring/static-pages.md 참조 (register@1 / enqueue@20).

   새 토큰이 필요하면 이 파일 소유자(static-pages)에게 wiring 으로 요청할 것.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. 웹폰트 — tvN 즐거운이야기 (헤드라인 전용)

   출처 : _audit/fonts/tvN-즐거운이야기-{Light,Medium,Bold}.ttf
          (구 사이트에서 수급한 실파일. ASCII 파일명으로 개명해 배치)
   저작권: CJ ENM (tvN 즐거운이야기 / tvN Enjoystories)
   라이선스: CJ ENM 이 배포하는 무료 폰트로, 개인·기업 사용자가 상업적 목적을
          포함해 자유롭게 사용할 수 있으나 **폰트 파일 자체의 유료 판매·재배포는
          금지**된다. 웹폰트 임베딩은 허용 범위이며, 저작권자 표기를 남긴다.
          라이선스 전문: https://tvn.cjenm.com/ko/tvnfont/
          ※ 테마를 제3자에게 재배포할 때는 이 폰트 파일을 제외하거나
            수령자가 직접 내려받도록 안내할 것.
   비고 : woff2 변환 없이 ttf 그대로 둔다 (CONTRACT-FRONT.md §1).
          용량이 크므로 font-display:swap 으로 본문 렌더를 막지 않는다.
          본문(Noto Sans KR)은 self-host 하지 않는다 — 시스템 한글 폰트 폴백을
          쓰고, 필요하면 bunny.net 1패밀리만 배선에서 인큐한다(§1 단서).
------------------------------------------------------------------------- */

@font-face {
  font-family: 'tvN 즐거운이야기';
  src: local('tvN 즐거운이야기 Light'), local('tvN Enjoystories Light'),
       url('../fonts/tvn-joyful-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'tvN 즐거운이야기';
  src: local('tvN 즐거운이야기 Medium'), local('tvN Enjoystories Medium'),
       url('../fonts/tvn-joyful-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'tvN 즐거운이야기';
  src: local('tvN 즐거운이야기 Bold'), local('tvN Enjoystories Bold'),
       url('../fonts/tvn-joyful-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   2. 디자인 토큰 — CONTRACT-FRONT.md §1 블록 (원문 그대로)
------------------------------------------------------------------------- */

:root{
  /* 브랜드 (clinic-skin 3토큰 시스템에 착지) */
  --brand-primary:#F68B1A;      /* 세란 주황 */
  --brand-secondary:#FFFFFF;
  --brand-accent:#A9BC0D;       /* 올리브 */
  /* 세란 확장 */
  --seran-orange:#F68B1A; --seran-orange-soft:#F6A04D; --seran-orange-grad:#F79A22;
  --seran-cta:#D76E0F;  --seran-olive:#A9BC0D; --seran-olive-dark:#87970A; --seran-leaf:#B7D68A;
  --seran-bg-warm:#FFF7EF; --seran-bg-mega:#F6F8F2; --seran-bg-soft:#FAFAFA;
  --seran-ink:#333; --seran-ink-2:#555; --seran-ink-3:#888; --seran-line:#DDD;
  --seran-radius:12px; --seran-radius-lg:20px;
  /* 콘솔 › 스타일 › 글꼴에서 역할을 지정하면 그 값이, 지정이 없으면 세란 원본 스택이 온다.
     지면 CSS 는 이 두 토큰을 직접 참조하는 곳이 18군데라(제목 히어로·소개·비급여·홈 헤드라인 등),
     선언마다 var(--serif)/var(--sans) 로 바꾸는 대신 **토큰 정의 자체를 다리로** 만든다.
     --font-heading/--font-body 는 Clinic_Font_Roles 가 html:root 로 내보낸다(특이도 0,1,1). */
  --seran-font:var(--font-body, 'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif);
  --seran-font-display:var(--font-heading, 'tvN 즐거운이야기','Noto Sans KR',sans-serif); /* 헤드라인 */
}

/* -------------------------------------------------------------------------
   3. 파생 토큰 — 위 원문 블록을 건드리지 않고 덧붙이는 값들.
      (색은 전부 §1 토큰에서만 유도한다. 새 hex 를 만들지 않는다.)
------------------------------------------------------------------------- */

:root{
  /* 상태 (구 스니펫 012 팔레트 승계) */
  --seran-success:#4CA56A;
  --seran-error:#E2554D;

  /* 표면·그림자 */
  --seran-bg:var(--brand-secondary);
  --seran-shadow:0 2px 10px rgba(0,0,0,.06);
  --seran-shadow-lg:0 8px 28px rgba(0,0,0,.10);

  /* ── 모듈 요청 토큰 ──────────────────────────────────────────────
     각 모듈이 스냅샷에서 계측해 wiring 으로 요청한 값. 값을 바꾸면
     해당 모듈 CSS 의 폴백과 어긋나므로 반드시 요청자와 함께 바꿀 것.

     _wiring/layout-pack.md §5-7 (헤더 메가·드로어 구분선 / 푸터 오버레이 / 플로팅 글로우)
     _wiring/equipment-template.md §5-(b) (구 스니펫 048 값) */
  --seran-line-soft:#E8E8E8;                 /* 메가 컬럼 구분선 (구 스니펫 044) */
  --seran-hairline:rgba(0,0,0,.06);          /* 상단바 하단 실선 */
  --seran-veil-ink:rgba(51,51,51,.95);       /* 푸터 배경사진 위 오버레이 */
  --seran-veil-line:rgba(255,255,255,.25);   /* 푸터 구분선 */
  --seran-veil-ink-2:rgba(255,255,255,.72);  /* 푸터 보조 텍스트 */
  --seran-orange-glow:rgba(246,139,26,.3);   /* 플로팅 아이콘 글로우 (구 스니펫 084) */
  --seran-line-warm:#FFE0B9;                 /* 따뜻한 카드/이미지 테두리 (구 --border-soft) */
  --seran-bg-cream:#FFFDF7;                  /* 아코디언 단계 카드 배경 (.exam-step) */

  /* 그라데이션 짝 (버튼·마커) */
  --seran-grad-orange:linear-gradient(135deg, var(--seran-orange) 0%, var(--seran-orange-grad) 100%);
  --seran-grad-olive:linear-gradient(135deg, var(--seran-olive) 0%, var(--seran-olive-dark) 100%);

  /* 타이포 스케일 */
  --seran-fs-xs:.8125rem;
  --seran-fs-sm:.875rem;
  --seran-fs-base:1rem;
  --seran-fs-lg:1.125rem;
  /* 구 사이트(Brizy 전역 타이포)에서 계측한 실제 값 — 지면 인상을 좌우한다.
     --brz-heading{1..6}fontsize / lineheight / bold, --brz-paragraph* 를 그대로 옮겼다. */
  --seran-fs-h6:1.25rem;   /* 20px */
  --seran-fs-h5:1.25rem;   /* 20px */
  --seran-fs-h4:1.375rem;  /* 22px */
  --seran-fs-h3:2rem;      /* 32px */
  --seran-fs-h2:2.25rem;   /* 36px */
  --seran-fs-h1:2.5rem;    /* 40px */
  --seran-lh:1.9;          /* 본문 */
  --seran-lh-tight:1.3;    /* h1·h2 */
  --seran-lh-h3:1.6;
  --seran-lh-h4:1.5;
  --seran-lh-h6:1.8;

  /* 리듬 */
  --seran-gap:16px;
  --seran-gap-lg:32px;
  --seran-section:clamp(48px, 7vw, 96px);
  --seran-content-width:1120px;
  --seran-prose-width:1000px;  /* 구 사이트 본문 열 계측값 */

  /* 모션 */
  --seran-ease:cubic-bezier(.22,.61,.36,1);
  --seran-dur:.25s;
}

/* clinic-skin 글꼴 토큰 다리 —
   콘솔 › 글꼴에서 역할 글꼴을 지정했으면(--font-body/--font-heading/--font-accent
   가 선언됨) 그 값이 이기고, 지정이 없으면 세란 스택으로 떨어진다.
   덕분에 style.css 의 기존 규칙(var(--sans)/var(--serif)/var(--script))을
   셀렉터 싸움 없이 세란 타이포로 갈아끼운다. */
:root{
  --sans:var(--font-body, var(--seran-font));
  --serif:var(--font-heading, var(--seran-font-display));
  --script:var(--font-accent, var(--seran-font-display));
}

@media (prefers-reduced-motion: reduce){
  :root{ --seran-dur:.001s; }
}

/* -------------------------------------------------------------------------
   4. 최소 타이포 기본값

   범위를 좁게 잡는다 — 사이트 전역 리셋이 아니라,
   (a) 세란 문서 컨테이너 `.seran-prose`
   (b) 헤드라인 유틸 `.seran-display`
   두 가지만 정의한다. 07-pages.php 로 정적화한 본문은 Brizy 가 들고 있던
   인라인 CSS 를 잃으므로, 표·리스트·이미지가 최소한 읽히게 만드는 것이 목적이다.
   페이지 템플릿에서 `the_content()` 를 `.seran-prose` 로 감싸는 배선은
   _wiring/static-pages.md 참조.
------------------------------------------------------------------------- */

.seran-display{
  font-family:var(--seran-font-display);
  font-weight:500;
  line-height:var(--seran-lh-tight);
  letter-spacing:-.01em;
}

.seran-prose{
  max-width:var(--seran-prose-width);
  margin-inline:auto;
  padding-inline:20px;
  font-family:var(--seran-font);
  font-size:var(--seran-fs-base);
  line-height:var(--seran-lh);
  color:var(--seran-ink);
  word-break:keep-all;
  overflow-wrap:anywhere;
}

.seran-prose--wide{ max-width:var(--seran-content-width); }

.seran-prose > :first-child{ margin-top:0; }
.seran-prose > :last-child{ margin-bottom:0; }

.seran-prose h1,
.seran-prose h2,
.seran-prose h3,
.seran-prose h4,
.seran-prose h5,
.seran-prose h6{
  font-family:var(--seran-font);
  font-weight:700;              /* 구 사이트 heading1~5 bold=700 */
  line-height:var(--seran-lh-tight);
  color:var(--seran-ink);
  margin:2em 0 .6em;
  letter-spacing:-.01em;
}

.seran-prose h1{ font-size:var(--seran-fs-h1); margin-top:0; }
.seran-prose h2{ font-size:var(--seran-fs-h2); }
.seran-prose h3{ font-size:var(--seran-fs-h3); line-height:var(--seran-lh-h3); }
.seran-prose h4{ font-size:var(--seran-fs-h4); line-height:var(--seran-lh-h4); }
.seran-prose h5{ font-size:var(--seran-fs-h5); line-height:var(--seran-lh-h3); }
.seran-prose h6{ font-size:var(--seran-fs-h6); line-height:var(--seran-lh-h6); font-weight:600; }

.seran-prose p{ margin:0 0 1.1em; }
.seran-prose strong,
.seran-prose b{ font-weight:700; color:var(--seran-ink); }
.seran-prose em,
.seran-prose i{ font-style:italic; }
.seran-prose small{ font-size:var(--seran-fs-sm); color:var(--seran-ink-3); }

.seran-prose a{
  color:var(--seran-cta);
  text-decoration:underline;
  text-underline-offset:.18em;
  transition:color var(--seran-dur) var(--seran-ease);
}
.seran-prose a:hover,
.seran-prose a:focus-visible{ color:var(--seran-orange); }

.seran-prose ul,
.seran-prose ol{ margin:0 0 1.1em; padding-left:1.4em; }
.seran-prose li{ margin:.35em 0; }
.seran-prose ul{ list-style:disc; }
.seran-prose ol{ list-style:decimal; }

.seran-prose dl{ margin:0 0 1.1em; }
.seran-prose dt{ font-weight:700; margin-top:.8em; }
.seran-prose dd{ margin:.2em 0 0 1.2em; color:var(--seran-ink-2); }

.seran-prose img{
  max-width:100%;
  height:auto;
  display:block;
  margin:1.2em auto;
  border-radius:var(--seran-radius);
}

.seran-prose figure{ margin:1.4em 0; }
.seran-prose figcaption{
  font-size:var(--seran-fs-sm);
  color:var(--seran-ink-3);
  text-align:center;
  margin-top:.5em;
}

.seran-prose hr{
  border:0;
  border-top:1px solid var(--seran-line);
  margin:2em 0;
}

.seran-prose blockquote{
  margin:1.4em 0;
  padding:14px 18px;
  background:var(--seran-bg-warm);
  border-left:3px solid var(--seran-orange);
  border-radius:0 var(--seran-radius) var(--seran-radius) 0;
  color:var(--seran-ink-2);
}

/* 표 — 비급여 수가표(page 31101)가 이 규칙으로 읽힌다. */
.seran-prose table:not([class]),
.seran-prose table.seran-table{
  width:100%;
  margin:1.4em 0;
  border-collapse:collapse;
  font-size:var(--seran-fs-sm);
  line-height:1.6;
}
.seran-prose table:not([class]) thead th,
.seran-prose table.seran-table thead th{
  background:var(--seran-bg-mega);
  color:var(--seran-ink-2);
  font-weight:500;
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--seran-line);
}
.seran-prose table:not([class]) :is(td,th),
.seran-prose table.seran-table :is(td,th){
  padding:12px 14px;
  border-bottom:1px solid var(--seran-line-soft);
  vertical-align:top;
}
.seran-prose tbody tr:last-child td{ border-bottom:0; }
.seran-prose td.price,
.seran-prose th.price-col{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.seran-prose td.price .unit{ font-size:var(--seran-fs-xs); color:var(--seran-ink-3); margin-left:2px; }

/* 좁은 화면에서 표가 페이지를 밀지 않게 한다. */
.seran-prose .seran-table-scroll,
.seran-prose figure.table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.seran-prose details{
  margin:.8em 0;
  padding:12px 16px;
  background:var(--seran-bg-soft);
  border:1px solid var(--seran-line);
  border-radius:var(--seran-radius);
}
.seran-prose summary{ cursor:pointer; font-weight:700; color:var(--seran-ink); }

@media (max-width: 782px){
  :root{
    --seran-fs-h1:1.75rem;
    --seran-fs-h2:1.4rem;
    --seran-fs-h3:1.2rem;
  }
  .seran-prose{ padding-inline:16px; }
  .seran-prose table:not([class]){ display:block; overflow-x:auto; }
}