/* ui-play.css — 수행(참여) 화면 기본: 문항·입력·개인정보 동의·알림. split from ui.css (RULE-code-19) */

/* ─── 수행 화면 ──────────────────────────── */
.sv-play { width: min(100% - 32px, 760px); margin: 0 auto; padding: 32px 0 80px; }
/* 참여 화면 글씨 크기 — 기본 1rem, 설문마다 0.1 단위로(꾸밈 > 기본 글씨 크기). 안쪽 글씨는 calc(…px * --sv-scale) 로 함께 커진다 (2026-10-07) */
.sv-play { font-size: calc(1rem * var(--sv-scale, 1)); }
/* Sibling blocks of the page (banner · head · notice · video · gate · progress · form · done · channels)
   share one gap; their own margins are cleared so the space never doubles or vanishes */
.sv-play { display: flex; flex-direction: column; gap: 16px; }
main.sv-play > * { margin-top: 0; margin-bottom: 0; }

.sv-play__head {
  padding: 24px;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius);
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow);
}

.sv-play__title { margin: 0 0 8px; font-size: calc(24px * var(--sv-scale, 1)); font-weight: 800; letter-spacing: -0.02em; }
.sv-play__desc { margin: 0; color: var(--sv-ink-soft); white-space: pre-wrap; }
.sv-play__period { margin-top: 12px; font-size: calc(14px * var(--sv-scale, 1)); color: var(--sv-ink-soft); }

.sv-progress {
  position: sticky;
  top: 64px;
  z-index: 10;
  height: 4px;
  margin: 24px 0;
  border-radius: 999px;
  background: var(--sv-line);
  overflow: hidden;
}

.sv-progress__bar { height: 100%; width: 0; background: var(--sv-brand); transition: width 0.2s; }

.sv-q {
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius);
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow);
}

.sv-q.is-missing { border-color: var(--sv-danger); }

.sv-q__num { font-size: calc(13px * var(--sv-scale, 1)); font-weight: 700; color: var(--sv-brand); }

.sv-q__title {
  margin: 4px 0 16px;
  font-size: calc(18px * var(--sv-scale, 1));
  font-weight: 700;
  line-height: 1.5;
}

.sv-q__req { margin-left: 4px; color: var(--sv-danger); }
.sv-q__hint { margin: 0 0 12px; color: var(--sv-ink-soft); font-size: calc(14px * var(--sv-scale, 1)); }

.sv-opts { display: flex; flex-direction: column; gap: 8px; }

.sv-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.sv-opt:hover { background: #f7f8fb; }
.sv-opt.is-on { border-color: var(--sv-brand); background: var(--sv-brand-soft); }
.sv-opt input { width: 18px; height: 18px; accent-color: var(--sv-brand); }
.sv-opt img { width: 96px; border-radius: 8px; }

.sv-input,
.sv-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  background: var(--sv-surface);
  font: inherit;
}

.sv-textarea { min-height: 120px; resize: vertical; }
.sv-input:focus, .sv-textarea:focus { outline: 2px solid var(--sv-brand-soft); border-color: var(--sv-brand); }

.sv-field { margin-bottom: 12px; }
.sv-field__label { display: block; margin-bottom: 4px; font-size: calc(14px * var(--sv-scale, 1)); font-weight: 600; }

/* 라벨 옆 보조 설명 — 라벨보다 한 단계 옅게 (붙여 읽히지 않도록) */
.sv-field__hint {
  margin-left: 4px;
  color: var(--sv-ink-soft);
  font-size: calc(12px * var(--sv-scale, 1));
  font-weight: 400;
}
.sv-panel__title .sv-field__hint { font-size: calc(13px * var(--sv-scale, 1)); }

/* 유의 사항 — 눈에 띄되 겁주지 않을 만큼만 */
.sv-privacy__danger {
  margin: 0 0 12px;
  color: var(--sv-danger);
  font-size: calc(14px * var(--sv-scale, 1));
  white-space: pre-wrap;
}

/* 처리방침 — 길어서 접어 둔다 */
.sv-privacy__policy { margin-top: 12px; font-size: calc(13px * var(--sv-scale, 1)); }
.sv-privacy__policy summary { color: var(--sv-ink-soft); cursor: pointer; }
.sv-privacy__policy summary:hover { color: var(--sv-brand); }
.sv-privacy__policy > div {
  max-height: 200px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  color: var(--sv-ink-soft);
  overflow-y: auto;
  white-space: pre-wrap;
}

/* 동의 줄 — 체크 칸 옆에 [자세히 보기] (2026-10-07) */
.sv-privacy__agree { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sv-privacy__more {
  padding: 4px 10px;
  border: 1px solid var(--sv-line);
  border-radius: 999px;
  background: var(--sv-surface);
  color: var(--sv-ink-soft);
  font-size: calc(13px * var(--sv-scale, 1));
  cursor: pointer;
}
.sv-privacy__more:hover { border-color: var(--sv-brand); color: var(--sv-brand); }
.sv-dialog.sv-privacy__dialog { width: min(100% - 32px, 640px); max-height: calc(100vh - 48px); overflow-y: auto; }
.sv-privacy__sub { margin: 16px 0 0; font-size: calc(15px * var(--sv-scale, 1)); }
.sv-privacy__table { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: calc(14px * var(--sv-scale, 1)); }
.sv-privacy__table th, .sv-privacy__table td { padding: 8px 10px; border: 1px solid var(--sv-line); text-align: left; vertical-align: top; }
.sv-privacy__table th { width: 30%; background: #fafbfc; font-weight: 700; white-space: nowrap; }
.sv-privacy__own {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  font-size: calc(13px * var(--sv-scale, 1));
  white-space: pre-wrap;
}
.sv-privacy__site iframe { display: block; width: 100%; height: 45vh; margin: 12px 0 6px; border: 1px solid var(--sv-line); border-radius: 10px; }
.sv-privacy__site .sv-link { font-size: calc(13px * var(--sv-scale, 1)); }

.sv-privacy__box {
  max-height: 160px;
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  background: #fafbfc;
  color: var(--sv-ink-soft);
  font-size: calc(14px * var(--sv-scale, 1));
  overflow-y: auto;
  white-space: pre-wrap;
}

.sv-submit { margin-top: 24px; }

.sv-notice {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--sv-line);
  border-left: 4px solid var(--sv-brand);
  border-radius: 10px;
  background: var(--sv-surface);
  font-size: calc(15px * var(--sv-scale, 1));
}

.sv-notice.is-error { border-left-color: var(--sv-danger); color: var(--sv-danger); }