/**
 * 비즈니스 문의 창구 (/biz/live/ · /biz/promo/ · /biz/etc/)
 *
 * ⭐ 이 페이지는 **테마 CSS 를 싣지 않는다**(parse_request 로 직접 그리는 독립 문서).
 *    그래서 디자인 시스템 v3 값을 :root 에 그대로 깔 수 있다 — 라이브 테마의 같은 이름 토큰
 *    (--radius-lg 16px 등)이 덮을 일이 없다. /biz/meeting/ · /biz/lecture-chat/ 과 같은 계열이다.
 *
 * ⚠️ 대신 **브라우저 기본 리셋도 없다.** margin·<a> 밑줄·<button> 글꼴을 직접 꺼야 한다.
 *    (미팅 예약에서 `<a class="btn">` 에 밑줄이 그대로 나온 선례)
 *
 * ⚠️ 좌측 패널 색은 `--sidenav-*` 6개가 정본이다(테마 style.css). 테마를 안 싣는 페이지라
 *    **값을 복사해 둔다** — 정본이 바뀌면 여기도 함께 고친다.
 */

/* ── 리셋 ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

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

a { color: inherit; text-decoration: none; }

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

/* ── 토큰 (디자인 시스템 v3 정본값) ─────────────────── */
:root {
	--primary-50: #E4EFEA;
	--primary-600: #047E57;
	--primary-700: #036546;
	--primary-800: #024A33;

	--gray-50: #F7F7F5;
	--gray-100: #F0F0ED;
	--gray-200: #E6E6E2;
	--gray-300: #D4D4CF;
	--gray-500: #8A8A85;
	--gray-600: #6B6B65;
	--gray-700: #45453F;
	--gray-900: #1B1B18;

	--surface: #FFFFFF;
	--error: #B42318;
	--error-bg: #FEF3F2;

	/* 좌측 패널 — 테마 style.css 의 --sidenav-* 정본값 복사 */
	--sidenav-active-bg: #E4EFEA;
	--sidenav-active-text: #151B1B;
	--sidenav-active-icon: #036546;
	--sidenav-text: #5A6663;
	--sidenav-icon: #98A3A0;
	--sidenav-hover-bg: #F6F8F7;

	--r-md: 6px;   /* 버튼·입력·배지 */
	--r-lg: 8px;   /* 카드 */

	--fast: 150ms ease;
	--font-kr: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

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

.obq-body {
	background: var(--surface);
	color: var(--gray-700);
	font-family: var(--font-kr);
	font-size: 16px;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

/* 스크린리더 전용 */
.obq-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── 뼈대 ───────────────────────────────────────── */
.obq-row {
	display: flex;
	align-items: flex-start;
	gap: 0 28px;
	max-width: 1260px;
	margin: 0 auto;
	padding: 24px 28px 80px;
}

.obq-content {
	flex: 1 1 auto;
	min-width: 0;
}

/* ⭐ 글 폭은 **여기 한 줄이 정본**이다. 브레이크포인트마다 덮지 않는다.
   720px 는 한 줄이 한눈에 읽히는 폭이다 — 넓은 화면에서 900px 이던 것을 줄였다
   (입력칸 한 줄이 길어 표처럼 보인다는 지적, 2026-09-16).
   ⛔ `.obq-row` 의 폭 계약(패널 280 · ≥1600 에서 1600)은 건드리지 않는다 —
      미팅 예약·챗봇과 좌측 패널이 픽셀까지 맞아야 갈아탈 때 로고가 튀지 않는다. */
.obq-shell {
	max-width: 720px;
}

/* 좁은 화면에서는 패널을 대화 **위**로 접어 올린다(미팅·챗봇과 같은 규칙) */
@media (max-width: 1079px) {
	.obq-row {
		flex-direction: column;
		gap: 0;
		padding: 16px 20px 64px;
	}
	.obq-nav { width: 100%; max-width: none; }
}

@media (max-width: 480px) {
	.obq-row { padding: 12px 16px 56px; }
}

/* ── 좌측 「문의 유형」 패널 ────────────────────────── */
.obq-nav {
	flex: 0 0 240px;
	width: 240px;
	padding-top: 4px;
}

.obq-nav-home {
	display: block;
	margin-bottom: 26px;
}

.obq-nav-logo { width: 96px; height: auto; }

.obq-nav-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	padding: 0 11px;
	color: var(--gray-600);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	list-style: none;
}

.obq-nav-label::-webkit-details-marker { display: none; }

/* 펼침 표시는 넓은 화면에서 숨긴다 — 거기서는 접을 수 없다(스크립트가 항상 편다) */
.obq-nav-label svg { transition: transform var(--fast); }
.obq-nav-drop[open] .obq-nav-label svg { transform: rotate(180deg); }

@media (min-width: 1080px) {
	.obq-nav-label { cursor: default; }
	.obq-nav-label svg { display: none; }
}

.obq-nav-hub {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	padding: 8px 11px;
	border-radius: var(--r-lg);
	color: var(--gray-600);
	font-size: 13.5px;
	font-weight: 600;
	transition: background-color var(--fast), color var(--fast);
}

.obq-nav-hub:hover { background: var(--sidenav-hover-bg); color: var(--primary-700); }

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

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

.obq-nav-item svg { flex: none; color: var(--sidenav-icon); }

a.obq-nav-item:hover { background: var(--sidenav-hover-bg); }

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

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

.obq-nav-item[aria-disabled="true"] { color: var(--gray-500); cursor: default; }

/* ── 머리 ───────────────────────────────────────── */
.obq-head { margin-bottom: 34px; }

.obq-eyebrow {
	margin: 0;
	color: var(--primary-700);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.obq-h1 {
	margin: 6px 0 0;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--gray-900);
}

.obq-intro {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--gray-600);
}

