/* ============================================================
   PetCare+ · 커스텀 날짜/시간 피커
   - 네이티브 date/time 대신 디자인 톤에 맞춘 바텀시트 피커
   ============================================================ */

/* ============================================================
   피커 CSS 변수 브릿지
   — record.css(--bg, --primary 등)와 style.css(--color-primary 등)
     양쪽 모두에서 동작하도록 하드코딩 fallback을 통일
   ============================================================ */

/* 트리거 버튼 (입력칸처럼 보이되 탭하면 피커가 열림) */
.pk-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border: 1.5px solid #EAEEEA;
  border-radius: 8px;
  background: #fff;
  font-size: 14px; font-weight: 500; color: #25332E;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s;
}
.pk-trigger .pk-ic {
  color: #A3A3A3;
  font-size: 20px;
  flex-shrink: 0;
  /* Material Symbols 아이콘 표시 보장 */
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'wght' 300, 'opsz' 24, 'FILL' 0, 'GRAD' 0;
  font-style: normal;
  line-height: 1;
}
.pk-trigger .pk-val { flex: 1; }
.pk-trigger.empty .pk-val { color: #A3A3A3; font-weight: 400; }
.pk-trigger:active { border-color: #6FAF9A; }

/* 오버레이 + 시트 */
.pk-overlay {
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 430px);
  max-width: 430px;
  z-index: 9999;
  background: rgba(20, 28, 23, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s cubic-bezier(0.22,1,0.36,1);
}
/* PC: .app과 동일한 상하 여백 + 둥근 모서리 */
@media (min-width: 480px) {
  .pk-overlay {
    top: 28px;
    bottom: auto;
    height: min(900px, calc(100dvh - 56px));
    border-radius: 40px;
    overflow: hidden;
  }
}
.pk-overlay.show { opacity: 1; pointer-events: auto; }
.pk-sheet {
  width: 100%;
  background: #fff;
  border-radius: 18px 22px 0 0;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 8px));
  transform: translateY(16px);
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: 90dvh;
}
.pk-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.pk-overlay.show .pk-sheet { transform: translateY(0); }
.pk-handle { width: 40px; height: 5px; border-radius: 3px; background: #E0E5E0; margin: 0 auto 18px; }
.pk-title { font-size: 17px; font-weight: 800; text-align: center; margin-bottom: 16px; color: #1a2a22; letter-spacing: -0.02em; }

/* ── 달력 ─────────────────────────────────────────────── */
.pk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pk-cal-head .pk-month { font-size: 16px; font-weight: 700; color: #1a2a22; }
.pk-month-btn {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 16px; font-weight: 700; color: #1a2a22;
  background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 8px;
  transition: background 0.15s;
}
.pk-month-btn:active { background: #DDEFE7; }
.pk-month-arrow {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'wght' 300, 'opsz' 24, 'FILL' 0, 'GRAD' 0;
  font-style: normal; line-height: 1; font-size: 20px;
  color: #6FAF9A; transition: transform 0.2s;
}
.pk-month-arrow.open { transform: rotate(180deg); }
.pk-year-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  max-height: 260px; overflow-y: auto; padding: 4px 0;
}
.pk-year-opt {
  padding: 12px 6px; border-radius: 10px; font-size: 15px; font-weight: 600;
  color: #25332E; background: #F4F7F5; border: none; cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: center;
}
.pk-year-opt:active { background: #DDEFE7; }
.pk-year-opt.sel { background: #6FAF9A; color: #fff; font-weight: 800; }
.pk-nav {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #738079; cursor: pointer;
  transition: background 0.15s;
}
.pk-nav:active { background: #DDEFE7; }
/* 달력 내비 아이콘 */
.pk-nav .material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'wght' 300, 'opsz' 24, 'FILL' 0, 'GRAD' 0;
  font-size: 22px; font-style: normal; line-height: 1;
}
.pk-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 38px;   /* 모든 행 높이 고정 — empty 포함 */
  width: 100%;
  box-sizing: border-box;
}
/* 요일 헤더 — pk-grid와 분리된 별도 행 */
.pk-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}
.pk-dow { text-align: center; font-size: 12px; font-weight: 600; color: #A3A3A3; padding: 4px 0 6px; }
.pk-dow.sun { color: #D9745E; }
.pk-cell {
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; color: #25332E;
  position: relative; cursor: pointer;
}
.pk-cell::before {
  content: ""; position: absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  transition: background 0.12s;
}
.pk-cell span { position: relative; z-index: 1; }
.pk-cell:not(.empty):not(.sel):active::before { background: #DDEFE7; }
.pk-cell.muted { color: #A3A3A3; opacity: .5; }
.pk-cell.today::before {
  border: 2px solid #6FAF9A;
}
.pk-cell.today::after {
  content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%;
  background: #6FAF9A; z-index: 2;
}
.pk-cell.sel::before { background: #6FAF9A; border: none; }
.pk-cell.sel { color: #fff; font-weight: 700; }
.pk-cell.sel.today::after { background: #fff; }
.pk-cell.empty { visibility: hidden; pointer-events: none; }

/* ── 시간 휠 ───────────────────────────────────────────── */
.pk-time { display: flex; align-items: stretch; justify-content: center; gap: 6px; height: 180px; }
.pk-col {
  flex: 1; max-width: 110px; overflow-y: auto; scroll-snap-type: y mandatory;
  text-align: center; position: relative;
  -ms-overflow-style: none; scrollbar-width: none;
}
.pk-col::-webkit-scrollbar { display: none; }
.pk-col .pk-opt {
  scroll-snap-align: center; padding: 12px 0; font-size: 17px; font-weight: 600;
  color: #A3A3A3; cursor: pointer;
}
.pk-col .pk-opt.sel { color: #315B4E; font-weight: 800; font-size: 19px; }
.pk-time-mid {
  position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%);
  height: 46px; border-top: 1.5px solid #EAEEEA; border-bottom: 1.5px solid #EAEEEA;
  pointer-events: none; border-radius: 8px;
}
.pk-time-wrap { position: relative; }

/* pk-quick 제거 */
.pk-quick { display: none; }

/* 하단 버튼 */
.pk-foot { display: flex; gap: 10px; margin-top: 20px; }
.pk-btn {
  flex: 1; padding: 14px; border-radius: 9px; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: opacity 0.15s;
}
.pk-btn.ghost { background: #F0F4F2; color: #738079; flex: 0 0 88px; }
.pk-btn.ghost:active { opacity: 0.7; }
.pk-btn.primary { background: #6FAF9A; color: #fff; }
.pk-btn.primary:active { opacity: .88; }