/* ──────────────────────────────────────────────────────────────
   유진안과 — pages/detail/reserve/tweaks styles (vanilla build)
   ──────────────────────────────────────────────────────────── */

:root { --font-scale: 1; }
body { font-size: calc(16px * var(--font-scale)); }

/* ── Page head ───────────────────────────────────────────── */
.page-head {
  padding: 128px 0 80px;
  background: var(--bg-section);
  border-bottom: 1px solid var(--border-subtle);
}
.page-head .eyebrow { margin-bottom: 18px; }
.page-head__title {
  font-size: 56px; font-weight: 600; letter-spacing: -0.025em;
  color: var(--fg-heading); line-height: 1.2; margin-bottom: 18px;
  text-wrap: pretty;
}
.page-head__sub {
  font-size: 17px; color: var(--fg2); line-height: 1.75;
  max-width: 680px; text-wrap: pretty;
}

/* ── Department tabs ─────────────────────────────────────── */
.dept-tabs {
  display: flex; gap: 4px; padding: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 9999px; background: var(--bg1);
  white-space: nowrap;
}
body.dark .dept-tabs { background: var(--bg2); }
.dept-tab {
  padding: 10px 22px; font-size: 14px; font-weight: 500;
  color: var(--fg2); border-radius: 9999px;
  white-space: nowrap; cursor: pointer;
  border: none; background: transparent;
  transition: all 200ms;
}
.dept-tab:hover { color: var(--brand-500); }
.dept-tab.is-on { background: var(--brand-400); color: #fff; }

/* ── Doctor profile blocks ───────────────────────────────── */
.doctor-profile {
  display: grid; grid-template-columns: 380px 1fr;
  gap: 64px; align-items: flex-start;
  padding: 64px 0; border-top: 1px solid var(--border-subtle);
}
.doctor-profile:first-child { border-top: none; padding-top: 0; }
.doctor-profile__img {
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, var(--brand-100) 0%, var(--brand-300) 70%, var(--brand-600) 100%);
  border-radius: 12px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* ── FAQ (vanilla) ───────────────────────────────────────── */
.faq-list { border-top: 1px solid var(--border-subtle); }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq__q {
  width: 100%; text-align: left; background: none; border: none;
  padding: 28px 8px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  font-family: inherit; font-size: 17px; font-weight: 500;
  color: var(--fg-heading);
  cursor: pointer;
  transition: color 200ms;
}
.faq__q:hover { color: var(--brand-500); }
.faq__q-text { flex: 1; text-wrap: pretty; }
.faq__q-icon {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-base);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--fg2);
  transition: all 250ms var(--ease-out);
  flex-shrink: 0;
}
.faq-item.is-open .faq__q-icon {
  background: var(--brand-400); border-color: var(--brand-400);
  color: #fff; transform: rotate(45deg);
}
.faq__a {
  max-height: 0; overflow: hidden;
  padding: 0 8px;
  font-size: 15px; line-height: 1.9; color: var(--fg2);
  transition: max-height 400ms var(--ease-out), padding 400ms;
}
.faq-item.is-open .faq__a { max-height: 600px; padding: 0 8px 32px; }

/* ── Reserve page ────────────────────────────────────────── */
.reserve-page { padding-bottom: 0; }
.reserve-card {
  padding: 48px 56px;
  background: var(--bg1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
body.dark .reserve-card { background: var(--bg2); }
.reserve-step-title {
  font-size: 26px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--fg-heading); margin-bottom: 10px;
}
.reserve-step-sub {
  font-size: 14px; color: var(--fg-muted); margin-bottom: 32px;
}

/* step bar */
.step-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 40px;
  position: relative;
}
.step {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--border-subtle); border-radius: 4px;
  background: var(--bg1);
  transition: all 250ms;
}
body.dark .step { background: var(--bg2); }
.step__n {
  font-size: 12px; font-weight: 500;
  color: var(--fg-muted); letter-spacing: 0.1em;
}
.step__t {
  font-size: 14px; color: var(--fg2); font-weight: 500;
}
.step.is-on { border-color: var(--brand-400); background: var(--brand-50); }
body.dark .step.is-on { background: rgba(95,162,122,0.12); }
.step.is-on .step__n, .step.is-on .step__t { color: var(--brand-600); }
.step.is-done .step__n::after { content: ' ✓'; color: var(--brand-400); }

