/* GIFLOW 공통 값(토큰) — 색 · 간격 · 글자 크기 · 모서리. 화면 CSS는 여기의 이름만 쓴다(색 글자 #…를 직접 적지 않는다).
   밝기: <html class="light"> = 밝게 · <html class="dark"> = 어둡게 · 클래스 없음 = 자동(폰·PC 설정을 따른다).
   어두운 값 묶음은 두 번 적혀 있다(자동일 때와 '어둡게'를 골랐을 때) — 두 묶음은 글자 하나까지 같아야 한다(시험이 확인한다). */

:root, .paper, .original-sheet, .original-table, .original-sheet-image, .original-image, .cert-preview, .bmap {
  /* 간격: 4·8px 단위 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  /* 글자 크기: 다섯 단계만 */
  --f1: 12px; --f2: 14px; --f3: 16px; --f4: 20px; --f5: 28px;
  /* 모서리 */
  --r1: 6px; --r2: 10px; --r3: 14px; --pill: 999px;
  /* 틀 */
  --bar-h: 56px; --rail-w: 224px; --rail-min: 64px; --tab-h: 60px; --ctl: 44px;

  color-scheme: light;
  --bg: #EEF3F8; --surface: #FFFFFF; --surface-2: #F7FAFC; --soft: #F3F6FA; --soft-2: #E6EDF4;
  --line: #D8E1EA; --line-2: #B4C2D1;
  --ink: #14293D; --sub: #52667A; --label: #31475C; --brand-ink: #1A4E7E;
  --primary: #1C4468; --primary-deep: #153650; --on-primary: #FFFFFF;
  --accent: #1C4468; --accent-deep: #153650; --accent-tint: #E7EFF7; --tint: #E7EFF7;
  --gold: #F2C75C; --picked: #F2C75C; --on-gold: #1D2B3A;
  --tab-on-bg: #F8E2A8; --tab-on-ink: #22384E; --tab-on-line: #E6C67A;
  --ok-bg: #DFF2E8; --ok-ink: #17603D; --ok-line: #A9D9BF;
  --warn-bg: #FFF0CC; --warn-ink: #754C00; --warn-line: #EBCB7E;
  --err-bg: #FCE5E3; --err-ink: #9F2219; --error: #B3261E; --err-line: #EDB3AE;
  --info-bg: #E4EEF8; --info-ink: #1A4E7E;
  --vio-bg: #F1E6FA; --outsrc: #7B22B8;
  --count: #C9302A; --on-count: #FFFFFF;
  --navy: #1C4468; --navy-deep: #153650; --teal: #1E7F86;
  --grad: linear-gradient(#1C4468, #1C4468);
  --focus: #1F6FB5;
  --shadow-card: 0 1px 2px rgba(16, 36, 56, 0.06); --shadow-pop: 0 12px 32px rgba(16, 36, 56, 0.18);
  --head-bg: #F8FBFD; --motif: rgba(28, 68, 104, 0.11); --scrim: rgba(10, 24, 38, 0.5);
  --bar-bg: linear-gradient(100deg, #0E2F4B, #184262); --bar-solid: #0F3150; --bar-ink: #E9F1F8; --bar-line: transparent;
  --rail-bg: linear-gradient(180deg, #153A57, #112C45); --rail-ink: #C8D7E5; --rail-sub: #9DB4C9; --rail-line: rgba(255, 255, 255, 0.1); --rail-on: rgba(255, 255, 255, 0.11);
  --hero-bg: linear-gradient(135deg, #0F304B, #1C536A); --hero-ink: #FFFFFF; --hero-sub: #C9DBEA;
  --pc-toward: #000000; --pc-mix: 30%;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
  color-scheme: dark;
  --bg: #0E1B29; --surface: #162838; --surface-2: #1A2F42; --soft: #1B3044; --soft-2: #243C53;
  --line: #2A4258; --line-2: #3D5871;
  --ink: #E8F0F7; --sub: #A3B6C8; --label: #C4D3E1; --brand-ink: #9CCBF2;
  --primary: #2F6FAD; --primary-deep: #28609A; --on-primary: #FFFFFF;
  --accent: #2F6FAD; --accent-deep: #28609A; --accent-tint: #1D3852; --tint: #1D3852;
  --gold: #F4CC6C; --picked: #F4CC6C; --on-gold: #1D2B3A;
  --tab-on-bg: #6F5B2D; --tab-on-ink: #FFEFC2; --tab-on-line: #97793A;
  --ok-bg: #16392F; --ok-ink: #8FE0BD; --ok-line: #2B6A57;
  --warn-bg: #40381C; --warn-ink: #F3D98E; --warn-line: #77672F;
  --err-bg: #46252A; --err-ink: #FFB4AB; --error: #FF9A8F; --err-line: #7A3D44;
  --info-bg: #1D3852; --info-ink: #9CCBF2;
  --vio-bg: #352A4D; --outsrc: #D0A6F5;
  --count: #D13C34; --on-count: #FFFFFF;
  --navy: #2F6FAD; --navy-deep: #28609A; --teal: #4FC3C8;
  --grad: linear-gradient(#2F6FAD, #2F6FAD);
  --focus: #F4CC6C;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.55);
  --head-bg: #122334; --motif: rgba(156, 203, 242, 0.1); --scrim: rgba(2, 8, 14, 0.66);
  --bar-bg: linear-gradient(100deg, #0A1826, #10283D); --bar-solid: #0B1A29; --bar-ink: #E9F1F8; --bar-line: #20384E;
  --rail-bg: linear-gradient(180deg, #0C1A28, #0D1E2E); --rail-ink: #C8D7E5; --rail-sub: #8FA6BB; --rail-line: #20384E; --rail-on: rgba(156, 203, 242, 0.12);
  --hero-bg: linear-gradient(135deg, #12314B, #1A4A5E); --hero-ink: #FFFFFF; --hero-sub: #C9DBEA;
  --pc-toward: #FFFFFF; --pc-mix: 55%;
  }
}

:root.dark {
  color-scheme: dark;
  --bg: #0E1B29; --surface: #162838; --surface-2: #1A2F42; --soft: #1B3044; --soft-2: #243C53;
  --line: #2A4258; --line-2: #3D5871;
  --ink: #E8F0F7; --sub: #A3B6C8; --label: #C4D3E1; --brand-ink: #9CCBF2;
  --primary: #2F6FAD; --primary-deep: #28609A; --on-primary: #FFFFFF;
  --accent: #2F6FAD; --accent-deep: #28609A; --accent-tint: #1D3852; --tint: #1D3852;
  --gold: #F4CC6C; --picked: #F4CC6C; --on-gold: #1D2B3A;
  --tab-on-bg: #6F5B2D; --tab-on-ink: #FFEFC2; --tab-on-line: #97793A;
  --ok-bg: #16392F; --ok-ink: #8FE0BD; --ok-line: #2B6A57;
  --warn-bg: #40381C; --warn-ink: #F3D98E; --warn-line: #77672F;
  --err-bg: #46252A; --err-ink: #FFB4AB; --error: #FF9A8F; --err-line: #7A3D44;
  --info-bg: #1D3852; --info-ink: #9CCBF2;
  --vio-bg: #352A4D; --outsrc: #D0A6F5;
  --count: #D13C34; --on-count: #FFFFFF;
  --navy: #2F6FAD; --navy-deep: #28609A; --teal: #4FC3C8;
  --grad: linear-gradient(#2F6FAD, #2F6FAD);
  --focus: #F4CC6C;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.55);
  --head-bg: #122334; --motif: rgba(156, 203, 242, 0.1); --scrim: rgba(2, 8, 14, 0.66);
  --bar-bg: linear-gradient(100deg, #0A1826, #10283D); --bar-solid: #0B1A29; --bar-ink: #E9F1F8; --bar-line: #20384E;
  --rail-bg: linear-gradient(180deg, #0C1A28, #0D1E2E); --rail-ink: #C8D7E5; --rail-sub: #8FA6BB; --rail-line: #20384E; --rail-on: rgba(156, 203, 242, 0.12);
  --hero-bg: linear-gradient(135deg, #12314B, #1A4A5E); --hero-ink: #FFFFFF; --hero-sub: #C9DBEA;
  --pc-toward: #FFFFFF; --pc-mix: 55%;
}

/* 늘 흰 바탕으로 두는 것(종이 · 지도를 보는 자리): 이수증 미리보기 · 엑셀 원본보기 · 접수증 원본 그림 · 배정판의 지도. 밝기를 어둡게 해도 여기는 밝은 값 그대로다
   (맨 위의 밝은 값 묶음이 이 자리들에도 같이 걸려 있다 — 안에 든 글자 · 선 · 꼬리표가 모두 밝은 화면의 색으로 나온다) */
.paper, .original-sheet, .original-table, .original-sheet-image, .original-image, .cert-preview, .bmap { background-color: var(--surface); color: var(--ink); }