/* 초진 설계 문진 — 한 화면 한 문항. 피어리움 캔버스 문법 위 얇은 레이어.
 *
 * 여백을 줄 때 주의. 테마가 `.theme-* :is(h1,h2,h3,p,figure){margin:0}` 으로
 * 문단 여백을 지우는데, 그 특이도(0,1,1)가 클래스 하나짜리 규칙(0,1,0)을
 * 이긴다. 그래서 문단에 여백을 주는 규칙은 [data-survey] 나 .sv-card 를
 * 한 겹 얹어 (0,2,0)으로 올린다. 새 규칙도 같은 방식으로 감싼다. */

.sv {
  margin: 0 auto;
  max-width: 46rem;
  min-height: 70vh;
  padding: clamp(var(--space-10), 8vw, var(--space-22)) var(--space-6) var(--space-30);
}

/* 위쪽 여백은 .sv 가 아니라 번들의 상세 페이지 규칙
   `body:is(.treatment-face,.treatment-skin,.treatment-special) main`(0,2,2)이
   가져간다. 그 값이 고정 헤더가 덮는 높이와 정확히 같아서, 눈썹 문구가
   메뉴 바로 아래 0px 에 붙었다.

   번들이 쓰는 계산을 그대로 두고 그 아래에 숨 쉴 자리만 더한다. 폭에 따라
   헤더 높이가 176 → 134 → 72px 로 달라지므로 번들과 같은 지점에서 나눈다.
   (--header-height 토큰은 4rem 이라 실제 헤더 높이와 달라 쓰지 않는다.) */
body[class] main.sv[data-survey] {
  padding-top: calc(
    var(--space-22) + var(--space-3) + var(--space-12) + var(--space-4) + 2px
    + var(--space-12)
  );
}

/* 문항·예약 화면에서는 메뉴가 접혀(data-survey-focus) 위 계산의 헤더
   몫이 빈 공간으로 남는다. 문진이 화면 위쪽에서 시작하도록 줄인다. */
body[class][data-survey-focus] main.sv[data-survey] {
  padding-top: clamp(var(--space-10), 8vh, var(--space-16));
}

@media (max-width: 47.9375rem) {
  body[class] main.sv[data-survey] {
    padding-top: calc(4.25rem + var(--space-8));
  }

  body[class][data-survey-focus] main.sv[data-survey] {
    padding-top: var(--space-8);
  }
}

.sv-screen[hidden],
.sv-screen.hidden {
  display: none;
}

/* 화면 전환 외의 요소도 hidden으로 숨긴다 — 사이트 공용 CSS에는 단독 .hidden 규칙이 없다. */
.sv .hidden {
  display: none;
}

/* S1 */
.sv-intro h1 {
  margin: var(--space-4) 0 var(--space-6);
  white-space: pre-line;
}

[data-survey] .sv-intro__body {
  color: var(--text-muted);
  margin-bottom: var(--space-10);
  max-width: 34rem;
}

[data-survey] .sv-intro__meta {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-top: var(--space-4);
}

[data-survey] .sv-resume {
  border-top: 1px solid var(--line-light);
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: var(--space-8);
  padding-top: var(--space-4);
}

.sv-link {
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--key-700);
  cursor: pointer;
  font: inherit;
  margin-left: var(--space-3);
  min-height: 2.75rem;
  padding: 0;
}

/* S2 진행률 */
.sv-progress {
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}

.sv-progress__track {
  background: var(--ivory-100);
  border-radius: var(--radius-pill);
  height: 3px;
  overflow: hidden;
}

.sv-progress__bar {
  background: var(--key-500);
  height: 100%;
  transition: width 0.28s ease;
  width: 0;
}

[data-survey] .sv-progress__label {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-top: var(--space-3);
}

/* S2 문항 */
[data-survey] .sv-q__prompt {
  font-size: clamp(1.25rem, 4.5vw, 1.625rem);
  line-height: 1.45;
  margin-bottom: var(--space-3);
}

[data-survey] .sv-q__helper {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-8);
}

/* 고른 개수 안내. 「최대 3개」를 물음표 문구로만 두면 몇 개를 골랐는지
   화면 어디에도 없어, 한계에 닿았을 때 이유를 알 길이 없다. */
[data-survey] .sv-q__count {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0 0 var(--space-8);
}

/* 안내 문구 바로 밑에 개수가 붙으면 두 줄이 한 덩어리로 읽혀야 한다.
   :has()를 못 쓰는 브라우저에서는 사이가 조금 벌어질 뿐이다. */
[data-survey] .sv-q__helper:has(+ .sv-q__count) {
  margin-bottom: var(--space-2);
}

[data-survey] .sv-q__count.is-full {
  color: var(--key-700);
}

