@charset "UTF-8";
/*
 * 캠프 사이트 셸·정적 화면 (M5 배치1, Figma 05 — Sub Title Bar 29:220 · Camp Footer 29:492 ·
 * D3-서브① 31:3220 · G-02 151:20653 · G-03 152:21261 · G-04 152:21405 · G-05 153:21552).
 *
 * 로드: siteHeader.jsp 가 IS_PORTAL_SITE 가 아닐 때만 싣는다 — 포털 화면은 이 파일을 받지 않는다.
 * 그래서 같은 JSP(FAQ·언론보도·약관)가 포털에서도 렌더돼도 포털 모양은 그대로다.
 * 선택자는 전부 camp- 접두 클래스 아래로 한정한다(기존 layout.css 클래스와 겹치지 않게).
 * 색은 테마 토큰(var(--c-*), SiteThemeService.toCssVars)만 쓴다 — 폴백 값은 NATURE_A(Figma 기본).
 * --c-text-muted·--c-on-primary 는 아직 TOKEN_MAP 에 없어 --c-text·white 로 떨어진다(시안 기본값과 같다).
 */

/* ── 공통 폭 — 시안 1280 프레임의 좌우 80 여백 = 본문 1120 ─────────────────── */
.camp-subbar-inner,
.camp-page,
.camp-footer-inner {
	max-width: 1120px;
	margin: 0 auto;
	box-sizing: content-box;
}

