/* 훈훈한 디자인 시스템 — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #ffffff; /* 페이지 바탕. 홈 첫 화면·질환·검사·치료·진료 안내 섹션과 모든 하위 페이지의 기본 바탕이에요. */
  --ink: #17163a; /* 제목과 중요한 글. surface, band, tint 위에서 17:1 이상. */
  --ink-2: #3a3e52; /* 긴 본문(질환 설명, 리드 문장), 표의 요일 이름. surface 위 10.5:1. */
  --muted: #5f6476; /* 보조 글: 이름표(dt), 캡션, 선택 안 된 탭, 안내 문구. surface 5.9:1, tint 5.4:1, band 5.4:1. 작은 글자의 가장 옅은 색이에요. */
  --faint: #8a8e9c; 
  --line: #e4e6ec; /* 1px 가는 줄: 행 사이, 섹션 위 경계, 지도 테두리, 머리 아래 선. */
  --line-2: #d5d8e0; /* 선 버튼·칩·입력 테두리, 세로 탭의 바탕 줄 아님. 흰 바탕 1.4:1이라 테두리만으로는 누를 곳을 알리지 못해요. 늘 남색 글자와 함께 써요. */
  --band: #f5f6f8; /* 그림 자리 바탕(이미지 로딩 전), 층 표시 칩, 주소 복사 버튼, 폰 메뉴 버튼. */
  --tint: #f3f4f9; 
  --tint-line: #e2e4ee; /* tint 면 위의 칩·더보기 테두리. */
  --navy: #22205f; /* 로고 남색. 브랜드 강조, 선택된 탭, 묶음 시작 2px 줄, 시간 숫자·전화번호, 선 버튼 글자, 원장 소개·방문 안내 면, 지도 핀. 글자로 surface 14.6:1. */
  --navy-deep: #1a1948; 
  --navy-photo: #2c2a6e; /* 남색 면 위 사진 자리 바탕(원장 사진 로딩 전). */
  --lime: #a8e03a; 
  --lime-hover: #b8e95c; /* lime 버튼에 올렸을 때. */
  --lime-glow: rgba(168, 224, 58, 0.22); /* 섹션 이름 앞 연두 점의 둘레 3px. */
  --coral: #ff5a5f; /* 아픈 곳 표시에만: 점 몸의 붉은 물결, 질환 그림 속 아픈 자리. 버튼·글자·경고에는 쓰지 않아요. */
  --on-muted: #d8d9ea; /* 남색 면 위 긴 글(원장 인사말). navy 위 10.4:1. */
  --on-navy-text: rgba(255, 255, 255, 0.9); /* 남색 바닥글 링크와 값. navy-deep 위 13.5:1. */
  --on-navy-faint: rgba(255, 255, 255, 0.6); /* 남색 면·바닥글의 이름표와 보조 글. navy-deep 위 6.6:1. */
  --on-navy-line: rgba(255, 255, 255, 0.16); /* 남색 면 위 1px 줄. */
  --on-navy-border: rgba(255, 255, 255, 0.32); /* 남색 면 위 선 버튼 테두리. navy 위 2.8:1이라 글자와 함께 써요. */
  --glass: rgba(255, 255, 255, 0.94); /* 머리와 폰 아래 바의 흰 유리 바탕(뒤 흐림과 함께). */
  --tbd-border: #aeb2c0; 
  --brand: var(--lime); /* 기존 코드의 --brand 이름. lime과 같아요. */
  --brand-deep: var(--navy); /* 기존 코드의 --brand-deep 이름. navy와 같아요. */
  --focus-ring: var(--navy); /* 키보드 초점 2px 실선(흰·옅은 면 위). surface 14.6:1. */
  --focus-ring-on-navy: var(--lime); /* 남색 면·바닥글 위 키보드 초점 2px 실선. navy 위 9.3:1. */
  --shadow-header: 0 1px 0 #e4e6ec; /* 머리 아래 한 줄(유리 바탕과 함께). */
  --shadow-dock: 0 10px 30px rgba(23, 22, 58, 0.12); /* 폰 아래 고정 바. */
  --shadow-panel: 0 18px 50px rgba(23, 22, 58, 0.14); /* 머리의 진료시간 펼침 판. */
  --shadow-search: 0 12px 32px rgba(34, 32, 95, 0.10); 
  --shadow-pin: 0 0 0 10px rgba(34, 32, 95, 0.12), 0 3px 10px rgba(0, 0, 0, 0.2); /* 지도 남색 핀의 둘레와 그림자. */
}
:root {
  --sp-4: 4px; /* 아주 작은 틈: 탭 줄과 몸 사이, 줄 안 간격. */
  --sp-8: 8px; /* 버튼 사이, 칩 사이, 꼬리표 옆. */
  --sp-12: 12px; /* 제목과 설명 사이(폰), 짧은 묶음 안. */
  --sp-16: 16px; /* 그림과 글 사이, 폰 묶음 안, 리드와 그림 사이(폰). */
  --sp-20: 20px; /* 세로 탭 왼쪽 들임, 폰 첫 화면 글 둘레. */
  --sp-24: 24px; /* 버튼 묶음 위, 사진 위 여백, PC 묶음 안. */
  --sp-28: 28px; /* 카드 사이(그림 카드 줄), 원장 소개 글 사이. */
  --sp-32: 32px; /* 섹션 제목과 내용 사이, 두 칸 사이(좁은 쪽). */
  --sp-40: 40px; /* 탭 영역 위(PC 질환 머리 아래), 더보기 위. */
  --sp-48: 48px; /* 폰 묶음 사이(진료시간 페이지), 두 칸 사이. */
  --sp-56: 56px; /* PC 묶음 사이, 탭 글 끝 '다음' 줄 위, 탭 영역 위아래. */
  --sp-72: 72px; /* 폰 섹션 위아래, PC 질환 머리 글과 그림 사이. */
  --sp-80: 80px; /* PC 세로 탭과 본문 사이, 진료시간 페이지 두 칸 사이. */
  --sp-96: 96px; /* PC 묶음 사이(진료시간 페이지 위아래 줄), 섹션 아래. */
  --sp-104: 104px; /* PC 홈 섹션 위아래(기본), 하위 페이지 맨 아래. */
  --sp-112: 112px; /* PC 홈 섹션 위(질환·진료 안내처럼 첫 줄이 큰 섹션). */
  --r-tag: 6px; 
  --r-chip: 8px; /* 층 표시 칩(센타프라자 6층). */
  --r-s: 12px; /* 버튼, 머리 진료시간 버튼, 메뉴 버튼, 지도 앱 버튼, 영상 버튼. */
  --r-thumb: 14px; /* 작은 정사각 그림(92px 행 카드, 폰 88px), 진료시간 바로가기 줄. */
  --r-m: 18px; 
  --r-card: 20px; /* 그림 카드(4:5) 그림, 폰 지도, 폰 남색 면. */
  --r-l: 24px; /* 사진(검사·치료, 원장), 지도, 남색 방문 안내 면. */
  --r-hero: 28px; /* 홈 첫 화면 큰 사진, PC 질환 머리 그림. */
  --r-pill: 999px; 
  --gutter: clamp(20px, 3.4vw, 48px); /* 화면 양옆 여백. 폰 20px ~ PC 48px. */
  --max: 1400px; /* 홈 내용 최대 폭. */
  --page-max: 1240px; /* 하위 페이지 내용 최대 폭. */
  --reading-max: 720px; /* 질환 상세 본문 칸 최대 폭(PC). */
  --tab-rail: 232px; /* PC 세로 탭 칸 폭. */
  --hours-col: 420px; /* 진료시간 표 칸 폭(홈 진료 안내, 진료시간 페이지). */
  --header-info: 36px; /* PC 머리 정보줄 높이(주소·전화·시간 요약). */
  --header-main: 76px; /* PC 머리 메뉴 줄 높이(내리면 68px). */
  --frame-rest-height: 112px; /* PC 머리 전체 높이. 첫 내용은 이만큼 아래에서 시작. 폰은 64px. */
  --tap-min: 44px; /* 누를 수 있는 것의 최소 높이(링크·탭·버튼). 큰 버튼 56px, 중간 48px. */
  --bp-phone: 600px; /* 이하: 폰. 질환 그림은 설명 아래 2:1, 지도는 핀 둘레 확대, 한 칸. */
  --bp-compact: 860px; /* 이하: 폰·작은 태블릿. 아래 고정 바, 알약 탭, 한 칸 진료시간, 머리 64px. */
  --bp-wide-tablet: 1100px; /* 861~1100: 큰 태블릿. 홈 첫 화면 1:1, 진료시간 표 한 줄씩. */
  --font-sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --text-display-hero: 300 58px/1.22 var(--font-sans); /* 홈 첫 화면 큰 문장. 화면 폭에 따라 44~58px(clamp 3.9vw). 둘째 줄 강조만 600 navy. */
  --text-title-page: 300 52px/1.22 var(--font-sans); /* 하위 페이지 h1. 화면 폭에 따라 40~56px(질환 상세는 이름이 짧아 56px까지, 진료시간은 52px까지). */
  --text-title-section: 300 42px/1.32 var(--font-sans); 
  --text-title-content: 300 36px/1.3 var(--font-sans); /* 질환 상세 탭 글의 제목(h2). */
  --text-title-block: 500 26px/1.35 var(--font-sans); /* 묶음 제목. 아래에 2px navy 줄(BlockTitle). 진료시간 페이지 '진료시간', '오시는 길'. */
  --text-title-sub: 600 20px/1.5 var(--font-sans); /* 본문 안 작은 제목(h3), 생활 관리 칸 제목(18px). */
  --text-link-title: 500 21px/1.4 var(--font-sans); /* 아래 두 길 제목(진료시간, 오시는 길), '다음' 줄 제목(20px). navy. */
  --text-lead: 400 19px/1.65 var(--font-sans); /* 제목 아래 한두 줄 설명. ink-2. 진료시간 페이지는 18px. */
  --text-list: 400 18px/1.7 var(--font-sans); /* 줄로 나눈 행 목록(CheckList) 한 줄. ink. */
  --text-reading: 400 17px/1.85 var(--font-sans); /* 질환 설명 같은 긴 글. ink-2, 한 줄 36em 이하. */
  --text-body: 400 16px/1.7 var(--font-sans); /* 기본 글자. */
  --text-tab: 400 16px/1.5 var(--font-sans); /* PC 세로 탭 글자. 선택되면 600 ink. 페이지 이동 밑줄 탭은 17px 500. */
  --text-button: 600 16px/1.4 var(--font-sans); /* 큰 버튼(56px) 글자. 중간 버튼·글 링크 15px 600, 작은 버튼(지도 앱) 14.5px 500. */
  --text-label: 600 14px/1.5 var(--font-sans); /* 섹션 이름(연두 점 + navy), 분류 이름. */
  --text-caption: 400 13px/1.7 var(--font-sans); /* 안내 문구, 출처, 위치 표시. muted(faint 아님). */
  --text-tag: 600 11.5px/1 var(--font-sans); 
  --text-num-hours: 500 25px/1.4 var(--font-sans); /* 진료시간 페이지 시간 숫자. navy, tabular-nums. 홈 진료 안내 판은 22px, 홈 첫 화면 줄은 17px. */
  --text-num-phone: 400 34px/1.3 var(--font-sans); /* 진료시간 페이지 본문 전화번호(정보로만, 권유 문구 없이). navy. */
  --text-address: 400 26px/1.5 var(--font-sans); /* 오시는 길 주소. 층은 band 칩으로. */
  --text-display-hero-phone: 300 31px/1.28 var(--font-sans); /* 홈 첫 화면 문장. 27~31px(7.4vw). */
  --text-title-page-phone: 300 30px/1.27 var(--font-sans); /* 하위 페이지 h1. 질환 상세는 27~30px(7.7vw). */
  --text-title-section-phone: 300 29px/1.38 var(--font-sans); 
  --text-title-content-phone: 300 28px/1.3 var(--font-sans); /* 질환 탭 글 제목. */
  --text-title-block-phone: 500 22px/1.35 var(--font-sans); /* 묶음 제목. */
  --text-title-sub-phone: 600 18px/1.5 var(--font-sans); /* 작은 제목, 아래 두 길 제목, 다음 줄 제목. */
  --text-lead-phone: 400 16px/1.6 var(--font-sans); /* 제목 아래 설명. 홈 첫 화면 15.5px. */
  --text-list-phone: 400 16.5px/1.7 var(--font-sans); /* 줄로 나눈 행 목록. */
  --text-reading-phone: 400 16px/1.8 var(--font-sans); /* 긴 글. */
  --text-tab-pill: 400 15px/1.4 var(--font-sans); /* 폰 남색 알약 탭. 선택은 흰 글자. */
  --text-num-hours-phone: 500 22px/1.4 var(--font-sans); /* 진료시간 페이지 시간 숫자. 홈 진료 안내 19px. */
  --text-num-phone-phone: 400 26px/1.3 var(--font-sans); /* 본문 전화번호(폰 아래 바에 전화 버튼이 따로 있어요). */
  --text-address-phone: 400 21px/1.5 var(--font-sans); /* 오시는 길 주소. */
  --text-label-phone: 600 13px/1.5 var(--font-sans); /* 섹션 이름. */
  --text-caption-phone: 400 12.5px/1.6 var(--font-sans); /* 안내 문구. */
}
.display-hero {
  font-family: var(--font-sans);
  font-size: 58px;
  line-height: 1.22;
  font-weight: 300;
  letter-spacing: -0.05em;
}
.title-page {
  font-family: var(--font-sans);
  font-size: 52px;
  line-height: 1.22;
  font-weight: 300;
  letter-spacing: -0.045em;
}
.title-section {
  font-family: var(--font-sans);
  font-size: 42px;
  line-height: 1.32;
  font-weight: 300;
  letter-spacing: -0.035em;
}
.title-content {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -0.045em;
}
.title-block {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.title-sub {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.link-title {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.lead {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
}
.list {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
}
.reading {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.85;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
}
.tab {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.button {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
}
.tag {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
}
.num-hours {
  font-family: var(--font-sans);
  font-size: 25px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.num-phone {
  font-family: var(--font-sans);
  font-size: 34px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.address {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.display-hero-phone {
  font-family: var(--font-sans);
  font-size: 31px;
  line-height: 1.28;
  font-weight: 300;
  letter-spacing: -0.05em;
}
.title-page-phone {
  font-family: var(--font-sans);
  font-size: 30px;
  line-height: 1.27;
  font-weight: 300;
  letter-spacing: -0.045em;
}
.title-section-phone {
  font-family: var(--font-sans);
  font-size: 29px;
  line-height: 1.38;
  font-weight: 300;
  letter-spacing: -0.035em;
}
.title-content-phone {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -0.045em;
}
.title-block-phone {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.title-sub-phone {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lead-phone {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.list-phone {
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
}
.reading-phone {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: 0;
}
.tab-pill {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.num-hours-phone {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.num-phone-phone {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.address-phone {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.label-phone {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
}
.caption-phone {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}