/* 팽글 (Pangle) — 앱과 같은 디자인 토큰.
   출처: PangleKit/Theme.swift, PangleKit/Palette.swift.
   앱의 규칙 하나를 그대로 지킨다 — 모든 모서리 반경은 0. */

:root {
	--paper: #faf7f1;
	--ink: #1a1815;
	--cream: #f5f2ec;
	--parchment: #e7e1d4;
	--slime: #b7f0e0;
	--confirm: #4aa891;
	--shell: #8f8677;
	--ground: #181613;
	--ground-soft: #26221e;

	--ink-70: rgba(26, 24, 21, 0.7);
	--ink-55: rgba(26, 24, 21, 0.55);
	--ink-40: rgba(26, 24, 21, 0.4);
	--ink-12: rgba(26, 24, 21, 0.12);
	--ink-06: rgba(26, 24, 21, 0.06);

	/* ── 모따기한 모서리 ────────────────────────────────
	   꾸미기 미리보기(.dress-preview)가 쓰는 5px 모따기를 페이지 전체의
	   모서리 규격으로 쓴다. 거기는 테두리가 없어 clip-path 한 장으로 끝나지만,
	   스크린샷과 앱 흉내 카드에는 1px 테두리가 있다. clip-path 는 border 까지
	   잘라내 대각선 네 군데에서 선이 끊기므로, 그 자리들은 테두리를 border 가
	   아니라 바탕색으로 깔고 그 위를 1px 작은 모따기(--chamfer-inner)로 덮는다. */
	--frame-line: rgba(26, 24, 21, 0.22);
	--chamfer-5: polygon(
		5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px),
		calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px
	);
	/* 안쪽 면은 1px 들어가 있으니 모따기도 4px 이면 될 것 같지만, 대각선은
	   45도라 그러면 테두리가 거기서만 1/√2 = 0.71px 로 얇아진다. 직선 구간과
	   같은 1px 을 얻으려면 √2-1 만큼 더 물려야 한다. */
	--chamfer-inner: polygon(
		4.4142px 0, calc(100% - 4.4142px) 0, 100% 4.4142px, 100% calc(100% - 4.4142px),
		calc(100% - 4.4142px) 100%, 4.4142px 100%, 0 calc(100% - 4.4142px), 0 4.4142px
	);
	--cream-70: rgba(245, 242, 236, 0.7);
	--cream-45: rgba(245, 242, 236, 0.45);
	--cream-14: rgba(245, 242, 236, 0.14);

	/* 도트 서체의 실제 이름. --pixel 은 "이 자리에 도트를 쓸까" 를 정하는
	   스위치로 쓰고, 범위별로 --sans 로 바꿔 끈다(맨 아래 참고). */
	--pixel-face: "Galmuri11", "DotGothic16", monospace;
	--pixel: var(--pixel-face);
	--sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
		"Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;

	--wrap: 1080px;
	--gutter: 24px;

	/* 한 걸음 주기. 스프라이트 프레임 교체와 발자국이 같이 쓴다. */
	--stride: 0.44s;

	/* 레인보우 한 바퀴. 앱 SnailSprite 의 HueCycle.period 와 같은 3.5초 —
	   몸과 껍데기가 서로 다른 속도로 돌지 않게 둘이 같이 쓴다. */
	--hue-period: 3.5s;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: var(--ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--confirm);
}

[hidden] {
	display: none !important;
}

/* 언어 토글. 기본은 한국어 — JS 가 없어도 한국어 문장만 보인다.
   숨김은 !important 로 못박는다. 안 그러면 `.store-badge small { display: block }`
   처럼 클래스+요소 선택자가 특이도에서 이겨 두 언어가 같이 나온다. */
