/* ===================================================================
   26년 개인통행 실태조사 참여 신청(사전조사) - 모바일 공통 스타일
   =================================================================== */
:root{
  --blue:#2f6fe4;
  --blue-dark:#1f57bd;
  --blue-soft:#eef4ff;
  --red:#d81f26;
  --ink:#171b26;
  --ink-2:#4b5563;
  --muted:#8b93a1;
  --line:#e5e8ee;
  --field:#cdd3de;
  --bg:#f4f6fa;
  --radius:12px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;height:100%}
body{
  background:#fff;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR",sans-serif;
  font-size:16px; line-height:1.6;
  overscroll-behavior-y:none;
}

/* ===== 앱 셸 : 화면 전체가 스크롤 + 하단 CTA 만 고정 =====
 * 스크롤 주체를 main 이 아니라 .app 으로 두어 상단 헤더도 함께 스크롤됩니다.
 * 하단 CTA 는 position:sticky 로 화면 아래에 계속 붙어 있습니다. */
.app{
  display:flex; flex-direction:column;
  height:100dvh; height:100vh;
  width:100%; max-width:480px; margin:0 auto;
  background:#fff; position:relative;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
}
@supports (height:100dvh){ .app{height:100dvh} }

/* 데스크톱에서 볼 때만 기기 프레임 */
@media (min-width:600px){
  body{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px 0}
  .app{
    max-width:420px; height:min(880px, calc(100vh - 48px));
    border-radius:26px; overflow-y:auto; overflow-x:hidden;
    box-shadow:0 18px 50px rgba(20,30,60,.18);
    border:1px solid #e2e6ee;
  }
}

/* ===== 헤더 ===== */
header.top{
  flex:0 0 auto;
  background:var(--blue); color:#fff;
  padding:calc(env(safe-area-inset-top, 0px) + 13px) 12px 13px;
  display:flex; align-items:center; gap:6px;
  position:relative; z-index:5;
}
header.top h1{
  flex:1; margin:0; text-align:center;
  font-size:16px; font-weight:700; letter-spacing:-.4px;
}
header.top .nav{
  flex:0 0 40px; height:40px; border:0; background:none; color:#fff;
  font-size:26px; line-height:1; cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0;
}
header.top .nav:active{background:rgba(255,255,255,.18)}
header.top .nav.ghost{visibility:hidden}

