/* =====================================================================
   home.css — 메인(홈) 전용 스타일
   시안: Figma node 0:3
   로드: src/pages/home.html 상단 <link> 로 직접 참조 (페이지별 CSS 관례)
   변수는 layout.css :root 사용.
   ===================================================================== */

/* =====================================================================
   1) HERO
   ===================================================================== */
/* 시안(0:9): 크림 배경 + 우하단만 100px 라운드. 그 라운드 뒤로 딥그린 띠(0:8)가 보인다.
   → 내가 처음에 '원형 장식'으로 오해했던 부분. 실제는 라운드 코너 + 뒤 배경색. */
.hero {
	position: relative;
	background: var(--color-bg-cream);
	border-bottom-right-radius: 100px;
	overflow: hidden;
	padding-top: 90px;   /* 시안 0:9 pt-[90px] — 0:11 컨테이너의 위 여백 */
	z-index: 1;
}
/* 히어로 우하단 라운드 뒤에 깔리는 딥그린 (시안 0:8) */
.hero-band {
	position: relative;
	margin-top: -206px;
	height: 206px;
	background: var(--color-primary-deep);
	z-index: 0;
	pointer-events: none;
}
/* 시안 0:11 — 컨텐츠 높이 616px, 좌측 카피 558.8px / 우측 사진 399px */
.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 558.797px) 399px;
	justify-content: space-between;
	align-items: start;
	gap: 40px;
	min-height: 616px;
	/* .container 의 좌우 padding 을 덮지 않도록 방향 명시.
	   시안 0:11 컨테이너(616px) 안에서 카피 블록(0:12)이 top 136.68px 에서 시작. */
	padding-top: 136.68px;
}
/* 시안 0:14 — 12px Bold, uppercase, tracking 1.2px */
.hero__eyebrow {
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	color: var(--color-primary);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	margin-bottom: 16px;
}
/* 시안 0:16 — 54.4px Bold, lh 69.632px, tracking -1.088px */
.hero__title {
	font-size: 54.4px;
	line-height: 69.632px;
	letter-spacing: -1.088px;
	font-weight: 700;
	color: var(--color-text);
}
.hero__title .em { color: var(--color-primary); }
/* 시안 0:19 — 17.6px, lh 30.8px, w 500px, #6a7065 */
.hero__desc {
	margin-top: 24px;
	max-width: 500px;
	font-size: 17.6px;
	line-height: 30.8px;
	color: var(--color-text-sub);
}
.hero__cta { margin-top: 32px; }
/* 시안 0:22 — px 24 / py 13, 15.2px SemiBold */
.hero__cta .btn {
	padding: 13px 24px;
	font-size: 15.2px;
	line-height: 25.84px;
	gap: 8px;
}

/* 시안 0:26 — 399x537 블록. 사진은 object-cover 로 꽉 채우고,
   캡션(0:27)은 블록 좌상단 기준 top 52px 에 절대배치되어 사진 위에 겹친다. */
/* 시안: 사진 블록 top=79, 카피 블록 top=136.68 (컨테이너 0:11 기준)
   → 카피보다 57.68px 위에서 시작. grid align-start 기준으로 음수 마진 처리. */
.hero__figure {
	position: relative;
	width: 399px;
	height: 537px;
	margin-top: -57.68px;
}
/* 사진 원본 933x1400(비율 0.666) vs 박스 399x537(0.743).
   cover 로 폭을 맞추면 렌더높이 598.7px → 박스보다 61.7px 넘쳐서 **위쪽(머리)이 잘린다.**
   → contain 으로 전체가 들어오게 하고, 바닥에 붙여 인물이 섹션 하단에 서 있게 한다. */
.hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}
.hero__person-label {
	position: absolute;
	left: 0;
	top: 52px;
	z-index: 2;
	white-space: nowrap;
}
/* 시안 0:27 — 이름 16.8px / lh 28.56px, 직함 14.72px / lh 25.024px */
.hero__person-label strong {
	display: block;
	font-size: 16.8px;
	line-height: 28.56px;
	font-weight: 400;
	color: var(--color-text);
}
.hero__person-label span {
	display: block;
	font-size: 14.72px;
	line-height: 25.024px;
	color: var(--color-text-sub);
}

/* 태블릿: 사진을 비율로 줄임 */
@media (max-width: 1100px) {
	.hero__inner { grid-template-columns: minmax(0, 1fr) 340px; }
	.hero__figure { width: 340px; height: 458px; }
	.hero__title { font-size: 46px; line-height: 60px; }
}
@media (max-width: 900px) {
	.hero { border-bottom-right-radius: 60px; padding-top: 56px; }
	.hero-band { margin-top: -120px; height: 120px; }
	.hero__inner {
		grid-template-columns: 1fr;
		min-height: 0;
		padding-top: 0;
		gap: 28px;
	}
	.hero__title { font-size: 38px; line-height: 50px; letter-spacing: -.8px; }
	.hero__desc { max-width: none; font-size: 16px; line-height: 28px; }
	/* 사진 블록: 고정폭 해제하고 가운데 */
	.hero__figure {
		position: relative;
		width: 100%;
		max-width: 340px;
		height: 420px;
		margin: 0 auto;
	}
	/* 모바일은 사진 위 겹침이 답답 → 사진 아래로 내림 */
	.hero__person-label {
		position: static;
		text-align: center;
		margin-bottom: 10px;
	}
}
@media (max-width: 560px) {
	.hero__title { font-size: 32px; line-height: 43px; }
	.hero__figure { height: 360px; }
}

/* =====================================================================
   2) PERSONA — "이런 대표님과 함께합니다" (딥그린)
   ===================================================================== */