html:not([data-lang="en"]) [data-l="en"],
html[data-lang="en"] [data-l="ko"] {
	display: none !important;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.pixel {
	font-family: var(--pixel);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.eyebrow {
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-40);
	margin: 0 0 18px;
}


h1,
h2,
h3 {
	font-family: var(--pixel);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.32;
	margin: 0;
}

h1 {
	font-size: clamp(34px, 6vw, 58px);
}

h2 {
	font-size: clamp(26px, 3.6vw, 38px);
}

h3 {
	font-size: 19px;
}

p {
	margin: 0 0 16px;
}

.lede {
	font-size: 17px;
	color: var(--ink-70);
	max-width: 46ch;
}

/* 히어로에서 앱을 한 줄로 정의하는 문장. 뒤따르는 설명보다 크고 진하다. */
.lede-lead {
	font-size: 21px;
	line-height: 1.55;
	color: var(--ink);
	margin-bottom: 14px;
}

/* 한 낱말만 집어내는 강조. 앱이 위치 안내에서 쓰는 민트 색면과 픽셀 굵은 글씨를
   그대로 쓰되, 문장 안에 앉도록 크기만 줄였다. */
.mark {
	background: var(--slime);
	color: var(--ink);
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 0.92em;
	padding: 2px 7px;
	white-space: nowrap;
}

/* ── 헤더 ───────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(250, 247, 241, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--ink-12);
}

.site-header .wrap {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 64px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 19px;
	text-decoration: none;
	margin-right: auto;
}

.brand .icon-mark {
	--px: 4px;
}

.brand .snail {
	--px: 4px;
	flex: none;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.site-nav a {
	font-family: var(--pixel);
	font-size: 13px;
	padding: 8px 10px;
	text-decoration: none;
	color: var(--ink-70);
	white-space: nowrap;
}

.site-nav a:hover {
	background: var(--ink-06);
	color: var(--ink);
}

.site-nav a[aria-current="page"] {
	color: var(--ink);
	box-shadow: inset 0 -2px 0 var(--ink);
}

.lang-switch {
	display: flex;
	border: 1px solid var(--ink-12);
	margin-left: 6px;
}

.lang-switch button {
	appearance: none;
	border: 0;
	background: transparent;
	font-family: var(--pixel);
	font-size: 12px;
	letter-spacing: 0.06em;
	padding: 7px 10px;
	cursor: pointer;
	color: var(--ink-55);
	white-space: nowrap;
}

.lang-switch button[aria-pressed="true"] {
	background: var(--ink);
	color: var(--cream);
}

/* ── 섹션 공통 ──────────────────────────────────────────── */

section {
	padding: 96px 0;
}

section.tight {
	padding: 64px 0;
}

.band-paper-alt {
	background: var(--parchment);
}

.band-cream {
	background: var(--cream);
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.split.reverse .split-visual {
	order: -1;
}

.section-head {
	max-width: 60ch;
	margin-bottom: 48px;
}

/* 앱이 위치 안내에서 쓰는 단 하나의 채운 강조 — 같은 민트, 같은 픽셀 굵은 글씨. */
.highlight {
	background: var(--slime);
	color: var(--ink);
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.55;
	padding: 14px 16px;
	margin: 24px 0;
}

/* ── 히어로 ─────────────────────────────────────────────── */

.hero {
	padding: 72px 0 88px;
	position: relative;
	overflow: hidden;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}

.hero h1 {
	margin-bottom: 22px;
}

.hero-facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 26px 0 0;
	padding: 0;
}

.hero-facts li {
	font-family: var(--pixel);
	font-size: 11px;
	letter-spacing: 0.06em;
	padding: 6px 9px;
	background: var(--ink-06);
	color: var(--ink-55);
}

.cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
}

.store-badge {
	display: inline-flex;
	flex: none;
	align-items: center;
	white-space: nowrap;
	gap: 12px;
	padding: 13px 20px;
	background: var(--ink);
	color: var(--cream);
	text-decoration: none;
	font-family: var(--pixel);
	font-size: 14px;
	line-height: 1.25;
}

.store-badge:hover {
	background: #000;
	color: var(--cream);
}

.store-badge .apple {
	font-size: 22px;
	line-height: 1;
}

.cta-note {
	font-family: var(--pixel);
	font-size: 12px;
	color: var(--ink-40);
}

/* ── 픽셀 달팽이 스프라이트 ─────────────────────────────── */

/* 12×8 격자. 픽셀 하나는 --px 크기의 사각형이고, 반경은 0. */
.snail {
	position: relative;
	display: block;
	image-rendering: pixelated;
	--px: 4px;
	width: calc(var(--px) * 12);
	height: calc(var(--px) * 8);
}

/* 블록 하나하나가 절대 배치된 사각형이라, 배율이 소수(2x·2.5x 등)일 때
   경계가 물리 픽셀에 딱 떨어지지 않아 이웃 사이에 머리카락 같은 틈이 남고
   그게 격자로 보인다. 오른쪽·아래로 0.5px 씩 번지게 해 겹쳐 메운다.
   아트는 왼쪽 위 기준으로 찍히므로 모양은 그대로다. */
.snail i {
	position: absolute;
	width: calc(var(--px) + 0.5px);
	height: calc(var(--px) + 0.5px);
	display: block;
}

.snail.walk .frame-b,
.snail .frame-a {
	visibility: visible;
}

.snail.walk .frame-a {
	animation: frameA var(--stride) steps(1, end) infinite;
}

.snail.walk .frame-b {
	animation: frameB var(--stride) steps(1, end) infinite;
}

.snail:not(.walk) .frame-b {
	visibility: hidden;
}

@keyframes frameA {
	0%,
	49.9% {
		visibility: visible;
	}
	50%,
	100% {
		visibility: hidden;
	}
}

@keyframes frameB {
	0%,
	49.9% {
		visibility: hidden;
	}
	50%,
	100% {
		visibility: visible;
	}
}

.snail.rainbow-body .ink-body,
.snail.rainbow-body .ink-dark,
.rainbow-shell .ink-shell {
	animation-name: hueshift;
	animation-duration: var(--hue-period);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes hueshift {
	to {
		filter: hue-rotate(360deg);
	}
}

/* 껍데기 마크 — 7×6, 목표 마커와 브랜드 표식에 쓰는 조각. */
.shell-mark {
	position: relative;
	display: block;
	--px: 4px;
	width: calc(var(--px) * 7);
	height: calc(var(--px) * 6);
}

.shell-mark i {
	position: absolute;
	width: calc(var(--px) + 0.5px);
	height: calc(var(--px) + 0.5px);
	display: block;
}

/* 앱 아이콘의 마크 — 9×7, 잉크 한 색. 헤더 워드마크·배지·마무리에 쓴다. */
.icon-mark {
	position: relative;
	display: block;
	--px: 4px;
	width: calc(var(--px) * 9);
	height: calc(var(--px) * 7);
}

.icon-mark i {
	position: absolute;
	width: calc(var(--px) + 0.5px);
	height: calc(var(--px) + 0.5px);
	display: block;
}

/* ── 기기 목업 ──────────────────────────────────────────── */

.phone {
	width: 100%;
	max-width: 340px;
	margin: 0 auto;
	aspect-ratio: 380 / 780;
	background: #08080a;
	padding: 10px;
	/* 모든 반경을 0으로 두는 것이 이 사이트의 규칙이지만 기기 목업만 예외다 —
	   각진 검은 사각형은 아이폰으로 읽히지 않는다. 안쪽 반경은 바깥에서 베젤
	   두께(10px)를 뺀 값이라 모서리에서도 테두리 굵기가 일정하다. */
	border-radius: 40px;
	box-shadow: 0 40px 80px rgba(24, 22, 19, 0.28), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}

.phone-screen {
	border-radius: 30px;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--paper);
	color: var(--ink);
	display: flex;
	flex-direction: column;
}

