@charset "UTF-8";
/*
 * 오빠두 미팅 예약 — /meeting/ (시안 v2 재스킨, 2026-09-08)
 *
 * 이 페이지는 테마 CSS 를 싣지 않는 독립 문서다. 그래서 디자인 시스템 v3 토큰을
 * 여기 :root 에 그대로 복사해 쓴다 — 라이브 테마의 동명이값 충돌(--radius-lg 16px)이
 * 닿지 않는 유일한 트랙이다.
 *
 * 규칙(v3):
 *   · 그림자 0건 — 구획은 hairline 으로만 나눈다
 *   · 완전 원형은 아바타 · 날짜 칸 · 스피너뿐
 *   · 포커스와 오류는 한 겹 (outline 과 border 를 겹치지 않는다)
 *   · !important 0건 · 그라디언트 0건 · ambient 무한 애니메이션 0건
 *
 * 주의: CSS 주석 안에 별표와 슬래시를 붙여 쓰지 않는다. 주석이 거기서 끝나 버려
 *       :root 를 통째로 죽인 전례가 있다.
 */

:root {
	/* Jade */
	--primary-50:  #E4EFEA;
	--primary-100: #D5E6DF;
	--primary-500: #059669;
	--primary-600: #047E57;
	--primary-700: #036546;
	--primary-800: #034C35;

	/* Neutral */
	--gray-100: #F0F0ED;
	--gray-200: #E6E6E2;
	--gray-300: #D4D4CF;
	--gray-500: #8A8A85;
	--gray-700: #45453F;
	--gray-900: #1B1B18;

	/* Semantic */
	--error:      #D14343;
	--error-bg:   #FBE6E6;
	--error-text: #A82F2F;

	--bg-surface: #FFFFFF;
	--fg-strong:  var(--gray-900);
	--fg-on-primary: #FFFFFF;
	--fg-link:       var(--primary-600);
	--fg-link-hover: var(--primary-700);
	--hairline: 1px solid var(--gray-200);

	/* 좌측 문의유형 패널 — 커뮤니티·위키와 같은 6색 */
	--sidenav-active-bg:   #E4EFEA;
	--sidenav-active-text: #151B1B;
	--sidenav-active-icon: #036546;
	--sidenav-text:        #5A6663;
	--sidenav-icon:        #98A3A0;
	--sidenav-hover-bg:    #F6F8F7;

	/* Radius */
	--radius-sm:   2px;
	--radius-md:   6px;
	--radius-lg:   8px;
	--radius-xl:  12px;
	--radius-pill: 9999px;

	/* Type */
	--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;
	--font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	/* h1 스케일은 두지 않는다 — 헤더 이름 줄이 챗봇과 같은 18px 이다(아래 .omb-agent-name) */
	--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-h3:      1.4;
	--lh-body:    1.7;
	--lh-ui:      1.5;

	--ls-h3:      -0.012em;
	--ls-eyebrow:  0.16em;

	/*
	 * ⭐ 셸 규격은 「/biz/lecture-chat/」 과 **같다**(2026-09-08 운영자 결정).
	 *    열 경계 280 / 1000 / 1600, 거터 30px 씩.
	 *
	 *      ≥1600 : [문의 유형 280][예약 본문 720][담당자 남는 폭 ≈600]
	 *      <1600 : [문의 유형 280][예약 본문 720]  · 담당자는 본문 위 가로 밴드
	 *
	 * ⚠️ 좌측 패널이 두 페이지에서 같은 자리·같은 폭이어야 항목을 눌러도 움직이지 않는다.
	 *    폭을 고칠 때는 chat.css 의 셸 미디어 블록 두 개를 함께 고친다.
	 * ⚠️ 본문 720 은 챗봇 대화 폭이다. 달력(352)과 시간 목록을 나란히 놓는 데 632 가 필요하니 여유가 있다.
	 */
	--container-gutter: 30px;

	--transition-fast: 150ms ease;
	--transition-base: 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: 0ms;
		--transition-base: 0ms;
	}
}

@media (max-width: 1024px) {
	:root { --container-gutter: 24px; }
}

@media (max-width: 768px) {
	/* 헤더 이름 줄(--fs-body-lg)은 여기서 줄이지 않는다 — 챗봇은 18px 을 유지해서 두 헤더 높이가 1.3px 어긋났다(실측).
	   좁은 화면 축소는 599 아래에서 16px 로 한 번만 한다(챗봇 @container 와 같은 지점). */
	:root { --container-gutter: 20px; }
}

@media (max-width: 480px) {
	:root {
		--container-gutter: 16px;
	}
}

