:root {
	--navy: #1c2a77;
	--ink: #333;
	--text: #555;
	--muted: #8a8a8a;
	--line: #dedede;
	--orange: #ffa000;
	--font: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font);
	color: var(--text);
	/* 원본의 배경 띠(위 회색 → 남색 띠 → 하늘색 → 흰색) */
	background: #fff url(images/main_bg.jpg) repeat-x 0 0;
}
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; border: 0; }
.wrap { position: relative; width: 1010px; margin: 0 auto; }

/* 원본 그림에서 필요한 부분만 잘라 보이기: --iw 그림 폭, --x --y 자를 곳, --w --h 자른 크기 */
.crop { position: relative; overflow: hidden; aspect-ratio: var(--w) / var(--h); }
.crop > img, .crop > .stack {
	position: absolute;
	max-width: none;
	width: calc(var(--iw) / var(--w) * 100%);
	left: calc(var(--x) / var(--w) * -100%);
	top: calc(var(--y) / var(--h) * -100%);
}
.stack img { width: 100%; max-width: none; }

/* ── 머리 ── */
.header { height: 92px; }
.logo { position: absolute; left: 16px; top: 42px; width: 228px; }
.util {
	/* 오른쪽 끝을 아래 메뉴 「고객센터」의 「터」 끝과 같은 줄로(.gnb 의 right 와 같은 57px, 2026-11-08 사용자) */
	position: absolute; right: 57px; top: 7px;
	/* 글씨 7 → 9px (2026-11-08 사용자 「조금 크게」) */
	font: 9px/1 Tahoma, Verdana, sans-serif; color: #999; letter-spacing: .2px;
}
.util a:hover { color: var(--ink); }
.util i { font-style: normal; margin: 0 4px; color: #c2c2c2; }
.gnb { position: absolute; right: 57px; top: 54px; display: flex; }
.gnb a {
	position: relative; padding: 0 19px;
	font-size: 14px; font-weight: 700; line-height: 24px; letter-spacing: -.6px; color: #444;
}
.gnb a + a::before {
	content: ""; position: absolute; left: 0; top: 7px; height: 11px; border-left: 1px solid #c4c4c4;
}
.gnb a:last-child { padding-right: 0; }
/* 마우스를 올리면 검은색 (2026-11-08 사용자 — 예전 남색 → #747474 → 검정). 폰 · 태블릿은 남색 띠 위라 아래에서 노랑 그대로 */
.gnb a:hover { color: #000; }
/* 누르는 순간 · 들어와 있는 메뉴(build.py 가 class="on" 을 붙인다)는 #000000 (2026-11-08 사용자 — #0356B2 에서 바꿈) */
.gnb a:active, .gnb a.on { color: #000; }

/* ── 큰 그림(글자 칸 + 그림 칸) ── */
.hero-text { height: 170px; position: relative; color: #fff; }
.ribbon { position: absolute; left: 24px; top: 28px; display: flex; gap: 2px; }
.ribbon i {
	width: 14px; height: 37px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.ribbon i:nth-child(1) { background: #39b6ee; }
.ribbon i:nth-child(2) { background: #f52bd0; }
.ribbon i:nth-child(3) { background: #fff200; }
.sun {
	position: absolute; left: 908px; top: 25px; width: 84px; height: 84px; border-radius: 50%;
	background: radial-gradient(circle, #fff 0 14%, rgba(255, 255, 255, .75) 19%, rgba(255, 255, 255, .18) 42%, rgba(255, 255, 255, 0) 70%);
}
.slogan {
	position: absolute; left: 22px; top: 86px; margin: 0;
	font: 400 30px/1 Arial, Helvetica, sans-serif; letter-spacing: -.3px;
	/* 그림자 — 처음(테두리 100% · 그림자 .6)에서 조금 흐리게, 아래 「컴앤에스 공항동점」(.brand)과 같은 진하기 (2026-11-08 사용자) */
	text-shadow: 0 0 1px rgba(19, 40, 107, .7), 1px 2px 2px rgba(0, 0, 40, .45);
}
.brand {
	position: absolute; left: 23px; top: 143px; margin: 0;
	display: flex; align-items: baseline; white-space: nowrap; line-height: 1;
	/* 그림자 진하기: 처음(테두리 100% · 그림자 .6, 아래 2px)과 흐리게(45% · .3, 1px) 사이로 (2026-11-08 사용자 「조금 찐하게」) */
	text-shadow: 0 0 1px rgba(19, 40, 107, .7), 1px 2px 2px rgba(0, 0, 40, .45);
}
.brand b { margin-right: 13px; font-size: 29px; font-weight: 700; letter-spacing: -1px; }
.brand b em { font-style: normal; color: var(--orange); }
.brand small { margin-right: 8px; font-size: 17px; font-weight: 700; letter-spacing: -.5px; }
/* 원본 번호 글꼴은 좁고 길쭉하다 — 가로만 줄여서 맞춘다 */
.brand a { display: inline-block; font: 400 32px/1 Arial, Helvetica, sans-serif; transform: scaleX(.75); transform-origin: 0 50%; }
.reserve { position: absolute; left: 560px; top: 143px; width: 400px; }
/* 흰 글씨 그대로 — 11-08 에 #0457B3 으로 바꿨다가 사용자 「색상 전으로 바꿔」로 되돌림 */
.reserve p { margin: 0; font-size: 12px; line-height: 14px; text-shadow: 0 1px 1px rgba(0, 0, 40, .5); }
.reserve strong {
	position: absolute; left: 218px; top: 4px;
	font-size: 22px; line-height: 1; font-weight: 900; letter-spacing: 4.5px; white-space: nowrap;
	-webkit-text-stroke: 1px #3a2a00;
	text-shadow: 1px 2px 2px rgba(0, 0, 0, .45);
}
.reserve strong em { font-style: normal; color: #ffd21f; }
.hero-pic {
	--iw: 1010; --x: 0; --y: 262; --w: 1010; --h: 305;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 7%);
}

/* ── 아래 세 칸(공지 · 바로가기 · 고객상담) ── */
.lower { background: #fff; }
.lower .wrap { display: grid; grid-template-columns: 340px 324px 31px 315px; height: 185px; }
.box-title { display: flex; align-items: baseline; justify-content: space-between; }
.notice { padding: 30px 30px 0 10px; }
.notice h2 { margin: 0; font: 700 11px/1 Tahoma, Verdana, sans-serif; color: #222; letter-spacing: -.2px; }
.more { font: 9px/1 Tahoma, Verdana, sans-serif; color: #999; }
.more:hover { color: var(--ink); }
/* 목록 앞 「›」를 위 NOTICE 글씨 왼쪽 끝에 맞춘다(왼쪽 들여쓰기 11px → 0, 2026-11-08 사용자) */
.notice ul { margin: 21px 0 0; }
.notice li { position: relative; padding-left: 12px; font-size: 11.5px; line-height: 21px; }
.notice li::before { content: "›"; position: absolute; left: 0; top: 0; color: #9a9a9a; }
.notice li a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #555; }
.notice li a:hover { color: var(--ink); text-decoration: underline; }

.quick {
	grid-column: 2; margin-top: 29px; height: 132px;
	/* 아이콘 그림 세 장을 원본처럼 이어 붙인다(폭 92 · 111 · 100) */
	display: grid; grid-template-columns: 92px 111px 100px; justify-content: center;
	border: 1px solid #d8d8d8; border-radius: 6px;
	background: linear-gradient(#fff, #f1f1f1);
	box-shadow: 0 1px 0 #fff inset;
}
.quick a { display: flex; flex-direction: column; align-items: center; padding-top: 22px; }
.q-icon { position: relative; height: 73px; display: flex; justify-content: center; }
.q-icon img { height: 73px; width: auto; max-width: none; }
.q-icon img + img { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .3s; }
.quick a:hover .q-icon img + img { opacity: 1; }
/* 오시는길 아이콘(main_map.svg)은 회색 그림이 따로 없어 같은 그림을 흑백으로 */
.q-icon img.gray { filter: grayscale(1); }
.quick span { margin-top: 0; font-size: 12px; line-height: 16px; font-weight: 700; color: #3d3d3d; letter-spacing: -.3px; }

.cs { grid-column: 4; position: relative; padding: 26px 0 0 16px; }
.cs h2 { margin: 0; font-size: 15px; line-height: 17px; font-weight: 700; color: #222; letter-spacing: -.5px; }
.cs h2 small { margin-left: 4px; font: 9px/1 Tahoma, Verdana, sans-serif; color: #b8b8b8; letter-spacing: 0; }
.talk { position: absolute; left: 168px; top: 18px; min-height: 30px; }
.cs-big {
	display: inline-block; margin-top: 11px;
	font: 400 26px/1 Arial, Helvetica, sans-serif; color: #2b2b2b;
	transform: scaleX(.9); transform-origin: 0 50%;
}
.cs dl { margin: 7px 0 0; display: grid; grid-template-columns: 56px auto; justify-content: start; }
.cs dt { font-size: 13px; line-height: 17px; font-weight: 700; color: #333; letter-spacing: -.5px; }
.cs dd { margin: 0; font: 400 14px/17px Arial, Helvetica, sans-serif; color: #333; }
/* 문자 보내기 — 옛 모바일 홈페이지의 「문자보내기」(2026-11-07). PC 에서는 문자 앱이 없어 폰 화면에서만 보인다 */
.sms-btn { display: none; }
.cs p { margin: 18px 0 0; font-size: 12px; line-height: 14px; color: #888; letter-spacing: -.3px; }
/* 원본 그림(main_06)에서 전화기 부분만 — 아래 글자 줄(y 81 부터)은 빼고 자른다 */
.phone-pic { --iw: 315; --x: 170; --y: 0; --w: 122; --h: 80; position: absolute; left: 170px; top: 59px; width: 122px; }

/* ── 협력사 ── */
.partner { padding: 50px 0 30px; background: #fff; }
.partner .wrap {
	width: 983px; display: flex; align-items: center;
	border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
}
.partner h2 { flex: none; width: 140px; margin: 0; padding-left: 4px; font: 700 10px/1 var(--font); color: #444; letter-spacing: -.2px; }
.partner h2 small { font: 700 9px/1 Tahoma, Verdana, sans-serif; color: #666; letter-spacing: 0; }
.logos { flex: 1; display: flex; }
.logos .crop { --iw: 983; --y: 2; --h: 38; }
.logos .crop:nth-child(1) { --x: 140; --w: 398; flex: 398; }
.logos .crop:nth-child(2) { --x: 538; --w: 445; flex: 445; }

/* ── 바닥 ── */
.footer { background: #fff; padding-bottom: 30px; }
/* 동그라미 그림 왼쪽 끝을 위 「파트너사」 글자와 한 줄로 (2026-11-08) —
   협력사 칸(983px)이 바닥 칸(1010px)보다 27px 좁아 가운데에서 13.5px 안쪽 + 글자 들여쓰기 4px = 17.5px.
   오른쪽 회사 정보 칸 자리는 그대로(17.5 + 192.5 = 예전 24 + 186) */
.footer .wrap { display: flex; align-items: center; padding: 26px 0 0 17.5px; }
.f-logo { display: flex; align-items: center; gap: 15px; width: 192.5px; flex: none; }
/* 원본 그림(main_copyright)에서 동그라미만 — 왼쪽 빈칸 없이 x 29 부터 36px */
.f-logo .crop { --iw: 1010; --x: 29; --y: 36; --w: 36; --h: 48; width: 36px; flex: none; }
.f-logo b { display: block; font-size: 17px; font-weight: 700; color: #4a4a4a; letter-spacing: -.5px; }
.f-logo small { display: block; font-size: 11.5px; color: #8d8d8d; letter-spacing: 1.2px; }
.f-info { border-left: 1px solid #e3e3e3; padding: 4px 0 4px 24px; }
.f-links { display: flex; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: #333; }
.f-links a + a::before { content: "|"; margin: 0 8px; color: #555; font-weight: 400; }
.f-links a:hover { text-decoration: underline; }
.f-info address { margin-top: 9px; font-style: normal; font-size: 11px; line-height: 16px; color: #666; }
.f-info address span { white-space: nowrap; }
.copy { font: 700 8.5px/1 Verdana, Tahoma, sans-serif; letter-spacing: .4px; color: #444; }

/* ────────── 휴대폰 · 태블릿 (폭 1009px 이하) ────────── */
@media (max-width: 1009px) {
	.wrap { width: auto; }
	.header .wrap { padding-top: 92px; }
	.logo { left: 12px; }
	.util { right: 14px; top: 10px; font-size: 12px; }
	/* 메뉴는 남색 띠 자리에 칸으로 */
	.gnb {
		position: static; display: grid; grid-template-columns: repeat(6, 1fr);
		background: var(--navy);
	}
	.gnb a {
		padding: 0; text-align: center; line-height: 46px;
		font-size: 14.5px; color: #fff; border-top: 1px solid rgba(255, 255, 255, .12);
	}
	.gnb a + a::before { top: 16px; height: 14px; border-color: rgba(255, 255, 255, .25); }
	.gnb a:hover { color: #ffd21f; }
	/* 폰 · 태블릿은 남색 띠 위라 #0356B2 가 안 보여서 들어와 있는 메뉴 · 누르는 순간도 노랑 */
	.gnb a:active, .gnb a.on { color: #ffd21f; }
	.gnb a:last-child { padding-right: 0; }
	.header { height: auto; }

	.hero-text { height: auto; padding: 46px 16px 18px; }
	.ribbon { left: 16px; top: 0; }
	.sun { left: auto; right: 6px; top: 4px; width: 70px; height: 70px; }
	.slogan { position: static; font-size: 25px; }
	.brand { position: static; margin-top: 12px; flex-wrap: wrap; row-gap: 2px; white-space: normal; }
	.brand b { font-size: 25px; }
	.brand a { font-size: 27px; }
	.reserve { position: static; width: auto; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
	.reserve strong { position: static; font-size: 20px; letter-spacing: 4px; }

	.lower .wrap {
		display: flex; flex-direction: column; gap: 28px; height: auto;
		max-width: 640px; margin: 0 auto; padding: 22px 16px 0;
	}
	.notice { padding: 0; }
	.notice h2 { font-size: 13px; }
	.more { font-size: 11px; padding: 4px 0 4px 10px; }
	.notice ul { margin: 10px 0 0; border-top: 1px solid #ececec; }
	.notice li { font-size: 14px; line-height: 1.4; padding: 10px 0 10px 14px; border-bottom: 1px solid #f0f0f0; }
	.notice li::before { top: 10px; }

	.quick { margin: 0 auto; width: 324px; max-width: 100%; }
	.quick span { font-size: 13px; }

	.cs { padding: 0; min-height: 150px; }
	.cs h2 { font-size: 17px; }
	.cs h2 small { font-size: 10px; }
	.talk { left: auto; right: 0; top: -4px; }
	.cs-big { font-size: 32px; margin-top: 16px; }
	.cs dl { grid-template-columns: 72px auto; margin-top: 10px; }
	.cs dt, .cs dd { font-size: 15px; line-height: 1.7; }
	.cs .sms-btn {
		display: inline-block; margin-left: 6px; padding: 0 10px; border: 1px solid #1c2a77; border-radius: 12px;
		font: 700 12.5px/22px var(--font); color: #1c2a77; vertical-align: 1px;
	}
	.cs p { font-size: 13px; }
	/* 폰: 야간상담 옆 「문자」 단추와 겹치지 않게 전화기 그림을 조금 작게 */
	.phone-pic { left: auto; right: 0; top: 54px; width: 72px; }

	.partner { padding: 34px 16px 22px; }
	.partner .wrap { width: auto; max-width: 640px; margin: 0 auto; flex-direction: column; align-items: stretch; padding: 10px 0 6px; }
	.partner h2 { width: auto; padding: 0 0 8px; font-size: 12px; }
	.partner h2 small { font-size: 10px; }
	.logos { flex-direction: column; gap: 6px; }
	.logos .crop { flex: none; }
	.logos .crop:nth-child(1) { width: 89.4%; margin: 0 auto; }

	.footer .wrap {
		flex-direction: column; align-items: flex-start; gap: 14px;
		/* 672 = 협력사 칸 640 + 양옆 16 — 태블릿에서도 동그라미가 「파트너사」 글자와 한 줄 */
		max-width: 672px; margin: 0 auto; padding: 22px 16px 0; border-top: 1px solid #e6e6e6;
	}
	.f-info { border-left: 0; padding: 0; }
	.f-links { font-size: 13px; gap: 6px 16px; }
	.f-links a + a::before { display: none; }
	.f-info address { font-size: 12px; line-height: 1.6; }
	.f-info address span { white-space: normal; }
}
@media (max-width: 639px) {
	.gnb { grid-template-columns: repeat(3, 1fr); }
	.gnb a:nth-child(4)::before { display: none; }
}
@media (max-width: 349px) {
	/* 아주 작은 폰: 전화기 그림이 「문자」 단추와 겹쳐서 숨긴다 */
	.phone-pic { display: none; }
}
@media (max-width: 380px) {
	.reserve { flex-direction: column; align-items: flex-start; }
}

/* ══════════ 하위 쪽 ══════════ */
body.sub { background: #fff url(images/sub_01_top_bg2.jpg) repeat-x 0 0; }
.sub-visual { height: 182px; color: #fff; }
.sub-visual .slogan { top: 71px; }
/* 원본 머리 그림(sub_01_top_bg3)에서 글자 없는 오른쪽(도시·마우스·모니터)만 — 왼쪽 끝은 흐리게 이어 붙인다 */
.sv-pic {
	--iw: 1010; --x: 330; --y: 120; --w: 680; --h: 154;
	position: absolute; right: 0; bottom: 0; width: 680px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 120px);
	mask-image: linear-gradient(to right, transparent 0, #000 120px);
}

.sub-body {
	display: grid; grid-template-columns: 182px 760px; column-gap: 36px;
	grid-template-areas: "snb main" "ban main"; grid-template-rows: auto 1fr;
	padding: 0 0 70px 32px; background: #fff;
}
.loc { position: absolute; right: 25px; top: 9px; font-size: 11px; color: #888; letter-spacing: -.3px; }
.loc a:hover { color: var(--ink); }
.loc i { font-style: normal; margin: 0 5px; color: #aaa; }
.loc b { color: #333; }

.snb { grid-area: snb; }
.snb h2 {
	width: 193px; margin: 0; padding: 40px 0 14px 3px;
	font-size: 21px; line-height: 26px; font-weight: 700; color: #3a3a3a; letter-spacing: -1px;
	border-bottom: 2px solid #5a5a5a;
}
.snb nav { margin-top: 22px; }
.snb nav a {
	display: flex; align-items: center; justify-content: space-between;
	height: 31px; padding: 0 14px 0 16px; border-bottom: 1px solid #e3e3e3;
	font-size: 12.5px; font-weight: 700; color: #555; letter-spacing: -.3px;
}
.snb nav a:hover { color: var(--navy); }
.snb nav a.on { background: linear-gradient(#2b3c94, #1c2a77); color: #fff; border-bottom-color: #1c2a77; }
.snb nav a.on::after { content: "\203A"; font-size: 17px; font-weight: 400; }

.ban { grid-area: ban; width: 181px; padding-top: 44px; }
.ban-btn {
	display: flex; align-items: center; gap: 10px; height: 52px; margin-bottom: 8px; padding: 0 12px 0 14px;
	border: 1px solid #d2d2d2; border-radius: 4px; background: linear-gradient(#fff, #f1f1f1);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.ban-btn:hover { border-color: var(--navy); }
.ban-btn .crop { flex: none; }
.ban-btn b { display: block; font-size: 14px; line-height: 18px; color: #555; letter-spacing: 1px; }
.ban-btn b::after { content: " \203A"; letter-spacing: 0; font-size: 13px; color: #666; }
.ban-btn small { display: block; font-size: 9.5px; line-height: 13px; color: #a0a0a0; letter-spacing: -.3px; }
.callc { margin-top: 26px; }
.callc h3 {
	display: flex; align-items: center; gap: 6px; margin: 0;
	font: 400 14px/1 Arial, Helvetica, sans-serif; color: #444; letter-spacing: .5px;
}
.callc h3::after { content: ""; flex: 1; border-top: 1px solid #cfcfcf; }
.callc-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.callc-row .crop { width: 44px; flex: none; }
.callc-row a { display: block; font: 700 19px/1 Arial, Helvetica, sans-serif; color: #f2650f; letter-spacing: .3px; }
.callc-row small { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #555; letter-spacing: -.6px; }
.callc .map { margin-top: 6px; }

.content { grid-area: main; min-width: 0; }
.ptitle {
	display: flex; align-items: center; gap: 7px; margin: 0; padding: 40px 0 14px;
	font-size: 18px; line-height: 26px; font-weight: 400; color: #333; letter-spacing: -.5px;
	border-bottom: 1px solid #dcdcdc;
}
.ptitle::before { content: ""; width: 3px; height: 18px; background: linear-gradient(#4a68d0, #1c2a77); }
.cbox {
	margin-top: 18px; padding: 34px 22px 30px;
	border: 1px solid #e8e8e8; border-bottom: 0; border-radius: 12px 12px 0 0;
	font-size: 12.5px; line-height: 1.75; color: #555;
}
.cbox p { margin: 0 0 12px; }
.blue, .cbox .blue { color: #2366c4; }
.red, .cbox .red { color: #d0302a; }
.cbox strong { color: #333; }
.h4 {
	display: flex; align-items: center; gap: 7px; margin: 30px 0 10px;
	font-size: 14px; line-height: 1.4; font-weight: 700; color: #333; letter-spacing: -.3px;
}
.h4:first-child { margin-top: 0; }
.h4::before {
	content: ""; flex: none; width: 11px; height: 11px; border-radius: 2px;
	background: linear-gradient(135deg, #59a9f2, #1f6fc9);
}
.h4 small { font-size: 11px; font-weight: 400; color: #888; }
.intro { font-weight: 400; color: #555; font-size: 13px; }
.intro b { color: #2366c4; }

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.5; text-align: center; color: #555; }
.tbl th, .tbl td { padding: 5px 6px; border: 1px solid #dadada; }
.tbl th { background: #efefef; color: #444; font-weight: 700; }
.tbl .sum td { font-weight: 700; color: #333; }
.tbl .l { text-align: left; padding-left: 10px; }
.tbl .ask { font-weight: 700; letter-spacing: 6px; }
.price .c1 { width: 9%; }
.price .c2 { width: 21%; }
.price .c4 { width: 16%; }
/* 요금 칸만 줄바꿈 금지 — 위 칸과 합쳐져 수리내역만 남은 줄(:only-child)은 빼고 */
.price td:last-child:not(:only-child):not([colspan]) { white-space: nowrap; }
.tbl-note { margin: 8px 0 0; font-size: 12px; color: #666; }

.notes { margin-top: 18px; }
.notes li { position: relative; padding-left: 17px; font-size: 12px; line-height: 1.9; }
.notes li::before {
	content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 2px;
	background: linear-gradient(135deg, #59a9f2, #1f6fc9);
}
.notes.dot li::before { width: 6px; height: 6px; top: .75em; left: 3px; border-radius: 50%; background: #2f8be6; }
.qa h5 { position: relative; margin: 16px 0 4px; padding-left: 13px; font-size: 12.5px; color: #333; }
.qa h5::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #2f8be6; }
.qa p { margin: 0; padding-left: 13px; font-size: 12px; color: #666; }

.media { display: flex; gap: 26px; align-items: flex-start; }
.media > .crop { flex: none; }
.board { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 16px; }
.board iframe { display: block; width: 690px; height: 450px; margin: 0 auto; border: 0; background: transparent; }
.terms {
	height: 520px; overflow: auto; padding: 14px 16px;
	border: 1px dotted #bbb; font-size: 12px; line-height: 1.7; color: #666; white-space: pre-line;
}
.privacy-box { padding: 12px 14px; border: 1px solid #e3e3e3; font-size: 12px; }
.privacy-box .scroll { height: 140px; overflow: auto; margin: 8px 0; padding-right: 6px; }
.privacy-box h6 { margin: 12px 0 6px; padding: 5px 10px; border-radius: 3px; background: #8fb4d4; color: #fff; font-size: 12px; font-weight: 400; }
.privacy-box label { color: #bd4d4c; font-weight: 700; cursor: pointer; }

/* 쪽별 */
.tbl .part { font-weight: 700; color: #444; }
.tbl-wrap.gap { margin-top: 12px; }
.caution { margin: 14px 0 6px; font-size: 13px; color: #555; }
.caution::before { content: "\26A0"; margin-right: 5px; color: #f2a200; }
.steps { margin: 6px 0 0; padding-left: 34px; font-size: 12px; line-height: 1.85; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; position: relative; }
.steps li::before { content: counter(step); position: absolute; left: -22px; top: .35em; width: 14px; height: 14px; border: 1px solid #777; border-radius: 50%; font-size: 9px; line-height: 13px; text-align: center; }

.about { gap: 30px; }
.about-quote { margin: 0 0 18px; font-size: 19px; line-height: 1.4; color: #333; letter-spacing: -.5px; }
.policy { margin: 18px 0 0; display: grid; grid-template-columns: 130px 1fr; border-top: 1px dotted #ccc; }
.policy dt, .policy dd { padding: 14px 0; border-bottom: 1px dotted #ccc; }
.policy dt { padding-left: 16px; font-weight: 700; color: #2366c4; }
.policy dt::before { content: "\25E5"; margin-right: 4px; font-size: 9px; }
.policy dd { margin: 0; }
.policy ol { margin: 0; padding-left: 18px; }
.about-end { margin-top: 18px; }
.sign { display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-size: 11px; color: #555; }

.map-frame { margin-bottom: 26px; border: 8px solid #f2f2f2; outline: 1px solid #e2e2e2; }
.info-tbl { width: 100%; border-collapse: collapse; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 12px; }
.info-tbl th, .info-tbl td { padding: 5px 10px; border-bottom: 1px solid #e6e6e6; text-align: left; }
.info-tbl th { width: 95px; font-weight: 400; color: #666; white-space: nowrap; }
.info-tbl th::before { content: "\2022"; margin-right: 8px; color: #e05050; }
.info-tbl td { border-left: 1px solid #ddd; }
.map-link { float: right; font-weight: 700; color: #333; }
.map-link:hover { text-decoration: underline; }
.way { display: flex; align-items: center; gap: 8px; margin: 22px 0 6px; font-size: 15px; font-weight: 400; color: #444; }
.line5 { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: #8b3fa0; color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.line5-t { color: #8b3fa0; }
.store-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.store-photos img { width: 100%; height: auto; border: 1px solid #e2e2e2; border-radius: 4px; }

/* 오시는길(카카오맵) — 왼쪽 메뉴 없는 한 칸 쪽, 첫 화면 아이콘으로 들어온다 (2026-11-08) */
.sub-body.one { grid-template-columns: 760px; grid-template-areas: "main"; justify-content: center; padding: 0 0 70px; }
.find-map { border: 1px solid #dcdcdc; }
/* 카카오가 그리는 지도 칸을 우리 칸 폭에 맞춘다(만들 때 정한 714 × 400 을 덮어씀) */
.find-map .root_daum_roughmap { width: 100% !important; }
.find-map .root_daum_roughmap .wrap_map { height: 400px !important; }
.find-btn {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	/* 폭은 위 지도 칸과 같게(사용자 「지도하고 크기 맞춰줘」) */
	height: 66px; margin: 24px 0 0; border-radius: 14px;
	/* 색 #0457B3 (2026-11-08 사용자 — #142C76 에서 바꿈) */
	background: #0457b3; color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -.5px;
	box-shadow: 0 4px 0 #023a78, 0 8px 18px rgba(0, 0, 0, .2);
}
.find-btn:hover { background: #0a66cc; }
.find-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #023a78, 0 3px 8px rgba(0, 0, 0, .2); }
.find-btn svg { flex: none; }

.net { align-items: center; margin-bottom: 26px; }
.net > .crop { border-radius: 4px; }
.net-q { margin: 0 0 4px; font-size: 18px; color: #1d8ad6; letter-spacing: -.5px; }
.net-lead p { margin: 0; }

.process { display: grid; grid-template-columns: 1fr 120px 1.2fr; align-items: center; gap: 10px; margin-bottom: 10px; }
.pbox { padding: 16px 18px; border: 1px solid #cfcfcf; border-radius: 8px; background: linear-gradient(#fff, #f3f3f3); color: #555; }
.pbox .notes { margin: 0; }
.parrows { display: flex; flex-direction: column; gap: 10px; }
.parrows span {
	display: block; padding: 8px 18px 8px 10px; font-size: 11px; color: #666; text-align: center;
	border: 1px solid #ccc; border-right: 0; background: #fff;
	clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
}

.voice { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.voice .h4 { margin: 0; }
.rate { padding: 4px 12px; border: 1px solid #ddd; border-radius: 3px; font-size: 11px; color: #666; }
.rate b { margin-left: 4px; font: 900 14px/1 Arial, sans-serif; color: #1ec800; }

.nospam-head { display: flex; align-items: center; gap: 20px; max-width: 400px; white-space: nowrap; margin: 22px 0 26px; padding-bottom: 12px; border-bottom: 1px solid #ccc; }
.nospam-head p { margin: 0; font-size: 20px; color: #333; }
.nospam p { margin: 0 0 12px; font-size: 12px; }
.nospam .posted { margin-top: 26px; }
.nospam .posted b { margin-left: 26px; color: #333; }

@media (max-width: 1009px) {
	.sub-visual { height: auto; }
	.policy { grid-template-columns: 1fr; }
	.policy dt { padding-bottom: 4px; border-bottom: 0; }
	.policy dd { padding-top: 0; }
	.process { grid-template-columns: 1fr; }
	.parrows { flex-direction: row; justify-content: center; }
	.parrows span { clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); padding: 6px 14px 12px; border: 1px solid #ccc; border-bottom: 0; }
	.about-quote { font-size: 18px; }
	.map-frame { border-width: 4px; }
	.map-link { float: none; display: inline-block; margin-top: 4px; }
	.store-photos { grid-template-columns: 1fr; gap: 10px; }
	.nospam p { font-size: 14px; }
	.sub-visual .ribbon { top: 0; left: 14px; z-index: 1; }
	.sub-visual .ribbon i { width: 10px; height: 26px; }
	.sub-visual .slogan { position: absolute; top: 36%; left: 14px; font-size: 17px; z-index: 1; }
	.about > .crop { width: 180px !important; }
	.sv-pic { position: relative; width: 100%; -webkit-mask-image: none; mask-image: none; }

	.sub-body {
		grid-template-columns: minmax(0, 1fr); grid-template-areas: "snb" "main" "ban"; grid-template-rows: auto;
		max-width: 760px; margin: 0 auto; padding: 0 16px 40px;
	}
	.sub-body.one { grid-template-columns: minmax(0, 1fr); padding: 0 16px 40px; }
	.find-map .root_daum_roughmap .wrap_map { height: 320px !important; }
	.find-btn { height: 62px; margin-top: 20px; font-size: 21px; }
	.loc { display: none; }
	.snb h2 { display: none; }
	.snb nav { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
	.snb nav a { height: 34px; padding: 0 14px; border: 1px solid #d6d6d6; border-radius: 17px; font-size: 13.5px; }
	.snb nav a.on { border-color: #1c2a77; }
	.snb nav a.on::after { display: none; }
	.ptitle { padding-top: 16px; font-size: 20px; }
	.cbox { margin-top: 14px; padding: 18px 0 6px; border: 0; border-radius: 0; font-size: 14px; }
	.h4 { font-size: 15.5px; }
	.notes li, .qa p { font-size: 13.5px; line-height: 1.75; }
	.qa h5 { font-size: 14px; }
	.tbl { font-size: 12.5px; }
	.tbl.wide { min-width: 560px; }
	.price .c1 { width: 10%; }
	.price .c2 { width: 20%; }
	.price .c4 { width: auto; }
	.price th, .price td { padding: 5px 4px; }
	.media { flex-direction: column; gap: 14px; }
	.media > .crop { max-width: 100%; }
	.terms { height: 60vh; font-size: 13px; }

	.ban { width: auto; padding-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.ban-btn { margin: 0; padding: 0 8px 0 10px; gap: 8px; }
	.callc { grid-column: 1 / -1; margin-top: 10px; }
	.callc-row a { font-size: 24px; }
	.callc .map { display: none; }
}
@media (max-width: 359px) {
	.ban { grid-template-columns: 1fr; }
}

/* ══════════ 게시판 · 서비스신청 · 관리 화면 ══════════ */
.bd-msg { min-height: 1.4em; margin: 8px 0 0; color: #c62f2f; font-size: 13px; }
.bd-msg:empty { min-height: 0; margin: 0; }
.bd-empty { padding: 30px 0; text-align: center; color: #888; }
.bd-table { width: 100%; margin-top: 16px; border-collapse: collapse; border-top: 2px solid #8a8a8a; font-size: 12.5px; }
.bd-table th { padding: 8px 6px; background: #f3f3f3; border-bottom: 1px solid #d5d5d5; color: #444; font-weight: 700; }
.bd-table td { padding: 8px 6px; border-bottom: 1px solid #e6e6e6; text-align: center; color: #666; }
.bd-table .bd-title { text-align: left; }
.bd-table .bd-title a { color: #333; }
.bd-table .bd-title a:hover { text-decoration: underline; }
.bd-no { width: 52px; }
.bd-name { width: 90px; }
.bd-date { width: 90px; }
.bd-hits { width: 52px; }
.bd-tag { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid #c8c8c8; border-radius: 3px; font-size: 10.5px; line-height: 16px; color: #777; vertical-align: 1px; }
.bd-tag.ok { border-color: #2f8be6; color: #2f8be6; }
.bd-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.bd-pages { display: flex; gap: 4px; margin-right: auto; font-size: 12px; }
.bd-pages a, .bd-pages b { min-width: 26px; padding: 3px 6px; border: 1px solid #ddd; text-align: center; }
.bd-pages b { border-color: #1c2a77; background: #1c2a77; color: #fff; }
.bd-btn {
	display: inline-block; padding: 6px 14px; border: 1px solid #c5c5c5; border-radius: 3px;
	background: linear-gradient(#fff, #f0f0f0); color: #444; font: inherit; font-size: 12.5px; cursor: pointer;
}
.bd-btn:hover { border-color: #1c2a77; }
.bd-btn.primary { border-color: #1c2a77; background: #1c2a77; color: #fff; }
.bd-btn:disabled { opacity: .5; cursor: default; }

.bd-read { margin-top: 16px; border-top: 2px solid #8a8a8a; }
.bd-read-title { margin: 0; padding: 12px 4px 6px; font-size: 16px; color: #333; }
.bd-meta { margin: 0; padding: 0 4px 10px; border-bottom: 1px solid #e3e3e3; font-size: 12px; color: #888; }
.bd-meta b { color: #555; }
.bd-content { padding: 16px 4px; white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.8; color: #444; }
.bd-file { margin: 0; padding: 8px 4px; border-top: 1px dotted #ddd; font-size: 12.5px; }
.bd-file a { color: #2366c4; text-decoration: underline; }
.bd-reply { margin: 6px 0 0; padding: 4px 14px; border: 1px solid #d6e6f6; border-radius: 6px; background: #f5f9fd; }
.bd-reply-head { margin: 8px 0 0; font-size: 12px; color: #888; }
.bd-reply-head b { color: #2366c4; }
.bd-reply .bd-content { padding-top: 6px; }

.bd-form { margin-top: 16px; max-width: 640px; }
.bd-field { display: block; margin-bottom: 12px; }
.bd-label { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 700; color: #444; }
.bd-field small { display: block; margin-top: 3px; font-size: 11.5px; color: #888; }
.bd-form input:not([type=checkbox]), .bd-form textarea, .bd-del input {
	width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 3px;
	font: inherit; font-size: 14px; color: #333; background: #fff;
}
.bd-form input:focus, .bd-form textarea:focus { outline: 2px solid #9db3e8; border-color: #1c2a77; }
.bd-note { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid #2f8be6; background: #f5f9fd; font-size: 12px; color: #555; }
.bd-agree { margin: 4px 0 8px; padding: 10px 12px; border: 1px solid #e3e3e3; font-size: 12px; color: #666; }
.bd-agree p { margin: 0 0 6px; }
.bd-agree label { font-weight: 700; color: #bd4d4c; cursor: pointer; }
.bd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bd-del { max-width: 320px; margin-top: 10px; }
.bd-done { margin-top: 20px; padding: 26px 20px; border: 1px solid #d6e6f6; border-radius: 8px; background: #f5f9fd; text-align: center; font-size: 13.5px; }
.bd-done p { margin: 6px 0; }
.bd-done-big { font-size: 18px; font-weight: 700; color: #1c2a77; }
.bd-done a { color: #f2650f; font-weight: 700; }

.admin-body { display: block; padding-left: 32px; padding-right: 32px; }
.adm-login { max-width: 320px; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-bottom: 10px; border-bottom: 1px solid #ddd; }
.adm-tab { padding: 8px 14px; border: 1px solid #ccc; border-radius: 4px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.adm-tab.on { border-color: #1c2a77; background: #1c2a77; color: #fff; }
.adm-out { margin-left: auto; padding: 8px 12px; border: 0; background: none; color: #888; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.adm-area { margin-top: 12px; }
.adm-card { margin-bottom: 10px; padding: 12px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; }
.adm-card.done { background: #f6f6f6; color: #999; }
.adm-card p { margin: 0 0 4px; }
.adm-card a { color: #2366c4; }
.adm-head b { color: #333; }
.adm-card .bd-content { padding: 8px 0; }
.adm-write { margin-bottom: 14px; padding: 10px 14px; border: 1px dashed #bbb; border-radius: 6px; }
.adm-write summary { cursor: pointer; font-weight: 700; color: #1c2a77; }

@media (max-width: 1009px) {
	.bd-table { font-size: 13.5px; }
	.bd-table thead { display: none; }
	.bd-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 2px; border-bottom: 1px solid #e6e6e6; }
	.bd-table td { padding: 0; border: 0; text-align: left; }
	.bd-table .bd-no, .bd-table .bd-hits { display: none; }
	.bd-table .bd-title { grid-column: 1 / -1; font-size: 15px; }
	.bd-table .bd-name, .bd-table .bd-date { width: auto; font-size: 12.5px; color: #999; }
	.bd-table .bd-date { text-align: right; }
	.bd-table .bd-empty { grid-column: 1 / -1; text-align: center; }
	.bd-content { font-size: 14.5px; }
	.bd-read-title { font-size: 18px; }
	.bd-btn { padding: 9px 16px; font-size: 14px; }
	.bd-form input:not([type=checkbox]), .bd-form textarea { font-size: 16px; }
	.admin-body { padding: 0 16px 40px; }
}