/* ── Sub Title Bar (29:220) ─────────────────────────────────────────────── */
.camp-subbar {
	background: var(--c-surface, #f5f7ef);
	background-size: cover;
	background-position: center;
	padding: 48px 80px 0;
}
.camp-subbar-inner { display: flex; flex-direction: column; gap: 8px; }
.camp-subbar-crumb { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--c-text-muted, var(--c-text, #494949)); }
.camp-subbar-crumb li + li::before { content: "\203A"; margin: 0 4px; }
.camp-subbar-title { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.3; color: var(--c-text-strong, #3c3c3c); }
.camp-subbar-tabs { display: flex; gap: 28px; margin: 0; padding: 20px 0 0; list-style: none; overflow-x: auto; }
.camp-subbar-tabs .lnk {
	display: block; padding-bottom: 14px; border-bottom: 3px solid transparent;
	font-size: 16px; font-weight: 500; white-space: nowrap; color: var(--c-text-muted, var(--c-text, #494949));
}
.camp-subbar-tabs .lnk.active { font-weight: 700; color: var(--c-text-strong, #3c3c3c); border-bottom-color: var(--c-primary, #0c5a49); }
.camp-subbar-tabs .icon-window { margin-left: 4px; font-size: 12px; }
/* 대메뉴 비주얼 이미지가 걸린 경우 — 사진 위 글자라 흰색 + 어둡게 깐다. */
.camp-subbar.has-visual { position: relative; }
.camp-subbar.has-visual::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.camp-subbar.has-visual .camp-subbar-inner { position: relative; }
.camp-subbar.has-visual .camp-subbar-crumb,
.camp-subbar.has-visual .camp-subbar-title,
.camp-subbar.has-visual .camp-subbar-tabs .lnk { color: #fff; }

/* ── 본문 영역 (content: pt48 · pb80 · gap24) ─────────────────────────────── */
.camp-page { display: flex; flex-direction: column; gap: 24px; padding: 48px 80px 80px; color: var(--c-text, #494949); }
.camp-card {
	display: flex; flex-direction: column; gap: 14px; padding: 20px;
	background: var(--c-bg, #fbfcf8); border: 1px solid var(--c-border, #d7d7d7); border-radius: 12px;
}

/* D3-서브① 이용안내(html_page) — 본문은 관리자가 채운다. 제목·목록·표의 기본값과 정보 카드만 제공.
   정보 카드: <div class="camp-info-cards"><div><p>입실</p><p>14:00부터</p></div>…</div> */
.camp-page-html h2, .camp-page-html h3 { margin: 0; font-size: 24px; font-weight: 700; color: var(--c-text-strong, #3c3c3c); }
.camp-page-html p, .camp-page-html li { font-size: 16px; line-height: 1.7; }
.camp-page-html table { width: 100%; border-collapse: collapse; font-size: 13px; }
.camp-page-html th { padding: 10px 12px; text-align: left; font-weight: 700; background: var(--c-surface, #f5f7ef); border-bottom: 1px solid var(--c-border, #d7d7d7); }
.camp-page-html td { padding: 12px; border-bottom: 1px solid var(--c-border, #d7d7d7); }
.camp-info-cards { display: flex; gap: 16px; }
.camp-info-cards > div { flex: 1 0 0; display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--c-surface, #f5f7ef); border-radius: 16px; }
.camp-info-cards > div > p { margin: 0; }
.camp-info-cards > div > p:first-child { font-size: 14px; font-weight: 500; color: var(--c-text-muted, var(--c-text, #494949)); }
.camp-info-cards > div > p:last-child { font-size: 22px; font-weight: 700; color: var(--c-text-strong, #3c3c3c); }

/* G-02 FAQ — 분류 칩 + 아코디언(기존 board-faq 마크업·frontJS.faq 그대로) */
.camp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.camp-chips-label { font-size: 13px; font-weight: 700; color: var(--c-text-muted, var(--c-text, #494949)); }
.camp-chip {
	display: inline-flex; align-items: center; height: 36px; padding: 0 14px; box-sizing: border-box;
	font-size: 14px; font-weight: 500; color: var(--c-text, #494949);
	background: var(--c-surface, #f5f7ef); border: 1px solid var(--c-border, #d7d7d7); border-radius: 999px;
}
.camp-chip.is-selected { background: var(--c-primary, #0c5a49); border-color: var(--c-primary, #0c5a49); color: var(--c-on-primary, #fff); }
.camp-faq .board-faq { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--c-bg, #fbfcf8); border: 1px solid var(--c-border, #d7d7d7); border-radius: 12px; }
.camp-faq .board-faq-item { padding: 16px 0; border: 0; border-bottom: 1px solid var(--c-border, #d7d7d7); }
.camp-faq .board-faq-question { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0; }
.camp-faq .board-faq-question::after { content: "+"; font-size: 18px; font-weight: 700; color: var(--c-text-muted, var(--c-text, #494949)); }
.camp-faq .board-faq-question.active::after { content: "\2212"; }
.camp-faq .board-faq-mark { display: none; }
.camp-faq .board-faq-title { display: flex; align-items: center; gap: 8px; }
.camp-faq .board-title { font-size: 16px; font-weight: 700; color: var(--c-text-strong, #3c3c3c); }
.camp-faq .board-title::before { content: "Q. "; }
.camp-faq .board-faq-answer { margin-top: 8px; padding: 12px 16px; background: var(--c-surface, #f5f7ef); border-radius: 8px; }
.camp-faq .board-faq-answer .board-col { padding: 0; }
.camp-faq .board-desc { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; color: var(--c-text, #494949); }

/* G-04 언론보도 — 한 카드 안의 행 목록(썸네일은 수집원이 이미지를 주지 않아 없다) */
.camp-media .media-cards { gap: 0; padding: 8px 20px; background: var(--c-bg, #fbfcf8); border: 1px solid var(--c-border, #d7d7d7); border-radius: 12px; }
.camp-media .media-card { padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--c-border, #d7d7d7); border-radius: 0; box-shadow: none; }
.camp-media .media-card:last-child { border-bottom: 0; }
.camp-media .media-card .m-head { order: 2; margin: 6px 0 0; }
.camp-media .media-card { display: flex; flex-direction: column; }
.camp-media .media-card .m-title { order: 1; font-size: 17px; font-weight: 700; color: var(--c-text-strong, #3c3c3c); }
.camp-media .media-card .m-source { font-size: 14px; color: var(--c-text-muted, var(--c-text, #494949)); }
.camp-media .media-card .m-snippet { order: 3; font-size: 14px; }
.camp-media .media-card:hover .m-title { color: var(--c-primary, #0c5a49); }

/* G-03 오시는 길 */
.camp-way-map { width: 100%; height: 360px; background: #e6ece8; border-radius: 16px; overflow: hidden; }
.camp-way-rows { display: flex; flex-direction: column; gap: 8px; }
.camp-way-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 15px; }
.camp-way-row dt { font-weight: 700; color: var(--c-text-strong, #3c3c3c); }
.camp-way-row dd { margin: 0; }
.camp-way-find { display: flex; gap: 8px; }
.camp-way-find .btn {
	display: inline-flex; align-items: center; height: 36px; padding: 0 14px; font-size: 14px; font-weight: 500;
	color: var(--c-text, #494949); background: var(--c-surface, #f5f7ef); border: 1px solid var(--c-border, #d7d7d7); border-radius: 999px;
}

/* G-05 정책(이용약관·개인정보처리방침) — 본문 카드 */
.camp-policy .policy-wrap { padding: 20px; background: var(--c-bg, #fbfcf8); border: 1px solid var(--c-border, #d7d7d7); border-radius: 12px; }
.camp-policy .policy-title { margin: 0 0 14px; font-size: 24px; font-weight: 700; color: var(--c-text-strong, #3c3c3c); }
.camp-policy .policy-wrap h3 { margin: 14px 0 8px; font-size: 18px; font-weight: 700; color: var(--c-text-strong, #3c3c3c); }
.camp-policy .policy-wrap p,
.camp-policy .policy-wrap li { font-size: 15px; color: var(--c-text, #494949); }

/* ── Camp Footer (29:492) — 법정 표시는 그 캠핑장 값만(CommonInterceptor → COMPANY_INFO) ─── */
/* 글자색은 on_primary(주색 버튼용)가 아니라 어두운 배경 기준 흰색 — on_primary 를 어둡게 둔 테마에서 법정 표시가 안 보이던 문제(M5 리뷰 #3) */
.camp-footer { padding: 44px 40px; background: var(--c-dark, #382f2d); color: #fff; }
.camp-footer-inner { display: flex; flex-direction: column; gap: 14px; }
.camp-footer-name { margin: 0; font-size: 18px; font-weight: 700; }
.camp-footer-legal { margin: 0; font-size: 13px; font-style: normal; line-height: 1.5; }
.camp-footer-legal p { margin: 0; }
.camp-footer-legal span + span::before { content: " \00B7 "; }
.camp-footer-links { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700; }
.camp-footer-links li + li::before { content: "\00B7"; margin: 0 6px; }
.camp-footer-links a { color: inherit; }
.camp-footer-related { font-size: 12px; }
.camp-footer-related a { color: inherit; opacity: .8; margin-right: 12px; }
.camp-footer-by { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; }
.camp-footer-by img { display: block; width: 72px; height: auto; }

/* ── 모바일 ─────────────────────────────────────────────────────────────── */
@media all and (max-width: 767px) {
	.camp-subbar { padding: 32px 16px 0; }
	.camp-subbar-title { font-size: 26px; }
	.camp-subbar-tabs { gap: 20px; padding-top: 16px; }
	.camp-page { padding: 32px 16px 56px; }
	.camp-info-cards { flex-wrap: wrap; }
	.camp-info-cards > div { flex: 1 1 calc(50% - 8px); padding: 16px; }
	.camp-info-cards > div > p:last-child { font-size: 18px; }
	.camp-way-map { height: 240px; }
	.camp-footer { padding: 32px 16px; }
}

/* ── Camp Header (22:221) — 데스크톱만(1024+). 모바일 드로어(layout.css ≤1023)는 그대로 둔다. ──
 * 높이 80 · 좌우 40 · 하단 border, 로고(업로드 36 / 없으면 이름 20 bold primary), 메뉴 16 medium gap32 가운데,
 * 우측 "with 어서자"(11px + 로고 64). 색은 테마 토큰만. */
.camp-header { background: var(--c-bg, #fbfcf8); border-bottom: 1px solid var(--c-border, #d7d7d7); }
.camp-header-with { display: none; }
@media all and (min-width: 1024px) {
	.camp-header .header-box { --header-height: 80px; max-width: none; padding: 0 40px; gap: 24px; }
	.camp-header .header-logo { flex: 0 1 auto; font-size: 20px; font-weight: 700; color: var(--c-primary, #0c5a49); white-space: nowrap; }
	.camp-header .header-logo a { color: inherit; }
	.camp-header .header-logo img { display: block; height: 36px; width: auto; }
	.camp-header .gnb { flex: 0 1 auto; margin: 0 auto; }
	.camp-header .gnb-list { justify-content: center; gap: 32px; }
	.camp-header .gnb-lnk { font-size: 16px; font-weight: 500; color: var(--c-text-strong, #3c3c3c); white-space: nowrap; }
	.camp-header .gnb-item.active .gnb-lnk { font-weight: 700; color: var(--c-primary, #0c5a49); }
	.camp-header .gnb-menu .menu-lnk { font-size: 15px; }
	.camp-header-with { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--c-text-muted, var(--c-text, #494949)); white-space: nowrap; }
	.camp-header-with img { display: block; width: 64px; height: auto; }
	.camp-header .gnb-open { flex: none; width: 28px; }
}