/* ── 리셋 ─────────────────────────────────────────────────
 * 테마 CSS 가 없으므로 이게 없으면 링크 버튼에 밑줄이 생기고 박스 계산이 어긋난다.
 */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg-surface);
	color: var(--gray-700);
	font-family: var(--font-kr);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-text-size-adjust: 100%;
}

a { color: var(--fg-link); }
a:hover { color: var(--fg-link-hover); }

button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

input::placeholder, textarea::placeholder { color: var(--gray-700); opacity: 1; }

:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }

img { max-width: 100%; height: auto; }

/* ── 셸 ───────────────────────────────────────────────────
 * 카드도 그림자도 없다. 흰 바탕 위에 문서가 흐른다.
 */
.omb-body { padding: 0; }

/*
 * 좌측 「문의 유형」 + 본문 2단.
 * 본문 basis 를 auto 로 두지 않는다 — max-content(880px)를 요구해서 768px 에서도 나비가 떨어져 나간다.
 */
.omb-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	/* 열 사이 간격은 0 이다 — 경계를 280/1000/1600 에 정확히 맞추려고. 시각적 여백은 각 열 안에서 준다. */
	gap: 0;
	width: min(1000px, calc(100% - 2 * var(--container-gutter)));
	margin-inline: auto;
}

@media (min-width: 1600px) {
	.omb-row { width: min(1600px, calc(100% - 2 * var(--container-gutter))); }
}

.omb-sidenav {
	flex: 0 0 280px;
	max-width: 280px;
	min-width: 0;
	padding: 28px 0 40px;
}

.omb-content {
	/*
	 * ⚠️ basis 를 0 으로 둔다. auto 로 두면 basis 가 **내용 크기**라 900px 언저리에서
	 *    나비 280 + 내용 폭 합이 줄을 넘겨 본문이 통째로 나비 아래로 떨어졌다(실측).
	 *    0 이면 항상 남는 폭을 받으므로 줄바꿈은 아래 미디어 블록이 정한 지점에서만 일어난다.
	 */
	flex: 1 1 0;
	min-width: 0;
	/* 위쪽 여백은 .omb-head 가 직접 갖는다 — 챗봇 헤더와 값을 맞추려면 한 상자 안에 있어야 한다 */
	padding: 0 0 80px;
}
/*
 * 제목·알림은 28px 들여 쓴다(좌측 패널과 본문이 맞닿아 있어서).
 * 다만 .omb-main 은 그 들여쓰기를 되물러 열 경계를 280/1000/1600 에 정확히 맞춘다 —
 * 안쪽 여백은 .omb-body-col 과 .omb-rail 이 각자 갖는다.
 */
.omb-shell { max-width: none; padding-left: 28px; }

/* ── 문의 유형 목록 — 색은 --sidenav-* 6개가 정본 ──────── */
.omb-sidenav-home { display: block; margin: 0 0 24px 11px; line-height: 0; }
.omb-sidenav-logo { display: block; width: 96px; height: auto; }

.sidenav-label {
	margin: 0 0 8px 11px;
	color: var(--gray-700);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
}

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

.sidenav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border-radius: var(--radius-lg);
	color: var(--sidenav-text);
	font-size: var(--fs-ui);
	font-weight: var(--fw-regular);
	line-height: var(--lh-ui);
	text-decoration: none;
	transition: background-color var(--transition-fast);
}

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

/* 자물쇠는 오른쪽 끝에 붙어 「코드가 필요하다」를 미리 알린다 */

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

.sidenav-item.is-active {
	background: var(--sidenav-active-bg);
	color: var(--sidenav-active-text);
	font-weight: var(--fw-bold);
}

.sidenav-item.is-active > svg { color: var(--sidenav-active-icon); }

/* 자리표시 — 아직 창구가 없는 문의 유형 */
.sidenav-item[aria-disabled="true"] { color: var(--gray-500); cursor: default; }
.sidenav-item[aria-disabled="true"] > svg { color: var(--gray-300); }

/*
 * 헤더 치수는 챗봇 「/biz/lecture-chat/」 의 .olc-header 와 같다(2026-09-08 운영자 결정).
 * 아바타 44 + [브랜드 12 / 이름 18 / 보조문 12], 줄 간격 1px. 값은 전부 그쪽과 같다.
 * 좌우 padding 만 0 이다 — 챗봇은 테두리 있는 앱 상자 안이라 16px 을 갖지만
 * 여기는 문서 흐름이고 좌우 여백은 이미 .omb-content 가 만든다.
 */
/*
 * ⭐ 헤더 상자의 세로 규격 — 위 28 / 내용 / 아래 14 / hairline.
 *    챗봇 「/biz/lecture-chat/」 의 .olc-header 가 **같은 값**을 쓴다(2026-09-09 운영자 결정).
 *    좁은 화면(≤1079)에서는 둘 다 위 20 이다. 고칠 때는 chat.css 를 함께 고친다.
 */
