/* 관리자 미리보기도 쓰므로 main.css 가 아니라 여기 둔다. */

/* safe-area — 아이폰에서 홈 바에 걸치지 않게. .on 은 둘러보는 화면에서만 붙는다
   (좌석 선택 · 입금 안내 · 티켓의 오른쪽 아래에는 눌러야 할 것이 있다). */
.channel-fab { position: fixed; z-index: 55;
               right: calc(1rem + env(safe-area-inset-right));
               bottom: calc(1rem + env(safe-area-inset-bottom));
               width: 3.5rem; height: 3.5rem; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
               display: flex; align-items: center; justify-content: center; overflow: hidden;
               background: linear-gradient(135deg, #3b6ff5 0%, #5b5bd6 100%); color: #fff;
               box-shadow: 0 .6rem 1.6rem rgba(15,23,42,.25);
               transform: translateY(1.5rem); opacity: 0; pointer-events: none;
               transition: transform .25s ease, opacity .25s ease, filter .15s ease }
.channel-fab.on { transform: translateY(0); opacity: 1; pointer-events: auto }
.channel-fab:hover { filter: brightness(1.06) }
.channel-fab:focus-visible { outline: 3px solid #93b4ff; outline-offset: 3px }
.channel-fab i { font-size: 1.45rem }
.channel-fab-face, .channel-fab-close { display: flex; align-items: center; justify-content: center; width: 100%; height: 100% }
/* 테두리는 흰 바탕이 밝은 화면에 묻히지 않게. */
.channel-fab.logo { background: #fff; box-shadow: 0 .6rem 1.6rem rgba(15,23,42,.25), 0 0 0 1px rgba(15,23,42,.08) }
.channel-fab-face img { width: 100%; height: 100%; object-fit: cover }
.channel-fab-close { display: none }
.channel-fab.open { background: linear-gradient(135deg, #3b6ff5 0%, #5b5bd6 100%) }
.channel-fab.open .channel-fab-face { display: none }
.channel-fab.open .channel-fab-close { display: flex }
@media (prefers-reduced-motion: reduce) { .channel-fab { transition: none } }
/* 이 파일이 Tailwind 뒤에 실려 위의 display: flex 가 [hidden] 을 이긴다 — 도로 감춘다. */
.channel-fab[hidden] { display: none }

.channel-fab.demo { position: static; transform: none; opacity: 1; pointer-events: none }

/* AI 챗봇 버튼 — 자리(bottom · 탭 줄 · 앱)는 .channel-fab 규칙 그대로, 채널 버튼이 떠 있으면 한 칸 위로(translate 는 보이기 애니메이션의 transform 과 따로 돈다). */
/* 얼굴은 🤖 이모지라 바탕을 흰색으로 둔다(채널 버튼의 로고 얼굴과 같다) — 색 있는 바탕 위에서는 이모지 색과 부딪친다. 열리면 회색 X. */
.ai-fab, .ai-fab.open { background: #fff; color: #475569;
                        box-shadow: 0 .6rem 1.6rem rgba(15,23,42,.25), 0 0 0 1px rgba(15,23,42,.08) }
.ai-fab.stacked { translate: 0 calc(-100% - .75rem) }
.ai-fab-emoji { font-size: 1.75rem; line-height: 1 }
/* AI 챗봇 창 — 자리는 .channel-panel 그대로(떠 있는 버튼이 보이면 support.js 가 그 바로 위로 bottom 을 옮긴다). 대화가 늘어도 높이가 흔들리지 않게 고정한다. */
.channel-panel.support-panel { width: min(26rem, calc(100vw - 2rem)); height: 44rem; max-height: calc(100dvh - 7rem); background: #fff }

/* 폰은 끝까지 내리면 버튼이 SNS 아이콘 밑에 멈춘다(channel.js 의 dockChannelFab) — 푸터 아래를 비우지 않고 사업자 정보 오른쪽만 비운다. */
/* 두 버튼이 함께 서면 아래 버튼이 약관 줄까지 내려와 그 줄도 비운다. */
@media (max-width: 767.98px) {
  #site-footer.channel-fab-gap #foot-biz, #site-footer.ai-fab-gap #foot-biz,
  #site-footer.channel-fab-gap.ai-fab-gap #foot-legal { padding-right: 4rem }
}
/* 폰보다 넓으면 아래 대신 오른쪽을 비워 버튼이 푸터 글 옆에 선다. 1400px 부터는 본문(max-w-7xl)이 버튼까지 닿지 않는다.
   앱은 탭 줄 규칙(common.css)이 아래를 비운다. */
@media (min-width: 768px) and (max-width: 1399.98px) {
  html:not(.app) #site-footer.channel-fab-gap > div,
  html:not(.app) #site-footer.ai-fab-gap > div { padding-right: calc(5rem + env(safe-area-inset-right)) }
}

.channel-panel { position: fixed; z-index: 56;
                 right: calc(1rem + env(safe-area-inset-right));
                 bottom: calc(5.25rem + env(safe-area-inset-bottom));
                 width: min(23rem, calc(100vw - 2rem));
                 max-height: min(40rem, calc(100dvh - 7rem));
                 display: flex; border-radius: 1.1rem; overflow: hidden;
                 box-shadow: 0 1.2rem 3rem rgba(15,23,42,.28), 0 0 0 1px rgba(15,23,42,.06);
                 animation: channel-panel-in .2s ease }
.channel-panel[hidden] { display: none }
.channel-panel .chp { flex: 1; min-height: 0 }
@keyframes channel-panel-in { from { opacity: 0; transform: translateY(.6rem) scale(.98) } }
@media (prefers-reduced-motion: reduce) { .channel-panel { animation: none } }

/* 흰 카드만 떠 있으면 창이 비어 보여 머리 색을 아래로 옅게 번지게 한다. */
.chp { display: flex; flex-direction: column; color: #1e293b;
       background: linear-gradient(180deg, #e3e9ff 0%, #eef1fb 38%, #f3f5f9 100%);
       font-size: .875rem; line-height: 1.55; text-align: left }
/* 무늬를 기울여 깔아 격자처럼 보이지 않게 한다. */
.chp-head { position: relative; overflow: hidden; padding: 1.4rem 1.25rem 2.9rem; color: #fff; flex-shrink: 0;
            background: linear-gradient(135deg, #3b6ff5 0%, #5b5bd6 100%) }
.chp-head::before { content: ''; position: absolute; inset: -40%; pointer-events: none; transform: rotate(-14deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M16 14h26a9 9 0 0 1 9 9v12a9 9 0 0 1-9 9H29l-9 7v-7h-4a9 9 0 0 1-9-9V23a9 9 0 0 1 9-9z'/%3E%3Ccircle cx='63' cy='64' r='9'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='21' cy='29' r='2'/%3E%3Ccircle cx='29' cy='29' r='2'/%3E%3Ccircle cx='37' cy='29' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 84px 84px; opacity: .12 }
.chp-head::after { content: ''; position: absolute; right: -3rem; top: -3rem; width: 11rem; height: 11rem; border-radius: 999px;
                   background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); pointer-events: none }
.chp-head > * { position: relative; z-index: 1 }
.chp-logo { display: flex; width: 3.4rem; height: 3.4rem; border-radius: 999px; overflow: hidden;
            background: #fff; border: 3px solid rgba(255,255,255,.65); margin-bottom: .6rem;
            box-shadow: 0 .4rem 1rem rgba(15,23,42,.18) }
.chp-logo img { width: 100%; height: 100%; object-fit: cover }
.chp-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em }
.chp-tag { margin-top: .15rem; font-size: .78rem; opacity: .85 }
.chp-body { flex: 1; min-height: 0; overflow-y: auto; margin-top: -1.8rem; position: relative; z-index: 1;
            padding: 0 .85rem .85rem; display: flex; flex-direction: column; gap: .7rem }
.chp-card { background: #fff; border-radius: .9rem; padding: 1rem 1.05rem;
            box-shadow: 0 .35rem 1.1rem rgba(30,41,90,.08), 0 0 0 1px rgba(30,41,90,.04) }
.chp-from { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .8rem; margin-bottom: .55rem }
.chp-from img { width: 1.6rem; height: 1.6rem; border-radius: 999px }
.chp-text { margin: 0; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere }
.chp-card-title { display: flex; align-items: center; gap: .4rem; font-weight: 700; margin-bottom: .45rem }
.chp-card-title i { color: #64748b }
/* 접는 애니메이션을 두지 않는다 — 열자마자 읽는 곳이라 높이가 움직이면 첫 줄을 놓친다. */
.chp-nt-head { font-weight: 700; font-size: .84rem; color: #1e293b; margin-bottom: .3rem }
/* 본문 칸은 편집기 글(.ev-desc) 한 겹을 담는다 — 바깥 여백은 카드가 정한다. */
.chp-nt-p { margin: 0 }
/* 그대로 펼치면 '대화 시작' 이 화면 밖으로 밀린다. max-height 로 자르면 글자가 반만 보이고 `…` 이 없어
   line-clamp 를 쓴다. */
.chp-nt-p.clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden }
/* 오른쪽 끝에 세운다 — 왼쪽에 두면 끊긴 본문의 마지막 줄에 붙어 글의 일부처럼 읽힌다. */
.chp-nt-more { display: block; margin: .4rem 0 0 auto; padding: 0; background: none; border: 0; cursor: pointer;
               font: inherit; font-size: .78rem; font-weight: 700; color: #2563eb }
.chp-nt-more:hover { text-decoration: underline }
.chp-nt-list { list-style: none; margin: .7rem 0 0; padding: .6rem 0 0; border-top: 1px solid #eef2f7 }
.chp-nt-row { display: flex; align-items: center; gap: .5rem; width: 100%;
              padding: .45rem 0; background: none; border: 0; cursor: pointer;
              font: inherit; font-size: .8rem; color: #475569; text-align: left }
.chp-nt-row:hover .chp-nt-t { text-decoration: underline }
.chp-nt-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chp-nt-row i { color: #cbd5e1; font-size: .7rem }
.chp-nt-row[aria-expanded="true"] { color: #1e293b; font-weight: 700 }
.chp-nt-row[aria-expanded="true"] i { transform: rotate(90deg); color: #94a3b8 }
.chp-hint { margin: 0 0 .7rem; font-size: .8rem; color: #64748b }
.chp-start { display: flex; align-items: center; justify-content: center; gap: .5rem;
             padding: .8rem 1rem; border-radius: 999px; text-decoration: none;
             background: #FEE500; color: #191919; font-weight: 800; transition: background-color .15s ease }
/* 휴대폰은 누른 뒤 hover 가 남아 어두운 노랑으로 굳는다. */
@media (hover: hover) { .chp-start:hover { background: #F2DA00 } }
.chp-start:focus-visible { outline: 3px solid #191600; outline-offset: 2px }
.chp-start svg { width: 1.1rem; height: 1.1rem }
.chp-note { margin: .55rem 0 0; font-size: .7rem; color: #94a3b8; text-align: center }
.chp-scope { margin: .1rem 0 .2rem; font-size: .7rem; color: #94a3b8; text-align: center; line-height: 1.7 }
.chp-scope a { color: #64748b; font-weight: 700; text-decoration: none }
.chp-scope a:hover { text-decoration: underline }