/* 역할: 응답 프론트 스타일 — 모바일 초프리미엄. tokens.css 변수 기반 + 노치/Safe-Area 정확 처리.
   viewport-fit=cover 사용 → 상단 헤더 env(safe-area-inset-top), 하단 네비 inset-bottom 보정(노치 침범 방지). */

/* hidden 속성은 어떤 display 규칙보다 우선 (버튼 노출 버그 방지) */
[hidden] { display: none !important; }

/* 하단 고정 네비가 실제로 차지하는 높이.
   ★ 예전에는 본문 아래 여백을 96px 로 못 박아 두었는데, 이 값에는 홈 인디케이터가 빠져 있었다.
     아이폰 X 이후(하단 바 34px)·갤럭시 제스처 바 환경에서는 그만큼 마지막 선택지가
     '다음' 버튼 뒤로 들어가 가려진다. 글자 크기를 키우면(A+) 네비가 더 높아져 더 가려진다.
   그래서 여백을 고정값이 아니라 변수로 두고, JS 가 네비의 실제 높이를 재서 이 값을 덮는다.
   여기 적힌 건 JS 가 아직 재기 전·JS 가 꺼진 환경에서 쓰는 안전한 하한이다. */
:root { --tk-nav-h: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* 구형 폴백: min-height 100vh → 지원 브라우저는 dvh 로 덮음 (iOS<15.4·구 안드로이드) */
.tellkorea-survey { display: flex; flex-direction: column; min-height: 100vh; min-block-size: 100dvh; background: var(--c-bg); }

/* 상단 헤더 2단 — safe-area 보정 + 진행 상태 상시 노출 */
.tellkorea-survey-top {
	position: sticky; top: 0; z-index: 10;
	padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
	padding-bottom: var(--sp-3);
	padding-inline: calc(var(--sp-4) + env(safe-area-inset-left, 0px)) calc(var(--sp-4) + env(safe-area-inset-right, 0px));
	background: var(--c-surface); border-block-end: 1px solid var(--c-line);
}
.tellkorea-top-row1 { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.tellkorea-top-row2 { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.tellkorea-top-row2 .tellkorea-progress { flex: 1; }
.tellkorea-step {
	flex: none; font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em;
	color: var(--c-brand-ink); background: rgba(14, 139, 161, .1);
	padding: 3px var(--sp-3); border-radius: var(--r-full); min-width: 3.2rem; text-align: center;
	font-variant-numeric: tabular-nums;
}
.tellkorea-brand {
	font-weight: 700; color: var(--c-brand-ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
	display: inline-flex; align-items: center; gap: var(--sp-2);
}
/* <picture> 가 flex 아이템이 되면서 로고 크기가 흔들리지 않게 — 실제 크기는 안쪽 img 가 정한다 */
.tellkorea-brand picture { display: flex; flex: none; }
.tellkorea-logo { width: 30px; height: 30px; flex: none; display: block; }
.tellkorea-top-controls { display: flex; gap: var(--sp-3); align-items: center; flex: none; }
.tellkorea-top-divider { width: 1px; height: 24px; background: var(--c-line); flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 언어 버튼 — 눈에 띄는 필(pill), 44px 타깃 */
.tellkorea-langbtn {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	min-height: 44px; min-block-size: 44px; padding: 0 var(--sp-4);
	border: 1.5px solid var(--c-brand); border-radius: var(--r-full);
	background: var(--c-surface); color: var(--c-brand-ink);
	font-size: var(--t-sm); font-weight: 600; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background var(--mo-fast) var(--ease);
}
.tellkorea-langbtn:hover { background: rgba(14, 139, 161, .08); }
.tellkorea-langbtn:focus-visible { outline: 2px solid var(--c-brand-ink); outline-offset: 2px; }
.tellkorea-langbtn .ic { width: 18px; height: 18px; flex: none; }
.tellkorea-langbtn .chev { width: 14px; height: 14px; flex: none; opacity: .7; }

/* 바텀시트 */
.tellkorea-sheet-backdrop {
	/* 물리 속성을 먼저 쓴다 — inset 한 줄만 쓰면 iOS 14.0 이하에서 백드롭이 펼쳐지지 않는다 */
	position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
	z-index: 40; background: rgba(15, 26, 36, .45);
	opacity: 0; transition: opacity var(--mo-base) var(--ease);
}
.tellkorea-sheet-backdrop.is-open { opacity: 1; }
.tellkorea-sheet {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
	background: var(--c-surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
	box-shadow: var(--sh-lg); max-height: 72vh; display: flex; flex-direction: column;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	transform: translateY(100%); transition: transform var(--mo-base) var(--ease);
}
.tellkorea-sheet.is-open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .tellkorea-sheet, .tellkorea-sheet-backdrop { transition: none; } }
@media (min-width: 640px) { /* 데스크톱: 중앙 카드형 */
	.tellkorea-sheet { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 60%) scale(.98); width: min(92vw, 26rem); border-radius: var(--r-lg); opacity: 0; }
	.tellkorea-sheet.is-open { transform: translate(-50%, 50%) scale(1); opacity: 1; }
}
.tellkorea-sheet-grab { width: 40px; height: 4px; border-radius: var(--r-full); background: var(--c-line); margin: var(--sp-3) auto 0; flex: none; }
.tellkorea-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-5) var(--sp-2); flex: none; }
.tellkorea-sheet-head h2 { font-size: var(--t-lg); margin: 0; }
.tellkorea-sheet-close {
	width: 40px; height: 40px; min-block-size: 40px; border: 0; border-radius: var(--r-full);
	background: var(--c-bg); color: var(--c-ink-soft); font-size: 22px; line-height: 1; cursor: pointer;
}
.tellkorea-sheet-close:hover { background: var(--c-line); }
.tellkorea-sheet-list { overflow-y: auto; padding: var(--sp-1) var(--sp-3) var(--sp-4); -webkit-overflow-scrolling: touch; }
.tellkorea-lang-item {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
	min-height: 52px; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
	color: var(--c-ink); text-decoration: none; font-size: var(--t-lg);
	-webkit-tap-highlight-color: transparent;
}
.tellkorea-lang-item:hover { background: var(--c-bg); }
.tellkorea-lang-item:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; }
.tellkorea-lang-item.is-current { color: var(--c-brand-ink); font-weight: 700; background: rgba(14, 139, 161, .08); }
.tellkorea-lang-item .chk { width: 22px; height: 22px; flex: none; color: var(--c-brand); }

.tellkorea-textsize { display: flex; gap: var(--sp-1); }
.tellkorea-textsize button {
	min-inline-size: 40px; min-block-size: 40px; border: 1px solid var(--c-line-ui);
	background: var(--c-surface); border-radius: var(--r-sm); cursor: pointer; font-size: var(--t-sm); color: var(--c-ink);
}
.tellkorea-textsize button[aria-pressed="true"] { background: var(--c-brand); color: var(--c-on-brand); border-color: transparent; }

.tellkorea-survey-main {
	flex: 1; inline-size: 100%; max-inline-size: 40rem; margin-inline: auto;
	padding: var(--sp-6) var(--sp-4) calc(var(--sp-8) + 96px);   /* 구형(변수 미지원) 하한 */
	padding-bottom: calc(var(--sp-8) + var(--tk-nav-h));          /* 실측 네비 높이 추종 */
	padding-inline: calc(var(--sp-4) + env(safe-area-inset-left, 0px)) calc(var(--sp-4) + env(safe-area-inset-right, 0px));
}
.tellkorea-center { display: grid; place-items: center; }

/* 시작 화면 — 브랜드를 한가운데 크게 세운다.
   max-width 를 vw 로 함께 걸어 두면 320px 같은 좁은 기기에서 로고가 화면을 잡아먹지 않는다
   (미디어쿼리를 하나 더 만드는 대신 한 줄로 끝낸다). height:auto 라 비율은 어디서나 유지된다. */
.tellkorea-intro-logo { margin: 0 0 var(--sp-5); text-align: center; }
.tellkorea-intro-logo img {
	width: 96px; height: 96px; max-width: 28vw; height: auto;
	display: inline-block; border-radius: var(--r-lg);
}
/* 로고를 가운데 두었으니 제목·설명도 함께 가운데로 — 시작 화면만 해당한다.
   국가 선택 라벨은 왼쪽 그대로 둔다(입력 항목은 왼쪽 정렬이 읽기 쉽다). */
.tellkorea-screen[data-screen="intro"] .tellkorea-q-title,
.tellkorea-screen[data-screen="intro"] .tellkorea-q-desc { text-align: center; }

/* ── 인천 여행 서비스 안내 (시작·완료 화면) ──
   설문만 받고 끝내지 않고, 관광객이 지금 바로 쓸 수 있는 곳으로 잇는다.
   폭을 가득 쓰고 위아래로 쌓는다 — 좁은 화면에서 한 손 엄지로 누르기 좋고, 줄이 흐트러지지 않는다.
   두 서비스는 색으로 가른다. 같은 색이면 버튼이 둘인지 하나가 접힌 건지 헷갈린다.
   ★ 색을 뒤집었다 — 진한 배경 + 흰 글자 → 파스텔 배경 + 진한 글자(더스티 로즈·세이지).
     계열(분홍·초록)은 그대로 두어 어느 서비스인지 알아보는 데 지장이 없고,
     대비는 흰 글자 때(5.46:1 · 5.30:1)보다 올라간다 — 제목 6.85:1 · 6.75:1.
     색을 고른 근거와 명도 산출 방식은 tokens.css 의 --c-coupon-* 주석에 적었다.
   설명줄은 불투명도로 흐리게 하던 방식을 버리고 색을 따로 뒀다.
     파스텔 배경에서 불투명도를 낮추면 글자가 배경 쪽으로 밝아져 대비가 깎인다.
     별도 색으로 두니 부드러우면서 5.77:1 · 5.61:1 로 WCAG AA(4.5:1) 위에 남는다.
   테두리를 새로 넣은 이유
     파스텔은 흰 페이지 배경과 밝기가 거의 같아 카드 경계가 보이지 않는다.
     장식이 아니라 "여기가 누르는 곳"이라는 표시라 비텍스트 3:1 을 지켰다(3.05:1 · 3.08:1). */
.tellkorea-partners { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-7); }
.tellkorea-partner {
	display: block; width: 100%; inline-size: 100%;
	padding: var(--sp-4); border-radius: var(--r-lg);
	text-decoration: none;
	min-height: 76px; min-block-size: 76px;
	text-align: center;
	box-shadow: var(--sh-sm);
	transition: background var(--mo-fast) var(--ease), transform var(--mo-fast) var(--ease), box-shadow var(--mo-fast) var(--ease);
}
.tellkorea-partner-coupon {
	background: var(--c-coupon-bg); color: var(--c-coupon-ink);
	border: 1.5px solid var(--c-coupon-line);
}
.tellkorea-partner-stamp {
	background: var(--c-stamp-bg); color: var(--c-stamp-ink);
	border: 1.5px solid var(--c-stamp-line);
}
.tellkorea-partner-coupon .tellkorea-partner-lead { color: var(--c-coupon-soft); }
.tellkorea-partner-stamp  .tellkorea-partner-lead { color: var(--c-stamp-soft); }
.tellkorea-partner-lead {
	display: block; font-size: var(--t-sm); line-height: 1.45;
	margin-bottom: var(--sp-2);
}
/* 아이콘+이름을 가운데로 모은다.
   새 창 표시(↗)까지 같이 흐르면 묶음이 왼쪽으로 밀려 가운데가 어긋나므로,
   그것만 줄에서 빼내 오른쪽 끝에 세운다 — 줄(row) 기준이라 아이콘·이름과 눈높이가 맞는다.
   right 가 아니라 inset-inline-end 인 이유는 아랍어처럼 오른쪽에서 왼쪽으로 읽는 화면에서
   자동으로 반대편(왼쪽 끝)으로 가야 하기 때문이다. */