.omb-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	padding: 28px 0 14px;
	border-bottom: var(--hairline);
}

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

/* 아바타 — 완전 원형이 허용되는 대상이다 */
.omb-avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--primary-50);
	color: var(--primary-700);
	font-size: 16px;
	font-weight: var(--fw-bold);
	line-height: 1;
}

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

/* = 챗봇 .olc-brand */
.omb-brand {
	margin: 0;
	color: var(--primary-600);
	font-size: 12px;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

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

/* = 챗봇 .olc-agent-name (18 / 700 / 1.3 / -.012em) */
.omb-agent-name {
	margin: 0;
	color: var(--fg-strong);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-h3);
	line-height: 1.3;
}

/*
 * = 챗봇 .olc-agent-status 와 같은 모양 — 다른 건 점 색뿐이다.
 * 챗봇의 초록 점은 「지금 응대 중」이지만 여기 빨간 점은 「아직 못 들어온다」다.
 * 코드가 통과한 뒤에는 이 배지를 아예 그리지 않는다(page.php).
 */
.omb-agent-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 8px;
	color: var(--gray-700);
	font-size: 12px;
	font-weight: var(--fw-regular);
	letter-spacing: 0;
	vertical-align: middle;
}

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

/* = 챗봇 .olc-sub (12 / 1.45) */
.omb-sub {
	margin: 0;
	color: var(--gray-700);
	font-size: 12px;
	line-height: 1.45;
}

/* 확인 메일 링크로 열렸다는 것만 한 줄로 말한다 */
.omb-context {
	margin: 0 0 24px;
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	color: var(--gray-700);
}

/* ── 알림 (상태 I) ────────────────────────────────────── */
.omb-alert,
.omb-alert-error {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 24px;
	padding: 16px;
	border-radius: var(--radius-lg);
	background: var(--error-bg);
}

.omb-alert:focus { outline: none; }
.omb-alert:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }

.omb-alert-icon {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--error);
}

.omb-alert-text { min-width: 0; }

.omb-alert-text strong {
	display: block;
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: var(--lh-h3);
	color: var(--error-text);
}

.omb-alert-text p {
	margin: 4px 0 0;
	font-size: var(--fs-ui);
	line-height: 1.6;
	color: var(--error-text);
}

/* ── 본문 2열 ─────────────────────────────────────────── */
/*
 * 기본(<1600)은 세로 — 담당자가 본문 **위** 가로 밴드로 온다.
 * ⚠️ 화면(시간 고르기 / 정보 입력)이 아니라 **뷰포트 폭**이 이것을 정한다.
 *    화면마다 바꾸면 같은 창에서 본문 폭이 널뛴다(2026-09-08 운영자 지적).
 */
.omb-main {
	display: flex;
	flex-flow: column;
	gap: 24px 0;
	margin-left: -28px;
	width: calc(100% + 28px);
}

.omb-main > .omb-body-col { padding-left: 28px; }
.omb-main > .omb-rail { order: -1; margin-left: 28px; }

/* 담당자 — 기본은 본문 위 가로 밴드, ≥1600 에서만 오른쪽 열이 된다 */
.omb-rail {
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);

	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	grid-template-areas:
		"label info"
		"host  info";
	gap: 6px 28px;
	align-items: center;
}

.omb-rail-label { grid-area: label; align-self: end; }
.omb-host       { grid-area: host; align-self: start; }

/* 취소 규정은 예약 직전에 필요하다 — 가로 밴드에서는 빼서 안내를 한 줄로 맞춘다 */
.omb-rail-row[data-row="cancel"] { display: none; }

.omb-body-col { min-width: 0; }

/* 밴드일 때 안내 줄은 가로로 편다 — 라벨을 값 위에 얹어 한 덩어리로 읽히게 */
.omb-rail-dl {
	grid-area: info;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px 24px;
	margin: 0;
}

.omb-rail-row {
	display: block;
	padding: 0;
	border-top: 0;
}

.omb-rail-dt { margin-bottom: 2px; }

/* 좁아지면 사진 옆에 안내를 둘 자리가 없다 — 한 열로 쌓는다 */
@media (max-width: 680px) {
	.omb-rail {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"label"
			"host"
			"info";
		gap: 12px;
	}
	.omb-rail-label { align-self: start; }
}

/*
 * ≥1600 — 담당자가 본문 오른쪽 열로 간다(챗봇의 우측 패널과 같은 자리).
 * 열 경계는 280 / 1000 / 1600. 대화 폭 720 만 px 로 못 박고 나머지를 담당자가 쓴다.
 */
