@import url("./tokens.css");

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
/* padding 까지 지운다 — 브라우저 기본값(1px 6px)이 남아 있으면 아이콘 단추 안의
   그림이 오른쪽으로 밀린다 (체크박스가 그랬다). */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ── 앱 셸 ─────────────────────────────────────────────── */
#app { display: flex; height: 100dvh; overflow: hidden;
  /* 개인 노트가 변에 붙으면 그만큼 비켜 선다 (js/note.js 가 넓은 화면에서만 건다). */
  padding: var(--dock-top, 0px) var(--dock-right, 0px) var(--dock-bottom, 0px) var(--dock-left, 0px); }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: margin-left .2s ease;
  position: relative;            /* 폭 조절 손잡이가 여기 매달린다 */
}

/* ── 끌어서 폭 조절 (shell.js 의 `resizeHandle`) ─────────────────────
   보이지는 않고 **닿기만** 한다 — 경계선은 이미 `border-right` 가 그리고 있다.
   끌 때만 색이 든다. */
.sidebar-resize {
  position: absolute; top: 0; right: -3px; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 5;
  touch-action: none;            /* 이 자리에서 시작한 손짐은 스크롤이 아니다 */
}
.sidebar-resize:hover { background: var(--accent); opacity: .25; }
/* 끄는 동안 — 글자가 딸려 잡히지 않게, 커서는 온 화면에서 같은 모양으로. */
body.resizing-sidebar { user-select: none; cursor: col-resize; }
body.resizing-sidebar .sidebar-resize { background: var(--accent); opacity: .45; }
.sidebar[hidden] { display: none; }

.sidebar-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 12px; }
.sidebar-head .me {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 0; border-radius: var(--radius);
}
.sidebar-head .me:hover { background: var(--bg-hover); }

/* 알림 종 — 안 읽은 수는 빨간 배지로 */
.bell {
  position: relative; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: var(--radius);
  display: grid; place-items: center; font-size: 15px;
}
.bell:hover { background: var(--bg-hover); }
.bell .badge {
  position: absolute; top: 0; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.bell .badge[hidden] { display: none; }
.sidebar-title { font-size: 14px; font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-sub { font-size: 12px; color: var(--text-3); }

.nav { flex: 1; overflow-y: auto; padding: 4px 8px 24px; }
.nav-section { margin-top: 14px; }
.nav-label {
  font-size: 12px; font-weight: 600; color: var(--text-3);
  padding: 4px 8px; letter-spacing: .02em;
}

/* ── 프로젝트 머리글 (shell.js 의 `renderSpaceNav`) ──────────────────
   대시보드로 가는 문이자 목록을 접는 자리다. 아래 항목들보다 한 칸 또렷하게. */
.nav-head { font-weight: 500; color: var(--text); }

/* **아이콘이 곧 접기 단추다.** 따로 화살표를 두면 좁은 사이드바에 과녁이 셋이 되어
   어디를 눌러야 할지 흐려진다. 평소에는 📌 를 보이고, 손을 얹으면 그 자리에서
   화살표로 바뀐다 — 자리를 차지하지 않으려고 둘을 **겹쳐** 둔다. */
.nav-ico {
  position: relative; flex: 0 0 20px; width: 20px; height: 20px;
  border-radius: var(--radius-sm); display: grid; place-items: center;
}
.nav-ico .ico-mark, .nav-ico .ico-caret {
  grid-area: 1 / 1; line-height: 1; transition: opacity .1s ease;
}
.nav-ico .ico-mark { font-size: 15px; }
.nav-ico .ico-caret {
  font-size: 10px; color: var(--text-2); opacity: 0;
  transition: opacity .1s ease, transform .12s ease;
}
.nav-head:hover .nav-ico .ico-mark { opacity: 0; }
.nav-head:hover .nav-ico .ico-caret { opacity: 1; }
.nav-ico:hover { background: var(--bg-active); }
/* 접히면 화살표가 눕는다 — 열고 닫는 자리는 모양으로 말한다. */
.nav-head[data-open="false"] .nav-ico .ico-caret { transform: rotate(-90deg); }

/* ── 아래 달린 것임을 보이기 ──────────────────────────────────────
   들여쓰기만으로는 «접기 아래에 딸린 목록» 이라는 말이 약하다. 머리글 아이콘의
   한가운데에서 세로선을 내려 긋는다 — 어디까지가 그 토글의 것인지 선이 말해 준다.
   (할 일의 하위 항목에 쓰는 것과 같은 수법이다 — `.td-item.sub::before`.)

   18px = 항목 왼쪽 여백 8px + 아이콘 반폭 10px. 머리글 📌 의 한가운데다. */
.nav-list { position: relative; padding-left: 18px; margin-top: 2px; }
.nav-list::before {
  content: ''; position: absolute; left: 18px; top: 2px; bottom: 2px;
  border-left: 1.5px solid var(--border-strong);
}
/* 선과 글 사이에 숨 쉴 자리. 들여쓰기는 `.nav-list` 가 이미 했다. */
.nav-sub { padding-left: 10px; }
/* 목록이 비면 선만 덩그러니 남는다 — 안내문도 같은 자리에 들인다. */
.nav-list .nav-empty { padding-left: 10px; }
.nav-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 5px 8px; border-radius: var(--radius);
  font-size: 14px; color: var(--text-2); text-align: left;
  min-height: 28px;
}
.nav-item:hover { background: var(--bg-hover); }
.nav-item.active { background: var(--bg-active); color: var(--text); font-weight: 500; }
.nav-item .ico { width: 20px; flex: 0 0 20px; text-align: center; font-size: 15px; }
.nav-item .label { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* ── 메인 ──────────────────────────────────────────────── */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* `flex-basis` 는 `auto` 로 둔다 — 높이는 `height` 한 곳이 정한다. 예전처럼
   `flex: 0 0 var(--topbar-h)` 이면 아래 안전영역 규칙이 높이를 늘려도 basis 가
   45px 로 눌러 두어, 노치 아래로 밀린 단추가 상단바 밖으로 삐져나왔다. */
.topbar {
  height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: 4px;
  padding: 0 12px; background: var(--bg);
  position: sticky; top: 0; z-index: 20;
}
.icon-btn {
  width: 28px; height: 28px; border-radius: var(--radius);
  display: grid; place-items: center; color: var(--text-2);
}
.icon-btn:hover { background: var(--bg-hover); }
.crumbs { display: flex; align-items: center; gap: 2px; font-size: 14px;
  color: var(--text-2); min-width: 0; overflow: hidden; }
.crumb { padding: 2px 6px; border-radius: var(--radius);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb:hover { background: var(--bg-hover); }
.crumb-sep { color: var(--text-3); }
.topbar-right { margin-left: auto; display: flex; align-items: center;
  gap: 2px; flex: 0 0 auto; white-space: nowrap; }

/* ── 폰의 상단바 ─────────────────────────────────────────────────────
   단추는 «⋯» 로 접히고(shell.js 의 `layoutActions`) 남는 것은 둘뿐이다.
   네모 테두리를 걷는다 — 44px 상자가 줄지어 서면 상단바가 단추 진열대처럼 무겁다.
   닿는 자리(44px, `hover: none` 규칙)는 그대로 두고 보이는 테두리만 뺀다. */
@media (max-width: 720px) {
  .topbar { gap: 2px; padding: 0 4px; }
  /* 제목이 남는 자리를 다 가진다. 경로가 길면 **앞쪽이 먼저** 줄어든다 —
     지금 보는 글의 이름이 끝까지 남아야 한다. */
  .crumbs { flex: 1 1 auto; font-size: 15px; }
  .crumb { min-width: 0; flex: 0 4 auto; }
  .crumb:last-child { flex-shrink: 1; color: var(--text); font-weight: 500; }
  .topbar .icon-btn { width: 40px; height: 40px; font-size: 18px; }
  .topbar-right .btn { box-shadow: none; padding: 0 8px; min-width: 40px;
    justify-content: center; }
  .topbar-right .btn.gear { font-size: 17px; }
  /* 만들기는 글자 단추로 남는다 — 테두리 대신 강조색 글씨로 «누르는 것» 임을 말한다. */
  .topbar-right .btn:not(.gear) { color: var(--accent); font-weight: 600; }
  .topbar-more { font-size: 20px; line-height: 1; }
}

/* «⋯» 를 누르면 펴지는 목록 — 공유 창(.share-panel)과 같은 결. 폰에서만 생긴다. */
.topbar-menu {
  position: fixed; z-index: 120; min-width: 180px; padding: 4px;
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
/* 상단바에서 옮겨 온 단추를 한 줄짜리 메뉴 항목으로 편다. 폰에서 숨겼던
   글자(.txt)는 여기서 다시 보인다 — 아이콘만으로는 무엇인지 알기 어렵다. */
.topbar-menu .btn {
  justify-content: flex-start; gap: 10px; width: 100%;
  height: 44px; padding: 0 12px; box-shadow: none;
  font-size: 15px; color: var(--text);
}
/* `.btn.gear .txt` 를 숨기는 폰 규칙(상단바 동작 버튼)보다 한 칸 또렷해야 이긴다. */
.topbar-menu .btn.gear .txt { display: inline; }
.topbar-menu .btn.gear { font-size: 15px; }
/* 아이콘 폭을 맞춘다 — ⚙ 는 글꼴이 좁게 그려 «설정» 글자만 왼쪽으로 붙었다. */
.topbar-menu .btn.gear .txt { margin-left: 0; }
.topbar-menu .btn.gear { display: grid; grid-template-columns: 24px 1fr; justify-items: start; }
.topbar-menu .btn.gear > .txt { grid-column: 2; }

.scroll { flex: 1; overflow-y: auto; }
/* 모든 화면이 같은 컨테이너를 쓴다 — 좌우 여백이 화면마다 달라 보이지 않게. */
.page {
  max-width: calc(1180px + var(--content-pad) * 2);
  margin: 0 auto; padding: 14px var(--content-pad) 30dvh;
}
/* 넓게 쓰던 예전 변형은 같은 규칙으로 수렴시킨다 (클래스는 남아도 무해하다). */
.page.wide, .page.board { max-width: calc(1180px + var(--content-pad) * 2); }

.page-title {
  font-size: 40px; font-weight: 700; line-height: 1.2;
  margin: 40px 0 8px; outline: none;
}
.page-title[data-empty="true"]::before {
  content: attr(data-placeholder); color: var(--text-3);
}

/* ── 공용 ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.btn:hover { background: var(--bg-hover); }
.btn.primary { background: var(--accent); color: #fff; box-shadow: none; }
.btn.primary:hover { background: #1a72c9; }
.btn.lg { height: 40px; padding: 0 18px; font-size: 15px; }

.card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 16px; background: var(--bg); text-align: left;
  display: block; width: 100%; transition: background .1s;
}
.card:hover { background: var(--bg-hover); }
.card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px; }
.card-meta { font-size: 13px; color: var(--text-3); }

.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.section-title { font-size: 13px; font-weight: 600; color: var(--text-3);
  margin: 28px 0 10px; letter-spacing: .02em; }
.section-title.row { display: flex; align-items: baseline; gap: 10px; }
.section-title.row .link-btn { margin-left: auto; }

.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border-radius: 3px; font-size: 12px; background: var(--bg-subtle); color: var(--text-2); }

.empty { color: var(--text-3); font-size: 14px; padding: 24px 0; }

/* 아무것도 없을 때의 자리. 회색 글씨 한 줄만 두면 화면이 무너진 것처럼 보인다 —
   테두리를 둘러 **비어 있는 것이 정상임을 보이게** 한다. */
.empty-panel {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 20px; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg); background: var(--bg-subtle);
  text-align: center;
}
.empty-panel .ico { font-size: 22px; line-height: 1; opacity: .7; }
.empty-panel .msg { font-size: 14px; font-weight: 600; color: var(--text-2); }
.empty-panel .hint { font-size: 12.5px; color: var(--text-3); }
.empty-panel .btn { margin-top: 6px; height: 30px; padding: 0 14px; font-size: 13px; }

/* 떠 있는 단추(휴지통 🗑)가 있는 화면은 맨 끝 카드가 그 밑에 깔리지 않게
   본문 끝을 그만큼 비운다. 보통은 위의 30dvh 로 넉넉하지만, 화면이 그 값을
   줄여도(폰 가로 등) **단추 높이 + 간격 + 홈바** 아래로는 내려가지 않게 한다. */
.page:has(> .trash-fab) {
  padding-bottom: max(30dvh,
    calc(var(--fab-size) + var(--fab-gap) * 2 + env(safe-area-inset-bottom, 0px)));
}

/* 모바일: 사이드바를 오버레이로 */
@media (max-width: 720px) {
  /* 개인노트 창(85)보다 위 — 노트를 아래에 붙여 둔 채 ☰ 를 열면 서랍 아래쪽(프로젝트·
     관리자·로그아웃)이 노트 밑에 깔려 누를 수 없었다. 대화상자(100)·찾기(95)보다는 아래. */
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 88; box-shadow: var(--shadow-md); }
  .sidebar[data-collapsed="true"] { display: none; }
  .page-title { font-size: 30px; margin-top: 24px; }
}

/* ── 모달 ──────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: var(--bg-overlay);
  display: grid; place-items: center; padding: 24px;
}
.modal {
  width: 100%; max-width: 460px; max-height: 80dvh; overflow-y: auto;
  background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 18px 20px 16px;
}
.modal h2 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.modal .hint { font-size: 13px; color: var(--text-3); margin: 0 0 14px; }
.modal-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
}
.modal-row .who { flex: 1; min-width: 0; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-row .who small { display: block; font-size: 12px; color: var(--text-3); }
.modal-row select {
  height: 30px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); padding: 0 6px; font-size: 13px;
}
.modal.wide { max-width: 560px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.modal hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }

/* ── 폼 필드 ─────────────────────────────────────────── */
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 12px; font-weight: 600;
  color: var(--text-2); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; height: 38px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg-subtle); outline: none;
}
.field textarea { height: auto; padding: 8px 10px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); background: var(--bg);
  box-shadow: 0 0 0 2px rgba(35, 131, 226, .2);
}
/* 폰 폭이면 손가락 기기 여부와 상관없이 16px — 아래 `hover: none` 판단은 iPad 를
   마우스와 함께 쓰거나, 브라우저가 가리키기를 잘못 알리면 빗나간다. iOS 는 16px 보다
   작은 입력칸을 누르면 화면을 키운 채 돌아오지 않는다. 창 안의 칸(`.field` 밖에 놓인
   구성원 추가·자산 검색 등)도 함께 묶는다. */
