/* content/set page */

/* ── 요약 카드 섹션 ──────────────────────────────────────── */
.cs-summary-section {
    margin-bottom: 24px;
}
.search {
    margin-bottom: 16px;
}

/* ── Search bar ──────────────────────────────────────────── */
#content_set_searchWrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
#content_set_searchWrap .form--search {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
#content_set_siteFilterWrap,
#content_set_searchTypeWrap {
    flex: none;
    width: 150px;
}
#content_set_searchWrap .form__field--search {
    flex: none;
    width: 360px;
}

/* ── Table ───────────────────────────────────────────────── */
.board--app-manage #content_set_tableBody tr td:nth-child(2),
.board--app-manage #content_set_tableBody tr td:nth-child(3),
.board--app-manage #content_set_tableBody tr td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#content_set_tableBody tr:hover td {
    background-color: #f1f5f9;
}

/* ── Detail modal — 정류장 목록 ──────────────────────────── */
.cs-station-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}
.cs-station-list__item {
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
}
.cs-station-list__empty {
    padding: 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

/* ── 스텝 아이콘 상태별 표시 ─────────────────────────────── */
.step-icon {
    display: none;
    width: 40px;
    height: 40px;
    margin-top:0px;
}
.step__item--upcoming .step-icon--upcoming,
.step__item--current  .step-icon--current,
.step__item--complete .step-icon--complete {
    display: block;
}

/* ── Step 모달 (등록/수정) ───────────────────────────────── */

/* 모달 body → flex column, 스크롤 없음 */
#content_set_registerBackdrop .modal__body,
#content_set_editBackdrop .modal__body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* mdm-wrapper: 남은 세로 공간 채우기 */
#content_set_registerBackdrop .mdm-wrapper,
#content_set_editBackdrop .mdm-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 스텝 인디케이터: 고정 높이 */
#content_set_registerBackdrop .step,
#content_set_editBackdrop .step {
    flex-shrink: 0;
}

/* 스텝 콘텐츠: 남은 공간 채우기 */
#content_set_registerBackdrop .mdm-content,
#content_set_editBackdrop .mdm-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* modal-card: 세로 flex */
#content_set_registerBackdrop .modal-card,
#content_set_editBackdrop .modal-card {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* modal-card__header: 고정 */
#content_set_registerBackdrop .modal-card__header,
#content_set_editBackdrop .modal-card__header {
    flex-shrink: 0;
}

/* modal-card__body: 남은 공간 */
#content_set_registerBackdrop .modal-card__body,
#content_set_editBackdrop .modal-card__body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* modal_card_content: 세로 flex */
#content_set_registerBackdrop .modal_card_content,
#content_set_editBackdrop .modal_card_content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 검색바·페이지네이션: 고정 높이 */
#content_set_registerBackdrop .search,
#content_set_editBackdrop .search,
#content_set_registerBackdrop .cs-step-paging,
#content_set_editBackdrop .cs-step-paging,
#content_set_registerBackdrop .cs-station-select-info,
#content_set_editBackdrop .cs-station-select-info {
    flex-shrink: 0;
}

/* 테이블 영역: 남은 공간에서 스크롤 */
.cs-step-table-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* 선택된 행 하이라이트 */
#cs_reg_siteList tr.is-selected td,
#cs_reg_textList tr.is-selected td,
#cs_edit_textList tr.is-selected td {
    background-color: #eff6ff;
}
#cs_reg_stationList tr.is-selected td,
#cs_edit_stationList tr.is-selected td {
    background-color: #eff6ff;
}

/* 선택 개수 표시 */
.cs-station-select-info {
    padding: 6px 4px;
    font-size: 13px;
    color: #64748b;
    text-align: right;
}

/* 스텝 모달 페이지네이션 */
.cs-step-paging {
    justify-content: center;
}

/* ── 정류장 선택 스텝에서 모달 넓게 ────────────────────── */
.modal--form.modal--station-step {
    width: min(1060px, 100vw - 32px);
    height: calc(90vh - 32px);
}

/* ── 정류장 단말 선택 스텝 - 좌우 분할 ──────────────────── */
.cs-station-split {
    display: flex;
    flex: 1;
    align-items: stretch;
    min-height: 0;
    gap: 10px;
    overflow: hidden;
}

.cs-station-split__left {
    flex: 0 0 400px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #d7e4f1;
    border-radius: var(--al-radius-sm);
    background: var(--al-color-surface);
}

.cs-station-split__right {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #d7e4f1;
    border-radius: var(--al-radius-sm);
    background: var(--al-color-surface);
}

/* ── 분할 패널 공통 헤더 ─────────────────────────────────── */
.cs-panel-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 13px 8px;
    border-bottom: 1px solid #dce4ec;
    background: transparent;
}

.cs-panel-head__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--al-color-text-subtle);
    letter-spacing: -0.01em;
}

.cs-panel-head__count {
    font-size: 12px;
    color: #64748b;
}

/* ── 검색 영역 ───────────────────────────────────────────── */
.cs-panel-search {
    flex-shrink: 0;
    padding: 8px 11px;
}

/* ── 하단 (선택 수 + 페이지네이션) ──────────────────────── */
.cs-panel-foot {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--al-color-bg);
}

.cs-panel-foot .cs-station-select-info {
    align-self: flex-end;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 13px;
    font-size: 12px;
    color: #64748b;
    text-align: right;
}

.cs-panel-foot .cs-step-paging {
    padding: 4px 0;
    min-height: 30px;
}

/* ── 지도 영역 ───────────────────────────────────────────── */
.cs-station-split__map-body {
    flex: 1;
    min-height: 0;
    position: relative;
}

.cs-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--al-color-bg);
    z-index: 5;
    pointer-events: none;
}

.cs-map-placeholder__icon {
    width: 48px;
    height: 48px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2224%22%20fill%3D%22%23f0f4f8%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M24%2011C19.03%2011%2015%2015.03%2015%2020c0%207.25%209%2017%209%2017s9-9.75%209-17c0-4.97-4.03-9-9-9zm0%2012a3%203%200%201%200%200-6%203%203%200%200%200%200%206z%22%20fill%3D%22%2394A3B8%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}

.cs-map-placeholder p {
    font-size: 13px;
    color: #64748b;
    text-align: center;
    line-height: 1.6;
}

.cs-station-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}