/* 배경화면은 흰색. 원래 크림색이던 시계·카드 글씨는 흰 바탕에서 사라지므로
   같이 뒤집는다 — iOS 가 밝은 배경화면에서 시계를 어둡게 바꾸는 것과 같다. */
.phone-screen.lock {
	background: #fff;
	color: var(--ink);
}

/* 날짜와 시각은 iOS 가 그리는 시스템 표시라 도트 서체를 쓰지 않는다.
   같은 화면의 다이나믹 아일랜드·라이브 액티비티는 앱이 그리므로 도트 그대로. */
.lock-clock {
	--pixel: var(--sans);
	position: absolute;
	left: 0;
	right: 0;
	top: 96px;
	text-align: center;
}

.lock-clock .date {
	font-family: var(--pixel);
	font-size: 13px;
	color: var(--ink-40);
}

.lock-clock .time {
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 62px;
	line-height: 1;
	margin-top: 8px;
	color: var(--ink);
}

/* 표시할 것이 없을 때의 다이나믹 아일랜드 — 검은 알약만 남는다.
   라이브 액티비티가 잠금화면 카드로 떠 있는 동안 아일랜드는 이 모습이다.
   폭·높이는 캡슐과 같은 자리에서 시작해 글자가 빠진 만큼만 좁힌다. */
.notch {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 14px;
	width: 104px;
	height: 32px;
	background: #000;
	border-radius: 16px;
	box-shadow: 0 0 0 1px rgba(245, 242, 236, 0.08);
}

/* 다이나믹 아일랜드 캡슐 — 컴팩트 표시. */
.capsule {
	color: var(--cream);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 14px;
	height: 38px;
	min-width: 150px;
	background: #000;
	border-radius: 19px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 14px;
	color: var(--cream);
	box-shadow: 0 0 0 1px rgba(245, 242, 236, 0.08);
}

.capsule .steps {
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.capsule .steps small {
	color: var(--cream-45);
	font-size: 11px;
	margin-left: 3px;
}

/* 잠금화면 카드 — 트랙과 목표 마커. */
/* 실제 라이브 액티비티와 같은 모양·자리 — 잠금화면 스크린샷에서 잰 값이다.
   카드는 화면 폭의 92.8%, 아래에서 14.7% 지점, 배경 #191919, 반경 18px.
   (예전 값 left/right 16px · bottom 28px 은 화면 아래 둥근 모서리에 걸렸다.) */
.lock-card {
	position: absolute;
	left: 3.6%;
	width: 92.8%;
	bottom: 14.7%;
	background: #191919;
	border-radius: 18px;
	color: var(--cream);
	padding: 16px 16px 13px;
}

.lock-card .row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 12px;
}

.lock-card .count {
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 27px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* 뒤에 붙는 "/ 12,000" 만 작고 흐리게. 히어로의 숫자는 JS 가 갱신하느라
   <span data-hero-count> 로 감싸여 있는데, 예전 선택자(.count span)가 그것까지
   잡아서 걸음 수가 목표와 같은 크기로 눌려 있었다. 마지막 span 만 집는다. */
.lock-card .count > span:last-child {
	font-size: 12px;
	color: var(--cream-45);
	margin-left: 4px;
}

.lock-card .pct {
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 20px;
	text-align: right;
	line-height: 1;
}

.lock-card .status {
	font-family: var(--pixel);
	font-size: 10px;
	color: var(--cream-45);
	margin-top: 5px;
}

.lock-card .legend {
	display: flex;
	justify-content: space-between;
	font-family: var(--pixel);
	font-size: 9px;
	letter-spacing: 0.08em;
	color: rgba(245, 242, 236, 0.35);
	margin-top: 8px;
}

/* 트랙: 달팽이는 가운데 고정, 목표 마커가 다가온다. */
.track {
	position: relative;
	height: 46px;

	/* 트랙 가운데에 고정된 달팽이의 반폭. 스프라이트는 12픽셀 폭이다. */
	--walker-half: 18px;

	/* 스프라이트 왼쪽 끝에서 발바닥 앞끝까지. 바닥 행은 걸음 프레임마다 한 칸씩
	   밀리므로(A 는 0~9열, B 는 1~10열) 둘 중 더 앞선 11열 끝을 쓴다 — 짧은 쪽에
	   맞추면 프레임이 바뀔 때마다 발 앞에 한 칸씩 틈이 생겼다 사라진다. */
	--walker-sole-front: 33px;
}

.track .rail {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 9px;
	height: 2px;
	background: var(--cream-14);
}

.track.on-paper .rail {
	background: var(--ink-12);
}

/* 지나온 길. 진행도는 폭이 아니라 불투명도가 나른다 — 폭을 늘리면 점액의 끝이
   달팽이보다 뒤처져 따라오는 것처럼 보인다.

   끝은 발바닥 앞끝에 맞춘다 — 점액은 발이 닿은 자리에만 남으므로, 발보다 앞선
   머리 밑까지 끌면 달팽이가 아직 밟지 않은 땅에 점액이 먼저 깔린다. 예전에는
   꼬리에서 끊었는데(꼬리 + 5px), 스프라이트는 레일 위에 얹힐 뿐 레일을 덮지
   않으므로 몸통 길이(36px)만큼 어두운 레일이 그대로 드러나 점액이 달팽이에
   못 미쳐 멈춘 것처럼 보였다. */
.track .fill {
	position: absolute;
	left: 0;
	bottom: 9px;
	height: 2px;
	background: var(--slime);
	width: calc(50% - var(--walker-half) + var(--walker-sole-front));
	opacity: 0.35;
}

.track .walker {
	position: absolute;
	bottom: 11px;
	left: 50%;
	transform: translateX(-50%);
}

.track .walker .snail {
	--px: 3px;
}

.track .goal {
	position: absolute;
	bottom: 11px;
	transition: left 0.5s ease-out;
}

.track .goal .shell-mark {
	--px: 3px;
	opacity: 0.85;
}

.track .dust {
	position: absolute;
	bottom: 11px;
	left: calc(50% - var(--walker-half) - 10px);
	width: 4px;
	height: 4px;
	background: var(--slime);
	opacity: 0.5;
	animation: dust var(--stride) linear infinite;
}

@keyframes dust {
	0% {
		opacity: 0.5;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-12px, -4px) scale(0.4);
	}
}

