/**
 * 오빠두 현장강의 문의 챗봇 — 위저드 전용 페이지 스타일 (v0.9.9, 1a 대화 + 6a 3열 셸(우측 = 진행 단계 + FAQ·커리큘럼 탭) + 8a 06 두 갈래)
 *
 * 정본: design_handoff_lecture_chat_v2/olc-reference.css (공통·1a 블록) + OlcHeader.dc.html <style>.
 * 이 페이지는 테마 CSS 를 싣지 않는 독립 문서라 v3 토큰(_ds/…/tokens.css)을 :root 에 그대로 복사한다
 * (2026-09-07 운영자 결정: 브랜드 초록도 v3 제이드 #047E57). 폰트 @font-face 는 page.php 가 인라인.
 *
 * 이식 규칙(검토 47건 확정):
 *  - .olc-app 에 container:olc / inline-size — 없으면 @container 규칙이 전부 무효
 *  - .olc-messages 의 앵커 스크롤 3속성(position/overflow-anchor/scroll-behavior)·safe-area 패딩·.olc-spacer 는 현행 이월
 *  - 완료·오류 배너는 시안의 position:fixed 대신 flex 흐름 배치(3열·safe-area·contain 문제)
 *  - 셸: 기본 720 단일 → ≥1080 은 [나비 280][여백 12][대화 708], ≥1600 은 여기에 [우측 패널 600] 이 붙는다.
 *    나비와 대화 사이는 여백만(선 없음), 대화와 우측 패널 사이는 선. 헤더 링은 ≥1600 에서만 숨긴다.
 *    페이지는 항상 100vh 고정(html·body overflow hidden) — 대화 .olc-messages 와 패널 .olc-side 가 각자 스크롤한다(2026-09-07 운영자 결정)
 *  - 우측 패널은 진행 단계 스테퍼(고정) + 탭 2개(FAQ·전체 커리큘럼)뿐 — 지표·사진·마키·후기 규칙은 두지 않는다(소개 페이지 전용)
 *  - 참조 CSS 186행 고아 블록(달력 압축 수치)은 원래 의도대로 좁은 컨테이너(<600) 쿼리 안에
 *  - [hidden] 가드를 파일 끝에 일괄 선언 — chat.js 가 hidden 속성으로 상태를 전환한다
 *  - 하드룰: pill 은 dot·아바타·링만 / 그라디언트·!important 없음 / 포커스·오류 한 겹 / 카드는 그림자, 구획은 hairline
 */

:root {
	/* v3 Deep Jade — tokens.css 발췌 */
	--primary-50: #E4EFEA;
	--primary-100: #D5E6DF;
	--primary-600: #047E57;
	--primary-700: #036546;
	--primary-800: #034C35;
	--amber-500: #C5870F;
	--gray-50: #F7F7F5;
	--gray-100: #F0F0ED;
	--gray-200: #E6E6E2;
	--gray-300: #D4D4CF;
	--gray-500: #8A8A85;
	--gray-700: #45453F;
	--gray-900: #1B1B18;
	--success: #059669;
	--success-bg: #E7F3ED;
	--success-text: var(--primary-700);
	--error: #D14343;
	--error-bg: #FBE6E6;
	--error-text: #A82F2F;
	--bg-page: var(--gray-50);
	--bg-surface: #FFFFFF;
	--control-fill: #F3F3F4;
	--fg-strong: var(--gray-900);
	--fg-on-primary: #FFFFFF;
	--hairline: 1px solid var(--gray-200);
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-pill: 9999px;
	--shadow-md: 0 1px 3px rgba(17, 17, 16, 0.05), 0 6px 20px rgba(17, 17, 16, 0.06);
	--font-kr: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
	--font-en: "Inter", "Pretendard Variable", Pretendard, system-ui, sans-serif;

	/*
	 * 타입 스케일 — 「/biz/meeting/」 의 booking.css 와 **같은 값**이다(운영자 결정 2026-09-08).
	 * 두 페이지가 한 제품으로 읽혀야 해서 본문·버튼 치수를 그쪽에 맞췄다.
	 * 새 규칙은 리터럴 대신 이 토큰을 쓴다 — 값이 다시 갈라지지 않게.
	 */
	--fs-body-lg: 18px;
	--fs-body:    16px;
	--fs-ui:      14px;
	--fs-caption: 13px;
	--fs-eyebrow: 12px;
	--fw-regular:  400;
	--fw-semibold: 600;
	--fw-bold:     700;
	--lh-body: 1.7;
	--lh-ui:   1.5;
	--transition-fast: 150ms ease;
	--transition-base: 180ms ease;
	--transition-slow: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
	/* 좌측 패널 정본 6색 (3차 3열 셸에서 사용) */
	--sidenav-active-bg: #E4EFEA;
	--sidenav-active-text: #151B1B;
	--sidenav-active-icon: #036546;
	--sidenav-text: #5A6663;
	--sidenav-icon: #98A3A0;
	--sidenav-hover-bg: #F6F8F7;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden; /* 페이지는 항상 100vh — 스크롤은 .olc-messages 와 .olc-side 안에서만 */
}

body {
	/* 좌우 회색 면 제거(2026-09-08 운영자 결정) — 미팅 예약과 같은 흰 바탕.
	   대화 칸의 경계는 .olc-app 의 세로 hairline 두 줄이 맡는다. */
	background: var(--bg-surface);
	color: var(--gray-900);
	font-family: var(--font-kr);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

/* ── 앱 셸 (720 단일 컨테이너) ─────────────────────────── */
.olc-app {
	--olc-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
	--olc-agent-initial: "오"; /* page.php 가 인라인 style 로 덮어쓴다 */
	--olc-agent-photo: none;
	container: olc / inline-size;
	display: flex;
	flex-direction: column;
	height: 100vh;  /* dvh 미지원 구형 브라우저 폴백 */
	height: 100dvh;
	max-width: 720px;
	margin: 0 auto;
	background: var(--bg-surface);
	color: var(--gray-900);
	word-break: keep-all;
	overflow-wrap: break-word;
}

@media (min-width: 752px) {
	.olc-app { border-inline: var(--hairline); }
}

/* ── 헤더 — 담당자 프로필 + 진행률 링 (OlcHeader.dc.html) ─── */
/*
 * ⭐ 헤더 상자의 세로 규격 — 위 28 / 내용 / 아래 14 / hairline.
 *    미팅 예약 「/biz/meeting/」 의 .omb-head 가 **같은 값**을 쓴다(2026-09-09 운영자 결정).
 *    좌우 16 은 여기만 갖는다 — 이쪽 헤더는 테두리 있는 앱 상자 안에 있다.
 *    좁은 화면(≤1079)에서는 둘 다 위 20 이다. 고칠 때는 booking.css 를 함께 고친다.
 */
.olc-header {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 28px 16px 14px;
	border-bottom: var(--hairline);
	background: var(--bg-surface);
}

@media (max-width: 1079.98px) {
	.olc-header { padding-top: 20px; }
}

.olc-header h1, .olc-header p { margin: 0; }

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

.olc-avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: var(--radius-pill); /* 아바타 — 완전 원형 허용 대상 */
	background: var(--primary-50) var(--olc-agent-photo, none) center / cover;
	color: var(--primary-700);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

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

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

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

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

.olc-agent-name {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--fg-strong);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-bold);
	letter-spacing: -.012em;
	line-height: 1.3;
}

