/* Buzz 음성 창구 화면 3판(2026-10-04 수석님 2915088a: 아이폰 16 Pro 기준 재설계, 입력창 아래 여백).
   기준 화면: 402x874pt, 위 안전 영역 62pt(다이내믹 아일랜드), 아래 34pt(홈 막대).
   방향: 통화처럼 쓴다. 엄지가 닿는 아래쪽에 조작을 모은다(마이크 끄기 · 말하기 원 · 끝내기), 글 입력은 맨 아래.
   위쪽은 대화 기록에 내준다. 먹빛 남색 바탕, 에이전트마다 단청 안료 한 색(2판 그대로).
   참조: anthropics/skills frontend-design, nextlevelbuilder/ui-ux-pro-max-skill pro-rules, kill-ai-slop, Apple HIG 44pt. */
:root {
  --bg:#131826; --surface:#1b2233; --surface-2:#242d42; --line:#33405a;
  --fg:#eaedf3; --mut:#a3adbf; --faint:#8c96a7;
  --acc:#8eaaff; --on-acc:#0e1424;
  --ok:#6cc9a1; --wait:#e2be62; --warn:#f0875a; --err:#ff8f8f; --end:#e5534b;
  --r-lg:18px; --r-md:12px; --r-sm:8px;
  --t-quick:120ms; --t-calm:220ms;
  /* 안전 영역. 시험 렌더에서는 이 두 값을 덮어 아이폰 값을 흉내 낸다 */
  --sat:env(safe-area-inset-top, 0px); --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px); --sar:env(safe-area-inset-right, 0px);
}
@media (prefers-color-scheme: light) {
  :root { --bg:#eef1f7; --surface:#ffffff; --surface-2:#e3e8f1; --line:#c9d1df;
    --fg:#141a26; --mut:#4f5a6e; --faint:#6b7588; --acc:#2f56c9; --on-acc:#ffffff;
    --ok:#1f8a5f; --wait:#7b5d0d; --warn:#ab4825; --err:#b42323; --end:#c9372f; }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--fg);
  font-family:Pretendard,"Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:16px; line-height:1.5; }
/* 아래 안전 영역은 바닥(footer)이 직접 맡는다. 몸통에 다시 주면 입력창 아래 여백이 34pt+12pt 로 겹쳤다 */
body { display:flex; flex-direction:column; height:100dvh; overflow:hidden;
  padding:var(--sat) var(--sar) 0 var(--sal); }
button { font:inherit; color:inherit; cursor:pointer; }
button:focus-visible, input:focus-visible, .conv:focus-visible, .orb:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
button:disabled { opacity:.4; cursor:default; }
svg.i { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* 머리: 지금 대화 제목이 주인공. 둘째 줄에 앱 이름과 연결 상태 */
header { display:flex; align-items:center; gap:4px; padding:2px 6px 4px; }
.iconbtn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0;
  border-radius:var(--r-md); background:transparent; color:var(--fg); transition:background var(--t-quick); }
.iconbtn:active { background:var(--surface-2); }
.titlewrap { flex:1; min-width:0; text-align:center; }
.convtitle { font-size:17px; font-weight:700; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sub { display:flex; justify-content:center; align-items:center; gap:8px; font-size:12px; line-height:1.4; color:var(--mut); }
.title { font-weight:500; }
.conn { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.conn::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--faint); }
.conn.on::before { background:var(--ok); } .conn.wait::before { background:var(--wait); } .conn.off::before { background:var(--err); }

/* 상대 고르기: 다섯 이름을 한 줄 알약으로. 고른 상대는 그 안료 색으로 채운다 */
nav { display:flex; gap:6px; padding:4px 12px 8px; overflow-x:auto; scrollbar-width:none; }
nav::-webkit-scrollbar { display:none; }
nav button { flex:1 0 auto; min-width:58px; min-height:44px; padding:0 12px; border-radius:22px;
  border:1px solid var(--line); background:transparent; color:var(--mut); font-size:15px; font-weight:600;
  transition:color var(--t-quick), background var(--t-quick), border-color var(--t-quick); }
nav button.sel { color:var(--fg); border-color:var(--c, var(--acc));
  background:color-mix(in srgb, var(--c, var(--acc)) 20%, transparent); }
nav button.off { color:var(--faint); border-style:dashed; }

/* 전달 현황: 보낸 말 한 줄과 오른쪽 상태. 끝난 줄은 흐리게. 기록 위에 얇게 붙는다 */
.posts { display:flex; flex-direction:column; gap:4px; padding:0 12px 6px; border-bottom:1px solid var(--line); }
.posts:empty { display:none; }
.post { display:flex; gap:10px; align-items:center; min-height:34px; padding:4px 12px; border-radius:var(--r-sm);
  background:var(--surface); border-left:3px solid var(--c, var(--acc)); font-size:13px; font-variant-numeric:tabular-nums; }
.post .who { color:var(--mut); white-space:nowrap; }
.post .txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.post .st { color:var(--wait); white-space:nowrap; }
.post.done { background:transparent; }
.post.done .txt { color:var(--mut); }
.post.done .st { color:var(--ok); }
nav:has(+ .posts:empty) { border-bottom:1px solid var(--line); }

/* 대화 기록: 화면의 대부분 */
main { flex:1; min-height:0; display:flex; flex-direction:column; }
#log { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px 14px 8px;
  display:flex; flex-direction:column; gap:10px; }
#log:empty::before { content:"아래 원을 누르고 말씀하세요.\A글로 보내도 돼요."; white-space:pre; margin:auto; text-align:center;
  color:var(--faint); font-size:15px; line-height:1.7; }
.msg { max-width:84%; padding:10px 14px; border-radius:var(--r-lg); font-size:16px; line-height:1.5; white-space:pre-wrap; word-break:keep-all; overflow-wrap:anywhere; }
.msg.me { align-self:flex-end; background:var(--surface-2); border-bottom-right-radius:6px; }
.msg.me.cancelled { opacity:.6; background:transparent; border:1px dashed var(--line); }
.msg.ag { align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:6px;
  box-shadow:inset 3px 0 0 var(--c, var(--line)); }
.msg.ag.other { border-style:dashed; }
.msg .who { font-size:13px; font-weight:600; color:var(--c, var(--mut)); margin-bottom:2px; }
.msg.front { align-self:flex-start; background:transparent; border:0; padding:0 4px; font-size:15px; color:var(--mut); max-width:92%; }
.msg.front .who { color:var(--faint); font-weight:500; }
.msg.front .srcnote { font-size:11px; color:var(--faint); margin-top:2px; }
.msg.sys { align-self:center; background:none; color:var(--faint); font-size:13px; padding:2px 8px; text-align:center; }
.msg.hist { opacity:.72; }
.msg.pending { align-self:flex-end; background:transparent; border:1px dashed var(--line); color:var(--mut); }
.msg.pending .who { color:var(--wait); font-weight:600; }
.pendrow { display:flex; gap:8px; margin-top:8px; }
.pendrow button { min-height:44px; padding:0 16px; border-radius:var(--r-md); border:0; font-size:15px; font-weight:600; }
.msg.sep { align-self:stretch; max-width:none; height:0; padding:0; margin:4px 10%; border-top:1px solid var(--line); background:none; }
.msgact { display:flex; gap:6px; margin-top:6px; }
.msgact button, .msgflag { min-height:36px; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--line); background:transparent; color:var(--mut); font-size:13px; }
.msgflag { display:block; margin-top:6px; margin-left:auto; }

/* 바닥: 지금 상태 한 줄 → 조작 셋 → 글 입력. 아래 여백은 홈 막대 위로 11pt 만 띄운다(34pt 를 다 쓰지 않는다. 2판은 46pt) */
footer { flex:none; padding:6px max(12px, var(--sar)) max(8px, var(--sab)) max(12px, var(--sal));
  border-top:1px solid var(--line); background:var(--bg); display:flex; flex-direction:column; gap:6px; }
