/* 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); font-size:13px; font-variant-numeric:tabular-nums; }   /* R2: 왼쪽 3px 색 띠를 뺀다(R1-D 기준, 이음 c602a178) */
.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; }
.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; }
.mtitlefrom { margin:0 0 8px; }
.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; }
.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; }
}

/* ──────────────────────────────────────────────────────────────────────────────────────────
   회의록 시범판(R1, PORT_PLAN 7절). 위는 음성앱 style.css 고정본 그대로이고, 아래만 시범판 것이다.
   회의 화면이 앱 전체라 덮는 화면(.convs) 대신 .app 으로 띄운다. 녹음 시작은 엄지 자리의 큰 원(휴대폰)과
   목록 칸 맨 위 전폭 단추(1024px 부터), 넓은 화면은 목록·상세 두 칸. 녹음 중 화면은 UI_RESEARCH 3·4·5·7.
   ────────────────────────────────────────────────────────────────────────────────────────── */
.hidden { display:none !important; }
[hidden] { display:none !important; }          /* .btn 의 display 가 hidden 속성을 이기지 않게(받은 데까지 처리·이 기기 저장·로그인 단추) */
a.btn { text-decoration:none; }
.app { position:fixed; inset:0; background:var(--bg); display:flex; flex-direction:column; z-index:10;
  padding:var(--sat) var(--sar) 0 var(--sal); }
.mbrand { justify-content:space-between; }
.mbrand .lockbar, .mbrand .lockname { display:block; }
.mbrand .iconbtn { margin-right:-8px; }
/* 로그인 */
.auth { background:var(--bg); }
.logintitle { font-size:16px; line-height:1.5; color:var(--fg); }
.loginbtn { min-height:48px; width:100%; }
/* 녹음 시작: 휴대폰은 목록 아래 엄지 자리에 큰 빨간 원과 「녹음 시작」 글자, 왼쪽에 작게 파일 올리기 */
#mRecPane .mnew { order:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px 8px;
  padding:10px 16px calc(10px + var(--sab)); border-top:1px solid var(--line); border-bottom:0; background:var(--bg); }
#mRecPane .mnew .mslot { grid-column:1 / -1; }
#mRecPane .mnew .mstart { grid-column:2; grid-row:2; }
#mRecPane .mnew .mfile { grid-column:1; grid-row:2; justify-self:start; }
#mRecPane > #mItems { order:1; }
.mstart { display:flex; flex-direction:column; align-items:center; gap:4px; border:0; background:none; padding:2px 8px;
  color:var(--fg); font-size:14px; font-weight:700; }
.mstartcircle { width:68px; height:68px; border-radius:50%; background:var(--end); color:#fff; display:flex; align-items:center;
  justify-content:center; transition:transform var(--t-quick); }
.mstartcircle svg.i { width:30px; height:30px; }
.mstart:active .mstartcircle { transform:scale(.95); }
.mstart:disabled { opacity:.5; }
.mfile { min-height:40px; padding:0 12px; font-size:14px; }
.mslot { padding:10px 12px; border-radius:var(--r-md); font-size:14px; line-height:1.5; color:var(--fg);
  border:1px solid color-mix(in srgb, var(--wait) 60%, var(--line)); background:color-mix(in srgb, var(--wait) 12%, var(--surface)); }