.progress{flex:0 0 auto;height:3px;background:#d6e1f6}
.progress > i{display:block;height:100%;background:var(--red);width:0;transition:width .3s ease}

/* ===== form 래핑 대응 =====
 * <main> 과 <div class="cta"> 를 <form> 으로 감싸면 form 이 .app 의 flex 자식이 되어
 * 하단 CTA 고정이 풀립니다. form 자체를 세로 flex 컨테이너로 만들어 레이아웃을 유지합니다.
 */
.app > form{
  display:flex; flex-direction:column;
  flex:1 1 auto; min-height:0; width:100%;
}
/* form 이 .app 바깥(body 바로 아래)을 감싸는 경우 */
body > form{display:contents}

/* ===== 본문 =====
 * 스크롤은 .app 이 담당합니다. main 은 남는 공간을 채우기만 하며(flex:1 0 auto)
 * 그래야 내용이 짧을 때도 문의처가 화면 바닥에 놓입니다. */
main{
  flex:1 0 auto; min-height:0;
  overflow:visible;
  padding:0 0 8px;
}
/* 문의처 위치 규칙은 footer.asp 안에 함께 들어 있습니다 (배포 상태와 무관하게 동작) */
.pad{padding:0 20px}
.stepno{
  margin:16px 20px 0; font-size:13px; color:var(--blue); font-weight:700; letter-spacing:.2px;
}
h2.title{
  margin:6px 20px 8px;
  font-size:23px; font-weight:800; line-height:1.35; letter-spacing:-.7px;
}
h2.title.center{text-align:center}
h2.title em{font-style:normal;color:var(--blue)}
p.lead{margin:0 20px 20px;color:var(--ink-2);font-size:15px;line-height:1.65}
p.lead.center{text-align:center}

/* ===== 문서 전체가 스크롤되는 페이지 (내부 스크롤 없이 길게) =====
 * intro 처럼 배너 한 장을 끝까지 보여 주는 화면에 사용합니다.
 *   <body class="flowpage"> + <div class="app flow">
 * 본문에 별도 스크롤 영역을 두지 않고 브라우저 기본 스크롤을 쓰며,
 * 하단 CTA 는 position:sticky 로 화면 아래에 떠 있습니다.
 */
body.flowpage{ display:block; height:auto; }
.app.flow{ height:auto; min-height:100dvh; overflow:visible; }
.app.flow main{
  flex:0 0 auto; min-height:0;
  overflow:visible;              /* 내부 스크롤 해제 */
  padding-bottom:0;
}
/* 하단 CTA 플로팅
 * position:sticky 는 문서 흐름에서 자리를 그대로 차지하므로
 * 본문을 가리지 않으면서(= padding 보정 불필요) 스크롤 중에는 화면 아래에 떠 있고,
 * 문서 끝에서는 이미지 바로 아래 제자리에 놓입니다. */
.app.flow .cta{
  position:-webkit-sticky; position:sticky;
  bottom:0; z-index:20;
  background:#fff;
  border-top:1px solid var(--line);
  padding-top:10px;
  box-shadow:0 -6px 18px rgba(16,22,38,.10);
}
/* PC(600px 이상) 에서는 다른 페이지와 같은 '기기 카드' 로 보여 줍니다.
 * 카드 자체가 화면에 꽉 차 있고 본문만 안에서 스크롤되므로
 * CTA 는 sticky 없이도 카드 하단에 붙어 있고, overflow:hidden 으로 모서리도 유지됩니다.
 * (모바일에서는 위의 sticky 가 그대로 동작합니다) */
@media (min-width:600px){
  body.flowpage{
    padding:24px 0; min-height:100vh;
    display:flex; align-items:center; justify-content:center;
  }
  .app.flow{
    height:min(880px, calc(100vh - 48px));
    min-height:0;                /* 모바일용 min-height:100dvh 해제 (안 그러면 카드가 넘침) */
    max-width:420px; margin:0 auto;
    border-radius:26px; overflow:hidden;
  }
  .app.flow main{
    flex:1 1 auto; min-height:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .app.flow .cta{
    position:static;             /* 카드 높이가 고정이라 sticky 가 필요 없음 */
    box-shadow:none;
  }
}

/* ===== intro 안내 배너 이미지 ===== */
.introImg{
  display:block; width:100%; height:auto;   /* 좌우 여백 없이 꽉 채움 */
  max-width:100%; border:0; vertical-align:top;
}

/* ===== intro 히어로 / 경품 카드 ===== */
.hero{
  margin:4px 20px 18px; border-radius:16px;
  background:linear-gradient(135deg,#3a78ef,#7ba4f8); color:#fff;
  padding:20px 18px; text-align:center;
}
.hero .k{font-size:13.5px;opacity:.94}
.hero .v{font-size:22px;font-weight:800;margin-top:3px;letter-spacing:-.5px}

.secTitle{margin:22px 20px 10px;font-size:15px;font-weight:800;letter-spacing:-.3px}
.prizeList{margin:0 20px 20px;display:flex;flex-direction:column;gap:8px}
.prizeItem{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; background:#fff;
}
.prizeItem .rk{
  flex:0 0 40px; height:26px; border-radius:13px;
  background:var(--blue-soft); color:var(--blue);
  font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.prizeItem .nm{flex:1;font-size:14px;line-height:1.55;color:var(--ink)}
.prizeItem .nm small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.prizeItem .cnt{flex:0 0 auto;font-size:13px;color:var(--ink-2);white-space:nowrap;padding-top:3px}

.notice{
  margin:0 20px 20px; padding:16px; border-radius:var(--radius);
  background:#f7f8fb; color:#5a6274; font-size:12.5px; line-height:1.8; text-align:center;
}

/* ===== 질문 블록 ===== */
.qbox{margin:0 20px 22px}
.qbox > .qh{
  font-size:17.5px; font-weight:700; letter-spacing:-.3px;
  margin-bottom:10px; line-height:1.45;
}
.qbox > .qh .sub{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:2px}
.qbox.card{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 14px; background:#fff;
}
.helper{margin:8px 20px 18px;font-size:13px;color:var(--muted);line-height:1.6}
.guide{
  margin:14px 20px 18px; background:var(--blue-soft); border-radius:var(--radius);
  padding:13px 14px; font-size:13.5px; color:#2a4d8f; line-height:1.6;
}
.desc{
  margin:0 20px 14px; background:#f7f8fb; border-radius:var(--radius);
  padding:15px; font-size:14px; color:var(--ink-2); line-height:1.7;
}
.desc b{display:block;color:var(--ink);margin-top:8px;font-size:15px}
.desc small{display:block;color:var(--muted);font-size:12.5px;margin-top:8px;line-height:1.7}

/* ===== 입력 요소 (iOS 자동확대 방지 : 16px 이상) ===== */
select,input[type=text],input[type=tel],input[type=number]{
  width:100%; height:54px; padding:0 14px; font-size:16px;
  border:1.5px solid var(--field); border-radius:var(--radius);
  background:#fff; color:var(--ink); font-family:inherit;
  appearance:none; -webkit-appearance:none;
}
select{
  padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236b7280' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,111,228,.14)}
select:disabled,input:disabled{background:#f1f2f5;color:#a8aebb;border-color:#e3e6ec}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px;align-items:center}
.row > *{flex:1}
.row .dash{flex:0 0 auto;color:var(--muted)}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:nowrap}
.inline .unit{flex:0 0 auto;color:var(--ink-2);font-size:15px;white-space:nowrap}
/* 연도처럼 짧은 숫자 입력란은 폭을 고정해 옆 요소가 밀려나지 않게 */
.inline input.yearInput{flex:0 0 112px;width:112px;min-width:0}

/* 출생연도 → 연 나이 표시 ('년생' 옆에 나란히 놓이는 알약 형태) */
.inline input{ min-width:0; }              /* 나이 표시가 들어와도 입력란이 줄어들도록 */
.ageInfo{ display:none; }
.ageInfo.on{
  display:inline-flex; align-items:center; flex:0 0 auto;
  white-space:nowrap;
  background:var(--blue-soft); color:#2a4d8f;
  border-radius:999px; padding:8px 12px;
  font-size:13.5px; line-height:1;
  animation:seqIn .18s ease-out;
}
.ageInfo b{ color:var(--blue); font-weight:800; font-size:14.5px; margin-left:4px; }

/* ===== 선택지 카드 ===== */
label.opt{
  display:flex; align-items:center; gap:12px;
  border:1.5px solid var(--field); border-radius:var(--radius);
  padding:15px 14px; margin-bottom:10px; cursor:pointer;
  font-size:15.5px; line-height:1.45; background:#fff;
  transition:border-color .15s, background-color .15s;
  min-height:56px;
}
label.opt:last-child{margin-bottom:0}
label.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
label.opt:focus-within{outline:2px solid var(--blue);outline-offset:2px}
label.opt .mark{
  flex:0 0 22px; width:22px; height:22px; border-radius:50%;
  border:2px solid #c3cad6; background:#fff; position:relative;
  transition:border-color .15s;
}
label.opt .txt{flex:1}
label.opt .txt small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5}
label.opt:active{background:#f5f7fb}
label.opt.sel{border-color:var(--blue);background:var(--blue-soft)}
label.opt.sel .mark{border-color:var(--blue)}
label.opt.sel .mark::after{
  content:''; position:absolute; inset:4px; border-radius:50%; background:var(--blue);
}
label.opt.sel .txt{font-weight:700}

/* ===== 세그먼트 (성별) ===== */
.seg{display:flex;gap:8px}
.seg label{
  flex:1; position:relative; display:flex; align-items:center; justify-content:center;
  height:56px; border:1.5px solid var(--field); border-radius:var(--radius);
  font-size:16px; cursor:pointer; background:#fff; transition:all .15s;
}
.seg label input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg label:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.seg label:active{background:#f5f7fb}
.seg label.sel{border-color:var(--blue);background:var(--blue);color:#fff;font-weight:700}

/* ===== 문항 순차 제시 =====
 * 앞 문항에 응답하면 다음 문항이 나타납니다.
 *   <div class="qbox seq" id="...">  또는  <div class="seq">…</div>
 * JS 에서 seqShow(el) / seqHide(el) 로 제어합니다.
 */
.seq{ display:none; }
.seq.on{ display:block; animation:seqIn .28s ease-out; }
@keyframes seqIn{
  from{ opacity:0; transform:translateY(10px) }
  to{ opacity:1; transform:none }
}
@media (prefers-reduced-motion:reduce){
  .seq.on{ animation:none }
}

/* 안내 박스 (비동의 시 제시 문구 등) */
.warnBox{ display:none; margin:0 20px 22px; padding:15px; border-radius:var(--radius);
  background:#fdf1f1; color:#a33; font-size:14px; line-height:1.75; }
.warnBox.on{ display:block; animation:seqIn .2s ease-out; }

/* ===== 오류 ===== */
.err{
  color:var(--red); font-size:13.5px; margin:0 20px 14px; display:none;
  background:#fdf1f1; border-radius:10px; padding:11px 13px; line-height:1.5;
}
.err.on{display:block}

/* ===== 하단 고정 CTA ===== */
.cta{
  flex:0 0 auto; padding:10px 20px calc(10px + var(--safe-b));
  background:#fff; border-top:1px solid var(--line);
  position:-webkit-sticky; position:sticky; bottom:0; z-index:10;
}
.btn{
  display:block; width:100%; height:56px; border:0; border-radius:var(--radius);
  background:var(--red); color:#fff; font-size:17px; font-weight:700;
  cursor:pointer; font-family:inherit; letter-spacing:-.3px;
}
.btn.blue{background:var(--blue)}
.btn.gray{background:#eceff4;color:#4b5563}
.btn:active{filter:brightness(.94)}
.btn + .btn{margin-top:8px}
.linkbtn{
  display:block; width:100%; margin:0 0 12px; padding:12px;
  color:var(--blue); font-size:14.5px; text-decoration:underline;
  background:none; border:0; cursor:pointer; font-family:inherit; text-align:center;
}

/* 안내 링크 2개를 나란히 배치 (설문 조사 안내(상세) / 경품 추첨 안내) */
.linkrow{
  display:flex; align-items:stretch;
  margin:0 0 12px;
}
.linkrow .linkbtn{
  flex:1 1 0; min-width:0;            /* 좌우 균등 분할 */
  margin:0; padding:11px 6px;
  font-size:14px; line-height:1.35;
  word-break:keep-all;                /* 어절 단위 줄바꿈 */
}
.linkrow .linkbtn + .linkbtn{
  border-left:1px solid var(--line);  /* 가운데 구분선 */
}
.linkrow .linkbtn:active{ background:#f5f7fb; border-radius:8px; }
@media (max-width:359px){
  .linkrow .linkbtn{ font-size:13px; padding:11px 4px; }
}

footer.contact{margin:6px 20px 24px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.9}

/* 하단 고정 영역(.cta) 안에 놓인 문의 안내 : 여백을 줄이고 구분선을 얇게 */
.cta > footer.contact{
  margin:0 0 10px; padding-top:2px;
  font-size:12px; line-height:1.75;
}
footer.contact a{color:var(--blue);text-decoration:none}

/* ===== 완료 / 안내 화면 ===== */
.done{padding:44px 24px 24px;text-align:center}
.done .icon{
  width:66px;height:66px;border-radius:50%;margin:0 auto 18px;
  background:var(--blue-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:32px;
}
.done .icon.warn{background:#fdf1f1;color:var(--red)}
.done h3{font-size:21px;margin:0 0 12px;line-height:1.45;letter-spacing:-.5px}
.done p{color:var(--ink-2);font-size:14.5px;margin:0;line-height:1.7}
.done p + p{margin-top:14px}
hr.sep{border:0;border-top:1px solid var(--line);margin:24px 20px}

/* ===== 바텀시트 팝업 ===== */
.dim{
  position:fixed; inset:0; background:rgba(15,20,35,.5);
  display:none; align-items:flex-end; justify-content:center; z-index:100;
}
.dim.on{display:flex}
.sheet{
  width:100%; max-width:480px; background:#fff;
  border-radius:18px 18px 0 0; padding:24px 22px calc(20px + var(--safe-b));
  text-align:center; animation:up .22s ease-out;
}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet .msg{font-size:15.5px;line-height:1.65;white-space:pre-line;color:var(--ink);margin-bottom:18px}
.sheet > button{
  width:100%; height:52px; border:0; border-radius:var(--radius);
  background:var(--blue); color:#fff; font-size:16px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
/* PC : 화면 기준(position:fixed)을 유지하고 가운데 다이얼로그로 표시.
   예전처럼 .dim 을 absolute 로 두면 기준이 .app 박스가 되어,
   intro 처럼 문서가 긴 페이지에서 시트 높이(88%)가 문서 길이 기준으로 계산되어
   모달이 화면 위로 넘쳐 올라갑니다. */
@media (min-width:600px){
  .dim{ align-items:center; padding:24px; }
  .sheet{
    max-width:420px; border-radius:18px;
    padding-bottom:20px;
    animation:pop .18s ease-out;
  }
  .sheet.tall{ height:auto; max-height:80vh; padding-bottom:0; }
  .sheet .sheetFoot{ padding-bottom:14px; }
}
@keyframes pop{
  from{ transform:scale(.96); opacity:0 }
  to{ transform:scale(1); opacity:1 }
}

/* 큰 바텀시트 (설문조사 안내 모달) */
.sheet.tall{
  display:flex; flex-direction:column; text-align:left;
  padding:0; max-height:88%; height:88%;
}
.sheet .grip{
  flex:0 0 auto; width:40px; height:4px; border-radius:2px;
  background:#d7dce5; margin:10px auto 2px;
}
.sheet .sheetHead{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:10px 8px 12px 20px; border-bottom:1px solid var(--line);
}
.sheet .sheetHead strong{flex:1;font-size:17px;letter-spacing:-.3px}
.sheet .sheetHead .x{
  flex:0 0 40px; width:40px; height:40px; border:0; background:none;
  font-size:26px; line-height:1; color:#8b93a1; cursor:pointer; border-radius:50%;
}
.sheet .sheetHead .x:active{background:#f1f3f7}
.sheet .sheetBody{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:4px 20px 8px; overscroll-behavior:contain;
}
.sheet .sheetFoot{
  flex:0 0 auto; padding:12px 20px calc(12px + var(--safe-b));
  border-top:1px solid var(--line);
}
.sheet .sheetFoot button{
  width:100%; height:52px; border:0; border-radius:var(--radius);
  background:var(--blue); color:#fff; font-size:16px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
.guideLead{
  margin:18px 0 4px; text-align:center; font-size:18px; font-weight:800;
  letter-spacing:-.4px; line-height:1.45;
}
body.noscroll{overflow:hidden}
body.noscroll .app{overflow:hidden}   /* 스크롤 주체가 .app 이므로 함께 잠금 */

/* ===== 안내 페이지(guidewin) 본문 ===== */
.mb{padding:4px 20px 20px}
:is(.mb,.sheetBody) .qa{border-bottom:1px solid var(--line);padding:18px 0}
:is(.mb,.sheetBody) .qa:last-child{border-bottom:0}
:is(.mb,.sheetBody) h4{margin:0 0 7px;font-size:16px;color:var(--ink);letter-spacing:-.3px}
:is(.mb,.sheetBody) p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.7}
:is(.mb,.sheetBody) .hl{color:var(--blue);font-weight:700}

/* 안내 본문 서식
 * 모달(.sheetBody) 과 단독 페이지(.mb) 양쪽에 동일하게 적용됩니다. */
:is(.mb,.sheetBody) p.note{
  margin-top:10px; padding:11px 12px; border-radius:10px;
  background:#f7f8fb; color:#5b6474; font-size:13.5px; line-height:1.65;
}
:is(.mb,.sheetBody) ul.gl{ margin:8px 0 0; padding-left:18px; }
:is(.mb,.sheetBody) ul.gl li{
  font-size:14.5px; color:var(--ink-2); line-height:1.7; margin-top:5px;
}
:is(.mb,.sheetBody) ul.gl li b{ color:var(--ink); font-weight:700; }
:is(.mb,.sheetBody) ul.gl li a{ color:var(--blue); text-decoration:none; }
:is(.mb,.sheetBody) ul.gl li .muted{ display:block; color:var(--muted); font-size:13px; margin-top:1px; }

:is(.mb,.sheetBody) ol.steps{ list-style:none; margin:12px 0 0; padding:0; counter-reset:st; }
:is(.mb,.sheetBody) ol.steps li{
  position:relative; padding-left:34px; margin-top:14px; counter-increment:st;
}
:is(.mb,.sheetBody) ol.steps li:first-child{ margin-top:0; }
:is(.mb,.sheetBody) ol.steps li::before{
  content:counter(st);
  position:absolute; left:0; top:0;
  width:24px; height:24px; border-radius:50%;
  background:var(--blue); color:#fff;
  font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
:is(.mb,.sheetBody) ol.steps li b{ display:block; font-size:15px; color:var(--ink); line-height:1.5; }
:is(.mb,.sheetBody) ol.steps li span{
  display:block; font-size:13.5px; color:var(--ink-2); line-height:1.6; margin-top:2px;
}

:is(.mb,.sheetBody) .callout{
  margin-top:10px; padding:16px; border-radius:12px;
  background:var(--blue-soft); text-align:center;
}
:is(.mb,.sheetBody) .callout .k{ font-size:13.5px; color:#41609b; }
:is(.mb,.sheetBody) .callout .v{
  font-size:20px; font-weight:800; color:var(--blue);
  margin-top:3px; letter-spacing:-.5px;
}
:is(.mb,.sheetBody) .callout .s{ font-size:12.5px; color:#6b7c9c; margin-top:5px; word-break:keep-all; line-height:1.55; }

/* 번호가 붙은 섹션 제목 : <h4><span class="no">1</span>제목</h4> */
:is(.mb,.sheetBody) h4 .no{
  display:inline-flex; align-items:center; justify-content:center;
  width:21px; height:21px; margin-right:7px; border-radius:6px;
  background:var(--blue); color:#fff;
  font-size:12.5px; font-weight:800; vertical-align:1px;
}

/* 하위 주의사항 목록 (* 표시) */
:is(.mb,.sheetBody) ul.gl ul.sub{ margin:7px 0 0; padding-left:0; list-style:none; }
:is(.mb,.sheetBody) ul.gl ul.sub li{
  position:relative; padding-left:13px; margin-top:4px;
  font-size:13.5px; color:#5b6474; line-height:1.6;
}
:is(.mb,.sheetBody) ul.gl ul.sub li::before{
  content:'*'; position:absolute; left:0; top:1px; color:var(--muted);
}

/* 도식 (응모번호 / 행운번호) */
:is(.mb,.sheetBody) .dgm{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.dgm .card{ border:1px solid var(--line); border-radius:12px; padding:14px 12px; background:#fbfcfe; }
.dgm .card > .t{
  font-size:14.5px; font-weight:800; color:var(--blue);
  text-align:center; margin-bottom:11px; letter-spacing:-.3px;
}
.dgm .card > .t small{
  display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:2px;
}
.dgm .kv{
  display:flex; gap:8px; align-items:center; justify-content:center;
  flex-wrap:wrap; font-size:15px; color:var(--ink);
}
.dgm .kv .lbl{ color:var(--ink-2); font-size:13px; }
.dgm .num{ font-variant-numeric:tabular-nums; letter-spacing:.3px; font-weight:700; }
.dgm .num em{
  font-style:normal; background:#ffeaea; color:#c62828;
  border-radius:4px; padding:1px 3px;
}
.dgm .arrow{ text-align:center; color:#a9b2c1; font-size:15px; margin:9px 0 7px; line-height:1; }
.dgm .out{ display:flex; align-items:center; justify-content:center; gap:8px; }
.dgm .out .lbl{
  background:var(--blue-soft); color:var(--blue);
  font-size:12.5px; font-weight:700; border-radius:6px; padding:6px 9px; white-space:nowrap;
}
.dgm .out .v{
  background:var(--blue); color:#fff;
  font-size:17px; font-weight:800; border-radius:6px; padding:6px 14px; letter-spacing:2px;
}
.dgm .idx{ display:flex; gap:8px; }
.dgm .idx > div{
  flex:1; min-width:0; text-align:center;
  border:1px solid var(--line); border-radius:8px; padding:9px 6px; background:#fff;
}
.dgm .idx .n{ font-size:11.5px; color:var(--ink-2); line-height:1.4; word-break:keep-all; }
.dgm .idx .v{ font-size:15px; font-weight:700; margin-top:4px; }

/* ===== 테스트용 ===== */
.dev{margin:0 20px 28px;font-size:12px;color:#b3b9c4;text-align:center}
.dev button{background:none;border:0;color:#b3b9c4;text-decoration:underline;cursor:pointer;font-family:inherit;font-size:12px}
pre#dump{display:none;text-align:left;background:#f7f8fb;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:11.5px;overflow:auto;color:#4b5563;margin-top:10px}


/* ===== 화면 밀도 압축 =====
 * 선택란·입력란 높이와 문항 사이 여백을 줄여 가능한 한 스크롤 없이 한 화면에 담습니다.
 * 터치 영역 48px 이상, 입력 글자 16px 이상(iOS 자동확대 방지)은 유지합니다. */
h2.title:empty{ display:none; }          /* 내용을 주석 처리한 제목이 여백만 차지하지 않도록 */
.stepno{ margin-top:12px; }
p.lead{ margin-bottom:14px; }
.qbox{ margin-bottom:14px; }
.qbox > .qh{ margin-bottom:8px; }
.stack{ gap:8px; }
select,input[type=text],input[type=tel],input[type=number]{ height:48px; }
.seg label{ height:48px; }
label.opt{ padding:9px 14px; margin-bottom:7px; min-height:48px; }
label.opt .txt small{ margin-top:2px; }
.qbox.card{ padding:14px; }
.hero{ margin:2px 20px 14px; padding:15px 16px; }
main{ padding-bottom:4px; }
footer.contact{ margin:4px 20px 12px; }
.cta{ padding-top:8px; padding-bottom:calc(8px + var(--safe-b)); }
.btn{ height:52px; }