/* CLDEQ-8 — 랜딩 / 설문 공통 */
:root {
  --cldeq-blue: #003399;
  --cldeq-accordion-bg: #e0f7fa;
  --cldeq-text: #1a1a1a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body.cldeq8 img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

body.cldeq8 {
  margin: 0;
  min-height: 100vh;
  /* 시안: Apple SD Gothic Neo / Pretendard / Noto Sans KR 계열 — 웹은 Noto Sans KR + 시스템 고딕 */
  font-family:
    'Apple SD Gothic Neo',
    'Noto Sans KR',
    'Malgun Gothic',
    '맑은 고딕',
    sans-serif;
  font-optical-sizing: auto;
  color: var(--cldeq-text);
  background: #fff;
}

.cldeq8 a {
  color: inherit;
}

/* ---------- 첫 페이지: 시안 PNG 4장 (닫힘 / 1·2·3번 열림) ---------- */
.cldeq8-landing-index {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #fff;
}

/* 시안 원본 1440×2560 — PC에서도 동일 비율로 가운데 고정 */
.cldeq8-stage {
  position: relative;
  width: 100%;
  max-width: 767px;
  aspect-ratio: 1440 / 2560;
  margin: 0 auto;
}

/*
 * 랜딩(index): 히트 좌표는 JS가 index-hit-frames.json + data-frame별로 --* 변수에 넣음.
 * JSON 로드 전·실패 시 fallback (설문 페이지 .cldeq8-stage에는 이 블록이 적용되지 않음)
 */
.cldeq8-landing-index .cldeq8-stage {
  --start-x: 50%;
  --start-y: 40%;
  --start-size: 40%;
  --acc1-top: 66%;
  --acc2-top: 72.6%;
  --acc3-top: 78.8%;
  --acc-height: 5.3%;
  --acc1-height: 5.3%;
  --acc2-height: 5.3%;
  --acc3-height: 5.3%;
}

.cldeq8-frames {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.cldeq8-stage.is-ready .cldeq8-frames {
  opacity: 1;
}

.cldeq8-stage:not(.is-ready) .cldeq8-hitbox {
  pointer-events: none;
}

.cldeq8-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.cldeq8-frame.is-active {
  display: block;
}

.cldeq8-hitbox {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cldeq8-hitbox a,
.cldeq8-hitbox button {
  pointer-events: auto;
}

/* 투명 클릭 영역 — 시안과 어긋나면 .cldeq8-stage 변수 조정 */
.cldeq8-hit-start {
  position: absolute;
  left: var(--start-x);
  top: var(--start-y);
  width: var(--start-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cldeq8-hit-acc {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
}

.cldeq8-hit-acc[data-index='0'] {
  top: var(--acc1-top);
  height: var(--acc1-height, var(--acc-height));
}

.cldeq8-hit-acc[data-index='1'] {
  top: var(--acc2-top);
  height: var(--acc2-height, var(--acc-height));
}

.cldeq8-hit-acc[data-index='2'] {
  top: var(--acc3-top);
  height: var(--acc3-height, var(--acc-height));
}

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

/* 헤더 */
.cldeq8-hero {
  position: relative;
  background-color: var(--cldeq-blue);
  padding: 1.75rem 1.25rem 2rem;
  text-align: center;
  overflow: hidden;
}

.cldeq8-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -15%;
  width: 70%;
  height: 140%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 70% 45%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
    repeating-radial-gradient(
      circle at 85% 50%,
      transparent 0,
      transparent 14px,
      rgba(255, 255, 255, 0.05) 14px,
      rgba(255, 255, 255, 0.05) 15px
    );
}

.cldeq8-hero-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  letter-spacing: -0.02em;
}

@media (min-width: 400px) {
  .cldeq8-hero-title {
    font-size: 1.25rem;
  }
}

/* 본문 랜딩 */
.cldeq8-landing-body {
  padding: 1.5rem 1.25rem 2rem;
  max-width: 28rem;
  margin: 0 auto;
}

.cldeq8-intro {
  margin: 0 0 1.75rem;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--cldeq-text);
}

/* START 버튼 */
.cldeq8-start-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0 2.25rem;
}

.cldeq8-start {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.5rem;
  height: 10.5rem;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #5ba3e8 0%, #2563b8 45%, #003399 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 7px rgba(180, 220, 255, 0.55),
    0 0 0 11px rgba(255, 255, 255, 0.35),
    0 0 0 15px rgba(224, 247, 250, 0.25),
    0 8px 24px rgba(0, 51, 153, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cldeq8-start:hover {
  transform: scale(1.03);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 7px rgba(180, 220, 255, 0.65),
    0 0 0 11px rgba(255, 255, 255, 0.4),
    0 0 0 16px rgba(224, 247, 250, 0.3),
    0 10px 28px rgba(0, 51, 153, 0.4);
}

.cldeq8-start:active {
  transform: scale(0.98);
}

.cldeq8-start:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* 아코디언 */
.cldeq8-acc-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.cldeq8-acc-item {
  border-radius: 0.65rem;
  background: var(--cldeq-accordion-bg);
  overflow: hidden;
  border: 1px solid rgba(0, 51, 153, 0.12);
}

.cldeq8-acc-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--cldeq-blue);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.35;
  gap: 0.65rem;
}

.cldeq8-acc-trigger:focus-visible {
  outline: 2px solid var(--cldeq-blue);
  outline-offset: 2px;
}

.cldeq8-acc-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--cldeq-blue);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cldeq8-acc-title {
  flex: 1;
  min-width: 0;
}