@media (max-width: 720px) {
  .field input, .field select, .field textarea,
  .modal input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  .modal select, .modal textarea, .modal-row select { font-size: 16px; }
}

/* ── 구성원 칩 ─────────────────────────────────────────── */
.chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 0; }
.chips-label { font-size: 12px; color: var(--text-3); margin-right: 2px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px 0 4px; border-radius: 14px;
  font-size: 13px; color: #fff; background: var(--chip, var(--text-3));
  opacity: .5; transition: opacity .12s, box-shadow .12s;
}
.chip:hover { opacity: .8; }
.chip[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--chip); }
.chip-dot {
  width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.3);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}

/* 도구 설명 줄 */
.panel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; }
.panel-head h2 { font-size: 15px; font-weight: 600; margin: 0; }
.panel-head .hint { font-size: 13px; color: var(--text-3); flex: 1; min-width: 200px; }

/* ── 대화상자 보강 ─────────────────────────────────────────── */
.dlg-error:empty { display: none; }
.dlg-error {
  font-size: 13px; color: var(--danger); padding: 6px 8px; margin-top: 2px;
  background: rgba(235, 87, 87, .08); border-radius: var(--radius);
}
.field-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }
/* 나란히 놓는 버튼 줄 (관리자 «구성원 추가 · 일괄 추가»). */
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.btn.danger { color: var(--danger); margin-right: auto; }
.btn.danger:hover { background: rgba(235, 87, 87, .1); }
.btn.danger-solid { background: var(--danger); color: #fff; box-shadow: none; }
.btn.danger-solid:hover { background: #d64545; }

/* ── 프로젝트 카드 ─────────────────────────────────────────── */

/* ── 모바일 사이드바 ────────────────────────────────────────
   사이드바가 상단바를 덮어 ☰ 를 다시 누를 수 없던 문제 —
   사이드바 안 닫기 버튼과, 옆 여백을 눌러 닫는 스크림을 둔다. */
.sidebar-close { display: none; }
.sidebar-scrim { display: none; }
@media (max-width: 720px) {
  .sidebar { width: min(78vw, var(--sidebar-w)); flex-basis: auto; }
  /* 폭 조절은 숨긴다 — 여기서는 사이드바가 화면을 통째로 덮으므로 뜻이 없다. */
  .sidebar-resize { display: none; }
  .sidebar-close {
    display: grid; place-items: center;
    position: absolute; top: 6px; right: 6px; z-index: 1;
    width: 30px; height: 30px; border-radius: var(--radius);
    font-size: 15px; color: var(--text-2); background: var(--bg-sidebar);
  }
  .sidebar-close:hover { background: var(--bg-hover); }
  /* 닫기 단추 자리를 비운다 — 오른쪽 6px + 단추 + 틈 6px. 단추는 보이기엔 30px 지만
     아래 «손가락이 닿을 만한 크기» 규칙이 44px 로 넓힌다. 예전 42px(=30+12) 로 두었더니
     넓어진 ✕ 가 알림 종을 8px 덮어, 빨간 배지 오른쪽이 잘리고 그 자리를 누르면
     사이드바가 닫혔다. */
  .sidebar-head { padding-right: calc(6px + 44px + 6px); }
  .sidebar-scrim[hidden] { display: none; }
  .sidebar-scrim {
    display: block; position: fixed; inset: 0; z-index: 87;
    background: rgba(15, 15, 15, .35);
  }
}
.nav-empty { font-size: 13px; color: var(--text-3); padding: 4px 8px 8px; }

/* ── 알림 토스트 ───────────────────────────────────────────── */
.toast-box {
  position: fixed; right: 16px; bottom: 16px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px; max-width: min(90vw, 320px);
}
.toast {
  text-align: left; padding: 10px 12px; border-radius: var(--radius-lg);
  background: #2f3437; color: #fff; box-shadow: var(--shadow-md);
}
.toast .t { font-size: 12px; opacity: .75; }
.toast .b { font-size: 14px; font-weight: 600; margin: 2px 0; }
.toast .s { font-size: 12px; opacity: .75; }

/* ── 전역 검색 팔레트 (상단바에서 어느 화면에서든 열린다) ── */
.search-box {
  position: fixed; inset: 0; z-index: 90; background: var(--bg-overlay);
  display: grid; place-items: start center; padding: 12dvh 20px 20px;
}
.search-panel {
  width: 100%; max-width: 560px; background: var(--bg);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.search-panel input {
  width: 100%; height: 48px; padding: 0 16px; border: 0;
  border-bottom: 1px solid var(--border); outline: none; font-size: 15px;
  background: var(--bg);
}
.search-results { max-height: 52dvh; overflow-y: auto; padding: 6px; }
.search-hit {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  border-radius: var(--radius);
}
.search-hit:hover, .search-hit[aria-selected="true"] { background: var(--bg-hover); }
.search-hit .t { font-size: 14px; font-weight: 500; }
.search-hit .s { font-size: 12.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 어느 대시보드의 글인지 — 제목만으로는 갈리지 않을 때가 있다. */
.search-hit .w { margin-top: 2px; font-size: 11.5px; color: var(--text-3); opacity: .8; }

/* ── 프로젝트 상단 정보 (콜아웃과 같은 결) ──────────────────── */
.pj-panel {
  background: var(--bg-callout); border-radius: var(--radius);
  box-shadow: inset 0 0 0 0px var(--border);
  padding: 16px 18px 18px; margin: 22px 0 30px;
}
/* 콜아웃처럼 전구가 맨 위에 놓이고 그 아래로 목표·기한·참여자가 이어진다. */
.pj-bulb { font-size: 20px; line-height: 1; margin-bottom: 10px; }
.pj-body { min-width: 0; }
.pj-row { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0; }
.pj-label {
  flex: 0 0 52px; font-size: 12.5px; font-weight: 600; color: var(--text-3);
  padding-top: 3px;
}
.pj-goal { flex: 1; min-width: 0; font-size: 14.5px; outline: none; padding: 2px 0; }
/* 목표와 기타사항은 이 패널의 알맹이다 — 같은 굵기로 맞춘다. */
.pj-goal, .pj-notes { font-weight: 600; }
.pj-goal[data-empty="true"]::before,
.pj-notes[data-empty="true"]::before {
  content: attr(data-placeholder); color: var(--text-3); font-weight: 400;
}

.pj-due-btn {
  font-size: 14px; color: var(--text-3); padding: 2px 6px; margin-left: -6px;
  border-radius: var(--radius); text-align: left;
}
.pj-due-btn:hover:not(:disabled) { background: var(--bg-hover); }
.pj-due-btn:disabled { cursor: default; }
.pj-due-btn.set { color: var(--text); font-weight: 500; }

.pj-members { flex: 1; min-width: 0; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.empty-inline { font-size: 13px; color: var(--text-3); padding: 3px 0; }
.pm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px 0 3px; border-radius: 13px;
  font-size: 13px; background: var(--bg); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.pm-chip:hover:not(:disabled) { background: var(--bg-hover); }
.pm-chip:disabled { cursor: default; }
.pm-chip.ext { border: 1px dashed var(--border-strong); box-shadow: none; }
.pm-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px;
  background: var(--chip); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.pm-chip.ext .pm-dot {
  background: transparent; color: var(--text-2);
  box-shadow: inset 0 0 0 1.4px var(--border-strong);
}
/* 이름은 접지 않는다. 좁은 카드에서 두 줄로 흐르면 칩이 세로로 부푼다
   (달력은 진작 이 규칙을 제 자리에 두고 있었다 — calendar.css). */
.pm-name { font-weight: 500; white-space: nowrap; }
.pm-org { color: var(--text-3); font-size: 12px; }
.pm-role { color: var(--text-3); font-size: 12px; }
.pm-lock { font-size: 10px; opacity: .6; }
.pj-actions { display: flex; gap: 10px; margin-top: 8px; }
/* 기타사항의 링크는 **한 줄로 자른다.** 긴 주소(특히 퍼센트 인코딩된 한글 주소)가
   폰에서 예닐곱 줄을 먹어 패널이 주소로 뒤덮였다 (2026-10-15 실측, 390px).
   보이는 글자는 project_panel.js 의 `prettyUrl` 이 풀어 둔 것이고, `href` 와
   `title` 은 통째 주소 그대로다. inline-block 이라 앞에 글이 있으면 다음 줄로
   넘어가 거기서 잘린다 — 글 사이에 끼어도 줄을 찢지 않는다. */
.pj-notes .pj-note a {
  display: inline-block; max-width: 100%; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.link-btn { font-size: 12.5px; color: var(--text-blue); padding: 2px 0; }
.link-btn:hover { text-decoration: underline; }

/* ── 프로젝트 TODO 섹션 ────────────────────────────────────── */
.td-section { margin: 0 0 26px; }
.td-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.td-head h2 {
  font-size: 24px; font-weight: 700; margin: 0; color: var(--heading2); flex: 1;
}
.td-head .link-btn[hidden] { display: none; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }

/* 층 — 들여쓰기 **와 세로 안내선**. 예전에는 22px 만 밀어 두었는데, 하위 항목이
   맨 위 항목과 거의 구별되지 않았다 (실측: 왼쪽 끝이 336px vs 358px). 눈금 하나로는
   «이것이 저것의 하위» 라는 말을 못 한다 — 선을 그어 묶는다. */
.td-item { padding-left: calc(var(--depth) * 26px); }
.td-item.sub { position: relative; }
.td-item.sub::before {
  content: ''; position: absolute; left: 11px; top: 0; bottom: 0;
  border-left: 1.5px solid var(--border);
}
.td-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-radius: var(--radius); }
.td-row:hover { background: var(--bg-hover); }
/* 할 일 체크박스. **편집기가 아니라 할 일의 것이다** — 예전에는 블록 편집기의
   `.blk-check` 를 함께 썼는데, 그 편집기를 걷어 내면서 모양이 통째로 사라졌다
   (2026-09-11 «체크박스가 깨졌다»). 이제 제 이름으로 제 자리에 둔다. */
.td-check {
  width: 16px; height: 16px; border-radius: 3px; flex: 0 0 16px;
  border: 1.4px solid var(--text-2); background: transparent;
  display: grid; place-items: center; cursor: pointer;
}
.td-check[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.td-check svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 2.4;
  fill: none; opacity: 0; }
.td-check[aria-checked="true"] svg { opacity: 1; }
.td-check:disabled { cursor: default; opacity: .6; }

/* 뜨는 목록에서 «결과 없음» 한 줄 (멘션·이모지 고르개가 함께 쓴다). */
.slash-empty { padding: 10px 8px; color: var(--text-3); font-size: 13px; }
.td-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; text-align: left; }
.td-text:disabled { cursor: default; }
.td-text .txt { flex: 1; min-width: 0; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 담당 칩·기한·하위 수는 DOM 에서 `.td-meta` 한 덩이다 — 폰에서 글 아래 한 줄로
   모으려고 그렇게 묶었다 (todo_section.js 의 `row`). 넓은 화면에서는 덩이를 풀어
   예전 한 줄 차례 [⠿][☐][칩] 글 … 기한 하위수 [도구] 로 되돌린다. */
.td-meta { display: contents; }
.td-row > .td-grip, .td-row > .td-check { order: -2; }
.td-meta > .td-who { order: -1; }
.td-meta .due { font-size: 12px; color: var(--text-2); white-space: nowrap;
  font-variant-numeric: tabular-nums; padding: 0; }
.td-meta .due:disabled { cursor: default; }
.td-meta .due.none { color: var(--text-3); }
.td-row.done .txt { color: var(--text-3); text-decoration: line-through; }
.td-count { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.td-count:empty { display: none; }
/* **넓은 화면에서는 오른쪽 셋(기한 · 하위 수 · 도구)을 고정 폭 칸으로.** 폭이 줄마다
   달랐다 — 도구가 줄에 따라 둘(＋✕ · ⇤✕)이거나 셋(⇥＋✕)이고 하위 수는 있다가 없다가
   해서, 기한의 오른쪽 끝이 들쭉날쭉했다 (하위 줄과 맨 위 줄이 특히 어긋나 보였다). */
@media (min-width: 721px) {
  .td-meta .due { min-width: 96px; text-align: right; }
  .td-count, .td-count:empty { display: inline-block; min-width: 28px; text-align: right; }
  .td-row:not(.draft) > .td-tools { width: 70px; justify-content: flex-end; }
}
/* 폰 전용 ⋯ 와 도구 이름 — 넓은 화면은 기호 단추를 줄 끝에 그대로 둔다. */
.td-kebab, .td-tool .lbl { display: none; }

/* ── 멘션 ──────────────────────────────────────────────────── */
/* 사람 칩은 pm-chip 하나로 통일 — 멘션도 같은 것을 쓴다. */
.mention-menu {
  position: absolute; z-index: 60; width: 240px; max-height: 260px; overflow-y: auto;
  background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 6px;
}
.mention-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 6px 8px; border-radius: var(--radius); text-align: left; font-size: 14px;
}
.mention-item[aria-selected="true"], .mention-item:hover { background: var(--bg-hover); }
.mention-item .un { font-size: 12px; color: var(--text-3); }

/* ── 프로젝트 카드 (수정일 대신 기한·참여자 풀네임) ─────────── */
.card-line { display: flex; gap: 8px; font-size: 12.5px; margin-top: 4px; }
.card-line .k { flex: 0 0 40px; color: var(--text-3); }
.card-line .v { flex: 1; min-width: 0; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-line .v.none { color: var(--text-3); }

/* ── TODO 줄에서 바로 입력 ─────────────────────────────────── */
.td-addrow {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 7px 2px; border-radius: var(--radius);
  font-size: 14px; color: var(--text-3); text-align: left;
}
.td-addrow:hover { background: var(--bg-hover); color: var(--text-2); }
.td-row.draft { background: var(--bg-callout); box-shadow: inset 0 0 0 1px var(--border); }
.td-fields { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; }
.td-in {
  height: 28px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); padding: 0 8px; outline: none; font-size: 14px;
}
.td-in:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(35,131,226,.18); }
.td-in.text { flex: 1; min-width: 0; }
.td-in.date { flex: 0 0 140px; font-size: 12.5px; }
.td-in.time { flex: 0 0 96px; font-size: 12.5px; }
.td-tools { display: flex; gap: 2px; flex: 0 0 auto; opacity: 0; transition: opacity .12s; }
.td-row:hover .td-tools, .td-row.draft .td-tools, .td-tools:focus-within { opacity: 1; }
.td-tool {
  width: 22px; height: 22px; border-radius: var(--radius); color: var(--text-3);
  display: grid; place-items: center; font-size: 13px;
}
.td-tool:hover { background: var(--bg-active); color: var(--text); }
.td-tool.danger:hover { background: rgba(235,87,87,.12); color: var(--danger); }
.td-more { padding: 6px 2px; }
.td-list { margin-bottom: 2px; }

@media (max-width: 720px) {
  .td-fields { flex-wrap: wrap; }
  .td-in.text { flex: 1 0 100%; }

  /* ── 폰의 할 일 한 줄 ─────────────────────────────────────────────
     글이 **제 줄을 통째로** 갖는다. 한 줄에 손잡이·체크·칩·기한·도구 넷을 다
     늘어놓았더니 390px 에서 글 자리가 0 에 가까워 «Jail…» 만 남았고, 하위 항목은
     칩과 기한뿐이었다 (2026-10-15 실측). 이제:
        [⠿][☐] 글 (세 줄까지 흐른다)              [⋯]
                칩 · 기한 · 하위 수
                [⇥ 들여쓰기][＋ 하위 항목][✕ 삭제]   ← ⋯ 를 눌렀을 때만
     ⠿ 는 남긴다 — reorder.js 가 손잡이를 잡은 손가락 끌기를 받는다(touch-action:none).
     대신 손가락이 닿을 만큼 세로로 길게 준다. */
  .td-item { padding-left: calc(var(--depth) * 16px); }
  .td-item.sub::before { left: 9px; }
  .td-list .td-row:not(.draft) {
    display: grid; align-items: start;
    grid-template-columns: 20px 18px minmax(0, 1fr) 36px;
    grid-template-areas:
      "grip check text  kebab"
      "grip check meta  kebab"
      ".    .     tools tools";
    column-gap: 8px; row-gap: 2px; padding: 7px 0 7px 2px;
  }
  /* 읽기만 하는 사람에게는 손잡이·⋯ 가 없다 — 빈 칸 몫의 여백을 걷는다. */
  .td-list .td-row:not(.draft):not(:has(> .td-grip)) {
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-areas: "check text" "check meta";
  }
  .td-list .td-row > .td-grip {
    grid-area: grip; align-self: stretch; min-height: 36px; margin: -7px 0;
    display: flex; justify-content: center; padding-top: 10px; font-size: 13px;
  }
  .td-list .td-row > .td-check { grid-area: check; margin-top: 3px; }
  .td-list .td-row > .td-text { grid-area: text; display: block; padding: 0; }
  .td-list .td-row > .td-text .txt {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    white-space: normal; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45;
  }
  .td-list .td-meta {
    grid-area: meta; display: flex; flex-wrap: wrap; align-items: center;
    gap: 2px 8px; min-width: 0;
  }
  .td-list .td-meta:empty { display: none; }
  .td-list .td-meta .td-who { max-width: none; margin-left: -2px; }
  .td-list .td-meta .due { font-size: 12.5px; min-height: 24px; }
  /* «기한 없음» 은 폰에서 접는다 — 줄마다 같은 말이 붙으면 칩·기한 줄이 시끄럽다. */
  .td-list .td-meta .due.none { display: none; }
  .td-list .td-kebab {
    grid-area: kebab; display: grid; place-items: center;
    width: 36px; height: 36px; margin: -7px 0 -7px; border-radius: var(--radius);
    color: var(--text-3); font-size: 18px; line-height: 1;
  }
  .td-list .td-row.tools-open .td-kebab { background: var(--bg-active); color: var(--text); }
  .td-list .td-row:not(.draft) > .td-tools {
    grid-area: tools; display: none; flex-wrap: wrap; gap: 6px;
    opacity: 1; padding: 6px 0 2px;
  }
  .td-list .td-row.tools-open > .td-tools { display: flex; }
  .td-list .td-row:not(.draft) .td-tool {
    width: auto; min-width: 0; height: 36px; min-height: 36px; padding: 0 12px;
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--border-strong); border-radius: 18px;
    background: var(--bg); color: var(--text-2); font-size: 13px;
  }
  .td-list .td-row:not(.draft) .td-tool .lbl { display: inline; }
  .td-list .td-row:not(.draft) .td-tool.danger { color: var(--danger); }
  /* 맨 아래 추가 칸의 ☐ 를 위 줄들의 ☐ 와 한 세로줄에 — 손잡이 칸(20)+틈(8) 만큼. */
  .td-list > .td-row.draft.new { padding-left: 30px; }
}
/* 손가락으로 누른 줄에 `:hover` 회색이 **눌러앉는다** (다른 데를 누를 때까지 남는다).
   손가락 기기에서는 줄 hover 를 끈다 — 펼친 도구 줄이 어느 줄 것인지 헷갈린다. */
@media (hover: none) {
  .td-row:not(.draft):hover { background: transparent; }
}

/* ── 미팅 노트 박스 ────────────────────────────────────────── */
.mn-section { margin: 26px 0 0; }
.mn-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
/* **`overflow: hidden` 을 두지 않는다.** 예전에는 두었는데, 그러면 편집기가
   상자 밖으로 내놓는 것들이 통째로 잘렸다 — 왼쪽 손잡이, `/` 메뉴, 서식 툴바.
   `@` 창은 화면 기준으로 놓도록 따로 고쳤지만(editor/src/inline/mention.jsx) 나머지는
   여전히 상자를 경계로 삼는다. 둥근 모서리는 머리글이 제 것으로 갖는다. */
.mn-box {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg);
}
.mn-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; cursor: pointer; background: var(--bg-callout);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
/* 접혀 있으면 머리글이 상자의 전부다 — 네 귀를 모두 둥글게. */
.mn-box[data-open="false"] .mn-head { border-radius: calc(var(--radius-lg) - 1px); }
.mn-head:hover { background: var(--bg-subtle); }
/* 머리글에서 **눌러서 펴는 자리**다. 제목이 `flex: 1` 로 남은 너비를 다 먹고
   제 클릭을 삼키므로(글자를 고르려는 것이지 접으려는 것이 아니다), 실제로 펼 수
   있는 곳은 여기뿐이다 — 손가락이 닿을 만큼은 되어야 한다. */
.mn-toggle {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--text-2);
}
.mn-toggle:hover { background: var(--bg-active); color: var(--text); }
.mn-toggle svg { width: 11px; height: 11px; fill: currentColor;
  transition: transform .12s ease; transform: rotate(-90deg); }
.mn-box[data-open="true"] .mn-toggle svg { transform: rotate(0deg); }
.mn-date {
  flex: 0 0 auto; height: 22px; padding: 0 8px; border-radius: 11px;
  font-size: 12px; color: var(--text-2); background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mn-date:hover:not(:disabled) { background: var(--bg-active); }
.mn-date:disabled { cursor: inherit; }
.mn-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; outline: none; }
.mn-title[data-empty="true"]::before { content: attr(data-placeholder); color: var(--text-3); }
.mn-del, .mn-zoom, .mn-note {
  width: 24px; height: 24px; border-radius: var(--radius); color: var(--text-3);
  display: grid; place-items: center; opacity: 0; transition: opacity .12s;
  flex: 0 0 24px; font-size: 13px;
}
.mn-box:hover .mn-del, .mn-box:hover .mn-zoom, .mn-box:hover .mn-note,
.mn-box.zoomed .mn-zoom, .mn-box.zoomed .mn-note { opacity: 1; }
.mn-note:hover { background: var(--bg-active); }
.mn-del:hover { background: rgba(235,87,87,.12); color: var(--danger); }
.mn-zoom:hover { background: var(--bg-active); color: var(--text); }
/* 왼쪽 여백은 편집기의 왼쪽 손잡이 폭보다 넉넉해야 한다 — 모자라면 카드 밖으로
   나가 잘린다 (.mn-box 가 overflow:hidden 이라 그대로 사라진다). */
.mn-body { padding: 10px 14px 14px 54px; }
.mn-box[data-open="false"] .mn-body { display: none; }

/* 크게 보기 — 노드는 제자리에 두고 화면 가운데로 띄운다 (에디터가 이 DOM 에 매여 있다). */
/* 크게 본 회의록 뒤를 덮는다. 화면 전체를 쓰므로 보이지는 않지만, 뒤 화면이
   실수로 눌리는 것을 막는다. */
.mn-backdrop { position: fixed; inset: 0; z-index: 80; background: var(--bg); }
/* 붙은 개인 노트 자리는 비워 둔다 — 회의록을 크게 띄우고 옆에 노트를 붙여 쓰는 자리다. */
.mn-backdrop, .mn-box.zoomed {
  inset: var(--dock-top, 0px) var(--dock-right, 0px) var(--dock-bottom, 0px) var(--dock-left, 0px) !important;
}
.mn-box.zoomed { width: auto !important; height: auto !important; }
/* 크게 보기는 화면 전체를 쓴다 — 회의록만 남기고 나머지는 덮는다. */
.mn-box.zoomed {
  position: fixed; z-index: 81; inset: 0;
  width: 100%; height: 100%; max-width: none;
  border: none; border-radius: 0;
  display: flex; flex-direction: column; overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.mn-box.zoomed .mn-head { padding: 14px 20px; }
.mn-box.zoomed .mn-title { font-size: 19px; }
/* 확대·삭제 단추는 크게 본 동안 늘 보인다 (마우스를 올리지 않아도). */
.mn-box.zoomed .mn-zoom, .mn-box.zoomed .mn-del { opacity: 1; }
/* 크게 볼 때는 여백을 넓히고 글줄 길이를 제한한다. 글자 크기는 다른 자리와 같다
   (예전의 15.5px 는 편집기의 16px 에 눌려 실제로 먹지도 않았다). */
.mn-box.zoomed .mn-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 20px 24px 60px;
}
.mn-box.zoomed .mn-body > * { max-width: 900px; margin-inline: auto; }

/* ── 폰의 미팅 노트 머리 ─────────────────────────────────────────────
   ⤢ 와 🗑 가 24px 칸에 13px 로 옅게 앉아 있어 손가락으로 짚기도, 눈으로 찾기도
   어려웠다. 36px 칸에 글자를 키우고 늘 보이게 둔다. `.mn-head` 를 앞에 붙여
   손가락 기기 규칙(`@media (hover: none)` 의 44px)보다 앞서게 한다 — 44px 둘이면
   좁은 폰에서 제목 자리가 너무 줄어든다. */
@media (max-width: 720px) {
  .mn-head { gap: 6px; padding: 6px 6px 6px 8px; }
  .mn-head .mn-toggle { width: 32px; height: 32px; flex-basis: 32px; }
  .mn-head .mn-del, .mn-head .mn-zoom, .mn-head .mn-note {
    width: 36px; height: 36px; min-width: 36px; min-height: 36px; flex: 0 0 36px;
    opacity: 1; color: var(--text-2); font-size: 17px;
  }
  /* ⤢ 는 글꼴이 작게 그리는 글자라 🗑 와 같은 크기로 보이려면 한참 키워야 한다. */
  .mn-head .mn-zoom { font-size: 23px; color: var(--text); }
  .mn-head .mn-date { padding: 0 7px; }
  .mn-title { font-size: 14.5px; line-height: 1.35; }
  /* 제목줄의 ＋ 도 손가락 과녁만큼 — 옆의 목록|달력 토글과 높이를 맞춘다. */
  .mn-titlebar { gap: 8px; }
  .mn-titlebar .td-plus { height: 40px; min-width: 44px; font-size: 18px; }
  .mn-titlebar h2 { font-size: 22px; }
}

/* ── 이모지 고르개 ─────────────────────────────────────────── */
/* 제목 앞 아이콘 */
.title-row { display: flex; align-items: center; gap: 10px; margin-top: 40px; }
.title-row .page-title { margin: 0; flex: 1; min-width: 0; }
.title-icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--radius-lg);
  font-size: 34px; line-height: 1; display: grid; place-items: center;
}
.title-icon:hover:not(:disabled) { background: var(--bg-hover); }
.title-icon:disabled { cursor: default; }
@media (max-width: 720px) {
  .title-row { margin-top: 24px; gap: 8px; }
  .title-icon { width: 36px; height: 36px; font-size: 26px; }
}
.emoji-picker {
  position: absolute; z-index: 120; width: 320px; max-height: 320px;
  display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.emoji-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--border); }
