/* ============================================================
   비치안의원 | 진료과목 피부과 · 반응형 기반 스타일  v1
   ------------------------------------------------------------
   설계 원칙
   1) 모바일 우선(Mobile First) — 기본 스타일은 스마트폰,
      min-width 미디어 쿼리로만 넓은 화면을 덧씌웁니다.
   2) 단일 URL 반응형 — m.도메인 같은 별도 모바일 사이트를
      만들지 않습니다. 하나의 HTML이 모든 기기를 담당합니다.
   3) 40~50대 가독성 — 본문 최소 17px, 터치 영역 최소 48px.
   ============================================================ */

/* ── 1. 리셋 ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }   /* 사용자 글자 크기 설정 존중 */
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ============================================================
   2. 토큰
   ============================================================ */
:root {
  /* ── 브랜드 (로고 원본에서 추출) ── */
  --bc-primary:   #8595CB;
  --bc-violet:    #8A81BD;
  --bc-lavender:  #B1A8D3;
  --bc-sky:       #6AC1DE;
  --bc-teal:      #00B4B7;
  --bc-pink:      #F6AACB;
  --bc-yellow:    #FFF200;

  /* ── 텍스트·버튼용 진한 브랜드 색 ──
     #8595CB는 흰 배경에서 대비 2.9:1 로 본문에 쓸 수 없습니다.
     글자와 버튼에는 아래 진한 값을 쓰고, #8595CB는 면·아이콘에만 씁니다. */
  --bc-primary-ink:  #4A5A94;   /* 흰 배경 위 글자 6.0:1 */
  --bc-primary-btn:  #55659F;   /* 버튼 배경, 흰 글자 5.5:1 */
  --bc-primary-soft: #EDF0F8;

  /* ── 표면·잉크 ── */
  --bc-ground:   #FFFFFF;
  --bc-surface:  #F7F6F9;
  --bc-ink:      #1F1B24;   /* 본문 15.9:1 */
  --bc-ink-2:    #453F4C;   /* 보조 9.4:1  */
  --bc-muted:    #5E5866;   /* 캡션 6.6:1 — 이보다 옅게 쓰지 않습니다 */
  --bc-rule:     #DDD8E2;
  --bc-rule-2:   #C6BFCC;

  /* ── 상태 ── */
  --bc-danger:   #9A2F28;
  --bc-notice:   #7A5310;

  /* ── 타이포 ──
     clamp(최소, 유동, 최대) — 화면이 넓어질수록 자연스럽게 커집니다.
     rem 기준이라 사용자가 브라우저 글자 크기를 키우면 함께 커집니다. */
  --fs-xs:   0.9375rem;                                   /* 15 — 최소 하한 */
  --fs-sm:   1rem;                                        /* 16 */
  --fs-body: clamp(1.0625rem, 1.01rem + 0.28vw, 1.125rem);/* 17 → 18 */
  --fs-lg:   clamp(1.1875rem, 1.11rem + 0.38vw, 1.3125rem);/* 19 → 21 */
  --fs-h3:   clamp(1.1875rem, 1.11rem + 0.38vw, 1.375rem); /* 19 → 22 */
  --fs-h2:   clamp(1.4375rem, 1.25rem + 0.94vw, 1.875rem); /* 23 → 30 */
  --fs-h1:   clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);      /* 28 → 40 */

  --lh-body: 1.75;   /* 한글 본문은 1.7 이상이라야 편합니다 */
  --lh-head: 1.38;

  /* 굵게는 SemiBold(600) 하나로 둡니다. 제목도 본문도 같은 글꼴 · 같은
     굵기를 쓰고, 크기와 자간으로만 구분합니다. */
  --fw-strong: 600;

  --ff-base: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕",
             system-ui, sans-serif;

  /* ── 간격 (4px 배수) ── */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;

  /* ── 터치 영역 ──
     48px = 접근성 최소 기준. 주요 동작은 56px를 씁니다. */
  --tap-min: 48px;
  --tap:     56px;
  --tap-gap: 8px;    /* 인접 터치 영역 사이 최소 간격 */

  --radius: 10px;
  --wrap:   1200px;
  --measure: 34em;   /* 본문 1줄 길이 상한 */

  --bar-h: 64px;     /* 모바일 하단 고정 액션바 높이 */
}

