/* ═════════════════════════════════════════════════════════════
   브랜드 색 정리 (가장 마지막에 읽는다)
   로고의 두 색 — 분홍(자홍)과 보라 — 을 옅은 회색 바탕 위에 절제해서 쓴다.
   · 분홍: 누르는 것(버튼, 전화, 선택된 항목)
   · 보라: 보조 표시(층 번호, 진료과 이름, 아이콘)
   · 분홍→보라 그라데이션: 구역 제목 아이콘, 메뉴 머리, 선택된 탭 등 꼭 필요한 곳만
   · 바탕: 흰색과 옅은 회색을 번갈아
   ═════════════════════════════════════════════════════════════ */
:root {
  --brand-pink: #d02c84;
  --brand-purple: #7b3aa0;
  --brand-grad: linear-gradient(135deg, #e5509b 0%, #b5176f 52%, #7e3a99 100%);
  --purple-deep: #5f2d82;
  --purple-tint: #f2edf8;

  --grey-0: #ffffff;
  --grey-50: #f7f7f9;   /* 구역 바탕 */
  --grey-100: #f0eff3;  /* 카드 안 바탕, 아이콘 칸 */
  --line: #e7e5eb;
  --line-strong: #d6d3dc;

  /* 기존 변수도 회색 쪽으로 */
  --blush: var(--grey-50);
  --tint: #f7eef4;      /* 아주 옅은 분홍: 마우스를 올렸을 때만 */
  --sec-pink: var(--grey-50);
  --sec-lavender: var(--grey-50);
  --sec-rose: var(--grey-50);
  --shadow-1: 0 1px 2px rgb(40 30 50 / 0.05), 0 8px 22px -10px rgb(60 40 80 / 0.16);
  --shadow-2: 0 2px 6px rgb(40 30 50 / 0.06), 0 20px 40px -16px rgb(60 40 80 / 0.24);
}

/* ── 구역 바탕: 회색과 흰색을 번갈아 ── */
.hero      { background: linear-gradient(180deg, #f8f7fa 0%, var(--grey-50) 100%); }
.journey   { background: var(--grey-0); }
.doctors   { background: var(--grey-50); }
.updates   { background: var(--grey-0); }
.shortcuts { background: var(--grey-50); }
.partners  { background: var(--grey-0); }
.sub-hero  { background: var(--grey-50); }
.journey .step-floor { box-shadow: 0 0 0 6px var(--grey-0), var(--shadow-1); }
.dr-card::after { background: radial-gradient(circle, var(--purple-tint) 0%, rgb(242 237 248 / 0) 70%); }

/* ── 구역 제목 아이콘: 그라데이션 / 표시 글자: 보라 ── */
.sec-tag { color: var(--purple-deep); background: var(--grey-0); box-shadow: var(--shadow-1); }
.doctors .sec-tag, .shortcuts .sec-tag { background: var(--grey-0); box-shadow: var(--shadow-1); }
.sec-tag svg, .journey .sec-tag svg, .partners .sec-tag svg { background: var(--brand-grad); }
.journey .sec-tag, .partners .sec-tag { color: var(--purple-deep); }

/* ── 보라: 보조 표시 ── */
.journey .step-floor { background: var(--brand-purple); }
.journey-steps::before { border-color: color-mix(in srgb, var(--brand-purple) 40%, transparent); }
.doc-dept, .dr-dept { color: var(--brand-purple); }
.dr-dept { background: var(--purple-tint); }
.class-rows time { background: var(--purple-tint); }
.class-rows .d { color: var(--purple-deep); }
.panel-icon, .sc-icon, .dr-cols h3 svg { background: var(--purple-tint); }
.panel-icon svg, .sc-icon svg, .dr-cols h3 svg { stroke: var(--brand-purple); }
.shortcuts-list a:hover .sc-icon { background: var(--brand-grad); }
.today-title time, .t-name small { color: var(--muted); }
.floor-static .floor-label { color: #a39dab; }

/* ── 그라데이션: 선택된 것 ── */
.dept-filter button[aria-pressed="true"],
.dr-tabs a[aria-current="page"],
.subnav > ul > li.is-on > a,
.subnav > ul > li > a[aria-current="page"] { background: var(--brand-grad); }
.subnav .subnav-head { background: var(--brand-grad); }

/* ── 분홍: 누르는 것 ── */
.cta, .dr-btn, .quick .q-call a { background: var(--magenta); }
.dept-filter button span { background: var(--grey-100); color: var(--purple-deep); }

/* ── 회색 바탕 카드 정리 ── */
.dr-tabs { background: var(--grey-100); box-shadow: none; }
.updates .post-list time, .panel-head a { background: var(--grey-100); }
.subnav li ul { background: var(--grey-50); }
.subnav-call { background: var(--grey-100); }
.subnav-call span, .subnav-call strong { color: var(--magenta-deep); }
.dept-note { background: var(--grey-50); }
.doc-photo, .dr-photo { background: var(--grey-100); }
.intro-doctors, .intro-emergency, .stop, .floors { background: var(--grey-0); }

/* ── 전문 분야: 버튼처럼 보이지 않게 점이 붙은 글자로 (아래 '진료스케줄 보기' 버튼과 구분) ── */
.dr-tags { gap: 6px 18px; }
.dr-tags li, .dr-tags li.is-key {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 15px; font-weight: 700; color: var(--muted);
}
.dr-tags li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.dr-tags li.is-key { color: var(--magenta-deep); }
.dr-tags li.is-key::before { background: var(--magenta); }