/* ═══════════════════════════════════════════════════════════════
   css/b/tokens.css — 가안 B 토큰(라이트 한 벌)
   소유: Pretendard @font-face · B 원본 :root 값 · B 본문에 박혀 있던 값의 이름 · B에 없는 역할 ·
        모서리·그림자·셸 변수 · 맨 끝의 '호환 다리'(--ui-*-rgb).
   유일한 시각 기준은 docs/draft-b/reference.html 이다. 값은 그 파일의 숫자 그대로다(설계서 §1).
   ⚠️ 다크 모드·사이트 컬러는 없다(가안 B는 라이트 한 벌). [data-theme]·[data-palette] 블록을 만들지 말 것.
   ⚠️ 로드 순서: tokens → base → components → shell → home → screens → overlays → entry.
   ═══════════════════════════════════════════════════════════════ */

/* ── 글꼴 — B 가안대로 Pretendard(가변, OFL — assets/fonts/pretendard/LICENSE.txt) ──
   앱(APK)은 인터넷 없이도 화면이 떠야 해서 CDN이 아니라 파일을 담는다.
   가변 글꼴이라 B의 650·610·560·520·680 굵기가 그대로 나온다. */
@font-face {
  font-family: 'Pretendard';
  src: url('../../assets/fonts/pretendard/PretendardVariable.woff2') format('woff2-variations'),
       url('../../assets/fonts/pretendard/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ── §1.1 B 원본 :root — 이름·값 그대로 ── */
  --bg: #f4f8f0;
  --paper: #fbfcf8;
  --paper-2: #f7faf4;
  --line: #e1e9df;
  --line-strong: #d6e2d4;
  --ink: #1f2c24;
  --muted: #7d8a80;
  --green: #8fb99a;
  --green-soft: #dfeedd;
  --green-softer: #edf5e9;
  --green-deep: #45624d;
  --cream: #f7f2df;
  --shadow: 0 12px 36px rgba(71, 92, 76, .075);
  --radius: 22px;
  --nav-size: 156px;
  --max: 1180px;

  /* ── §1.2 B 본문에 박혀 있던 값 — 이름만 붙였다(값 그대로) ── */
  --card-bg: rgba(252, 253, 249, .9);
  --card-line: rgba(224, 232, 221, .86);
  --panel-bg: rgba(252, 253, 249, .92);
  --side-bg: rgba(249, 251, 247, .9);
  --bar-bg: rgba(251, 252, 249, .94);
  --nav-hover: #eef4eb;
  --highlight: #f0f5eb;
  --icon-bg: #f0f4ec;
  --photo-bg: #e7eee4;
  --photo-line: rgba(95, 118, 99, .1);
  --photo-shade: linear-gradient(to top, rgba(49, 66, 53, .07), transparent 45%);
  --today-bg: #e7f1e4;
  --event: #dfead8;
  --event-strong: #b9d4b4;
  --dday-grad: linear-gradient(145deg, #eef5e9 0%, #f5f6e6 100%);
  --dday-line: #e7ecda;
  --rule: #edf1eb;
  --rule-2: #eef2ed;
  --rule-3: #edf1ec;
  --action: #739c7e;
  --action-shadow: 0 8px 22px rgba(82, 120, 91, .16);
  --shadow-phone: 0 8px 26px rgba(71, 92, 76, .055);

  --t-brand-sub: #a2ada5;
  --logo-ink: #111111;   /* 로고 글자(워드마크 SVG와 같은 값) */
  --logo-dot: #4f7458;   /* 로고 점 */
  --t-nav: #728077;
  --t-nav-active: #41614a;
  --t-quote: #8da093;
  --t-mbrand-sub: #9aa59e;
  --t-date: #5e6f63;
  --t-greet-sub: #839087;
  --t-more: #83a18a;
  --t-period: #67766c;
  --t-clock: #8f9a93;
  --t-place: #8c9790;
  --t-dday-label: #607364;
  --t-dday-small: #667568;
  --t-tag: #8b998e;
  --t-page-sub: #8a968e;
  --t-cal: #69776d;
  --t-cal-head: #9aa49d;
  --t-cal-dim: #c5cbc6;
  --t-today: #3f5d47;
  --t-tab: #929e96;
  --t-tab-active: #3f5f47;
  --t-icon: #6e8c75;
  --t-date-2: #949e97;
  --t-bottom-active: #4f7458;

  /* ── §1.3 B에 없는 역할 — B 결(저채도·따뜻한 녹회색)로 도출. 새 색은 이 묶음뿐이다 ── */
  --danger: #a5483c;              /* 위험 글자(삭제·탈퇴·신고) — paper 5.67 · bg 5.44 */
  --danger-soft: #f7e9e4;         /* 위험 면 — 위 글자 4.94 */
  --danger-line: #ead2cb;
  --success: var(--green-deep);   /* 성공·연결 안내 글자(면은 --green-softer) — 6.06 */
  --warn: #7a6233;                /* 주의 글자(면은 --cream) — 5.17 */
  --warn-line: #ece3c4;
  /* 탈퇴한 사용자(2026-10-10 사용자 결정) — 이름은 다른 색, 아바타는 경고 삼각형. 빨강은 쓰지 않는다(삭제·오류·알레르기 전용). */
  --withdrawn-ink: var(--warn);   /* paper 5.6 · white 5.8 · cream 5.17 */
  --withdrawn-bg: var(--cream);
  --withdrawn-line: var(--warn-line);
  --focus: var(--green-deep);     /* 포커스 2px outline — bg 6.29 */
  --field-bg: var(--bg);          /* 입력 면 — 카드(paper) 안의 한 단계 '우물' */
  --field-line: #c9d6c7;          /* 입력 경계 ⚠️ paper 1.46(설계서 §1.3 — B의 옅은 선 결) */
  --field-ring: 0 0 0 3px rgba(143, 185, 154, .22);
  --placeholder: var(--t-page-sub);   /* ⚠️ 2.92 — B 값 재사용 */
  --text-2: var(--t-date);        /* 라벨·중요한 보조 문장 — paper 5.19 · bg 4.97 */
  --scrim: rgba(31, 44, 36, .24);
  --scrim-light: rgba(31, 44, 36, .14);
  --viewer-bg: rgba(31, 44, 36, .9);
  --shadow-pop: 0 18px 48px rgba(71, 92, 76, .14);
  --shadow-modal: 0 24px 64px rgba(47, 66, 52, .18);
  --action-hover: #668f71;
  --dot: var(--action);
  --on-photo: rgba(251, 252, 249, .86);   /* 사진 위 작은 버튼 면(+ blur 10px) — --bar-bg 결 */

  /* ── 사용자 가안(2026-10-10 Baby Sage) — 내 프로필·프로필 수정·알림 목록에만 쓴다 ──
     가안 원값을 따르되 작은 회색 글자(가안 #87948a·#9ba69d 등 2.5~3.3)와 저장 버튼 면(#578666, 흰 글자 4.19)은
     같은 색조에서 명도만 낮춰 흰 면 대비 4.6 이상으로 맞췄다. */
  --sage-paper: #ffffff;
  --sage-ink: #26342b;
  --sage-ink-2: #303b33;          /* 메뉴 줄 글자 */
  --sage-secondary: #536057;      /* 학급 줄 — 6.61 */
  --sage-muted: #68746b;          /* 라벨·설명·시각·안내 — 흰 면 4.88 · 읽기 전용 칸 4.61 · --paper 4.74 */
  --sage-icon: #5c6b60;
  --sage-close: #59685e;
  --sage-accent: #527a5d;         /* 글자 버튼·강조 수 — 4.88 */
  --sage-accent-hover: #41694d;
  --sage-softer: #f0f7ef;
  --sage-line: #e3eae3;
  --sage-border: #dae5d9;
  --sage-btn-line: #d8e5da;
  --sage-btn-hover: #f5faf5;
  --sage-row-hover: #f7faf7;
  --sage-avatar: #e0f3e7;
  --sage-avatar-ink: #2d503b;
  --sage-primary: #527e60;        /* 저장 — 흰 글자 4.65 */
  --sage-primary-hover: #477354;
  --sage-field: #fbfdfb;
  --sage-field-line: #dee8de;
  --sage-field-focus: #93b59a;
  --sage-field-ring: 0 0 0 3px rgba(147, 181, 154, .18);
  --sage-readonly: #f7f9f6;
  --sage-readonly-line: #edf0eb;
  --sage-error: #a2574e;          /* 오류 글자 — 흰 면 5.2 */
  --sage-error-soft: #fdf5f4;
  --sage-focus: #84aa8b;
  --sage-shadow: 0 20px 65px rgba(57, 83, 62, .08);
  --sage-radius: 26px;
  --sage-row-line: #f1f4ef;
  --sage-unread: #fbfdfa;
  --sage-unread-hover: #f5faf4;
  --sage-dot: #80b88b;
  --sage-filter-on: #e7f3e8;
  --sage-filter-on-ink: #426b4c;
  --sage-note: #e9f4e9;  --sage-note-ink: #55795c;     /* 공지·투표 */
  --sage-plan: #f6f0e1;  --sage-plan-ink: #8d7852;     /* 일정 */
  --sage-voice: #ecf0f8; --sage-voice-ink: #6e7f9f;    /* 건의 */

  /* ── §1.6 모서리(B 값만) ── */
  --r-card: 22px;      /* 카드 */
  --r-panel: 20px;     /* 패널 */
  --r-phone: 17px;     /* ≤460 카드·패널, 팝오버 */
  --r-item: 13px;      /* 메뉴 항목·사진·입력칸·큰 버튼·메뉴 상자 */
  --r-btn: 11px;       /* 주 버튼(pill-btn)·세그먼트·필터 알약·아이콘 버튼 */
  --r-cell: 10px;      /* 달력 칸·강조 줄·메뉴 줄 */
  --r-tag: 8px;        /* 공지 아이콘·태그 */
  --r-bar: 4px;        /* 하단 바 막대 */
  --r-tab: 2px;        /* 탭 밑줄 */

  /* ── 움직임(B 두 가지) ── */
  --fade: .22s ease;   /* 화면 등장 */
  --move: .18s ease;   /* 메뉴 전환 */

  /* ── 셸 ── */
  --shell: compact;
  --nav-clear: 76px;                       /* 하단 바가 덮는 높이 — 토스트·안내 알약 위치에 쓴다 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* 화면 키보드를 뺀 실제 표시 영역 — main.js(initVisualViewport)가 갱신한다. API가 없으면 아래 폴백. */
  --visual-viewport-height: 100vh;
  --visual-viewport-top: 0px;
}
@supports (height: 100dvh) {
  :root { --visual-viewport-height: 100dvh; }
}

/* 사이드바 셸 판정은 B 그대로 — 가로 방향이면서 폭 760 이상(설계서 §4.1, js/config.js SIDEBAR_MQ 와 같은 식). */
@media (orientation: landscape) and (min-width: 760px) {
  :root { --shell: sidebar; --nav-clear: 0px; }
}
@media (orientation: landscape) and (min-width: 1180px) {
  :root { --nav-size: 176px; }
}
/* 키보드가 열리면 하단 바를 접는다(main.js 가 html.keyboard-open 을 붙인다). */
html.keyboard-open { --nav-clear: 0px; }

/* ══ 호환 다리(설계서 §1.5) ═══════════════════════════════════════════
   Tailwind `ui-*` 색 유틸(index.html·JS 템플릿)·seating.js 의 tone()(자리표 PNG)·교실 QR 표시 창이
   아직 `--ui-*` 이름을 읽는다. 값은 전부 위 B 토큰을 RGB 세 숫자로 다시 적은 것이다.
   ⚠️ 새 CSS 는 이 이름을 쓰지 않는다(B 이름을 쓴다). 읽히기만 하는 별칭이다. */
:root {
  --ui-background-rgb: 244 248 240;       /* --bg */
  --ui-surface-rgb: 251 252 248;          /* --paper */
  --ui-surface-muted-rgb: 247 250 244;    /* --paper-2 */
  --ui-surface-subtle-rgb: 247 250 244;   /* --paper-2 */
  --ui-surface-soft-rgb: 240 245 235;     /* --highlight */
  --ui-surface-strong-rgb: 238 244 235;   /* --nav-hover */
  --ui-accent-rgb: 115 156 126;           /* --action(채움) */
  --ui-on-accent-rgb: 255 255 255;        /* pill-btn 글자 */
  --ui-accent-soft-rgb: 223 238 221;      /* --green-soft */
  --ui-on-accent-soft-rgb: 65 97 74;      /* --t-nav-active */
  --ui-accent-strong: 69 98 77;           /* --green-deep(이름에 -rgb 없음, 기존 그대로) */
  --ui-danger-rgb: 165 72 60;             /* --danger */
  --ui-line-rgb: 225 233 223;             /* --line */
  --ui-ink-rgb: 31 44 36;                 /* --ink */
  --ui-muted-rgb: 125 138 128;            /* --muted */
  --ui-shadow: 71 92 76;                  /* --shadow 의 색 */
}