.mrow .mstate .mbadge { margin-left:8px; vertical-align:1px; }
/* 녹음 중: 위 상태 줄(녹음 중 · 녹음 취소), 가운데 가장 큰 시계와 소리 막대, 안내 셋, 아래 가운데 「녹음 끝」 */
.mrec { justify-content:flex-start; padding:12px 16px calc(16px + var(--sab)); gap:14px; }
.mrectop { align-self:stretch; display:flex; justify-content:space-between; align-items:center; min-height:44px; }
.mrecstate { display:inline-flex; align-items:center; gap:8px; color:var(--end); font-size:15px; font-weight:700; }
.mrecdot { width:8px; height:8px; border-radius:50%; background:var(--end); }
.mcanceltop { min-height:44px; color:var(--mut); font-size:15px; }
.mrec > .mrectitle { margin-top:auto; }
.mrectime { font-size:64px; line-height:1.1; color:var(--fg); }
.mlevel { width:min(320px, 80%); height:10px; border-radius:5px; background:var(--surface-2); overflow:hidden; }
.mlevel span { display:block; height:100%; width:0; border-radius:5px; background:var(--ok); transition:width .1s linear; }
.mrechints { display:flex; flex-direction:column; align-items:center; }
.mrechints .mhint { padding:2px 16px; }
.mrecfirst { color:var(--fg); font-weight:600; }
.mconsent { color:var(--faint); font-size:13px; }
.mrecextra { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.mrec > #mRecNote { margin-top:auto; }
.mrec > .mstop { width:min(420px, 100%); min-height:60px; font-size:18px; }
.mrec.capon > .mrectitle, .mrec.capon > #mRecNote { margin-top:0; }
/* 회의록 / 녹취 두 탭(UI_RESEARCH 11) */
.mseg { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:0 16px; border-bottom:1px solid var(--line); }
.mseg button { min-height:44px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--mut); font-size:15px; font-weight:600; }
.mseg button[aria-selected="true"] { color:var(--fg); border-bottom-color:var(--acc); }
.mtitlein { width:100%; margin-bottom:8px; font-size:16px; }
/* 계정·정보 */
.amsg:empty { display:none; }
.anotion { display:flex; flex-direction:column; align-items:flex-start; gap:10px; font-size:15px; color:var(--fg); }
.alogout { align-self:flex-start; }
#meetings > #mEmptyPane { display:none; }          /* 음성앱 #meetings > div { display:flex } 보다 앞서게 */
@media (min-width:820px) { .mseg { padding-left:max(16px, calc((100% - var(--mw)) / 2)); padding-right:max(16px, calc((100% - var(--mw)) / 2)); } }
/* 넓은 화면(1024px 부터, PORT_PLAN 7절 2·3): 왼쪽 목록 칸(맨 위 전폭 「녹음 시작」), 오른쪽 상세. 녹음 중에는 한 칸 */
@media (min-width:1024px) {
  #meetings { display:grid; grid-template-columns:minmax(360px, 420px) minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); }
  #meetings > .mbrand { grid-column:1 / -1; }
  #meetings > #mList { grid-column:1; grid-row:2; border-right:1px solid var(--line); }
  #meetings[data-view="mDetail"] > #mList.hidden, #meetings[data-view="mMinute"] > #mList.hidden,
  #meetings[data-view="mTerms"] > #mList.hidden { display:flex !important; }
  #meetings > #mDetail, #meetings > #mMinute, #meetings > #mTerms, #meetings > #mEmptyPane { grid-column:2; grid-row:2; min-width:0; }
  #meetings[data-view="mList"] > #mEmptyPane { display:flex; align-items:center; justify-content:center; color:var(--faint); font-size:15px; }
  #meetings > #mRec { grid-column:1 / -1; grid-row:2; }
  #mList .convhead, #mList .mtabs, #mList .mminbar, #mItems, #mMinItems, #mRecPane .mnew { max-width:none !important; padding-left:16px !important; padding-right:16px !important; }
  #mItems, #mMinItems { display:block !important; padding-left:0 !important; padding-right:0 !important; }
  #mRecPane .mnew { order:0; display:flex; flex-direction:column; align-items:stretch; padding:12px 16px; border-top:0; border-bottom:1px solid var(--line); }
  .mstart { flex-direction:row; justify-content:center; gap:10px; min-height:52px; border-radius:var(--r-md); background:var(--end); color:#fff; font-size:16px; }
  .mstartcircle { width:auto; height:auto; background:none; box-shadow:none; }
  .mstartcircle svg.i { width:22px; height:22px; }
  #mRecPane .mnew .mfile { align-self:flex-start; }
}
/* 넓은 화면에서도 녹음 중 상태 줄은 가운데 칸 폭(760px) 안에 둔다 */
.mrec > .mrectop { width:min(760px, 100%); align-self:center; }
#loginErr:empty { display:none; }

/* ── 디자인(수석님 d3840f11): AI 티 정리(kill-ai-slop 17·19·20·24·29) ───────────────────────────────
   녹취 묶음은 음성앱 web/style.css 에도 같은 꼴로 옮길 수 있게 따로 둔다 */
/* [녹취] 발언마다 붙던 왼쪽 색 띠와 둥근 상자를 없앤다. 화자 구분은 이름 글자색, 발언은 「이름 · 시각」 머리줄과 문단,
   발언 사이는 여백으로 가른다(클로바노트·Otter·티로의 녹취 꼴). 재생 중인 발언만 옅은 바탕 */
.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; }
/* [그 밖] 회의록 안내: 강조색 테두리·옅은 강조 바탕 카드 → 중립 바탕 한 칸(단추가 주인공) */
.mcta { border-color:var(--line); background:var(--surface); border-radius:var(--r-md); }
/* [그 밖] 알약 단추 → 작은 둥근 모서리 하나로(--r-sm) */
.mminfilter button, .mtoc button { border-radius:var(--r-sm); }
.mbadge { border-radius:6px; }
/* [그 밖] 큰 퍼지는 그림자 → 짧고 옅은 그림자(띄운 칸임을 알릴 만큼) */
.ncombolist { box-shadow:0 2px 8px rgba(0,0,0,.18); }
.rsheet { box-shadow:0 4px 16px rgba(0,0,0,.22); }
.dtoast { box-shadow:0 2px 8px rgba(0,0,0,.2); }
/* [그 밖] 사전: 항목마다 둥근 카드 → 가는 선으로 나눈 목록, 출처 표지는 옅은 색 바탕 대신 작은 회색 글자 */
.dlist { gap:0; }
.drow { border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:12px 0; }
.drow.dedit { border:1px solid var(--acc); border-radius:var(--r-md); padding:12px; }
.dbadge, .dbadge.o-app, .dbadge.o-skill, .dbadge.o-org, .dbadge.st-pending, .dbadge.st-sent, .dbadge.st-applied, .dbadge.st-skipped {
  background:none; padding:0; color:var(--mut); font-weight:500; font-size:12px; }