.olc-agent-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--gray-700);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
}

.olc-agent-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--radius-pill); /* dot */
	background: var(--success);
}

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

.olc-progress {
	position: relative;
	flex: none;
	width: 40px;
	height: 40px;
}

.olc-prog-ring {
	display: block;
	width: 40px;
	height: 40px;
	transform: rotate(-90deg);
}

.olc-prog-ring circle { fill: none; stroke-width: 3; }
.olc-prog-track { stroke: var(--gray-200); }

.olc-prog-val {
	stroke: var(--primary-600);
	stroke-linecap: round;
	stroke-dasharray: 106.8; /* 2πr, r=17 — chat.js PROG_CIRC 와 같은 값 */
	stroke-dashoffset: 106.8;
	transition: stroke-dashoffset var(--transition-slow);
}

.olc-prog-label {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--gray-900);
	font-family: var(--font-en);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	white-space: nowrap;
}

@container olc (max-width: 599px) {
	.olc-avatar { width: 40px; height: 40px; font-size: 15px; }
	.olc-agent-name { font-size: 16px; }
	/* 보조문을 감추지 않는다 — 감추면 미팅 헤더보다 한 줄 낮아진다(2026-09-09) */
}

/* ── 메시지 영역 ──────────────────────── */
.olc-messages {
	position: relative; /* 상단 고정 스크롤(anchorTo)의 offsetTop 기준 */
	/* 크롬 스크롤 앵커링이 "위쪽 내용이 늘었다"고 판단해 우리가 정한 scrollTop 을 되돌린다 */
	overflow-anchor: none;
	scroll-behavior: auto; /* anchorTo 는 즉시 이동 — smooth 는 포커스·키보드에 끊긴다 */
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* 상단 고정용 동적 여백 — 항상 목록의 마지막 자식 (chat.js listAppend). 높이는 JS 가 준다 */
.olc-spacer {
	flex: 0 0 auto;
	pointer-events: none;
	overflow-anchor: none;
}

.olc-msg {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 12px; /* 카드(8)와 구분되는 유일한 곡률 */
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.olc-msg--bot {
	align-self: flex-start;
	background: var(--gray-100);
	color: var(--gray-900);
	border-bottom-left-radius: 4px;
}

/* 사용자 답변 행 — 말풍선 아래 [수정하기] */
.olc-msgrow {
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	max-width: 85%;
}

.olc-msg--user {
	align-self: flex-end; /* .olc-msgrow 밖의 말풍선(접수 에코 등)도 우측 정렬 */
	max-width: 100%;
	background: var(--primary-50);
	color: var(--primary-800);
	border-bottom-right-radius: 4px;
}

.olc-messages > .olc-msg--user { max-width: 85%; }

.olc-messages > .olc-msg--user { max-width: 85%; }

.olc-edit {
	order: 2;
	border: 0;
	background: none;
	padding: 2px;
	color: var(--gray-500);
	font: inherit;
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--gray-300);
}

.olc-edit:hover { color: var(--gray-700); }
.olc-edit:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; border-radius: 2px; }

.olc-msg--system {
	align-self: center;
	max-width: 100%;
	padding: 0;
	background: transparent;
	color: var(--gray-500);
	font-size: 12px;
	text-align: center;
}

.olc-notice {
	margin: auto;
	color: var(--gray-700);
	font-size: 14px;
	text-align: center;
	padding: 24px;
}

.olc-refno {
	font-family: var(--font-en);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--primary-700);
}

/* 입력 중 표시 — 기능적 로딩 모션 */
.olc-typing {
	align-self: flex-start;
	display: inline-flex;
	gap: 5px;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 12px 12px 12px 4px;
	background: var(--gray-100);
}

.olc-typing i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill); /* dot */
	background: var(--gray-500);
	animation: olc-dot 1.2s ease-in-out infinite;
}

.olc-typing i:nth-child(2) { animation-delay: .2s; }
.olc-typing i:nth-child(3) { animation-delay: .4s; }

@keyframes olc-dot {
	0%, 80%, 100% { opacity: .25; }
	40% { opacity: 1; }
}

/* 담당자 아바타 28px — 봇 말풍선 묶음의 첫 말풍선·입력 중 표시 옆. 연속 봇 말풍선은 들여쓰기만 */
.olc-msg--bot, .olc-typing {
	position: relative;
	margin-left: 36px;
}

.olc-msg--bot::after, .olc-typing::after {
	content: var(--olc-agent-initial);
	position: absolute;
	left: -36px;
	top: 0; /* 첫 줄 정렬 (LectureChat-Explore.dc.html 의 ::after 정의와 동일) */
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	overflow: hidden;
	border-radius: var(--radius-pill); /* 아바타 */
	background: var(--primary-50) var(--olc-agent-photo, none) center / cover;
	color: var(--primary-700);
	font-family: var(--font-kr);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-bold);
	line-height: 1;
	white-space: normal;
}

.olc-app--photo .olc-msg--bot::after, .olc-app--photo .olc-typing::after { color: transparent; }
.olc-msg--bot + .olc-msg--bot::after, .olc-msg--bot + .olc-typing::after { content: none; }

/* ── 인라인 입력 카드 ───────────────── */
.olc-control {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border-radius: var(--radius-lg);
	background: var(--bg-surface);
	box-shadow: var(--shadow-md); /* 카드는 그림자 — 테두리와 겹치지 않는다 */
}

.olc-control.olc-busy { opacity: .65; }

/* 수정 진입 헤드 — "수정 중 · {단계}" + [취소] */
.olc-control-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 28px;
	margin-bottom: -4px;
}

.olc-control-title {
	color: var(--primary-700);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.olc-note {
	margin: 0;
	color: var(--gray-700);
	font-size: 13px;
	line-height: 1.55;
}

.olc-fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.olc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.olc-field-label {
	color: var(--gray-700);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.olc-field-label span { font-weight: 400; color: var(--gray-500); }

/* 입력 — 채움면 + 투명 테두리. 포커스는 outline 한 겹, 오류는 테두리 한 겹 */
.olc-input {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: var(--control-fill);
	color: var(--gray-900);
	font: inherit;
	font-size: 16px; /* iOS 확대 방지 */
	line-height: 1.5;
	outline: none;
}

.olc-input::placeholder { color: var(--gray-500); }

.olc-input:focus-visible {
	outline: 2px solid var(--primary-600);
	outline-offset: 2px;
	background: var(--bg-surface);
}

.olc-input.olc-invalid { border-color: var(--error); background: var(--bg-surface); }
.olc-input.olc-invalid:focus-visible { outline-color: var(--error); }
.olc-input[readonly] { color: var(--gray-700); }

textarea.olc-input {
	min-height: 140px;
	resize: vertical;
}

.olc-field-error {
	color: var(--error-text);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

.olc-control-error {
	margin: 0;
	color: var(--error-text);
	font-size: 12px;
	font-weight: 600;
}

.olc-inrow {
	display: flex;
	gap: 8px;
	align-items: center;
}

.olc-inrow .olc-input { flex: 1; min-width: 0; }

.olc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* 치수는 미팅의 .omb-btn 과 같다 — 두 페이지 버튼이 따로 놀지 않게 */
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--gray-100);
	color: var(--gray-900);
	font: inherit;
	font-size: 15px;
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--transition-base), transform var(--transition-base);
}

