/* ===========================================================================
   펭귄 국가 — 화면 꾸미기
   디자인: '모험' (진한 남색 바탕 + 금빛)
   글씨체: 주아(제목·숫자·버튼) + 나눔스퀘어라운드(본문·표)

   ※ 색과 글씨체는 아래 :root 한 곳에만 적어 두었습니다.
      색을 바꾸고 싶으면 :root 안의 값 하나만 고치면 화면 전체가 바뀝니다.
      (예전에는 색 15가지가 65군데에 흩어져 있어서 하나 바꾸려면 다 찾아야 했습니다)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   글씨체 — 프리텐다드 하나로                                (2026-08-15)

   폰트 파일은 public/fonts/ 안에 직접 넣어 두었습니다.
   그래서 교실 인터넷이 끊겨도 글씨가 제대로 나옵니다.

   **왜 하나로 바꿨나** — 예전에는 주아(제목·버튼)와 나눔스퀘어라운드(본문)
   둘을 섞어 썼습니다. 그런데 주아는 **굵기가 하나뿐**이라 제목을 강조하려면
   글씨를 키우는 수밖에 없었습니다. 그래서 화면이 크고 평평해 보였고,
   선생님께 *"글씨체가 딱딱해 보인다"*는 말을 들었습니다.

   프리텐다드는 **굵기 45~920 이 파일 하나에** 다 들어 있습니다(가변 글씨체).
   그래서 크기를 안 키우고 **굵기만으로** 층을 만들 수 있습니다.
     잔액 800 · 제목 700 · 목록 600 · 본문 400 · 작은 설명 400 + 흐린색

   ⚠️ 프리텐다드도 OFL 이라 상업적으로 무료입니다. (길형진 님, orioncactus)
   ⚠️ **예전 글씨체 파일은 지우지 않고 그대로 두었습니다.** 화면에서 안 부르므로
     받아지지 않아 느려지지 않고, 되돌리고 싶으면 이 @font-face 만 되살리면 됩니다.
   --------------------------------------------------------------------------- */

/* 본문용 — 굵기를 골라 쓸 수 있습니다 */
@font-face {
  font-family: 'Pretendard';
  /* ⚠️ format 은 그냥 'woff2' 라고 적습니다. 예전 문서에 나오는
     'woff2-variations' 로 적으면 **그 말을 모르는 브라우저가 이 줄을 통째로
     건너뛰어** 글씨체가 아예 안 나옵니다. 지금 문법이 어디서나 잘 됩니다. */
  src: url('../fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* 제목·숫자·버튼용 — **같은 파일인데 늘 굵게** 나옵니다.
   ⭕ 이름을 따로 둔 덕분에, var(--font-fun) 을 쓰던 30 곳을 **하나도 안 고쳐도**
     전부 굵어집니다. 더 굵어야 하는 곳(잔액·시계)만 아래에서 따로 올려 둡니다. */
@font-face {
  font-family: 'PretendardHeavy';
  /* ⚠️ format 은 그냥 'woff2' 라고 적습니다. 예전 문서에 나오는
     'woff2-variations' 로 적으면 **그 말을 모르는 브라우저가 이 줄을 통째로
     건너뛰어** 글씨체가 아예 안 나옵니다. 지금 문법이 어디서나 잘 됩니다. */
  src: url('../fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 분필 글씨 — [나라 소식] 칠판에만 씁니다                        (2026-09-15)
   감자꽃(Gamja Flower) · OFL 이라 상업적으로 무료. fontsource 에서 받은 파일입니다.
   ⛔ 구글 폰트 주소로 바꾸지 마세요 — 교실 인터넷이 끊기면 글씨가 깨집니다.
   ⚠️ 한글 파일에 **자주 쓰는 글자만** 들어 있어서, 드문 글자는 아래 --font-chalk
     의 다음 글씨체로 나옵니다. 그래서 unicode-range 로 두 파일을 나눠 부릅니다. */
@font-face {
  font-family: 'GamjaFlower';
  src: url('../fonts/GamjaFlower-korean.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF, U+3000-303F, U+FF00-FFEF;
}
@font-face {
  font-family: 'GamjaFlower';
  src: url('../fonts/GamjaFlower-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2212, U+2605, U+2103;
}

/* ---------------------------------------------------------------------------
   색과 글씨체 — 여기만 고치면 화면 전체가 바뀝니다
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   테마 '은행' — 흰 바탕 + 파랑 하나                        (2026-08-15)

   예전에는 '빙하'(얼음빛 파랑 바탕 + 호박색)였습니다. 선생님이 *"심심하다"*고
   하셔서, **실제 금융 앱 15곳**(토스 · 카카오뱅크 · 뱅크샐러드 · 그린라이트 ·
   고헨리 · 레볼루트 · 와이즈 · 몬조 · N26 · 캐시앱 · 차임 · 코인베이스 ·
   스트라이프 · 신한SOL · 마스터카드)을 살펴보고 다시 잡았습니다.
   어떻게 여기까지 왔는지는 **docs/계획-화면개편.md** 에 있습니다.

   ⭕ **바탕이 흰색이고 카드에 테두리가 없습니다.** 색을 더 넣어서가 아니라
     **덜어내서** 또렷해집니다. 카드가 200장 가까이 되는데 테두리를 다 두르면
     화면이 격자처럼 보입니다. 회색 띠로만 나누면 글씨와 숫자가 앞으로 나옵니다.

   ⚠️ **강조색이 둘입니다 — 채움용과 글씨용.** (예전 규칙 그대로입니다)
     파랑을 **채우고 그 위에 흰 글씨**를 얹을 때와, **파랑 글씨**를 밝은 바탕에
     쓸 때 필요한 진하기가 서로 다릅니다.
       --accent      #1F6FE5   버튼을 채울 때. 위에 얹는 흰 글씨가 4.71
       --accent-ink  #1B64DA   파랑 **글씨**. 흰 바탕에서 5.41
     ⛔ 글씨에 --accent 를 쓰지 마세요. --accent-ink 를 쓰세요.

   ⚠️ **토스가 쓰는 #3182F6 을 그대로 가져오지 않았습니다.** 예뻐 보이지만
     그 위에 흰 글씨를 얹으면 **3.71** 이라 버튼 글씨가 안 읽힙니다(기준 4.5).
     조금만 진하게(#1F6FE5) 하면 4.71 이 되어 넘어갑니다.
     ⛔ #3182F6 으로 되돌리지 마세요.

   지금 색이 다 읽히는지 계산해서 맞춰 두었습니다. **세 바탕**에서 잰 값입니다
   (흰 바탕 #FFFFFF · 회색 띠 #F2F4F6 · 한 겹 들어간 곳 #F7F8FA).
     흐린 글씨 5.84 / 5.30 / 5.50      파랑 글씨 5.41 / 4.91 / 5.09
     들어온 돈 6.19 / 5.62 / 5.83      나간 돈  5.52 / 5.01 / 5.20
     주의(주황) 5.05 / 4.58 / 4.75     파랑 위의 흰 글씨 4.71
   ⚠️ 색을 바꾸실 때는 이 숫자를 다시 확인하세요.
     **주의(주황)가 가장 아슬아슬합니다** — 회색 띠 위에서 4.58 입니다.
   --------------------------------------------------------------------------- */

:root {
  /* 바탕과 글자 */
  --bg: #FFFFFF;          /* 화면 바탕 — 흰색 */
  --card: #FFFFFF;        /* 카드 바탕 (바탕과 같은 색. 테두리 없이 띠로만 나눕니다) */
  --card-2: #F7F8FA;      /* 한 겹 더 들어간 곳 (입력칸·버튼 바탕) */
  --band: #F2F4F6;        /* 카드와 카드 **사이의 회색 띠** */
  --ink: #191F28;         /* 보통 글자 */
  --muted: #5B6673;       /* 흐린 글자 (설명, 표 머리) */
  --border: #E5E8EB;      /* 테두리 — 입력칸과 버튼에만. ⛔ 카드에는 쓰지 마세요 */
  --rule: #F0F2F4;        /* 표의 가로줄 */

  /* 강조색 */
  --accent: #1F6FE5;      /* 파랑 — 버튼을 **채울** 때 */
  --on-accent: #FFFFFF;   /* 파랑 위에 얹는 글자색 */
  --accent-ink: #1B64DA;  /* 파랑 **글씨**용 */
  --accent-soft: #EAF1FE; /* 아주 연한 파랑 바탕 (고른 것 표시) */
  /* 🟡 "지금 시장(은행) 열렸어요" 띠를 **채우는** 노랑. 위에 --ink 글씨를
     얹으면 10.78:1 이라 아주 잘 읽힙니다. ⛔ 흰 글씨는 1.54 라 안 됩니다. */
  --open-bell: #FFC93C;

  /* 돈과 상태를 나타내는 색 */
  --money: #06703C;       /* 들어온 돈 (초록) */
  --danger: #C62B38;      /* 나간 돈, 잘못된 것 (빨강) */
  --warn: #B45309;        /* 할 일 있음 (주황) */

  /* 아주 연한 바탕색 — 줄 하나를 살짝 물들일 때 씁니다.
     ⚠️ **글씨색으로 쓰면 안 됩니다.** 바탕으로만 쓰세요.
     위의 진한 색들을 이 바탕 위에 얹어도 4.5 를 넘습니다. */
  --money-soft: #E8F5EE;
  --danger-soft: #FDECEE;
  --warn-soft: #FDF3E3;

  /* 모양 */
  --radius: 14px;
  --shadow: 0 2px 10px rgba(25, 31, 40, 0.08);

  /* 글씨체 — 위 @font-face 에서 정한 이름입니다 */
  --font-body: 'Pretendard', "Malgun Gothic", sans-serif;                     /* 본문·표 */
  --font-fun: 'PretendardHeavy', 'Pretendard', "Malgun Gothic", sans-serif;   /* 제목·숫자·버튼 */
  --font-chalk: 'GamjaFlower', 'Pretendard', "Malgun Gothic", sans-serif;     /* [나라 소식] 칠판 분필 */

  /* [나라 소식] 칠판 — 작년 우리 반 칠판 사진에서 뽑은 색          (2026-09-15)
     ⚠️ 칠판은 **교실 물건**이라 앱 테마와 따로 둡니다. 테마를 바꾸셔도 칠판은
       초록 그대로입니다. 대비(2026-09-15에 잼): 분필 흰색 6.27 · 노란 분필 5.51 ·
       흐린 분필 4.70 · 라벨 9.45 · 포스트잇 위 먹색 11.4 이상 · 흐린 먹색 5.50 이상.
       ⚠️ **흐린 분필(4.70)이 가장 아슬아슬합니다.** 0.8 아래로 흐리게 하지 마세요. */
  --chalk-board: #3D5E55;
  --chalk: #F1F0E8;
  --chalk-dim: rgba(241, 240, 232, 0.8);
  --chalk-line: rgba(241, 240, 232, 0.22);
  --chalk-yellow: #EFE48A;
  --chalk-label: #BFE3F7;       /* 파란 "★ 오늘의 법" 라벨 바탕 */
  --chalk-label-ink: #0F3550;
  --postit-ink: #20252B;
  --postit-muted: #4F565D;
  --postit-pink: #FFD2DE;
  --postit-sky: #CFE8FA;
  --postit-yellow: #FFF0A3;
  --magnet: #2D55D6;

  /* =========================================================================
     글씨 크기 — **여섯 층뿐입니다.**                            (2026-08-17)

     ⛔ **여기 없는 크기를 낱낱이 적지 마세요.** 예전에는 크기가 23가지였고
        (12·13·14·15·15.5·16·17·18·19·20·21·22·23·24·26 …), 15 와 15.5 와 16 이
        따로 있었습니다. 눈에는 차이가 안 보이는데 값이 서로 달라서,
        나란히 놓이면 "뭔가 안 맞는데 왜인지는 모르겠는" 느낌이 들었습니다.
        선생님 말씀으로는 **"통일감이 없이 따로 논다"** 였습니다.

     ⭕ 그래서 여섯 층으로 묶고 **두 단계 키웠습니다.** 아이들이 태블릿으로
        봅니다. 새 크기를 쓰고 싶으면 낱낱이 적지 말고 이 여섯 중에 고르세요.

     ※ 아주 큰 숫자(잔액 52 · 금고 44 · 온도계 56)와 이모지(32·34)는 여기에
       넣지 않았습니다. 일부러 크게 한 것이고, 층으로 묶으면 화면 인상이
       통째로 바뀝니다.
     ========================================================================= */
  --fs-xs: 15px;    /* 곁말 · 표 머리 · 아주 작은 표시        (예전 12·13) */
  --fs-sm: 16px;    /* 설명글(hint) · 작은 버튼 · 쪽 번호     (예전 14) */
  --fs-md: 18px;    /* 본문 · 표 칸 · 버튼 · 입력칸 · 탭      (예전 15·15.5·16) */
  --fs-lg: 20px;    /* 작은 제목 · 갈래 버튼 · 뱃지 이름      (예전 17·18) */
  --fs-xl: 22px;    /* 카드 제목(h3) · 나라 소식 제목         (예전 19·20·21·22) */
  --fs-2xl: 26px;   /* 큰 제목(h2) · 화면 이름                (예전 23·24·26) */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;   /* 내용이 길어도 위가 안 잘리게 */
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--fs-md);           /* 예전 13~14px → 초등학생이 태블릿으로 보기 좋게 */
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  /* ⭕ **한글은 낱말 단위로 줄을 바꿔야 읽기 좋습니다.** (2026-08-15)
     이게 없으면 '국민에게'가 '국민에' + '게' 처럼 낱말 가운데서 잘립니다.
     대신 아주 긴 낱말은 넘칠 수 있으므로 overflow-wrap 을 안전장치로 둡니다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 붙여 놓을 곳 — '3펭 × 5일' 처럼 **한 덩어리로 읽어야 하는 것**에 씁니다.
   ⚠️ 이런 것은 사이에 띄어쓰기가 있어서 그냥 두면 줄이 갈라집니다.
     실제로 세금 화면에서 '일 × 3펭'이 두 줄로 접혔습니다. */
.nw { white-space: nowrap; }

/* hidden 을 붙인 것은 무조건 숨깁니다.
   (아래에서 display 를 정해준 요소는 hidden 만으로는 안 숨어서 이 줄이 필요합니다) */
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-fun); font-weight: 700; letter-spacing: -0.01em; }

/* ===========================================================================
   로그인 화면
   =========================================================================== */

.login-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 40px 32px;
  border-radius: 20px;
  width: 340px;
  margin: auto;              /* 화면 한가운데 */
  text-align: center;
  box-shadow: var(--shadow);
}

/* 국기.
   아이들이 공모전에서 그린 그림입니다.

   ※ 예전에는 진한 남색 바탕이라 **검은 펭귄이 안 보여서** 밝은 바탕(#F2F6FF)을
     따로 깔아 줬습니다. 2026-08-11에 바탕이 밝아지면서 그럴 필요가 없어졌습니다.
     대신 그림을 액자처럼 감싸 주는 뜻으로 카드보다 한 겹 진한 색을 씁니다.
     (박아 둔 색을 지우고 --card-2 를 쓰므로 앞으로 테마를 바꿔도 따라옵니다) */
.flag-box {
  width: 100%;
  margin: 0 auto 20px;
  padding: 10px;
  background: var(--card-2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* contain 이라야 국기가 잘리지 않고 통째로 보입니다 (cover 로 바꾸지 마세요) */
.flag-box img { width: 100%; height: auto; object-fit: contain; display: block; }

/* 화면 맨 위 제목 옆에 붙는 작은 국기 */
.with-flag { display: flex; align-items: center; gap: 10px; }

/* 국기와 제목을 누르면 홈으로 갑니다 (2026-08-15).
   ⚠️ **누를 수 있다는 것이 보여야 합니다.** 안 보이면 아무도 안 누릅니다. */
.home-link {
  cursor: pointer;
  border-radius: 12px;
  padding: 4px 10px 4px 4px;
  margin-left: -4px;
  transition: background 0.12s;
}
.home-link:hover { background: var(--card-2); }
.home-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flag-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 3px;
  background: var(--card-2);
  border-radius: 10px;
  object-fit: contain;
}

h1 { font-size: 30px; margin: 0 0 26px; color: var(--accent-ink); }

.role-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.role-btn {
  flex: 1;
  padding: 12px 0;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-fun);
  font-size: var(--fs-lg);
}
.role-btn:hover { border-color: var(--accent); }
.role-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

form { display: flex; flex-direction: column; gap: 11px; }

input {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-2);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-md);
}
input::placeholder { color: var(--muted); }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button[type="submit"] {
  padding: 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-fun);
  font-size: var(--fs-xl);
  cursor: pointer;
  margin-top: 6px;
}
button[type="submit"]:hover { filter: brightness(1.08); }

