/* 회의 타이머 전용 CSS (2026-10-15). 무대·원형 고리·순서 목록·회의 흐름 칸·순서별 쓴 시간 막대 mt-*. 공용 부품은 assets/v2.css */
.mt{container:mtw / inline-size}
.mt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mt-stage{padding:16px 18px 18px;min-width:0;display:flex;flex-direction:column;align-items:center;border-right:1px solid var(--soft)}
.mt-top{display:flex;align-items:baseline;gap:8px;align-self:stretch;margin:0;font-family:var(--sans);font-size:12.5px}
.mt-meet{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--ink)}
.mt-pos{margin-left:auto;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.mt-dial{position:relative;width:min(100%,260px);aspect-ratio:1;margin:12px 0 6px}
.mt-dial svg{display:block;width:100%;height:100%}
.mt-trk{fill:none;stroke:var(--soft);stroke-width:10}
.mt-ring{fill:none;stroke:var(--ink);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .25s linear,stroke .2s}
.mt-overring{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:butt;opacity:0;transition:stroke-dasharray .25s linear}
.mt-stage[data-ph="warn"] .mt-ring,.mt-stage[data-ph="over"] .mt-ring{stroke:var(--accent)}
.mt-stage[data-ph="over"] .mt-ring{stroke:var(--ink)} /* 정한 시간은 다 찬 고리(먹색), 넘긴 몫은 위에 두 번째 바퀴(강조색) */
@media (prefers-reduced-motion:reduce){ .mt-ring,.mt-overring{transition:none} }
.mt-center{position:absolute;inset:14%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.mt-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans);font-size:17px;font-weight:700;color:var(--ink)}
.mt-time{font-family:var(--sans);font-size:clamp(40px,11vw,54px);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.mt-stage[data-ph="over"] .mt-time,.mt-stage[data-ph="warn"] .mt-time{color:var(--accent)}
.mt-state{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.mt-stage[data-ph="over"] .mt-state{color:var(--accent)}
.mt-next{margin:0 0 10px;min-height:18px;font-family:var(--sans);font-size:13px;color:var(--muted);text-align:center}
.mt-ctrl{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mt-start{min-width:110px}
.mt-sum{align-self:stretch;margin-top:14px}
.mt-sum li.is-bad b{color:var(--accent)}
.mt-live{margin:8px 0 0;min-height:18px;font-family:var(--sans);font-size:12.5px;color:var(--muted);text-align:center}
.mt-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:12px}
.mt-foot .v2-status{flex-basis:100%;text-align:center}
.mt-set{padding:16px 18px 18px;min-width:0}
.mt-list-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.mt-count{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* 순서 줄: 번호 · 이름 · 시간 · 위로 · 지우기. 열 너비는 subgrid 로 모든 줄이 같은 세로선 */
.mt-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:20px minmax(0,1fr) 76px var(--v2-ctl,42px) var(--v2-ctl,42px);gap:8px 6px}
.mt-list li{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center}
.mt-no{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.mt-in-nm input{text-align:left;font-weight:600;font-variant-numeric:normal}
.mt-in-tm input{padding:0 8px}
.mt-in-tm.is-bad{border-color:var(--accent)}
.mt-up,.mt-x{width:var(--v2-ctl,42px);padding:0;justify-content:center}
.mt-up:disabled,.mt-x:disabled{opacity:.3;cursor:default}
.mt-list li.is-done .v2-input{opacity:.55}
.mt-list li.is-now .mt-no{color:var(--accent)}
.mt-list li.is-now .v2-input{border-color:var(--ink)}
.mt-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mt-help,.mt-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.mt-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px;margin-top:14px}
.mt-fields .full{grid-column:1 / -1}
.mt-fields .v2-f>.v2-label{display:block;margin:0 0 5px}
.mt-pair{display:flex;gap:6px}
.mt-pair .v2-input{flex:1 1 0;min-width:0}
.mt-pair .v2-btn{flex:0 0 auto;white-space:nowrap}
.mt-in-meet input{text-align:left;font-variant-numeric:normal}
.mt-warn{display:flex;flex-wrap:wrap}
.mt-sws{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.mt-presets{margin-top:14px}
.mt-presets>.v2-label{display:block;margin-bottom:6px}
.mt-presets .v2-seg button:disabled{opacity:.45;cursor:not-allowed}
@container v2in (max-width:420px){ .mt-fields{grid-template-columns:minmax(0,1fr)} }
/* 회의 흐름: 계획 시간에 비례한 칸, 지금 칸에 물이 차오름(포모도로와 같은 물결), 끝낸 칸은 가득, 넘긴 칸은 빗금 */
.mt-box{padding:14px 18px 16px;border-top:1px solid var(--soft)}
.mt-box>.v2-label{display:block;margin-bottom:8px}
.mt-flow{display:flex;gap:3px;height:44px}
.mt-seg{position:relative;display:flex;align-items:center;justify-content:center;min-width:4px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--ink)}
.mt-seg i{position:relative;z-index:1;max-width:100%;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal}
.mt-seg.is-now{outline:2px solid var(--ink);outline-offset:1px}
.mt-seg.is-done{color:var(--muted)}
.mt-seg.is-over{color:var(--accent);border-color:var(--accent)}
.mt-water{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--accent);opacity:.32;transition:height .25s linear;pointer-events:none}
.mt-seg.is-done .mt-water{background:var(--ink);opacity:.14}
.mt-seg.is-over .mt-water{background:repeating-linear-gradient(135deg,var(--accent) 0 4px,transparent 4px 8px);opacity:.45}
.mt-water::before{content:"";position:absolute;left:0;right:0;top:-5px;height:6px;background:inherit;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M0 3 Q10 0 20 3 T40 3 V6 H0Z'/%3E%3C/svg%3E") repeat-x 0 0/40px 6px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M0 3 Q10 0 20 3 T40 3 V6 H0Z'/%3E%3C/svg%3E") repeat-x 0 0/40px 6px}
.mt-seg.is-done .mt-water::before,.mt-seg.is-over .mt-water::before{display:none}
.mt-seg:not(.is-now):not(.is-done) .mt-water{display:none}
.mt-flow.is-run .mt-seg.is-now .mt-water::before{animation:mt-wave 1.6s linear infinite}
@keyframes mt-wave{to{-webkit-mask-position:40px 0;mask-position:40px 0}}
@media (prefers-reduced-motion:reduce){ .mt-flow.is-run .mt-seg.is-now .mt-water::before{animation:none} .mt-water{transition:none} }
/* 순서별 쓴 시간: 정한 시간 상자(테두리) 안에 쓴 시간(채움), 넘긴 몫은 상자 밖 빗금 */
.mt-bhead{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin:0 0 8px}
.mt-keys{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.mt-keys i{display:inline-block;width:14px;height:10px;margin-left:6px;border-radius:2px}
.mt-keys i:first-child{margin-left:0}
.mt-keys .k-used{background:var(--ink);opacity:.72}
.mt-keys .k-plan{border:1px solid var(--line);background:var(--wash)}
.mt-keys .k-over{background:repeating-linear-gradient(135deg,var(--accent) 0 3px,var(--paper) 3px 6px)}
.mt-bars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(56px,max-content) minmax(0,1fr) max-content;gap:6px 10px;font-family:var(--sans);font-size:12.5px}
.mt-bars li{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center}
.mt-bn{max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.mt-track{position:relative;height:14px}
.mt-mk{position:absolute;left:0;top:0;bottom:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--wash)}
.mt-fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--radius) 0 0 var(--radius);background:var(--ink);opacity:.72;transition:width .25s linear}
.mt-ov{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,var(--accent) 0 4px,var(--paper) 4px 7px);transition:width .25s linear}
.mt-bv{white-space:nowrap;text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.mt-bars li.is-over .mt-bv{color:var(--accent)}
@media (prefers-reduced-motion:reduce){ .mt-fill,.mt-ov{transition:none} }
@container mtw (max-width:700px){
  .mt-grid{grid-template-columns:minmax(0,1fr)}
  .mt-stage{border-right:0;border-bottom:1px solid var(--soft)}
}
@container mtw (max-width:420px){ .mt-stage,.mt-set,.mt-box{padding-left:12px;padding-right:12px} .mt-bn{max-width:6.5em} }
/* 전체 화면(R46, 회의실 화면에 띄우기): 무대 패널만, 고리·시간·이름 크게, 흐름 칸 표시 */
.mt-fullhint{display:none;margin:10px 0 0;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.mt-flow--full{display:none}
.mt-stage:fullscreen,.mt-stage.is-full{justify-content:flex-start;width:100%;height:100%;padding:24px;border:0;background:var(--paper);overflow:auto}
.mt-stage:fullscreen>:first-child,.mt-stage.is-full>:first-child{margin-top:auto}
.mt-stage:fullscreen>:last-child,.mt-stage.is-full>:last-child{margin-bottom:auto} /* 남으면 가운데, 넘치면 위부터(가운데 정렬은 위가 잘림) */
.mt-stage.is-full{position:fixed;inset:0;z-index:1000}
.mt-stage:fullscreen .mt-top,.mt-stage.is-full .mt-top{align-self:center;width:min(92vw,880px);font-size:clamp(14px,2.2vmin,20px)}
.mt-stage:fullscreen .mt-dial,.mt-stage.is-full .mt-dial{width:min(42vmin,480px);flex:none}
.mt-stage:fullscreen .mt-time,.mt-stage.is-full .mt-time{font-size:clamp(56px,12vmin,120px)}
.mt-stage:fullscreen .mt-name,.mt-stage.is-full .mt-name{font-size:clamp(18px,3.4vmin,34px)}
.mt-stage:fullscreen .mt-state,.mt-stage.is-full .mt-state,.mt-stage:fullscreen .mt-next,.mt-stage.is-full .mt-next{font-size:clamp(13px,2.2vmin,20px)}
.mt-stage:fullscreen .mt-sum,.mt-stage.is-full .mt-sum{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px;width:min(92vw,880px);align-self:center}
.mt-stage:fullscreen .mt-sum li,.mt-stage.is-full .mt-sum li{flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-top:0}
.mt-stage:fullscreen .mt-sum li b,.mt-stage.is-full .mt-sum li b{font-size:clamp(15px,2.2vmin,20px)} /* 요약은 가로 한 줄(세로로 쌓으면 화면을 넘김) */
.mt-stage:fullscreen .mt-flow--full,.mt-stage.is-full .mt-flow--full{display:flex;width:min(92vw,880px);height:clamp(40px,6vmin,60px);flex:none;margin-top:12px;font-size:12px}
.mt-stage:fullscreen .mt-fullhint,.mt-stage.is-full .mt-fullhint{display:block}
html.mt-noscroll{overflow:hidden}
