/* ============================================================
 * 손님 AI 챗봇 창(ai-chat 모듈) — 채널톡형 · 앞글자 ocb-
 * 2026-10-28 운영자 「기존 채널톡io 참고해서 다시 제작합니다. 똑두 아이콘 사용해도 좋아요」 + 채널톡 화면 사진(열기 단추 · 안내 말풍선 · 대화 · 홈 · 대화 목록 · 설정) — 직접 요청
 *   짜임 = 채널톡 위젯: 오른쪽 아래 둥근 열기 단추(똑두 얼굴 · 열면 ×) · 안내 말풍선 · 창 아래 탭 [홈 · 대화 · 설정] · 대화 화면(뒤로 · 추천 질문 · 둥근 질문 칸)
 *   값 = 채널톡 위젯 실측(브랜드 룩북 tools/tools-data/brand-design-systems/design_systems/channel-talk.md — 위젯 390 · 창 20 · 칸 · 말풍선 12 · 단추 · 입력 8) 위에 오빠두 색(흑백 + 초록 하나)
 *   「사이트 규칙과 다른 점」(.claude/rules/css.md 「창(모달) 모서리 12px」 예외 줄): 창 모서리 20(정본 12) · 창 안 칸 12(정본 8) · 단추 8(정본 6) · 추천 질문 둥근 칩 ·
 *   둥근 보내기 단추 · 말풍선 닫기 원 · 창 열림 0.2초 · 안내 말풍선 0.25초 한 번(움직임 줄이기면 없음)
 *   — 값은 .ocb 의 --ocb-* 한 곳에서 바꾼다(정본 값으로 되돌리기 = --ocb-r-win 12 · --ocb-r-card 8 · --ocb-r-btn 6).
 * 초록 = 채운 단추(문의하기 · 새 문의하기 · 보내기) · 지금 탭 · 본문 링크 · 체크 켜짐 / 「지금 바로 답해요」 점 = 성공 색(상태).
 * 똑두 그림 = _ddok_du/reference_sheets/white 원본(01 대기 · 07 환영 · 06 생각)에서 가장자리 흰 바탕만 투명하게 · WebP(includes/widget.php 가 주소를 넘긴다).
 * 폴백 값은 css/tokens.css 정본과 같다(앞단에선 토큰이 늘 실려 폴백이 안 쓰인다).
 * GP 전역 button · input · textarea · h2 규칙을 이기려고 모든 규칙을 .ocb 아래 두 단 이상으로 건다.
 * 폰(≤ 600): 창은 화면 가득 · 열기 단추는 아래 탭 막대 위(--omc-stack-b — css/mobile-chrome.css §3 쌓기와 같은 자리).
 * ============================================================ */