/*
 * 코드 화면의 문의처 카드는 본문 **아래**에 둔다(담당자 카드는 위).
 * 여기서 지금 할 일은 코드를 넣는 것 하나뿐이라, 위에 카드를 얹으면 입력칸이 화면 밖으로 밀린다(430 실측).
 * 담당자 카드가 위로 가는 것은 달력을 고를 때 「누구와의 미팅인지」가 먼저 필요해서다 — 여기는 그게 아니다.
 */
@media (max-width: 1599.98px) {
	.omb-main > .omb-rail--contact {
		order: 1;
		/* 팀 블록이 없다 — 「라벨 / 안내」 두 줄로 세운다(담당자 벌의 "label host / info" 2열이 아니라) */
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"label"
			"info";
		gap: 12px;
	}
}

@media (min-width: 1600px) {
	.omb-main {
		display: grid;
		/*
		 * 900 — 달력(352) 옆 시간 목록에 5열을 주려고 넓힌 값이다(2026-09-08 운영자 결정).
		 *   900 - 352(달력) - 32(간격) = 516 → 92px 칸 5개 + 간격 8×4 = 492 가 들어간다.
		 * ⚠️ 좌측 패널 280 과 셸 1600 은 「/biz/lecture-chat/」 과 같은 값 그대로다 —
		 *    패널이 움직이지 않는 것이 통일의 핵심이고, 넓어지는 것은 본문 안쪽뿐이다.
		 */
		grid-template-columns: 900px minmax(0, 1fr);
		gap: 0;
	}

	/*
	 * 시간은 5열로 못 박는다 — auto-fill 에 맡기면 달력 열 폭이 조금만 흔들려도 4열·6열로 널뛴다.
	 * ⚠️ 선택자를 .omb-picker 로 한 겹 올린다. 원본 .omb-times 규칙이 이 블록보다 **뒤에** 있어서
	 *    같은 특이도로는 미디어 쿼리 안이어도 순서에 진다(실측: 5열이 안 먹고 4열로 나왔다).
	 */
	.omb-picker .omb-times { grid-template-columns: repeat(5, minmax(0, 1fr)); }

	.omb-main > .omb-body-col { grid-column: 1; }
	.omb-main > .omb-rail {
		order: 0;
		grid-column: 2;
		align-self: start;
		margin-left: 32px;
		display: block;
	}
	.omb-rail-label { margin: 0 0 12px; }
	.omb-rail-dl { display: block; margin: 16px 0 0; }
	.omb-rail-row { display: flex; padding: 9px 0; border-top: var(--hairline); }
	.omb-rail-row[data-row="cancel"] { display: flex; }
	.omb-rail-dt { margin-bottom: 0; }
}

/* ── 담당자 레일 ──────────────────────────────────────── */
.omb-rail-label {
	margin: 0 0 12px;
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	color: var(--gray-700);
}

.omb-host {
	display: flex;
	align-items: center;
	gap: 12px;
}

.omb-host-photo {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-pill);
	object-fit: cover;
}

.omb-host-photo-text {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--primary-50);
	color: var(--primary-800);
	font-size: 24px;
	font-weight: var(--fw-bold);
	line-height: 1;
}

.omb-host-id { min-width: 0; }

.omb-host-name {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: var(--lh-ui);
	color: var(--gray-900);
	overflow-wrap: anywhere;
}

.omb-host-role {
	margin: 2px 0 0;
	font-size: var(--fs-caption);
	line-height: var(--lh-ui);
	color: var(--gray-700);
}

.omb-rail-dl { margin: 16px 0 0; }

.omb-rail-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
	padding: 9px 0;
	border-top: var(--hairline);
}

.omb-rail-dt {
	flex: 0 0 68px;
	margin: 0;
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
	color: var(--gray-700);
}

.omb-rail-dd {
	flex: 1 1 150px;
	min-width: 0;
	margin: 0;
	font-size: var(--fs-ui);
	line-height: var(--lh-body);
	color: var(--gray-900);
	overflow-wrap: anywhere;
}

.omb-rail-dd2 {
	display: block;
	font-size: var(--fs-caption);
	color: var(--gray-700);
}

.omb-rail-link {
	color: var(--primary-700);
	text-decoration: none;
}

.omb-rail-link:hover {
	text-decoration: underline;
}

/* ── 상태 M — 초청 코드 ───────────────────────────────── */
/*
 * 코드 한 줄만 받는 화면이라 본문 왼쪽에 붙여 두면 화면이 한쪽으로 쏠린다.
 * 열을 400 으로 좁혀 **본문 칸 가운데**에 세운다(2026-09-08 운영자 결정).
 * 오른쪽 문의처 카드는 그 바깥이므로 이 가운데맞춤에 끼어들지 않는다.
 * 글줄은 왼쪽 정렬로 둔다 — 두 줄짜리 한국어 문단은 가운데 정렬하면 읽는 자리가 매 줄 달라진다.
 */
