/* ───────────────────────────────────────────────────────────
   오빠두 설문 폼 (프론트)
   design_handoff_survey_form 기반 — 애플 키노트풍 단일 화이트 카드
   + 단일 그린 액센트. 색·radius 는 .oppadu-survey 스코프 --sv-* 토큰
   으로 1회 정의 후 참조(핸드오프 정확값, 사이트 --primary 와는 의도적 분리).
   모든 셀렉터는 .oppadu-survey 로 스코프 — 테마 input/button 스타일 override 방지.
   타이포·여백은 가독성 위주로 재조정(2026-06-24): 제목/라벨/별점 축소, 입력은
   16px 유지(iOS 포커스 줌 방지), 필드 간격·카드 패딩 압축.
   ─────────────────────────────────────────────────────────── */

/* ── 테마 컨테이너/사이드바 무력화 (설문 페이지 전체 폭 보장) ── */
/* 가로 스크롤 방지: 아래 .oppadu-survey 의 100vw 풀블리드가 스크롤바 폭만큼 넘쳐
   가로 스크롤바가 생기는 것을 차단(설문 페이지에만 적용) */
body.single-survey {
	overflow-x: hidden;
}
body.single-survey #right-sidebar,
body.single-survey #left-sidebar,
body.single-survey .widget-area {
	display: none;
}
body.single-survey #primary,
body.single-survey .content-area {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
}
body.single-survey .site-content,
body.single-survey #content {
	padding: 0;
}

.oppadu-survey {
	/* ── 색 (핸드오프 정확값) ── */
	--sv-accent: #15875A;
	--sv-accent-tint: #eaf4ef;
	--sv-accent-text: #0e4a33;
	--sv-text: #10130f;
	--sv-text-2: #6b7670;
	--sv-text-muted: #8a938d;
	--sv-text-faint: #9aa39c;
	--sv-placeholder: #b3bab4;
	--sv-page-bg: #f0efea;
	--sv-card-bg: #ffffff;
	--sv-fill: #fafbfa;
	--sv-border-input: #dfe2df;
	--sv-border-row: #d8dcd9;
	--sv-border-mark: #c2c8c4;
	--sv-hairline: #eceeec;
	--sv-dark: #10130f;
	--sv-star-empty: #dde1de;
	--sv-danger: #d14343;
	--sv-highlight: rgba(21, 135, 90, .22); /* 굵은 글씨 형광펜 밑줄 */

	/* ── radius ── */
	--sv-card-radius: 20px;
	--sv-radius: 11px;
	--sv-radius-cell: 9px;
	--sv-radius-badge: 7px;
	--sv-radius-mark: 6px;
	--sv-radius-btn: 13px;

	/* ── 기타 ── */
	--sv-shadow: 0 4px 24px rgba(20, 25, 20, .07), 0 1px 3px rgba(20, 25, 20, .06);
	--sv-card-w: 720px;
	--sv-trans: .12s;
	--sv-mono: 'SF Mono', ui-monospace, Menlo, monospace;

	/* ── 마감일 표시(.sv-dl) ── */
	--sv-dl-date-size: 13px;
	--sv-dl-gap-below: 24px;

	/* ── 마감 플립 카운터(.sv-fc) ── */
	--sv-fc-card-w: 76px;
	--sv-fc-card-h: 92px;
	--sv-fc-gap: 12px;
	--sv-fc-num-size: 52px;
	--sv-fc-radius: 11px;
	--sv-fc-flip: 0.62s;
	--sv-fc-card-bg: #eef1ee;
	--sv-fc-digit: #181c18;
	--sv-fc-leaf-top: linear-gradient(180deg,#ffffff 0%,#f4f6f4 100%);
	--sv-fc-leaf-bot: linear-gradient(180deg,#f0f2f0 0%,#e7eae7 100%);
	--sv-fc-hinge-line: rgba(20,25,20,.16);
	--sv-fc-bevel: 0 1px 0 rgba(255,255,255,.85) inset, 0 -1px 0 rgba(20,25,20,.05) inset;
	--sv-fc-shadow: 0 2px 6px rgba(20,25,20,.10), 0 0 0 1px rgba(20,25,20,.06);
	--sv-fc-fold: rgba(20,25,20,.30);

	/* 뷰포트 전체 폭으로 break-out (테마 컨테이너 무관, 카드는 가운데 정렬) */
	box-sizing: border-box;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);

	background: var(--sv-page-bg);
	padding: 48px 20px 64px;
	display: flex;
	justify-content: center;
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--sv-text);
	-webkit-font-smoothing: antialiased;
}

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