.sv-options {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 선택지가 많은 문항(고민 10개)은 한 줄에 하나씩 두면 목록만 800px 가까이
   차지해 이동 버튼이 화면 밖으로 밀린다. 넓은 화면에서는 두 줄로 나눈다. */
@media (min-width: 48rem) {
  .sv-options--split {
    grid-template-columns: 1fr 1fr;
  }
}

/* 같은 줄에 놓인 카드는 높이를 맞춘다. 한쪽에만 안내가 붙어 들쭉날쭉하면
   목록이 아니라 오류처럼 보인다. */
.sv-options > li {
  display: grid;
}

.sv-option {
  align-items: start;
  background: var(--ivory-0);
  border: 1px solid var(--line-light);
  border-radius: 2px;
  cursor: pointer;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto 1fr;
  height: 100%;
  min-height: 3.25rem;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease;
  width: 100%;
}

.sv-option__text {
  align-items: baseline;
  column-gap: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-1);
}

/* 하나만 고르는 문항은 동그라미, 여러 개 고르는 문항은 네모.
   두 문항이 똑같이 생기면, 눌러도 다음으로 넘어가지 않는 쪽에서
   「눌러도 반응이 없다」고 읽힌다. */
.sv-option__mark {
  /* 카드 테두리(--line-light)보다 진하게. 표식이 카드에 묻히면 안 된다. */
  border: 1px solid rgba(36, 27, 27, 0.28);
  border-radius: var(--radius-pill);
  flex: none;
  height: 1.125rem;
  margin-top: 0.1875rem;
  position: relative;
  transition: border-color 0.18s ease, background 0.18s ease;
  width: 1.125rem;
}

.sv-options--multi .sv-option__mark {
  border-radius: 2px;
}

.sv-option[aria-pressed="true"] .sv-option__mark {
  background: var(--key-500);
  border-color: var(--key-500);
}

/* 체크 표시는 두 획을 그려 만든다(아이콘 파일 없이). */
.sv-option[aria-pressed="true"] .sv-option__mark::after {
  border-bottom: 2px solid var(--ivory-0);
  border-left: 2px solid var(--ivory-0);
  content: "";
  height: 0.25rem;
  left: 50%;
  position: absolute;
  top: 45%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 0.5rem;
}

.sv-option:hover:not(:disabled):not(.is-locked) {
  border-color: var(--key-200);
}

.sv-option[aria-pressed="true"] {
  background: var(--wine-25);
  border-color: var(--key-500);
}

.sv-option:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

/* 상한을 채운 뒤 남은 항목. 비활성과 달리 눌러 볼 수는 있지만, 지금은
   고를 수 없다는 것이 누르기 전에 보여야 한다. */
.sv-option.is-locked {
  cursor: default;
  opacity: 0.45;
}

.sv-option__label {
  font-weight: 500;
}

/* Q9 예시 문구는 한 단계 작은 글씨로 라벨 아래 줄에 둔다(스펙 §2 Q9 UI). */
.sv-option__hint {
  color: var(--text-muted);
  flex: 1 0 100%;
  font-size: 0.8125rem;
}