.omb-gate {
	max-width: 400px;
	margin-inline: auto;
}

/* 안내 한 줄은 라벨 바로 아래에 붙는다 — 위에 따로 안내 덩어리를 두지 않는다 */
.omb-code-help {
	margin: 0 0 10px;
	font-size: var(--fs-caption);
	line-height: 1.6;
	color: var(--gray-700);
}

.omb-code-label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	color: var(--gray-700);
}

/* placeholder 를 두지 않는다 — 대비를 8.70:1 로 올린 상태에서는 어떤 문자열도
   「이미 입력된 값」으로 읽힌다. 라벨이 역할을 다 한다. */
.omb-code-input {
	width: 100%;
	/* 16px 미만이면 iOS 사파리가 입력 순간 화면을 확대한다 — 그래서 여기만 스케일 밖 값이다 */
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--gray-500);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	color: var(--gray-900);
	font-family: var(--font-mono);
	font-size: 16px;
	font-weight: var(--fw-semibold);
	/* 146행의 font:inherit 가 본문 행간 1.7 을 들고 온다 — 명시하지 않으면 칸이 51px 로 부푼다 */
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: border-color var(--transition-fast);
}

.omb-code-input:hover { border-color: var(--gray-700); }
.omb-code-input[aria-invalid="true"] { border-color: var(--error); }

.omb-err-msg {
	margin: 8px 0 0;
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	color: var(--error-text);
}

/* 이 화면의 버튼만 줄인다 — 다른 화면의 제출 버튼(52 / 16)은 그대로 둔다 */
.omb-code-form .omb-submit {
	margin-top: 14px;
	min-height: 44px;
	padding: 11px 20px;
	font-size: var(--fs-ui);
}

/* ── 상태 A · B — 날짜·시간 ───────────────────────────── */
.omb-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px 32px;
}

.omb-cal-col {
	flex: 1 1 300px;
	min-width: 0;
	max-width: 352px;
}

.omb-time-col {
	flex: 1 1 300px;
	min-width: 0;
}

.omb-cal-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.omb-cal-nav {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--gray-500);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	color: var(--gray-900);
	font-size: 18px;
	line-height: 1;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.omb-cal-nav:hover:not(:disabled) { background: var(--gray-100); }

.omb-cal-nav:disabled {
	border-color: var(--gray-300);
	color: var(--gray-500);
	cursor: default;
}

.omb-cal-month {
	flex: 1 1 auto;
	text-align: center;
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	color: var(--gray-900);
}

.omb-cal-wd {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	margin-bottom: 4px;
	text-align: center;
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	line-height: 2;
	color: var(--gray-700);
}

.omb-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	justify-items: center;
	gap: 4px;
}

/*
 * 열린 날은 원이다 — 그러려면 칸이 정사각이어야 한다.
 *
 * ⚠️ 폭을 트랙에 맡기고 높이만 44px 로 고정하면 트랙이 넓은 화면에서 가로로 늘어난다:
 *    달력 열이 352px 이면 트랙이 46.9px 라 46.9 × 44 타원이 됐다(실측).
 *    그래서 aspect-ratio 로 정사각을 만들고, 넘침은 min-height 대신 max-width 로 막는다
 *    (예전에 넘쳤던 이유는 min-height: 44px 가 정사각의 최소 **폭**까지 44px 로 밀었기 때문이다).
 */
.omb-day {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 44px;
	min-width: 0;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--gray-500);
	font-size: 15px;
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
	cursor: default;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.omb-day-empty { visibility: hidden; }

/* 오늘이지만 못 여는 날 — 색 면 없이 굵기만으로 위치를 알린다 */
.omb-day-today {
	color: var(--gray-900);
	font-weight: var(--fw-bold);
}

.omb-day-open {
	border: 1px solid var(--primary-500);
	background: var(--primary-50);
	color: var(--primary-800);
	cursor: pointer;
}

.omb-day-open:hover {
	border-color: var(--primary-700);
	background: var(--primary-100);
}

.omb-day-open[aria-pressed="true"] {
	border-color: var(--primary-600);
	background: var(--primary-600);
	color: var(--fg-on-primary);
}

/* 미팅 길이 — 붙은 세그먼트가 아니라 낱개 칩이다 */
.omb-block { margin-bottom: 20px; }

.omb-block-label {
	display: block;
	margin: 0 0 8px;
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	color: var(--gray-700);
}

