/*
Theme Name: KOSIN Remodelapt
Template: twentytwentyfive
Version: 1.0.8
Text Domain: kosin-remodelapt
*/

/* ---------- base ---------- */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: #fff;
	color: #111;
	font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "Noto Sans KR", "Nanum Gothic", "NanumGothic", sans-serif;
	-webkit-font-smoothing: antialiased;
	/* 한국어는 어절(띄어쓰기) 단위로만 줄바꿈 — 단어 중간에서 끊기는 것 방지 */
	word-break: keep-all;
	overflow-wrap: break-word;
}

html {
	scroll-behavior: smooth;
}

/* twentytwentyfive 부모테마가 최상위 블록마다 자동으로 넣는 여백(margin-block-start: 1.2rem)을
   제거 — 섹션 사이/히어로 위에 흰 줄로 보이던 원인. 모든 섹션 간격은 각 섹션 자체 padding으로 직접 제어. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

img {
	max-width: 100%;
	display: block;
}

section[id] {
	scroll-margin-top: 80px;
}

/* ---------- header ---------- */
.kosin-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 32px;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background 0.25s ease, border-color 0.25s ease, padding 0.25s ease, backdrop-filter 0.25s ease;
}

.kosin-header.is-scrolled {
	padding: 16px 32px;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(8px);
	border-bottom-color: #eee;
}

.kosin-logo {
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: #111;
	text-decoration: none;
}

.kosin-header-cta {
	border: 1px solid #111;
	padding: 8px 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #111;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.kosin-header-cta:hover {
	background: #111;
	color: #fff;
}

/* 투명 헤더가 밝든 어둡든 어떤 히어로 위에서도 읽히도록 은은한 화이트 헤일로 —
   밝은 배경에선 보이지 않고, 어둡거나 복잡한 배경에서만 살짝 떠서 가독을 확보한다.
   스크롤 후에는 흰 배경이 생기므로 제거. */
.kosin-header:not(.is-scrolled) .kosin-logo,
.kosin-header:not(.is-scrolled) .kosin-header-cta {
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 1px 3px rgba(255, 255, 255, 0.55);
}

/* 사진 히어로 페이지에서는 어두운 글씨+흰 헤일로가 흐린 얼룩으로 보였다. 상단 스크림이 깔리므로
   흰 글씨가 맞다. contact·sitemap처럼 흰 배경으로 시작하는 페이지는 글씨가 사라지니 :has()로 범위를 좁힌다. */