.oppadu-survey .sv-container {
	width: 100%;
	max-width: var(--sv-card-w);
}

/* ─────────────── 카드 ─────────────── */
.oppadu-survey .sv-card {
	position: relative;
	background: var(--sv-card-bg);
	border-radius: var(--sv-card-radius);
	box-shadow: var(--sv-shadow);
	overflow: hidden;
	animation: svFadeUp .5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes svFadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── 히어로 이미지 (풀블리드, 카드 상단) ── */
.oppadu-survey .sv-hero { margin: 0; line-height: 0; }

.oppadu-survey .sv-hero-img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

/* ── 본문 ── */
.oppadu-survey .sv-body { padding: 40px 44px 44px; }

/* ─────────────── 인트로 ─────────────── */
.oppadu-survey .sv-intro { margin: 0; }

.oppadu-survey .sv-eyebrow {
	font-family: var(--sv-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-accent);
	margin: 0 0 11px;
}

.oppadu-survey .sv-title {
	font-size: 35px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.4;
	color: var(--sv-text);
	margin: 0;
}

.oppadu-survey .sv-desc {
	font-size: 16px;
	line-height: 1.65;
	color: var(--sv-text-2);
	margin: 14px 0 0;
}
.oppadu-survey .sv-desc p { margin: 0 0 .6em; }
.oppadu-survey .sv-desc p:last-child { margin-bottom: 0; }

/* ── divider ── */
.oppadu-survey .sv-divider {
	height: 1px;
	border: 0;
	background: var(--sv-hairline);
	margin: 26px 0;
}

/* ─────────────── 폼 ─────────────── */
.oppadu-survey .sv-form { margin: 0; }

.oppadu-survey .sv-field { margin-bottom: 24px; }

.oppadu-survey .sv-label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--sv-text);
	line-height: 1.45;
	margin: 0 0 8px;
}
.oppadu-survey .sv-label .sv-optional {
	font-size: 13px;
	font-weight: 500;
	color: var(--sv-border-mark);
	margin-left: 6px;
}
.oppadu-survey .sv-req { color: var(--sv-accent); margin-left: 2px; }

.oppadu-survey .sv-help {
	font-size: 13px;
	color: var(--sv-text-faint);
	line-height: 1.6;
	margin: -1px 0 11px;
}
.oppadu-survey .sv-help > :first-child { margin-top: 0; }
.oppadu-survey .sv-help > :last-child { margin-bottom: 0; }
.oppadu-survey .sv-help p { margin: 0 0 .6em; }
.oppadu-survey .sv-help img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 10px 0;
	border-radius: var(--sv-radius);
}
.oppadu-survey .sv-help a {
	color: var(--sv-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.oppadu-survey .sv-help ul,
.oppadu-survey .sv-help ol { margin: .4em 0 .6em; padding-left: 1.4em; }
.oppadu-survey .sv-help li { margin: .2em 0; }
/* WYSIWYG 본문(설명·보충설명)의 굵은 글씨 → 형광펜 밑줄 하이라이트.
   글자 아래 ~40% 만 칠해 형광펜으로 그은 듯한 효과, 줄바꿈 시 각 줄에 적용. */
.oppadu-survey .sv-desc strong,
.oppadu-survey .sv-desc b,
.oppadu-survey .sv-help strong,
.oppadu-survey .sv-help b {
	font-weight: 700;
	color: var(--sv-text);
	background-image: linear-gradient(transparent 60%, var(--sv-highlight) 60%);
	background-repeat: no-repeat;
	padding: 0 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ── 입력 (text / email / tel / textarea / select) — 테마 input 스타일 override ──
   font-size 16px 고정: 모바일 Safari 포커스 자동 줌 방지선. */
.oppadu-survey .sv-input {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--sv-border-input);
	border-radius: var(--sv-radius);
	font-size: 16px;
	font-family: inherit;
	line-height: 1.45;
	color: var(--sv-text);
	background: #fff;
	box-shadow: none;
	transition: border-color var(--sv-trans);
	appearance: none;
	-webkit-appearance: none;
}
.oppadu-survey .sv-input::placeholder { color: var(--sv-placeholder); opacity: 1; }
.oppadu-survey .sv-input:focus {
	outline: none;
	border-color: var(--sv-accent);
	box-shadow: none;
}

.oppadu-survey .sv-textarea {
	resize: none;
	min-height: 84px;
	line-height: 1.55;
}

/* 드롭다운 (커스텀 셰브론) */
.oppadu-survey .sv-select {
	padding-right: 42px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa39c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
}
.oppadu-survey .sv-select.is-placeholder { color: var(--sv-placeholder); }

/* ── 객관식 (라디오/체크박스 옵션 카드) ── */
.oppadu-survey .sv-options {
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.oppadu-survey .sv-options.sv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
}

.oppadu-survey .sv-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 14px;
	border: 1.5px solid var(--sv-border-row);
	border-radius: var(--sv-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color var(--sv-trans), background var(--sv-trans);
}
.oppadu-survey .sv-opt-check { padding: 11px 13px; }

/* 네이티브 input 시각적 숨김 (키보드 포커스 유지) */
.oppadu-survey .sv-opt input,
.oppadu-survey .sv-consent-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	clip: rect(0 0 0 0);
}

/* 레터 배지 (라디오) */
.oppadu-survey .sv-badge {
	flex: none;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--sv-border-mark);
	border-radius: var(--sv-radius-badge);
	font-family: var(--sv-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--sv-text-2);
	background: #fff;
	transition: background var(--sv-trans), border-color var(--sv-trans), color var(--sv-trans);
}