.emoji-head input {
  flex: 1; height: 30px; padding: 0 8px; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg-subtle); outline: none;
}
.emoji-head input:focus { border-color: var(--accent); background: var(--bg); }
.emoji-grid { overflow-y: auto; padding: 6px 8px 10px; }
.emoji-group { font-size: 11.5px; font-weight: 600; color: var(--text-3);
  padding: 8px 2px 4px; }
.emoji-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.emoji-btn {
  aspect-ratio: 1; border-radius: var(--radius); font-size: 18px; line-height: 1;
  display: grid; place-items: center;
}
.emoji-btn:hover { background: var(--bg-hover); }

/* ── 프로젝트 카드 메뉴 · 완료 보관 ─────────────────────────── */
.card-grid {
  display: grid; gap: 12px; margin-top: 6px;
  /* 한 장이 너무 옆으로 퍼지지 않게 — 넓은 화면에서는 여러 장이 나란히 선다. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
  justify-content: start;
}
@media (max-width: 620px) {
  .card-grid { grid-template-columns: 1fr; }
}
.proj-card { position: relative; padding: 16px 16px 14px; }
.proj-card .card-title { align-items: flex-start; gap: 9px; margin-bottom: 10px;
  padding-right: 26px; }
.proj-card .card-icon { font-size: 22px; line-height: 1.1; }
.proj-card .card-name { font-size: 15.5px; font-weight: 600; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-line.members { align-items: flex-start; }
.card-line.members .pm-chips { flex: 1; min-width: 0; gap: 4px; }
.pm-chip.sm { height: 22px; padding: 0 8px 0 2px; font-size: 12px; cursor: default; }
.pm-chip.sm .pm-dot { width: 18px; height: 18px; flex-basis: 18px; font-size: 10px; }
.card-menu {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: var(--radius);
  color: var(--text-3); display: grid; place-items: center;
  font-size: 16px; line-height: 1; opacity: 0; transition: opacity .12s;
}
.card:hover .card-menu, .card-menu:focus { opacity: 1; }
.card-menu:hover { background: var(--bg-active); color: var(--text); }
.card-grid.done .proj-card { background: var(--bg-sidebar); }
.proj-card.done .card-title { color: var(--text-2); }

/* ── 공지 카드 ─────────────────────────────────────────────
   프로젝트 카드보다 담는 것이 적어(제목 · 누가 · 언제) 가로로 눕힌다.
   격자는 화면 폭을 다 쓴다 — 320px 상한을 두면 넓은 화면 오른쪽이 비어 보인다. */
.card-grid.notices { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.notice-card {
  display: flex; align-items: center; gap: 14px; min-height: 84px;
  padding: 16px 18px; transition: background .1s, box-shadow .15s, border-color .15s, transform .15s;
}
.notice-card:hover {
  border-color: var(--border-strong, var(--border));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06); transform: translateY(-1px);
}
.nc-icon {
  flex: 0 0 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; font-size: 25px; line-height: 1;
  background: var(--bg-sidebar);
}
.nc-body { flex: 1; min-width: 0; padding-right: 18px; }
.nc-title { display: flex; align-items: flex-start; gap: 6px; }
.nc-name {
  font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--text);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.nc-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: 12.5px; color: var(--text-3); white-space: nowrap;
}
@media (max-width: 620px) {
  .card-grid.notices { grid-template-columns: 1fr; gap: 10px; }
  .notice-card { min-height: 72px; padding: 13px 14px; }
  .nc-icon { flex-basis: 42px; height: 42px; font-size: 22px; }
}