/* ── 폼 ────────────────────────────────────────── */
.obq-form { margin: 0; }

/* ── 묶음 ──────────────────────────────────────────
   ⭐ 열한 칸을 한 리듬으로 쌓으면 설문지가 된다. 세 덩이로 갈라 숨을 틔운다.
   ⛔ 카드로 감싸지 않는다 — v3 는 구획을 hairline 으로 긋는다(테두리+그림자를 겹치지 않는다).
   ⚠️ <fieldset>/<legend> 를 쓰지 않는 이유는 브라우저별 스타일 버그 때문이다.
      묶음을 쓰지 않는 창구(기타 문의)는 제목 없이 .obq-fields 하나만 나와 예전 그대로 그려진다. */
.obq-section { margin-bottom: 46px; }

.obq-section:last-of-type { margin-bottom: 0; }

/* 「1 / 3」 은 제목 **바로 옆**에 붙인다.
   ⚠️ 오른쪽 끝에 두면 sticky 진행률 고리와 같은 자리를 두고 다툰다(실측: 2 / 3 이 고리에 가렸다). */
.obq-section-h {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.obq-section-n {
	flex: none;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--gray-500);
	font-variant-numeric: tabular-nums;
}

.obq-section-t {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.4;
	color: var(--gray-900);
}

.obq-section-d {
	margin: 6px 0 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--gray-600);
}

.obq-section .obq-fields {
	margin-top: 18px;
	padding-top: 22px;
	border-top: 1px solid var(--gray-200);
}

.obq-field { margin-bottom: 22px; }

.obq-fields > .obq-field:last-child,
.obq-fields > .obq-pair:last-child { margin-bottom: 0; }

/* ── 한 줄에 둘 ─────────────────────────────────────
   메일 주소와 연락처는 짧아서 통짜 폭이면 화면만 길어진다. 나란히 두고 **한 걸음**으로 연다.
   ⚠️ 짝 중 한쪽만 설명이 있으면 입력칸 높이가 어긋난다 — 설명을 입력칸 **아래**로 내려 맞춘다.
      ⭐ order 로 보이는 자리만 바꾼다. DOM 순서와 aria-describedby 는 그대로다. */
.obq-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 16px;
	align-items: start;
	margin-bottom: 22px;
}

.obq-pair > .obq-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-bottom: 0;
}

.obq-pair > .obq-field .obq-hint { order: 2; margin: 7px 0 0; }

.obq-pair > .obq-field .obq-err { order: 3; }