.dchip { border-radius:6px; }
.dtab { border-radius:var(--r-sm); }
.dtab.sel { background:var(--surface-2); border-color:var(--fg); }
/* [녹취] 위 .mtechip·.mspkrow .dot 의 color 보다 뒤에 두어야 밝은 화면에서 이긴다 */
@media (prefers-color-scheme: light) {
  /* 화자 색은 어두운 바탕 기준 안료라 밝은 바탕에서는 글자로 읽히게 진하게 */
  .mturnspk, .mtechip, .mspkrow .dot { color:color-mix(in srgb, var(--c) 62%, #000); }
}

/* [F 아이폰 대화 상자] 화면 안 확인·알림 상자(meeting.js askBox·tellBox). 계정 시트 등 다른 덮개 위에 뜬다. 알림은 단추 하나 */
.mquick.mask { z-index:70; }
.mquickrow.one { grid-template-columns:1fr; }

/* [R2] 넓은 화면에서 녹음 중 자막을 켜면 음성앱 격자를 쓴다. 시범판 녹음 화면에만 있는 위 상태 줄·소리 막대·안내를 그 격자의 줄에 넣는다 */
@media (min-width:1024px) and (orientation:landscape) {
  #meetings > .mrec.capon { grid-template-rows:auto auto auto auto auto auto minmax(0, 1fr) auto auto auto; }
  .mrec.capon > .mrectop { grid-column:1 / -1; grid-row:1; justify-self:stretch; width:auto; }
  .mrec.capon > .mrectitle { grid-row:2; margin-top:0; }
  .mrec.capon > .mrectime { grid-row:2; font-size:28px; }
  .mrec.capon > .mcapbar { grid-row:2; }
  .mrec.capon > .mlevel { grid-column:1 / -1; grid-row:3; justify-self:center; }
  .mrec.capon > #mCapState { grid-row:4; }
  .mrec.capon > .mmicwarn { grid-row:5; }
  .mrec.capon > .mrechints { grid-column:1 / -1; grid-row:6; }
  .mrec.capon > .mcapwrap { grid-row:7; }
  .mrec.capon > #mRecNote { grid-row:8; }
  .mrec.capon > .mrecextra { grid-column:1 / -1; grid-row:9; justify-self:center; }
  .mrec.capon > #mStop { grid-column:1 / -1; grid-row:10; justify-self:center; width:min(420px, 100%); }
}

/* ── R3 회의 보조(PORT_PLAN 13절, 이음 97521d36) ──
   누른 자막 줄: 왼쪽 3px 색 띠 대신 옅은 바탕(R1-D·R2 와 같은 기준, PORT_DIFF E). 휴대폰에서 자막과 카드를 함께 켜면 카드 칸이
   자막 칸에 밀려 카드 한 장의 질문·답이 보이지 않았다(390폭 카드 목록 약 110px). 카드 칸에 더 큰 몫을 주고, 녹음 안내 가운데
   「화면을 켜 둔 채로」 한 줄은 접는다(동의 안내는 남긴다). */
.mrec.copon .mcapline.asked, .mrec.enon .mcapline.asked { box-shadow:none; padding-left:6px; background:var(--surface-2); border-radius:var(--r-sm); }
@media (max-width: 899px), (orientation: portrait) {
  .mrec.copon .mrechints > .mhint:not(.mconsent):not(.mrecfirst), .mrec.encards .mrechints > .mhint:not(.mconsent):not(.mrecfirst) { display:none; }
  .mrec.copon .mcards { flex:3 1 0; }
  .mrec.copon .mcap { flex:2 1 0; min-height:88px; }
  .mrec.encards .mcards { flex:3 1 0; }
  .mrec.encards .mcap { flex:2 1 0; min-height:72px; }
  /* 자막을 켠 동안 회의 제목은 접는다(녹음 중 줄·시계가 남는다). 카드 칸 머리와 찾기 줄은 낮춘다(누르는 칸 36px 유지 위해 높이만 줄임) */
  .mrec.copon > .mrectitle, .mrec.encards > .mrectitle { display:none; }
  .mrec.copon .mcardsbar, .mrec.encards .mcardsbar { padding:4px 8px; flex-wrap:nowrap; }
  .mrec.copon .mextbtn, .mrec.encards .mextbtn { min-height:36px; padding:0 12px; font-size:13px; }
  .mrec.copon .mcardsusage, .mrec.encards .mcardsusage { font-size:12px; line-height:1.3; }
  .mrec.copon .maskform, .mrec.encards .maskform { padding:4px 8px; }
  .mrec.copon .maskform input, .mrec.copon .maskform button, .mrec.encards .maskform input, .mrec.encards .maskform button { min-height:36px; height:36px; }
}
/* 휴대폰(좁고 낮은 화면)에서 영어 세 칸(자막·답변 제안·카드)을 함께 켜면 카드를 읽을 수 없다(390×844 카드 목록 약 55px).
   「자막·답변 제안」과 「카드」 가운데 하나만 보이고 위의 언어 고르기와 같은 꼴의 단추로 오간다. 새 카드는 카드 쪽을 연다(meeting.js R3).
   보이지 않는 쪽에 새 답변 제안·카드 답이 오면 그 단추에 「새」를 붙인다. 넓은 화면과 태블릿 세로(높이 1000px 넘음)는 셋을 함께 보인다 */
.menview { display:none; }
.mevnew { margin-left:6px; padding:2px 6px; border-radius:10px; background:var(--acc); color:#fff; 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:center; 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:36px; padding:0 14px; border:0; border-radius:20px;
    background:transparent; color:var(--mut); font-size:14px; }
  .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 auto; }
  .mrec.encards.envcap .mcap { flex:1 1 auto; }
  /* 비어 있는 녹음 알림 줄과 숨은 단추 줄이 사이 간격만 차지한다(각 10~22px) */
  .mrec.encards > #mRecNote:empty { display:none; }
  .mrec.encards > .mrecextra:not(:has(> :not([hidden]))) { display:none; }
}

/* ── R3b 휴대폰 회의 화면(수석님 아이폰 시험 a162dee2 「카드 칸이 너무 작아 식별 불가」, 이음 28e41767) ──
   음성앱 web/style.css 끝 「휴대폰 회의 화면」 묶음(2026-10-09 15:58 판, style.css 9598116ca2ae)을 옮긴다. 시범판에만 있는
   위 상태 줄·소리 막대·동의 안내는 그 격자에 끼워 넣는다: 「녹음 중」은 제목 앞 붉은 점으로(글자는 화면 읽기용으로 남김),
   「녹음 취소」는 음성앱처럼 「녹음 끝」 왼쪽, 소리 막대는 제목 줄 아래 4px 선, 안내는 동의 한 줄(첫 안내는 소리가 들리면 접힘).
   한국어는 카드 7 대 받아쓰기 3, 영어는 번역이 가장 큰 칸이고 답변 제안은 36% 안. 영어에서 카드가 열리면 휴대폰(높이 1000px 이하)은
   아래 「자막·답변 제안 / 카드」 단추로 한쪽씩 본다. 음성앱 배치(번역 5 대 카드 4)는 390×664 에서 카드 목록이 약 80px 이라
   카드 한 장의 답이 목록 밖으로 나가기 때문이다(PORT_PLAN 13절 「R3b」). 태블릿 세로는 음성앱처럼 셋을 함께 둔다.
   「외부인 동석」은 찾기 줄 왼쪽으로 옮겼다(index.html). 되돌리기: 이 묶음과 그 한 줄, .maskform button 선택자를 되돌린다 */