.error { color: var(--danger); font-size: var(--fs-md); min-height: 20px; margin-top: 12px; }

/* 처음 들어온 사람이 새 비밀번호를 정하는 칸.
   로그인 칸과 같은 자리에 갈아 끼워지므로 따로 자리를 잡아 줄 것이 없습니다. */
.set-title {
  font-family: var(--font-fun);
  font-size: var(--fs-xl);
  color: var(--accent-ink);
  margin: 4px 0 2px;
}
.set-hint { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin: 0 0 4px; }
.set-hint b { color: var(--ink); }

/* 태블릿 홈 화면에 추가하기 (PWA 설치) — 로그인 칸 아래의 작은 칸.
   로그인이 주인공이라 여기는 조용한 색으로만 꾸밉니다. */
.install-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

/* 설치를 도와주는 브라우저에서만 보이는 버튼 (안드로이드 크롬 등) */
.install-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-fun);
  font-size: var(--fs-md);
  cursor: pointer;
}
.install-btn:hover { filter: brightness(0.97); }

/* 손으로 추가하는 방법을 펼치는 버튼 (아이패드 사파리 등) */
.install-guide-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.install-guide-btn:hover { color: var(--accent-ink); background: var(--card-2); }

/* 펼쳐지는 안내 글 */
.install-guide {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--card-2);
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.7;
}
.install-guide p { margin: 0 0 10px; }
.install-guide p:last-child { margin-bottom: 0; }
.install-guide b { color: var(--ink); }

/* ===========================================================================
   아르바이트
   공고는 표가 아니라 '카드 줄'로 보여줍니다. 한 공고에 지원자와 뽑힌 사람이
   여럿 붙어서 표 칸에 넣으면 좁은 화면에서 읽기가 어렵기 때문입니다.
   =========================================================================== */

/* 국민 화면: 공고 한 줄 */
.pt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.pt-row:last-child { border-bottom: 0; }
.pt-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* 본부장 화면: 공고 한 장 */
.pt-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-2);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.pt-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pt-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.pt-label { font-size: var(--fs-sm); color: var(--muted); min-width: 76px; }

/* 지원자·뽑힌 사람 한 명 */
.pt-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 8px;
}

/* ===========================================================================
   신 화면 · 국민 화면 (공통 틀)
   =========================================================================== */

/* min-width: 0 은 안전장치입니다.
   body 가 flex 라서, 이 상자가 '안에 든 내용만큼' 넓어지려 할 수 있습니다. 그러면
   넓은 표 때문에 상자째로 화면 밖으로 밀려 나가 오른쪽이 잘립니다.
   0 으로 두면 화면 너비에 맞춰 줄어들고, 넓은 표는 카드 안에서만 옆으로 밀립니다.
   (320px 부터 768px 까지 재봤을 때 삐져나가는 것이 없었습니다) */
/* ---------------------------------------------------------------------------
   화면 전체 — 좌우 여백을 없애고 끝까지 씁니다              (2026-08-23)

   **왜 바꿨나** — 태블릿을 가로로 들면(12.9인치는 1366px) 예전 max-width 때문에
   좌우에 150~230px 씩 빈 자리가 남았습니다. 선생님 말씀으로 *"여백이 너무너무
   많다"* 였습니다. 그 자리를 **맨 위 한 줄**과 **왼쪽 메뉴 기둥**이 씁니다.

   ⚠️ 로그인 화면(.login-wrap)은 그대로 가운데에 놓입니다 — body 의 flex 가
     그대로라서요. dash-wrap 만 넓힌 것입니다.
   --------------------------------------------------------------------------- */
.dash-wrap { width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 0; flex: 1 1 auto; }
.dash-wrap.wide, .dash-wrap.mid { max-width: 100%; }

/* ---------------------------------------------------------------------------
   맨 위 한 줄 — 왼쪽 이름 · 가운데 시계 · 오른쪽 단추       (2026-08-23)

   예전에는 제목 줄 · 시계 줄 · 갈래 줄이 **세 줄**을 차지했습니다.
   지금은 한 줄이고, 갈래는 왼쪽 기둥으로 내려갔습니다.

   ⚠️ 스크롤을 내려도 늘 손에 닿아야 하므로 위에 붙여 둡니다(sticky).
     **그래서 배경을 꼭 칠해야 합니다** — 안 칠하면 아래 내용이 비쳐 보입니다.
   --------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  /* ⚠️ 서랍(60)·어두운 막(55)·종 띠(45)보다 **위**라야 합니다.
     맨 윗줄이 두 줄로 접히는 좁은 화면에서도 늘 보이고 눌립니다. */
  z-index: 70;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 64px;
  padding: 8px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

/* 왼쪽 — 누구의 화면인가 */
.topbar-id { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.topbar-brand { font-size: var(--fs-xs); color: var(--muted); }
.topbar-name {
  font-family: var(--font-fun);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* 가운데 — 날짜와 시각 */
.topbar-mid { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }

/* ☰ 메뉴 — 세로로 든 태블릿에서만 보입니다 (아래 @media 참고) */
.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.menu-btn .ic { width: 22px; height: 22px; }
.menu-btn.open { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
h2 { font-size: var(--fs-2xl); margin: 0; }
h3 { font-size: var(--fs-xl); margin: 0 0 12px; }

/* 카드.
   overflow-x 를 켜 둔 이유: 표가 많은데(신 13개·국민 9개) 태블릿처럼 좁은 화면에서
   표가 화면 밖으로 삐져나가 오른쪽 칸이 안 보이던 문제를 막습니다.
   이제 카드 안에서만 옆으로 밀립니다. */
.card {
  background: var(--card);
  /* ⛔ **카드에 테두리를 두르지 마세요.** (2026-08-15)
     카드가 신 97장 · 국민 100장입니다. 전부 테두리를 두르면 화면이 격자처럼
     보여서, 정작 봐야 할 글씨와 숫자가 뒤로 물러납니다. 실제 은행 앱들은
     테두리 대신 **카드 사이에 회색 띠**를 깔아서 덩어리를 나눕니다. */
  border: 0;
  border-radius: 0;
  padding: 22px 0;
  margin-bottom: 0;
  /* ⭕ 이 한 줄이 '회색 띠' 입니다. 카드마다 아래에 9px 씩 깔립니다.
     이렇게 하면 **.html 의 카드 200장을 하나도 안 건드려도** 됩니다.
     (띠를 넣으려고 <div> 를 새로 두르면 id 하나만 어긋나도 그 화면이
      오류도 없이 조용히 안 그려집니다) */
  border-bottom: 9px solid var(--band);
  overflow-x: auto;
}
/* 맨 끝 카드 아래에는 띠가 필요 없습니다 */
.card:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   카드 **속**에 한 겹 들어간 상자                            (2026-08-24)

   ⛔ 이런 곳에 `class="card"` 를 쓰지 마세요. 카드 접기 코드가 그것도 카드로
     세는데 제목이 없어서 안 접히고, **그 탭만 타일이 안 됩니다.**
     (아이 화면 [화폐 처리]가 실제로 그랬습니다)
   --------------------------------------------------------------------------- */
.inner-box {
  background: var(--card-2);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
   카드 접기 — 처음에는 제목만 보입니다                      (2026-08-15)

   탭 하나에 카드가 여러 장씩 들어 있어서 한 화면에 볼 것이 너무 많았습니다.
   제목 줄만 남기고 접어 두었다가, 누르면 그 카드만 펼칩니다.

   ⭕ **카드 속을 하나도 안 건드립니다.** .card 에 folded 클래스를 붙였다 뗐다
     하는 것이 전부입니다. 그래서 화면 코드가 10초마다 표를 다시 그려도
     접힌 상태가 그대로 남습니다. 움직이는 코드는 public/js/common.js 에 있습니다.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   ⭕ 접힌 카드는 **격자로 늘어선 타일**입니다      (2026-08-15 선생님이 고르심)

   처음에는 가로로 긴 한 줄짜리 목록으로 만들었는데, 선생님이 **클래스코인·
   핀클래스 같은 학급경제 앱의 메인화면처럼** 해 달라고 하셨습니다. 그 앱들은
   기능을 **격자 타일(큰 그림 + 굵은 제목)** 로 늘어놓습니다.

   한 줄 목록보다 나은 점이 분명합니다 — 탭 하나에 카드가 8장이면 목록은
   여덟 줄을 **세로로 훑어야** 하지만, 격자는 **한눈에 다 들어옵니다.**

   ⚠️ **격자를 만드는 곳은 `<section>` 자신입니다.** 타일을 감싸는 상자를 새로
     두르지 않았습니다 — 카드 200장을 다른 상자로 옮기면 id 하나만 어긋나도
     그 화면이 오류도 없이 조용히 안 그려집니다.
   ⚠️ **펼친 카드는 한 줄을 다 씁니다**(`grid-column: 1 / -1`). 그래야 표가
     좁은 칸에 끼여 찌그러지지 않습니다.
   --------------------------------------------------------------------------- */

.content section {
  display: grid;
  /* 선생님 PC 는 3~4칸, 태블릿 세로는 3칸, 휴대폰은 2칸이 됩니다 */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  /* ⚠️ align-items 를 건드리지 마세요. 그대로 두어야 **한 줄에 놓인 타일들이
     서로 키를 맞춥니다.** start 로 바꾸면 제목이 두 줄인 타일만 커져서
     격자가 들쭉날쭉해집니다. */
}

/* 타일이 아닌 것(작은 탭 줄 · 펼친 카드 · 안내 띠)은 한 줄을 다 씁니다 */
.content section > *:not(.card.folded) { grid-column: 1 / -1; }

/* 접었을 때 — 제목만 남기고 다 숨깁니다 */
/* ⚠️ **'h3 만 남긴다'로 만들면 안 됩니다.** 카드 안에 소제목이 하나 더 있으면
   그것까지 타일에 함께 나옵니다([직업 할 일]의 '할 일 더하기'가 그랬습니다).
   common.js 가 **접는 제목에만** fold-head 를 붙여 줍니다. */
.card.folded > *:not(.fold-head) { display: none !important; }

/* 타일 한 장.
   ⚠️ flex 로 두는 이유 — 타일이 옆 타일과 키를 맞추려고 늘어났을 때, 속의
     제목도 함께 늘어나야 제목이 **타일 바닥에** 붙습니다. 안 그러면 늘어난
     만큼 아래가 비어서 글씨가 가운데 떠 보입니다. */
.card.folded {
  display: flex;
  background: var(--card-2);
  border-radius: 16px;
  border-bottom: 0;      /* 격자에서는 사이 여백이 회색 띠를 대신합니다 */
  padding: 0;
  overflow: hidden;
  transition: background 0.12s;
}
.card.folded > .fold-head { flex: 1; }
.card.folded:hover { background: var(--accent-soft); }

.card.foldable > .fold-head {
  cursor: pointer;
  user-select: none;
}

/* 타일 속 — 그림을 위에, 제목을 아래에 둡니다 (클래스코인과 같은 짜임새) */
.card.folded > .fold-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* ⭕ **위에서부터 쌓습니다** — 그림이 먼저, 바로 아래에 제목.
     ※ 한때 제목을 바닥에 붙여 둔 적이 있습니다. 그림이 있는 타일이 15장뿐이라
       높이를 맞추려던 것인데, 선생님이 *"글씨가 아래로 내려가서 안 예쁘다"* 고
       하셔서 **타일 141장에 모두 그림을 붙이고** 위로 올렸습니다.
     ⛔ 그림 없는 타일을 다시 만들지 마세요. 하나만 비어도 그 줄이 어긋나 보입니다. */
  justify-content: flex-start;
  gap: 10px;
  /* 태블릿에서 손가락으로 누르는 크기입니다. 줄이지 마세요. */
  min-height: 104px;
  padding: 16px 14px;
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.35;
  letter-spacing: -0.01em;
  /* ⭕ 한글은 **낱말 단위로** 줄을 바꿔야 예쁩니다. 이게 없으면
     '경고장 때문에 청구서를 써야 해요' 가 '…청구서' + '를 써야…' 처럼
     낱말 가운데서 잘립니다. */
  word-break: keep-all;
}

/* 타일에서는 그림을 크게, 파랑으로 */
.card.folded > .fold-head .ic {
  width: 30px;
  height: 30px;
  margin-right: 0;
  stroke-width: 1.6;
  color: var(--accent-ink);
  vertical-align: baseline;
}

/* 타일 속의 작은 글씨(알림점·회차 이름 등)는 제목보다 조용하게 */
.card.folded > .fold-head .th-sub { font-size: var(--fs-xs); }

/* ---------------------------------------------------------------------------
   타일에 붙는 '할 일 있어요' 표시                          (2026-08-24)

   작은 탭 줄이 없어지면서, 거기 붙어 있던 알림점 16개가 **타일로 옮겨왔습니다.**
   (common.js 의 '작은 탭을 타일이 대신합니다' 참고)

   ⚠️ **점 요소 자체를 옮깁니다. 새로 만들지 않습니다.** 화면 코드가 `getElementById`
     로 그 점을 찾아 켜고 끄기 때문에, 같은 요소가 그대로 있어야 합니다.
   ⚠️ 타일 오른쪽 위 구석에 놓습니다. 글자 흐름에 두면 제목이 두 줄인 타일에서
     엉뚱한 자리에 붙습니다.
   --------------------------------------------------------------------------- */
.card.folded > .fold-head .tab-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  margin-left: 0;
}
/* 타일 안에서 점의 자리를 잡으려면 기준이 있어야 합니다 */
.card.folded { position: relative; }

/* 펼쳤을 때 — 제목 줄에 꺾쇠를 붙여 '다시 접을 수 있다'를 알립니다 */
.card.foldable:not(.folded) > .fold-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-height: 48px;
  padding: 6px 10px 6px 2px;
  border-radius: 10px;
}
.card.foldable:not(.folded) > .fold-head::after {
  content: '';
  margin-left: auto;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2.2px solid var(--muted);
  border-bottom: 2.2px solid var(--muted);
  transform: translateY(2px) rotate(-135deg);
}
.card.foldable:not(.folded) > .fold-head:hover { background: var(--card-2); }

.card.foldable > .fold-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   작은 설명 글씨 숨기기 — 맨 위 [설명 보기] 스위치           (2026-08-15)

   설명이 신 화면 144곳 · 아이 화면 107곳으로 모두 251곳이었습니다.
   처음 배울 때는 도움이 되지만, 익숙해지면 읽을 것만 늘어서 정작 봐야 할
   숫자가 뒤로 물러납니다. **매번 꺼진 채로 시작합니다.**

   ⛔ **`.hint { display: none }` 이라고 적으면 안 됩니다.** 다시 보이게 할 때
     원래 모양(`<p>` 는 한 줄 차지, `<span>` 은 글자 흐름)을 되살릴 방법이
     없습니다. 그래서 **켜져 있을 때는 아무 규칙도 안 걸리도록** 이렇게 씁니다.
   --------------------------------------------------------------------------- */
body:not(.show-hints) .hint:not(.hint-keep) { display: none; }

/* ⛔ **경고는 숨기지 않습니다.** *"회차를 열면 지금 자리가 전부 비워집니다"* 처럼
   되돌릴 수 없는 일을 알리는 글까지 숨기면 모르고 누르게 됩니다.
   ⚠️ 나 ⛔ 로 시작하는 설명에 common.js 가 hint-keep 을 붙여 줍니다. */
.hint.hint-keep { color: var(--warn); }

/* ⚠️ [설명 보기] 스위치는 2026-08-23부터 **글씨 없는 그림 단추**입니다.
   모양은 위의 .icon-btn 한 벌을 그대로 쓰고, 켜지면 파랗게 칠해집니다
   (.icon-btn[aria-pressed="true"]). 예전의 .hint-toggle 은 지웠습니다. */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--rule); font-size: var(--fs-md); }
