/* 2026-10-25: 챗봇. 오고피씽 챗봇과 같은 흐름(오른쪽 아래 원형 버튼, 전체 화면 대화)에 usedu 색과 글꼴을 쓴다. */
.uc-fab { position: fixed; top: 50%; right: calc(16px + env(safe-area-inset-right, 0px)); transform: translateY(-50%); z-index: 60; width: 76px; height: 76px; border-radius: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--learn-official, #0B3B8C); color: #fff; text-decoration: none; box-shadow: 0 4px 14px rgba(11, 59, 140, .28); }
.uc-fab span { font-size: 13px; font-weight: 700; line-height: 1; }
@media (max-width: 767px) { .uc-fab { right: 0; width: 56px; height: 70px; padding-left: 2px; padding-right: env(safe-area-inset-right, 0px); border-radius: 35px 0 0 35px; box-shadow: -2px 3px 10px rgba(11, 59, 140, .22); } .uc-fab .ucf { width: 32px; height: 30px; } .uc-fab span { font-size: 12px; } }
.uc-fab:focus-visible { outline: 3px solid var(--learn-primary, #0961F5); outline-offset: 2px; }
.learn-page.is-chat .learn-footer { display: none; }

.uc-page { position: fixed; left: 0; right: 0; top: 56px; bottom: 0; z-index: 40; display: flex; flex-direction: column; background: var(--learn-surface, #fff); }
.uc-wrap { width: 100%; max-width: 720px; margin: 0 auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.uc-bar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--learn-border, #E2E8F0); background: #fff; }
.uc-bar span { font-size: 12px; color: #64748b; min-width: 0; }
.uc-btn { flex-shrink: 0; white-space: nowrap; font: inherit; font-size: 13px; line-height: 1; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--learn-border, #E2E8F0); background: #fff; color: #334155; cursor: pointer; }
.uc-btn:disabled { opacity: .5; }
.uc-btn.is-main { background: var(--learn-official, #0B3B8C); border-color: transparent; color: #fff; }
.uc-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 14px; display: flex; flex-direction: column; }
.uc-empty { margin: auto 0; text-align: center; color: #64748b; font-size: 14px; line-height: 1.6; padding: 0 8px; }
.uc-empty p { margin: 0 0 6px; }
.uc-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.uc-div { display: flex; justify-content: center; margin: 16px 0 12px; }
.uc-div:first-child { margin-top: 0; }
.uc-div span { font-size: 12px; color: #fff; background: rgba(55, 65, 81, .35); border-radius: 12px; padding: 4px 12px; }
.uc-row { display: flex; gap: 6px; margin-top: 12px; }
.uc-row.is-cont { margin-top: 4px; }
.uc-row.is-user { justify-content: flex-end; align-items: flex-end; }
.uc-row.is-bot { align-items: flex-start; gap: 8px; }
.uc-ava { width: 36px; height: 36px; flex-shrink: 0; }
.uc-ava i { display: flex; width: 36px; height: 36px; border-radius: 18px; align-items: center; justify-content: center; background: var(--learn-official, #0B3B8C); }
.uc-col { min-width: 0; flex: 1; }
.uc-name { font-size: 12px; color: #475569; margin: 0 0 5px 4px; }
.uc-line { display: flex; align-items: flex-end; gap: 6px; }
.uc-bub { position: relative; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; padding: 8px 12px; border-radius: 14px; }
.uc-row.is-user .uc-bub { max-width: 72%; margin-right: 6px; background: var(--learn-primary, #0961F5); color: #fff; }
.uc-row.is-bot .uc-bub { max-width: 82%; margin-left: 6px; background: #F1F3F5; color: #111827; }
.uc-row.is-head.is-user .uc-bub { border-top-right-radius: 4px; }
.uc-row.is-head.is-bot .uc-bub { border-top-left-radius: 4px; }
.uc-row.is-head.is-user .uc-bub::after { content: ''; position: absolute; top: 0; right: -6px; border-top: 10px solid var(--learn-primary, #0961F5); border-right: 8px solid transparent; }
.uc-row.is-head.is-bot .uc-bub::after { content: ''; position: absolute; top: 0; left: -6px; border-top: 10px solid #F1F3F5; border-left: 8px solid transparent; }
.uc-time { flex-shrink: 0; font-size: 11px; color: #6B7280; white-space: nowrap; line-height: 1.2; }
.uc-typing { display: inline-flex; align-items: center; gap: 5px; padding: 13px 14px !important; }
.uc-typing b { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #6B7280; animation: uc-typing 1.2s infinite ease-in-out; }
.uc-typing b:nth-child(2) { animation-delay: .2s; }
.uc-typing b:nth-child(3) { animation-delay: .4s; }
@keyframes uc-typing { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .uc-typing b { animation: none; opacity: .6; } }
.uc-bub-acts { margin-top: 10px; white-space: normal; }
.uc-page .uc-ticket { box-sizing: border-box; display: block; width: 100%; min-height: 40px; margin: 0; padding: 8px 12px; border: 1px solid var(--learn-official, #0B3B8C); border-radius: 10px; background: #fff; color: var(--learn-official, #0B3B8C); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.uc-page .uc-ticket:disabled { border-color: #CBD5E1; color: #94A3B8; cursor: default; }
.uc-form { box-sizing: border-box; align-self: flex-start; width: calc(100% - 56px); max-width: 420px; margin: 8px 0 0 50px; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--learn-border, #E2E8F0); border-radius: 12px; background: #fff; }
.uc-form-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uc-form-head strong { font-size: 14px; color: #0F172A; }
.uc-page .uc-form select { box-sizing: border-box; flex-shrink: 0; width: auto; min-width: 112px; height: 32px; margin: 0; padding: 0 8px; border: 1px solid var(--learn-border, #CBD5E1); border-radius: 8px; background: #fff; color: #334155; font-family: inherit; font-size: 13px; }
.uc-page .uc-form textarea { box-sizing: border-box; width: 100%; margin: 0; resize: none; height: 78px; padding: 8px 10px; border: 1px solid var(--learn-border, #CBD5E1); border-radius: 8px; background: #F8FAFC; color: #0F172A; font-family: inherit; font-size: 15px; line-height: 20px; box-shadow: none; }
.uc-page .uc-form textarea:focus { outline: none; border-color: var(--learn-official, #0B3B8C); background: #fff; }
@media (min-width: 768px) { .uc-form { width: calc(100% - 50px); max-width: 320px; } .uc-form-head { justify-content: flex-start; gap: 10px; } .uc-page .uc-form textarea { height: 64px; } .uc-row.is-user .uc-bub, .uc-row.is-bot .uc-bub { max-width: min(82%, 320px); box-sizing: border-box; } }
.uc-form-help { margin: 0; font-size: 12px; color: #64748B; }
.uc-form .uc-acts { display: flex; gap: 6px; justify-content: flex-end; margin-top: 2px; }
.uc-form .uc-acts .uc-btn { font-size: 13px; padding: 7px 14px; }
.uc-err { color: #b91c1c; font-size: 13px; margin: 8px 0 0 50px; }
.uc-input { flex-shrink: 0; display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--learn-border, #E2E8F0); background: #fff; }
.uc-page .uc-input textarea { box-sizing: border-box; flex: 1; min-width: 0; margin: 0; resize: none; overflow-y: hidden; -webkit-appearance: none; appearance: none; height: 42px; min-height: 42px; max-height: 112px; padding: 9px 12px; border: 1px solid var(--learn-border, #CBD5E1); border-radius: 12px; background: #F8FAFC; color: #0F172A; font-family: inherit; font-size: 16px; line-height: 22px; box-shadow: none; }
.uc-page .uc-input textarea:focus { outline: none; border-color: var(--learn-official, #0B3B8C); background: #fff; }
.uc-page .uc-input textarea::placeholder { color: #94A3B8; }
.uc-page .uc-input button { box-sizing: border-box; flex-shrink: 0; margin: 0; -webkit-appearance: none; appearance: none; height: 42px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--learn-official, #0B3B8C); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 42px; cursor: pointer; }
.uc-page .uc-input button:disabled { background: #CBD5E1; color: #fff; cursor: default; }
/* 넓은 화면: 챗봇 칸을 다른 수강 화면 본문과 같은 좌우 끝(헤더 버튼 끝)에 맞춘다. */
@media (min-width: 768px) { .uc-wrap { box-sizing: border-box; max-width: none; padding: 0 16px; } .uc-bar, .uc-list, .uc-input { padding-left: 0; padding-right: 0; } }
@media (min-width: 1024px) { .uc-wrap { padding: 0 max(var(--learn-content-gutter, 24px), calc((100% - var(--learn-content-max, 1080px)) / 2)); } }
@media print { .uc-fab, .uc-page { display: none !important; } }

/* 얼굴: 무표정과 웃는 얼굴을 오가고 가끔 눈을 깜빡인다 */
.ucf .ucf-eyes { transform-box: fill-box; transform-origin: center; animation: ucf-blink 5.2s infinite; }
.ucf .ucf-flat { animation: ucf-flat 8s ease-in-out infinite; }
.ucf .ucf-smile { opacity: 0; animation: ucf-smile 8s ease-in-out infinite; }
@keyframes ucf-blink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.12); } 96% { transform: scaleY(1); } }
@keyframes ucf-smile { 0%, 30% { opacity: 0; } 40%, 75% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes ucf-flat { 0%, 30% { opacity: 1; } 40%, 75% { opacity: 0; } 85%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ucf .ucf-eyes, .ucf .ucf-flat, .ucf .ucf-smile { animation: none; } .ucf .ucf-flat { opacity: 0; } .ucf .ucf-smile { opacity: 1; } }