.persona { background: var(--color-primary-deep); }
/* 시안 0:36 — 5열, 카드 201.6px, 간격 16px, 카드높이 171.375px */
.persona__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	margin-top: 44px;
}
/* 시안 0:37 — bg .07 / border .13 / r14 / py27 px21 */
.persona__card {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 14px;
	padding: 27px 21px;
	min-height: 171px;
}
/* 시안 0:39 — 15.2px Regular, lh 25.84px, 골드 */
.persona__num {
	font-size: 15.2px;
	line-height: 25.84px;
	font-weight: 400;
	color: var(--color-accent);
}
/* 시안 0:41 — 15.2px, lh 25.84px, #e7e2d4 (강조는 white SemiBold) */
.persona__text {
	margin-top: 14px;
	font-size: 15.2px;
	line-height: 25.84px;
	color: var(--color-line-2);
}
.persona__text b { font-weight: 600; color: #fff; }
@media (max-width: 1100px) {
	.persona__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.persona__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.persona__card { min-height: 0; padding: 22px 18px; }
}
@media (max-width: 480px) {
	.persona__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   3) STATS — "알아서, 잘 하는 세무 파트너"
   ===================================================================== */
.stats { background: var(--color-bg-cream-2); position: relative; overflow: hidden; }
/* .container 를 기준점으로 삼으면 마크(left 954 + 331 = 1285)가 1120 컨테이너에서 잘려
   골드 부분이 통째로 사라진다. 시안은 마크가 화면 오른쪽 끝까지 이어진다
   → 기준점은 .stats(섹션) 로 두고, 컨테이너 좌측 오프셋만 계산해서 위치를 맞춘다. */
.stats .container { position: static; }
/* 시안 0:65 — 331px 로고마크, 컨테이너 기준 left 954px / top 115.58px.
   1120 컨테이너에서 954+331=1285 → 오른쪽으로 넘쳐 잘린다(.stats overflow:hidden).
   시안에서는 배경에 옅게 깔린 톤이라 opacity 로 낮춘다. */
.stats__mark {
	position: absolute;
	/* 1920 시안(node 8:105) 확정값: 컨테이너(x400 w1120) 기준 x=1014.
	   → 화면 절대 1414~1745, **우측 여백 175px 가 의도된 값**이다(벽에 붙는 연출이 아님).
	   컨테이너 가운데 정렬이므로 섹션 기준 = (50% - 560) + 1014 = calc(50% + 454px).
	   ※ 1447 시안에서는 x=954 여서 우연히 화면 끝에 닿아 '벽에 붙은' 것처럼 보였을 뿐. */
	left: calc(50% + 454px);
	/* 시안 top-[115.58px] 은 **컨테이너(0:64) 기준** 값이다. 기준점을 섹션으로 옮겼으므로
	   섹션 상단 패딩(104px)을 더해야 한다 → 104 + 115.58 = 219.58 */
	top: 219.58px;
	width: 331px;
	height: 331px;
	/* ★ CSS opacity 를 주지 말 것.
	   이 SVG 는 각 path 에 fill-opacity="0.1" 이 이미 들어있는 '연한 버전' 이다.
	   여기서 opacity 를 또 주면 0.1 × 0.1 = 0.01 이 되어 사실상 안 보인다.
	   (실제로 .18 → .10 으로 바꿔가며 헤맸던 원인) */
	pointer-events: none;
	user-select: none;
}
/* 시안 0:78 — 3열 344px, 간격 20px */
.stats__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 44px;
}
/* 시안 0:80 — bg #fffffe / border #dcdacb / r14 / py35 px31 */
/* 시안 0:80 — 3장 모두 같은 높이(181.734px), 배경 #fffffe (섹션 배경 #fffefb 와 다름) */
.stats__card {
	background: var(--color-bg-card-solid);
	border: 1px solid var(--color-line);
	border-radius: 14px;
	padding: 35px 31px;
	/* 시안 h-181.734 는 테두리 제외 값. 내용(py70+25.024+56+31.12=181.744)이 이미 그 높이라
	   min-height 는 불필요하고, 주면 오히려 border 2px 만큼 어긋난다. */
}
/* 시안 0:82 — 14.72px / lh 25.024px */
.stats__label {
	font-size: 14.72px;
	line-height: 25.024px;
	color: var(--color-text-sub);
}
/* 시안 0:83/0:84 — 숫자 블록은 pt 14px, 41.6px Bold / lh 41.6px */
.stats__num {
	margin: 0;
	padding-top: 14px;
	font-size: 41.6px;
	line-height: 41.6px;
	font-weight: 700;
	color: var(--color-primary);
}
/* 시안 0:85/0:86 — 단위 블록은 pt 8px, 13.6px / lh 23.12px */
.stats__unit {
	padding-top: 8px;
	font-size: 13.6px;
	line-height: 23.12px;
	color: var(--color-text-sub);
}
@media (max-width: 900px) {
	.stats__grid { grid-template-columns: 1fr; gap: 14px; }
	.stats__card { padding: 28px 24px; }
	.stats__num { font-size: 36px; line-height: 36px; }
	.stats__mark { display: none; }
}

/* =====================================================================
   4) REVIEWS — "거래처 대표님의 이야기" (가로 스크롤 카드)
   ===================================================================== */
/* 시안 0:105 — 배경 #fffefb (순백 아님) */
.reviews { background: var(--color-bg-card); }
/* 시안 0:113 — 가로 flex, 카드 300px 고정, gap 20px, pb 12px */
.reviews__scroller {
	margin-top: 44px;
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 12px;
	scroll-padding-left: var(--gutter);
	/* 시안에 스크롤바가 없다 → 숨기고, 드래그/스와이프로 넘긴다 (common.js initDragScroll) */
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* 구 Edge/IE */
	-webkit-overflow-scrolling: touch;
}
.reviews__scroller::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

