.stab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
    font-size: 11px; font-weight: 600; line-height: 1; border-radius: 9px;
    background: var(--red); color: #fff;
}

#enrollBody tr.clk { cursor: pointer; }
#enrollBody tr.clk:hover { background: var(--suf2); }
#enrollBody td.strong { font-weight: 600; }
#enrollBody .muted { color: var(--t3); }
#enrollBody .est-dot {
    display: inline-block; font-size: 12px; font-weight: 500;
    color: var(--blue); background: var(--bl2); padding: 2px 8px; border-radius: 6px;
}

.est { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 20px; vertical-align: middle; }
.est-pending { background: var(--am2); color: var(--amber); }
.est-confirmed { background: var(--gn2); color: var(--green); }
.est-rejected { background: var(--rd2); color: var(--red); }

/* ── 서식형 상세 모달 ── */
#detailModal .m-hd { background: #125e9c; border-bottom: 0; }
#detailModal .m-tt { color: #fff; }
#detailModal .m-x { color: rgba(255, 255, 255, .85); }
#detailModal #dStatus { background: rgba(255, 255, 255, .22); color: #fff; }

.eform { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--bd); margin-bottom: 2px; table-layout: fixed; }
.eform th.efk {
    background: var(--bl2); color: var(--blue); font-weight: 500; text-align: left;
    padding: 9px 12px; width: 98px; border: 1px solid var(--bd); white-space: nowrap; vertical-align: top;
}
.eform td.efv { padding: 9px 12px; border: 1px solid var(--bd); color: var(--t1); word-break: break-word; }
.eform .muted { color: var(--t3); }

.ed-cap { font-size: 12px; font-weight: 600; color: var(--blue); letter-spacing: .02em; margin: 16px 0 7px; }

.ed-warn {
    display: flex; align-items: center; gap: 7px; background: var(--am2); color: var(--amber);
    border-radius: var(--r); padding: 9px 12px; font-size: 13px; margin-bottom: 14px; line-height: 1.5;
}
.ed-warn svg { flex: none; }
.ed-warn b { font-weight: 600; }