/* 체크박스 mark */
.oppadu-survey .sv-mark {
	flex: none;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--sv-border-mark);
	border-radius: var(--sv-radius-mark);
	background: #fff;
	transition: background var(--sv-trans), border-color var(--sv-trans);
}
.oppadu-survey .sv-mark::after {
	content: "✓";
	color: #fff;
	font-size: 13px;
	line-height: 1;
	opacity: 0;
}

.oppadu-survey .sv-opt-label {
	flex: 1;
	font-size: 15px;
	font-weight: 400;
	color: var(--sv-text);
}

/* 우측 체크 글리프 (라디오 선택 표시) */
.oppadu-survey .sv-check {
	margin-left: auto;
	color: var(--sv-accent);
	font-size: 16px;
	line-height: 1;
	opacity: 0;
}

/* 선택 상태 (:has 지원 브라우저) */
.oppadu-survey .sv-opt:has(input:checked) {
	border-color: var(--sv-accent);
	background: var(--sv-accent-tint);
}
.oppadu-survey .sv-opt:has(input:checked) .sv-opt-label {
	color: var(--sv-accent-text);
	font-weight: 500;
}
.oppadu-survey .sv-opt:has(input:checked) .sv-badge {
	background: var(--sv-accent);
	border-color: var(--sv-accent);
	color: #fff;
}
.oppadu-survey .sv-opt:has(input:checked) .sv-mark {
	background: var(--sv-accent);
	border-color: var(--sv-accent);
}
.oppadu-survey .sv-opt:has(input:checked) .sv-mark::after { opacity: 1; }
.oppadu-survey .sv-opt:has(input:checked) .sv-check { opacity: 1; }

/* 키보드 포커스 링 */
.oppadu-survey .sv-opt:has(input:focus-visible),
.oppadu-survey .sv-consent:has(input:focus-visible) {
	box-shadow: 0 0 0 3px var(--sv-accent-tint);
}

/* ── 별점 ── */
.oppadu-survey .sv-rating {
	display: flex;
	align-items: center;
	gap: 12px;
}
.oppadu-survey .sv-stars { display: flex; gap: 9px; }
.oppadu-survey .sv-star {
	background: none;
	border: none;
	padding: 0;
	font-size: 34px;
	line-height: 1;
	color: var(--sv-star-empty);
	cursor: pointer;
	box-shadow: none;
	transition: color .1s;
}
.oppadu-survey .sv-star.is-on,
.oppadu-survey .sv-star.is-hover { color: var(--sv-accent); }
.oppadu-survey .sv-rating-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--sv-accent);
}

/* ── NPS (0–10) ── */
.oppadu-survey .sv-nps-cells {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.oppadu-survey .sv-cell {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--sv-border-row);
	border-radius: var(--sv-radius-cell);
	background: #fff;
	font-size: 15px;
	font-weight: 400;
	color: var(--sv-text-2);
	cursor: pointer;
	box-shadow: none;
	transition: border-color var(--sv-trans), background var(--sv-trans);
}
.oppadu-survey .sv-cell.is-on {
	border-color: var(--sv-accent);
	background: var(--sv-accent-tint);
	color: var(--sv-accent-text);
	font-weight: 700;
	font-size: 16px;
}
.oppadu-survey .sv-nps-labels {
	display: flex;
	justify-content: space-between;
	max-width: 522px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--sv-text-faint);
}