/* ── 다크 테마 ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bc-ground: #17141C; --bc-surface: #211D29;
    --bc-ink: #F2EEF6; --bc-ink-2: #D3CBDA; --bc-muted: #ABA2B5;
    --bc-rule: #362F42; --bc-rule-2: #4A4257;
    --bc-primary-ink: #B3C0E6; --bc-primary-btn: #6C7CB6; --bc-primary-soft: #262B3D;
    --bc-danger: #E4948C; --bc-notice: #DCA94A;
  }
}
:root[data-theme="dark"] {
  --bc-ground: #17141C; --bc-surface: #211D29;
  --bc-ink: #F2EEF6; --bc-ink-2: #D3CBDA; --bc-muted: #ABA2B5;
  --bc-rule: #362F42; --bc-rule-2: #4A4257;
  --bc-primary-ink: #B3C0E6; --bc-primary-btn: #6C7CB6; --bc-primary-soft: #262B3D;
  --bc-danger: #E4948C; --bc-notice: #DCA94A;
}

/* ============================================================
   3. 기본 타이포 — 스마트폰 기준
   ============================================================ */
body {
  background: var(--bc-ground);
  color: var(--bc-ink);
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  font-weight: 400;              /* 300(Light)은 쓰지 않습니다 — 얇으면 읽기 어렵습니다 */
  line-height: var(--lh-body);
  word-break: keep-all;          /* 한글 단어 중간에서 줄바꿈되지 않게 */
  overflow-wrap: break-word;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));  /* 하단 바 자리 */
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

h1, h2, h3, h4 { line-height: var(--lh-head); font-weight: var(--fw-strong); text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lg); }

p, li { color: var(--bc-ink-2); }
p { margin-bottom: var(--sp-4); max-width: var(--measure); }
.lead { font-size: var(--fs-lg); color: var(--bc-ink); }
small, .caption { font-size: var(--fs-xs); color: var(--bc-muted); }

a { color: var(--bc-primary-ink); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }

/* 키보드 포커스는 항상 눈에 보이게 */
:focus-visible {
  outline: 3px solid var(--bc-primary-btn);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   4. 레이아웃 — 1열(모바일) → 2열 → 3열
   ============================================================ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 600px)  { .wrap { padding-inline: var(--sp-5); } }
@media (min-width: 900px)  { .wrap { padding-inline: var(--sp-6); } }

