/* =============================================================
   회의록 — 템플릿 관리 창 · 템플릿 불러오기 메뉴 맥 시트 (사용자 2026-11-02 "2")
   범위: #mm-template-modal(화면 위에 뜨는 창) · #mm-template-menu(불러오기 선택 메뉴)만. 화면에서만.
   청록 점선 단추 · 굵은 글씨(800) · 테두리 카드 · 청록 채운 저장 →
   흰 시트 · 17px 제목 · 회색 묶음 · 머리카락 선 · 흰 단추. 채운 파랑은 '저장' 하나. 휴대폰은 아래에서 올라오는 시트.
   추가 · 삭제 · 저장 · 불러오기는 그대로.
   ============================================================= */
@media screen{
/* ---------- 시트 ---------- */
html #mm-template-modal{ padding:20px !important; background:var(--ui-scrim) !important }
html #mm-template-modal .mm-modal{ max-width:520px; border-radius:var(--ui-radius-sheet); background:var(--ui-surface); box-shadow:var(--ui-elev-sheet); font-family:var(--ui-font); color:var(--ui-text-1) }
html #mm-template-modal .mm-modal-head{ align-items:flex-start; padding:14px 18px 8px; border-bottom:0 }
html #mm-template-modal .mm-modal-head h3{ color:var(--ui-text-1); font-size:var(--ui-text-title3); font-weight:var(--ui-weight-semibold) }
html #mm-template-modal .mm-modal-head p{ margin-top:2px; color:var(--ui-text-2); font-size:var(--ui-text-footnote); line-height:var(--ui-leading) }
html #mm-template-modal .mm-modal-head p b{ color:var(--ui-text-1); font-weight:var(--ui-weight-semibold) }
html #mm-template-modal .mm-modal-x{ width:22px; height:22px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--ui-fill); color:var(--ui-text-2); font-size:var(--ui-text-callout) }
html #mm-template-modal .mm-modal-x:hover{ background:var(--ui-fill-hover); color:var(--ui-text-1) }
html #mm-template-modal .mm-modal-body{ padding:4px 18px 12px; scrollbar-gutter:stable }
/* 템플릿 한 묶음: 테두리 카드 → 흰 묶음, 이름 칸이 묶음 머리 */
html #mm-template-modal .mm-tpl-card{ margin-bottom:12px; padding:0; border:0; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 .5px var(--ui-line); overflow:hidden }
html #mm-template-modal .mm-tpl-card-head{ gap:6px; margin:0; padding:6px 8px 6px 6px; background:var(--ui-surface-alt); box-shadow:inset 0 -.5px var(--ui-line) }
html #mm-template-modal .mm-tpl-name{ height:28px; padding:0 8px; border:0; border-radius:var(--ui-radius-control); background:transparent; color:var(--ui-text-1); font-size:var(--ui-text-callout); font-weight:var(--ui-weight-semibold) }
html #mm-template-modal .mm-tpl-name:hover{ background:var(--ui-surface); box-shadow:0 0 0 .5px var(--ui-line) }
html #mm-template-modal .mm-tpl-name:focus{ background:var(--ui-surface); box-shadow:var(--ui-focus-ring) }
html #mm-template-modal .mm-tpl-card-del{ height:24px; padding:0 8px; border:0; border-radius:var(--ui-radius-row); background:transparent; color:var(--ui-danger); font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular) }
html #mm-template-modal .mm-tpl-card-del:hover{ background:var(--ui-danger-tint) }
html #mm-template-modal .mm-tpl-card-del > i{ display:none }
html #mm-template-modal .mm-tpl-items{ margin:0 }
/* 항목 한 줄: 32px */
html #mm-template-modal .mm-tpl-row{ grid-template-columns:minmax(0,1fr) 64px 28px; gap:4px; min-height:36px; margin:0; padding:4px 6px 4px 6px; box-shadow:inset 0 -.5px var(--ui-line) }
html #mm-template-modal :is(.mm-tpl-row input,.mm-tpl-row select){ height:28px; padding:0 8px; border:0; border-radius:var(--ui-radius-control); background-color:transparent; color:var(--ui-text-1); font-size:var(--ui-text-body) }
html #mm-template-modal :is(.mm-tpl-row input,.mm-tpl-row select):hover{ background-color:var(--ui-fill-subtle) }
html #mm-template-modal :is(.mm-tpl-row input,.mm-tpl-row select):focus{ background-color:var(--ui-surface); box-shadow:var(--ui-focus-ring) }
html #mm-template-modal .mm-tpl-row input::placeholder{ color:var(--ui-text-3) }
html #mm-template-modal .mm-tpl-del{ width:28px; height:28px; padding:0; border-radius:var(--ui-radius-control); color:var(--ui-text-3); font-size:var(--ui-text-footnote) }
html #mm-template-modal .mm-tpl-del:hover{ background:var(--ui-danger-tint); color:var(--ui-danger) }
html #mm-template-modal .mm-tpl-add{ height:32px; margin:0; padding:0 12px; border:0; border-radius:0; background:transparent; color:var(--ui-accent-text); text-align:left; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular) }
html #mm-template-modal .mm-tpl-add:hover{ background:var(--ui-fill-subtle); color:var(--ui-accent-text) }
html #mm-template-modal .mm-tpl-empty{ padding:14px 0; color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
html #mm-template-modal .mm-tpl-add-card{ height:28px; padding:0 12px; width:auto; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-callout); font-weight:var(--ui-weight-regular) }
html #mm-template-modal .mm-tpl-add-card:hover{ background:var(--ui-fill-subtle) }
/* 아래 단추 줄: 닫기 흰 단추 · 저장 채운 파랑 */
html #mm-template-modal .mm-modal-foot{ gap:6px; padding:10px 18px 14px; border-top:0; box-shadow:inset 0 .5px var(--ui-line) }
html #mm-template-modal .mm-btn{ height:28px; padding:0 14px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-callout); font-weight:var(--ui-weight-regular) }
html #mm-template-modal .mm-btn:hover{ background:var(--ui-fill-subtle) }
html #mm-template-modal .mm-btn.mm-btn-primary{ min-width:72px; background:var(--ui-accent); box-shadow:none; color:var(--ui-on-accent); font-weight:var(--ui-weight-semibold) }
html #mm-template-modal .mm-btn.mm-btn-primary:hover{ background:var(--ui-accent-hover) }
html #mm-template-modal .mm-btn.mm-btn-primary:disabled{ background:var(--ui-text-3) }

/* ---------- 템플릿 불러오기 메뉴 ---------- */
html #mm-template-menu{ min-width:220px; padding:5px; border:0; border-radius:var(--ui-radius-panel); background:var(--ui-surface); box-shadow:var(--ui-elev-popover); font-family:var(--ui-font) }
html #mm-template-menu .mm-tpl-menu-item{ min-height:28px; padding:0 8px; border-radius:var(--ui-radius-row) }
html #mm-template-menu .mm-tpl-menu-item:hover{ background:var(--ui-accent); }
html #mm-template-menu .mm-tpl-menu-name{ color:var(--ui-text-1); font-size:var(--ui-text-body); font-weight:var(--ui-weight-regular) }
html #mm-template-menu .mm-tpl-menu-count{ padding:0; background:transparent; color:var(--ui-text-2); font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); font-variant-numeric:tabular-nums }
html #mm-template-menu .mm-tpl-menu-item:hover :is(.mm-tpl-menu-name,.mm-tpl-menu-count){ color:var(--ui-on-accent) }
}

/* ---------- 휴대폰: 아래에서 올라오는 시트 ---------- */
@media screen and (max-width:768px){
html #mm-template-modal{ align-items:flex-end !important; padding:0 !important }
html #mm-template-modal .mm-modal{ max-width:none; max-height:88vh; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 }
html #mm-template-modal .mm-modal-foot{ padding-bottom:calc(14px + env(safe-area-inset-bottom)) }
html #mm-template-modal :is(.mm-btn,.mm-tpl-add-card){ height:40px; flex:1 1 0 }
html #mm-template-modal .mm-tpl-row{ min-height:44px }
html #mm-template-modal :is(.mm-tpl-row input,.mm-tpl-row select,.mm-tpl-name){ height:36px }
html #mm-template-modal .mm-tpl-del{ width:36px; height:36px }
html #mm-template-modal .mm-modal-x{ width:30px; height:30px }
html #mm-template-menu .mm-tpl-menu-item{ min-height:44px }
}