/* ── 개인정보 동의 박스 ── */
.oppadu-survey .sv-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid var(--sv-hairline);
	border-radius: var(--sv-radius-btn);
	background: var(--sv-fill);
	cursor: pointer;
	margin: 0;
}
.oppadu-survey .sv-consent-mark {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--sv-border-mark);
	border-radius: var(--sv-radius-mark);
	background: #fff;
	transition: background var(--sv-trans), border-color var(--sv-trans);
}
.oppadu-survey .sv-consent-mark::after {
	content: "✓";
	color: #fff;
	font-size: 12px;
	line-height: 1;
	opacity: 0;
}
.oppadu-survey .sv-consent:has(input:checked) .sv-consent-mark {
	background: var(--sv-accent);
	border-color: var(--sv-accent);
}
.oppadu-survey .sv-consent:has(input:checked) .sv-consent-mark::after { opacity: 1; }
.oppadu-survey .sv-consent-text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--sv-text-2);
}
.oppadu-survey .sv-consent-text strong { color: var(--sv-text); font-weight: 600; }
.oppadu-survey .sv-consent-link {
	color: var(--sv-accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── 제출 ── */
.oppadu-survey .sv-submit-wrap { margin-top: 22px; }
.oppadu-survey .sv-submit {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--sv-accent);
	color: #fff;
	border: none;
	border-radius: var(--sv-radius-btn);
	padding: 15px 0;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	box-shadow: none;
	transition: background var(--sv-trans), opacity var(--sv-trans);
}
.oppadu-survey .sv-submit .sv-arrow { font-size: 17px; }
.oppadu-survey .sv-submit:hover { background: var(--sv-accent-text); color: #fff; }
.oppadu-survey .sv-submit:disabled { opacity: .55; cursor: default; }
.oppadu-survey .sv-submit-note {
	text-align: center;
	font-size: 12.5px;
	color: var(--sv-text-faint);
	margin: 13px 0 0;
}

.oppadu-survey .sv-message {
	text-align: center;
	color: var(--sv-danger);
	font-weight: 600;
	font-size: 14px;
	margin-top: 14px;
}

/* ── 에러 상태 ── */
.oppadu-survey .sv-input.sv-error { border-color: var(--sv-danger); }

/* 이전 발송 이력으로 잠긴 이메일(자동입력·마스킹) + 안내 */
.oppadu-survey .sv-input.sv-locked {
	background: var(--sv-fill);
	color: var(--sv-text-2);
	cursor: not-allowed;
	letter-spacing: 0.04em;
}
.oppadu-survey .sv-locked-note {
	margin: 8px 0 0;
	padding: 9px 12px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--sv-accent-text);
	background: var(--sv-accent-tint);
	border-radius: var(--sv-radius);
}
.oppadu-survey .sv-options.sv-error,
.oppadu-survey .sv-rating.sv-error,
.oppadu-survey .sv-nps.sv-error,
.oppadu-survey .sv-consent.sv-error {
	outline: 1.5px solid var(--sv-danger);
	outline-offset: 6px;
	border-radius: var(--sv-radius);
}

/* ── 게이트 (마감/회원전용/중복) ── */
.oppadu-survey .sv-gate {
	margin-top: 24px;
	padding: 24px;
	border-radius: var(--sv-radius);
	background: var(--sv-fill);
	text-align: center;
	font-size: 15px;
	line-height: 1.7;
	color: var(--sv-text-2);
}
.oppadu-survey .sv-gate a {
	color: var(--sv-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════
   마감 카운트다운 — 물리 split-flap(플립 보드), 화이트 카드 / 다크 숫자
   dualwindow 기법: 윗창/아랫창(overflow:hidden) + 단일 회전 잎(앞·뒷면).
   루트는 .sv-deadline 유지(만료 스왑 계약), 스타일은 .sv-fc 로 스코프.
   ──────────────────────────────────────────────────────────── */

/* 루트(.sv-deadline.sv-fc): 기존 배너 스타일을 compound 로 무력화 */
.oppadu-survey .sv-deadline.sv-fc {
	display: block;
	margin: 0 0 var(--sv-dl-gap-below);
	padding: 0 0 22px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--sv-hairline);
	color: var(--sv-text);
	font-size: inherit;
	line-height: 1.4;
	text-align: center;
	flex-wrap: initial;
	justify-content: initial;
	align-items: initial;
	gap: 0;
}

/* 작은 대문자 라벨 — 유일한 액센트 */
.oppadu-survey .sv-fc-eyebrow {
	margin: 0 0 14px;
	font-family: var(--sv-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sv-accent);
}

/* 보드: 4개 유닛 한 줄, 줄바꿈/오버플로 없이 축소.
   visibility:hidden 으로 시작 → JS init() 가 실제 값 세팅 후 노출(첫 프레임 '00' 깜빡임 방지). */
.oppadu-survey .sv-fc-board {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--sv-fc-gap);
	max-width: 100%;
	visibility: hidden;
}
.oppadu-survey .sv-fc-board.is-ready {
	visibility: visible;
}

.oppadu-survey .sv-fc-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* 한글 단위 라벨 */
.oppadu-survey .sv-fc-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--sv-text-muted);
	white-space: nowrap;
}

