/*
 * 배상해 — 스타일시트.
 *
 * ⚠️ CLAUDE.md §10 이 이 파일의 명세다. 토큰을 늘리기 전에 §10.8 체크리스트를 읽을 것.
 *
 * 두 가지만 기억하면 된다.
 *   1. 난색은 --gap 하나뿐이고, 차액 이외의 어떤 요소에도 쓰지 않는다. CTA 에도.
 *   2. 페이지에서 가장 큰 활자는 총 배상액이 아니라 차액이다.
 *
 * Tailwind 를 쓰지 않는다. calchae 는 Tailwind 지만 §0 이 시각 디자인 승계를 금지하고,
 * §10 의 명세가 좁고 구체적이라 유틸리티 클래스를 거치면 오히려 토큰이 흐려진다.
 * 빌드 단계가 없어 배포도 가벼워진다.
 */

/* ─── 토큰 (§10.2) ───────────────────────────────────────────────────────── */

:root {
	--ink: #12242b; /* 깊은 페트롤. 순수 검정을 쓰지 않는다 */
	--paper: #f7f8f6; /* 미세하게 차가운 오프화이트. 크림 계열 금지 */
	--court: #2e6e6b; /* 딥 틸. '법원 기준' 트랙 전용 */
	--policy: #8a9296; /* 쿨 그레이. '약관 기준' 트랙 전용 */
	--gap: #9c7b2e; /* 머스터드 브라스. 차액 전용. 사이트에서 유일한 난색 */
	--line: #dde1de;

	--ink-70: #12242bb3;
	--ink-55: #12242b8c;
	--surface: #ffffff;
	--court-tint: #2e6e6b14;
	--gap-tint: #9c7b2e1f;

	--sans: Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
	--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--radius: 4px;
	--wrap: 1080px;
}

/* ─── 기본 ──────────────────────────────────────────────────────────────── */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.75;
	/* §10.3 — 모든 수치를 고정폭으로 조판한다. 비교표에서 자릿수가 정확히 맞고,
	   숫자가 "마케팅된 값"이 아니라 "감사 가능한 계산 결과"로 읽힌다. */
	font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
	line-height: 1.35;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	font-weight: 700;
}

h1 {
	font-size: 1.75rem;
}
h2 {
	font-size: 1.25rem;
	margin-top: 2.5rem;
}
h3 {
	font-size: 1rem;
	margin-top: 1.75rem;
}

p {
	margin: 0 0 1rem;
}

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

a:hover {
	text-decoration-thickness: 2px;
}

/* §10.8 — 키보드 포커스가 보이는가 */
:focus-visible {
	outline: 2px solid var(--court);
	outline-offset: 2px;
}

/* 숫자는 전부 mono (§10.3) */
.num {
	font-family: var(--mono);
	font-feature-settings: 'tnum' 1;
	letter-spacing: -0.01em;
}

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

.skip:focus {
	left: 1rem;
	top: 1rem;
	z-index: 100;
	background: var(--surface);
	padding: 0.5rem 1rem;
	border: 1px solid var(--ink);
}

/* ─── 뼈대 ──────────────────────────────────────────────────────────────── */

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 20px;
}

.site-header {
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}

.site-header .wrap {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	padding-top: 14px;
	padding-bottom: 14px;
}

.brand {
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--ink);
	text-decoration: none;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.site-nav {
	display: flex;
	gap: 1rem;
	font-size: 0.875rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
	display: none;
}

.site-nav a {
	color: var(--ink-70);
	text-decoration: none;
	white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
	color: var(--court);
}

main {
	padding: 2rem 0 4rem;
}

.site-footer {
	border-top: 1px solid var(--line);
	padding: 2rem 0 5rem;
	font-size: 0.8125rem;
	color: var(--ink-55);
}

.site-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin-bottom: 1rem;
}

.site-footer a {
	color: var(--ink-70);
}

/* ─── 시그니처 요소: 차액 바 (§10.4) ────────────────────────────────────── */

/*
 * 사이트 전체가 이것 하나로 기억되게 만든다.
 * 왼쪽에 약관/제시액이 회색으로 차고, 오른쪽 나머지 구간이 브라스로 남는다.
 */
.gapbar {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.25rem;
}

.gapbar__lead {
	font-size: 0.8125rem;
	color: var(--ink-55);
	margin: 0 0 0.75rem;
}

.gapbar__track {
	display: flex;
	height: 40px;
	border-radius: 2px;
	overflow: hidden;
	background: var(--line);
}

.gapbar__fill {
	background: var(--policy);
	min-width: 2px;
	transition: flex-basis 320ms ease;
}

.gapbar__rest {
	background: var(--gap);
	flex: 1 1 auto;
	min-width: 2px;
}

