/* stagePAN 캘린더(calendar) 전용 스타일 — common.css 토큰만 쓴다 */

/* 제목 입력칸이 없으므로 아이콘 버튼을 오른쪽에 붙인다 */
.kt-topbar__tools { margin-left: auto; }

/* hidden 속성이 컴포넌트의 display 값에 덮이지 않게 */
#calendar [hidden] { display: none !important; }

/* ---- 결과 띠 ---- */
.cal-strip .cal-sub { margin-top: var(--kt-space-2); }
.cal-strip .cal-sub:first-child,
.cal-strip .cal-dnum[hidden] + .cal-sub { margin-top: 0; }
.cal-strip .cal-dnum + .cal-sub { margin-top: var(--kt-space-3); }
.cal-strip .cal-sub2 { margin-top: var(--kt-space-1); font-size: var(--kt-fs-s); }

/* ---- 저장 줄(날짜를 골랐을 때만) ---- */
.cal-form {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--kt-space-2) var(--kt-space-3);
}
.cal-field { flex: 1 1 220px; min-width: 0; }
.cal-form-btns { display: flex; flex-wrap: wrap; gap: var(--kt-space-2); }
.cal-msg { flex-basis: 100%; text-align: left; }
.cal-msg:empty { display: none; }

/* ---- 달력 + 목록 배치: 960px 이상 2 : 1 ---- */
.cal-layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-4);
  align-items: start;
}
@media (min-width: 960px) {
  .cal-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* ---- 달력 머리: [<] [연도] [월] [>] [오늘] ---- */
.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--kt-space-2);
  margin-bottom: var(--kt-space-3);
}
.cal-nav { font-size: var(--kt-fs-l); line-height: 1; }
.cal-today-btn { margin-left: auto; }
.cal-select {
  min-height: 44px;
  padding: 0 var(--kt-space-2);
  border: 2px solid var(--kt-ui-line);
  border-radius: var(--kt-radius-s);
  background: var(--kt-surface);
  color: var(--kt-ink);
  font-weight: 700;
  font-size: var(--kt-fs-m);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cal-noholiday { margin: 0 0 var(--kt-space-2); text-align: center; }

/* ---- 달력 칸 ---- */
.cal-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.cal-grid th {
  padding: var(--kt-space-1) 0 var(--kt-space-2);
  font-size: var(--kt-fs-s);
  font-weight: 700;
  color: var(--kt-ink-soft);
  text-align: center;
}
.cal-grid th.cal-sun { color: var(--kt-sun); }
.cal-grid th.cal-sat { color: var(--kt-sat); }
.cal-grid td { padding: 2px; vertical-align: top; }

.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: var(--kt-space-1) 2px var(--kt-space-2);
  border: 3px solid transparent;
  border-radius: var(--kt-radius-s);
  background: transparent;
  color: var(--kt-ink);
  cursor: pointer;
}
.cal-day:hover { background: var(--kt-muted-bg); }
.cal-day__num {
  font-weight: 700;
  font-size: var(--kt-fs-m);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.cal-day__name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.3;
}
.cal-day--sat { color: var(--kt-sat); }
.cal-day--sun,
.cal-day--holiday { color: var(--kt-sun); }

/* 오늘: 작은 점수판 */
.cal-day--today,
.cal-day--today:hover {
  background: var(--kt-board);
  color: var(--kt-board-ink);
}
.cal-day--today .cal-day__name { color: var(--kt-board-text); }
.cal-day--today:focus-visible { outline-color: var(--kt-focus); }

/* 고른 날짜: 청군 3px 테두리 */
.cal-day--selected { border-color: var(--kt-ink); }

/* 저장한 D-day: 칸 아래쪽 청군 점 */
.cal-day--saved::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--kt-ink);
}
.cal-day--today.cal-day--saved::after { background: var(--kt-board-ink); }

/* 달 이동 밀림(0.18초) */
.cal-slide-next { animation: cal-in-next 0.18s ease-out; }
.cal-slide-prev { animation: cal-in-prev 0.18s ease-out; }
@keyframes cal-in-next { from { transform: translateX(16px); opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes cal-in-prev { from { transform: translateX(-16px); opacity: 0.3; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cal-slide-next, .cal-slide-prev { animation: none !important; }
}
/* 포커스 테두리가 잘리지 않도록 overflow는 그대로 둔다(밀림 폭 16px은 body가 가로 스크롤을 막음) */

.cal-keys { margin-top: var(--kt-space-2); }

/* ---- D-day 목록 ---- */
.cal-list-title {
  margin: 0 0 var(--kt-space-3);
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-fs-l);
  line-height: 1.3;
}
.cal-item__go {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kt-ink);
  text-align: left;
  cursor: pointer;
}
.cal-item__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.cal-item__date { font-size: var(--kt-fs-s); color: var(--kt-ink-soft); font-variant-numeric: tabular-nums; }
.cal-item__go:hover .cal-item__name { text-decoration: underline; }
.cal-item__dday { flex: 0 0 auto; color: var(--kt-ink); font-weight: 600; }
.cal-item--past .cal-item__dday { color: var(--kt-ink-soft); }
.cal-item__del { flex: 0 0 auto; }
.cal-list-foot { margin-top: var(--kt-space-3); text-align: right; }

/* ---- 좁은 화면: 칸 44px 이상 확보 ---- */
@media (max-width: 599px) {
  .cal-card { padding: var(--kt-space-2); }
  .cal-grid td { padding: 0; }
  .cal-day { min-height: 50px; padding-inline: 0; border-width: 2px; }
  .cal-day__name { font-size: 11px; }
  .cal-day__num { font-size: var(--kt-fs-s); }
  .cal-today-btn { margin-left: 0; }
  .cal-head { gap: 5px; }
  /* 기본 화살표 대신 좁은 화살표(토큰 색 그라데이션)로 폭을 줄여 한 줄에 담는다 */
  .cal-select {
    -webkit-appearance: none;
    appearance: none;
    padding: 0 16px 0 8px;
    font-size: var(--kt-fs-s);
    background:
      linear-gradient(45deg, transparent 50%, var(--kt-ui-line) 50%) right 10px center / 5px 5px no-repeat,
      linear-gradient(135deg, var(--kt-ui-line) 50%, transparent 50%) right 5px center / 5px 5px no-repeat,
      var(--kt-surface);
  }
  .cal-today-btn { padding: 0 var(--kt-space-2); font-size: var(--kt-fs-s); }
}

/* ---- 전체화면: 결과 띠와 달력만 크게 ---- */
.kt-is-fullscreen .cal-layout { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin-inline: auto; }
.kt-is-fullscreen .cal-day { min-height: min(7vh, 80px); }
.kt-is-fullscreen .cal-keys { display: none; }
.kt-is-fullscreen .cal-day__num { font-size: max(var(--kt-fs-m), min(3vw, 4vh)); }