/* 드래그 가능 표시 */
.reviews__scroller.is-draggable { cursor: grab; }
.reviews__scroller.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;   /* 드래그 중엔 스냅이 걸리면 뚝뚝 끊긴다 */
	user-select: none;
}
/* 드래그 중 카드 안 텍스트/이미지가 선택되거나 끌리지 않게 */
.reviews__scroller.is-dragging * { user-select: none; -webkit-user-drag: none; }
.reviews__scroller:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
/* 시안 0:114 — 300px 고정 / bg #edeee6 / border #dcdacb / r14 / py31 px29 */
/* 시안 0:113 은 컨테이너 h 258.422 / 카드 h-full → 4장 모두 같은 높이 */
.reviews__card {
	flex: 0 0 300px;
	scroll-snap-align: start;
	background: var(--color-bg-cream-2);
	border: 1px solid var(--color-line);
	border-radius: 14px;
	padding: 31px 29px;
	display: flex;
	flex-direction: column;
	min-height: 246px;   /* 258.422 - pb 12 = 246 */
}
/* 시안 0:116 — 32px Regular 골드 */
.reviews__quote {
	font-size: 32px;
	line-height: 32px;
	font-weight: 400;
	color: var(--color-accent);
}
/* 시안 0:118 — 15.52px / lh 27.16px */
.reviews__text {
	margin-top: 12px;
	font-size: 15.52px;
	line-height: 27.16px;
	color: var(--color-text);
	flex: 1;
}
/* 시안 0:120 — 14.08px Medium / lh 23.936px */
.reviews__who {
	margin-top: 16px;
	font-size: 14.08px;
	line-height: 23.936px;
	font-weight: 500;
	color: var(--color-text-sub);
}
@media (max-width: 560px) {
	.reviews__card { flex-basis: 260px; padding: 26px 22px; }
}

/* =====================================================================
   5) SYSTEM SHOWCASE — "서류 요청 스트레스부터…" (다크)
   ===================================================================== */
/* 시안 0:144 — 배경 #1b2620, 타이틀은 흰색이 아니라 크림골드 #fff1c2 */
.system { background: var(--color-text); }
.system .sec-title { color: #fff1c2; }
.system .sec-desc { color: #cfccc1; max-width: 680px; }
/* 시안 0:155/0:196 — 좌 목업 508px, 우 카피는 left 564px·w 508px
   → 508 + gap 56 + 508 = 1072 (컨테이너 내부폭). 카피는 위에서 64.7px 내려온다. */
.system__inner {
	display: grid;
	grid-template-columns: 508px 508px;
	justify-content: space-between;
	align-items: start;
	gap: 56px;
	margin-top: 44px;
}
.system__copy { padding-top: 64.7px; }
/* 시안 0:156 — 508px 안에 두 카드가 gap 20px, 아래 정렬(items-end).
   좌측 컨테이너 시작점에 붙는다(가운데정렬 아님). */
.system__visual {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 20px;
	width: 508px;
	height: 376.852px;
}
/* 목업: 폰 프레임 (시안 — 겉 #1b1d19 188px r28 + 안쪽 화면 #e9eef0 330px r18) */
.mock-chat {
	position: relative;
	z-index: 2;
	flex: 0 0 188px;
	width: 188px;
	background: var(--color-bg-dark-2);
	border-radius: 28px;
	padding: 12px 10px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.mock-chat__screen {
	background: #e9eef0;
	border-radius: 18px;
	height: 330px;
	padding: 14px 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
}
.mock-chat__title {
	font-size: 10.56px;
	line-height: 17.952px;
	font-weight: 500;
	color: var(--color-text-sub);
	text-align: center;
	flex-shrink: 0;
}
.mock-chat__bubble {
	font-size: 10.56px;
	line-height: 17.952px;
	color: var(--color-text);
	background: #fff;
	border-radius: 10px;
	padding: 7px 9px;
	flex-shrink: 0;
}
.mock-chat__bubble--me {
	background: var(--color-kakao);
	color: var(--color-kakao-text);
	margin-left: 20px;
}
/* 목업: 월간 리포트 카드 (시안 0:172 — 240px / r14 / 흰 배경) */
.mock-report {
	position: relative;
	z-index: 3;
	flex: 0 0 240px;
	width: 240px;
	background: #fff;
	border-radius: 14px;
	padding: 16px 14px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	/* 시안 0:156 은 items-end — 폰과 같은 바닥선에 정렬된다(겹침/오프셋 없음). */
}
.mock-report__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13.12px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 12px;
}
/* 시안 — 상태 점은 #4a7d5f */
.mock-report__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #4a7d5f;
	flex-shrink: 0;
}
.mock-report__kpis { display: flex; gap: 8px; }
/* 시안 — KPI 박스 #edeee6 / r10 / h 71.875px */
.mock-report__kpi {
	flex: 1;
	background: var(--color-bg-cream-2);
	border-radius: 10px;
	padding: 12px 10px;
	min-height: 71.875px;
}
/* 시안 — 숫자 17.6px 그린 */
.mock-report__kpi b {
	display: block;
	font-size: 17.6px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--color-primary);
	letter-spacing: -.02em;
}
.mock-report__kpi span {
	font-size: 10.56px;
	line-height: 17.952px;
	color: var(--color-text-sub);
}
/* 시안 — 하단 회색 바 3개 (#edeee6, h9, r6) */
.mock-report__lines { margin-top: 14px; display: grid; gap: 8px; }
.mock-report__lines i {
	display: block;
	height: 9px;
	border-radius: 6px;
	background: var(--color-bg-cream-2);
}
.mock-report__lines i:nth-child(1) { width: 182px; max-width: 100%; }
.mock-report__lines i:nth-child(2) { width: 141px; max-width: 100%; }
.mock-report__lines i:nth-child(3) { width: 162px; max-width: 100%; }

/* 시안 0:199/0:201 — 16px / lh 28px / #cfccc1 */
.system__copy p {
	font-size: 16px;
	line-height: 28px;
	color: #cfccc1;
}
.system__copy p + p { margin-top: 20px; }
.system__copy .cta { margin-top: 28px; }
/* 시안 0:203 — CTA 는 카카오 옐로가 아니라 딥그린 #005c33 (내가 잘못 넣었던 부분) */
.system__copy .cta .btn {
	background: var(--color-primary);
	color: #fff;
	padding: 13px 24px;
	font-size: 15.2px;
	line-height: 25.84px;
}
.system__copy .cta .btn:hover { background: var(--color-primary-dark); filter: none; }