.tellkorea-partner-row {
	position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
	/* 양쪽에 같은 여백을 둬서 가운데는 그대로 두고, 긴 이름(영어·태국어)이 ↗ 표시를 덮지 않게 막는다 */
	padding-inline: calc(18px + var(--sp-2));
}
.tellkorea-partner-ic { width: 26px; height: 26px; inline-size: 26px; block-size: 26px; flex: none; }
/* 줄이 모자라면 이름이 접히도록 축소는 허용한다(flex-shrink 1) — 넘쳐서 잘리는 것보다 낫다 */
.tellkorea-partner-name { flex: 0 1 auto; font-size: var(--t-lg); font-weight: 700; line-height: 1.3; }
/* 새 창으로 열린다는 표시 — 눌러서 알게 하지 않고 누르기 전에 보이게 둔다 */
.tellkorea-partner-go {
	position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; inline-size: 18px; block-size: 18px; flex: none; opacity: .85;
}
.tellkorea-partner:active { transform: scale(.99); }
.tellkorea-partner:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
@media (hover: hover) {
	.tellkorea-partner:hover { box-shadow: var(--sh-lg); transform: translateY(-1px); }
	/* 파스텔은 한 톤 진해지는 것으로 반응을 알린다 — 진해진 배경에서도 제목 6.12:1 · 6.13:1 */
	.tellkorea-partner-coupon:hover { background: var(--c-coupon-bg-h); }
	.tellkorea-partner-stamp:hover  { background: var(--c-stamp-bg-h); }
}
@media (prefers-reduced-motion: reduce) {
	.tellkorea-partner { transition: none; }
	.tellkorea-partner:hover, .tellkorea-partner:active { transform: none; }
}

