/* 조각 · 히어로 01 — 자립 CSS (theme → tokens → base → section → 조각 조정) */

/* theme: onflou */
/* onflou — 1층 원시 토큰. 값은 원본 그대로 (source.json). 이름만 FFL(LANGUAGE.md). */
:root {
  /* 색 램프: 원본 gray → neutral */
  --color-neutral-50: #fafafa; --color-neutral-100: #f5f5f5; --color-neutral-200: #eaeaea; --color-neutral-300: #d6d6d6; --color-neutral-400: #b5b5b5;
  --color-neutral-500: #8a8a8a; --color-neutral-600: #666666; --color-neutral-700: #444444; --color-neutral-800: #222222; --color-neutral-900: #111111;
  --color-primary-50: #e6fbfa; --color-primary-100: #ccf7f5; --color-primary-200: #99efeb; --color-primary-300: #66e7e1; --color-primary-400: #33dfd7;
  --color-primary-500: #00cfc5; --color-primary-600: #00b8af; --color-primary-700: #009e97; --color-primary-800: #00847f; --color-primary-900: #005a57;
  --color-secondary-50: #f3f7ff; --color-secondary-100: #e7eeff; --color-secondary-200: #cddbff; --color-secondary-300: #afc4ff; --color-secondary-400: #7399ff;
  --color-secondary-500: #3f6dff; --color-secondary-600: #315bea; --color-secondary-700: #2448c7; --color-secondary-800: #19369a; --color-secondary-900: #102463;
  --color-white: #ffffff; --color-black: #000000; --color-system-success: #388e3c;

  /* 폰트 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-weight-normal: 400; --font-weight-semibold: 600;
  --tracking-base: -0.24px;

  /* 타입 스케일 (크기 / 행간 / 굵기) */
  --text-display-2xl: 7.5rem;  --text-display-2xl--line-height: 1;   --text-display-2xl--font-weight: 600;  /* 원본 text-[120px] leading-[100%] */
  --text-display-xl: 4.5rem;   --text-display-xl--line-height: 1.2;  --text-display-xl--font-weight: 600;
  --text-display-lg: 4rem;     --text-display-lg--line-height: 1.2;  --text-display-lg--font-weight: 600;
  --text-display-md: 3rem;     --text-display-md--line-height: 1.2;  --text-display-md--font-weight: 600;
  --text-display-sm: 2.25rem;  --text-display-sm--line-height: 1.2;  --text-display-sm--font-weight: 600;
  --text-headline-lg: 2rem;    --text-headline-lg--line-height: 1.4;
  --text-headline-md: 1.75rem; --text-headline-md--line-height: 1.4;
  --text-headline-sm: 1.5rem;  --text-headline-sm--line-height: 1.4;
  --text-headline-xs: 1.25rem; --text-headline-xs--line-height: 1.4;
  --text-body-lg: 1.125rem;    --text-body-lg--line-height: 1.6;
  --text-body-md: 1rem;        --text-body-md--line-height: 1.6;
  --text-body-sm: 0.875rem;    --text-body-sm--line-height: 1.6;
  --text-body-xs: 0.75rem;     --text-body-xs--line-height: 1.6;

  /* 간격 */
  --spacing-2xs: .25rem; --spacing-xs: .5rem; --spacing-sm: .75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem;
  --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem; --spacing-4xl: 5rem; --spacing-5xl: 7.5rem;

  /* 라운드 */
  --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem;
  --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --radius-full: 9999px;

  /* 모션 */
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-ui: cubic-bezier(.4, 0, .2, 1);
  --duration-ui: .12s; --duration-base: .35s; --duration-media: .4s; --duration-reveal: 1s;

  /* 레이아웃 */
  --container-max: 1920px; --gutter: 40px; --grid-gap: var(--spacing-lg); --header-h: 110px;
}
@media (max-width: 767px) { :root { --gutter: 20px; --header-h: 72px; } }

/* tokens */
/* onflou — 2층 의미 토큰 (CONTRACT.md). 1층(theme.css)만 가리킨다. 추정값은 표시. */