.omb-seg {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.omb-seg-btn {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--gray-500);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	color: var(--gray-900);
	font-size: var(--fs-ui);
	font-weight: var(--fw-semibold);
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.omb-seg-btn:hover { background: var(--gray-100); }

.omb-seg-btn[aria-pressed="true"] {
	border-color: var(--primary-600);
	background: var(--primary-50);
	color: var(--primary-800);
}

/* 시간 목록 — 3열 그리드. 20개가 7행에 들어가므로 스크롤 컨테이너가 필요 없다
   (그래서 포커스 링이 잘리는 자리도 없다). */
.omb-sec-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 2px 12px;
	margin-bottom: 8px;
}

.omb-cal-hint {
	margin: 0;
	font-size: var(--fs-caption);
	line-height: var(--lh-ui);
	color: var(--gray-700);
}

.omb-datebar {
	margin: 0;
	font-size: 17px;
	font-weight: var(--fw-bold);
	line-height: var(--lh-h3);
	letter-spacing: -0.01em;
	color: var(--gray-900);
}

.omb-sec-meta {
	margin: 0;
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	color: var(--gray-700);
}

.omb-tz {
	margin: 0 0 12px;
	font-size: var(--fs-caption);
	line-height: var(--lh-ui);
	color: var(--gray-700);
}

.omb-times {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 8px;
}

.omb-time {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 8px;
	border: 1px solid var(--gray-500);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	color: var(--gray-900);
	font-size: 15px;
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.omb-time:hover {
	border-color: var(--primary-700);
	background: var(--primary-50);
	color: var(--primary-800);
}

.omb-time[aria-pressed="true"] {
	border-color: var(--primary-600);
	background: var(--primary-600);
	color: var(--fg-on-primary);
}

/* ── 상태 C — 정보 입력 ───────────────────────────────── */
.omb-summary {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 6px 16px;
	margin-bottom: 24px;
	padding: 14px 16px;
	border-radius: var(--radius-lg);
	background: var(--primary-50);
}

.omb-summary-when {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: var(--lh-ui);
	color: var(--primary-800);
}

.omb-back {
	flex: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--primary-700);
	font-size: var(--fs-ui);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.omb-field {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.omb-grid2 {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.omb-grid2 > .omb-field {
	flex: 1 1 180px;
	min-width: 0;
}

.omb-req { color: var(--error-text); }

.omb-modes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.omb-mode {
	display: flex;
	flex: 1 1 150px;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--gray-500);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.omb-mode input[type="radio"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--primary-600);
}

.omb-mode-box { min-width: 0; }

.omb-mode-name {
	display: block;
	font-size: 15px;
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	color: var(--gray-900);
}

.omb-mode-desc {
	display: block;
	font-size: var(--fs-caption);
	line-height: var(--lh-ui);
	color: var(--gray-700);
}

.omb-mode.is-on {
	border-color: var(--primary-600);
	background: var(--primary-50);
}

.omb-hint {
	display: block;
	margin: 8px 0 0;
	font-size: var(--fs-caption);
	line-height: 1.6;
	color: var(--gray-700);
}

/* 입력칸은 16px 밑으로 내리지 않는다 — 아이폰이 탭할 때 화면을 확대하고 돌아오지 않는다 */
.omb-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--gray-500);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	color: var(--gray-900);
	font-size: 16px;
	line-height: var(--lh-ui);
	overflow-wrap: anywhere;
	transition: border-color var(--transition-fast);
}

.omb-input:hover { border-color: var(--gray-700); }
.omb-input[aria-invalid="true"] { border-color: var(--error); }

.omb-textarea {
	min-height: 120px;
	line-height: var(--lh-body);
	resize: vertical;
}

/* 화살표는 배경 이미지로 그린다 — 브라우저 기본 화살표는 OS 마다 크기·색이 제각각이다 */
.omb-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6663' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
	cursor: pointer;
}

/* 「기타」를 골랐을 때만 열리는 칸 */
.omb-field-sub { margin-top: 12px; }

/* 스크롤 박스로 감싸지 않는다 — 포커스 링이 잘린다 */
.omb-privacy-box {
	padding: 14px 16px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	font-size: var(--fs-ui);
	line-height: 1.8;
	color: var(--gray-700);
}

.omb-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 12px 14px;
	border: 1px solid var(--gray-500);
	border-radius: var(--radius-md);
	font-size: 15px;
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	color: var(--gray-900);
	cursor: pointer;
	transition: border-color var(--transition-fast);
}

.omb-check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--primary-600);
}

.omb-check[data-invalid="true"] { border-color: var(--error); }