/* ── 프로젝트 만들기 · 설정 화면 ────────────────────────────── */
.modal.pd { max-width: 520px; }
.pd-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.pd-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-lg);
  font-size: 26px; line-height: 1; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.pd-icon:hover { background: var(--bg-hover); }
.pd-title {
  flex: 1; min-width: 0; height: 40px; padding: 0 10px; font-size: 16px; font-weight: 600;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg-subtle); outline: none;
}
.pd-title:focus { border-color: var(--accent); background: var(--bg);
  box-shadow: 0 0 0 2px rgba(35,131,226,.2); }
/* 기한·미팅 줄 — **좁으면 접힌다.**
   미팅 줄은 요일·시작·종료 셋이라, 390px 짜리 폰에서 한 줄에 밀어 넣으면 `시간`
   고르개가 칸보다 넓어 오른쪽이 잘렸다 (분을 고를 수 없었다). 칸마다 최소 폭을
   주고 넘치면 다음 줄로 내린다. */
.pd-due { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-due > .field { flex: 1 1 120px; min-width: 120px; }
/* 미팅일시 줄 — 기한 줄 바로 아래에 붙여 한 덩어리로 읽히게 한다. */
.pd-meet { margin-top: 2px; }
.pd-meet-hint { margin-top: -4px; }

/* 사이드바 메뉴 순서 바꾸기 */
.nav-item .grip {
  margin-left: auto; color: var(--text-3); font-size: 12px; cursor: grab;
  opacity: 0; transition: opacity .12s;
  touch-action: none;
}
.nav-item:hover .grip { opacity: 1; }
.nav-item.dragging { opacity: .45; }

/* ── 알림함 ────────────────────────────────────────────────── */
.inbox-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.inbox-head h2 { flex: 1; margin: 0; }
.inbox-list { max-height: 56dvh; overflow-y: auto; margin: 0 -4px; }
/* 목록이 든 대화상자는 **목록만** 스크롤한다. 상자도 넘쳐 스크롤하면(80dvh) 가로 화면에서
   통이 둘 겹치고 «닫기» 가 아래로 잘렸다. 상자를 세로 줄로 두고 목록이 남는 자리를 쓴다. */
.modal:has(> .inbox-list), .modal:has(> .sw-list) {
  display: flex; flex-direction: column; overflow: hidden;
}
.modal > .inbox-list, .modal > .sw-list { flex: 1 1 auto; min-height: 0; max-height: none; }
.inbox-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 6px;
  border-radius: var(--radius); }
.inbox-row + .inbox-row { border-top: 1px solid var(--border); }
.inbox-row:hover { background: var(--bg-hover); }
.inbox-row .ico { flex: 0 0 20px; font-size: 15px; line-height: 1.5; }
.inbox-row .body { flex: 1; min-width: 0; text-align: left; display: block; }
.inbox-row .t { display: block; font-size: 14px; font-weight: 600; }
.inbox-row .b { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.inbox-row .w { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.inbox-row.read .t { font-weight: 500; color: var(--text-2); }
.inbox-row.read .ico { opacity: .45; }
.inbox-row .mark {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; color: var(--accent);
}
.inbox-row.read .mark { color: var(--text-3); }
.inbox-row .mark:hover { background: var(--bg-active); }

/* 모바일 안전영역 — 설치된 PWA 에서 노치·홈바에 가리지 않게.
   `index.html` 이 `viewport-fit=cover` 라 화면 끝까지 그린다 — 가려지는 자리는
   여기서 되돌려 받아야 한다. 떠 있는 것(모달·토스트·찾기)은 저마다 화면 끝에
   붙으므로 **하나하나** 적어 준다. */
@supports (padding: env(safe-area-inset-bottom)) {
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }
  .scroll { padding-bottom: env(safe-area-inset-bottom); }
  .trash-fab { bottom: calc(var(--fab-gap) + env(safe-area-inset-bottom)); }
  .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }

  .modal-backdrop {
    padding: calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right))
             calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  }
  .toast-box { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .search-box {
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  /* 가로로 눕히면 노치가 **옆**에 온다. 지금까지 좌우 인셋은 어디에도 없었다 —
     글이 노치에 물려 잘렸다. 본문과 상단바에 넣어 둔다. */
  .page { padding-left: calc(var(--content-pad) + env(safe-area-inset-left));
          padding-right: calc(var(--content-pad) + env(safe-area-inset-right)); }
  .topbar { padding-left: calc(12px + env(safe-area-inset-left));
            padding-right: calc(12px + env(safe-area-inset-right)); }
}

/* ── 상단바 동작 버튼 (설정 · 검색) ─────────────────────────── */
.btn.gear {
  height: 30px; padding: 0 11px; gap: 5px; font-size: 13.5px;
  color: var(--text-2);
}
.btn.gear:hover { background: var(--bg-hover); color: var(--text); }
@media (max-width: 720px) {
  .btn.gear { padding: 0 9px; }
  .btn.gear .txt { display: none; }
}

/* ── 접근권한 목록 ─────────────────────────────────────────── */
.perm-list { margin-top: 4px; }
.perm-section {
  font-size: 11.5px; font-weight: 700; color: var(--text-3); letter-spacing: .03em;
  padding: 12px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 2px;
}
.perm-section:first-child { padding-top: 2px; }
.perm-list .modal-row { padding: 6px 0; }
.perm-add { padding-top: 10px; }
.perm-add select { width: 100%; height: 32px; padding: 0 8px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); }

/* ── 줄 안의 세로 정렬 ───────────────────────────────────────
   칩은 inline-flex 라 baseline 정렬이면 글줄 아래로 처진다. 줄 자체를
   가운데 정렬로 두고, 글 속에 섞이는 칩만 vertical-align 으로 맞춘다. */
.ev-row, .cal-list-row, .modal-row, .td-row { align-items: center; }
.ev-row .t, .cal-list-row .t { line-height: 1.35; }
.td-text .pm-chip.sm, .todo-main .pm-chip.sm {
  vertical-align: middle; margin: 0 1px;
}
/* 역할 줄의 ＃ 칩 */
.pm-chip.sm.role .pm-dot { background: var(--bg-subtle); color: var(--text-3);
  box-shadow: inset 0 0 0 1px var(--border-strong); }
.modal-row .who { display: flex; align-items: center; gap: 8px; }
.modal-row .who small { display: inline; color: var(--text-3); font-size: 12px; }

/* ── 휴지통 ────────────────────────────────────────────────── */
.main { position: relative; }
/* 본문 영역의 오른쪽 아래 구석 — 사이드바를 침범하지 않는다. */
.trash-fab {
  position: absolute; right: var(--fab-gap); bottom: var(--fab-gap); z-index: 40;
  width: var(--fab-size); height: var(--fab-size); border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; line-height: 1;
  background: var(--bg); color: var(--text-2);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm);
  transition: background .12s, box-shadow .12s, transform .12s;
}
.trash-fab:hover { background: var(--bg-hover); color: var(--text); box-shadow: var(--shadow-md); }
.trash-fab:active { transform: scale(.95); }