body:has(.kosin-service-hero-carousel) .kosin-header:not(.is-scrolled) .kosin-logo,
body:has(.kosin-service-hero-carousel) .kosin-header:not(.is-scrolled) .kosin-header-cta {
	color: #fff;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

body:has(.kosin-service-hero-carousel) .kosin-header:not(.is-scrolled) .kosin-header-cta {
	border-color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 560px) {
	.kosin-header {
		padding: 16px 20px;
	}

	.kosin-header.is-scrolled {
		padding: 12px 20px;
	}

	.kosin-header-cta {
		padding: 7px 12px;
		font-size: 11px;
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* ---------- hero ---------- */
.kosin-hero {
	padding-top: 0;
}

.kosin-hero-grid {
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
	height: 100dvh;
	/* 세로가 짧은 노트북에서 중앙 텍스트/CTA가 하단 콜라주(특히 c8)와 겹치지 않도록 최소 높이 확보.
	   화면이 이보다 크면 100dvh가 적용됨. 모바일(단일 사진 히어로)에선 아래에서 해제. */
	min-height: 880px;
}

.kosin-collage-img {
	position: absolute;
	width: 22%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	will-change: transform;
	transform: scale(var(--kosin-hover-scale, 1));
	transition: transform 0.35s ease;
}

.kosin-collage-img:hover {
	--kosin-hover-scale: 1.08;
	z-index: 4;
}

.kosin-hero-mobile-bg {
	display: none;
}

.kosin-collage-img.portrait {
	aspect-ratio: 2 / 3;
}

.c1 { top: 8%; left: 2%; width: 23%; }
.c2 { top: 4%; right: 3%; width: 21%; }
.c3 { top: 36%; left: 0%; width: 14%; }
.c4 { top: 30%; right: 1%; width: 15%; aspect-ratio: 3 / 4; }
.c5 { bottom: 6%; left: 9%; width: 20%; aspect-ratio: 3 / 2; }
.c6 { bottom: 4%; right: 10%; width: 19%; aspect-ratio: 3 / 2; }
.c7.accent { top: 4%; left: 32%; width: 15%; aspect-ratio: 3 / 2; }
.c8.accent { bottom: 10%; right: 30%; width: 15%; aspect-ratio: 3 / 2; }

.kosin-hero-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(90%, 640px);
	text-align: center;
	z-index: 3;
	/* 중심을 위(42%)로 올리고 세로 범위를 좁혀 — 워드마크 쪽은 감싸되 하단 콜라주(c8) 위로 흰 번짐이 닿지 않게 */
	background: radial-gradient(ellipse 78% 52% at 50% 42%, #fff 42%, rgba(255, 255, 255, 0) 74%);
	padding: 48px 24px;
}

.kosin-keyword {
	font-size: 13px;
	letter-spacing: 0.3em;
	color: #888;
	margin: 0 0 22px;
	font-weight: 600;
}

.kosin-wordmark {
	font-size: clamp(56px, 11vw, 132px);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: 0.03em;
	margin: 0;
}

.kosin-wordmark span {
	display: block;
	position: relative;
	font-size: clamp(12px, 1.4vw, 15px);
	font-weight: 500;
	letter-spacing: 0.22em;
	color: #888;
	margin-top: 22px;
	padding-top: 22px;
}

.kosin-wordmark span::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 1px;
	background: #111;
}

.kosin-tagline {
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: #555;
	margin: 20px 0 28px;
}

.kosin-cta,
.kosin-cta-large {
	display: inline-block;
	border: 1px solid #111;
	padding: 14px 28px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 14px;
	color: #111;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.kosin-cta:hover {
	background: #111;
	color: #fff;
}

/* 히어로 전화 상담 — 라벨 + 번호를 헤어라인 구분선으로 나눈 정제형 CTA (위 워드마크 구분선과 한 세트) */
.kosin-hero-cta {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	padding: 15px 34px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: none;
}

.kosin-hero-cta span {
	margin-left: 15px;
	padding-left: 16px;
	border-left: 1px solid currentColor;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.06em;
}

/* 모바일: 8장 콜라주 대신 대표 사진 1장 + 오버레이 텍스트로 된 별도 히어로 */
@media (max-width: 899px) {
	.kosin-hero-grid {
		height: 100dvh;
		min-height: 0;
		padding: 0;
		position: relative;
		overflow: hidden;
	}

	.kosin-hero-grid::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.55) 100%);
		z-index: 1;
	}

	.kosin-collage-img {
		display: none;
	}

	.kosin-hero-mobile-bg {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.kosin-hero-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: min(88%, 420px);
		z-index: 2;
		background: none;
		padding: 0;
	}

	.kosin-hero-text .kosin-keyword {
		color: rgba(255, 255, 255, 0.85);
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
	}

	.kosin-hero-text .kosin-wordmark {
		color: #fff;
		text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
	}

	.kosin-hero-text .kosin-wordmark span {
		color: rgba(255, 255, 255, 0.85);
	}

	.kosin-hero-text .kosin-wordmark span::before {
		background: rgba(255, 255, 255, 0.6);
	}

	.kosin-hero-text .kosin-tagline {
		color: rgba(255, 255, 255, 0.9);
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
	}

	.kosin-hero-text .kosin-cta {
		border-color: #fff;
		color: #fff;
	}

	.kosin-hero-text .kosin-cta:hover {
		background: #fff;
		color: #111;
	}
}

/* ---------- full-bleed carousel ---------- */
.kosin-carousel {
	position: relative;
	width: 100%;
	height: 100dvh;
	overflow: hidden;
}

.kosin-carousel-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease;
}

.kosin-carousel-slide.is-active {
	opacity: 1;
	z-index: 1;
}

.kosin-carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kosin-carousel-slide figcaption {
	position: absolute;
	left: 20px;
	right: 32px;
	bottom: 32px;
	max-width: 320px;
	margin-left: auto;
	text-align: right;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.kosin-carousel-slide figcaption strong {
	display: block;
	font-size: 18px;
	letter-spacing: 0.02em;
}

.kosin-carousel-slide figcaption span {
	display: block;
	font-size: 13px;
	opacity: 0.85;
	margin-top: 4px;
}

.kosin-carousel-prev,
.kosin-carousel-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s;
}

.kosin-carousel-prev:hover,
.kosin-carousel-next:hover {
	background: rgba(0, 0, 0, 0.55);
}

.kosin-carousel-prev {
	left: 24px;
}