@media (max-width: 1100px) {
	.system__inner { grid-template-columns: 1fr; gap: 40px; }
	.system__visual { width: 100%; max-width: 508px; }
	.system__copy { padding-top: 0; }   /* 1열이면 위 여백 불필요 */
}
@media (max-width: 560px) {
	/* 좁은 화면: 508px 두 카드가 안 들어감 → 폰 위, 리포트 아래로 세로 배치 */
	.system__visual {
		flex-direction: column;
		align-items: center;
		height: auto;
		gap: 16px;
	}
	.mock-report { margin-bottom: 0; flex-basis: auto; width: 100%; max-width: 260px; }
	.mock-chat { flex-basis: auto; }
}

/* =====================================================================
   6) SERVICES — "업무 분야" 4카드
   ===================================================================== */
/* 시안 0:207 — 배경 #fffefb */
.services { background: var(--color-bg-card); }
/* 시안 0:218 — 2열 526px, gap 20px */
.services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 44px;
}
/* 시안 0:218 — bg #edeee6 / border #dcdacb / r14 / py35 px33 */
/* 시안 0:218 — 4장 모두 같은 높이(311.602px) */
.services__card {
	background: var(--color-bg-cream-2);
	border: 1px solid var(--color-line);
	border-radius: 14px;
	padding: 35px 33px;
	min-height: 312px;
}
/* 시안 0:219 — 46px 정사각 r12 딥그린, 글리프는 골드 17.6px Bold */
.services__icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--color-primary);
	color: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17.6px;
	line-height: 29.92px;
	font-weight: 700;
	margin-bottom: 18px;
}
/* 시안 0:222 — 18.88px SemiBold / lh 28.32px */
.services__name {
	font-size: 18.88px;
	line-height: 28.32px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 14px;
}
/* 시안 0:225 — 15.2px / lh 24.32px */
.services__list li {
	font-size: 15.2px;
	line-height: 24.32px;
	color: var(--color-text-sub);
	padding: 4px 0;
}
@media (max-width: 900px) {
	.services__grid { grid-template-columns: 1fr; }
	.services__card { padding: 28px 24px; min-height: 0; }
}

/* =====================================================================
   7) FEE — "수수료 안내" 3플랜
   ===================================================================== */
/* 시안 0:274 — 배경 #edeee6 */
.fee { background: var(--color-bg-cream-2); }
/* 시안 0:285 — 3열 344px, gap 20px */
.fee__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 44px;
	align-items: stretch;
}
/* 시안 0:285 — bg #f7f5ee / border #dcdacb / r14 / py35 px29 / 좌측정렬.
   시안은 3장 모두 **같은 높이(351.125px)** 다 → 내용 길이에 따라 들쭉날쭉하지 않게 고정. */
.fee__card {
	background: var(--color-bg-cream);
	border: 1px solid var(--color-line);
	border-radius: 14px;
	padding: 35px 29px;
	text-align: left;
	min-height: 351px;
}
/* 시안 0:297 — 강조카드는 bg #093a24 + border #005c33 */
.fee__card--hi {
	background: var(--color-primary-deep);
	border-color: var(--color-primary);
	color: #fff;
}
/* 시안 — 18.4px SemiBold / lh 27.6px. 카드 헤더(이름·가격)만 가운데 정렬(text-center). */
.fee__name {
	font-size: 18.4px;
	line-height: 27.6px;
	font-weight: 600;
	color: var(--color-text);
	text-align: center;
}
.fee__card--hi .fee__name { color: #fff; }
/* 시안 — 20px Bold 그린 / lh 38.08px, (VAT포함) 만 16px Regular. 구분선 없음. */
.fee__price {
	margin-top: 10px;
	font-size: 20px;
	line-height: 38.08px;
	font-weight: 700;
	color: var(--color-primary);
	text-align: center;
}
.fee__price small { font-size: 16px; font-weight: 400; }
.fee__card--hi .fee__price { color: var(--color-accent); }
/* 시안 — 리스트 14.72px / lh 25.024px, 위 18px 간격 */
.fee__list { margin-top: 18px; }
.fee__list li {
	font-size: 14.72px;
	line-height: 25.024px;
	color: var(--color-text-sub);
	padding: 3px 0;
}
.fee__card--hi .fee__list li { color: rgba(255, 255, 255, .82); }
@media (max-width: 900px) {
	.fee__grid { grid-template-columns: 1fr; }
	.fee__card { padding: 28px 24px; min-height: 0; }
}

/* =====================================================================
   8) CEO LETTER — "FROM THE CEO"
   ===================================================================== */
/* 시안 — 배경 #edeee6 (크림 #f7f5ee 아님) */
.ceo { background: var(--color-bg-cream-2); }
.ceo__inner {
	display: grid;
	grid-template-columns: minmax(0, 661px) 392px;
	justify-content: space-between;
	gap: 40px;
	align-items: center;
}
.ceo__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.8px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 20px;
}
.ceo__eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--color-accent);
}
/* 시안 — 32px SemiBold / lh 49.6px */
.ceo__quote {
	font-size: 32px;
	line-height: 49.6px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--color-text);
}
.ceo__quote .em { color: var(--color-primary); }
/* 시안 — 본문 16px / lh 28.8px / #43463e */
.ceo__body { margin-top: 26px; }
.ceo__body p {
	font-size: 16px;
	line-height: 28.8px;
	color: #43463e;
}
.ceo__body p + p { margin-top: 14px; }
/* 시안 — 본문 강조는 인용문 강조(#005c33)보다 어두운 #00472a + Bold(700).
   16px 작은 글씨에서 굵기 대비가 죽지 않게 한 의도적 구분이므로 primary 로 묶지 않는다. */