.omb-error {
	margin: 0 0 16px;
	padding: 14px 16px;
	border-radius: var(--radius-lg);
	background: var(--error-bg);
	font-size: 15px;
	font-weight: var(--fw-semibold);
	line-height: 1.6;
	color: var(--error-text);
}

.omb-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	padding: 14px 24px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--primary-600);
	color: var(--fg-on-primary);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	transition: background-color var(--transition-fast);
}

.omb-submit:hover { background: var(--primary-700); }

.omb-submit[aria-busy="true"] {
	background: var(--primary-700);
	cursor: wait;
}

.omb-submit:disabled:not([aria-busy="true"]) {
	background: var(--gray-200);
	color: var(--gray-500);
	cursor: default;
}

.omb-submit-note {
	margin: 12px 0 0;
	text-align: center;
	font-size: var(--fs-caption);
	line-height: 1.6;
	color: var(--gray-700);
}

/* 이 페이지의 유일한 애니메이션.
   인라인 animation 으로 두면 prefers-reduced-motion 에서 !important 없이 못 끈다. */
.omb-spinner {
	flex: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: var(--radius-pill);
	animation: omb-spin .8s linear infinite;
}

@keyframes omb-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.omb-spinner { animation: none; }
}

/* ── 상태 D~H · L — 완료 · 관리 ───────────────────────── */
.omb-badge {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 10px;
	border-radius: var(--radius-md);
	background: var(--gray-100);
	color: var(--gray-700);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
}

.omb-badge-ok {
	background: var(--primary-50);
	color: var(--primary-700);
}

.omb-done-title {
	margin: 0;
	font-size: 22px;
	font-weight: var(--fw-bold);
	line-height: var(--lh-h3);
	letter-spacing: -0.015em;
	color: var(--gray-900);
}

.omb-done-lead {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: var(--lh-body);
	color: var(--gray-700);
}

.omb-dl { margin: 20px 0 0; }

.omb-dl-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 16px;
	padding: 14px 0;
	border-top: var(--hairline);
}

.omb-dt {
	flex: 0 0 88px;
	margin: 0;
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
	color: var(--gray-700);
}

/* pre-line 이 있어야 방문 목적의 줄바꿈이 읽기 화면에서도 살아 있다 */
.omb-dd {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
	color: var(--gray-900);
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.omb-dd strong {
	font-size: 17px;
	font-weight: var(--fw-bold);
}

.omb-link-box {
	display: block;
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	line-height: 1.6;
	color: var(--gray-700);
	white-space: normal;
	overflow-wrap: anywhere;
}

.omb-note {
	margin: 20px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	font-size: var(--fs-ui);
	line-height: 1.8;
	color: var(--gray-700);
}

.omb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.omb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--primary-600);
	color: var(--fg-on-primary);
	font-size: 15px;
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	text-decoration: none;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast);
}

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

.omb-btn-quiet {
	border: 1px solid var(--gray-500);
	background: var(--bg-surface);
	color: var(--gray-900);
}

.omb-btn-quiet:hover { background: var(--gray-100); color: var(--gray-900); }

.omb-btn-danger { background: var(--error); }
.omb-btn-danger:hover { background: var(--error); filter: brightness(.92); }

.omb-btn-sm { min-height: 42px; padding: 10px 20px; }

/* ── 상태 J — 빈 상태 · 로딩 ──────────────────────────── */
.omb-empty {
	padding: 24px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
}

.omb-empty p:not(.omb-muted) {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	color: var(--gray-900);
}

.omb-muted {
	margin: 8px 0 0;
	font-size: var(--fs-ui);
	line-height: var(--lh-body);
	color: var(--gray-700);
}

/* 정지 스켈레톤 — shimmer 를 넣지 않는다(v3 는 ambient 무한 애니메이션 금지).
   칸을 진짜 그리드 안에 그대로 넣는다 — 컨테이너를 하나 더 얹으면 그리드에서 한 칸만 차지한다. */
.omb-skel { background: var(--gray-100); }

.omb-skel-cal {
	min-height: 44px;
	border-radius: var(--radius-pill);
}

.omb-skel-list {
	min-height: 48px;
	border-radius: var(--radius-md);
}

/* ── 반응형 ───────────────────────────────────────────── */

/*
 * 나비+본문 2단은 컨테이너 688px 이상에서만 성립한다(뷰포트 748px).
 * 기준점을 그보다 **위**인 800 에 두고, basis 를 100% 로 눌러 확실히 적층시킨다.
 * 좁은 화면에서 할 일은 예약이지 목록 훑기가 아니므로 나비를 본문 아래로 보낸다.
 *
 * ⭐ 경계 1080 은 「/biz/lecture-chat/」 이 좌측 패널을 감추는 지점과 같다(2026-09-08).
 *    두 페이지가 같은 폭에서 「패널이 옆에 있음 / 없음」 을 바꾸도록 맞춘 값이다.
 *    챗봇은 감추고 미팅은 본문 아래로 내린다 — 미팅에는 다른 문의 유형으로 갈 유일한 길이라 지운다.
 */