/* 표 머리는 **작고 흐리게**. 봐야 할 것은 머리가 아니라 아래 숫자입니다. */
th { color: var(--muted); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.01em; }
/* 숫자가 세로로 줄 맞춰 보이도록 (은행 앱이 늘 쓰는 것입니다) */
td { font-variant-numeric: tabular-nums; }

/* 휴대폰처럼 아주 좁은 화면에서는 **칸 사이 여백만** 좁힙니다.  (2026-08-17)
   ⭕ **글씨 크기는 그대로 둡니다.** 여기서 글씨까지 줄이면 크기 층이 둘이 되어,
      방금 하나로 모아 둔 것이 도로 흩어집니다(선생님 말씀 "따로 논다").
      칸이 8개인 표에서 좌우 3px 씩만 줄여도 48px 을 벌어서, 넘치던 표
      대부분이 그냥 들어갑니다.
   ※ 그래도 넘치는 표는 .card 의 overflow-x 로 **카드 안에서만** 옆으로 밀립니다.
     (선생님 PC·태블릿에서는 넘치는 표가 하나도 없습니다 — 실제로 재봤습니다) */
@media (max-width: 560px) {
  th, td { padding: 12px 5px; }
}

/* ---------------------------------------------------------------------------
   화면 오른쪽 위 — 알림 딱지 · 누르는 단추                  (2026-08-23)

   왼쪽은 **나라가 알려주는 것**(나라 문 · 진행 중), 오른쪽은 **내가 누르는 것**
   입니다. 성격이 달라서 사이에 얇은 구분선을 넣었습니다.

   ⚠️ **단추에 글씨가 없습니다**(선생님이 정하심). 그래서 두 가지를 지킵니다 —
     ① title 과 aria-label 을 반드시 붙일 것 (화면 읽어주는 기기와 PC 도움말)
     ② **바탕색은 남길 것.** icons.js 가 어떤 이유로 안 읽혀도 초록·빨강 네모는
       보이므로 아이가 "여기 뭔가 있다"는 것은 압니다.
   --------------------------------------------------------------------------- */
.header-right { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.head-acts { display: flex; align-items: center; gap: 7px; }
.head-alerts { display: flex; align-items: center; gap: 7px; }
.head-sep { width: 1px; height: 24px; background: var(--border); margin: 0 2px; }

/* 그림만 있는 단추 한 벌 — 오른쪽 위의 것들이 전부 이 모양입니다 */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.icon-btn .ic { width: 21px; height: 21px; }
.icon-btn:hover { border-color: var(--accent); }
.icon-btn.is-green { border-color: #BFE3CE; background: var(--money-soft);  color: var(--money); }
.icon-btn.is-red   { border-color: #F6C9CE; background: var(--danger-soft); color: var(--danger); }
.icon-btn.is-blue  { border-color: #BFD7FA; background: var(--accent-soft); color: var(--accent-ink); }
/* 기둥이 꺼져 있을 때 — 흐리게 해서 '지금 안 보이는 중'임을 알립니다 */
.icon-btn.is-off   { background: var(--card-2); color: #99A3AE; }

/* 켜져 있는 단추([설명 보기] · 기둥에 글씨 켬).
   ⚠️ 글씨가 없어졌으므로 **켜졌는지를 색으로만** 알 수 있습니다. */
.icon-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* 알림 딱지 — 나라 문(빨강) · 진행 중(파랑). 내용이 있을 때만 나옵니다. */
.alert-chip .bump {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px var(--card);
}

/* 화면을 고치는 중이라 10초 새로고침이 멈춰 있을 때 [새로고침]에 붙는 점.
   예전에는 "고치는 중이라 잠시 멈췄어요" 라는 글씨였는데, 글씨를 다 빼면서
   자리를 거의 안 쓰는 점으로 바꿨습니다. */
.icon-btn .bump.warn { background: var(--warn); box-shadow: 0 0 0 2px var(--money-soft); }

/* 딱지를 누르면 펼쳐지는 말풍선 — 원래 띠에 있던 문장이 그대로 나옵니다.
   ⚠️ 딱지로 줄이면서 글이 사라지면 안 됩니다. 누르면 볼 수 있어야 뜻이 남습니다. */
.head-pop {
  position: absolute;
  top: 58px;
  right: 14px;
  z-index: 60;
  width: 330px;
  max-width: calc(100vw - 28px);
  padding: 15px 17px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: 0 10px 28px rgba(20, 28, 40, 0.18);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.head-pop .pop-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-fun);
  font-size: var(--fs-md);
  margin-bottom: 6px;
}
.head-pop.gate .pop-title { color: var(--danger); }
.head-pop.run  .pop-title { color: var(--accent-ink); }
.head-pop p { margin: 0 0 12px; color: var(--muted); }
.head-pop p:last-child { margin-bottom: 0; }

/* 잔액 — 화면에서 가장 큰 숫자입니다.
   ⚠️ **굵기 800 을 쓰려고 --font-body 를 씁니다.** --font-fun 은 700 에 묶여
     있어서 그보다 굵어지지 않습니다. (둘 다 같은 프리텐다드 파일입니다)
   ⚠️ **초록에서 검정으로 바꿨습니다** (2026-08-15). 잔액은 늘 플러스라
     초록으로 두면 초록이 아무 뜻도 없어집니다. 초록·빨강은 **오간 돈**에만
     남겨 두어야 통장에서 '들어옴/나감'이 한눈에 보입니다. */
.balance {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 52px;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* 국가 금고가 마이너스일 때 (나라 빚). 빨강으로 눈에 띄게 합니다. */
.balance.minus { color: var(--danger); }

.hint { color: var(--muted); font-size: var(--fs-sm); margin: 4px 0 14px; }

/* ===========================================================================
   입력칸과 버튼
   =========================================================================== */

.pick {
  width: 100%;
  max-width: 280px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--fs-md);
  font-family: inherit;
}
.pick:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pick option { background: var(--card-2); color: var(--ink); }
.pick option:disabled { color: var(--muted); }

/* ---------------------------------------------------------------------------
   안내 문구 — **화면에 떠 있습니다**                             (2026-08-18)

   ⚠️ **실제로 겪은 일입니다.** 아이가 [하고 싶은 직업] 표에서 아래쪽 직업의
   [1지망]을 눌렀는데 *"눌러도 아무 일이 없다"* 고 했습니다.

   버튼은 제대로 눌리고 있었습니다. 서버도 왜 안 되는지 답을 보냈습니다
   (*"오늘은 나라가 쉬는 날이에요"*). 그런데 이 안내 문구가 **화면 맨 위에
   글자처럼 놓여 있어서**, 표를 보려고 아래로 내려간 아이에게는
   **1,777px 위 — 화면 밖**에 떠 있었습니다. 아이 눈에는 아무 변화가 없습니다.

   public/js/common.js 의 serverProblem() 위에 *"아무 말 없이 넘어가면 '눌러도
   아무 일이 없다'고만 느끼게 되므로 꼭 알려줍니다"* 라고 적어 두었는데,
   정작 그 말이 **안 보이는 자리**에 뜨고 있었던 것입니다.

   ⛔ **다시 글자처럼(static) 흐르게 두지 마세요.** 표가 긴 화면(직업 24줄 ·
     국민 24줄 · 통장 내역)에서는 누른 자리와 안내가 화면 두 개쯤 떨어집니다.

   ⚠️ **화면 아래에 둡니다.** 위에는 🔔 쉬는시간 종과 🚪 나라 문 띠가 있어서
     겹칩니다. 아이가 누르는 버튼도 대개 아래쪽이라 손 가까이가 낫습니다.

   ⚠️ **글자가 없을 때는 아예 없습니다**(display:none). 늘 자리를 차지하면
     아래쪽 내용을 가립니다. 5초 뒤에 showNotice() 가 글자를 지웁니다.
   --------------------------------------------------------------------------- */
.notice {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 40;                    /* 갈래 버튼(20)보다 위에 */
  max-width: min(92vw, 560px);
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--card);
  border: 2px solid var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}
.notice.ok  { display: block; color: var(--money);  border-color: var(--money); }
/* ⚠️ 빨간 안내는 **저절로 안 사라지고** 누르면 닫힙니다 (2026-10-01).
   5초 뒤에 지우면 화면을 열자마자 난 오류를 놓치고 빈 화면만 남습니다. */
.notice.bad { display: block; color: var(--danger); border-color: var(--danger); cursor: pointer; }

.form-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.form-row .pick { max-width: 180px; }
/* 긴 이름을 고르는 칸 — [모든 직업]의 날짜·직업 (2026-09-14)
   180px 로 두면 "국가 총괄 대통령 — 1번 (안 냄)" 이 잘려서 어느 직업인지 안 보입니다. */
.form-row .pick.wide { max-width: 100%; width: auto; flex: 1 1 16em; }
.form-row .pick.date-pick { max-width: 100%; width: auto; flex: 0 1 13em; }

.text-input {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--fs-md);
  font-family: inherit;
  width: 140px;
}
.text-input::placeholder { color: var(--muted); }
.text-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.text-input.grow { flex: 1; min-width: 190px; width: auto; }
.text-input.tiny { width: 68px; }
/* 날짜 고르는 칸 — 좁으면 '2026-09-14' 의 끝자리가 잘립니다 ([결석·조퇴]) */
.text-input.date { min-width: 11.5em; }

.btn {
  padding: 10px 17px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--fs-md);
  font-family: var(--font-fun);
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn:disabled { color: var(--muted); border-color: var(--rule); cursor: default; background: var(--card); }
.btn:disabled:hover { border-color: var(--rule); }

.btn.give { border-color: var(--money); color: var(--money); }
.btn.give:hover { background: var(--money); color: var(--on-accent); }
.btn.take { border-color: var(--danger); color: var(--danger); }
.btn.take:hover { background: var(--danger); color: var(--on-accent); }
.btn.save { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.save:hover:enabled { filter: brightness(1.08); }

/* 표 칸 안에 들어가는 작은 버튼 (승인 / 거절처럼 줄마다 있는 것) */
.btn.small { padding: 6px 12px; font-size: var(--fs-sm); border-radius: 10px; }

/* 표 안에서 들어온 돈 / 나간 돈을 색으로 구분합니다 */
.plus { color: var(--money); }
.minus { color: var(--danger); }

/* ---------------------------------------------------------------------------
   쪽 나누기 버튼 (<1> <2> <3>)
   목록이 20줄을 넘으면 표 아래에 나옵니다. 태블릿에서 손가락으로 누르므로
   버튼을 40px 이상으로 크게 잡았습니다. 줄여 놓지 마세요.
   --------------------------------------------------------------------------- */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.pager .page-info {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-right: auto; /* 왼쪽에 붙이고 버튼들은 오른쪽으로 */
}
.page-btn {
  min-width: 40px;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--fs-md);
  font-family: var(--font-fun);
  cursor: pointer;
}
.page-btn:hover:enabled { border-color: var(--accent); }
.page-btn.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
/* 첫 쪽의 [이전], 끝 쪽의 [다음] — 누를 수 없는 상태 */
.page-btn:disabled { color: var(--muted); border-color: var(--rule); cursor: default; }
.page-dots { color: var(--muted); padding: 0 2px; }

/* ===========================================================================
   왼쪽 탭 — 신 화면과 국민 화면이 함께 씁니다
   =========================================================================== */

/* ---------------------------------------------------------------------------
   몸통 — 왼쪽 메뉴 기둥 · 본문 · (아이 화면) 오른쪽 바로가기  (2026-08-23)

   ⚠️ 기둥은 **화면 위에 붙어 있습니다**(sticky). 본문을 아무리 내려도 메뉴가
     늘 손에 닿아야 하기 때문입니다. 그래서 높이를 화면 높이로 묶어 두고,
     탭이 많으면 기둥 안에서만 스크롤됩니다.
   --------------------------------------------------------------------------- */
.tab-layout { display: flex; align-items: flex-start; }

.sidebar {
  width: 236px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 12px 24px;
  background: var(--card-2);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 65px;                       /* 맨 윗줄(64px) + 밑줄 1px */
  /* ⚠️ max-height 가 아니라 height 입니다. 탭이 적어도 기둥이 화면 끝까지
     내려가야 '벽'으로 보입니다. 탭이 많으면 기둥 안에서만 스크롤됩니다. */
  height: calc(100vh - 65px);
  overflow-y: auto;
}

.content { flex: 1; min-width: 0; padding: 20px 22px 44px; }

/* ---------------------------------------------------------------------------
   큰 갈래 (묶음) — 국가 · 국민 · 경제 · 직업            (2026-08-11)

   **왜 만들었나**
   왼쪽 탭이 신 화면 16개, 국민 화면 12개(직업까지 14개)나 되어서, 찾으려면
   처음부터 끝까지 읽어야 했습니다. 아이용 메뉴는 5~7개, 한 화면에 고를 것은
   3~5개가 알맞다는 것이 여러 곳의 기준입니다. 그래서 큰 갈래 네 개로 묶고
   **고른 갈래의 탭만** 보여줍니다.

   ⚠️ **탭과 화면(section)은 하나도 안 옮겼습니다.** 보이고 안 보이게만 합니다.
     카드 200장을 옮기는 것은 위험이 크고(id 하나만 빠뜨려도 그 화면이 조용히
     안 그려집니다) 얻는 것도 없기 때문입니다.

   ⚠️ **누르는 횟수는 그대로 두 번입니다.** 예전에도 왼쪽 탭 → 위쪽 작은 탭
     두 단이었고, 지금은 맨 위 칸이 16개에서 4개로 줄어든 것입니다.

   ⚠️ 태블릿에서 스크롤을 내려도 갈래는 늘 손에 닿아야 하므로 위에 붙여 둡니다
     (sticky). 그래서 배경을 꼭 칠해야 합니다 — 안 칠하면 아래 내용이 비쳐 보입니다.
   --------------------------------------------------------------------------- */
/* ⚠️ 2026-08-23에 **갈래가 왼쪽 기둥 안으로 들어갔습니다.**
   예전에는 화면 맨 위에 가로로 네 칸이 늘어서 있었고(.groupbar), 그 아래에
   따로 탭 기둥이 있었습니다. 지금은 기둥 하나에 [갈래 → 그 갈래의 탭] 이
   차례로 들어갑니다. 고른 갈래만 아래로 펼쳐집니다.

   ⚠️ **움직이는 코드는 하나도 안 바꿨습니다.** openGroup() 이 예전처럼
     다른 갈래의 탭에 tab-off 를 붙이는 것이 그대로 '접기'가 됩니다. */
.gtab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* 태블릿에서 손가락으로 누르는 것이라 넉넉하게 잡았습니다. */
  min-height: 50px;
  padding: 8px 12px;
  margin-top: 5px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-fun);
  font-size: var(--fs-lg);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.gtab:first-child { margin-top: 0; }
.gtab .gtab-label { flex: 1; min-width: 0; }
.gtab:hover { background: #E9EDF2; }

/* ⚠️ 파랑은 **여기 한 곳**에만 꽉 채워 씁니다. 지금 어느 갈래에 있는지가
   화면에서 가장 굵게 보여야 하기 때문입니다. 그 아래 탭은 조용하게 칠합니다. */
.gtab.active {
  background: var(--accent);
  color: var(--on-accent);
}

/* 접혀 있지만 **지금 보고 있는 화면이 속한 갈래**입니다.        (2026-08-23)
   ⚠️ 이 표시가 없으면 갈래를 접었을 때 아이가 "내가 지금 어디 있지?" 를
     알 수 없습니다. 펼쳐진 갈래는 파랑을 꽉 채우고, 이쪽은 연하게만 깔아서
     한눈에 구별됩니다. */
.gtab.here {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* 꺾쇠 — 접히면 아래, 펼치면 위를 봅니다 (부모 탭과 같은 규칙) */
.gtab-caret {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
  margin-right: 3px;
}
.gtab.active .gtab-caret { transform: rotate(-135deg); margin-top: 4px; }

/* ---------------------------------------------------------------------------
   탭 속의 탭 (부모 탭)                                      (2026-08-15)

   한 갈래에 탭이 너무 많아지는 것을 막습니다. 신 화면 [경제]의 국가 시장·은행·
   아르바이트가 [재정노동부] 하나로 묶였고, 아이 화면의 직업 화면들이 [내 직업]
   아래로 모였습니다. 움직이는 코드는 public/js/common.js 에 있습니다.
   --------------------------------------------------------------------------- */

/* 부모가 접혀 있으면 자식은 안 보입니다.
   ⚠️ hidden · tab-off 와 **따로** 둡니다. 셋은 숨기는 이유가 서로 달라서
     (직업이 없어서 / 갈래가 달라서 / 부모가 접혀서) 같은 것을 쓰면 덮어씁니다. */
.tab.tab-closed { display: none; }

/* 자식 탭은 한 칸 더 들여써서 '누구 아래인지'가 보이게 합니다 */
.tab[data-parent] { padding-left: 42px; font-size: var(--fs-md); }

/* 부모 탭 오른쪽 끝의 꺾쇠 — 접히면 아래, 펼치면 위를 봅니다.
   ⚠️ float 을 씁니다. 탭을 flex 로 바꾸면 그림·알림점의 자리가 흔들립니다
     (icons.js 위쪽 설명 참고). */
.tab-parent::after {
  content: '';
  float: right;
  width: 8px;
  height: 8px;
  margin: 8px 3px 0 0;
  border-right: 2.2px solid var(--muted);
  border-bottom: 2.2px solid var(--muted);
  transform: rotate(45deg);
}
.tab-parent.parent-open::after { margin-top: 11px; transform: rotate(-135deg); }
.tab-parent.parent-open { color: var(--accent-ink); }

/* 지금 고른 갈래에 속하지 않은 탭을 숨깁니다.
   ⚠️ hidden 이 아니라 따로 클래스를 쓰는 이유가 있습니다 — 국민 화면의 직업
     탭은 '그 직업을 맡았는지'에 따라 스스로 hidden 이 됩니다. 같은 hidden 을
     쓰면 둘이 서로 덮어써 버립니다. (카드의 sub-hidden 과 같은 뜻입니다) */
.tab.tab-off { display: none; }

/* ※ 예전에 있던 .tab-group-label(왼쪽 탭 사이의 작은 제목 '돈' · '국민' ·
   '내 직업 일')은 2026-08-11에 지웠습니다. 탭을 큰 갈래 넷으로 묶으면서
   위의 갈래 버튼(.gtab)이 그 일을 하게 되어 쓰이지 않게 되었습니다.
   (2026-08-02에 넣은 것인데, 제목만 붙여도 탭 16개가 다 보이는 것은 그대로라
    문제가 안 풀렸습니다. 그래서 갈래로 바꿨습니다) */

/* ---------------------------------------------------------------------------
   ⚠️ 예전의 .running-bar(진행 중 띠)와 .gate-bar(나라 문 띠)는 2026-08-23에
     **맨 윗줄의 작은 그림 딱지**로 바뀌었습니다 (선생님이 정하심).

     띠 두 개가 화면 너비를 통째로 차지해서, 둘이 겹치면 본문이 100px 넘게
     아래로 밀렸습니다. 지금은 42×42 딱지가 되어 **내용이 있을 때만** 나오고,
     누르면 말풍선(.head-pop)에 원래 문장이 그대로 나옵니다.

   ⛔ 띠로 되돌리지 마세요. 다만 **🔔 쉬는시간 종은 띠 그대로**입니다 —
     그것만은 '1분 안에 앉아야 한다'는 뜻이라 딱지로 줄이면 놓칩니다.
   --------------------------------------------------------------------------- */

/* 말풍선 속 [오늘 문 열기] 와 종 띠의 [취소].
   ⚠️ 둘이 **같은 크기와 여백**이라야 합니다. 한쪽만 고치면 취소 버튼만
     글씨가 작고 납작해집니다(실제로 그랬습니다). */
.head-pop .gate-open,
.bell-bar .gate-open {
  font-family: var(--font-fun);
  font-size: var(--fs-md);
  padding: 7px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--danger);
  color: #FFFFFF;
  cursor: pointer;
}
.head-pop .gate-open:hover { filter: brightness(1.1); }
/* 진행 중 말풍선의 [보러 가기] 는 파랑입니다 (빨강은 '못 하는 일'에만) */
.head-pop.run .gate-open { background: var(--accent); }

/* ---------------------------------------------------------------------------
   🔔 쉬는시간 끝 알림 띠                                        (2026-08-17)

   ⚠️ **나라 문 띠보다 위에, 더 세게** 둡니다. 나라 문은 '지금 못 하는 일'을
     알려주는 것이라 아쉬워도 나중에 보면 되지만, 이것은 **1분 안에 자리에
     앉아야 한다**는 뜻이라 놓치면 늦습니다.
   ⭕ 그래서 파랑을 **채워서** 씁니다(다른 띠는 연한 바탕 + 진한 글씨).
     화면에서 이것 하나만 색으로 꽉 차 있어야 눈이 저절로 갑니다.
   ※ 소리는 안 냅니다 (2026-08-17 선생님이 정하심).
   --------------------------------------------------------------------------- */
/* ⚠️ 2026-08-23부터 **맨 윗줄 바로 아래에 붙어 있습니다**(sticky).
   예전에는 그냥 글자처럼 흐르게 두었는데, 아이가 스크롤을 내려 놓고 있으면
   화면 밖에 떠서 **1분 안에 앉으라는 말을 못 봅니다.**

   ⭕ fixed 가 아니라 sticky 인 것이 중요합니다. fixed 는 본문 위를 **덮어서**
     그 아래 있던 작은 탭 줄을 가립니다. sticky 는 본문을 **아래로 밀고**
     스크롤을 내려도 그대로 붙어 있습니다. 90초쯤 있다 저절로 사라집니다. */
.bell-bar {
  position: sticky;
  top: 64px;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--accent);
  color: var(--on-accent);
  padding: 14px 20px;
  box-shadow: 0 4px 16px rgba(20, 28, 40, 0.18);
  font-family: var(--font-fun);
  font-size: var(--fs-lg);
}

/* 신에게만 나오는 [취소] — 파랑 위에 얹히므로 흰 테두리로 뺍니다. */
.bell-bar .gate-open {
  background: transparent;
  border: 1.5px solid var(--on-accent);
  color: var(--on-accent);
}
.bell-bar .gate-open:hover { background: rgba(255, 255, 255, 0.18); filter: none; }

/* ---------------------------------------------------------------------------
   🟡 "지금 시장(은행) 열렸어요" 띠                              (2026-08-31)

   재정노동부 장관·차관이 문을 열면서 누르면 뜨고, [문 닫기] 를 누를 때까지
   그대로 있습니다. 정한 것들은 db/openBell.js 맨 위에 있습니다.

   ⚠️ **🔔 종과 같은 자리(맨 윗줄 아래)에 붙습니다.** 둘 다 뜨면 **종이
     위에 옵니다**(z 45 > 44). 종은 '1분 안에 앉아라'라 놓치면 늦고, 이것은
     90초 뒤 종이 사라지면 다시 보이기 때문입니다. ⛔ 순서를 뒤집지 마세요.

   ⭕ **색이 노란 것은 뜻이 다르기 때문입니다.** 파랑(종)은 *'하던 것을
     멈춰라'*, 노랑은 *'가고 싶으면 지금 가라'* 입니다. 급한 것과 반가운
     것을 같은 색으로 두면 아이가 구별하지 못합니다.

   ⛔ 글씨를 흰색으로 바꾸지 마세요. 노랑 위의 흰 글씨는 1.54:1 이라 안
     읽힙니다. 지금은 --ink 를 얹어 10.78:1 입니다.
   --------------------------------------------------------------------------- */
.open-bell-bar {
  position: sticky;
  top: 64px;
  z-index: 44;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  flex-wrap: wrap;
  background: var(--open-bell);
  color: var(--ink);
  padding: 12px 20px;
  box-shadow: 0 4px 16px rgba(20, 28, 40, 0.14);
  font-family: var(--font-fun);
  font-size: var(--fs-lg);
}
.open-bell-bar span { display: inline-flex; align-items: center; gap: 8px; }

/* ⚠️ 화면 오른쪽 위의 [쉬는시간 끝]은 2026-08-23부터 **그림 단추**입니다
   (.icon-btn.is-blue). 옆의 [새로고침]·[로그아웃]과 색으로 구별됩니다 —
   그 둘은 언제 눌러도 되지만 이것은 24명 화면에 한꺼번에 뜨는 일이라,
   실수로 누르면 아이들이 하던 것을 멈춥니다.

   ---------------------------------------------------------------------------
   오른쪽 바로가기 기둥 — 아이 화면 · 가로일 때만            (2026-08-23)

   왼쪽 메뉴가 *"어디로 갈까"* 를 고르는 곳이라면, 이 기둥은
   *"매일 가는 곳으로 한 번에"* 가는 곳입니다. 열한 곳을 네 묶음으로 나눴습니다.

   ⚠️ **맨 윗줄의 ▤ 단추가 세 모습으로 돌립니다** — 기호만 → 기호+두 글자 →
     안 보임. 고른 모습은 기억해 둡니다(공통 코드의 dockMode).
   ⚠️ **가로일 때만** 나옵니다. 세로로 들면 자리가 없어서 아래 @media 가 감춥니다.
   --------------------------------------------------------------------------- */
.dock {
  width: 68px;
  flex-shrink: 0;
  padding: 14px 10px 24px;
  background: var(--card-2);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: sticky;
  top: 65px;
  height: calc(100vh - 65px);
  overflow-y: auto;
}

.dock-btn {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-fun);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
}
.dock-btn .ic { width: 23px; height: 23px; }
.dock-btn:hover { background: #E9EDF2; color: var(--ink); }
.dock-btn.active { background: var(--accent-soft); color: var(--accent-ink); }

/* 할 일이 남았다는 표시 — 왼쪽 탭의 알림점과 **같은 것**을 씁니다 */
.dock-btn .tab-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  margin-left: 0;
  box-shadow: 0 0 0 2px var(--card-2);
}
.dock-btn.active .tab-dot { box-shadow: 0 0 0 2px var(--accent-soft); }

