/* 당원주권 침해 신고센터 — 디자인 토큰 (brand.md 5절 그대로 + 경광등 7.3)
   색·글꼴·크기는 이 파일 한 곳에만 둔다. 다른 CSS·JS 는 var(--…) 만 쓴다. */
:root {
  /* ── 공식 CI 색 [공식] ── */
  --ppp-red:        #E61E2B; /* PANTONE 1795 C. 채움·그래픽·큰 글씨. 흰 바탕 4.58 */
  --ppp-blue:       #00B5E2; /* PANTONE 306 C. 흰 바탕 2.41 → 글씨·얇은 선 금지. 남색 위 장식만 */
  --ppp-navy:       #112C56; /* 흰 13.83 */
  --ppp-blue-deep:  #004C7E; /* 흰 8.99 */
  --ppp-sky:        #BDE4F8; /* 연한 바탕(남색 글씨 10.28) */

  /* ── 누리집 구현 색 [실측] ── */
  --ppp-red-text:   #D31421; /* 흰 5.40 · #FAFAFA 5.17 · #F5F5F5 4.95 */
  --ppp-red-press:  #BC1300; /* 흰 6.50 */
  --ppp-red-tint:   #F6D0D3; /* 그 위 글씨는 --ppp-red-press(4.61) */
  --ppp-navy-text:  #102C53;

  /* ── 글씨 ── */
  --ink-1: #111111;
  --ink-2: #444444; /* 흰 9.74 */
  --ink-3: #666666; /* 흰 5.74 · #FAFAFA 5.50 · #EEE 4.95 */
  --ink-inv: #FFFFFF;

  /* ── 바탕·선 ── */
  --bg:        #FFFFFF;
  --bg-soft:   #FAFAFA;
  --bg-muted:  #F5F5F5;
  --bg-footer: #EEEEEE; /* 글씨는 #555(6.43) */
  --line-strong: #111111;
  --line:        #DDDDDD;
  --line-soft:   #EEEEEE;
  --line-input:  #8A8A8A; /* 입력칸 테두리 3.45 */
  --focus:       #112C56;

  /* ── 상태 배지 ── */
  --st-received-fg: #112C56;  --st-received-bg: #FFFFFF;  --st-received-bd: #112C56;
  --st-review-fg:   #112C56;  --st-review-bg:   #BDE4F8;
  --st-supp-fg:     #BC1300;  --st-supp-bg:     #F6D0D3;
  --st-moved-fg:    #FFFFFF;  --st-moved-bg:    #004C7E;
  --st-done-fg:     #FFFFFF;  --st-done-bg:     #112C56;
  --st-closed-fg:   #444444;  --st-closed-bg:   #F0F0F0;
  --st-withdrawn-fg:#666666;  --st-withdrawn-bg:#FFFFFF;  --st-withdrawn-bd: #DDDDDD;

  /* ── 글자 ── */
  --font: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --fs-display: clamp(30px, 6.4vw, 48px);
  --fs-h1: 28px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px; /* 이보다 작게 쓰지 않음 */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; --fw-black: 900;
  --lh-body: 1.6;
  --lh-tight: 1.3;
  --ls-tight: -0.02em;

  /* ── 간격 ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 80px; --sp-11: 100px;

  /* ── 반경 ── */
  --r-box:  16px;   /* 카드·패널 (2026-10-15 부드러운 문법 — 아래 --round-* 와 같은 값) */
  --r-ctl:  12px;
  --r-pill: 999px;

  /* ── 그림자 — 기본은 평면 ── */
  --shadow-hover: 0 2px 6px rgba(16, 44, 83, 0.08);
  --shadow-float: 7px 7px 32px rgba(0, 0, 0, 0.14);

  /* ── 크기 ── */
  --header-h: 80px;
  --header-h-m: 64px;
  --maxw: 1280px;
  --maxw-form: 720px;
  --gutter: 20px;
  --gutter-desk: 40px;
  --ctl-h: 48px;
  --ctl-h-lg: 56px;
  --tap: 44px;

  /* ── 덧붙인 토큰 [제안 — 위 값의 조합, 대비 보정] ── */
  --ink-footer: #555555;        /* 바닥글 글씨 #EEE 위 6.43 */
  --ink-link-footer: #222222;
  --bg-readonly: #F0F0F0;       /* 읽기전용 칸. 글씨 --ink-2 */
  --bg-disabled: #DDDDDD;       /* 비활성 단추 바탕 */
  --ink-disabled: #555555;      /* 비활성 단추 글씨(#DDD 위 5.49) */
  --ink-black: #000000;
  --ppp-red-glow: rgba(230, 30, 43, 0.2);
  --ppp-red-ray: rgba(230, 30, 43, 0.18);
  --navy-line-on-dark: rgba(255, 255, 255, 0.35);
  --underline-navy: #9CA8B7;    /* 2026 안내 상자 링크 밑줄 색 [실측] */
  --scrim: rgba(17, 17, 17, 0.5);

  /* ── 공개 화면 개편(2026-10-14 밤) — 당의 색·로고·글꼴은 그대로, 틀은 공식 누리집과 다른 현대 공공 서비스 문법.
        위 토큰은 관리자 화면도 쓰므로 값을 바꾸지 않고 아래 것만 더한다. 대비는 흰 바탕 기준. ── */
  --fg-1: #1A1F29;              /* 제목 16.5 */
  --fg-2: #3B4250;              /* 본문 10.1 */
  --fg-3: #5B6270;              /* 보조 6.13 · #F4F5F7 5.62 · #EEF0F3 5.37 */
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;         /* 절 바탕 */
  --surface-3: #F2F4F6;         /* 칸·알약 바탕 */
  --page: #F4F5F7;              /* 신고·조회 쪽 바탕(흰 카드가 올라감) */
  --hair: #E5E8EC;              /* 머리카락 선 */
  --hair-2: #D5DAE0;
  --ctl-line: #868E9A;          /* 입력칸·확인란 테두리 3.31 */
  --red-tint: #FDEDEE;          /* 그 위 붉은 글씨 --ppp-red-text 4.76 */
  --red-tint-2: #FADADD;
  --navy-tint: #EDF2F9;         /* 그 위 남색 글씨 11+ */
  --navy-tint-2: #DCE5F2;
  --on-navy-2: #C9D3E3;         /* 남색 위 보조 글씨 9.16 */
  --rad-sm: 8px; --rad-md: 12px; --rad-lg: 16px; --rad-xl: 20px; --rad-2xl: 28px;
  --elev-1: 0 1px 2px rgba(17, 24, 39, .04), 0 1px 3px rgba(17, 24, 39, .06);
  --elev-2: 0 6px 16px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .05);
  --elev-3: 0 18px 44px rgba(17, 24, 39, .12);
  --elev-red: 0 8px 22px rgba(230, 30, 43, .26);
  --elev-up: 0 -6px 18px rgba(17, 24, 39, .06);
  --red-glow-strong: rgba(230, 30, 43, .36);
  --white-a16: rgba(255, 255, 255, .16);
  --white-a8: rgba(255, 255, 255, .08);
  --glass: rgba(255, 255, 255, .9);
  --hd-h: 72px; --hd-h-m: 60px;
  --maxw-site: 1200px;
  --ctl-h-xl: 56px;
  --fs-hero: clamp(34px, 5.4vw, 60px);
  --fs-title: clamp(26px, 3.4vw, 34px);
}