/* 참고용 목록. 본문 옆에 붙는 각주에 가깝게 — 글머리표 대신 얇은 선으로 나눈다. */
.notes {
	list-style: none;
	padding: 0;
	margin: 26px 0 0;
	border-top: 1px solid var(--ink-12);
}

.notes li {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--ink-55);
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--ink-12);
}

.notes strong {
	color: var(--ink-70);
}

/* ── 기능 카드 ──────────────────────────────────────────── */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: var(--ink-12);
	border: 1px solid var(--ink-12);
}

.card {
	background: var(--paper);
	padding: 26px 24px;
}

.card .mark {
	margin-bottom: 16px;
}

.card h3 {
	margin-bottom: 8px;
}

.card p {
	margin: 0;
	color: var(--ink-70);
	font-size: 15px;
}



/* ── 프로 ───────────────────────────────────────────────── */

.pro-card {
	--fill: var(--paper);
	--frame-line: var(--ink-12);
	padding: 30px;
	max-width: 420px;
}

.pro-label {
	font-family: var(--pixel);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--ink-40);
}

.pro-card ul {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
}

.pro-card li {
	font-size: 15px;
	color: var(--ink-70);
	padding: 7px 0;
	border-bottom: 1px solid var(--ink-06);
}

.pro-note {
	font-family: var(--pixel);
	font-size: 11px;
	color: var(--ink-40);
	margin-top: 16px;
}

/* ── 문서 페이지 (개인정보·지원) ────────────────────────── */

.doc {
	padding: 64px 0 96px;
}

.doc-head {
	border-bottom: 1px solid var(--ink-12);
	padding-bottom: 28px;
	margin-bottom: 40px;
}

.doc-head .meta {
	font-family: var(--pixel);
	font-size: 12px;
	color: var(--ink-40);
	margin-top: 12px;
}

.doc-body {
	max-width: 72ch;
}

/* 지원 페이지는 이어 읽는 글이 아니라 연락처 표와 문답 목록이라, 본문을 제목과
   같은 단 전체 폭으로 편다(72ch 로 묶으면 제목 밑줄만 넓고 내용은 좁아 보인다).
   대신 실제로 읽어 내려가는 문단은 아래에서 다시 72ch 로 묶는다. */
.doc-wide .doc-body {
	max-width: none;
}

.doc-wide .doc-body > p,
.doc-wide .contact-cell p,
.doc-wide .faq .answer p,
.doc-wide .faq .answer li,
.doc-wide .callout p {
	max-width: 72ch;
}

.doc-body h2 {
	font-size: 22px;
	margin: 48px 0 14px;
	padding-top: 8px;
}

.doc-body h3 {
	font-size: 16px;
	margin: 28px 0 8px;
}

.doc-body p,
.doc-body li {
	color: var(--ink-70);
}

.doc-body ul,
.doc-body ol {
	padding-left: 22px;
	margin: 0 0 16px;
}

.doc-body li {
	margin-bottom: 8px;
}

.doc-body strong {
	color: var(--ink);
}

.callout {
	border: 1px solid var(--ink-12);
	border-left: 4px solid var(--confirm);
	background: var(--cream);
	padding: 20px 22px;
	margin: 24px 0;
}

.callout p:last-child {
	margin-bottom: 0;
}

.path {
	font-family: var(--pixel);
	font-size: 13px;
	background: var(--ink-06);
	padding: 2px 6px;
	white-space: nowrap;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0 24px;
	font-size: 15px;
}

.data-table th,
.data-table td {
	border: 1px solid var(--ink-12);
	padding: 11px 13px;
	text-align: left;
	vertical-align: top;
	color: var(--ink-70);
}

