/* ui-play-extras.css — 참여 화면의 추가 요소(관문·완료·채널·배너·영상·글씨 변수·미리보기). split from ui.css (RULE-code-19) */

/* ─── 참여 화면의 추가 요소 ───────────────── */
/* 참여 비밀번호 관문 — 맞출 때까지 문항을 보여 주지 않는다 */
.sv-gate__row { display: flex; gap: 8px; margin-top: 12px; }
.sv-gate__row .sv-input { flex: 1; }
.sv-gate__error { margin: 8px 0 0; color: var(--sv-danger); font-size: calc(14px * var(--sv-scale, 1)); }

/* 문항 안내 이미지 — 작은 그림을 늘려 키우지 않는다 */
.sv-q__figure { margin: 0 0 12px; text-align: center; }
.sv-q__figure img {
  max-width: 100%;
  max-height: 360px;
  border-radius: 10px;
}

/* 파일 문항의 서식 내려받기 */
.sv-q__form { margin: 0 0 8px; font-size: calc(14px * var(--sv-scale, 1)); }
.sv-q__form a { color: var(--sv-brand); font-weight: 600; }
.sv-q__form a:hover { text-decoration: underline; }

/* 제출을 마친 뒤 — 완료 이미지·결과·공유 */
.sv-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 24px;
  border-radius: var(--sv-radius);
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow);
  text-align: center;
}

.sv-done__image { margin: 0; width: 100%; }
.sv-done__image img { max-width: 100%; max-height: 420px; border-radius: 10px; }

.sv-done__score { margin: 0; font-size: calc(18px * var(--sv-scale, 1)); color: var(--sv-ink-soft); }
.sv-done__score strong { font-size: calc(32px * var(--sv-scale, 1)); color: var(--sv-brand); }

.sv-done__text { color: var(--sv-ink); font-size: calc(17px * var(--sv-scale, 1)); line-height: 1.7; white-space: pre-wrap; }

.sv-done__share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.sv-done__share > span { color: var(--sv-ink-soft); font-size: calc(14px * var(--sv-scale, 1)); }

/* 채널 바로가기 — 꼬리말 아래 한 줄 */
.sv-play__channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 0 32px;
}
.sv-play__channels a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  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));
}
.sv-play__channels a:hover { border-color: var(--sv-brand); color: var(--sv-brand); }

/* 상단 배너 — 설문을 연 기관이 제 띠를 올려 둘 수 있다 */
.sv-play__banner { margin: 0 0 12px; }
.sv-play__banner img { display: block; width: 100%; border-radius: var(--sv-radius); }

.sv-play__cover {
  margin: 0 0 16px;
  border-radius: var(--sv-radius);
  overflow: hidden;
  box-shadow: var(--sv-shadow);
}

.sv-play__cover img { display: block; width: 100%; }

.sv-play__gift {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  background: #fffaf0;
  color: #7a4a06;
  font-size: calc(14px * var(--sv-scale, 1));
}

.sv-play__notice {
  margin: 16px 0;
  padding: 20px 24px;
  border: 1px solid var(--sv-line);
  border-left: 4px solid var(--sv-brand);
  border-radius: var(--sv-radius);
  background: var(--sv-surface);
}

.sv-play__notice-title { margin: 0 0 12px; font-size: calc(15px * var(--sv-scale, 1)); font-weight: 700; }
.sv-play__notice p { margin: 0 0 8px; color: var(--sv-ink-soft); font-size: calc(14px * var(--sv-scale, 1)); line-height: 1.6; white-space: pre-wrap; }
.sv-play__notice p:last-child { margin-bottom: 0; }

.sv-play__video { margin: 16px 0; }

.sv-play__video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--sv-radius);
  overflow: hidden;
  background: #000;
}

.sv-play__video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sv-play__video-desc { margin: 8px 0 0; color: var(--sv-ink-soft); font-size: calc(14px * var(--sv-scale, 1)); }

.sv-play__link { margin: 16px 0; font-size: calc(14px * var(--sv-scale, 1)); }
.sv-play__link a { color: var(--sv-brand-dark); font-weight: 600; }

.sv-play__org {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--sv-line);
  color: var(--sv-ink-soft);
  font-size: calc(13px * var(--sv-scale, 1));
  line-height: 1.6;
}

.sv-play__org-logo { max-height: 40px; margin-bottom: 8px; }
.sv-play__org p { margin: 0; }

/* 설문마다 정해 둘 수 있는 글씨 — 값이 없으면 기본을 쓴다 */
.sv-q__title {
  font-size: var(--sv-q-title-size, calc(18px * var(--sv-scale, 1)));
  text-align: var(--sv-q-title-align, left);
  font-family: var(--sv-q-title-font, var(--sv-font-base));
  font-weight: 700;
}

.sv-opt span {
  font-size: var(--sv-q-value-size, inherit);
  text-align: var(--sv-q-value-align, left);
  font-family: var(--sv-q-value-font, var(--sv-font-base));
}

/* 이미지 미리 보기 — 편집 화면에서 올리는 이미지는 모두 고르는 즉시 보인다 */
.sv-preview-box { margin-top: 8px; }
.sv-preview-box:empty { display: none; }
.sv-preview { display: block; max-width: 100%; max-height: 200px; border: 1px solid var(--sv-line); border-radius: 8px; object-fit: contain; background: #fff; }
.sv-preview--sm { width: 40px; height: 40px; max-height: none; object-fit: cover; border-radius: 6px; }
.sv-opt-edit__thumb { flex: 0 0 auto; display: inline-flex; }
.sv-opt-edit__thumb:empty { display: none; }