/* ── 카드: 윗창/아랫창/잎을 겹치는 3D 스테이지 ── */
.oppadu-survey .sv-fc-card {
	position: relative;
	width: var(--sv-fc-card-w);
	height: var(--sv-fc-card-h);
	border-radius: var(--sv-fc-radius);
	background: var(--sv-fc-card-bg);
	box-shadow: var(--sv-fc-shadow);
	perspective: 320px;
	-webkit-perspective: 320px;
	font-family: var(--sv-mono);
	user-select: none;
	-webkit-user-select: none;
}

/* ── 두 정적 창(윗/아랫): overflow:hidden, 각각 글자의 절반만 노출 ── */
.oppadu-survey .sv-fc-top,
.oppadu-survey .sv-fc-bot {
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.oppadu-survey .sv-fc-top {
	top: 0;
	border-radius: var(--sv-fc-radius) var(--sv-fc-radius) 0 0;
	background: var(--sv-fc-leaf-top);
	box-shadow: var(--sv-fc-bevel);
}

.oppadu-survey .sv-fc-bot {
	bottom: 0;
	border-radius: 0 0 var(--sv-fc-radius) var(--sv-fc-radius);
	background: var(--sv-fc-leaf-bot);
	box-shadow: var(--sv-fc-bevel);
}

/* ── 숫자: 전체 카드 높이 inner. 창이 절반씩 클리핑 → 점프 없음 ── */
.oppadu-survey .sv-fc-num {
	position: absolute;
	left: 0;
	right: 0;
	height: var(--sv-fc-card-h);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--sv-fc-num-size);
	font-weight: 800;
	line-height: var(--sv-fc-card-h);
	letter-spacing: 0.02em;
	color: var(--sv-fc-digit);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	text-align: center;
	white-space: nowrap;
}

/* 윗창의 숫자는 카드 상단 기준, 아랫창의 숫자는 윗절반만큼 끌어올림 */
.oppadu-survey .sv-fc-top .sv-fc-num { top: 0; }
.oppadu-survey .sv-fc-bot .sv-fc-num { top: calc(-1 * var(--sv-fc-card-h) / 2); }

/* ── 회전 잎: 윗절반 위에 올라가며 경첩(아래 모서리) 기준 접힘 ──
   resting 상태에 transition:none 명시 → -180→0 복귀가 절대 역방향 애니되지 않음(리뷰 fix).
   translateZ(0.01px) → 힌지 서브픽셀 솔기/z-fighting 완화. */
.oppadu-survey .sv-fc-leaf {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-origin: bottom center;
	-webkit-transform-origin: bottom center;
	transform: rotateX(0deg) translateZ(0.01px);
	transition: none;
	z-index: 2;
	pointer-events: none;
}

/* 잎 양면: 각자 overflow 창. 앞=이전 윗절반 / 뒤=새 아랫절반 */
.oppadu-survey .sv-fc-leaf-face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.oppadu-survey .sv-fc-leaf-front {
	border-radius: var(--sv-fc-radius) var(--sv-fc-radius) 0 0;
	background: var(--sv-fc-leaf-top);
	box-shadow: var(--sv-fc-bevel);
	transform: rotateX(0deg);
}

