@charset "UTF-8";
/* =========================================================
   빅데이터통계서비스 퀴즈 이벤트 & 개선의견 설문 — 시안 B
   - 남색 안내 패널 + 흰 카드, 포인트 색: 민트
   - 페이지 배경: images/bg-survey.jpg (1920×4580 기준, --sv-page-bg 에서 교체 가능)
   - 토큰 구조: Primitive → Semantic
   - 폰트: 페이퍼로지 Regular / SemiBold (fonts/ 폴더)
   ========================================================= */

/* ---------- 1. 웹폰트 : 페이퍼로지(Paperlogy) ---------- */
@font-face {
  font-family: 'Paperlogy'; font-weight: 100 500; font-style: normal; font-display: swap;
  src: url('../fonts/Paperlogy-4Regular.woff') format('woff');
}
@font-face {
  font-family: 'Paperlogy'; font-weight: 600 900; font-style: normal; font-display: swap;
  src: url('../fonts/Paperlogy-6SemiBold.woff') format('woff');
}

/* ---------- 2. 디자인 토큰 ---------- */
:root {
  /* Primitive */
  --navy-70: #1B2E86;
  --navy-80: #12216A;
  --navy-90: #0B1650;
  --mint-10: #E3FAF5;
  --mint-30: #7FEBD6;
  --mint-40: #3FDDC0;
  --mint-70: #00806C;   /* 흰 바탕 텍스트용(4.5:1 이상) */
  --gray-0: #FFFFFF;
  --gray-5: #F5F7FA;
  --gray-10: #E8ECF2;
  --gray-20: #D3D9E3;
  --gray-40: #9AA3B0;
  --gray-50: #7F8A99;
  --gray-70: #474F5C;
  --gray-90: #1B2029;
  --red-5: #FFF0EC;
  --red-60: #C42E10;
  --red-80: #8A1F0A;
  --amber-5: #FFF8E1;
  --amber-60: #C78A00;
  --amber-90: #5C3D00;

  /* Semantic */
  --sv-page-bg: url('../images/bg-survey.jpg') center top / 100% auto no-repeat, #E9F0F9;  /* 1920×4580 기준 배경 + 아래 이어지는 바탕색 */
  --color-text-primary: var(--gray-90);
  --color-text-secondary: var(--gray-70);
  --color-text-inverse: var(--gray-0);
  --color-text-inverse-sub: #C8D2F5;
  --color-text-accent: var(--mint-70);
  --color-bg-hero: var(--navy-80);
  --color-bg-card: var(--gray-0);
  --color-border: var(--gray-20);
  --color-border-input: var(--gray-50);
  --color-action-primary: var(--navy-80);
  --color-action-primary-hover: var(--navy-90);
  --color-check: var(--mint-70);
  --color-check-border: var(--gray-40);
  --color-danger: var(--red-60);
  --color-focus: var(--navy-70);
  --color-focus-on-dark: var(--mint-30);

  /* Typography */
  --font-base: 'Paperlogy', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --fs-title: 3rem;      /* 48 */
  --fs-h2: 1.375rem;     /* 22 */
  --fs-q: 1.125rem;      /* 18 */
  --fs-body: 1rem;       /* 16 */
  --fs-sm: 0.9375rem;    /* 15 */
  --fs-xs: 0.875rem;     /* 14 */

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 10px 30px rgba(11, 22, 80, 0.14);

  /* Size */
  --control-h: 48px;
  --num-size: 36px;
  --content-w: 960px;
}

/* ---------- 3. 기본 ---------- */
.survey, .survey *, .survey *::before, .survey *::after { box-sizing: border-box; }
body { margin: 0; background: #E9F0F9; }

.survey {
  position: relative;
  min-height: 100vh;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-primary);
  word-break: keep-all;
  overflow-wrap: break-word;
  background: var(--sv-page-bg);
}
.survey p, .survey h1, .survey h2, .survey dl, .survey dd, .survey ul { margin: 0; }
.survey [hidden] { display: none !important; }