@media (max-width: 560px) {
	.obq-pair { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
	.obq-pair > .obq-field { display: block; }
	.obq-pair > .obq-field .obq-hint { margin: 0 0 8px; }
}

/* ⭐ 단계 노출 — **JS 가 붙었을 때만** 접힌다. 서버는 늘 펼쳐서 내려보낸다.
   ⛔ `!important` 를 쓰지 않는다. 특이도를 맞춰서 이긴다. */
/* ⚠️ 여기 빠뜨리면 **조용히 안 숨는다.** 브라우저 기본 `[hidden]{display:none}` 은
   작성자 스타일보다 약해서, display 를 직접 정한 요소(flex·inline-flex)는 그대로 보인다.
   [다음] 단추가 묶음을 마치기 전에도 떠 있던 것이 이 때문이었다(실측). */
.obq-field[hidden],
.obq-pair[hidden],
.obq-section[hidden],
.obq-navrow[hidden],
.obq-next-btn[hidden],
.obq-prev-btn[hidden],
.obq-actions[hidden] { display: none; }

/* 나타나는 순간에만 움직인다 — 상태가 바뀐 것을 알리는 기능적 모션이다.
   화면에 계속 도는 애니메이션이 아니므로 v3 의 ambient 금지에 걸리지 않는다. */
.obq-step-in { animation: obq-in 220ms ease-out both; }

@keyframes obq-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.obq-step-in { animation: none; }
}

.obq-label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--gray-900);
}

/* 드문 쪽인 「선택」만 표시한다 — 「필수」는 달지 않는다 */
.obq-req {
	font-size: 11.5px;
	font-weight: 400;
	color: var(--gray-500);
}

.obq-hint {
	margin: 0 0 8px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--gray-600);
}

.obq-hint a { color: var(--primary-700); text-decoration: underline; }

/* ⚠️ 글자 16px 미만이면 iOS 가 입력할 때 화면을 확대한다 — 줄이지 말 것 */
.obq-input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--gray-300);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--gray-900);
	font-size: 16px;
	line-height: 1.5;
	transition: border-color var(--fast);
}

.obq-input::placeholder { color: var(--gray-500); opacity: 1; }

.obq-input:hover { border-color: var(--gray-500); }

/* 포커스는 한 겹만 — outline 과 테두리 색변경을 겹치지 않는다 */
.obq-input:focus-visible,
.obq-choice input:focus-visible,
.obq-check--privacy input:focus-visible,
.obq-submit:focus-visible,
.obq-nav-item:focus-visible,
.obq-nav-hub:focus-visible,
.obq-done-back:focus-visible {
	outline: 2px solid var(--primary-600);
	outline-offset: 2px;
}

.obq-textarea { min-height: 150px; resize: vertical; }

/* ⚠️ select 의 화살표 자리를 padding 단축으로 덮지 않는다 — 글자가 화살표 밑에 깔린다 */
.obq-select {
	padding-right: 38px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B65' 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 12px center;
	background-size: 18px 18px;
}

/* ── 고르는 칸 ─────────────────────────────────────
   ⭐ 작은 칩을 촘촘히 늘어놓던 것을 **전폭 한 줄**로 바꿨다(2026-09-16).
      줄마다 설명이 들어갈 자리가 생겨서 「브랜디드 콘텐츠가 뭔지 모르겠다」가 사라진다 —
      이번 개편의 본론이다. 라디오·체크박스가 같은 꼴을 쓴다. */
.obq-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* 설명이 하나도 없는 짧은 목록(예: 광고주/대행사)은 전폭으로 세울 이유가 없다 */
.obq-choices--inline {
	flex-direction: row;
	flex-wrap: wrap;
}

.obq-choice {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 14px 16px;
	border: 1px solid var(--gray-300);
	border-radius: var(--r-md);
	cursor: pointer;
	transition: border-color var(--fast);
}

.obq-choice--flat {
	align-items: center;
	padding: 10px 16px;
}

.obq-choice:hover { border-color: var(--gray-500); }

.obq-choice input {
	flex: none;
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	accent-color: var(--primary-600);
}

.obq-choice--flat input { margin: 0; }

.obq-choice-b { min-width: 0; }

.obq-choice-t {
	display: block;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--gray-900);
}

.obq-choice-d {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--gray-600);
}

/* 고른 상태는 **테두리와 글자**로 말한다 — 넓은 색 면을 늘리지 않는다(v3).
   라디오 점이 accent-color 로 한 겹 더 거든다. */
.obq-choice:has(input:checked) { border-color: var(--primary-600); }

