/* 회의 상세 화면에서만 쓰는 스타일.
   style.css 는 앱 전체의 뼈대라 계속 커지면 고치기 어려워진다.
   제목/회의록 인라인 편집, 참석자, 노션 저장 메뉴는 여기에 모은다. */

/* ── 헤더: 제목 + 참석자 | 동작 버튼 한 줄 ────────────────── */
.detail-heading { min-width: 0; flex: 1; }

/* 동작 버튼은 모두 삭제 버튼과 같은 높이로 맞춘다.
   .sm(작은 버튼)과 섞이면 줄이 울퉁불퉁해 보인다. */
.detail-actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.detail-actions > button,
.detail-actions .notion-save > button {
  height: 34px;
  padding: 0 13px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* ── 제목 인라인 편집 ───────────────────────────────────────
   보기 상태와 편집 상태의 글자 시작점이 정확히 같아야 한다.
   누르는 순간 글자가 몇 px 움직이면 화면이 흔들린 것처럼 보인다.

   맞추는 방법: 두 상태의 (음수 바깥여백 + 테두리 + 안쪽여백) 합을 0 으로 만든다.
     -6px + 1px + 5px = 0
   보기 상태에도 투명 테두리를 둬야 테두리 1px 만큼 밀리지 않는다.
   글꼴·크기·자간·줄높이도 같이 맞춘다. */
.detail-header h2,
.title-edit {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  padding: 2px 5px;
  margin-left: -6px;
  border: 1px solid transparent;
  border-radius: 6px;
}
.detail-header h2 { transition: background 0.12s, border-color 0.12s; }
.detail-header h2:hover { background: var(--panel-2); border-color: var(--border); }

.title-edit {
  border-color: var(--accent);
  width: calc(100% + 12px);   /* 음수 바깥여백만큼 넓혀 오른쪽 끝을 맞춘다 */
  display: block;
}
.title-edit.save-failed { border-color: var(--danger); background: var(--danger-weak); }

/* ── 참석자 ───────────────────────────────────────────────── */
/* 보기/편집 두 상태의 높이를 맞춰 눌렀을 때 아래 내용이 밀리지 않게 한다. */
.attendees {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin: 6px 0 2px;
  /* 칩(22px)과 입력칸의 높이를 같은 값으로 못 박는다.
     둘이 다르면 누르는 순간 줄 높이가 달라져 아래 내용이 위아래로 튄다. */
  min-height: 22px;
  padding: 1px 5px;
  margin-left: -6px;
  border: 1px solid transparent; border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.attendees:not(.editing):hover { background: var(--panel-2); border-color: var(--border); }
.attendees.editing { cursor: default; border-color: var(--accent); }

.attendee {
  font-size: 12px; line-height: 1.5;
  padding: 1px 9px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-2); white-space: nowrap;
}
.attendees.editing .attendee { display: none; }

.attendee-empty { font-size: 12px; color: var(--muted); }

.attendee-edit {
  flex: 1; min-width: 120px;
  font-size: 12.5px;
  /* 칩과 같은 22px. 위 min-height 와 짝이다. */
  height: 22px; line-height: 22px;
  padding: 0; border: 0; background: none; border-radius: 0;
  color: var(--text);
}
.attendee-edit:focus { outline: none; border: 0; }
.attendee-note { font-size: 11.5px; color: var(--muted); }
.attendee-note.err { color: var(--danger); }

/* ── 보관본(VPS) ─────────────────────────────────────────
   회의실 PC 가 꺼져 있을 때 들어오는 화면. 녹음 패널이 없으므로 두 칸으로 넓게 쓴다. */
.archive-mode .layout { grid-template-columns: 320px 1fr; }
@media (max-width: 1000px) {
  .archive-mode .layout { grid-template-columns: 1fr; }
}
.archive-mode #feature-status { color: var(--warn); font-weight: 500; }

/* ── 노션 저장 (1차 버튼 → 저장 위치 선택) ────────────────── */
.notion-save { position: relative; display: inline-block; }
.notion-save .caret { font-size: 9px; opacity: 0.65; }

.notion-menu {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 40;
  min-width: 236px; padding: 5px;
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}
.notion-menu-head {
  font-size: 11.5px; color: var(--muted); font-weight: 600;
  padding: 5px 9px 6px;
}
.notion-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 9px; border-radius: 7px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 13px; font-weight: 500; color: var(--text);
}
.notion-menu-item:hover { background: var(--panel-2); }
.notion-menu-item:disabled { opacity: 0.5; cursor: progress; }
.notion-menu-item .mi-label { flex: 1; min-width: 0; }
.notion-menu-item .mi-state { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.notion-menu-item .mi-state.ok { color: var(--ok); }
.notion-menu-item .mi-state.fail { color: var(--danger); }
.notion-menu-open {
  display: block; padding: 4px 9px 7px;
  font-size: 11.5px; color: var(--accent); text-decoration: none;
}
.notion-menu-open:hover { text-decoration: underline; }
.notion-menu-error {
  padding: 2px 9px 7px; font-size: 11.5px; color: var(--danger);
  line-height: 1.45; word-break: break-all;
}

/* ── 회의록 인라인 편집 ─────────────────────────────────────
   제목과 같은 이유로 보기/편집의 글자 시작점을 맞춘다.
     -9px + 1px + 8px = 0 */
.md-editable,
.md-editor {
  padding: 8px;
  margin: -9px;
  border: 1px solid transparent;
  border-radius: 8px;
}
.md-editable { cursor: text; transition: background 0.12s, border-color 0.12s; }
.md-editable:hover { background: var(--panel-2); border-color: var(--border); }

.md-editor {
  border-color: var(--accent);
  /* 음수 바깥여백(좌우 9px씩)만큼 넓혀야 오른쪽 끝이 보기 상태와 같아진다 */
  width: calc(100% + 18px);
  min-height: 320px;
  resize: vertical;
  display: block;
  font-family: 'Pretendard Variable', Pretendard, 'Malgun Gothic', system-ui, sans-serif;
  /* 본문(.md)과 같은 크기로 둬야 편집으로 들어갈 때 글자 크기가 튀지 않는다 */
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.md-edit-actions {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  margin-top: 10px;
}
.md-edit-actions .save-note { flex: 1; font-size: 12px; color: var(--muted); }
.md-edit-actions .save-note.err { color: var(--danger); }