.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; }
#detailModal .modal { max-width: min(800px, 96vw); }

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

.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-t { display: flex; align-items: center; gap: 6px; }
.ed-agree-t svg { flex: none; color: var(--green); }
.ed-agree-sub { font-size: 11.5px; font-weight: 400; color: var(--t3); }
.ed-agree-no { 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-loading { padding: 40px 0; text-align: center; color: var(--t3); font-size: 13px; }
.cs-wrap { display: flex; flex-direction: column; gap: 14px; }
.cs-wrap .ed-reject, .cs-wrap .ed-done, .cs-wrap .ed-signrow { margin-top: 0; }

.cs-steps { list-style: none; margin: 0; padding: 2px 0 14px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; }
.cs-st { flex: 1 1 0; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--t3); white-space: nowrap; }
.cs-st:first-child { flex: none; }
.cs-st + .cs-st::before { content: ""; flex: 1 1 auto; min-width: 12px; height: 1px; background: var(--bd); margin: 0 3px 0 10px; }
.cs-st-done + .cs-st::before { background: color-mix(in srgb, var(--green) 55%, transparent); }
.cs-st i { flex: none; position: relative; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--bd); }
.cs-st-done { color: var(--green); }
.cs-st-done i { background: var(--green); border-color: var(--green); }
.cs-st-done i::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.cs-st-cur { color: var(--blue); font-weight: 700; }
.cs-st-cur i { border-color: var(--blue); }
.cs-st-cur i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--blue); }

.cs-who { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.cs-who-l { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.cs-who-l b { font-size: 17px; font-weight: 700; color: var(--t1); }
.cs-who-l span { font-size: 12.5px; color: var(--t2); }
.cs-who-l .cs-sib { color: var(--t3); }
.cs-who-r { font-size: 12.5px; color: var(--t2); font-variant-numeric: tabular-nums; }

.cs-cmp { display: grid; grid-template-columns: 56px repeat(6, minmax(0, 1fr)); border: 1px solid var(--bd); border-radius: var(--r2); overflow: hidden; }
.cs-cmp[data-seven] { grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.cs-c { min-width: 0; min-height: 46px; display: flex; align-items: center; justify-content: center; padding: 6px 4px; border-top: 1px solid var(--bd); }
.cs-hd { min-height: 32px; border-top: 0; background: var(--bg2); font-size: 12.5px; font-weight: 700; color: var(--t2); }
.cs-cap { justify-content: flex-start; padding-left: 12px; background: var(--bg2); font-size: 12px; font-weight: 700; }
.cs-cap-want { color: var(--blue); }
.cs-cap-fix { color: var(--green); }
.cs-chip { width: 100%; max-width: 76px; padding: 6px 0; border-radius: 6px; text-align: center; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-chip-want { background: color-mix(in srgb, var(--blue) 12%, var(--surface)); color: var(--blue); }
.cs-chip-fix { background: color-mix(in srgb, var(--green) 14%, var(--surface)); color: var(--green); }
.cs-none { grid-column: 2 / -1; font-size: 12.5px; color: var(--t3); text-align: center; }

.cs-as { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: -4px; font-size: 12.5px; color: var(--t2); }
.cs-as b { font-size: 13.5px; font-weight: 700; color: var(--t1); }
.cs-held { font-size: 12px; font-weight: 600; color: var(--green); }
.cs-held-over { color: var(--red); }

.cs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.cs-fact { min-width: 0; padding: 8px 12px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--bg2); }
.cs-fact > span { display: block; font-size: 11.5px; color: var(--t3); }
.cs-fact b { display: block; margin-top: 1px; font-size: 13px; font-weight: 600; color: var(--t1); word-break: keep-all; overflow-wrap: anywhere; }
.cs-fact-warn { background: var(--am2); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.cs-fact-warn > span, .cs-fact-warn b { color: var(--amber); }
.cs-box { padding: 8px 12px; border: 1px solid var(--bd); border-radius: var(--r); font-size: 13px; font-weight: 600; color: var(--t1); }
.cs-box-k { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 400; color: var(--t3); }
.cs-ln { display: block; padding: 1px 0; overflow-wrap: anywhere; }
.cs-ln em { margin-right: 8px; font-style: normal; font-size: 12px; font-weight: 500; color: var(--t3); }
.cs-ln i { margin-left: 8px; font-style: normal; font-weight: 400; color: var(--t2); }
.cs-wish { font-size: 13px; color: var(--t1); line-height: 1.6; }
.cs-wish span { margin-right: 8px; font-size: 11.5px; color: var(--t3); }

@media (max-width: 560px) {
    .cs-cmp, .cs-cmp[data-seven] { grid-template-columns: 40px repeat(var(--cs-n, 6), minmax(0, 1fr)); }
    .cs-cmp[data-seven] { --cs-n: 7; }
    .cs-cap { padding-left: 0; justify-content: center; }
    .cs-c { padding: 6px 2px; }
    .cs-chip { padding: 5px 0; font-size: 12px; }
    .ed-signrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    #detailModal .m-bd { padding: 14px 12px; }
    .cs-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .cs-st + .cs-st::before { display: none; }
    .cs-cmp, .cs-cmp[data-seven] { grid-template-columns: 28px repeat(var(--cs-n, 6), minmax(0, 1fr)); }
    .cs-c { padding: 6px 1px; }
    .cs-chip { font-size: 11.5px; letter-spacing: -0.2px; }
}

/* 주간 레일 — 월~토(일요일 수업이 있으면 일까지)를 모두 깔고 오는 요일만 채운다.
   빈 요일이 같이 보여야 상담 중에 "목요일은 비네요" 가 된다. */
.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; }

/* 현장 상담 접수 모달 */
.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; }
}