/* 날짜 입력 부품 <date-field>(js/lib/date-field.js). PC 폭은 연도·달·달력을 여섯 줄로 맞춰 나란히, 좁은 폭은 위아래로 쌓는다. */
date-field{display:block;flex:1 1 100%;width:100%;min-width:0}
.df{container:df/inline-size;font-size:13px;color:var(--ink)}
.df button{font:inherit;color:inherit}
.df button:focus-visible,.df-line:focus-visible{outline:3px solid var(--accent);outline-offset:1px}

/* 숫자로 바로 치는 칸은 키보드가 있는 PC에만(폰에서는 달력이 더 빠르다) */
.df-line{display:none;width:100%;min-height:44px;margin-bottom:8px;padding:6px 12px;border:1.5px solid var(--rule);border-radius:5px;background:var(--card);color:var(--ink);font:700 18px var(--num);font-variant-numeric:tabular-nums}
.df-line::placeholder{color:var(--faint);font:500 14px var(--ko)}
.df-line:focus{border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.df-line:not([hidden]){display:block}}

.df-status{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 12px;min-height:32px;margin-bottom:8px;font-size:15px;font-weight:700}
.df-wait{font-size:13px;font-weight:400;color:var(--ink-2)}
.df-wait b{font-weight:700;color:var(--ink)}
.df-bad{color:var(--warn);font-weight:700}
.df-text b{font-family:var(--num)}
.df .df-link{flex:none;padding:4px 0;border:0;background:none;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.df-pick{display:grid;grid-template-columns:62px 104px minmax(0,1fr);gap:12px}
.df-body[hidden]{display:none}
.df-years,.df-months{display:grid;gap:4px;grid-template-rows:repeat(6,minmax(36px,1fr))}
.df-months{grid-template-columns:1fr 1fr}
.df .df-chip{min-height:36px;padding:0;border:1.5px solid var(--rule-2);border-radius:5px;background:var(--card);font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;touch-action:manipulation}
.df .df-year{font-family:var(--num);font-size:16px}
.df-chip b{font-family:var(--num);font-size:16px;font-weight:700}
.df .df-chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--card)}
.df .df-chip:disabled{background:transparent;opacity:.35;cursor:default}
.df .df-more{background:transparent;border-color:var(--rule);font-size:12px}

.df-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:2px;min-width:0}
.df-dow{display:grid;place-items:center;height:24px;font-size:12px;color:var(--muted)}
.df .df-cell{display:grid;grid-template-rows:22px 13px;align-content:center;justify-items:center;height:44px;padding:0;border:0;border-radius:5px;background:transparent;cursor:pointer;touch-action:manipulation}
.df-cell i{font:700 16px/22px var(--num);font-style:normal;font-variant-numeric:tabular-nums}
.df-cell small{font-size:12px;line-height:13px;font-weight:700;color:var(--muted);white-space:nowrap;letter-spacing:-.02em}
.df-cell.is-other i{color:var(--faint);font-weight:500}
.df .df-cell:disabled{cursor:default;opacity:.32}
@media (hover:hover){.df .df-cell:not(:disabled):not(.is-in):not(.is-out):hover{box-shadow:inset 0 0 0 1.5px var(--ink)}}
.df .df-cell.is-peek{background:var(--signal-soft);border-radius:0}
.df .df-cell.is-range{background:var(--signal);border-radius:0}
.df .df-cell.is-in,.df .df-cell.is-out{background:var(--ink)}
.df-cell.is-in i,.df-cell.is-out i,.df-cell.is-in small,.df-cell.is-out small{color:var(--card)}
.df .df-cell.has-out{border-radius:5px 0 0 5px}
.df .df-cell.is-out{border-radius:0 5px 5px 0}

/* 좁은 칸(폰, 호텔 패널): 연도 한 줄, 달 두 줄, 달력 */
@container df (max-width:480px){
  .df-pick{grid-template-columns:minmax(0,1fr);gap:6px}
  .df-years,.df-months{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none}
  .df-cal{margin-top:4px}
  .df .df-cell{height:46px}
  .df .df-chip{min-height:38px}
}
/* 아주 좁은 칸(320px 폰): 글자를 한 단계 줄여 칸 안에 둔다 */
@container df (max-width:300px){
  .df .df-year,.df-chip b{font-size:14px}
  .df .df-chip{font-size:12px}
  .df-cell small{font-size:10px;letter-spacing:-.04em}
}