/* form */
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-size: 13px; font-weight: 500;
  color: var(--fg-heading); letter-spacing: 0.02em;
}
.input {
  width: 100%; padding: 13px 16px;
  font-family: var(--font-body); font-size: 15px;
  color: var(--fg1); background: var(--bg1);
  border: 1px solid var(--border-base);
  border-radius: 6px; outline: none;
  transition: all 150ms;
}
body.dark .input { background: var(--bg2); color: var(--fg1); }
.input::placeholder { color: var(--fg-disabled); }
.input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(95,162,122,0.15);
}
textarea.input { resize: vertical; min-height: 100px; font-family: var(--font-body); }

/* choice buttons (dept, seg, time) */
.choice-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.choice {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; padding: 20px;
  background: var(--bg1); border: 1px solid var(--border-base);
  border-radius: 8px; cursor: pointer;
  transition: all 150ms; text-align: left;
}
body.dark .choice { background: var(--bg2); }
.choice:hover { border-color: var(--brand-300); }
.choice.is-on {
  border-color: var(--brand-400); background: var(--brand-50);
}
body.dark .choice.is-on { background: rgba(95,162,122,0.12); }
.choice__en {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500;
}
.choice.is-on .choice__en { color: var(--brand-500); }
.choice__ko {
  font-size: 16px; font-weight: 600; color: var(--fg-heading);
  letter-spacing: -0.01em;
}