/* 차액이 0 이하면 회색 단색. 억지로 차액을 만들어내지 않는다 (§10.4). */
.gapbar[data-direction='policyHigher'] .gapbar__fill,
.gapbar[data-direction='equal'] .gapbar__fill {
	background: var(--policy);
	flex-basis: 100% !important;
}

.gapbar[data-direction='policyHigher'] .gapbar__rest,
.gapbar[data-direction='equal'] .gapbar__rest {
	display: none;
}

/*
 * 빈 상태에서도 브라스를 내보내지 않는다.
 * 아직 아무것도 계산되지 않았는데 차액 색이 바를 가득 채우면 §10.8 의
 * "브라스 색이 차액 외의 곳에 쓰였는가"에 걸린다. 트랙은 --line 만 남는다.
 */
.gapbar[data-direction='empty'] .gapbar__rest {
	display: none;
}

.gapbar__labels {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.5rem;
	font-size: 0.75rem;
}

.gapbar__labels dt {
	color: var(--ink-55);
	margin: 0 0 0.125rem;
	font-weight: 400;
}

.gapbar__labels dd {
	margin: 0;
	font-weight: 600;
}

.gapbar__side--policy dd {
	color: var(--policy);
}

.gapbar__side--gap {
	text-align: right;
}

.gapbar__side--gap dd {
	color: var(--gap);
}

/* 페이지에서 가장 큰 활자 (§10.4) */
.gapbar__headline {
	margin-top: 1.5rem;
	text-align: center;
}

.gapbar__amount {
	display: block;
	font-family: var(--mono);
	font-size: clamp(2.25rem, 11vw, 3.5rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.04em;
	color: var(--gap);
}

.gapbar[data-direction='policyHigher'] .gapbar__amount,
.gapbar[data-direction='equal'] .gapbar__amount {
	color: var(--ink);
}

.gapbar__caption {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--ink-70);
}

.gapbar__empty {
	color: var(--ink-55);
	font-size: 0.9375rem;
	text-align: center;
	padding: 1.5rem 0 0.5rem;
	margin: 0;
}

/* ─── 두 트랙 비교표 (§3.3) ─────────────────────────────────────────────── */

.tracks {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.875rem;
}

.tracks caption {
	text-align: left;
	font-size: 0.8125rem;
	color: var(--ink-55);
	padding-bottom: 0.5rem;
}

.tracks th,
.tracks td {
	padding: 0.625rem 0.5rem;
	border-bottom: 1px solid var(--line);
	text-align: right;
}

.tracks th[scope='row'] {
	text-align: left;
	font-weight: 400;
	color: var(--ink-70);
}

.tracks thead th {
	font-size: 0.75rem;
	font-weight: 600;
	border-bottom-width: 2px;
}

.tracks .col-court {
	color: var(--court);
}

.tracks .col-policy {
	color: var(--policy);
}

.tracks tbody td {
	font-family: var(--mono);
	font-size: 0.8125rem;
}

.tracks tfoot td,
.tracks tfoot th {
	font-weight: 700;
	border-bottom: none;
	padding-top: 0.875rem;
}

.tracks .capped {
	display: block;
	font-family: var(--sans);
	font-size: 0.6875rem;
	color: var(--ink-55);
}

.table-scroll {
	overflow-x: auto;
}

/* ─── 입력 (§3.4, §10.5) ────────────────────────────────────────────────── */

.step {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.25rem;
	margin-bottom: 1rem;
}

.step__num {
	display: inline-block;
	font-family: var(--mono);
	font-size: 0.6875rem;
	color: var(--court);
	background: var(--court-tint);
	padding: 0.125rem 0.5rem;
	border-radius: 2px;
	margin-bottom: 0.5rem;
}

.step h2 {
	margin-top: 0;
	font-size: 1.0625rem;
}

.step__hint {
	font-size: 0.8125rem;
	color: var(--ink-55);
	margin: -0.25rem 0 1rem;
}

.field {
	margin-bottom: 1rem;
}

.field > label {
	display: block;
	font-size: 0.8125rem;
	color: var(--ink-70);
	margin-bottom: 0.3125rem;
}

.field__unit {
	color: var(--ink-55);
	font-size: 0.75rem;
}

.field input,
.field select {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

.field select {
	font-family: var(--sans);
}

.field input:focus,
.field select:focus {
	border-color: var(--court);
}

.field__note {
	font-size: 0.75rem;
	color: var(--ink-55);
	margin: 0.3125rem 0 0;
}

.grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 0.75rem;
}

details.more {
	border-top: 1px solid var(--line);
	padding-top: 1rem;
	margin-top: 0.5rem;
}

