/**
 * 수출 운송비 계산기 (/export-cost-calculator/) 전용 스타일.
 *
 * 색·폰트는 theme.json 프리셋 변수만 사용한다 (브랜드 색을 한 곳에서 관리).
 * 이 라우트에서만 로드되므로 style.css를 건드리지 않는다.
 * 페이지 셸(.eg-main, .eg-wrap, .eg-hero)은 수출 가이드 CSS를 그대로 재사용하고,
 * 여기에는 계산기 고유 요소(.ec-*)만 둔다.
 */

/*
 * hidden 속성 우선. 아래에서 .ec-field/.ec-check에 display를 직접 지정하는데,
 * 그 규칙이 브라우저 기본 [hidden]{display:none} 보다 구체적이라 JS로 hidden을
 * 켜도 요소가 그대로 보인다(항공을 골랐는데 해상 적재 방식이 남던 버그).
 */
.ec-layout [hidden] {
	display: none !important;
}

/* === 레이아웃 ============================================================ */
/* 상단 고정(sticky) 네비게이션과 바로 붙어 보이지 않도록 위쪽 여백을 넉넉히 둔다. */
.ec-hero {
	padding-top: 64px;
	padding-bottom: 8px;
}

.ec-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	margin-top: 28px;
}

@media (min-width: 900px) {
	.ec-layout {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: 24px;
	}
	/* 결과는 스크롤을 따라오게 — 입력을 바꾸면서 금액 변화를 바로 본다. */
	.ec-result {
		position: sticky;
		top: 24px;
	}
}

.ec-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

/* === 카드 =============================================================== */
.ec-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 22px 20px;
}

.ec-card--result {
	background: var(--wp--preset--color--surface);
}

.ec-card-title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.3px;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 18px;
}

/* === 폼 요소 ============================================================ */
.ec-field {
	display: block;
	border: 0;
	padding: 0;
	margin: 0 0 18px;
	min-width: 0;
}
.ec-field:last-child {
	margin-bottom: 0;
}

.ec-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 8px;
	padding: 0;
}
.ec-label em {
	color: #e02b2b;
	font-style: normal;
	margin-left: 2px;
}
.ec-label-unit {
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
}
.ec-label-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-light);
	color: var(--wp--preset--color--brand-dark);
	font-size: 11px;
	font-weight: 700;
	vertical-align: middle;
}

.ec-input,
.ec-select {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	appearance: none;
	-webkit-appearance: none;
}
.ec-input:focus,
.ec-select:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(20, 40, 160, 0.1);
}
.ec-input--fixed {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text-secondary);
	cursor: default;
}
.ec-select {
	/* 네이티브 화살표를 지웠으니 직접 그린다. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23667'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5' stroke='%23667' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
	padding-right: 38px;
}

.ec-hint {
	display: block;
	margin-top: 7px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	word-break: keep-all;
}

.ec-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}
@media (min-width: 560px) {
	.ec-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ec-row .ec-field {
		margin-bottom: 0;
	}
	.ec-row {
		margin-bottom: 18px;
	}
}

/* 치수 입력 */
.ec-dim-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
}
.ec-dim-inputs .ec-input {
	padding: 10px 8px;
	font-size: 14px;
	text-align: center;
	min-width: 0;
}
.ec-dim-x {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
}
.ec-dim-qty {
	max-width: 92px;
}

/* === 운송수단 선택 ====================================================== */
.ec-modes {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ec-mode {
	position: relative;
	display: block;
	cursor: pointer;
}
.ec-mode input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ec-mode-body {
	display: block;
	padding: 14px 16px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 12px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ec-mode input:checked + .ec-mode-body {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand-light);
}
.ec-mode input:focus-visible + .ec-mode-body {
	box-shadow: 0 0 0 3px rgba(20, 40, 160, 0.15);
}
.ec-mode-name {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
.ec-mode-desc {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--wp--preset--color--text-secondary);
}

/* === 칩(해상 적재 방식) ================================================= */
.ec-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ec-chip {
	cursor: pointer;
}
.ec-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ec-chip span {
	display: inline-block;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary);
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 999px;
}
.ec-chip input:checked + span {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: #fff;
}

/* === 인코텀즈 =========================================================== */
.ec-terms {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ec-term {
	cursor: pointer;
}
.ec-term input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ec-term-body {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 13px 16px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 12px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ec-term input:checked + .ec-term-body {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand-light);
}
.ec-term-code {
	flex-shrink: 0;
	width: 44px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.3px;
	color: var(--wp--preset--color--brand-dark);
}
.ec-term-desc {
	font-size: 13px;
	color: var(--wp--preset--color--text-secondary);
	word-break: keep-all;
}

/* === 체크박스(FTA) ====================================================== */
.ec-check {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	cursor: pointer;
}
.ec-check input {
	margin: 2px 0 0;
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	accent-color: var(--wp--preset--color--brand);
}
.ec-check-name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
.ec-check-desc {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	word-break: keep-all;
}

/* === 결과 =============================================================== */
.ec-empty {
	margin: 0;
	padding: 28px 4px;
	text-align: center;
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted);
}