.maskform .mextbtn { flex:none; }
#mRecNote:empty { display:none; }
@media (max-width: 899px), (max-width: 1023px) and (orientation: portrait) {
  #meetings:has(> .mrec.capon:not(.hidden)) > .mbrand { min-height:34px; padding-top:4px; padding-bottom:4px; }
  #meetings:has(> .mrec.capon:not(.hidden)) > .mbrand .lockbar, #meetings:has(> .mrec.capon:not(.hidden)) > .mbrand .lockname,
  #meetings:has(> .mrec.capon:not(.hidden)) #mAccount { display:none; }
  #meetings > .mrec.capon:not(.hidden) { display:grid; grid-template-columns:auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-rows:auto auto auto auto auto auto minmax(0, 1fr) auto auto auto; row-gap:0; column-gap:8px; align-items:center;
    padding:6px 12px calc(8px + var(--sab)); }
  .mrec.capon > .mrectop { display:contents; }
  .mrec.capon .mrecstate { grid-column:1; grid-row:1; gap:0; font-size:0; }
  .mrec.capon > .mrectitle { display:block; grid-column:2 / 5; grid-row:1; margin-top:0; text-align:left; font-size:15px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mrec.capon > .mrectime { grid-column:5; grid-row:1; font-size:20px; line-height:1.2; }
  .mrec.capon > .mlevel { grid-column:1 / -1; grid-row:2; width:100%; height:4px; margin-top:6px; }
  .mrec.capon > .mcapbar { grid-column:1 / -1; grid-row:3; 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:4; margin-top:4px; padding:0; font-size:13px; text-align:left; }
  .mrec.capon > .mmicwarn { grid-column:1 / -1; grid-row:5; margin-top:6px; max-width:none; }
  .mrec.capon > .mrechints { grid-column:1 / -1; grid-row:6; align-items:flex-start; margin-top:2px; }
  .mrec.capon .mrechints > .mhint { padding:0; font-size:12px; text-align:left; }
  .mrec.capon .mrechints > .mhint:not(.mconsent):not(.mrecfirst) { display:none; }
  .mrec.capon > .mcapwrap { grid-column:1 / -1; grid-row:7; 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:8; margin-top:4px; padding:0; }
  .mrec.capon > .mrecextra { grid-column:1 / -1; grid-row:9; margin-top:6px; }
  .mrec.capon > .mrecextra:not(:has(> :not([hidden]))) { display:none; }
  .mrec.capon .mcanceltop { grid-column:1 / 3; grid-row:10; margin-top:8px; width:100%; min-height:48px; padding:0 8px;
    border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); color:var(--fg); font-size:15px; font-weight:600; }
  .mrec.capon > #mStop { grid-column:3 / -1; grid-row:10; margin-top:8px; width:100%; max-width:none; 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; min-height:0; }
  .mrec.copon .mcapline { padding:6px 0; }
  .mrec.copon .mcapline .ko, .mrec.copon .mcapline .src { font-size:16px; }
  /* 영어·일본어 회의: 번역이 가장 큰 칸. 답변 제안은 넘치면 칸 안에서 밀어 본다 */
  .mrec.capon:not(.copon) .mcap { flex:1 1 0; min-height: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, 답변 제안은 28% 안 */
  .mrec.encards .mcards { order:-1; flex:4 1 0; }
  .mrec.capon.encards .mcap { flex:5 1 0; min-height:0; }
  .mrec.encards .mreply { max-height:28%; }
  /* 카드 칸 머리: 쓰임 줄(깊은 카드 n/20장)은 얇게, 찾기 줄은 「외부인 동석」과 한 줄 */
  .mrec.capon .mcardsbar { padding:2px 10px; min-height:0; flex-wrap:nowrap; }
  .mrec.capon .mcardsusage { font-size:12px; line-height:1.4; }
  .mrec.capon .maskform { padding:6px 8px; }
  .mrec.capon .maskform input { min-height:40px; height:auto; padding:6px 10px; }
  .mrec.capon .maskform button[type="submit"] { min-height:40px; height:auto; padding:0 14px; }
  .mrec.capon .maskform .mextbtn { min-height:40px; height:auto; padding:0 10px; font-size:13px; }
  .mrec.capon .mcardlist { padding:2px 8px 10px; }
  .mrec.capon .mcard { margin:6px 0; padding:8px 10px; }
}
/* 휴대폰 영어 세 칸: 「자막·답변 제안」 쪽은 위 영어 배치(번역 최대, 답변 제안 36% 안), 「카드」 쪽은 카드가 칸 전체 */
@media (max-width: 899px) and (max-height: 1000px) {
  .mrec.encards .menview { order:-2; align-self:flex-start; padding:2px; }
  .mrec.encards .menview button { min-height:32px; padding:0 12px; font-size:13px; }
  .mrec.encards.envcap .mcap { flex:1 1 0; }
  .mrec.encards.envcap .mreply { max-height:36%; }
  .mrec.encards.envcards .mcards { flex:1 1 0; }
}