.data-table th {
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 13px;
	background: var(--ink-06);
	color: var(--ink);
	white-space: nowrap;
}

/* 처리방침의 국외이전·보호책임자 표는 항목 이름이 왼쪽 열에 오는 세로형이라,
   머리글 칸이 tbody 안에 들어간다. 그 칸은 문장이 길어 줄바꿈을 허용해야 한다
   (가로형 표의 thead th 는 그대로 nowrap 을 유지한다). */
.data-table tbody th {
	white-space: normal;
	width: 26%;
	min-width: 132px;
}

.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.faq {
	border-top: 1px solid var(--ink-12);
	margin-top: 32px;
}

.faq details {
	border-bottom: 1px solid var(--ink-12);
}

.faq summary {
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 16px;
	padding: 18px 34px 18px 0;
	cursor: pointer;
	position: relative;
	list-style: none;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 16px;
	font-size: 20px;
	color: var(--ink-40);
}

.faq details[open] summary::after {
	content: "−";
}

.faq .answer {
	padding: 0 0 20px;
}

.faq .answer p:last-child,
.faq .answer ul:last-child {
	margin-bottom: 0;
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: var(--ink-12);
	border: 1px solid var(--ink-12);
	margin: 28px 0 8px;
}

.contact-cell {
	background: var(--paper);
	padding: 24px;
}

.contact-cell .label {
	font-family: var(--pixel);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--ink-40);
	margin-bottom: 10px;
}

.contact-cell .value {
	font-family: var(--pixel);
	font-size: 16px;
	word-break: break-all;
}

.contact-cell p {
	font-size: 14px;
	color: var(--ink-55);
	margin: 10px 0 0;
}

/* ── 푸터 ───────────────────────────────────────────────── */

.site-footer {
	border-top: 1px solid var(--ink-12);
	padding: 44px 0 56px;
	background: var(--paper);
}

.copyright {
	font-family: var(--pixel);
	font-size: 12px;
	color: var(--ink-40);
	margin: 0;
}

.copyright a {
	color: var(--ink-55);
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
	z-index: 100;
	background: var(--ink);
	color: var(--cream);
	padding: 10px 14px;
	font-family: var(--pixel);
}

/* ── 반응형 ─────────────────────────────────────────────── */

@media (max-width: 880px) {
	.hero-grid,
	.split {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.split.reverse .split-visual {
		order: 0;
	}

	section {
		padding: 72px 0;
	}

	.hero {
		padding: 40px 0 64px;
	}
}

@media (max-width: 560px) {
	:root {
		--gutter: 18px;
	}

	.site-header .wrap {
		height: 58px;
		gap: 8px;
	}

	.brand {
		font-size: 17px;
	}

	.site-nav a {
		padding: 7px 4px;
		font-size: 11px;
	}

	.lang-switch {
		margin-left: 2px;
	}

	.lang-switch button {
		padding: 6px 6px;
		font-size: 11px;
		letter-spacing: 0;
	}

	.dress-preview .snail {
		--px: 9px;
	}

	/* 좁은 화면에서는 워드마크를 접고 달팽이만 남긴다. 자식 선택자여야 한다 —
	   스프라이트 내부 프레임도 span 이라 후손 선택자는 달팽이까지 지운다. */
	.brand > span:not(.snail):not(.icon-mark) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.snail .frame-b {
		visibility: hidden !important;
	}

	.snail .frame-a {
		visibility: visible !important;
	}
}

@media print {
	.site-header,
	.site-footer,
	.lang-switch {
		display: none;
	}

	body {
		background: #fff;
	}
}

/* 스프라이트 프레임과 잉크. snail.js 가 만드는 구조에 대응한다. */
.snail .frame,
.shell-mark .frame,
.icon-mark .frame {
	position: absolute;
	inset: 0;
	display: block;
}

/* 아이콘 마크는 앱 아이콘과 같은 잉크 한 색이다. 몸 색을 따라가지 않는다. */
.ink-mark {
	background: var(--ink);
}

.ink-body {
	background: var(--body-color, var(--slime));
}

.ink-dark {
	background: var(--dark-color, var(--confirm));
}

.ink-shell {
	background: var(--shell-color, var(--shell));
}

/* 하이라이트는 껍데기 색과 무관하게 흰색 — 레인보우에서도 흰색으로 남는다. */
.ink-highlight {
	background: #fff;
}

.ink-eye {
	background: #fff;
}

/* 목표 선택 버튼 — 꾸미기 색 견본과 달리 글자가 들어간다. */
.goal-buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin-top: 6px;
}

.goal-buttons button {
	appearance: none;
	border: 1px solid var(--ink-12);
	background: transparent;
	font-family: var(--pixel);
	font-size: 12px;
	padding: 9px 4px;
	cursor: pointer;
	color: var(--ink-55);
}

.goal-buttons button:hover {
	background: var(--ink-06);
}

.goal-buttons button[aria-pressed="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--cream);
}

/* App Store 배지 안의 껍데기 표식. */
.store-badge .shell-mark {
	--px: 2px;
	flex: none;
}

/* ── 앱 스크린샷 ────────────────────────────────────────── */

/* 기기 테두리. 스크린샷은 상태 바까지 포함하므로 베젤만 두른다. */
.device {
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	background: #08080a;
	padding: 10px;
	border-radius: 40px;
	box-shadow: 0 40px 80px rgba(24, 22, 19, 0.28), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}