.ceo__body b { color: var(--color-primary-dark); font-weight: 700; }
/* 시안 — 서명 17.6px / lh 29.92px / Regular(400) / #005c33
   주의: 서명은 .ceo__body 안의 <p> 이므로 `.ceo__body p`(0,1,1)·
   `.ceo__body p + p`(0,1,2) 보다 명시도가 높아야 한다. 클래스 단독
   `.ceo__sign`(0,1,0) 으로 쓰면 색·크기·여백을 전부 본문 규칙에 뺏긴다. */
.ceo__body p.ceo__sign {
	margin-top: 28px;
	font-size: 17.6px;
	line-height: 29.92px;
	font-weight: 400;
	color: var(--color-primary);
}
@media (max-width: 900px) {
	.ceo__quote { font-size: 25px; line-height: 40px; }
}
/* 시안 — 392x522 / r16 / bg #ded8c7 / object-cover (내것은 380x570 으로 늘어나 있었음) */
.ceo__photo {
	width: 392px;
	height: 522px;
	background: #ded8c7;
	border-radius: 16px;
	overflow: hidden;
}
.ceo__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
@media (max-width: 1100px) {
	.ceo__inner { grid-template-columns: minmax(0, 1fr) 340px; }
	.ceo__photo { width: 340px; height: 453px; }
}
@media (max-width: 900px) {
	.ceo__inner { grid-template-columns: 1fr; gap: 32px; }
	.ceo__photo { width: 100%; max-width: 340px; height: auto; aspect-ratio: 392 / 522; margin: 0 auto; }
}

/* =====================================================================
   9) CONTACT — "상담 신청" (딥그린)
   ※ 폼 제출 대상 미정 → 지금은 정적 마크업. 확정 시 form action/플러그인 연동.
   ===================================================================== */
/* 시안 — 배경 #093a24 (딥그린). #005c33 아님 */
.contact { background: var(--color-primary-deep); }
.contact__head { text-align: center; }
.contact__head .sec-desc { max-width: 512px; margin-left: auto; margin-right: auto; }
/* 시안 — 폼 442px / 정보 512px, 가운데 정렬 배치 */
.contact__inner {
	display: grid;
	/* 시안 — 좌/우 칼럼 폭이 같다(각 512px).
	   442px 는 폼 "내용" 폭이고(node 8:402 등) 카드에 좌우 35px 패딩이 붙어
	   카드 자체는 442+70=512 다. 예전엔 442 를 그대로 칼럼폭으로 써서
	   좌측이 70px 좁았다. → 두 칼럼을 1:1 로 둔다. */
	grid-template-columns: repeat(2, minmax(0, 512px));
	justify-content: center;
	gap: 40px;
	margin-top: 44px;
	/* 좌(폼) / 우(정보+지도) 아래 끝을 맞춘다.
	   start 로 두면 두 칼럼이 각자 높이를 가져 아래가 어긋난다 → stretch 로 늘리고
	   우측 칼럼 안에서 지도가 남는 높이를 먹게 한다(아래 .contact__info 참고). */
	align-items: stretch;
}
/* 시안 — bg rgba(255,255,255,.06) / r14 */
.contact__form {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	padding: 29px 27px;
}
.field { margin-bottom: 16px; }
.field__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.field label {
	display: block;
	font-size: 13.2px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 8px;
}
.field label .req { color: var(--color-accent); }
/* 시안 — bg rgba(30,50,40,.8) / border rgba(255,255,255,.2) / h48 / r10 */
.field input,
.field textarea,
.field select {
	width: 100%;
	font: inherit;
	font-size: 14px;
	color: #fff;
	background: rgba(30, 50, 40, .8);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 10px;
	padding: 12px 14px;
}
.field input,
.field select { height: 48px; }
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 255, 255, .45); }
.field select option { color: #1b2620; }

/* 시안 — 동의 줄은 가운데 정렬(폭 411.43px 로 좁혀 중앙 배치) */
.consent {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 9px;
	margin: 4px auto 18px;
	max-width: 412px;
	font-size: 12.4px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
	text-align: center;
}
.consent input { margin-top: 3px; flex-shrink: 0; }
.contact__submit { width: 100%; }

/* 시안 0:359 — 우측 정보 컬럼은 **배경 박스가 없다**. 초록 배경 위에 텍스트만.
   (박스가 있는 건 좌측 폼 하나뿐) */
/* 우측 칼럼: 정보 블록은 자기 높이, 지도가 남은 높이를 채운다 → 폼과 아래 끝이 맞음 */
.contact__info {
	display: flex;
	flex-direction: column;
	padding: 4px 0 0;
}
.contact__info dl {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 16px;
}
.contact__info dt {
	font-size: 12.6px;
	font-weight: 700;
	color: var(--color-accent);
	margin-bottom: 6px;
}
.contact__info dd {
	font-size: 14.4px;
	font-weight: 600;
	color: #fff;
	line-height: 1.55;
}
/* 전화번호 링크 — 모바일에서 손가락으로 누르는 주요 타깃이다.
   글자 크기만으로는 높이가 17px 밖에 안 돼 누르기 어렵다 → 44px 확보.
   (색·굵기는 dd 상속 그대로) */
.contact__info dd a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}
.contact__info dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact__info .full { grid-column: 1 / -1; }

/* 지도 — 구글지도 iframe. 자리표시자였던 flex 중앙정렬은 제거하고
   iframe 이 박스를 꽉 채우게 한다(iframe 은 inline 이라 하단 여백이 생기므로 block). */
.contact__map {
	margin-top: 22px;
	/* aspect-ratio 를 쓰면 높이가 폭에 묶여 폼과 아래가 어긋난다.
	   남은 높이를 채우게 하고, 정보가 짧아 너무 납작해지는 것만 min-height 로 막는다. */
	flex: 1 1 auto;
	min-height: 245px;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
}
/* 네이버 지도 컨테이너 — SDK 가 이 div 안에 캔버스를 그린다.
   position:relative 는 '큰 지도 보기' 링크를 우하단에 얹기 위한 기준. */