/* === 결과 잠금 게이트(이름·연락처) ======================================= */
.ec-gate-lead {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	word-break: keep-all;
}
.ec-gate .ec-row {
	margin-bottom: 14px;
}
.ec-gate .ec-check {
	margin-bottom: 4px;
}
.ec-gate-error {
	margin: 10px 0 0;
	padding: 11px 13px;
	border-radius: 9px;
	background: #fff1f2;
	color: #9f1239;
	font-size: 13px;
	line-height: 1.6;
	word-break: keep-all;
}
.ec-gate-submit {
	width: 100%;
	margin-top: 14px;
	padding: 15px 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	color: #fff;
	background: var(--wp--preset--color--brand);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.ec-gate-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* === 결과 로딩(체감 계산 스피너) ========================================= */
.ec-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 40px 4px;
	text-align: center;
}
.ec-loading p {
	margin: 0;
	font-size: 13.5px;
	color: var(--wp--preset--color--text-secondary);
}
.ec-spinner {
	width: 30px;
	height: 30px;
	border: 3px solid var(--wp--preset--color--border);
	border-top-color: var(--wp--preset--color--brand);
	border-radius: 50%;
	animation: ec-spin 0.7s linear infinite;
}
@keyframes ec-spin {
	to { transform: rotate(360deg); }
}

/* 인코텀즈 비교 — 이 화면의 핵심. 같은 화물을 조건별로 나란히 본다. */
.ec-compare {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 26px;
}
.ec-compare-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1.5px solid transparent;
	background: var(--wp--preset--color--base);
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.ec-compare-row:hover {
	border-color: var(--wp--preset--color--border);
}
.ec-compare-row.is-active {
	border-color: var(--wp--preset--color--brand);
}
.ec-compare-code {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.3px;
	color: var(--wp--preset--color--brand-dark);
}
.ec-compare-amount {
	font-size: 17px;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
}
.ec-compare-diff {
	font-size: 12px;
	color: var(--wp--preset--color--text-muted);
	font-variant-numeric: tabular-nums;
}

.ec-sub {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
	margin: 26px 0 10px;
}
.ec-sub:first-of-type {
	margin-top: 0;
}
.ec-sub-tag {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-secondary);
	font-size: 11px;
	font-weight: 700;
}
.ec-sub-note {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.65;
	color: var(--wp--preset--color--text-muted);
	word-break: keep-all;
}

.ec-lines {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ec-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 14px;
	color: var(--wp--preset--color--contrast);
}
.ec-line-value {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.ec-line--note {
	display: block;
	padding: 0 0 9px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 12px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	word-break: keep-all;
}
.ec-line--warn {
	color: #b45309;
}
.ec-line--free .ec-line-value {
	color: #0f7b4f;
}
.ec-line--sum {
	border-bottom: 0;
	padding-top: 12px;
}
.ec-lines--muted .ec-line {
	color: var(--wp--preset--color--text-secondary);
}

.ec-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	margin-top: 16px;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--wp--preset--color--brand);
	color: #fff;
}
.ec-total-label {
	font-size: 13px;
	font-weight: 700;
	opacity: 0.9;
}
.ec-total-value {
	font-size: 22px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.ec-total-risk {
	flex-basis: 100%;
	font-size: 11.5px;
	line-height: 1.6;
	opacity: 0.85;
	word-break: keep-all;
}

/* === 주의사항 =========================================================== */
.ec-notes {
	margin-top: 22px;
}
.ec-note {
	margin: 0 0 8px;
	padding: 11px 13px;
	border-radius: 9px;
	font-size: 12.5px;
	line-height: 1.65;
	word-break: keep-all;
}
.ec-note--info {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text-secondary);
}
.ec-note--warn {
	background: #fff7ed;
	color: #9a3412;
}
.ec-note-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.ec-note-links a {
	padding: 8px 13px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
}
.ec-note-links a:hover {
	border-color: var(--wp--preset--color--brand);
}

.ec-disclaimer {
	margin: 14px 2px 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted);
	word-break: keep-all;
}
.ec-disclaimer-meta {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	opacity: 0.85;
}

/* === SEO 설명 블록 ======================================================= */
/* .eg-wrap과 결합 — 사유는 바로 아래 .ec-crosslink 주석과 동일(로드 순서 이슈). */
.eg-wrap.ec-seo-block {
	margin-top: 64px;
}
.ec-seo-block .eg-h2 + .eg-p {
	margin-bottom: 32px;
}
.ec-seo-block .eg-h2:not(:first-child) {
	margin-top: 0;
}

/* === 교차 링크 ========================================================== */
/* 위(계산기 결과)·아래(푸터)와 자연스럽게 분리되도록 위아래 모두 넉넉히 띄운다.
   .eg-wrap.ec-crosslink 로 셀렉터를 합쳐 특정도를 올린다 — export-guide.css가
   export-cost.css보다 나중에 로드되면서(같은 특정도의) .eg-wrap { margin: 0 auto }가
   여기 margin-top을 0으로 덮어써 버리는 문제가 실제로 있었다. 로드 순서에
   의존하지 않도록 항상 이 결합 셀렉터를 유지할 것. */
.eg-wrap.ec-crosslink {
	margin-top: 80px;
	margin-bottom: 48px;
}
.ec-crosslink-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}
@media (min-width: 640px) {
	.ec-crosslink-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 960px) {
	.ec-crosslink-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.ec-crosslink-card {
	display: block;
	padding: 20px 22px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	text-decoration: none;
	transition: transform 0.18s ease, border-color 0.18s ease;
}
.ec-crosslink-card:hover {
	transform: translateY(-3px);
	border-color: rgba(20, 40, 160, 0.28);
}
/* 계산기 흐름의 다음 행동(서류 생성)이라 살짝 강조한다. */
.ec-crosslink-card--cta {
	background: var(--wp--preset--color--brand-light);
	border-color: rgba(20, 40, 160, 0.22);
}
.ec-crosslink-card--cta .ec-crosslink-title {
	color: var(--wp--preset--color--brand);
}
.ec-crosslink-title {
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 5px;
}
.ec-crosslink-desc {
	display: block;
	font-size: 13px;
	line-height: 1.65;
	color: var(--wp--preset--color--text-secondary);
	word-break: keep-all;
}