.device img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 30px;
}

/* 다이나믹 아일랜드처럼 가로로 잘라낸 조각. */
.shot {
	margin: 24px 0 0;
}

/* 라이브 액티비티 단락 위에 놓이는 Mac 사진 — 위가 아니라 아래로 벌린다. */
.shot.mac {
	margin: 0 0 26px;
	/* 캡션이 사진 왼쪽 아래에 붙도록 figure 폭을 사진에 맞춘다. */
	max-width: 320px;
}

/* 곁들이는 사진이라 본문 폭을 다 쓰지 않는다. 원본이 622px 이라 어차피
   그 이상으로 늘리면 픽셀 달팽이가 뭉갠다. */
.shot.mac img {
	max-width: 100%;
}

/* ── 맥북 액자 ──────────────────────────────────────────
   Mac 사진은 화면 전체가 아니라 메뉴 막대 언저리를 잘라낸 조각이다. 조각만
   두면 어느 기기의 무엇인지 캡션 말고는 말해주는 것이 없으므로, 아이폰
   목업(.phone·.device)과 같은 검은 베젤을 맥북으로 한 번 더 써서 화면 안
   실제 자리에 앉힌다. 조각은 실제 비율(화면 폭의 1/6쯤)보다 크게 들어간다 —
   제 비율로 줄이면 픽셀 달팽이가 뭉개져 읽히지 않는다. */
.macbook {
	width: 100%;
}

.macbook-lid {
	background: #08080a;
	padding: 8px 8px 14px;
	/* 기기 목업만 반경 0 규칙에서 빠지는 것은 .phone 과 같다. 맥북은 아이폰만큼
	   둥글지 않으므로 바깥 11px, 안쪽은 베젤 두께를 뺀 4px 로 얕게 준다. */
	border-radius: 11px 11px 4px 4px;
	box-shadow: 0 24px 50px rgba(24, 22, 19, 0.22), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}

/* 바탕은 흰색이다 — 원본 캡처의 맥 바탕화면이 흰색이라, 조각의 흰 여백이
   화면과 이어져 오려붙인 자국이 남지 않는다. */
.macbook-screen {
	aspect-ratio: 16 / 10;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

/* 메뉴 막대는 화면 맨 위 오른쪽에 있다. 조각의 위·오른쪽을 화면 모서리에
   그대로 붙여 그 자리를 지킨다. 모따기는 액자 안에서는 방해만 되므로 끈다.
   `.shot img` 가 뒤에서 width:100% 를 걸므로 선택자를 한 단 더 준다. */
.shot .macbook-screen img {
	width: 76%;
	height: auto;
	clip-path: none;
}

/* 뚜껑보다 조금 넓은 바닥 띠와 가운데 홈. 맥북으로 읽히게 하는 것은 화면
   비율이 아니라 이 띠다.

   홈은 바탕색으로 덮지 않고 clip-path 로 실제로 도려낸다 — 덮으면 이 목업이
   놓인 밴드마다 색을 따라다녀야 하고, 한 군데만 어긋나도 검은 띠 위에 밝은
   사각형이 뜬다. */
.macbook-foot {
	/* 좁은 화면에서는 figure 가 단을 꽉 채우므로, 넘치는 폭은 여백이 받아낼 수
	   있는 만큼만 준다 — 112% 로 두면 가장 좁은 배치에서 띠가 화면 왼쪽 끝에
	   닿았다. */
	width: 108%;
	margin-left: -4%;
	height: 9px;
	background: #08080a;
	border-radius: 0 0 7px 7px;
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.12);
	clip-path: polygon(
		0 0, calc(50% - 33px) 0, calc(50% - 33px) 4px, calc(50% + 33px) 4px,
		calc(50% + 33px) 0, 100% 0, 100% 100%, 0 100%
	);
}

/* 화면 전체가 아니라 잘라낸 조각 — 기기 액자 대신 같은 회색 테두리로 통일한다.
   테두리와 모따기는 사진을 감싼 .frame 이 낸다(아래 '모따기한 모서리' 참고). */
.shot .frame {
	display: block;
	padding: 1px;
	background: var(--frame-line);
	clip-path: var(--chamfer-5);
}

.shot img {
	display: block;
	width: 100%;
	height: auto;
	clip-path: var(--chamfer-inner);
}

/* 앱 화면을 흉내낸 카드들도 같은 5px 모따기로 맞춘다. 사진과 달리 안에 내용이
   들어 있어 액자를 하나 더 두를 수 없으므로, 테두리는 요소의 바탕색으로 깔고
   ::before 로 1px 안쪽 면을 덮는다. z-index:0 으로 쌓임 문맥을 만들어 두면
   -1 인 면이 바탕 위·내용 아래에 정확히 놓인다. */
.state-screen,
.goal-card,
.pro-card {
	position: relative;
	z-index: 0;
	background: var(--frame-line);
	clip-path: var(--chamfer-5);
}

.state-screen::before,
.goal-card::before,
.pro-card::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 1px;
	background: var(--fill);
	clip-path: var(--chamfer-inner);
}

.shot figcaption {
	font-family: var(--pixel);
	font-size: 11px;
	color: var(--ink-40);
	margin-top: 9px;
}


/* ── 목표 데모 ──────────────────────────────────────────── */