.ocb {
	--ocb-r-win: 20px;
	--ocb-r-card: 12px;
	--ocb-r-btn: 8px;
	--ocb-r-in: 16px;
	--ocb-fab: 60px;
	--ocb-b: calc(20px + env(safe-area-inset-bottom, 0px));
	--ocb-shadow: 0 0 2px 1px rgb(0 0 0 / 0.04), 0 12px 40px rgb(0 0 0 / 0.18);
	position: fixed;
	right: 20px;
	bottom: var(--ocb-b);
	/* 덮개(300) 바로 아래 — 폰 아래 탭 줄 · 하단 고정 줄 · 새 틀 머리글(200) 위, 시트 덮개(300) · 검색 · 소식 작은 창(400) 아래 */
	z-index: calc(var(--z-overlay, 300) - 1);
	width: var(--ocb-fab);
	height: var(--ocb-fab);
	color: var(--gray-900, #181818);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}
.ocb *,
.ocb *::before,
.ocb *::after {
	box-sizing: border-box;
}
.ocb .ocb-ic {
	display: block;
	flex: none;
}
.ocb .ocb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
	white-space: nowrap;
}
.ocb .ocb-av {
	flex: none;
	display: block;
	max-width: none;
	border-radius: 50%;
	background: var(--surface-white, #fff);
	box-shadow: 0 0 0 1px var(--gray-200, #e7e7e7);
}

/* ── 열기 단추 — 똑두 얼굴 원(아바타) · 열리면 × ── */
.ocb .ocb-fab {
	position: relative;
	display: block;
	width: var(--ocb-fab);
	height: var(--ocb-fab);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--surface-white, #fff);
	color: var(--gray-700, #404040);
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.16);
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 0.15s ease;
}
.ocb .ocb-fab:hover {
	background: var(--surface-white, #fff);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.1), 0 10px 30px rgb(0 0 0 / 0.22);
}
.ocb .ocb-fab:active {
	transform: translateY(1px);
}
.ocb .ocb-fab:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 3px;
}
.ocb .ocb-fab-face {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	transition: opacity 0.15s ease;
}
.ocb .ocb-fab-ic,
.ocb .ocb-fab-x {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s ease;
}
.ocb .ocb-fab-x {
	opacity: 0;
}
.ocb[data-open="1"] .ocb-fab-face,
.ocb[data-open="1"] .ocb-fab-ic {
	opacity: 0;
}
.ocb[data-open="1"] .ocb-fab-x {
	opacity: 1;
}

/* ── 안내 말풍선 — 열기 단추 위 · 하루 한 번 ── */
.ocb .ocb-nudge {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	display: flex;
	align-items: center;
	gap: 14px;
	width: max-content;
	max-width: min(320px, calc(100vw - 40px));
	padding: 14px 14px 14px 20px;
	border-radius: var(--ocb-r-in);
	background: var(--surface-white, #fff);
	box-shadow: var(--ocb-shadow);
	animation: ocb-rise 0.25s ease-out;
}
.ocb .ocb-nudge[hidden],
.ocb[data-open="1"] .ocb-nudge {
	display: none;
}
.ocb .ocb-nudge-go {
	display: grid;
	gap: 4px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gray-900, #181818);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.ocb .ocb-nudge-go:hover {
	background: transparent;
	color: var(--gray-900, #181818);
}
.ocb .ocb-nudge-t {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	word-break: keep-all;
}
.ocb .ocb-nudge-s {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--gray-500, #727272);
}
.ocb .ocb-nudge-go:hover .ocb-nudge-s {
	color: var(--gray-900, #181818);
}
.ocb .ocb-nudge-x {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gray-100, #f4f4f4);
	color: var(--gray-500, #727272);
	cursor: pointer;
}
.ocb .ocb-nudge-x:hover {
	background: var(--gray-200, #e7e7e7);
	color: var(--gray-900, #181818);
}
.ocb .ocb-nudge-go:focus-visible,
.ocb .ocb-nudge-x:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 2px;
}

/* ── 창 ── */
.ocb .ocb-panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 16px);
	display: flex;
	flex-direction: column;
	width: 390px;
	height: min(720px, calc(100vh - var(--ocb-b) - var(--ocb-fab) - 40px));
	background: var(--surface-white, #fff);
	border-radius: var(--ocb-r-win);
	box-shadow: var(--ocb-shadow);
	overflow: hidden;
	transform-origin: 100% 100%;
	animation: ocb-pop 0.2s ease-out;
}
@supports (height: 100dvh) {
	.ocb .ocb-panel {
		height: min(720px, calc(100dvh - var(--ocb-b) - var(--ocb-fab) - 40px));
	}
}
.ocb .ocb-panel[hidden] {
	display: none;
}
@keyframes ocb-pop {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to { opacity: 1; transform: none; }
}
@keyframes ocb-rise {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
.ocb .ocb-view {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.ocb .ocb-view[hidden] {
	display: none;
}
.ocb .ocb-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ocb .ocb-scroll--gray {
	padding: 0 16px 20px;
	background: var(--gray-50, #f7f7f7);
}
.ocb .ocb-ib {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--ocb-r-btn);
	background: transparent;
	color: var(--gray-600, #545454);
	cursor: pointer;
}
.ocb .ocb-ib:hover {
	background: var(--gray-100, #f4f4f4);
	color: var(--gray-900, #181818);
}
.ocb .ocb-ib:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: -2px;
}
.ocb .ocb-xphone {
	display: none;
}
.ocb .ocb-pv {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 6px;
	border-radius: 6px;
	background: var(--gray-200, #e7e7e7);
	color: var(--gray-600, #545454);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
}

/* ── 홈 — 회색 바탕 위 흰 칸 ── */
.ocb .ocb-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	padding: 22px 4px 0;
}
.ocb .ocb-hero-tx {
	min-width: 0;
	padding-bottom: 22px;
}
.ocb .ocb-hero-tx .ocb-pv {
	margin-bottom: 10px;
}
.ocb .ocb-brand {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--gray-900, #181818);
}
.ocb .ocb-hero-sub {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--gray-600, #545454);
}
/* 똑두가 아래 칸 뒤에 발을 숨긴다 */
.ocb .ocb-hero-img {
	display: block;
	width: 112px;
	height: 112px;
	max-width: none;
	margin: 0 4px -18px 0;
}
.ocb .ocb-card {
	position: relative;
	margin-top: 12px;
	padding: 18px 20px 20px;
	border-radius: var(--ocb-r-card);
	background: var(--surface-white, #fff);
}
.ocb .ocb-hero + .ocb-card {
	margin-top: 0;
}
.ocb .ocb-card--list {
	overflow: hidden;
	padding-bottom: 8px;
}
.ocb .ocb-card-h {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--gray-900, #181818);
}
.ocb .ocb-card-hrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}
.ocb .ocb-card-hrow .ocb-card-h {
	margin: 0;
}
.ocb .ocb-card-more {
	font-size: 13px;
	color: var(--gray-500, #727272);
	text-decoration: none;
}
.ocb .ocb-card-more:hover {
	color: var(--gray-900, #181818);
}
.ocb .ocb-greet-hd {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ocb .ocb-greet-name {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}
.ocb .ocb-greet-st {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0 0;
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--gray-500, #727272);
}
.ocb .ocb-dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-success, #059669);
}
.ocb .ocb-dot--off {
	background: var(--gray-400, #a2a2a2);
}
.ocb .ocb-greet-t {
	margin: 16px 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.01em;
	word-break: keep-all;
}
.ocb .ocb-greet-tx {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--gray-700, #404040);
	word-break: keep-all;
}
.ocb .ocb-greet-info {
	display: grid;
	gap: 4px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray-600, #545454);
}
.ocb .ocb-greet-info li {
	display: flex;
	gap: 10px;
	margin: 0;
}
.ocb .ocb-greet-info b {
	flex: none;
	min-width: 68px;
	font-weight: 600;
	color: var(--gray-900, #181818);
}
.ocb .ocb-err {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-danger-text, #a82f2f);
}
.ocb .ocb-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 50px;
	margin-top: 18px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--ocb-r-btn);
	background: var(--brand-action, #059669);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none; /* AI 쉼 = 질문 게시판 링크(a) */
	cursor: pointer;
}
.ocb .ocb-cta:hover {
	background: var(--brand-hover, #037450);
	color: #fff;
}
.ocb .ocb-cta:active {
	transform: translateY(1px);
}
.ocb .ocb-cta:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 2px;
}

/* 자주 묻는 질문 줄 — 같은 목록을 고르는 줄이라 흑백 */
.ocb .ocb-rows {
	margin: 0 -20px;
	padding: 0;
	list-style: none;
}
.ocb .ocb-rows li {
	margin: 0;
}
.ocb .ocb-rows li + li .ocb-row {
	box-shadow: inset 0 1px 0 var(--gray-100, #f4f4f4);
}
.ocb .ocb-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 13px 18px 13px 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--gray-900, #181818);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	word-break: keep-all;
	cursor: pointer;
}
.ocb .ocb-row:hover {
	background: var(--gray-50, #f7f7f7);
	color: var(--gray-900, #181818);
}
.ocb .ocb-row .ocb-ic {
	color: var(--gray-400, #a2a2a2);
}
.ocb .ocb-row:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: -2px;
}
.ocb .ocb-other {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.ocb .ocb-ob {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 46px;
	padding: 0 10px;
	border: 0;
	border-radius: var(--ocb-r-btn);
	background: var(--gray-100, #f4f4f4);
	color: var(--gray-900, #181818);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.ocb .ocb-ob:hover {
	background: var(--gray-200, #e7e7e7);
	color: var(--gray-900, #181818);
}
.ocb .ocb-ob:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 2px;
}

/* 대화 한 줄(홈 「최근 대화」 · 대화 목록) */
.ocb .ocb-conv {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 4px 0 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--gray-900, #181818);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.ocb .ocb-conv:hover {
	background: transparent;
	color: var(--gray-900, #181818);
}
.ocb .ocb-conv:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: -2px;
}
.ocb .ocb-conv-main {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	gap: 2px;
}
.ocb .ocb-conv-top {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.ocb .ocb-conv-top b {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
}
.ocb .ocb-conv-top time {
	font-size: 12px;
	color: var(--gray-400, #a2a2a2);
}
.ocb .ocb-conv-pre {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.5;
	color: var(--gray-600, #545454);
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.ocb .ocb-conv:hover .ocb-conv-pre {
	color: var(--gray-900, #181818);
}

/* ── 대화 목록 · 설정 ── */
.ocb .ocb-vhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 72px;
	padding: 20px 20px 8px;
}
.ocb .ocb-vt {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--gray-900, #181818);
}
.ocb .ocb-convs {
	margin: 0;
	padding: 0 0 88px;
	list-style: none;
}
.ocb .ocb-convs li {
	margin: 0;
}
.ocb .ocb-convs .ocb-conv {
	padding: 14px 20px;
}
.ocb .ocb-convs .ocb-conv:hover {
	background: var(--gray-50, #f7f7f7);
}
.ocb .ocb-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 24px 96px;
	text-align: center;
}
.ocb .ocb-empty img {
	display: block;
	width: 68px;
	height: auto;
	max-width: none;
	margin-bottom: 14px;
}
.ocb .ocb-empty-t {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}
.ocb .ocb-empty-d {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--gray-500, #727272);
}
.ocb .ocb-newbtn {
	position: absolute;
	left: 50%;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--ocb-r-btn);
	background: var(--brand-action, #059669);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	transform: translateX(-50%);
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.16);
	cursor: pointer;
}
.ocb .ocb-newbtn:hover {
	background: var(--brand-hover, #037450);
	color: #fff;
}
.ocb .ocb-newbtn:active {
	transform: translateX(-50%) translateY(1px);
}
.ocb .ocb-newbtn:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 2px;
}
.ocb .ocb-sg {
	padding: 8px 20px 0;
}
.ocb .ocb-sg-h {
	margin: 8px 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gray-500, #727272);
}
.ocb .ocb-sg-box {
	border-radius: var(--ocb-r-card);
	background: var(--gray-50, #f7f7f7);
	overflow: hidden;
}
.ocb .ocb-sg-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
}
.ocb .ocb-sg-row + .ocb-sg-row,
.ocb .ocb-sg-link + .ocb-sg-link {
	box-shadow: inset 0 1px 0 var(--gray-200, #e7e7e7);
}
.ocb .ocb-sg-row > .ocb-ic {
	margin-top: 1px;
	color: var(--gray-600, #545454);
}
.ocb .ocb-sg-row > div {
	flex: 1 1 auto;
	min-width: 0;
}
.ocb .ocb-sg-row--ask {
	align-items: center;
}
.ocb .ocb-sg-t {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
}
.ocb .ocb-sg-d {
	margin: 3px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--gray-600, #545454);
	word-break: keep-all;
}
.ocb .ocb-sg-btns {
	flex: none;
	display: flex;
	gap: 6px;
}
.ocb .ocb-sg-row > .ocb-sg-btns {
	flex: none;
}
.ocb .ocb-mini {
	flex: none;
	height: 32px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--ocb-r-btn);
	background: var(--surface-white, #fff);
	color: var(--gray-900, #181818);
	box-shadow: inset 0 0 0 1px var(--gray-300, #d5d5d5);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.ocb .ocb-mini:hover {
	background: var(--gray-100, #f4f4f4);
	color: var(--gray-900, #181818);
}
.ocb .ocb-mini--danger {
	background: var(--color-danger, #d14343);
	color: #fff;
	box-shadow: none;
}
.ocb .ocb-mini--danger:hover {
	background: var(--color-danger-text, #a82f2f);
	color: #fff;
}
.ocb .ocb-mini:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 2px;
}
.ocb .ocb-sg-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	color: var(--gray-900, #181818);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}
.ocb .ocb-sg-link span {
	flex: 1 1 auto;
}
.ocb .ocb-sg-link .ocb-ic {
	color: var(--gray-600, #545454);
}
.ocb .ocb-sg-link .ocb-ic:last-child {
	color: var(--gray-400, #a2a2a2);
}
.ocb .ocb-sg-link:hover {
	background: var(--gray-100, #f4f4f4);
	color: var(--gray-900, #181818);
}
.ocb .ocb-sg-link:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: -2px;
}
.ocb .ocb-ver {
	margin: 16px 24px 24px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--gray-400, #a2a2a2);
	text-align: right;
}

/* ── 아래 탭 — 지금 칸 = 초록(지금 위치) ── */
.ocb .ocb-tabs {
	flex: none;
	display: flex;
	border-top: 1px solid var(--gray-100, #f4f4f4);
	background: var(--surface-white, #fff);
}
.ocb[data-view="chat"] .ocb-tabs {
	display: none;
}
.ocb .ocb-tab {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 62px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--gray-400, #a2a2a2);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.ocb .ocb-tab:hover {
	background: transparent;
	color: var(--gray-700, #404040);
}
.ocb .ocb-tab[aria-current="page"] {
	color: var(--primary, #037450);
}
.ocb .ocb-tab:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: -4px;
}

/* ── 대화 화면 ── */
.ocb .ocb-chead {
	position: relative;
	z-index: 1;
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 60px;
	padding: 10px 8px 10px 6px;
	box-shadow: 0 1px 0 var(--gray-100, #f4f4f4);
}
.ocb .ocb-ch-tx {
	flex: 1 1 auto;
	min-width: 0;
}
.ocb .ocb-ch-name {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}
.ocb .ocb-ch-sub {
	margin: 1px 0 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--gray-500, #727272);
}
.ocb .ocb-log {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 8px 20px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ocb .ocb-msg {
	max-width: 100%;
	font-size: 14.5px;
	line-height: 1.7;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.ocb .ocb-bot-hd {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
.ocb .ocb-bot-hd b {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--gray-900, #181818);
}
.ocb .ocb-tx {
	display: block;
	margin: 0;
	white-space: pre-wrap;
}
.ocb .ocb-msg--user {
	align-self: flex-end;
	max-width: 82%;
	padding: 10px 14px;
	border-radius: var(--ocb-r-card) var(--ocb-r-card) 4px var(--ocb-r-card);
	background: var(--gray-100, #f4f4f4);
	white-space: pre-wrap;
}
.ocb .ocb-msg a {
	color: var(--primary, #037450);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-all;
}
.ocb .ocb-msg--err .ocb-tx {
	color: var(--gray-600, #545454);
}
.ocb .ocb-w-t {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.01em;
}
.ocb .ocb-wls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.ocb .ocb-msg .ocb-wl {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 14px;
	border-radius: var(--ocb-r-btn);
	background: var(--gray-100, #f4f4f4);
	color: var(--gray-900, #181818);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	word-break: keep-all;
}
.ocb .ocb-msg .ocb-wl:hover {
	background: var(--gray-200, #e7e7e7);
	color: var(--gray-900, #181818);
}
.ocb .ocb-msg .ocb-wl:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 2px;
}

/* 추천 질문 — 손님 쪽(오른쪽)에 둥근 칩 */
.ocb .ocb-pills {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.ocb .ocb-pill {
	max-width: 88%;
	padding: 9px 16px;
	border: 0;
	border-radius: 20px;
	background: var(--surface-white, #fff);
	color: var(--gray-900, #181818);
	box-shadow: inset 0 0 0 1px var(--gray-200, #e7e7e7);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	word-break: keep-all;
	cursor: pointer;
}
.ocb .ocb-pill:hover {
	background: var(--gray-50, #f7f7f7);
	color: var(--gray-900, #181818);
	box-shadow: inset 0 0 0 1px var(--gray-300, #d5d5d5);
}
.ocb .ocb-pill:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 2px;
}
/* 자주 묻는 질문 답 뒤 — 같은 갈래 다음 질문 · 처음으로(운영자 10/28 「자세히 대신 이어지는 질문 목록 · 처음으로 돌아가기」) */
.ocb .ocb-pill--home {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--gray-700, #404040);
}

/* 답 아래 — 평가 · 담당자 */
.ocb .ocb-act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 4px;
	margin-top: 6px;
}
.ocb .ocb-rate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: var(--ocb-r-btn);
	background: transparent;
	color: var(--gray-400, #a2a2a2);
	cursor: pointer;
}
.ocb .ocb-rate:hover {
	background: var(--gray-100, #f4f4f4);
	color: var(--gray-700, #404040);
}
.ocb .ocb-rate[aria-pressed="true"] {
	color: var(--gray-900, #181818);
}
.ocb .ocb-rate:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: -2px;
}
/* 답 아래 주소 단추 — 답 글 속 주소를 빼서 「강의 이름 ›」으로(운영자 10/28 「답 아래 단추로」) */
.ocb .ocb-lbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.ocb .ocb-msg .ocb-lb {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	max-width: 100%;
	min-height: 36px;
	padding: 7px 8px 7px 12px;
	border-radius: var(--ocb-r-btn);
	background: var(--gray-100, #f4f4f4);
	color: var(--gray-900, #181818);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	word-break: keep-all;
}
.ocb .ocb-msg .ocb-lb:hover {
	background: var(--gray-200, #e7e7e7);
	color: var(--gray-900, #181818);
}
.ocb .ocb-msg .ocb-lb .ocb-ic {
	color: var(--gray-500, #727272);
}
.ocb .ocb-msg .ocb-lb:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 2px;
}
.ocb .ocb-msg button.ocb-lb {
	border: 0;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
/* 메인 링크 = 답마다 첫 단추 하나만 채운 초록(운영자 10/28 「가입하기 버튼이 잘 안 보이네요 · 메인 링크는 잘 보이게」) */
.ocb .ocb-msg .ocb-lb--main {
	background: var(--brand-action, #059669);
	color: #fff;
	font-weight: 700;
}
.ocb .ocb-msg .ocb-lb--main:hover {
	background: var(--brand-hover, #037450);
	color: #fff;
}
.ocb .ocb-msg .ocb-lb--main .ocb-ic {
	color: inherit;
}

/* 자주 묻는 질문 = 그림과 함께 절차(운영자 10/28 「너무 답변이 깁니다 · 그림과 함께 절차 안내」)
 * 머리 문단 + 첫 소제목 묶음은 펼치고 나머지 소제목은 접는다 · 단계 번호 = 6 모서리 검정 칸(배지 규칙) · 그림은 누르면 원본(새 탭) */
.ocb .ocb-fq {
	display: grid;
	gap: 10px;
}
.ocb .ocb-fq-h {
	margin: 2px 0 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--gray-900, #181818);
}
.ocb .ocb-fq-p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	white-space: normal;
}
.ocb .ocb-fq-step {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 8px;
	align-items: start;
}
.ocb .ocb-fq-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 6px;
	background: var(--gray-900, #181818);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.ocb .ocb-fq-body {
	display: grid;
	gap: 8px;
	min-width: 0;
}
.ocb .ocb-msg .ocb-fq-pic {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	background: var(--gray-50, #f7f7f7);
	box-shadow: 0 0 0 1px var(--gray-200, #e7e7e7);
	cursor: zoom-in;
}
.ocb .ocb-fq-pic img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 320px;
	object-fit: contain;
}
.ocb .ocb-fq-more {
	border-top: 1px solid var(--gray-100, #f4f4f4);
}
.ocb .ocb-fq-more summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--gray-700, #404040);
	list-style: none;
	cursor: pointer;
}
.ocb .ocb-fq-more summary::-webkit-details-marker {
	display: none;
}
.ocb .ocb-fq-more summary:hover {
	color: var(--gray-900, #181818);
}
.ocb .ocb-fq-more summary:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 2px;
}
.ocb .ocb-fq-more[open] summary .ocb-ic {
	transform: rotate(180deg);
}
.ocb .ocb-fq-in {
	display: grid;
	gap: 10px;
	margin-top: 10px;
}
.ocb .ocb-hand {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray-600, #545454);
}
.ocb .ocb-linkbtn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--gray-900, #181818);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.ocb .ocb-linkbtn:hover {
	background: none;
	color: var(--gray-700, #404040);
}
.ocb .ocb-linkbtn:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 2px;
}

/* 기다리는 동안 점 셋 — 기능 움직임(스피너 자리) */
.ocb .ocb-dots {
	display: inline-flex;
	gap: 4px;
	padding: 6px 0;
}
.ocb .ocb-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gray-400, #a2a2a2);
	animation: ocb-blink 1.2s infinite ease-in-out;
}
.ocb .ocb-dots i:nth-child(2) {
	animation-delay: 0.15s;
}
.ocb .ocb-dots i:nth-child(3) {
	animation-delay: 0.3s;
}
@keyframes ocb-blink {
	0%, 80%, 100% { opacity: 0.35; }
	40% { opacity: 1; }
}

/* 담당자에게 메일로 받기 — 대화 안 칸(회색 면) */
.ocb .ocb-hcard {
	display: grid;
	gap: 10px;
	padding: 16px;
	border-radius: var(--ocb-r-card);
	background: var(--gray-50, #f7f7f7);
}
.ocb .ocb-hcard-t {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}
.ocb .ocb-hcard-d {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--gray-600, #545454);
}
.ocb .ocb-field {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--gray-300, #d5d5d5);
	border-radius: var(--ocb-r-btn);
	background: var(--surface-white, #fff);
	color: var(--gray-900, #181818);
	box-shadow: none;
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.4;
}
.ocb textarea.ocb-field {
	height: auto;
	min-height: 76px;
	padding: 10px 12px;
	resize: vertical;
}
.ocb .ocb-field:focus {
	outline: none;
	border-color: var(--gray-900, #181818);
	background: var(--surface-white, #fff);
	color: var(--gray-900, #181818);
	box-shadow: none;
}
.ocb .ocb-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--gray-600, #545454);
}
.ocb .ocb-check input {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--brand-action, #059669);
}
.ocb .ocb-check a {
	color: var(--gray-900, #181818);
}
.ocb .ocb-hcard-err {
	margin: 0;
	font-size: 13px;
	color: var(--color-danger-text, #a82f2f);
}
.ocb .ocb-hcard-err[hidden] {
	display: none;
}
.ocb .ocb-hcard-row {
	display: flex;
	gap: 8px;
}
.ocb .ocb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--ocb-r-btn);
	background: var(--brand-action, #059669);
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.ocb .ocb-btn:hover {
	background: var(--brand-hover, #037450);
	color: #fff;
}
.ocb .ocb-btn:disabled {
	background: var(--gray-200, #e7e7e7);
	color: var(--gray-500, #727272);
	cursor: default;
}
.ocb .ocb-btn--sub {
	background: var(--gray-200, #e7e7e7);
	color: var(--gray-900, #181818);
}
.ocb .ocb-btn--sub:hover {
	background: var(--gray-300, #d5d5d5);
	color: var(--gray-900, #181818);
}
.ocb .ocb-btn:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 2px;
}

/* ── 질문 칸 — 둥근 회색 칸 + 둥근 보내기 ── */
.ocb .ocb-foot {
	flex: none;
	padding: 6px 16px 10px;
	background: var(--surface-white, #fff);
}
.ocb .ocb-compose {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin: 0;
	padding: 8px 8px 8px 16px;
	border-radius: var(--ocb-r-in);
	background: var(--gray-100, #f4f4f4);
}
.ocb .ocb-compose:focus-within {
	background: var(--surface-white, #fff);
	box-shadow: inset 0 0 0 1px var(--gray-400, #a2a2a2);
}
.ocb .ocb-ta {
	flex: 1 1 auto;
	min-width: 0;
	height: 32px;
	max-height: 120px;
	margin: 0;
	padding: 6px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--gray-900, #181818);
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.35;
	resize: none;
	overflow-y: hidden; /* 한 줄(32)이 글줄(20.25) + 위아래 6 보다 조금 작아 스크롤 막대 ▲ 가 떴다 — 넘칠 때만 js 가 auto */
}
.ocb .ocb-ta:focus {
	outline: none;
	border: 0;
	background: transparent;
	color: var(--gray-900, #181818);
	box-shadow: none;
}
.ocb .ocb-ta::placeholder {
	color: var(--gray-500, #727272);
	opacity: 1;
}
.ocb .ocb-ta:disabled {
	background: transparent;
	cursor: default;
}
.ocb .ocb-send {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--brand-action, #059669);
	color: #fff;
	cursor: pointer;
}
.ocb .ocb-send:hover {
	background: var(--brand-hover, #037450);
	color: #fff;
}
.ocb .ocb-send:disabled {
	background: var(--gray-300, #d5d5d5);
	color: #fff;
	cursor: default;
}
.ocb .ocb-send:focus-visible {
	outline: 2px solid var(--gray-900, #181818);
	outline-offset: 2px;
}
.ocb .ocb-note {
	margin: 8px 0 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--gray-500, #727272);
	text-align: center;
}

/* ── 폰 · 태블릿 ── */
@media screen and (max-width: 1024px) {
	body.omc-on .ocb {
		--ocb-b: calc(var(--omc-stack-b, 0px) + 16px);
	}
	/* 커뮤니티 목록 — 같은 자리에 뜨는 「글쓰기」 단추(높이 48 · plugins/oppadu-community/assets/css/community-mobile.css ③) 위로 한 칸 올린다.
	   출석체크엔 글쓰기 단추가 없다(위 입력줄이 글쓰기). 2026-10-29 커뮤니티에도 챗봇을 띄우며 */
	body.omc-on.omc-oc--list:not(:has(.oc-checkin)) .ocb {
		--ocb-b: calc(var(--omc-stack-b, 0px) + 16px + 48px + 12px);
	}
}
@media (max-width: 600px) {
	.ocb {
		--ocb-fab: 56px;
		right: 16px;
	}
	.ocb .ocb-panel {
		position: fixed;
		inset: 0;
		width: auto;
		height: auto;
		padding-top: env(safe-area-inset-top, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		border-radius: 0;
		box-shadow: none;
		animation: none;
	}
	.ocb[data-open="1"] .ocb-fab {
		display: none;
	}
	.ocb .ocb-xphone {
		display: inline-flex;
	}
	.ocb .ocb-hero .ocb-xphone {
		position: absolute;
		top: 10px;
		right: -6px;
	}
	.ocb .ocb-nudge {
		max-width: calc(100vw - 32px);
	}
	html.ocb-lock,
	html.ocb-lock body {
		overflow: hidden;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ocb .ocb-panel,
	.ocb .ocb-nudge {
		animation: none;
	}
	.ocb .ocb-dots i {
		animation: none;
		opacity: 0.6;
	}
	.ocb .ocb-fab,
	.ocb .ocb-fab-face,
	.ocb .ocb-fab-ic,
	.ocb .ocb-fab-x {
		transition: none;
	}
	.ocb .ocb-fab:active,
	.ocb .ocb-cta:active {
		transform: none;
	}
	.ocb .ocb-newbtn:active {
		transform: translateX(-50%);
	}
}
@media print {
	.ocb {
		display: none;
	}
}