:root {
  /* 색 */
  --c-bg: var(--color-neutral-50); --c-surface: var(--color-neutral-100); --c-surface-2: var(--color-neutral-200);
  --c-ink: var(--color-neutral-900); --c-ink-2: var(--color-neutral-700); --c-ink-3: var(--color-neutral-500);
  --c-line: var(--color-neutral-300); --c-line-strong: var(--color-neutral-400);
  --c-accent: var(--color-primary-400); --c-on-accent: var(--color-neutral-900);
  --c-inverse: var(--color-neutral-900); --c-on-inverse: var(--color-white); --c-on-inverse-2: var(--color-neutral-400);

  /* 타이포 */
  --f-display: var(--font-sans); --f-body: var(--font-sans);
  --t-display: clamp(4rem, 8.4vw, var(--text-display-2xl)); /* 모바일 64 실측 */
  --t-h1: clamp(2.25rem, 5vw, var(--text-display-xl));
  --t-h2: var(--text-headline-lg); --t-h3: var(--text-headline-md);
  --t-lead: var(--text-headline-sm); --t-body: var(--text-body-lg); --t-small: var(--text-body-sm); --t-caption: var(--text-body-xs);
  --w-display: var(--font-weight-semibold); --w-heading: var(--font-weight-semibold); --w-body: var(--font-weight-normal); --w-strong: var(--font-weight-semibold);
  --lh-display: var(--text-display-2xl--line-height); --lh-heading: var(--text-display-xl--line-height); --lh-body: var(--text-body-lg--line-height);
  --ls-display: var(--tracking-base); --ls-heading: var(--tracking-base); --ls-body: var(--tracking-base); --ls-caps: -0.03em; --tt-eyebrow: uppercase;

  /* 공간 */
  --container: calc(var(--container-max) - var(--gutter) * 2); --container-wide: var(--container);
  --sp-section: var(--spacing-5xl); --sp-block: var(--spacing-3xl); --sp-stack: var(--spacing-md); --gap: var(--grid-gap);

  /* 형태 */
  --r-btn: var(--radius-full); --r-card: 0px; --r-media: 0px; --r-chip: var(--radius-full); --line-w: 1px; --shadow-card: none;
  --btn-h: 64px; --btn-px: 35px; --btn-fs: var(--text-headline-xs); --btn-fw: var(--font-weight-normal); --media-ratio: 1 / 1;

  /* 모션 */
  --ease-out: cubic-bezier(0, 0, .2, 1); --ease-ui: cubic-bezier(.4, 0, .2, 1);
  --d-ui: var(--duration-ui); --d-reveal: var(--duration-reveal); --d-media: var(--duration-media);
  --reveal-y: 40px; /* 추정 */ --stagger: .1s; /* 추정 */ --hover-lift: 0px; --hover-zoom: 1.05; /* 추정 */
}

/* base */
/* 공용 기반. 토큰만 참조한다. 색 코드·px 고정값을 여기 쓰지 않는다. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-ink);
  font-family: var(--f-body); font-size: var(--t-body); font-weight: var(--w-body);
  line-height: var(--lh-body); letter-spacing: var(--ls-body);
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--c-ink); color: var(--c-bg); }

/* 레이아웃 */
.ff-container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.ff-container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.ff-section { padding-block: var(--sp-section); }
.ff-section--surface { background: var(--c-surface); }
.ff-section--inverse { background: var(--c-inverse); color: var(--c-on-inverse); --c-ink: var(--c-on-inverse); --c-ink-2: var(--c-on-inverse-2); --c-ink-3: var(--c-on-inverse-2); --c-line: color-mix(in srgb, var(--c-on-inverse) 18%, transparent); --c-line-strong: color-mix(in srgb, var(--c-on-inverse) 45%, transparent); }
.ff-stack > * + * { margin-top: var(--sp-stack); }

/* 타이포 */
.ff-eyebrow { font-size: var(--t-caption); font-weight: var(--w-strong); letter-spacing: var(--ls-caps); text-transform: var(--tt-eyebrow); color: var(--c-ink-2); }
.ff-display { font-family: var(--f-display); font-size: var(--t-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.ff-h1 { font-family: var(--f-display); font-size: var(--t-h1); font-weight: var(--w-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.ff-h2 { font-family: var(--f-display); font-size: var(--t-h2); font-weight: var(--w-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.ff-h3 { font-family: var(--f-display); font-size: var(--t-h3); font-weight: var(--w-strong); line-height: 1.4; letter-spacing: var(--ls-heading); }
.ff-lead { font-size: var(--t-lead); color: var(--c-ink-2); line-height: var(--lh-body); }
.ff-small { font-size: var(--t-small); color: var(--c-ink-2); }
.ff-caption { font-size: var(--t-caption); color: var(--c-ink-3); }
.ff-accent { color: var(--c-accent); }

/* 버튼 */
.ff-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: var(--btn-h); padding-inline: var(--btn-px); border-radius: var(--r-btn);
  font-size: var(--btn-fs); font-weight: var(--btn-fw); letter-spacing: var(--ls-body); white-space: nowrap;
  border: var(--line-w) solid transparent; background: none; cursor: pointer;
  transition: background-color var(--d-ui) var(--ease-ui), color var(--d-ui) var(--ease-ui), border-color var(--d-ui) var(--ease-ui), transform var(--d-ui) var(--ease-ui);
}
.ff-btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.ff-btn--outline { border-color: var(--c-line-strong); color: var(--c-ink); }
.ff-btn--ghost { padding-inline: 0; height: auto; color: var(--c-ink); }
.ff-btn--sm { height: calc(var(--btn-h) * .6); padding-inline: calc(var(--btn-px) * .55); font-size: var(--t-caption); }
.ff-btn--lg { height: calc(var(--btn-h) * 1.25); padding-inline: calc(var(--btn-px) * 1.3); font-size: var(--t-lead); }

/* 선 화살표 링크: 긴 가로선 + 사선 머리 */
.ff-arrow { display: inline-block; position: relative; width: clamp(64px, 8vw, 100px); height: 20px; color: var(--c-ink); flex: none; }
.ff-arrow::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--line-w); background: currentColor; transition: transform var(--d-ui) var(--ease-ui); transform-origin: left; }
.ff-arrow::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: var(--line-w); background: currentColor; transform: rotate(38deg); transform-origin: right; }

/* 칩 */
.ff-chip { display: inline-flex; align-items: center; height: 30px; padding-inline: 12px; border-radius: var(--r-chip); background: var(--c-surface-2); font-size: var(--t-caption); font-weight: var(--w-strong); color: var(--c-ink-2); }

/* 헤더 */
.ff-nav { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: color-mix(in srgb, var(--c-bg) 86%, transparent); backdrop-filter: blur(14px); }
.ff-nav .ff-container { display: flex; align-items: center; gap: 28px; }
.ff-nav__logo { font-family: var(--f-display); font-weight: var(--w-display); letter-spacing: var(--ls-heading); font-size: 18px; }
.ff-nav__menu { display: flex; gap: 26px; margin-left: auto; font-size: var(--t-small); font-weight: var(--w-strong); }
.ff-nav__menu a { transition: color var(--d-ui) var(--ease-ui); }

/* 미디어 · 카드 */
.ff-media { position: relative; overflow: hidden; border-radius: var(--r-media); aspect-ratio: var(--media-ratio); background: var(--c-surface-2); }
.ff-media > * { width: 100%; height: 100%; object-fit: cover; transition: transform calc(var(--d-media) * .8) var(--ease-out); }
.ff-card { display: flex; flex-direction: column; gap: 16px; border-radius: var(--r-card); box-shadow: var(--shadow-card); transition: transform var(--d-ui) var(--ease-ui); }

/* 구분선 리스트 행 */
.ff-rule { border: 0; border-top: var(--line-w) solid var(--c-line-strong); margin: 0; }
.ff-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap); padding-block: calc(var(--gap) * .8); border-top: var(--line-w) solid var(--c-line); }
.ff-row__body { display: flex; flex-direction: column; gap: 8px; }
.ff-row__body .ff-btn { margin-top: auto; align-self: flex-end; }