.live { min-height:38px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.orblabel { font-size:15px; font-weight:600; color:var(--fg); line-height:1.35; }
.status { font-size:13px; color:var(--mut); line-height:1.35; font-variant-numeric:tabular-nums; }
.status:empty, .metrics:empty { display:none; }
.metrics { font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
.dock { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.dockbtn { justify-self:center; display:flex; flex-direction:column; align-items:center; gap:4px; border:0; background:none;
  padding:0; min-width:72px; font-size:12px; font-weight:600; color:var(--mut); }
.dockbtn .circle { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--fg); transition:background var(--t-quick), transform var(--t-quick); }
.dockbtn:active .circle { transform:scale(.94); }
#muteBtn[aria-pressed="true"] .circle { background:var(--fg); color:var(--bg); }
.dockbtn.call .circle { background:var(--ok); color:#0b1a12; }
.dockbtn.call.end .circle { background:var(--end); color:#fff; }
.dockbtn.call.end .circle svg { transform:rotate(135deg); }

/* 말하기 원: 화면에서 가장 큰 누름 자리. 상태는 테 색과 위 글로 함께 알린다(색만으로 알리지 않는다) */
.orb { position:relative; width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--acc); color:var(--on-acc); user-select:none; cursor:pointer; transition:background var(--t-calm); }
.orb svg.i { width:30px; height:30px; }
.orb .stopsq { display:none; }
.orb.speaking .mic, .orb.thinking .mic { display:none; }
.orb.speaking .stopsq, .orb.thinking .stopsq { display:block; }
.orb:not(.idle) { background:var(--surface); color:var(--fg); }
.orb .ring { position:absolute; inset:-6px; border-radius:50%; border:3px solid transparent; pointer-events:none;
  transition:border-color var(--t-calm), transform var(--t-quick); }
.orb.listening .ring { border-color:var(--ok); transform:scale(calc(1 + var(--lvl,0)*0.15)); }
.orb.user .ring { border-color:var(--ok); }
.orb.user { background:color-mix(in srgb, var(--ok) 22%, var(--surface)); }
.orb.thinking .ring { border-color:var(--wait); border-top-color:transparent; animation:spin 1.4s linear infinite; }
.orb.speaking .ring { border-color:var(--c, var(--acc)); animation:breathe 1.6s ease-in-out infinite; }
.orb.tap { background:var(--surface-2); }
.orb.tap .ring { border-color:var(--warn); animation:breathe 1.2s ease-in-out infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes breathe { 50% { transform:scale(1.06); } }

#textForm { display:flex; gap:8px; }
#textForm input { flex:1; min-width:0; height:44px; padding:0 16px; border-radius:22px; border:1px solid var(--line);
  background:var(--surface); color:var(--fg); font-size:16px; }
#textForm input::placeholder { color:var(--faint); }
#textForm button { width:44px; height:44px; border-radius:50%; border:0; background:var(--surface-2); color:var(--fg);
  display:inline-flex; align-items:center; justify-content:center; }
/* 자판을 올리면 조작 줄을 접어 기록 자리를 지킨다 */
footer:has(#textIn:focus) .dock, footer:has(#textIn:focus) .live { display:none; }

.primary { background:var(--acc); color:var(--on-acc); }
.primary:active { opacity:.85; }
.ghost { background:var(--surface); color:var(--fg); border:1px solid var(--line) !important; }
.ghost:active { background:var(--surface-2); }

/* 대화 목록(덮는 화면) */
.convs { position:fixed; inset:0; background:var(--bg); display:flex; flex-direction:column; z-index:20;
  padding:var(--sat) var(--sar) var(--sab) var(--sal); }
.convs.hidden { display:none; }
.convhead { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); }
.convhead h2 { flex:1; margin:0; font-size:20px; font-weight:700; padding-left:4px; }
.newconv { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border:0; border-radius:var(--r-md);
  background:var(--acc); color:var(--on-acc); font-size:15px; font-weight:600; }
.convlist { flex:1; overflow-y:auto; }
.conv { display:flex; gap:12px; align-items:center; min-height:64px; padding:12px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
.conv:active { background:var(--surface); }
.conv .dot { flex:0 0 40px; height:40px; border-radius:50%; background:color-mix(in srgb, var(--c, var(--acc)) 22%, var(--surface));
  color:var(--c, var(--acc)); border:1px solid color-mix(in srgb, var(--c, var(--acc)) 55%, transparent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.conv .body { flex:1; min-width:0; }
.conv .top { display:flex; justify-content:space-between; gap:8px; font-size:13px; color:var(--mut); }
.conv .top b { color:var(--fg); font-weight:600; font-size:14px; }
.conv .txt { font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.conv.cur { background:var(--surface); box-shadow:inset 3px 0 0 var(--c, var(--acc)); }
#meetings > div { display:flex; flex-direction:column; min-height:0; flex:1; }
#meetings > div.hidden { display:none; }
.mnew { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); }
.mnew input { flex:1 1 100%; min-height:46px; padding:10px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); color:var(--fg); font-size:16px; }
.mfile { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:var(--r-md); font-size:15px; font-weight:600; cursor:pointer; }
.mstate { font-size:14px; color:var(--mut); }
.busy { opacity:.6; pointer-events:none; }
.mrec { flex:1; align-items:center; justify-content:center; gap:16px; padding:24px; text-align:center; }
.mrectitle { font-size:17px; color:var(--mut); }
.mrectime { font-size:56px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--warn); }
/* 실시간 자막(rr14). 켜면 시계를 줄이고 자막 창이 가운데를 차지한다. 한국어 번역을 크게, 원문을 작게 */
.mcapbar { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.mcapbtn { min-height:44px; min-width:88px; padding:0 18px; border-radius:22px; border:1px solid var(--line); background:transparent;
  color:var(--fg); font-size:16px; font-weight:600; }
.mcapbtn[aria-pressed="true"] { background:var(--acc); color:var(--on-acc); border-color:var(--acc); }
.mcaplang { display:inline-flex; border:1px solid var(--line); border-radius:22px; padding:2px; }
.mcaplang button { min-height:40px; min-width:72px; padding:0 14px; border:0; border-radius:20px; background:transparent; color:var(--mut); font-size:15px; }
.mcaplang button[aria-checked="true"] { background:var(--surface-2); color:var(--fg); font-weight:600; }
.mcapkb { display:inline-flex; border:1px solid var(--line); border-radius:22px; padding:2px; }
.mcapkb button { min-height:40px; min-width:72px; padding:0 14px; border:0; border-radius:20px; background:transparent; color:var(--mut); font-size:15px; }
.mcapkb button[aria-checked="true"] { background:var(--surface-2); color:var(--fg); font-weight:600; }
.mkbtag { font-size:13px; padding:2px 10px; border-radius:12px; border:1px solid var(--line); color:var(--fg); white-space:nowrap; }
.mcapstate:empty { display:none; }
.mcapstate.err { color:var(--err); }
/* 마이크 무음 경고(이음 2b83814a): 자막 칸 바로 위. 글은 본문색, 테두리·제목만 경고색 */
.mmicwarn { width:100%; max-width:760px; box-sizing:border-box; padding:10px 14px; border:1px solid var(--err); border-radius:var(--r-md);
  background:color-mix(in srgb, var(--err) 12%, var(--surface)); color:var(--fg); font-size:14px; line-height:1.5; text-align:left; word-break:keep-all; }
.mmicwarn b { display:block; color:var(--err); font-size:15px; margin-bottom:2px; }
.mmicwarn.hidden { display:none; }
/* 긴 녹음 안내(P6): 경고 칸에 함께 담는다. 안내만 있으면 경고색 대신 기다림색 */
.mmicwarn.mwinfo { border-color:var(--wait); background:color-mix(in srgb, var(--wait) 12%, var(--surface)); }
.mmicwarn.mwinfo b { color:var(--wait); }
.mwlong.hidden { display:none; }
/* 자막 언어 확인(P8): 경고 칸에 함께 담는다. 녹음 제목 앞 「영어 자막 중」 표지 */
.mwlang.hidden { display:none; }
.mwlong + .mwlang, .mwlang + .mwlong, .mwquiet + .mwlang, .mwdev + .mwlang { margin-top:8px; }
.mlangtag { display:inline-block; margin-right:8px; padding:1px 8px; border-radius:var(--r-sm); vertical-align:middle;
  background:color-mix(in srgb, var(--wait) 22%, var(--surface)); border:1px solid var(--wait); color:var(--fg); font-size:13px; font-weight:700; }
.mwlong + .mwquiet, .mwquiet + .mwlong, .mwdev + .mwlong { margin-top:8px; }
.mwlongrow { display:grid; grid-template-columns:1fr 2fr; gap:8px; margin-top:8px; }
.mwlongrow button { min-height:44px; }
.mrec.capon { justify-content:flex-start; gap:10px; padding:12px 16px calc(12px + var(--sab)); }
.mrec.capon .mrectime { font-size:28px; }
.mrec.capon > .mhint:not(.mcapstate):not(#mRecNote) { display:none; }
.mcap { flex:1; min-height:0; width:100%; max-width:760px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:6px 14px; }
.mcap.hidden { display:none; }
.mcapline { padding:10px 0; border-bottom:1px solid var(--line); }
.mcapline:last-of-type { border-bottom:0; }
.mcapline .ko { font-size:18px; font-weight:600; line-height:1.45; color:var(--fg); }
.mcapline .ko.wait { color:var(--faint); font-weight:400; font-size:15px; }
.mcapline .src { font-size:14px; line-height:1.45; color:var(--mut); margin-top:2px; }
.mcapline.mcapfold:not(.mcapopen) .src { display:none; }
.mcapfoldbtn { display:block; padding:0; border:0; background:none; color:var(--faint); font:inherit; font-size:12px; text-decoration:underline; cursor:pointer; }
.mwquiet.hidden, .mwdev.hidden { display:none; }
.mwdev b, .mwquiet b { display:block; color:var(--err); font-size:15px; margin-bottom:2px; }
.mwquiet + .mwdev:not(.hidden) { margin-top:8px; }
.mcappartial { padding:10px 0; font-size:15px; color:var(--faint); }
.mcappartial:empty { display:none; }
.mcapempty { padding:24px 4px; font-size:15px; color:var(--faint); text-align:center; }
.mrec.capon .mstop { width:100%; max-width:760px; }
/* 한국어 회의 보조(rr15). 넓은 가로 화면(노트북·아이패드)은 왼쪽 받아쓰기, 오른쪽 카드 두 칸. 좁은 화면은 카드 위, 받아쓰기 아래 */
/* 영어 답변 제안(rr15, 이음 294bc962 · 글결 설계 2판 5절): 자막 아래 한 칸. r1 크게, [빈칸]은 노란 바탕, r2·뜻은 작게 */
.mreply { width:100%; max-width:760px; flex:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:8px 12px 10px; }
.mreply.hidden { display:none; }
.mreplybar { display:flex; align-items:center; gap:8px; min-height:40px; }
.mreplytitle { font-size:13px; font-weight:600; color:var(--mut); }
.mreplystate { flex:1; font-size:13px; color:var(--faint); }
.mreplyint { font-size:12px; font-weight:600; padding:1px 8px; border-radius:10px; border:1px solid var(--line); color:var(--mut); }
.mreplyint.hidden { display:none; }
.mreplypin { min-height:40px; min-width:64px; padding:0 14px; border-radius:20px; border:1px solid var(--line); background:transparent;
  color:var(--mut); font-size:14px; }
.mreplypin[aria-pressed="true"] { background:var(--acc); color:var(--on-acc); border-color:var(--acc); font-weight:600; }
.mreplybody { transition:opacity var(--t-calm); }
.mreply.pending .mreplybody { opacity:.45; }
.mreplyempty { font-size:14px; color:var(--faint); padding:4px 0; }
.mreplyr1 { font-size:19px; font-weight:600; line-height:1.4; color:var(--fg); margin-top:2px; overflow-wrap:anywhere; }
.mreplyr2 { font-size:15px; line-height:1.4; color:var(--mut); margin-top:6px; overflow-wrap:anywhere; }
.mreplyko { font-size:14px; line-height:1.4; color:var(--mut); margin-top:4px; overflow-wrap:anywhere; }
.mreply mark { background:var(--blank-bg); color:var(--blank-fg); border-radius:4px; padding:0 3px; }
:root { --blank-bg:#5c4d1f; --blank-fg:#ffe7a3; }
@media (prefers-color-scheme: light) { :root { --blank-bg:#fde68a; --blank-fg:#141a26; } }
.mcapwrap { display:contents; }
.mrec.copon .mcapwrap { display:flex; flex-direction:column-reverse; gap:10px; flex:1; min-height:0; width:100%; max-width:760px; }
.mrec.copon .mcap { flex:1 1 40%; }
.mcards { display:flex; flex-direction:column; min-height:0; flex:1 1 60%; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); text-align:left; overflow:hidden; }
.mcards.hidden { display:none; }
.mcardsbar { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.mextbtn { min-height:40px; padding:0 14px; border-radius:20px; border:1px solid var(--line); background:transparent; color:var(--mut); font-size:14px; }
.mextbtn[aria-pressed="true"] { border-color:var(--wait); color:var(--wait); font-weight:600; }
.mcardsusage { flex:1; font-size:13px; color:var(--faint); text-align:right; }
.mnewcards { min-height:36px; padding:0 12px; border-radius:18px; border:0; background:var(--acc); color:var(--on-acc); font-size:14px; font-weight:600; }
.mnewcards.hidden { display:none; }
.maskform { display:flex; gap:6px; padding:8px 10px; border-bottom:1px solid var(--line); }
.maskform input { flex:1; min-width:0; min-height:44px; padding:8px 12px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--bg); color:var(--fg); font-size:16px; }
.maskform button[type="submit"] { min-height:44px; padding:0 16px; border:0; border-radius:var(--r-md); background:var(--acc); color:var(--on-acc); font-size:15px; font-weight:600; }
.mcardts { display:inline-flex; align-items:center; background:none; border:0; padding:0 8px; margin:0 -8px; min-height:40px; color:var(--acc); font-size:13px; text-decoration:underline; text-underline-offset:2px; }
.mcapline.flash { background:color-mix(in srgb, var(--acc) 18%, transparent); transition:background var(--t-calm); }
.mcardlist { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:6px 10px 12px; }
.mcard { border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; margin:8px 0; background:var(--bg); }
.mcard.pinned { border-color:var(--acc); }
.mcard.fresh { animation:mcardin var(--t-calm) ease-out; }
@keyframes mcardin { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .mcard.fresh { animation:none; } }
.mcardhead { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--faint); }
.mcardkind { padding:1px 8px; border-radius:10px; border:1px solid var(--line); color:var(--mut); font-size:12px; font-weight:600; }
.mcardkind.issue { border-color:var(--warn); color:var(--warn); }
.mcardkind.manual { border-color:var(--acc); color:var(--acc); }
.mcardq { margin:4px 0 6px; font-size:16px; font-weight:700; line-height:1.4; color:var(--fg); cursor:pointer; }
.mcard.folded .mcardbody { display:none; }
.mcardbody { font-size:14px; line-height:1.5; color:var(--fg); }
.mcardhits { margin:0; padding:0; list-style:none; }
.mcardhits li { padding:4px 0; border-top:1px dashed var(--line); }
.mcardhits b { font-weight:600; }
.mcardhits span { display:block; color:var(--mut); font-size:13px; }
.mcardans { font-size:16px; font-weight:600; line-height:1.5; margin:4px 0; }
.mcardmeta { font-size:12px; color:var(--faint); margin:2px 0 4px; }
.mcardev { margin:4px 0 0; padding:0; list-style:none; font-size:13px; color:var(--mut); }
.mcardflags { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0; }
.mcardflag { font-size:12px; padding:1px 6px; border-radius:8px; background:var(--surface-2); color:var(--mut); }
.mcardflag.warn { color:var(--warn); }
.mcardweb { margin-top:8px; padding-top:6px; border-top:1px solid var(--line); }
.mcardweb h5 { margin:0 0 2px; font-size:12px; color:var(--faint); font-weight:600; }
.mcardweb li { font-size:13px; color:var(--mut); }
/* 자료 출처 링크(이음 740d172c): 노션 쪽·웹 근거 줄 전체가 누르는 자리. 손가락 자리는 높이 40px(카드 단추와 같게) */
.msrc { display:block; box-sizing:border-box; min-height:40px; padding:9px 0; color:var(--acc); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; -webkit-tap-highlight-color:transparent; border-radius:var(--r-sm); }
.msrc:active { background:color-mix(in srgb, var(--acc) 14%, transparent); }
.msrc:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.msrc svg { display:inline-block; width:14px; height:14px; margin-left:4px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mcardhits .msrc b { color:var(--acc); }
.msrctag { margin-left:6px; padding:0 6px; border-radius:8px; background:var(--surface-2); color:var(--mut); font-size:11px; white-space:nowrap; }
.mcardstatus { font-size:14px; color:var(--wait); margin:4px 0; }
.mcardstatus.err { color:var(--err); }
.mreveal { min-height:40px; padding:0 12px; border-radius:var(--r-sm); border:1px dashed var(--line); background:transparent; color:var(--mut); font-size:14px; margin:4px 0; }
.mchips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.mchips button { min-height:40px; padding:4px 12px; border-radius:20px; border:1px solid var(--line); background:transparent; color:var(--fg); font-size:13px; text-align:left; }
.mcardacts { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mcardacts button { min-height:40px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:transparent; color:var(--mut); font-size:13px; }
.mcardacts button.primary { border-color:var(--acc); color:var(--acc); font-weight:600; }
.mcardacts button[aria-pressed="true"] { color:var(--fg); border-color:var(--fg); }
.mrec.copon .mcapline { cursor:pointer; }
/* 영어 회의 카드(이음 1d0b1eb5): 카드가 생기면 위에 카드, 가운데 자막, 아래 답변 제안 */
.mrec.enon .mcapline[role="button"] { cursor:pointer; }
.mrec.enon .mcapline.asked { box-shadow:inset 3px 0 0 var(--acc); padding-left:8px; }
.mrec.encards .mcapwrap { display:flex; flex-direction:column; gap:10px; flex:1; min-height:0; width:100%; max-width:760px; }
.mrec.encards .mcards { order:-1; flex:1 1 50%; }
.mrec.encards .mcap { flex:1 1 30%; }
.mcarden { margin:4px 0 8px; padding:8px 10px; border-radius:var(--r-sm); background:var(--surface-2); }
.mcardenlabel { font-size:12px; font-weight:600; color:var(--mut); }
.mcardentext { font-size:17px; font-weight:600; line-height:1.45; color:var(--fg); overflow-wrap:anywhere; }
.mcardensrc { font-size:12px; color:var(--mut); margin-top:2px; }
.mcarden mark { background:var(--blank-bg); color:var(--blank-fg); border-radius:4px; padding:0 3px; }
.mrec.copon .mcapline .src { font-size:16px; color:var(--fg); }
.mrec.copon .mcapline.asked { box-shadow:inset 3px 0 0 var(--acc); padding-left:8px; }
@media (min-width: 900px) and (orientation: landscape) {
  .mrec.copon { max-width:none; }
  .mrec.copon .mcapwrap { flex-direction:row; max-width:1400px; }
  .mrec.copon .mcap { flex:1 1 45%; max-width:none; }
  .mrec.copon .mcards { flex:1 1 55%; }
  .mrec.copon .mstop { max-width:1400px; }
  .mrec.encards { max-width:none; }
  .mrec.encards .mcapwrap { display:grid; grid-template-columns:45fr 55fr; grid-template-rows:minmax(0, 1fr) auto; max-width:1400px; }
  .mrec.encards .mcap { grid-column:1; grid-row:1; max-width:none; }
  .mrec.encards .mreply { grid-column:1; grid-row:2; max-width:none; }
  .mrec.encards .mcards { grid-column:2; grid-row:1 / 3; }
  .mrec.encards .mstop { max-width:1400px; }
}
.mstop { min-height:56px; min-width:200px; border:0; border-radius:var(--r-md); font-size:17px; font-weight:700; }
/* 녹음 취소(이음 0f465b8e): 「녹음 끝」 왼쪽에 작게. 누르면 확인을 한 번 받는다 */
.mstoprow { display:grid; grid-template-columns:1fr 2fr; gap:8px; width:min(420px, 100%); }
.mstoprow .mstop { min-width:0; width:100%; }
.mcancel { min-height:56px; border-radius:var(--r-md); font-size:15px; font-weight:600; }
/* 녹음 일시정지(글결 2026-10-25): [녹음 취소][일시정지][녹음 끝]. 멈춘 동안 시계를 흐리게 두고 위에 「일시정지」를 보인다 */
.mstoprow.haspause { grid-template-columns:1fr 1fr 2fr; width:min(520px, 100%); }
.mrecstate { font-size:15px; font-weight:700; color:var(--mut); }
.mrecstate.hidden, .mpausehint.hidden, #mPauseWarn.hidden { display:none; }
.mrec.paused .mrectime { color:var(--faint); }
.mrec.capon > #mPauseHint:not(.hidden), .mrec.capon > #mPauseWarn:not(.hidden) { display:block; }
.mwpause.hidden { display:none; }
.mwpause + .mwquiet, .mwpause + .mwdev, .mwpause + .mwlong, .mwpause + .mwlang, .mwquiet + .mwpause, .mwdev + .mwpause, .mwlong + .mwpause, .mwlang + .mwpause { margin-top:8px; }
.mpausesep { margin:10px 0 6px; padding:4px 0; border-top:1px dashed var(--line); color:var(--faint); font-size:13px; text-align:center; }
.mrec.capon .mstoprow { width:100%; max-width:760px; }
@media (min-width: 900px) and (orientation: landscape) { .mrec.copon .mstoprow, .mrec.encards .mstoprow { max-width:1400px; } }
.mleavetitle { font-size:18px; font-weight:700; color:var(--fg); }
.mleavesub { font-size:15px; line-height:1.5; color:var(--mut); text-align:center; margin-bottom:10px; }
.minterrow { margin-top:12px; max-width:420px; }
.mhint { font-size:14px; color:var(--mut); padding:6px 16px; }
.mdetail { flex:1; overflow-y:auto; padding:8px 16px 24px; }
.mdetail h3 { font-size:15px; color:var(--mut); margin:16px 0 8px; font-weight:600; }
.mprog { padding:40px 8px; text-align:center; }
.mprogtxt { font-size:20px; font-weight:700; }
/* 회의록 안내·녹음 길이(사용 개선 7번) */
.mreclen { font-size:17px; font-weight:600; color:var(--fg); margin-top:4px; font-variant-numeric:tabular-nums; }
.mcta { margin:12px 0 4px; padding:18px 16px 16px; border-radius:var(--r-lg); border:1px solid color-mix(in srgb, var(--acc) 55%, var(--line));
  background:color-mix(in srgb, var(--acc) 12%, var(--surface)); display:flex; flex-direction:column; gap:6px; }
.mctatitle { font-size:19px; font-weight:700; color:var(--fg); }
.mctasub { font-size:15px; line-height:1.5; color:var(--mut); }
.mctabtn { width:100%; min-height:52px; margin-top:8px; font-size:17px; font-weight:700; }
.mspkrow { display:grid; grid-template-columns:36px 1fr 44px; grid-template-rows:auto auto; gap:2px 10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); }
.mspkrow .dot { grid-row:1 / 3; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700;
  background:color-mix(in srgb, var(--c) 22%, var(--surface)); color:var(--c); border:1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.mspksel { min-height:44px; padding:8px 10px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); color:var(--fg); font-size:16px; }
.mspkmeta { grid-column:2 / 4; font-size:13px; color:var(--mut); }
.iconbtn.small { width:44px; height:44px; font-size:14px; background:var(--surface); }
#mSaveSpk, .mminutes { width:100%; min-height:50px; margin-top:12px; border:0; border-radius:var(--r-md); font-size:16px; font-weight:600; }
.mturn { padding:8px 10px; border-left:3px solid var(--c); margin:6px 0; border-radius:var(--r-sm); cursor:pointer; }
.mturn.on { background:var(--surface); }
.mturnh { display:flex; justify-content:space-between; font-size:13px; color:var(--mut); }
.mturnh b { color:var(--c); font-weight:600; }
.mturnspk { min-height:36px; margin:-6px 0 -4px -8px; padding:0 8px; border:0; border-radius:var(--r-sm); background:transparent;
  color:var(--c); font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.mturnspk::after { content:'▾'; font-size:11px; color:var(--mut); }
.mturnspk:active, .mturnspk[aria-expanded="true"] { background:color-mix(in srgb, var(--c) 16%, transparent); }
.mturnedit { margin-top:8px; padding:10px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); cursor:default;
  display:flex; flex-direction:column; gap:8px; }
.mtelabel { font-size:13px; color:var(--mut); }
.mtechips { display:flex; flex-wrap:wrap; gap:6px; }
.mtechip { min-height:40px; padding:0 12px; border-radius:20px; border:1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background:transparent; color:var(--fg); font-size:15px; }
.mtechip.sel { background:color-mix(in srgb, var(--c) 24%, var(--surface)); border-color:var(--c); font-weight:600; }
.mteinput { min-height:44px; padding:8px 12px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--bg); color:var(--fg); font-size:16px; }
.mteacts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mteacts button { min-height:44px; border-radius:var(--r-md); border:0; font-size:15px; font-weight:600; }
.mteacts button:disabled, .mtechip:disabled { opacity:.5; }
.mtemsg { font-size:13px; color:var(--mut); min-height:0; }
.mtemsg:empty { display:none; }
.mturnt { font-size:16px; line-height:1.55; word-break:keep-all; overflow-wrap:anywhere; }
.convempty { padding:48px 24px; text-align:center; color:var(--mut); font-size:15px; }

/* 접속 코드 */
.auth { position:fixed; inset:0; background:rgba(8,10,16,.72); display:flex; align-items:center; justify-content:center; z-index:30; }
.auth.hidden { display:none; }
.auth .card { background:var(--surface); padding:20px; border-radius:var(--r-lg); border:1px solid var(--line); width:min(340px, 90vw); display:flex; flex-direction:column; gap:12px; }
.auth input { min-height:46px; padding:10px 12px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--bg); color:var(--fg); font-size:16px; }
.auth .primary { min-height:48px; border:0; border-radius:var(--r-md); font-weight:600; }
.err { color:var(--err); font-size:14px; min-height:18px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}
@media (min-width: 700px) {
  main, footer, nav, header, .posts { width:100%; max-width:640px; margin-left:auto; margin-right:auto; }
}
.mnote { width:100%; min-height:72px; margin-top:8px; padding:10px 12px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--surface); color:var(--fg); font:inherit; font-size:15px; resize:vertical; }
.minfo .mspksel { width:100%; }
.mqhead { font-weight:600; margin:10px 0 4px; color:var(--wait); }
.mq { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:15px; }
.mq b { color:var(--mut); font-weight:600; }
.mqplay { min-height:36px; padding:0 10px; border-radius:var(--r-sm); font-size:13px; }
.mdraft { margin-top:10px; }
.mdraft summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:600; }
.mdraft pre { white-space:pre-wrap; word-break:keep-all; overflow-wrap:anywhere; font:inherit; font-size:15px; line-height:1.6;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; }
#pushBtn.on { color:var(--ok); }
.mupnote { margin:4px 16px 8px; padding:10px 12px; border-radius:var(--r-md); background:var(--surface-2, rgba(127,127,127,.12)); font-size:15px; font-weight:600; }
.mupnote.err { color:var(--err); }
.mupnote.hidden { display:none; }
/* 회의록 목록·보기(수석님 2026-10-04 24534112) */
.mpane { display:flex; flex-direction:column; min-height:0; flex:1; }
.mpane.hidden { display:none; }
.mtabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:8px 16px 0; border-bottom:1px solid var(--line); }
.mtabs button { min-height:44px; border:0; background:transparent; color:var(--mut); font-size:16px; font-weight:600; border-bottom:2px solid transparent; }
.mtabs button[aria-selected="true"] { color:var(--fg); border-bottom-color:var(--acc); }
.mminbar { display:flex; flex-direction:column; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); }
.mminbar input { min-height:44px; padding:8px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); color:var(--fg); font-size:16px; }
.mminfilter { display:flex; gap:6px; }
.mminfilter button { min-height:36px; padding:0 14px; border-radius:18px; border:1px solid var(--line); background:transparent; color:var(--mut); font-size:14px; }
.mminfilter button[aria-pressed="true"] { background:var(--surface-2); color:var(--fg); border-color:var(--fg); font-weight:600; }
.mgroup { padding:14px 16px 4px; font-size:13px; font-weight:600; color:var(--mut); }
.mminrow { display:flex; flex-direction:column; gap:4px; padding:12px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
.mminrow:active { background:var(--surface); }
.mminrow .t { font-size:16px; font-weight:600; line-height:1.4; word-break:keep-all; overflow-wrap:anywhere; }
.mminrow .s { display:flex; flex-wrap:wrap; gap:4px 10px; font-size:13px; color:var(--mut); align-items:center; }
.mbadge { display:inline-flex; align-items:center; min-height:22px; padding:0 8px; border-radius:11px; font-size:12px; font-weight:600;
  border:1px solid currentColor; }
.mbadge.reg { color:var(--ok); }
.mbadge.draft { color:var(--wait); }
.mminhead { padding:4px 0 8px; }
.mminhead .meta { font-size:14px; color:var(--mut); display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
/* 버튼 체계(rr9): 주 버튼 하나, 보조는 아이콘 붙은 조용한 버튼 */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 16px; border-radius:12px;
  border:1px solid transparent; font-size:15px; font-weight:600; line-height:1; white-space:nowrap; cursor:pointer;
  transition:background var(--t-quick), opacity var(--t-quick); }
.btn svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn.primary { background:var(--acc); color:var(--on-acc); }
.btn.ghost { background:var(--surface); color:var(--fg); border-color:var(--line); }
.btn.quiet { background:transparent; color:var(--fg); padding:0 10px; }
.btn.quiet:active, .btn.ghost:active { background:var(--surface-2); }
.btn:disabled { opacity:.5; cursor:default; }
@media (hover:hover) { .btn.quiet:hover, .btn.ghost:hover { background:var(--surface-2); } .btn.primary:hover { filter:brightness(1.08); } }
.mminacts { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 6px; }
.mminsec { display:flex; flex-wrap:wrap; gap:2px; margin-left:-10px; }
.mminacts > .btn.primary { margin-left:auto; }
@media (max-width: 520px) {
  .mminacts { flex-direction:column-reverse; align-items:stretch; }
  .mminacts > .btn.primary { margin-left:0; min-height:48px; }
  .mminsec { margin-left:-10px; }
}
.mqnote { margin:10px 0 2px; padding:10px 12px; border-radius:var(--r-md); font-size:14px; font-weight:600;
  color:var(--wait); background:color-mix(in srgb, var(--wait) 12%, transparent); }
.mtoc { display:flex; gap:6px; overflow-x:auto; padding:10px 0 8px; position:sticky; top:0; background:var(--bg); z-index:1; scrollbar-width:none;
  border-bottom:1px solid var(--line); margin-bottom:4px; }
.mtoc::-webkit-scrollbar { display:none; }
.mtoc button { flex:none; min-height:36px; padding:0 12px; border-radius:18px; border:1px solid var(--line); background:var(--surface); color:var(--fg); font-size:14px; }
.mmd h2 { font-size:18px; margin:22px 0 8px; padding-top:4px; color:var(--fg); }
.mmd h3 { font-size:16px; margin:16px 0 6px; color:var(--fg); }
.mmd p { margin:6px 0; font-size:15px; line-height:1.65; word-break:keep-all; overflow-wrap:anywhere; }
.mmd ul, .mmd ol { margin:4px 0 8px; padding-left:20px; }
.mmd li { font-size:15px; line-height:1.6; margin:3px 0; word-break:keep-all; overflow-wrap:anywhere; }
.mmd .tbl { overflow-x:auto; margin:8px 0; border:1px solid var(--line); border-radius:var(--r-md); }
.mmd table { border-collapse:collapse; width:100%; font-size:14px; }
.mmd th, .mmd td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.5; word-break:keep-all; }
.mmd th { background:var(--surface); font-weight:600; }
.mmd details { margin-top:18px; color:var(--mut); }
.mmd details summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:600; }
.mmd details pre { white-space:pre-wrap; font:inherit; font-size:13px; line-height:1.6; }
.mbadge.edited { color:var(--acc); }
.mdetail.editing { display:flex; flex-direction:column; overflow:hidden; padding-bottom:0; }
.meditor { flex:1; min-height:0; margin:8px 0 0; }
.meditor .toastui-editor-defaultUI { border-radius:var(--r-md); }
.meditor .toastui-editor-contents { font-size:16px; font-family:inherit; }
.meditor .toastui-editor-contents th, .meditor .toastui-editor-contents td { min-width:4.5em; word-break:keep-all; }
.meditor .toastui-editor-defaultUI-toolbar { position:sticky; top:0; z-index:5; }
.meditbar { flex:none; display:flex; align-items:center; gap:8px; padding:10px 0 calc(10px + var(--sab, 0px)); }
.meditbar .mtemsg { flex:1; min-width:0; font-size:13px; color:var(--mut); }
.meditbtns { display:flex; gap:8px; margin-left:auto; }
@media (max-width: 520px) {
  .meditbar { flex-direction:column; align-items:stretch; gap:6px; }
  .meditbtns { display:grid; grid-template-columns:auto 1fr 1.6fr; margin-left:0; }
  .meditbtns .btn { padding:0 12px; }
}