.contact__map { position: relative; }
.contact__map-canvas {
	width: 100%;
	height: 100%;
	min-height: inherit;
}
/* 지도를 못 그린 경우(도메인 미등록 등) 빈 칸으로 남지 않게 안내를 띄운다 */
.contact__map-canvas.is-unavailable::after {
	content: "지도를 불러올 수 없습니다";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13.6px;
	color: rgba(255, 255, 255, .6);
}
.contact__map-fallback {
	padding: 16px;
	font-size: 13.6px;
	color: rgba(255, 255, 255, .7);
}
/* 네이버 지도 위에 얹는 '큰 지도 보기' — 지도 조작을 가리지 않게 작게. */
.contact__map-link {
	position: absolute;
	/* 네이버 지도가 쓰는 자리를 피한다:
	     좌하단 = 저작권 표기 / 우하단 = NAVER 로고 / 좌상단 = 확대·축소(JS 에서 옮김)
	   → 우상단만 비어 있으므로 여기에 둔다.
	   (처음엔 우하단 → 로고와 겹침, 그다음 우측 96px → 확대축소 컨트롤에 가림.
	    컨트롤을 좌상단으로 옮겨 우측을 통째로 비웠다) */
	right: 10px;
	top: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(27, 38, 32, .82);
	color: #fff;
	font-size: 12.8px;
	font-weight: 600;
	line-height: 1;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background-color .2s ease;
}
.contact__map-link:hover { background: rgba(27, 38, 32, .95); }

/* =====================================================================
   상담 폼 — kboard contact-form 스킨을 딥그린 섹션에 맞춤
   [kboard id=2 mod=editor] 가 #kboard-contact-form-editor 마크업을 뿌린다.
   그 스킨 CSS 는 밝은 배경 기준이라 여기서 다크용으로 덮어쓴다.
   .field/.consent 규칙(위쪽)은 이제 안 쓰이지만, 폼을 정적으로 되돌릴 때를
   위해 남겨둔다.
   ===================================================================== */
/* 스킨 CSS(kboard-skin-contact-form)가 우리 CSS 뒤에 로드되고 #id 선택자를
   쓰기 때문에 명시도·순서 모두 밀린다. → 우리 규칙도 같은 #id 를 함께 써서
   (0,2,0)→(1,2,0) 으로 올린다. 이게 없으면 폼이 밝은 기본 스타일로 나온다.
   스킨이 컨테이너 자체에 배경·테두리·패딩을 주므로, 바깥 .contact__form 박스와
   이중으로 겹치지 않게 여기서 지운다. */
.contact__form #kboard-contact-form-editor {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
}
.contact__form #kboard-contact-form-editor form {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}
/* 스킨이 넣는 안내문구·Powered by 는 시안에 없다 */
.contact__form #kboard-contact-form-editor .kboard-contact-form-poweredby { display: none; }

/* 항목 한 줄 */
/* 시안 — 항목 간 여백 18px (라벨 아래 8px 는 .attr-name 의 padding-bottom) */
.contact__form #kboard-contact-form-editor .kboard-attr-row {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	background: transparent;
	float: none;
}
/* 숨긴 행은 여백도 남기지 않는다 (margin 이 남아 빈 공간이 생긴다) */
.contact__form #kboard-contact-form-editor .kboard-attr-row[style*="display: none"],
.contact__form #kboard-contact-form-editor .kboard-attr-title,
.contact__form #kboard-contact-form-editor .kboard-attr-media,
.contact__form #kboard-contact-form-editor .kboard-attr-thumbnail,
.contact__form #kboard-contact-form-editor .kboard-attr-search,
.contact__form #kboard-contact-form-editor .kboard-attr-option { margin: 0; }
/* 시안 node 8:403 — 라벨 14.4px Medium / lh 21.6 / #e7e2d4 / 아래 8px */
.contact__form #kboard-contact-form-editor .attr-name {
	display: block;
	padding-bottom: 8px;
	font-size: 14.4px;
	font-weight: 500;
	line-height: 21.6px;
	color: #e7e2d4;
}
/* ★ 필수 표시(*)를 CSS 로 만들지 않는다.
   kboard 가 이미 <span class="attr-required-text">*</span> 를 마크업에 넣는다.
   ::after 로 또 붙이면 "제목 * *" 처럼 두 개가 나온다(실측 확인). */
.contact__form #kboard-contact-form-editor .attr-required-text {
	margin-left: 2px;
	color: var(--color-accent);
	font-weight: 700;
}
.contact__form #kboard-contact-form-editor .attr-value { width: 100%; }

/* 시안에 없는 필드는 숨긴다.
   media/thumbnail/search 는 상담 문의에 불필요하고(파일 업로드·검색설정),
   option 은 "비밀글/공지" 체크박스라 방문자에게 노출할 것이 아니다.
   ※ contact-form 스킨은 어차피 secret=true 를 강제로 넣는다.
   ★ 반드시 위 .kboard-attr-row{display:flex} 뒤에 와야 한다.
     명시도가 같아 순서로 결정되므로, 앞에 두면 flex 에 덮여 안 숨는다. */
.contact__form #kboard-contact-form-editor .kboard-attr-media,
.contact__form #kboard-contact-form-editor .kboard-attr-thumbnail,
.contact__form #kboard-contact-form-editor .kboard-attr-search,
.contact__form #kboard-contact-form-editor .kboard-attr-option { display: none; }

/* 제목만 숨긴다.
   ★ 작성자(kboard-attr-author)는 숨기지 않는다 — 이 사이트는 작성자 필드를
     "회사명 / 성함" 으로 쓰고 있다. (라벨 실측 확인)
   제목: 시안에 없고 회사명이 그 역할을 하므로 숨긴다.
   ※ 제목이 required 인 채 숨기면 저장이 막히고 목록에 제목 없는 글이 쌓인다
     → common.js(initContactFormTitle)가 작성자 값을 제목에 복사한다. */
