html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* 채팅 패널 (Components/Shared/ChatPanel.razor) — 오른쪽 고정, 모바일은 전체 화면 */
.chat-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 480px; max-width: 100%;
    z-index: 1050; background: #fff;
    display: flex; flex-direction: column;
}
.chat-panel-body { flex: 1 1 auto; overflow-y: auto; background: #f7f7f9; }
.chat-msg { max-width: 88%; padding: .5rem .75rem; border-radius: .75rem; word-break: break-word; }
.chat-user { background: #0d6efd; color: #fff; }
.chat-agent { background: #fff; border: 1px solid #dee2e6; }
.chat-agent .markdown-body > :last-child { margin-bottom: 0; }
@media (max-width: 767.98px) { .chat-panel { width: 100%; } }

/* 회의 단계 색 — 가상 회의실(밝은 색: 벽 화면·재생 막대)과 단계 표시(-deep: 밝은 화면)가 함께 쓴다 */
:root {
  --st-opinions: #6cb6e6; --st-review: #a99be8; --st-decision: #e2b04a; --st-closed: #6cc49a; --st-cancelled: #93a1a8;
  --st-opinions-deep: #1c6ea4; --st-review-deep: #5b4bc4; --st-decision-deep: #9a6a12; --st-closed-deep: #237a50; --st-cancelled-deep: #5f6b72;
}

/* 회의 단계 표시 (Pages/MeetingRoom.razor): 지난 단계 = 단계 색 밑줄, 지금 단계 = 단계 색으로 채움 */
.meeting-steps { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; }
.meeting-steps li { --st: var(--st-opinions-deep); position: relative; overflow: hidden; flex: 1 1 8rem; text-align: center; padding: .35rem .5rem;
  border-radius: .5rem; background: #f1f3f5; color: #7a828a; font-size: .875rem; transition: background-color .4s, color .4s; }
.meeting-steps li.st-review { --st: var(--st-review-deep); }
.meeting-steps li.st-decision { --st: var(--st-decision-deep); }
.meeting-steps li.st-closed { --st: var(--st-closed-deep); }
.meeting-steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--st); opacity: 0; }
.meeting-steps li.done { color: #2f3740; }
.meeting-steps li.done::after { opacity: .75; }
.meeting-steps li.current { background: var(--st); color: #fff; font-weight: 600; box-shadow: 0 8px 18px -12px var(--st); }
.meeting-controls { position: sticky; bottom: 0; z-index: 10; box-shadow: 0 -.25rem .75rem rgba(0,0,0,.06); }

/* 첨부 (Components/Shared/AttachmentPicker.razor, AttachmentList.razor) */
.attach-thumb-sm { height: 1.5rem; width: auto; border-radius: .2rem; }
.attach-thumb { max-height: 9rem; max-width: 100%; border-radius: .375rem; border: 1px solid #dee2e6; background: #fff; }
.attach-drop { outline: 2px dashed #0d6efd; outline-offset: 2px; background: #eef4ff; }
.btn-close-sm { width: .6rem; height: .6rem; padding: .2rem; }
.chat-user .attach-doc { color: #fff; }

/* 대시보드 수치 카드 */
.metric-card .fs-4 { line-height: 1.2; }
.metric-card a { text-decoration: none; }
.audit-row td { vertical-align: top; }

/* 웹 검색 출처 (채팅·회의) */
.web-sources summary { cursor: pointer; color: var(--bs-secondary-color, #6c757d); }
.web-sources ol { max-height: 14rem; overflow-y: auto; word-break: break-all; }

/* 도구 권한 표 */
.perm-allow { background-color: #e8f5e9 !important; color: #1b5e20; }
.perm-approval { background-color: #fff8e1 !important; color: #8a5a00; }
.perm-deny { background-color: #fdecea !important; color: #b71c1c; }
.perm-table .perm-scope { white-space: nowrap; min-width: 9rem; }
.perm-table .perm-select { min-width: 7.5rem; background-color: transparent; }
.perm-table th { white-space: nowrap; }

/* 최종 결과물 내보내기·부록 */
.export-bar .btn { white-space: nowrap; }
.appendix-preview table { display: block; overflow-x: auto; }

/* 웹 검색 키 설정 */
.key-card input[type=password], .key-card input[type=text] { letter-spacing: .02em; }
.guide summary { cursor: pointer; }
.guide ol li { margin-bottom: .25rem; }

/* 회의: 제외된 팀·접은 카드 */
.meeting-card.excluded { opacity: .6; }
.meeting-card.excluded .card-header { background: repeating-linear-gradient(45deg, #f1f3f5, #f1f3f5 6px, #e9ecef 6px, #e9ecef 12px); }
#participants .participant { white-space: nowrap; }

/* 팀 아바타 (사진 또는 팀 색 원 + 이모지) */
.team-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; overflow: hidden;
  background: var(--team-color, #6c757d); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--team-color, #6c757d); line-height: 1; }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-avatar-emoji { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

/* 가상 회의실 (Components/Shared/VirtualMeetingStage.razor)
   밤의 임원 회의실 — 인디고 벽, 월넛 사각 탁자, 황동. 힘은 '발언권 조명'(보고 있는 발언의 좌석 쪽 후광 + 빛나는 인레이) 한 곳에만 준다.
   움직임은 상태를 알리는 것만: 조명 이동 · 발언 준비(도는 호) · 음성 읽기(물결) · 진행 중(점) · 단계 전환. 장식용 반복 애니메이션은 두지 않는다.
   회의실 폭이 840px 보다 좁으면(모바일·좁은 창) 벽 화면 띠 + 좌석 가로 줄로 바뀐다(아래 @container vm). */
@property --vm-speaker { syntax: '<color>'; inherits: true; initial-value: #c9a55c; }
@property --vm-stage { syntax: '<color>'; inherits: true; initial-value: #6cb6e6; }
/* 조명 자리: x = 좌석 가운데, y = 좌석 기준선(탁자 모서리), ly = 빛날 인레이 줄 — 모두 회의실 백분율 */
@property --spot-x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --spot-y { syntax: '<percentage>'; inherits: true; initial-value: 75%; }
@property --spot-ly { syntax: '<percentage>'; inherits: true; initial-value: 70%; }
.vm { container: vm / inline-size; margin-bottom: .5rem;
  --vm-brass: #c9a55c; --vm-ink: #eceef8; --vm-ink-dim: rgba(236, 238, 248, .64); --vm-chair-gap: #1b1512; --vm-ease: cubic-bezier(.22, .8, .24, 1); }

/* 방: 벽(위 33%) · 걸레받이 선 · 바닥. 탁자 둘레에 천장 조명이 떨어진 자리.
   색·조명 자리의 전환은 방 안에만 건다(자막까지 매 프레임 다시 계산하지 않게) */
.vm-room { position: relative; isolation: isolate; height: clamp(520px, calc(100vh - 25rem), 820px); width: 100%; border-radius: 1rem; overflow: hidden;
  color: var(--vm-ink);
  background:
    radial-gradient(58% 42% at 50% 62%, rgba(132, 124, 210, .16), transparent 72%),
    linear-gradient(180deg, transparent 32.7%, rgba(201, 165, 92, .22) 32.7% 33%, rgba(4, 5, 18, .32) 33%, transparent 44%),
    linear-gradient(180deg, #2a2f5c 0%, #1e2146 33%, #17193b 33%, #0f1130 100%);
  box-shadow: 0 26px 50px -30px rgba(16, 18, 48, .9), inset 0 0 0 1px rgba(201, 165, 92, .14);
  transition: --spot-x .8s var(--vm-ease), --spot-y .8s var(--vm-ease), --spot-ly .8s var(--vm-ease),
    --vm-speaker .8s var(--vm-ease), --vm-stage .8s var(--vm-ease); }
/* 첫 화면: 조명이 사용자석(보는 사람 자리)에서 출발해 지금 발언자에게 옮겨 간다 — 대화형이 된 뒤 한 번 */
.vm-room.intro { animation: vm-spot-in 1s .45s var(--vm-ease) backwards; }
@keyframes vm-spot-in { from { --spot-x: var(--spot-x0); --spot-y: var(--spot-y0); --spot-ly: var(--spot-ly0); } }
.vm-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* 벽 화면 불빛이 벽에 번진 것 · 가장자리 어둡게 */
.vm-backdrop::before { content: ""; position: absolute; left: 50%; top: 0; width: 64%; height: 42%; translate: -50% 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--vm-stage) 18%, transparent), transparent); }
.vm-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 95% at 50% 45%, transparent 58%, rgba(4, 5, 18, .5) 100%); }

/* 창 두 개: 밤 도시(정지 그림) */
.vm-window { position: absolute; top: 5%; width: 24%; height: 23%; border-radius: 3px; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 125%, rgba(255, 168, 112, .3), transparent 62%), linear-gradient(180deg, #0f1332 0%, #1b2150 68%, #2c2d5b 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 165, 92, .25), 0 0 0 5px rgba(10, 11, 30, .55); }
.vm-window.left { left: 3%; }
.vm-window.right { right: 3%; }
.vm-window::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background:
    radial-gradient(circle, rgba(255, 212, 150, .5) 0 1px, transparent 1.6px) 0 0 / 17px 13px,
    radial-gradient(circle, rgba(150, 190, 255, .3) 0 1px, transparent 1.6px) 8px 6px / 23px 17px,
    #0b0d25;
  clip-path: polygon(0 58%, 5% 58%, 5% 30%, 12% 30%, 12% 46%, 18% 46%, 18% 12%, 25% 12%, 25% 38%, 32% 38%, 32% 54%, 39% 54%, 39% 20%, 44% 20%, 44% 4%, 50% 4%,
    50% 34%, 57% 34%, 57% 50%, 63% 50%, 63% 24%, 70% 24%, 70% 42%, 77% 42%, 77% 16%, 84% 16%, 84% 48%, 91% 48%, 91% 32%, 100% 32%, 100% 100%, 0 100%); }
.vm-window.right::before { transform: scaleX(-1); }
.vm-window::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 2px), rgba(9, 10, 28, .95) calc(33.333% - 2px) 33.333%),
    linear-gradient(115deg, rgba(255, 255, 255, .06) 0 30%, transparent 30.5%); }

/* 벽 화면: 단계·안건·진행 상태. 단계 색 윗줄과 은은한 빛 */
.vm-screen { position: absolute; z-index: 6; left: 50%; top: 4%; width: clamp(18rem, 38%, 40rem); height: 21%; translate: -50% 0;
  border-radius: .45rem; overflow: hidden; background: linear-gradient(180deg, #0c0e22, #05060f); border: 1px solid rgba(201, 165, 92, .5);
  box-shadow: 0 0 0 5px #0a0b1d, 0 0 0 6px rgba(201, 165, 92, .2), 0 22px 40px -20px rgba(0, 0, 0, .85), 0 0 80px -24px var(--vm-stage); }
.vm-screen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--vm-stage); }
.vm-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, .06) 0 24%, transparent 24.5%); }
.vm-screen-inner { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .55rem 1.1rem .5rem; text-align: center; }
.vm-screen-stage { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--vm-stage); font-variant-numeric: tabular-nums; }
.vm-screen-agenda { font-size: .82rem; line-height: 1.45; color: #dfe2f3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vm-screen-status { display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; color: var(--vm-ink-dim); }
.vm-live-dot { flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--vm-stage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vm-stage) 22%, transparent); }
.vm-room.is-running .vm-live-dot { animation: vm-live 1.6s ease-in-out infinite; }
.vm-screen-inner.vm-swap { animation: vm-swap .6s var(--vm-ease); }
@keyframes vm-live { 50% { opacity: .35; scale: .75; } }
@keyframes vm-swap { from { opacity: 0; translate: 0 .5rem; filter: blur(3px); } }

/* 사각 탁자(SVG, 회의실 백분율 좌표 · 고정 그림): 월넛 윗면·앞면, 벽 화면 반사, 황동 인레이 */
.vm-table, .vm-table-lit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vm-table { z-index: 1; filter: drop-shadow(0 16px 22px rgba(4, 5, 18, .6)); }
.vm-stop-stage { stop-color: var(--vm-stage); }
.vm-edge, .vm-inlay, .vm-inlay-glow, .vm-inlay-lit { fill: none; vector-effect: non-scaling-stroke; }
.vm-edge { stroke: var(--vm-brass); stroke-opacity: .55; stroke-width: 1; }
.vm-inlay { stroke: var(--vm-brass); stroke-opacity: .5; stroke-width: 1; }

/* 발언권 조명 — 발언자를 무대 조명처럼 비춘다: ① 후광 ② 인레이 빛 ③ 천장 빔 ④ 주변 감광. 넷 다 --spot-* 를 따라 함께 미끄러진다.
   빛 색은 팀 색에 흰빛을 섞은 --vm-light(조명답게 밝게) */
.vm-room { --vm-light: color-mix(in srgb, var(--vm-speaker) 70%, #fff); }
/* ① 후광: 좌석 기준선에 걸친 빛 웅덩이 — 좌석과 그 앞 탁자를 함께 비춘다 */
.vm-floorlight { position: absolute; z-index: 2; left: var(--spot-x); top: var(--spot-y); width: 36rem; height: 22rem; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .8s var(--vm-ease);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--vm-light) 62%, transparent), color-mix(in srgb, var(--vm-speaker) 30%, transparent) 42%,
    color-mix(in srgb, var(--vm-speaker) 10%, transparent) 70%, transparent); }
/* ② 인레이 빛: 발언자 쪽 인레이 구간만 빛난다(그림자 필터가 있는 탁자와 따로 그린 층을 CSS 마스크로 오려 낸다) */
.vm-table-lit { z-index: 2; opacity: 0; transition: opacity .8s var(--vm-ease);
  filter: drop-shadow(0 0 4px var(--vm-speaker)) drop-shadow(0 0 10px var(--vm-speaker));
  -webkit-mask-image: radial-gradient(24% 26% at var(--spot-x) var(--spot-ly), #000 30%, transparent 75%);
  mask-image: radial-gradient(24% 26% at var(--spot-x) var(--spot-ly), #000 30%, transparent 75%); }
.vm-inlay-glow { stroke: var(--vm-speaker); stroke-width: 12; stroke-opacity: .45; }
.vm-inlay-lit { stroke: var(--vm-light); stroke-width: 2.6; }
/* ③ 천장 빔: 위에서 발언자에게 떨어지는 빛기둥(좌석 뒤를 지나 명패 아래까지, 벽 화면 뒤로 지나간다) */
.vm-spotlight { position: absolute; z-index: 3; top: 0; left: var(--spot-x); width: 24rem; height: calc(var(--spot-y) + 2.5rem); translate: -50% 0;
  pointer-events: none; mix-blend-mode: screen; filter: blur(10px); opacity: 0; transition: opacity .8s var(--vm-ease); }
.vm-spotlight::before { content: ""; position: absolute; inset: 0; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--vm-light) 6%, transparent), color-mix(in srgb, var(--vm-light) 34%, transparent) 88%,
    color-mix(in srgb, var(--vm-light) 12%, transparent)); }
/* ④ 주변 감광: 발언자 둘레만 남기고 방을 어둡게(발언자 좌석·벽 화면은 이 층 위에 있어 그대로 밝다) */
.vm-dim { position: absolute; z-index: 6; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--vm-ease);
  background: radial-gradient(30% 52% at var(--spot-x) var(--spot-y), transparent 0 32%, rgba(4, 5, 18, .42) 100%); }
.vm-room.has-floor :is(.vm-floorlight, .vm-table-lit, .vm-spotlight, .vm-dim) { opacity: 1; }
.vm-room.is-talking .vm-floorlight, .vm-room.is-talking .vm-spotlight { animation: vm-glow 2.4s ease-in-out infinite; }
@keyframes vm-glow { 50% { opacity: .65; } }

/* 좌석: left = 가운데, top = 탁자 모서리. 뒤 줄(의장 포함)은 좌석 아래 끝(명패)이 뒤 모서리에 걸치고, 앞 줄은 위 끝이 앞면 바로 아래에 붙는다 */
.vm-seat { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: .2rem; width: min(9.5rem, 11%); }
.vm-seat.row-far { transform: translate(-50%, calc(-100% + 6px)); }
.vm-seat.row-near { z-index: 5; transform: translate(-50%, 6px); }
.vm-seat.focused { z-index: 7; }
.vm-chair { width: min(10.5rem, 14%); }
.vm-seat-btn { position: relative; border: 0; background: none; padding: 4px; border-radius: 50%; line-height: 0; cursor: pointer; }
.vm-seat-btn:disabled { cursor: default; }
.vm-seat-btn:focus-visible { outline: 2px solid var(--vm-brass); outline-offset: 3px; }
/* 가죽 의자 등받이 — 의장은 높은 등받이에 황동 테 */
.vm-seat-btn::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -5px; translate: -50% 0;
  width: calc(var(--av) * 1.24); height: calc(var(--av) * 1.3);
  border-radius: calc(var(--av) * .3) calc(var(--av) * .3) calc(var(--av) * .14) calc(var(--av) * .14);
  background: linear-gradient(180deg, #3b302a, #19130f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -8px 12px rgba(0, 0, 0, .35), 0 12px 18px -8px rgba(0, 0, 0, .6); }
.vm-chair .vm-seat-btn::before { top: -15px; height: calc(var(--av) * 1.5); border-top: 2px solid var(--vm-brass); }
.vm-crown { position: absolute; top: -.95rem; left: 50%; translate: -50% 0; font-size: 1.1rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }

.vm-room .team-avatar { box-shadow: 0 0 0 2px var(--vm-chair-gap), 0 0 0 3.5px var(--team-color, #6c757d);
  transition: box-shadow .6s var(--vm-ease), scale .6s var(--vm-ease), opacity .4s; }
.vm-seat.state-idle .team-avatar { opacity: .72; }
.vm-seat.state-speaking .team-avatar { box-shadow: 0 0 0 2px var(--vm-chair-gap), 0 0 0 3.5px var(--team-color), 0 0 14px 1px color-mix(in srgb, var(--team-color) 40%, transparent); }
.vm-seat.focused .team-avatar { scale: 1.07; opacity: 1;
  box-shadow: 0 0 0 2px var(--vm-chair-gap), 0 0 0 4px var(--team-color), 0 0 42px 12px color-mix(in srgb, var(--team-color) 62%, transparent); }
.vm-seat.state-failed .team-avatar { box-shadow: 0 0 0 2px var(--vm-chair-gap), 0 0 0 3.5px #e5484d; }

/* 상태 고리: 발언 준비 중 = 도는 가는 호, 음성 읽는 중 = 퍼지는 물결, 실패 = 빨간 점 */
.vm-ring { position: absolute; left: 4px; top: 4px; width: var(--av); height: var(--av); border-radius: 50%; pointer-events: none; }
.vm-seat.state-thinking .vm-ring { left: -3px; top: -3px; width: calc(var(--av) + 14px); height: calc(var(--av) + 14px);
  background: conic-gradient(transparent 0 55%, color-mix(in srgb, var(--team-color) 35%, transparent) 72%, var(--team-color));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: vm-spin 1.3s linear infinite; }
.vm-seat.talking .vm-ring::before, .vm-seat.talking .vm-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--team-color); animation: vm-wave 1.8s ease-out infinite; }
.vm-seat.talking .vm-ring::after { animation-delay: .9s; }
.vm-seat.state-failed .vm-ring::after { content: "!"; position: absolute; right: -5px; top: -5px; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: #e5484d; color: #fff; font: 700 .72rem/1.1rem system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--vm-chair-gap); }
@keyframes vm-spin { to { rotate: 1turn; } }
@keyframes vm-wave { from { opacity: .75; scale: 1; } to { opacity: 0; scale: 1.55; } }

/* 제외된 팀: 흑백·흐리게([다시 합류] 는 또렷하게) */
.vm-seat.state-excluded .vm-seat-btn, .vm-seat.state-excluded .vm-nameplate { filter: grayscale(1) brightness(.85); opacity: .5; }
.vm-seat.state-excluded .vm-nameplate { text-decoration: line-through; }

/* 명패: 아이보리 카드 + 팀 색 띠 */
.vm-nameplate { max-width: 100%; padding: .1rem .5rem .12rem; border-radius: .25rem; background: #f6f3ec; color: #1f2430;
  border-top: 3px solid var(--team-color, #6c757d); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .65);
  font-size: .76rem; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-count { display: inline-block; min-width: 1.05rem; margin-left: .25rem; padding: 0 .28rem; border-radius: 1rem; vertical-align: 1px;
  font-size: .66rem; line-height: 1.05rem; text-align: center; font-variant-numeric: tabular-nums; background: var(--team-color, #6c757d); color: #fff; }
.vm-seat .vm-part-toggle { font-size: .7rem; line-height: 1.2; white-space: nowrap; text-decoration: none; color: var(--vm-ink-dim); }
.vm-seat .vm-part-toggle:hover, .vm-seat .vm-part-toggle:focus-visible { color: #fff; text-decoration: underline; }

/* 말풍선: 흰 카드 + 팀 색 옆줄. 앞 줄은 위(탁자 쪽)로, 뒤 줄·의장은 아래(탁자 쪽)로 */
.vm-bubble { position: absolute; z-index: 10; left: 50%; bottom: calc(100% + .6rem); translate: -50% 0; width: max-content; max-width: min(16rem, 24cqw);
  padding: .45rem .7rem; border-radius: .6rem; border-left: 3px solid var(--team-color, #6c757d); background: #fff; color: #1b2030;
  font-size: .78rem; line-height: 1.42; text-align: left; box-shadow: 0 14px 30px -10px rgba(4, 5, 18, .7);
  animation: vm-pop .32s var(--vm-ease); }
.vm-bubble-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vm-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 7px solid transparent; border-top-color: #fff; }
.vm-bubble.thinking { display: flex; gap: .28rem; padding: .42rem .6rem; border-left: 0; }
.vm-bubble.thinking span { width: .42rem; height: .42rem; border-radius: 50%; background: var(--team-color, #6c757d); animation: vm-dot 1.2s infinite ease-in-out; }
.vm-bubble.thinking span:nth-child(2) { animation-delay: .2s; }
.vm-bubble.thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes vm-dot { 0%, 80%, 100% { opacity: .25; translate: 0 0; } 40% { opacity: 1; translate: 0 -3px; } }
@keyframes vm-pop { from { opacity: 0; translate: -50% var(--pop, 6px); } }

/* 넓은 회의실(탁자 장면)에서만: 뒤 줄 말풍선은 아래로, [제외] 는 좌석 밖(뒤 줄 = 위, 앞 줄 = 아래)에 띄워 좌석 높이를 고정한다 */
@container vm (min-width: 840px) {
  .vm-seat.row-far .vm-bubble { --pop: -6px; bottom: auto; top: calc(100% + .55rem); }
  .vm-seat.row-far .vm-bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff; }
  .vm-seat .vm-part-toggle { position: absolute; left: 50%; translate: -50% 0; }
  .vm-seat.row-far .vm-part-toggle { bottom: calc(100% + 10px); }
  .vm-seat.row-near .vm-part-toggle { top: calc(100% + 2px); }
}
/* 마우스가 있는 화면에서는 좌석에 올리거나 키보드로 갈 때만 [제외] 를 보인다(제외된 팀의 [다시 합류] 는 늘 보임) */
@media (hover: hover) {
  @container vm (min-width: 840px) {
    .vm-seat:not(.state-excluded) .vm-part-toggle { opacity: 0; transition: opacity .2s; }
    .vm-seat:hover .vm-part-toggle, .vm-seat:focus-within .vm-part-toggle { opacity: 1; }
  }
}

/* 자막: 밝은 카드, 머리에 발언 팀 색 */
.vm-caption { margin-top: .75rem; border: 0; border-radius: .8rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 18, 48, .06), 0 16px 32px -22px rgba(16, 18, 48, .55); }
.vm-caption .card-header { border-left: 4px solid var(--team-color, #6c757d); border-bottom: 1px solid #eef0f5;
  background: linear-gradient(90deg, color-mix(in srgb, var(--team-color, #6c757d) 12%, #fff), #fff 60%); }
.vm-caption-body { max-height: 42vh; overflow-y: auto; }
.vm-fade-in { animation: vm-fade .35s var(--vm-ease); }
@keyframes vm-fade { from { opacity: 0; translate: 0 4px; } }

/* 재생·음성 막대: 회의실과 같은 톤의 조작대(data-bs-theme=dark). 스크롤해도 화면 위(상단 바 아래)에 붙어 있다 */
.vm-timeline { margin-bottom: .5rem; }
.vm-timeline.sticky-bar { position: sticky; top: 3.5rem; z-index: 5; padding: .4rem .5rem; border-radius: .75rem; color: var(--vm-ink);
  background: linear-gradient(180deg, #252a55, #1b1e42); border: 1px solid rgba(201, 165, 92, .22); box-shadow: 0 12px 24px -16px rgba(16, 18, 48, .85); }
.meeting-controls.not-sticky { position: static; }
.vm-btn { --bs-btn-color: var(--vm-ink); --bs-btn-bg: transparent; --bs-btn-border-color: rgba(236, 238, 248, .22);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(236, 238, 248, .1); --bs-btn-hover-border-color: rgba(236, 238, 248, .4);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(236, 238, 248, .16); --bs-btn-active-border-color: rgba(236, 238, 248, .4);
  --bs-btn-disabled-color: rgba(236, 238, 248, .35); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: rgba(236, 238, 248, .12); --bs-btn-disabled-opacity: 1; }
.vm-btn-accent { --bs-btn-color: #211806; --bs-btn-bg: var(--vm-brass); --bs-btn-border-color: var(--vm-brass); font-weight: 600;
  --bs-btn-hover-color: #211806; --bs-btn-hover-bg: #dcbc76; --bs-btn-hover-border-color: #dcbc76;
  --bs-btn-active-color: #211806; --bs-btn-active-bg: #b8944d; --bs-btn-active-border-color: #b8944d; }
.vm-btn-playing { --bs-btn-color: var(--vm-brass); --bs-btn-border-color: var(--vm-brass); --bs-btn-hover-color: #211806; --bs-btn-hover-bg: var(--vm-brass); font-weight: 600; }
.vm-counter { color: var(--vm-ink-dim); font-variant-numeric: tabular-nums; }
.vm-timeline .form-check-input:checked { background-color: var(--vm-brass); border-color: var(--vm-brass); }
/* 타임라인 슬라이더: 단계 색 구간(--track) 위에 아직 안 본 부분(--pos 뒤)을 어둡게 */
.vm-scrub { flex: 1 1 10rem; min-width: 8rem; width: auto; --track: rgba(236, 238, 248, .28); }
.vm-timeline .vm-scrub::-webkit-slider-runnable-track { height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, transparent 0 var(--pos, 100%), rgba(15, 17, 46, .66) var(--pos, 100%) 100%), var(--track); }
.vm-timeline .vm-scrub::-moz-range-track { height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, transparent 0 var(--pos, 100%), rgba(15, 17, 46, .66) var(--pos, 100%) 100%), var(--track); }
.vm-timeline .vm-scrub::-webkit-slider-thumb { margin-top: -5.5px; background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vm-stage) 55%, transparent); }
.vm-timeline .vm-scrub::-moz-range-thumb { background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vm-stage) 55%, transparent); }
.vm-timeline .vm-scrub:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--vm-brass); }
.vm-timeline .vm-scrub:disabled::-webkit-slider-thumb { background: rgba(236, 238, 248, .5); }
@media (max-width: 767.98px) { .vm-timeline.sticky-bar { top: 0; } }

/* 좁은 회의실(840px 미만 — 모바일·좁은 창): 벽 화면을 위 띠로, 좌석은 가로로 늘어놓는다(창·탁자·조명은 숨김) */
@container vm (max-width: 839.98px) {
  .vm-room { height: auto; display: flex; flex-wrap: nowrap; gap: .25rem; overflow-x: auto; padding: 6rem .5rem .75rem;
    background: linear-gradient(180deg, #252a55, #121434); }
  .vm-room.intro { animation: none; }
  .vm-backdrop, .vm-table, .vm-table-lit, .vm-floorlight, .vm-spotlight, .vm-dim { display: none; }
  .vm-screen { left: .5rem; right: .5rem; top: .5rem; width: auto; height: 5rem; translate: none; }
  .vm-screen-inner { padding: .45rem .75rem; }
  .vm-screen-agenda { -webkit-line-clamp: 1; }
  .vm-room .vm-seat { --av: 44px !important; position: relative; left: auto !important; top: auto !important; transform: none;
    flex: 0 0 6.5rem; width: 6.5rem; padding-top: 3.2rem; }
  .vm-seat .team-avatar { width: 44px !important; height: 44px !important; font-size: 22px !important; }
  .vm-seat .vm-bubble { bottom: auto; top: 0; max-width: 6.5rem; }
  .vm-seat .vm-bubble-text { -webkit-line-clamp: 2; }
  .vm-bubble::after { display: none; }
  .vm-nameplate { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vm-room, .vm-floorlight, .vm-table-lit, .vm-spotlight, .vm-dim, .vm-room .team-avatar { transition: none; }
  .vm-room, .vm-room *, .vm-room *::before, .vm-room *::after, .vm-caption-content { animation: none !important; }
}

/* AI 아바타 생성 미리보기 */
.avatar-gen-preview { width: 128px; height: 128px; border-radius: 50%; box-shadow: 0 0 0 1px #dee2e6, 0 4px 10px rgba(0,0,0,.12); background: repeating-conic-gradient(#f1f3f5 0 25%, #fff 0 50%) 0 0 / 16px 16px; }

/* ── 로그인·초기 설정·비밀번호 변경 (AccountLayout) ── */
.account-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at 20% 10%, #dbe7ff 0, transparent 45%), radial-gradient(circle at 85% 90%, #e9ddff 0, transparent 40%), #f4f6fb; }
.account-card { width: 100%; max-width: 420px; border: 0; border-radius: 1rem; }
.account-brand { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.account-card h1 { font-size: 1.15rem; margin-bottom: .75rem; }
.nav-user { color: #d7d7d7; font-size: .85rem; }
.nav-user .btn-link { color: #cfd8ff; font-size: .8rem; text-decoration: none; padding: 0; border: 0; }
.nav-user .btn-link:hover { color: #fff; text-decoration: underline; }