/* ── R3c 회의 화면 정리(수석님 아이폰 시험 10-10 09:06 「선이 많고 둥근 상자·단추가 다닥다닥 붙어 개발 중인 제품 같다」) ─────────
   상자 대신 여백과 글자 위계로 칸을 나눈다. 칸 사이는 가는 선 하나, 카드 사이도 가는 선 하나만 둔다. 카드·자막·답변 제안·카드 칸에
   둥근 테두리 상자를 씌우지 않고, 테두리 알약·색 띠·장식 그림자를 쓰지 않는다(kill-ai-slop 17·19·20·29). 채운 단추는 화면마다
   하나(녹음 화면 「녹음 끝」, 목록 「녹음 시작」)이고 나머지는 글자 단추다. 켜고 끄는 것(자막·외부인 동석)은 스위치로 상태를 보인다.
   누르는 자리는 44px: 휴대폰에서 줄 높이를 늘리면 카드 칸이 줄어드는 곳은 ::after 로 위아래 누름 자리만 넓힌다.
   되돌리기: 이 묶음을 지운다(index.html 의 원문 시트·파일 올리기 아이콘과 meeting.js R3C 는 따로) */
:root { --hair:color-mix(in srgb, var(--line) 72%, var(--bg)); }
/* 머리 띠·목록 머리: 휴대폰에서는 선을 빼고 탭 밑줄 하나만 남긴다 */
@media (max-width:1023px) {
  .mbrand { border-bottom:0; }
  #mList .convhead { padding-top:4px; padding-bottom:0; }
}
#mList .convhead { border-bottom:0; }
@media (min-width:1024px) { #mRecPane .mnew { border-bottom-color:var(--hair); } #meetings > #mList { border-right-color:var(--hair); } .mbrand { border-bottom-color:var(--hair); } }
.mtabs, .mseg { border-bottom-color:var(--hair); }
.conv, .mminrow { border-bottom-color:var(--hair); }
.conv.cur { box-shadow:none; background:var(--surface-2); }
#mRecPane .mnew { border-top-color:var(--hair); }
/* 단계 꼬리표(초안 있음·노션 등록): 테두리 상자 → 색 글자 */
.mbadge { border:0; padding:0; min-height:0; border-radius:0; font-size:13px; }
/* 파일 올리기·사전: 테두리 단추 → 아이콘 붙은 글자 단추 */
#mRecPane .mfile, #mTermsBtn { background:transparent; border-color:transparent !important; color:var(--fg); padding:0 10px; min-height:44px; gap:6px; }
#mRecPane .mfile svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#mRecPane .mnew .mfile { margin-left:-10px; }
/* 회의록 찾기 줄과 거르기: 입력칸은 바탕색으로만, 거르기는 고른 것에만 옅은 바탕 */
.mminbar { border-bottom:0; padding-bottom:4px; }
.mminbar input { border:0; background:var(--surface); border-radius:var(--r-sm); }
.mminfilter button { border:0; background:transparent; min-height:40px; padding:0 12px; }
.mminfilter button[aria-pressed="true"] { background:var(--surface-2); border:0; color:var(--fg); }

/* 자리 참 안내(다른 분이 녹음 중): 경고색 테두리 상자 → 옅은 바탕 한 칸 */
#mRecPane .mslot { border:0; }

/* ── 녹음 화면 ── */
#mRec .mlevel { background:var(--hair); }
/* 켜고 끄는 단추(자막·외부인 동석): 테두리 알약 → 스위치 + 이름. 스위치 손잡이는 ::before 하나의 배경으로 그린다(::after 는 누름 자리) */
#mRec .mcapbtn, #mRec .mextbtn { position:relative; display:inline-flex; align-items:center; gap:8px; border:0; background:transparent;
  color:var(--fg); border-radius:var(--r-sm); padding:0 6px 0 2px; font-weight:600; min-width:0; }
#mRec .mcapbtn::before, #mRec .mextbtn::before { content:""; flex:none; width:34px; height:20px; border-radius:10px;
  background:radial-gradient(circle at 10px 50%, var(--faint) 0 6.5px, transparent 7px) var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); }
#mRec .mcapbtn[aria-pressed="true"], #mRec .mextbtn[aria-pressed="true"] { background:transparent; color:var(--fg); border-color:transparent; }
#mRec .mcapbtn[aria-pressed="true"]::before, #mRec .mextbtn[aria-pressed="true"]::before {
  background:radial-gradient(circle at 24px 50%, var(--on-acc) 0 6.5px, transparent 7px) var(--acc); box-shadow:none; }
#mRec .mcapbtn::after, #mRec .mextbtn::after, #mRec .mcaplang button::after, #mRec .menview button::after, #mRec .mnewcards::after,
#mRec .mreplypin::after { content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
/* 언어 고르기·자막/카드 오가기: 테두리 알약 묶음 → 밑줄 탭(회의록/녹취 탭과 같은 꼴) */
#mRec .mcaplang, #mRec .menview { border:0; padding:0; border-radius:0; gap:2px; background:transparent; }
#mRec .mcaplang button, #mRec .menview button { position:relative; border-radius:0; background:transparent; color:var(--mut); min-width:0;
  padding:0 8px; box-shadow:inset 0 -2px 0 transparent; }
#mRec .mcaplang button[aria-checked="true"], #mRec .menview button[aria-checked="true"] { background:transparent; color:var(--fg); font-weight:700;
  box-shadow:inset 0 -2px 0 var(--acc); }
