@media (max-width: 640px) {
  .tc-dtp__panel { overflow-y: auto; } /* 높이는 datetime-picker.css의 100dvh 풀모달이 담당 (92vh 캡 제거) */
  .tc-dtp__times { border-bottom: 0; padding-bottom: 0; }
  .tc-dtp__time-row {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto 22px;
    gap: 8px;
    min-height: 58px;
    cursor: pointer;
  }
  .tc-dtp__time-row + .tc-dtp__time-row { margin-top: 12px; padding-top: 12px; }
  .tc-dtp__date { justify-self: end; transition: transform .22s ease; }
  .tc-dtp__time-row.is-expanded .tc-dtp__date { transform: translateX(-24px); }
  .tc-dtp__time-row > select { display: none; }
  .tc-dtp__time-value {
    min-width: 92px;
    color: var(--tds-text-general);
    text-align: right;
    white-space: nowrap;
  }
  .tc-dtp__time-row.is-expanded .tc-dtp__time-value { color: var(--tds-primary-general); }
  .tc-dtp__time-row.is-expanded .tc-dtp__time-value { visibility: hidden; }
  .tc-dtp__time-chevron {
    width: 20px;
    height: 20px;
    color: var(--tds-text-neutral);
    transition: transform .2s ease;
  }
  .tc-dtp__time-row.is-expanded .tc-dtp__time-chevron { transform: rotate(180deg); }
  .tc-dtp__wheel {
    grid-column: 2 / -1;
    width: 224px;
    justify-self: end;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .25s ease, opacity .18s ease, padding .25s ease;
  }
  .tc-dtp__time-row.is-expanded .tc-dtp__wheel {
    max-height: 136px;
    padding: 2px 12px 12px 0;
    opacity: 1;
  }
  /* 선택(가운데) 행 위아래, 컬럼별 라인 (두 열 사이는 비움) */
  .tc-dtp__wheel {
    position: relative;
    background-origin: content-box; background-clip: content-box; background-repeat: no-repeat;
    background-image: linear-gradient(var(--tds-line-general-alternative) 0 0), linear-gradient(var(--tds-line-general-alternative) 0 0), linear-gradient(var(--tds-line-general-alternative) 0 0), linear-gradient(var(--tds-line-general-alternative) 0 0);
    background-size: calc(50% - 14px) 1px;
    background-position: left 0 top 42px, left 0 top 84px, right 0 top 42px, right 0 top 84px;
  }
  .tc-dtp__wheel-col {
    height: 126px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    overscroll-behavior: contain;
    padding-block: 42px;
    box-sizing: border-box;
  }
  .tc-dtp__wheel-col::-webkit-scrollbar { display: none; }
  .tc-dtp__wheel-option {
    width: 100%;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tds-text-neutral);
    scroll-snap-align: center;
    cursor: pointer;
  }
  .tc-dtp__wheel-option.is-selected {
    color: var(--tds-primary-general);
    font-weight: 700;
  }
}

/* 픽업·반납 공통 아코디언 — 펼친 행도 날짜/휠/셰브론이 같은 상단선에서 시작 */
@media (max-width: 640px) {
  .tc-dtp__times { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0 4px; }
  .tc-dtp__time-row,
  .tc-dtp__time-row + .tc-dtp__time-row {
    grid-template-columns: 78px minmax(86px, 1fr) 112px 20px;
    gap: 8px;
    min-height: 58px;
    margin: 0;
    padding: 14px 0;
    align-items: start;
  }
  .tc-dtp__time-row + .tc-dtp__time-row { border-top: 1px solid var(--tds-line-general-alternative); }
  .tc-dtp__time-label { grid-column: 1; grid-row: 1; padding-top: 10px; }
  .tc-dtp__date {
    grid-column: 2; grid-row: 1; justify-self: end; padding-top: 10px;
    white-space: nowrap; transition: transform .22s ease;
  }
  .tc-dtp__time-value { grid-column: 3; grid-row: 1; padding-top: 10px; }
  .tc-dtp__time-chevron { grid-column: 4; grid-row: 1; margin-top: 12px; } /* 시간 텍스트와 세로 중앙 */
  .tc-dtp__wheel {
    grid-column: 3; grid-row: 1;
    width: 112px; justify-self: stretch; align-self: start;
  }
  .tc-dtp__time-row.is-expanded .tc-dtp__wheel { max-height: 136px; padding: 0; }
  .tc-dtp__time-row.is-expanded .tc-dtp__date { transform: translateX(-48px); }
}