.olc-btn:hover { background: var(--gray-200); }
.olc-btn:active { transform: translateY(1px); }
.olc-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }

.olc-btn--primary { background: var(--primary-600); color: var(--fg-on-primary); }
.olc-btn--primary:hover { background: var(--primary-700); }

.olc-btn--ghost { background: transparent; color: var(--gray-700); padding: 0 10px; }
.olc-btn--ghost:hover { background: var(--gray-100); }

.olc-btn--sm { min-height: 32px; padding: 0 10px; font-size: 12px; }
.olc-btn--wide { width: 100%; }

.olc-btn:disabled {
	background: var(--gray-200);
	color: var(--gray-500);
	cursor: not-allowed;
	transform: none;
}

/* ── 선택지 칩 ────────────────────────── */
.olc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.olc-chip {
	/* 답을 고르는 칩 — 미팅의 시간 버튼(.omb-time)과 같은 치수 */
	min-height: 48px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--radius-md); /* 칩 pill 금지 */
	background: var(--gray-100);
	color: var(--gray-900);
	font: inherit;
	font-size: 15px;
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.olc-chip:hover:not(:disabled) { background: var(--gray-200); }
.olc-chip:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
.olc-chip:disabled { color: var(--gray-500); cursor: default; }

.olc-chip.olc-on, .olc-chip[aria-pressed="true"] {
	background: var(--primary-50);
	color: var(--primary-700);
}

/* 예/아니오 두 칩이 한 줄을 반씩 */
/* 갈래 칩 — 2개(06)든 3개(03 강연 장소)든 한 줄을 고르게 나눠 쓰고, 좁으면 마지막 칩이 줄을 통째로 받는다 */
.olc-yesno .olc-chip { flex: 1 1 150px; min-height: 44px; }

/* 시간·인원·방식 그룹 */
.olc-mgroup {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 12px;
	border-top: var(--hairline);
}

.olc-mgroup:first-child { padding-top: 0; border-top: 0; }

.olc-mgroup-label {
	color: var(--gray-700);
	font-size: 12px;
	font-weight: 600;
}

.olc-mgroup-hint {
	margin-top: 2px;
	color: var(--gray-500);
	font-size: 11px;
	line-height: 1.45;
}

/* ── 주소 (다음 우편번호 검색) ─────────── */
.olc-postcode {
	width: 100%;
	height: 380px;
	overflow: hidden;
	border: var(--hairline);
	border-radius: var(--radius-md);
	background: var(--gray-50);
}

.olc-addr-picked, .olc-addr-manualwrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 선택 결과 — 건물명(굵게) + 도로명(작게) 한 덩이 */
.olc-addr-picked-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	background: var(--primary-50);
}

.olc-addr-picked-text b {
	color: var(--primary-800);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.olc-addr-picked-text span { color: var(--primary-700); font-size: 12px; }

.olc-card-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

/* 강연 장소 — [아니요] 아래 열리는 주소 패널 */
.olc-venue-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 12px;
	border-top: var(--hairline);
}

/* ── 일정 ─────────────────────────────── */
.olc-sched-panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 12px;
	border-top: var(--hairline);
}

.olc-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.olc-cal-nav {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--gray-100);
	color: var(--gray-700);
	font: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.olc-cal-nav:hover:not(:disabled) { background: var(--gray-200); }
.olc-cal-nav:disabled { color: var(--gray-300); cursor: default; }
.olc-cal-nav:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }

.olc-cal-label {
	color: var(--fg-strong);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.olc-cal-count, .olc-cal-selchip, .olc-otp-timer, .olc-lt-count, .olc-control-title { white-space: nowrap; }

.olc-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 3px 2px;
}

.olc-cal-dow {
	display: grid;
	place-items: center;
	height: 26px;
	color: var(--gray-500);
	font-size: 12px;
	font-weight: 600;
}

.olc-cal-dow.olc-sun { color: var(--error-text); }

.olc-cal-dow.olc-sun { color: var(--error-text); }

.olc-cal-blank { min-height: 44px; }

/* 선택 가능한 날만 버튼 면. 차단·창 밖은 평문 회색 — "고장"이 아니라 "자리 없음"으로 읽힌다 */
.olc-cal-day {
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--control-fill);
	color: var(--gray-900);
	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.olc-cal-day:hover:not(:disabled) { background: var(--gray-200); }
.olc-cal-day:focus-visible { outline: 2px solid var(--primary-600); outline-offset: -2px; }

.olc-cal-day.olc-off, .olc-cal-day:disabled {
	background: transparent;
	color: var(--gray-500);
	font-weight: 400;
	cursor: default;
}

.olc-cal-day.olc-on { background: var(--primary-600); color: var(--fg-on-primary); }

.olc-cal-selected {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 30px;
}

.olc-cal-selchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 30px;
	padding: 0 6px 0 10px;
	border-radius: var(--radius-md);
	background: var(--gray-100);
	color: var(--gray-900);
	font-size: 12px;
	font-weight: 600;
}

.olc-cal-selchip button {
	border: 0;
	background: none;
	padding: 0 3px;
	color: var(--gray-500);
	font: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.olc-cal-selchip button:hover { color: var(--error-text); }
.olc-cal-selchip button:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 1px; border-radius: 2px; }

.olc-cal-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.olc-cal-count {
	color: var(--gray-700);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* 시기 — 월을 고르면 나타나는 "정확한 시기" 입력 */
.olc-sched-detail {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 12px;
	border-top: var(--hairline);
}

/* ── 긴 글 ─────────────────────────────── */
.olc-lt-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.olc-lt-count {
	color: var(--gray-500);
	font-family: var(--font-en);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.olc-lt-count.olc-over { color: var(--error-text); }

/* ── 연락처 — 휴대폰 + 인증번호 6칸 (4상태) ─────────── */
.olc-otp-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 12px;
	border-top: var(--hairline);
}

.olc-otp-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	color: var(--gray-700);
	font-size: 12px;
}

.olc-otp-timer b {
	font-family: var(--font-en);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--gray-900);
}

.olc-otp-timer.olc-over b { color: var(--error-text); }

.olc-otp-boxes {
	display: flex;
	gap: 6px;
}

/* v3 폼 규칙: 각 칸 최소 44×48, 숫자 입력 시만 자동 진행, Backspace 역이동 */
.olc-otp-box {
	flex: 1 1 0;
	min-width: 44px;
	height: 48px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: var(--control-fill);
	color: var(--gray-900);
	font: inherit;
	font-family: var(--font-en);
	font-size: 20px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	outline: none;
}

.olc-otp-box:focus-visible {
	outline: 2px solid var(--primary-600);
	outline-offset: 2px;
	background: var(--bg-surface);
}

.olc-otp-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
}

.olc-otp-actions .olc-note { flex: 1 1 auto; font-size: 12px; }