.goal-card {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	--fill: var(--paper);
	--frame-line: var(--ink-12);
	padding: 22px;
}

.goal-readout {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.goal-card .readout {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.goal-card .readout .big {
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.goal-card .readout .goal {
	font-size: 13px;
	color: var(--ink-40);
}

.goal-card .status {
	font-family: var(--pixel);
	font-size: 11px;
	color: var(--ink-55);
	text-align: right;
}

.goal-head {
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 15px;
	margin-top: 18px;
}

.goal-buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 10px;
}

.goal-buttons button {
	appearance: none;
	border: 1px solid var(--ink-12);
	background: transparent;
	font-family: var(--pixel);
	padding: 9px 2px;
	cursor: pointer;
	color: var(--ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	line-height: 1.1;
}

.goal-buttons button .steps {
	font-weight: 700;
	font-size: 14px;
}

.goal-buttons button .distance {
	font-size: 10px;
	color: var(--ink-40);
}

.goal-buttons button:hover {
	background: var(--ink-06);
}

.goal-buttons button[aria-pressed="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--cream);
}

.goal-buttons button[aria-pressed="true"] .distance {
	color: var(--cream-45);
}

/* ── 꾸미기 (앱의 '달팽이 꾸미기' 화면) ─────────────────── */

/* 앱은 어두운 미리보기 상자 아래에 6열 견본 격자 둘을 세로로 놓는다.
   폭도 앱 화면(약 354pt) 정도로 묶어 같은 밀도로 보이게 한다. */
.dress-app {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 48px;
	align-items: stretch;
}

.dress-grids {
	display: flex;
	flex-direction: column;
	gap: 26px;
	min-width: 0;
}

/* 높이는 옆의 견본 격자(달팽이 색 + 껍데기 색)가 정한다. 상자는 그 높이를
   그대로 채우고, 달팽이는 남는 여백을 위아래로 똑같이 나눠 가운데에 선다. */
.dress-preview {
	background: var(--ink);
	align-self: stretch;
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	clip-path: polygon(
		5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px),
		calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px
	);
}

.dress-preview .snail {
	--px: 10px;
}

.dress-group {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.dress-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.dress-title {
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 17px;
}

.dress-caption {
	font-family: var(--pixel);
	font-size: 13px;
	color: var(--ink-40);
}

/* 견본 한 칸. 앱과 같은 규칙 — 테두리는 픽셀 모서리, 선택은 안쪽 잉크 윤곽선,
   PRO 프리셋은 배지가 붙고 잠긴 동안 흐려진다. 몸과 껍데기는 색을 채우는
   여백만 다르다(껍데기가 더 깊이 들어간다). */
.swatches {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	max-width: 340px;
}

.swatches button {
	appearance: none;
	position: relative;
	aspect-ratio: 1;
	padding: 0;
	background: transparent;
	border: 1.5px solid var(--parchment);
	cursor: pointer;
	clip-path: polygon(
		4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px),
		calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px
	);
}

.swatches button[aria-pressed="true"] {
	border-color: var(--ink);
	border-width: 2px;
}

.swatches .fill {
	position: absolute;
	inset: 3px;
	display: block;
	clip-path: polygon(
		3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px),
		calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px
	);
}

.swatches.body button[aria-pressed="true"] .fill {
	inset: 6px;
}

.swatches.shell .fill {
	inset: 8px;
}

.swatches .fill.locked {
	opacity: 0.55;
}

/* PRO 배지 — 앱과 같은 자리(오른쪽 위)에 같은 크기로. */
.swatches .pro-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	z-index: 1;
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 8px;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 2px 3px;
	background: var(--shell);
	color: var(--cream);
}

/* 레인보우 견본은 원뿔 그라디언트가 천천히 돈다 — 앱의 RainbowFill 과 같다. */
.swatches .fill.rainbow {
	overflow: hidden;
}

.swatches .sweep {
	position: absolute;
	inset: 0;
	display: block;
	background: conic-gradient(
		from -90deg,
		#ff6b6b,
		#ffd166,
		#8ce99a,
		#74c0fc,
		#b197fc,
		#ff6b6b
	);
	animation: spinhue 4s linear infinite;
}

/* 회전하면서도 모서리를 덮도록 앱처럼 1.6배로 키운다. 넘치는 부분은
   견본 칸의 clip-path 가 잘라낸다. */
@keyframes spinhue {
	from {
		transform: rotate(0) scale(1.6);
	}
	to {
		transform: rotate(360deg) scale(1.6);
	}
}

.pro-stage {
	display: flex;
	justify-content: center;
	padding: 22px 0;
}

/* 좁은 화면에서는 달팽이를 위로 올려 붙여두고, 그 아래에서 견본을 훑는다. */
@media (max-width: 880px) {
	.dress-app {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.dress-stage {
		order: -1;
		align-self: auto;
	}

	.dress-preview {
		height: 240px;
	}

	.swatches {
		max-width: none;
	}
}

/* ── 주소 복사 ──────────────────────────────────────────── */

/* 누르면 클립보드에 복사된다. mailto 는 기본 메일 앱이 없는 기기에서 아무 일도
   일어나지 않아 눌러도 반응이 없는 것처럼 보이므로, 복사로 대신한다. */
.email-address {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	font-family: var(--pixel);
	font-size: 16px;
	color: var(--ink);
	cursor: pointer;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	word-break: break-all;
	text-align: left;
}

.email-address:hover {
	color: var(--confirm);
}

.email-address.inline {
	font-size: inherit;
	font-family: inherit;
	color: var(--ink);
}

/* 복사했다는 알림. 화면 아래 가운데에 잠깐 떴다 사라진다. */
.toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translate(-50%, 8px);
	z-index: 90;
	background: var(--ink);
	color: var(--cream);
	font-family: var(--pixel);
	font-size: 13px;
	padding: 12px 16px;
	box-shadow: 0 12px 30px rgba(24, 22, 19, 0.28);
	opacity: 0;
	transition: opacity 0.18s ease-out, transform 0.18s ease-out;
	pointer-events: none;
}