/* ── 공개 화면 절제판(2026-10-14 밤 2차, 주인 "AI 티 떡칠" 지적 뒤) ──
   중립 90% + 강조색 하나(CI 빨강). 잉크 #191919 · 흰 바탕 · 회색 채움 · 머리카락 선. 남색·분홍 보조색, 색 그림자, 그라데이션을 쓰지 않는다.
   위 토큰은 관리자 화면도 쓰므로 값은 그대로 두고 공개 화면은 아래 --p-* 만 쓴다. 대비는 흰 바탕 기준(괄호는 #F4F4F6 위). */
:root {
  --p-ink:    #191919; /* 제목·주 단추 17.6 */
  --p-ink-2:  #474A50; /* 본문 8.89 (8.09) */
  --p-ink-3:  #66696F; /* 보조 5.50 (5.01) · #EEEEF0 4.75 */
  --p-ink-hover: #34363B;
  --p-bg:     #FFFFFF;
  --p-soft:   #FAFAFA;
  --p-fill:   #F4F4F6; /* 입력칸·보조 단추·읽는 글 상자 */
  --p-fill-2: #EEEEF0; /* 채움 위에 올린 것(누름·배지) */
  --p-line:   #EBEBEE; /* 머리카락 선 */
  --p-line-2: #DCDCE0; /* 흰 단추 테두리 */
  --p-ctl:    #8A8D94; /* 확인란 테두리 3.32 */
  --p-dot:    #B4B6BC; /* 상태 점(중립) — 글자 아님 */
  --p-red:      #E61E2B; /* 채움(흰 글씨 4.58) */
  --p-red-text: #D31421; /* 글씨 5.40 (4.91) */
  --p-red-press:#BC1300;
  --p-red-soft: #FFF1F1; /* 위험 한 줄 바탕(그 위 잉크 15.99 · 빨강 글씨 4.91) */
  --p-r-sm: 8px; --p-r: 12px; --p-r-lg: 16px;
  --p-shadow-dlg: 0 12px 40px rgba(0, 0, 0, .16); /* 대화상자만(중립) */
  --p-hd: 72px; --p-hd-m: 60px;
}

