/* --o2b-lift 는 쿠키 동의 배너처럼 화면 아래를 덮는 요소의 높이만큼 위젯을 밀어 올린다. widget.js 가 값을 넣는다. */
#o2b-chat-root { --o2b-blue: #0878b8; --o2b-navy: #08243d; --o2b-cyan: #22b8e6; --o2b-line: #dce8f0; --o2b-text: #183247; --o2b-lift: 0px; --o2b-edge-x: var(--o2b-desktop-x, 24px); --o2b-edge-y: var(--o2b-desktop-y, 96px); position: fixed; right: var(--o2b-edge-x); bottom: calc(var(--o2b-edge-y) + var(--o2b-lift)); z-index: 2147483000; font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--o2b-text); transition: bottom .18s ease, right .18s ease; }
#o2b-chat-root * { box-sizing: border-box; }
.o2b-launcher { position: relative; isolation: isolate; width: 60px; height: 60px; padding: 0; border: 1px solid rgba(109, 220, 255, .62); border-radius: 50%; background: radial-gradient(circle at 32% 22%, #126da0 0, #0a466f 35%, #061d33 100%); color: #fff; box-shadow: 0 0 0 3px rgba(34, 184, 230, .1), 0 13px 32px rgba(1, 24, 43, .45), inset 0 1px 0 rgba(255, 255, 255, .18); cursor: pointer; display: grid; place-items: center; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.o2b-launcher::before { content: ""; position: absolute; z-index: -1; inset: -28% 46% 22% -34%; border-radius: 50%; background: linear-gradient(140deg, rgba(49, 207, 250, .55), rgba(49, 207, 250, 0)); transform: rotate(-12deg); }
.o2b-launcher:hover { transform: translateY(-2px) scale(1.025); border-color: rgba(132, 230, 255, .95); box-shadow: 0 0 0 4px rgba(34, 184, 230, .13), 0 17px 38px rgba(1, 24, 43, .52), inset 0 1px 0 rgba(255, 255, 255, .22); }
.o2b-launcher:active { transform: translateY(-1px) scale(.98); }
.o2b-launcher[aria-expanded="true"] { background: linear-gradient(145deg, #0b4368, #061b30); }
.o2b-launcher:focus-visible, .o2b-chat button:focus-visible, .o2b-chat input:focus-visible, .o2b-chat textarea:focus-visible { outline: 3px solid rgba(34, 184, 230, .4); outline-offset: 2px; }
.o2b-launcher svg { position: absolute; width: 39px; height: 39px; fill: none; transition: opacity .18s ease, transform .22s ease; }
.o2b-launcher-brand circle { stroke: #fff; stroke-width: 4.8; }
.o2b-launcher-two { stroke: #fff; stroke-width: 3.7; stroke-linecap: round; stroke-linejoin: round; }
.o2b-launcher-wave { stroke: #48d8ff; stroke-width: 2.6; stroke-linecap: round; }
.o2b-launcher-close { width: 29px !important; height: 29px !important; opacity: 0; transform: rotate(-75deg) scale(.62); }
.o2b-launcher-close path { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.o2b-launcher[aria-expanded="true"] .o2b-launcher-brand { opacity: 0; transform: rotate(75deg) scale(.62); }
.o2b-launcher[aria-expanded="true"] .o2b-launcher-close { opacity: 1; transform: none; }
/* 행 개수가 늘어도(예: 관리자 전용 띠) 대화 영역만 남는 높이를 차지하도록 flex 로 둔다. */
.o2b-chat { position: absolute; right: 0; bottom: 70px; width: min(440px, calc(100vw - 32px)); height: min(680px, calc(100vh - 120px)); background: #fff; border: 1px solid rgba(210, 229, 240, .9); border-radius: 26px; box-shadow: 0 24px 80px rgba(2, 35, 58, .3); overflow: hidden; display: none; flex-direction: column; }
.o2b-chat.is-open { display: flex; animation: o2b-open .2s ease-out; }
.o2b-adminonly { flex: none; padding: 7px 14px; background: #fff4d6; border-bottom: 1px solid #f0dfae; color: #7a5b00; font-size: 11px; line-height: 1.4; text-align: center; }
@keyframes o2b-open { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.o2b-header { padding: 18px 18px 17px; background: linear-gradient(135deg, #082b49, #075f91); color: #fff; display: flex; gap: 12px; align-items: center; }
.o2b-brandmark { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; background: rgba(255,255,255,.14); font-weight: 900; letter-spacing: -.04em; }
.o2b-heading { flex: 1; min-width: 0; }
.o2b-heading strong { display: block; font-size: 16px; }
.o2b-heading span { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: #cce9f7; font-size: 12px; }
.o2b-status { width: 7px; height: 7px; border-radius: 50%; background: #55e5b8; box-shadow: 0 0 0 4px rgba(85,229,184,.12); }
.o2b-icon-button { border: 0; background: transparent; color: inherit; width: 36px; height: 36px; border-radius: 12px; cursor: pointer; font-size: 23px; }
.o2b-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 16px; background: linear-gradient(#f8fbfd, #fff 36%); scroll-behavior: smooth; }
.o2b-header, .o2b-composer { flex: none; }
.o2b-message { max-width: 86%; margin-bottom: 12px; padding: 12px 14px; border-radius: 18px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.o2b-message.bot { background: #fff; border: 1px solid var(--o2b-line); border-top-left-radius: 6px; box-shadow: 0 5px 18px rgba(15, 69, 99, .06); }
.o2b-message.user { margin-left: auto; background: var(--o2b-blue); color: #fff; border-bottom-right-radius: 6px; }
.o2b-message.typing { color: #688194; }
/* 답변은 문단과 목록으로 그린다. 홈페이지 CSS가 p·ul·li 를 덮어쓰지 못하게 아이디로 우선순위를 올린다. */
#o2b-chat-root .o2b-message.bot { white-space: normal; }
#o2b-chat-root .o2b-para { margin: 0 0 9px; padding: 0; font-size: inherit; line-height: inherit; color: inherit; white-space: pre-wrap; }
#o2b-chat-root .o2b-list { margin: 0 0 9px; padding: 0 0 0 18px; list-style: disc outside; }
#o2b-chat-root ol.o2b-list { list-style: decimal outside; }
#o2b-chat-root .o2b-list li { margin: 0 0 5px; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
#o2b-chat-root .o2b-message-body > :last-child { margin-bottom: 0; }
#o2b-chat-root .o2b-list li:last-child { margin-bottom: 0; }
#o2b-chat-root .o2b-message strong { font-weight: 700; color: inherit; }
.o2b-review { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e7eef2; white-space: normal; }
.o2b-review-open { border: 0; padding: 0; background: transparent; color: #58798d; font-size: 11px; text-decoration: underline; cursor: pointer; }
.o2b-review label { display: block; margin-bottom: 8px; color: #526d7e; font-size: 11px; line-height: 1.45; }
.o2b-review textarea { display: block; width: 100%; min-height: 64px; margin-top: 5px; padding: 8px; border: 1px solid #cbdce6; border-radius: 9px; resize: vertical; font: inherit; }
.o2b-review .o2b-review-consent { display: flex; gap: 6px; align-items: flex-start; }
.o2b-review-consent input { margin-top: 2px; }
.o2b-review-submit { border: 0; border-radius: 9px; padding: 7px 9px; background: #e8f5fb; color: #096797; font-size: 11px; font-weight: 700; cursor: pointer; }
.o2b-review-result { margin-top: 6px; color: #b3261e; font-size: 11px; }
.o2b-review-success { color: #0878b8; font-size: 11px; line-height: 1.45; }
/* 대화 맨 앞 안내. 아래 작은 글씨보다 먼저 눈에 들어와야 한다. */
.o2b-notice { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #d8e9f4; border-radius: 14px; background: #f4fafd; }
#o2b-chat-root .o2b-notice-title { display: block; margin: 0 0 7px; color: var(--o2b-navy); font-size: 12px; font-weight: 700; }
#o2b-chat-root .o2b-notice-list { margin: 0; padding: 0 0 0 15px; list-style: disc outside; }
#o2b-chat-root .o2b-notice-list li { margin: 0 0 4px; padding: 0; color: #4a687c; font-size: 11.5px; line-height: 1.55; }
#o2b-chat-root .o2b-notice-list li:last-child { margin-bottom: 0; }
.o2b-count { color: #93a7b3; font-size: 11px; font-variant-numeric: tabular-nums; }
.o2b-count.is-near { color: #b3261e; font-weight: 700; }
.o2b-quick { display: flex; gap: 7px; flex-wrap: wrap; margin: 2px 0 16px; }
.o2b-quick button, .o2b-lead-open { border: 1px solid #b9dceb; color: #096797; background: #f2fbff; border-radius: 999px; padding: 8px 11px; font-size: 12px; cursor: pointer; }
.o2b-composer { border-top: 1px solid var(--o2b-line); padding: 12px; background: #fff; }
.o2b-ai-consent { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 9px 10px; border-radius: 11px; background: #f5f9fb; color: #526d7e; font-size: 11px; line-height: 1.45; }
.o2b-ai-consent input { margin-top: 2px; }
.o2b-ai-consent a, .o2b-consent a { color: #096797; }
.o2b-input-row { display: flex; gap: 8px; align-items: flex-end; }
/* 높이는 widget.js 가 입력한 줄 수에 맞춰 늘린다. max-height 와 자바스크립트 상한을 같이 맞춘다. */
.o2b-input { flex: 1; min-height: 44px; max-height: 168px; overflow-y: auto; resize: none; border: 1px solid #cbdce6; border-radius: 15px; padding: 11px 13px; font: inherit; font-size: 14px; line-height: 1.5; color: var(--o2b-text); }
.o2b-send { width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--o2b-blue); color: #fff; cursor: pointer; font-size: 19px; }
.o2b-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 9px; color: #718795; font-size: 11px; }
.o2b-meta a { color: #456f88; }
.o2b-lead { display: none; position: absolute; inset: 0; z-index: 2; background: #fff; padding: 16px 18px 18px; overflow-y: auto; }
.o2b-lead.is-open { display: block; }
.o2b-lead h3 { margin: 8px 0 5px; color: var(--o2b-navy); font-size: 17px; }
.o2b-lead p { margin: 0 0 12px; color: #627c8d; font-size: 12px; line-height: 1.5; }
/* 짧은 항목은 두 칸으로 묶어 세로 길이를 줄인다. 폭이 좁으면 자동으로 한 칸이 된다. */
.o2b-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); column-gap: 10px; }
.o2b-field { margin-bottom: 9px; min-width: 0; }
.o2b-field label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; }
.o2b-field input, .o2b-field textarea { width: 100%; border: 1px solid #cbdce6; border-radius: 11px; padding: 9px 10px; font-family: inherit; font-size: 14px; line-height: 1.4; color: var(--o2b-text); }
.o2b-field textarea { min-height: 124px; resize: vertical; }
.o2b-consent { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 12px; font-size: 12px; line-height: 1.45; }
.o2b-primary { width: 100%; border: 0; border-radius: 12px; background: var(--o2b-blue); color: #fff; padding: 11px; font-weight: 700; font-size: 15px; cursor: pointer; }
.o2b-lead-close { border: 0; background: #edf5f8; border-radius: 10px; padding: 7px 10px; font-size: 12px; cursor: pointer; }
.o2b-error { color: #b3261e; font-size: 12px; margin-top: 10px; }
.o2b-primary:disabled { background: #8fbcd6; cursor: progress; }
.o2b-done { display: none; position: absolute; inset: 0; z-index: 3; background: #fff; padding: 24px 20px; overflow-y: auto; }
.o2b-done.is-open { display: flex; }
.o2b-done:focus { outline: none; }
.o2b-done-inner { margin: auto; width: 100%; max-width: 300px; text-align: center; }
.o2b-done-mark { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: #e6f6ee; color: #12784b; font-size: 31px; font-weight: 700; }
.o2b-done h3 { margin: 0 0 10px; color: var(--o2b-navy); font-size: 19px; }
.o2b-done-text { margin: 0 0 16px; color: #627c8d; font-size: 13px; line-height: 1.55; }
.o2b-done-recap { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--o2b-line); border-radius: 12px; background: #f8fbfd; color: #456f88; font-size: 12px; line-height: 1.7; text-align: left; white-space: pre-line; overflow-wrap: anywhere; }
.o2b-done-recap:empty { display: none; }
.o2b-done-back { width: 100%; border: 0; border-radius: 13px; background: var(--o2b-blue); color: #fff; padding: 12px; font-weight: 700; cursor: pointer; }
/* 개인정보처리방침 팝업. 위젯 패널이 아니라 화면 전체를 덮고 가운데에 뜬다. */
.o2b-pv { display: none; position: fixed; inset: 0; z-index: 2147483001; padding: 24px 16px; background: rgba(8, 36, 61, .55); }
.o2b-pv.is-open { display: flex; }
.o2b-pv-box { margin: auto; display: grid; grid-template-rows: auto 1fr auto; width: min(660px, 100%); max-height: 100%; background: #fff; border-radius: 18px; box-shadow: 0 28px 80px rgba(2, 25, 44, .45); overflow: hidden; }
.o2b-pv-box:focus { outline: none; }
.o2b-pv-head { display: flex; align-items: center; gap: 10px; padding: 15px 14px 15px 20px; border-bottom: 1px solid var(--o2b-line); }
.o2b-pv-close { border: 0; background: transparent; width: 34px; height: 34px; border-radius: 11px; color: #47657a; font-size: 23px; line-height: 1; cursor: pointer; }
.o2b-pv-close:hover { background: #eef5f9; }
.o2b-pv-foot { padding: 11px 20px 13px; border-top: 1px solid var(--o2b-line); }
.o2b-pv-body { overflow-y: auto; padding: 16px 20px 22px; overflow-wrap: anywhere; }
/* 방침 본문은 h2·p·ul 같은 맨 태그로 들어온다. 홈페이지와 Elementor의 전역 글꼴 규칙이
   이를 덮어쓰므로, 아이디 선택자로 우선순위를 올려 위젯 안에서는 우리 서식이 이기게 한다. */
#o2b-chat-root .o2b-pv-title { flex: 1; min-width: 0; margin: 0; color: var(--o2b-navy); font-size: 15px; font-weight: 700; letter-spacing: normal; }
#o2b-chat-root .o2b-pv-body { color: #3d5666; font-size: 13px; line-height: 1.75; }
#o2b-chat-root .o2b-pv-body h1, #o2b-chat-root .o2b-pv-body h2 { margin: 18px 0 7px; padding: 0; color: var(--o2b-navy); font-size: 14px; font-weight: 700; line-height: 1.45; letter-spacing: normal; text-transform: none; }
#o2b-chat-root .o2b-pv-body h3, #o2b-chat-root .o2b-pv-body h4 { margin: 15px 0 6px; padding: 0; color: var(--o2b-navy); font-size: 13px; font-weight: 700; line-height: 1.45; letter-spacing: normal; text-transform: none; }
#o2b-chat-root .o2b-pv-body p { margin: 0 0 10px; padding: 0; font-size: 13px; line-height: 1.75; color: inherit; }
#o2b-chat-root .o2b-pv-body ul, #o2b-chat-root .o2b-pv-body ol { margin: 0 0 11px; padding: 0 0 0 19px; list-style: disc outside; }
#o2b-chat-root .o2b-pv-body ol { list-style: decimal outside; }
#o2b-chat-root .o2b-pv-body li { margin: 0 0 5px; padding: 0; font-size: 13px; line-height: 1.7; color: inherit; }
#o2b-chat-root .o2b-pv-body a { color: #096797; text-decoration: underline; }
#o2b-chat-root .o2b-pv-body hr { margin: 14px 0; border: 0; border-top: 1px solid var(--o2b-line); }
#o2b-chat-root .o2b-pv-body > :first-child { margin-top: 0; }
#o2b-chat-root .o2b-pv-link { color: #456f88; font-size: 12px; }
@media (max-width: 520px) { #o2b-chat-root { --o2b-edge-x: var(--o2b-mobile-x, 16px); --o2b-edge-y: var(--o2b-mobile-y, 88px); } .o2b-chat { position: fixed; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; } .o2b-launcher { width: 56px; height: 56px; } .o2b-launcher-brand { width: 36px !important; height: 36px !important; }
  /* iOS는 입력 글자가 16px 미만이면 탭할 때 화면을 확대한다. 모바일은 전체화면이라 세로 여유가 있다. */
  .o2b-field input, .o2b-field textarea { font-size: 16px; padding: 10px 11px; } }
@media (prefers-reduced-motion: reduce) { .o2b-chat.is-open { animation: none; } .o2b-launcher { transition: none; } #o2b-chat-root { transition: none; } }