/* 뒷면: 180° 미리 돌려 backface 로 사용. 새 값의 아랫절반을 노출 */
.oppadu-survey .sv-fc-leaf-back {
	border-radius: 0 0 var(--sv-fc-radius) var(--sv-fc-radius);
	background: var(--sv-fc-leaf-bot);
	box-shadow: var(--sv-fc-bevel);
	transform: rotateX(180deg);
}

/* 잎 앞면 숫자(윗절반): 카드 상단 정렬 */
.oppadu-survey .sv-fc-leaf-front .sv-fc-num { top: 0; }
/* 잎 뒷면 숫자(아랫절반): 윗절반만큼 끌어올려 아랫부분 노출 */
.oppadu-survey .sv-fc-leaf-back .sv-fc-num { top: calc(-1 * var(--sv-fc-card-h) / 2); }

/* 접힘 그림자 오버레이: 잎이 기울수록 어두워짐(물리감). resting 0, transition 없음. */
.oppadu-survey .sv-fc-leaf-face::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sv-fc-fold);
	opacity: 0;
	pointer-events: none;
}

/* ── 가운데 경첩선 (풀폭 → 카드 가장자리 솔기까지 마스킹, 리뷰 fix) ── */
.oppadu-survey .sv-fc-hinge {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% - 1px);
	height: 2px;
	z-index: 3;
	background: linear-gradient(90deg,
		var(--sv-fc-hinge-line) 0%,
		var(--sv-fc-hinge-line) 100%);
	pointer-events: none;
}

/* ── 플립 활성: 잎을 -180° 로 접고, 면별 그림자 페이드(통일 타이밍) ── */
.oppadu-survey .sv-fc-card.is-flipping .sv-fc-leaf {
	transition: transform var(--sv-fc-flip) cubic-bezier(.36, .12, .22, 1);
	transform: rotateX(-180deg) translateZ(0.01px);
}

/* 앞면(이전 윗절반): 접히는 동안 전체 시간에 걸쳐 어두워짐(90° 이후 backface 숨김) */
.oppadu-survey .sv-fc-card.is-flipping .sv-fc-leaf-front::after {
	transition: opacity var(--sv-fc-flip) linear;
	opacity: .55;
}
/* 뒷면(새 아랫절반): 어둡게 시작 → 펴지며 밝아짐(통일 타이밍으로 90°에서 연속) */
.oppadu-survey .sv-fc-leaf-back::after { opacity: .55; }
.oppadu-survey .sv-fc-card.is-flipping .sv-fc-leaf-back::after {
	transition: opacity var(--sv-fc-flip) linear;
	opacity: 0;
}

/* ── 마감 일시 캡션 ── */
.oppadu-survey .sv-fc-caption {
	margin: 16px 0 0;
	font-size: var(--sv-dl-date-size);
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--sv-text-2);
	word-break: keep-all;
}

/* 스크린리더 전용(접근성 라벨) */
.oppadu-survey .sv-fc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── 만료 스왑 보강: expire() 가 .sv-deadline 제거 → .sv-fc.sv-gate 잔존.
   기본 .sv-gate(배경/패딩/정렬)가 닫힘 메시지를 스타일. flip 레이아웃 중화. ── */
.oppadu-survey .sv-gate.sv-fc {
	display: block;
	margin-top: 24px;
	padding: 24px;
	border-bottom: 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.7;
	color: var(--sv-text-2);
}

/* ── 반응형: 한 줄 유지하며 축소(짝수 px 로 50% 가 정수 → 솔기 방지) ── */
@media (max-width: 560px) {
	.oppadu-survey .sv-deadline.sv-fc {
		--sv-fc-card-w: 64px;
		--sv-fc-card-h: 80px;
		--sv-fc-num-size: 44px;
		--sv-fc-gap: 9px;
	}
}

@media (max-width: 480px) {
	.oppadu-survey .sv-deadline.sv-fc {
		--sv-fc-card-w: 19vw;
		--sv-fc-card-h: 24vw;
		--sv-fc-num-size: 12.5vw;
		--sv-fc-gap: 2.2vw;
		margin-bottom: 22px;
		padding-bottom: 16px;
	}
	.oppadu-survey .sv-fc-label { font-size: 11px; }
	.oppadu-survey .sv-fc-eyebrow { margin-bottom: 11px; }
}