details.more > summary {
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--court);
	list-style: none;
}

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

details.more > summary::before {
	content: '＋ ';
}

details.more[open] > summary::before {
	content: '－ ';
}

/* ─── 근거·주의 (§6.4, §7.2) ────────────────────────────────────────────── */

.basis {
	border-left: 2px solid var(--line);
	padding: 0.25rem 0 0.25rem 1rem;
	margin: 1.5rem 0;
	font-size: 0.8125rem;
	color: var(--ink-70);
}

.basis dt {
	font-weight: 600;
	color: var(--ink);
	margin-top: 0.625rem;
}

.basis dt:first-child {
	margin-top: 0;
}

.basis dd {
	margin: 0 0 0.25rem;
}

.notice {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.875rem 1rem;
	font-size: 0.8125rem;
	color: var(--ink-70);
	margin: 1.5rem 0;
}

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

.reviewed {
	font-size: 0.75rem;
	color: var(--ink-55);
	margin-top: 2.5rem;
}

/* ─── 카드 목록 ─────────────────────────────────────────────────────────── */

.cards {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
	padding: 0;
	margin: 1.5rem 0;
	list-style: none;
}

.card {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1rem 1.125rem;
	text-decoration: none;
	color: inherit;
}

.card:hover {
	border-color: var(--court);
}

.card b {
	display: block;
	font-size: 0.9375rem;
	margin-bottom: 0.25rem;
}

.card span {
	font-size: 0.8125rem;
	color: var(--ink-55);
	line-height: 1.6;
}

/* ─── 레이아웃 (§10.5) ──────────────────────────────────────────────────── */

/*
 * 모바일: 단일 컬럼 + 차액 바를 화면 하단에 sticky 로 고정한다.
 * 사용자가 정밀 입력을 채우는 동안 숫자가 바뀌는 것이 보여야 2단계 이탈률이 떨어진다.
 * 이 사이트에서 가장 중요한 UX 결정이다.
 */
.result-panel {
	position: sticky;
	bottom: 0;
	z-index: 20;
	margin: 1.5rem -20px 0;
	padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 12px);
	background: var(--paper);
	border-top: 1px solid var(--line);
	box-shadow: 0 -8px 24px #12242b0f;
}

.result-panel .gapbar {
	border: none;
	padding: 0.875rem 0 0;
	background: transparent;
}

/* 모바일 sticky 상태에서는 헤드라인을 접어 입력을 가리지 않게 한다 (§10.8 — 360px) */
.result-panel .gapbar__headline {
	margin-top: 0.875rem;
}

.result-panel .gapbar__amount {
	font-size: clamp(1.75rem, 8vw, 2.25rem);
}

/*
 * 좁은 화면에서 sticky 바가 입력을 가리지 않게 조인다 (§10.8 — 360px 체크).
 * 기준 병기(§10.7)를 위해 라벨 줄은 남긴다. 줄이는 것은 여백과 트랙 높이뿐이다.
 */
@media (max-width: 879px) {
	.result-panel .gapbar__lead {
		margin-bottom: 0.5rem;
	}

	.result-panel .gapbar__track {
		height: 30px;
	}

	.result-panel .gapbar__headline {
		margin-top: 0.625rem;
	}

	.result-panel .gapbar__caption {
		margin-top: 0.25rem;
		font-size: 0.8125rem;
	}
}

.result-detail {
	margin-top: 2rem;
}

@media (min-width: 880px) {
	.calc-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
		gap: 2rem;
		align-items: start;
	}

	/* 데스크톱은 좌측 입력 / 우측 sticky 결과의 2단 구성 */
	.result-panel {
		position: sticky;
		top: 1.5rem;
		bottom: auto;
		margin: 0;
		padding: 0;
		border-top: none;
		box-shadow: none;
	}

	.result-panel .gapbar {
		border: 1px solid var(--line);
		background: var(--surface);
		padding: 1.25rem;
	}

	.result-panel .gapbar__amount {
		font-size: clamp(2.25rem, 4vw, 3rem);
	}

	.cards {
		grid-template-columns: 1fr 1fr;
	}

	h1 {
		font-size: 2.125rem;
	}
}

.prose {
	max-width: 68ch;
}

/* ─── 모션 (§10.6) ──────────────────────────────────────────────────────── */

/*
 * 거의 쓰지 않는다. 허용되는 것은 차액 바의 숫자 롤업 하나뿐이고 400ms 이내다.
 * 스크롤 리빌·패럴랙스·페이드인 시퀀스는 전부 금지.
 * 중상해 피해자와 사망사고 유족이 들어오는 화면이다 — 절제 자체가 신뢰의 신호다.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}