/*!
 * calc-ui.css — 사이트 1 계산기 화면
 * =============================================================================
 *  테마를 가리지 않아야 한다. 그래서
 *    - 전역 요소 선택자(input, table 등)를 건드리지 않고 nc- 클래스로만 쓴다
 *    - 색 값은 디자인 시스템(--wd-*)에서 온다 (Stage 13 부터 — 아래 주석)
 *  계산기는 광고 트래픽을 받는 곳이라 모바일 비중이 높다. 좁은 화면이 기본이고
 *  넓은 화면에서 열이 늘어난다.
 * =============================================================================
 */

/* 목록 숏코드는 계산기 밖(허브 페이지)에서도 단독으로 쓰인다.
   변수를 .nc-calc 에만 두면 그때 색과 테두리가 통째로 사라진다. */
/*
 * ⚠ 값은 여기 없다 — 디자인 시스템(--wd-*)을 **잇는다** (Stage 13).
 *   전에는 이 파일이 자기 팔레트(light-dark(#1f6feb…))를 갖고 있었다.
 *   Stage 03 이후 색의 원본은 각 사이트의 theme.json 하나이고, 세 테마
 *   모두 color-scheme: light 를 선언하므로 light-dark() 가 하던 일도
 *   그 체계 안에서 끝난다. 두 벌을 두면 사이트 색을 바꿔도 계산기만
 *   옛 파랑으로 남는다 — 오류 없이.
 *   뒤 fallback 은 wp3-design 이 꺼진 화면(이론상)을 위한 옛 값이다.
 */
/*
 * ⚠ :root 에 정의한다 — 처음에 컨테이너 범위에 뒀더니, 그 컨테이너의
 *   DOM 자손이 아닌 화면(첫 화면 카드 등)에서 var() 가 미정의가 됐다.
 *   background: var(미정의) 는 조용히 투명이 된다 — 사이트 3 배지가
 *   실제로 그렇게 안 보였다 (2026-08-06). 접두사라 :root 에 둬도 안전하다.
 */
:root {
	--nc-gap: var(--wd-s-40, 1rem);
	--nc-radius: var(--wd-r-md, 10px);
	--nc-border: var(--wd-border, rgba(127, 127, 127, 0.35));
	--nc-surface: var(--wd-bg, rgba(127, 127, 127, 0.07));
	--nc-accent: var(--wd-primary, #1f6feb);
	--nc-danger: var(--wd-danger, #c0392b);
	--nc-accent-solid: var(--wd-primary, #1f6feb);
	--nc-muted: var(--wd-muted, color-mix(in srgb, currentColor 70%, transparent));
}

.nc-calc {
	margin: 2rem 0;
	padding: 1.25rem;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	line-height: 1.6;
}

.nc-calc__title {
	margin: 0 0 0.35rem;
	font-size: 1.35rem;
}

.nc-calc__summary {
	margin: 0 0 1rem;
	color: var(--nc-muted);
}

/* ── 입력 ───────────────────────────────────────────────────────────────── */

.nc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nc-gap);
}

@media (min-width: 34rem) {
	.nc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.nc-group {
	margin: var(--nc-gap) 0 0;
	padding: 0.9rem;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	min-width: 0;
}

.nc-group > legend {
	padding: 0 0.4rem;
	font-weight: 700;
}

.nc-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.nc-field[hidden] {
	display: none;
}

.nc-field__label {
	font-size: 0.92rem;
	font-weight: 600;
}

.nc-field__unit {
	font-weight: 400;
	color: var(--nc-muted);
}

.nc-field__required {
	color: var(--nc-danger);
	text-decoration: none;
	border: 0;
}

.nc-field__input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 0.6rem;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	color: inherit;
	background: transparent;
	border: 1px solid var(--nc-border);
	border-radius: 6px;
}

.nc-field__input:focus-visible {
	outline: 2px solid var(--nc-accent);
	outline-offset: 1px;
}

.nc-field__input.is-invalid {
	border-color: var(--nc-danger);
}

.nc-field__help {
	margin: 0;
	font-size: 0.82rem;
	color: var(--nc-muted);
}

.nc-field__error,
.nc-calc__error {
	margin: 0;
	font-size: 0.85rem;
	color: var(--nc-danger);
}

.nc-calc__error {
	margin-top: var(--nc-gap);
}

/* ── 버튼 ───────────────────────────────────────────────────────────────── */

.nc-calc__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--nc-gap);
}

.nc-btn {
	padding: 0.5rem 0.9rem;
	font: inherit;
	font-size: 0.92rem;
	color: inherit;
	background: var(--nc-surface);
	border: 1px solid var(--nc-border);
	border-radius: 6px;
	cursor: pointer;
}

.nc-btn:hover {
	border-color: var(--nc-accent);
}

.nc-btn--primary {
	color: #fff;
	background: var(--nc-accent-solid);
	border-color: var(--nc-accent-solid);
}

.nc-calc__flash {
	font-size: 0.85rem;
	color: var(--nc-muted);
}