@media (max-width: 1079.98px) {
	/*
	 * 문의 유형은 본문 **위**에 온다(2026-09-08 운영자 결정).
	 * 넓은 화면에서 왼쪽 맨 위에 있던 것이 좁아졌다고 화면 맨 아래로 내려가면,
	 * 다른 창구로 옮겨 갈 길이 스크롤 끝에 숨는다.
	 */
	.omb-sidenav {
		order: 0;
		flex-basis: 100%;
		max-width: none;
		padding: 20px 0 16px;
		border-bottom: var(--hairline);
	}
	.omb-content {
		order: 1;
		flex-basis: 100%;
		padding: 0 0 32px;
	}
	.omb-head { padding-top: 20px; }

	/*
	 * 28px 들여쓰기를 되돌린다.
	 *
	 * 그 들여쓰기는 좌측 패널이 **옆에 붙어 있을 때** 본문을 떼어 놓으려던 것이다(열 간격 0).
	 * 패널이 아래로 내려간 이 구간에서는 왼쪽만 44px, 오른쪽은 16px 이 되어 화면이 한쪽으로 쏠린다(실측).
	 */
	.omb-shell { padding-left: 0; }
	.omb-main { margin-left: 0; width: 100%; }
	.omb-main > .omb-body-col { padding-left: 0; }
	.omb-main > .omb-rail { margin-left: 0; }
	.omb-sidenav-home { display: none; }
}

/*
 * ── 좁은 화면 손질 ────────────────────────────────────
 *
 * ① 문의 유형은 접어 둔다. 다섯 항목이 296px 를 먹어 본문을 그만큼 밀어냈다(실측).
 *    펼침 여부는 nav.php 의 인라인 스크립트가 화면 폭으로 정한다 — 사용자가 접어 둔 채
 *    데스크톱으로 넘어가 목록을 잃는 일이 없게.
 *    ⚠️ 챗봇 「/biz/lecture-chat/」 의 .olc-nav-drop 이 같은 장치다. 고칠 때는 함께 고친다.
 */
.omb-sidenav-drop > summary { display: block; list-style: none; }
.omb-sidenav-drop > summary::-webkit-details-marker { display: none; }
.omb-sidenav-chev { display: none; }

@media (max-width: 1079.98px) {
	.omb-sidenav-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;
	}
	.omb-sidenav-drop[open] > summary { margin-bottom: 8px; }

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

/*
 * ② 달력이 본문 폭을 다 쓰게 한다.
 *
 * 달력 열은 max-width 352 로 묶여 있는데, 시간 목록이 아래로 내려간 구간에서는 그 352 가
 * 본문(398~580)보다 좁아 달력만 왼쪽에 몰려 보였다(실측). 두 열이 나란히 서려면 632 가
 * 필요하므로 본문 632 미만 — 즉 뷰포트 692 미만에서만 푼다. 그 위에서는 지금 균형을 지킨다.
 * 날짜 칸도 44 로 묶여 있어 함께 푼다(56 까지). 원 모양은 aspect-ratio 가 지킨다.
 */
/*
 * 챗봇은 대화 칸이 600 아래로 좁아지면 헤더를 줄인다(@container olc (max-width: 599px)).
 * 같은 손질을 여기에도 넣는다 — 두 헤더가 어느 폭에서도 같은 높이여야 한다.
 * 720 아래에서는 챗봇 대화 칸 = 뷰포트라 그쪽 전환점이 뷰포트 599.98 과 같다.
 * ⭐ 보조문은 감추지 않는다 — 「사전 승인」 을 말하는 유일한 줄이다(배너 제목을 뺐다).
 */
@media (max-width: 599.98px) {
	.omb-avatar { width: 40px; height: 40px; font-size: 15px; }
	.omb-agent-name { font-size: 16px; }
}

@media (max-width: 691.98px) {
	.omb-cal-col { max-width: 420px; }
	.omb-day { max-width: 56px; }
}

/* ── 유틸 ─────────────────────────────────────────────── */
/*
 * ⚠️ 맨 아래에 둔다. [hidden] 은 특이도가 (0,1,0) 이라 .omb-alert { display: flex } 같은
 *    같은 특이도의 클래스 선언에 **순서로** 진다. 앞에 두면 JS 로 감춘 요소가 그대로 보인다.
 */
[hidden] { display: none; }

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