@media (min-width: 641px) {
  .tc-dtp__times { display: grid; grid-template-columns: 1fr; gap: 0; }
  .tc-dtp__time-row,
  .tc-dtp__time-row + .tc-dtp__time-row {
    grid-template-columns: 86px minmax(112px, 1fr) 230px 20px;
    gap: 8px;
    min-height: 60px;
    margin: 0;
    padding: 16px 0;
    border-top: 0;
    align-items: start;
  }
  .tc-dtp__time-row + .tc-dtp__time-row { border-top: 1px solid var(--tds-line-general-alternative); }
  .tc-dtp__time-label { grid-column: 1; grid-row: 1; padding-top: 12px; }
  .tc-dtp__date {
    grid-column: 2; grid-row: 1; justify-self: end; padding-top: 12px;
    white-space: nowrap; transition: transform .22s ease;
  }
  .tc-dtp__time-value {
    display: block; grid-column: 3; grid-row: 1; padding-top: 12px;
    color: var(--tds-text-general); text-align: right; white-space: nowrap;
  }
  .tc-dtp__time-chevron {
    display: block; grid-column: 4; grid-row: 1; width: 20px; height: 20px;
    margin-top: 14px; transition: transform .2s ease; /* 시간 텍스트와 세로 중앙 */
  }
  .tc-dtp__wheel {
    grid-column: 3; grid-row: 1;
    width: 230px; justify-self: stretch; align-self: start;
  }
  .tc-dtp__time-row.is-expanded .tc-dtp__wheel { max-height: 154px; padding: 0; }
  .tc-dtp__time-row.is-expanded .tc-dtp__date { transform: translateX(-36px); }
  .tc-dtp__time-row.is-expanded .tc-dtp__time-chevron { transform: rotate(180deg); }
}
@media (min-width: 641px) {
  .tc-dtp__panel { max-height: calc(100vh - 40px); overflow-y: auto; }
  .tc-dtp__times {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .tc-dtp__time-row {
    position: relative;
    grid-template-columns: 92px minmax(0, 1fr);
    align-content: start;
    cursor: pointer;
  }
  .tc-dtp__time-row + .tc-dtp__time-row { margin-top: 0; padding-top: 0; border-top: 0; }
  .tc-dtp__date { justify-self: start; transition: none; }
  .tc-dtp__time-row.is-expanded .tc-dtp__date { transform: none; }
  .tc-dtp__time-row > select { display: none; }
  .tc-dtp__time-value { display: none; }
  .tc-dtp__time-row.is-expanded .tc-dtp__time-value { visibility: hidden; }
  .tc-dtp__time-chevron { display: none; }
  .tc-dtp__wheel {
    position: relative;
    grid-column: 1 / -1;
    width: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-height: 0;
    padding: 0 12px;
    overflow: hidden;
    opacity: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: max-height .2s ease, opacity .15s ease, padding .2s ease;
  }
  .tc-dtp__time-row.is-expanded .tc-dtp__wheel {
    max-height: 170px;
    padding: 2px 0 12px;
    opacity: 1;
  }
  .tc-dtp__wheel-col {
    height: 144px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    padding-block: 48px;
    box-sizing: border-box;
  }
  .tc-dtp__wheel-col::-webkit-scrollbar { display: none; }
  .tc-dtp__wheel-option {
    width: 100%; height: 48px; display: grid; place-items: center;
    padding: 0; border: 0;
    background: transparent; color: var(--tds-text-neutral); cursor: pointer;
    scroll-snap-align: center;
  }
  .tc-dtp__wheel {
    background-origin: content-box; background-clip: content-box; background-repeat: no-repeat;
    background-image: linear-gradient(var(--tds-line-general-alternative) 0 0), linear-gradient(var(--tds-line-general-alternative) 0 0), linear-gradient(var(--tds-line-general-alternative) 0 0), linear-gradient(var(--tds-line-general-alternative) 0 0);
    background-size: calc(50% - 14px) 1px;
    background-position: left 0 top 48px, left 0 top 96px, right 0 top 48px, right 0 top 96px;
  }
  .tc-dtp__wheel-option.is-selected { color: var(--tds-primary-general); font-weight: 700; }
}

/* 드래그 범위 미리보기 — 모바일·데스크탑 공통 */
.tc-dtp__day.is-drag-range::before {
  content: '';
  position: absolute;
  inset: 2px 0;
  z-index: 1;
  background: color-mix(in srgb, var(--tds-primary-general) 15%, transparent);
}
.tc-dtp__day.is-drag-start::before { left: 50%; }
.tc-dtp__day.is-drag-end::before { right: 50%; }
.tc-dtp__day.is-drag-start .tc-dtp__pill,
.tc-dtp__day.is-drag-end .tc-dtp__pill {
  background: var(--tds-primary-general);
  color: var(--tds-static-white);
}
/* 빨강·파랑 날짜도 드래그 중엔 동일 규칙 — 시작·끝은 흰색, 범위 안은 검정 (초록 배경 위 가독성) */
.tc-dtp__day.holiday.is-drag-start .tc-dtp__pill, .tc-dtp__day.sat.is-drag-start .tc-dtp__pill,
.tc-dtp__day.holiday.is-drag-end .tc-dtp__pill, .tc-dtp__day.sat.is-drag-end .tc-dtp__pill {
  color: var(--tds-static-white);
}
.tc-dtp__day.holiday.is-drag-range:not(.is-drag-start):not(.is-drag-end) .tc-dtp__pill,
.tc-dtp__day.sat.is-drag-range:not(.is-drag-start):not(.is-drag-end) .tc-dtp__pill {
  color: var(--tds-text-general);
}

/* 최종 반응형 배치: 모바일·데스크톱 동일한 단일 아코디언 */
@media (max-width: 640px) {
  .tc-dtp__times { display:grid; grid-template-columns:1fr; gap:0; padding:0 4px; }
  .tc-dtp__time-row,
  .tc-dtp__time-row + .tc-dtp__time-row {
    grid-template-columns:78px minmax(86px,1fr) 112px 20px;
    gap:8px; min-height:58px; margin:0; padding:14px 0; align-items:start;
  }
  .tc-dtp__time-row + .tc-dtp__time-row { border-top:1px solid var(--tds-line-general-alternative); }
  .tc-dtp__time-label { grid-column:1; grid-row:1; padding-top:10px; }
  .tc-dtp__date { grid-column:2; grid-row:1; justify-self:end; padding-top:10px; white-space:nowrap; transition:transform .22s ease; }
  .tc-dtp__time-value { grid-column:3; grid-row:1; padding-top:10px; }
  .tc-dtp__time-chevron { grid-column:4; grid-row:1; margin-top:10px; }
  .tc-dtp__wheel { grid-column:3; grid-row:1; width:112px; justify-self:stretch; align-self:start; }
  .tc-dtp__time-row.is-expanded .tc-dtp__wheel { max-height:136px; padding:0; }
  .tc-dtp__time-row.is-expanded .tc-dtp__date { transform:translateX(-48px); }
}
@media (min-width: 641px) {
  .tc-dtp__times { display:grid; grid-template-columns:1fr; gap:0; }
  .tc-dtp__time-row,
  .tc-dtp__time-row + .tc-dtp__time-row {
    grid-template-columns:86px minmax(112px,1fr) 230px 20px;
    gap:8px; min-height:60px; margin:0; padding:16px 0; border-top:0; align-items:start;
  }
  .tc-dtp__time-row + .tc-dtp__time-row { border-top:1px solid var(--tds-line-general-alternative); }
  .tc-dtp__time-label { grid-column:1; grid-row:1; padding-top:12px; }
  .tc-dtp__date { grid-column:2; grid-row:1; justify-self:end; padding-top:12px; white-space:nowrap; transition:transform .22s ease; }
  .tc-dtp__time-value { display:block; grid-column:3; grid-row:1; padding-top:12px; color:var(--tds-text-general); text-align:right; white-space:nowrap; }
  .tc-dtp__time-chevron { display:block; grid-column:4; grid-row:1; width:20px; height:20px; margin-top:10px; transition:transform .2s ease; }
  .tc-dtp__wheel { position:static; grid-column:3; grid-row:1; width:230px; justify-self:stretch; align-self:start; }
  .tc-dtp__time-row.is-expanded .tc-dtp__wheel { max-height:154px; padding:0; opacity:1; }
  .tc-dtp__time-row.is-expanded .tc-dtp__date { transform:translateX(-36px); }
  .tc-dtp__time-row.is-expanded .tc-dtp__time-chevron { transform:rotate(180deg); }
}

@media (min-width: 641px) {
  .tc-dtp__times { border-bottom: 0; }
  .tc-dtp__time-row,
  .tc-dtp__time-row + .tc-dtp__time-row { padding-top: 16px; padding-bottom: 16px; }
  .tc-dtp__time-row.is-expanded .tc-dtp__time-chevron {
    margin-top: 10px;
    align-self: start;
  }
}

.tc-dtp__day.selected .tc-dtp__pill {
  position: relative;
  z-index: 4;
  border-radius: 9999px;
  overflow: hidden;
}
.tc-dtp__band { z-index: 1; }

/* 데스크탑: 달력 아래 시간 행들 상하 간격 균일화 */
@media (min-width: 641px) {
  .tc-dtp__times { margin-top: 16px; padding: 4px; }
  .tc-dtp__time-row { min-height: 64px; }
}
