/* 기본사회 국민투표 공개 화면.
   치수는 디자인 1차 입고(2026-10-30) PSD 에서 뽑았다(작업계획 §3-7). 모바일 우선, 1024 이상에서 PC 배치.
   공개 화면 디자인은 밝은 화면 하나라 어두운 모드는 두지 않는다. 관리자 CSS(admin.css)와 섞지 않는다.

   단위 --u: 시안 숫자를 그대로 쓰려고 둔다.
     모바일  시안 780px = 화면 390px(@2x) → 1u = .5px  (예: 글자 30u = 15px). 폭 360~430 에서는 화면 폭에 비례(.45~.55px)
     PC      시안 1920px                  → 1u = 1px(1920 기준, 좁으면 .55px 까지 줄어든다)
   카드·칩 크기는 두 시안이 같은 숫자를 쓴다. 뷰어·시트는 모바일 시안을 PC 에서도 키워 쓴다(--su).
   글자 위치: Pretendard 한글은 line-height:1 일 때 줄 상자 위에서 .06em 아래에 그려진다(시안 좌표를 여백으로 옮길 때 쓴 값). */

/* ---------- 토큰 ---------- */
:root{
  --ink:#181818; --ink-2:#232323; --sub:#626262; --gray:#7D7D7D; --muted:#767676;
  --navy:#122F89; --blue:#2A63D6; --soft:#E9F4F8; --panel:#F3F6FB; --line:#E3E7EE; --box-line:#B5C4E1;
  --kv-bg:#021A5E; --red:#FF0000;
  --kakao:#FEE500; --kakao-ink:#000; --naver:#03C75A; --naver-ink:#fff;
  --f-body:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --u:clamp(.45px, calc(100vw / 780), .55px);
  --gutter:calc(54 * var(--u));
  --wrap:720px;
  color-scheme:light;
}
@media (min-width:1024px){
  :root{ --u:clamp(.55px, calc(100vw / 1920), 1px); --gutter:20px }
}

/* ---------- 바탕 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
html:has(dialog[open]){overflow:hidden}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.6;
  letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit}
img{max-width:100%;height:auto}
button{font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:none}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 14px;border-radius:6px;text-decoration:none}
.skip:focus{top:8px}

/* ---------- 헤더: 로고 + 메뉴 (모바일은 햄버거) ----------
   MO 높이 92 · 로고 154x49 (34,25) · 햄버거 40x31 오른쪽 30 위 33 #868686
   PC 높이 106 · 안쪽 242~1680 · 로고 (242,33) · 메뉴 Bold 24 #232323, 사이 점 13 #C7C7C7, 현재 ExtraBold #2A63D6 */