#mRec .mevnew { background:transparent; color:var(--acc); padding:0; margin-left:4px; font-size:12px; font-weight:700; border-radius:0; }
/* 자막 칸: 상자 없이 줄 사이 여백으로. 누른 줄만 옅은 바탕 */
#mRec .mcap { background:transparent; border:0; border-radius:0; padding:4px 0; }
#mRec .mcapline { border-bottom:0; padding:7px 0; }
#mRec .mcapline.asked { padding-left:8px; padding-right:8px; margin:0; border-radius:var(--r-sm); background:var(--surface-2); box-shadow:none; }
#mRec .mcapline.flash { padding-left:8px; padding-right:8px; border-radius:var(--r-sm); }
/* 스크롤 칸 가장자리에서 반쯤 걸린 줄이 선에 붙어 겹쳐 보이지 않게 위아래 8px 만 흐리게(칸 밖에 더 있다는 표시) */
/* 더 볼 것이 있는 쪽만(meeting.js R3C 가 mtop·mmore 를 붙인다). 자막 칸 위는 한 줄 높이로 흐려 반쯤 걸린 줄이 조각으로 보이지 않게 */
#mRec .mcardlist, #mRec .mcap { --ft0:0px; --ft:0px; --fb:0px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent var(--ft0), #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, transparent var(--ft0), #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%); }
#mRec .mcardlist.mtop { --ft:24px; }
#mRec .mcardlist.mmore { --fb:36px; }
#mRec .mcap.mtop { --ft0:20px; --ft:48px; }
#mRec .mcap.mmore { --fb:24px; }
/* 카드 목록 끝: 마지막 카드의 단추 줄까지 아래 단추 줄에 붙지 않고 올라오게 단추 줄 높이만큼 여백 */
/* 한국어 회의(휴대폰·세로): 카드 칸과 받아쓰기 칸 사이에 작은 머리글 「받아쓰기」 */
.mcaphead { display:none; }
@media (max-width:899px), (orientation:portrait) {
  /* 높이 0 의 머리글이 받아쓰기 칸 위 여백(20px) 자리에 겹쳐 앉는다. 카드 목록 높이를 줄이지 않는다(R3b 215px 기준) */
  #mRec.copon .mcaphead { display:block; flex:none; height:24px; margin:-8px 0 -24px; padding-top:4px; position:relative; z-index:1;
    background:var(--bg); font-size:12px; font-weight:700; color:var(--mut); line-height:18px; text-align:left; }
  #mRec.copon .mcap > :first-child { margin-top:20px; }
}
/* 답변 제안: 상자 없이 자막 아래 가는 선 하나. 「내부」 표지는 글자, 「고정」은 글자 단추 */
#mRec .mreply { background:transparent; border:0; border-radius:0; border-top:1px solid var(--hair); padding:4px 0 2px; text-align:left; }
#mRec .mreplybar { background:var(--bg); }
#mRec .mreplytitle { font-size:13px; color:var(--mut); }
#mRec .mreplyint { border:0; padding:0; color:var(--warn); }
#mRec .mreplypin { position:relative; border:0; background:transparent; color:var(--mut); min-width:0; padding:0 8px; margin-right:0; border-radius:var(--r-sm); }
#mRec .mreplypin[aria-pressed="true"] { background:transparent; color:var(--acc); font-weight:700; }
#mRec .mreplybody, #mRec .mreplyempty { text-align:left; }
/* 카드 칸: 상자 없이. 위 사용량 줄은 왼쪽 맞춤 작은 글자, 「새 카드」는 글자 단추 */
#mRec .mcards { background:transparent; border:0; border-radius:0; overflow:hidden; }
#mRec .mcardsbar { border-bottom:0; padding:0 0 2px; min-height:0; gap:8px; }
#mRec .mcardsusage { text-align:left; color:var(--mut); }
#mRec .mnewcards { position:relative; background:transparent; color:var(--acc); min-height:28px; padding:0 2px; border-radius:0; font-size:13px; font-weight:700; }
/* 찾기 줄: 외부인 동석 스위치 · 바탕색 입력칸 · 글자 단추 「찾기」 */
#mRec .maskform { border-bottom:0; padding:2px 0 6px; gap:8px; align-items:center; }
#mRec .maskform input { border:0; background:var(--surface); border-radius:var(--r-sm); min-height:44px; height:44px; }
#mRec .maskform button[type="submit"] { background:transparent; color:var(--acc); padding:0 8px; border-radius:var(--r-sm); font-weight:700; min-height:44px; height:44px; }
#mRec .maskform .mextbtn { font-size:14px; font-weight:600; color:var(--fg); padding-right:2px; }
/* 카드: 상자 없이 카드 사이 가는 선 하나. 종류는 색 글자, 고정은 머리 줄 글자 */
#mRec .mcardlist { padding:6px 0 56px; }
#mRec .mcard { border:0; border-radius:0; background:transparent; margin:0; padding:12px 0 6px; border-top:1px solid var(--hair); cursor:pointer; }
#mRec .mcard:first-child { border-top:0; padding-top:6px; }
#mRec .mcard.pinned { border-color:var(--hair); }
#mRec .mcard.pinned .mcardhead::after { content:"고정됨"; color:var(--acc); font-weight:700; }
#mRec .mcard.folded { padding-bottom:10px; }
#mRec .mcardhead { gap:8px; font-size:13px; color:var(--faint); }
#mRec .mcardkind { border:0; padding:0; border-radius:0; font-size:13px; font-weight:700; color:var(--mut); }
#mRec .mcardkind.issue { color:var(--warn); }
#mRec .mcardkind.manual { color:var(--acc); }
#mRec .mcardts { color:var(--faint); text-decoration:none; min-height:32px; font-size:13px; position:relative; }
#mRec .mcardts::after { content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
#mRec .mcardq { margin:2px 0 4px; font-size:16px; font-weight:700; line-height:1.4; }
#mRec .mcardans { font-size:16px; font-weight:400; line-height:1.55; margin:2px 0 4px; color:var(--fg); }
#mRec .mcardmeta { margin:0 0 2px; }
#mRec .mcardflags { gap:2px 10px; }
#mRec .mcardflag { background:transparent; padding:0; border-radius:0; font-weight:600; }
#mRec .mcarden { background:transparent; padding:0; margin:4px 0 8px; border-radius:0; }
#mRec .mcardenlabel { font-size:12px; color:var(--mut); font-weight:600; }
#mRec .mcardensrc { color:var(--faint); }
/* 근거 줄: 줄 전체가 누르는 자리(44px). 제목은 본문색, 날짜·출처는 옅게, 끝에 열림 표시(›, 새 탭은 ↗) */
#mRec .mcardev, #mRec .mcardhits { margin:2px 0 0; padding:0; list-style:none; }
#mRec .mcardhits li, #mRec .mcardev li { border-top:0; padding:0; color:var(--mut); font-size:14px; }
#mRec .msrc { display:flex; flex-wrap:wrap; align-items:center; column-gap:6px; width:100%; min-height:44px; padding:6px 0; margin:0;
  border:0; background:transparent; color:var(--fg); text-decoration:none; text-align:left; font:inherit; font-size:14px; line-height:1.4; cursor:pointer; border-radius:0; }