.obq-choice:has(input:checked) .obq-choice-t {
	font-weight: 600;
	color: var(--primary-800);
}

/* ── 개인정보 동의 — 칩이 아니라 한 줄짜리 동의문이다 ── */
.obq-field--privacy { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--gray-200); }

.obq-check--privacy {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--gray-900);
	cursor: pointer;
}

.obq-check--privacy input {
	flex: none;
	width: 17px;
	height: 17px;
	margin: 3px 0 0;
	accent-color: var(--primary-600);
}

.obq-field--privacy .obq-hint { margin: 10px 0 0 26px; }

/* 오류 — 테두리 한 겹 + 문장. 색 면을 칸에 깔지 않는다 */
.obq-field.is-error .obq-input { border-color: var(--error); }

.obq-err {
	margin: 7px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--error);
}

.obq-alert {
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px solid #FDA29B;
	border-radius: var(--r-lg);
	background: var(--error-bg);
	color: var(--gray-900);
}

.obq-alert strong { display: block; font-size: 14.5px; }

.obq-alert p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--gray-700); }

.obq-alert:focus-visible { outline: 2px solid var(--error); outline-offset: 2px; }

/* 허니팟 — 사람에게 보이지 않는다. display:none 을 쓰지 않는 이유는
   일부 봇이 숨겨진 칸을 건너뛰기 때문이다. 화면 밖으로 밀어낸다. */
.obq-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── 묶음을 오가는 [이전] [다음] ────────────────────────
   ⭐ 초록 solid 는 [문의 보내기] **하나만** 쓴다. 넘어가는 단추와 보내는 단추가 같아 보이면
      다 채우지도 않고 보낸 줄 안다. [다음] 은 테두리 + 화살표로 「계속」임을 말하고,
      [이전] 은 테두리도 없이 더 물러나 있다 — 되돌아가는 길은 눈에 먼저 띄면 안 된다.
   ⚠️ 두 단추 모두 마크업에 없다 — biz-inquiry.js 가 만든다(스크립트가 막히면 아예 없어야 한다). */
.obq-navrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 30px;
}

.obq-prev-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 46px;
	padding: 12px 18px;
	border: 0;
	border-radius: var(--r-md);
	background: none;
	color: var(--gray-600);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: color var(--fast);
}

.obq-prev-btn:hover { color: var(--gray-900); }

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

.obq-prev-arrow { transition: transform var(--fast); }

.obq-prev-btn:hover .obq-prev-arrow { transform: translateX(-3px); }

.obq-next-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 46px;
	padding: 12px 26px;
	border: 1px solid var(--gray-300);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--gray-900);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--fast), color var(--fast);
}

.obq-next-btn:hover { border-color: var(--primary-600); color: var(--primary-700); }

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

.obq-next-arrow { transition: transform var(--fast); }

.obq-next-btn:hover .obq-next-arrow { transform: translateX(3px); }

/* ── 진행률 ───────────────────────────────────────────
   ⭐ **높이 0 인 sticky 레일**에 매달아 둔다. 글 흐름을 한 픽셀도 밀지 않으면서
      화면 우상단에 붙어 따라온다. `.obq-shell` 이 화면에서 벗어나면 함께 사라진다.
   ⚠️ 이 고리도 마크업에 없다 — JS 가 만든다. 서버가 그리면 스크립트가 막혔을 때
      영원히 0% 인 고리가 남는다. */
.obq-prog-rail {
	position: sticky;
	top: 0;
	z-index: 3;
	height: 0;
}

.obq-prog {
	position: absolute;
	top: 10px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
}

/* 12시에서 시작해 시계 방향으로 찬다 */
.obq-prog-ring {
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(-90deg);
}

.obq-prog-track {
	fill: none;
	stroke: var(--gray-200);
	stroke-width: 4;
}

.obq-prog-bar {
	fill: none;
	stroke: var(--primary-600);
	stroke-width: 4;
	stroke-linecap: round;
	transition: stroke-dashoffset 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.obq-prog-bar { transition: none; }
}

.obq-prog-n {
	position: relative;
	z-index: 1;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--gray-600);
	font-variant-numeric: tabular-nums;
}

.obq-prog[data-full] .obq-prog-n { color: var(--primary-700); }

