/**
 * /biz/ 문의 창구 공용 틀 — includes/shell.php 의 마크업과 짝이다.
 *
 * 기업 강의(챗봇) · 프로모션 · 라이브 출연 · 기타 · 미팅 예약이 **이 파일 하나**로 왼쪽 목록 · 머리글 · 칸 자리를 그린다.
 * 2026-10-30 운영자 「클릭할 때마다 창 위치/레이아웃이 조금씩 틀어져서 이질감 — 페이지마다 다르게 불러오지 말고 동일한 구조로」.
 * 그 전에는 chat.css · biz-inquiry.css · booking.css 가 같은 값을 서로 베껴 맞췄고, 1920 실측으로
 * 스크롤바 유무 20px · 머리글 위 여백 24/28 · 오른쪽 칸 x 1160/1214/1372 · 폭 600/420/388 로 갈라져 있었다.
 *
 * ⛔ 화면 CSS(chat.css · biz-inquiry.css · booking.css)에서 .bzf-* 의 자리 · 폭 · 여백을 덮지 않는다.
 *    덮는 순간 다시 화면마다 틀어진다. 칸 **안**의 내용만 각 화면이 꾸민다.
 *
 * 자리 — 모든 창구가 같다
 *   ≥1600      [왼쪽 목록 280][가운데 720 = 여백 28 + 글 692][오른쪽 나머지 ≤600 · 왼쪽 hairline]  틀 폭 min(1600, 100% - 60)
 *   1080~1599  [왼쪽 목록 280][가운데 720] — 오른쪽 칸은 가운데 칸 아래(--side-first 면 위) 가로 띠    틀 폭 min(1000, 100% - 60)
 *   ~1079      한 줄 720 — 목록은 접어서 맨 위, 그 아래 머리글 · 가운데 · 오른쪽 차례
 *   세로 — 목록 로고 · 머리글 첫 줄 · 오른쪽 칸 첫 줄이 모두 위 28(좁은 화면 머리글 20).
 *
 * 두 갈래 — 자리는 같고 「무엇이 스크롤하나」만 다르다
 *   기본    문서가 스크롤한다(폼 · 달력). 왼쪽 목록은 붙어 따라온다(sticky) — 챗봇처럼 늘 보인다.
 *   --app   화면 높이 고정(챗봇) — 가운데 · 오른쪽 칸이 각자 스크롤한다.
 *
 * 색은 --sidenav-* 6개 · 정본 회색 · 초록 사다리(css/tokens.css — 셸이 먼저 싣는다).
 */

*, *::before, *::after { box-sizing: border-box; }

/* 스크롤바 자리를 늘 비워 둔다 — 긴 폼(스크롤바 있음)과 챗봇 · 코드 화면(없음)을 오갈 때
   틀 전체가 옆으로 10px 씩 튀던 첫째 원인이다(1920 실측 스크롤바 20px).
   ⚠️ 챗봇은 html 이 overflow:hidden 이어도 stable 이면 같은 자리를 비운다. */
html { scrollbar-gutter: stable; }