.kosin-carousel-next {
	right: 24px;
}

@media (max-width: 560px) {
	.kosin-carousel-slide figcaption {
		left: 16px;
		right: 20px;
		bottom: 20px;
		max-width: none;
	}

	.kosin-carousel-slide figcaption strong {
		font-size: 16px;
	}

	.kosin-carousel-slide figcaption span {
		font-size: 12px;
	}

	.kosin-hide-mobile {
		display: none;
	}
}

/* ---------- about ---------- */
.kosin-about {
	padding: 120px 32px;
	background: #f7f6f3;
}

.kosin-about-inner {
	max-width: 1100px; /* trust 섹션과 같은 콘텐츠 폭 */
	margin: 0 auto;
}

.kosin-index {
	font-size: 12px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: #888;
	margin: 0 0 16px;
}

.kosin-about h2,
.kosin-services h2,
.kosin-gallery h2,
.kosin-faq h2 {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 12px;
}

.kosin-section-kr {
	font-size: 15px;
	color: #666;
	line-height: 1.6;
	margin: 0 0 28px;
}

.kosin-about-copy {
	font-size: 16px;
	line-height: 1.8;
	color: #333;
	max-width: 640px;
	margin: 0 0 20px;
}

.kosin-process {
	display: flex;
	gap: 0;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.kosin-process li {
	position: relative;
	flex: 1 1 200px;
	padding-right: 24px;
}

.kosin-process li:not(:first-child)::before {
	content: '';
	position: absolute;
	top: 20px;
	right: 50%;
	width: 100%;
	height: 1px;
	background: #ddd;
	z-index: 0;
}

.kosin-process li span {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 16px;
	border: 1px solid #111;
	border-radius: 50%;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	color: #111;
	z-index: 1;
}

.kosin-process li strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 6px;
}

.kosin-process li small {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: #666;
}

/* 좁은 화면에선 3칸이 한 줄에 안 들어가 연결선이 끊겨 보여서 세로 스텝 형태로 전환 */
@media (max-width: 600px) {
	.kosin-process {
		flex-direction: column;
		gap: 20px;
	}

	.kosin-process li {
		display: flex;
		flex: none;
		align-items: flex-start;
		gap: 16px;
		padding-right: 0;
	}

	.kosin-process li:not(:first-child)::before {
		content: none;
	}

	.kosin-process li span {
		flex-shrink: 0;
		margin-bottom: 0;
	}

	.kosin-process li > div {
		min-width: 0;
	}
}

/* ---------- services grid ---------- */
.kosin-services {
	background: #fff;
	padding: 100px 32px 120px;
}

.kosin-services-inner {
	max-width: 1400px;
	margin: 0 auto;
}

.kosin-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	margin-top: 44px;
}

.kosin-service-tile {
	display: block;
	margin: 0;
	padding: 20px 20px 20px 0;
	border-left: 1px solid #e5e5e5;
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
	outline-offset: 4px;
}

.kosin-service-tile:nth-child(3n+1) {
	border-left: none;
	padding-left: 0;
}

.kosin-service-tile-img {
	display: block;
	overflow: hidden;
	margin-bottom: 16px;
}

.kosin-service-tile-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.kosin-service-tile:hover .kosin-service-tile-img img,
.kosin-service-tile:focus-visible .kosin-service-tile-img img {
	transform: scale(1.06);
}

.kosin-service-tile-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: color 0.2s ease;
}

.kosin-service-tile-label .code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	font-weight: 500;
	color: #999;
	letter-spacing: 0.04em;
	transition: color 0.2s ease;
}

.kosin-service-tile:hover .kosin-service-tile-label .code,
.kosin-service-tile:focus-visible .kosin-service-tile-label .code {
	color: #111;
}

@media (max-width: 700px) {
	.kosin-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 2단 그리드: 홀수=왼쪽칸, 짝수=오른쪽칸. 데스크톱 3n+1 규칙이 새어 특정 타일만
	   좁아지던 문제를 odd/even으로 명확히 재정의. */
	.kosin-service-tile:nth-child(odd) {
		border-left: none;
		padding-left: 0;
		padding-right: 20px;
	}

	.kosin-service-tile:nth-child(even) {
		border-left: 1px solid #e5e5e5;
		padding-left: 20px;
		padding-right: 0;
	}
}

/* ---------- photo grid ---------- */
.kosin-gallery {
	background: #fff;
	padding: 120px 32px;
}