@media (max-width: 360px) {
	.oppadu-survey .sv-deadline.sv-fc { --sv-fc-num-size: 11vw; }
}

/* ── 모션 최소화: 플립 비활성, 즉시 스왑(JS 가 init() 로 네 창 동시 세팅) ── */
@media (prefers-reduced-motion: reduce) {
	.oppadu-survey .sv-fc-card.is-flipping .sv-fc-leaf {
		transition: none;
		transform: rotateX(0deg) translateZ(0.01px);
	}
	.oppadu-survey .sv-fc-leaf-face::after { display: none; }
}

/* ── 감사 오버레이 (카드 전체 덮음) ── */
.oppadu-survey .sv-thankyou {
	position: absolute;
	inset: 0;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 48px;
}
.oppadu-survey .sv-thankyou[hidden] { display: none; }
/* 제출 후: 폼/히어로를 감추고 카드를 감사 내용 높이에 딱 맞게 축소(거대한 흰 박스·스크롤 방지) */
.oppadu-survey .sv-card.is-submitted > .sv-hero,
.oppadu-survey .sv-card.is-submitted > .sv-body { display: none; }
.oppadu-survey .sv-card.is-submitted .sv-thankyou {
	position: static;
	padding: 56px 48px;
}
.oppadu-survey .sv-ty-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--sv-accent);
	margin-bottom: 20px;
	animation: svTyPop .55s cubic-bezier(.22, 1, .36, 1) both;
}
.oppadu-survey .sv-ty-check {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: #fff;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 22;
	stroke-dashoffset: 22;
	animation: svTyDraw .34s .26s cubic-bezier(.65, 0, .45, 1) forwards;
}
/* 토스풍: 원이 뾰롱~ 튀어나오고(스프링) 체크가 그려짐 → 텍스트가 살짝 떠오름 */
@keyframes svTyPop {
	0%   { transform: scale(0);    opacity: 0; }
	45%  { transform: scale(1.18); opacity: 1; }
	68%  { transform: scale(0.9); }
	84%  { transform: scale(1.05); }
	100% { transform: scale(1); }
}
@keyframes svTyDraw {
	to { stroke-dashoffset: 0; }
}
@keyframes svTyRise {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: translateY(0); }
}
.oppadu-survey .sv-ty-title { animation: svTyRise .4s .34s both; }
.oppadu-survey .sv-ty-msg { animation: svTyRise .4s .44s both; }
.oppadu-survey .sv-ty-download { animation: svTyRise .4s .54s both; }
.oppadu-survey .sv-ty-title {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--sv-text);
	margin: 0 0 12px;
}
.oppadu-survey .sv-ty-msg {
	font-size: 16px;
	line-height: 1.6;
	color: var(--sv-text-2);
	max-width: 440px;
	margin: 0;
}
.oppadu-survey .sv-ty-msg > :first-child { margin-top: 0; }
.oppadu-survey .sv-ty-msg > :last-child { margin-bottom: 0; }
.oppadu-survey .sv-ty-msg p { margin: 0 0 10px; }
.oppadu-survey .sv-ty-msg a { color: var(--sv-accent); text-decoration: underline; }
.oppadu-survey .sv-ty-msg ul,
.oppadu-survey .sv-ty-msg ol { margin: 0 0 10px; padding-left: 22px; text-align: left; }
.oppadu-survey .sv-ty-note { margin: 14px 0 0; font-size: 14.5px; color: var(--sv-text-muted); }
.oppadu-survey .sv-ty-download {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 13px 26px;
	background: var(--sv-accent);
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none !important;
	border-radius: var(--sv-radius-btn);
	transition: background var(--sv-trans);
}
.oppadu-survey .sv-ty-download:hover { background: var(--sv-accent-text); color: #fff !important; }

/* ── honeypot ── */
.oppadu-survey .sv-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ─────────────── 유튜브 닉네임 + 댓글 확인 ─────────────── */
.oppadu-survey .sv-yt-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}
.oppadu-survey .sv-yt-row .sv-yt-input { flex: 1 1 auto; }
.oppadu-survey .sv-yt-check {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 0 16px;
	border: 1.5px solid var(--sv-accent);
	border-radius: var(--sv-radius);
	background: var(--sv-accent-tint);
	color: var(--sv-accent-text);
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background var(--sv-trans), color var(--sv-trans);
}
.oppadu-survey .sv-yt-check:hover { background: var(--sv-accent); color: #fff; }
.oppadu-survey .sv-yt-check:disabled { opacity: .6; cursor: default; }
.oppadu-survey .sv-field.sv-error .sv-yt-input { border-color: var(--sv-danger); }
.oppadu-survey .sv-yt-guide {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 12px 0 0;
	border-radius: var(--sv-radius);
	border: 1px solid var(--sv-border-input);
}

.oppadu-survey .sv-yt-result {
	margin-top: 11px;
	padding: 14px 16px;
	border: 1.5px solid var(--sv-border-input);
	border-radius: var(--sv-radius);
	background: var(--sv-fill);
	font-size: 14px;
	line-height: 1.6;
}
.oppadu-survey .sv-yt-result.is-found {
	border-color: var(--sv-accent);
	background: var(--sv-accent-tint);
}
.oppadu-survey .sv-yt-result.is-error { border-color: var(--sv-danger); }
.oppadu-survey .sv-yt-result .sv-yt-msg { color: var(--sv-text-2); margin: 0; white-space: pre-line; }
.oppadu-survey .sv-yt-result.is-error .sv-yt-msg { color: var(--sv-danger); }
.oppadu-survey .sv-yt-found-head {
	font-weight: 700;
	color: var(--sv-accent-text);
	margin: 0 0 8px;
}
.oppadu-survey .sv-yt-comment {
	padding: 9px 0 0;
	margin-top: 9px;
	border-top: 1px solid rgba(21, 135, 90, .18);
}
.oppadu-survey .sv-yt-comment:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.oppadu-survey .sv-yt-comment-meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
}
.oppadu-survey .sv-yt-author { font-weight: 600; color: var(--sv-text); }
.oppadu-survey .sv-yt-date { font-size: 12.5px; color: var(--sv-text-muted); }
.oppadu-survey .sv-yt-comment-text {
	color: var(--sv-text-2);
	white-space: pre-line;
	word-break: break-word;
}