.bzf-body {
	margin: 0;
	background: var(--surface-white, #FFFFFF);
	color: var(--gray-700);
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

/* 스크린리더 전용 — 「(새 창에서 열림)」 같은 보조 문구 */
.bzf-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── 틀 ─────────────────────────────────────────── */
.bzf-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "nav" "head" "main" "side";
	width: min(720px, 100%);
	margin-inline: auto;
	padding-bottom: 56px;
}

/* 오른쪽 칸을 가운데 칸 **위** 띠로(미팅 예약 담당자 — 「누구와의 미팅인지」가 달력보다 먼저다) */
.bzf-page--side-first { grid-template-areas: "nav" "head" "side" "main"; }

/* 챗봇 — 화면 높이 고정. 좁은 화면에선 오른쪽 칸(진행 단계 · FAQ)을 접는다(쌓을 아래가 없다) */
.bzf-page--app {
	grid-template-rows: auto auto minmax(0, 1fr);
	grid-template-areas: "nav" "head" "main";
	height: 100vh;
	height: 100dvh;
	padding-bottom: 0;
}

.bzf-nav  { grid-area: nav;  min-width: 0; }
.bzf-head { grid-area: head; min-width: 0; }
.bzf-main { grid-area: main; min-width: 0; padding: 24px 16px 0; }
.bzf-side { grid-area: side; min-width: 0; padding: 24px 16px 0; }

.bzf-page--app > .bzf-main { min-height: 0; padding: 0; }

@media (max-width: 1599.98px) {
	.bzf-page--app > .bzf-side { display: none; }
}

/*
 * ≥1080 — 왼쪽 목록이 옆으로 선다.
 * ⚠️ 마지막 줄을 1fr 로 둔다. 목록(약 400)이 머리글 + 본문보다 길 때 남는 높이를 **맨 아래 줄**이 받게 하려는 것이다.
 *    auto 줄만 있으면 그 높이가 머리글 줄에 나뉘어 들어가 머리글 아래 선이 화면마다 다른 자리로 내려간다.
 */
@media (min-width: 1080px) {
	.bzf-page {
		width: min(1000px, calc(100% - 60px));
		grid-template-columns: 280px minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"nav head"
			"nav main"
			"nav side";
		padding-bottom: 80px;
	}
	.bzf-page--side-first {
		grid-template-areas:
			"nav head"
			"nav side"
			"nav main";
	}
	.bzf-page--app {
		grid-template-rows: auto minmax(0, 1fr);
		grid-template-areas:
			"nav head"
			"nav main";
		padding-bottom: 0;
	}

	/* 나비와 본문 사이는 **여백 28** — 선을 긋지 않는다(2026-09-09 운영자 결정). 글은 목록 오른쪽 28 에서 시작한다 */
	.bzf-main,
	.bzf-side { padding: 24px 0 0 28px; }

	/* 챗봇 대화 칸은 말풍선 안쪽 여백 16 을 스스로 갖는다 — 12 + 16 = 28 이라 글 시작선이 같다 */
	.bzf-page--app > .bzf-main { padding: 0 0 0 12px; }
}

@media (min-width: 1600px) {
	.bzf-page,
	.bzf-page--side-first {
		width: min(1600px, calc(100% - 60px));
		grid-template-columns: 280px 720px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"nav head side"
			"nav main side";
	}
	.bzf-page--app { grid-template-rows: auto minmax(0, 1fr); }

	/* 틀은 늘 화면 높이 이상 — 내용이 짧은 화면(미팅 코드 입력)에서도 오른쪽 칸 선이 챗봇처럼 바닥까지 간다.
	   그래서 아래 여백 80 은 틀이 아니라 가운데 칸이 갖는다(틀에 두면 선이 80 위에서 끊긴다). */
	.bzf-page:not(.bzf-page--app) {
		min-height: 100vh;
		min-height: 100dvh;
		padding-bottom: 0;
	}
	.bzf-page:not(.bzf-page--app) > .bzf-main { padding-bottom: 80px; }

	/* 오른쪽 칸 — 맨 위부터 바닥까지. 가운데와의 경계는 선 한 줄(성격이 다른 두 영역) */
	.bzf-side {
		padding: 28px 40px 24px;
		border-left: 1px solid var(--gray-200);
	}
}

/* ── 왼쪽 「문의 유형」 ───────────────────────────────
   치수 · 색은 커뮤니티 · 위키 · 무료 강의 왼쪽 메뉴와 같은 --sidenav-* 6색. */
.bzf-nav {
	display: flex;
	flex-direction: column;
	/* 좁은 화면 — 펼친 목록이 본문을 다 밀어내지 않게, 넘치면 목록만 스크롤한다 */
	max-height: 60vh;
	max-height: 60dvh;
	padding: 12px 16px;
	border-bottom: 1px solid var(--gray-200);
	background: var(--surface-white, #FFFFFF);
	overflow-y: auto;
}

.bzf-nav-home { display: none; }
.bzf-nav-logo { display: block; width: 96px; height: auto; }

.bzf-nav-drop > summary { list-style: none; }
.bzf-nav-drop > summary::-webkit-details-marker { display: none; }

/* 좁은 화면 — 목록을 접는 손잡이 */
.bzf-nav-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	color: var(--gray-700);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
}

.bzf-nav-drop[open] > .bzf-nav-label { margin-bottom: 8px; }

.bzf-nav-chev {
	display: block;
	flex: none;
	margin-inline-start: auto;
	color: var(--gray-500);
	transition: transform 150ms ease;
}

.bzf-nav-drop[open] .bzf-nav-chev { transform: rotate(180deg); }

@media (min-width: 1080px) {
	.bzf-nav {
		position: sticky;
		top: 0;
		align-self: start;
		max-height: none;
		padding: 28px 0 40px;
		border-bottom: 0;
		overflow: visible;
	}
	.bzf-nav-home { display: block; align-self: flex-start; margin: 0 0 24px 11px; line-height: 0; }
	/* 넓은 화면에선 늘 펼쳐 둔다(shell.php 스크립트) — 손잡이는 라벨로만 보인다 */
	.bzf-nav-label {
		display: block;
		margin: 0 0 8px 11px;
		padding: 0;
		border: 0;
		cursor: default;
	}
	.bzf-nav-drop[open] > .bzf-nav-label { margin-bottom: 8px; }
	.bzf-nav-chev { display: none; }
}

.bzf-nav-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }

.bzf-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border-radius: 8px;
	color: var(--sidenav-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.bzf-nav-item svg { flex: none; width: 18px; height: 18px; color: var(--sidenav-icon); }

a.bzf-nav-item:hover:not(.is-active) { background: var(--sidenav-hover-bg); color: var(--sidenav-text); }
a.bzf-nav-item:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }

.bzf-nav-item.is-active { background: var(--sidenav-active-bg); color: var(--sidenav-active-text); font-weight: 700; }
.bzf-nav-item.is-active svg { color: var(--sidenav-active-icon); }

/* 잠근 창구(라이브 출연 문의) — 글자 · 아이콘을 한 값으로 같이 흐리게(2026-09-16 운영자 지시) */
.bzf-nav-item[aria-disabled="true"] { color: var(--gray-500); cursor: default; opacity: .62; }
.bzf-nav-item[aria-disabled="true"] svg { color: var(--gray-300); }

/* 「전체 문의 유형」 — 목록 **위**의 되돌아가기 줄. 항목이 아니라 길이라 한 톤 낮춘다(작은 글자 + 회색 아이콘).
   화면 링크라 마우스 올림도 흑백이다(초록은 지금 위치만). */
.bzf-nav-hub {
	margin-bottom: 6px;
	color: var(--gray-700);
	font-size: 13px;
	font-weight: 600;
}

.bzf-nav-hub svg { width: 16px; height: 16px; color: var(--gray-500); }

a.bzf-nav-item.bzf-nav-hub:hover:not(.is-active) { color: var(--gray-900); }
a.bzf-nav-hub:hover svg { color: var(--gray-700); }

/* ── 머리글 — 담당 팀 ─────────────────────────────────
     아바타 44 + [브랜드 · 창구 이름 12 초록]  ← 문서의 h1
                 [담당 팀 18 굵게 + 상태 점]
                 [한 줄 설명 12 회색]
   위 28 / 내용 / 아래 14 / hairline. 오른쪽 끝은 비어 있다(챗봇만 진행률 고리 — 넓은 화면에선 오른쪽 칸 진행 단계가 맡는다). */
.bzf-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 16px 14px;
	border-bottom: 1px solid var(--gray-200);
	background: var(--surface-white, #FFFFFF);
}

/* 선은 글 시작선(목록 오른쪽 28)에서 시작한다 — 목록 칸에 닿지 않게 */
@media (min-width: 1080px) {
	.bzf-head { margin-left: 28px; padding: 28px 16px 14px 0; }
}

.bzf-head h1,
.bzf-head p { margin: 0; }

.bzf-agent {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* 아바타 — 완전 원형을 써도 되는 자리 */
.bzf-avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 9999px;
	background: var(--primary-50) center / cover no-repeat;
	color: var(--primary-700);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.bzf-avatar--photo { color: transparent; }

.bzf-agent-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.bzf-brand {
	color: var(--primary-600);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.bzf-brand a { color: inherit; text-decoration: none; }
.bzf-brand a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bzf-brand a:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; border-radius: 2px; }

/* 담당 팀 — 머리글에서 가장 큰 글자(「무슨 창구인가」가 아니라 「누가 받는가」) */
.bzf-agent-name {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--gray-900);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.012em;
	line-height: 1.3;
}

/* 상태 — 점 + 보통 글씨. ⛔ 알약 · 테두리 배지로 되돌리지 않는다 */
.bzf-agent-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--gray-700);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
}

.bzf-agent-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 9999px; /* dot */
	background: var(--color-success, #059669);
}

/* 「아직 못 들어온다」(미팅 예약 초청 코드 전) */
.bzf-agent-status--off::before { background: var(--color-danger, #D14343); }

.bzf-sub {
	color: var(--gray-700);
	font-size: 12px;
	line-height: 1.45;
}

@media (max-width: 599.98px) {
	.bzf-avatar { width: 40px; height: 40px; font-size: 15px; }
	.bzf-agent-name { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.bzf-nav-item, .bzf-nav-chev { transition: none; }
}