/* ── 경광등 — 평면 단색(CI 빨강 돔 + 잉크 받침 + 흰 하이라이트 한 줄). 판·빛 번짐·그라데이션 없음.
      빛살 세 줄만 1.6초로 은은하게 깜박이고, 움직임 줄이기를 켜면 멈춘다. ── */
.beacon { width: var(--beacon-size, 40px); height: auto; overflow: visible; display: block; flex: none; }
.beacon .bc-ray { animation: bc-blink 1.6s ease-in-out infinite; }
.beacon .bc-ray-r { animation-delay: -0.8s; }
.beacon .bc-ray-t { animation-delay: -0.4s; }
@keyframes bc-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.beacon.is-static .bc-ray, .beacon.is-still .bc-ray { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .beacon .bc-ray { animation: none; opacity: 1; }
}

/* ── 공식 누리집 문법판(v3-official 시안, 2026-10-14 밤) — peoplepowerparty.kr 실측(_build/official/design-official.md 1절) + 접근성으로 올린 값.
   공개 화면(site.css)은 아래 --o-* 만 쓴다. 위 토큰은 관리자 화면도 쓰므로 이름·값을 그대로 둔다.
   [올림] 옅은 회색 #757575·#999 글씨 → #595959·#555, 입력칸 테두리 #ddd → #8A8A8A, 포커스 지움 → 2px 남색 고리.
   --o-navy 는 공식 2026 안내 상자의 작은 제목 색(#102C53)이다. lint 9 '보조색 금지'는 공식에 없는 장식을 막는 규칙이라 공식 문법에 있는 이 한 곳만 새 이름으로 쓴다. ── */