/* 숫자 */
.ff-stat__num { font-family: var(--f-display); font-size: var(--t-h1); font-weight: var(--w-display); line-height: 1; letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; }
.ff-stat__label { margin-top: 10px; font-size: var(--t-small); color: var(--c-ink-2); }

/* 입력 */
.ff-input { width: 100%; height: var(--btn-h); padding-inline: 18px; border-radius: min(var(--r-btn), 14px); border: var(--line-w) solid var(--c-line-strong); background: var(--c-bg); font-size: var(--t-body); transition: border-color var(--d-ui) var(--ease-ui); }
.ff-input:focus { outline: none; border-color: var(--c-ink); }

/* 알약 링크 모음 */
.ff-pillnav { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-pillnav a { display: inline-flex; align-items: center; height: calc(var(--btn-h) * .82); padding-inline: 20px; border-radius: 999px; border: var(--line-w) solid var(--c-line-strong); font-size: var(--t-lead); transition: background-color var(--d-ui) var(--ease-ui), color var(--d-ui) var(--ease-ui); }

/* 등장 모션 (fx 부품이 붙기 전 기본값) */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
  [data-reveal].is-in { opacity: 1; transform: none; }
}

/* 이미지 자리표시: 사진이 없을 때 스타일 색으로 만든 면 */
.k-ph { display: block; width: 100%; height: 100%; background: radial-gradient(90% 70% at 25% 20%, color-mix(in srgb, var(--c-bg) 55%, transparent), transparent 60%), radial-gradient(70% 60% at 85% 90%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 65%), linear-gradient(150deg, var(--c-surface-2), color-mix(in srgb, var(--c-ink) 45%, var(--c-surface-2))); }
.ff-media > img, .ff-media > video { width: 100%; height: 100%; object-fit: cover; }
.k-circle { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: var(--line-w) solid var(--c-line-strong); color: var(--c-ink); background: none; cursor: pointer; flex: none; transition: background-color var(--d-ui) var(--ease-ui), color var(--d-ui) var(--ease-ui), border-color var(--d-ui) var(--ease-ui); }
.k-circle svg { width: 18px; height: 18px; }
/* 어두운 영역(히어로·사진 카드)의 자리표시는 어둡게: 흰 글자 대비 확보 */
.k-ph--dark, .k-hero-fb .k-ph, .k-bento__item--photo .k-ph { background: radial-gradient(70% 60% at 70% 30%, color-mix(in srgb, var(--c-accent) 35%, transparent), transparent 70%), linear-gradient(160deg, #3a3a3e, #121214); }

/* section: hero/split */
/* hero/split — 계약 토큰만 사용 */
.k-hero-split { padding: calc(var(--sp-section) * .7) 0 var(--sp-section); }
.k-hero-split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: calc(var(--gap) * 2.5); align-items: center; }
.k-hero-split__text { display: grid; gap: calc(var(--sp-stack) * 1.2); align-content: center; }
.k-hero-split__title { white-space: pre-line; font-size: min(var(--t-display), 5.4vw); }
.k-hero-split__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.k-hero-split__media { --media-ratio: 4 / 4.4; border-radius: var(--r-media); }
@media (max-width: 860px) { .k-hero-split__grid { grid-template-columns: 1fr; } .k-hero-split__title { font-size: var(--t-display); } }

/* 로고 "도담": 여기어때 잘난체 (무료 공개 폰트, 눈누 CDN) */
@font-face { font-family: 'yg-jalnan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }

/* 도담소아청소년과 · 옅은 틸 테마 (역할 변수) */
:root { --bg: #ffffff; --ink: #12302e; --on-ink: #ffffff; --ink-2: #3c5553; --ink-3: #5e7573; --ink-4: #8aa09e; --ph: #dcefec; --ph-2: #eef8f6; --ph-text: #6fa7a0; --line: #e1ecea; --line-2: #c9dcd9; --accent: #1f8f84; --on-accent: #ffffff; --dark: #0f3a37; --on-dark: #ffffff; --on-dark-2: #8fb8b3; --on-dark-3: #6f9894; --on-dark-soft: #d4e8e5; --dark-line: #1f4d49; }
body { background: var(--bg); color: var(--ink); }
.nav__logo { color: var(--ink); }
.nav__logo b { color: var(--accent); font-weight: 800; }
.nav .nav__logo b, .mobile-menu .nav__logo b { color: #747b7a; font-size: 14px; font-weight: 700; }

/* 페이지 공통 높이: 내비 자리 96 + 카드 높이 */
:root { --nav-h: 96px; --nav-space: 120px; --card-h: clamp(520px, calc(100vh - 144px), 960px); } /* 내비 96 + 구분선 아래 여유 24 */
@media (max-width: 767px) { :root { --nav-h: 72px; --nav-space: 88px; --card-h: clamp(520px, 145vw, 640px); } }

/* 페이지 01 · 내비바: 내용 폭·가장자리를 히어로 카드와 같게 (블리드 안) */
.nav__inner { position: relative; width: 100%; max-width: 1760px; height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 40px; }
.nav__inner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); } /* 얇은 구분선 */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); display: flex; align-items: center; padding: 0 var(--gutter); background: var(--bg); } /* 기본 스타일: 고정 높이 · 흰 단색 · 구분선 */
.nav__logo { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.nav__menu { display: flex; gap: 36px; margin-left: auto; }
.nav__menu a { font-size: 15px; font-weight: 500; color: var(--ink); transition: opacity .2s var(--ease-ui); }
.nav__btn { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 600; transition: opacity .2s var(--ease-ui); }
.nav__burger { display: none; width: 40px; height: 40px; border: 0; background: none; padding: 0; margin-left: auto; cursor: pointer; }
.nav__burger i { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px auto; border-radius: 2px; }
@media (max-width: 767px) { .nav__menu, .nav__btn { display: none; } .nav__burger { display: block; } }

/* 조각 · 히어로 01: 중앙 둥근 네모 + 네모 안 왼쪽 텍스트 */
body { background: var(--bg); }
.h1 { padding: var(--nav-space) var(--gutter) 0; } /* 내비 자리 */
.h1__card { position: relative; max-width: 1760px; margin: 0 auto; height: var(--card-h); border-radius: 56px; background: var(--ph); overflow: hidden; display: flex; align-items: flex-end; }
.h1__ph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--ph-text); font-size: 15px; font-weight: 500; letter-spacing: .08em; }
.h1__text { position: relative; max-width: 1760px; margin: 0 auto; padding: 24px 0 32px; min-width: 0; display: grid; gap: 20px; }
.h1__title { font-family: var(--f-display); font-size: clamp(34px, 4.8vw, 76px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; color: var(--ink); }
.h1__lead { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 32ch; }
.h1__address { display: flex; align-items: flex-start; gap: 6px; margin-top: -8px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.h1__address svg { width: 17px; height: 19px; flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.h1__address-content { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.h1__address-label { color: var(--ink-3); }
.h1__map-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .h1__card { border-radius: 32px; } .h1__text { padding: 0 24px 36px; } .h1__title { font-size: clamp(28px, 7.5vw, 40px); } .h1__ph { top: 35%; } }

/* 섹션 2: 왼쪽 큰 텍스트 + 아래 오른쪽 중간 텍스트. 글 시작선 = 히어로 제목 시작선 */
.s2 { padding: 0 var(--gutter); } /* 섹션 높이 = 히어로(내비 자리 + 카드)와 같게 */
.s2__inner { max-width: 1760px; margin: 0 auto; padding: clamp(120px, 12vw, 200px) clamp(28px, 5vw, 96px) clamp(40px, 6vw, 96px); box-sizing: border-box; height: calc(var(--nav-space) + var(--card-h)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; row-gap: clamp(48px, 6vw, 96px); }
.s2__lead { grid-column: 1 / span 6; display: grid; gap: clamp(20px, 2vw, 32px); }
.s2__small { font-size: 15px; line-height: 1.7; color: var(--ink-3); max-width: 34ch; }
.s2__big { font-family: var(--f-display); font-size: clamp(36px, 4.6vw, 80px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; white-space: pre-line; color: var(--ink); }
.s2__mid { grid-column: 9 / span 4; grid-row: 2; align-self: end; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.6; color: var(--ink-2); }
#vaccine .s2__mid { font-weight: 700; }
@media (max-width: 767px) { .s2__lead, .s2__mid { grid-column: 1 / -1; } .s2__inner { height: auto; grid-template-rows: auto auto; row-gap: 40px; padding: 96px 8px 72px; } } /* 모바일: 높이 고정 해제, 간격 축소 */

/* 섹션 3: 벤토 그리드 (회색 단색 타일 + 검정 타일 하나) */
.s3 { padding: clamp(80px, 8vw, 140px) var(--gutter) clamp(120px, 12vw, 200px); }
.s3__inner { max-width: 1760px; margin: 0 auto; }
.s3__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0; margin-bottom: clamp(32px, 4vw, 56px); } /* 좌우 끝 = 벤토 타일 가장자리 */
.s3__titles { display: grid; gap: 12px; min-width: 0; }
.s3__sub { font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; color: var(--accent); }
.s3__title { font-size: clamp(28px, 3vw, 48px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.s3__desc { font-size: clamp(16px, 1.25vw, 19px); font-weight: 600; line-height: 1.55; color: var(--ink-2); max-width: 21ch; text-align: right; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(280px, 26vw, 460px)); gap: 16px; }
.bento__tile { position: relative; overflow: hidden; border-radius: 40px; background: var(--ph); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 2.4vw, 40px); }
.bento__tile--a { grid-column: 1 / span 8; grid-row: 1; color: #fff; }
.bento__tile--b { grid-column: 9 / span 4; grid-row: 1; justify-content: flex-end; }
.bento__tile--c { grid-column: 1 / span 4; grid-row: 2; background: var(--ph-2); }
.bento__tile--d { grid-column: 5 / span 8; grid-row: 2; }
.bento__tile--dark { background: var(--dark); color: var(--on-dark); }
.bento__tile .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ph-text); font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.bento__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bento__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bento__tile--a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 24, 23, .55), transparent 70%); }
.bento__cap { position: relative; display: grid; gap: 6px; }
.bento__tile--a .bento__cap { z-index: 1; }
.bento__tile--a .bento__p { color: rgba(255, 255, 255, .78); }
.bento__h { font-family: var(--font-sans); font-size: clamp(18px, 1.5vw, 24px); font-weight: 800; line-height: 1.4; letter-spacing: -0.01em; }
.bento__p, .bento__hours { font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0; }
.bento__p { color: var(--ink-3); }
.bento__tile--dark .bento__p { color: var(--on-dark-2); }
.bento__num { font-size: clamp(48px, 5.6vw, 96px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.bento__num small { font-size: .5em; margin-left: .05em; }
.bento__hours { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--on-dark-2); }
.bento__hours div { display: flex; flex-wrap: wrap; gap: 0 4px; }
.bento__hours dt { font-weight: inherit; }
.bento__hours dd { margin: 0; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 380px 240px 240px; grid-auto-rows: 240px; }
  .bento__tile--a, .bento__tile--d { grid-column: 1 / -1; grid-row: auto; } .bento__tile--b, .bento__tile--c { grid-column: span 1; grid-row: auto; }
  .bento__tile { border-radius: 28px; } .s3__head { flex-direction: column; align-items: flex-start; padding: 0; } .s3__desc { text-align: left; }
}

/* 섹션 5: 캐러셀. 머리말은 섹션 3과 같음. 트랙은 왼쪽 시작선 = 블리드 가장자리, 오른쪽은 화면 끝까지 흘러감 */
.s5 { padding: clamp(160px, 15vw, 260px) 0 clamp(180px, 16vw, 280px); }
.s5__inner { max-width: 1760px; margin: 0 auto; padding: 0 var(--gutter); box-sizing: content-box; }
.s5__ctrl { display: flex; gap: 10px; }
.car__btn { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.car__btn svg { width: 20px; height: 20px; }
.car__track { --edge: max(var(--gutter), calc((100vw - 1760px) / 2)); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 28vw, 480px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--edge); scroll-padding: 0 var(--edge); scrollbar-width: none; }
.car__track::-webkit-scrollbar { display: none; }
.car__card { scroll-snap-align: start; display: grid; gap: 10px; align-content: start; color: var(--ink); }
.car__img { position: relative; aspect-ratio: 4 / 5; border-radius: 40px; background: var(--ph); overflow: hidden; margin-bottom: 10px; }
.car__photo { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .45s var(--ease-ui); }
.car__card.is-active .car__photo { filter: grayscale(0); }
.car__img .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ph-text); font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.car__h { font-size: clamp(18px, 1.5vw, 24px); font-weight: 700; letter-spacing: -0.01em; }
.car__p { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
@media (max-width: 767px) { .s5__ctrl { display: none; } .car__track { grid-auto-columns: 78vw; } .car__img { border-radius: 28px; } }

/* 섹션 4: 섹션 2 구조 + 텍스트 둘 다 왼쪽, 오른쪽에 섹션 높이 이미지 */
.s4 .s2__lead { grid-column: 1 / span 5; }
.s4 .s2__mid { grid-column: 1 / span 5; grid-row: 2; align-self: end; }
.s4__media { position: relative; grid-column: 7 / -1; grid-row: 1 / span 2; border-radius: 40px; background: var(--ph); overflow: hidden; }
.s4__media .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ph-text); font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.s4 .s2__inner { padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(40px, 4vw, 64px); }
.s4 .s2__lead { padding-top: 0; align-self: start; margin-top: -0.12em; } /* 큰 텍스트 윗선 = 이미지 윗선 */
@media (max-width: 767px) { .s4 .s2__lead, .s4 .s2__mid { grid-column: 1 / -1; } .s4__media { grid-column: 1 / -1; grid-row: auto; min-height: 60vw; border-radius: 28px; } .s4 .s2__inner { height: auto; } }

