/* =============================================================================
   더좋은식판 통합 신청·결제·배송관리 웹앱 — base.css
   -----------------------------------------------------------------------------
   출처 : _analysis/original_bundle.css (Tailwind v4 빌드 산출물)
   방침 : Tailwind 프리앰블(@layer properties/theme/base/components/utilities)과
          @property 선언을 전부 제거하고, 이 앱 고유의 커스텀 클래스만 남겼다.
          단 Preflight 중 앱이 의존하는 리셋은 아래 "리셋" 섹션으로 직접 옮겼다.

   ⚠️ 규칙 순서는 원본 그대로다. 원본에는 미디어쿼리 뒤에 오는 재정의 블록이 있어
      (§ "타이포 상향 패치") 순서를 바꾸면 렌더 결과가 달라진다.

   ⚠️ 원본에 없는 클래스는 만들지 않았다.
      의도적 값 변경은 폰트 스택의 'Malgun Gothic' 폴백 추가 1건뿐이다.

   상세 분석 : _analysis/design_system.md
   ============================================================================= */


/* === 리셋 (Tailwind Preflight에서 앱이 의존하는 부분만 추출) ================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

/* 헤딩 기본 크기·굵기를 죽인다. 앱에는 font-size를 주지 않은 h2/h3가 많아
   이 리셋이 없으면 브라우저 기본값(1.17em bold 등)이 튀어나온다. */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

/* bolder는 상대값이다. 부모가 800이면 900이 된다 — bold(700) 고정과 결과가 다르다. */
b, strong {
  font-weight: bolder;
}

/* .add-child-card small, .dish-options small 등은 크기를 지정하지 않고 이 80%에 의존한다. */
small {
  font-size: 80%;
}

sub, sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}
sub { bottom: -.25em; }
sup { top: -.5em; }

/* ⚠️ 이 리셋 때문에 .cancel-policy ul / .flow-detail ul 은 padding-left만 있고
      불릿이 보이지 않는다(원본 렌더도 동일). design_system.md §6.4 참조. */
ol, ul, menu {
  list-style: none;
}

img, svg, video, canvas, audio, iframe, embed, object {
  vertical-align: middle;
  display: block;
}
img, video {
  max-width: 100%;
  height: auto;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button, input, select, optgroup, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: transparent;
  border-radius: 0;
}

button,
input:where([type="button"], [type="reset"], [type="submit"]) {
  -webkit-appearance: button;
  appearance: button;
}

textarea { resize: vertical; }
::placeholder { opacity: 1; }

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}


/* === 디자인 토큰 ============================================================ */

:root {
  /* -- 폰트 ---------------------------------------------------------------
     원본: Pretendard, Noto Sans KR, Apple SD Gothic Neo, Arial, sans-serif
     'Malgun Gothic'은 윈도우 한글 폴백으로 추가한 것 (원본 대비 유일한 변경) */
  --font-sans: Pretendard, "Pretendard Variable", "Noto Sans KR",
               "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;

  /* -- 브랜드 (원본 :root 그대로) ----------------------------------------- */
  --ink:       #17342d;  /* 본문 텍스트 */
  --muted:     #72847e;  /* 보조 텍스트 */
  --mint:      #17a980;  /* 프라이머리 */
  --mint-dark: #0d8063;  /* 딥 그린 (활성 텍스트) */
  --lime:      #dff36d;  /* 세컨더리 액센트 */
  --cream:     #f6f8f2;
  --line:      #dde7e1;  /* 기본 테두리 */
  --white:     #fff;

  /* -- 배경 ---------------------------------------------------------------- */
  --bg-parent:   #f7f9f5;  /* 학부모 앱 (body) */
  --bg-center:   #f4f7f4;  /* 기관 앱 */
  --bg-admin:    #f3f6f4;  /* 어드민 v1 */
  --bg-admin-v2: #f2f5f3;  /* 어드민 v2 */
  --bg-login:    #f4f8f4;
  --bg-form:     #fafbf9;  /* 위저드 폼 본문 */
  --bg-subtle:   #f6f8f7;  /* 미세 대비 블록 */

  /* -- 구분선 -------------------------------------------------------------- */
  --line-inner:    #edf1ee;  /* 카드 내부 헤어라인 (parent/center) */
  --line-inner-v2: #edf1ef;  /* 카드 내부 헤어라인 (admin v2) */
  --line-field:    #dce5df;  /* 입력 필드 */
  --line-card:     #e2e9e4;  /* 지표 카드 외곽 */

  /* -- 다크 내비게이션 ----------------------------------------------------- */
  --nav-dark:           #17382f;
  --nav-dark-active:    #245246;
  --nav-dark-active-v2: #255146;
  --nav-dark-line:      #31554c;

  /* -- 그린 액션 ----------------------------------------------------------- */
  --green-text:  #167b61;  /* 링크·활성 텍스트 */
  --green-solid: #18866a;  /* 솔리드 버튼 */

  /* -- 중립 텍스트 (명도 순) ----------------------------------------------- */
  --text-1: #71847d;
  --text-2: #75877f;
  --text-3: #82938c;
  --text-4: #87968f;
  --text-5: #8b9993;
  --text-6: #9aa7a2;

  /* -- Radius -------------------------------------------------------------- */
  --r-chip:  8px;   /* 필터·태그 버튼 */
  --r-field: 10px;  /* 입력·소형 버튼 (표준) */
  --r-md:    14px;  /* 중형 카드 */
  --r-panel: 18px;  /* 어드민 패널 */
  --r-lg:    20px;  /* 대형 카드 */
  --r-pill:  20px;  /* 배지 */
  --r-modal: 24px;
  --r-round: 50%;

  /* -- 그림자 (전부 브랜드 그린을 섞은 저채도 그림자) ---------------------- */
  --sh-card:    0 8px 25px #27443909;
  --sh-card-sm: 0 7px 20px #27443909;
  --sh-panel:   0 5px 20px #20413606;
  --sh-modal:   0 28px 80px #00000052;
  --sh-dock:    0 12px 28px #0f302740;
  --sh-focus:   0 0 0 3px #dff6ed;
}


/* === 기본 요소 ============================================================== */

body {
  color: var(--ink);
  background: var(--bg-parent);
  margin: 0;
  font-family: var(--font-sans);
  letter-spacing: -.025em;
}

button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }


/* === 레이아웃 셸 · 상단바 · 사이드바 ======================================== */

.app-shell { min-height: 100vh; }

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--white);
  align-items: center;
  height: 82px;
  padding: 0 38px;
  display: flex;
  position: relative;
  z-index: 10;
}

.logo {
  text-align: left;
  background: transparent;
  border: 0;
  align-items: center;
  gap: 12px;
  min-width: 245px;
  display: flex;
}

/* 살짝 기울어진 입체 타일 — 브랜드 시그니처 */
.brand-mark {
  background: var(--mint);
  color: var(--white);
  border-radius: 14px 14px 18px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 21px;
  font-weight: 900;
  display: grid;
  transform: rotate(-3deg);
  box-shadow: inset -4px -4px #0000000d;
}
.brand-mark.small {
  border-radius: var(--r-field);
  width: 32px;
  height: 32px;
  font-size: 16px;
}

