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

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

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

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

/* -------------------------------------------------------------------------
   1. 웹폰트

   알파돔은 헤드라인·본문 모두 Noto Sans KR 계열을 쓴다(구 사이트 --hmt1-font 계측).
   별도 self-host 웹폰트를 두지 않고 시스템 한글 폰트로 폴백한다.
   콘솔 › 스타일 › 글꼴에서 역할 글꼴을 지정하면 --font-heading/--font-body 로 덮인다.

   ※ 상류 medisync01-skin 에 있던 tvN 즐거운이야기 @font-face 는 세란 전용이라 뺐다
     (CJ ENM 폰트 — 파일 재배포 제한이 있어 다른 병원 테마로 옮기지 않는다).
------------------------------------------------------------------------- */

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

:root{
  /* 브랜드 (clinic-skin 3토큰 시스템에 착지)

     값의 출처: 구 사이트 헤더 스니펫이 내보내던 CSS 변수를 그대로 계측했다
     (--hmt1-brand:#090A73 / --hmt1-text:#3A332F / --hmt1-muted:#8D827B /
      --hmt1-divider:#E8E2DE, 링크버튼 배경 #C2E8FC).
     토큰 **이름**은 상류 medisync01-skin 과 같게 두고 **값만** 알파돔으로 바꾼다 —
     49개 CSS 가 이 이름을 참조하므로 개명은 회귀 위험만 크다. */
  --brand-primary:#090A73;      /* 알파돔 딥 인디고 — 로고·CTA·활성 */
  --brand-secondary:#FFFFFF;
  --brand-accent:#C2E8FC;       /* 하늘 — 링크버튼·태그 */
  /* 알파돔 확장 (이름은 --medisync01-* 유지) */
  --medisync01-orange:#090A73; --medisync01-orange-soft:#3A3BA0; --medisync01-orange-grad:#1B1C8C;
  --medisync01-cta:#060750;  --medisync01-olive:#C2E8FC; --medisync01-olive-dark:#8FC9E8; --medisync01-leaf:#C9E7FA;
  --medisync01-bg-warm:#F4F8FC; --medisync01-bg-mega:#F7FAFD; --medisync01-bg-soft:#FAFAFA;
  --medisync01-ink:#3A332F; --medisync01-ink-2:#2F2F2F; --medisync01-ink-3:#8D827B; --medisync01-line:#E8E2DE;
  --medisync01-radius:12px; --medisync01-radius-lg:20px;
  /* 콘솔 › 스타일 › 글꼴에서 역할을 지정하면 그 값이, 지정이 없으면 세란 원본 스택이 온다.
     지면 CSS 는 이 두 토큰을 직접 참조하는 곳이 18군데라(제목 히어로·소개·비급여·홈 헤드라인 등),
     선언마다 var(--serif)/var(--sans) 로 바꾸는 대신 **토큰 정의 자체를 다리로** 만든다.
     --font-heading/--font-body 는 Clinic_Font_Roles 가 html:root 로 내보낸다(특이도 0,1,1). */
  --medisync01-font:var(--font-body, 'Noto Sans KR','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif);
  /* 알파돔 구 사이트는 헤드라인도 본문과 같은 Noto Sans KR 계열이었다
     (--hmt1-font 계측값). 세란의 tvN 즐거운이야기는 세란 전용이라 뺀다. */
  --medisync01-font-display:var(--font-heading, 'Noto Sans KR','Pretendard',-apple-system,sans-serif);
}

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

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

  /* 표면·그림자 */
  --medisync01-bg:var(--brand-secondary);
  --medisync01-shadow:0 2px 10px rgba(0,0,0,.06);
  --medisync01-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 값) */
  --medisync01-line-soft:#E8E2DE;                 /* 메가 컬럼 구분선 (구 --hmt1-divider) */
  --medisync01-hairline:rgba(0,0,0,.06);          /* 상단바 하단 실선 */
  --medisync01-veil-ink:rgba(9,10,115,.94);       /* 푸터 배경사진 위 오버레이 — 인디고 베일 */
  --medisync01-veil-line:rgba(255,255,255,.25);   /* 푸터 구분선 */
  --medisync01-veil-ink-2:rgba(255,255,255,.72);  /* 푸터 보조 텍스트 */
  --medisync01-orange-glow:rgba(9,10,115,.28);    /* 플로팅 아이콘 글로우 */
  --medisync01-line-warm:#DCEAF6;                 /* 카드/이미지 테두리 */
  --medisync01-bg-cream:#F7FAFD;                  /* 단계 카드 배경 (.exam-step) */

  /* 강조색 위 전경색 —
     세란의 강조색(올리브 #A9BC0D)은 어두워서 흰 글씨가 얹혔지만,
     알파돔의 강조색(하늘 #C2E8FC)은 밝아서 흰 글씨가 읽히지 않는다.
     강조색을 배경으로 쓰는 자리는 이 토큰으로 전경색을 받는다.
     (구 사이트도 하늘 버튼에 검정 글씨를 썼다 — background:#c2e8fc;color:#000) */
  --medisync01-on-accent:#12224A;
  --medisync01-on-brand:#FFFFFF;   /* 주색(인디고) 위에는 흰 글씨 */

  /* 그라데이션 짝 (버튼·마커) — 이름은 유지, 값은 인디고/하늘 */
  --medisync01-grad-orange:linear-gradient(135deg, var(--medisync01-orange) 0%, var(--medisync01-orange-grad) 100%);
  --medisync01-grad-olive:linear-gradient(135deg, var(--medisync01-olive) 0%, var(--medisync01-olive-dark) 100%);

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

  /* 리듬 */
  --medisync01-gap:16px;
  --medisync01-gap-lg:32px;
  --medisync01-section:clamp(48px, 7vw, 96px);
  /* 데스크탑 최대폭 1200px — 그 이상으로 벌리면 지면이 성기게 보인다.
     슬라이더·히어로처럼 의도적으로 화면을 꽉 채우는 블록은 이 토큰을 쓰지 않고
     .is-fullbleed 로 풀블리드 처리한다(아래 §5). */
  --medisync01-content-width:1200px;
  --medisync01-prose-width:1200px;
  --medisync01-text-width:820px;    /* 산문 단락만 좁히고 싶을 때 (가독 열폭) */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* -------------------------------------------------------------------------
   5. 폭 유틸리티 — 최대폭 1200px 규칙과 그 예외

   기본은 컨테이너 1200px 상한이다. 다만 슬라이더·히어로처럼 화면을 꽉 채워야
   인상이 사는 블록이 있어서, 문서 흐름 안에서 뷰포트 폭까지 넓히는 탈출구를 둔다.
   본문 안(.medisync01-prose)에서도 쓸 수 있게 margin 음수 방식으로 구현한다 —
   position:relative + vw 방식은 세로 스크롤바가 있을 때 가로 스크롤을 만든다.
------------------------------------------------------------------------- */

.is-fullbleed{
  width:100vw;
  max-width:100vw;
  margin-inline:calc(50% - 50vw);
}

/* 스크롤바 폭까지 감안해야 하는 브라우저 대비 — 가로 스크롤 방지 */
@supports (width: 100dvw){
  .is-fullbleed{ width:100dvw; max-width:100dvw; }
}

/* 풀블리드 안쪽 내용은 다시 1200px 로 모으고 싶을 때 */
.is-fullbleed > .inner{
  max-width:var(--medisync01-content-width);
  margin-inline:auto;
  padding-inline:20px;
}

/* 산문 단락만 좁히고 싶을 때 (문서형 페이지에서 텍스트 열폭 확보) */
.medisync01-prose .is-narrow{
  max-width:var(--medisync01-text-width);
  margin-inline:auto;
}