.survey a:focus-visible, .survey button:focus-visible,
.survey input:focus-visible, .survey textarea:focus-visible, .survey [tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.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;
}

.sv-inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6) var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.sv-form-wrap, .sv-form { display: flex; flex-direction: column; gap: var(--sp-6); }

/* ---------- 4. 상단 안내 패널 ---------- */
.sv-hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-12) var(--sp-12) var(--sp-8);
  border-radius: var(--radius-lg);
  color: var(--color-text-inverse);
  background-color: var(--color-bg-hero);
  background-image:
    radial-gradient(circle at 92% 8%, rgba(63, 221, 192, 0.35) 0, rgba(63, 221, 192, 0) 260px),
    radial-gradient(circle at 0% 100%, rgba(80, 120, 255, 0.45) 0, rgba(80, 120, 255, 0) 340px);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.sv-hero a:focus-visible { outline-color: var(--color-focus-on-dark); }
.sv-hero__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.sv-hero__text { display: flex; flex-direction: column; gap: var(--sp-4); }
.sv-hero__badge {
  align-self: flex-start;
  padding: 6px 16px;
  background: var(--mint-40);
  color: var(--navy-90);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.sv-hero__title {
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.sv-hero__lead { color: var(--color-text-inverse-sub); font-size: 1.0625rem; }
.sv-hero__lead strong { color: var(--mint-30); font-weight: 700; }
.sv-hero__illust {
  flex-shrink: 0;
  width: 240px;
  height: auto;
  padding: var(--sp-4);
  background: var(--gray-0);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.08);
}

.sv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.sv-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
}
.sv-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: var(--mint-40);
  color: var(--navy-90);
}
.sv-stat dt { font-size: var(--fs-xs); font-weight: 700; color: var(--mint-30); }
.sv-stat dd { font-size: 1rem; font-weight: 600; line-height: 1.45; }
.sv-hero__note { font-size: var(--fs-xs); color: var(--color-text-inverse-sub); }

/* ---------- 5. 카드 공통 ---------- */
.sv-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-10) var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.sv-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-bottom: var(--sp-5);
  border-bottom: 2px solid var(--navy-80);
}
.sv-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy-90);
}
.sv-card__tag {
  padding: 2px 12px;
  background: var(--mint-10);
  color: var(--mint-70);
  border: 1px solid var(--mint-40);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sv-card__desc { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.sv-req { color: var(--color-danger); font-weight: 700; }
.sv-opt-text { color: var(--color-text-secondary); font-size: var(--fs-xs); font-weight: 400; }

/* ---------- 6. 문항 ---------- */
.q-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 0 0 var(--sp-6) calc(var(--num-size) + var(--sp-4));
  border-bottom: 1px solid var(--gray-10);
}
.q-card:last-child { padding-bottom: 0; border-bottom: 0; }
.q-card--plain { padding-left: 0; border-bottom: 0; padding-bottom: 0; }

.q { margin: 0; padding: 0; border: 0; min-width: 0; }
.q__title {
  display: block;
  padding: 0;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-q);
  font-weight: 700;
  line-height: 1.5;
  min-height: var(--num-size);
  padding-top: 5px;
}
.q-card > .q__title { margin-bottom: 0; }
.q__title--sm { min-height: 0; padding-top: 0; font-size: var(--fs-body); }
.q__no {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--num-size);
  height: var(--num-size);
  border-radius: 50%;
  background: var(--navy-80);
  color: var(--color-text-inverse);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
}
.q__no--quiz { background: var(--mint-40); color: var(--navy-90); }
.q__help { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.q .q__help { margin: calc(var(--sp-2) * -1) 0 var(--sp-3); }

/* 보기 : 네모 박스 + 체크 표시 나열형 */
.opt-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-10); }
.opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: 0 var(--sp-1);
  font-size: 1.0625rem;
  cursor: pointer;
}
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opt__box {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--gray-0);
  border: 1.5px solid var(--color-check-border);
  border-radius: 3px;
  transition: border-color .15s;
}
.opt__box::after {
  content: "";
  position: absolute;
  left: -2px;
  top: -10px;
  width: 30px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cpath d='M4 14.5l7 7.5L27 3' fill='none' stroke='%2300806C' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0;
  transform: scale(.6);
  transform-origin: 40% 80%;
  transition: opacity .15s, transform .15s;
}
.opt:hover .opt__box { border-color: var(--navy-70); }
.opt input:checked + .opt__box { border-color: var(--color-check); }
.opt input:checked + .opt__box::after { opacity: 1; transform: scale(1); }
.opt input:checked ~ .opt__txt { color: var(--navy-90); font-weight: 600; text-decoration: underline; text-decoration-color: var(--mint-40); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.opt input:focus-visible + .opt__box { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.opt__num { margin-right: 2px; }

/* 조건부 서술형 */
.reason {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--mint-10);
  border-radius: var(--radius-md);
}
.reason__label { font-size: var(--fs-sm); font-weight: 700; }

/* 입력 */
.sv-textarea, .sv-input {
  width: 100%;
  padding: var(--sp-3) 14px;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  background: var(--gray-0);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
}
.sv-textarea { resize: vertical; min-height: 72px; }
.sv-input { height: var(--control-h); }
.sv-textarea[aria-invalid="true"], .sv-input[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0 1px var(--color-danger);
}
.counter { flex-shrink: 0; margin-left: auto; font-size: var(--fs-xs); color: var(--color-text-secondary); }
.counter--end { align-self: flex-end; margin-top: calc(var(--sp-1) * -1); }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-weight: 700; }
.field__help { font-size: var(--fs-xs); color: var(--color-text-secondary); }