.trash-list { max-height: 46dvh; overflow-y: auto; }
.trash-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.trash-row + .trash-row { border-top: 1px solid var(--border); }
.trash-row .ico { font-size: 17px; flex: 0 0 auto; }
.trash-row .who { flex: 1; min-width: 0; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-row .who small { display: block; font-size: 12px; color: var(--text-3); }
.trash-row .btn { height: 28px; padding: 0 10px; font-size: 13px; }
.trash-row .btn.danger { margin-right: 0; }

/* ── 대시보드 분류 줄 ──────────────────────────────────────── */
.board-bar { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; }
.board-bar .k { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.board-bar .seg { margin-left: 0; }

/* 카드 끌어 옮기기 */
.proj-card[draggable="true"] { cursor: grab; }
.proj-card.dragging { opacity: .45; }

/* ── 사이드바의 내 표식 ────────────────────────────────────
   이모지는 여기에서만 쓴다 — 사람 칩(pm-dot)은 어디서나 이름 첫 글자다.
   이모지 자체가 그림이라 바탕색을 깔면 지저분해진다. */
.me-mark {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: grid; place-items: center; font-size: 20px; line-height: 1;
}
/* 이모지가 없는 계정은 예전처럼 색 동그라미에 첫 글자 */
.me-mark.letter {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  background: var(--chip); color: #fff; font-size: 13px; font-weight: 600;
}
/* 이모지 고르기 버튼 (작은 크기) */
.pd-icon.sm { width: 30px; height: 30px; font-size: 17px; border-radius: var(--radius); }
.pd-icon.empty { color: var(--text-3); font-size: 15px; }

/* 표 안에서 바로 고치는 칸 (관리자 · 구성원 이름) */
.cell-input {
  width: 100%; min-width: 90px; height: 30px; padding: 0 8px;
  font: inherit; font-size: 14px; color: var(--text);
  background: none; border: 1px solid transparent; border-radius: var(--radius);
}
.cell-input:hover { border-color: var(--border); background: var(--bg); }
.cell-input:focus { border-color: var(--text-blue); background: var(--bg); outline: none; }
.cell-input.bad { border-color: var(--danger); color: var(--danger); }

/* 색 고르개 — 견본과 헥스 입력 (colorpick.js). 표 안에도, 폼 안에도 같은 모양으로. */
.cp { display: inline-flex; align-items: center; gap: 6px; }
.cp-swatch {
  width: 40px; height: 28px; padding: 2px; flex: 0 0 auto;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); cursor: pointer;
}
/* 대화상자의 «색 덮어쓰기» 줄 (colorpick.js 의 colorOverrideField) —
   시간표 칸과 달력 일정이 함께 쓴다. */
.color-override .co-row { display: flex; align-items: center; gap: 10px; }
.color-override .co-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.cp-hex {
  width: 84px; height: 28px; padding: 0 7px; flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  text-transform: lowercase;
}
.cp-hex:focus { border-color: var(--text-blue); outline: none; }
.cp-hex.bad { border-color: var(--danger); color: var(--danger); }
/* 폼 안(.field)에서는 입력칸이 한 줄을 다 쓰도록 되어 있다 — 고르개의 두 칸은
   제 크기를 지킨다. 안 그러면 견본이 줄 전체로 늘어나 색만 큼직하게 깔린다. */
.field .cp-swatch { width: 40px; height: 30px; }
.field .cp-hex { width: 92px; height: 30px; background: var(--bg); }

/* ── 글 안에서 찾기 ────────────────────────────────────────── */
/* Highlight API 로 칠한다 — 본문 DOM 은 건드리지 않는다. */
::highlight(find) { background: #ffe58a; color: var(--text); }
/* 찾기에서 지금 보고 있는 하나 (find.js 의 markCurrent). */
::highlight(find-current) { background: #ff9a3c; color: #1f1f1f; }

/* 검색 결과를 눌러 들어왔을 때 그 자리를 잠깐 알려 준다. */
@keyframes found-flash {
  0%   { background: color-mix(in srgb, var(--text-blue) 22%, transparent); }
  100% { background: transparent; }
}
.found-flash { animation: found-flash 1.8s ease-out; border-radius: var(--radius); }

/* 찾기 막대는 **오른쪽 위**, 상단바 바로 아래 — 찾는 동안 글이 막대 밑으로 지나간다.
   크게 띄운 회의록(81)·떠 있는 개인 노트(85)보다 위에 둔다. 예전에는 70 이라 회의록을
   크게 띄운 채 찾으면 막대가 회의록 뒤에 숨었다. */
.find-bar {
  position: fixed; z-index: 95;
  top: calc(var(--dock-top, 0px) + var(--topbar-h) + env(safe-area-inset-top) + 8px);
  right: calc(var(--dock-right, 0px) + 16px);
  /* 첨부에서 걸린 줄이 아래로 붙으므로 가로 한 줄이 아니라 감싸는 배치다. */
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 8px;
  /* 아이콘·입력칸·개수·↑↓✕ 를 더하면 387px 라 360 이면 ✕ 가 다음 줄로 떨어졌다. */
  max-width: min(400px, calc(100vw - 48px));
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.find-bar .ico { opacity: .6; font-size: 13px; }
.find-bar input {
  width: 200px; height: 30px; padding: 0 8px; font: inherit; font-size: 14px;
  border: none; background: none; color: var(--text); outline: none;
}
.find-bar .n:empty { min-width: 0; }   /* 빈 개수 칸이 입력칸 44px 를 먹었다 */
.find-bar .n {
  min-width: 44px; text-align: center; font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.find-bar .fb-nav {
  flex: 0 0 auto;                        /* 자리가 좁아도 찌그러지지 않는다 */
  width: 28px; height: 28px; border-radius: var(--radius);
  color: var(--text-2); font-size: 13px;
}
.find-bar .fb-nav:hover { background: var(--bg-hover); color: var(--text); }
/* 손가락으로는 28px 단추 셋이 붙어 있으면 옆을 누른다. */
@media (hover: none) { .find-bar .fb-nav { width: 40px; height: 40px; } }
@media (max-width: 640px) {
  .find-bar { left: 12px; right: 12px; flex-wrap: wrap; }
  /* 입력칸이 줄을 통째로 먹으면(width:100%) 🔍 만 첫 줄에 남고 세 줄이 됐다. 남는 폭만 쓴다. */
  .find-bar input { flex: 1 1 0; min-width: 0; width: auto; }
}

/* ── 변경 기록 ─────────────────────────────────────────────── */
.vh { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.vh > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2);
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.vh > summary::-webkit-details-marker { display: none; }
.vh > summary::before { content: '▸'; font-size: 11px; color: var(--text-3); }
.vh[open] > summary::before { content: '▾'; }
.vh-hint { font-weight: 400; font-size: 12px; color: var(--text-3); }
.vh-body { margin-top: 8px; }
.vh-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.vh-list { max-height: 300px; overflow-y: auto; }
.vh-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 12.5px;
}
.vh-row + .vh-row { border-top: 1px solid var(--border); }
.vh-row .when { flex: 0 0 auto; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vh-row .who { flex: 0 0 auto; display: flex; align-items: center; }
.vh-row .what { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-row .tag {
  flex: 0 0 auto; font-size: 11px; color: var(--text-3);
  background: var(--bg-subtle); border-radius: 9px; padding: 1px 7px;
}
.vh-row .note { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.vh-row .size { flex: 0 0 auto; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* 앞 기록보다 내용이 줄어든 지점 — 되돌릴 자리를 찾는 눈길이 여기 멈춰야 한다. */
.vh-row.shrunk .size b { color: var(--danger); }
/* 폰 — 한 줄에 다 세우면 «되돌리기» 가 창 밖으로 잘린다. 두 줄로 접는다:
   [언제 · 누가 · 무엇] / [크기 ……… 보기 · 되돌리기]. */
@media (max-width: 720px) {
  .vh-row { flex-wrap: wrap; row-gap: 0; }
  /* 줄 바꿈 자리 — 폭 100% 의 빈 조각을 «무엇» 다음에 끼워 둘째 줄을 연다. */
  .vh-row::after { content: ''; flex-basis: 100%; order: 1; }
  .vh-row .size, .vh-row > .link-btn { order: 2; }
  .vh-row .size { margin-right: auto; }
}
.vh-preview { max-height: 46dvh; overflow-y: auto; }
.vh-pv-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.vh-preview ul { margin: 4px 0 10px; padding-left: 18px; font-size: 13px; color: var(--text-2); }
.vh-preview li { margin: 2px 0; }

/* ── 백업 (관리자) ─────────────────────────────────────────── */
.bk-grid { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  font-size: 13px; margin-bottom: 10px; }
.bk-grid label { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.bk-grid input[type="number"] { width: 74px; height: 30px; padding: 0 8px;
  font: inherit; font-size: 13px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--bg); color: var(--text); }
.bk-state { font-size: 13px; color: var(--text-2); margin: 6px 0 10px; }
.bk-state.bad { color: var(--danger); }
.bk-log { max-height: 220px; overflow-y: auto; font-size: 12.5px; }
.bk-log-row { display: flex; gap: 10px; padding: 5px 2px; }
.bk-log-row + .bk-log-row { border-top: 1px solid var(--border); }
.bk-log-row .h { flex: 0 0 auto; font-family: var(--mono, monospace); color: var(--text-3); }
.bk-log-row .t { flex: 0 0 auto; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bk-log-row .s { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* 커밋 줄은 눌러서 그때 내용을 연다. */
button.bk-log-row { width: 100%; text-align: left; cursor: pointer;
  border-radius: var(--radius); }
button.bk-log-row:hover { background: var(--bg-hover); }

/* 전체 스냅샷 줄 — 오른쪽에 내려받기·복구·지우기가 붙는다. */
.bk-log-row.snap { align-items: center; }
.bk-log-row.snap .snap-acts { flex: 0 0 auto; display: flex; gap: 2px; }
.bk-log-row.snap .snap-acts > * {
  padding: 2px 6px; border-radius: var(--radius); line-height: 1.4;
  text-decoration: none; cursor: pointer;
}
.bk-log-row.snap .snap-acts > *:hover { background: var(--bg-hover); }
.bk-log-row.snap .snap-acts .danger { color: var(--danger, #d33); }

/* 커밋 안의 파일 목록 */
.bk-files { max-height: 200px; overflow-y: auto; margin-bottom: 8px; }
.bk-file {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 5px 8px; border-radius: var(--radius); font-size: 12.5px;
  color: var(--text-2); cursor: pointer;
}
.bk-file:hover { background: var(--bg-hover); color: var(--text); }
.bk-file .n { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bk-file .tag { flex: 0 0 auto; font-size: 11px; color: var(--text-3);
  background: var(--bg-subtle); border-radius: 9px; padding: 1px 7px; }
.bk-path { font-size: 12px; color: var(--text-3); word-break: break-all; }

/* ── git diff 보기 ─────────────────────────────────────────── */
.git-body {
  max-height: 46dvh; overflow: auto; margin: 8px 0 0;
  padding: 10px 12px; border-radius: var(--radius);
  background: var(--bg-subtle); border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
/* 무엇이 빠지고 들어왔는지 눈으로 갈리게 — 글자색만 바꾼다 (배경까지 칠하면 시끄럽다). */
.git-body .dl.add { color: #2f7d4f; }
.git-body .dl.del { color: var(--danger); }
.git-body .dl.hunk { color: var(--text-blue); }
.git-body .dl.meta { color: var(--text-3); }
/* 토글 묶음 — 달력형/목록형, 프로젝트 분류, diff 보기가 함께 쓴다. */
.seg { display: flex; gap: 2px; margin-left: auto; background: var(--bg-subtle);
  border-radius: var(--radius); padding: 2px; }
.seg-btn { height: 26px; padding: 0 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-2); }
.seg-btn[aria-pressed="true"] { background: var(--bg); color: var(--text);
  font-weight: 600; box-shadow: var(--shadow-sm); }
.vh-preview .seg { margin: 0 0 4px; }

/* 구역 머리글의 오른쪽 도구 묶음 (토글 + 더 보기) */
.section-title.row .head-tools { display: flex; align-items: center; gap: 10px; }
.section-title.row .head-tools .seg { margin-left: 0; }
/* 참석자를 접었을 때의 '외 N' */
.ev-row .who .more { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.ev-row .who { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }

@media (max-width: 640px) {
  .mn-body { padding: 10px 12px 16px; }
}

/* 구성원 차례 바꾸기 — 손잡이를 잡았을 때만 끌린다. 줄 전체를 끌게 두면 이름 칸의
   글자를 고르려다 줄이 딸려 온다. */
.tbl .grip-col {
  width: 26px; padding-right: 0; text-align: center; cursor: grab;
  color: var(--text-3); user-select: none;
  touch-action: none;
}
.tbl .grip-col:active { cursor: grabbing; }
.tbl tbody tr:hover .grip-col { color: var(--text-2); }
.tbl tbody tr.dragging { opacity: .45; background: var(--bg-hover); }

/* 로그인 기록 — 50줄이 그대로 늘어나면 그 아래 것들이 화면 밖으로 밀린다.
   머리줄은 붙여 두어야 굴리는 중에도 어느 칸인지 안다. */
.la-wrap { max-height: 320px; overflow-y: auto; }
.la-wrap thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg); box-shadow: inset 0 -1px 0 var(--border);
}

/* ── 계정 전환 ─────────────────────────────────────────────── */
.sw-list { max-height: 46dvh; overflow-y: auto; }
.sw-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 6px; border-radius: var(--radius); cursor: pointer;
}
.sw-row + .sw-row { border-top: 1px solid var(--border); }
.sw-row:hover { background: var(--bg-hover); }
.sw-row .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.sw-row .who small { color: var(--text-3); font-size: 12px; }
.sw-row .go { flex: 0 0 auto; font-size: 12.5px; color: var(--text-blue); }

/* 전환 중임을 알리는 띠 — 착각하고 글을 쓰지 않게 눈에 띄어야 한다. */
.imp-bar {
  /* 화면을 굴려도 남아 있어야 한다 — 이 띠가 원래 계정으로 돌아오는 유일한 길이다. */
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; font-size: 13px;
  background: #fff4e5; color: #7a4b00;
  border-bottom: 1px solid #f0d9b5;
}
.imp-bar .by { color: #9a6a20; font-size: 12px; }
.imp-bar .btn { margin-left: auto; height: 28px; padding: 0 12px; font-size: 12.5px; }
@media (prefers-color-scheme: dark) {
  .imp-bar { background: #3a2c14; color: #f0d9b5; border-bottom-color: #55411c; }
  .imp-bar .by { color: #c8a86a; }
}

/* ── 알림 켜기 ─────────────────────────────────────────────── */
/* 로그인하고 들어오면 가장 먼저 묻는다 — 건너뛸 수 있는 자리를 두지 않는다. */
.notify-gate .modal { max-width: 420px; text-align: center; }
.notify-gate .modal h2 { justify-content: center; }
.notify-gate .modal-actions { justify-content: center; }

/* 브라우저에서 차단해 둔 사람에게 남기는 띠 (켜는 것을 강제할 수는 없다). */
.notify-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; font-size: 13px;
  background: var(--bg-subtle); color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.notify-banner .how { color: var(--text-3); font-size: 12.5px; }
.notify-banner .btn { margin-left: auto; height: 26px; padding: 0 10px; font-size: 12px; }
/* 폰에서는 **한 줄.** 안내 두 줄 + 44px 단추가 120~140px 를 먹어, 계정 전환 띠와 겹치면
   화면의 3분의 1 이 띠였다. 푸는 법은 띠를 누르면 펴진다. */
@media (max-width: 720px) {
  .notify-banner { flex-wrap: nowrap; padding: 4px 6px 4px 12px; gap: 6px; font-size: 12.5px; }
  .notify-banner > span:first-child { flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notify-banner .how { display: none; }
  .notify-banner.open { flex-wrap: wrap; }
  .notify-banner.open > span:first-child { white-space: normal; }
  .notify-banner.open .how { display: block; flex-basis: 100%; order: 3; }
  .notify-banner .btn { min-height: 32px; height: 32px; min-width: 0; }
}

/* ── 파일 서랍 ───────────────────────────────────────────────────────
   왼쪽에 폴더, 오른쪽에 파일 — 탐색기·Finder 와 같은 배치다. */
.files-modal { max-width: 780px; }
.files-pane {
  display: grid; grid-template-columns: 190px 1fr; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; min-height: 260px; max-height: 52dvh;
}
.files-tree {
  display: flex; flex-direction: column; gap: 1px; padding: 6px;
  background: var(--bg-hover); overflow-y: auto;
}
.files-folder {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: var(--radius);
  background: none; text-align: left; cursor: pointer;
  font-size: 13px; color: var(--text-2);
}
.files-folder:hover { background: var(--bg); }
.files-folder.on { background: var(--bg); color: var(--text); font-weight: 600; }
.files-folder .nm { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.files-folder .n { flex: 0 0 auto; font-size: 11px; color: var(--text-3); }

.files-main { display: flex; flex-direction: column; min-width: 0; padding: 6px 8px 8px 0; }
.files-crumb {
  display: flex; align-items: baseline; gap: 8px; padding: 4px 2px 8px;
  border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600;
}
.files-crumb .when, .files-crumb .n {
  font-weight: 400; font-size: 11.5px; color: var(--text-3);
}
.files-crumb .n { margin-left: auto; }
.files-list { overflow-y: auto; padding-top: 4px; }
.files-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 4px;
  border-radius: var(--radius);
}
.files-row:hover { background: var(--bg-hover); }
.files-row + .files-row { border-top: 1px solid var(--border); }
.files-row .ic { flex: 0 0 auto; font-size: 17px; }
.files-row .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.files-row .nm a {
  color: var(--text); text-decoration: none; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.files-row .nm a:hover { text-decoration: underline; }
.files-row .meta { font-size: 11px; color: var(--text-3); }
.files-row .tag { flex: 0 0 auto; font-size: 11px; opacity: .5; }
.files-row .link-btn { flex: 0 0 auto; padding: 2px 6px; text-decoration: none; }

@media (max-width: 640px) {
  .files-pane { grid-template-columns: 1fr; max-height: 60dvh; }
  .files-tree { flex-direction: row; overflow-x: auto; }
  .files-folder { width: auto; white-space: nowrap; }
}

/* 서랍 안의 안내 — "안 붙은 파일" 같은 까닭을 적는 자리 */
.files-note {
  margin: 6px 2px 8px; padding: 7px 9px;
  background: var(--bg-hover); border-radius: var(--radius);
  font-size: 11.5px; line-height: 1.5; color: var(--text-3);
}

/* 프로젝트 패널의 기타사항 — 줄마다 하나, 주소는 링크로.
   고칠 때는 글자만 남으므로 `white-space: pre-wrap` 으로 줄바꿈을 지킨다. */
.pj-notes {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  font-size: 14.5px; line-height: 1.5; outline: none; padding: 2px 0;
  white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
}
.pj-notes[contenteditable="true"] { display: block; }
.pj-note { overflow-wrap: anywhere; }
.pj-note a { color: var(--link, #2f6fd0); text-decoration: none; font-weight: 500; }
.pj-note a:hover { text-decoration: underline; }
/* 설정 창의 기타 사항 칸 */
.pd-notes { min-height: 84px; resize: vertical; font-family: inherit; line-height: 1.5; }

/* 글 안에서 찾기 — 첨부 안에서 걸린 것 */
.find-files { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 6px; }
.find-files:empty { display: none; }
.find-files .ttl { font-size: 11px; color: var(--text-3); padding: 0 2px; }
.find-files .hit {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  padding: 4px 6px; border: 0; border-radius: var(--radius);
  background: var(--bg-hover); cursor: pointer; width: 100%;
}
.find-files .hit:hover { background: var(--border); }
.find-files .nm { font-size: 12px; color: var(--text); }
.find-files .why {
  font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 사람별 휴가 사용 — 달력 아래 요약 */
.vac { margin-top: 22px; }
.vac-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vac-head .section-title { margin: 0; }
.vac-nav { display: flex; align-items: center; gap: 2px; }
.vac-nav .y { font-size: 12.5px; color: var(--text-2); min-width: 56px; text-align: center; }
.vac-head .n { margin-left: auto; font-size: 12px; color: var(--text-3); }
.vac-list { display: flex; flex-direction: column; gap: 4px; }
.vac-row { display: flex; align-items: center; gap: 10px; padding: 3px 2px; }
.vac-row .bar {
  flex: 1; height: 7px; min-width: 60px; border-radius: 999px;
  background: var(--bg-hover); overflow: hidden;
}
.vac-row .bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent, #e63700); opacity: .55;
}
.vac-row .d {
  flex: 0 0 auto; font-size: 12.5px; color: var(--text-2);
  font-variant-numeric: tabular-nums; min-width: 34px; text-align: right;
}
.vac .field-hint { margin-top: 8px; }

/* ── 공유 (오른쪽 위 🔗) ─────────────────────────────────────────────
   화면마다 붙이지 않고 setView 가 늘 맨 오른쪽에 둔다 (js/sharelink.js). */
.share-panel {
  position: fixed; z-index: 130; width: 320px; box-sizing: border-box;
  padding: 12px; border-radius: var(--radius-lg);
  background: var(--bg); border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.share-title { font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.share-url {
  width: 100%; box-sizing: border-box; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-subtle); color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
}
.share-actions { display: flex; gap: 8px; margin-top: 10px; }
.share-actions .btn { flex: 1; justify-content: center; }
.share-hint { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-3); }

/* ── 관리자의 알림 표 ────────────────────────────────────────────────
   «무엇이 언제 누구에게» 가 한눈에 읽혀야 하므로 설명 칸을 넓게 둔다. */
.nt-tbl td, .nt-tbl th { vertical-align: top; }
.nt-tbl .nt-when, .nt-tbl .nt-who { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.nt-tbl .nt-ico { margin-right: 6px; }
.nt-tbl tr.dim td { opacity: .5; }
.nt-tbl .btn.off { color: var(--text-3); }
.nt-actions { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; flex-wrap: wrap; }
.section-sub { font-size: 12.5px; font-weight: 600; color: var(--text-3); margin: 16px 0 6px; }
/* 알림 종류 표의 아이콘은 글줄 안의 글자다. «내 정보 → 알림» 의 `.nt-ico` (34px 타일)
   규칙이 같은 이름이라 넘어와, 표 칸 안에 회색 타일이 서고 이름이 그 아래로 밀렸다. */
.nt-tbl .nt-ico { display: inline; flex: none; background: none; height: auto; font-size: inherit; }

/* ── 관리자 표 → 카드 (폰) ───────────────────────────────────────────
   400px 에 아홉 칸짜리 구성원 표를 세우면 «출퇴…» 에서 잘리고, 옆으로 밀면 어느
   사람의 줄인지 놓친다. 폰에서는 **줄 하나를 카드 한 장으로** 눕힌다.
   머리줄은 숨기고, 칸 이름은 admin.js 의 `cardify` 가 `data-label` 로 옮겨 둔 것을
   꺼내 쓴다. 넓은 화면은 표 그대로다. */
@media (max-width: 720px) {
  .tbl-wrap:has(> .tbl.cards), .tbl-wrap:has(> .mem-tbl) { overflow-x: visible; }
  table.tbl.cards, table.tbl.mem-tbl { display: block; min-width: 0; }
  .tbl.cards thead, .tbl.mem-tbl thead { display: none; }
  .tbl.cards tbody, .tbl.mem-tbl tbody { display: block; }
  .tbl.cards tr, .tbl.mem-tbl tr {
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 10px 12px; margin-bottom: 8px; background: var(--bg);
  }
  /* 표의 줄 hover 는 칸마다 칠하는 것이라 카드에서는 얼룩이 된다. */
  table.tbl.cards tr:hover td, table.tbl.mem-tbl tr:hover td { background: none; }

  /* 일반 카드 — 첫 칸이 제목, 나머지는 «이름 ……… 값» 한 줄씩. */
  .tbl.cards tr { display: block; position: relative; }
  table.tbl.cards td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 2px 0; border: 0; text-align: right;
    white-space: normal; overflow-wrap: anywhere;
  }
  .tbl.cards td[data-label]::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 12px; color: var(--text-3);
  }
  table.tbl.cards td:first-child {
    justify-content: flex-start; text-align: left; font-weight: 600; padding-bottom: 4px;
  }
  .tbl.cards td:first-child::before { content: none; }
  /* 머리 이름이 없는 칸(켬/끔·차단 해제 단추) — 카드 오른쪽 위, 제목 옆에 띄운다.
     맨 아래 제 줄에 두면 단추 하나 때문에 카드마다 한 줄씩 늘었다. */
  table.tbl.cards td:not([data-label]):not(:first-child) {
    position: absolute; top: 6px; right: 8px; padding: 0;
  }
  table.tbl.cards tr:has(> td:not([data-label]):not(:first-child)) > td:first-child {
    padding-right: 90px; min-height: 32px; align-items: center;
  }
  /* 알림 종류 — «언제·누구에게» 는 설명 글이라 이름 아래로 내려 왼쪽부터 읽힌다. */
  table.tbl.nt-tbl td.nt-when, table.tbl.nt-tbl td.nt-who {
    display: block; text-align: left; padding: 3px 0;
  }
  .tbl.nt-tbl td.nt-when::before, .tbl.nt-tbl td.nt-who::before {
    display: block; margin-bottom: 1px;
  }
  /* 굴리는 상자 안의 카드 — 머리줄이 없으니 붙여 둘 것도 없다. */
  .la-wrap { max-height: 420px; }

  /* 구성원 카드 — 끄는 손잡이는 왼쪽에 세로로 길게, 오른쪽은 네 줄:
       [이름 ………… @아이디]
       [역할 ▾] [출퇴근 관리 ☐]
       [이모지] [색 ■ #hex]
       [비밀번호 재설정 ……… 삭제] */
  .tbl.mem-tbl tr {
    display: grid; align-items: center; gap: 8px 10px;
    /* 이모지 칸(둘째 열)을 제 폭으로만 두고 역할 고르개가 셋째 열까지 걸치게 한다 —
       한 열을 같이 쓰면 이모지 옆이 고르개 폭만큼 비어 색 견본이 멀리 떨어졌다. */
    grid-template-columns: 28px auto auto 1fr auto;
    grid-template-areas:
      "grip name  name  name  id"
      "grip role  role  track track"
      "grip emoji color color color"
      "grip pw    pw    pw    del";
    padding: 10px 12px 10px 4px;
  }
  table.tbl.mem-tbl td { display: block; padding: 0; border: 0; min-width: 0; }
  .tbl.mem-tbl td.grip-col {
    grid-area: grip; align-self: stretch; display: grid; place-items: center;
    width: auto; min-width: 0; min-height: 0;    /* 세로로 긴 손잡이 — 닿는 자리는 충분하다 */
  }
  .tbl.mem-tbl .m-name  { grid-area: name; }
  .tbl.mem-tbl .m-name .cell-input { width: 100%; font-weight: 600; }
  .tbl.mem-tbl .m-id    { grid-area: id; font-size: 13px; color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
  .tbl.mem-tbl .m-role  { grid-area: role; }
  .tbl.mem-tbl .m-role select {
    height: 36px; padding: 0 8px; font-size: 16px; max-width: 100%;
    border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg);
  }
  .tbl.mem-tbl .m-emoji { grid-area: emoji; }
  .tbl.mem-tbl .m-color { grid-area: color; }
  .tbl.mem-tbl .m-pw    { grid-area: pw; }
  .tbl.mem-tbl .m-del   { grid-area: del; justify-self: end; }
  /* 체크박스·재설정 단추만으로는 무엇을 켜고 무엇을 바꾸는지 모른다 — 이름을 앞에. */
  .tbl.mem-tbl .m-track, .tbl.mem-tbl .m-pw {
    display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2);
  }
  .tbl.mem-tbl .m-track { grid-area: track; justify-self: start; }
  .tbl.mem-tbl .m-track::before, .tbl.mem-tbl .m-pw::before { content: attr(data-label); }
  .tbl.mem-tbl .m-track input { width: 20px; height: 20px; margin: 0; }
}

/* ── 할 일: 맨 아래 «＋ 할 일 추가» 줄 ──────────────────────────────
   적는 자리가 적히는 자리와 같아야 «다음 줄에 이어 적는» 손짐이 된다. */
.td-add {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border-radius: var(--radius);
  color: var(--text-3); font-size: 13.5px; text-align: left;
}
.td-add:hover { background: var(--bg-hover); color: var(--text-2); }
.td-add .plus { font-size: 15px; line-height: 1; width: 16px; text-align: center; }

/* 끌어서 차례 바꾸기 — 줄에 손을 얹을 때만 손잡이가 드러난다. */
/* `touch-action: none` 이 요점이다 — 이 자리에서 시작한 손가락질은 스크롤이 아니라
   끌기다. 주지 않으면 브라우저가 스크롤로 채 가며 `pointercancel` 을 보낸다. */
.td-row .td-grip {
  flex: 0 0 12px; cursor: grab; color: var(--text-3); font-size: 12px;
  opacity: 0; transition: opacity .12s ease; user-select: none;
  touch-action: none;
}
.td-row:hover .td-grip, .td-item.dragging .td-grip { opacity: 1; }
.td-item.dragging { opacity: .45; }

/* 끄는 동안 — 글자가 딸려 잡히지 않게, 그리고 커서가 «쥔 손» 으로. */
.reordering { user-select: none; cursor: grabbing; }

/* ── 손가락에는 hover 가 없다 ─────────────────────────────────────────
   지우기·차례·설정 단추를 `opacity: 0` 으로 숨겨 두고 `:hover` 로 꺼내는 자리가
   여럿이다. 마우스에서는 깔끔하지만 **폰에서는 그 단추들이 아예 없는 것과 같다** —
   할 일을 지울 수도, 끌어 옮길 수도, 카드 설정을 열 수도 없었다.

   `hover: none` 은 «이 기기에는 가리키기가 없다» 는 뜻이다 (폰·태블릿). 그럴 때는
   처음부터 보여 준다. 마우스가 달린 노트북은 지금 모습 그대로다. */
@media (hover: none) {
  .td-tools,
  .td-row .td-grip,          /* 바탕 규칙이 `.td-row .td-grip` 이라 여기서도 짝을 맞춘다 */
  .nav-item .grip,
  /* 아이콘 자리의 화살표는 hover 로 꺼내므로 손가락에는 영영 안 보인다.
     여기서는 처음부터 화살표로 둔다 — 누를 수 있는 자리임을 알려야 한다. */
  .nav-head .nav-ico .ico-caret,
  .card-menu,
  .mn-del,
  .mn-zoom { opacity: 1; }
  .nav-head .nav-ico .ico-mark { opacity: 0; }

  /* ── 손가락이 닿을 만한 크기 ──────────────────────────────────────
     마우스 커서는 1px 를 짚지만 손가락은 그러지 못한다. 이 앱의 단추는 거의 전부
     44px 에 못 미쳤다 (실측: `.icon-btn` 28 · `.btn` 32 · `.seg-btn` 26 ·
     `.td-tool` 22 · `.td-check` 16 · `.chip` 28). 달력의 ‹ › 가 28px 라 달을
     넘기려다 옆을 짚는 일이 잦았다.

     **보이는 크기는 그대로 두고 닿는 자리만 넓힌다.** 아이콘까지 44px 로 키우면
     화면이 단추로 뒤덮인다 — `min-height` 와 여백으로 늘리고, 아주 작은 것들은
     제 자리에서 비어져 나오지 않게 가상요소로 넓힌다. */
  .icon-btn, .btn, .seg-btn, .bell, .sidebar-close, .card-menu,
  .mn-del, .mn-zoom, .td-tool, .inbox-row .mark, .chip, .as-chip,
  .pd-icon, .title-icon, .link-btn, .tbl .grip-col {
    min-width: 44px; min-height: 44px;
  }
  /* 칩은 글자 길이만큼 넓어야 한다 — 가로는 풀어 준다. */
  .chip, .as-chip { min-width: 0; padding-top: 0; padding-bottom: 0; }

  /* **`.pm-chip` 은 여기 끼면 안 된다.** 거의 전부 누를 수 없는 라벨이다 —
     본문 속 `@멘션`, 목록의 «누구» 칸, 카드의 참여자 줄. 그런데 한동안 위 목록에
     들어 있었고, `min-height` 는 `height` 를 **이기므로** 22px 짜리 칩이 폰에서
     정확히 44px 이 되었다. 칩만 커진 것이 아니라 그 칩이 **글줄 안에** 앉아 있어서
     할 일 한 줄·미팅 본문 한 줄의 행간이 통째로 벌어졌다 (2026-09-30 ~ 10-14).

     진짜 단추인 자리는 둘뿐이다 (프로젝트 패널·설정 창의 참여자 칩). 그 둘만
     **보이는 크기는 그대로 두고 닿는 자리만** 넓힌다 — 아래 `.td-check` 와 같은 수법이다. */
  .pj-members .pm-chip, .pd .pm-chip { position: relative; }
  .pj-members .pm-chip::after, .pd .pm-chip::after {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 100%; height: 44px; transform: translateY(-50%);
  }
  /* 체크박스는 커지면 목록이 성기어진다 — 네모는 그대로 두고 **닿는 자리만** 넓힌다. */
  .td-check { position: relative; }
  .td-check::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* 프로젝트 접기 — 20px 아이콘이라 손가락으로 짚기 어렵다. 모양은 그대로 두고
     닿는 자리만 넓힌다 (위 체크박스와 같은 수법). */
  .nav-ico::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .link-btn { display: inline-flex; align-items: center; }

  /* ── iOS 가 글자를 키우지 않게 ────────────────────────────────────
     Safari 는 글꼴이 16px 보다 작은 입력칸에 커서를 넣으면 화면을 **확대한다**.
     한 번 확대되면 스스로 돌아오지 않아, 할 일 한 줄을 적고 나면 화면이 어긋난
     채로 남는다. 좁은 칸이라도 폰에서는 16px 로 둔다. */
  .td-in, .cell-input, .cp-hex, .am-table .cell-input,
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* ── 폰에서는 창을 아래에서 올린다 ──────────────────────────────────
   가운데에 뜬 창은 손가락에서 멀다. 폰에서 쓰는 앱들이 모두 아래에서 올리는 데는
   까닭이 있다 — 엄지가 닿는 자리가 화면 아래쪽이다. `modal.js` 는 `form.modal`
   하나짜리라 **CSS 만으로** 된다 (JS 는 손대지 않는다). */
@media (max-width: 720px) {
  .modal-backdrop { place-items: end stretch; padding: 0; }
  .modal, .modal.wide {
    max-width: none; width: 100%;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  /* 창 위에 잡을 자리를 그린다 — 여기가 «아래에서 올라온 것» 이라는 표시다. */
  .modal::before {
    content: ''; display: block; width: 36px; height: 4px; margin: 0 auto 12px;
    border-radius: 2px; background: var(--border-strong);
  }
  /* 파일 서랍처럼 제 너비를 갖던 창들도 같은 규칙을 따른다. */
  .files-modal, .as-dialog { max-width: none; }

  /* **확인 단추는 늘 보인다.** 칸이 많은 창(자산 등록)은 88dvh 를 넘어 안에서
     굴러가는데, 단추가 맨 아래에 붙어 있으면 다 내려야 «등록» 이 나온다 — 키보드가
     올라와 있으면 그마저 가려진다. 창 아래에 붙여 두고, 위로 지나가는 글이 비치지
     않게 바탕을 깐다. 아래 여백은 창의 padding-bottom 만큼 끌어내려 바닥에 닿게 한다. */
  .modal .modal-actions {
    position: sticky; z-index: 2;
    bottom: calc(-16px - env(safe-area-inset-bottom, 0px));
    margin: 14px -16px calc(-16px - env(safe-area-inset-bottom, 0px));
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border-top: 1px solid var(--border);
  }
  /* 엄지로 누르는 자리 — 취소·확인을 넓게 나눠 갖는다. 지우기(.danger)는 왼쪽 끝에
     작게 남겨 확인과 헛갈리지 않게 한다. */
  .modal .modal-actions .btn { height: 44px; justify-content: center; }
  .modal .modal-actions .btn:not(.danger) { flex: 1 1 0; max-width: 200px; }
}

/* ── 화면을 못 그렸을 때 (errorview.js) ──────────────────────────────
   빈 흰 화면 대신 «무슨 일인지 · 다시 해 보기 · 돌아갈 곳» 을 내놓는 자리. 본문
   한가운데에 두되 너무 크게 만들지 않는다 — 놀라게 할 일이 아니라 알려 줄 일이다. */
.err-view {
  max-width: 420px; margin: 56px auto; text-align: center; color: var(--text-2);
}
.err-view .err-mark { font-size: 34px; line-height: 1; }
.err-view h2 { margin: 12px 0 6px; font-size: 17px; color: var(--text); }
.err-view p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.err-acts { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.err-why { margin-top: 20px; text-align: left; }
.err-why summary { font-size: 12px; color: var(--text-3); cursor: pointer; }
.err-why pre {
  margin: 8px 0 0; padding: 10px; overflow: auto; max-height: 200px;
  background: var(--bg-subtle); border-radius: var(--radius);
  font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-all;
}
/* 껍데기조차 못 띄운 경우 — 붙일 자리가 body 밖에 없다. */
.boot-fail { padding: 8px; }

/* 눈에 걸려야 하는 안내 — 권한을 열어 주기 전에 읽어야 하는 한 줄 (서버관리). */
.hint.warn {
  border-left: 3px solid var(--warn); padding-left: 8px; color: var(--text-2);
}

/* ── 연결이 끊겼을 때 ──────────────────────────────────────── */
/* Service Worker 가 마지막 캐시를 돌려주는 동안 띄운다 (js/api.js).
   화면 위에 얹되 누르는 것을 막지는 않는다 — 읽기는 그대로 되니까. */
.offline-bar {
  position: fixed; z-index: 200; left: 0; right: 0;
  top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding: 7px 14px; text-align: center;
  font-size: 13px; color: #7a4b00;
  background: #fff4d6; border-bottom: 1px solid #f0d89a;
  pointer-events: none;
}

/* ── 미팅 노트 달력 (views/meeting_notes.js) ─────────────────────────
   격자는 일정 화면의 것을 그대로 빌려 쓴다 (`calendar.css` 의 `.cal-week`/`.cal-day`).
   여기서는 **미팅을 칸에 얹는 모양**만 정한다. 일정 막대(`.cal-bar`)와 달리 절대
   위치가 아니라 칸의 글 흐름에 놓는다 — 하루에 회의가 몇 개씩 겹칠 일이 없다. */
.mn-section .mn-cal { display: none; }
.mn-section[data-mode="calendar"] .mn-cal { display: block; }
.mn-section[data-mode="calendar"] .mn-list,
.mn-section[data-mode="calendar"] .td-addrow { display: none; }

.mn-cal { border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; }
.mn-cal .cal-week { min-height: 92px; }
.mn-cal .mn-pin {
  display: block; width: 100%; margin-top: 3px; padding: 2px 6px;
  border-radius: var(--radius-sm); background: var(--bg-callout);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 11.5px; line-height: 1.4; text-align: left; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mn-cal .mn-pin:hover { background: var(--bg-active); color: var(--text); }

/* 날짜 없는 미팅 — 달력에 놓을 자리가 없으니 아래에 모은다. */
.mn-undated {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px; border-top: 1px solid var(--border); background: var(--bg-subtle);
}
.mn-undated-label { font-size: 12px; color: var(--text-3); }
.mn-undated .mn-pin { width: auto; margin-top: 0; }

/* ── 할 일 — 늘 열린 추가 칸 · 기한 단추 · 담당자 (2026-10-14) ─────────── */
/* 추가 칸은 쉬는 동안 «한 줄 글칸» 처럼만 보인다. 누르면 기한·담당 칸이 펼쳐진다. */
.td-row.draft.new:not(:focus-within) { background: transparent; box-shadow: none; }
.td-row.draft.new:not(:focus-within) .td-in.text { border-color: transparent; background: transparent; }
.td-row.draft.new:not(:focus-within) :is(.td-in.date, .td-in.time, .td-quick, .td-tools,
  .td-who) { display: none; }
.td-fields { flex-wrap: wrap; row-gap: 6px; }
.td-quick { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.td-q {
  height: 24px; padding: 0 8px; border-radius: 12px; font-size: 12px;
  border: 1px solid var(--border-strong); color: var(--text-2); background: var(--bg);
}
.td-q:hover { background: var(--bg-hover); color: var(--text); }
.td-q.clear { color: var(--text-3); }

.td-who {
  display: inline-flex; align-items: center; flex: 0 1 auto; flex-wrap: wrap;
  padding: 2px; border-radius: 12px; gap: 4px; max-width: 46%;
}
.td-who .pm-chip.sm { cursor: inherit; }
.td-who:not(:disabled):hover { background: var(--bg-active); }
.td-who:disabled { cursor: default; }
.td-dot {
  width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--chip, #8b8b86); color: #fff; font-size: 10.5px; font-weight: 600;
  box-shadow: 0 0 0 2px var(--bg); flex: none;
}
.td-who .td-dot + .td-dot { margin-left: -6px; }
.td-dot.more { background: var(--bg-active); color: var(--text-2); font-size: 9.5px; }
.td-who-all { font-size: 11.5px; color: var(--text-3); margin-left: 5px; }
.td-row.done .td-who { opacity: .5; }

.td-who-pop {
  position: absolute; z-index: 150; width: 220px; padding: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.td-who-head { display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; color: var(--text-3); padding: 4px 6px 6px; }
.td-who-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 6px; border-radius: var(--radius); font-size: 13.5px;
}
.td-who-item:hover { background: var(--bg-hover); }
.td-who-box {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong);
  display: grid; place-items: center; font-size: 11px; color: #fff; flex: none;
}
.td-who-item.on .td-who-box { background: var(--accent); border-color: var(--accent); }

.toast:has(.toast-act) { display: flex; align-items: center; gap: 12px; }
.toast .tx { flex: 1; min-width: 0; }
.toast-act {
  flex: none; color: #8ec5ff; font-size: 13px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
}
.toast-act:hover { background: rgba(255, 255, 255, .1); }

/* ── 내 정보 → 알림 (종류마다 켬/끔 · 시점 칩 · 기기 목록) ─────────────── */
.nt-list { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.nt-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.nt-row + .nt-row { border-top: 1px solid var(--border); }
.nt-ico { flex: 0 0 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-size: 18px; background: var(--bg-sidebar); }
.nt-body { flex: 1; min-width: 0; }
.nt-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; }
.nt-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.nt-tag { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 9px;
  background: var(--bg-active); color: var(--text-2); }
.nt-tag.here { background: rgba(35, 131, 226, .14); color: var(--accent); }
.nt-row.lab-off .nt-title, .nt-row.lab-off .nt-ico { opacity: .55; }
.nt-list .empty { padding: 12px 14px; margin: 0; }

.nt-switch {
  flex: none; width: 38px; height: 22px; border-radius: 11px; position: relative;
  background: var(--border-strong); transition: background .15s;
}
.nt-switch span {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
.nt-switch.on { background: var(--accent); }
.nt-switch.on span { transform: translateX(16px); }
.nt-switch:disabled { opacity: .45; cursor: default; }

.nt-leads { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nt-chip {
  height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px;
  border: 1px solid var(--border-strong); color: var(--text-2); background: var(--bg);
}
.nt-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.nt-chip:disabled { opacity: .45; cursor: default; }
.nt-master { display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  font-size: 13px; color: var(--text-2); }

/* ── 내 정보 (폰) ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* 켜고 끄는 큰 스위치가 칩 뒤로 흘러 오른쪽 아래 구석에 홀로 떨어졌다. 칩은 이
     스위치가 켜져야 눌리는 것들이라 **먼저 와야 한다** — 맨 앞 한 줄로 올린다. */
  .nt-master { order: -1; flex-basis: 100%; margin: 0 0 4px; }
  .nt-chip { height: 36px; padding: 0 14px; }
  /* 저장 단추는 손가락이 닿는 폭으로 — 왼쪽 구석의 작은 단추는 엄지에서 멀다. */
  .btn.me-save { width: 100%; height: 44px; justify-content: center; margin-top: 4px; }
  /* 색 고르개 — 견본 40×30 은 손끝보다 작다. 입력칸(38px)과 키를 맞춘다. */
  .field .cp-swatch { width: 48px; height: 38px; }
  .field .cp-hex { width: 110px; height: 38px; }
}

/* 미팅 노트 — 제목 바로 옆의 ＋ (추가). 제목이 줄을 다 먹지 않게 h2 의 flex 를 푼다. */
.mn-titlebar h2 { flex: 0 1 auto; }
.mn-titlebar .spacer { flex: 1; }
/* 다른 단추(.btn.sm)와 같은 모양 — 둥근 모서리의 직사각형. */
.td-plus {
  height: 28px; padding: 0 10px; border-radius: var(--radius); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  color: var(--text-2); border: 1px solid var(--border-strong); background: var(--bg);
}
.td-plus:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 적는 줄 — 첫 줄은 [담당 칩][글칸], 기한 칸·단추는 다음 줄로 흐른다.
   칩이 세로로 쌓이며 글칸을 눌러 버리던 것을 막는다. */
.td-row.draft .td-who { max-width: none; flex-wrap: nowrap; }
.td-row.draft .td-in.text { flex: 1 1 50%; min-width: 180px; }

/* 상위를 따르는 담당 — 옅게, 앞에 ↳. 따로 정한 것과 눈으로 갈린다. */
.td-who.inherited .pm-chip, .todo-who.inherited .pm-chip { opacity: .55; }
.td-who-up { font-size: 12px; color: var(--text-3); margin-right: -1px; }
.td-who-head .link-btn.on { font-weight: 700; }
@media (hover: none) { .td-who { min-height: 32px; } }   /* 손가락이 닿는 자리 */
.td-who-links { display: inline-flex; gap: 10px; }
.td-who-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 4px 2px;
  border-top: 1px solid var(--border); margin-top: 4px; }

/* ── 개인 노트 ─────────────────────────────────────────────────────────
   대시보드(`/notes`)와 떠 있는 창(js/note.js). 창은 끌어 옮기고, 변에 붙이고,
   가장자리를 잡아 크기를 바꾼다. 크게 띄운 회의록(81) 위, 찾기 막대(95)·대화상자 아래. */
.notes-hint { margin: 6px 0 14px; font-size: 13px; color: var(--text-3); }
.notes-page .title-icon { cursor: default; }

.note-panel {
  position: fixed; z-index: 85;
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.note-panel[data-dock="left"]   { border-width: 0 1px 0 0; border-radius: 0; }
.note-panel[data-dock="right"]  { border-width: 0 0 0 1px; border-radius: 0; }
.note-panel[data-dock="top"]    { border-width: 0 0 1px 0; border-radius: 0; }
.note-panel[data-dock="bottom"] { border-width: 1px 0 0 0; border-radius: 0;
  padding-bottom: env(safe-area-inset-bottom); }
.note-panel[data-dock="top"] { padding-top: env(safe-area-inset-top); }

.np-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 2px;
  height: 38px; padding: 0 4px 0 12px;
  border-bottom: 1px solid var(--border); background: var(--bg-sidebar);
  cursor: grab; touch-action: none; user-select: none;
}
body.np-dragging, body.np-dragging * { user-select: none !important; }
body.np-dragging .np-head { cursor: grabbing; }
.np-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-docks { display: flex; gap: 0; margin-right: 4px; }
.np-btn {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius);
  display: grid; place-items: center; font-size: 14px; color: var(--text-2);
}
.np-btn:hover { background: var(--bg-hover); color: var(--text); }
.np-dock { font-size: 15px; color: var(--text-3); }
.np-dock[aria-pressed="true"] { color: var(--accent); background: var(--bg-active); }
.np-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 40px 30px; }

/* 크기 손잡이 — 보이지 않는 띠. 붙어 있으면 안쪽 변 하나만 남긴다. */
.np-rz { position: absolute; z-index: 2; touch-action: none; }
.np-rz-n, .np-rz-s { left: 8px; right: 8px; height: 8px; cursor: ns-resize; }
.np-rz-e, .np-rz-w { top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; }
.np-rz-n { top: -3px; } .np-rz-s { bottom: -3px; }
.np-rz-e { right: -3px; } .np-rz-w { left: -3px; }
.np-rz-ne, .np-rz-nw, .np-rz-se, .np-rz-sw { width: 14px; height: 14px; }
.np-rz-ne { top: -3px; right: -3px; cursor: nesw-resize; }
.np-rz-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
.np-rz-nw { top: -3px; left: -3px; cursor: nwse-resize; }
.np-rz-se { bottom: -3px; right: -3px; cursor: nwse-resize; }
.note-panel[data-dock] .np-rz { display: none; }
.note-panel[data-dock="none"] .np-rz { display: block; }
.note-panel[data-dock="left"]   .np-rz-e { display: block; right: -4px; }
.note-panel[data-dock="right"]  .np-rz-w { display: block; left: 0; }
.note-panel[data-dock="top"]    .np-rz-s { display: block; bottom: -4px; }
.note-panel[data-dock="bottom"] .np-rz-n { display: block; top: 0; }
/* 붙은 변의 손잡이는 잡히는 걸 보여 준다 — 보이지 않으면 크기를 바꿀 수 있는 줄 모른다. */
.note-panel[data-dock="left"] .np-rz-e:hover, .note-panel[data-dock="right"] .np-rz-w:hover,
.note-panel[data-dock="top"] .np-rz-s:hover, .note-panel[data-dock="bottom"] .np-rz-n:hover {
  background: var(--accent); opacity: .35;
}

/* 끄는 동안, 놓으면 붙을 자리를 비춘다. */
.np-snap {
  position: fixed; z-index: 84; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

@media (max-width: 720px) {
  .np-head { height: 46px; }
  .np-btn { width: 36px; height: 36px; font-size: 16px; }
  .np-dock { font-size: 18px; }
  .np-body { padding-left: 24px; }
  /* 손가락은 8px 띠를 못 짚는다 — 붙은 변의 손잡이를 두껍게. */
  .note-panel[data-dock="bottom"] .np-rz-n, .note-panel[data-dock="top"] .np-rz-s { height: 14px; }
  .note-panel[data-dock="bottom"] .np-rz-n::after {
    content: ''; position: absolute; left: 50%; top: 4px; width: 36px; height: 4px;
    margin-left: -18px; border-radius: 2px; background: var(--border-strong);
  }
}

/* ── 모바일 점검 (2026-10-20) ────────────────────────────────────────────
   폰 세 갈래(대시보드 · 글/프로젝트 · 껍데기/대화상자)를 390·360·가로로 훑고 고친 것. */
@media (max-width: 720px) {
  /* 미팅 노트 머리 — 접기·날짜·⤢📝🗑 가 한 줄을 다 먹어 제목이 45px 만 남았다
     («정기미/팅» 으로 꺾임). 폰에서는 제목을 **아래 줄 전체**로 내린다. */
  .mn-head { flex-wrap: wrap; row-gap: 2px; }
  .mn-head .mn-title { order: 9; flex: 1 0 100%; padding-left: 40px; }
  .mn-head .mn-date { height: 30px; }
  /* 미팅 달력의 칸 이름표는 37px 에 «정…» 만 보였다 — 폰에서는 점 하나로 «있음» 만 알리고,
     칸 폭 전체를 누를 자리로 둔다 (누르면 목록에서 그 노트를 편다). */
  .mn-cal .mn-pin {
    font-size: 0; height: 18px; padding: 0; margin-top: 4px; position: relative;
    background: none; box-shadow: none;
  }
  .mn-cal .mn-pin::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
    margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent);
  }
  /* 떠 있는 노트 — 폰에서 왼쪽·오른쪽 붙이기는 화면을 통째로 덮을 뿐이라 뺀다(위·아래·띄우기). */
  .np-dock[data-to="left"], .np-dock[data-to="right"] { display: none; }
  /* 아래에 붙인 노트가 본문 끝을 덮었다 — 그만큼 본문 끝을 비운다 (js/note.js 가 값을 건다). */
  .scroll { padding-bottom: var(--np-cover-bottom, 0px); }
}
/* 알림·안내 띠 같은 토스트는 아래 붙은 노트 위로 올린다. */
.toast-box { bottom: calc(16px + var(--np-cover-bottom, 0px)); }
/* 손가락 기기: 사이드바 «프로젝트» 접기 단추는 20px — 닿는 자리만 넓힌다. */
@media (hover: none) {
  .nav-ico { position: relative; }
  .nav-ico::after { content: ''; position: absolute; inset: -10px -6px; }
  /* 노트 창 단추 36px 를 가로로 눕힌 폰(폭 720px 넘음)에도. */
  .np-btn { width: 36px; height: 36px; font-size: 16px; }
}
/* 할 일 적는 줄(새로 적기·고치기) — 폰에서 도구 칸(↵ ✕)이 옆 칸을 차지해 글칸이 170px 로
   좁아 글이 잘렸고, 날짜·시각이 세로로 쌓였으며 단추·빠른 기한이 22~24px 이었다.
   도구는 아래 줄 오른쪽으로 내리고, 글칸은 한 줄을 다 쓰고, 누를 것은 손가락 크기로. */
@media (max-width: 720px) {
  .td-row.draft { flex-wrap: wrap; }
  .td-row.draft .td-in.text { flex: 1 0 100%; min-width: 0; }
  .td-row.draft .td-in { height: 36px; }
  .td-row.draft .td-in.date, .td-row.draft .td-in.time { flex: 1 1 0; min-width: 0; }
  .td-row.draft .td-tools { flex: 1 0 100%; justify-content: flex-end; gap: 6px; }
  .td-row.draft .td-tool { width: 40px; height: 36px; min-width: 40px; min-height: 36px;
    border: 1px solid var(--border-strong); background: var(--bg); font-size: 15px; }
  .td-q { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 13px; }
}