/* 넓은 화면: 회의록 본문·목록 폭을 묶는다(rr9) */
@media (min-width: 820px) {
  #mMinBody, #mDetailBody, #mMinPane .mminbar, #mMinItems, #mRecPane .mnew, #mItems, .mtabs { width:100%; max-width:760px; margin-left:auto; margin-right:auto; box-sizing:border-box; }
  #mMinute .convhead, #mDetail .convhead, #mList .convhead { padding-left:max(12px, calc(50% - 380px)); padding-right:max(12px, calc(50% - 380px)); }
}

/* 노션 등록 진행(rr10) */
.mreg { margin:12px 0 4px; padding:14px 14px 12px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); }
.mreg.done { border-color:color-mix(in srgb, var(--ok) 55%, var(--line)); }
.mreg.bad { border-color:color-mix(in srgb, var(--err) 55%, var(--line)); display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.mregtitle { font-weight:700; color:var(--err); }
.msteps { list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.msteps li { display:flex; flex-direction:column; align-items:flex-start; gap:6px; font-size:13px; color:var(--mut); position:relative; }
.msteps .dot { width:12px; height:12px; border-radius:50%; border:2px solid var(--line); background:var(--bg); box-sizing:border-box; }
.msteps li.ok { color:var(--fg); }
.msteps li.ok .dot { background:var(--ok); border-color:var(--ok); }
.msteps li.now { color:var(--fg); font-weight:600; }
.msteps li.now .dot { border-color:var(--acc); background:color-mix(in srgb, var(--acc) 30%, var(--bg)); animation:mpulse 1.2s ease-in-out infinite; }
@keyframes mpulse { 0%, 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--acc) 45%, transparent); } 50% { box-shadow:0 0 0 6px transparent; } }
.mregbar { height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.mregbar span { display:block; height:100%; width:0; border-radius:3px; background:var(--acc); transition:width .9s linear; }
.mreg.done .mregbar span { background:var(--ok); }
.mregnote { margin-top:8px; font-size:13px; color:var(--mut); }
.mreg.done .mregnote { color:var(--ok); font-weight:600; }

/* 액션 버튼 바로 녹음(rr11) */
.mquick { position:fixed; inset:0; z-index:60; background:rgba(8,10,16,.72); display:flex; align-items:center; justify-content:center; padding:24px; }
.mquickcard { width:min(340px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 20px 18px;
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.mquicknum { font-size:64px; font-weight:800; line-height:1; color:var(--end, #e5534b); font-variant-numeric:tabular-nums; }
.mquicklbl { font-size:16px; color:var(--fg); margin-bottom:10px; }
.mquickrow { display:grid; grid-template-columns:1fr 1.4fr; gap:8px; width:100%; }

/* 용어 사전(rr11) */
.mminbarrow { display:flex; gap:8px; }
.mminbarrow input { flex:1; min-width:0; }
.mtermlist { display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.mtermrow { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr) auto; gap:6px; align-items:center; }
.mtermbar { display:flex; gap:8px; justify-content:flex-end; }

/* rr13: 차례별 정제문·번역, 정제문 고치기, 이번에 배운 것, 회의록 스킬 사전 */
.mturnh { align-items:center; gap:6px; justify-content:flex-start; }
.mturnh .mtime { margin-left:auto; font-variant-numeric:tabular-nums; }
.mlang, .medited { padding:1px 6px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.02em; }
.mlang { background:color-mix(in srgb, var(--acc) 18%, transparent); color:var(--acc); }
.medited { background:var(--surface-2); color:var(--mut); }
.mrefbtn { min-height:32px; margin:-4px -6px -4px 0; padding:0 10px; border:0; border-radius:var(--r-sm); background:transparent;
  color:var(--mut); font-size:13px; }
.mrefbtn:active { background:var(--surface-2); }
.mturnraw { font-size:13px; line-height:1.45; color:var(--faint); word-break:keep-all; overflow-wrap:anywhere; margin-top:2px; }
.mturnko { margin-top:4px; padding-left:10px; border-left:2px solid var(--line); font-size:15px; line-height:1.5; color:var(--mut);
  word-break:keep-all; overflow-wrap:anywhere; }
.mrefedit { margin-top:8px; padding:10px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); cursor:default;
  display:flex; flex-direction:column; gap:8px; }
.mrefedit .mteacts { grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); }
.mrefta { min-height:72px; padding:8px 12px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--bg); color:var(--fg);
  font:inherit; font-size:16px; line-height:1.5; resize:vertical; }
.mlearn { margin:18px 0 8px; padding:12px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); }
.mlearn h3 { margin:0 0 8px; display:flex; align-items:center; gap:8px; font-size:15px; }
.mlearnver, .mskdict .mlearnver { font-size:12px; font-weight:500; color:var(--mut); }
.mlearnbusy { font-size:13px; color:var(--acc); margin-bottom:6px; }
.mlearnrow { display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--line); font-size:14px; }
.mlearnrow:first-of-type { border-top:0; }
.mlearnrow.off .mlearnsum { color:var(--faint); text-decoration:line-through; }
.mlearnkind { flex:none; padding:1px 7px; border-radius:6px; font-size:12px; font-weight:700; background:var(--surface-2); color:var(--fg); }
.mlearnkind.k-person { color:#6cc9a1; } .mlearnkind.k-term { color:var(--acc); } .mlearnkind.k-style { color:#f0875a; }
.mlearnsum { flex:1; min-width:0; overflow-wrap:anywhere; }
.mlearnst { flex:none; font-size:12px; color:var(--mut); }
.mlearnundo { flex:none; min-height:36px; padding:0 10px; border:0; border-radius:var(--r-sm); background:transparent; color:var(--mut); font-size:13px; }
.mlearnundo:disabled { opacity:.6; }
.mskdict { margin-top:20px; }
.mskdict h3 { display:flex; align-items:center; gap:8px; font-size:15px; margin:0 0 6px; }
.mskrow { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:8px; padding:5px 0; border-top:1px solid var(--line); font-size:14px; }
.mskrow span { color:var(--mut); overflow-wrap:anywhere; }
.mturnconf { margin-top:4px; font-size:12px; line-height:1.45; color:#d9a441; overflow-wrap:anywhere; }
.mctx { margin-top:8px; }
.mskrow1 { padding:5px 0; border-top:1px solid var(--line); font-size:13px; color:var(--mut); overflow-wrap:anywhere; }
.mskrow1.off { color:var(--faint); }

/* 화자 이름 자동 완성 */
.ncombo { position:relative; min-width:0; }
.ncombo .mteinput { width:100%; box-sizing:border-box; }
.ncombolist { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; margin:0; padding:4px; list-style:none;
  max-height:264px; overflow-y:auto; touch-action:pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 8px 24px rgba(0,0,0,.28); }
.ncombolist.hidden { display:none; }
.ncomboopt { min-height:44px; padding:6px 10px; border-radius:var(--r-sm); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left; cursor:pointer; }
.ncomboopt[aria-selected="true"], .ncomboopt:hover { background:var(--surface-2); }
.ncomboopt .nm { font-size:15px; color:var(--fg); overflow-wrap:anywhere; }
.ncomboopt .sub { font-size:12px; color:var(--mut); overflow-wrap:anywhere; }
.ncomborow { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:6px; align-items:start; margin-top:6px; }
.ncomborow button { min-height:44px; padding:0 14px; border-radius:var(--r-md); border:0; font-size:15px; font-weight:600; }

/* 사전 화면(용어·인물 탭, 한 줄 고치기) */
.dtabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; }
.dtab { min-height:44px; border-radius:var(--r-md); border:1px solid var(--line); background:transparent; color:var(--mut); font-size:15px; font-weight:600; }
.dtab.sel { color:var(--fg); border-color:var(--acc); background:color-mix(in srgb, var(--acc) 16%, transparent); }
.dsearch { width:100%; box-sizing:border-box; }
.dver { margin:6px 0 10px; }
.dnew { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr) auto; gap:6px; align-items:center; padding:10px;
  border:1px dashed var(--line); border-radius:var(--r-md); margin-bottom:12px; }