/* 묶음 사이의 얇은 줄. 열한 개를 한 줄로 죽 세우면 그냥 긴 띠로 보입니다. */
.dock-line { width: 26px; height: 1px; background: var(--border); margin: 5px 0; flex-shrink: 0; }

/* 글씨는 ▤ 를 한 번 더 눌렀을 때만 나옵니다 (두 글자) */
.dock-label { display: none; font-size: var(--fs-xs); line-height: 1; }
body.dock-text .dock       { width: 82px; }
body.dock-text .dock-btn   { width: 60px; height: 58px; border-radius: 13px; }
body.dock-text .dock-label { display: block; }
body.dock-off  .dock       { display: none; }

/* ---------------------------------------------------------------------------
   뱃지 (db/badges.js)

   좋은 뱃지는 금빛, 나쁜 뱃지는 붉은빛입니다. 못 얻은 것은 흐리게 보여줍니다.
   ⚠️ 글자를 줄이지 마세요 — 초등 5~6학년이 태블릿으로 봅니다.
   --------------------------------------------------------------------------- */
.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* 평소에는 **그림과 이름만** 보이는 작은 딱지입니다.
   누르면 아래로 설명이 펼쳐집니다. (public/js/common.js 의 badgeCardHtml) */
.badge-card {
  flex: 0 1 auto;
  max-width: 100%;
  display: block;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* ⚠️ **딱지 자체는 색을 거의 안 씁니다** (2026-08-15). 예전에는 금빛 테두리
     2px 였는데, 뱃지가 20가지라 화면이 온통 금빛 상자로 덮였습니다.
     색은 **이모지가 냅니다** — 그래서 이모지를 그대로 두기로 한 것입니다. */
  border: 1px solid var(--border);
  background: var(--card-2);
  border-radius: var(--radius);
  padding: 11px 16px;
}
.badge-card:hover { background: var(--accent-soft); border-color: var(--accent); }

/* 나쁜 뱃지만 붉게 물들입니다 */
.badge-card.bad {
  border-color: #F1D2D6;
  background: var(--danger-soft);
}
.badge-card.bad:hover { border-color: var(--danger); }

/* 아직 못 딴 자격증.
   ⛔ 나쁜 뱃지의 붉은빛(.bad)을 쓰면 안 됩니다 — **아직 안 딴 것이지 잘못한 것이
      아닙니다.** 흐리게만 보여줍니다. (common.js 의 licenseCardHtml) */
.badge-card.dim {
  border-color: var(--border);
  border-style: dashed;
  background: transparent;
  color: var(--muted);
}
.badge-card.dim:hover { background: var(--card-2); }

.badge-card .badge-top {
  font-family: var(--font-fun);
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.badge-card .badge-count {
  font-size: var(--fs-sm);
  background: var(--accent);
  /* 박아 둔 색을 --on-accent 로 바꿨습니다 (2026-08-11).
     호박색 위에 얹는 글자색은 한 곳(:root)에서 정해야 테마를 바꿔도 따라옵니다. */
  color: var(--on-accent);
  border-radius: 999px;
  padding: 1px 9px;
}

/* 눌렀을 때 펼쳐지는 설명 */
.badge-card .badge-detail {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  max-width: 320px;
}
.badge-card .badge-detail[hidden] { display: none; }
.badge-card .badge-effect { display: block; font-size: var(--fs-md); }
.badge-card .badge-how { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }

/* 가지고 있는 쿠폰 (벌금 깎기 · 경고장 무효권) */
.voucher-box {
  margin-top: 10px;
  padding: 11px 14px;
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-fun);
  font-size: var(--fs-md);
  color: var(--accent-ink);
}

/* [국가 현황] 맨 위 '오늘 내가 할 일' 한 줄 */
.todo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.todo-row:last-child { border-bottom: none; }

/* ---------------------------------------------------------------------------
   탭·버튼의 그림(아이콘)                                    (2026-08-11)

   그림 자체는 public/js/icons.js 에 있습니다. **크기와 굵기는 여기 한 곳**에서
   정합니다 — 그래야 글씨 크기를 바꿀 때 그림도 함께 맞출 수 있습니다.

   ⭕ **stroke 를 currentColor 로 둔 것이 핵심입니다.** 그림이 글씨색을 그대로
     따라가므로, :root 의 색만 바꿔도 그림 색이 저절로 따라옵니다.
     이모지는 색이 박혀 있어서 안 따라왔습니다.

   ⚠️ **글자처럼 흐르게(inline) 두었습니다.** 탭을 flex 로 바꾸면 지금 잘 되고 있는
     것들이 흔들립니다 — 왼쪽 탭은 text-align: left, 갈래 버튼과 좁은 화면의 탭은
     center 로 놓여 있고, 탭에 붙는 알림점(.tab-dot)도 글자 흐름을 따릅니다.
     inline 으로 두면 그 셋이 **하나도 안 바뀌면서** 그림만 앞에 붙습니다.
   --------------------------------------------------------------------------- */
.ic {
  /* ⭕ **글씨 크기를 따라갑니다** (2026-08-17). px 로 박아 두면 글씨만 커졌을 때
     그림이 혼자 작게 남아 제목이 어정쩡해 보입니다. em 이라 22px 제목에서는
     25px, 18px 본문에서는 21px 로 저절로 맞춰집니다.
     ※ 타일(30px)과 갈래 버튼(22px)은 아래·위에서 따로 정하므로 안 따라옵니다. */
  width: 1.15em;
  height: 1.15em;
  margin-right: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 글씨의 가운데에 맞춥니다. 안 하면 그림이 글씨보다 살짝 위에 뜹니다. */
  vertical-align: -0.22em;
}

/* 큰 갈래 버튼의 그림은 조금 큽니다 (버튼이 56px 라서) */
.gtab .ic { width: 22px; height: 22px; }