/* 오류 */

/* ---------- 7. 개인정보 ---------- */
.sv-table-wrap { overflow-x: auto; border-top: 1px solid var(--navy-80); }
.sv-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--fs-sm); }
.sv-table th, .sv-table td { padding: 14px var(--sp-4); text-align: center; border-bottom: 1px solid var(--color-border); }
.sv-table thead th { background: var(--gray-5); font-weight: 700; }
.sv-privacy__note { font-size: var(--fs-sm); color: var(--color-text-secondary); }

/* ---------- 8. 버튼 ---------- */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--sp-10);
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.sv-btn--submit { background: var(--color-action-primary); color: var(--color-text-inverse); }
.sv-btn--submit:hover { background: var(--color-action-primary-hover); color: var(--color-text-inverse); }
.sv-btn--submit { min-width: 320px; min-height: 60px; font-size: 1.125rem; gap: var(--sp-2); }
.sv-btn--submit::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FEBD6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sv-btn--submit:disabled { background: var(--gray-50); cursor: not-allowed; }
.sv-btn--submit:disabled::after { display: none; }
.sv-submit { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding-top: var(--sp-4); }
.sv-submit__note { font-size: var(--fs-xs); color: var(--color-text-secondary); }

/* ---------- 9. 완료 ---------- */

/* ---------- 10. 반응형 ---------- */
@media (max-width: 900px) {
  :root { --fs-title: 2.5rem; }
  .sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-hero__illust { width: 180px; }
}

@media (max-width: 768px) {
  :root { --fs-title: 2rem; --fs-h2: 1.25rem; --fs-q: 1.0625rem; --num-size: 32px; }
  .pc-only { display: none; }
  .sv-inner { padding: var(--sp-6) var(--sp-4) var(--sp-16); gap: var(--sp-5); }
  .sv-hero { padding: var(--sp-8) var(--sp-5) var(--sp-6); gap: var(--sp-6); }
  .sv-hero__top { flex-direction: column-reverse; align-items: flex-start; gap: var(--sp-5); }
  .sv-hero__illust { width: 120px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08); }
  .sv-card { padding: var(--sp-6) var(--sp-5); }
  .opt-grid { gap: var(--sp-1) var(--sp-6); }
  .field-grid { grid-template-columns: 1fr; }
  .sv-btn--submit { width: 100%; min-width: 0; }
}