.dnew .dnewlbl { grid-column:1 / -1; font-size:13px; font-weight:700; color:var(--mut); }
.dnew .mteinput { min-width:0; box-sizing:border-box; width:100%; }
.dnew button { min-height:44px; padding:0 16px; border-radius:var(--r-md); border:0; font-size:15px; font-weight:600; }
.dnew .mtemsg { grid-column:1 / -1; }
.dlist { display:flex; flex-direction:column; gap:6px; padding-bottom:72px; }
.dgroup { margin:12px 0 2px; font-size:13px; font-weight:700; color:var(--mut); }
.drow { display:flex; flex-direction:column; gap:6px; width:100%; text-align:left; padding:10px 12px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface); color:var(--fg); font:inherit; cursor:pointer; box-sizing:border-box; }
.drow.dedit { cursor:default; border-color:var(--acc); }
.drow.dedit .mteinput { width:100%; box-sizing:border-box; }
.drowh { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.drowh b { font-size:15px; overflow-wrap:anywhere; }
.dsub { font-size:13px; color:var(--mut); }
.dbadge { padding:1px 7px; border-radius:6px; font-size:11px; font-weight:700; white-space:nowrap; }
.dbadge.o-app { background:color-mix(in srgb, #6cc9a1 20%, transparent); color:#6cc9a1; }
.dbadge.o-skill { background:color-mix(in srgb, var(--acc) 18%, transparent); color:var(--acc); }
.dbadge.o-org { background:color-mix(in srgb, #d9a441 20%, transparent); color:#d9a441; }
.dbadge.st-pending, .dbadge.st-sent { background:var(--surface-2); color:var(--mut); }
.dbadge.st-applied { background:color-mix(in srgb, #6cc9a1 14%, transparent); color:#6cc9a1; }
.dchips { display:flex; flex-wrap:wrap; gap:4px; }
.dchip { padding:2px 8px; border-radius:12px; font-size:13px; background:var(--surface-2); color:var(--fg); overflow-wrap:anywhere; }
.dchip.none { background:transparent; color:var(--faint); padding-left:0; }
.dchip.edit { display:inline-flex; align-items:center; gap:2px; padding-right:2px; }
.dchipx { min-width:28px; min-height:28px; border:0; background:transparent; color:var(--mut); font-size:16px; border-radius:50%; }
.dacts { display:flex; justify-content:flex-end; gap:6px; }
.dacts button { min-height:44px; padding:0 16px; border-radius:var(--r-md); border:0; font-size:15px; font-weight:600; }
.dacts .danger { color:#e57373; margin-right:auto; }
.dtoast { position:fixed; left:50%; bottom:max(16px, env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px); box-sizing:border-box; padding:8px 8px 8px 14px;
  border-radius:var(--r-md); background:var(--fg); color:var(--bg); font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.3); }
.dtoast button { min-height:40px; padding:0 12px; border:0; border-radius:var(--r-sm); background:transparent; color:var(--bg); font-weight:700; text-decoration:underline; }
@media (max-width:520px) { .dnew { grid-template-columns:minmax(0, 1fr) auto; } .dnew .mteinput:nth-of-type(2) { grid-column:1 / 2; grid-row:3; } }

/* 고친 낱말을 다른 자리에도 */
.rsheet { position:fixed; left:50%; bottom:max(12px, env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60;
  width:min(560px, calc(100vw - 24px)); box-sizing:border-box; max-height:60vh; overflow-y:auto; overscroll-behavior:contain; padding:12px;
  border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:0 12px 36px rgba(0,0,0,.35); }
.rsheeth { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.rrow { padding:8px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.rpair { font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.rwhere { font-size:13px; color:var(--mut); }
.racts { display:flex; flex-wrap:wrap; gap:6px; }
.racts button { min-height:44px; padding:0 14px; border-radius:var(--r-md); border:0; font-size:15px; font-weight:600; }
.rnote { font-size:12px; color:var(--mut); line-height:1.45; }
.dbadge.st-skipped { background:color-mix(in srgb, #d9a441 16%, transparent); color:#d9a441; }

/* 화자 고르기 목록 */
.mspkbtn { min-height:44px; padding:8px 12px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); color:var(--fg);
  font-size:16px; display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; min-width:0; }
.mspkbtn .v { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mspkbtn .caret { color:var(--mut); font-size:12px; flex:none; }
.mspkbtn[aria-expanded="true"] { border-color:var(--acc); }
.spick { grid-column:1 / -1; margin-top:6px; padding:8px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  display:flex; flex-direction:column; gap:8px; min-width:0; }
.mturnedit .spick { margin-top:0; }
.spicklist { display:flex; flex-direction:column; gap:6px; outline:none; }
.spickgrp { display:flex; flex-direction:column; gap:2px; }
.spickh { font-size:12px; font-weight:700; color:var(--mut); padding:2px 4px; }
.spickopt { min-height:44px; padding:6px 10px; border-radius:var(--r-sm); display:flex; flex-direction:column; justify-content:center; cursor:pointer; outline:none; }
.spickopt:hover, .spickopt.act, .spickopt:focus-visible { background:var(--surface-2); }
.spickopt[aria-selected="true"] .nm::after { content:' ✓'; color:var(--acc); }
.spickopt .nm { font-size:15px; overflow-wrap:anywhere; }
.spickopt .sub { font-size:12px; color:var(--mut); overflow-wrap:anywhere; }
.spicknew { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px; align-items:start; border-top:1px solid var(--line); padding-top:8px; }
.spicknew .spickh { grid-column:1 / -1; }
.spicknew button { min-height:44px; padding:0 14px; border-radius:var(--r-md); border:0; font-size:15px; font-weight:600; }
.mturnedit .spicknew { grid-template-columns:minmax(0, 1fr); }
.spickopt { align-items:flex-start; text-align:left; gap:1px; }

/* MUST VOICE 1판(2026-10-06, 브랜드_적용명세). 이름은 로고가 아닌 글자로, 공식 로고는 MAYMUST CI 하나.
   앱 색 체계는 그대로 두고 자리와 크기만 시안(preview/lockup.html)을 따른다. CI 는 늘이거나 재배색하지 않는다 */
.sub .brandname { font-weight:600; letter-spacing:.06em; }
.lockup { display:flex; align-items:center; gap:10px; min-width:0; }
.lockup .ci { display:block; height:18px; width:auto; flex:none; }
.lockbar { flex:none; width:1px; height:18px; background:var(--line); }
.lockname { font-size:15px; font-weight:800; letter-spacing:.06em; color:var(--fg); white-space:nowrap; }
.brandrow { display:flex; align-items:center; min-height:44px; padding:9px 16px; border-bottom:1px solid var(--line); }
.auth .lockup { padding:9px 0 4px; }
.aboutbtn { flex:none; min-height:52px; margin:0; padding:0 16px; border:0; border-top:1px solid var(--line); background:transparent;
  color:var(--mut); font-size:15px; font-weight:600; text-align:left; }
.aboutbtn:active { background:var(--surface); }
.convs.about { z-index:25; }
.aboutbody { flex:1; overflow-y:auto; padding:28px 20px 24px; display:flex; flex-direction:column; gap:14px; }
.aboutbrand { display:flex; flex-direction:column; gap:10px; padding-bottom:6px; }
.aboutname { font-size:28px; font-weight:800; letter-spacing:.06em; line-height:1.2; }
.aboutby { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; color:var(--mut); }
.aboutby .ci { display:block; height:18px; width:auto; }
.aboutlist { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; padding:14px 16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md); font-size:15px; }
.aboutlist dt { color:var(--mut); }
.aboutlist dd { margin:0; overflow-wrap:anywhere; }
.abouth { margin:8px 0 0; font-size:15px; font-weight:700; }
.aboutp { margin:0; font-size:15px; color:var(--mut); line-height:1.6; }
.aboutoss { margin:0; padding:12px 16px 12px 32px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  font-size:14px; line-height:1.7; color:var(--mut); }
@media (min-width:768px) {
  .lockup .ci, .lockbar, .aboutby .ci { height:20px; }
  .aboutbody { width:min(640px, 100%); margin:0 auto; }
}

/* 반응형 단계(2026-10-07, 수석님 974eed02 · 이음 984fe3fe). 넓은 화면의 빈 여백을 줄이고 내용을 넓게 보인다.
   단계는 ui-ux-pro-max 반응형 규칙(모바일 먼저, 내용이 깨지는 자리, 가로 스크롤 없음)의 640·768·1024·1280·1536 에 1920·2400 을 더했다.
   바깥 여백은 clamp 로 폭에 따라 늘린다. 회사 로고(MAYMUST CI, _ASSETS ci-h-trim 그대로)는 어느 폭에서도 보인다:
   1023px 까지는 작은 CI(18px)만, 1024px 부터는 큰 묶음(CI 22~26px + 구분선 + MUST VOICE). CI 는 늘이거나 재배색하지 않는다 */
:root { --gut:clamp(12px, 2.6vw, 64px); --app:100%; --mw:100%; --rw:100%; }
.mkbtag.hidden { display:none; }
/* 작은 로고: 기본 화면 머리말 보조 줄(CI → MUST VOICE → 연결 상태). 회의 화면 맨 위 한 줄 */
.subci { display:inline-flex; align-items:center; }
.subci .ci { display:block; height:18px; width:auto; }
.hbrand { display:none; }
.mbrand { flex:none; display:flex; align-items:center; min-height:34px; padding:6px max(12px, var(--gut)); border-bottom:1px solid var(--line); }
.mbrand .ci { height:18px; }
.mbrand .lockbar, .mbrand .lockname { display:none; }
@media (min-width:700px) { :root { --app:720px; } main, footer, nav, header, .posts { max-width:var(--app); } }
@media (min-width:820px) { :root { --mw:760px; } }
@media (min-width:1024px) {
  :root { --app:880px; --mw:960px; }
  /* 큰 로고: 머리말 왼쪽 끝에 CI 묶음, 대화 제목은 본문 폭 가운데. 보조 줄의 작은 CI·이름은 접는다 */
  header { max-width:none; display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, var(--app)) auto minmax(0, 1fr);
    padding:6px var(--gut) 6px; }
  .hbrand { display:flex; grid-column:1; justify-self:start; }
  #convBtn { grid-column:2; } header .titlewrap { grid-column:3; } #meetBtn { grid-column:4; }
  .subci, .sub .brandname { display:none; }
  .lockup .ci, .lockbar { height:22px; }
  .lockname { font-size:16px; }
  .mbrand { min-height:48px; padding:8px var(--gut); }
  .mbrand .lockbar, .mbrand .lockname { display:block; }
  .mbrand .ci { height:22px; }
  .msg { max-width:76%; }
}
@media (min-width:1280px) { :root { --mw:1200px; } }
@media (min-width:1536px) { :root { --app:1040px; --mw:1400px; } .lockup .ci, .lockbar, .mbrand .ci { height:24px; } .lockname { font-size:17px; } }
@media (min-width:1920px) { :root { --app:1200px; --mw:1680px; } }
@media (min-width:2400px) { :root { --app:1440px; --mw:2200px; } .lockup .ci, .lockbar, .mbrand .ci { height:26px; } .lockname { font-size:18px; } }
/* 회의 목록·상세·회의록: 폭 단계(--mw)를 따른다 */
@media (min-width:820px) {
  #mMinBody, #mDetailBody, #mMinPane .mminbar, #mMinItems, #mRecPane .mnew, #mItems, .mtabs { max-width:min(var(--mw), 100%); }
  #mMinute .convhead, #mDetail .convhead, #mList .convhead, #mTerms .convhead {
    padding-left:max(12px, calc((100% - var(--mw)) / 2)); padding-right:max(12px, calc((100% - var(--mw)) / 2)); }
}
/* 1280px 부터 목록은 두 줄 칸(2400px 부터 세 칸). 날짜 묶음 머리와 빈 안내는 한 줄 전체 */
@media (min-width:1280px) {
  #mItems, #mMinItems { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:28px; align-content:start; }
  #mItems > .convempty, #mMinItems > .convempty, #mMinItems > .mgroup { grid-column:1 / -1; }
  /* 회의 상세: 왼쪽 녹취록, 오른쪽 화자·회의 정보·회의록. 남는 높이는 마지막 1fr 줄이 받아 오른쪽 칸 사이가 벌어지지 않는다 */
  #mDetailBody:has(> .mturns) { display:grid; grid-template-columns:minmax(0, 1fr) minmax(360px, 34%); column-gap:32px;
    grid-template-rows:repeat(6, auto) 1fr; align-items:start; }
  #mDetailBody:has(> .mturns) > .mturns { grid-column:1; grid-row:1 / -1; }
  #mDetailBody:has(> .mturns) > :not(.mturns) { grid-column:2; }
  .mturnt { font-size:17px; }
}
@media (min-width:2400px) { #mItems, #mMinItems { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
/* 회의록 보기: 1536px 부터 목차를 왼쪽 세로 칸으로 */
@media (min-width:1536px) {
  #mMinBody:not(.editing):has(> .mmd) { display:grid; grid-template-columns:220px minmax(0, 1fr); column-gap:32px;
    grid-template-rows:repeat(12, auto) 1fr; align-items:start; }
  #mMinBody:not(.editing):has(> .mmd) > .mtoc { grid-column:1; grid-row:1 / -1; position:sticky; top:8px; flex-direction:column;
    overflow:visible; border-bottom:0; margin:0; padding-top:12px; }
  #mMinBody:not(.editing):has(> .mmd) > .mtoc button { text-align:left; white-space:normal; }
  #mMinBody:not(.editing):has(> .mmd) > :not(.mtoc) { grid-column:2; }
  .mmd p, .mmd li { font-size:16px; }
}
/* 녹음 화면: 1024px 넓은 가로부터 제목·시계·자막 조작을 한 줄로 올리고 자막·카드 칸이 화면 폭을 거의 다 쓴다 */
@media (min-width:1024px) and (orientation:landscape) {
  :root { --rw:100%; }
  #meetings > .mrec.capon { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; column-gap:16px; row-gap:8px; align-items:center;
    grid-template-rows:auto auto auto minmax(0, 1fr) auto auto; justify-items:stretch; padding:10px var(--gut) calc(12px + var(--sab)); }
  .mrec.capon > .mrectitle { grid-column:1; grid-row:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mrec.capon > .mrectime { grid-column:2; grid-row:1; }
  .mrec.capon > .mcapbar { grid-column:3; grid-row:1; justify-content:flex-end; flex-wrap:nowrap; }
  .mrec.capon > #mCapState { grid-column:1 / -1; grid-row:2; padding:0; }
  .mrec.capon > .mmicwarn { grid-column:1 / -1; grid-row:3; max-width:none; }
  .mrec.capon > .mcapwrap, .mrec.capon > .mcap, .mrec.capon > .mreply { grid-column:1 / -1; }
  .mrec.capon > .mcapwrap { grid-row:4; align-self:stretch; height:100%; justify-self:center; width:100%; }
  .mrec.capon > #mRecNote { grid-column:1 / -1; grid-row:5; padding:0; }
  .mrec.capon > .mstoprow { grid-column:1 / -1; grid-row:6; justify-self:center; }
  .mrec.capon .mcapwrap, .mrec.copon .mcapwrap, .mrec.encards .mcapwrap, .mrec.capon .mstoprow, .mrec.copon .mstoprow,
  .mrec.encards .mstoprow, .mrec.capon .mstop, .mrec.copon .mstop, .mrec.encards .mstop { max-width:var(--rw); }
  .mrec.capon:not(.copon):not(.encards) .mcapwrap { display:flex; flex-direction:column; gap:10px; min-height:0; max-width:min(1200px, 100%);
    justify-self:center; width:100%; }
  .mrec.capon:not(.copon):not(.encards) .mcap { flex:1 1 auto; }
  .mrec.capon:not(.copon):not(.encards) .mcap, .mrec.capon:not(.copon):not(.encards) .mreply { max-width:none; }
}
@media (min-width:1920px) and (orientation:landscape) { :root { --rw:1800px; } }
@media (min-width:2400px) and (orientation:landscape) { :root { --rw:2300px; } }
/* 넓은 화면 2단계: 회의 제목 입력과 녹음 시작·파일 올리기를 한 줄로. 1920px 부터 자막·카드·답변 제안 글자를 한 단계 키운다 */
@media (min-width:1024px) { #mRecPane .mnew input { flex:1 1 320px; } }
@media (min-width:1920px) {
  .mcapline .ko { font-size:20px; } .mcapline .src { font-size:15px; } .mrec.copon .mcapline .src { font-size:18px; }
  .mcardq { font-size:17px; } .mcardans { font-size:17px; } .mcardbody { font-size:15px; }
  .mreplyr1 { font-size:22px; } .mreplyr2 { font-size:16px; } .mreplyko { font-size:15px; } .mcardentext { font-size:19px; }
}
/* 회의 상세의 「회의록 보기」·「노션에서 열기」: 누르는 자리 44px(그동안 글자 높이 28px 이었다) */
.mmin .mminacts > button { min-height:44px; padding:0 16px; border-radius:var(--r-md); font-size:15px; font-weight:600; }
/* 손가락 화면: 녹취록 「고치기」·화자 고르기·회의록 거르기·카드 질문 줄도 누르는 자리 40px 이상(앱의 기존 기준) */
@media (pointer:coarse) {
  .mrefbtn, .mturnspk, .mminfilter button, .mqplay, .mtoc button { min-height:40px; }
  .mcardq { min-height:40px; display:flex; align-items:center; margin:0 0 2px; }
}

/* ── 녹취 디자인(수석님 d3840f11, 시범판 R1-D 와 같은 기준, 글결 2026-10-08): AI 티 정리(kill-ai-slop 17·19·29) ──────────
   발언마다 붙던 왼쪽 색 띠와 둥근 상자를 없앤다. 화자 구분은 이름 글자색, 발언은 「이름 · 시각」 머리줄과 문단,
   발언 사이는 여백으로 가른다(클로바노트·Otter·티로의 녹취 꼴). 재생 중인 발언만 옅은 바탕.
   되돌리기: 이 묶음을 지우면 앞 판과 같다. 시범판 정본은 minutes_pilot/static/style.css 의 「디자인(수석님 d3840f11)」 [녹취] 규칙 */
.mturn { border-left:0; border-radius:var(--r-sm); margin:0 -10px; padding:10px; }
.mturn + .mturn { margin-top:4px; }
.mturn.on { background:var(--surface-2); }
.mturnh { gap:8px; justify-content:flex-start; }
.mturnh .mtime { margin-left:0; color:var(--faint); font-size:13px; }
.mturnspk { margin:-6px -4px -4px -8px; font-size:15px; font-weight:700; }
.mturnspk::after { content:none; }
.mturnspk:active, .mturnspk[aria-expanded="true"] { background:var(--surface-2); }
.mturnt { margin-top:2px; }
.mturnko { padding-left:0; border-left:0; }
/* 발화 하나 화자 고르기: 색 테두리 알약 → 중립 테두리, 화자 색은 글자에만 */
.mtechip { border-radius:var(--r-sm); border-color:var(--line); color:var(--c); font-weight:600; }
.mtechip.sel { background:var(--surface-2); border-color:var(--fg); }
/* 화자 칸 번호: 자기 색을 옅게 깐 동그라미 → 번호 글자만 */
.mspkrow .dot { width:auto; height:auto; background:none; border:0; color:var(--c); font-size:17px; justify-content:flex-start; }
.mspkrow { grid-template-columns:24px 1fr 44px; }
/* 위 .mtechip·.mspkrow .dot 의 color 보다 뒤에 두어야 밝은 화면에서 이긴다 */
@media (prefers-color-scheme: light) {
  /* 화자 색은 어두운 바탕 기준 안료라 밝은 바탕에서는 글자로 읽히게 진하게 */
  .mturnspk, .mtechip, .mspkrow .dot { color:color-mix(in srgb, var(--c) 62%, #000); }
}

/* 회의 보조 전용 색인(이음 2026-10-09): 자료 본문 서랍과 「본문 보기」 단추. 대응기 서랍과 같은 꼴, 띠 장식 없이 바탕색으로만 나눈다 */
.mpchip { min-height:26px; padding:0 8px; margin-left:6px; border-radius:var(--r-sm); border:1px solid var(--line); background:transparent; color:var(--acc); font-size:12px; font-weight:600; }
.mpchip:hover { background:var(--surface-2); }
.docdrawer { position:fixed; top:0; left:0; bottom:0; width:min(54vw, 820px); z-index:80; display:flex; flex-direction:column;
  background:var(--bg); border-right:1px solid var(--line); box-shadow:0 0 40px rgba(0,0,0,.35); }
.docdrawer.hidden { display:none; }
.dochead { display:flex; align-items:center; gap:14px; padding:8px 14px; border-bottom:1px solid var(--line); flex:none; }
.dochead b { flex:1; font-size:14px; }
.docnew { color:var(--acc); font-size:13px; }
.docclose { min-height:34px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:transparent; font-size:13px; }
.docdrawer iframe { flex:1; width:100%; border:0; background:var(--bg); }
@media (max-width: 900px) { .docdrawer { width:100vw; } }
/* ── 휴대폰 회의 화면(수석님 질문함 a4ae485c, 이음 2026-10-09) ──────────
   카드 칸이 작아 읽기 어렵다는 지적. 머리(제목·시계)를 한 줄로, 자막·언어·자료 고르기를 한 줄로 줄이고
   남는 높이를 칸에 준다. 한국어 회의는 카드가 큰 칸, 영어·일본어 회의는 번역이 큰 칸이고 답변 제안은 그보다 작게 둔다.
   「외부인 동석」은 찾기 줄 왼쪽으로 옮겼다(index.html). 되돌리기: 이 묶음과 그 한 줄을 지운다 */
.maskform .mextbtn { flex:none; }
#mRecNote:empty { display:none; }
/* 쓰임 줄에 보일 것이 없으면 줄째 숨긴다(외부인 동석이 빠진 뒤 빈 줄이 남지 않게) */
.mcardsbar:not(:has(> :not(.hidden):not(:empty))) { display:none; }
@media (max-width: 899px), (max-width: 1023px) and (orientation: portrait) {
  #meetings > .mrec.capon:not(.hidden) { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto auto auto auto minmax(0, 1fr) auto auto;
    row-gap:0; column-gap:10px; align-items:center; padding:6px 12px calc(8px + var(--sab)); }
  .mrec.capon > .mrectitle { grid-column:1; grid-row:1; text-align:left; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mrec.capon > .mrectime { grid-column:2; grid-row:1; font-size:20px; }
  .mrec.capon > .mcapbar { grid-column:1 / -1; grid-row:2; margin-top:6px; gap:6px; justify-content:flex-start; }
  .mrec.capon .mcapbtn { min-height:36px; min-width:0; padding:0 12px; font-size:14px; }
  .mrec.capon .mcaplang button, .mrec.capon .mcapkb button { min-height:32px; min-width:0; padding:0 9px; font-size:13px; }
  .mrec.capon > #mCapState { grid-column:1 / -1; grid-row:3; margin-top:4px; padding:0; font-size:13px; text-align:left; }
  .mrec.capon > .mmicwarn { grid-column:1 / -1; grid-row:4; margin-top:6px; max-width:none; }
  .mrec.capon > .mcapwrap { grid-column:1 / -1; grid-row:5; align-self:stretch; display:flex; flex-direction:column; gap:8px; min-height:0;
    height:100%; width:100%; max-width:none; margin-top:8px; }
  .mrec.capon > #mRecNote { grid-column:1 / -1; grid-row:6; margin-top:4px; padding:0; }
  .mrec.capon > .mstoprow { grid-column:1 / -1; grid-row:7; margin-top:8px; width:100%; max-width:none; }
  .mrec.capon .mstop, .mrec.capon .mcancel { min-height:48px; }
  .mrec.capon .mcap, .mrec.capon .mreply, .mrec.capon .mcards { max-width:none; }
  /* 한국어 회의: 카드 7, 받아쓰기 3 */
  .mrec.copon .mcapwrap { flex-direction:column-reverse; }
  .mrec.copon .mcards { flex:7 1 0; }
  .mrec.copon .mcap { flex:3 1 0; }
  .mrec.copon .mcapline { padding:6px 0; }
  .mrec.copon .mcapline .ko { font-size:16px; }
  /* 영어·일본어 회의: 번역이 가장 큰 칸. 답변 제안은 넘치면 칸 안에서 밀어 본다 */
  .mrec.capon:not(.copon) .mcap { flex:1 1 0; }
  .mrec.enon .mreply { flex:0 1 auto; max-height:36%; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-top:0; }
  .mrec.enon .mreplybar { position:sticky; top:0; background:var(--surface); min-height:36px; }
  .mrec.enon .mreplypin { min-height:32px; }
  .mrec.enon .mreplyr1 { font-size:17px; }
  .mrec.enon .mreplyr2 { font-size:14px; }
  /* 영어 회의에서 카드가 열리면: 번역 5, 카드 4, 답변 제안은 30% 안 */
  .mrec.encards .mcards { order:-1; flex:4 1 0; }
  .mrec.capon.encards .mcap { flex:5 1 0; }
  .mrec.encards .mreply { max-height:28%; }
  /* 카드 칸 머리: 쓰임 줄은 얇게, 찾기 줄은 「외부인 동석」과 한 줄 */
  .mrec.capon .mcardsbar { padding:2px 10px; min-height:0; }
  .mrec.capon .mcardsusage { font-size:12px; }
  .mrec.capon .maskform { padding:6px 8px; }
  .mrec.capon .maskform input { min-height:40px; padding:6px 10px; }
  .mrec.capon .maskform button[type="submit"] { min-height:40px; padding:0 14px; }
  .mrec.capon .maskform .mextbtn { min-height:40px; padding:0 10px; font-size:13px; }
  .mrec.capon .mcardlist { padding:2px 8px 10px; }
  .mrec.capon .mcard { margin:6px 0; padding:8px 10px; }
}
/* 휴대폰 영어 회의에서 카드가 열리면 세 칸(번역·답변 제안·카드)을 함께 두면 카드 칸이 81px뿐이라 답이 칸 밖으로 나간다.
   「자막·답변 제안」과 「카드」 가운데 하나만 보이고 언어 고르기와 같은 꼴의 단추로 오간다. 새 카드는 카드 쪽을 연다(meeting.js).
   보이지 않는 쪽에 새 답변 제안·카드 답이 오면 그 단추에 「새」를 붙인다. 태블릿 세로(높이 1000px 넘음)와 넓은 화면은 셋을 함께 보인다.
   시범판(minutes_pilot R3)과 같은 단추다(질문함 0962dd5a). 되돌리기: 이 묶음과 index.html 의 mEnView 를 지운다 */
.menview { display:none; }
.mevnew { margin-left:6px; padding:2px 6px; border-radius:10px; background:var(--acc); color:var(--on-acc); font-size:11px; font-weight:600; line-height:1.2; }
.mevnew.hidden { display:none; }
.mevn:not(:empty) { margin-left:4px; }
@media (max-width: 899px) and (max-height: 1000px) {
  .mrec.encards .menview { display:inline-flex; order:-2; align-self:flex-start; flex:0 0 auto; border:1px solid var(--line); border-radius:22px; padding:2px; }
  .mrec.encards .menview button { display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border:0; border-radius:20px;
    background:transparent; color:var(--mut); font-size:13px; }
  .mrec.encards .menview button[aria-checked="true"] { background:var(--surface-2); color:var(--fg); font-weight:600; }
  .mrec.encards.envcards .mcap, .mrec.encards.envcards .mreply { display:none; }
  .mrec.encards.envcap .mcards { display:none; }
  .mrec.encards.envcards .mcards { flex:1 1 0; }
  .mrec.capon.encards.envcap .mcap { flex:1 1 0; }
  .mrec.encards.envcap .mreply { max-height:36%; }
}
/* 녹음 화면 겹침 정비(글결 2026-10-25, 수석님 질문함 711746ef 「겹치는 선」).
   1) 휴대폰 자막 화면: 자막·카드 칸이 칸 높이 100%에 위 여백 8px을 더해 8px 넘쳐, 칸 아래 테두리가 녹음 단추 위 테두리에 붙었다. 높이를 칸에 맞춘다.
   2) 휴대폰·넓은 가로 자막 화면은 줄을 정해 둔 격자라, 일시정지 때 생기는 「일시정지」 표지·알림 실패 문구가 빈 칸에 아무렇게나 들어갔다.
      「일시정지」 표지는 자막 상태 줄(「일시정지 중이라 받아쓰기도 멈췄어요」)과 흐린 시계가 대신하므로 숨기고, 알림 실패 문구는 단추 위에 한 줄을 준다.
   3) 자막 화면은 .mhint 를 모두 숨겨 알림 실패 문구도 보이지 않았다. 그 문구만 다시 보인다.
   되돌리기: 이 묶음을 지운다 */
#meetings > .mrec.capon > #mPauseWarn:not(.hidden) { display:block; }
@media (max-width: 899px), (max-width: 1023px) and (orientation: portrait) {
  #meetings > .mrec.capon:not(.hidden) { grid-template-rows:auto auto auto auto minmax(0, 1fr) auto auto auto; }
  .mrec.capon > .mcapwrap { height:auto; }
  .mrec.capon > #mRecState { display:none; }
  .mrec.capon > #mPauseWarn { grid-column:1 / -1; grid-row:6; margin-top:4px; padding:0; font-size:13px; text-align:left; }
  .mrec.capon > #mRecNote { grid-row:7; }
  .mrec.capon > .mstoprow { grid-row:8; }
}
@media (min-width:1024px) and (orientation:landscape) {
  #meetings > .mrec.capon { grid-template-rows:auto auto auto minmax(0, 1fr) auto auto auto; }
  .mrec.capon > #mRecState { display:none; }
  .mrec.capon > #mPauseWarn { grid-column:1 / -1; grid-row:5; padding:0; }
  .mrec.capon > #mRecNote { grid-row:6; }
  .mrec.capon > .mstoprow { grid-row:7; }
}