/* 한국식 달력(KRDS 참고, 라운드 48) — 3앱 공용. 토큰(--c-*)만 사용, 앱에 --h-control이 없으면 36px */
.krds-dp { position: relative; display: inline-flex; align-items: center; gap: 6px; width: 100%; max-width: 280px; vertical-align: middle; }
.krds-dp-dt { max-width: 300px; }
.krds-dp .krds-dp-input { flex: 1; min-width: 0; width: 100%; height: var(--f-h, var(--h-control, 36px)); padding: 0 12px; border: 1px solid var(--f-ctrl-line, var(--c-border-strong)); border-radius: var(--f-radius, var(--radius-sm, 4px)); font: inherit; font-size: var(--f-fs, 14px); background: var(--c-bg); color: var(--c-text); box-sizing: border-box; letter-spacing: .02em; }
.krds-dp .krds-dp-input:focus { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.krds-dp-btn { flex-shrink: 0; width: var(--f-h, var(--h-control, 36px)); height: var(--f-h, var(--h-control, 36px)); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--f-ctrl-line, var(--c-border-strong)); border-radius: var(--f-radius, var(--radius-sm, 4px)); background: var(--c-bg); color: var(--c-text-muted); cursor: pointer; padding: 0; }
.krds-dp-btn:hover { background: var(--c-bg-hover); color: var(--c-text); }
.krds-dp-btn:focus { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.krds-dp-btn svg { width: 18px; height: 18px; }
.krds-dp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 304px; padding: 12px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); font-size: 14px; color: var(--c-text); }
.krds-dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.krds-dp-nav { width: 32px; height: 32px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-bg); font-size: 20px; line-height: 1; cursor: pointer; color: var(--c-text); }
.krds-dp-nav:hover { background: var(--c-bg-hover); }
.krds-dp-head select { flex: 1; height: 32px; padding: 0 8px; border: 1px solid var(--c-border-strong); border-radius: 6px; font: inherit; font-size: 14px; background: var(--c-bg); color: var(--c-text); }
.krds-dp-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.krds-dp-grid th { font-weight: 600; font-size: 12px; color: var(--c-text-muted); padding: 4px 0 6px; text-align: center; }
.krds-dp-grid th.su, .krds-dp-day.su { color: var(--c-danger); }
.krds-dp-grid th.sa, .krds-dp-day.sa { color: var(--c-info); }
.krds-dp-grid td { padding: 1px; text-align: center; }
.krds-dp-day { width: 100%; height: 34px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: 14px; color: var(--c-text); cursor: pointer; font-variant-numeric: tabular-nums; }
.krds-dp-day:hover { background: var(--c-bg-hover); }
.krds-dp-day.old, .krds-dp-day.new { color: var(--c-text-disabled); }
.krds-dp-day.today { border-color: var(--c-primary); font-weight: 700; }
.krds-dp-day.selected { background: var(--c-primary); color: #ffffff; font-weight: 700; }
.krds-dp-day:disabled { color: var(--c-text-disabled); background: var(--c-bg-subtle); cursor: not-allowed; text-decoration: line-through; }
.krds-dp-day:focus { outline: 2px solid var(--c-focus); outline-offset: -1px; }
.krds-dp-time { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-border); font-size: 13px; color: var(--c-text-muted); }
.krds-dp-time select { height: 32px; padding: 0 8px; border: 1px solid var(--c-border-strong); border-radius: 6px; font: inherit; font-size: 14px; background: var(--c-bg); color: var(--c-text); }
.krds-dp-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-border); }
.krds-dp-foot .sp { flex: 1; }
.krds-dp-foot button { height: 32px; padding: 0 12px; border: 1px solid var(--c-border-strong); border-radius: 6px; background: var(--c-bg); font: inherit; font-size: 13px; cursor: pointer; color: var(--c-text); }
.krds-dp-foot button:hover { background: var(--c-bg-hover); }
.krds-dp-foot .krds-dp-ok { background: var(--c-primary); border-color: var(--c-primary); color: #ffffff; font-weight: 700; }
.krds-dp-foot .krds-dp-ok:hover { background: var(--c-primary-hover); }
@media (max-width: 560px) { .krds-dp-pop { width: min(304px, calc(100vw - 32px)); } }