/* 고리가 제목을 덮지 않게 자리를 비워 둔다 */
.obq-shell.has-prog .obq-head { padding-right: 72px; }

@media (max-width: 480px) {
	.obq-prog { top: 8px; width: 44px; height: 44px; }
	.obq-prog-ring { width: 44px; height: 44px; }
	.obq-prog-n { font-size: 11px; }
	.obq-shell.has-prog .obq-head { padding-right: 56px; }
}

/* ⭐ 전폭 초록 띠를 걷었다 — 720px 짜리 색 면이 화면에서 제일 큰 덩어리가 되어
   글보다 단추가 먼저 읽혔다. 글자 폭으로 줄이고 왼쪽에 세운다.
   (좁은 화면에서는 손가락이 닿을 자리가 있어야 하니 전폭으로 되돌린다) */
.obq-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 30px;
}

.obq-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 13px 30px;
	border: 0;
	border-radius: var(--r-md);
	background: var(--primary-600);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--fast);
}

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

.obq-submit[disabled] { background: var(--gray-500); cursor: default; }

.obq-submit-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--gray-500);
}

@media (max-width: 480px) {
	.obq-submit { width: 100%; }
}

/* ── 완료 ───────────────────────────────────────── */
.obq-done {
	padding: 8px 0 0;
}

.obq-done-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--primary-50);
	color: var(--primary-700);
}

.obq-done-h {
	margin: 20px 0 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--gray-900);
}

.obq-done-p {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--gray-700);
}

.obq-done-p strong {
	font-family: 'Inter', var(--font-kr);
	font-size: 17px;
	letter-spacing: 0.08em;
	color: var(--primary-700);
}

.obq-done-sub {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--gray-600);
}

.obq-done-back {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 26px;
	padding: 11px 20px;
	border: 1px solid var(--gray-300);
	border-radius: var(--r-md);
	color: var(--gray-900);
	font-size: 14px;
	font-weight: 600;
	transition: border-color var(--fast), color var(--fast);
}

.obq-done-back:hover { border-color: var(--primary-600); color: var(--primary-700); }


/* ═══════════════════════════════════════════════════════════
   2026-09-16 — 2열 폼 · 응답 약속 · 폭을 미팅 예약과 맞춤
   ⚠️ 이 블록은 파일 끝에 둔다 — 위의 같은 선택자를 덮어야 한다.

   ⛔ 우측 신뢰 레일은 폐기했다(운영자 결정). 세 창구가
      /biz/meeting/ · /biz/lecture-chat/ 과 **같은 폭**으로 서야 해서
      3단을 유지할 자리가 없다. 근거는 허브(/biz/)가 맡는다.
   ═══════════════════════════════════════════════════════════ */

/* ── 폭 — 미팅 예약 booking.css 와 같은 계약 ───────────────
   경계를 280 / 1000 에 정확히 맞추려고 열 사이 간격을 0 으로 둔다.
   시각적 여백은 각 열 안에서 준다(좌측 패널 항목의 좌우 padding).
   ⚠️ 이 값을 고칠 일이 생기면 booking.css 162~181행도 함께 본다 —
      두 화면이 나란히 걸려 있어서 한쪽만 바뀌면 갈아탈 때 화면이 튄다. */
:root { --container-gutter: 30px; }

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

.obq-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0;
	width: min(1000px, calc(100% - 2 * var(--container-gutter)));
	max-width: none;
	margin-inline: auto;
	padding: 24px 0 80px;
}

.obq-nav {
	flex: 0 0 280px;
	max-width: 280px;
	width: auto;
	min-width: 0;
}

.obq-content {
	/* ⚠️ basis 를 0 으로 둔다. auto 면 basis 가 **내용 크기**라 폭이 줄 때
	   패널 280 + 내용 합이 줄을 넘겨 본문이 통째로 패널 아래로 떨어진다
	   (미팅 예약에서 실측된 함정, booking.css 183~190행). */
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 1079px) {
	.obq-row { flex-direction: column; padding: 16px 0 64px; }

	/* ⚠️ column 방향에서 flex-basis 는 **폭이 아니라 높이**로 읽힌다.
	   flex:0 0 280px 이 남으면 좌측 패널이 내용 27px 인데도 280px 를 먹는다(실측). */
	.obq-nav { flex: none; width: 100%; max-width: none; }

	/* ⚠️ column 방향 + align-items:flex-start 는 가로를 **내용 폭**으로 줄인다.
	   flex:1 1 0 만 남기면 본문이 976px 자리에서 872px 로 쪼그라든다(실측).
	   가로를 직접 100% 로 잡아 줘야 미팅 예약과 같은 폭이 된다. */
	.obq-content { flex: none; width: 100%; }
}

