/* 회의 녹음 시작 창 — 시안 B "원탭 빠른 시작"(2026-11-13, 명중님 선택).
   가운데 큰 녹음 버튼 하나, 둘레 고리가 마이크 소리에 반응한다. 색은 작업공간 테마 토큰(--ws-*)을 따르고,
   토큰이 없는 화면에서는 기존 --vp-* 값을 쓴다. 옛 dialog·.dhead 규칙보다 우선하도록 html body #dlgMtgStart.mrec로 시작한다. */
html body #dlgMtgStart.mrec{
  --mr-panel:var(--ws-panel,var(--vp-card,#fff));--mr-ink:var(--ws-ink,var(--vp-ink,#1e1e24));--mr-muted:var(--ws-muted,var(--vp-sub,#6b7280));
  --mr-line:var(--ws-line,var(--vp-light,#e5e7eb));--mr-raised:color-mix(in srgb,var(--mr-ink) 6%,var(--mr-panel)); /* 다크·라이트 모두 창보다 한 단계 짙은 면 */
  --mr-accent:var(--ws-accent,var(--acc,#6d5dfc));--mr-rec:#e5484d;--mr-ok:#2f9e63;--mr-warn:#d08a00;
  width:min(540px,calc(100vw - 2rem));max-width:540px;border:1px solid var(--mr-line);border-radius:16px;background:var(--mr-panel);color:var(--mr-ink);
  box-shadow:0 24px 60px #0006;overflow:hidden
}
html body #dlgMtgStart.mrec .mrec-head{display:flex;align-items:center;gap:10px;padding:16px 14px 4px 20px;background:none;color:var(--mr-ink);font-size:17px;font-weight:700;border:0}
html body #dlgMtgStart.mrec .mrec-head:after{display:none}
html body #dlgMtgStart.mrec .mrec-head>span{flex:1;min-width:0}
html body #dlgMtgStart.mrec .mrec-x{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--mr-muted);cursor:pointer}
html body #dlgMtgStart.mrec .mrec-x:hover{background:var(--mr-raised);color:var(--mr-ink)}
html body #dlgMtgStart.mrec .mrec-body{display:flex;flex-direction:column;gap:14px;padding:8px 20px 18px;max-height:min(76vh,760px);max-height:min(76dvh,760px)}
html body #dlgMtgStart.mrec .mrec-consent{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border-radius:10px;background:var(--mr-raised);color:var(--mr-muted);font-size:12.5px;line-height:1.5}
html body #dlgMtgStart.mrec .mrec-consent svg{flex:none;margin-top:1px}

/* 큰 녹음 버튼 + 소리 고리 */
html body #dlgMtgStart.mrec .mrec-hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0 2px}
html body #dlgMtgStart.mrec .mrec-ring{--lv:0;position:relative;width:160px;height:160px;display:flex;align-items:center;justify-content:center}
html body #dlgMtgStart.mrec .mrec-arc{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
html body #dlgMtgStart.mrec .mrec-track{fill:none;stroke:var(--mr-line);stroke-width:4}
html body #dlgMtgStart.mrec .mrec-level{fill:none;stroke:var(--mr-accent);stroke-width:6;stroke-linecap:round;transition:stroke-dasharray .08s linear}
html body #dlgMtgStart.mrec .mrec-go{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:116px;height:116px;padding:0;border:0;border-radius:50%;
  background:var(--mr-rec);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  box-shadow:0 10px 28px color-mix(in srgb,var(--mr-rec) 40%,transparent),0 0 0 calc(var(--lv) * 10px) color-mix(in srgb,var(--mr-rec) 16%,transparent);transition:transform .12s,filter .12s}
html body #dlgMtgStart.mrec .mrec-go:hover{filter:brightness(1.06)}
html body #dlgMtgStart.mrec .mrec-go:active{transform:scale(.97)}
html body #dlgMtgStart.mrec .mrec-go:focus-visible{outline:3px solid var(--mr-accent);outline-offset:6px}
html body #dlgMtgStart.mrec .mrec-go svg{width:30px;height:30px}
html body #dlgMtgStart.mrec .mrec-status{display:inline-flex;align-items:center;gap:6px;min-height:22px;margin-top:4px;font-size:13px;font-weight:650;color:var(--mr-muted)}
html body #dlgMtgStart.mrec .mrec-status[data-state=ok]{color:var(--mr-ok)}
html body #dlgMtgStart.mrec .mrec-status[data-state=low],html body #dlgMtgStart.mrec .mrec-status[data-state=warn]{color:var(--mr-warn)}
html body #dlgMtgStart.mrec .mrec-status svg{flex:none}
html body #dlgMtgStart.mrec .mrec-hint{min-height:18px;font-size:12px;color:var(--mr-muted);text-align:center;line-height:1.5}

/* 녹음할 소리: 두 칸 단추 */
html body #dlgMtgStart.mrec .mrec-seg{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:3px;border-radius:10px;background:var(--mr-raised)}
html body #dlgMtgStart.mrec .mrec-seg label{position:relative;display:block;cursor:pointer}
html body #dlgMtgStart.mrec .mrec-seg input{position:absolute;opacity:0;pointer-events:none}
html body #dlgMtgStart.mrec .mrec-seg span{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:8px;font-size:12.5px;color:var(--mr-muted);white-space:nowrap}
html body #dlgMtgStart.mrec .mrec-seg input:checked+span{background:var(--mr-panel);color:var(--mr-ink);font-weight:650;box-shadow:0 1px 3px #0002}
html body #dlgMtgStart.mrec .mrec-seg input:focus-visible+span{outline:2px solid var(--mr-accent);outline-offset:1px}
html body #dlgMtgStart.mrec .mrec-srchint{margin:-6px 0 0;font-size:12px;color:var(--mr-muted);text-align:center;line-height:1.5}

/* 회의록 자동 작성 스위치: 글은 왼쪽, 스위치는 오른쪽 */
html body #dlgMtgStart.mrec .mrec-sum{display:flex;align-items:center;gap:12px;margin:0;cursor:pointer}
html body #dlgMtgStart.mrec .mrec-sumtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
html body #dlgMtgStart.mrec .mrec-sumtxt b{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:650;color:var(--mr-ink)}
html body #dlgMtgStart.mrec .mrec-sumtxt b svg{flex:none;color:var(--mr-accent)}
html body #dlgMtgStart.mrec .mrec-sumtxt small{font-size:12px;color:var(--mr-muted);line-height:1.45}
html body #dlgMtgStart.mrec .mrec-sum input{margin:0}

/* 고급: 녹음 다시 듣기 볼륨(녹음 자체와는 무관해 접어 둔다) */
html body #dlgMtgStart.mrec .mrec-adv{border-top:1px solid var(--mr-line);padding-top:10px}
html body #dlgMtgStart.mrec .mrec-adv summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:32px;font-size:12.5px;color:var(--mr-muted);cursor:pointer}
html body #dlgMtgStart.mrec .mrec-adv summary::-webkit-details-marker{display:none}
html body #dlgMtgStart.mrec .mrec-adv summary b{font-weight:650;color:var(--mr-ink);font-variant-numeric:tabular-nums}
html body #dlgMtgStart.mrec .mrec-adv summary>svg:last-child{transition:transform .15s}
html body #dlgMtgStart.mrec .mrec-adv[open] summary>svg:last-child{transform:rotate(180deg)}
html body #dlgMtgStart.mrec .mrec-gain{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:var(--mr-muted)}
html body #dlgMtgStart.mrec .mrec-gain input{flex:1;accent-color:var(--mr-accent)}
html body #dlgMtgStart.mrec .mrec-adv small{display:block;margin-top:6px;font-size:11.5px;color:var(--mr-muted)}

html body #dlgMtgStart.mrec .dfoot{padding:12px 20px;background:none;border-top:1px solid var(--mr-line)}
html body #dlgMtgStart.mrec .dfoot .hbtn{justify-content:center;text-align:center}
html body #dlgMtgStart.mrec:focus{outline:none}

@media (prefers-reduced-motion:reduce){html body #dlgMtgStart.mrec .mrec-level,html body #dlgMtgStart.mrec .mrec-go{transition:none}}

/* 모바일: 아래에서 올라오는 시트, 터치 44px */
@media(max-width:640px){
  html body #dlgMtgStart.mrec{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:18px 18px 0 0;border-bottom:0;max-height:94dvh}
  html body #dlgMtgStart.mrec .mrec-x{width:44px;height:44px}
  html body #dlgMtgStart.mrec .mrec-body{padding:6px 16px 14px;max-height:calc(94dvh - 140px)}
  html body #dlgMtgStart.mrec .mrec-seg span{height:44px}
  html body #dlgMtgStart.mrec .mrec-adv summary{min-height:44px}
  html body #dlgMtgStart.mrec .dfoot{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  html body #dlgMtgStart.mrec .dfoot .hbtn{flex:1;min-height:48px}
}