.tab {
  /* 태블릿에서 손가락으로 누르는 것이라 높이를 48px 이상으로 잡았습니다. */
  min-height: 48px;
  /* ⚠️ 왼쪽을 한 칸 들여씁니다 — 갈래 아래에 속한 것이 보이게 (2026-08-23) */
  padding: 12px 14px 12px 22px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-md);
  font-family: var(--font-fun);
  text-align: left;
  cursor: pointer;
}
/* ⚠️ 기둥 바탕이 --card-2 라서 갖다 댔을 때 그 색을 쓰면 아무 일도 안 일어난
   것처럼 보입니다. 한 겹 더 진한 색을 씁니다. */
.tab:hover { background: #E9EDF2; color: var(--ink); }

/* ⚠️ 고른 탭을 **금빛으로 꽉 채우지 않습니다.** (2026-08-11)
   위의 큰 갈래(.gtab.active)가 금빛이라, 여기까지 금빛이면 강조가 두 곳이 되어
   어느 쪽이 더 큰 갈래인지 알 수 없습니다. 강조가 많으면 강조가 아니게 됩니다.
   그래서 위쪽 작은 탭(.subtabs button.active)과 같은 결로 조용하게 칠합니다. */
.tab.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* 위쪽 작은 탭 — 왼쪽 탭 하나 안에서 내용을 다시 나눠 보여줍니다.
   내용이 길어서 한 화면에 다 담기지 않을 때 씁니다. */
.subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.subtabs button {
  /* 태블릿에서 누르기 좋게 키웠습니다 (2026-08-11). 손가락 끝이 대략 44px 입니다. */
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--muted);
  font-size: var(--fs-md);
  font-family: var(--font-fun);
  cursor: pointer;
}
.subtabs button:hover { color: var(--ink); }
/* ⚠️ 고른 작은 탭만 **까맣게** 칠합니다. 왼쪽 탭이 연한 파랑이라, 여기까지
   파랑이면 어느 쪽을 고른 것인지 헷갈립니다. 색을 늘리지 않으면서 구별됩니다. */
.subtabs button.active { background: var(--ink); color: #FFFFFF; }

/* 위쪽 작은 탭에서 안 고른 내용은 숨깁니다.
   카드가 스스로 숨는 것(hidden)과 겹쳐도 서로 방해하지 않도록 따로 씁니다. */
.sub-hidden { display: none !important; }

/* 탭에 붙는 '할 일 있어요' 표시 */
.tab-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warn);
  margin-left: 6px;
  vertical-align: middle;
}

/* ===========================================================================
   저장 버튼 줄
   =========================================================================== */

.save-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.save-bar .changed-text { color: var(--accent-ink); font-weight: 700; }
.save-bar .bad { color: var(--danger); }
.save-bar .btn { margin-left: auto; }
.save-bar .btn + .btn { margin-left: 0; }

.bad-text { color: var(--danger); font-weight: 700; }
/* 좋은 쪽(높은 신용등급처럼)을 나타낼 때. 들어온 돈과 같은 초록입니다. */
.good-text { color: var(--money); font-weight: 700; }
/* '지금 켜져 있다'를 나타낼 때. 할 일 알림과 같은 주황입니다.
   ⚠️ 노란 띠의 --open-bell 은 **바탕을 채울 때만** 씁니다. 흰 바탕에 노란
     글씨를 쓰면 1.4:1 이라 아예 안 읽힙니다. (--accent 와 --accent-ink 를
     나눠 둔 것과 같은 이유입니다) */
.warn-text { color: var(--warn); font-weight: 700; }

/* ===========================================================================
   국가 현황 — 국민이 알아야 할 것을 한 화면에 모아 보여줍니다.
   좁은 화면(태블릿 세로)에서는 한 줄에 하나, 넓으면 두 줄로 늘어섭니다.
   =========================================================================== */
.nation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}
/* ⚠️ **여기만 카드가 연한 회색 판입니다.** 다른 곳은 회색 띠로 위아래를 나누는데,
   이 화면은 카드가 **옆으로 나란히** 놓여서 띠로는 나눌 수가 없습니다.
   그래서 아주 연한 회색(#F7F8FA)을 깔아 덩어리만 알아보게 했습니다.
   ⛔ 테두리나 그림자를 두르지는 마세요 — 그러면 예전 격자로 돌아갑니다. */
.nation-grid .card {
  margin-bottom: 0;
  border-bottom: 0;
  background: var(--card-2);
  border-radius: var(--radius);
  padding: 20px 18px;
}

/* 100도를 넘었을 때 크게 뜨는 축하 카드 */
.goal-card {
  text-align: center;
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--card-2), var(--card));
}
.goal-big { font-size: 56px; line-height: 1.1; }
.goal-text {
  font-family: var(--font-fun);
  font-size: var(--fs-xl);
  color: var(--accent-ink);
  margin: 6px 0 4px;
}