.kosin-gallery-tint {
	background: #f7f6f3;
}

.kosin-gallery-inner {
	max-width: 1400px;
	margin: 0 auto;
}

.kosin-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	margin-top: 40px;
}

/* 6장짜리 갤러리(현관·수납·샷시)는 3열 2줄로 꽉 채운다. 4열이면 마지막 줄에 2칸이 빈다. */
.kosin-photo-grid:has(img:nth-child(6):last-child) {
	grid-template-columns: repeat(3, 1fr);
}

.kosin-photo-grid img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	cursor: zoom-in;
	transition: transform 0.3s ease;
}

.kosin-photo-grid img:hover {
	transform: scale(1.03);
}

@media (max-width: 700px) {
	.kosin-gallery {
		padding-left: 20px;
		padding-right: 20px;
	}

	.kosin-photo-grid {
		grid-template-columns: repeat(2, 1fr);
		margin-left: -20px;
		margin-right: -20px;
	}
}

/* ---------- lightbox (갤러리 사진 클릭 시) ---------- */
.kosin-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}

.kosin-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.kosin-lightbox img {
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.kosin-lightbox-close,
.kosin-lightbox-prev,
.kosin-lightbox-next {
	position: absolute;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.kosin-lightbox-close:hover,
.kosin-lightbox-prev:hover,
.kosin-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.28);
}

.kosin-lightbox-close {
	top: 20px;
	right: 20px;
}

.kosin-lightbox-prev,
.kosin-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	font-size: 26px;
}

.kosin-lightbox-prev {
	left: 20px;
}

.kosin-lightbox-next {
	right: 20px;
}

/* 모바일: 레터박스 없이 화면을 꽉 채우는 라이트박스 (일부 크롭될 수 있음) */
@media (max-width: 600px) {
	.kosin-lightbox img {
		width: 100vw;
		height: 100dvh;
		max-width: none;
		max-height: none;
		object-fit: cover;
	}

	.kosin-lightbox-close {
		top: 12px;
		right: 12px;
	}

	.kosin-lightbox-prev {
		left: 8px;
	}

	.kosin-lightbox-next {
		right: 8px;
	}
}

/* ---------- trust / philosophy ---------- */
.kosin-trust {
	background: #fff;
	padding: 120px 32px;
}

.kosin-trust-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.kosin-trust-img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.kosin-trust-copy blockquote {
	margin: 0 0 36px;
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 700;
	line-height: 1.5;
}

.kosin-stats {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 24px 0 0;
	border-top: 1px solid #e5e5e5;
}

.kosin-stats li {
	display: flex;
	align-items: baseline;
	gap: 16px;
}

.kosin-stats strong {
	font-size: 15px;
	min-width: 100px;
	flex-shrink: 0;
}

.kosin-stats span {
	font-size: 13px;
	color: #777;
}

@media (max-width: 800px) {
	.kosin-trust-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ---------- contact CTA components (재사용: footer-cta 안에서 사용) ---------- */
.kosin-cta-large {
	border-color: #fff;
	color: #fff;
	font-size: clamp(26px, 5vw, 44px);
	font-weight: 800;
	padding: 20px 40px;
	margin: 8px 0 20px;
}

.kosin-cta-large:hover {
	background: #fff;
	color: #111;
}

.kosin-cta-large.kosin-cta-dark {
	border-color: #111;
	color: #111;
}

.kosin-cta-large.kosin-cta-dark:hover {
	background: #111;
	color: #fff;
}

/* ---------- footer photo + quote CTA ---------- */
.kosin-footer-cta {
	position: relative;
	height: clamp(420px, 60vh, 620px);
	overflow: hidden;
}

.kosin-footer-cta img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kosin-footer-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.kosin-footer-cta-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 32px;
	z-index: 1;
}