/* ≥1600px — 미팅 예약이 여기서 1600 으로 넓힌다(담당자 열이 생긴다).
   같이 넓히지 않으면 두 화면을 오갈 때 좌측 패널이 320px 씩 뛴다.
   ⭐ **페이지 폭만 맞추고 글 폭은 맞추지 않는다.** 미팅 예약의 900px 본문 열은 달력이 들어가는
      자리이고 여기는 폼이다. 900px 짜리 입력칸 한 줄은 표처럼 보인다(2026-09-16 실측·운영자 지적).
      글 폭은 어느 구간에서나 `.obq-shell` 의 720px 하나로 끝낸다. */
@media (min-width: 1600px) {
	.obq-row { width: min(1600px, calc(100% - 2 * var(--container-gutter))); }
}

/* ── 머리: 응답 약속 ─────────────────────────────────── */
.obq-promise {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--primary-700);
}

.obq-promise svg { flex: none; }

/* ⛔ 2열 배치(`half`)를 걷어냈다(2026-09-16).
      한 칸씩 여는 화면에서 2열은 뜻이 없고, JS 가 막히거나 오류로 되돌아와 전부 펼쳐질 때
      레이아웃이 확 달라져 당황스럽다. 720px 한 열이면 한 줄이 충분히 읽힌다. */

/* ── 완료 — 색 면에 든 아이콘 타일을 걷어낸다 ───────────────
   ⭐ 연한 색 사각형 안에 선 아이콘을 넣는 꼴은 어느 SaaS 템플릿에나 있는 장식이다.
      체크 하나를 선으로만 두고 글자가 일하게 한다. */
/* ⚠️ inline-flex 여야 한다. display:flex 에 width:auto 를 주면 블록 폭을 다 먹어
   justify-content:center 가 체크를 화면 가운데로 보낸다(실측). */
.obq-done-ico {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: auto;
	height: auto;
	margin-bottom: 2px;
	border-radius: 0;
	background: none;
	color: var(--primary-600);
}


/* ── 좌측 패널 머리 — /biz/meeting/ · /biz/lecture-chat/ 과 픽셀까지 맞춘다 ──────
   ⚠️ 실측으로만 드러나는 어긋남이었다. 컨테이너(row 1000 / 패널 280 / 본문 720)는
      셋이 같았는데 **패널 안쪽**이 달랐다:
      · 로고가 11px 왼쪽에 있었다(220 vs 231) — 저쪽은 항목 글자 시작선에 로고를 맞춘다
      · 로고 아래 여백이 26px 이라 라벨이 2px 내려앉았다(89 vs 87)
      · 라벨이 12.5px + padding 0 11px 이라 상자 크기와 줄높이가 달랐다(19 vs 20)
   ⛔ 여기 값을 고칠 일이 생기면 booking.css 의 .omb-sidenav-home / .sidenav-label 을
      함께 본다. 한쪽만 고치면 갈아탈 때 로고가 11px 튄다. */
.obq-nav-home {
	margin-left: 11px;
	margin-bottom: 24px;
}

.obq-nav-label {
	margin-left: 11px;
	padding: 0;
	font-size: 13px;
}

/* 본문 첫 줄을 저쪽 눈썹 글자와 같은 높이에 둔다(실측 T28) */
.obq-head { padding-top: 3px; }

/* 「전체 문의 유형」 줄 — 미팅 예약·챗봇과 같은 값(13px / 9px 11px).
   셋이 13.5 / 13 / 12.5 로 제각각이어서 아래 목록 시작선이 1~2px 씩 달랐다(실측). */
.obq-nav-hub {
	padding: 9px 11px;
	font-size: 13px;
	/* ⚠️ line-height 를 반드시 적는다 — 안 적으면 .obq-body 의 1.7 을 물려받아
	   줄 높이가 22.1px 이 되고, 아래 목록 전체가 2px 내려앉는다(실측). */
	line-height: 1.5;
}