/* ── 결과 ───────────────────────────────────────────────────────────────── */

.nc-result {
	margin-top: 1.25rem;
}

.nc-result__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.75rem;
}

.nc-card {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem;
	background: var(--nc-surface);
	border-radius: var(--nc-radius);
}

.nc-card__label {
	font-size: 0.85rem;
	color: var(--nc-muted);
}

.nc-card__value {
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.nc-card__unit {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--nc-muted);
}

.nc-card__note {
	font-size: 0.78rem;
	color: var(--nc-muted);
}

.nc-result__table {
	width: 100%;
	margin-top: 0.9rem;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.nc-result__caption {
	padding-bottom: 0.35rem;
	text-align: left;
	font-weight: 600;
	color: var(--nc-muted);
}

.nc-result__table th,
.nc-result__table td {
	padding: 0.45rem 0.3rem;
	border-bottom: 1px solid var(--nc-border);
	text-align: left;
	vertical-align: top;
}

.nc-result__table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.nc-result__table th {
	font-weight: 500;
}

.nc-result__note {
	display: block;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--nc-muted);
}

.nc-result__unit {
	color: var(--nc-muted);
}

/* ── 부속 ───────────────────────────────────────────────────────────────── */

.nc-calc__note,
.nc-notice {
	margin-top: 1rem;
	padding: 0.7rem 0.85rem;
	font-size: 0.86rem;
	color: var(--nc-muted);
	background: var(--nc-surface);
	border-radius: 8px;
}

.nc-notice--error {
	color: var(--nc-danger);
}

.nc-related {
	margin-top: 1.25rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--nc-border);
}

.nc-related__title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.nc-related__list {
	margin: 0;
	padding-left: 1.1rem;
}

.nc-list-wrap {
	margin-top: 1.25rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--nc-border, rgba(127, 127, 127, 0.35));
}

.nc-list__heading {
	margin: 0 0 0.25rem;
	font-size: 1rem;
}

.nc-list {
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}

.nc-list__item {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--nc-border);
}

.nc-list__link {
	font-weight: 600;
}

.nc-list__summary {
	display: block;
	font-size: 0.86rem;
	color: var(--nc-muted);
}

@media print {
	.nc-calc__actions,
	.nc-field__help,
	.nc-related {
		display: none;
	}
}

/* ── 첫 화면 카드와 통합 검색 (Stage 05) ──────────────────────────────── */
/*
 * ⚠ 색을 직접 적지 않는다. 사이트의 팔레트는 theme.json 이 정하고
 *   `--wd-*` 가 그것을 잇는다. 여기서 `#2563eb` 를 적으면 사이트 색을
 *   바꿔도 이 부분만 옛 색으로 남는다.
 */

/*
 * ⚠ 이름을 `nc-tool-card` 로 둔다. `nc-card` 는 **이미 결과 요약 카드**다.
 *   Stage 05 에서 같은 이름을 쓰는 바람에 첫 화면의 도구 카드가 결과 카드의
 *   여백·배경(`padding: .85rem; background: var(--nc-surface)`)을 함께
 *   받고 있었다. 화면은 그럴듯해서 눈으로는 못 알아봤다.
 */
.nc-tool-card { position: relative; }
.nc-tool-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--wd-r-sm);
	background: var(--wd-info-soft);
	color: var(--wd-primary);
}
.nc-icon { width: 22px; height: 22px; }
.nc-tool-card .wd-card-title { margin: 0; }
.nc-tool-card .wd-card-title a { color: var(--wd-text); text-decoration: none; }
.nc-tool-card .wd-card-title a:hover { color: var(--wd-primary); text-decoration: underline; }

/*
 * ⚠ 카드 전체를 누르게 만들지 않았다.
 *   카드를 통째로 링크로 감싸면 설명 문장을 드래그해 복사할 수 없고,
 *   화면을 소리로 읽을 때 제목·설명·단추가 **한 덩어리 링크**로 읽힌다.
 *   제목과 단추, 두 곳이 같은 곳으로 간다.
 */

/* 통합 검색 */
.nc-filter {
	display: grid;
	gap: 0.4rem;
	margin-bottom: var(--wd-s-50);
	max-width: 26rem;
}
.nc-filter__label { font-weight: 600; font-size: 0.9375rem; }
.nc-filter input {
	min-height: var(--wd-touch);
	padding: 0 0.75rem;
	font: inherit;
	color: var(--wd-text);
	background: var(--wd-surface);
	border: 1px solid var(--wd-border-strong);
	border-radius: var(--wd-r-sm);
}
.nc-filter input:focus-visible {
	outline: 2px solid var(--wd-primary);
	outline-offset: 2px;
}
.nc-filter__count {
	margin: 0;
	min-height: 1.2em;      /* 글자가 생겼다 없어질 때 아래가 들썩이지 않게 */
	font-size: 0.85rem;
	color: var(--wd-muted);
}
.nc-filter__empty { margin-top: var(--wd-s-40); }