/* 화면(스텝) — 무JS: 전부 표시 / JS: 한 화면씩 */
.tellkorea-screen { animation: tellkorea-fade var(--mo-base) var(--ease); }
html.tellkorea-js .tellkorea-screen { display: none; }
html.tellkorea-js .tellkorea-screen.is-active { display: block; }
@keyframes tellkorea-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tellkorea-screen { animation: none; } }

.tellkorea-q-title { font-size: var(--t-xl); line-height: var(--lh-tight); margin: 0 0 var(--sp-4); }
.tellkorea-q-desc { color: var(--c-ink-soft); margin: 0 0 var(--sp-6); }
.tellkorea-q-label { display: block; font-size: var(--t-sm); color: var(--c-ink-soft); margin-block-end: var(--sp-3); }
.tellkorea-req { color: var(--c-error); }
.tellkorea-field { display: block; margin-top: var(--sp-5); }

.tellkorea-input {
	width: 100%; inline-size: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line-ui);
	border-radius: var(--r-md); font-size: var(--t-lg); min-height: 52px; min-block-size: 52px; background: var(--c-surface); color: var(--c-ink);
}
.tellkorea-input:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 1px; }
.tellkorea-textarea { min-block-size: 120px; line-height: var(--lh-body); resize: vertical; }