/* 제목이 남는 폭을 다 쓰고 길면 그 안에서 줄을 바꾼다. 출처 표지·「원문 보기 ›」는 첫 줄 오른쪽에 붙어 떨어지지 않는다 */
#mRec .msrc > span:first-child, #mRec .msrc > b { flex:1 1 0; min-width:0; color:var(--fg); font-weight:600; }
#mRec .mcardhits .msrc > span:not(.msrcgo) { order:3; flex-basis:100%; color:var(--mut); font-weight:400; font-size:13px; }
#mRec .msrc svg { order:2; flex:none; margin-left:auto; width:16px; height:16px; color:var(--faint); fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:0; }
#mRec .msrc:active { background:var(--surface-2); }
#mRec .mcardhits .msrc b { color:var(--fg); }
#mRec .msrctag { background:transparent; padding:0; margin-left:0; border-radius:0; color:var(--faint); font-size:12px; order:1; }
/* 줄 끝 「원문 보기 ›」·「노션에서 보기 ↗」: 누를 수 있다는 표시(이음 10-10) */
#mRec .msrcgo { order:2; margin-left:auto; padding-left:8px; color:var(--acc); font-size:13px; font-weight:700; white-space:nowrap; }
#mRec .msrcgo + svg { margin-left:2px; color:var(--acc); }
#mRec .mcardev li > span, #mRec .mcardhits li > b { display:inline; }
#mRec .mcardhits li > span { display:block; }
/* 웹 근거: 위 선 대신 여백과 작은 제목 */
#mRec .mcardweb { border-top:0; padding-top:0; margin-top:6px; }
/* 내부 자료 펼치기·다음 질문: 테두리 단추·알약 → 글자 단추 */
#mRec .mreveal { border:0; background:transparent; color:var(--acc); padding:0; min-height:44px; font-weight:600; margin:0; border-radius:0; }
#mRec .mchips { flex-direction:column; align-items:flex-start; gap:0; margin-top:2px; }
#mRec .mchips button { border:0; background:transparent; border-radius:0; color:var(--acc); padding:0; min-height:44px; font-size:14px; font-weight:600; }
/* 카드 단추: 테두리 상자 셋 → 글자 단추. 「깊게 찾기」만 강조색 */
#mRec .mcardacts { gap:0; margin:2px 0 0 -10px; }
#mRec .mcardacts button { border:0; background:transparent; min-height:44px; padding:0 10px; color:var(--mut); border-radius:var(--r-sm); font-size:14px; }
#mRec .mcardacts button.primary { color:var(--acc); font-weight:700; }
#mRec .mcardacts button[aria-pressed="true"] { color:var(--fg); font-weight:700; }
#mRec .mcardacts button:disabled { opacity:.45; }
#mRec .mcapempty { padding:16px 0; text-align:left; }
/* 마이크 무음 경고: 테두리 상자 → 옅은 바탕 한 칸, 글자로 경고 */
#mRec .mmicwarn { border:0; }
/* 녹음 취소: 테두리 상자 → 글자 단추(「녹음 끝」만 채운 단추) */
#mRec .mcanceltop { border:0; background:transparent; }
/* 칸 사이 선: 휴대폰·세로 화면은 위아래(한국어: 카드 위·받아쓰기 아래, 영어+카드: 카드 위·자막·답변 제안 아래) */
/* 선은 카드 칸 쪽에 긋는다(자막 칸은 위 가장자리를 흐리게 하므로 그 칸에 그은 선은 사라진다) */
@media (max-width:899px), (orientation:portrait) {
  #mRec.copon .mcards, #mRec.encards .mcards { border-bottom:1px solid var(--hair); }
}
@media (max-width:899px) and (max-height:1000px) {
  #mRec.encards.envcards .mcards { border-bottom:0; }
}
/* 넓은 가로 화면: 왼쪽 받아쓰기, 오른쪽 카드. 상자 대신 세로선 하나 */
@media (min-width:900px) and (orientation:landscape) {
  #mRec.copon .mcapwrap, #mRec.encards .mcapwrap { gap:0; }
  #mRec.copon .mcap, #mRec.encards .mcap { padding-right:24px; }
  #mRec.copon .mcards, #mRec.encards .mcards { border-left:1px solid var(--hair); padding-left:24px; }
  #mRec.encards .mreply { margin-right:24px; }
}

/* ── R3c 원문 시트: 휴대폰은 전체 화면, 넓은 화면(900px~)은 오른쪽 칸. 녹음 화면 위에 덮을 뿐 화면을 바꾸지 않는다 ── */
.msheet { position:fixed; inset:0; z-index:40; display:flex; justify-content:flex-end; background:var(--bg); }
.msheetpanel { flex:1 1 auto; min-width:0; height:100%; display:flex; flex-direction:column; background:var(--bg);
  padding:var(--sat) var(--sar) 0 var(--sal); }