.toast.visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ── 달팽이의 상태 ──────────────────────────────────────── */

/* 잠금화면에서 오려낸 조각 세 장. 어두운 화면이던 시절에는 배경만으로 화면인
   것이 읽혔지만 흰 배경화면에서는 종이색 위의 흰 사각형이라, 잘라낸 캡처에
   쓰는 것과 같은 회색 테두리를 둘러 화면으로 읽히게 한다. */
.state-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.state-screen {
	position: relative;
	overflow: hidden;
	padding: 16px;
	--fill: #fff;
	color: var(--ink);
}

/* 히어로의 카드는 잠금화면 바닥에 붙어 있어 절대 배치다. 조각 안에서는
   흐름 안에 놓고, 흰 바탕에 맞춰 잉크를 뒤집는다. */
.state-screen .lock-card {
	position: relative;
	left: auto;
	width: auto;
	bottom: auto;
	background: rgba(26, 24, 21, 0.04);
	border: 1px solid var(--ink-12);
	border-radius: 0;
	color: var(--ink);
}

.state-screen .lock-card .count span,
.state-screen .lock-card .status {
	color: var(--ink-40);
}

.state-screen .lock-card .legend {
	color: rgba(26, 24, 21, 0.35);
}

.state-screen .track .rail {
	background: var(--ink-12);
}

.state-card h3 {
	font-family: var(--pixel);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.32;
	margin: 18px 0 8px;
}

.state-card p {
	margin: 0;
	color: var(--ink-70);
	font-size: 15px;
	line-height: 1.7;
}

/* MeltingSnail — 앱은 3.2초에 걸쳐 세로 0.42배로 주저앉는다. 여기서는
   다 녹은 모습으로 둔다. */
.snail.melted {
	transform: scaleY(0.42);
	transform-origin: bottom;
}

/* ── 사진 곁의 안내 ─────────────────────────────────────── */

/* 기기 목업 아래에 붙는 이름표. .shot figcaption 과 같은 톤이다. */
/* 기기 목업은 max-width + margin auto 로 가운데 정렬된다. 이름표를 단 전체
   폭으로 두면 사진보다 왼쪽에서 시작하므로, 바로 앞 목업과 같은 폭 상자에
   담아 왼쪽 아래에 붙인다. */
.device-note {
	display: block;
	width: 100%;
	margin: 9px auto 0;
	font-family: var(--pixel);
	font-size: 11px;
	color: var(--ink-40);
	text-align: left;
}

.phone + .device-note {
	max-width: 340px;
}

.device + .device-note {
	max-width: 320px;
}

/* 눌러보라고 권하는 한 줄. 이름표보다 크고 조금 진하다. */
/* 눌러보라고 권하는 한 줄. 가리키는 대상 폭 안에서 가운데. */
.try-note {
	width: 100%;
	margin: 16px auto 0;
	font-family: var(--pixel);
	font-size: 16px;
	font-weight: 500;
	color: var(--ink-40);
	text-align: center;
}

/* 목표 카드(380px) 아래 가운데. */
.goal-card + .try-note {
	max-width: 380px;
}

/* 달팽이 미리보기와 그 위 안내를 한 칸으로 묶는다. 안내는 미리보기 바로
   위 가운데에 놓이고, 미리보기가 남은 높이를 채운다. */
.dress-stage {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.dress-stage > .try-note {
	margin: 0 0 12px;
}

.dress-stage > .dress-preview {
	flex: 1;
}

@media (max-width: 880px) {
	.state-cards {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* ── 도트 폰트를 쓰는 자리 ──────────────────────────────── */

/* Galmuri11 은 제목에서만 쓴다. 규칙이 마흔 군데에 흩어져 있고 선택자 무게도
   제각각이라, 규칙을 하나씩 덮는 대신 --pixel 자체를 범위 안에서 본문 서체로
   바꾼다. 상속이 알아서 내려가므로 우선순위 다툼이 없다. */

/* 홈 본문 — 각 섹션의 제목만 도트로 남긴다. */
.home {
	--pixel: var(--sans);
}

.home h1,
.home h2 {
	--pixel: var(--pixel-face);
}

/* 앱 화면을 흉내낸 자리는 도트 그대로 둔다 — 실제 앱이 이 서체를 쓰므로,
   여기서 본문 서체로 바꾸면 옆에 놓인 실제 스크린샷과 글씨가 어긋난다.
   폰 목업과 잠금화면 조각, 그리고 앱 화면을 그대로 옮긴 카드들이다. */
.phone,
.state-screen,
.goal-card,
.dress-app,
.pro-card {
	--pixel: var(--pixel-face);
}

/* 지원 · 개인정보처리방침 본문 — 제목까지 전부 본문 서체. */
.doc {
	--pixel: var(--sans);
}