.olc-contact-status {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 인증 완료 배지 — 6px, success 면 */
.olc-verified {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 24px;
	padding: 0 8px;
	border-radius: var(--radius-md);
	background: var(--success-bg);
	color: var(--success-text);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.olc-verified::before {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: var(--olc-check) center / contain no-repeat;
	mask: var(--olc-check) center / contain no-repeat;
}

/* 발송 실패 — 배경 면 + 아이콘 색으로만 (좌측 컬러바 없음) */
.olc-alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px;
	border-radius: var(--radius-md);
	background: var(--error-bg);
	color: var(--error-text);
	font-size: 13px;
	line-height: 1.5;
}

.olc-alert svg { flex: none; width: 18px; height: 18px; color: var(--error); }

/* ── 확인 카드 ────────────────────────── */
.olc-summary {
	display: flex;
	flex-direction: column;
}

.olc-summary-row {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: var(--hairline);
}

.olc-summary-row:first-child { padding-top: 0; }

.olc-summary-label {
	color: var(--gray-500);
	font-size: 12px;
	font-weight: 600;
}

.olc-summary-value {
	color: var(--gray-900);
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

.olc-summary-edit {
	border: 0;
	background: none;
	padding: 0;
	color: var(--primary-600);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.olc-summary-edit:hover { color: var(--primary-700); text-decoration: underline; }
.olc-summary-edit:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; border-radius: 2px; }

/* ── 완료·오류 배너 — 메시지 영역 바깥, flex 흐름 안 (fixed 아님) ─── */
.olc-done, .olc-error {
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 16px calc(12px + env(safe-area-inset-bottom));
	padding: 12px 16px;
	border-radius: var(--radius-lg);
	font-size: 14px;
	line-height: 1.5;
}

.olc-done { background: var(--success-bg); color: var(--success-text); }
.olc-done strong { color: var(--primary-800); }
.olc-done svg, .olc-error svg { flex: none; width: 20px; height: 20px; }
.olc-done svg { color: var(--success); }
.olc-error { background: var(--error-bg); color: var(--error-text); }
.olc-error svg { color: var(--error); }
.olc-error .olc-btn { margin-left: auto; }

/* ── 데스크톱 (컨테이너 ≥600) — 720 컨테이너가 기본 뷰 ─── */
@container olc (min-width: 600px) {
	.olc-msg--bot, .olc-msgrow { max-width: 560px; }
	.olc-control { align-self: flex-end; width: 100%; max-width: 560px; }
	.olc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
	.olc-fields .olc-field:nth-child(3) { grid-column: 1 / -1; }
	.olc-control .olc-btn--wide { width: auto; min-width: 160px; align-self: flex-end; }
	.olc-inrow { justify-content: flex-start; }
	.olc-inrow .olc-input { max-width: 360px; }
	.olc-cal-head, .olc-cal-grid { max-width: 434px; }
	.olc-otp-box { flex: 0 0 52px; }
	textarea.olc-input { min-height: 160px; }
	.olc-summary-row { grid-template-columns: 96px minmax(0, 1fr) auto; }
}

/* ── 좁은 컨테이너 (<600) — 달력·일정 압축 (아트보드 렌더값) ─── */
@container olc (max-width: 599px) {
	.olc-sched-panel { gap: 6px; }
	.olc-control--schedule { gap: 10px; }
	.olc-cal-dow { height: 24px; }
	.olc-cal-nav { width: 32px; height: 32px; }
	.olc-cal-selected, .olc-cal-selchip { min-height: 28px; }
	.olc-sched-note { font-size: 12px; }
	.olc-cal-grid { gap: 2px; }
}

/* 360px 이하 기기 — 달력 셀 44px 근접 (카드 안 폭 296 → padding 12 + 열 간격 0 → 43.4px) */
@container olc (max-width: 379px) {
	.olc-control--schedule { padding: 12px; }
	.olc-cal-grid { gap: 2px 0; }
}

/* ── 강의 내용 — 두 갈래(8a): 맞춤형 행 · 트랙별 과정 칩 · 선택됨 행 ─────────── */
.olc-courses {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 60vh; /* 과정이 늘어도 카드가 끝없이 길어지지 않게 */
	overflow-y: auto;
}

.olc-courses-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.olc-courses-head .olc-field-label { margin: 0; }

.olc-link {
	color: var(--primary-600);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	white-space: nowrap;
}

.olc-link:hover { color: var(--primary-700); }

.olc-track {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.olc-track-name {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--gray-700);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

/* 트랙 색 dot 은 뺐다(2026-09-07) — 이름만 남긴다. --track-color 인라인은 계약대로 계속 내려온다 */

.olc-chip.olc-course {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 12px;
	font-size: 13px;
}

.olc-course b {
	color: var(--gray-700);
	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.olc-course span { color: var(--gray-500); font-weight: 400; }
.olc-course[aria-pressed="true"] b, .olc-course[aria-pressed="true"] span { color: var(--primary-700); }

.olc-courses-note {
	margin: 0;
	color: var(--gray-500);
	font-size: 12px;
	line-height: 1.5;
}

/* 맞춤형은 트랙 하나처럼 목록 맨 위에 (2026-09-07 운영자 요청) — 점 색만 브랜드, 칩 모양은 과정과 동일 */
.olc-track--custom { --track-color: var(--primary-600); }
.olc-course--custom { font-weight: 600; }

@container olc (max-width: 599px) {
	.olc-chip.olc-course span { display: none; } /* 좁으면 시간 숨김 */
}

/*
 * ── 셸 ───────────────────────────────────────────────────────────
 *
 * 뼈대는 [좌측 패널 280] + [여백 12] + [본문] 이고, 본문 안이 다시 [대화 708] + [우측 패널 600] 이다.
 * 12 뒤에 앱 안쪽 여백 16 이 있어 **글은 나비에서 28 떨어져** 시작한다 — 「/biz/meeting/」 과 같은 자리다.
 *
 * ⚠️ 높이는 항상 뷰포트다 — 문서는 스크롤하지 않고 대화와 우측 패널이 각자 스크롤한다.
 *    그래서 본문 래퍼에도 min-height:0 이 필요하다(없으면 flex/grid 자식이 안 줄어들어 넘친다).
 * ⚠️ .olc-app 은 container: olc / inline-size 다 — 폭을 바꿀 때는 @container 전환점(599 / 600 / 379)을
 *    넘지 않는지 먼저 본다. 692·720 은 같은 편이라 규칙 5벌(말풍선 560·달력 434 등)이 그대로 산다.
 */
.olc-page { height: 100vh; height: 100dvh; }
.olc-content { min-width: 0; min-height: 0; height: 100%; }
.olc-nav, .olc-side { display: none; }

/*
 * 좌측 문의 유형 — --sidenav-* 6색 정본 (style.css 81~86행과 같은 값).
 *
 * ⭐ 치수·여백·배경은 「/biz/meeting/」 의 .omb-sidenav 가 정본이다(운영자 결정 2026-09-08).
 *    같은 목록이 두 페이지에 그려지므로 오갈 때 흔들리면 안 된다. 고칠 때는 둘을 함께 고친다:
 *    plugins/oppadu-meeting-booking/assets/booking.css 의 「문의 유형 목록」 절.
 *
 * ⚠️ 좌우 padding 을 두지 않는다 — 항목 알약이 칸 폭(280)을 그대로 쓰게 하려는 것이다.
 *    미팅 쪽은 바깥 컨테이너(.omb-row)가 여백을 만들어서 나비 자체엔 좌우 padding 이 없다.
 *    ≥1600 에서만 셸이 화면에 딱 붙을 수 있어 그 구간에서 왼쪽 여백을 되돌려 준다.
 */
.olc-nav {
	flex-direction: column;
	min-height: 0;
	padding: 28px 0 40px;
	background: var(--bg-surface);
}

.olc-nav-home { display: block; align-self: flex-start; margin: 0 0 24px 11px; line-height: 0; }
.olc-nav-logo { display: block; width: 96px; height: auto; }

.olc-nav-label {
	margin: 0 0 8px 11px;
	color: var(--gray-700);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

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

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

.olc-nav-item svg { flex: none; width: 18px; height: 18px; color: var(--sidenav-icon); }
a.olc-nav-item:hover:not(.is-active) { background: var(--sidenav-hover-bg); color: var(--sidenav-text); }
a.olc-nav-item:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
.olc-nav-item.is-active { background: var(--sidenav-active-bg); color: var(--sidenav-active-text); font-weight: 700; }
.olc-nav-item.is-active svg { color: var(--sidenav-active-icon); }
.olc-nav-item[aria-disabled="true"] { color: var(--gray-500); cursor: default; } /* 비활성 자리표시 — 라우팅 신설 전 */
.olc-nav-item[aria-disabled="true"] svg { color: var(--gray-300); }

/* ── 우측 패널 v0.9 (2026-09-07 클로드 디자인 확정안) — 진행 단계 56px + 탭 2개 ───────────
   · 스테퍼·탭바는 고정, 탭 내용만 각자 스크롤. 6a 수치(gap 14 · padding 26/40/22) 유지
   · 단계 이름 8개는 화면에서 지우고 sr-only 로 남긴다(「AI 티」의 큰 원인) — 현재 단계 이름만 헤드에
   · 본문·메타 텍스트는 --gray-700 이상만 쓴다. --gray-500 은 chevron·비활성 탭 전용(UI 경계 3:1)
   · 트랙 3색은 패널에서 쓰지 않는다(문자 A·B·C). 서버는 --track-color 를 계속 내려보낸다 — 되살릴 때를 위해
   · 이 패널은 그림자를 쓰지 않는다. 면은 --gray-50(채도 3%), 구획은 hairline */
.olc-side {
	flex-direction: column;
	gap: 14px;
	min-height: 0;
	padding: 26px 40px 22px;
	/* 패널은 흰 면이다 — 답변·열린 과정의 --gray-50 면이 이 위에서만 구분된다(둘 다 gray-50 이면 안 보인다) */
	background: var(--bg-surface);
	overflow: hidden;
}

/* ⚠️ 예전의 `.olc-side h2,h3,h4,p,figure { margin:0 }` 리셋은 걷어냈다 —
   타입 선택자가 섞여 특이도가 높아 아래 규칙들의 margin 을 조용히 덮었다(라벨·묶음 제목이 다 붙어 보였다).
   여백이 필요 없는 곳은 각 규칙에서 margin:0 을 명시한다. */

/* 탭 내용 — 탭마다 자기 스크롤 위치를 지킨다(엘리먼트가 2개라 브라우저가 기억한다).
   스크롤바가 패널 여백을 침범하지 않게 우측 여백을 안쪽으로 */
.olc-tp {
	flex: 1 1 auto;
	min-height: 0;
	margin-right: -40px;
	padding-right: 40px;
	overflow-y: auto;
	scrollbar-gutter: stable;
}

/* ── 진행 단계 — 82px → 56px ─────────────────────────── */
.olc-stepper { flex: none; display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; border-bottom: var(--hairline); }

.olc-stepper-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	color: var(--gray-700);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

.olc-stepper-head b { color: var(--fg-strong); font-family: var(--font-en); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 현재 단계 이름 — chat.js setStepper() 가 step_names 라벨을 그대로 넣는다 */
#olc-step-name { margin-left: 8px; color: var(--fg-strong); font-size: 13px; font-weight: 700; }

/* 단계 수는 서버 step_order() 가 정본 — CSS 는 개수를 모른 채 등폭으로 흘린다 */
.olc-dots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.olc-dot { position: relative; display: flex; justify-content: center; align-items: center; height: 12px; }

.olc-dot::before {
	content: "";
	position: absolute;
	top: 5px;
	left: calc(50% + 9px);
	right: calc(-50% + 9px);
	height: 2px;
	background: var(--gray-200);
}

.olc-dot:last-child::before { display: none; }

.olc-dot i {
	position: relative;
	z-index: 1;
	display: block;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border-radius: var(--radius-pill); /* dot */
	background: var(--gray-300);
}

.olc-dot--done i { background: var(--primary-600); }
.olc-dot--done::before { background: var(--primary-600); }
.olc-dot--now i { border: 2px solid var(--primary-600); background: var(--bg-surface); }

/* 단계 이름은 화면에서 지우고 스크린리더에만 남긴다 */
.olc-dot-l { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── 탭바 — 선택은 색 면이 아니라 글자색 + 아래 인디케이터로(v3 규칙) ─────────── */
.olc-tabs { flex: none; display: flex; gap: 20px; border-bottom: var(--hairline); }

.olc-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 0 0 9px;
	margin-bottom: -1px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--gray-500);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.olc-tab:hover { color: var(--gray-700); }
.olc-tab.is-on { border-bottom-color: var(--primary-600); color: var(--primary-700); }
.olc-tab-count { color: var(--gray-700); font-family: var(--font-en); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.olc-tab.is-on .olc-tab-count { color: var(--primary-600); }

/* ── 접힘 공통(FAQ 문항 · 커리큘럼 과정) — panel[hidden] 만 쓴다(max-height 트릭 금지) ── */
.olc-faq-q svg, .olc-curr-q > svg, .olc-pkg-card > svg { flex: none; width: 16px; height: 16px; color: var(--gray-500); transition: transform var(--transition-base); }
.olc-faq-q[aria-expanded="true"] svg, .olc-curr-q[aria-expanded="true"] > svg, .olc-pkg-card[aria-expanded="true"] > svg { transform: rotate(180deg); }

/* 포커스는 한 겹으로 끝낸다 */
.olc-tab:focus-visible,
.olc-faq-q:focus-visible,
.olc-curr-q:focus-visible,
.olc-pkg-card:focus-visible,
.olc-pkg-chip:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; border-radius: 2px; }

/* ── 자주 묻는 질문 ─────────────────────────────────── */
/* 묶음 제목 — 위 여백(28)이 항목 간격보다 크다(as-is 는 반대여서 경계가 거꾸로 읽혔다) */
.olc-faq-gh {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 2px 0 10px;
	color: var(--primary-700);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.olc-faq-gh span { color: var(--gray-700); font-family: var(--font-en); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.olc-faq-group + .olc-faq-group .olc-faq-gh { margin-top: 28px; }

.olc-faq { margin: 0; padding: 0 0 8px; list-style: none; }
.olc-faq-item { border-bottom: var(--hairline); }
.olc-faq-item:last-child { border-bottom: 0; }

.olc-faq-q {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 8px 0;
	border: 0;
	background: none;
	color: var(--gray-900);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
}

.olc-faq-q > span { flex: 1 1 auto; }
.olc-faq-q:hover { color: var(--primary-700); }

/* 답변 = gray-50 면(채도 3%). 열림 경계를 면으로 만든다 */
.olc-faq-a {
	margin: 0 0 12px;
	padding: 13px 15px;
	border-radius: var(--radius-lg);
	background: var(--gray-50);
	color: var(--gray-700);
	font-size: 13px;
	line-height: 1.7;
}

.olc-faq-a p { margin: 0; }
.olc-faq-a p + p { margin-top: 6px; }
/* 테마 정본 답변에 <ul> 이 들어오는 문항이 있다 — UA 기본값(1em·40px)을 문단 리듬에 맞춘다 */
.olc-faq-a ul { margin: 8px 0 0; padding-left: 17px; }
.olc-faq-a li + li { margin-top: 3px; }
.olc-faq-a strong { color: var(--gray-900); font-weight: 600; }
.olc-faq-a a { color: var(--primary-600); text-decoration: underline; text-underline-offset: 3px; }
.olc-faq-a a:hover { color: var(--primary-700); }

/* ── 전체 커리큘럼 — 커리큘럼 페이지와 같은 내용(트랙·과정 상세·시간대별 구성 추천) ── */
.olc-curr-track + .olc-curr-track { margin-top: 24px; padding-top: 20px; border-top: var(--hairline); }

/* 트랙 제목 — 색 dot 대신 트랙 문자(A·B·C). 아래 A1·A2 코드와 같은 26px 열에서 시작한다 */
.olc-curr-tname {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	column-gap: 10px;
	align-items: baseline;
	margin: 0 0 6px;
	color: var(--fg-strong);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.olc-curr-tname b { color: var(--gray-700); font-family: var(--font-en); font-size: 14px; font-weight: 700; }
.olc-curr-tmeta { color: var(--gray-700); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }

.olc-curr-list { margin: 0; padding: 0; list-style: none; }
.olc-curr-mod { border-bottom: var(--hairline); }
.olc-curr-mod:last-child { border-bottom: 0; }

/* 과정 행 = 2행. 1행 코드·제목·시간·세션 수, 2행 주요 대상 1줄(클릭 전에 고를 수 있게 하는 핵심) */
.olc-curr-q {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto 16px;
	column-gap: 10px;
	row-gap: 3px;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 11px 0;
	border: 0;
	background: none;
	color: var(--gray-900);
	font: inherit;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}

.olc-curr-q > b, .olc-curr-t, .olc-curr-h, .olc-curr-q > svg { grid-row: 1; }
.olc-curr-q > b { color: var(--gray-700); font-family: var(--font-en); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.olc-curr-t { font-size: 14px; font-weight: 600; }
.olc-curr-h { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-700); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.olc-curr-q:hover { color: var(--primary-700); }

.olc-curr-aud {
	grid-column: 2 / 4;
	grid-row: 2;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--gray-700);
	font-size: var(--fs-caption);
	line-height: var(--lh-ui);
}

/* 펼치면 미리보기를 접고 본문의 「주요 대상」이 전문을 받는다(중복 없음) */
.olc-curr-q[aria-expanded="true"] .olc-curr-aud { display: none; }

/* 열린 과정 — gray-50 면을 걷어냈다(2026-09-08).
   as-is 의 고장은 「회색이 많다」가 아니라 「회색이 경계를 먹었다」였다: 세로 margin 이 0 이라 이웃한 두 과정을
   열면 회색이 틈 없이 맞붙어 기둥이 되고, border-bottom-color:transparent 가 그 둘을 나누던 hairline 을 지웠다.
   9개를 다 펼치면 회색 합계 3,589px = 패널 뷰포트(833px)의 431% 였다(실측).
   「세션 목록만 감싸기」도 답이 아니다 — .olc-curr-ss 가 본문 질량의 60%대라 감싸도 뷰포트의 260%대다.
   ⇒ 규칙: gray-50 면은 「한 번에 하나만 열리는」 자리에만 쓴다(FAQ 답변·시간대 상세).
      열림은 글자색 + 과정 경계 hairline(복원) + 경계 여백으로 알린다. */
.olc-curr-mod.is-open { padding-bottom: 12px; }

/* 여백은 아래쪽에만 — 위에 주면 방금 누른 행이 12px 밀려 내려가 클릭 지점이 흔들린다 */
.olc-curr-mod.is-open + .olc-curr-mod { padding-top: 12px; }

/* 열림 표시 = 글자색. 시간대 카드와 같은 말이다. chevron 은 stroke="currentColor" 라 함께 따라온다.
   굵기·크기는 안 건드린다 — 토글할 때 제목 폭이 변해 행이 출렁이지 않게 */
.olc-curr-mod.is-open > .olc-curr-q > b,
.olc-curr-mod.is-open > .olc-curr-q > .olc-curr-t,
.olc-curr-mod.is-open > .olc-curr-q > svg { color: var(--primary-700); }

/* 열린 행은 이미 primary-700 이라 기본 hover(같은 색)가 아무 변화도 못 만든다 — 한 단 밝은 색으로 */
.olc-curr-mod.is-open > .olc-curr-q:hover > b,
.olc-curr-mod.is-open > .olc-curr-q:hover > .olc-curr-t,
.olc-curr-mod.is-open > .olc-curr-q:hover > svg { color: var(--primary-600); }

/* 본문 왼쪽 36px(코드 열 26 + gap 10)은 그대로 — 왼쪽 끝에 글자가 있는 줄이 곧 새 과정이다 */
.olc-curr-body { padding: 10px 0 16px 36px; }
.olc-curr-target { margin: 0 0 14px; color: var(--gray-700); font-size: 13px; line-height: 1.65; }
/* 라벨과 내용 사이 0 → 6px + 블록 (as-is 는 라벨인지 첫 줄인지 몰랐다) */
.olc-curr-target b { display: block; margin-bottom: 6px; color: var(--gray-700); font-size: 12px; font-weight: 700; }
/* 면을 뺀 자리에서 세션 목록이 자기 블록으로 읽히게 하는 장치.
   .olc-curr-body 가 padding-left:36px 이라 이 선은 제목 열에서 시작하고, 과정 경계선(전폭)과 시작 위치로 갈린다 */
.olc-curr-sh {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 18px 0 10px;
	padding-bottom: 7px;
	border-bottom: var(--hairline);
	color: var(--gray-700);
	font-size: 12px;
	font-weight: 700;
}
.olc-curr-sh span { font-family: var(--font-en); font-weight: 600; font-variant-numeric: tabular-nums; }

.olc-curr-ss { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.olc-curr-ss li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; }
/* 세션 번호 gray-300(대비 1.39:1) → gray-700(8.9:1) */
.olc-curr-ss i { color: var(--gray-700); font-family: var(--font-en); font-size: 11px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.85; }
.olc-curr-ss b { display: block; color: var(--gray-900); font-size: 13px; font-weight: 600; line-height: 1.5; }
.olc-curr-ss em { display: block; color: var(--gray-700); font-size: 12px; font-style: normal; line-height: 1.6; }

/* ── 시간대별 구성 추천 — 카드 7장 → 시간 축 표. 모듈은 「포함」이 아니라 고를 수 있는 후보다 ── */
.olc-pkgs { margin-top: 26px; padding-top: 22px; border-top: var(--hairline); }
.olc-pkgs-h { margin: 0; color: var(--fg-strong); font-size: 15px; font-weight: 700; line-height: 1.4; }
.olc-pkgs-sub { margin: 5px 0 14px; color: var(--gray-700); font-size: 12.5px; line-height: 1.6; }
/* [시간 | 제목] 카드는 2열 격자에 고정하고, 상세는 격자 「아래 한 자리」에서만 열린다.
   격자가 다시 흐르지 않으니 카드 위치가 흔들리지 않는다(2026-09-07 운영자 결정). 열림은 한 번에 하나. */
.olc-pkg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.olc-pkg-card {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 8px 12px;
	border: var(--hairline);
	border-radius: var(--radius-lg);
	background: var(--bg-surface);
	color: var(--gray-900);
	font: inherit;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.olc-pkg-card:hover { border-color: var(--gray-300); }
/* 고른 카드 — 상세가 카드에서 떨어져 있으니 어느 카드인지 분명히 보여야 한다 */
.olc-pkg-card[aria-expanded="true"] { border-color: var(--primary-600); background: var(--primary-50); }
.olc-pkg-card[aria-expanded="true"] .olc-pkg-name { color: var(--primary-700); }
.olc-pkg-hours { flex: none; color: var(--primary-700); font-family: var(--font-en); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 카드 안에서만 시간 열을 고정폭으로 — as-is 는 33.8~45.1px 로 들쭉날쭉해 2열 좌우의 이름 시작점이 어긋났다.
   같은 클래스를 쓰는 상세 머리줄의 시간은 자연폭 그대로 둔다 */
.olc-pkg-card .olc-pkg-hours { min-width: 48px; }
/* 이름은 접히지 않는다 — 접히는 순간 그 행의 옆 카드까지 같이 늘어난다.
   폭 예산 143px(표식 카드는 101px), 최장 「파워쿼리 실무 마스터」 123.8px. ellipsis 는 더 긴 이름이 들어올 때의 안전장치 */
.olc-pkg-name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
/* 상세 자리 = 한 칸짜리 격자. 7장을 같은 칸에 겹쳐 두고 고른 하나만 보인다.
   칸 높이는 브라우저가 7장 중 가장 큰 것(실측 226px)으로 잡는다 — 그래서 카드를 바꿔 눌러 상세가
   142↔226 을 오가도 아래 「커리큘럼 페이지 열기」 링크가 1px 도 안 움직인다.
   JS 로 재지 않는다 — 어드민에서 구성·문장이 바뀌면 기준도 저절로 따라간다 */
.olc-pkg-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* 상세는 제 높이 그대로, 남는 자리는 흰 여백이 먹는다 — stretch 로 늘리면 회색이 커진다 */
	align-items: start;
	margin-top: 10px;
}

/* 아무것도 안 열렸으면 자리를 접는다 = 닫힘 높이는 예전과 같다.
   :has 를 모르는 브라우저는 이 규칙만 버리고 자리를 늘 갖는다(여백만 손해, 깨지지 않음) */
.olc-pkg-detail:not(:has(> .olc-pkg-d:not([hidden]))) { display: none; }

/* 7장 전부 같은 칸 — 겹쳐 쌓아야 브라우저가 「가장 큰 것」을 알 수 있다 */
.olc-pkg-detail > .olc-pkg-d { grid-area: 1 / 1; }

/* 이 자리에서만 숨김을 display 가 아니라 visibility 로 — 높이를 재려면 레이아웃에 남아야 한다.
   visibility:hidden 은 화면·접근성 트리·탭 순서에서 display:none 과 똑같이 빠지므로 hidden 의 뜻은 그대로다.
   특이도 (0,3,0) 이라 파일 끝 [hidden] 가드 (0,2,0) 를 !important 없이 이긴다 */
.olc-pkg-detail > .olc-pkg-d[hidden] { display: block; visibility: hidden; }

.olc-pkg-d { padding: 14px 15px; border-radius: var(--radius-lg); background: var(--gray-50); }
.olc-pkg-dh { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.olc-pkg-dh b { color: var(--gray-900); font-size: 14px; font-weight: 600; }

/* 태그 7종 중 6종은 이름·시간의 되풀이다(임원 특강↔C-Level 추천 등). 그 되풀이가 카드 폭 223px 중
   최대 117px 을 먹어 이름을 두 줄로 접었다 → 카드에는 대표 1장 표식만, 태그 전문은 폭이 2배인 상세 머리줄이 받는다.
   표식 상자 높이 18.3px 은 이름 줄(18.2px)과 같아 카드 높이를 건드리지 않는다. 부착률 1/7 = 14%, 1종 */
.olc-pkg-top { flex: none; padding: 2px 6px; border-radius: var(--radius-md); background: var(--primary-50); color: var(--primary-700); font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
/* 열린 카드 면이 --primary-50 이라 같은 색 표식이 묻힌다 — 면만 흰색으로 뒤집는다(테두리·그림자 없이) */
.olc-pkg-card[aria-expanded="true"] .olc-pkg-top { background: var(--bg-surface); }
/* 태그 전문 — 상세 머리줄에서 이름 뒤 평문(배지 아님). 부모를 좁혀 margin-left:auto 가 새지 않게 한다 */
.olc-pkg-dh .olc-pkg-tag { flex: none; margin-left: auto; color: var(--gray-700); font-size: 12px; white-space: nowrap; }

.olc-pkg-desc { margin: 0; color: var(--gray-700); font-size: 12.5px; line-height: 1.6; }
.olc-pkg-mods { margin: 10px 0 0; }
.olc-pkg-mods-l { display: block; margin-bottom: 6px; color: var(--gray-700); font-size: 12px; font-weight: 700; }
/* 구성이 여러 개면 한 줄씩 쌓는다. 이름 없는 구성(예전 데이터)은 칩만 보인다 */
.olc-pkg-grp + .olc-pkg-grp { margin-top: 8px; }
.olc-pkg-grp-n { display: block; margin-bottom: 4px; color: var(--gray-700); font-size: 12px; }
.olc-pkg-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.olc-pkg-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	max-width: 100%;
	min-height: 30px;
	padding: 0 10px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	color: var(--gray-900);
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
}

.olc-pkg-chip:hover { background: var(--gray-50); }
.olc-pkg-chip b { color: var(--gray-700); font-family: var(--font-en); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

.olc-curr-link { display: inline-block; margin-top: 20px; }

/* ≥1600 — 3열 셸. 헤더 진행률 링은 여기서만 숨기고 우측 스테퍼가 대신한다(결정 #11 예외) */
/*
 * 1080~1599 — 좌측 「문의 유형」만 살린다(2026-09-08 운영자 요청).
 *
 * 3열(1600 고정)은 이 폭에 안 들어가지만 2열은 들어간다: 280 + 여백 12 + 대화 708 = 1000.
 * ⚠️ .olc-app 은 `container: olc / inline-size` 다 — 폭이 흔들리면 @container 규칙이 어긋난다.
 *    전환점은 599 / 600 / 379 세 곳뿐이라 708 은 720 과 **같은 편**이다(말풍선 560·달력 434 그대로).
 *    폭은 칸이 정하게 두고(width:100%) 여백은 칸 쪽에서 낸다.
 * ⚠️ 진행도 링(.olc-progress)은 여기서 **숨기지 않는다** — 우측 스테퍼가 아직 없다.
 */
@media (min-width: 1080px) and (max-width: 1599.98px) {
	.olc-page {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
		/* ⭐ 열 경계 280 / 1000 — /biz/meeting/ 과 **같은 값**이다(2026-09-08 운영자 결정).
		   좌측 패널이 두 페이지에서 같은 자리에 있어야 항목을 눌러도 안 움직인다. */
		width: min(1000px, calc(100% - 60px));
		height: 100vh;
		height: 100dvh;
		margin: 0 auto;
	}
	.olc-page > .olc-nav { grid-column: 1; display: flex; }
	/*
	 * 나비와 본문 사이는 **여백 28**이다 — 선을 긋지 않는다(2026-09-09 운영자 결정).
	 * 미팅 예약도 같은 방식이고(.omb-shell padding-left: 28px) 그쪽 본문 열도 692 다.
	 */
	.olc-page > .olc-content { grid-column: 2; padding-left: 12px; }
	/*
	 * 칸은 708 이다(셸 1000 - 나비 280 - 12). 폭을 100% 로 두면 기준면이 흔들리지 않는다.
	 * ⭐ 12 + 앱 안쪽 여백 16 = 28 — **글이 시작하는 x** 가 미팅 예약과 같아진다(2026-09-09 실측 교정).
	 *    앱 상자 왼쪽 모서리는 선도 배경도 없어 보이지 않는다. 눈에 보이는 것은 글의 자리다.
	 *    상자 오른쪽 끝(12+708=720)은 그대로라 ≥1600 의 세로선과 우측 패널 600 이 안 움직인다.
	 */
	.olc-content > .olc-app { width: 100%; height: 100%; margin: 0; border-inline: 0; }
}

@media (min-width: 1600px) {
	.olc-page {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr); /* 행은 뷰포트 높이로 고정 — FAQ 를 펼쳐도 패널만 스크롤 */
		/* ⭐ 열 경계 280 / 1000 / 1600 — /biz/meeting/ 과 같은 값. 거터도 같은 30px 씩이라
		   화면이 정확히 1600 이어도 좌측 패널이 창 끝에 붙지 않는다(예전엔 나비에 padding 을 덧대 알약이 256 이었다). */
		width: min(1600px, calc(100% - 60px));
		height: 100vh;
		height: 100dvh;
		margin: 0 auto;
	}
	.olc-page > .olc-nav { grid-column: 1; }

	/*
	 * 본문 = [여백 12][대화 708][우측 패널 600]. 1600 - 나비 280 = 1320 을 그렇게 나눈다.
	 * 12 + 앱 안쪽 여백 16 = 28 이라 글이 시작하는 x 가 미팅 예약과 같다.
	 * 나비와 대화 사이는 여백만 두고 선을 긋지 않는다(2026-09-09 운영자 결정) —
	 * 미팅 예약이 그렇고, 그쪽도 글이 나비 오른쪽에서 28 떨어진 자리에서 시작한다.
	 * 대화와 우측 패널 사이 선은 **남긴다**. 거기는 성격이 다른 두 영역의 경계다.
	 * 대화 칸은 px 로 못 박는다 — .olc-app 이 컨테이너 쿼리 기준면이라 흔들리면 안 된다.
	 */
	.olc-page > .olc-content { grid-column: 2; display: grid; grid-template-columns: 708px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding-left: 12px; }
	.olc-content > .olc-app { width: 708px; max-width: none; height: 100%; margin: 0; border-left: 0; border-right: var(--hairline); }
	.olc-content > .olc-side { grid-column: 2; }
	.olc-nav, .olc-side { display: flex; }
	.olc-page .olc-progress { display: none; }
}

/* ── 모션 감속 ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.olc-typing i { animation: none; opacity: .6; }
	.olc-prog-val { transition: none; }
	.olc-btn:active { transform: none; }
	.olc-btn, .olc-chip { transition: none; }
	.olc-faq-q svg, .olc-curr-q > svg { transition: none; }
}

/* ── [hidden] 가드 — chat.js 는 hidden 속성으로 상태를 전환한다(패널 슬라이드·접힘 포함). 항상 마지막 ───
   ⚠️ 예외 하나: .olc-pkg-detail 안의 [hidden] 은 위에서 visibility 로 다시 칠한다(자리 높이 기준을 잡으려고).
   이 가드를 !important 나 더 높은 특이도로 바꾸면 시간대 상세 출렁임이 조용히 돌아온다 */
/*
 * ── 좁은 화면 — 문의 유형을 대화 위 드롭다운으로 ─────────────────
 *
 * 1080 아래에서는 좌측 패널이 사라져 다른 창구로 갈 길이 없었다. 접어서 대화 위에 둔다.
 * ⚠️ .olc-app 은 base 에서 100dvh 를 갖는다 — 위에 줄을 하나 얹으면 그만큼 화면을 넘긴다.
 *    그래서 높이를 .olc-page 가 쥐고 앱은 **남는 높이**를 받게 바꾼다.
 * ⚠️ 미팅 예약의 .omb-sidenav-drop 이 같은 장치다(booking.css). 고칠 때는 함께 고친다.
 */
.olc-nav-drop > summary { display: block; list-style: none; }
.olc-nav-drop > summary::-webkit-details-marker { display: none; }
.olc-nav-chev { display: none; }

@media (max-width: 1079.98px) {
	.olc-page { display: flex; flex-direction: column; }
	.olc-page > .olc-nav {
		display: flex;
		flex: none;
		width: min(720px, 100%);
		margin-inline: auto;
		/* 펼친 목록이 대화를 다 밀어내지 않게 — 넘치면 목록만 스크롤한다 */
		max-height: 60dvh;
		padding: 12px 16px;
		border-bottom: var(--hairline);
		overflow-y: auto;
	}
	/* height:100% 를 지운다 — base 규칙이다. 두면 basis 가 뷰포트 전체라 나비 높이만큼 넘친다 */
	.olc-page > .olc-content { flex: 1 1 auto; min-height: 0; height: auto; }
	.olc-content > .olc-app { height: 100%; }
	.olc-nav-home { display: none; }

	.olc-nav-drop > summary {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 12px 14px;
		border: 1px solid var(--gray-200);
		border-radius: var(--radius-lg);
		cursor: pointer;
	}
	.olc-nav-drop[open] > summary { margin-bottom: 8px; }

	.olc-nav-chev {
		display: block;
		flex: none;
		margin-inline-start: auto;
		color: var(--gray-500);
		transition: transform var(--transition-fast);
	}
	.olc-nav-drop[open] .olc-nav-chev { transform: rotate(180deg); }
}

/* 대화 칸에 세로 hairline 이 서는 구간에서는 그 위 드롭다운도 같은 선을 갖는다 */
@media (min-width: 752px) and (max-width: 1079.98px) {
	.olc-page > .olc-nav { border-inline: var(--hairline); }
}

.olc-page [hidden], .olc-app [hidden] { display: none; }