.msheethead { flex:none; display:flex; align-items:center; gap:4px; min-height:56px; padding:4px 4px 4px 16px; border-bottom:1px solid var(--hair); }
.msheethead #mSheetBack { margin-left:-12px; }
.msheettitles { flex:1; min-width:0; }
.msheettitles h2 { margin:0; font-size:17px; font-weight:700; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msheetmeta { font-size:13px; color:var(--mut); line-height:1.4; }
.msheetmeta:empty { display:none; }
.msheetsrcs { flex:none; display:flex; gap:2px; overflow-x:auto; padding:0 12px; border-bottom:1px solid var(--hair); scrollbar-width:none; }
.msheetsrcs::-webkit-scrollbar { display:none; }
.msheetsrcs button { flex:none; display:inline-flex; align-items:center; gap:4px; max-width:220px; min-height:44px; padding:0 8px; border:0; border-radius:0;
  background:transparent; color:var(--mut); font-size:14px; box-shadow:inset 0 -2px 0 transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msheetsrcs button[aria-selected="true"] { color:var(--fg); font-weight:700; box-shadow:inset 0 -2px 0 var(--acc); }
.msheetsrcs button > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.msheetsrcs button svg { flex:none; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.msheetbody { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:12px 20px calc(24px + var(--sab)); font-size:16px; line-height:1.65; color:var(--fg); word-break:keep-all; overflow-wrap:anywhere; }
.msheetbody > :first-child { margin-top:4px; }
.msheetbody h2 { font-size:19px; margin:24px 0 8px; line-height:1.35; }
.msheetbody h3 { font-size:17px; margin:20px 0 6px; line-height:1.4; }
.msheetbody h4 { font-size:16px; margin:16px 0 4px; }
.msheetbody p { margin:8px 0; }
.msheetbody ul, .msheetbody ol { margin:6px 0 10px; padding-left:20px; }
.msheetbody li { margin:4px 0; }
.msheetbody li > ul, .msheetbody li > ol { margin:4px 0; }
.msheetbody blockquote { margin:12px 0; padding:0; color:var(--mut); font-size:14px; }
.msheetbody blockquote p { margin:4px 0; }
.msheetbody code { font-family:ui-monospace, "SF Mono", Consolas, monospace; font-size:13px; background:var(--surface-2); border-radius:4px; padding:1px 4px; }
.msheetbody pre { background:var(--surface); border-radius:var(--r-sm); padding:12px; overflow-x:auto; }
.msheetbody pre code { background:none; padding:0; }
.msheetbody .mtbl { overflow-x:auto; margin:10px 0; }
.msheetbody table { border-collapse:collapse; width:100%; font-size:14px; }
.msheetbody th, .msheetbody td { text-align:left; vertical-align:top; padding:8px 10px 8px 0; border-bottom:1px solid var(--hair); }
.msheetbody th { color:var(--mut); font-weight:600; }
.msheetbody th, .msheetbody td { overflow-wrap:normal; word-break:keep-all; min-width:4.5em; }
.msheetbody hr { border:0; border-top:1px solid var(--hair); margin:20px 0; }
.msheetbody a { color:var(--acc); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.msheetbody .msrcnote { margin-top:24px; padding-top:12px; border-top:1px solid var(--hair); font-size:13px; color:var(--mut); }
/* 시트 아래 「노션에서 열기」 글자 단추. 녹음 중이면 옆에 「앱을 벗어나면 녹음이 멈출 수 있습니다」 한 줄(이음 10-10) */
.msheetfoot { flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:0 12px; min-height:52px; padding:4px 20px calc(4px + var(--sab));
  border-top:1px solid var(--hair); }
.msheetnotion { flex:none; display:inline-flex; align-items:center; min-height:44px; color:var(--acc); font-size:16px; font-weight:700; text-decoration:none; }
.msheetwarn { flex:1 1 180px; font-size:13px; color:var(--mut); line-height:1.4; }
@media (min-width:900px) {
  .msheet { background:rgba(8,10,16,.32); }
  .msheetpanel { flex:0 0 min(720px, 100%); border-left:1px solid var(--line); }
  .msheethead { padding-left:24px; }
  .msheetbody { padding:16px 32px 32px; }
  .msheetsrcs { padding:0 20px; }
  .msheetfoot { padding-left:32px; padding-right:32px; }
}

/* 녹음 일시정지(글결 2026-10-25): 위 상태 줄 「일시정지」와 흐린 점·시계, 안내 두 줄, 「녹음 끝」 위 줄의 같은 모양 단추 */
.mrec.paused .mrecstate { color:var(--mut); }
.mrec.paused .mrecdot { background:var(--faint); }
.mrec.paused .mrectime { color:var(--faint); }
.mpausehint.hidden, #mPauseWarn.hidden, .mwpause.hidden { display:none; }
.mrechints > #mPauseHint:not(.hidden), .mrechints > #mPauseWarn:not(.hidden) { display:block; }
.mrec.capon .mrechints > #mPauseHint:not(.hidden), .mrec.capon .mrechints > #mPauseWarn:not(.hidden) { display:block; }
.mwpause + .mwquiet, .mwpause + .mwdev, .mwpause + .mwlong, .mwquiet + .mwpause, .mwdev + .mwpause, .mwlong + .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; }

/* 녹음 화면 겹침 정비(글결 2026-10-25, 전용 앱 ui_fix/append.css 와 같은 결함, 이음 c692f871).
   1) 휴대폰 자막 화면: 자막·카드 칸이 칸 높이 100%에 위 여백 8px을 더해 넘쳐, 칸 아래 테두리가 아래 줄(「다시 시작」 줄·안내 줄)에 2-4px 겹쳤다. 높이를 칸에 맞춘다.
   2) 자막 화면은 안내 줄(.mrechints 의 .mhint)을 숨겨 일시정지 알림 실패 문구(#mPauseWarn)도 보이지 않았다. 그 문구만 다시 보인다.
   되돌리기: 이 묶음을 지운다 */
@media (max-width: 899px), (max-width: 1023px) and (orientation: portrait) {
  .mrec.capon > .mcapwrap { height:auto; }
  .mrec.capon .mrechints > #mPauseWarn:not(.hidden) { display:block; }
}