.date-picker {
  position: relative;
}

.date-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--text);
  background: #fbfdff;
  text-align: left;
  cursor: pointer;
}

.date-picker-trigger.has-value {
  color: var(--navy);
  font-weight: 700;
}

.date-picker-trigger svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.date-picker-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 34px rgba(20, 59, 92, 0.18);
}

.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 6px 4px 12px;
  border-bottom: 1px solid var(--line);
}

.dp-head span {
  font-weight: 800;
  color: var(--navy);
  font-size: 0.96rem;
}

.dp-nav {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}

/* 글자(‹ ›)로 화살표를 그리면 글꼴마다 위아래·좌우 여백이 달라 동그라미
   한가운데에 똑바로 맞지 않았다(2026-09-25 지적). 정확히 가운데 그릴 수 있는
   SVG 화살표로 바꿔서 근본적으로 고쳤다 - 이 화살표를 쓰는 다른 버튼
   (.center-gallery-arrow · .service-carousel-arrow · .facility-nav)도 같은
   방식으로 맞췄다. */
.dp-nav svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dp-nav:hover {
  background: rgba(31, 95, 159, 0.1);
}

.dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.dp-weekdays span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  padding: 4px 0;
}

.dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dp-day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  /* 본문 줄간격(line-height)을 그대로 물려받으면 숫자 한 줄인데도 칸 안쪽
     "최소 높이"가 그 줄간격만큼 커지고, aspect-ratio 때문에 폭도 같이 커져서
     7칸 합이 달력 폭을 넘어 마지막 열(토요일) 숫자가 달력 밖으로 밀려났다
     (2026-09-25). 숫자 한 줄에 맞게 줄간격을 1로 눌러 원인을 없앴다. */
  line-height: 1;
}

/* 숫자 글꼴은 내림선(g, y 같은 아래로 내려가는 부분)이 없어서, line-height:1로
   가운데를 맞춰도 눈에는 살짝 위로 붙어 보인다(2026-09-25 "선택 원이랑 숫자랑
   안 맞다" 지적). 아주 조금만 아래로 내려서 눈으로 봤을 때 원 한가운데 오게 한다. */
.dp-day-num {
  transform: translateY(0.08em);
}

/* 휴무일 툴팁 - 네이티브 title 속성은 뜨기까지 시간이 걸려서, 마우스를 올리자마자 바로 보이는 커스텀 툴팁으로 구현 */
.dp-day[data-tooltip] {
  overflow: visible;
}

.dp-day[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  background: var(--navy-deep);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
}

.dp-day[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

.dp-day:hover:not(:disabled):not(.is-closed):not(.is-selected) {
  background: rgba(31, 95, 159, 0.12);
}

.dp-day:disabled,
.dp-day.is-closed {
  color: #c7d2db;
  cursor: not-allowed;
}

.dp-day.is-empty {
  visibility: hidden;
}

.dp-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* 일요일 · 공휴일 표시 (휴무로 비활성화된 날짜는 옅은 빨강으로 구분) */
.dp-day.is-holiday {
  color: #e0483f;
}

.dp-day.is-holiday:disabled,
.dp-day.is-holiday.is-closed {
  color: #f0b6b1;
}

.dp-day.is-selected {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  font-weight: 800;
}

.dp-day.is-selected.is-holiday {
  color: #fff;
}

/* 휴대폰(2026-09-25 원장님 요청)에서 달력을 옆으로 훨씬 넓게 보여준다.
   드롭다운으로 뜨는 기본 달력(예: 예약 취소 화면)은 항상 280px 고정폭이라
   화면이 좁을 때 숫자 칸이 빠듯했다. 화면 폭에 맞춰 최대 360px까지 넓히고,
   버튼 왼쪽 끝(left:0) 기준이 아니라 가운데 정렬로 바꿔 어느 위치에서 열려도
   화면 밖으로 잘리지 않게 한다. 컴퓨터 화면은 기존 280px 그대로 둔다. */
@media (max-width: 640px) {
  .date-picker-panel {
    left: 50%;
    width: min(440px, calc(100vw - 16px));
    transform: translateX(-50%);
  }

  .dp-day {
    font-size: 1.05rem;
    min-height: 44px;
  }

  /* 2026-09-26 — 날짜 칸 사이 간격을 살짝 넓혀서, 옆 날짜를 잘못 짚는
     일이 줄게 한다(어르신들은 손가락이 커서 칸이 붙어 있으면 옆 칸이
     같이 눌리기 쉽다). */
  .dp-days {
    gap: 4px;
  }

  /* 예약 신청서(consult-apply.html)의 항상 펼쳐진 달력은 이미 폭 100%라
     위 가운데 정렬(left/transform)이 필요 없다 - 그대로 두면 자기 너비의
     절반만큼 왼쪽으로 밀려나 잘려 보인다. 제자리로 되돌린다.
     ⚠️ 폭·안쪽 여백은 여기서 고치지 말 것 - consult-apply.css가 이 파일보다
     나중에 불려서(consult-apply.html의 <link> 순서) 같은 선택자를 여기
     적어도 항상 그쪽이 이긴다(2026-09-25, 한 번 이걸로 헛수고했다). 그 달력의
     폭·여백은 consult-apply.css의 `.pamphlet-schedule .date-picker-panel`을 고칠 것. */
  .pamphlet-schedule .date-picker-panel {
    left: auto;
    transform: none;
  }
}