.ed-signrow { display: grid; grid-template-columns: 1fr 170px; gap: 12px; margin-top: 14px; align-items: stretch; }
.ed-agree {
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    border: 1px solid var(--bd); border-radius: var(--r); padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--t1);
}
.ed-agree > svg { color: var(--green); vertical-align: -2px; margin-right: 4px; }
.ed-agree-sub { font-size: 11.5px; font-weight: 400; color: var(--t3); }
.ed-sign {
    border: 1px solid var(--bd2); border-radius: var(--r); text-align: center; padding: 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 62px;
}
.ed-sign-cap { font-size: 10.5px; color: var(--t3); margin-bottom: 3px; }
.ed-sign img { max-width: 150px; max-height: 52px; background: #fff; border-radius: 4px; }
.ed-sign .muted { color: var(--t3); font-size: 12px; }

.ed-done { margin-top: 12px; background: var(--gn2); color: var(--green); border-radius: var(--r); padding: 9px 12px; font-size: 13px; font-weight: 500; }
.ed-reject { margin-top: 12px; background: var(--rd2); color: var(--red); border-radius: var(--r); padding: 9px 12px; font-size: 13px; font-weight: 500; }

#detailFoot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
#detailFoot .btn { white-space: nowrap; }
#detailFoot .btn-d { margin-right: 0; }
.ed-foot-l { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* 신청서까지 쓴 건은 버튼이 일곱 개다. 두 줄로 나누고 줄마다 이름표를 달아 무엇을 하는 줄인지 적는다. */
.ed-foot-2 { flex: 1 1 100%; display: flex; flex-direction: column; gap: 9px; }
.ed-foot-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.ed-foot-cap { flex: none; width: 74px; font-size: 11px; font-weight: 700; color: var(--t3); }
.ed-foot-gap { flex: 1; min-width: 0; }
.ed-foot-sep { height: 1px; background: var(--bd); margin: 1px -18px; }
.ed-foot-r { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }

/* ── 편집 모드 ── */
.ed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-chip { appearance: none; font: inherit; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--bd2); background: var(--bg3); color: var(--t2); cursor: pointer; }
.ed-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.ed-shuttle-wrap { margin-top: 10px; }

/* 셔틀 승·하차 — 시트풍 표. 행=타는 곳/내리는 곳, 열=지점명·주소·상세. */
.ed-sh-zones { display: grid; grid-template-columns: 96px minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 7px 8px; align-items: center; margin-bottom: 14px;
    border: 1px solid var(--bd); border-radius: 10px; padding: 11px 13px 13px; background: var(--bg2); }
.ed-sh-th { font-size: 11px; font-weight: 700; color: var(--t3); padding-left: 2px; }
.ed-sh-hint { font-weight: 500; color: var(--bd2); }
.ed-sh-side { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 6px; }
.ed-sh-side b { font-size: 13px; font-weight: 700; color: var(--t1); white-space: nowrap; }
.ed-sh-dot { width: 9px; height: 9px; border-radius: 3px; }
.ed-sh-side .ed-sh-tag { grid-column: 2; justify-self: start; }
.ed-sh-board .ed-sh-dot { background: var(--blue); }
.ed-sh-alight .ed-sh-dot { background: var(--green); }
.ed-sh-tag { font-size: 10.5px; font-weight: 700; color: var(--t3); background: var(--surface); border: 1px solid var(--bd2); border-radius: 5px; padding: 1px 6px; }
.ed-sh-spot { font-weight: 600; }
.ed-conn-g { margin-bottom: 0; }

.ed-connrow { display: grid; grid-template-columns: 116px minmax(0, 1fr) 36px; gap: 8px; margin-bottom: 8px; align-items: center; }
.ed-connrow.has-etc { grid-template-columns: 116px 132px minmax(0, 1fr) 36px; }
.ed-conn-etc[hidden] { display: none; }

/* 좁은 화면: 표를 접어 '타는 곳 → 칸들' 한 줄기로 내린다. 눌러 담으면 다 읽을 수 없다. */
@media (max-width: 820px) {
    .ed-sh-zones { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .ed-sh-th { display: none; }
    .ed-sh-side { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
    .ed-sh-side .ed-sh-tag { grid-column: auto; }
    .ed-foot-cap { width: 100%; }
    .ed-foot-gap { display: none; }
    .ed-connrow, .ed-connrow.has-etc { grid-template-columns: minmax(0, 1fr) 36px; }
    .ed-connrow > select { grid-column: 1; grid-row: 1; }
    .ed-connrow > .ed-rm { grid-column: 2; grid-row: 1; }
    .ed-connrow > .ed-conn-etc, .ed-connrow > .ed-phone { grid-column: 1 / -1; }
}
.ed-connrow .ed-rm { width: 36px; height: 36px; border: 1px solid var(--bd2); background: var(--surface); color: var(--t3); border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer; }
.ed-addconn { appearance: none; width: 100%; font: inherit; font-size: 13px; font-weight: 500; color: var(--blue); border: 1px dashed var(--bd2); background: transparent; border-radius: 8px; padding: 9px; cursor: pointer; }

/* ═══ 어린이 상담 신청 ═══
   결제를 태우지 않고 데스크가 배정하는 건이라 목록에서 한눈에 갈라 보여야 한다. */
.stabs-sep { width: 1px; height: 16px; background: var(--bd); margin: 0 6px; align-self: center; }
.en-kind { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
    border-radius: 20px; background: var(--bl2); color: var(--blue); white-space: nowrap; }
.en-kind-new { background: var(--gn2); color: var(--green); }
.en-wish { display: inline-block; font-size: 12px; color: var(--t2);
    max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    vertical-align: middle; }
tr.en-consult td { background: color-mix(in srgb, var(--blue) 4%, transparent); }
tr.en-consult:hover td { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.ed-consult { border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
    background: color-mix(in srgb, var(--blue) 6%, transparent);
    border-radius: var(--r2); padding: 12px 14px; margin-bottom: 14px; }
.ed-consult-hd { font-size: 12px; font-weight: 700; color: var(--blue); margin-bottom: 8px; }
.ed-consult-row { display: flex; gap: 12px; padding: 4px 0; font-size: 13px; }
.ed-consult-row > span { flex: 0 0 96px; color: var(--t3); font-size: 12.5px; }
.ed-consult-row > b { font-weight: 600; color: var(--t1); word-break: break-all; }
.ed-consult-foot { margin: 8px 0 0; font-size: 11.5px; color: var(--t3); }

/* ═══ 상담 건 상세 ═══
   자리 격자는 수업시간표의 편성 모드로 옮겼다. 여기서는 무엇이 정해졌는지만 본다. */
.ed-loading { padding: 40px 0; text-align: center; color: var(--t3); font-size: 13px; }
.cs-sec { margin-top: 16px; }
.cs-sec-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.cs-sec-hd h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--t1); }
.cs-sec-hd span { font-size: 11.5px; color: var(--t3); }
.cs-held { font-size: 11.5px; color: var(--green); font-weight: 600; }

/* 편성된 반 — 격자는 시간표로 옮겼고 여기서는 결과만 본다 */
.cs-none { font-size: 12.5px; color: var(--t3); border: 1px dashed var(--bd); padding: 14px 12px; text-align: center; }
.cs-assigned { border: 1px solid var(--bd); background: var(--bg2); padding: 10px 12px; }
.cs-as-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.cs-as-hd b { font-size: 13.5px; font-weight: 700; color: var(--t1); }
.cs-as-hd span { font-size: 11.5px; color: var(--t3); }
.cs-as-line { font-size: 13px; font-weight: 600; color: var(--t1); }

/* 주간 레일 — 월~토(일요일 수업이 있으면 일까지)를 모두 깔고 오는 요일만 채운다.
   빈 요일이 같이 보여야 상담 중에 "목요일은 비네요" 가 된다. */
.sr-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; max-width: 342px; }
.sr-rail[data-seven] { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 392px; }
.sr-day { border: 1px solid var(--bd); border-radius: 8px; background: var(--bg3); text-align: center; padding: 5px 2px 6px; }
.sr-d { font-size: 12px; font-weight: 800; color: var(--t3); line-height: 1.25; }
.sr-t { font-size: 11px; color: var(--t3); margin-top: 2px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.sr-off .sr-t { opacity: .4; }
.sr-want .sr-on { background: color-mix(in srgb, var(--blue) 10%, var(--surface)); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.sr-want .sr-on .sr-d { color: var(--blue); }
.sr-fix .sr-on { background: color-mix(in srgb, var(--green) 12%, var(--surface)); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.sr-fix .sr-on .sr-d { color: var(--green); }
.sr-on .sr-t { color: var(--t1); font-weight: 600; }
.ed-consult-v { min-width: 0; }
.cs-as-staff { font-size: 12px; color: var(--t2); margin-top: 2px; }

/* 현장 상담 접수 모달 */
.nc-help { margin: 0 0 14px; font-size: 12.5px; color: var(--t3); line-height: 1.6; }
.nc-opt { font-size: 11px; font-weight: 400; color: var(--t3); margin-left: 4px; }

/* 기간·검색 필터 — 지난 상담을 되짚는 화면이기도 하다 */
.en-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.en-f-dates { display: flex; align-items: center; gap: 6px; }
.en-f-dates .inp { width: 142px; }
.en-f-tilde { color: var(--t3); font-size: 12px; }
.en-f-quick { display: flex; gap: 4px; }
.en-f-search { display: flex; gap: 6px; margin-left: auto; }
.en-f-search .inp { width: 220px; }
@media (max-width: 860px) {
    .en-f-search { margin-left: 0; width: 100%; }
    .en-f-search .inp { flex: 1; width: auto; }
}