/* 역할: tellkorea 디자인 토큰 (SSOT) — 색·간격(4px)·타이포(모듈러 1.25)·반경·그림자·모션
   심플 프리미엄: 중립 + 단일 브랜드 accent(ocean teal). AI slop(보라 그라데이션·균일카드) 금지.
   상세 원칙은 DESIGN.md / 글로벌 design-system.md */

:root {
	/* 색 — 의미 토큰 */
	--c-bg:        hsl(210 20% 99%);
	--c-surface:   hsl(0 0% 100%);
	--c-ink:       hsl(215 28% 16%);
	--c-ink-soft:  hsl(215 14% 42%);
	--c-line:      hsl(215 18% 90%);
	/* 입력·선택 컴포넌트 경계 전용 — 흰 배경 대비 3.22:1 로 WCAG 1.4.11(비텍스트 3:1) 충족.
	   --c-line(1.27:1)은 구분선·장식에 남기고, "눌러야 하는 것"의 테두리는 이 값을 쓴다.
	   고령 외국인이 야외 밝은 빛 아래에서 응답한다는 전제(DESIGN.md 고령 대응). */
	--c-line-ui:   hsl(215 18% 58%);
	--c-brand:     hsl(190 80% 33%);
	--c-brand-ink: hsl(190 82% 24%);
	--c-on-brand:  hsl(0 0% 100%);
	--c-success:   hsl(150 58% 36%);
	--c-warn:      hsl(35 85% 44%);
	--c-error:     hsl(355 68% 48%);

	/* 인천 서비스 안내 버튼 2종 — 더스티 로즈 · 세이지 그린.
	   진한 배경에 흰 글자였던 것을 뒤집었다. 배경을 연하게 두고 글자를 진하게 쓰면
	   같은 색상 계열을 유지하면서도 부드러워지고, 대비는 오히려 올라간다(5.46:1 → 6.85:1).

	   색을 고른 근거 (2026 기준·확인일 2026-09-03)
	     맑은 파스텔이 아니라 회색이 섞인 분필톤(chalky·grayed-down)이 지금의 흐름이고,
	     그 중심이 dusty rose 와 sage 다. 처음에 넣었던 맑은 로즈·청록 민트는
	     대비 계산만 통과했을 뿐 이 흐름과 어긋나 있어 되돌렸다.
	     계열(분홍·초록)은 그대로 둬서 어느 서비스인지 알아보는 데는 지장이 없다.

	   명도를 손이 아니라 계산으로 정한 이유
	     눈으로 고르면 "예쁜데 안 읽히는" 색이 섞인다. 그래서 배경만 정하고
	     글자·테두리 명도는 기준을 넘는 가장 밝은(=가장 부드러운) 값을 탐색해 채웠다.
	     기준을 hover(가장 어두운 배경)로 잡은 이유는, 밝은 배경만 보고 고르면
	     hover 에서 기준이 깨지기 때문이다 — 실제로 첫 계산이 그렇게 깨졌다.

	   테두리를 색 세트에 넣은 이유
	     파스텔은 흰 페이지 배경(--c-bg)과 밝기가 거의 같아 카드 경계가 사라진다.
	     장식이 아니라 "여기가 누르는 곳"이라는 표시라 --c-line-ui 와 같은
	     기준(비텍스트 3:1)을 적용해 명도를 잡았다. */
	--c-coupon-bg:    hsl(8 72% 92%);    /* 더스티 로즈 배경 */
	--c-coupon-bg-h:  hsl(8 66% 88%);    /* hover — 한 톤 진하게 */
	--c-coupon-ink:   hsl(8 52% 33%);    /* 제목·아이콘 (bg 6.85:1 · hover 6.12:1) */
	--c-coupon-soft:  hsl(8 28% 37%);    /* 설명줄 (bg 5.77:1 · hover 5.15:1) */
	--c-coupon-line:  hsl(8 45% 62%);    /* 테두리 (페이지 배경 3.05:1) */
	--c-stamp-bg:     hsl(110 22% 89%);  /* 세이지 그린 배경 */
	--c-stamp-bg-h:   hsl(110 16% 85%);
	--c-stamp-ink:    hsl(120 30% 26%);  /* bg 6.75:1 · hover 6.13:1 */
	--c-stamp-soft:   hsl(120 12% 33%);  /* bg 5.61:1 · hover 5.10:1 */
	--c-stamp-line:   hsl(115 28% 49%);  /* 페이지 배경 3.08:1 */

	/* 간격 — 4px 배수 */
	--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
	--sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

	/* 반경 (≤3종 + full) */
	--r-sm:8px; --r-md:12px; --r-lg:20px; --r-full:9999px;

	/* 타이포 — 모듈러 스케일 1.25, 본문 1rem(=16px 기준) */
	--t-xs:.8rem; --t-sm:.9rem; --t-base:1rem; --t-lg:1.25rem;
	--t-xl:1.5rem; --t-2xl:1.953rem; --t-3xl:2.441rem;
	--lh-body:1.6; --lh-tight:1.2;

	/* 그림자 — 고도 스케일 */
	--sh-sm:0 1px 2px hsl(215 28% 16% / .06);
	--sh-md:0 4px 12px hsl(215 28% 16% / .08);
	--sh-lg:0 12px 32px hsl(215 28% 16% / .12);

	/* 모션 */
	--mo-fast:120ms; --mo-base:200ms; --ease:cubic-bezier(.4,0,.2,1);

	/* 터치 타깃 최소(주요 액션 권장) */
	--tap-min:44px;
}

/* 텍스트 크기 조절 (고령 외국인 대응) — html[data-textsize] 가 root font-size 스케일 */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
html[data-textsize="lg"] { font-size: 112.5%; } /* A+  ≈18px */
html[data-textsize="xl"] { font-size: 125%; }   /* A++ ≈20px */

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

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
	font-size: var(--t-base);
	line-height: var(--lh-body);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 접근성: 본문 바로가기 */
/* ★ 화면 밖으로 밀어내는 대신 크기를 접는다.
   left:-999px 로 밀던 방식은 아랍어처럼 오른쪽에서 왼쪽으로 읽는 화면에서 방향이 뒤집혀,
   보이지 않는 999px 빈 영역이 생기고 가로 스크롤이 남았다
   (실측: 이 요소만 숨기니 scrollWidth 1374 → 375, 되돌리니 다시 1374).
   접는 방식은 읽는 방향과 무관하다. */
.tellkorea-skip {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	background: var(--c-ink); color: #fff; padding: 0;
	border-radius: 0 0 var(--r-sm) 0; z-index: 100;
}
/* 키보드로 초점이 오면 그때 펼쳐 보인다 */
.tellkorea-skip:focus {
	position: fixed; top: 0; left: 0;
	width: auto; height: auto; overflow: visible;
	clip: auto; clip-path: none;
	padding: var(--sp-2) var(--sp-4);
}

/* P1 플레이스홀더 셸 (모바일 우선) */
.tellkorea-shell { max-inline-size: 42rem; margin-inline: auto; padding: var(--sp-7) var(--sp-4); }
.tellkorea-title { font-size: var(--t-2xl); line-height: var(--lh-tight); margin: 0 0 var(--sp-4); letter-spacing: -.01em; }
.tellkorea-region {
	display: inline-block; background: var(--c-brand); color: var(--c-on-brand);
	padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
	font-size: var(--t-sm); text-transform: capitalize;
}
.tellkorea-muted { color: var(--c-ink-soft); margin-top: var(--sp-5); }
.tellkorea-foot { color: var(--c-ink-soft); font-size: var(--t-sm); margin-top: var(--sp-8); }