.sv-option__why {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.sv-option:focus-visible {
  outline: 2px solid var(--key-500);
  outline-offset: 2px;
}

[data-survey] .sv-hintbar {
  color: var(--error-600);
  font-size: 0.875rem;
  margin: 0 0 var(--space-3);
  min-height: 1.25rem;
}

/* 상한 안내는 잘못이 아니라 알림이다. 빨간 글씨로 두면 틀렸다고 읽힌다. */
[data-survey] .sv-hintbar.is-info {
  color: var(--text-muted);
}

/* 하단 고정 이동 버튼 */
/* 아래에 붙는 띠. 안내 문구가 이 안에 있으므로 바탕은 불투명해야 한다.
   색은 반드시 이 페이지가 실제로 칠하는 바탕과 같아야 한다 — 테마가
   `.theme-treatment-v37 { background: var(--t-paper) }` 로 세이지(#f2f3ed)를
   칠하는데 띠만 --ivory-50(#f6f0ea, 베이지)을 쓰면, 따뜻한 사각형이 얹혀
   그 자리가 통째로 뿌옇게 보인다.
   위쪽 경계도 그라데이션으로 흐리면 카드 아랫변이 녹아 흐릿해 보인다.
   1px 선으로 딱 끊는다. */
.sv-nav {
  background: var(--t-paper, var(--surface-page));
  border-top: 1px solid var(--line-light);
  bottom: 0;
  display: block;
  left: 0;
  padding: var(--space-6) var(--space-6) max(var(--space-6), env(safe-area-inset-bottom));
  position: sticky;
  right: 0;
}

/* 두 버튼은 한 쌍으로 읽혀야 한다. 양 끝으로 밀어 두면 731px 폭에서 사이가
   566px 벌어져, 짝이 아니라 각자 떠 있는 것으로 보인다. */
.sv-nav__row {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

.sv-nav .button {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 3rem;
}

/* 아직 누를 수 없는 상태를 검은 덩어리에 투명도만 걸어 표시하면 고장 난 것으로
   보인다. 색을 빼고 테두리만 남겨 「아직」이라고 읽히게 한다. */
.sv-nav .button[disabled] {
  background: transparent;
  border: 1px solid var(--line-light);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;
}

.sv-nav .button[disabled] .button__arrow {
  background: transparent;
  border: 1px solid var(--line-light);
  color: var(--text-muted);
}

@media (min-width: 48rem) {
  .sv-nav {
    padding-inline: 0;
  }

  .sv-nav .button {
    flex: 0 0 auto;
    min-width: 7.5rem;
  }
}

/* 넓은 화면에서 static 으로 되돌렸더니 상한 안내가 화면 밖에 놓였다
   (768x600 에서 top 871px, 1280x720 에서도 화면 밖). 창 높이로 가르려 했지만
   경계를 어디에 두든 넘어가는 크기가 남는다. 폭과 무관하게 붙여 둔다.
   문항 끝까지 내리면 띠도 함께 밀려 올라가 가려지는 선택지는 없다. */

@media (prefers-reduced-motion: reduce) {
  .sv-progress__bar,
  .sv-option,
  .sv-option__mark {
    transition: none;
  }
}

/* S3 결과 */
.sv-card {
  background: var(--ivory-0);
  border: 1px solid var(--line-light);
  border-radius: 2px;
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  padding: clamp(var(--space-8), 5vw, var(--space-12));
}

.sv-block > .at-eyebrow {
  margin-bottom: var(--space-4);
}

/* 페이지 h1 스케일(clamp(3.25rem, 8.75vw, 7rem))을 그대로 받으면 1440px 에서
   119px 이 되어 결과 카드 안에서 세 줄로 흐른다. 카드 안 제목 크기로 낮춘다. */
/* 문진 화면의 제목이 페이지 h1 스케일(clamp(3.25rem, 8.75vw, 7rem))을 그대로
   받아 1440px 에서 119px 이 됐다. 한 줄에 담기지 못하고 세 줄로 흘러 화면을
   잡아먹는다. 문진 안에서는 카드 제목 크기로 낮춘다. */
[data-survey] .sv-screen :is(h1, h2) {
  font-size: clamp(1.875rem, 4.2vw, 2.75rem);
  line-height: 1.3;
  margin: 0 0 var(--space-4);
}

/* 눈썹 문구가 .sv-block 밖에 놓인 화면도 있다(S4). 그쪽에도 여백을 준다. */
[data-survey] .sv-screen > .at-eyebrow {
  margin-bottom: var(--space-4);
}

.sv-gauges {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
}

.sv-gauges > div {
  align-items: center;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 5.5rem auto;
}

.sv-gauges dt {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.sv-gauges dd {
  letter-spacing: 0.22em;
  margin: 0;
}

.sv-card .sv-skintype {
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
  margin: 0;
}

.sv-card .sv-skintype__label {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-top: var(--space-3);
}

.sv-items {
  display: grid;
  gap: var(--space-6);
  margin: 0 0 var(--space-8);
  padding-left: var(--space-5);
}

.sv-items li {
  line-height: 1.65;
}

/* 부연은 한 단계 작은 글씨로 본문과 구분한다(스펙 §4.1). */
.sv-items .sv-note {
  color: var(--text-muted);
  display: block;
  font-size: 0.875rem;
  margin-top: var(--space-2);
}

.sv-columns {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sv-columns a {
  border-bottom: 1px solid var(--line-light);
  display: block;
  padding-bottom: var(--space-3);
}

.sv-disclaimer {
  border-top: 1px solid var(--line-light);
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.7;
  padding-top: var(--space-5);
  white-space: pre-line;
}

.sv-actions {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.sv-actions__minor {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sv-actions .button {
  justify-content: center;
  min-height: 3rem;
}

/* S4 예약 */
.sv-form {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.sv-form__row {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 30rem) {
  .sv-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sv-field {
  display: grid;
  gap: var(--space-2);
}

.sv-field label {
  font-size: 0.875rem;
}

.sv-field label em {
  color: var(--key-500);
  font-style: normal;
}

.sv-field input,
.sv-field select {
  background: var(--ivory-0);
  border: 1px solid var(--line-light);
  border-radius: 2px;
  font: inherit;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  width: 100%;
}

.sv-field input:focus-visible,
.sv-field select:focus-visible {
  border-color: var(--key-500);
  outline: 2px solid var(--key-200);
  outline-offset: 1px;
}

.sv-field input[aria-invalid="true"] {
  border-color: var(--error-600);
}

.sv-hp {
  height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
}

.sv-consents {
  border-top: 1px solid var(--line-light);
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-6);
}

.sv-consent {
  align-items: start;
  cursor: pointer;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr);
  line-height: 1.6;
  min-height: 2.75rem;
}

.sv-consent input {
  margin-top: 0.3rem;
  min-height: 1.125rem;
  min-width: 1.125rem;
}

.sv-consent__full {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin: 0 0 var(--space-4) var(--space-6);
}

.sv-consent__full p {
  margin-top: var(--space-2);
  white-space: pre-line;
}

.sv-consent__link {
  font-size: 0.8125rem;
  margin-top: var(--space-2);
}

.sv-submit {
  justify-content: center;
  min-height: 3.25rem;
}

.sv-back {
  justify-self: center;
  margin-top: var(--space-2);
}

/* ── 결과 화면의 내 로드맵 ─────────────────────────────────────────
   고른 고민의 로드맵을 결과 자리에서 바로 편다. 회차는 적지 않고
   간격만 눈금으로 보여 준다(스펙 §0.2).

   선택자에 .sv-plan 을 한 번 더 얹는다. 테마의
   `.theme-treatment-v37 :is(h1,h2,h3,p,figure){margin:0}` 이 클래스
   하나짜리 규칙을 이겨서 문단 여백이 통째로 사라진다. */

.sv-plan .sv-plan__title {
  font-size: clamp(1.375rem, 3.2vw, 1.75rem);
  line-height: 1.35;
  margin: 0 0 var(--space-4);
}

.sv-plan .sv-plan__with {
  color: var(--key-500, #9b405b);
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-3);
}

.sv-plan .sv-plan__lead {
  color: var(--t-muted, var(--ink-600));
  margin: 0 0 var(--space-6);
}

.sv-plan .sv-plan__group { margin-bottom: var(--space-8); }

/* 버튼이 바로 윗 문장에 붙어 있었다. 누르는 자리는 앞뒤로 숨을 둔다. */
.sv-plan .sv-roadmap {
  margin-top: var(--space-4);
  padding-block: var(--space-3);
}

.sv-plan .sv-plan__label {
  color: var(--t-muted, var(--ink-600));
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  margin: 0 0 var(--space-3);
  text-transform: none;
}






.sv-plan .sv-plan__phases {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.sv-plan__phases > div {
  align-items: baseline;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 5.5rem minmax(0, 1fr);
}

.sv-plan .sv-plan__phases dt {
  color: var(--key-700, #7b2d44);
  font-size: 0.9375rem;
}

.sv-plan .sv-plan__phases dd {
  color: var(--t-muted, var(--ink-600));
  font-size: 0.9375rem;
  margin: 0;
}

@media (max-width: 26rem) {
  .sv-plan__phases > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ── 진입 화면의 세 걸음 ───────────────────────────────────────────
   글이 설명하고 그림이 거든다. 그림 하나에 다 담으려다 점과 선만 남아
   아무 설명이 되지 않았던 앞 버전을 걷어낸 자리다. */

[data-survey] .sv-steps {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  list-style: none;
  margin: var(--space-10) 0 var(--space-12);
  padding: 0;
}

[data-survey] .sv-steps li {
  align-items: center;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 5.5rem minmax(0, 1fr);
}

/* 세 그림의 생김새가 달라(카드 뭉치는 세로로, 눈금 선은 가로로 길다)
   그대로 두면 첫 칸만 커 보인다. 같은 높이 상자에 넣고 안에서 맞춘다. */
[data-survey] .sv-steps img {
  display: block;
  height: 4.5rem;
  object-fit: contain;
  object-position: left center;
  width: 100%;
}

[data-survey] .sv-steps p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

[data-survey] .sv-steps strong {
  color: var(--ink-900);
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
  margin-bottom: var(--space-1);
}

/* 넓어지면 세 걸음을 나란히 놓고 그림을 글 위로 올린다. */
@media (min-width: 40rem) {
  [data-survey] .sv-steps {
    gap: var(--space-8);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [data-survey] .sv-steps li {
    align-items: start;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
    /* 그림 자리를 고정해 둔다. 제목이 한 줄인 칸과 두 줄인 칸의 글이
       같은 높이에서 시작하게 하려면 위 칸의 높이가 같아야 한다. */
    grid-template-rows: 5.5rem auto;
  }

  [data-survey] .sv-steps img {
    height: 5.5rem;
    object-position: left center;
    width: 100%;
  }
}