/* 선택지 — 큰 탭 타깃 */
.tellkorea-choices { display: flex; flex-direction: column; gap: var(--sp-3); }
.tellkorea-choice {
	display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4);
	border: 2px solid var(--c-line-ui); border-radius: var(--r-md); cursor: pointer;
	font-size: var(--t-lg); min-height: 56px; min-block-size: 56px; background: var(--c-surface);
	transition: border-color var(--mo-fast) var(--ease), background var(--mo-fast) var(--ease);
	-webkit-tap-highlight-color: transparent;
}
/* 선택 하이라이트 — 구형: JS가 .is-checked 토글(전 기기) / 모던: :has 즉시 반응(보강) + 팝 모션 */
@keyframes tellkorea-pop { 0% { transform: scale(1); } 45% { transform: scale(1.02); } 100% { transform: scale(1); } }
.tellkorea-choice.is-checked { border-color: var(--c-brand); background: rgba(14, 139, 161, .08); box-shadow: var(--sh-sm); animation: tellkorea-pop 180ms var(--ease); }
.tellkorea-choice:has(input:checked) { border-color: var(--c-brand); background: rgba(14, 139, 161, .08); background: color-mix(in srgb, var(--c-brand) 8%, var(--c-surface)); }
@media (prefers-reduced-motion: reduce) { .tellkorea-choice.is-checked { animation: none; } }
.tellkorea-choice:focus-within { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.tellkorea-choice input { width: 24px; height: 24px; inline-size: 24px; block-size: 24px; accent-color: var(--c-brand); flex: none; }

/* 다중선택 상한 도달 — 고를 수 없게 된 항목은 흐리게. 이미 고른 항목은 그대로 둬 해제 경로를 남긴다 */
.tellkorea-choice.is-locked { opacity: .45; }
.tellkorea-q-limit {
	margin-top: var(--sp-3); font-size: var(--t-sm); font-weight: 600;
	color: var(--c-brand-ink); background: rgba(14, 139, 161, .1);
	padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
}
/* ★ 안내를 잠깐 하단 버튼 위로 띄운다.
   이 문구는 원래 선택지 목록 끝에 붙어 있다. 그런데 목록이 12개나 되다 보니,
   위쪽에서 네 번째를 눌러 막힌 사람에게는 그 문구가 화면 아래 423px 지점에 있었다(실측).
   선택은 정확히 막히는데 왜 막혔는지는 화면 어디에도 안 보이는 상태였다 — 조용한 실패다.
   그래서 막은 그 순간에는 문구를 눈에 보이는 자리로 데려온다.
   흰 글자 대비 15.09:1. */
.tellkorea-q-limit.is-float {
	position: fixed;
	left: 50%; transform: translateX(-50%);
	bottom: 110px;                                       /* 구형 폴백 */
	bottom: calc(var(--tk-nav-h) + var(--sp-3));
	z-index: 20; margin-top: 0;
	width: max-content; max-width: calc(100% - var(--sp-8));
	background: var(--c-ink); color: #fff;
	box-shadow: var(--sh-lg);
	padding: var(--sp-3) var(--sp-4);
}

/* 척도/평점/NPS */
.tellkorea-scale { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tellkorea-scale-item { flex: 1 1 auto; min-inline-size: 48px; position: relative; }
.tellkorea-scale-item input { position: absolute; opacity: 0; pointer-events: none; }
.tellkorea-scale-item span {
	display: flex; align-items: center; justify-content: center; min-height: 52px; min-block-size: 52px;
	border: 2px solid var(--c-line-ui); border-radius: var(--r-md); font-size: var(--t-lg); cursor: pointer; background: var(--c-surface);
	-webkit-tap-highlight-color: transparent;
}
.tellkorea-scale-item input:checked + span { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-on-brand); }
.tellkorea-scale-item input:focus-visible + span { outline: 2px solid var(--c-brand-ink); outline-offset: 2px; }

/* 평점(별) — 선택한 칸까지 왼쪽부터 채워진다.
   DOM 은 1→N 오름차순 그대로 둔다: 키보드 Tab·화살표 순서 = 시각 순서 = DOM 순서.
   (앞서 row-reverse 로 시각만 뒤집었더니 "오른쪽 화살표를 눌렀는데 점수가 내려가는" 역전이 생겼다 — WCAG 2.4.3·1.3.2)
   왼쪽 채움은 :has() 로 "뒤에 선택된 입력이 있는 별"까지 함께 칠해 구현한다.
   채움 표시는 색 + 모양(☆→★) 이중 — 색만으로 상태를 전달하지 않는다(WCAG 1.4.1). */
.tellkorea-rating { display: flex; gap: var(--sp-1); }
.tellkorea-rating input { position: absolute; opacity: 0; pointer-events: none; }
.tellkorea-rating-star {
	display: flex; align-items: center; justify-content: center;
	min-inline-size: var(--tap-min); min-block-size: var(--tap-min);
	font-size: var(--t-2xl); line-height: 1; color: var(--c-ink-soft);
	cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
	transition: color var(--mo-fast) var(--ease);
}
.tellkorea-rating-star::before { content: '\2606'; } /* ☆ 빈 별 */
/* 선택된 별(바로 앞 input)과 그보다 왼쪽 별을 함께 칠한다.
   ★ :has 를 같은 셀렉터 리스트에 두면 안 된다.
     CSS 는 셀렉터 리스트 중 하나라도 못 읽으면 규칙 전체를 버린다.
     :has 를 모르는 기기(iOS 15.3 이하 · Chrome 104 이하)에서는 옆에 나란히 적힌
     input:checked 규칙까지 같이 버려져 별이 하나도 칠해지지 않는다.
     그래서 구형에서 살아야 하는 규칙은 따로 세우고, :has 는 별도 규칙으로 분리한다.
   채움 근거는 세 겹 — ①.is-filled(JS, 전 기기) ②input:checked(인접 형제) ③:has(모던). */
.tellkorea-rating .tellkorea-rating-star.is-filled,
.tellkorea-rating input:checked + .tellkorea-rating-star { color: var(--c-brand); }
.tellkorea-rating .tellkorea-rating-star.is-filled::before,
.tellkorea-rating input:checked + .tellkorea-rating-star::before { content: '\2605'; } /* ★ 채운 별 */
/* 모던 보강 — 이 두 규칙만 통째로 무시돼도 위가 남는다 */
.tellkorea-rating .tellkorea-rating-star:has(~ input:checked) { color: var(--c-brand); }
.tellkorea-rating .tellkorea-rating-star:has(~ input:checked)::before { content: '\2605'; }
.tellkorea-rating input:focus-visible + .tellkorea-rating-star { outline: 2px solid var(--c-brand-ink); outline-offset: 2px; border-radius: var(--r-sm); }
/* 고른 점수 숫자 확인 — 별점은 자동으로 넘어가지 않으므로, 응답자가 조정한 뒤 '다음'을 누른다 */
.tellkorea-rating-value {
	margin-top: var(--sp-2); font-size: var(--t-lg); font-weight: 700;
	color: var(--c-brand-ink); font-variant-numeric: tabular-nums;
}
/* 마우스 환경에서만 미리보기 — 터치에서는 hover 잔상이 오답을 유도한다 */
@media (hover: hover) {
	/* 위와 같은 이유로 :has 를 분리한다 — 묶어두면 구형에서 hover 미리보기가 통째로 사라진다 */
	.tellkorea-rating-star:hover { color: var(--c-brand); }
	.tellkorea-rating-star:hover::before { content: '\2605'; }
	.tellkorea-rating .tellkorea-rating-star:has(~ .tellkorea-rating-star:hover) { color: var(--c-brand); }
	.tellkorea-rating .tellkorea-rating-star:has(~ .tellkorea-rating-star:hover)::before { content: '\2605'; }
}

.tellkorea-q-error { color: var(--c-error); font-size: var(--t-sm); margin-top: var(--sp-3); font-weight: 600; }

/* 미응답 진행 시 답안 흔들림 피드백 */
@keyframes tellkorea-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-9px); }
	40% { transform: translateX(8px); }
	60% { transform: translateX(-6px); }
	80% { transform: translateX(4px); }
}
.tellkorea-q-body.is-shake { animation: tellkorea-shake 420ms var(--ease); }
.tellkorea-screen.is-error .tellkorea-choice, .tellkorea-screen.is-error .tellkorea-scale-item span, .tellkorea-screen.is-error .tellkorea-input {
	border-color: var(--c-error);
}
/* 별점은 테두리가 없어 오류 표시를 색으로 준다 */
.tellkorea-screen.is-error .tellkorea-rating-star { color: var(--c-error); }
@media (prefers-reduced-motion: reduce) { .tellkorea-q-body.is-shake { animation: none; } }