.kosin-footer-eyebrow {
	color: rgba(255, 255, 255, 0.75);
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin: 0 0 18px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.kosin-footer-quote {
	color: #fff;
	font-size: clamp(16px, 2vw, 22px);
	font-weight: 600;
	line-height: 1.6;
	max-width: 780px;
	margin: 0 0 32px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.kosin-footer-cta-btn {
	display: inline-block;
	border: 1px solid #fff;
	color: #fff;
	padding: 14px 32px;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.kosin-footer-cta-btn:hover {
	background: #fff;
	color: #111;
}

/* ---------- footer (dark) ---------- */
.kosin-footer {
	background: #111;
}

.kosin-footer-nav {
	background: #111;
	padding: 64px 32px 40px;
	display: flex;
	justify-content: center;
	gap: 100px;
	flex-wrap: wrap;
}

.kosin-footer-nav-group p,
.kosin-footer-contact p {
	font-size: 12px;
	letter-spacing: 0.1em;
	color: #888;
	margin: 0 0 14px;
}

.kosin-footer-nav-group a {
	display: block;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	margin-bottom: 10px;
}

.kosin-footer-nav-group a:hover {
	text-decoration: underline;
}

.kosin-footer-phone {
	display: block;
	font-size: 24px;
	font-weight: 800;
	color: #fff;
	text-decoration: none;
	margin-bottom: 16px;
}

.kosin-footer-contact-btn {
	display: inline-block;
	border: 1px solid #fff;
	background: #fff;
	color: #111;
	padding: 12px 24px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.kosin-footer-contact-btn:hover {
	background: transparent;
	color: #fff;
}

.kosin-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 28px 32px;
	font-size: 12px;
	color: #999;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.kosin-footer-biz p {
	margin: 0 0 4px;
}

.kosin-footer-biz a {
	color: #999;
}

.kosin-footer-links a {
	margin-left: 16px;
	color: #fff;
	text-decoration: none;
}

@media (max-width: 700px) {
	.kosin-footer-nav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 36px 16px;
		padding: 56px 24px 40px;
		text-align: center;
	}

	.kosin-footer-contact {
		grid-column: 1 / -1;
		margin-top: 4px;
	}

	.kosin-footer-nav-group a {
		font-size: 13px;
	}

	.kosin-footer-bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 16px;
		padding: 24px 32px;
	}

	.kosin-footer-links a:first-child {
		margin-left: 0;
	}
}

/* ---------- service page hero (부위별 사진 캐러셀, 홈 콜라주와 구분) ---------- */
.kosin-service-hero-carousel {
	height: clamp(520px, 76vh, 720px);
}

.kosin-service-hero-carousel .kosin-hero-text .kosin-hero-h1-visual {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 14px;
}

.kosin-service-hero-carousel::after {
	content: '';
	position: absolute;
	inset: 0;
	/* 최상단 0.55는 헤더(로고·상담문의)가 흰 주방 사진 위에서도 읽히게 하는 밴드다. 낮추면 헤더가 묻힌다. */
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 14%, rgba(0, 0, 0, 0.22) 35%, rgba(0, 0, 0, 0.22) 60%, rgba(0, 0, 0, 0.52) 100%);
	z-index: 2;
	pointer-events: none;
}

/* 캐러셀은 밝은 주방 사진까지 순환하므로 흰 텍스트가 묻힌다. 사진 전체를 어둡게 하는 대신
   텍스트 블록 뒤에만 국소 스크림을 깔아 대비를 확보한다(전체 스크림은 사진을 죽인다). */
.kosin-service-hero-carousel .kosin-hero-text {
	background: radial-gradient(ellipse 92% 72% at 50% 50%, rgba(0, 0, 0, 0.6) 36%, rgba(0, 0, 0, 0) 78%);
	padding: 48px 32px;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.kosin-service-hero-carousel .kosin-hero-text .kosin-index {
	color: rgba(255, 255, 255, 0.85);
}

.kosin-service-hero-carousel .kosin-hero-text .kosin-tagline {
	color: rgba(255, 255, 255, 0.9);
}

.kosin-service-hero-carousel .kosin-hero-text .kosin-cta {
	border-color: #fff;
	color: #fff;
}

.kosin-service-hero-carousel .kosin-hero-text .kosin-cta:hover {
	background: #fff;
	color: #111;
}

/* 홈 히어로와 동일한 헤어라인 모티프 — 제목과 서브카피를 나눠 한 가족으로 통일 */
.kosin-service-hero-carousel .kosin-hero-text .kosin-tagline {
	position: relative;
	margin-top: 22px;
	padding-top: 24px;
}

.kosin-service-hero-carousel .kosin-hero-text .kosin-tagline::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 1px;
	background: rgba(255, 255, 255, 0.55);
}

/* 모바일에선 좌우 화살표가 가운데 정렬된 히어로 텍스트와 겹쳐 — 자동 전환되므로 숨긴다 */
@media (max-width: 899px) {
	.kosin-service-hero-carousel .kosin-carousel-prev,
	.kosin-service-hero-carousel .kosin-carousel-next {
		display: none;
	}
}