/* 한 줄짜리 목록 — 상황별 추천에서 쓴다 */
.nc-compact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.nc-compact li { border-top: 1px solid var(--wd-border); }
.nc-compact li:first-child { border-top: 0; }

/*
 * ⚠ 여백을 `li` 가 아니라 `a` 에 준다.
 *   손가락이 닿는 것은 링크지 목록 항목이 아니다. `li` 에 여백을 주면
 *   보기에는 널찍한데 실제로 눌리는 자리는 글자 높이 24px 뿐이다.
 *   화면만 보고는 알 수 없다 — 재 봐야 안다 (명세 §14, 최소 44px).
 */
.nc-compact a {
	display: block;
	padding-block: 0.6rem;
	min-height: var(--wd-touch);
	font-weight: 600;
	color: var(--wd-text);
	text-decoration: none;
}
.nc-compact a:hover { color: var(--wd-primary); text-decoration: underline; }
.nc-compact a:focus-visible { outline: 2px solid var(--wd-primary); outline-offset: 2px; }
.nc-compact__note {
	display: block;
	margin: -0.35rem 0 0.55rem;
	color: var(--wd-muted);
	font-size: 0.875rem;
}

/* ── 계산기 상세 구획 (Stage 06) ──────────────────────────────────────── */
/*
 * ⚠ 입력과 결과를 **눈에 보이게** 가른다 (명세 8절).
 *   예전에는 폼과 결과가 같은 바탕 위에 이어져 있어서, 값을 고쳤을 때
 *   무엇이 바뀐 것인지 한눈에 안 들어왔다. 좁은 화면에서는 결과가 화면
 *   밖이라 "계산이 되긴 했나" 조차 알 수 없었다.
 */
.nc-zone {
	margin-block: var(--wd-s-50);
	padding: var(--wd-s-40);
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-r-md);
	background: var(--wd-surface);
}
.nc-zone--result {
	/* 결과 쪽만 왼쪽에 색 띠. 색만으로 알리지 않으므로 제목도 함께 있다. */
	border-left: 4px solid var(--wd-primary);
	background: var(--wd-bg);
}
.nc-zone__title {
	margin: 0 0 var(--wd-s-30);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wd-muted);
}

/*
 * ⚠ 핵심 숫자를 크게 (명세 8절).
 *   `--wd-fs-figure` 는 Stage 03 에서 이 용도로 만든 값이다. 여기서 임의의
 *   px 을 적으면 사이트마다 결과 숫자 크기가 갈라진다.
 */
.nc-zone--result .nc-card__value {
	font-size: var(--wp--preset--font-size--figure, 2rem);
	line-height: 1.15;
}

.nc-guide {
	margin: 0 0 var(--wd-s-30);
	font-size: 0.9375rem;
	color: var(--wd-muted);
}

/* 계산 근거 — 접어 둔다. 답을 얻으러 온 사람에게 식을 먼저 들이밀지 않는다. */
.nc-basis {
	margin-block: var(--wd-s-40);
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-r-sm);
	background: var(--wd-surface);
}
.nc-basis > summary {
	padding: 0.7rem var(--wd-s-40);
	min-height: var(--wd-touch);
	display: flex;
	align-items: center;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
}
.nc-basis > summary:focus-visible { outline: 2px solid var(--wd-primary); outline-offset: -2px; }
.nc-basis__body { padding: 0 var(--wd-s-40) var(--wd-s-40); }
.nc-basis__body > :first-child { margin-top: 0; }
.nc-basis__body ul { margin: 0; padding-left: 1.2em; }
.nc-basis__body li { margin-block: 0.3rem; }

/* 실제 예시 */
.nc-example { margin-block: var(--wd-s-50); }
.nc-example h3 { font-size: 1.0625rem; margin-bottom: var(--wd-s-30); }
.nc-example__more { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--wd-muted); }
.nc-unit { font-weight: 400; color: var(--wd-muted); }

/* 오차 안내 · 함께 쓰는 계산기 */
.nc-accuracy { margin-block: var(--wd-s-50); }
.nc-related-calc { margin-block: var(--wd-s-50); }
.nc-related-calc h3 { font-size: 1.0625rem; margin-bottom: var(--wd-s-30); }

/*
 * ⚠ 손가락이 닿는 크기 (명세 §14, 최소 44px).
 *
 *   이 사이트의 **가장 중요한 조작 요소**들이 그 아래였다 — 입력칸 38px,
 *   "계산" 단추 42px. 계산기 사이트에서 계산 단추가 작은 것은 사소한 문제가
 *   아니다. 브라우저에서 재 보기 전에는 몰랐다.
 *
 *   `min-height` 로 올린다. `padding` 을 키우면 글자가 든 칸과 안 든 칸의
 *   높이가 달라진다.
 */
.nc-field input,
.nc-field select,
.nc-calc input[type="number"],
.nc-calc select {
	min-height: var(--wd-touch);
}
.nc-btn { min-height: var(--wd-touch); }