/* 하단 네비 — safe-area-inset-bottom 보정. 진행바는 헤더 2단으로 이동 */
.tellkorea-survey-nav {
	/* ★ left/right 를 먼저 쓴다 — inset-inline 만 쓰면 iOS 14.0 이하에서 좌우 폭이 정해지지 않아
	   화면 하단의 '이전/다음' 버튼이 사라진다. 응답을 끝까지 못 하게 되는 결함이라 폭은 반드시 물리 속성으로 준다. */
	position: fixed; left: 0; right: 0; inset-inline: 0; bottom: 0; z-index: 10;
	background: var(--c-surface); border-block-start: 1px solid var(--c-line);
	padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
}
.tellkorea-progress { height: 6px; block-size: 6px; background: var(--c-line); border-radius: var(--r-full); overflow: hidden; }
.tellkorea-progress-bar { height: 100%; block-size: 100%; width: 0; background: var(--c-brand); border-radius: var(--r-full); transition: width var(--mo-base) var(--ease); }
.tellkorea-nav-btns { display: flex; gap: var(--sp-3); max-width: 40rem; margin-inline: auto; }
.tellkorea-btn-primary {
	flex: 1; min-height: 54px; min-block-size: 54px; border: 0; border-radius: var(--r-full);
	background: var(--c-brand); color: var(--c-on-brand); font-size: var(--t-lg); font-weight: 700; cursor: pointer;
	box-shadow: 0 6px 16px rgba(14, 139, 161, .28);
	transition: transform var(--mo-fast) var(--ease), background var(--mo-fast) var(--ease);
}
.tellkorea-btn-primary:hover { background: var(--c-brand-ink); }
.tellkorea-btn-primary:active { transform: scale(.98); }
.tellkorea-btn-primary:disabled { opacity: .5; cursor: default; box-shadow: none; }
.tellkorea-btn-ghost {
	flex: none; width: 54px; min-height: 54px; min-block-size: 54px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1.5px solid var(--c-line-ui); border-radius: var(--r-full);
	background: var(--c-surface); cursor: pointer; color: var(--c-ink-soft);
}
.tellkorea-btn-ghost .ic { width: 22px; height: 22px; }
.tellkorea-btn-ghost:hover { border-color: var(--c-brand); color: var(--c-brand-ink); }