/* 섹션 6: 벨트라인 — 화면 끝에서 끝까지, 각진 사각 (둥근 요소들 사이를 끊어 줌) */
.belt { position: relative; isolation: isolate; width: 100%; min-height: 360px; display: grid; align-items: center; padding: 64px var(--gutter); overflow: hidden; background: #102e2b; color: #fff; }
.belt__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.belt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 30, 27, .94), rgba(8, 30, 27, .78)); }
.belt__inner { width: 100%; max-width: 1760px; min-width: 0; margin: 0 auto; }
.belt__label { margin-bottom: 20px; color: #a9cec6; font-size: 11px; font-weight: 600; letter-spacing: .16em; }
.belt__title { font-size: clamp(26px, 3.2vw, 48px); font-weight: 700; line-height: 1.35; letter-spacing: -.025em; }
.belt__text { margin-top: 18px; color: #c3d6d1; font-size: 15px; line-height: 1.7; }
@media (max-width: 767px) { .belt { min-height: 280px; padding-block: 44px; } .belt__text { font-size: 13px; } }

/* 섹션 7: 소식 게시판 (머리말은 섹션 3과 같음) */
.news { padding: clamp(160px, 15vw, 260px) var(--gutter) clamp(160px, 15vw, 260px); }
.news__inner { max-width: 1760px; margin: 0 auto; }
.news__all { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 15px; font-weight: 600; color: var(--ink); transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui), border-color .2s var(--ease-ui); }
.news__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); border-top: 1px solid var(--ink); padding-top: clamp(32px, 3vw, 48px); }
.news__feature { grid-column: 1 / span 6; display: grid; gap: 20px; align-content: start; color: var(--ink); }
.news__img { position: relative; aspect-ratio: 16 / 10; border-radius: 40px; background: var(--ph); overflow: hidden; transition: transform .5s var(--ease-out); }
.news__cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: clamp(24px, 3vw, 48px); border: 1px solid #d9dddd; background: #fff; }
.news__cover .logo__mark { font-size: clamp(44px, 5.2vw, 72px); padding-right: .3em; }
.news__cover .logo__drop { width: .28em; height: .35em; top: -.2em; right: -.025em; }
.news__cover-label { font-size: clamp(36px, 4.2vw, 58px); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.news__side { grid-column: 7 / span 6; display: grid; align-content: start; }
.news__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; padding: clamp(22px, 2vw, 32px) 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.news__item:first-child { padding-top: 0; }
.news__thumb { position: relative; aspect-ratio: 1; border-radius: 24px; background: var(--ph); overflow: hidden; }
.news__thumb .ph, .news__img .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ph-text); font-size: 13px; font-weight: 500; letter-spacing: .08em; }
.news__meta { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.news__side .news__meta { width: 100%; }
.news__tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.news__ft { font-size: clamp(22px, 2vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; white-space: pre-line; }
.news__t { font-size: clamp(16px, 1.25vw, 19px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: opacity .2s var(--ease-ui); }
.news__d { max-width: 25em; font-size: 15px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 25자 안팎에서 … */
.news__date { font-size: 13px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .news__feature, .news__side { grid-column: 1 / -1; } .news__img { border-radius: 28px; } .news__all { display: none; } }

/* 섹션 7a: CTA + 지도 (게시판 위) */
.visit { padding: 0 var(--gutter) clamp(160px, 15vw, 260px); } /* 게시판 아래 · 푸터 바로 위 */
.visit__inner { max-width: 1760px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); align-items: stretch; }
.visit__text { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: clamp(32px, 3vw, 48px); padding: clamp(8px, 1vw, 16px) 0; }
.visit__title { font-size: clamp(32px, 3.6vw, 60px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; white-space: pre-line; color: var(--ink); }
.visit__info { margin: 0; display: grid; border-top: 1px solid var(--ink); }
.visit__info div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.visit__info dt { font-size: 14px; font-weight: 700; color: var(--ink); }
.visit__info dd { margin: 0; font-size: 15px; color: var(--ink-2); }
.visit__actions { display: flex; gap: 10px; margin-top: auto; }
.visit__btn { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border: 0; cursor: pointer; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600; transition: opacity .2s var(--ease-ui); }
.visit__map { grid-column: 7 / -1; position: relative; min-height: clamp(420px, 40vw, 640px); border-radius: 40px; background: var(--ph); overflow: hidden; }
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .visit__text, .visit__map { grid-column: 1 / -1; } .visit__map { min-height: 70vw; border-radius: 28px; } }

/* 섹션 8: 푸터 — 기본 스타일 */
.foot { padding: 0 var(--gutter); background: var(--dark); color: var(--on-dark); } /* 다크 푸터 */
.foot .nav__logo { color: var(--on-dark); }
.foot__inner { max-width: 1760px; margin: 0 auto; padding: clamp(64px, 6vw, 96px) 0 40px; }
.foot__top { display: flex; justify-content: space-between; gap: 48px; padding-bottom: clamp(48px, 5vw, 80px); border-bottom: 1px solid var(--dark-line); }
.foot__brand { display: grid; gap: 20px; align-content: start; max-width: 420px; }
.foot__intro { font-size: 16px; line-height: 1.6; color: var(--on-dark-soft); white-space: pre-line; }
.foot__copy { font-size: 13px; color: var(--on-dark-3); }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(120px, auto)); gap: clamp(32px, 4vw, 80px); }
.foot__cols div { display: grid; gap: 12px; align-content: start; }
.foot__h { font-size: 15px; font-weight: 700; color: var(--on-dark); margin-bottom: 4px; }
.foot__cols a { font-size: 14px; color: var(--on-dark-2); transition: color .2s var(--ease-ui); }
.foot__bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 28px; flex-wrap: wrap; }
.foot__info { font-size: 13px; line-height: 1.8; color: var(--on-dark-3); margin-top: 8px; }
.foot__legal { display: flex; gap: 20px; font-size: 13px; color: var(--on-dark-3); }
.foot__legal a { color: var(--on-dark-soft); font-weight: 600; }
@media (max-width: 767px) { .foot__top { flex-direction: column; } .foot__cols { grid-template-columns: 1fr 1fr; } }