/* 학급 온도계 — 채워지는 막대와 얼굴 */
.thermo-box { margin-top: 10px; }
.thermo-bar {
  height: 22px;
  border-radius: 11px;
  background: var(--card-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.thermo-fill {
  height: 100%;
  width: 0;
  border-radius: 11px;
  /* 차가운 쪽에서 뜨거운 쪽으로. 온도계라서 여기만 여러 색을 씁니다. */
  background: linear-gradient(90deg, var(--accent), var(--money), var(--warn), var(--danger));
  transition: width 0.4s;
}
.thermo-now {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.thermo-face { font-size: 32px; }
.thermo-temp {
  font-family: var(--font-fun);
  font-size: var(--fs-2xl);
  color: var(--accent-ink);
}

/* 국가 기사 사진 — 카드 너비에 맞춰 줄어듭니다 */
.article-photo {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin: 10px 0;
}

/* 날씨 — 오늘·내일을 나란히 */
.weather-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.weather-row:last-child { border-bottom: none; }
.weather-emoji { font-size: 34px; line-height: 1; }
.weather-when {
  font-family: var(--font-fun);
  min-width: 42px;
}

/* ===========================================================================
   [나라 소식] 칠판                                                (2026-09-15)

   흰 카드 열 장이 쌓여 있어서 아이들에게 딱딱했습니다. 선생님이 **실제 교실
   칠판 느낌**을 원하셔서, 작년 우리 반 칠판 사진을 보고 자리를 함께 정했습니다.
   정한 것과 까닭은 docs/계획-나라소식칠판.md 에 있습니다.

     맨 윗줄   : [날씨]            [월][일][요일] 자석          [모범시민]
     아래      : [★오늘의 법 · ★국가 기사] [여는 때 포스트잇 3장] [학급 온도계]
                                            [나라 금고 · 벌금 · 급식]

   ⛔ **교실에 없는 모양은 넣지 마세요.** 포스트잇을 줄지어 붙이기 · 칸마다 점선 ·
     가운데 정렬 제목은 시안에서 선생님이 거절하셨습니다.
   ⛔ **overflow: hidden · 한 줄 고정을 쓰지 마세요.** 글이 길면 칠판이 늘어나야
     합니다. 좁으면 줄이 늘어납니다.
   ⚠️ 폭은 화면이 아니라 **칠판 자신의 폭**으로 나눕니다(@container). 아이 태블릿
     가로에서 본문이 676px 이라, 화면 폭(1024)으로 나누면 틀립니다.
       600px 이상 → 세 기둥 · 그보다 좁으면 한 줄로 쌓기
   =========================================================================== */
.card.chalk-card {
  /* ⚠️ .card 의 overflow-x: auto 를 풉니다. 그대로 두면 자석(위로 8px 튀어나옴)이
     잘리고, 좁을 때 칠판 안에 가로 스크롤이 생깁니다. */
  overflow: visible;
  border-bottom: 0;
  padding: 0;
  margin-bottom: 18px;
  container-type: inline-size;
  container-name: chalk;
}
.chalk-frame {
  border-radius: 6px;
  padding: 10px 10px 0;
  background: linear-gradient(180deg, #D9DDE0, #A5ACB2 50%, #C9CED2);
}
.chalk-rail {
  height: 14px;
  margin: 0 -10px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #EEF0F2, #AEB5BC 55%, #8B9299);
}
.chalk {
  color: var(--chalk);
  font-family: var(--font-chalk);
  font-size: clamp(19px, 2.8cqi, 22px);
  line-height: 1.45;
  padding: clamp(16px, 3cqi, 30px);
  word-break: keep-all;
  overflow-wrap: anywhere;
  background-color: var(--chalk-board);
  /* 분필 가루가 묻은 듯한 결 — 아주 옅게 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  text-shadow: 0 0 1px rgba(241, 240, 232, 0.2);
}
.chalk h4, .chalk p, .chalk ul { margin: 0; }
.chalk .emo { text-shadow: none; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.chalk .cy { color: var(--chalk-yellow); }
.chalk .cd { color: var(--chalk-dim); font-size: 0.85em; }

/* 자리 나누기 */
.cb {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  grid-template-areas: "top" "main" "nh" "pis" "thermo" "money";
}
.cb > * { min-width: 0; }
.cb-top { grid-area: top; }
.cb-main { grid-area: main; }
.cb-nh { grid-area: nh; }
.cb-pis { grid-area: pis; }
.cb-thermo { grid-area: thermo; }
.cb-money { grid-area: money; }
@container chalk (min-width: 600px) {
  .cb {
    grid-template-columns: minmax(0, 1fr) 150px 138px;
    column-gap: 20px;
    row-gap: 14px;
    grid-template-areas: "top top top" "main nh ." "main pis thermo" "main money money";
  }
  .cb-top { margin-bottom: 10px; }
  .cb-money { margin-top: 10px; }
}
@container chalk (min-width: 940px) {
  .cb { grid-template-columns: minmax(0, 1fr) 200px 176px; column-gap: 26px; }
}

/* ---------- 맨 윗줄 ---------- */
.cb-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--chalk-line);
}
.cb-wx { justify-self: start; display: grid; line-height: 1.35; }
.cb-wx .cy { margin-right: 4px; }
.cb-wx .cb-dust { font-size: 0.85em; color: var(--chalk-dim); }
/* 날짜 자석 — 교실 칠판의 흰 자석 칸. 인쇄 글씨라 분필이 아닙니다 */
.cb-dates {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  text-shadow: none;
}
.cb-dt {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  background: #FBFBFA;
  color: #16181B;
  border: 1.5px solid #6A7178;
  border-radius: 7px;
  padding: 1px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.cb-dt b { font-size: var(--fs-md); font-weight: 900; }
/* 요일만 분홍 칸 (사진 그대로) */
.cb-dt .cb-pink { background: #F4A6BA; border-radius: 4px; padding: 0 5px; font-size: var(--fs-sm); font-weight: 900; }
.cb-citizen { justify-self: end; text-align: right; display: grid; line-height: 1.25; }
.cb-citizen .cb-who { font-size: 1.6em; color: var(--chalk-yellow); }
.cb-citizen small { font-size: 0.8em; color: var(--chalk-dim); }
@container chalk (max-width: 459px) {
  .cb-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "date date" "wx cit"; }
  .cb-dates { grid-area: date; }
  .cb-wx { grid-area: wx; }
  .cb-citizen { grid-area: cit; }
}

/* ---------- 메인 칠판 — 오늘의 법 · 국가 기사 ---------- */
.cb-main { display: grid; gap: 20px; align-content: start; }
.cb-label {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--chalk-label);
  color: var(--chalk-label-ink);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-xs);
  padding: 2px 10px;
  border-radius: 5px;
  text-shadow: none;
}
.cb-label::before { content: "★"; color: #B97F00; font-size: 13px; }
.cb-law { display: grid; gap: 6px; }
.cb-law .cb-text { font-size: 1.4em; line-height: 1.35; white-space: pre-line; }
.cb-line { padding-top: 16px; border-top: 2px solid var(--chalk-line); }
/* ⚠️ 기사는 grid 가 아니라 **글 흐름(block)** 입니다. 사진을 오른쪽에 띄워(float)
     제목과 본문이 사진을 **감싸 흐르게** 하려는 것입니다. grid 로 두면 사진 높이만큼
     제목 아래가 비어서 넓은 화면에서 빈 띠가 생겼습니다. */
.cb-art { display: flow-root; }
.cb-art > .cb-label { display: inline-flex; margin-bottom: 8px; }
.cb-art h4 { font-weight: 400; font-size: 1.3em; line-height: 1.3; margin-bottom: 8px; }
.cb-art h4 span { border-bottom: 2px solid rgba(239, 228, 138, 0.7); }
.cb-art .cb-body { line-height: 1.55; white-space: pre-line; }
.cb-art .cb-by { text-align: right; color: var(--chalk-dim); font-size: 0.88em; margin-top: 8px; }

/* 기사 사진 — 칠판에 자석으로 붙인 작은 사진. 누르면 크게 봅니다
   ⚠️ 새 창을 띄우지 않고 그 자리에서 커집니다. 다시 누르면 작아집니다. */
.cb-photo {
  position: relative;
  float: right;
  margin: 10px 4px 10px 16px;
  width: 120px;
  padding: 6px 6px 18px;
  border: 0;
  border-radius: 2px;
  background: #FFFFFF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  transform: rotate(2deg);
  cursor: zoom-in;
}
.cb-photo img { display: block; width: 100%; height: auto; }
.cb-photo small {
  position: absolute; left: 0; right: 0; bottom: 1px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; color: #545B62; text-shadow: none;
}
.cb-photo.big { float: none; display: block; width: 100%; margin: 12px 0; transform: none; cursor: zoom-out; }
/* 휴대폰처럼 좁으면 글이 감쌀 자리가 없어서 사진을 제목 아래 한 줄로 둡니다 */
@container chalk (max-width: 459px) {
  .cb-photo { float: none; display: block; margin: 14px 0 12px; }
}

/* 파란 자석 — 포스트잇·사진·게시판에 함께 씁니다 */
.cb-mag {
  position: absolute;
  top: -8px;
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.8) 0 14%, var(--magnet) 45%, #1E3C9E 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ---------- 여는 때 — 포스트잇 세 장 ---------- */
.cb-nh { color: var(--chalk-yellow); font-size: 1.15em; align-self: end; }
.cb-pis { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); padding: 8px 4px 0; align-content: start; }
@container chalk (min-width: 420px) and (max-width: 599px) {
  .cb-pis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cb-pi {
  position: relative;
  color: var(--postit-ink);
  text-shadow: none;
  padding: 20px 12px 12px;
  border-radius: 14px;
  display: grid;
  gap: 1px;
  justify-items: start;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 9px 12px -9px rgba(0, 0, 0, 0.55);
  background-image: linear-gradient(170deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.03));
}
/* 살짝씩 다르게 기울입니다 — 줄 맞춘 스티커처럼 보이지 않게 */
.cb-pi-pink { background-color: var(--postit-pink); transform: rotate(-2deg); }
.cb-pi-sky { background-color: var(--postit-sky); transform: rotate(1.6deg); }
.cb-pi-yellow { background-color: var(--postit-yellow); transform: rotate(-1deg); }
.cb-pi small { font-size: 0.82em; color: var(--postit-muted); }
.cb-pi b { font-weight: 400; font-size: 1.5em; line-height: 1.2; }
.cb-pi b.cb-unset { font-size: 1.05em; color: var(--postit-muted); }
.cb-pi .cb-same { font-size: 0.85em; color: var(--postit-muted); }
/* "지금 열렸어요!" — 위의 노란 띠와 같은 노랑. ⛔ 흰 글씨 금지 (1.54:1) */
.cb-pi .cb-bell {
  margin-top: 3px;
  background: var(--open-bell);
  color: var(--ink);
  border-radius: 999px;
  padding: 0 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
}

/* ---------- 학급 온도계 게시판 ---------- */
/* ⚠️ 포스트잇 칸과 **위아래 끝을 맞춥니다.** 게시판이 줄 높이만큼 늘어나고,
     늘어난 만큼 막대가 길어집니다. 첫 포스트잇 자석 자리(8px)만큼 위를 내립니다. */
.cb-thermo { justify-self: center; width: 100%; max-width: 176px; display: flex; flex-direction: column; }
@container chalk (min-width: 600px) {
  .cb-thermo { align-self: stretch; padding-top: 8px; }
  .cb-poster { flex: 1; }
}
.cb-poster {
  position: relative;
  background: #FFFFFF;
  color: #16181B;
  text-shadow: none;
  border-radius: 3px;
  padding: 10px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28);
}
.cb-poster .cb-mag { width: 14px; height: 14px; }
.cb-poster .cb-mag.tl { top: -5px; left: -5px; }
.cb-poster .cb-mag.tr { top: -5px; left: auto; right: -5px; }
.cb-poster .cb-mag.bl { top: auto; bottom: -5px; left: -5px; }
.cb-poster .cb-mag.br { top: auto; bottom: -5px; left: auto; right: -5px; }
.cb-p-title { font-family: var(--font-chalk); font-size: 19px; line-height: 1.15; text-align: center; border: 1.5px solid #D3D7DB; background: #FFFDF5; padding: 3px 8px; }
/* padding-block — 맨 위·맨 아래 눈금 글씨(100℃·0℃)가 반 줄씩 관 밖으로 나오므로 그만큼 비워 둡니다 */
/*   (그래서 min-height 에 12px 를 더해 관 길이는 예전 그대로입니다) */
.cb-p-body { display: flex; gap: 6px; align-items: stretch; flex: 1; min-height: 162px; padding-block: 6px; }
@container chalk (min-width: 600px) { .cb-p-body { min-height: 102px; } }
.cb-p-lines { display: flex; flex-direction: column; justify-content: space-around; padding-block: 8px; }
.cb-p-lines i { position: relative; display: block; width: 30px; height: 11px; border-bottom: 1.5px solid #A9B0B7; }
.cb-p-lines i::before { content: ""; position: absolute; left: -4px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--magnet); }
.cb-p-tube { position: relative; width: 24px; border: 2px solid #C9CED3; border-radius: 12px; flex: none; }
/* ⛔ 온도계는 **한 자(.cb-p-ruler)** 로 그립니다. (2026-09-30)
   막대 높이 · 흰 눈금선 · 옆 눈금 글씨가 모두 이 상자의 % 를 씁니다 — 0% = 0℃, 100% = 목표(100℃).
   예전에는 ① 눈금 글씨를 space-between 으로 늘어놓아 양 끝 글씨가 반 줄(8px)씩 안쪽으로 밀렸고
   ② 막대에 16px 마다 흰 줄무늬가 있어서 20도 눈금과 안 맞았습니다. 그래서 20도가 12도쯤으로 보였습니다.
   ⚠️ 관 테두리 2px + 자의 inset 2px = 4px. .cb-p-scale 의 margin-block 4px 가 이 값과 같아야 합니다. */
/* 둥근 관 모양으로 막대 모서리만 깎습니다. ⛔ 칠판 안이라 overflow: hidden 은 안 씁니다(글씨를 자르지 않기 규칙) */
.cb-p-ruler { position: absolute; inset: 2px; clip-path: inset(0 round 9px); }
.cb-p-ruler .cb-red { position: absolute; inset: 0; background: #E24B3B; }
.cb-p-ruler .cb-blue { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #2F6FE0; transition: height 0.4s; }
.cb-p-ticks {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    transparent calc(20% - 1px), #FFFFFF calc(20% - 1px) calc(20% + 1px),
    transparent calc(20% + 1px) calc(40% - 1px), #FFFFFF calc(40% - 1px) calc(40% + 1px),
    transparent calc(40% + 1px) calc(60% - 1px), #FFFFFF calc(60% - 1px) calc(60% + 1px),
    transparent calc(60% + 1px) calc(80% - 1px), #FFFFFF calc(80% - 1px) calc(80% + 1px),
    transparent calc(80% + 1px));
}
/* 0도 아래(▼) · 목표를 넘음(▲) — 그림은 0~100℃ 에서 멈추므로 그 까닭을 알려줍니다 */
.cb-p-out { position: absolute; left: 0; right: 0; text-align: center; font-size: 11px; line-height: 1; color: #FFFFFF; font-family: var(--font-body); }
.cb-p-out.up { top: 2px; }
.cb-p-out.down { bottom: 2px; }
.cb-p-out[hidden] { display: none; }
.cb-p-scale { position: relative; width: 34px; margin-block: 4px; font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 1; color: #555C63; flex: none; }
/* 글씨의 가운데가 그 온도의 높이에 오도록 */
.cb-p-scale span { position: absolute; left: 0; transform: translateY(50%); white-space: nowrap; }
.cb-p-bulb {
  width: 88px; height: 88px; border-radius: 50%;
  border: 6px solid #F08A2E; background: #FFFFFF;
  display: grid; place-items: center; align-content: center; text-align: center;
  font-family: var(--font-body); line-height: 1.15; margin-top: -2px;
}
.cb-p-bulb small { font-size: 10px; font-weight: 700; color: #555C63; }
.cb-p-bulb b { font-size: 19px; font-weight: 900; }
.cb-p-left { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: #555C63; text-align: center; }

/* ---------- 오른쪽 아래 — 나라 금고 · 벌금 · 급식 ---------- */
.cb-money { list-style: none; padding: 16px 0 0; border-top: 2px solid var(--chalk-line); display: grid; gap: 6px; }
.cb-money li { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 0 12px; align-items: baseline; font-size: 1.08em; }
.cb-money .cy::after { content: " :"; }
.cb-money .cd { display: block; line-height: 1.3; }
@container chalk (max-width: 340px) {
  .cb-money li { grid-template-columns: minmax(0, 1fr); }
  .cb-money .cy::after { content: ""; }
}

/* 칠판 아래 '자세히 보기' 타일 — [나라 소식]만 여기서 접습니다.
   ⚠️ 탭 전체를 접는 코드는 tab-nation 을 건너뜁니다([홈]은 그대로 두려고).
     그래서 이 넷만 .html 에서 foldable folded 를 직접 붙여 둡니다.
   ⚠️ .nation-grid .card 가 padding 을 주므로 타일일 때는 되돌립니다. */
.nation-grid .card.folded { padding: 0; }
.nation-grid.news-more { align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.nation-grid.news-more > .card:not(.folded) { grid-column: 1 / -1; }

/* ===========================================================================
   알림 카드 — 오늘의 법, 모범시민처럼 '읽어주세요' 하는 것
   금빛 테두리를 왼쪽에 두어 보통 카드와 구별합니다.
   =========================================================================== */
/* ⚠️ 카드가 좌우 여백 없이 꽉 차게 바뀌어서(padding: 22px 0), 왼쪽 선을 그으면
   글씨에 딱 붙습니다. 이 두 카드에만 왼쪽 여백을 따로 줍니다.
   (예전에는 .clock-card 도 여기 있었지만, 2026-08-17에 시계가 카드에서
    맨 위 한 줄로 옮겨가면서 빠졌습니다) */
.notice-card, .danger-card { padding-left: 15px; }

.notice-card {
  border-left: 4px solid var(--accent);
}

/* ===========================================================================
   조심 카드 — 되돌릴 수 없는 것 (학기 새로 시작하기)
   빨간 테두리를 왼쪽에 두어 '함부로 누르면 안 되는 것'임을 알립니다.
   =========================================================================== */
.danger-card {
  border-left: 4px solid var(--danger);
}

/* ===========================================================================
   오늘 날짜와 지금 시각 — **화면 맨 위 한 줄**                  (2026-08-17)

   ※ 예전에는 [홈]의 큰 카드였습니다(시각 40px · 가운데 정렬 · 파랑 세로줄).
      그런데 잔액(44px)과 거의 같은 크기인데다 맨 위에 놓여 있어서, 정작
      아이가 봐야 할 [오늘 내가 할 일]과 [내 잔액]을 가렸습니다.
      그래서 **한 줄로 눕혀 화면 맨 위로 옮겼습니다.**
   ⭕ 이제 [홈]뿐 아니라 **어느 탭에 있어도 보입니다.**
   ※ 초까지 보여줍니다 — 지각 벌금이 1분 단위라 아이가 확인할 수 있어야 합니다.
   ※ 시각은 서버(나라) 시각입니다. 통장에 적히는 시각과 같아야 하기 때문입니다.
      (자세한 이유는 public/js/common.js 의 drawClock() 위에 있습니다)
   =========================================================================== */
/* ⚠️ 2026-08-23에 **맨 위 한 줄의 가운데**로 옮기면서 알약 모양이 되었습니다.
   날짜가 "2026년 8월 23일 일요일" 로 길어서 한 줄을 통째로 차지했는데,
   지금은 "8. 23. (일)" 로 줄이고 시각만 굵게 남깁니다.
   ⚠️ 연도는 뺐습니다(선생님이 정하심). 통장·벌금에 **적히는** 시각에는
     그대로 들어갑니다 — 거기는 나중에 찾아보는 기록이라 해가 바뀌면 헷갈립니다. */
.topclock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-2);
  white-space: nowrap;
  max-width: 100%;
}
.topclock .ic { width: 17px; height: 17px; color: var(--muted); }
.clock-sep { width: 1px; height: 15px; background: var(--border); flex-shrink: 0; }

.clock-date { color: var(--muted); font-size: var(--fs-sm); }

.clock-time {
  font-family: var(--font-fun);
  color: var(--ink);
  font-size: var(--fs-md);
  /* 초가 1초마다 바뀌어도 글자 폭이 흔들리지 않게 합니다 */
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   홈 화면 — 로그인하면 처음 보이는 곳                      (2026-08-11)

   예전에는 들어오면 [국가 현황]에 카드가 열 장 넘게 쌓여 있어서, 아이가 무엇을
   봐야 할지 몰랐습니다. 지금은 [홈]에 **다섯 장만** 둡니다.
     🕐 날짜·시각 · ⭐ 오늘 할 일 · 💰 내 잔액 · 💼 내 직업 · 🏦 국가 금고
   나머지는 같은 갈래의 [📢 나라 소식] 으로 옮겼습니다.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   🐧 명함 카드 — 아이 화면 [홈] 맨 위                      (2026-08-23)

   **이 앱에서 유일한 '카드다운 카드'입니다.** 다른 화면은 테두리도 그림자도 없이
   목록으로만 되어 있습니다. 하나뿐이라서 눈에 띄고, 아이가 들어오자마자 자기
   모습과 잔액을 봅니다.

   ⛔ **이런 카드를 다른 곳에 또 만들지 마세요.** 둘이 되는 순간 특별하지
     않아지고, 화면이 예전처럼 상자로 덮입니다.

   ⚠️ **파랑이 밝으면 흰 글씨가 안 읽힙니다.** 처음 잡았던 #3B82F6 은 흰 글씨가
     3.70 이었습니다(기준 4.5). 지금 가장 밝은 쪽은 #2563EB 라 5.16 입니다.
     ⛔ 더 밝게 바꾸지 마세요.

   ※ 2026-08-15의 [💳 내 카드](.paycard)와 [⭐ 오늘 내가 할 일] 카드가 여기
     하나로 합쳐졌습니다 (2026-08-23 선생님이 정하심).
   --------------------------------------------------------------------------- */

/* ⚠️ .card 는 넓은 표 때문에 overflow-x: auto 인데, 그대로 두면 **카드의 그림자가
   잘립니다.** 이 한 장만 풀어 줍니다. */
.home-card-wrap { overflow: visible; padding-bottom: 26px; }

.idcard {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 130% at 12% 0%, #2E7BEE 0%, #2050C8 46%, #14357E 100%);
  color: #FFFFFF;
  border-radius: 22px;
  padding: 20px 22px 18px;
  box-shadow: 0 10px 24px rgba(27, 58, 143, 0.26);
}

.idcard-top { display: flex; align-items: flex-start; gap: 18px; }

/* 펭귄이 앉는 동그란 자리. 펭귄이 검은색이라 **밝은 바탕**을 깔아 줍니다
   (로그인 화면의 국기와 같은 이유). */
.idcard-ring {
  width: 108px;
  height: 108px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.idcard-who { flex: 1; min-width: 0; }
.idcard-no {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.idcard-job {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-family: var(--font-fun);
  font-size: var(--fs-sm);
}
/* 모둠 · 자리. 흰색을 아주 조금만 죽였습니다 (4.64 — 기준 4.5 를 넘김) */
.idcard-where { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.92); margin-top: 7px; }

/* 🔔 오늘 할 일 — 남았으면 켜지고, 누르면 무엇인지 펼쳐집니다 */
.idcard-bell {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.idcard-bell svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.65);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 할 일이 남았을 때 — 화면에서 **여기 하나만** 노랗게 켜집니다 */
.idcard-bell.on { background: #FFC93C; border-color: #FFC93C; }
.idcard-bell.on svg { stroke: #4A3005; }
.idcard-bell.on .clapper { animation: bell-ring 2.6s ease-in-out infinite; transform-origin: 12px 5px; }
@keyframes bell-ring {
  0%, 72%, 100% { transform: rotate(0); }
  78% { transform: rotate(11deg); }
  84% { transform: rotate(-9deg); }
  90% { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) { .idcard-bell.on .clapper { animation: none; } }

.idcard-cnt {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-radius: 999px;
  background: #E4571B;
  color: #FFFFFF;
  font-family: var(--font-fun);
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2.5px #2050C8;
  font-variant-numeric: tabular-nums;
}

/* 종을 누르면 펼쳐지는 할 일 목록 */
.idcard-todo {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 14px;
  padding: 4px 14px;
  color: var(--ink);
}
.idcard-todo .todo-row { border-bottom-color: var(--rule); }

/* 막대 세 개 — 잔액 · 신용등급 · 뱃지 */
.idcard-bars { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.idcard-bar { background: rgba(255, 255, 255, 0.14); border-radius: 13px; padding: 10px 12px; min-width: 0; }
.idcard-bar span { display: block; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.92); }
.idcard-bar b {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.idcard-gauge { margin-top: 6px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.24); overflow: hidden; }
.idcard-gauge i { display: block; height: 100%; width: 0; border-radius: 99px; background: #FFC93C; transition: width 0.3s ease; }

@media (max-width: 560px) {
  .idcard { padding: 18px 16px 16px; }
  .idcard-top { gap: 12px; }
  .idcard-ring { width: 84px; height: 84px; }
  .idcard-no { font-size: 25px; }
  .idcard-bars { grid-template-columns: 1fr; gap: 8px; }
}

/* 홈의 큰 숫자 — 잔액과 금고. 태블릿에서 멀리서도 보이게 크게 잡았습니다. */
.home-big {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.15;
  margin-top: 4px;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* 금고가 마이너스일 때는 빨간색 (화면 코드가 이 클래스를 붙입니다) */
.home-big.minus { color: var(--danger); }

.home-mid {
  font-family: var(--font-fun);
  font-size: var(--fs-2xl);
  line-height: 1.2;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .home-big { font-size: 30px; }
  .home-mid { font-size: var(--fs-xl); }
}

/* ---------------------------------------------------------------------------
   🎯 금고 눈금자 — 가장 낮았던 곳에서 목표까지            (2026-08-24)

   예전에는 금고 카드에 **큰 숫자 하나와 한 마디**뿐이었습니다. 마이너스라는
   것과 "갚는 중"이라는 말만 있어서, 아이가 매일 봐도 **달라지는 것이 없어
   보였습니다.** 얼마나 갚았는지도, 목표가 어디인지도 안 보였습니다.

   지금은 **금고가 가장 낮았던 곳(왼쪽) → 신이 정한 목표(오른쪽)** 사이의 어디쯤
   와 있는지를 그립니다. 세금을 걷을 때마다 표시가 오른쪽으로 옮겨갑니다.

   ⭕ **학급 온도계와 그림이 같습니다.** 아이들이 이미 아는 방식이라 따로 배우지
     않아도 됩니다. 막대(0~100%)와 달리 **목표를 넘어가도 그대로 씁니다.**
   ⚠️ 목표는 신이 정합니다 — 신 화면 [경제] → [국가 금고] → [금고 목표].
     기본값 0펭인 이유는 '마이너스에서 갚아 나가는 것'이 이 활동의 목표라
     빚을 다 갚는 자리가 곧 0펭이기 때문입니다.
   ⚠️ 금고에 오간 돈이 하나도 없으면 화면이 눈금자를 통째로 숨깁니다.
     0에서 0으로 가는 눈금자는 뜻이 없기 때문입니다.
   --------------------------------------------------------------------------- */
/* ⚠️ '지금' 표시가 이 상자를 기준으로 자리를 잡습니다. relative 를 빼지 마세요.
   ⛔ 위 자리를 **padding 으로** 비웁니다. 막대에 margin-top 을 주면 그 여백이
     이 상자 **밖으로 빠져나가서**(여백 상쇄), 표시가 막대 아래에 그려집니다.
     실제로 그렇게 만들었다가 '지금' 글씨가 화면에서 사라졌습니다. */
/* ⚠️ 폭을 잡아 둡니다. 선생님 PC(1366px)에서는 카드가 1,100px 가까이 되는데,
   눈금자가 거기까지 늘어나면 **양 끝 숫자가 너무 멀어서** 한눈에 안 들어옵니다. */
.goalbar { position: relative; margin-top: 16px; padding-top: 26px; max-width: 620px; }

.goalbar-track {
  position: relative;
  height: 14px;
  border-radius: 99px;
  background: var(--band);
  overflow: hidden;
}

/* 지나온 길 — **채운 곳이 '가장 낮았던 곳에서 여기까지 온 거리'** 입니다.
   ⚠️ 초록으로 칠합니다. 온 만큼이 곧 갚은 만큼이라 좋은 일이기 때문입니다.
     빨강으로 칠했더니 '많이 왔는데 나쁜 것'처럼 보였습니다. */
.goalbar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #7FC2A2, var(--money));
  transition: width 0.35s ease;
}

/* '지금' 표시 — 삼각형과 글씨. 막대 **밖**(위)에 놓아야 막대를 안 가립니다.
   ⚠️ overflow: hidden 인 track 안에 두면 잘리므로 .goalbar 를 기준으로 잡습니다. */
.goalbar-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  line-height: 1;
  transition: left 0.35s ease;
  white-space: nowrap;
}
.goalbar-mark b {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 3px;
}
/* 아래를 가리키는 삼각형 */
.goalbar-mark i {
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--ink);
}

/* 양쪽 끝 숫자 */
.goalbar-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.goalbar-ends .goal { color: var(--money); font-weight: 800; }

/* ---------------------------------------------------------------------------
   📋 지금 처리할 것 (신 화면 홈)

   서버가 세어서 보낸 것을 버튼으로 보여줍니다. **누르면 그 탭으로 갑니다** —
   그래야 '알려주기'가 '하러 가기'까지 이어집니다. (server.js 의 adminTodo)
   --------------------------------------------------------------------------- */
.home-todos { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }

.home-todo {
  display: flex;
  align-items: center;
  gap: 9px;
  /* 태블릿에서 누르기 좋게 */
  min-height: 48px;
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--ink);
  font-family: var(--font-fun);
  font-size: var(--fs-md);
  cursor: pointer;
}
.home-todo:hover { border-color: var(--accent); }

/* 몇 건인지 — 눈에 먼저 들어와야 하는 숫자 */
.home-todo .home-todo-n {
  min-width: 26px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 법전 — 조항이 길어서 읽기 좋게 띄웁니다 */
.law-article {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.law-article:last-child { border-bottom: none; }
.law-article h4 {
  margin: 0 0 8px;
  font-family: var(--font-fun);
  color: var(--accent-ink);
}
.law-clause {
  margin: 6px 0;
  padding-left: 22px;
  text-indent: -22px;
  white-space: pre-line;
  line-height: 1.7;
}

/* ===========================================================================
   오늘 할 일 (업무일지)
   한 줄에 하나씩, 태블릿에서 손가락으로 누르기 좋게 넉넉히 띄웁니다.
   =========================================================================== */
.task-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.task-row:last-child { border-bottom: none; }
.task-row > label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
/* 초등학생이 태블릿에서 누르기 좋게 체크칸을 크게 합니다 */
.task-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

/* 국민 여러 명 고르기 — 24명이 줄바꿈되며 늘어섭니다 */
.person-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.pick-person {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-2);
  cursor: pointer;
  white-space: nowrap;
}
.pick-person input[type="checkbox"] { width: 20px; height: 20px; }

/* 한 사람을 여러 번 셀 수 있는 국민 고르기 (peopleCount 할 일)
   예: 숙제를 두 개 안 해온 국민 → [+]를 두 번 누르면 2
   ⚠️ 태블릿에서 손가락으로 누르므로 버튼을 36px 아래로 줄이지 마세요. */
.count-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-2);
  white-space: nowrap;
}
/* 한 번이라도 고른 사람은 눈에 띄게 합니다 */
.count-person.on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.count-person > b { font-size: var(--fs-md); }
.count-person .count-now {
  min-width: 24px;
  text-align: center;
  font-family: var(--font-fun);
  font-size: var(--fs-lg);
  color: var(--accent-ink);
}
.count-plus,
.count-minus {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-fun);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}
.count-plus:hover,
.count-minus:hover:not(:disabled) { border-color: var(--accent); }
.count-minus:disabled { opacity: 0.35; cursor: default; }

/* ===========================================================================
   표 안에서 상태를 나타내는 줄
   =========================================================================== */

/* 세금을 이미 낸 국민 줄
   ※ 예전 초록(78,217,164)은 어두운 테마의 색이었습니다. 새 초록으로 맞췄습니다. */
tr.tax-paid { background: var(--money-soft); color: var(--muted); }
.paid-mark { color: var(--money); font-weight: 700; font-size: var(--fs-sm); }

/* 아직 저장하지 않고 고쳐 둔 줄 */
tr.changed { background: var(--warn-soft); }
tr.changed td:first-child::after { content: ' ●'; color: var(--warn); font-size: var(--fs-xs); }

/* 표 머리 아래 작은 설명 */
.th-sub { color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }

/* ===========================================================================
   카드 제목 — h3 를 못 쓰는 자리                                (2026-08-17)

   [나라 소식]의 카드 11장과 [국가 금고]·[오늘의 글씨 숙제]는 제목이 h3 가
   아니라 **.th-sub(곁말)** 로 되어 있었습니다. 곁말은 15px 흐린 글씨라
   표 안의 작은 설명과 똑같아서, 선생님 말씀대로 **"눈에 너무 보이지 않았습니다."**

   ⛔ **.th-sub 를 키워서 고치면 안 됩니다.** 같은 이름이 두 가지 일을 합니다 —
      ㉮ 카드 제목 ㉯ 제목 옆 곁말(`날씨 (과학기술부 장관)`·`벌금 (8월)`).
      두 화면에 96곳, 화면 코드에 259곳이라 한 줄만 고치면 **화면 전체의
      곁말이 다 커집니다.** 그래서 제목만 이 새 이름으로 갈라 놓았습니다.

   ⭕ 크기·굵기·글씨체를 **h3 와 똑같이** 맞췄습니다. 카드 제목은 어디서나
      같아 보여야 합니다. (h3 로 바꾸지 않은 이유 — 그러면 신 화면에서
      '접히는 카드'가 되어 버려서, 지금 안 접히던 것들이 갑자기 접힙니다)
   =========================================================================== */
.card-title {
  font-family: var(--font-fun);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}

/* 제목 안에 든 곁말('과학기술부 장관' 등)은 작게 그대로 둡니다. */
.card-title .th-sub { font-family: var(--font-body); }

/* ===========================================================================
   급여 명세서
   =========================================================================== */

.payslip td { padding: 9px 8px; border-bottom: none; font-size: var(--fs-md); }
.payslip td:last-child { text-align: right; }
.payslip tr.line td { border-top: 1px solid var(--border); padding-top: 12px; }
.payslip tr.total td {
  border-top: 2px solid var(--accent);
  font-family: var(--font-fun);
  font-size: var(--fs-xl);
  color: var(--money);
  padding-top: 12px;
}

/* ===========================================================================
   세금 내기 (국민 화면)
   =========================================================================== */

.tax-label { width: 160px; font-size: var(--fs-md); }

/* ===========================================================================
   국민 상호평가
   =========================================================================== */

.rate-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.rate-name { width: 64px; font-family: var(--font-fun); font-size: var(--fs-xl); flex-shrink: 0; }
/* 번호 옆에 붙는 직업. 남는 자리를 차지해서 점수 버튼을 오른쪽으로 밀어줍니다. */
.rate-job { flex: 1; min-width: 110px; font-size: var(--fs-sm); color: var(--muted); }
.rate-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.rate-btns button {
  width: 48px;              /* 예전 40px → 손가락으로 누르기 좋게 */
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--fs-xl);
  font-family: var(--font-fun);
  cursor: pointer;
}
.rate-btns button:hover { border-color: var(--accent); }
.rate-btns button.picked { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ===========================================================================
   화면이 좁을 때 (태블릿 · 휴대폰)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   ⚠️ **900px 인 이유 — 태블릿을 세로로 들면 768px 입니다.** (2026-08-11)

   예전에는 760px 이었습니다. 그런데 아이들이 쓰는 태블릿을 세로로 들면 화면
   너비가 **768px** 이라, 8px 차이로 이 규칙에 안 걸렸습니다. 그래서 태블릿에서
   탭이 왼쪽에 165px 짜리 기둥으로 서 있고 표는 남은 좁은 폭에 밀려 있었습니다.
   **정작 맞춰야 할 기기가 빠져 있던 것입니다.**

   900px 으로 올리면 세로로 든 태블릿(768)과 조금 큰 것들까지 들어옵니다.
   가로로 든 태블릿(1024)과 선생님 PC 는 그대로 왼쪽 기둥을 씁니다.
   ⛔ 다시 760 으로 내리지 마세요.
   --------------------------------------------------------------------------- */
/* 서랍 뒤에 까는 어두운 막 — 이것이 있어야 '덮은 것'으로 보입니다.
   ⚠️ 누르면 서랍이 닫힙니다. **닫는 방법은 이것 하나입니다** (선생님이 정하심).
     ✕ 단추를 따로 만들지 않았고, ☰ 도 모양이 안 바뀝니다. */
.scrim {
  position: fixed;
  inset: 64px 0 0 0;
  z-index: 55;
  background: rgba(25, 31, 40, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
body.drawer-open .scrim { opacity: 1; pointer-events: auto; }
/* 가로일 때는 기둥이 늘 서 있으므로 막이 아예 필요 없습니다 */
@media (min-width: 901px) { .scrim { display: none; } }

@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }

  /* ☰ 단추가 하나 늘어난 만큼 시계를 줄여서 **한 줄에 다 들어가게** 합니다.
     접히면 서랍이 시작하는 자리(64px)와 어긋납니다. */
  .topclock { padding: 6px 12px; gap: 6px; }
  .clock-date { font-size: var(--fs-xs); }
  .topclock .ic { width: 15px; height: 15px; }

  /* ⭕ 여기가 핵심 — 서랍은 **본문을 밀지 않고 위를 덮습니다.**
     자리를 차지하지 않도록 fixed 로 띄우고, 평소에는 왼쪽 밖으로 밀어 두었다가
     열면 제자리로 미끄러져 들어옵니다.
     ⛔ 미는 방식(본문을 옆으로 밀기)으로 되돌리지 마세요 — 본문이 통째로
       흔들려서 아이가 보던 줄을 잃습니다. */
  .sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: 262px;
    max-height: none;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    box-shadow: 6px 0 22px rgba(20, 28, 40, 0);
  }
  body.drawer-open .sidebar {
    transform: translateX(0);
    box-shadow: 6px 0 22px rgba(20, 28, 40, 0.18);
  }

  /* 오른쪽 바로가기 기둥은 가로일 때만 — 세로에서는 자리가 없습니다.
     기둥이 없으니 그것을 여닫는 단추와 구분선도 함께 감춥니다. */
  .dock, .dock-toggle, .sep-dock { display: none !important; }

  .content { padding: 16px 14px 32px; }
  .card { padding: 18px 0; }
  .nation-grid .card { padding: 16px 14px; }
  .balance { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
  .scrim { transition: none; }
}

/* 휴대폰처럼 아주 좁은 화면 — 맨 윗줄이 두 줄로 접히게 둡니다. */
@media (max-width: 560px) {
  .topbar { padding: 8px 12px; gap: 8px; }
  .topbar-brand { display: none; }
  .topbar-name { font-size: var(--fs-md); }
  .flag-mark { width: 32px; height: 32px; }
  .topbar-mid { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .content { padding: 14px 12px 30px; }
}

/* ---------------------------------------------------------------------------
   자리 회차 — 지금 어디까지 왔나                            (2026-08-18)

   회차 하나를 끝내려면 신이 열 번 넘게 눌러야 하는데, [자리] 탭에 카드가
   여섯 장 쌓여 있어서 *"지금 어느 카드를 봐야 하지?"* 를 매번 찾아야 했습니다.

   ⚠️ 글자 크기는 :root 의 여섯 층만 씁니다. 새 크기를 여기 적지 마세요.
   --------------------------------------------------------------------------- */

.seat-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}

.seat-step {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* 지나온 단계 — 다 했다는 것만 알면 되므로 조용하게 둡니다. */
.seat-step.done { color: var(--money); }

/* 지금 단계 — 화면에서 **여기 하나만** 파랑으로 채웁니다. 둘 이상을 칠하면
   어느 것이 지금인지 알 수 없습니다. (갈래 버튼과 같은 뜻) */
.seat-step.now {
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-fun);
}

.seat-step-now {
  font-family: var(--font-fun);
  font-size: var(--fs-lg);
  color: var(--accent-ink);   /* ⛔ --accent 를 글씨색으로 쓰지 마세요 */
  margin: 0 0 4px;
}

/* ---------------------------------------------------------------------------
   자리표 (부동산)

   교실을 위에서 내려다본 모양입니다. **1줄이 맨 앞(칠판 쪽)**입니다.
   분단 세 개를 나란히 놓고, 한 줄에 두 자리씩 짝지어 보여줍니다.

   ⚠️ 좁은 화면에서는 분단이 아래로 내려갑니다. 교실 그대로의 모양은 아니지만,
      태블릿을 세로로 들었을 때 가로로 잘리는 것보다 낫습니다.
   --------------------------------------------------------------------------- */

.seat-board {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.seat-block {
  flex: 1 1 200px;
  min-width: 0;              /* 좁은 화면에서 안 삐져나가게 (.dash-wrap 과 같은 뜻) */
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

.seat-block-name {
  font-family: var(--font-fun);
  font-size: var(--fs-lg);
  text-align: center;
  color: var(--accent-ink);
  margin-bottom: 8px;
}

/* 모둠 이름 — 1·2줄 위와 3·4줄 위에 한 번씩 붙습니다. */
.seat-region {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: center;
  border-top: 1px dashed var(--rule);
  margin: 8px 0 6px;
  padding-top: 6px;
}
.seat-block .seat-region:first-child { border-top: none; margin-top: 0; padding-top: 0; }

/* 짝꿍 두 자리 */
.seat-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.seat-cell {
  flex: 1 1 0;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   모둠 여섯 색.

   ⛔ **모둠 이름을 코드에 박지 않았습니다.** '분단 몇 번인가 + 앞 모둠인가
     뒤 모둠인가' 로 정합니다(seatGroupClass). 그래서 db/regions.js 에서
     모둠 이름을 바꾸셔도 색은 그대로 따라옵니다.

   ⚠️ 여섯 색 모두 **글씨가 4.5:1 을 넘는지 재봤습니다.** 색을 바꾸실 때도
     꼭 다시 재보세요. (style.css 맨 위 색 규칙과 같은 뜻입니다)

   ⛔ **여기는 상태 색들보다 반드시 위에 있어야 합니다.**    (2026-08-18에 옮김)

     예전에는 이 여섯 줄이 아래쪽, `.seat-can-pick` · `.seat-chosen` **뒤에**
     있었습니다. CSS 는 무게가 같으면 **뒤에 적은 것이 이깁니다.** 그래서 자리
     칸에 모둠 색을 칠하는 순간
       · [고를 수 있어요] 의 **파란 점선 테두리**가 모둠 테두리로 덮이고
       · [고른 자리] 의 **파랑 바탕**이 모둠 바탕으로 덮여
     아이가 어디를 골랐는지 알 수 없게 됩니다.

     **모둠 색은 '이 자리가 어느 모둠인가'(바탕), 상태 색은 '지금 무엇을 할 수
     있나'(테두리·강조)** 입니다. 둘이 부딪히면 **언제나 상태 색이 이겨야** 합니다.
     그러려면 상태 색이 파일에서 **아래**에 있어야 합니다. 순서를 바꾸지 마세요.
   --------------------------------------------------------------------------- */
.seat-cell.seat-g1a { background: #E3F2EF; border-color: #C4E4DE; color: #0F6B5C; }
.seat-cell.seat-g1b { background: #E8F3E2; border-color: #CDE5C2; color: #3D6B2A; }
.seat-cell.seat-g2a { background: #EFEAF7; border-color: #DAD0EE; color: #5B4A9E; }
.seat-cell.seat-g2b { background: #FDF4DC; border-color: #F0E2B8; color: #7A5C05; }
.seat-cell.seat-g3a { background: #FBEDE1; border-color: #F0D9C3; color: #9A5518; }
.seat-cell.seat-g3b { background: #FBE9EE; border-color: #F1D2DC; color: #9C3358; }

/* ↓↓↓ 여기부터는 **상태 색**입니다. 모둠 색보다 뒤에 있어야 이깁니다. ↓↓↓ */

/* 아직 아무도 안 앉은 자리는 파란 테두리로 눈에 띄게 합니다. */
.seat-cell.seat-open { border-color: var(--accent); }

/* 국민 화면에서 **내 자리**. 24칸 중에 자기 자리를 한눈에 찾을 수 있어야 합니다. */
.seat-cell.seat-mine {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.seat-cell.seat-mine .seat-name { color: var(--on-accent); }

/* 전학생용으로 비워 둔 자리 */
.seat-cell.seat-spare {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}

.seat-name {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 4px;
}

.seat-empty {
  font-size: var(--fs-sm);
  padding: 6px 0;
}

/* 국민을 고르는 칸 — 태블릿에서 손가락으로 누르므로 충분히 큽니다. */
.seat-pick {
  width: 100%;
  min-height: 38px;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   그림에서 자리 고르기 (아이 화면 — common.js 의 seatPickBoardHtml)

   ⚠️ 아래 .seat-can-pick 은 <div> 가 아니라 **<button>** 입니다. 버튼은 글씨체와
      글자 크기를 제 마음대로 정하므로 `font: inherit` 로 되돌려 주어야
      옆 칸들과 같아 보입니다. 사파리(태블릿)는 여기에 제 모양까지 씌우므로
      `appearance: none` 도 함께 둡니다. **둘 다 빼지 마세요.**
   --------------------------------------------------------------------------- */

.seat-cell.seat-can-pick {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* 손가락으로 누르는 크기입니다. 평가 버튼 48×48 과 같은 뜻이니 줄이지 마세요. */
  min-height: 64px;
  border: 2px dashed var(--accent);
}

.seat-cell.seat-can-pick:hover { background: var(--card-2); }

/* 지금 고른 자리. 24칸 가운데 어디를 골랐는지 한눈에 보여야 합니다. */
.seat-cell.seat-chosen {
  background: var(--accent);
  border-style: solid;
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.seat-cell.seat-chosen .seat-name { color: var(--on-accent); }
.seat-cell.seat-chosen:hover { background: var(--accent); }

/* 칸에 덧붙이는 짧은 글 (경매에서 '💰 내 30펭' 처럼) */
.seat-extra {
  font-size: var(--fs-xs);
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   자리 그림에 **상태를 얹기**                                   (2026-08-18)

   선생님 말씀 — *"아이들이 고른 자리가 '1분단(창가) 1줄 왼쪽' 이런 식으로 보여.
   글씨가 아니라 큰 자리 그림으로 보고 싶다"*

   그래서 모둠장이 고른 자리 · 경매 중인 자리 · 경매가 끝난 뒤 주인을
   **교실 그림 위에** 보여줍니다. 글씨 표는 그림 아래에 그대로 뒀습니다 —
   제비뽑기로 누가 겨뤘는지 같은 긴 설명은 표가 읽기 낫기 때문입니다.

   ⭕ **가장 크게 얻는 것은 독점이 눈에 보인다는 것입니다.** 한 국민이 자리를
     여러 개 가지면 테두리가 진해지고 🏘️ 가 붙어서, 24줄짜리 표를 하나씩
     읽지 않아도 바로 보입니다. 부동산 독점을 겪어 보게 하려는 이 기능의
     목적에 가장 가까운 부분입니다.
   --------------------------------------------------------------------------- */

/* 칠판 — 어느 쪽이 앞인지 한눈에 알리려고 그림 맨 위에 둡니다.
   ⚠️ .seat-board 가 가로로 늘어놓는 상자라, 혼자 한 줄을 다 쓰도록 100% 를 줍니다. */
.seat-chalk {
  flex: 1 1 100%;
  background: #2F3E36;
  color: #EAF0EC;
  border-radius: 10px;
  text-align: center;
  padding: 9px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* 아직 임자가 없는 자리 — **모둠 색은 그대로 두고** 점선 테두리로만 알려줍니다.
                                                            (2026-08-18)
   ⛔ **색까지 빼지 마세요.** 예전에는 `background: var(--card)` 로 색을 덮었는데,
     경매 중에는 임자 없는 자리가 대부분이라 **화면이 통째로 회색**이 되어
     어느 자리가 어느 모둠인지 알 수 없었습니다. 자리가 곧 모둠이라, 아이는
     '어느 모둠에 들어갈지'를 보고 금액을 적습니다.

   ⚠️ **`opacity` 를 쓰지 마세요.** 글씨까지 흐려져서 대비가 4.5:1 아래로
     떨어집니다. 아래처럼 **바탕에만 흰빛을 얹으면** 글씨 대비는 그대로이고
     (오히려 바탕이 밝아져서 조금 나아집니다) 모둠 색은 남습니다. */
.seat-cell.seat-dim {
  border-style: dashed;
  background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55));
}

/* 지금 고를 수 있는 자리 (모둠장 차례) */
.seat-cell.seat-turn {
  border-color: var(--accent);
  border-style: solid;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* 한 국민이 자리를 여러 개 가졌을 때 — 테두리를 그 모둠 색으로 진하게 */
.seat-cell.seat-many { border-color: currentColor; border-width: 2px; }

/* 칸 안의 큰 글씨(누구인지)와 곁말(금액·인원 등) */
.seat-who {
  font-family: var(--font-fun);
  font-size: var(--fs-lg);
  line-height: 1.2;
  padding: 3px 0 1px;
}
.seat-note {
  font-size: var(--fs-xs);
  line-height: 1.3;
}

/* 모둠장이 자기 모둠이 아닌 자리에 있을 때. (2026-08-18)
   ⛔ 막지는 않고 **보여만 줍니다** — 선생님이 일부러 그렇게 두실 수도 있습니다.
   ⚠️ 여섯 모둠 바탕 위에서 모두 4.5:1 을 넘는지 재봤습니다. */
.seat-note-bad {
  color: var(--danger);
  font-family: var(--font-fun);
}

/* 그림 아래에 '고른 자리: ○○' 를 적어 둡니다.
   눌러 놓고도 무엇을 골랐는지 헷갈리지 않게 글로도 알려주는 것입니다. */
.seat-chosen-text {
  margin: 10px 0 8px;
  font-size: var(--fs-md);
}

/* ===========================================================================
   🏛️ 국무회의                                                     (2026-09-27)

   두 화면의 [국가] → [국무회의] 탭과, 내 차례가 왔을 때 화면을 덮는 알림.
   그리는 코드는 common.js 의 loadCabinet() 한 곳입니다.
   ⚠️ 색은 전부 :root 의 것만 씁니다. 찬성은 파랑(--accent), 반대는 빨강(--danger).
   =========================================================================== */
.cab-lead { font-size: var(--fs-md); margin: 6px 0 12px; }
.cab-h4 {
  font-family: var(--font-fun);
  font-size: var(--fs-lg);
  margin: 22px 0 8px;
}
#tab-cabinet .muted, #cabOverlay .muted { color: var(--muted); }
#tab-cabinet .hint-keep, #cabOverlay .hint-keep { color: var(--muted); font-size: var(--fs-sm); }
.cab-form { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.cab-form .text-input { width: 100%; box-sizing: border-box; }

/* 단계 막대 — 개회 → 결산 보고 → 안건 · 표결 → 폐회 */
.cab-stages {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 4px 0 12px;
  flex-wrap: wrap;
}
.cab-stages li {
  flex: 1 1 120px;
  text-align: center;
  padding: 8px 6px;
  border-radius: 10px;
  background: var(--card-2);
  color: var(--muted);
  font-family: var(--font-fun);
  font-size: var(--fs-sm);
}
.cab-stages li.done { background: var(--money-soft); color: var(--money); }
.cab-stages li.now { background: var(--accent); color: var(--on-accent); }

.cab-att { margin: 0 0 10px; }

/* 대통령(신)의 진행 버튼 줄 — 큰 [다음]이 오른쪽에 */
.cab-runbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin: 8px 0 14px;
  border-radius: var(--radius);
  background: var(--card-2);
}
.cab-runbar-main { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.cab-big-btn { font-size: var(--fs-lg); padding: 12px 22px; }

/* 대통령이 읽는 대사 */
.cab-lines { padding-left: 22px; margin: 6px 0 14px; }
.cab-lines li { margin: 6px 0; line-height: 1.5; }
.cab-step {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-family: var(--font-fun);
}

/* 지금 보고하는 국민 */
.cab-now {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  margin: 6px 0 14px;
}
.cab-now.mine { background: var(--accent); color: var(--on-accent); }
.cab-now-label { font-size: var(--fs-sm); opacity: 0.9; }
.cab-now-who { font-family: var(--font-fun); font-size: var(--fs-2xl); margin: 4px 0 8px; }
.cab-now .cab-name { font-size: var(--fs-lg); opacity: 0.85; margin-left: 6px; }
.cab-next { margin: 8px 0 0; font-size: var(--fs-md); }

/* 타이머 — 막대가 줄어들고, 20% 밑으로 가면 빨개집니다 */
.cab-timer { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.cab-timer-bar {
  flex: 1;
  height: 12px;
  border-radius: 6px;
  background: rgba(25, 31, 40, 0.12);
  overflow: hidden;
}
.cab-now.mine .cab-timer-bar, #cabOverlay .cab-timer-bar { background: rgba(255, 255, 255, 0.35); }
.cab-timer-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--money);
  transition: width 1s linear;
}
.cab-timer-fill.low { background: var(--danger); }
.cab-timer-text { font-family: var(--font-fun); font-size: var(--fs-md); min-width: 9em; text-align: right; }

/* 보고 순서 */
.cab-order { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 18px; }
.cab-order li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 8px;
  break-inside: avoid;
}
.cab-order li.now { background: var(--accent-soft); font-family: var(--font-fun); }
.cab-order li.done, .cab-order li.skipped { color: var(--muted); }
.cab-order .cab-mark { width: 1.5em; flex-shrink: 0; }
.cab-order .cab-who { flex: 1; }
.cab-order .cab-name { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 560px) { .cab-order { columns: 1; } }

/* 대본 — 숫자 줄은 앱이, 괄호 줄은 아이가 즉석에서 */
.cab-script {
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--card-2);
  margin: 6px 0 12px;
}
.cab-script.big { font-size: var(--fs-lg); padding: 18px 22px; }
.cab-say { margin: 6px 0; line-height: 1.6; }
.cab-say.head { font-family: var(--font-fun); }
.cab-say.blank { color: var(--accent-ink); font-style: italic; }

/* 안건 한 장 */
.cab-agenda {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--card-2);
  margin: 8px 0;
}
.cab-agenda.voting { background: var(--warn-soft); }
.cab-agenda-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: var(--fs-md); }
.cab-by { color: var(--muted); font-size: var(--fs-sm); }
.cab-agenda-text { margin: 6px 0 0; line-height: 1.5; }
.cab-agenda-act { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cab-picked {
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  font-family: var(--font-fun);
}
.cab-voting { width: 100%; }
.cab-voting p { margin: 8px 0; }
.cab-vote-btns { display: flex; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.cab-vote {
  flex: 1 1 140px;
  min-height: 64px;
  border: 0;
  border-radius: 14px;
  font-family: var(--font-fun);
  font-size: var(--fs-xl);
  color: var(--on-accent);
  cursor: pointer;
}
.cab-vote.yes { background: var(--accent); }
.cab-vote.no { background: var(--danger); }
.cab-vote:hover { filter: brightness(1.08); }
.cab-result { margin-top: 4px; }
.cab-result.pass b { color: var(--money); }
.cab-result.fail b { color: var(--danger); }

/* 회의록 — 설명서 서식과 같은 네 칸 */
.cab-minutes table { width: 100%; }
.cab-minutes td { vertical-align: top; }
.cab-note { margin-top: 16px; }
.cab-note textarea { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.cab-note-view {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 4px solid var(--accent);
  background: var(--card-2);
  line-height: 1.5;
}
.cab-history-row { margin: 6px 0; }
.cab-history-body { margin: 8px 0 14px; }

/* 내 차례 알림 — 화면 전체를 덮습니다. (2026-09-27)
   ⚠️ 맨 윗줄(70)보다는 아래, 서랍(60)보다는 위. 종 띠·안내 문구는 그 아래.
   내 차례(now)는 가운데 큰 카드, 한 사람 앞(next)은 위쪽 작은 띠입니다. */
#cabOverlay.now {
  position: fixed;
  inset: 0;
  z-index: 66;
  background: rgba(25, 31, 40, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 24px;
  overflow-y: auto;
}
.cab-overlay-card {
  width: 100%;
  max-width: 720px;
  background: var(--card);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 12px 40px rgba(20, 28, 40, 0.35);
}
.cab-overlay-title {
  font-family: var(--font-fun);
  font-size: 34px;
  color: var(--accent-ink);
  margin-bottom: 4px;
}
.cab-overlay-who { font-size: var(--fs-xl); margin-bottom: 10px; }
#cabOverlay.now .cab-timer-bar { background: rgba(25, 31, 40, 0.12); }
#cabOverlay.next {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 46;
}
.cab-overlay-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--open-bell);
  color: var(--ink);
  font-size: var(--fs-md);
  box-shadow: 0 4px 16px rgba(20, 28, 40, 0.18);
}
.cab-overlay-bar .gate-open {
  font-family: var(--font-fun);
  font-size: var(--fs-md);
  padding: 7px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #FFFFFF;
  cursor: pointer;
}
.cab-overlay-bar .gate-open.plain { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }

/* ===========================================================================
   🧪 체험용 나라 표시                                              (2026-10-09)

   DEMO_MODE=1 로 켠 서버에서만 보입니다 (docs/배포-체험용.md).
   로그인 화면의 안내 칸(.demo-box)과 안쪽 화면 맨 위의 노란 띠(.demo-bar).
   ⚠️ 띠는 쉬는시간 종(45)·시장 알림(44)보다 **아래**(43)입니다 — 체험 중에도
     그 둘이 가려지면 안 됩니다. 노랑 위 글씨는 --ink (흰 글씨는 안 읽힙니다).
   =========================================================================== */
.demo-box {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--open-bell);
  color: var(--ink);
  text-align: left;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.demo-box p { margin: 4px 0; }
.demo-box .demo-title { font-family: var(--font-fun); font-size: var(--fs-lg); margin-bottom: 6px; }
.demo-table { width: 100%; margin: 8px 0; border-collapse: collapse; }
.demo-table th, .demo-table td { text-align: left; padding: 4px 6px; vertical-align: top; }
.demo-table th { white-space: nowrap; width: 6.5em; font-weight: 700; }
.demo-box .demo-hint { color: var(--postit-muted); font-size: var(--fs-xs); }

.demo-bar {
  position: sticky;
  top: 64px;
  z-index: 43;
  text-align: center;
  background: var(--open-bell);
  color: var(--ink);
  padding: 8px 16px;
  font-family: var(--font-fun);
  font-size: var(--fs-sm);
  box-shadow: 0 2px 10px rgba(20, 28, 40, 0.12);
}