@media (max-width: 480px) {
  .sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .sv-stat { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
  .sv-stat dd { font-size: var(--fs-sm); }
  .q-card { padding-left: 0; }
  .q__no { position: static; display: inline-flex; width: 28px; height: 28px; margin: 0 var(--sp-2) 0 0; font-size: var(--fs-xs); vertical-align: 2px; }
  .q__title { min-height: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .opt__box, .opt__box::after { transition: none; }
}
.sv-stat__sub { display: inline-block; font-size: var(--fs-xs); font-weight: 400; color: var(--color-text-inverse-sub); }

/* 조건부 서술형: 항상 표시, 해당 보기 선택 시 필수 강조 */
.reason { border: 1px solid transparent; background: var(--gray-5); transition: border-color .15s, background-color .15s; }
.reason__req { color: var(--color-text-secondary); font-size: var(--fs-xs); font-weight: 400; }

/* 서술형: 텍스트박스만 표시 (레이블은 스크린리더용으로 유지) */
.reason { padding: 0 !important; background: none !important; border: 0 !important; gap: 6px; }
.reason__label { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reason .sv-textarea { min-height: 64px; }

/* =========================================================
   1920px 화면 기준 (1281px 이상)
   - 콘텐츠 폭 1200px, 글자·여백 확대
   - 1280px 이하에서는 위의 기본값(콘텐츠 폭 960px)과 반응형 규칙을 그대로 사용
   ========================================================= */
@media (min-width: 1281px) {
  :root {
    --content-w: 1200px;
    --fs-title: 3.75rem;    /* 60 */
    --fs-h2: 1.75rem;       /* 28 */
    --fs-q: 1.375rem;       /* 22 */
    --fs-body: 1.125rem;    /* 18 */
    --fs-sm: 1.0625rem;     /* 17 */
    --fs-xs: 0.9375rem;     /* 15 */
    --control-h: 56px;
    --num-size: 44px;
  }
  .sv-inner { padding: var(--sp-16) var(--sp-6) 120px; gap: var(--sp-8); }
  .sv-form-wrap, .sv-form { gap: var(--sp-8); }

  .sv-hero { padding: 72px 80px var(--sp-10); gap: var(--sp-10); }
  .sv-hero__badge { padding: 8px 20px; }
  .sv-hero__lead { font-size: 1.25rem; }
  .sv-hero__illust { width: 300px; }
  .sv-stats { gap: var(--sp-4); }
  .sv-stat { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .sv-stat__icon { width: 48px; height: 48px; }
  .sv-stat__icon svg { width: 26px; height: 26px; }
  .sv-stat dd { font-size: 1.1875rem; }

  .sv-card { padding: 56px 80px; gap: var(--sp-8); }
  .sv-card__tag { padding: 4px 14px; }
  .q-card { gap: var(--sp-4); padding-bottom: var(--sp-8); padding-left: calc(var(--num-size) + var(--sp-5)); }
  .q-card--plain { padding-left: 0; padding-bottom: 0; }
  .q__title { padding-top: 8px; }
  .q__title--sm { padding-top: 0; }
  .q__no { font-size: 1.0625rem; }

  .opt-grid { gap: var(--sp-3) 56px; }
  .opt { font-size: 1.1875rem; min-height: 48px; }
  .opt__box { width: 24px; height: 24px; }
  .opt__box::after { width: 36px; height: 31px; top: -12px; }

  .sv-textarea { padding: 14px 18px; }
  .reason .sv-textarea { min-height: 80px; }
  .sv-table th, .sv-table td { padding: 18px var(--sp-5); }
  .field-grid { gap: var(--sp-8); }

  .sv-btn--submit { min-width: 400px; min-height: 68px; font-size: 1.25rem; }
}

/* 보기 열 맞춤: 2번 문항(6개 보기)은 4열 격자로 배치해 윗줄·아랫줄 시작 위치를 맞춤 */
.opt-grid--cols4 { display: grid; grid-template-columns: repeat(4, max-content); }
/* 모바일(768px 이하): 모든 문항 보기를 2열 격자로 배치해 줄을 맞춤
   - 열 폭을 같게(1fr) 해서 문항이 달라도 왼쪽·오른쪽 열 시작 위치가 일치
   - 보기 글이 길면 그 칸 안에서 줄바꿈 */
@media (max-width: 768px) {
  .opt-grid,
  .opt-grid--cols4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-1) var(--sp-4);
  }
  .opt { align-items: flex-start; gap: var(--sp-2); padding-top: 10px; padding-bottom: 10px; }
  .opt__box { margin-top: 2px; }
  /* 번호는 왼쪽에 고정, 긴 보기 글은 번호 뒤에서 들여쓰기 된 채 줄바꿈 */
  .opt__txt { display: flex; gap: 4px; min-width: 0; overflow-wrap: break-word; }
  .opt__num { flex-shrink: 0; margin-right: 0; }
}

/* 모바일: 개인정보 수집 표를 가로 스크롤 대신 항목별 세로 목록으로 표시 */
@media (max-width: 768px) {
  .sv-table-wrap { overflow: visible; }
  .sv-table { min-width: 0; }
  .sv-table thead {               /* 머리글은 화면에서만 숨기고 스크린리더에는 유지 */
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .sv-table, .sv-table tbody, .sv-table tr, .sv-table td { display: block; width: 100%; }
  .sv-table td {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: var(--sp-3);
    padding: 14px var(--sp-2);
    text-align: left;
  }
  .sv-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--navy-90);
  }
}
@media (max-width: 360px) {
  .sv-table td { grid-template-columns: 1fr; gap: 2px; }
}

/* =========================================================
   웹접근성 보완 (KWCAG 2.2)
   ========================================================= */
/* 체크 박스 테두리 대비 3:1 이상 (#9AA3B0 2.5:1 → #7F8A99 3.5:1) */
:root { --color-check-border: var(--gray-50); }
/* 단계 태그 글자 대비 4.5:1 이상 */
.sv-card__tag { color: #006B5A; }
/* 입력 안내(placeholder) 글자 대비 4.5:1 이상 */
.sv-textarea::placeholder, .sv-input::placeholder { color: #6B7380; opacity: 1; }
/* 강조 표현: 밑줄 대신 굵기·색 (링크로 오인 방지) */
.sv-em { color: var(--navy-90); font-weight: 700; }
/* 표: 가로 스크롤이 없으므로 최소 폭 제거 */
.sv-table { min-width: 0; }
/* 고대비(강제 색상) 모드: 직접 그린 체크 대신 기본 라디오를 보여 선택 상태가 보이도록 */
@media (forced-colors: active) {
  .opt input { position: static; opacity: 1; width: 20px; height: 20px; }
  .opt__box { display: none; }
  .opt input:checked ~ .opt__txt { text-decoration: underline; }
}

/* 안내 칸: 아이콘을 dt 안으로 옮김(dl 마크업 규칙) — 아이콘 위, 항목명 아래 배치 유지 */
.sv-stat dt { display: flex; flex-direction: column; align-items: flex-start; }

.hidden{display: none;}

/* 399px 이하: 보기와 상단 안내 칸을 한 줄에 하나씩 */
@media (max-width: 399px) {
  .opt-grid,
  .opt-grid--cols4 { grid-template-columns: 1fr; }

  .sv-stats { grid-template-columns: 1fr; gap: var(--sp-2); }
  .sv-stat { padding: var(--sp-3) var(--sp-4); }
  .sv-stat dt { flex-direction: row; align-items: center; gap: var(--sp-2); }
  .sv-stat__icon { width: 32px; height: 32px; margin-bottom: 0; }
  .sv-stat__icon svg { width: 18px; height: 18px; }
  /* 당첨 선물·당첨자 선정 내용은 한 줄로 */
  .sv-stat__br { display: none; }
}