.contact__form #kboard-contact-form-editor .kboard-attr-title { display: none; }

/* 시안 node 8:406 — 연락처(210px) + 문의 유형(나머지) 한 줄, gap 40px.
   kboard 는 각 필드를 독립 행으로 뿌리므로 CSS 로 두 행을 나란히 만든다. */
@media (min-width: 561px) {
	/* 스킨이 form 을 flex-direction:column 으로 고정한다(스킨 629행).
	   column 이면 wrap 해도 가로로 나란히 놓이지 않으므로 row 로 되돌린다. */
	.contact__form #kboard-contact-form-editor form {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0 40px;
	}
	/* 기본은 전체 폭 한 줄 */
	.contact__form #kboard-contact-form-editor .kboard-attr-row { flex: 0 0 100%; }
	/* 연락처 = 210px 고정, 문의 유형 = 남은 폭 */
	.contact__form #kboard-contact-form-editor .meta-key-contact_tel { flex: 0 0 210px; }
	.contact__form #kboard-contact-form-editor .meta-key-inquiry_type {
		flex: 1 1 0;
		min-width: 0;
	}
	/* 버튼 줄도 전체 폭 */
	.contact__form #kboard-contact-form-editor .kboard-control { flex: 0 0 100%; }
}

/* 입력 요소 — 다크 배경용 반투명 */
/* 시안 node 8:404 — 입력창 bg rgba(255,255,255,.05) / border rgba(255,255,255,.2)
   / r10 / h 50.8 / p 14 16 / 글자 15.2px, placeholder rgba(255,255,255,.5) */
.contact__form #kboard-contact-form-editor input[type="text"],
.contact__form #kboard-contact-form-editor input[type="email"],
.contact__form #kboard-contact-form-editor input[type="tel"],
.contact__form #kboard-contact-form-editor input[type="number"],
.contact__form #kboard-contact-form-editor select,
.contact__form #kboard-contact-form-editor textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 10px;
	background: rgba(255, 255, 255, .05);
	font-family: inherit;
	font-size: 15.2px;
	line-height: 1.45;
	color: #fff;
	outline: none;
	box-shadow: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.contact__form #kboard-contact-form-editor input[type="text"],
.contact__form #kboard-contact-form-editor input[type="email"],
.contact__form #kboard-contact-form-editor input[type="tel"],
.contact__form #kboard-contact-form-editor select { height: 50.805px; }
/* 시안 node 8:420 — textarea 90px
   스킨이 height:200px 를 주므로(스킨 696행) height 도 함께 지정해야 한다.
   min-height 만 주면 200px 가 그대로 남는다. */
.contact__form #kboard-contact-form-editor textarea {
	height: 90px;
	min-height: 90px;
	line-height: 25.84px;
	resize: vertical;
}
.contact__form #kboard-contact-form-editor input::placeholder,
.contact__form #kboard-contact-form-editor textarea::placeholder { color: rgba(255, 255, 255, .5); }
/* 포커스 — 스킨이 border-bottom 에 !important 로 파란선을 넣으므로(스킨 190행)
   같이 덮어야 골드 테두리만 남는다. */
.contact__form #kboard-contact-form-editor input:focus,
.contact__form #kboard-contact-form-editor select:focus,
.contact__form #kboard-contact-form-editor textarea:focus {
	border-color: var(--color-accent);
	border-bottom: 1px solid var(--color-accent) !important;
	background: rgba(255, 255, 255, .1);
	box-shadow: none;
}
/* select 펼침 목록은 OS 기본 흰 배경이므로 글자색을 되돌린다 */
.contact__form #kboard-contact-form-editor select option { color: #1b2620; }

/* 문의 유형 — 시안 node 8:415 는 이 칸만 배경이 다르다.
   다른 입력칸: rgba(255,255,255,.05) (밝게 뜨는 유리 느낌)
   문의 유형  : rgba(30,50,40,.8)     (짙은 초록, 살짝 가라앉은 느낌)
   원래 시안에서 이 자리는 드롭다운이었고 지금은 텍스트 입력으로 대체했지만,
   배경색은 시안 값을 그대로 따른다. */
.contact__form #kboard-contact-form-editor .meta-key-inquiry_type input[type="text"] {
	background: rgba(30, 50, 40, .8);
}
.contact__form #kboard-contact-form-editor .meta-key-inquiry_type input[type="text"]:focus {
	background: rgba(30, 50, 40, .95);
}

/* 체크박스(개인정보 동의 등) */
/* 개인정보 동의 체크박스 — 시안 node 8:422~8:426
   라벨 텍스트가 체크박스 오른쪽에 한 줄로 붙는다(13.6px / #cfcbbd).
   kboard 는 위쪽에 "개인정보수집동의" 라는 필드명 라벨을 따로 뿌리는데,
   시안에는 없고 문구가 중복되므로 숨긴다. */
.contact__form #kboard-contact-form-editor .kboard-attr-checkbox > .attr-name { display: none; }
/* 스킨의 `#id .attr-value .attr-value-label`(스킨 749행)이 15px/짙은색으로
   덮으므로 우리도 .attr-value 를 끼워 같은 구조 + 뒤 순서로 이긴다. */
.contact__form #kboard-contact-form-editor .attr-value-option,
.contact__form #kboard-contact-form-editor .attr-value .attr-value-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.6px;
	font-weight: 500;
	line-height: 20.4px;
	color: #cfcbbd;
	cursor: pointer;
}
/* 동의 문구가 "…(목적: 상담 / 항목: 성함·연락처 /  ⏎  보유: 3년)" 처럼
   괄호 안에서 끊겨 읽기 어렵다.
   괄호 설명은 어디서 끊겨도 어색하므로, 통째로 한 덩어리로 취급해
   들어갈 자리가 없으면 줄 전체가 다음 행으로 내려가게 한다.
   (임의 폭으로 강제 개행하면 문구가 바뀔 때 또 깨진다) */