.seg {
  padding: 10px 18px; font-size: 14px;
  background: var(--bg1); border: 1px solid var(--border-base);
  border-radius: 9999px; cursor: pointer; color: var(--fg1);
  transition: all 150ms;
}
body.dark .seg { background: var(--bg2); }
.seg:hover { border-color: var(--brand-300); color: var(--brand-500); }
.seg.is-on { background: var(--brand-400); border-color: var(--brand-400); color: #fff; }

/* schedule: calendar + time */
.sched {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.cal {
  background: var(--bg1); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 20px;
}
body.dark .cal { background: var(--bg2); }
.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cal__title { font-size: 16px; font-weight: 600; color: var(--fg-heading); letter-spacing: -0.01em; }
.cal__nav {
  width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid var(--border-base); background: var(--bg1);
  cursor: pointer; color: var(--fg2); font-size: 16px;
}
.cal__nav:hover { color: var(--brand-500); border-color: var(--brand-300); }
.cal__week, .cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.cal__wd {
  text-align: center; font-size: 11px; font-weight: 500;
  color: var(--fg-muted); padding: 6px 0; letter-spacing: 0.05em;
}
.cal__d {
  aspect-ratio: 1; border: none; background: transparent;
  font-size: 14px; color: var(--fg1); cursor: pointer;
  border-radius: 6px; font-family: inherit;
  transition: all 150ms;
}
.cal__d:hover { background: var(--brand-50); color: var(--brand-600); }
body.dark .cal__d:hover { background: rgba(95,162,122,0.12); }
.cal__d.is-sun { color: #C0392B; }
.cal__d.is-sat { color: #2874A6; }
.cal__d.is-muted { color: var(--fg-disabled); cursor: not-allowed; }
.cal__d.is-muted:hover { background: transparent; color: var(--fg-disabled); }
.cal__d.is-on { background: var(--brand-400) !important; color: #fff !important; font-weight: 600; }

.time-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.time {
  padding: 12px 0; font-size: 14px;
  background: var(--bg1); border: 1px solid var(--border-base);
  border-radius: 6px; cursor: pointer; text-align: center;
  color: var(--fg1); transition: all 150ms;
  font-family: inherit;
}
body.dark .time { background: var(--bg2); }
.time:hover { border-color: var(--brand-300); color: var(--brand-500); }
.time.is-on { background: var(--brand-400); border-color: var(--brand-400); color: #fff; }
.time.is-muted { opacity: 0.4; cursor: not-allowed; }

/* summary */
.summary {
  padding: 24px 28px; background: var(--bg-section);
  border-radius: 8px;
}
body.dark .summary { background: rgba(255,255,255,0.03); }
.summary__row {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 20px; padding: 14px 0;
  border-top: 1px dashed var(--border-subtle);
  font-size: 15px;
}
.summary__row:first-child { border-top: none; padding-top: 0; }
.summary__k { font-size: 13px; color: var(--fg-muted); letter-spacing: 0.04em; padding-top: 2px; }
.summary__v { color: var(--fg-heading); font-weight: 500; }

/* agree checkboxes */
.agree {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 6px;
  cursor: pointer; font-size: 14px; color: var(--fg2);
  transition: background 150ms;
  line-height: 1.6;
}
.agree:hover { background: var(--bg-section); }
body.dark .agree:hover { background: rgba(255,255,255,0.03); }
.agree input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--brand-400);
  flex-shrink: 0;
}

/* confirm check icon */
.check {
  width: 72px; height: 72px; margin: 0 auto 32px;
  border-radius: 50%; background: var(--brand-50);
  display: flex; align-items: center; justify-content: center;
}
body.dark .check { background: rgba(95,162,122,0.12); }

/* hours table */
.hours-table {
  width: 100%; border-collapse: collapse; font-size: 15px;
}
.hours-table td {
  padding: 14px 0; border-bottom: 1px solid var(--border-subtle);
}
.hours-table td:first-child {
  color: var(--fg-muted); letter-spacing: 0.04em; font-size: 13px; width: 140px;
}
.hours-table td:last-child {
  text-align: right; color: var(--fg-heading);
  font-variant-numeric: tabular-nums;
}

/* tag/tweaks panel ─────────────────────────────────────── */
.twk {
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  width: 320px; max-height: calc(100vh - 48px);
  background: var(--bg1); color: var(--fg1);
  border: 1px solid var(--border-base);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  display: none; flex-direction: column;
  overflow: hidden;
  font-size: 13px;
}
body.dark .twk { background: #1A2420; }
.twk__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.twk__title {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-heading);
}
.twk__close {
  width: 28px; height: 28px; border-radius: 6px;
  border: none; background: transparent; color: var(--fg2);
  cursor: pointer; font-size: 14px;
}
.twk__close:hover { background: var(--bg-section); color: var(--fg-heading); }
.twk__body {
  padding: 12px 18px 20px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.twk__section {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-muted);
  padding: 14px 0 6px;
}
.twk__row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 0;
}
.twk__row-h {
  flex-direction: row; align-items: center; justify-content: space-between;
}
.twk__row-head {
  display: flex; justify-content: space-between; align-items: center;
}
.twk__label { font-size: 12px; color: var(--fg2); font-weight: 500; }
.twk__value { font-size: 12px; color: var(--fg-heading); font-variant-numeric: tabular-nums; }
.twk__seg {
  display: grid; grid-auto-flow: column; gap: 4px;
  padding: 3px; background: var(--bg-section);
  border-radius: 6px;
}
body.dark .twk__seg { background: rgba(255,255,255,0.04); }
.twk__seg-btn {
  padding: 7px 10px; font-size: 12px; font-weight: 500;
  border: none; background: transparent; color: var(--fg2);
  border-radius: 4px; cursor: pointer;
  transition: all 150ms;
}
.twk__seg-btn:hover { color: var(--fg-heading); }
.twk__seg-btn.is-on { background: var(--brand-400); color: #fff; }
.twk__toggle {
  width: 44px; height: 24px; border-radius: 12px;
  background: var(--border-base); border: none; padding: 2px;
  cursor: pointer; position: relative;
  transition: background 200ms;
}
.twk__toggle.is-on { background: var(--brand-400); }
.twk__toggle-dot {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  transition: transform 200ms;
}
.twk__toggle.is-on .twk__toggle-dot { transform: translateX(20px); }
.twk__slider {
  width: 100%; accent-color: var(--brand-400);
}

/* ── Feature split (2-column 텍스트+비주얼 레이아웃) ─────── */
/* about.html / departments.html / index.html 공통 사용 */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ── Clinic / dept visual artwork blocks ─────────────────── */

/* 병원소개 페이지 일러스트 박스 (about.html) */
.clinic-art {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #122319 0%, #2D5440 60%, #5FA27A 100%);
  position: relative;
}

/* 진료과목 페이지 비주얼 박스 (departments.html) */
.dept-visual {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 진료과목 상세 항목 리스트 */
.dept-details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dept-details__item {
  padding-left: 24px;
  position: relative;
}
.dept-details__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 1px;
  background: var(--brand-400);
}
.dept-details__title {
  font-weight: 600;
  color: var(--fg-heading);
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}
.dept-details__desc {
  color: var(--fg2);
  font-size: 15px;
}

/* 프로세스 스텝 그리드 (departments.html 하단) */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.process-item {
  padding: 28px 24px;
  background: var(--bg1);
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}
body.dark .process-item {
  background: var(--bg2);
}

/* 오시는 길 교통수단 그리드 */
.transport-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.transport-item {
  padding: 28px 0;
  border-top: 1px solid var(--border-subtle);
}
.transport-item__title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--fg-heading);
}
.transport-item__desc {
  font-size: 15px;
  color: var(--fg2);
  line-height: 1.75;
}

/* 오시는 길 정보 박스 */
.location-info {
  margin-top: 48px;
  padding: 40px;
  background: var(--bg-section);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.location-info__heading {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 12px;
  margin-bottom: 20px;
  color: var(--fg-heading);
}
.location-info__addr {
  font-size: 15px;
  color: var(--fg2);
  line-height: 1.9;
}

/* 병원소개 철학 항목 */
.philosophy-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 32px;
}
.philosophy-item__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--fg-heading);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.philosophy-item__desc {
  color: var(--fg2);
  line-height: 1.75;
  font-size: 16px;
}

/* ─── Hue themes (Tweaks) ─────────────────────────────────── */
:root[data-hue="ocean"] {
  --brand-50: #E8F2F7;  --brand-100: #CCE3EE;
  --brand-200: #99C7DC; --brand-300: #66ABCA;
  --brand-400: #3A8FB8; --brand-500: #2E7699;
  --brand-600: #24607F; --brand-700: #1B4A60;
  --brand-800: #123242; --brand-900: #0A1E27;
}
:root[data-hue="slate"] {
  --brand-50: #ECEEF2;  --brand-100: #DADEE5;
  --brand-200: #B4BDC9; --brand-300: #8F9DAD;
  --brand-400: #5C6F83; --brand-500: #47586A;
  --brand-600: #374552; --brand-700: #28323C;
  --brand-800: #1B222A; --brand-900: #11161C;
}
:root[data-hue="warm"] {
  --brand-50: #F8EFE8;  --brand-100: #F0DFCF;
  --brand-200: #E0BC9E; --brand-300: #CF9870;
  --brand-400: #B97946; --brand-500: #9C6138;
  --brand-600: #7D4C2B; --brand-700: #5E3820;
  --brand-800: #3F2415; --brand-900: #21130B;
}

/* ─── Responsive ─────────────────────────────────────────── */
/* ── 태블릿 (≤ 1024px) ─── */
@media (max-width: 1024px) {

    .doctor-profile {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sched {
        grid-template-columns: 1fr;
    }

    .choice-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .step-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-head {
        padding: 96px 0 56px;
    }

    .page-head__title {
        font-size: 40px;
    }

    .reserve-card {
        padding: 32px 24px;
    }

    .feature-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .transport-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .location-info {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* ── 모바일 (≤ 767px) ─── */
@media (max-width: 767px) {

    /* 페이지 헤드 */
    .page-head {
        padding: 72px 0 44px;
    }

    .page-head__title {
        font-size: 28px;
    }

    .page-head__sub {
        font-size: 15px;
    }

    /* 예약 폼 */
    .reserve-card {
        padding: 24px 20px;
    }

    .step-bar {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .step {
        padding: 12px 16px;
    }

    .choice-grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    /* 달력 + 시간: 이미 1열이므로 여백만 조정 */
    .sched {
        gap: 24px;
    }

    .time-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 의료진 프로필 */
    .doctor-profile {
        padding: 44px 0;
        gap: 24px;
    }

    .doctor-profile__img {
        max-width: 280px;
    }

    /* 프로세스 그리드: 1열 */
    .process-grid {
        grid-template-columns: 1fr;
    }

    /* FAQ */
    .faq__q {
        font-size: 15px;
        padding: 22px 8px;
    }

    /* 피처 스플릿 */
    .feature-split {
        gap: 28px;
    }

    /* 오시는 길 */
    .location-info {
        padding: 28px 24px;
        gap: 24px;
    }

    .location-info__heading {
        font-size: 22px;
    }
}