.oppadu-survey .sv-yt-gate-note { color: var(--sv-accent-text); font-weight: 600; font-size: 13px; }

/* ─────────────── 태블릿 ─────────────── */
@media (max-width: 768px) {
	.oppadu-survey { padding: 36px 16px 56px; }
	.oppadu-survey .sv-body { padding: 34px 32px 38px; }
	.oppadu-survey .sv-hero-img { height: 200px; }
}

/* ─────────────── 모바일 ─────────────── */
@media (max-width: 560px) {
	.oppadu-survey { padding: 0; }
	.oppadu-survey .sv-container { max-width: none; }
	.oppadu-survey .sv-card { border-radius: 0; box-shadow: none; }
	.oppadu-survey .sv-hero-img { height: 180px; }
	.oppadu-survey .sv-body { padding: 26px 18px 34px; }
	.oppadu-survey .sv-title { font-size: 24px; }
	.oppadu-survey .sv-desc { font-size: 15px; }
	.oppadu-survey .sv-label { font-size: 15px; }
	.oppadu-survey .sv-divider { margin: 22px 0; }
	.oppadu-survey .sv-field { margin-bottom: 22px; }
	.oppadu-survey .sv-options.sv-grid { grid-template-columns: 1fr; }
	.oppadu-survey .sv-star { font-size: 32px; }
	.oppadu-survey .sv-stars { gap: 8px; }
	.oppadu-survey .sv-cell { width: 38px; height: 38px; }
	.oppadu-survey .sv-thankyou { padding: 0 26px; }
	.oppadu-survey .sv-card.is-submitted .sv-thankyou { padding: 44px 24px; }
	.oppadu-survey .sv-ty-title { font-size: 24px; }
	.oppadu-survey .sv-ty-icon { width: 52px; height: 52px; }
	.oppadu-survey .sv-ty-check { width: 28px; height: 28px; }
	.oppadu-survey .sv-yt-row { flex-direction: column; }
	.oppadu-survey .sv-yt-check { padding: 12px 16px; }
}

/* 모션 최소화 선호 */
@media (prefers-reduced-motion: reduce) {
	.oppadu-survey .sv-card,
	.oppadu-survey .sv-ty-icon,
	.oppadu-survey .sv-ty-check,
	.oppadu-survey .sv-ty-title,
	.oppadu-survey .sv-ty-msg,
	.oppadu-survey .sv-ty-download { animation: none; }
	.oppadu-survey .sv-ty-check { stroke-dashoffset: 0; }
}