/* ---------- contact page ---------- */
.kosin-page-hero {
	text-align: center;
	padding: 170px 32px 90px;
	background: #fff;
	position: relative;
}

.kosin-page-hero .kosin-hero-h1-visual {
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 800;
	margin: 0 0 16px;
}

.kosin-page-hero .kosin-tagline {
	position: relative;
	margin-top: 22px;
	padding-top: 24px;
}

.kosin-page-hero .kosin-tagline::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 1px;
	background: #111;
}

.kosin-page-hero-bg {
	display: none;
}

/* 모바일: 텍스트만 있던 히어로 대신 다른 페이지와 통일된 사진 배경 히어로 */
@media (max-width: 899px) {
	.kosin-page-hero {
		height: 100dvh;
		padding: 0 32px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		color: #fff;
	}

	.kosin-page-hero-bg {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 0;
	}

	.kosin-page-hero::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.55) 100%);
		z-index: 1;
	}

	.kosin-page-hero > *:not(.kosin-page-hero-bg) {
		position: relative;
		z-index: 2;
	}

	.kosin-page-hero .kosin-index {
		color: rgba(255, 255, 255, 0.85);
	}

	.kosin-page-hero .kosin-tagline {
		color: rgba(255, 255, 255, 0.9);
	}

	.kosin-page-hero .kosin-tagline::before {
		background: rgba(255, 255, 255, 0.55);
	}

	.kosin-page-hero .kosin-hero-h1-visual,
	.kosin-page-hero .kosin-index,
	.kosin-page-hero .kosin-tagline {
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
	}

	.kosin-page-hero .kosin-cta-large.kosin-cta-dark {
		border-color: #fff;
		color: #fff;
	}

	.kosin-page-hero .kosin-cta-large.kosin-cta-dark:hover {
		background: #fff;
		color: #111;
	}
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kosin-service-body {
	background: #fff;
	padding: 70px 32px 30px;
}

.kosin-service-body-inner {
	max-width: 820px; /* FAQ와 같은 읽기 폭 — 섹션마다 기준선이 달라 보이던 문제 */
	margin: 0 auto;
}

.kosin-service-body-inner p {
	font-size: 16px;
	line-height: 1.9;
	color: #333;
	margin: 0 0 24px;
}

/* 첫 문단은 리드로 키워 도입부 리듬을 준다 */
.kosin-service-body-inner p:first-child {
	font-size: 19px;
	line-height: 1.75;
	color: #1a1a1a;
	margin-bottom: 28px;
}

.kosin-checklist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 40px;
	row-gap: 0;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.kosin-checklist li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 0;
	border-top: 1px solid #e8e6e1;
}

.kosin-checklist strong {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.kosin-checklist span {
	font-size: 13.5px;
	line-height: 1.65;
	color: #777;
}

@media (max-width: 600px) {
	.kosin-checklist {
		grid-template-columns: 1fr;
	}
}

.kosin-services-grid-5 {
	grid-template-columns: repeat(5, 1fr);
}

.kosin-services-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
	.kosin-services-grid-5,
	.kosin-services-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 2단일 때 홀/짝 칸 구분 — 3n+1 규칙이 새어 특정 타일만 좁아지는 것 방지 (scoped) */
	.kosin-services-grid-5 .kosin-service-tile:nth-child(odd),
	.kosin-services-grid-4 .kosin-service-tile:nth-child(odd) {
		border-left: none;
		padding-left: 0;
		padding-right: 20px;
	}

	.kosin-services-grid-5 .kosin-service-tile:nth-child(even),
	.kosin-services-grid-4 .kosin-service-tile:nth-child(even) {
		border-left: 1px solid #e5e5e5;
		padding-left: 20px;
		padding-right: 0;
	}
}

/* ---------- FAQ 아코디언 (네이티브 <details>, JS 없음) ---------- */
.kosin-faq {
	background: #fff;
	padding: 100px 32px;
}

.kosin-faq-inner {
	max-width: 820px;
	margin: 0 auto;
}

.kosin-faq-list {
	margin-top: 40px;
	border-top: 1px solid #e8e6e1;
}

.kosin-faq-item {
	border-bottom: 1px solid #e8e6e1;
}

.kosin-faq-item summary {
	display: block;
	position: relative;
	padding: 24px 46px 24px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: #1a1a1a;
	cursor: pointer;
	list-style: none;
	transition: color 0.2s ease;
}

.kosin-faq-item summary::-webkit-details-marker {
	display: none;
}