.contact__form #kboard-contact-form-editor .attr-value .attr-value-label,
.contact__form #kboard-contact-form-editor .attr-value-option {
	word-break: keep-all;      /* 한글 어절 중간에서 끊지 않음 */
	overflow-wrap: break-word;
}
/* common.js(initConsentLineBreak)가 괄호 앞에 <br> 을 넣어 만든 2행 구조.
   2행(괄호 설명)은 부가 정보라 살짝 작고 흐리게. */
.contact__form #kboard-contact-form-editor .consent-note {
	font-size: 12.8px;
	color: rgba(207, 203, 189, .8);
}
.contact__form #kboard-contact-form-editor input[type="checkbox"],
.contact__form #kboard-contact-form-editor input[type="radio"] {
	width: 16px;
	height: 16px;
	min-height: 0;
	margin: 2px 0 0;
	padding: 0;
	accent-color: var(--color-accent);
	flex-shrink: 0;
	cursor: pointer;
}

/* 캡차 — 시안에 없지만 스팸 방지로 켠 항목.
   이미지가 행 안에 그냥 놓여 있어 좌우 정렬이 어긋난다 → 이미지+입력칸을 한 줄로. */
.contact__form #kboard-contact-form-editor .kboard-attr-captcha {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
.contact__form #kboard-contact-form-editor .kboard-attr-captcha > .attr-name { display: none; }
.contact__form #kboard-contact-form-editor .kboard-attr-captcha img {
	/* 캡차 이미지 원본은 대략 90x35 다. 높이를 입력칸과 맞추면 폭이 과하게
	   늘어나므로 높이만 44px 로 두고 폭은 비율대로 둔다. */
	flex: 0 0 auto;
	height: 44px;
	width: auto;
	border-radius: 8px;
	background: #fff;
	padding: 2px 4px;
}
.contact__form #kboard-contact-form-editor .kboard-attr-captcha .attr-value { flex: 1 1 0; min-width: 0; }

/* 전송 버튼 — 시안의 골드 버튼과 동일하게 */
/* 시안 node 8:427 — 버튼 위 여백 20px.
   스킨은 margin-top:40px + padding-top:20px + 상단 테두리를 준다 → 되돌린다. */
.contact__form #kboard-contact-form-editor .kboard-control {
	display: block;
	margin-top: 20px;
	padding: 0;
	border: 0;
	border-top: 0;
}
.contact__form #kboard-contact-form-editor .kboard-control .left,
.contact__form #kboard-contact-form-editor .kboard-control .right { display: block; }
/* 전송 버튼 — 시안 node 8:428 의 골드 pill 버튼.
   ★ 선택자에 .kboard-control button[type="submit"] 까지 붙이는 이유(실측으로 확인):
     스킨 CSS 는
       #kboard-contact-form-editor .kboard-control button[type="submit"]
     에 background/border-radius/height/color/font-size 를 !important 로 준다.
     !important 끼리 부딪히면 순서가 아니라 "명시도"가 승자를 정한다.
       스킨 = ID1 + class1 + attr1 + type1
       예전 우리 = ID1 + class2        ← 더 낮다 → 우리가 졌다
     home.css 가 스킨보다 뒤에 로드돼도(실측: 스킨 order 15, home.css order 21)
     명시도가 낮으면 순서는 아무 소용이 없다. 그래서 같은 attr+type 을 포함해
     명시도를 스킨 이상으로 올린다.
     스킨을 직접 고치지 않는 이유: 플러그인 업데이트 시 되돌아간다. */
.contact__form #kboard-contact-form-editor .kboard-control button[type="submit"].kboard-contact-form-button-large,
.contact__form #kboard-contact-form-editor .kboard-control button[type="submit"].kboard-contact-form-button-small,
.contact__form #kboard-contact-form-editor .kboard-contact-form-button-large,
.contact__form #kboard-contact-form-editor .kboard-contact-form-button-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* 시안 node 8:428 — h 52 / r999 / 16px Bold / #1b2620 */
	height: 52px !important;
	padding: 14px 24px;
	border: 0;
	border-radius: 999px !important;
	background: var(--color-accent) !important;
	color: #1b2620 !important;
	font-family: inherit;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 24px;
	text-decoration: none;
	box-shadow: none !important;
	cursor: pointer;
	transition: filter .15s ease;
}
/* hover 도 스킨이 !important 로 파란 그라디언트를 다시 씌우므로 같은 명시도로 맞춘다 */
.contact__form #kboard-contact-form-editor .kboard-control button[type="submit"].kboard-contact-form-button-large:hover,
.contact__form #kboard-contact-form-editor .kboard-control button[type="submit"].kboard-contact-form-button-small:hover,
.contact__form #kboard-contact-form-editor .kboard-contact-form-button-large:hover,
.contact__form #kboard-contact-form-editor .kboard-contact-form-button-small:hover {
	background: var(--color-accent) !important;
	filter: brightness(.96);
	transform: none;
	box-shadow: none !important;
}
@media (max-width: 1020px) {
	.contact__inner {
		grid-template-columns: minmax(0, 512px);
		justify-content: center;
	}
}
@media (max-width: 560px) {
	.field__row { grid-template-columns: 1fr; }
	.contact__info dl { grid-template-columns: 1fr; }
	.contact__form { padding: 24px 20px; }
	/* 1열이 되면 높이를 맞출 상대가 없으므로 고정 높이로 되돌린다 */
	.contact__map { flex: 0 0 auto; height: 260px; min-height: 0; }
	/* 스킨이 모바일에서 컨테이너에 테두리를 !important 로 넣는다(스킨 1042행)
	   → 바깥 .contact__form 박스와 이중 테두리가 되므로 지운다. */
	.contact__form #kboard-contact-form-editor {
		border: 0 !important;
		box-shadow: none !important;
	}
}