.section { padding-block: var(--sp-7); }
@media (min-width: 900px) { .section { padding-block: var(--sp-8); } }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* 카드 그리드 — 폭에 따라 자동으로 열 수가 바뀝니다 */
.grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 600px)  { .grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* 본문 + 사이드 — 900px 이상에서만 2단 */
.layout { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .layout { grid-template-columns: minmax(0,1fr) 300px; gap: var(--sp-7); align-items: start; }
  .layout__side { position: sticky; top: var(--sp-5); }
}

/* ============================================================
   5. 버튼 — 손가락으로 누르는 크기
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap);          /* 56px */
  padding: 0 var(--sp-5);
  border: 2px solid transparent; border-radius: var(--radius);
  font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.btn--primary { background: var(--bc-primary-btn); color: #fff; }
.btn--primary:hover { background: var(--bc-primary-ink); }
.btn--outline { background: transparent; color: var(--bc-primary-ink); border-color: var(--bc-rule-2); }
.btn--outline:hover { border-color: var(--bc-primary-btn); background: var(--bc-primary-soft); }
.btn--block { display: flex; width: 100%; }

/* 모바일에서 주요 버튼은 화면 폭을 꽉 채웁니다 */
.btn-row { display: grid; gap: var(--tap-gap); }
@media (min-width: 600px) { .btn-row { grid-auto-flow: column; justify-content: start; gap: var(--sp-3); } }

/* 링크처럼 보이지만 눌러야 하는 것들도 48px 확보 */
.tap { display: inline-flex; align-items: center; min-height: var(--tap-min); padding-inline: var(--sp-2); }

/* ============================================================
   6. 헤더 · 내비게이션
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bc-ground); border-bottom: 1px solid var(--bc-rule);
}
.header__bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); gap: var(--sp-3); }
.header__logo img { width: 150px; height: auto; }
@media (min-width: 900px) { .header__logo img { width: 190px; } }

/* 햄버거 — 모바일에만 */
.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-width: var(--tap); min-height: var(--tap);
  padding-inline: var(--sp-3);
  background: transparent; border: 1px solid var(--bc-rule-2); border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: var(--fw-strong);
}
.nav { display: none; }
.nav[data-open="true"] { display: block; }
.nav a {
  display: flex; align-items: center;
  min-height: var(--tap);                 /* 메뉴 한 줄 = 56px */
  padding: 0 var(--sp-2);
  border-bottom: 1px solid var(--bc-rule);
  font-size: var(--fs-lg); font-weight: 500; color: var(--bc-ink); text-decoration: none;
}
.nav a[aria-current="page"] { color: var(--bc-primary-ink); font-weight: var(--fw-strong); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav { display: block !important; }
  .nav ul { display: flex; gap: var(--sp-2); }
  .nav a { min-height: var(--tap-min); border-bottom: 0; padding-inline: var(--sp-3); font-size: var(--fs-body); }
}

/* ── 모바일 하단 고정 액션바 ──
   전화·예약·상담을 어느 페이지에서나 한 번에 누를 수 있게 합니다. */
.actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--bc-ground); border-top: 1px solid var(--bc-rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.actionbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--bar-h);
  font-size: var(--fs-xs); font-weight: var(--fw-strong); color: var(--bc-ink); text-decoration: none;
}
.actionbar a + a { border-left: 1px solid var(--bc-rule); }
.actionbar a.is-primary { background: var(--bc-primary-btn); color: #fff; }
@media (min-width: 900px) { .actionbar { display: none; } }

/* ============================================================
   7. 카드
   ============================================================ */
.card {
  background: var(--bc-ground); border: 1px solid var(--bc-rule);
  border-radius: var(--radius); padding: var(--sp-5);
}
.card h3 { margin-bottom: var(--sp-2); }
.card p { margin-bottom: 0; }
/* 카드 전체를 누를 수 있게 — 링크 영역을 카드로 확장 */
.card--link { position: relative; }
.card--link a::after { content: ""; position: absolute; inset: 0; }

/* ============================================================
   8. 표 — 모바일에서는 세로로 쌓습니다
   ============================================================ */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: var(--sp-3) 0; border-bottom: 1px solid var(--bc-rule); }
.spec th { color: var(--bc-muted); font-weight: 500; font-size: var(--fs-sm); }
.spec td { color: var(--bc-ink); }
/* 모바일: 항목명 위 / 값 아래 */
@media (max-width: 599px) {
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; }
  .spec tr { padding-block: var(--sp-3); border-bottom: 1px solid var(--bc-rule); }
  .spec th, .spec td { border: 0; padding: 0; }
  .spec th { margin-bottom: 2px; }
}
@media (min-width: 600px) { .spec th { width: 34%; } }

/* 넓은 표는 가로 스크롤 — 페이지 전체가 밀리지 않게 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   9. FAQ — details/summary (JS 없이 동작)
   ============================================================ */
.faq details { border-bottom: 1px solid var(--bc-rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: var(--tap); padding: var(--sp-3) 0;
  font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--bc-ink);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; color: var(--bc-primary-ink); font-weight: var(--fw-strong); }
.faq details[open] summary::after { content: "－"; }
.faq details > div { padding-bottom: var(--sp-4); }

/* ============================================================
   10. 폼 — iOS 자동 확대 방지를 위해 입력 글자는 16px 이상
   ============================================================ */
.field { display: block; margin-bottom: var(--sp-4); }
.field > label { display: block; margin-bottom: var(--sp-2); font-weight: var(--fw-strong); font-size: var(--fs-body); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--bc-rule-2); border-radius: var(--radius);
  background: var(--bc-ground);
  font-size: max(16px, var(--fs-body));   /* 16px 미만이면 iOS가 화면을 확대합니다 */
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--bc-primary-btn); }
.field .hint { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--bc-muted); }
.field .error { color: var(--bc-danger); font-weight: var(--fw-strong); }

/* ============================================================
   11. 이미지
   ============================================================ */
.media { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: var(--radius); }
.media--square { aspect-ratio: 1 / 1; }

/* ============================================================
   12. 유틸
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--sp-3); top: -100px; z-index: 100;
  padding: var(--sp-3) var(--sp-4); background: var(--bc-primary-btn); color: #fff;
  border-radius: var(--radius); font-weight: var(--fw-strong);
}
.skip-link:focus { top: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .header, .actionbar, .btn { display: none !important; }
  body { padding-bottom: 0; }
}