.cldeq8-acc-chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: #5b8fd4;
  transition: none;
}

.cldeq8-acc-item.is-open .cldeq8-acc-chevron {
  transform: rotate(180deg);
}

.cldeq8-acc-panel {
  max-height: 0;
  overflow: hidden;
  /* 열림/닫힘 전환 지연 제거 — 다른 항목 클릭 시 즉시 반전되도록 */
  transition: none;
}

.cldeq8-acc-item.is-open .cldeq8-acc-panel {
  max-height: 24rem;
}

.cldeq8-acc-panel-inner {
  padding: 0 0.9rem 1rem 2.75rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
}

.cldeq8-acc-error {
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: #b91c1c;
  text-align: center;
}

/* ---------- 설문 1~5단계 (시안 survey_1~5.png + survey-config.json) ---------- */
.cldeq8-survey {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
}

/* 설문·결과: 홈 — 배경 PNG에 그려진 UI 위 투명 클릭 영역 (시안과 어긋나면 --home-* 조정) */
.cldeq8-survey .cldeq8-stage {
  container-type: inline-size;
  container-name: cldeq8-stage;
  --home-top: 20.2%;
  --home-right: 3.4%;
  --home-width: 9%;
  --home-height: 5%;
  --home-scale: 1;
}

.cldeq8-home {
  position: absolute;
  top: var(--home-top);
  right: var(--home-right);
  left: auto;
  width: var(--home-width);
  height: var(--home-height);
  z-index: 35;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  opacity: 0;
  transform: scale(var(--home-scale));
  transform-origin: top right;
  -webkit-tap-highlight-color: transparent;
}

.cldeq8-home:focus-visible {
  opacity: 1;
  outline: 3px solid rgba(0, 51, 153, 0.85);
  outline-offset: 2px;
}

.cldeq8-survey-frames {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.cldeq8-survey-stage.is-ready .cldeq8-survey-frames {
  opacity: 1;
}

.cldeq8-survey-stage:not(.is-ready) .cldeq8-survey-hits {
  pointer-events: none;
}

.cldeq8-survey-stage:not(.is-ready) .cldeq8-survey-hits .cldeq8-survey-opt,
.cldeq8-survey-stage:not(.is-ready) .cldeq8-survey-hits .cldeq8-survey-prev,
.cldeq8-survey-stage:not(.is-ready) .cldeq8-survey-hits .cldeq8-survey-next {
  pointer-events: none;
}

.cldeq8-survey-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  backface-visibility: hidden;
}