.kosin-faq-item summary:hover {
	color: #000;
}

/* 우측 셰브론 — 열리면 위로 회전 */
.kosin-faq-item summary::after {
	content: '';
	position: absolute;
	right: 8px;
	top: 28px;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid #aaa;
	border-bottom: 1.5px solid #aaa;
	transform: rotate(45deg);
	transition: transform 0.25s ease, border-color 0.2s ease;
}

.kosin-faq-item[open] summary::after {
	top: 32px;
	transform: rotate(-135deg);
}

.kosin-faq-item summary:hover::after {
	border-color: #111;
}

.kosin-faq-a {
	padding: 0 46px 26px 0;
}

.kosin-faq-a p {
	margin: 0;
	font-size: 15px;
	line-height: 1.85;
	color: #555;
}

@media (max-width: 600px) {
	.kosin-faq {
		padding: 64px 20px;
	}

	.kosin-faq-item summary {
		font-size: 15px;
		padding-right: 38px;
	}
}

/* ---------- 상담 페이지 전화/문자 액션 버튼 ---------- */
.kosin-contact-actions {
	background: #f7f6f3;
	padding: 80px 32px;
	text-align: center;
}

.kosin-contact-actions-lead {
	font-size: 16px;
	line-height: 1.7;
	color: #444;
	margin: 0 0 36px;
}

.kosin-contact-actions-btns {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.kosin-contact-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 240px;
	padding: 22px 40px;
	border: 1px solid #111;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.kosin-contact-action-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.kosin-contact-action-num {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.kosin-contact-action-call {
	background: #111;
	color: #fff;
}

.kosin-contact-action-call:hover {
	background: #fff;
	color: #111;
}

.kosin-contact-action-sms {
	background: #fff;
	color: #111;
}

.kosin-contact-action-sms:hover {
	background: #111;
	color: #fff;
}

@media (max-width: 600px) {
	.kosin-contact-actions-btns {
		flex-direction: column;
	}

	.kosin-contact-action {
		min-width: 0;
		width: 100%;
	}
}

.kosin-form-section {
	background: #f7f6f3;
	padding: 80px 32px;
}

.kosin-form-wrap {
	max-width: 640px;
	margin: 0 auto;
}

.kosin-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.kosin-form label {
	display: block;
	font-size: 13px;
	color: #555;
	margin-bottom: 20px;
}

.kosin-form-full {
	grid-column: 1 / -1;
}

.kosin-form label span {
	color: #b33;
}

.kosin-form input,
.kosin-form textarea {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 14px 16px;
	border: 1px solid #e0ddd6;
	background: #fff;
	font-size: 16px;
	font-family: inherit;
	color: #111;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kosin-form input:focus,
.kosin-form textarea:focus {
	outline: none;
	border-color: #111;
	box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06);
}

.kosin-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kosin-form button {
	border: 1px solid #111;
	background: #111;
	color: #fff;
	padding: 16px 40px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.kosin-form button:hover {
	background: #fff;
	color: #111;
}

.kosin-form-msg {
	max-width: 640px;
	margin: 24px auto 0;
	text-align: center;
	font-size: 14px;
}

.kosin-contact-info {
	text-align: center;
	padding: 60px 32px;
	font-size: 14px;
	color: #555;
}

.kosin-contact-info p {
	margin: 0 0 6px;
}

/* ---------- 사이트맵 페이지 — 서비스 그리드와 같은 보더드 컬럼 스타일 ---------- */
.kosin-sitemap-section {
	background: #fff;
	padding: 30px 32px 120px;
}

.kosin-sitemap-inner {
	max-width: 1400px;
	margin: 0 auto;
}

.kosin-sitemap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	margin-top: 44px;
}

.kosin-sitemap-group {
	padding: 32px 28px 32px 0;
	border-left: 1px solid #e5e5e5;
}

.kosin-sitemap-group:first-child {
	border-left: none;
	padding-left: 0;
}

.kosin-sitemap-group-code {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #999;
	margin-bottom: 10px;
}

.kosin-sitemap-group-title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 0 20px;
}

.kosin-sitemap-group a {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 15px;
	color: #333;
	text-decoration: none;
	margin-bottom: 12px;
	transition: color 0.2s ease;
}

.kosin-sitemap-group a::before {
	content: '\203A';
	color: #bbb;
	transition: color 0.2s ease;
}

.kosin-sitemap-group a:hover,
.kosin-sitemap-group a:focus-visible {
	color: #111;
}