:root {
  --o-red:       #E61E2B; /* 채움: 휴대폰 머리줄 블록·전체 메뉴 윗줄·붉은 원 마침표 (흰 글씨 4.58) */
  --o-red-ink:   #D31421; /* 글씨·테두리·폼 주 단추·TOP · 넓은 화면 전체 메뉴 블록·키비주얼 아래 10px 선·탭 가운데 원(공식 캡처 픽셀) (흰 5.40 · #fafafa 5.17) */
  --o-red-press: #BC1300;
  --o-ink:       #000000; /* 검정: 제목·메뉴·윗선 */
  --o-ink-2:     #333333; /* 본문 12.63 */
  --o-ink-3:     #595959; /* 보조 7.00 · #fafafa 6.70 · #f5f5f5 6.40 · #eee 5.92 */
  --o-ink-4:     #222222; /* 바닥글 링크 */
  --o-foot-ink:  #555555; /* #eee 판 위 6.43 */
  --o-gray:      #757575; /* 회색 단추 바탕(흰 글씨 4.61) · 흰 단추 테두리 */
  --o-gray-press:#5E5E5E;
  --o-line:      #DDDDDD;
  --o-line-2:    #EEEEEE;
  --o-line-3:    #EFEFEF; /* 카드 테두리(공식 메인 .msec li 실측) */
  --o-line-4:    #CCCCCC; /* 빠른 메뉴 흰 원 테두리 */
  --o-line-5:    #D5D5D5; /* 아래 탭 막대 윗선 */
  --o-ctl:       #8A8A8A; /* 입력칸·확인란 테두리 3.45 */
  --o-dot:       #CFCFCF; /* 바닥글 링크 사이 네모 점(글자 아님) */
  --o-bg:        #FFFFFF;
  /* 휴대폰 아래 메뉴 — 애플식 떠 있는 유리 막대(주인 2026-10-15) */
  --tab-glass: rgba(255, 255, 255, .74);
  --tab-edge: rgba(0, 0, 0, .08);
  --tab-active: rgba(0, 0, 0, .06);
  --tab-shadow: 0 10px 30px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08);
  --o-soft:      #FAFAFA; /* 표 머리칸·이름표 칸·검색 상자 */
  --o-band:      #F5F5F5; /* 회색 띠·회색 판 */
  --o-foot:      #EEEEEE; /* 바닥글 판 */
  --o-navy:      #102C53; /* 안내 상자 작은 제목 · 접수됨 꼬리표 · 첫 화면 남색 띠(공식 '법안발의' 띠, 흰 글씨 13.8) */
  --o-navy-row:  #3F5675; /* 남색 띠 안 줄 판(공식 반투명 흰 줄을 단색으로 — 흰 글씨 7.5) */
  --o-navy-line: rgba(255, 255, 255, .4); /* 남색 줄 판 안 세로 구분선 */
  --o-on-navy:   #DCE3EE; /* 남색 줄 판 위 번호(5.8) */
  --o-tool:      #555555; /* 머리줄 글자크기 ± 네모(흰 기호 7.46) */
  --o-focus:     #112C56;
  --o-shadow:    rgba(0, 0, 0, .16); /* 빠른 메뉴 TOP 원의 중립 그림자(공식도 회색 그림자) */
  --o-hd: 80px; --o-hd-m: 64px;
  --o-maxw: 1280px;
}

/* ── 부드러운 문법(2026-10-15 주인 "전체적인 문법이 너무 각지고 네모네모, 모던하지 못하다") ──
   반경·옅은 채움·부드러운 그림자는 이 한 곳에서만 정한다. 공개 화면(site.css·report.css·hero-c.css)과 관리자(admin.css)는 var(--round-*) 만 쓴다.
   - 단추 12 · 입력칸 12 · 카드·선택 카드·패널 16 · 대화상자 20 · 주 행동 단추(신고하기·다음·접수하기)·칩·꼬리표·단계 막대는 알약.
   - 굵은 1px 테두리 상자 대신 옅은 회색 채움(--fill-soft)이나 아주 옅은 선(--hair-soft)으로 나눈다. 입력칸 테두리(--o-ctl)만 대비 3:1 때문에 남긴다.
   - 그림자는 중립색 하나(--shadow-soft)만. 색 그림자·그라데이션·유리·hover 떠오르기 없음. 흰 바탕 기준 --o-ink-3(#595959) 글씨 대비: --fill-soft 6.3 · --fill-soft-2 5.6. */
:root {
  --round-xs:   6px;    /* 확인란 · 아주 작은 칸 */
  --round-sm:   8px;    /* 작은 아이콘 단추 · 한 줄 알림 */
  --round-btn:  12px;   /* 단추 */
  --round-field:12px;   /* 입력칸 */
  --round-card: 16px;   /* 카드 · 선택 카드 · 패널 · 표 상자 */
  --round-dlg:  20px;   /* 대화상자 */
  --round-pill: 999px;  /* 주 행동 단추 · 칩 · 꼬리표 · 단계 막대 */
  --fill-soft:   #F5F6F8; /* 옅은 회색 채움(카드·표 상자) */
  --fill-soft-2: #ECEEF1; /* 채움 위에 올린 것 · hover */
  --hair-soft:   #E6E8EC; /* 아주 옅은 구분선 */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06); /* 카드 — 중립색 */
}