.logo span { flex-direction: column; display: flex; }
.logo b     { letter-spacing: -.08em; font-size: 21px; }
.logo small { color: #7c8e87; letter-spacing: -.01em; margin-top: 2px; font-size: 10px; }

/* 세그먼트 컨트롤 (역할 전환) */
.role-switch {
  background: #f0f4f0;
  border-radius: var(--r-md);
  margin: auto;
  padding: 5px;
  display: flex;
}
.role-switch button {
  color: #84938d;
  background: transparent;
  border: 0;
  border-radius: var(--r-field);
  padding: 10px 24px;
  font-weight: 700;
}
.role-switch button.active {
  color: var(--mint-dark);
  background: var(--white);
  box-shadow: 0 3px 12px #1f443714;
}

.header-actions {
  color: #536961;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-width: 245px;
  font-size: 13px;
  display: flex;
}
.header-actions > button {
  background: transparent;
  border: 0;
  font-size: 20px;
  position: relative;
}
.header-actions > button i {   /* 미확인 알림 도트 */
  background: #f47764;
  border-radius: var(--r-round);
  width: 6px;
  height: 6px;
  position: absolute;
  top: 1px;
  right: 2px;
}

.avatar {
  color: #1c735d;
  background: #dff4eb;
  border-radius: var(--r-round);
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 800;
  display: grid;
}

.layout {
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: calc(100vh - 82px);
  display: grid;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: var(--white);
  flex-direction: column;
  gap: 7px;
  padding: 40px 24px 24px;
  display: flex;
}

.menu-label {
  color: var(--text-6);
  letter-spacing: .14em;
  margin: 0 12px 12px;
  font-size: 10px;
  font-weight: 900;
}

.sidebar > button {
  color: #768780;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-weight: 700;
  display: flex;
}
.sidebar > button.selected {
  color: var(--mint-dark);
  background: #eaf7f2;
}

.icon {
  place-items: center;
  width: 20px;
  font-weight: 900;
  display: inline-grid;
}

.help-card {
  background: #f1f8dc;
  border-radius: var(--r-panel);
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  padding: 20px;
  display: flex;
}
.help-card b      { margin-top: 3px; font-size: 13px; }
.help-card p      { color: #78877a; margin: 0; font-size: 11px; }
.help-card button { color: #277660; background: transparent; border: 0; padding: 0; font-size: 11px; font-weight: 800; }

.content {
  width: min(1120px, 100% - 64px);
  margin: 0 auto;
  padding: 48px 0 80px;
}
/* 그리드 아이템의 기본 `min-width: auto` 는 **자식보다 작아지지 못하게** 한다. 그래서
   안쪽 탭(`.mobile-subnav`)에 `overflow-x: auto` 를 줘도 듣지 않았다 — 탭이 넓으면
   `.content` 가 그만큼 넓어져, 탭 안에서 스크롤되는 대신 페이지가 통째로 밀린다.
   `min-width: 0` 이 그 방어를 푼다. (1-2) 가 브라우저에서 검증: 문서 폭 423 → 399
   (뷰포트와 정확히 일치), 탭은 367/439 로 자기 안에서만 스크롤. 2026-08-19. */
.layout > .content { min-width: 0; }


/* === 학부모 홈 — 인사말 · 히어로 ============================================ */

.welcome p              { color: #71827b; margin: 0 0 12px; font-size: 14px; }
.welcome p:first-child  { color: var(--ink); font-weight: 700; }
.welcome h1             { letter-spacing: -.055em; margin: 0 0 13px; font-size: 35px; line-height: 1.36; }
.welcome h1 em          { color: var(--mint); font-style: normal; }

.hero-card {
  background: linear-gradient(120deg, #dff5e8 0%, #eef7cc 100%);
  border-radius: 28px;
  min-height: 330px;
  margin-top: 34px;
  padding: 48px 58px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 35px #2a594512;
}
.hero-card:after {           /* 반투명 원 오버레이 */
  content: "";
  border: 1px solid #ffffffa6;
  border-radius: var(--r-round);
  width: 360px;
  height: 360px;
  position: absolute;
  top: -120px;
  right: -40px;
}
.hero-card > div:first-child { z-index: 2; position: relative; }

.eyebrow {
  color: #1b8d70;
  letter-spacing: .14em;
  font-size: 10px;
  font-weight: 900;
  display: inline-block;
}

.hero-card h2 { letter-spacing: -.05em; margin: 12px 0 14px; font-size: 32px; line-height: 1.35; }
.hero-card p  { color: #667a71; font-size: 13px; line-height: 1.7; }

.primary {
  color: var(--white);
  background: var(--mint);
  border: 0;
  border-radius: 13px;
  padding: 14px 22px;
  font-weight: 800;
  box-shadow: 0 8px 18px #17a98038;
}
.hero-card .primary { margin-top: 12px; }


/* === 히어로 일러스트 (인라인 SVG — 유아 3찬 식판 + 수저) ==================== */
/*
   2026-08-20 사장님 지시로 교체. 이전 버전은 CSS 박스로 그린 "어긋난 민트 사각형
   3개 + 주황 컵"이라 식판으로 읽히지 않았다.

   지금 그린 것은 우리가 실제로 쓰는 제품이다 — 윗줄 반찬칸 3개 + 아랫줄 밥·국칸
   2개(총 5구)에 숟가락·4갈래 포크. 사장님이 주신 실물 사진을 재서 옮겼고, 근거
   경로와 실측값은 home.js 의 TRAY_SVG 주석에 적어 두었다.

   ⚠️ 색은 새로 들이지 않았다. 스테인리스 계열은 전부 기존 헤어라인 그레이
      (--line #dde7e1 / --line-card #e2e9e4)를 명도만 위아래로 벌린 값이다.
      히어로 배경이 연한 민트 그라데이션이라 판이 배경에 묻히기 쉬워, 실루엣에
      1.8px 아웃라인(#7b968c)을 둘러 대비를 확보했다.

   ⚠️ 마크업은 home.js 의 TRAY_SVG 상수(innerHTML)에 있다. 여기 CSS 는 그릇 배치와
      광택 스윕 애니메이션만 담당한다.
*/

/* z-index 1 = `.hero-card:after` 의 반투명 원보다 위, 본문 텍스트(z-index 2)보다 아래.
   이게 없으면 원의 테두리 선이 판 위를 가로질러 흠집처럼 보인다. */
.plate-scene {
  z-index: 1;
  pointer-events: none;
  width: 438px;
  height: 300px;
  position: absolute;
  top: 22px;
  right: 28px;
}
.plate-scene svg { width: 100%; height: 100%; }

/* 세척 서비스의 핵심은 "씻겨서 반짝인다"는 것 — 로드 직후 광택이 판을 한 번만
   쓸고 지나간다. 반복하면 장식이 되므로 1회로 끝낸다. */
.tray-sheen { animation: tray-sheen 1500ms cubic-bezier(.22, .61, .36, 1) 480ms 1 both; }

@keyframes tray-sheen {
  from { transform: translateX(-30px); }
  to   { transform: translateX(430px); }
}

@media (prefers-reduced-motion: reduce) {
  .tray-sheen { opacity: 0; animation: none; }
}


/* === 섹션 헤더 · 신청 현황 카드 ============================================= */

.status-section { padding-top: 46px; }

.section-head            { justify-content: space-between; align-items: center; gap: 20px; display: flex; }
.section-head h2         { margin: 0; font-size: 21px; }
.section-head p          { color: #899891; margin: 7px 0 0; font-size: 12px; }
.section-head > button   { color: #7d8d87; background: transparent; border: 0; font-size: 12px; font-weight: 700; }

/* ⚠️ .application-card 이하는 JS에서 사용되지 않는다 (학부모 홈 초기 버전 잔재) */
.application-card {
  background: var(--white);
  border: 1px solid #e5ebe7;
  border-radius: var(--r-lg);
  align-items: center;
  gap: 22px;
  margin-top: 20px;
  padding: 26px;
  display: flex;
  box-shadow: 0 7px 25px #2744390b;
}

.child-avatar,
.mini-avatar {
  color: #21765e;
  background: #dcefe5;
  border-radius: var(--r-round);
  place-items: center;
  font-weight: 900;
  display: grid;
}
.child-avatar { width: 58px; height: 58px; font-size: 18px; }

.grow { flex: 1; }

/* 상태 배지 */
.status {
  border-radius: var(--r-pill);
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 900;
  display: inline-block;
}
.status.waiting,
.status.wait { color: #b96d18; background: #fff0d9; }
.status.new  { color: #087358; background: #dcf4eb; }
.status.done { color: #5566a7; background: #ebedfb; }

.application-card h3       { margin: 8px 0 17px; font-size: 16px; }
.application-card h3 small { color: var(--text-4); margin-left: 10px; font-weight: 500; }

/* 4칸 세그먼트 진행바 (죽은 규칙) */
.progress                              { grid-template-columns: repeat(4, 1fr); gap: 5px; display: grid; }
.progress i                            { background: #e6ebe8; height: 4px; }
.progress i:first-child, .progress i.on { background: var(--mint); }
.progress-labels                       { color: #9aa7a1; justify-content: space-between; margin-top: 6px; font-size: 9px; display: flex; }
.progress-labels span:nth-child(2)     { color: var(--mint-dark); font-weight: 800; }

.detail {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--r-field);
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 800;
}


/* === 기관(center) 셸 ======================================================== */

.sidebar.dark                    { color: var(--white); background: var(--nav-dark); border: 0; }
.sidebar.dark .menu-label        { color: #6c9185; }
.sidebar.dark > button           { color: #a9beb7; }
.sidebar.dark > button.selected  { color: var(--white); background: var(--nav-dark-active); }

.count      { color: #dff9ef; background: #276557; border-radius: var(--r-pill); margin-left: auto; padding: 2px 7px; font-size: 9px; }
.count.warn { color: var(--white); background: #d38736; }

.center-info       { border-top: 1px solid var(--nav-dark-line); margin-top: auto; padding: 22px 12px; }
.center-info small { color: #88a49b; }
.center-info b     { margin: 6px 0; font-size: 18px; display: block; }
.center-info p     { color: #9cb1aa; font-size: 11px; line-height: 1.6; }

.center-layout { background: var(--bg-center); }

.dashboard        { width: min(1220px, 100% - 64px); }
.dashboard-head   { justify-content: space-between; align-items: center; display: flex; }
.dashboard-head h1 { margin: 7px 0; font-size: 31px; }
.dashboard-head p  { color: #84948e; margin: 0; font-size: 12px; }


/* === 지표 카드 ============================================================== */

.metric-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 32px 0;
  display: grid;
}
.metric-grid article {
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: var(--r-panel);
  gap: 14px;
  padding: 22px;
  display: flex;
  box-shadow: 0 8px 22px #27443909;
}

.metric-icon        { border-radius: 13px; place-items: center; width: 43px; height: 43px; display: grid; }
.metric-icon.mint   { color: #158a6c; background: #ddf5eb; }
.metric-icon.blue   { color: #5086ad; background: #e1eff9; }
.metric-icon.amber  { color: #cc812f; background: #fff0d8; }
.metric-icon.violet { color: #6565b3; background: #ebebfb; }

.metric-grid small     { color: #84938d; font-size: 11px; }
.metric-grid strong    { margin: 4px 0; font-size: 29px; display: block; }
.metric-grid strong em { margin-left: 3px; font-size: 12px; font-style: normal; }
.metric-grid p         { color: #95a19c; margin: 0; font-size: 9px; }
.metric-grid p b       { color: #20a37f; }


/* === 표 (CSS Grid 방식) ===================================================== */

.table-card {
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--sh-card);
}

.filters               { background: #f2f5f2; border-radius: var(--r-field); gap: 4px; padding: 4px; display: flex; }
.filters button        { color: #87958f; background: transparent; border: 0; border-radius: var(--r-chip); padding: 7px 12px; font-size: 10px; font-weight: 700; }
.filters button.active { color: var(--green-text); background: var(--white); box-shadow: 0 2px 7px #1e463714; }

/* ⚠️ 원본에서는 Tailwind 유틸리티 `.table{display:table}`이 함께 적용돼 이 래퍼가
      table 박스가 된다(폭이 내용에 맞춰 줄어듦). 클래스명 충돌로 생긴 부작용이라
      여기서는 뺐다. 원본 렌더를 100% 재현하려면 아래 display 선언을 되살린다.
      design_system.md §6.1 참조. */
.table {
  margin-top: 22px;
  /* display: table; */
}

.tr {
  border-top: 1px solid var(--line-inner);
  grid-template-columns: 1.1fr 1.7fr 1fr 1fr .5fr;
  align-items: center;
  min-height: 67px;
  font-size: 12px;
  display: grid;
}
.tr.th { color: #98a49f; border: 0; min-height: 38px; font-size: 9px; font-weight: 800; }

.tr > span:first-child          { align-items: center; gap: 10px; display: flex; }
.mini-avatar                    { width: 30px; height: 30px; }
.tr span small                  { color: #9ca8a3; margin-top: 3px; display: block; }
.tr > span:last-child button    { color: #758780; background: transparent; border: 0; font-size: 10px; font-weight: 800; }


/* === 신청 위저드 (모달) ===================================================== */

/* 모달은 무엇 위에도 떠야 한다. 어드민 상세 드로어(.admin-detail-backdrop, 150)가
   더 높아서, 드로어에서 연 모달(해지 반려·의사표시 닫기)이 드로어 뒤에 깔려
   아무도 누를 수 없었다. 토스트(200)보다는 아래 — 처리 결과 안내는 모달 위에 뜬다. */
.modal-backdrop {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 180;
  background: #0b211b8c;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.wizard {
  background: var(--white);
  border-radius: 26px;
  width: min(760px, 100%);
  max-height: 94vh;
  position: relative;
  overflow: auto;
  box-shadow: 0 25px 70px #081d174d;
}

.close {
  z-index: 2;
  background: #f0f4f1;
  border: 0;
  border-radius: var(--r-round);
  width: 34px;
  height: 34px;
  font-size: 21px;
  position: absolute;
  top: 20px;
  right: 22px;
}

.wizard-head    { text-align: center; padding: 34px 60px 22px; }
.wizard-head h2 { margin: 7px 0; font-size: 25px; }
.wizard-head p  { color: #81918a; margin: 0; font-size: 12px; }

/* 스텝퍼 */
/* 단계 수에 맞춘다. 4열 고정이던 때는 본인확인이 단계로 들어오면서 다섯 번째('식기·약관')가
   다음 줄에 홀로 떨어졌다 — 진행 표시가 두 줄로 끊기면 지금 어디인지 읽기 어렵다. */
.steps                    { grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0 60px 25px; display: grid; }
.steps div                { color: #a7b1ad; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; display: flex; position: relative; }
.steps div:after          { content: ""; background: #e4eae6; width: 84%; height: 2px; position: absolute; top: 14px; left: 58%; }
.steps div:last-child:after { display: none; }
.steps b                  { z-index: 1; background: var(--line-inner); border-radius: var(--r-round); place-items: center; width: 29px; height: 29px; display: grid; position: relative; }
.steps .active            { color: #137b60; font-weight: 800; }
.steps .active b          { color: var(--white); background: #19aa80; }
.steps .active:after      { background: #76cfb4; }

/* 폼 본문 */
.form-body {
  background: var(--bg-form);
  border-top: 1px solid var(--line-inner);
  border-bottom: 1px solid var(--line-inner);
  min-height: 360px;
  padding: 28px 60px;
}
.form-body h3    { margin: 0; font-size: 20px; }
.form-body > p   { color: #82918b; margin: 8px 0 24px; font-size: 12px; }
.form-body label { flex-direction: column; gap: 8px; font-size: 11px; font-weight: 800; display: flex; }

.form-body input,
.form-body select {
  color: #304b42;
  background: var(--white);
  border: 1px solid var(--line-field);
  border-radius: var(--r-field);
  outline: none;
  width: 100%;
  padding: 12px;
}
.form-body input:focus,
.form-body select:focus {
  border-color: #25ae86;
  box-shadow: var(--sh-focus);
}

.form-grid { grid-template-columns: 1fr 1fr; gap: 18px; display: grid; }

.search-box       { position: relative; }
.search-box .icon { position: absolute; top: 12px; left: 12px; }
.search-box input { padding-left: 40px; }

/* 카드형 선택지 — 기관 검색 결과 */
.center-options                { gap: 8px; margin: 14px 0; display: grid; }
.center-options button         { text-align: left; background: var(--white); border: 1px solid var(--line-field); border-radius: 12px; padding: 12px 16px; position: relative; }
.center-options button.active  { background: #f0fbf7; border-color: #20aa80; }
.center-options b              { font-size: 12px; display: block; }
.center-options small          { color: var(--text-5); }
.center-options i              { color: var(--text-5); font-size: 9px; font-style: normal; position: absolute; top: 16px; right: 14px; }
.center-options .pending       { border-style: dashed; }
/* 키즈노트·기관 일괄 청구 — 목록에서 빼지 않고 '여기서는 신청을 받지 않는다'만 보인다.
   자기 원이 아예 안 보이면 학부모가 더 혼란스럽다. */
.center-options .blocked       { background: #f7f8f9; border-color: var(--line-field); }
.center-options .blocked b     { color: var(--text-5); }
.center-options .blocked i     { color: #8a6d1f; }

/* 다른 채널로 보내는 링크 (키즈노트 앱·웹) */
.channel-links { gap: 8px; margin: 12px 0 4px; display: grid; }
.channel-link  { color: var(--text-2); background: var(--white); border: 1px solid var(--line-field);
                 border-radius: 12px; padding: 12px 16px; font-size: 12px; text-align: center;
                 text-decoration: none; display: block; }
.channel-link:hover { border-color: #20aa80; }

/* 체크박스 줄 */
.check-line        { background: #f1f5f2; border-radius: var(--r-field); align-items: center; padding: 12px; flex-direction: row !important; }
.check-line input,
.agree input       { width: auto; }
.check-line span   { flex-direction: column; display: flex; }
.check-line small  { color: #87958f; font-weight: 400; }

.date-card         { background: linear-gradient(120deg, #e5f7f0, #f3f8db); border-radius: var(--r-md); flex-direction: column; gap: 5px; margin: 20px 0; padding: 22px; display: flex; }
.date-card span,
.date-card small   { color: #788a82; font-size: 10px; }
.date-card strong  { font-size: 18px; }

/* 식기 선택지 */
.dish-options              { grid-template-columns: repeat(3, 1fr); gap: 10px; display: grid; }
.dish-options button       { text-align: left; background: var(--white); border: 1px solid var(--line-field); border-radius: var(--r-md); flex-direction: column; gap: 4px; padding: 15px; display: flex; }
.dish-options button.active { background: #f4fbf8; border: 2px solid #25aa82; }
.dish-options span         { font-size: 26px; }
.dish-options small        { color: #8c9994; }
.dish-options i            { color: #16906e; margin-top: 5px; font-size: 9px; font-style: normal; }

.summary          { background: var(--white); border: 1px solid #e4eae6; border-radius: 12px; margin-top: 16px; padding: 14px 18px; }
.summary > b      { font-size: 11px; }
.summary p        { margin: 6px 0; font-size: 11px; display: flex; }
.summary p span   { color: #899790; width: 80px; }

.agree { color: #6b7f77; align-items: center; margin-top: 13px; flex-direction: row !important; }

.wizard-actions                       { justify-content: flex-end; gap: 9px; padding: 20px 60px; display: flex; }
.wizard-actions > button:not(.primary) { background: var(--white); border: 1px solid var(--line-field); border-radius: 12px; padding: 12px 20px; font-weight: 800; }
.wizard-actions > button:disabled      { opacity: .35; }

/* 완료 화면 */
.success       { text-align: center; padding: 55px 80px; }
.success-mark  { color: #15916e; background: #dff6ed; border-radius: var(--r-round); place-items: center; width: 67px; height: 67px; margin: 0 auto 18px; font-size: 31px; font-weight: 900; display: grid; }
.success h2    { margin: 10px 0; font-size: 27px; }
.success > p   { color: #788a83; font-size: 13px; line-height: 1.7; }
.success > div:not(.success-mark) {
  text-align: left;
  background: #f6f8f6;
  border-radius: 13px;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 380px;
  margin: 24px auto;
  padding: 18px;
  font-size: 11px;
  display: grid;
}
.success > div span { color: #87958f; }
/* 10px 이었다. 접수 직후 학부모가 **가장 궁금해하는 문장**("담당자 확인 후 승인되면
   알려드려요. 승인 전까지는 배송이 시작되지 않아요")이 이 자리에 들어가는데, 화면에서
   가장 작게 보였다. 기능은 멀쩡한데 읽히지 않아 문의 전화가 오는 자리다.
   (1-2)가 `apply-done.js` 에서 인라인으로 12px 로 올려 두었고(공용 CSS 를 다른 갈래가
   손대는 중이라 우회), 그 판단이 맞아 여기서 정리한다. 인라인은 걷어냈다. 2026-08-19. */
.success aside      { color: #806836; background: #fff7df; border-radius: var(--r-field); max-width: 430px; margin: 0 auto 25px; padding: 13px; font-size: 12px; line-height: 1.7; }


/* === 반응형 (1차 — 셸 · 히어로 · 표 · 위저드) =============================== */

@media (max-width: 900px) {
  .topbar { padding: 0 18px; }
  .logo   { min-width: auto; }
  .logo small,
  .header-actions span { display: none; }
  .header-actions      { min-width: auto; }
  .role-switch button  { padding: 9px 13px; }

  /* `1fr` 단독은 `minmax(auto, 1fr)` 이라 **열의 최소 폭이 콘텐츠 크기**다. 안쪽이
     넓으면 열이 그만큼 늘어나 뷰포트를 넘고, 폰에서 페이지 전체가 옆으로 밀린다
     (실측 컨테이너 375px 에 열 438.6px). 307행 기본 정의에는 `minmax(0, 1fr)` 방어가
     있는데 이 좁은 화면 규칙에만 빠져 있었다. (1-1) 발견, 2026-08-19. */
  .layout  { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }

  .content,
  .dashboard { width: calc(100% - 32px); padding-top: 28px; }

  /* 텍스트가 카드의 65%를 가져가므로 판을 오른쪽으로 밀어 수저부터 잘리게 둔다.
     자르는 순서(수저 → 판)를 정해 두는 게 요점이다 — 판이 먼저 잘리면 무슨 그림인지
     알아볼 수 없다. */
  .plate-scene { opacity: .62; width: 400px; height: 274px; top: 30px; right: -118px; }
  .hero-card   { padding: 36px 30px; }
  .hero-card > div:first-child { max-width: 65%; }

  .metric-grid { grid-template-columns: 1fr 1fr; }

  .tr { grid-template-columns: 1fr 1.3fr .8fr; }
  .tr > span:nth-child(3),
  .tr > span:nth-child(5),
  .th > span:nth-child(3),
  .th > span:nth-child(5) { display: none; }
}

@media (max-width: 600px) {
  .topbar      { height: 70px; }
  .layout      { min-height: calc(100vh - 70px); }
  .role-switch { margin-left: auto; }
  .header-actions,
  .logo span   { display: none; }

  .welcome h1  { font-size: 28px; }
  .hero-card   { min-height: 350px; }
  .hero-card > div:first-child { max-width: 100%; }
  /* 폰에서는 본문이 카드 폭을 다 쓴다(위 max-width: 100%). 그래서 판을 카드 오른쪽
     아래 구석 — 제목 아래, 버튼 오른쪽의 빈 자리 — 로 내리고 크기를 줄인다.
     예전처럼 제목 뒤에 큰 판을 깔면 글자 뒤로 홈 테두리가 비쳐 읽기가 흐려진다.
     불투명도는 본문 가독을 해치지 않는 선에서 형태가 보이는 값이다. */
  .plate-scene {
    opacity: .45;
    width: 320px;
    height: 229px;
    top: auto;
    bottom: -40px;
    right: -86px;
  }
  .hero-card h2 { font-size: 27px; }   /* ⚠️ 뒤의 타이포 패치가 35px로 덮어써 무효화된다 */

  .metric-grid { grid-template-columns: 1fr; }

  /* 제목과 버튼을 위아래로 나눈다. 한 줄로 두면 좁은 화면에서 제목이 폭을 다 가져가고
     **버튼이 남은 44px 로 눌려 글자가 세로로 쪼개진다**(390px 에서 "반 추가 ＋" 2줄).
     선생님이 새 반을 만드는 입구라 그게 첫인상이 된다. `align-items: flex-start` 만으로는
     가로 배치가 유지돼 안 풀렸다. (1-2) 교차 검수 2026-08-19.
     어드민 `.admin-page-head` 에 같은 이유로 같은 처리를 해 두었다(2085행 블록). */
  .dashboard-head          { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dashboard-head .primary { white-space: nowrap; padding: 11px 14px; font-size: 11px; }

  .table-card   { padding: 18px; overflow: auto; }
  .section-head { align-items: flex-start; }
  .filters      { display: none; }
  .tr           { min-width: 520px; }

  .modal-backdrop { padding: 0; }
  .wizard         { border-radius: 0; height: 100%; max-height: 100vh; }
  .wizard-head    { padding: 28px 22px 18px; }
  .steps          { padding: 0 20px 20px; }
  .steps div:after { width: 75%; }
  .steps span     { font-size: 9px; }
  .form-body      { padding: 24px 22px; }
  .form-grid      { grid-template-columns: 1fr; }
  .wizard-actions { padding: 16px 22px; }

  .dish-options   { grid-template-columns: 1fr 1fr; }
  .dish-options button:last-child { display: none; }

  .success { padding: 70px 25px; }
}


/* === 타이포 상향 패치 ======================================================
   ⚠️ 원본에서 미디어쿼리 뒤에 덧붙인 재정의 블록이다("글씨가 작다" 피드백 대응으로 보임).
      순서를 앞으로 옮기면 렌더가 달라진다 — 특히 .hero-card h2 는 이 블록이
      600px 블록의 27px를 35px로 덮어써 모바일 축소가 죽어 있다(원본 동작 그대로 보존).
   ========================================================================== */

body { font-size: 16px; }

.logo small, .menu-label, .eyebrow { font-size: 12px; }

.sidebar > button,
.welcome p,
.hero-card p,
.dashboard-head p,
.section-head p { font-size: 15px; }

.hero-card h2    { font-size: 35px; }
.section-head h2 { font-size: 24px; }

.application-card h3,
.application-card h3 small { font-size: 16px; }

.status { padding: 6px 11px; font-size: 12px; }

.detail,
.section-head > button { font-size: 14px; }

.progress-labels { font-size: 11px; }

.form-body    { min-height: 430px; }
.form-body h3 { font-size: 24px; }

.form-body > p,
.wizard-head p,
.form-body label { font-size: 14px; }

.form-body input,
.form-body select { padding: 14px; font-size: 15px; }

.steps div { font-size: 12px; }

.center-options b,
.search-results b { font-size: 15px; }

.center-options small,
.search-results small,
.metric-grid small { font-size: 13px; }

.metric-grid p { font-size: 11px; }

.tr    { font-size: 14px; }
.tr.th { font-size: 12px; }


/* === 페이지 헤더 · 아이 관리 · 신청 이력 ==================================== */

.page-title    { justify-content: space-between; align-items: flex-end; margin-bottom: 32px; display: flex; }
.page-title h1 { margin: 8px 0; font-size: 36px; }
.page-title p  { color: #7d8e87; margin: 0; font-size: 15px; }

.children-grid { grid-template-columns: 1.2fr .8fr; gap: 20px; display: grid; }

.child-card,
.add-child-card {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 8px 25px #2744390a;
}

.child-card-head    { border-bottom: 1px solid var(--line-inner); align-items: center; gap: 16px; padding-bottom: 22px; display: flex; }
.child-card-head h2 { margin: 7px 0 2px; font-size: 24px; }
.child-card-head p  { color: #8a9993; margin: 0; font-size: 13px; }

.child-card dl     { grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0; display: grid; }
.child-card dl div { flex-direction: column; gap: 5px; display: flex; }
.child-card dt     { color: var(--text-5); font-size: 12px; }
.child-card dd     { margin: 0; font-size: 15px; font-weight: 800; }

.card-actions          { gap: 9px; display: flex; }
.card-actions button   { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-field); padding: 11px 15px; font-weight: 800; }
.card-actions .danger  { color: #d65a55; border-color: #f1cecb; }
/* .qty-stepper: 장바구니 수량 조절(− 숫자 +)처럼 .card-actions 안에 버튼이 아닌 텍스트(b)가
   섞여 있는 자리 전용. align-items 기본값(stretch)에서는 그 텍스트가 버튼 높이만큼 늘어난
   블록으로 바뀌어 위쪽에 붙어 보인다 — 이 조합에서만 세로 가운데로 맞춘다. */
.card-actions.qty-stepper { align-items: center; }

.add-child-card        { color: #688079; background: #fafcf9; border-style: dashed; flex-direction: column; justify-content: center; align-items: center; display: flex; }
.add-child-card b      { color: #1ca77f; font-size: 32px; }
.add-child-card span   { margin: 8px; font-size: 17px; font-weight: 900; }
.add-child-card small  { color: #93a09b; }

/* ⚠️ .history-list 는 JS에서 사용되지 않는다 (죽은 규칙) */
.history-list article                    { border-bottom: 1px solid var(--line-inner); grid-template-columns: 1.5fr 1fr .7fr .6fr; align-items: center; gap: 20px; padding: 22px 0; display: grid; }
.history-list article:last-child          { border: 0; }
.history-list article > div:first-child   { flex-direction: column; gap: 5px; display: flex; }
.history-list article > div span,
.history-list small                       { color: var(--text-4); font-size: 13px; }
.history-list article > div:nth-child(2)  { flex-direction: column; gap: 4px; display: flex; }
.history-list article > button            { color: #25866c; background: transparent; border: 0; font-weight: 800; }


/* === 검색 결과 · 반 선택 · 알림 배너 · 계약 스트립 · 식기 설정 ============== */

.search-results               { gap: 10px; margin: 14px 0; display: grid; }
.search-results button        { text-align: left; background: var(--white); border: 1px solid var(--line-field); border-radius: 13px; padding: 16px; position: relative; }
.search-results button.active { background: #effaf6; border: 2px solid #16a77e; }
.search-results b,
.search-results small         { display: block; }
.search-results small         { color: #85968f; margin-top: 5px; }
.search-results i             { color: #78918a; font-size: 12px; font-style: normal; position: absolute; top: 18px; right: 16px; }
.search-results .pending      { border-style: dashed; }

.class-panel,
.manual-center  { background: #eef7f3; border-radius: var(--r-md); margin-top: 15px; padding: 18px; }
.class-panel p  { color: #7c9087; margin: 8px 0 0; font-size: 12px; }
.manual-center  { grid-template-columns: 1fr 1fr; gap: 14px; display: grid; }

.notice-card,
.discount-note  { border-radius: var(--r-md); margin: 16px 0; padding: 17px 20px; }
.notice-card    { background: #edf8f4; border-left: 4px solid #1ea980; }
.discount-note  { background: #fff7e2; border-left: 4px solid #e3a43b; }
.notice-card p,
.discount-note p       { color: #60766e; margin: 6px 0 0; font-size: 14px; line-height: 1.6; }
.notice-card strong,
.discount-note strong  { color: #176e59; }

.date-card span,
.date-card small { font-size: 13px; }

.contract-strip    { background: #edf7f3; border-radius: 12px; align-items: center; gap: 12px; margin-bottom: 15px; padding: 13px 16px; display: flex; }
.contract-strip span { color: #7a8e86; font-size: 12px; }
.contract-strip b  { font-size: 15px; }
.contract-strip em { color: #168164; background: var(--white); border-radius: var(--r-pill); margin-left: auto; padding: 5px 9px; font-size: 11px; font-style: normal; font-weight: 800; }

.dish-options.enhanced { align-items: stretch; }

.dish-config              { background: #f4fbf8; border: 2px solid #25aa82; border-radius: var(--r-md); flex-direction: column; gap: 6px; padding: 15px; display: flex; }
.dish-config > span       { font-size: 26px; }
.dish-config small        { color: #788a82; }
.dish-config label        { flex-direction: row; align-items: center; gap: 7px; font-size: 12px; }
.dish-config label input  { width: auto; }
.dish-config i            { color: #16866a; font-size: 10px; font-style: normal; }
.dish-config.disabled     { color: var(--text-6); background: #f2f4f3; border: 1px solid var(--line-field); }
.dish-config.disabled i   { color: #b26c32; }

.dish-options button:disabled { cursor: not-allowed; color: var(--text-6); background: #f2f4f3; }


/* === 로그인 (아이디/비밀번호) =============================================== */

.login-page {
  background: var(--bg-login);
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 82px);
  display: grid;
}

.login-visual {
  color: var(--white);
  background: linear-gradient(140deg, #163a31, #1c725d);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 90px max(50px, 10vw);
  display: flex;
}
.login-visual .brand-mark { color: #165643; background: var(--lime); margin-bottom: 30px; }
.login-visual .eyebrow    { color: #99d9c6; }
.login-visual h1          { margin: 12px 0 20px; font-size: 46px; line-height: 1.25; }
.login-visual p           { color: #c3dbd3; font-size: 16px; line-height: 1.8; }
.login-visual ul          { color: #e5f3ee; padding: 0; line-height: 2; list-style: none; }

.login-card {
  background: var(--white);
  border-radius: var(--r-modal);
  width: min(460px, 100% - 48px);
  margin: auto;
  padding: 42px;
  box-shadow: 0 18px 50px #1d44371f;
}
.login-card h2              { margin: 8px 0; font-size: 31px; }
.login-card > p             { color: #83938d; margin-bottom: 28px; }
.login-card label           { flex-direction: column; gap: 8px; margin: 16px 0; font-weight: 800; display: flex; }
.login-card input           { border: 1px solid var(--line-field); border-radius: 11px; padding: 14px; }
.login-card .remember       { flex-direction: row; align-items: center; font-size: 13px; font-weight: 500; }
.login-card .remember input { width: auto; }
.login-card > .primary      { width: 100%; font-size: 16px; }
.login-card aside           { text-align: center; color: #8a9993; background: #f5f8f5; border-radius: 11px; margin-top: 18px; padding: 14px; font-size: 12px; line-height: 1.6; }

.header-logout {
  color: var(--text-1) !important;
  background: #edf3f0 !important;
  border-radius: var(--r-chip) !important;
  padding: 6px 8px !important;
  font-size: 10px !important;
}


/* === 카카오 로그인 ========================================================== */

.kakao-login-page {
  background:
    radial-gradient(circle at 12% 18%, #ffe5003d, transparent 24%),
    radial-gradient(circle at 86% 82%, #188e6c2e, transparent 26%),
    #edf5f1;
  place-items: center;
  min-height: 100vh;
  padding: 34px;
  display: grid;
}

/* 로그인 패널 한 칸. 2026-08-20 사장님 지시로 오른쪽 채널 미리보기를 걷어내면서
   2단 그리드(1100px)에서 한 단으로 좁혔다. 폭을 그대로 두면 폼 하나가 넓은 판에
   떠 있어 화면이 비어 보인다. */
.kakao-login-shell {
  background: var(--white);
  border-radius: 30px;
  width: min(560px, 100%);
  display: grid;
  overflow: hidden;
  box-shadow: 0 28px 80px #173f342b;
}

.kakao-login-main                 { flex-direction: column; justify-content: center; padding: 56px 62px; display: flex; }
.kakao-login-main > header        { align-items: center; gap: 13px; margin-bottom: 42px; display: flex; }
.kakao-login-main > header > div  { flex-direction: column; gap: 3px; display: flex; }
.kakao-login-main > header b      { font-size: 18px; }
.kakao-login-main > header small  { color: #82938d; font-size: 11px; }

.kakao-login-badge { color: var(--green-text); background: #eff7f3; border-radius: var(--r-pill); align-self: flex-start; padding: 7px 11px; font-size: 10px; font-weight: 900; }

.kakao-login-main h1 { margin: 16px 0; font-size: 39px; line-height: 1.25; }
.kakao-login-copy    { color: #637970; max-width: 520px; margin: 0 0 25px; line-height: 1.75; }

.kakao-login-button {
  color: #191919;
  background: #fee500;
  border: 0;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 57px;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  box-shadow: 0 8px 22px #b49a0024;
}
.kakao-login-button:disabled { opacity: .7; }

/* CSS만으로 그린 카카오 말풍선 심볼 */
.kakao-symbol {
  color: transparent;
  background: #191919;
  border-radius: var(--r-round);
  place-items: center;
  width: 23px;
  height: 19px;
  font-size: 0;
  display: grid;
  position: relative;
}
.kakao-symbol:after {
  content: "";
  border-top: 4px solid #191919;
  border-bottom: 0 solid transparent;
  border-left: 0 solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -3px;
  left: 2px;
  transform: rotate(12deg);
}

.kakao-login-consent { text-align: center; color: #98a49f; margin: 10px 0 23px; font-size: 10px; line-height: 1.5; }

.kakao-login-benefits {
  border-top: 1px solid var(--line-inner);
  border-bottom: 1px solid var(--line-inner);
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 17px 0;
  display: grid;
}
.kakao-login-benefits > div        { align-items: center; gap: 9px; display: flex; }
.kakao-login-benefits > div > b    { color: var(--green-text); background: #e5f4ed; border-radius: var(--r-round); place-items: center; width: 24px; height: 24px; font-size: 10px; display: grid; }
.kakao-login-benefits > div > span { flex-direction: column; gap: 3px; display: flex; }
.kakao-login-benefits strong       { font-size: 11px; }
.kakao-login-benefits small        { color: #8a9993; font-size: 8px; }
.kakao-login-benefits > i          { color: #bdd0c8; font-style: normal; }

.kakao-demo-note   { color: #758880; background: var(--bg-subtle); border-radius: 11px; gap: 11px; margin-top: 18px; padding: 13px 15px; font-size: 10px; line-height: 1.55; display: flex; }
.kakao-demo-note b { white-space: nowrap; color: #4d655c; }

/* 우측 채널 미리보기 패널은 2026-08-20 사장님 지시로 화면에서 걷어냈다(login.js 참고).
   여기 있던 규칙들(.kakao-channel-preview · .channel-brand · .channel-guide)도 함께
   지웠다 — 쓰는 곳이 없어진 CSS 를 남겨두면 다음 사람이 "어딘가 쓰이겠지" 하고 못 지운다.
   ⚠️ `.channel-links` / `.channel-link` 는 지우지 않았다. 그건 키즈노트 기관 안내에서
   로그인·신청·해지 화면이 함께 쓰는 공용 클래스다. */

@media (max-width: 900px) {
  .kakao-login-page  { padding: 20px; }
  .kakao-login-main  { padding: 45px 46px; }
  .kakao-login-main > header { margin-bottom: 32px; }
}

@media (max-width: 600px) {
  .kakao-login-page  { background: var(--white); padding: 0; display: block; }
  .kakao-login-shell { min-height: 100vh; box-shadow: none; border-radius: 0; flex-direction: column; display: flex; }
  .kakao-login-main  { min-height: 670px; padding: 28px 22px 24px; }
  .kakao-login-main > header { margin-bottom: 35px; }
  .kakao-login-main h1 { font-size: 31px; }
  .kakao-login-copy  { font-size: 13px; }
  .kakao-login-button { height: 55px; }
  .kakao-login-benefits       { gap: 4px; }
  .kakao-login-benefits > div { text-align: center; flex-direction: column; gap: 5px; }
  .kakao-login-benefits strong { font-size: 10px; }
  .kakao-login-benefits small  { font-size: 7px; }
  .kakao-demo-note   { align-items: flex-start; }
}


/* === 기관 서비스 신청 · 캘린더 · 배송/박스 · 토스트 ========================= */

.center-info button { color: #b9ccc6; background: transparent; border: 1px solid #476b62; border-radius: var(--r-chip); margin-top: 7px; padding: 7px 10px; }

.service-cards            { grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; display: grid; }
.service-cards article    { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-lg); padding: 27px; }
.service-cards article > span { font-size: 34px; }
.service-cards h2         { margin: 12px 0; font-size: 22px; }
.service-cards p          { color: #788b83; line-height: 1.6; }
.service-cards label      { flex-direction: column; gap: 7px; margin: 15px 0; font-size: 13px; font-weight: 800; display: flex; }
.service-cards input,
.service-cards select     { border: 1px solid var(--line); border-radius: var(--r-field); padding: 12px; }
.service-cards .primary   { width: 100%; margin-top: 8px; }

.info-banner   { background: #eef7f3; border-radius: var(--r-md); padding: 18px 22px; }
.info-banner p { color: #6b8178; margin: 5px 0 0; }

/* 캘린더 */
.calendar-layout { grid-template-columns: 1.5fr .8fr; gap: 20px; margin-top: 30px; display: grid; }

.calendar-card,
.schedule-list   { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-lg); padding: 25px; }

.calendar-head        { justify-content: space-between; align-items: center; display: flex; }
.calendar-head h2     { font-size: 21px; }
.calendar-head button { background: #f2f5f2; border: 0; border-radius: 9px; width: 34px; height: 34px; }

.weekdays,
.calendar-days        { grid-template-columns: repeat(7, 1fr); display: grid; }
.weekdays b           { text-align: center; color: #83958d; padding: 15px; font-size: 12px; }
.calendar-days span   { border-top: 1px solid var(--line-inner); height: 78px; padding: 10px; font-size: 13px; position: relative; }
.calendar-days span.event { color: #14785e; background: #eff8f4; font-weight: 900; }
.calendar-days span i { color: var(--white); text-align: center; background: #1ca77f; border-radius: var(--r-chip); margin-top: 5px; padding: 3px 5px; font-size: 10px; font-style: normal; display: block; }

.schedule-list h2      { margin-top: 0; font-size: 20px; }
.schedule-list article { border-bottom: 1px solid var(--line-inner); grid-template-columns: auto 1fr auto; gap: 10px; padding: 18px 0; display: grid; }

.dot        { border-radius: var(--r-round); width: 9px; height: 9px; margin-top: 7px; }
.dot.blue   { background: #438ab9; }
.dot.orange { background: #e49a3f; }

.schedule-list p              { margin: 4px 0; font-size: 13px; }
.schedule-list small          { color: #85968f; }
.schedule-list article button { color: #758a82; background: transparent; border: 0; }

.schedule-tip   { background: #f1f7e6; border-radius: 12px; margin-top: 18px; padding: 15px; }
.schedule-tip p { color: #6e8179; margin: 5px 0 0; font-size: 12px; line-height: 1.6; }

.sync-badge { color: #148262; background: #e4f6ef; border-radius: var(--r-pill); padding: 8px 12px; font-size: 12px; font-weight: 800; }

/* 박스 회수 현황 */
.box-summary                 { grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0; display: grid; }
.box-summary article         { border: 1px solid var(--line); background: var(--white); border-radius: 16px; padding: 20px; }
.box-summary article > span,
.box-summary small           { color: #7d8e87; font-size: 12px; display: block; }
.box-summary strong          { margin: 6px 0; font-size: 28px; display: block; }
.box-summary strong em       { font-size: 12px; font-style: normal; }
.box-summary .warning        { background: #fffaf0; border-color: #eed49b; }

.delivery-grid { grid-template-columns: 1.6fr .8fr; gap: 20px; display: grid; }

.delivery-log,
.box-control           { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-lg); padding: 25px; }
.delivery-log article  { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; display: grid; }

.delivery-photo        { text-align: center; cursor: pointer; color: var(--white); background: linear-gradient(140deg, #dce9e2, #afc7bb); border-radius: 15px; place-items: center; min-height: 230px; display: grid; }
.delivery-photo > span { font-size: 35px; }
.delivery-photo > b    { display: block; }
.photo-preview         { flex-direction: column; gap: 6px; display: flex; }
.photo-preview span    { font-size: 45px; }

.delivery-log dl        { margin: 0; }
.delivery-log dl div    { border-bottom: 1px solid var(--line-inner); justify-content: space-between; padding: 13px 0; display: flex; }
.delivery-log dt        { color: #7f9189; }
.delivery-log dd        { margin: 0; font-weight: 900; }

.box-control h2       { margin-top: 0; }
.box-meter > div      { background: var(--line-inner); border-radius: var(--r-field); height: 12px; overflow: hidden; }
.box-meter > div span { background: #1eaa81; border-radius: var(--r-field); height: 100%; display: block; }
.box-meter p          { justify-content: space-between; display: flex; }
.box-meter p span     { color: var(--text-3); }

.box-ok            { color: #147b60; background: #e9f7f1; border-radius: var(--r-field); padding: 12px; font-size: 13px; }
.box-control ul    { padding: 0; list-style: none; }
.box-control li    { border-bottom: 1px solid var(--line-inner); justify-content: space-between; padding: 9px 0; font-size: 13px; display: flex; }
.box-control li b  { color: #758880; }
.box-control > button { background: var(--white); border: 1px solid #d4e2dc; border-radius: var(--r-field); width: 100%; padding: 11px; font-weight: 800; }

.toast {
  z-index: 100;
  color: var(--white);
  background: #153f33;
  border-radius: 12px;
  padding: 15px 20px;
  font-weight: 800;
  position: fixed;
  bottom: 24px;
  right: 24px;
  box-shadow: 0 12px 30px #0003;
}

@media (max-width: 900px) {
  .children-grid,
  .service-cards,
  .calendar-layout,
  .delivery-grid { grid-template-columns: 1fr; }
  .box-summary   { grid-template-columns: 1fr 1fr; }
  .login-page    { grid-template-columns: 1fr; }
  .login-visual  { display: none; }
  .login-card    { margin: 50px auto; }
  .dish-options.enhanced { grid-template-columns: 1fr; }
  .dish-options.enhanced button:last-child { display: flex; }
  .manual-center { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  body           { font-size: 15px; }
  .page-title    { align-items: flex-start; }
  .page-title h1 { font-size: 30px; }
  .children-grid,
  .child-card dl { grid-template-columns: 1fr; }
  .history-list article { grid-template-columns: 1fr auto; }
  .history-list article > div:nth-child(2),
  .history-list article > button { display: none; }
  .box-summary   { grid-template-columns: 1fr 1fr; }
  .delivery-log article { grid-template-columns: 1fr; }
  .calendar-days span   { height: 56px; padding: 5px; }
  .calendar-days span i { font-size: 8px; }
  .wizard        { font-size: 15px; }
  .form-body     { min-height: 480px; }
  .contract-strip    { flex-wrap: wrap; align-items: flex-start; }
  .contract-strip em { margin-left: 0; }
}


/* === 공용 배지 · 모바일 서브내비 · 취소 정책 · 학부모 바로가기 · 취소 모달 == */

.app-type-badge { color: #12775e; background: #eaf7f2; border-radius: var(--r-pill); margin: auto; padding: 9px 16px; font-size: 13px; font-weight: 900; }

.mobile-subnav  { display: none; }   /* ≤900px에서 flex로 전환 */

.utensil-base   { color: #16775e; background: #dff5eb; border-radius: var(--r-chip); width: max-content; padding: 6px 9px; font-size: 11px; font-weight: 900; }

.cancel-policy    { text-align: left; background: #f3f8f5; border: 1px solid #dce9e2; border-radius: var(--r-md); max-width: 500px; margin: 20px auto; padding: 18px 20px; }
.cancel-policy p  { color: #546d64; margin: 7px 0; font-size: 13px; }
.cancel-policy ul { color: #6b7e77; margin: 8px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.7; }

.parent-shortcuts             { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; display: grid; }
.parent-shortcuts button      { text-align: left; border: 1px solid var(--line); background: var(--white); border-radius: 17px; align-items: center; gap: 15px; padding: 21px; display: flex; box-shadow: var(--sh-card-sm); }
.parent-shortcuts button > span { color: #158065; background: #e5f6ef; border-radius: 13px; place-items: center; width: 42px; height: 42px; font-size: 20px; font-weight: 900; display: grid; }
.parent-shortcuts button div  { flex-direction: column; gap: 4px; display: flex; }
.parent-shortcuts button b    { font-size: 16px; }
.parent-shortcuts button small { color: #85958f; }
.parent-shortcuts button i    { color: #168066; margin-left: auto; font-style: normal; }

.inline-cancel {
  z-index: 50;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #0b211b8c;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}
.inline-cancel > div        { background: var(--white); border-radius: 22px; width: min(540px, 100%); padding: 32px; box-shadow: 0 25px 60px #00000040; }
.inline-cancel h2           { margin: 7px 0; font-size: 26px; }
.inline-cancel p,
.inline-cancel li           { color: #60766e; line-height: 1.65; }
.inline-cancel label        { flex-direction: column; gap: 7px; margin: 14px 0; font-weight: 800; display: flex; }
.inline-cancel input,
.inline-cancel select       { border: 1px solid var(--line); border-radius: var(--r-field); padding: 12px; }
.inline-cancel > div > div  { justify-content: flex-end; gap: 8px; margin-top: 20px; display: flex; }
.inline-cancel button       { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-field); padding: 11px 16px; font-weight: 800; }
.inline-cancel .danger-solid { color: var(--white); background: #d45d57; border: 0; }


/* === 어드민 v1 셸 =========================================================== */

.admin-shell { background: var(--bg-admin); min-height: 100vh; }

.admin-top          { border-bottom: 1px solid var(--line); background: var(--white); justify-content: space-between; align-items: center; height: 76px; padding: 0 30px; display: flex; }
.admin-top .logo    { min-width: 0; }
.admin-top nav      { align-items: center; gap: 12px; display: flex; }
.admin-top nav a    { color: #16775e; background: #eaf7f2; border-radius: 9px; padding: 9px 12px; font-size: 12px; font-weight: 800; text-decoration: none; }
.admin-top nav > span { font-size: 13px; }

/* 두 번째 열이 `1fr` 단독이면 최소 폭이 콘텐츠 크기라, 안의 표(`min-width: 980px`)가
   열을 밀어 **페이지 골격이 통째로 밀린다**(1024px 에서 259px) — 사이드바까지 함께
   밀려, 표를 보려고 옆으로 밀면 메뉴가 화면 밖으로 사라진다. `.admin-table-scroll`
   래퍼가 이미 있는데도 안 들었던 이유가 이것이다: 열이 넓어져 버리면 래퍼는 넘칠 일이
   없다. `minmax(0, ...)` 로 열을 묶어야 비로소 표만 자기 안에서 스크롤한다.
   `.layout` 307행과 같은 방어를 어드민 셸에도 준다. (1-1) 발견, 2026-08-19. */
.admin-layout  { grid-template-columns: 245px minmax(0, 1fr); min-height: calc(100vh - 76px); display: grid; }

.admin-sidebar                  { color: var(--white); background: var(--nav-dark); flex-direction: column; gap: 6px; padding: 32px 20px; display: flex; }
.admin-sidebar > button         { color: #aec2bb; text-align: left; background: transparent; border: 0; border-radius: var(--r-field); align-items: center; gap: 11px; padding: 13px; font-weight: 800; display: flex; }
.admin-sidebar > button.selected { color: var(--white); background: var(--nav-dark-active-v2); }
.admin-sidebar > button > b     { background: #2d6557; border-radius: 12px; margin-left: auto; padding: 2px 7px; font-size: 10px; }
.admin-sidebar > button > b.warn { background: #cf7540; }
.admin-sidebar > div            { border-top: 1px solid #31564c; flex-direction: column; gap: 8px; margin-top: auto; padding: 18px 10px; display: flex; }
.admin-sidebar > div small      { color: #86a099; }
.admin-sidebar > div a          { color: var(--white); font-size: 12px; text-decoration: none; }

.admin-content { width: min(1300px, 100% - 60px); margin: 0 auto; padding: 42px 0 70px; }

/* 이용/청구 내역의 아이 선택 탭. **항목 수가 아이 수만큼 늘어나는 자리**라 스크롤이
   없으면 아이가 서너 명만 돼도 폰에서 페이지가 옆으로 밀린다(아이 7명·390px 에서
   134px 밀림 실측). `.mobile-subnav` 와 같은 처리를 한다 — 탭 안에서만 넘긴다.
   글자가 한 글자씩 쪼개지지 않게 버튼에 `nowrap` 도 함께 준다. 2026-08-19. */
.period-tabs               { background: #e7ede9; border-radius: 11px; padding: 4px; display: flex; overflow-x: auto; }
.period-tabs button        { color: #72847d; white-space: nowrap; background: transparent; border: 0; border-radius: var(--r-chip); padding: 9px 15px; font-weight: 800; }
.period-tabs button.active { color: #14785f; background: var(--white); box-shadow: 0 2px 8px #0000000f; }

.admin-metrics                  { grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 28px 0; display: grid; }
.admin-metrics article          { border: 1px solid var(--line); background: var(--white); border-radius: 17px; padding: 22px; }
.admin-metrics article.cancel   { background: snow; border-color: #efd4d1; }  /* snow = #fffafa (번들 유일의 명명색) */
.admin-metrics span,
.admin-metrics small            { color: #7d8f87; font-size: 12px; display: block; }
.admin-metrics strong           { margin: 7px 0; font-size: 31px; display: block; }
.admin-metrics strong em        { margin-left: 3px; font-size: 13px; font-style: normal; }

/* ⚠️ .admin-detail / .admin-table / .admin-row / .admin-links 는 JS에서 사용되지 않는다
      (어드민 v1 잔재 — v2의 .admin-panel / .admin-data-table로 대체됨) */
.admin-detail { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-lg); padding: 25px; }
.admin-table  { margin-top: 20px; overflow: auto; }

.admin-row {
  border-top: 1px solid var(--line-inner);
  grid-template-columns: .8fr 1.4fr 1.4fr .8fr .9fr .9fr .7fr;
  align-items: center;
  gap: 12px;
  min-width: 970px;
  min-height: 72px;
  font-size: 13px;
  display: grid;
}
.admin-row.head    { color: #82928c; border: 0; min-height: 38px; font-size: 11px; font-weight: 900; }
.admin-row span    { flex-direction: column; gap: 4px; display: flex; }
.admin-row small   { color: #8d9a95; }
.admin-row > button { color: #16785f; background: transparent; border: 0; font-weight: 800; }

.cancel-tag { color: #b9514b; background: #fde9e7; }

.admin-links               { grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 18px; display: grid; }
.admin-links article       { border: 1px solid var(--line); background: var(--white); border-radius: 17px; padding: 21px; }
.admin-links article > span { color: #1a866b; letter-spacing: .08em; font-size: 11px; font-weight: 900; }
.admin-links h3            { margin: 7px 0; }
.admin-links p             { color: #7d8e87; }
.admin-links a             { color: #177b62; font-size: 13px; font-weight: 900; text-decoration: none; }

@media (max-width: 900px) {
  .app-type-badge { margin-left: auto; margin-right: 12px; }

  /* 사이드바를 대체하는 가로 스크롤 칩 내비 */
  .mobile-subnav {
    z-index: 8;
    background: var(--bg-parent);
    gap: 7px;
    padding: 8px 0 18px;
    display: flex;
    position: sticky;
    top: 0;
    overflow-x: auto;
  }
  .mobile-subnav button        { white-space: nowrap; border: 1px solid var(--line); color: var(--text-2); background: var(--white); border-radius: var(--r-pill); padding: 9px 16px; font-weight: 800; }
  .mobile-subnav button.active { color: var(--white); background: #1b8f70; border-color: #1b8f70; }

  .admin-layout   { grid-template-columns: minmax(0, 1fr); }   /* 1416행과 같은 이유 */
  .admin-sidebar  { display: none; }
  .admin-content  { width: calc(100% - 30px); padding-top: 25px; }
  .admin-metrics  { grid-template-columns: 1fr 1fr; }
  .admin-top      { padding: 0 14px; }
  .admin-top nav a,
  .admin-top nav > span { display: none; }
  .parent-shortcuts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .parent-shortcuts { grid-template-columns: 1fr; }
  .admin-metrics    { grid-template-columns: 1fr 1fr; }
  .admin-metrics article { padding: 17px; }
  .admin-metrics strong  { font-size: 25px; }
  .admin-links      { grid-template-columns: 1fr; }
  .admin-detail     { padding: 17px; }
  .period-tabs button { padding: 8px 11px; }
  .app-type-badge   { padding: 7px 10px; font-size: 11px; }
  .inline-cancel > div { padding: 25px; }
  .success .cancel-policy { margin-left: -10px; margin-right: -10px; }
}


/* === 공지사항 (마스터/디테일 + 작성 팝오버) ================================= */

.notice-count { color: #177a61 !important; background: #e4f5ee !important; }

.center-tabs button i { color: var(--white); background: #e47849; border-radius: var(--r-field); margin-left: 4px; padding: 1px 5px; font-size: 9px; font-style: normal; }

.unread-badge { color: #147a60; background: #e5f6ef; border-radius: var(--r-pill); padding: 8px 12px; font-size: 12px; font-weight: 900; }

.notice-layout { grid-template-columns: .9fr 1.4fr; gap: 18px; margin-top: 30px; display: grid; }

.notice-list,
.notice-detail { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-lg); overflow: hidden; }

.notice-filter               { border-bottom: 1px solid var(--line-inner); gap: 5px; padding: 17px; display: flex; }
.notice-filter button        { color: #74867f; background: #f1f4f2; border: 0; border-radius: var(--r-chip); padding: 7px 11px; font-weight: 800; }
.notice-filter button.active { color: var(--white); background: #1c8b6d; }

.notice-list > button {
  text-align: left;
  background: var(--white);
  border: 0;
  border-bottom: 1px solid var(--line-inner);
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 11px;
  width: 100%;
  padding: 18px;
  display: grid;
}
.notice-list > button.active         { background: #eff8f4; }
.notice-list > button > span         { color: #73847e; background: #eef2f0; border-radius: 6px; padding: 4px 6px; font-size: 10px; font-weight: 900; }
.notice-list > button.unread > span  { color: #bd653b; background: #fff0e5; }
.notice-list > button div            { flex-direction: column; gap: 6px; display: flex; }
.notice-list > button div b          { font-size: 14px; line-height: 1.4; }
.notice-list > button div small      { color: var(--text-4); }
.notice-list > button > i            { color: #e06f43; font-size: 9px; font-style: normal; font-weight: 900; }

.notice-detail                        { flex-direction: column; display: flex; }
.notice-detail header                 { border-bottom: 1px solid var(--line-inner); padding: 26px; }
.notice-detail header > span          { border-radius: 7px; padding: 5px 8px; font-size: 10px; font-weight: 900; display: inline-block; }
.notice-detail header > span.important { color: #bc623a; background: #fff0e5; }
.notice-detail header > span.normal    { color: #167a61; background: #e8f5ef; }
.notice-detail h2                     { margin: 12px 0; font-size: 22px; }
.notice-detail header small           { color: #889790; }
.notice-detail > div                  { min-height: 230px; padding: 28px; }
.notice-detail > div p                { color: #4e675e; margin-top: 0; line-height: 1.9; }
.notice-detail > div aside            { color: #71847c; background: #f2f7f4; border-radius: var(--r-field); padding: 13px; font-size: 12px; }
.notice-detail footer                 { border-top: 1px solid var(--line-inner); justify-content: space-between; align-items: center; margin-top: auto; padding: 18px 26px; display: flex; }
.notice-detail footer span            { color: #8b9994; font-size: 12px; }
.notice-detail footer button          { color: var(--white); background: #1c8c6d; border: 0; border-radius: 9px; padding: 9px 14px; font-weight: 800; }

/* 작성 독 + 팝오버 */
.notice-composer  { z-index: 80; position: fixed; bottom: 24px; right: 24px; }
.composer-toggle  { color: var(--white); background: #173f34; border: 0; border-radius: var(--r-md); padding: 14px 19px; font-weight: 900; box-shadow: var(--sh-dock); }

.notice-composer > section       { background: var(--white); border-radius: var(--r-lg); width: 410px; padding: 24px; position: absolute; bottom: 58px; right: 0; box-shadow: 0 22px 60px #00000040; }
.notice-composer header          { justify-content: space-between; align-items: flex-start; margin-bottom: 15px; display: flex; }
.notice-composer h2              { margin: 5px 0; font-size: 22px; }
.notice-composer header > button { background: #edf2ef; border: 0; border-radius: var(--r-round); width: 31px; height: 31px; }
.notice-composer label           { flex-direction: column; gap: 6px; margin: 11px 0; font-size: 12px; font-weight: 900; display: flex; }
.notice-composer input,
.notice-composer select,
.notice-composer textarea        { border: 1px solid var(--line); border-radius: 9px; padding: 11px; }
.notice-composer textarea        { resize: none; height: 85px; }
.notice-composer .composer-check { flex-direction: row; align-items: center; font-weight: 600; }
.notice-composer .composer-check input { width: auto; }
.notice-composer .primary        { width: 100%; }

.composer-success        { text-align: center; padding: 18px 0; }
.composer-success b      { color: #147a60; font-size: 17px; }
.composer-success p      { color: #768a82; }
.composer-success button { color: var(--white); background: #1a8b6c; border: 0; border-radius: 9px; padding: 9px 18px; font-weight: 800; }

@media (max-width: 900px) {
  .notice-layout     { grid-template-columns: 1fr; }
  .notice-detail > div { min-height: 180px; }
}

@media (max-width: 600px) {
  .unread-badge  { font-size: 10px; }
  .notice-detail { display: none; }          /* 모바일은 목록만 */
  .notice-list > button { padding: 15px; }
  .notice-composer { bottom: 14px; right: 14px; }
  .notice-composer > section { width: auto; max-height: calc(100vh - 90px); position: fixed; inset: 70px 12px auto; overflow: auto; }
  .composer-toggle { padding: 12px 15px; }
  .notice-list > button div b { font-size: 13px; }
}


/* === 스토어 (이벤트 히어로 + 상품 그리드) =================================== */

.store-head    { justify-content: space-between; align-items: flex-end; display: flex; }
.store-head h1 { margin: 8px 0; font-size: 34px; }
.store-head p  { color: #7c8e87; margin: 0; }

.cart-button   { border: 1px solid var(--line); background: var(--white); border-radius: 11px; padding: 11px 15px; font-weight: 900; }
.cart-button b { color: var(--white); background: #1c8c6c; border-radius: var(--r-round); place-items: center; width: 21px; height: 21px; margin-left: 6px; font-size: 11px; display: inline-grid; }

.event-hero          { border-radius: var(--r-modal); min-height: 270px; margin: 28px 0 38px; padding: 38px 45px; position: relative; overflow: hidden; }
.event-hero.parent   { background: linear-gradient(130deg, #e0f5e9, #f5f8cf); }
.event-hero.center   { background: linear-gradient(130deg, #dcefeb, #dce8f4); }
.event-hero > div:first-child { z-index: 2; position: relative; }
.event-hero > div > span { color: #168167; font-size: 12px; font-weight: 900; }
.event-hero h2       { margin: 10px 0; font-size: 30px; line-height: 1.35; }
.event-hero h2 em    { color: #138265; font-style: normal; }
.event-hero p        { color: #687c74; }
.event-hero button   { color: var(--white); background: #173f34; border: 0; border-radius: var(--r-field); padding: 11px 15px; font-weight: 800; }

.event-object        { background: #ffffff80; border-radius: var(--r-round); place-items: center; width: 260px; height: 220px; display: grid; position: absolute; top: 10%; right: 6%; }
.event-object span   { filter: drop-shadow(0 15px 15px #1c413529); font-size: 100px; }
.event-object i      { color: var(--white); font-size: 27px; position: absolute; top: 15px; right: 24px; }

.store-section-head    { justify-content: space-between; align-items: flex-end; margin-bottom: 18px; display: flex; }
.store-section-head h2 { margin: 0; font-size: 24px; }
.store-section-head p  { color: #84958e; margin: 6px 0 0; }

.store-filters               { gap: 5px; display: flex; }
.store-filters button        { color: var(--text-2); background: #edf2ef; border: 0; border-radius: var(--r-chip); padding: 8px 12px; font-weight: 800; }
.store-filters button.active { color: var(--white); background: #1b8a6b; }

.product-grid                { grid-template-columns: repeat(3, 1fr); gap: 17px; display: grid; }
.product-grid article        { border: 1px solid var(--line); background: var(--white); border-radius: 19px; transition: all .2s; overflow: hidden; }
.product-grid article:hover  { transform: translateY(-3px); box-shadow: 0 13px 30px #21433817; }

.product-image        { background: linear-gradient(145deg, #f3f7f4, #e4eee8); place-items: center; height: 175px; display: grid; position: relative; }
.product-image > span { filter: drop-shadow(0 10px 10px #0000001f); font-size: 72px; }
.product-image > b    { color: var(--white); background: #1b8b6c; border-radius: 7px; padding: 5px 7px; font-size: 9px; position: absolute; top: 14px; left: 14px; }

.product-info         { padding: 20px; }
.product-info h3      { margin: 0; font-size: 18px; }
.product-info p       { color: #82928c; min-height: 42px; font-size: 13px; line-height: 1.5; }
.product-info strong  { margin: 15px 0; font-size: 18px; display: block; }
.product-info button  { color: #14785f; background: #f3faf7; border: 1px solid #bcd7cd; border-radius: 9px; width: 100%; padding: 10px; font-weight: 900; }

.store-notice   { background: #f0f5f2; border-radius: 12px; gap: 15px; margin-top: 20px; padding: 16px 20px; display: flex; }
.store-notice p { color: #6c8078; margin: 0; font-size: 13px; line-height: 1.6; }
.store-notice b { white-space: nowrap; }

@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .event-object { opacity: .55; right: -60px; }
}

@media (max-width: 600px) {
  .store-head    { align-items: flex-start; }
  .store-head h1 { font-size: 29px; }
  .store-head p  { font-size: 13px; }
  .cart-button   { padding: 9px 10px; font-size: 12px; }
  .event-hero    { min-height: 300px; padding: 28px 24px; }
  .event-hero h2 { font-size: 25px; }
  .event-object  { opacity: .25; top: 80px; right: -100px; }
  .store-section-head { align-items: flex-start; }
  .store-filters { display: none; }
  .product-grid  { grid-template-columns: 1fr; }
  .product-image { height: 145px; }
  .store-notice  { flex-direction: column; gap: 6px; }
}


/* === 자동화 플로우 모달 (설명용 다이어그램) ================================= */

.automation-dock   { z-index: 90; position: fixed; bottom: 24px; left: 24px; }
.automation-toggle { color: var(--white); background: #1d6856; border: 0; border-radius: var(--r-md); padding: 14px 19px; font-weight: 900; box-shadow: var(--sh-dock); }

.automation-backdrop {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #0a201a9e;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}
.automation-modal          { background: #f7f9f7; border-radius: var(--r-modal); width: min(1120px, 100%); max-height: 92vh; overflow: auto; box-shadow: var(--sh-modal); }
.automation-modal > header { border-bottom: 1px solid var(--line); background: var(--white); border-radius: var(--r-modal) var(--r-modal) 0 0; justify-content: space-between; align-items: flex-start; padding: 28px 32px; display: flex; }
.automation-modal header h2      { margin: 7px 0; font-size: 28px; }
.automation-modal header p       { color: var(--text-2); margin: 0; }
.automation-modal header > button { background: #edf2ef; border: 0; border-radius: var(--r-round); width: 35px; height: 35px; font-size: 20px; }

.automation-board { padding: 31px 32px; }

.flow-lane         { grid-template-columns: 90px 1fr auto 1fr auto 1.15fr auto 1.15fr; align-items: center; gap: 11px; margin-bottom: 22px; display: grid; }
.flow-lane.payment { grid-template-columns: 90px 1fr auto 1fr auto 1.15fr; position: relative; }
.lane-label        { color: #657a72; font-size: 12px; font-weight: 900; }
.flow-lane > i     { color: #62a391; font-size: 22px; font-style: normal; }   /* 화살표 */

.flow-node        { text-align: left; background: var(--white); border: 1px solid #cfe0d8; border-radius: var(--r-md); flex-direction: column; justify-content: center; gap: 7px; min-height: 86px; padding: 13px; display: flex; }
.flow-node b      { font-size: 14px; }
.flow-node span   { color: #768981; font-size: 10px; }
.flow-node:hover,
.flow-node.selected { background: #eff9f5; border: 2px solid #15906e; }
.flow-node.core     { background: #dcf3ea; border-color: #85cdb8; }
.flow-node.output   { background: #e8f0f7; border-color: #a7c7dd; }
.flow-node.payment  { background: #f4f1fb; border-color: #c8bae6; }
.flow-node.alert    { background: #fff1e8; border-color: #edbd9f; }

.cross-link { color: #c06d3e; font-size: 10px; font-weight: 900; position: absolute; top: -19px; right: 2%; }

.flow-detail          { grid-template-columns: 1.4fr 1fr; gap: 16px; padding: 0 32px 28px; display: grid; }
.flow-detail > div,
.flow-detail > aside  { border: 1px solid var(--line); background: var(--white); border-radius: 15px; padding: 20px; }
.flow-detail > div > span { color: #779087; font-size: 11px; font-weight: 900; }
.flow-detail h3       { margin: 6px 0; font-size: 21px; }
.flow-detail p        { color: #60766e; margin-bottom: 0; line-height: 1.7; }
.flow-detail aside b  { font-size: 14px; }
.flow-detail ul       { color: #647970; margin-bottom: 0; padding-left: 18px; font-size: 12px; line-height: 1.8; }

.automation-modal > footer        { border-top: 1px solid var(--line); background: var(--white); border-radius: 0 0 var(--r-modal) var(--r-modal); justify-content: space-between; align-items: center; padding: 18px 32px; display: flex; }
.automation-modal > footer span   { color: #7c8f87; font-size: 12px; }
.automation-modal > footer button { color: var(--white); background: #1a886b; border: 0; border-radius: 9px; padding: 9px 18px; font-weight: 900; }

@media (max-width: 900px) {
  .flow-lane,
  .flow-lane.payment { grid-template-columns: 75px 1fr; }
  .flow-lane > i     { display: none; }
  .flow-node         { min-height: 66px; }
  .cross-link        { display: none; }
  .automation-board  { grid-template-columns: 1fr 1fr; gap: 14px; display: grid; }
  .flow-detail       { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .automation-dock     { bottom: 14px; left: 14px; }
  .automation-toggle   { padding: 12px 15px; }
  .automation-backdrop { padding: 0; }
  .automation-modal    { border-radius: 0; height: 100%; max-height: 100vh; }
  .automation-modal > header { border-radius: 0; padding: 22px; }
  .automation-modal header h2 { font-size: 23px; }
  .automation-modal header p  { font-size: 12px; }
  .automation-board    { grid-template-columns: 1fr; padding: 20px; }
  .flow-lane,
  .flow-lane.payment   { grid-template-columns: 74px 1fr; margin: 0; }
  .flow-detail         { padding: 0 20px 20px; }
  .flow-detail > aside { display: none; }
  .automation-modal > footer { border-radius: 0; padding: 15px 20px; }
}


/* === 롤아웃 로드맵 모달 ===================================================== */

.rollout-dock   { z-index: 89; position: fixed; bottom: 24px; left: 220px; }
.rollout-toggle { color: #1b6855; background: var(--white); border: 1px solid #bcd5cc; border-radius: var(--r-md); padding: 13px 18px; font-weight: 900; box-shadow: 0 12px 28px #0f302729; }

.rollout-backdrop {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #0a201aa6;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}
.rollout-modal          { background: #f5f8f6; border-radius: var(--r-modal); width: min(1180px, 100%); max-height: 92vh; overflow: auto; box-shadow: var(--sh-modal); }
.rollout-modal > header { border-bottom: 1px solid var(--line); background: var(--white); border-radius: var(--r-modal) var(--r-modal) 0 0; justify-content: space-between; align-items: flex-start; padding: 28px 32px; display: flex; }
.rollout-modal header h2       { margin: 7px 0; font-size: 28px; }
.rollout-modal header p        { color: var(--text-2); margin: 0; }
.rollout-modal header > button { background: #edf2ef; border: 0; border-radius: var(--r-round); width: 35px; height: 35px; font-size: 20px; }

.rollout-content { padding: 26px 32px; }

.rollout-timeline          { grid-template-columns: repeat(6, 1fr); gap: 9px; display: grid; }
.rollout-timeline > button { text-align: left; background: var(--white); border: 1px solid #d5e2dc; border-radius: 15px; gap: 10px; min-height: 142px; padding: 15px 12px; transition: all .18s; display: flex; position: relative; }
.rollout-timeline > button:hover,
.rollout-timeline > button.selected { background: #ecf8f3; border-color: #188669; box-shadow: 0 7px 20px #1c6a5417; }

.rollout-number { color: #557068; background: #dfeae5; border-radius: var(--r-round); flex: 0 0 27px; place-items: center; height: 27px; font-size: 11px; font-weight: 900; display: grid; }
.rollout-timeline > button.selected .rollout-number { color: var(--white); background: #19896b; }

.rollout-timeline > button > div { flex-direction: column; gap: 7px; display: flex; }
.rollout-timeline em    { color: #178066; font-size: 9px; font-style: normal; font-weight: 900; }
.rollout-timeline b     { font-size: 13px; line-height: 1.45; }
.rollout-timeline small { color: #83938d; font-size: 10px; line-height: 1.4; }
/* 카드 오른쪽 밖으로 튀어나온 연결 뱃지 */
.rollout-timeline i     { z-index: 2; color: var(--white); background: #88b9a9; border-radius: var(--r-round); place-items: center; width: 17px; height: 17px; font-size: 10px; font-style: normal; display: grid; position: absolute; top: 58px; right: -9px; }

.rollout-detail             { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-panel); grid-template-columns: .75fr 2fr; gap: 22px; margin-top: 20px; padding: 24px; display: grid; }
.rollout-detail-title       { border-right: 1px solid #e5ece8; padding-right: 22px; }
.rollout-detail-title > span { color: #188168; font-size: 10px; font-weight: 900; }
.rollout-detail-title h3    { margin: 8px 0; font-size: 21px; line-height: 1.35; }
.rollout-detail-title p     { color: #7e9189; margin: 0; }

.rollout-detail dl          { grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; display: grid; }
.rollout-detail dl > div    { background: #f5f8f6; border-radius: 12px; padding: 14px; }
.rollout-detail dl > div.gate { background: #eaf7f1; border: 1px solid #c9e6da; grid-column: 1 / -1; }
.rollout-detail dt          { color: #6d827a; margin-bottom: 7px; font-size: 10px; font-weight: 900; }
.rollout-detail dd          { color: #405b52; margin: 0; font-size: 12px; font-weight: 700; line-height: 1.65; }

.rollout-rule            { background: #fff7e8; border: 1px solid #eedebc; border-radius: 13px; align-items: center; gap: 14px; margin-top: 15px; padding: 15px 18px; display: flex; }
.rollout-rule b          { color: #8a611d; white-space: nowrap; }
.rollout-rule span       { color: #735f3e; padding-left: 13px; font-size: 11px; line-height: 1.45; position: relative; }
.rollout-rule span:before { content: "\2022"; color: #c89032; position: absolute; left: 0; }

.rollout-modal > footer        { border-top: 1px solid var(--line); background: var(--white); border-radius: 0 0 var(--r-modal) var(--r-modal); justify-content: space-between; align-items: center; padding: 18px 32px; display: flex; }
.rollout-modal > footer span   { color: #7c8f87; font-size: 12px; }
.rollout-modal > footer button { color: var(--white); background: #1a886b; border: 0; border-radius: 9px; padding: 9px 18px; font-weight: 900; }

@media (max-width: 1000px) {
  .rollout-timeline     { grid-template-columns: repeat(3, 1fr); }
  .rollout-detail       { grid-template-columns: 1fr; }
  .rollout-detail-title { border-bottom: 1px solid #e5ece8; border-right: 0; padding: 0 0 18px; }
  .rollout-rule         { flex-direction: column; align-items: flex-start; gap: 7px; }
}

@media (max-width: 600px) {
  .rollout-dock     { bottom: 66px; left: 14px; }
  .rollout-toggle   { padding: 11px 15px; }
  .rollout-backdrop { padding: 0; }
  .rollout-modal    { border-radius: 0; height: 100%; max-height: 100vh; }
  .rollout-modal > header { border-radius: 0; padding: 21px; }
  .rollout-modal header h2 { font-size: 23px; }
  .rollout-modal header p  { font-size: 12px; line-height: 1.5; }
  .rollout-content  { padding: 18px; }
  .rollout-timeline { grid-template-columns: 1fr; }
  .rollout-timeline > button { min-height: auto; padding: 12px; }
  .rollout-timeline i { display: none; }
  .rollout-detail   { padding: 18px; }
  .rollout-detail dl { grid-template-columns: 1fr; }
  .rollout-detail dl > div.gate { grid-column: auto; }
  .rollout-rule     { display: none; }
  .rollout-modal > footer { border-radius: 0; padding: 15px 18px; }
}


/* === 어드민 v2 (현행) ======================================================= */

.admin-full-shell { background: var(--bg-admin-v2); }

.admin-top-v2       { z-index: 30; height: 74px; position: sticky; top: 0; }
.admin-top-center   { color: var(--text-1); align-items: center; gap: 9px; font-size: 11px; display: flex; }
.admin-top-center b { color: #304c42; }
.admin-top-center em { color: #147a60; background: #e6f5ee; border-radius: 15px; padding: 6px 9px; font-style: normal; font-weight: 900; }

.admin-layout-v2  { grid-template-columns: 258px minmax(0, 1fr); }   /* 1416행과 같은 이유 */

.admin-sidebar-v2            { height: calc(100vh - 74px); padding-top: 24px; position: sticky; top: 74px; overflow: auto; }
.admin-sidebar-v2 > button   { min-height: 45px; }
.admin-sidebar-v2 > button > b       { color: #d9eee7; background: #316458; border-radius: 13px; margin-left: auto; padding: 2px 7px; font-size: 9px; }
.admin-sidebar-v2 > button > b.warn  { color: var(--white); background: #a9573f; }
.admin-sidebar-v2 > div span { color: #77938a; font-size: 9px; }

.admin-content-v2 { width: min(1460px, 100% - 58px); padding: 34px 0 125px; }
/* 학부모 `.content` 와 같은 함정이 어드민에 남아 있었다 — 그리드 항목의 기본
   `min-width: auto` 가 **자식보다 작아지지 못하게** 해서, 안쪽 `.admin-table-scroll`
   에 `overflow-x: auto` 를 줘도 듣지 않는다. 넘치는 패널이 있으면 그만큼 트랙이
   넓어져 페이지가 통째로 밀린다. 위(367행) `.layout > .content` 와 같은 처방이다.
   ((1-2) 어드민 눈검수에서 CMS 화면 24px 밀림으로 드러남, 2026-08-19) */
.admin-content,
.admin-content-v2 { min-width: 0; }

.admin-mobile-nav { display: none; }   /* ≤900px에서 flex로 전환 */

.admin-page-head    { justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; display: flex; }
.admin-page-head h1 { margin: 7px 0; font-size: 31px; }
.admin-page-head p  { color: #788b83; margin: 0; }

/* 제목 옆 버튼 줄. flex 아이템의 기본 `min-width: auto` 때문에 **내용보다 작아지지
   못해**, 검색칸(225px)에 버튼이 하나 더 붙으면 제목 자리를 넘어 페이지를 민다
   (`기관 일정` 1024px 에서 4px). 좁아지면 다음 줄로 접히게 하고, 검색칸이 먼저 줄어
   버튼은 온전히 남게 한다 — 버튼 글자가 쪼개지는 것보다 낫다. 2026-08-19. */
.admin-global-actions          { align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; gap: 9px; display: flex; }
.admin-global-actions > label  { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-field); align-items: center; flex: 0 1 225px; min-width: 130px; width: 225px; padding: 0 11px; display: flex; }
.admin-global-actions > label span { color: #84968f; }
.admin-global-actions input    { border: 0; outline: 0; width: 100%; padding: 11px 7px; }
.admin-global-actions > button { color: var(--white); white-space: nowrap; background: #178468; border: 0; border-radius: var(--r-field); padding: 12px 15px; font-weight: 900; }

.admin-period-tabs { width: max-content; margin-left: auto; }

.admin-metrics-v2         { margin-top: 14px; }
.admin-metrics-v2 article { min-height: 132px; }
.admin-metrics-v2 strong  { font-size: 29px; }

.admin-ops-grid { grid-template-columns: 1.05fr .95fr; gap: 17px; margin-bottom: 17px; display: grid; }

.admin-panel      { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-panel); padding: 23px; box-shadow: var(--sh-panel); }
.admin-panel-head { justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 18px; display: flex; }
.admin-panel-head h2       { margin: 0; font-size: 19px; }
.admin-panel-head p        { color: var(--text-3); margin: 6px 0 0; font-size: 12px; }
.admin-panel-head > button { border: 1px solid var(--line); color: #14785f; background: var(--white); border-radius: var(--r-chip); padding: 8px 11px; font-size: 11px; font-weight: 900; }

/* 처리 대기 큐 */
.admin-queue                 { grid-template-columns: 1fr 1fr; gap: 9px; display: grid; }
.admin-queue > button        { text-align: left; background: #fbfcfb; border: 1px solid #e4ebe7; border-radius: 12px; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 13px; display: grid; }
.admin-queue > button:hover  { background: #f2faf6; border-color: #9ecbbc; }
.admin-queue > button div    { flex-direction: column; gap: 3px; display: flex; }
.admin-queue > button div b  { font-size: 12px; }
.admin-queue > button small  { color: #889790; font-size: 9px; }
.admin-queue > button > strong { font-size: 19px; }

.queue-icon        { border-radius: var(--r-field); place-items: center; width: 32px; height: 32px; font-weight: 900; display: grid; }
.queue-icon.green  { color: #188267; background: #e4f5ee; }
.queue-icon.red    { color: #c45b52; background: #feecea; }
.queue-icon.orange { color: #c26c3c; background: #fff0e4; }
.queue-icon.blue   { color: #4b83a8; background: #e8f1f7; }

/* 지역별 진행률 */
.region-progress          { flex-direction: column; gap: 15px; display: flex; }
.region-progress > div    { grid-template-columns: 1fr auto; gap: 7px; display: grid; }
.region-progress span     { align-items: center; gap: 8px; display: flex; }
.region-progress span b   { font-size: 13px; }
.region-progress span em  { color: #82928c; font-size: 10px; font-style: normal; }
.region-progress strong   { font-size: 12px; }
.region-progress i        { background: #edf1ef; border-radius: var(--r-field); grid-column: 1 / -1; height: 7px; overflow: hidden; }
.region-progress i u      { background: linear-gradient(90deg, #1b8e70, #62b79d); border-radius: var(--r-field); height: 100%; text-decoration: none; display: block; }

.admin-insight   { background: #f0f6e5; border-radius: 11px; gap: 12px; margin-top: 18px; padding: 13px; display: flex; }
.admin-insight b { white-space: nowrap; font-size: 11px; }
.admin-insight p { color: #6d7e66; margin: 0; font-size: 10px; line-height: 1.55; }

/* 최근 활동 */
.admin-activity-panel  { margin-bottom: 17px; }
.admin-activity        { grid-template-columns: 1fr 1fr; gap: 0 20px; display: grid; }
.admin-activity > div  { border-top: 1px solid var(--line-inner-v2); grid-template-columns: auto 45px 1fr auto; align-items: center; gap: 8px; padding: 12px 0; font-size: 11px; display: grid; }
.admin-activity > div > i  { border-radius: var(--r-round); width: 7px; height: 7px; }
.admin-activity i.green    { background: #28a881; }
.admin-activity i.orange   { background: #e58a4e; }
.admin-activity i.blue     { background: #4e93ba; }
.admin-activity i.red      { background: #d65e55; }
.admin-activity > div > b  { color: var(--text-1); }
.admin-activity > div > em { color: #899891; font-size: 9px; font-style: normal; }

/* 카드 수에 맞춘다. 4열 고정이던 때는 다섯 번째 카드가 다음 줄에 홀로 남았다
   (취소 관리에 '키즈노트 확인 대기'가 늘면서 실제로 그렇게 됐다). */
.admin-summary-strip         { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 17px; display: grid; }
.admin-summary-strip article { border: 1px solid var(--line); background: var(--white); border-radius: 15px; padding: 18px; }
.admin-summary-strip span,
.admin-summary-strip small   { color: #84958e; font-size: 10px; display: block; }
.admin-summary-strip b       { margin: 7px 0; font-size: 21px; display: block; }

.admin-table-filters                 { gap: 5px; display: flex; }
/* `nowrap` 이 없으면 flex 항목인 버튼이 공간 부족에 밀려 줄어들고, 그때 글자가 한 글자씩
   세로로 쪼개진다("전체 상 태", "CMS 전 체"). 1024px 에서 재현. 버튼이 안 줄면 2119행의
   `.admin-table-filters { overflow-x: auto }` 가 받아 준다. (1-1) 발견, 2026-08-19. */
.admin-table-filters button          { color: var(--text-1); white-space: nowrap; background: #eef2f0; border: 0; border-radius: 7px; padding: 7px 10px; font-size: 10px; font-weight: 900; }
.admin-table-filters button.selected { color: var(--white); background: #1b886b; }

/* 패널 padding을 음수 마진으로 상쇄해 표를 카드 가장자리까지 붙여 스크롤시킨다 */
.admin-table-scroll { margin: 0 -23px -23px; padding: 0 23px 8px; overflow: auto; }

.admin-data-table    { border-collapse: collapse; width: 100%; min-width: 980px; font-size: 11px; }
.admin-data-table th { text-align: left; color: #7b8d86; background: #f7f9f8; border-top: 1px solid var(--line-inner-v2); border-bottom: 1px solid #e7ece9; padding: 11px 10px; font-size: 9px; }
.admin-data-table td { vertical-align: middle; color: #52695f; border-bottom: 1px solid var(--line-inner-v2); padding: 14px 10px; }
.admin-data-table td > b,
.admin-data-table td > small { display: block; }
.admin-data-table td > small { color: #909d98; margin-top: 4px; font-size: 9px; }
.admin-data-table td > button        { color: var(--green-text); background: #edf5f1; border: 0; border-radius: 7px; margin: 3px 3px 3px 0; padding: 6px 8px; font-size: 9px; font-weight: 900; }
.admin-data-table td > button.solid  { color: var(--white); background: var(--green-solid); }

/* 액션 열 고정 — 1280px 노트북에서 **오른쪽 끝 버튼이 가려진다.**
   표는 min-width 980 인데 래퍼가 947 이라 33px 이 잘린다. 스크롤은 되지만 33px 만
   모자라 대부분 보이므로 **담당자는 뭔가 가려졌다는 것 자체를 모른다** — 보이는 것만
   있는 줄 알고 쓴다. 신규 신청의 '반려'·취소 관리의 '반려'·배송판의 '사진·기록'이
   그렇게 숨어 있었다((1-2) 발견 → (1-1) 전수 확인, 2026-08-19).
   승인은 보이고 반려만 안 보이면 담당자는 **일단 승인하고 나중에 해지로 처리**하게 된다.

   표를 좁히는 쪽은 안 된다 — 좁은 값 칸에 한글이 들어가면 글자가 세로로 쪼개진다(규칙 ②).
   그래서 액션 열을 오른쪽에 고정한다. 마지막 열에 버튼이 있는 표에만 걸어, 마지막 열이
   그냥 값인 표는 지금 그대로 둔다. */
.admin-data-table:has(tbody td:last-child button) th:last-child,
.admin-data-table:has(tbody td:last-child button) td:last-child {
  position: sticky;
  right: 0;
  /* border-collapse: collapse 인 표에서는 sticky 칸의 테두리가 함께 스크롤돼 어긋난다.
     경계는 그림자로 준다 — 고정 열이라는 것도 이것으로 드러난다. */
  box-shadow: -9px 0 9px -9px rgb(31 61 51 / 18%);
}
.admin-data-table:has(tbody td:last-child button) td:last-child { background: var(--white); }

.admin-status-v2        { white-space: nowrap; border-radius: 13px; justify-content: center; align-items: center; margin-right: 4px; padding: 5px 8px; font-size: 9px; font-weight: 900; display: inline-flex; }
.admin-status-v2.done   { color: #167b60; background: #e5f5ed; }
.admin-status-v2.wait   { color: #b96a3e; background: #fff0e4; }
.admin-status-v2.danger { color: #bd554f; background: #fde9e7; }

.admin-policy-banner        { background: linear-gradient(120deg, #fff3e7, #fff9f2); border: 1px solid #efddc7; border-radius: 17px; justify-content: space-between; align-items: center; gap: 25px; margin-bottom: 17px; padding: 22px 25px; display: flex; }
.admin-policy-banner span   { color: #bb6c39; font-size: 9px; font-weight: 900; }
.admin-policy-banner h2     { margin: 5px 0; font-size: 20px; }
.admin-policy-banner p      { color: #806e60; margin: 0; font-size: 11px; }
.admin-policy-banner button { color: var(--white); white-space: nowrap; background: #b96b3e; border: 0; border-radius: 9px; padding: 10px 13px; font-weight: 900; }

/* 기관 관리 카드 */
.center-admin-grid { grid-template-columns: 1fr 1fr; gap: 15px; display: grid; }
.center-admin-card { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-panel); padding: 22px; }
.center-admin-card header            { border-bottom: 1px solid var(--line-inner-v2); justify-content: space-between; gap: 15px; padding-bottom: 17px; display: flex; }
.center-admin-card header > div > span { color: #188167; font-size: 9px; font-weight: 900; }
.center-admin-card h2                { margin: 5px 0; font-size: 19px; }
.center-admin-card header small      { color: var(--text-3); font-size: 9px; }
.center-admin-card dl                { grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; display: grid; }
.center-admin-card dl > div          { background: var(--bg-subtle); border-radius: var(--r-field); padding: 12px; }
.center-admin-card dt                { color: var(--text-3); font-size: 9px; }
.center-admin-card dd                { margin: 5px 0 0; font-size: 11px; font-weight: 900; }
.center-admin-card footer            { justify-content: flex-end; gap: 7px; display: flex; }
.center-admin-card footer button     { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-chip); padding: 8px 11px; font-size: 10px; font-weight: 900; }
.center-admin-card footer button.solid { color: var(--white); background: #19866a; border: 0; }

/* 결제 매칭 / 배송 대조 배너 */
.payment-match-banner,
.delivery-compare-banner { border: 1px solid var(--line); background: var(--white); border-radius: 17px; align-items: center; gap: 22px; margin-bottom: 17px; padding: 20px 23px; display: flex; }
.payment-match-banner > div { min-width: 320px; }
.payment-match-banner > div span,
.delivery-compare-banner > div span { color: #168066; font-size: 9px; font-weight: 900; }
.payment-match-banner strong { margin: 5px 0; font-size: 28px; display: block; }
.payment-match-banner p,
.delivery-compare-banner p   { color: #7e9089; margin: 0; font-size: 10px; }
.payment-match-banner > i    { background: #edf2ef; border-radius: var(--r-field); flex: 1; height: 11px; overflow: hidden; }
.payment-match-banner > i u  { background: #1b9a76; border-radius: var(--r-field); height: 100%; display: block; }
.payment-match-banner > aside      { white-space: nowrap; border-left: 1px solid #e3e9e6; flex-direction: column; gap: 4px; padding-left: 20px; display: flex; }
.payment-match-banner > aside b    { font-size: 10px; }
.payment-match-banner > aside span { color: #64786f; font-size: 12px; }

.delivery-compare-banner    { background: linear-gradient(120deg, #eaf7f1, #f5fbf8); justify-content: space-between; }
.delivery-compare-banner h2 { margin: 6px 0; font-size: 18px; }

/* 일정 관리 */
.schedule-admin-layout { grid-template-columns: 1fr 300px; gap: 16px; display: grid; }
.schedule-admin-list   { flex-direction: column; display: flex; }
.schedule-admin-list > button        { text-align: left; background: var(--white); border: 0; border-top: 1px solid var(--line-inner-v2); grid-template-columns: 66px 1.3fr 1fr auto; align-items: center; gap: 12px; padding: 15px 4px; display: grid; }
.schedule-admin-list > button:hover  { background: #f7faf8; }
.schedule-admin-list time            { color: #188168; font-size: 10px; font-weight: 900; }
.schedule-admin-list > button > div       { flex-direction: column; gap: 4px; display: flex; }
.schedule-admin-list > button > div b     { font-size: 12px; }
.schedule-admin-list > button > div span  { color: #82928c; font-size: 9px; }
.schedule-admin-list > button > strong    { font-size: 10px; }

.schedule-impact h2        { margin: 0 0 18px; font-size: 18px; }
.schedule-impact > div     { border-bottom: 1px solid var(--line-inner-v2); justify-content: space-between; padding: 12px 0; font-size: 11px; display: flex; }
.schedule-impact > div b   { font-size: 14px; }
.schedule-impact > div.total   { color: var(--green-text); border-bottom: 0; padding-top: 18px; }
.schedule-impact > div.total b { font-size: 20px; }
.schedule-impact > p       { color: #718168; background: #f0f6e5; border-radius: var(--r-field); padding: 12px; font-size: 9px; line-height: 1.6; }

/* 콘텐츠 관리 */
.content-admin-grid { grid-template-columns: 1.05fr .95fr; gap: 16px; display: grid; }
.content-admin-list { flex-direction: column; display: flex; }
.content-admin-list > button                 { text-align: left; background: var(--white); border: 0; border-top: 1px solid var(--line-inner-v2); grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 15px 3px; display: grid; }
.content-admin-list > button > span          { color: var(--text-1); background: #eef2f0; border-radius: 6px; padding: 5px 7px; font-size: 8px; font-weight: 900; }
.content-admin-list > button > span.important { color: #b9673b; background: #fff0e5; }
.content-admin-list > button > div           { flex-direction: column; gap: 4px; display: flex; }
.content-admin-list > button > div b         { font-size: 11px; }
.content-admin-list > button > div small     { color: #889790; font-size: 9px; }

.campaign-admin-list                    { grid-template-columns: 1fr 1fr; gap: 10px; display: grid; }
.campaign-admin-list article            { border: 1px solid #e4ebe7; border-radius: 13px; padding: 15px; }
.campaign-admin-list article:last-child { grid-column: 1 / -1; }
.campaign-admin-list article > span     { color: #178066; font-size: 8px; font-weight: 900; }
.campaign-admin-list h3                 { margin: 7px 0; font-size: 13px; line-height: 1.5; }
.campaign-admin-list p                  { color: #83938c; font-size: 9px; }
.campaign-admin-list footer             { justify-content: space-between; align-items: center; margin-top: 12px; display: flex; }
.campaign-admin-list footer button      { color: #15785f; background: #edf4f1; border: 0; border-radius: 7px; padding: 6px 8px; font-size: 9px; font-weight: 900; }

/* 우측 슬라이드 드로어 */
.admin-detail-backdrop {
  z-index: 150;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #0a1f198a;
  justify-content: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}
.admin-detail-drawer          { background: var(--white); flex-direction: column; width: min(480px, 100%); height: 100%; padding: 30px; display: flex; overflow: auto; box-shadow: -20px 0 60px #0003; }
.admin-detail-drawer > header { border-bottom: 1px solid #e8eeeb; justify-content: space-between; gap: 20px; padding-bottom: 20px; display: flex; }
.admin-detail-drawer h2            { margin: 6px 0; font-size: 24px; }
.admin-detail-drawer header p      { color: #83938c; margin: 0; }
.admin-detail-drawer header button { background: #edf2ef; border: 0; border-radius: var(--r-round); width: 34px; height: 34px; font-size: 19px; }
.admin-detail-drawer dl            { margin: 20px 0; }
.admin-detail-drawer dl > div      { border-bottom: 1px solid var(--line-inner-v2); grid-template-columns: 120px 1fr; padding: 13px 0; display: grid; }
.admin-detail-drawer dt            { color: #81928b; font-size: 10px; }
.admin-detail-drawer dd            { color: #425c52; margin: 0; font-size: 12px; font-weight: 800; }
.admin-detail-drawer > section     { flex-direction: column; gap: 8px; display: flex; }
.admin-detail-drawer > section b   { font-size: 11px; }
/* 상세 서랍 **본문**의 버튼. 지금까지 header 와 footer 의 버튼만 칠해져 있어서, 본문
   안에 놓인 버튼(계좌 원문 보기·계좌 입력)은 배경도 테두리도 없는 맨 글자로 나왔다 —
   담당자 눈에 버튼으로 보이지 않는다. footer 와 같은 모양을 주되, 세로 flex 안에서
   가로로 늘어나지 않게 왼쪽에 붙인다(설명문과 같은 폭이면 문단처럼 읽힌다). */
.admin-detail-drawer > section button       { border: 1px solid var(--line); background: var(--white); border-radius: 9px; align-self: flex-start; padding: 9px 13px; font-size: 12px; font-weight: 900; }
.admin-detail-drawer > section button.solid { color: var(--white); background: #188469; border: 0; }
.admin-detail-drawer > section button:disabled { color: #618076; cursor: default; background: #dbe8e3; border-color: #dbe8e3; }
.admin-detail-drawer textarea      { border: 1px solid var(--line); resize: none; border-radius: var(--r-field); height: 100px; padding: 12px; }
/* 담당자 메모칸(applications.js `noteBox`)만 100px 에 안 갇힌다. 위 공용 규칙은 그대로
   둔다 — 취소·환불·박스회수 서랍도 `.admin-detail-drawer textarea` 를 쓰므로 여기서
   `height`·`resize` 를 직접 고치면 그 서랍들까지 함께 바뀐다(규칙 ③). 클래스를 하나
   더 얹어(.admin-note-autosize) 특이성만 올린다 — (0,2,1) 이 (0,1,1) 을 이긴다.
   JS(applications.js `autosizeNote`)가 input마다 scrollHeight 로 실제 높이를 다시 재고,
   여기 `max-height`+`overflow-y` 는 극단적으로 긴 메모가 서랍 자체를 밀어내지 않도록
   막는 상한이다(그 이상은 상자 안 스크롤). */
.admin-detail-drawer textarea.admin-note-autosize {
  height: auto;
  min-height: 100px;
  max-height: 360px;
  overflow-y: auto;
  resize: vertical;
}
.admin-detail-drawer > footer      { justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 24px; display: flex; }
.admin-detail-drawer > footer button       { border: 1px solid var(--line); background: var(--white); border-radius: 9px; padding: 10px 14px; font-weight: 900; }
.admin-detail-drawer > footer button.solid { color: var(--white); background: #188469; border: 0; }

.admin-toast { z-index: 170; }

@media (max-width: 1150px) {
  .admin-top-center    { display: none; }
  .admin-content-v2    { width: calc(100% - 36px); }
  .admin-summary-strip { grid-template-columns: 1fr 1fr; }
  .content-admin-grid,
  .admin-ops-grid,
  .schedule-admin-layout { grid-template-columns: 1fr; }

  /* 세로 리스트 → 가로 4열 grid로 형태 자체가 바뀐다 */
  .schedule-impact       { grid-template-columns: repeat(4, 1fr); align-items: center; gap: 10px; display: grid; }
  .schedule-impact h2,
  .schedule-impact p     { grid-column: 1 / -1; }
  .schedule-impact > div { background: var(--bg-subtle); border: 0; border-radius: var(--r-field); flex-direction: column; gap: 7px; padding: 12px; display: flex; }

  .payment-match-banner > div { min-width: 230px; }

  /* 제목과 버튼 줄을 위아래로 나눈다. 사이드바가 아직 보이는 폭이라 제목 옆에 남는
     자리가 340px뿐인데, `기관 일정`의 버튼 줄은 날짜 2개·지점 선택·등록 버튼으로
     635px 가 필요해 페이지를 밀었다. 900px 이하에는 같은 규칙이 이미 있었고, 그
     사이(1024px 등)가 사각지대였다 — 태블릿 가로·창을 반으로 나눈 노트북이 그 폭이다. */
  .admin-page-head      { flex-direction: column; align-items: flex-start; }
  .admin-global-actions { justify-content: flex-start; width: 100%; }
}

@media (max-width: 900px) {
  .admin-layout-v2  { grid-template-columns: minmax(0, 1fr); }   /* 1416행과 같은 이유 */
  .admin-sidebar-v2 { display: none; }
  .admin-content-v2 { padding-top: 18px; }

  .admin-mobile-nav          { gap: 6px; margin: 0 -18px 22px; padding: 0 18px 9px; display: flex; overflow-x: auto; }
  .admin-mobile-nav button   { white-space: nowrap; border: 1px solid var(--line); color: #6d8179; background: var(--white); border-radius: var(--r-panel); padding: 8px 12px; font-size: 10px; font-weight: 900; }
  .admin-mobile-nav button.selected { color: var(--white); background: #1a8368; border-color: #1a8368; }
  .admin-mobile-nav button b { color: var(--white); background: #e1714d; border-radius: var(--r-field); margin-left: 5px; padding: 1px 5px; }

  .admin-page-head { flex-direction: column; align-items: flex-start; }
  .admin-global-actions         { width: 100%; }
  .admin-global-actions > label { flex: 1; width: auto; }

  .center-admin-grid { grid-template-columns: 1fr; }

  .payment-match-banner     { flex-wrap: wrap; }
  .payment-match-banner > i { flex-basis: 100%; order: 3; }

  .admin-activity { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .admin-top-v2 { height: 66px; }
  .admin-top-v2 .logo span { display: flex; }
  .admin-top-v2 .logo small,
  .admin-top-v2 nav        { display: none; }

  .admin-content-v2 { width: calc(100% - 24px); padding-bottom: 150px; }  /* 하단 독 3개 자리 */

  /* ⚠️ 이 구간에서만 콘텐츠 여백이 좌우 12px 로 좁아진다. 내비 마진은 ≤900px 블록의
     `-18px` 이 그대로 남아 **양쪽에서 6px 씩 넘쳐 어드민 전 화면이 가로로 밀렸다.**
     내비를 화면 끝까지 빼려는 의도는 같으므로, 그 구간의 여백에 맞춰 12px 로 준다
     (여백을 18px 로 넓히는 쪽은 안 된다 — 폰에서 가뜩이나 좁은 본문이 더 좁아진다).
     ((1-2) 폰 폭 검수에서 13화면 전부 재현 → 원인은 이 한 자리, 2026-08-19) */
  .admin-mobile-nav { margin: 0 -12px 22px; padding: 0 12px 9px; }

  .admin-page-head h1 { font-size: 26px; }
  .admin-page-head p  { font-size: 12px; line-height: 1.6; }

  .admin-global-actions          { flex-direction: column; align-items: stretch; }
  .admin-global-actions > button { width: 100%; }

  .admin-summary-strip         { grid-template-columns: 1fr 1fr; gap: 8px; }
  .admin-summary-strip article { padding: 14px; }
  .admin-summary-strip b       { font-size: 17px; }
  .admin-summary-strip small   { font-size: 8px; line-height: 1.4; }

  .admin-metrics-v2         { grid-template-columns: 1fr 1fr; gap: 8px; }
  .admin-metrics-v2 article { min-height: 118px; padding: 15px; }
  .admin-metrics-v2 strong  { font-size: 22px; }

  .admin-queue        { grid-template-columns: 1fr; }
  .admin-panel        { border-radius: 15px; padding: 17px; }
  .admin-table-scroll { margin: 0 -17px -17px; padding: 0 17px 8px; }
  .admin-panel-head   { flex-direction: column; }
  .admin-table-filters { width: 100%; overflow-x: auto; }

  .admin-activity > div      { grid-template-columns: auto 42px 1fr; }
  .admin-activity > div > em { display: none; }

  .admin-policy-banner    { flex-direction: column; align-items: flex-start; padding: 19px; }
  .admin-policy-banner h2 { font-size: 18px; }

  .center-admin-card        { padding: 17px; }
  .center-admin-card header { flex-direction: column; }
  .center-admin-card dl     { grid-template-columns: 1fr 1fr; }

  .payment-match-banner,
  .delivery-compare-banner    { flex-direction: column; align-items: flex-start; padding: 18px; }
  .payment-match-banner > div   { min-width: 0; }
  .payment-match-banner > aside { border-left: 0; padding-left: 0; }
  .delivery-compare-banner h2   { font-size: 16px; line-height: 1.5; }

  .schedule-admin-list > button          { grid-template-columns: 55px 1fr auto; }
  .schedule-admin-list > button > strong { display: none; }
  .schedule-impact  { grid-template-columns: 1fr 1fr; }

  .content-admin-grid,
  .campaign-admin-list { grid-template-columns: 1fr; }
  .campaign-admin-list article:last-child { grid-column: auto; }

  .admin-detail-drawer          { padding: 22px; }
  .admin-detail-drawer dl > div { grid-template-columns: 100px 1fr; }

  /* 하단 독 3개 겹침 순서 고정 */
  .notice-composer { z-index: 79; }
  .automation-dock { z-index: 90; }
  .rollout-dock    { z-index: 89; }
}


/* === CMS 이체 파일 내보내기 패널 ============================================ */

/* 2026-08-27 재디자인 — 사장님 지적 "글씨도 작고 번잡해 보인다".
   세 가지를 바꿨다.
   ① **다크 그린 그라데이션 + 흰 글씨를 흰 표면 + 잉크 글씨로 뒤집었다.** 흰 글씨(9~11px)
      가 초록 위에 얹혀 대비가 약했다. 아래 규칙노트·업로드 카드와 같은 표면이 되면서
      화면 안에서 이 패널만 다른 언어를 쓰던 것도 사라진다.
   ② **글자 하한을 14px 로 올렸다** (디자인 원리 사전 T6 — 밀도형 UI 는 14~18px).
      9·10·11px 이 뒤섞여 있던 것을 11(라벨) / 13(보조) / 15(본문) 세 단으로 고정한다(H4).
   ③ **항상 펼쳐져 있던 네 덩어리 중 둘을 접었다**(`.cms-fold`). 문구는 하나도 지우지
      않고 자리만 옮겼다 — 담당자가 늘 봐야 하는 것은 "지금 몇 명이 나가는가"와
      "어디에 올리는가" 둘뿐이고, 81열 규정·계좌 미포함 같은 사고 방지 문장은
      펼치면 그대로 있다. */
.cms-export-panel {
  /* 이 패널 전용 보조 글자색 두 단. 전역 --muted(#72847e)·--text-2/3 은 흰 바탕에서
     대비가 3.9~3.2:1 이라 AA(4.5:1) 아래다 — 사장님이 지적한 "흐리다"의 정체가 이것이고,
     흰 글씨를 잉크로 뒤집는 것만으로는 안 없어진다. 여기서만 한 단계씩 눌러 쓴다.
     (전역 토큰을 건드리면 앱 전체 화면이 같이 바뀌므로 패널 스코프로 제한) */
  --cms-t2: #4f645c;  /* 보조 본문 — 접힌 설명·절차·안내문 (약 6.3:1) */
  --cms-t3: #5e726a;  /* 라벨·힌트 — eyebrow·필드 라벨 (흰 4.9:1 / 본 바탕 4.6:1) */

  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: var(--r-panel);
  /* `1fr` 은 `minmax(auto, 1fr)` 이라 **트랙이 내용보다 작아지지 못한다.** 오른쪽 컨트롤
     묶음이 최소 폭을 요구해 1280px 노트북에서 패널이 949px 자리에 1001px 을 차지했고,
     그 53px 이 위로 새어 나가 **페이지 전체가 24px 가로로 밀렸다.**
     ((1-2) 발견 → (1-1) 원인 추적, 2026-08-19) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 17px;
  padding: 28px;
  display: grid;
}

/* 접는 구역을 아래쪽 끝에 붙여 둔다 — 오른쪽 컨트롤 묶음이 훨씬 길어서, 왼쪽을 그냥
   위에서부터 쌓으면 아래에 500px 짜리 흰 구멍이 남는다(작업 중 실측). 위·아래 두 곳에
   내용을 앵커하면 그 사이 여백이 '구멍'이 아니라 '숨 쉬는 자리'로 읽힌다(S2). */
.cms-export-copy        { flex-direction: column; display: flex; }
.cms-export-copy .cms-folds { margin-top: auto; }

/* 아래 선택자에 `>` 를 쓰는 이유 — 접힌 구역(.cms-fold-body) 안에도 p·ol·li·b 가 있다.
   자손 선택자로 두면 칩 스타일이 거기까지 흘러 글자가 4칸으로 쪼개진다(옛 버전이
   .cms-upload-guide 에서 그것을 일일이 되돌리고 있었다). 직계로 끊어 원인을 없앤다. */
.cms-export-copy > span { color: var(--cms-t3); letter-spacing: .12em; font-size: 11px; font-weight: 800; display: block; }
.cms-export-copy > h2   { color: var(--ink); letter-spacing: -.01em; margin: 10px 0 0; font-size: 21px; line-height: 1.35; }
/* 이 패널에서 가장 먼저 읽히는 한 문장 — 보조색으로 흐리지 않고 잉크 그대로 둔다.
   measure 는 46ch (S7 — 한 줄이 길면 눈이 다음 줄 첫 글자를 놓친다). */
.cms-export-copy > p    { color: var(--ink); max-width: 46ch; margin: 13px 0 0; font-size: 15px; line-height: 1.7; }
/* 4단계 흐름. 옛 `repeat(4, 1fr)` 은 글자를 13px 로 키우면 한 칸이 100px 밖에 안 돼
   글자가 세로로 쪼개진다. 패널이 2열이라 왼쪽이 절반 폭이므로 2×2 로 앉힌다
   (`flex-basis: 50%` — 좁아지면 알아서 1열로 내려간다). */
.cms-export-copy > ol      { flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; display: flex; }
/* max-width 는 1920px 짜리 넓은 화면에서 칸이 340px 까지 부풀어 글자 뒤가 텅 비는 것을
   막는다(실측). 1280px 에서는 50% 가 213px 이라 걸리지 않는다. */
.cms-export-copy > ol > li { color: var(--ink); background: var(--bg-subtle); border: 1px solid var(--line-inner-v2); border-radius: var(--r-chip); flex: 1 1 calc(50% - 4px); align-items: center; min-width: 0; max-width: 260px; gap: 8px; padding: 10px 13px 10px 10px; font-size: 13px; font-weight: 700; display: flex; }
.cms-export-copy > ol > li b { color: #146b55; background: #e4f1eb; border-radius: var(--r-round); place-items: center; width: 21px; height: 21px; font-size: 11px; display: grid; }

/* 접는 구역 — 상자를 겹치지 않고 헤어라인으로만 가른다(minimal-editorial 아코디언 규격). */
.cms-folds                  { border-top: 1px solid var(--line-inner-v2); margin-top: 24px; }
.cms-fold                   { border-bottom: 1px solid var(--line-inner-v2); }
.cms-fold > summary         { color: var(--ink); cursor: pointer; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 2px; font-size: 13px; font-weight: 800; list-style: none; display: flex; }
.cms-fold > summary::-webkit-details-marker { display: none; }
.cms-fold > summary::after  { color: var(--text-4); font-size: 16px; font-weight: 400; content: "+"; }
.cms-fold[open] > summary::after { content: "−"; }
.cms-fold > summary:hover   { color: var(--green-text); }
.cms-fold-body              { padding: 0 2px 18px; }
.cms-fold-body p            { color: var(--cms-t2); max-width: 52ch; margin: 0; font-size: 13px; line-height: 1.75; }
.cms-fold-body p + p        { margin-top: 9px; }
.cms-fold-body b            { color: var(--ink); font-weight: 800; }

/* 바깥 패널과 같은 함정이 한 겹 더 있었다 — 패널을 minmax 로 고치니 이 안쪽 그리드가
   드러났다. select 는 옵션 글자('전체 계정'·'본점'…)가 최소 폭을 만들어 트랙을 밀어낸다.
   그래서 트랙에 minmax(0,…), 컨트롤 자체에도 min-width: 0 이 함께 필요하다. */
/* 패널이 흰 표면이 되면서 컨트롤 묶음도 흰색이면 경계가 사라진다 — 한 단계 낮은
   본(bone) 톤 + 헤어라인으로 도형을 살린다(K3 — 그림자 없이 표면 톤으로 구분). */
.cms-export-controls { color: var(--ink); background: var(--bg-subtle); border: 1px solid var(--line-inner-v2); border-radius: var(--r-md); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 11px; padding: 20px; display: grid; }
.cms-export-controls select,
.cms-export-controls input  { min-width: 0; }

.cms-ready-count        { border-bottom: 1px solid var(--line); grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-bottom: 14px; display: grid; }
.cms-ready-count span   { color: var(--cms-t3); font-size: 12px; font-weight: 700; }
.cms-ready-count small  { color: var(--cms-t2); margin-top: 0; font-size: 12px; line-height: 1.6; }
/* 이 화면에서 담당자가 실제로 확인하러 오는 단 하나의 숫자다 — 시각 질량의 정점(H7).
   옛 `grid-area: 1 / 2 / 3` 은 숫자가 2행까지 걸쳐 있어, 아래 설명 글자를 12px 로
   키우면 숫자와 겹친다. 1행에만 두고 설명은 그 아래 행으로 내린다. */
.cms-ready-count strong { color: var(--green-text); grid-area: 1 / 2 / 2 / 3; letter-spacing: -.02em; font-size: 36px; }
.cms-ready-count em     { margin-left: 4px; font-size: 13px; font-style: normal; font-weight: 700; }

/* 여기가 CMS 화면 가로 밀림의 **가장 안쪽 뿌리**다. select 옵션 글자('전체 계정'·'본점'…)가
   최소 폭을 만들고, `1fr`(= `minmax(auto, 1fr)`)이 그 폭 아래로 트랙을 못 줄이니
   .cms-export-controls → .cms-export-panel → .admin-layout 순으로 밀려 올라가
   **페이지 전체가 가로로 밀렸다.** 네 겹 중 셋은 결과였고 진짜 원인은 이 한 줄이다.
   select 에 `min-width: 0`(아래)만 있어도 안 듣는다 — 그리드 항목인 label 이
   `min-width: auto` 라 자식보다 작아지지 못하기 때문. 트랙·항목 양쪽이 함께 필요하다.
   ((1-2) 발견 → (1-1) 네 겹 추적, 2026-08-19) */
/* 3열이던 것을 2열로 줄였다 — 라벨 8px·입력 10px 을 11px·13px 로 키우면 3열에서는
   한 칸이 120px 밖에 안 돼 옵션 글자가 잘린다. 세로로 한 줄 늘어나는 대신 읽힌다. */
.cms-settings        { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; display: grid; }
.cms-settings label  { color: var(--cms-t3); flex-direction: column; min-width: 0; gap: 6px; font-size: 11px; font-weight: 800; display: flex; }
.cms-settings input,
.cms-settings select { color: var(--ink); background: var(--white); border: 1px solid var(--line-field); border-radius: var(--r-field); outline: none; min-width: 0; padding: 10px 11px; font-size: 13px; }
.cms-settings input:focus,
.cms-settings select:focus { border-color: #52ad91; }

/* 승인일 범위 — 청구월·계정 같은 '늘 정하는 값'과 성격이 달라(안 쓰면 비워 두는 값)
   헤어라인으로 한 겹 갈라 둔다. 상자를 겹치지 않고 선 하나로만 나누는 것은 위
   .cms-folds 와 같은 규격이다. */
.cms-range              { border-top: 1px solid var(--line); grid-column: 1 / -1; gap: 10px; margin-top: 3px; padding-top: 14px; display: grid; }
.cms-range-title        { color: var(--cms-t3); font-size: 11px; font-weight: 800; }
.cms-range > small      { color: var(--cms-t2); font-size: 12px; line-height: 1.65; word-break: keep-all; }
.cms-range > small b    { color: var(--ink); font-weight: 800; }
/* 지우기는 '되돌리는' 버튼이라 초록 주작업 버튼과 같은 무게를 주지 않는다(텍스트 버튼). */
.cms-range-clear        { color: var(--green-text); cursor: pointer; background: none; border: 0; justify-self: start; padding: 4px 0; font-size: 12px; font-weight: 700; text-decoration: underline; }
.cms-range-clear:hover  { color: var(--ink); }

.cms-download-primary,
.cms-download-secondary { border-radius: var(--r-field); justify-content: center; align-items: center; padding: 12px 14px; font-size: 13px; font-weight: 800; text-decoration: none; display: flex; }
.cms-download-primary   { color: var(--white); background: var(--green-solid); border: 0; }
.cms-download-secondary { color: var(--green-text); background: var(--white); border: 1px solid var(--line-field); }

.cms-export-controls > small { color: var(--cms-t2); grid-column: 1 / -1; font-size: 12px; line-height: 1.65; }

/* 내려받은 파일을 포털 어디에 올리는지 — 이제 `.cms-fold` 안에 들어간다(항상 펼쳐
   놓을 필요가 없는 절차이고, 이 네 줄이 패널 번잡함의 절반이었다). */
.cms-upload-guide ol       { counter-reset: guide; gap: 10px; margin: 0; padding: 0; list-style: none; display: grid; }
.cms-upload-guide ol li    { color: var(--cms-t2); padding-left: 26px; font-size: 13px; line-height: 1.6; position: relative; }
.cms-upload-guide ol li::before { counter-increment: guide; content: counter(guide); color: #146b55; background: #e4f1eb; border-radius: var(--r-round); justify-content: center; align-items: center; width: 18px; height: 18px; font-size: 10px; font-weight: 800; display: flex; position: absolute; top: 3px; left: 0; }
.cms-upload-guide ol li b  { color: var(--ink); font-weight: 800; }
.cms-upload-guide code     { color: var(--green-text); background: #eef4f1; border-radius: 5px; padding: 2px 6px; font-size: 12px; }
.cms-upload-guide > p      { margin-top: 14px; }

/* 미매핑 기관 정리 모달 */
.cms-map-head      { color: #235d4d; margin: 18px 0 8px; font-size: 12px; font-weight: 900; }
.cms-map-note      { color: #5d746b; margin: 0 0 10px; font-size: 11px; line-height: 1.55; }
.cms-map-list      { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cms-map-list li   { border: 1px solid #e3ece8; border-radius: 10px; background: #fbfdfc; gap: 10px; padding: 10px 12px; display: grid; }
.cms-map-name b    { color: #1d4c3f; font-size: 12px; }
.cms-map-name small { color: #7a8e86; margin-left: 8px; font-size: 10px; }
.cms-map-cands     { flex-wrap: wrap; gap: 6px; display: flex; }
.cms-map-cands button { color: #14603f; cursor: pointer; background: #eaf6f1; border: 1px solid #bfdccf; border-radius: 8px; align-items: center; gap: 7px; padding: 7px 11px; font-size: 11px; font-weight: 800; display: inline-flex; }
.cms-map-cands button:hover:not(:disabled) { background: #d9efe5; border-color: #8ec7ad; }
.cms-map-cands button:disabled { color: #91a89e; cursor: default; background: #f1f5f3; }
.cms-map-cands em  { color: #6f8b7f; font-size: 9px; font-style: normal; font-weight: 700; }
.cms-map-missing   { margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px; display: grid; }
.cms-map-missing li { border-left: 3px solid #e0cba8; border-radius: 0 6px 6px 0; background: #fdfaf3; padding: 6px 9px; }
.cms-map-missing b  { color: #4d4230; font-size: 11px; }
.cms-map-missing small { color: #9a8e79; margin-left: 6px; font-size: 9px; }

/* 올리기 전 확인(precheck) 결과 — 효성이 반려할 행을 미리 보여주는 자리 */
.cms-precheck            { color: #466056; grid-column: 1 / -1; font-size: 10px; }
.cms-precheck-head       { color: #345248; margin: 0 0 6px; font-size: 10px; font-weight: 900; }
.cms-precheck-list       { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.cms-precheck-list li    { border-left: 3px solid #cfe0d8; border-radius: 0 6px 6px 0; background: #f6faf8; padding: 6px 9px; display: grid; gap: 3px; }
.cms-precheck-list li.ok  { border-left-color: #52ad91; }
.cms-precheck-list li.bad { border-left-color: #c9613f; background: #fdf3ef; }
.cms-precheck-list li.warn { border-left-color: #d8a33e; background: #fdfaf0; }
.cms-precheck-list b     { color: #345248; font-size: 10px; font-weight: 900; }
.cms-precheck-list small { color: #7a8e86; font-size: 9px; line-height: 1.55; word-break: keep-all; }

.admin-data-table td > button.solid:disabled { color: #618076; cursor: default; background: #dbe8e3; }

/* === 내보내기 이력 =========================================================
   "어디까지 내려받았지"를 되짚는 자리(사장님 요청 2026-08-27). 위 내보내기 패널이
   **지금 하는 일**이라면 여기는 **방금 한 일**이라, 같은 흰 표면을 쓰되 시각 질량을
   한 단 낮춘다 — 초록 큰 숫자도, 2열 그리드도 쓰지 않는다(H7 — 정점은 화면에 하나). */
.cms-history-panel {
  --cms-t2: #4f645c;
  --cms-t3: #5e726a;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: var(--r-panel);
  margin-bottom: 17px;
  padding: 24px 28px;
}
.cms-history-top      { justify-content: space-between; align-items: start; gap: 20px; display: flex; }
.cms-history-top h2   { color: var(--ink); letter-spacing: -.01em; margin: 0; font-size: 17px; }
.cms-history-top p    { color: var(--cms-t2); max-width: 62ch; margin: 8px 0 0; font-size: 13px; line-height: 1.7; }
.cms-history-top p b  { color: var(--ink); font-weight: 800; }
/* 버튼이 제목 옆에서 늘어나지 않게 — flex 안에서 기본 stretch 를 끊는다. */
.cms-history-top > button { flex: 0 0 auto; white-space: nowrap; }

.cms-history-head     { color: var(--cms-t3); margin: 18px 0 10px; font-size: 12px; font-weight: 700; }
.cms-history-list     { border-top: 1px solid var(--line-inner-v2); }
.cms-history-item     { border-bottom: 1px solid var(--line-inner-v2); }
/* 요약 한 줄 = 언제 · 무슨 파일 · 몇 명 · 누가. 담당자가 목록을 훑을 때 읽는 전부다. */
.cms-history-item > summary { cursor: pointer; align-items: center; gap: 12px; padding: 12px 2px; font-size: 13px; list-style: none; display: flex; }
.cms-history-item > summary::-webkit-details-marker { display: none; }
.cms-history-item > summary::after { color: var(--text-4); margin-left: auto; font-size: 16px; font-weight: 400; content: "+"; }
.cms-history-item[open] > summary::after { content: "−"; }
.cms-history-item > summary:hover { background: var(--bg-subtle); }
.cms-history-item > summary > b   { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 800; }
/* 등록과 중지는 방향이 반대다(돈이 들어오기 시작 / 멈춤). 색으로 갈라 목록에서 한눈에
   구분되게 한다 — 같은 색으로 두면 훑을 때 섞여 읽힌다. */
.cms-history-kind          { border-radius: var(--r-chip); flex: 0 0 auto; padding: 4px 9px; font-size: 11px; font-weight: 800; }
.cms-history-kind.register { color: #146b55; background: #e4f1eb; }
.cms-history-kind.stop     { color: #8a4a2e; background: #f7e9e2; }
.cms-history-rows          { color: var(--green-text); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 800; }
.cms-history-actor         { color: var(--cms-t3); font-size: 12px; }

.cms-history-detail   { padding: 4px 2px 18px; }
/* 무슨 조건으로 받았는지 — 라벨/값 쌍을 칩으로 늘어놓는다(표를 만들 만큼 길지 않다). */
.cms-history-cond     { flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; display: flex; }
.cms-history-cond li  { background: var(--bg-subtle); border: 1px solid var(--line-inner-v2); border-radius: var(--r-chip); align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px; display: flex; }
.cms-history-cond span { color: var(--cms-t3); font-weight: 700; }
.cms-history-cond b   { color: var(--ink); font-weight: 800; }
.cms-history-empty    { color: var(--cms-t2); margin: 0 0 10px; font-size: 12px; line-height: 1.65; word-break: keep-all; }
/* 한 번에 3,000명까지 담길 수 있는 명단이다. 패널이 세로로 무한정 늘어나지 않게 가둔다. */
.cms-history-body .simple-table-wrap { overflow: auto; max-height: 340px; }

@media (max-width: 1050px) {
  .cms-export-panel    { grid-template-columns: 1fr; }
  .cms-export-copy > p { max-width: none; }
}

@media (max-width: 600px) {
  .cms-export-panel     { gap: 22px; padding: 20px; }
  .cms-export-copy > h2 { font-size: 19px; line-height: 1.45; }
  .cms-settings         { grid-template-columns: 1fr; }
  .cms-download-primary,
  .cms-download-secondary { grid-column: 1 / -1; }
  .cms-history-panel    { padding: 20px; }
  .cms-history-top      { flex-direction: column; }
  /* 좁은 폭에서 요약 네 조각이 한 줄에 안 들어간다. 접어 내리되 '+' 는 오른쪽 위에 남긴다. */
  .cms-history-item > summary { flex-wrap: wrap; }
}