.kosin-sitemap-group a:hover::before,
.kosin-sitemap-group a:focus-visible::before {
	color: #111;
}

@media (max-width: 700px) {
	.kosin-sitemap-grid {
		grid-template-columns: 1fr 1fr;
	}

	.kosin-sitemap-group {
		padding: 24px 20px 24px 0;
	}

	.kosin-sitemap-group:nth-child(odd) {
		border-left: none;
		padding-left: 0;
	}

	.kosin-sitemap-group:nth-child(even) {
		border-left: 1px solid #e5e5e5;
		padding-left: 20px;
	}
}

@media (max-width: 600px) {
	.kosin-form-row {
		grid-template-columns: 1fr;
	}

	.kosin-form button {
		width: 100%;
	}
}

/* ---------- group별 고유 섹션 (kosin_extra_section) ----------
   폭은 about/trust와 같은 1100 콘텐츠 단, 여백은 faq와 동일하게 맞춰 기존 리듬을 깨지 않는다. */
.kosin-extra {
	background: #fff;
	padding: 100px 32px;
}

.kosin-extra-inner {
	max-width: 1100px;
	margin: 0 auto;
}

.kosin-extra h2 {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 800;
	line-height: 1.35;
	margin: 0 0 14px;
}

.kosin-extra-note {
	font-size: 15px;
	line-height: 1.85;
	color: #666;
	margin: 0;
	max-width: 680px;
}

.kosin-extra h2 + .kosin-extra-note {
	margin-bottom: 32px;
}

/* 부위별 — 관련 공정 칩 */
.kosin-chips,
.kosin-keywords {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.kosin-chips a {
	display: inline-block;
	border: 1px solid #d8d5cf;
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 14px;
	color: #111;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.kosin-chips a:hover {
	background: #111;
	border-color: #111;
	color: #fff;
}

/* 제목 바로 아래에 목록이 오는 경우(설명문 없이) 붙어 보이지 않게 */
.kosin-extra h2 + .kosin-chips,
.kosin-extra h2 + .kosin-keywords,
.kosin-extra h2 + .kosin-extra-list,
.kosin-extra h2 + .kosin-sequence {
	margin-top: 28px;
}

/* 칩 중 아직 발행되지 않은 페이지는 링크 없이 같은 자리에 놓인다 */
.kosin-chips span {
	display: inline-block;
	border: 1px solid #ebe8e3;
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 14px;
	color: #999;
}

.kosin-extra-list span {
	color: #999;
}

/* 스타일별 — 마감 키워드(링크 아님) */
.kosin-keywords li {
	border-bottom: 1px solid #111;
	padding: 0 2px 6px;
	font-size: clamp(16px, 1.8vw, 20px);
	font-weight: 700;
}

/* 평수별·상황별 — 목록.
   3열로 두면 항목 수가 열 수로 안 나눠질 때 구분선이 칸마다 끊겨 어긋나 보인다.
   한 열 전체폭 선이면 항목이 3~6개로 달라도 항상 가지런하다. */
.kosin-extra-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.kosin-extra-list li {
	border-top: 1px solid #e8e6e1;
	padding: 18px 0;
	font-size: 15px;
}

.kosin-extra-list a {
	color: #111;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.kosin-extra-list a:hover {
	border-bottom-color: #111;
}

.kosin-extra-list-plain {
	grid-template-columns: repeat(2, 1fr);
	color: #444;
	line-height: 1.7;
}

/* 공정별 — 순서 위치 */
.kosin-sequence {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.kosin-sequence li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 24px;
	background: #f7f6f4;
}

.kosin-sequence li span {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #999;
}

.kosin-sequence li strong,
.kosin-sequence li a {
	font-size: 16px;
	font-weight: 700;
	color: #111;
	text-decoration: none;
}

.kosin-sequence li a {
	border-bottom: 1px solid #111;
	align-self: flex-start;
}

.kosin-sequence li.is-current {
	background: #111;
}

.kosin-sequence li.is-current span {
	color: #999;
}

.kosin-sequence li.is-current strong {
	color: #fff;
}

.kosin-sequence li.is-empty strong {
	color: #888;
	font-weight: 400;
}

/* 지역별 — 방문 상담 */
.kosin-extra-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

@media (max-width: 780px) {
	.kosin-extra {
		padding: 72px 20px;
	}

	.kosin-extra-list-plain,
	.kosin-sequence {
		grid-template-columns: 1fr;
	}
}