/* OSDI-6 설문 — 디자인 PNG 배경 + 투명 클릭영역 (CLDEQ-8 방식) */
:root {
  --osdi-blue: #003399;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body.osdi6 {
  margin: 0;
  min-height: 100vh;
  background: #ffffff;
  font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;
  color: #1a1a1a;
}
body.osdi6 img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.osdi6-app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #ffffff;
}
/* 시안 원본 1440×2561 비율 고정 */
.osdi6-stage {
  position: relative;
  width: 100%;
  max-width: 767px;
  aspect-ratio: 1440 / 2561;
  margin: 0 auto;
  container-type: inline-size;
  container-name: osdi6;
  overflow: hidden;
}

.osdi6-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  backface-visibility: hidden;
  transition: opacity .18s ease;
}
.osdi6-stage:not(.is-ready) .osdi6-bg { opacity: 0; }

.osdi6-hits { position: absolute; inset: 0; z-index: 2; }
.osdi6-stage:not(.is-ready) .osdi6-hits { pointer-events: none; opacity: 0; }

.osdi6-hit {
  position: absolute;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* START — 원형 */
.osdi6-hit-start { border-radius: 50%; transform: translate(-50%, -50%); }

/* 0~4 점수 옵션 — 점 중심 정렬 원형 히트 */
.osdi6-opt {
  width: 4.6cqw;
  height: 4.6cqw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 선택 시 네이비 원 + 흰 숫자 오버레이 */
.osdi6-opt .osdi6-opt-mark {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--osdi-blue);
  box-shadow: 0 0.6cqw 1.4cqw rgba(0, 51, 153, .40);
  color: #fff;
  font-weight: 800;
  font-size: 3.6cqw;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
  font-family: 'Noto Sans KR', sans-serif;
}
.osdi6-opt[aria-pressed='true'] .osdi6-opt-mark { opacity: 1; transform: scale(1); }

.osdi6-next.is-disabled { pointer-events: none; cursor: not-allowed; }

.osdi6-hit:focus-visible {
  outline: 3px solid rgba(0, 51, 153, .85);
  outline-offset: 2px;
  opacity: 1;
}

/* 결과 점수 오버레이 */
.osdi6-score {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 48%; /* 2026-09-08 시안 개정(인쇄 00 위치) 기준 */
  transform: translate(-50%, -50%);
  margin: 0; padding: 0;
  pointer-events: none;
  user-select: none;
  text-align: center;
  line-height: 1;
  color: #0b0b0d;
  font-family: 'Arial Black', 'Arial', 'Noto Sans KR', sans-serif;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-size: 39cqw; /* 개정 시안 숫자 높이 기준 */
  -webkit-font-smoothing: antialiased;
}
.osdi6-stage:not(.is-result) .osdi6-score { display: none; }

.osdi6-error {
  position: absolute;
  left: 0; right: 0; bottom: 6%;
  text-align: center;
  color: #b91c1c;
  font-size: 0.9rem;
  z-index: 5;
}
.osdi6-error[hidden] { display: none; }