#tellkorea-next { display: none; }
html.tellkorea-js #tellkorea-next { display: inline-flex; align-items: center; justify-content: center; }
/* 무JS 폴백: 전체 표시 + 제출만 노출 */
html:not(.tellkorea-js) #tellkorea-prev, html:not(.tellkorea-js) #tellkorea-next, html:not(.tellkorea-js) .tellkorea-progress { display: none; }
html:not(.tellkorea-js) #tellkorea-submit { display: inline-flex; align-items: center; justify-content: center; }

/* 완료 */
.tellkorea-thanks { text-align: center; padding-block: var(--sp-8); }
.tellkorea-thanks-mark { inline-size: 72px; block-size: 72px; margin-inline: auto; margin-block-end: var(--sp-4); display: grid; place-items: center; border-radius: var(--r-full); background: var(--c-success); color: #fff; font-size: 2.5rem; }

/* 지역 선택 / 빈 화면 */
.tellkorea-region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); }
.tellkorea-region-card { display: flex; align-items: center; justify-content: center; min-block-size: 64px; padding: var(--sp-4); border: 1px solid var(--c-line-ui); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); text-decoration: none; font-weight: 600; text-transform: capitalize; }
.tellkorea-region-card:hover { border-color: var(--c-brand); }
.tellkorea-empty { text-align: center; padding: var(--sp-7) var(--sp-4); }
.tellkorea-region-tag { display: inline-block; background: var(--c-brand); color: var(--c-on-brand); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); text-transform: capitalize; margin-block: var(--sp-3); }