/* 섹션 4 (변경): 히어로 높이 · 세로 가운데 굵은 텍스트 4줄 */
.s4b { padding: 0 var(--gutter); }
.s4b__inner { max-width: 1760px; margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; padding: clamp(96px, 10vw, 160px) clamp(28px, 5vw, 96px); }
.s4b__text { display: grid; gap: 1em; font-size: clamp(30px, 3.8vw, 64px); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); white-space: normal; }
@media (max-width: 767px) { .s4b__inner { padding: 96px 8px; } .s4b__text { white-space: normal; } }

/* 소아과 페이지 조정 */
.ph { color: var(--ph-text) !important; letter-spacing: .02em !important; font-size: 15px !important; font-weight: 600 !important; }
.h1__card { background: linear-gradient(180deg, #788585 0%, #a6b0b0 40%, #98a3a3 70%, #788585 100%); }
.h1__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(28, 42, 42, .2) 70%, rgba(28, 42, 42, .8) 100%); pointer-events: none; }
.bento__tile--dark .bento__num small { font-size: .38em; margin-left: .12em; }
.foot__note { font-size: 12px; color: var(--on-dark-3); margin-top: 6px; }
.foot .nav__logo b { color: #7fd1c6; } /* 다크 푸터에서 로고 대비 */

/* 로고: 잘난체 "도담" + 오른쪽 위 물방울 */
.nav__logo { display: inline-flex; align-items: baseline; gap: 6px; }
.logo__mark { position: relative; font-family: 'yg-jalnan', 'Pretendard Variable', sans-serif; font-weight: normal; font-size: 24px; letter-spacing: 0; color: var(--ink); padding-right: 12px; line-height: 1; }
.logo__drop { position: absolute; right: -2px; top: -9px; width: 11px; height: 14px; color: var(--accent); transform: rotate(14deg); }
.nav .logo__mark, .mobile-menu .logo__mark { color: var(--accent); }
.foot .logo__mark { color: #ffffff; }
.foot .logo__drop { color: #7fd1c6; }
.bento__watermark.logo__mark { position: absolute; top: clamp(28px, 2.8vw, 44px); right: clamp(24px, 2.4vw, 40px); color: #fff; opacity: .16; font-size: clamp(36px, 3.4vw, 54px); padding-right: .3em; pointer-events: none; user-select: none; }
.bento__watermark .logo__drop { color: #fff; width: .28em; height: .35em; top: -.2em; right: -.025em; }

/* 히어로: 엔진에서 배경을 제거한 원장 사진 */
.h1__doctor { position: absolute; right: 0; bottom: 0; height: 100%; width: 60%; max-width: none; object-fit: cover; object-position: center top; pointer-events: none; }
.h1__inner { position: relative; display: grid; max-width: 1760px; margin: 0 auto; min-width: 0; }
.h1__inner > .h1__card { grid-area: 1 / 1; width: 100%; }
.h1__inner > .h1__text { grid-area: 1 / 1; align-self: end; width: 52%; max-width: 720px; margin: 0; padding: 32px clamp(28px, 5vw, 96px) clamp(40px, 6vw, 96px); }
.h1__text { z-index: 1; }
.h1__info { display: grid; gap: 14px; min-width: 0; }
.h1__info .h1__lead { max-width: none; }
.h1__info { --info-strong: var(--ink); --info-muted: var(--ink-3); }
.h1__info .h1__lead { font-weight: 400; color: var(--info-muted); }
.h1__schedule-item { display: inline-block; }
.h1__lead strong { color: var(--info-strong); font-weight: 700; }
.h1__info-separator { opacity: .5; }
.h1__holiday { font-size: .9em; }
@media (min-width: 768px) {
  .h1__inner > .h1__text { position: static; }
  .h1__info { grid-area: 1 / 1; align-self: end; z-index: 2; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: 16px clamp(28px, 4vw, 64px) 24px; gap: 8px 24px; }
  .h1__inner > .h1__text { padding-bottom: clamp(112px, 9vw, 144px); }
  .h1__info { --info-strong: #fff; --info-muted: rgba(255, 255, 255, .72); }
  .h1__info .h1__lead { font-size: 13px; line-height: 1.5; }
  .h1__info .h1__address { margin-top: 0; font-size: 12px; font-weight: 400; color: var(--info-muted); }
  .h1__info .h1__address-label, .h1__info .h1__address svg { color: var(--info-muted); opacity: .85; }
  .h1__info .h1__address svg { width: 14px; height: 16px; }
}
.h1__dr { margin-top: clamp(8px, 1vw, 16px); padding-top: 22px; border-top: 1px solid var(--line-2); max-width: 420px; display: grid; gap: 10px; }
.h1__dr-name { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.h1__dr-name span { font-size: 15px; font-weight: 600; color: var(--accent); margin-left: 4px; }
.h1__dr-career { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; color: var(--ink-3); }
.h1__dr-career li::before { content: "·"; margin-right: 6px; color: var(--ink-4); }
.h1__dr--mobile { display: none; }
@media (min-width: 768px) {
  .h1__text .h1__title, .h1__text .h1__dr-name, .h1__text .h1__dr-name span { color: #fff; }
  .h1__text .h1__dr-career { color: rgba(255, 255, 255, .85); }
  .h1__text .h1__dr-career li::before { color: inherit; }
  .h1__text .h1__dr { border-top-color: rgba(255, 255, 255, .25); }
}
@media (max-width: 767px) {
  .h1__inner { display: block; }
  .h1__inner > .h1__text { width: 100%; max-width: none; padding: 24px 0 14px; }
  .h1__info { padding-bottom: 28px; }
  .h1__card { height: clamp(340px, 105vw, 520px); min-height: 0; padding: 0; display: block; }
  .h1__doctor { inset: auto 0 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .h1__text { width: 100%; padding: 24px 0 28px; gap: 14px; }
  .h1__lead { font-size: 16px; }
  .h1__address { margin-top: 0; font-size: 13px; }
  .h1__dr { display: none; }
  .h1__dr--mobile { display: grid; position: absolute; z-index: 1; bottom: 24px; left: 24px; right: 24px; max-width: none; margin: 0; padding: 0; border: 0; gap: 8px; }
  .h1__dr--mobile .h1__dr-name, .h1__dr--mobile .h1__dr-name span { color: #fff; }
  .h1__dr--mobile .h1__dr-career { font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
  .h1__dr--mobile .h1__dr-career li::before { color: inherit; }
  .nav__inner { gap: 12px; }
  .visit__info div { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .visit__info dd { min-width: 0; }
  .visit__actions { flex-wrap: wrap; }
}
.h1 .h1__title { white-space: pre-line; line-height: 1.12; letter-spacing: .015em; }
@media (max-width: 767px) { .h1 .h1__title { white-space: normal; } }

/* 섹션 헤딩: 작은 분류명 → 공통 크기의 제목 → 본문 */
.s3__title, #vaccine .s2__big, .visit__title {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.025em;
  white-space: normal;
  overflow-wrap: anywhere;
}
#vaccine .s2__inner { height: auto; padding: 80px 0; grid-template-rows: auto; align-items: start; column-gap: 32px; row-gap: 32px; }
#vaccine .s2__lead { grid-column: 1 / span 7; min-width: 0; gap: 24px; }
#vaccine .s2__mid { grid-column: 9 / -1; grid-row: 1; align-self: start; padding-top: 32px; }
.visit__text { padding-top: 0; }
.s3__sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.section__eyebrow-en { font-size: 11px; font-weight: 400; letter-spacing: .14em; color: var(--ink-3); }
/* 내비게이션: 전체 화면 메뉴와 앵커 */
html { scroll-padding-top: calc(var(--nav-h) + 24px); }
html.dialog-open, html.dialog-open body { overflow: hidden; }
:is(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.mobile-menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom)); border: 0; background: var(--bg); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu[open] { display: flex; flex-direction: column; }
.mobile-menu__top { position: sticky; top: 0; z-index: 1; flex: 0 0 var(--nav-h); height: var(--nav-h); display: flex; align-items: center; gap: 12px; background: var(--bg); }
.dialog-close { flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 34px; font-weight: 300; cursor: pointer; }
.mobile-menu__top .dialog-close { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; }
.nav__burger { flex-shrink: 0; }
.mobile-menu__links { display: grid; gap: 0; padding: clamp(24px, 5vh, 48px) 0; }
.mobile-menu__links a { display: flex; align-items: center; min-height: 56px; padding: 12px 0; font-size: clamp(24px, 7vw, 32px); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.mobile-menu__bottom { display: grid; justify-items: start; gap: 20px; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); }
.mobile-menu__bottom p { font-size: 13px; line-height: 1.7; color: var(--ink-3); }
.mobile-menu__bottom .visit__btn { width: 100%; justify-content: center; border-radius: 16px; }
.info-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 32px; border: 0; border-radius: 24px; color: var(--ink); background: var(--bg); }
.info-dialog::backdrop { background: rgba(10, 30, 27, .55); }
.info-dialog > .dialog-close { display: block; margin: -12px -12px 4px auto; }
.info-dialog__label { color: var(--accent); font-size: 11px; letter-spacing: .08em; margin-bottom: 12px; }
.info-dialog h2 { font-size: 24px; line-height: 1.4; }
#info-dialog-body { margin: 20px 0 28px; font-size: 15px; line-height: 1.8; white-space: pre-line; }
button.news__feature, button.news__item { width: 100%; background: none; border: 0; border-radius: 0; text-align: left; cursor: pointer; }
button.news__feature { padding: 0; }
button.news__item { border-bottom: 1px solid var(--line); }
.news__count { font-size: 13px; color: var(--ink-3); }
button.news__all { background: none; cursor: pointer; }
.visit__actions .news__all { display: inline-flex; }
.foot__legal button { padding: 0; border: 0; background: none; color: var(--on-dark-soft); font-size: 13px; font-weight: 600; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .car__photo { transition: none; } }
@media (max-width: 900px) { .bento { grid-template-rows: 380px minmax(320px, auto) 240px; } }
@media (max-width: 480px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-rows: 380px minmax(320px, auto) 240px 240px; }
  .bento__tile--b, .bento__tile--c { grid-column: 1 / -1; }
}
.s3__head > *, .news__feature, .news__side, .news__item { min-width: 0; }
.news__meta > * { min-width: 0; max-width: 100%; }
.news__d { width: 100%; }
@media (max-width: 767px) {
  #vaccine .s2__inner { padding: 64px 0; }
  #vaccine .s2__lead, #vaccine .s2__mid { grid-column: 1 / -1; }
  #vaccine .s2__mid { grid-row: auto; padding-top: 0; }
}