/* =====================================================================
   contact.css — 문의하기 (/contact/)

   설계 원칙: 주 이용자가 고령층이다.
     · 전화번호를 화면에서 가장 크게 (44px) — 실제 전환 경로다
     · 탭 영역은 모두 44px 이상
   KBoard 폼 자체의 스타일은 스킨(site/style.css)이 담당한다.
   여기서는 폼을 감싸는 자리와 최소한의 보정만 한다.
   ===================================================================== */

/* ---------------- 2단 배치 (좌: 폼 / 우: 전화) ----------------
   2026-08-20 클라이언트 결정. 이전에는 전화 카드가 폼 위에 통째로 얹혀 있었다.
   ★ 우측 컬럼은 sticky 로 붙여 폼이 길어져도 전화번호가 화면에 남게 한다.
     (문의 게시판 목록+에디터가 붙으면 폼 쪽이 훨씬 길어진다) */
.ct-split {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
/* ★ minmax(0, …) 를 반드시 쓴다. 기본 min-width:auto 때문에 KBoard 가 만드는
   넓은 표(table)가 컬럼을 밀어내 가로 스크롤이 생긴다. */
.ct-split__main { min-width: 0; }
.ct-split__side { min-width: 0; position: sticky; top: 96px; }

@media (max-width: 900px) {
	.ct-split {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	/* ★ 좁은 화면에서는 전화 카드를 위로 올린다.
	   폼이 먼저 오면 고령 사용자가 전화번호를 보려고 긴 폼을 지나쳐야 한다.
	   DOM 순서는 폼이 먼저 = 키보드 탭은 주 작업부터. 시각 순서만 뒤집는다. */
	.ct-split__main { order: 2; }
	.ct-split__side { order: 1; position: static; }
}

/* ---------------- 전화 (주 경로) ---------------- */
.ct-call {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 32px;
	align-items: center;
	background: var(--color-primary-deep);
	border-radius: 22px;
	padding: 42px 44px;
}
@media (max-width: 900px) {
	.ct-call { grid-template-columns: 1fr; gap: 26px; padding: 32px 24px; }
}

/* 우측 좁은 컬럼용 — 가로 2단을 세로로 쌓는다.
   기존 .ct-call 은 폭 전체를 쓰는 배너였어서 좁은 컬럼에 그대로 넣으면
   전화번호(44px)와 우측 연락처 목록이 서로 눌린다. */
.ct-call--stack {
	grid-template-columns: 1fr;
	gap: 24px;
	padding: 36px 32px;
	align-items: start;
}
.ct-call--stack .ct-call__sub {
	padding-left: 0;
	border-left: 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
	padding-top: 22px;
}

.ct-call__label {
	font-size: 18px;
	color: var(--color-text-on-dark-mute);
}
.ct-call__tel {
	display: inline-block;
	margin-top: 8px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: #fff;
	text-decoration: none;
}
.ct-call__tel:hover,
.ct-call__tel:focus-visible { text-decoration: underline; }
@media (max-width: 640px) { .ct-call__tel { font-size: 36px; } }

.ct-call__hours {
	margin-top: 14px;
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--color-text-on-dark-sub);
}
.ct-call__hours span { color: var(--color-text-on-dark-mute); }

.ct-call__sub {
	display: grid;
	gap: 10px;
	padding-left: 32px;
	border-left: 1px solid rgba(255, 255, 255, .18);
}
@media (max-width: 900px) {
	.ct-call__sub { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-top: 22px; }
}
.ct-call__sub li {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;          /* 탭 영역 확보 */
	flex-wrap: wrap;
}
.ct-call__sub-label {
	flex: 0 0 96px;
	font-size: 15.5px;
	color: var(--color-text-on-dark-mute);
}
.ct-call__sub a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 17.5px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.ct-call__sub a:hover { border-bottom-color: #fff; }

/* ---------------- 온라인 폼 ---------------- */
/* ★ margin-top 을 주지 않는다. 전화 카드 아래에 있던 시절의 여백(52px)이라
   2단 배치에서는 좌측 폼만 아래로 내려가 우측 카드와 윗줄이 안 맞는다. */
.ct-form { margin-top: 0; }

/* ★ 가운데정렬을 풀었다. 전체폭 블록일 때는 자연스러웠지만, 2단의 좁은
   좌측 컬럼에서 제목·설명만 가운데면 카드와 시선 축이 어긋난다. */
.ct-form__title {
	font-size: 30px;
	color: var(--color-primary-deep);
	text-align: left;
}
.ct-form__desc {
	margin-top: 12px;
	text-align: left;
	font-size: 18px;
	line-height: 1.75;
	color: var(--color-text-sub);
}
.ct-form__desc strong { color: var(--color-primary-deep); font-weight: 700; }

.ct-form__privacy {
	margin-top: 28px;
	background: #fff;
	border: 1px solid var(--color-line-2);
	border-radius: 16px;
	padding: 26px 28px;
}
.ct-form__privacy h3 {
	font-size: 19px;
	color: var(--color-primary-deep);
}
.ct-form__privacy ul {
	margin-top: 14px;
	display: grid;
	gap: 8px;
}
.ct-form__privacy li {
	position: relative;
	padding-left: 16px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-text-sub);
}
.ct-form__privacy li::before {
	content: "·";
	position: absolute;
	left: 4px;
	font-weight: 700;
	color: var(--color-primary);
}
.ct-form__privacy strong { color: var(--color-text); font-weight: 700; }
.ct-form__privacy p {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--color-line-2);
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--color-text-mute, var(--color-text-sub));
}

/* 게시판이 들어갈 자리 — 여백만 잡아 준다.
   입력창·버튼 크기 보정은 board.css 가 담당한다(.kb-board 클래스를 함께 붙였다).
   여기에 중복으로 두면 어느 쪽이 이겼는지 추적이 어려워진다. */
/* ★ 폼도 안내박스와 같은 카드로 감싼다.
   이전에는 폼이 배경 없이 떠 있고 위 안내박스만 흰 카드라, 같은 컬럼 안에서
   두 블록의 생김새가 달라 어긋나 보였다(스크린샷 확인).
   테두리·radius·padding 을 안내박스와 동일하게 맞춘다. */
.ct-form__board {
	margin-top: 20px;
	background: #fff;
	border: 1px solid var(--color-line-2);
	border-radius: 16px;
	padding: 26px 28px;
}
@media (max-width: 560px) {
	.ct-form__board { padding: 20px 16px; }
}