/* 홍보 배너 — 흐름 방해 최소(작게, 라운드) */
.tellkorea-banner { max-width: 40rem; margin: 0 auto; padding: var(--sp-2) var(--sp-4) 0; }
.tellkorea-banner img { display: block; width: 100%; max-height: 96px; object-fit: cover; border-radius: var(--r-md); }
.tellkorea-banner-bottom { padding-top: var(--sp-5); }

/* 접기 방식은 tokens.css 에서 정의한다(RTL 가로 스크롤 방지).
   여기서는 펼쳐졌을 때의 생김새만 손본다 — 위치를 다시 -999px 로 되돌리지 않는다. */
.tellkorea-skip:focus {
	z-index: 20; border-radius: var(--r-sm);
	top: var(--sp-2);
	left: var(--sp-2);                        /* 구형 폴백 */
	inset-inline-start: var(--sp-2);          /* 지원 시 덮음 — 아랍어에서는 오른쪽에 뜬다 */
}

/* ── 모바일 공간·동선 최적화 (좁은 화면) ── */
@media (max-width: 480px) {
	.tellkorea-survey-top {
		padding-top: calc(var(--sp-2) + env(safe-area-inset-top, 0px));
		padding-bottom: var(--sp-2);
	}
	.tellkorea-brand { font-size: var(--t-sm); }
	.tellkorea-brand .brand-text { display: none; } /* 좁은 화면: 로고 마크만 (이름은 설문 제목에 존재) */
	.tellkorea-logo { width: 34px; height: 34px; }
	.tellkorea-langbtn { padding: 0 var(--sp-3); min-height: 40px; min-block-size: 40px; }
	.tellkorea-langbtn .ic { width: 16px; height: 16px; }
	.tellkorea-textsize button { min-inline-size: 36px; min-block-size: 36px; }
	.tellkorea-top-divider { height: 20px; }

	.tellkorea-survey-main { padding-top: var(--sp-6); padding-bottom: calc(var(--sp-6) + var(--tk-nav-h)); }
	.tellkorea-q-title { font-size: var(--t-lg); margin-bottom: var(--sp-3); }
	.tellkorea-q-desc { margin-bottom: var(--sp-5); }
	.tellkorea-choices { gap: var(--sp-3); }
	.tellkorea-choice { padding: var(--sp-3) var(--sp-4); min-height: 52px; min-block-size: 52px; font-size: var(--t-base); }
	.tellkorea-scale { gap: var(--sp-1); }
	.tellkorea-scale-item { min-inline-size: 44px; }
	.tellkorea-scale-item span { min-height: 48px; min-block-size: 48px; font-size: var(--t-base); }
	.tellkorea-survey-nav { padding-top: var(--sp-2); }
	.tellkorea-nav-btns { gap: var(--sp-2); }
	.tellkorea-btn-primary { min-height: 50px; min-block-size: 50px; }
	.tellkorea-btn-ghost { width: 50px; min-height: 50px; min-block-size: 50px; }
	.tellkorea-top-row2 { margin-top: var(--sp-1); }
}