.cldeq8-survey-hits {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.cldeq8-survey-stage.is-ready .cldeq8-survey-hits {
  opacity: 1;
}

.cldeq8-survey-hits .cldeq8-survey-opt,
.cldeq8-survey-hits .cldeq8-survey-prev,
.cldeq8-survey-hits .cldeq8-survey-next {
  pointer-events: auto;
}

.cldeq8-survey-opt {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* src 교체 대신 두 레이어 겹침 → 클릭 시 깜빡임 방지 */
.cldeq8-survey-opt-img-unc,
.cldeq8-survey-opt-img-chk {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: none;
}

.cldeq8-survey-opt-img-chk {
  opacity: 0;
}

.cldeq8-survey-opt[aria-pressed='true'] .cldeq8-survey-opt-img-unc {
  opacity: 0;
}

.cldeq8-survey-opt[aria-pressed='true'] .cldeq8-survey-opt-img-chk {
  opacity: 1;
}

.cldeq8-survey-prev,
.cldeq8-survey-next {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  /* 히트 영역만 사용 — 보이게 하지 않음 (focus 시 opacity:1로 두면 클릭할 때마다 깜빡임) */
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
  transition: none;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

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

.cldeq8-survey-prev:active,
.cldeq8-survey-next:active {
  opacity: 0;
  outline: none;
}

/* 문항 수: .cldeq8-survey-hits[data-question-count] — steps[].questions 배열(페이지당 0~4점 문항 여러 개) */

.cldeq8-survey-opt:focus-visible,
.cldeq8-survey-prev:focus-visible,
.cldeq8-survey-next:focus-visible {
  outline: 3px solid rgba(0, 51, 153, 0.85);
  outline-offset: 2px;
}

.cldeq8-survey-prev:focus-visible,
.cldeq8-survey-next:focus-visible {
  opacity: 0;
}

.cldeq8-survey-opt:focus-visible {
  opacity: 1;
}

.cldeq8-survey-error {
  max-width: 767px;
  margin: 0.75rem auto 0;
  padding: 0 1rem;
  font-size: 0.875rem;
  color: #b91c1c;
  text-align: center;
}

.cldeq8-survey-error[hidden] {
  display: none !important;
}

.cldeq8-survey-done {
  max-width: 28rem;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  text-align: center;
}

.cldeq8-survey-done-title {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
  color: var(--cldeq-text);
}

.cldeq8-survey-done-text {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #444;
}

.cldeq8-back {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cldeq-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cldeq8-back:hover {
  opacity: 0.85;
}

/* ---------- 설문 6단계: 합산 결과 (result_1~3) ---------- */
/*
 * cqw 사용: 이 스테이지(.cldeq8-stage, 최대 767px) 너비의 1% = 1cqw
 * → 배경 PNG와 같은 박스 기준으로 글자 크기가 같이 줄어들고 커짐.
 * (vw는 “전체 화면” 기준이라, 스테이지는 767에서 멈추는데 글자만 따로 노는 느낌이 나기 쉬움)
 */
.cldeq8-result-stage {
  position: relative;
  container-type: inline-size;
  container-name: cldeq8-result;
}

.cldeq8-result-score {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-48%, -67%);
  margin: 0;
  padding: 0;
  pointer-events: none;
  user-select: none;
  text-align: center;
  line-height: 1;
  /* 시안의 “00”에 가깝게 — 좁은 숫자 전용 산세리프 */
  font-family:
    'Barlow Condensed',
    'Arial Narrow',
    'Helvetica Condensed',
    Arial,
    sans-serif;
  font-weight: 800;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  /* cqw 미지원 브라우저용 — 지원 시 아래 @supports로 덮어씀 */
  font-size: clamp(4.5rem, 28vw, 20.5rem);
  letter-spacing: 0.06em;
  -webkit-font-smoothing: antialiased;
}

@supports (font-size: 1cqw) {
  .cldeq8-result-score {
    font-size: clamp(4.5rem, 35cqw, 20.5rem);
  }
}