.hd{position:relative;z-index:30;background:#fff}
.hd__in{display:flex;align-items:flex-start;height:calc(92 * var(--u));padding:calc(25 * var(--u)) 0 0 calc(34 * var(--u))}
.hd__logo{display:block;flex:none}
.hd__logo img{display:block;width:calc(154 * var(--u));height:auto}
.hd__menu{display:flex;justify-content:flex-end;align-items:flex-start;flex:none;margin:calc(-25 * var(--u)) 0 0 auto;
  width:calc(110 * var(--u));height:calc(92 * var(--u));padding:calc(33 * var(--u)) calc(30 * var(--u)) 0 0;border:0;background:none;color:#868686}
.hd__menu svg{display:block;width:calc(40 * var(--u));height:calc(31 * var(--u))}
.gnb{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid #EEE;box-shadow:0 10px 20px rgba(18,47,137,.08)}
.gnb.is-open{display:block}
.gnb ul{list-style:none;margin:0;padding:calc(8 * var(--u)) calc(34 * var(--u)) calc(16 * var(--u))}
.gnb a,.gnb button{display:block;width:100%;padding:calc(24 * var(--u)) 0;border:0;background:none;text-align:left;
  font-size:calc(30 * var(--u));font-weight:700;line-height:1.2;color:var(--ink-2);text-decoration:none}
.gnb a[aria-current="page"]{color:var(--blue);font-weight:800}
.gnb__out{margin-top:calc(8 * var(--u));padding-top:calc(24 * var(--u));border-top:1px solid #EEE}
.gnb .gnb__out button{display:inline-flex;align-items:center;gap:calc(8 * var(--u));width:auto;height:calc(64 * var(--u));
  padding:0 calc(28 * var(--u)) 0 calc(24 * var(--u));border:1.5px solid #D3D8E2;border-radius:999px;background:#fff;
  font-size:calc(26 * var(--u));font-weight:600;line-height:1;color:var(--sub)}
.gnb__out svg{flex:none;width:calc(28 * var(--u));height:calc(28 * var(--u))}
.gnb form{margin:0}
@media (min-width:1024px){
  .hd__in{max-width:calc(1438 * var(--u) + var(--gutter) * 2);height:calc(106 * var(--u));padding:calc(33 * var(--u)) var(--gutter) 0}
  .hd__menu{display:none}
  .gnb{display:block;position:static;margin-left:auto;padding-top:calc(10 * var(--u));border:0;box-shadow:none;background:none}
  .gnb ul{display:flex;align-items:center;padding:0}
  .gnb li+li::before{content:"";flex:none;width:calc(13 * var(--u));height:calc(13 * var(--u));margin:0 calc(20 * var(--u)) 0 calc(18 * var(--u));border-radius:50%;background:#C7C7C7}
  .gnb li{display:flex;align-items:center}
  .gnb a,.gnb button{display:inline;width:auto;padding:0;font-size:calc(24 * var(--u));line-height:1}
  .gnb a:hover{color:var(--blue)}
  .gnb li.gnb__out::before{display:none}
  .gnb__out{margin:0 0 0 calc(32 * var(--u));padding:0;border:0}
  .gnb .gnb__out button{gap:calc(6 * var(--u));height:calc(50 * var(--u));padding:0 calc(22 * var(--u)) 0 calc(18 * var(--u));font-size:calc(21 * var(--u))}
  .gnb__out svg{width:calc(22 * var(--u));height:calc(22 * var(--u))}
  .gnb .gnb__out button:hover{border-color:var(--navy);color:var(--navy)}
}

/* ---------- 푸터 ----------
   MO 위 선 #D3D3D3 55~724 · 로고 155x49 x60 (선 아래 24, 주소 끝줄보다 4 위) · 주소 Regular 15.9 #B5B5B5 오른쪽 맞춤 줄 간격 19 · 글자 아래 26(시안 JPG)
   PC 선 240~1679 · 로고 x423 (선 아래 16, 주소 끝줄과 바닥 맞춤) · 주소 오른쪽 1493 · 아래 19(시안 JPG)
   주소 글자는 시안(모바일 8px)보다 크게(최소 10px) 둔다. 처리방침 링크는 시안에 없지만 법정 고지라 둔다.
   푸터 높이가 시안과 같도록 링크를 둘째 줄(대표 번호) 앞에 붙인다 */
.ft{padding:0 var(--gutter) calc(23 * var(--u) + env(safe-area-inset-bottom,0px))}
.ft__in{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;max-width:var(--wrap);margin:0 auto;
  padding:calc(23 * var(--u)) calc(1 * var(--u)) 0 calc(4 * var(--u));border-top:1px solid #D3D3D3}
.ft__logo{display:block;flex:none;width:calc(155 * var(--u));height:auto;margin-bottom:calc(4 * var(--u))}
.ft__info{text-align:right;font-size:max(10px, calc(15.9 * var(--u)));line-height:1.2;color:#B5B5B5}
.ft__info address{font-style:normal}
.ft__info p{margin:0}
.ft__info a{text-decoration:none}
.ft__privacy{font-weight:700;color:#8A8A8A}
@media (min-width:1024px){
  .ft{padding-bottom:calc(20 * var(--u))}
  .ft__in{max-width:calc(1440 * var(--u));padding:calc(14 * var(--u)) calc(186 * var(--u)) 0 calc(182 * var(--u))}
  .ft__logo{margin-bottom:0}
}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 28px;border:0;border-radius:999px;
  background:var(--navy);color:#fff;font-size:16px;font-weight:700;letter-spacing:-.005em;text-decoration:none}
.btn--line{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.75px var(--navy)}
.btn--sm{min-height:36px;padding:0 16px;font-size:14px}
.link{border:0;background:none;padding:0;color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px}

/* ---------- 토스트 ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;
  width:max-content;max-width:calc(100% - 40px);padding:12px 18px;border-radius:10px;background:rgba(24,24,24,.92);color:#fff;font-size:14px;line-height:1.5;text-align:center;
  white-space:pre-line}   /* 문구의 \n 은 줄바꿈(3표째 투표 직후 안내, 11-06) */
.toast[hidden]{display:none}
/* 모달 위에도 보이게 popover(top layer)로 띄울 때 브라우저 기본값(inset:0·margin:auto·테두리)을 지운다 */
.toast[popover]{top:auto;right:auto;height:auto;margin:0;border:0;overflow:visible}
.toast.is-top{top:calc(16px + env(safe-area-inset-top,0px));bottom:auto}
.is-home .toast:not(.is-top){bottom:calc(90px + env(safe-area-inset-bottom,0px))}

/* =====================================================================
   메인(투표 목록) — MO_투표 · PC_투표
   ===================================================================== */

/* 키비주얼: MO 780x756(시안 92~847) · PC 1920x582(768 이상). 1920 보다 넓으면 가장자리 색으로 채운다
   PC 그림은 디자이너 원본 pc메인(3640x1104, 2배, 11-05 저녁 PSD)을 줄인 것이라 10-30 시안 자리(110~659, 550)보다 32 높다
   PC 시안은 헤더 아래 3 띄우고 위 1 · 아래 2 #EEE 선이 있다 */
.kv{margin:0;background:var(--kv-bg);line-height:0}
.kv__in{position:relative;display:block;max-width:1920px;margin:0 auto}
.kv img{display:block;width:100%;max-width:1920px;height:auto;margin:0 auto}
/* 그림 속 「투표 참여하기」 상자를 덮는 투표 목록 링크(11-05 고객 피드백 1번, 개요만). 자리는 그림 실측 비율에 사방 여유(가로 8~10 · 세로 10)를 더했다
   11-06 수정 PSD(상자 글자 「대국민 투표 참여하기」 → 「투표 참여하기」, 상자가 좁아짐): MO kv-mo 780x756 의 x 247~534 · y 411~475 ·
   PC kv-pc 1920x582 의 x 848~1073 · y 302~352(1280 판도 같은 비율).
   아래 투표 기간 글자(MO y 494 · PC y 368 부터)는 덮지 않는다. 그림이 바뀌면 다시 잰다 */
.kv__go{position:absolute;left:30.64%;top:53.04%;width:38.85%;height:11.11%;border-radius:12px}
.kv__go:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (min-width:768px){ .kv__go{left:43.65%;top:50.17%;width:12.76%;height:12.03%} }
@media (min-width:1024px){
  .kv{margin-top:calc(3 * var(--u));border-top:calc(1 * var(--u)) solid #EEE;border-bottom:calc(2 * var(--u)) solid #EEE}
}

/* 안내 + 나의 투표
   MO 안내 SemiBold 30 줄 36 가운데(글자 위 910 = 키비주얼 아래 62) · 상자 59~722 x 1030~1185 선 2 #B5C4E1 r20
      상자: 「나의 투표」 SemiBold 30 (47,33) · 「0 / 3」 ExtraBold 61.7 남색 (46,77) · 알약 168x54 r26 오른쪽 38 위 54
   선 있는 도형(상자·알약·칩)은 PSD 덤프 크기가 선 바깥까지 잡혀 시안 JPG 보다 사방 2 크다. 값은 JPG 실측을 따른다
   PC 한 줄: 안내 Regular 27 줄 32 왼쪽(478~, 글자 위 737) · 상자 328x124 (1114~1441, 733~856) · 알약 127x44 (1291, 776)(시안 JPG) */
.intro{display:flex;flex-direction:column;align-items:center;padding-inline:calc(44 * var(--u))}
.intro__txt{margin:calc(58 * var(--u)) 0 0;font-size:calc(30 * var(--u));font-weight:600;line-height:1.2;text-align:center;color:var(--ink)}
.intro--one .intro__txt{text-wrap:balance}
.intro__link{margin-top:calc(16 * var(--u));font-size:calc(26 * var(--u));font-weight:600;color:var(--navy);text-underline-offset:.2em}
.my{position:relative;align-self:stretch;margin:calc(52 * var(--u)) calc(14 * var(--u)) 0 calc(15 * var(--u));
  padding:calc(29 * var(--u)) calc(230 * var(--u)) calc(22.5 * var(--u)) calc(45 * var(--u));border:calc(2 * var(--u)) solid var(--box-line);border-radius:calc(20 * var(--u))}
.my__label{margin:0;font-size:calc(30 * var(--u));font-weight:600;line-height:1;color:var(--ink)}
.my__count{margin:calc(8.5 * var(--u)) 0 0;font-size:calc(61.7 * var(--u));font-weight:800;line-height:1;color:var(--navy);white-space:nowrap}
.my__count b{font-weight:inherit}
.my__count--date{font-size:calc(52 * var(--u))}
.my__pill{position:absolute;right:calc(36 * var(--u));top:calc(51 * var(--u));display:flex;align-items:center;justify-content:center;
  min-width:calc(168 * var(--u));height:calc(54 * var(--u));padding:0 calc(22 * var(--u));border:calc(2 * var(--u)) solid var(--navy);border-radius:calc(26 * var(--u));
  background:#fff;font-size:calc(27.5 * var(--u));font-weight:600;line-height:1;color:var(--ink);white-space:nowrap}
button.my__pill:hover{background:var(--soft)}
@media (min-width:1024px){
  .intro{--wrap:calc(965 * var(--u));padding-inline:var(--gutter);flex-direction:row;align-items:flex-start;justify-content:space-between;margin-top:calc(71 * var(--u))}
  .intro__txt{margin:calc(1 * var(--u)) 0 0;font-size:calc(27 * var(--u));font-weight:400;line-height:calc(32 * var(--u));text-align:left}
  .intro{flex-wrap:wrap}
  .intro__link{order:3;flex-basis:100%;margin-top:calc(12 * var(--u));font-size:calc(21 * var(--u))}
  /* 투표 중(상자 없음): 고객 회신 3번 「길게 한 줄로」 — 카드 목록 폭까지 넓혀 가운데 한 줄 */
  .intro--one{--wrap:calc(1362 * var(--u));justify-content:center}
  .intro--one .intro__txt{text-align:center}
  .my{flex:none;align-self:auto;width:calc(328 * var(--u));margin:0 calc(1 * var(--u)) 0 0;padding:calc(24.5 * var(--u)) calc(150 * var(--u)) calc(17.5 * var(--u)) calc(27 * var(--u))}
  .my__label{font-size:calc(23 * var(--u))}
  .my__count{margin-top:calc(9.5 * var(--u));font-size:calc(45 * var(--u));font-weight:700}
  .my__count--date{font-size:calc(36 * var(--u))}
  .my__pill{right:calc(22 * var(--u));top:calc(41 * var(--u));min-width:calc(127 * var(--u));height:calc(44 * var(--u));padding:0 calc(18 * var(--u));
    border-radius:calc(22 * var(--u));font-size:calc(21.9 * var(--u))}
  /* 날짜 상자(시작 전·종료 뒤, 시안 없음): 날짜가 알약 자리까지 쓰도록 D-day 알약을 라벨 줄 오른쪽에 작게 */
  .my--date{padding-right:calc(27 * var(--u))}
  .my--date .my__pill{top:calc(18 * var(--u));min-width:calc(80 * var(--u));height:calc(34 * var(--u));padding:0 calc(14 * var(--u));font-size:calc(18 * var(--u))}
}

/* 분야 칩: 108x54 r26 선 2 남색 · SemiBold 27.5 · 간격 11 · 선택은 남색 바탕 흰 글자(분야 이름이 길면 늘어난다)
   MO 위 1226 = 상자 아래 40 · PC 478, 위 926 = 상자 아래 69(시안 JPG)
   PC 는 11-04 수정 시안으로 줄였다: 97x48 · SemiBold 24.8 · 간격 17.5 · 위 929(가운데 줄은 그대로) */
.chips{display:flex;flex-wrap:wrap;gap:calc(12 * var(--u)) calc(11 * var(--u));margin-top:calc(40 * var(--u));padding-left:calc(var(--gutter) + 1 * var(--u))}
.chip{display:flex;align-items:center;justify-content:center;min-width:calc(108 * var(--u));height:calc(54 * var(--u));padding:0 calc(16 * var(--u));
  border:calc(2 * var(--u)) solid var(--navy);border-radius:calc(26 * var(--u));background:#fff;
  font-size:calc(27.5 * var(--u));font-weight:600;line-height:1;color:var(--navy);white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--navy);color:#fff}
@media (hover:hover){ .chip[aria-pressed="false"]:hover{background:var(--soft)} }
@media (min-width:1024px){
  .chips{--wrap:calc(965 * var(--u));gap:calc(12 * var(--u)) calc(17.5 * var(--u));margin-top:calc(72 * var(--u));padding-left:var(--gutter)}
  .chip{min-width:calc(97 * var(--u));height:calc(48 * var(--u));padding:0 calc(14 * var(--u));border-radius:calc(24 * var(--u));font-size:calc(24.8 * var(--u))}
}

/* 카드 목록 띠: #E9F4F8, 위아래 47(PC 65) · MO 2열 324 간격 21/39 (55~723) · 600 이상 3열 · PC 4열 324 간격 22 (279~1640)
   카드 324x415 r25 흰색 · 썸네일 220 (위 r25 아래 r10) · 분야 알약 86x45 r22 남색 Bold 24 (20,16)
   정책명 SemiBold 33 줄 41 가운데 두 줄(글자 위 = 카드 위 246) · 버튼 219x45 r22 #2A63D6 Bold 24 (카드 위 347, 아래 23)
      버튼 안: 왼쪽 15 · 원 25 · 사이 13 · 글자 · 오른쪽 19(글자 상자가 글리프보다 3 넓어 16)
   MO 값은 시안 JPG 실측(PSD 덤프 영역은 가장자리 픽셀까지 잡혀 1~2 크다)
   PC 는 11-04 수정 시안으로 줄였다(카드 크기는 그대로): 분야 알약 76x39 Bold 21 (25,19) · 정책명 SemiBold 27 줄 34(글자 위 = 카드 위 250)
      · 버튼 209x43 r21 Bold 22.8 (카드 위 348, 아래 24), 안: 왼쪽 16 · 원 23 · 사이 11 · 글자 · 오른쪽 16. 띠는 칩 아래 46 */
.band{margin-top:calc(42 * var(--u));padding:calc(47 * var(--u)) 0 calc(46 * var(--u));background:var(--soft)}
.cards{list-style:none;margin:0 auto;padding-inline:calc(var(--gutter) + 1 * var(--u)) calc(var(--gutter) + 2 * var(--u));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(39 * var(--u)) calc(21 * var(--u))}
@media (min-width:600px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.card{position:relative;display:flex;flex-direction:column;padding-bottom:calc(23 * var(--u));border-radius:calc(25 * var(--u));background:#fff;
  box-shadow:0 0 0 1px #D3D3D3}   /* 1px 회색 테두리: 썸네일의 연한 하늘색이 띠 바탕(--soft)과 섞이지 않게. 흰 그림자 대신(2026-11-07 브리즈 결정)
                                     border 대신 그림자로 그려 카드 크기·썸네일 둥근 모서리가 그대로다. 색은 푸터 선과 같은 회색 */
.card[hidden]{display:none}
.card__thumb{position:relative;aspect-ratio:324 / 220;overflow:hidden;border-radius:calc(25 * var(--u)) calc(25 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));background:#EBEBEB}
.card__thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .2s}   /* 표지 위쪽 기준(가운데는 어수선해 보여 위로 둠, 2026-11-07 브리즈 결정) */
.card__field{position:absolute;left:calc(20 * var(--u));top:calc(16 * var(--u));display:flex;align-items:center;min-width:calc(86 * var(--u));max-width:calc(100% - 40 * var(--u));
  height:calc(45 * var(--u));padding:0 calc(22 * var(--u));border-radius:calc(22 * var(--u));background:var(--navy);
  font-size:calc(24 * var(--u));font-weight:700;line-height:1;letter-spacing:-.005em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:center}
.card__done{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(18,47,137,.62);
  font-size:calc(30 * var(--u));font-weight:800;color:#fff}
.card.is-voted .card__done{display:flex}
.cards.is-full .card:not(.is-voted) .card__thumb{opacity:.55}
.card__title{display:flex;align-items:center;justify-content:center;height:calc(82 * var(--u));margin:calc(20 * var(--u)) calc(16 * var(--u)) 0;
  font-size:calc(33 * var(--u));font-weight:600;line-height:calc(41 * var(--u));letter-spacing:-.005em;text-align:center;color:var(--ink)}
.card__title span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card__btn{display:flex;align-items:center;align-self:center;gap:calc(13 * var(--u));height:calc(45 * var(--u));margin-top:calc(25 * var(--u));
  padding:0 calc(16 * var(--u)) 0 calc(15 * var(--u));border:0;border-radius:calc(22 * var(--u));background:var(--blue);
  font-size:calc(24 * var(--u));font-weight:700;line-height:1;letter-spacing:-.005em;color:#fff;white-space:nowrap}
.card__btn i{position:relative;flex:none;width:calc(25 * var(--u));height:calc(25 * var(--u));border-radius:50%;background:#fff}
.card__btn i::after{content:"";position:absolute;left:50%;top:44%;width:calc(10 * var(--u));height:calc(10 * var(--u));
  border:solid var(--blue);border-width:0 calc(3 * var(--u)) calc(3 * var(--u)) 0;transform:translate(-50%,-50%) rotate(45deg)}
.card__btn::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card:has(.card__btn:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.card__btn:focus-visible{outline:0}
@media (hover:hover){ .card:hover .card__btn{background:#1F55C4} }
.cards__empty{margin:0;padding:40px 0;text-align:center;color:var(--sub)}
.card__foot{display:flex;justify-content:center}
/* 「투표 하기」 동그라미(11-05 저녁 수정 PSD, MO·PC 같은 치수): 카드 326x417 안 왼쪽 14 에 「카드뉴스로 보기」 201x43 r20 Bold 21.6
   (안: 왼쪽 15 · 원 24 · 사이 9 · 글자, 카드 아래 25), 오른쪽 19 · 아래 11 에 동그라미 80(남색 테두리 2 · 흰 틈 3 · 안 원 70 은
   왼쪽 #122F89 → 오른쪽 #2A63D6, 글자 Bold 19.8 흰색 두 줄). 동그라미 위 = 카드 위 326.
   투표한 정책은 흰 바탕 남색 글자, 3표를 다 썼거나 끝났으면 흰 바탕 회색 글자(누르면 안내 토스트, site.js).
   마지막 장까지 넘겨야 투표하는 제한(app.card_gate)을 켜면 동그라미가 빠지고(has-vote 없음) 알약은 예전처럼 가운데다.
   카드가 좁아 겹치지 않게 동그라미가 있으면 3칸은 768 부터, 360 밑에서는 알약의 원 아이콘을 뺀다(그래도 모자라면 글자 말줄임) */
.cards.has-vote .card{padding-bottom:calc(11 * var(--u))}
.cards.has-vote .card__foot{justify-content:space-between;align-items:flex-end;gap:calc(6 * var(--u));margin-top:calc(4 * var(--u));padding:0 calc(19 * var(--u)) 0 calc(14 * var(--u))}
.cards.has-vote .card__btn{align-self:flex-end;min-width:0;gap:calc(9 * var(--u));height:calc(43 * var(--u));margin:0 0 calc(14 * var(--u));padding:0 calc(18 * var(--u)) 0 calc(15 * var(--u));
  border-radius:calc(21.5 * var(--u));font-size:calc(21.6 * var(--u))}
.cards.has-vote .card__btn i{width:calc(24 * var(--u));height:calc(24 * var(--u))}
.cards.has-vote .card__btn span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.card__vote{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:calc(80 * var(--u));height:calc(80 * var(--u));padding:calc(3 * var(--u));border:calc(2 * var(--u)) solid var(--navy);border-radius:50%;
  background:linear-gradient(90deg,var(--navy),var(--blue)) content-box,#fff;
  font-size:calc(19.8 * var(--u));font-weight:700;line-height:1.24;letter-spacing:-.005em;color:#fff;cursor:pointer}
.card__vote span{display:block}
.card__vote:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.card__vote.is-done{background:#fff;color:var(--navy)}
.card__vote.is-off{border-color:#C8C8C8;background:#fff;color:var(--gray)}
@media (hover:hover){
  .card__vote:not([aria-disabled]):hover{background:linear-gradient(90deg,#0E2570,#1F55C4) content-box,#fff}
  .card__vote.is-done:not([aria-disabled]):hover{background:var(--soft)}   /* 누르면 취소(11-06 고객 피드백 2차) — 흰 바탕을 지킨다 */
}
.card__vote[aria-busy="true"]{opacity:.55;cursor:progress}   /* 투표·취소를 보내는 동안 */
@media (max-width:359px){
  .cards.has-vote .card__btn{padding-inline:calc(12 * var(--u))}
  .cards.has-vote .card__btn i{display:none}
}
@media (min-width:600px) and (max-width:767px){ .cards.has-vote{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){
  .band{margin-top:calc(46 * var(--u));padding:calc(64 * var(--u)) 0 calc(64 * var(--u))}
  .cards{--wrap:calc(1362 * var(--u));padding-inline:var(--gutter);grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(22 * var(--u))}
  .card{padding-bottom:calc(24 * var(--u))}
  .card__field{left:calc(25 * var(--u));top:calc(19 * var(--u));min-width:calc(76 * var(--u));max-width:calc(100% - 50 * var(--u));height:calc(39 * var(--u));
    padding:0 calc(20 * var(--u));border-radius:calc(20 * var(--u));font-size:calc(21 * var(--u))}
  .card__title{height:calc(68 * var(--u));margin-top:calc(25 * var(--u));font-size:calc(27 * var(--u));line-height:calc(34 * var(--u))}
  .card__btn{gap:calc(11 * var(--u));height:calc(43 * var(--u));margin-top:calc(35 * var(--u));padding:0 calc(16 * var(--u));border-radius:calc(21 * var(--u));font-size:calc(22.8 * var(--u))}
  .card__btn i{width:calc(23 * var(--u));height:calc(23 * var(--u))}
  .cards.has-vote .card__foot{margin-top:calc(13 * var(--u))}
  .cards.has-vote .card__btn i{width:calc(24 * var(--u));height:calc(24 * var(--u))}
}

/* 하단 바: 「나의 투표 n / 3」 Bold 30 · 버튼 296x89 r44 그라데이션 Bold 42. 아래 안내 줄(경품 자동 응모)은 고객 회신 4번으로 빼고 표 수를 버튼과 가운데 맞춤
   MO 54~724, 목록 띠 아래 39 · 버튼 아래 46 에 푸터 선 · 글자 위 버튼 위 + 13, 두 줄 사이 13.5(시안 JPG)
   PC 625~1297, 목록 띠 아래 59 · 버튼 296x74 r37 Bold 40, 아래 56 에 푸터 선 · 글자 위 버튼 위 + 4, 두 줄 사이 13.5(시안 JPG)
      → 11-04 수정 시안: 버튼 251x62 r31 Bold 30, 띠 아래 63 · 아래 64 에 푸터 선(푸터 선 자리는 그대로)
        버튼은 가운데 자리(1146)를 두고 줄여서 오른쪽 끝이 바 끝보다 24 안쪽
   → 11-06 수정 PSD(버튼 글자 「이벤트 참여하기」, 고객 피드백 2번): MO 버튼 311x91 r44 Bold 40, 띠 아래 37 · 아래 44 에 푸터 선
        PC 버튼 254x66 r31 Bold 30, 오른쪽 끝이 바 끝보다 22 안쪽, 띠 아래 60 · 아래 60 에 푸터 선
   스크롤 중에는 화면 아래에 붙는다(.is-stuck = 붙어 있는 동안 그림자, site.js). 위아래 10px 는 붙었을 때 숨 쉴 자리라 여백에서 뺀다 */
.bar{position:sticky;bottom:0;z-index:20;margin-top:calc(37 * var(--u) - 10px);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  background:#fff;transition:box-shadow .2s}
.bar.is-stuck{box-shadow:0 -6px 18px rgba(18,47,137,.10)}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u));max-width:calc(672 * var(--u));margin:0 auto;padding-right:calc(2 * var(--u))}
.bar__my{min-width:0}
.bar__count{margin:0;font-size:calc(30 * var(--u));font-weight:700;line-height:1;color:var(--ink);white-space:nowrap}
.bar__count b{font-weight:inherit;color:var(--navy)}
.bar__btn{flex:none;min-width:calc(311 * var(--u));height:calc(91 * var(--u));padding:0 calc(30 * var(--u));border:0;border-radius:calc(44 * var(--u));
  background:linear-gradient(90deg,#13318B,#2A61D5);font-size:calc(40 * var(--u));font-weight:700;line-height:1;letter-spacing:-.005em;color:#fff;white-space:nowrap}
@media (hover:hover){ .bar__btn:hover{filter:brightness(1.08)} }
.bar-sentinel{height:1px;margin-bottom:-1px}
@media (min-width:1024px){
  .bar{margin-top:calc(60 * var(--u) - 10px)}
  .bar__in{padding:0 0 0 calc(1 * var(--u))}
  .bar__btn{min-width:calc(254 * var(--u));height:calc(66 * var(--u));margin-right:calc(22 * var(--u));border-radius:calc(31 * var(--u));font-size:calc(30 * var(--u))}
}
.is-home .ft{margin-top:calc(44 * var(--u) - 10px)}
@media (min-width:1024px){ .is-home .ft{margin-top:calc(60 * var(--u) - 10px)} }

/* =====================================================================
   뷰어·시트 — 모바일 시안(780 폭)을 --su 로 키워 쓴다
   ===================================================================== */
dialog{max-width:none;max-height:none;padding:0;border:0;color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.68)}
@keyframes up{from{transform:translateY(32px);opacity:0}}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){ dialog[open],dialog[open]::backdrop{animation:none!important} }

/* 카드뉴스 뷰어(MO_카뉴팝업): 머리 「분야 · 제안자」 SemiBold 31 글자 (41,39) · X 33x34 (695,36) #626262
   이미지 700x876 (40,99) r25 · 장 번호 88x47 선 2 r22 Medium 24 자간 50 (오른쪽 20, 위 18 → 49, 크기 80%)
     장 번호는 카드 오른쪽 위 「국민의 생각이 정책이 됩니다」(1080 폭 y 35~62, 90장 모두 같은 자리)를 가리지 않게 그 아래에 두고,
     문구 위 여백(35px)과 같은 간격(64su)·3px 올림(58su)을 거쳐, 04번 표지 말풍선 「수밖에」(배지 열에서 90장 중 가장 위 글자, y 146)를
     가리지 않을 만큼만 올렸다(45su). 그 뒤 크기를 80%로 줄이고(70.4x37.6 선 1.6 r17.6 글자 19.2) 문구와 「수밖에」 사이 가운데에 둔다
     (2026-11-07 브리즈 결정). 49su = 1080 폭 y 75~133(이미지 위 0.5su 여백 포함), 문구 아래 13px · 글자 위 13px
   점 6개 36x36 선 2 남색 간격 77.6 (이미지 아래 38) · 버튼 높이 93 선 3.5 r44 Bold 45 (점 아래 40)
     켜짐 421 남색 바탕 「이 정책에 투표하기」 · 꺼짐 300 #E9F4F8 바탕 「투표하기」 · 안내 SemiBold 33 가운데, 글자 위 버튼 아래 40(시안 JPG)
   모바일도 PC 처럼 어두운 바탕 위 가운데 창(레이어 모달, 2026-11-02 브리즈 요청). 창 밖 여백 좌우 16px·위아래 20px 안에서 시안 비율대로 줄인다 */
.viewer{--su:min(calc((100vw - 32px) / 780), calc((100dvh - 40px) / 1390));position:fixed;inset:0;width:max-content;height:max-content;margin:auto;
  border-radius:calc(35 * var(--su));background:#fff;overscroll-behavior:contain}
.viewer[open]{display:flex;align-items:center;justify-content:center;animation:fade .18s ease-out}
.viewer__box{position:relative;display:flex;flex-direction:column;align-items:center;width:calc(780 * var(--su));padding:0 calc(40 * var(--su)) calc(30 * var(--su))}
.viewer__hd{display:flex;align-items:flex-start;align-self:stretch;height:calc(99 * var(--su))}
.viewer__title{flex:1;min-width:0;margin:calc(39 * var(--su)) 0 0 0;font-size:calc(31 * var(--su));font-weight:600;line-height:1;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 닫기: 버튼 상자(포커스 테두리·누름 표시)는 X 에 6 만 둘러 붙이고, 누르는 범위는 ::before 로 10px 더 넓힌다. X 자리는 시안 (695,36) 그대로 */
.viewer__x{position:relative;flex:none;display:grid;place-items:center;width:calc(45 * var(--su));height:calc(46 * var(--su));
  margin:calc(30 * var(--su)) calc(6 * var(--su)) 0 0;padding:0;border:0;border-radius:calc(8 * var(--su));background:none;color:#626262;
  -webkit-tap-highlight-color:transparent}
.viewer__x::before{content:"";position:absolute;inset:-10px}
.viewer__x:active{background:rgba(0,0,0,.06)}
.viewer__x svg{width:calc(33 * var(--su));height:calc(34 * var(--su))}
.viewer__stage{position:relative;width:calc(700 * var(--su));aspect-ratio:700 / 876;border-radius:calc(25 * var(--su));overflow:hidden;background:#CCCCCC}
.viewer__track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.viewer__track::-webkit-scrollbar{display:none}
.viewer__track:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.viewer__slide{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
.viewer__slide img{display:block;width:100%;height:100%;object-fit:contain}
.viewer__slide--empty{display:flex;align-items:center;justify-content:center;padding:0 calc(50 * var(--su));text-align:center;white-space:pre-line;font-size:calc(30 * var(--su));line-height:1.5;color:#8A8A8A}
.viewer__count{position:absolute;right:calc(20 * var(--su));top:calc(49 * var(--su));display:flex;align-items:center;justify-content:center;margin:0;
  width:calc(70.4 * var(--su));height:calc(37.6 * var(--su));border:calc(1.6 * var(--su)) solid var(--ink);border-radius:calc(17.6 * var(--su));background:#fff;
  font-size:calc(19.2 * var(--su));font-weight:500;line-height:1;letter-spacing:.05em;color:var(--ink);pointer-events:none}
.viewer__nav{position:absolute;top:50%;display:none;place-items:center;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;
  background:rgba(255,255,255,.88);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.viewer__nav svg{width:22px;height:22px}
.viewer__nav--prev{left:10px}
.viewer__nav--next{right:10px}
.viewer__nav[disabled]{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){ .viewer__nav{display:grid} }
.viewer__text{position:absolute;inset:0;overflow:auto;padding:calc(90 * var(--su)) calc(40 * var(--su)) calc(40 * var(--su));background:rgba(255,255,255,.97);
  font-size:max(15px, calc(30 * var(--su)));line-height:1.6;white-space:pre-line}
.viewer__dots{display:flex;gap:calc(41.6 * var(--su));margin-top:calc(38 * var(--su))}
.viewer__dots button{width:calc(36 * var(--su));height:calc(36 * var(--su));padding:0;border:calc(2 * var(--su)) solid var(--navy);border-radius:50%;background:#fff}
.viewer__dots button[aria-current="true"]{background:var(--navy)}
.viewer__vote{min-width:calc(300 * var(--su));height:calc(93 * var(--su));margin-top:calc(40 * var(--su));padding:calc(3 * var(--su)) calc(40 * var(--su)) 0;
  border:calc(3.5 * var(--su)) solid var(--navy);border-radius:calc(44 * var(--su));background:var(--soft);
  font-size:calc(45 * var(--su));font-weight:700;line-height:1;letter-spacing:-.005em;color:var(--navy);white-space:nowrap}
.viewer__vote.is-on{min-width:calc(421 * var(--su));background:var(--navy);color:#fff}
.viewer__vote.is-done{background:#F1F1F1;border-color:#C9C9C9;color:#8A8A8A;cursor:default}
.viewer__hint{min-height:calc(82 * var(--su));margin:calc(34 * var(--su)) 0 0;font-size:calc(33 * var(--su));font-weight:600;line-height:calc(41 * var(--su));
  letter-spacing:-.005em;text-align:center;color:var(--ink)}
.viewer__alt{margin-top:0;padding:4px 8px;border:0;background:none;font-size:max(12px, calc(24 * var(--su)));color:var(--gray);
  text-decoration:underline;text-underline-offset:.2em}
@media (min-width:1024px){
  .viewer{--su:min(.85px, calc((100dvh - 40px) / 1390))}
}
/* 11-06 고객 피드백 1번(config app.viewer_vote): 투표 버튼·안내가 없는 뷰어. 점 아래 40 만 남기고(높이 99+876+38+36+40 ≈ 1100)
   줄어든 높이만큼 같은 화면에서 카드뉴스가 커진다. 폭 상한(.85px·좌우 16px)은 그대로 */
.viewer--plain{--su:min(calc((100vw - 32px) / 780), calc((100dvh - 40px) / 1100))}
.viewer--plain .viewer__box{padding-bottom:calc(40 * var(--su))}
@media (min-width:1024px){
  .viewer--plain{--su:min(.85px, calc((100dvh - 40px) / 1100))}
}

/* 시트(MO_345팝업): 위 모서리 r35, 좌우 42 · 제목 Bold 46 · 버튼 높이 91, 아래 47
   모바일은 아래에서 올라오고, PC 는 가운데 창(같은 비율로 줄여서) */
.sheet{--su:min(calc(100vw / 780), .72px);position:fixed;inset:auto 0 0;width:calc(780 * var(--su));max-height:92vh;max-height:92dvh;margin:0 auto;
  border-radius:calc(35 * var(--su)) calc(35 * var(--su)) 0 0;background:#fff;overflow:auto;overscroll-behavior:contain}
.sheet[open]{animation:up .22s ease-out}
.sheet[open]::backdrop{animation:fade .22s ease-out}
.sheet__box{padding:calc(45 * var(--su)) calc(42 * var(--su)) calc(47 * var(--su) + env(safe-area-inset-bottom,0px))}
/* 로그인 시트의 닫기(시안에 없음): 평소엔 시트 위로 숨겨 스크린리더만 읽고, 키보드 초점이 오면 본문 바로가기(.skip)처럼 보인다 */
.sheet__close{position:absolute;right:8px;top:-60px;z-index:1;padding:8px 12px;border:0;border-radius:6px;background:var(--navy);color:#fff;font-size:14px}
.sheet__close:focus{top:8px}
.sheet__title{margin:0;font-size:calc(46 * var(--su));font-weight:700;line-height:1;letter-spacing:-.005em;color:var(--ink)}
.sheet__desc{margin:calc(32 * var(--su)) 0 0;font-size:calc(29 * var(--su));font-weight:600;line-height:calc(35.4 * var(--su));letter-spacing:-.005em}
.sheet__foot{margin:calc(44 * var(--su)) 0 0;font-size:calc(25 * var(--su));font-weight:600;line-height:1}
.sheet__foot a{color:var(--gray);text-underline-offset:.2em}
.sheet__btns{display:grid;grid-template-columns:1fr 1fr;gap:calc(32 * var(--su));margin:0 calc(2 * var(--su))}
.sheet__btns .btn{min-height:0;height:calc(91 * var(--su));padding:0;font-size:calc(42 * var(--su))}
.sheet__btns .btn--line{box-shadow:inset 0 0 0 calc(3.5 * var(--su)) var(--navy)}
.sheet__btns.is-one{grid-template-columns:1fr}
@media (min-width:1024px){
  .sheet{--su:.6px;inset:0;margin:auto;height:max-content;border-radius:calc(35 * var(--su))}
  .sheet__box{padding-bottom:calc(47 * var(--su))}
}

/* 로그인: 글자 x 41, 제목 글자 위 46 · 설명 줄 35, 시안처럼 「투표 종료」 뒤에서 꺾이게 폭 656
   버튼 691x88 (44~734) r15 Bold 39, 간격 17 · 처리방침 링크 네이버 버튼 아래 47(시안 JPG) */
#login-sheet .sheet__box{padding-top:calc(46 * var(--su));padding-left:calc(41 * var(--su));padding-bottom:calc(49 * var(--su) + env(safe-area-inset-bottom,0px))}
#login-sheet .sheet__desc{max-width:calc(656 * var(--su));margin-top:calc(29 * var(--su));line-height:calc(35 * var(--su))}
.login-btns{display:grid;gap:calc(17 * var(--su));margin:calc(33 * var(--su)) calc(4 * var(--su)) 0 calc(3 * var(--su))}
#login-sheet .sheet__foot{margin-top:calc(47 * var(--su))}
.btn-sns{position:relative;display:flex;align-items:center;justify-content:center;height:calc(88 * var(--su));border-radius:calc(15 * var(--su));
  font-size:calc(39 * var(--su));font-weight:700;line-height:1;letter-spacing:-.005em;text-decoration:none}
.btn-sns svg{position:absolute;left:calc(40 * var(--su));top:50%;transform:translateY(-50%)}
.btn-sns--kakao{background:var(--kakao);color:var(--kakao-ink)}
.btn-sns--kakao svg{width:calc(40 * var(--su));height:calc(40 * var(--su))}
.btn-sns--naver{background:var(--naver);color:var(--naver-ink)}
.btn-sns--naver svg{width:calc(30 * var(--su));height:calc(30 * var(--su))}

/* 투표 확인: 정책명 SemiBold 32 #181818 · 제안자 #7D7D7D · 경고 #FF0000 · 남은 표 #7D7D7D, 줄 36 · 글자 x 42, 위 958·1007·1072·1121(시안 JPG) */
#confirm-sheet .sheet__box{padding-top:calc(53 * var(--su));padding-left:calc(41 * var(--su))}
.confirm__name,.confirm__by,.confirm__warn,.confirm__left{margin:0;font-size:calc(32 * var(--su));line-height:calc(36 * var(--su));letter-spacing:-.005em}
.confirm__name{margin-top:calc(30 * var(--su));font-weight:600;color:var(--ink)}
.confirm__by{margin-top:calc(14 * var(--su));font-weight:500;color:var(--gray)}
.confirm__warn{margin-top:calc(28 * var(--su));font-weight:600;color:var(--red)}
.confirm__left{margin-top:calc(14 * var(--su));font-weight:500;color:var(--gray)}
#confirm-sheet .sheet__btns{margin:calc(36 * var(--su)) calc(2 * var(--su)) 0 calc(3 * var(--su))}

/* 참여 인증: 제목 가운데 글자 위 52 · 하늘 그라데이션 상자 690x150 r12 (시트 위 137) · 노란 상자 110 Regular 28 줄 34 (상자 아래 21)
   공유 알약 높이 48 선 1.5 Regular 24 간격 12, x 47 부터 왼쪽 정렬 (노란 상자 아래 22) · 버튼 (알약 아래 22)(시안 JPG) */
.sheet--center .sheet__title{text-align:center}
#cert-sheet .sheet__box{padding-top:calc(51 * var(--su))}
.cert__card{margin:calc(39 * var(--su)) calc(3 * var(--su)) 0;padding:calc(35 * var(--su)) calc(20 * var(--su)) calc(22.5 * var(--su));border-radius:calc(12 * var(--su));
  background:linear-gradient(90deg,#C2E7FE,#E9F4F8);text-align:center}
.cert__event{margin:0;font-size:calc(27.5 * var(--su));font-weight:400;line-height:1;color:#333}
.cert__count{margin:calc(16.5 * var(--su)) 0 0;font-size:calc(48.5 * var(--su));font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--navy)}
.cert__note{margin:calc(22 * var(--su)) calc(3 * var(--su)) 0;padding:calc(22 * var(--su)) calc(20 * var(--su)) calc(20 * var(--su));border-radius:calc(12 * var(--su));
  background:linear-gradient(90deg,#FEF6B2,#FFFBD7);font-size:calc(28 * var(--su));line-height:calc(34 * var(--su));text-align:center;color:#535353}
.cert__note:empty{display:none}
.cert__note b{font-weight:700}
.share{display:flex;flex-wrap:wrap;gap:calc(12 * var(--su));margin:calc(22 * var(--su)) 0 0;padding:0 0 0 calc(5 * var(--su));list-style:none}
.cert__card[hidden] ~ .share{justify-content:center;padding-left:0}
.share--solo{justify-content:center;padding-left:0}   /* 공유 버튼을 감추면(11-05 고객 피드백 7번) 이미지 저장 하나만 가운데 */
.share li[hidden]{display:none}
.share button{display:block;height:calc(48 * var(--su));min-width:calc(72 * var(--su));padding:0 calc(24 * var(--su));border:0;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 calc(1.5 * var(--su)) #535353;font-size:calc(24 * var(--su));line-height:1;word-spacing:calc(-6 * var(--su));color:#535353;white-space:nowrap}
@media (hover:hover){ .share button:hover{background:var(--soft)} }
#cert-sheet .sheet__btns{margin-top:calc(22 * var(--su))}
/* 3표 완료(11-05 저녁 수정 PSD 「참여인증」 1080 폭 → 780 으로 0.722 배): 하늘 상자 690x281 r15 (시트 위 139) 안에
   완료 ExtraBold 43.3 #122F89 · 감사 Medium 31 #535353 · 줄 468 x 0.75(테두리는 1px 로 굵어져 배경으로 그린다) · 이벤트 안내 Medium 28 #122F89 줄 34 두 줄 (상자 아래 35),
   STEP 알약 334x76 둘 간격 31 (상자 아래 19, 양옆이 상자보다 1.5 넓다) 선 2.2 SemiBold 27.4 #122F89 — STEP1 노랑(#FED660, #FEF6B2 → #FFFBD7)·STEP2 초록(#38B159, #83E09E → #CEFFDC),
   닫기 692x74 Bold 39 (알약 아래 16), 시트 아래 45. 이벤트 주소가 없으면 안내·줄·STEP2 없이 「인증 이미지 받기」 하나(가운데) */
.cert__done{margin:calc(43 * var(--su)) calc(3 * var(--su)) 0;padding:calc(45 * var(--su)) calc(20 * var(--su)) calc(27 * var(--su));border-radius:calc(15 * var(--su));
  background:linear-gradient(90deg,#C2E7FE,#E9F4F8);text-align:center;letter-spacing:-.005em}
.cert__done--plain{padding-bottom:calc(44 * var(--su))}   /* 이벤트 안내가 없으면 글자 위아래 여백을 같게 */
.cert__done-title{margin:0;font-size:calc(43.3 * var(--su));font-weight:800;line-height:1.2;letter-spacing:-.015em;color:var(--navy)}
.cert__done-thanks{margin:calc(10 * var(--su)) 0 0;font-size:calc(31 * var(--su));font-weight:500;line-height:1.2;letter-spacing:-.025em;color:#535353}
.cert__done-event{width:calc(468 * var(--su));margin:calc(18 * var(--su)) auto 0;padding-top:calc(20 * var(--su));background:linear-gradient(var(--navy),var(--navy)) center top/100% calc(.75 * var(--su)) no-repeat;
  font-size:calc(28 * var(--su));font-weight:500;line-height:calc(34 * var(--su));color:var(--navy)}
.cert__steps{display:grid;grid-template-columns:1fr 1fr;gap:calc(31 * var(--su));margin:calc(19 * var(--su)) calc(-1.5 * var(--su)) 0}
.cert__steps.is-one{grid-template-columns:minmax(0,calc(332 * var(--su)));justify-content:center}
.cert__step{display:flex;align-items:center;justify-content:center;height:calc(76 * var(--su));padding:0 calc(10 * var(--su));border:calc(2.2 * var(--su)) solid;border-radius:999px;
  font-size:calc(27.4 * var(--su));font-weight:600;line-height:1;letter-spacing:-.005em;color:var(--navy);white-space:nowrap;text-decoration:none;cursor:pointer}
.cert__step--save{border-color:#FED660;background:linear-gradient(90deg,#FEF6B2,#FFFBD7)}
.cert__step--event{border-color:#38B159;background:linear-gradient(90deg,#83E09E,#CEFFDC)}
.cert__step:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (hover:hover){
  .cert__step--save:hover{background:linear-gradient(90deg,#FDEF94,#FFF6BC)}
  .cert__step--event:hover{background:linear-gradient(90deg,#6FD88D,#B7F7CA)}
}
#cert-sheet.is-done .sheet__box{padding-bottom:calc(45 * var(--su) + env(safe-area-inset-bottom,0px))}
#cert-sheet.is-done .sheet__btns{margin-top:calc(16 * var(--su))}
#cert-sheet.is-done .sheet__btns .btn{height:calc(74 * var(--su));font-size:calc(39 * var(--su))}
@media (min-width:1024px){
  #cert-sheet.is-done .sheet__box{padding-bottom:calc(45 * var(--su))}
}

/* 종료 팝업(partials/end-popup, 시안 없음 — 이미지가 오면 바꾼다). 참여 인증 시트와 같은 가운데 정렬 */
#end-pop .sheet__box{padding-top:calc(51 * var(--su))}
.end-pop__desc{margin-top:calc(28 * var(--su));text-align:center;color:#535353}
#end-pop .sheet__btns{margin-top:calc(40 * var(--su))}

/* 3표 안내 창(partials/done-popup, 11-06 고객 피드백 2차 — 3표 완료 팝업에서 모든 항목을 빼고 가운데 문구 + 닫기). 종료 팝업과 같은 틀 */
#done-pop .sheet__box{padding-top:calc(51 * var(--su))}
.done-pop__msg{text-align:center;font-size:calc(31 * var(--su));font-weight:600;line-height:1.55;letter-spacing:-.005em;color:#535353}
.done-pop__msg p{margin:0}
.done-pop__msg p + p{margin-top:calc(22 * var(--su))}
.done-pop__msg p:first-child{font-size:calc(40 * var(--su));font-weight:700;line-height:1.3;color:var(--navy)}
#done-pop .sheet__btns{margin-top:calc(44 * var(--su))}

/* 3표 사용 안내 창(partials/full-popup, 11-07 고객 피드백 3차). 3표 안내 창과 같은 틀·글자에, 글줄 안에 카드의 「투표완료」 동그라미
   (.card__vote.is-done: 지름 80 선 2 Bold 19.8 줄 1.24)를 같은 숫자로 그린다 */
#full-pop .sheet__box{padding-top:calc(51 * var(--su))}
#full-pop .sheet__btns{margin-top:calc(44 * var(--su))}
.vote-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle;
  width:calc(80 * var(--su));height:calc(80 * var(--su));margin:0 calc(4 * var(--su)) 0 calc(2 * var(--su));padding:calc(3 * var(--su));
  border:calc(2 * var(--su)) solid var(--navy);border-radius:50%;background:#fff;
  font-size:calc(19.8 * var(--su));font-weight:700;line-height:1.24;letter-spacing:-.005em;color:var(--navy)}
.vote-chip span{display:block}

/* 참여 인증 이미지(인앱 브라우저에서 내려받기가 안 될 때 길게 눌러 저장) */
.saveimg{position:fixed;inset:0;width:min(420px, calc(100% - 32px));height:max-content;margin:auto;border-radius:16px;background:#fff}
.saveimg__box{display:grid;gap:12px;padding:16px;text-align:center}
.saveimg img{display:block;width:100%;height:auto;border-radius:8px}
.saveimg p{margin:0;font-size:15px;font-weight:600}

/* ---------- 공모전 개요 ----------
   PSD(MO·PC_공모전개요) 도형 값 기준. 내용 열 662(MO 59~721 · PC 629~1291). 위아래 간격은 글자 박스 기준으로 환산했다.
   MO 제목 Bold 38 · 소개 SemiBold 28 · 표 테두리 1 #122F89 r20, 행 63, 라벨 칸 181 #E9F4F8 · 단계 662x69 r25 간격 11(렌더링 비교로 상자 67 · 간격 13)
      번호 중심 45 · 글자 69 · 버튼 398x89 r44 Bold 42 · 푸터 선까지 52(시안 JPG)
   PC 제목 Bold 36 · 소개 SemiBold 24/28 · 표는 상자 없이 점선(#929292 50% = #C8C8C8, 4 긋고 4 띄움) + 라벨 형광펜
      단계 642x67(렌더링 비교로 상자 65 · 간격 12.5) · 번호 중심 43.5 · 글자 66 · 버튼 374x74 r37 Bold 40, 위 51 · 푸터 선까지 55(시안 JPG)
   지금 단계는 테두리 2 #2A63D6(바깥으로 1) + 번호·글자를 키운다
   MO 표 선은 1u(390 폭에서 0.5px)라 border 대신 box-shadow 로 긋는다. Chrome 은 1px 미만 border 를 1px 로 올려 그린다 */
.ov{max-width:calc(var(--wrap) + 118 * var(--u));margin:0 auto;padding:0 calc(59 * var(--u));color:#535353}
.ov__title{margin:calc(51 * var(--u)) 0 0;font-size:calc(38 * var(--u));font-weight:700;line-height:1.2;letter-spacing:-.025em;text-align:center;color:var(--ink)}
.ov__lead{margin:calc(32 * var(--u)) 0 0;font-size:calc(28 * var(--u));font-weight:600;line-height:1.2;text-align:center}
.ov-info{margin:calc(28 * var(--u)) 0 0;border-radius:calc(20 * var(--u));box-shadow:0 0 0 calc(1 * var(--u)) var(--navy);overflow:hidden}
.ov-info__row{display:grid;grid-template-columns:calc(181 * var(--u)) 1fr;min-height:calc(63 * var(--u))}
.ov-info__row + .ov-info__row > *{box-shadow:inset 0 calc(1 * var(--u)) 0 var(--navy)}
.ov-info dt{display:flex;align-items:center;justify-content:center;padding:calc(8 * var(--u));background:var(--soft);
  font-size:calc(28 * var(--u));font-weight:600;line-height:1.2;text-align:center;color:var(--ink)}
.ov-info dd{display:flex;align-items:center;margin:0;padding:calc(8 * var(--u)) calc(20 * var(--u)) calc(8 * var(--u)) calc(31 * var(--u));
  font-size:calc(25 * var(--u));line-height:1.3}
.ov__h{margin:calc(41 * var(--u)) 0 0;font-size:calc(33 * var(--u));font-weight:700;line-height:1.2;letter-spacing:-.005em;color:var(--ink)}
.ov-steps{display:grid;gap:calc(13 * var(--u));margin:calc(8 * var(--u)) 0 0;padding:0;list-style:none}
.ov-steps__item{position:relative;display:flex;align-items:center;min-height:calc(67 * var(--u));
  padding:calc(10 * var(--u)) calc(24 * var(--u)) calc(10 * var(--u)) calc(69 * var(--u));border-radius:calc(25 * var(--u));background:var(--soft);
  font-size:calc(25 * var(--u));line-height:1.2}
.ov-steps__item b{position:absolute;top:50%;left:calc(45 * var(--u));transform:translate(-50%,-50%);font-size:calc(28 * var(--u));font-weight:600;line-height:1;color:var(--blue)}
.ov-steps__item[aria-current]{box-shadow:0 0 0 calc(1 * var(--u)) var(--blue),inset 0 0 0 calc(1 * var(--u)) var(--blue);
  font-size:calc(28 * var(--u));font-weight:600;color:#393535}
.ov-steps__item[aria-current] b{font-size:calc(35 * var(--u))}
.ov__txt{margin:calc(17 * var(--u)) 0 0;font-size:calc(27 * var(--u));font-weight:500;line-height:1.3;letter-spacing:-.025em}
.ov__note{margin:calc(9 * var(--u)) 0 0;font-size:calc(23 * var(--u));line-height:1.3;color:var(--gray)}
.ov__go{display:flex;justify-content:center;margin:calc(46 * var(--u)) 0 0}
.ov__btn{display:inline-flex;align-items:center;justify-content:center;width:calc(398 * var(--u));max-width:100%;height:calc(89 * var(--u));
  border-radius:calc(44 * var(--u));background:linear-gradient(90deg,#13318B,#2A61D5);
  font-size:calc(42 * var(--u));font-weight:700;line-height:1;letter-spacing:-.005em;color:#fff;text-decoration:none}
@media (hover:hover){ .ov__btn:hover{filter:brightness(1.08)} }
.is-overview .ft{margin-top:calc(52 * var(--u))}
@media (min-width:1024px){
  .ov{max-width:calc(662 * var(--u));padding:0}
  .ov__title{margin-top:calc(63 * var(--u));font-size:calc(36 * var(--u))}
  .ov__lead{margin-top:calc(28 * var(--u));font-size:calc(24 * var(--u));line-height:calc(28 * var(--u))}
  /* 형광펜: 글자 위 8.5 는 비우고 아래로 4.5 더 칠한다. 값은 라벨 글자 윗선에 맞춰 올린다 */
  .ov-info{margin-top:calc(99 * var(--u));border-radius:0;box-shadow:none;overflow:visible}
  .ov-info__row{grid-template-columns:calc(159 * var(--u)) 1fr;align-items:start;min-height:0;padding:calc(29 * var(--u)) 0 calc(28 * var(--u))}
  .ov-info__row:first-child{padding-top:0}
  .ov-info__row:last-child{padding-bottom:0}
  .ov-info__row + .ov-info__row > *{box-shadow:none}
  .ov-info__row + .ov-info__row{
    background:repeating-linear-gradient(90deg,#C8C8C8 0 calc(4 * var(--u)),transparent 0 calc(8 * var(--u))) 0 0 / 100% calc(2 * var(--u)) no-repeat}
  .ov-info dt{justify-content:flex-start;padding:0;background:none;font-size:calc(25 * var(--u));line-height:1;text-align:left}
  .ov-info dt span{padding:0 calc(8 * var(--u)) calc(4.5 * var(--u)) calc(7 * var(--u));background:linear-gradient(transparent calc(8.5 * var(--u)),var(--soft) 0)}
  .ov-info dd{display:block;margin-top:calc(-3.5 * var(--u));padding:0;font-size:calc(24 * var(--u))}
  .ov__h{margin-top:calc(61 * var(--u));font-size:calc(36 * var(--u));letter-spacing:-.025em}
  .ov-steps{max-width:calc(642 * var(--u));gap:calc(12.5 * var(--u));margin-top:calc(26 * var(--u))}
  .ov-steps + .ov__h{margin-top:calc(53 * var(--u))}
  .ov-steps__item{min-height:calc(65 * var(--u));padding-left:calc(66 * var(--u));font-size:calc(24.3 * var(--u))}
  .ov-steps__item b{left:calc(43.5 * var(--u));font-size:calc(27.2 * var(--u))}
  .ov-steps__item[aria-current]{font-size:calc(27.2 * var(--u))}
  .ov-steps__item[aria-current] b{font-size:calc(33.9 * var(--u))}
  .ov__txt{margin-top:calc(19 * var(--u));font-size:calc(24 * var(--u))}
  .ov__note{margin-top:calc(6 * var(--u));font-size:calc(20 * var(--u))}
  /* 「국민투표 참여하기」는 11-04 수정 시안으로 줄였다: 374x74 Bold 40 → 296x63 Bold 31.4(가운데 줄·푸터 선 자리는 그대로).
     글자가 시안보다 2 높게 그려져 위 여백 3 */
  .ov__go{margin-top:calc(57 * var(--u))}
  .ov__btn{width:calc(296 * var(--u));height:calc(63 * var(--u));padding-top:calc(3 * var(--u));border-radius:calc(31.5 * var(--u));font-size:calc(31.4 * var(--u))}
  .is-overview .ft{margin-top:calc(61 * var(--u))}
}
/* 11-05 고객 피드백 3번(config app.overview_simple): 키비주얼 → 제목·소개 → 접수 → 최종 선정. 11-05 저녁 수정 PSD(MO·PC_공모전개요) 기준
   제목·소개는 위 .ov__title·.ov__lead 그대로. 점선은 662 폭 선 2 #929292 50%(= #C8C8C8, 4 긋고 4 띄움)
   MO 점선이 접수 위(소개 글자 아래 50)와 최종 선정 위(접수 값 글자 아래 33)에 있다. 라벨 Bold 33 #181818 은 값 위 줄에 두고
      글자보다 왼 10 · 오른 12 넓고 위 2 아래 5 내린 #E9F4F8 상자를 깐다. 값·설명 Medium 27 자간 -25, 라벨 글자 아래 28 · 푸터 선까지 73
   PC 접수는 한 줄(라벨 칸 107 · 값 Regular 23.8), 점선은 접수와 최종 선정 사이 하나(접수 글자 아래 47 · 최종 선정 글자 위 40).
      라벨 SemiBold 25 형광펜(11-04 PC 표와 같음), 설명 Medium 24 는 라벨 글자 아래 38 · 푸터 선까지 48 */
.ov--simple{--dot:repeating-linear-gradient(90deg,#C8C8C8 0 calc(4 * var(--u)),transparent 0 calc(8 * var(--u))) 0 0 / 100% calc(2 * var(--u)) no-repeat}
.ov--simple .ov-info{margin-top:calc(46 * var(--u));padding-top:calc(39 * var(--u));border-radius:0;box-shadow:none;overflow:visible;background:var(--dot)}
.ov--simple .ov-info__row{display:block;min-height:0}
.ov--simple .ov-info dt,.ov--simple .ov__h{display:block;padding:0;background:none;font-size:calc(33 * var(--u));font-weight:700;line-height:1;letter-spacing:-.005em;text-align:left;color:var(--ink)}
.ov--simple .ov-info dt span,.ov--simple .ov__h span{margin-left:-.27em;padding:0 .3em 0 .27em;background:linear-gradient(transparent .24em,var(--soft) 0 1.15em,transparent 0)}
.ov--simple .ov-info dd{display:block;margin:calc(23 * var(--u)) 0 0;padding:0;font-size:calc(27 * var(--u));font-weight:500;line-height:1.2;letter-spacing:-.025em}
.ov--simple .ov__h{margin-top:calc(33 * var(--u));padding-top:calc(37 * var(--u));background:var(--dot)}
.ov--simple .ov__txt{margin-top:calc(21 * var(--u));line-height:1.2}
.is-ov-simple .ft{margin-top:calc(68 * var(--u))}
@media (min-width:1024px){
  .ov--simple .ov-info{margin-top:calc(55 * var(--u));padding-top:0;background:none}
  .ov--simple .ov-info__row{display:grid;grid-template-columns:calc(107 * var(--u)) 1fr;align-items:start;padding:0}
  .ov--simple .ov-info dt,.ov--simple .ov__h{font-size:calc(25 * var(--u));font-weight:600;letter-spacing:-.01em}
  .ov--simple .ov-info dt span,.ov--simple .ov__h span{display:inline-block;margin-left:0;padding:0 calc(8 * var(--u)) calc(1.5 * var(--u)) calc(7 * var(--u));background:linear-gradient(transparent calc(8.5 * var(--u)),var(--soft) 0)}
  .ov--simple .ov-info dd{margin:0;font-size:calc(23.8 * var(--u));font-weight:400;letter-spacing:-.01em}
  .ov--simple .ov__h{margin-top:calc(41 * var(--u));padding-top:calc(40 * var(--u))}
  .ov--simple .ov__txt{margin-top:calc(33 * var(--u))}
  .is-ov-simple .ft{margin-top:calc(44 * var(--u))}
}
/* 11-06 고객 피드백 4번(config app.overview_invite, 간단 모드 안에서만): 접수·최종 선정 대신 투표 안내 두 묶음 + ※ 안내, 가운데 맞춤.
   11-06 수정 PSD(MO·PC_공모전개요) 글자 줄 실측. 점선은 위 .ov--simple 과 같고, 두 묶음 사이는 빈 줄 하나(줄 간격 1.2)
   MO 소개 글자 아래 52 점선 · 38 아래 Medium 26 자간 -25(줄 간격 31) · 마지막 줄 아래 33 점선 · 35 아래 ※ Medium 23 · 50 아래 푸터 선
   PC 소개 글자 아래 30 점선 · 36 아래 Medium 23 자간 -10(줄 간격 27.5) · 마지막 줄 아래 36 점선 · 31 아래 ※ Medium 21 · 36 아래 푸터 선 */
.ov-invite{margin-top:calc(46 * var(--u));padding-top:calc(37 * var(--u));background:var(--dot);text-align:center}
.ov-invite__txt,.ov-invite__note{margin:0;font-size:calc(26 * var(--u));font-weight:500;line-height:1.2;letter-spacing:-.025em}
.ov-invite__txt + .ov-invite__txt{margin-top:1.2em}
.ov-invite__note{margin-top:calc(28.5 * var(--u));padding-top:calc(34.5 * var(--u));background:var(--dot);font-size:calc(23 * var(--u));line-height:1.17}
.is-ov-invite .ft{margin-top:calc(44 * var(--u))}
@media (min-width:1024px){
  .ov-invite{margin-top:calc(25 * var(--u));padding-top:calc(34.5 * var(--u))}
  .ov-invite__txt,.ov-invite__note{font-size:calc(23 * var(--u));letter-spacing:-.01em}
  .ov-invite__note{margin-top:calc(30.5 * var(--u));padding-top:calc(29 * var(--u));font-size:calc(21 * var(--u));line-height:1.2}
  .is-ov-invite .ft{margin-top:calc(31 * var(--u))}
}


/* ---------- 문서 화면(개인정보 처리방침) ---------- */
.doc{max-width:calc(760px + var(--gutter) * 2);padding-top:28px;padding-bottom:56px}
.doc h1{margin:0 0 6px;font-size:24px;font-weight:800;line-height:1.35;letter-spacing:-.02em}
.doc__lead{margin:0 0 24px;color:var(--sub)}
.doc h2{margin:36px 0 10px;font-size:18px;font-weight:700;line-height:1.4;color:var(--navy)}
.doc h3{margin:18px 0 6px;font-size:15px;font-weight:700}
.doc p{margin:0 0 10px}
.doc ul,.doc ol{margin:0 0 10px;padding-left:1.3em}
.doc li{margin:2px 0}
.doc .summary{margin:0 0 8px;padding:18px 20px;border-radius:14px;background:var(--panel)}
.doc .summary dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.doc .summary dt{font-weight:700;color:var(--navy)}
.doc .summary dd{margin:0}
.doc .toc{margin:20px 0 0;padding:16px 20px;border:1px solid var(--line);border-radius:14px}
.doc .toc ol{margin:0;columns:1}
.doc .toc a{text-decoration:none;color:var(--ink-2)}
.doc .toc a:hover{text-decoration:underline}
.doc .tbl{overflow-x:auto;margin:0 0 10px}
.doc table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.doc th,.doc td{padding:9px 10px;border:1px solid var(--line);text-align:left;vertical-align:top}
.doc th{background:var(--panel);font-weight:700;white-space:nowrap}
.doc .note{font-size:14px;color:var(--sub)}
.doc code{padding:1px 5px;border-radius:4px;background:var(--panel);font-size:.92em}
@media (min-width:1024px){
  .doc{padding-top:48px;padding-bottom:80px}
  .doc h1{font-size:30px}
  .doc .toc ol{columns:2;column-gap:32px}
}

/* 개인정보 처리방침 창(로그인 시트의 안내 링크로 연다): 어두운 바탕 위 가운데 창, 머리(제목·닫기)는 두고 본문만 스크롤.
   본문은 /privacy 의 .doc 를 그대로 받아 위 문서 스타일을 쓰고, 여백만 창에 맞춘다. 닫기는 뷰어처럼 X 에 붙인 상자 + 넓힌 누름 범위 */
.docdlg{position:fixed;inset:0;width:min(760px, calc(100% - 32px));height:max-content;max-height:calc(100% - 40px);margin:auto;
  border-radius:16px;background:#fff;overflow:hidden}
.docdlg[open]{display:flex;flex-direction:column;animation:fade .18s ease-out}
.docdlg__hd{display:flex;align-items:center;gap:12px;flex:none;padding:16px 14px 14px 20px;border-bottom:1px solid var(--line)}
.docdlg__title{flex:1;min-width:0;margin:0;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.02em}
.docdlg__x{position:relative;flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:none;color:#626262;
  -webkit-tap-highlight-color:transparent}
.docdlg__x::before{content:"";position:absolute;inset:-8px}
.docdlg__x:active{background:rgba(0,0,0,.06)}
.docdlg__x svg{width:16px;height:16px}
.docdlg__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 20px 28px}
.docdlg__msg{margin:0;color:var(--sub)}
.docdlg .doc{max-width:none;padding:0}
.docdlg .doc [id]{scroll-margin-top:12px}
@media (min-width:1024px){
  .docdlg{max-height:min(calc(100% - 80px), 900px)}
  .docdlg__hd{padding:20px 20px 16px 28px}
  .docdlg__title{font-size:20px}
  .docdlg__body{padding:24px 28px 36px}
}