* { box-sizing: border-box; }

:root {
  --line: #c9d4e0;
  --grid: #b6c2d1;
  --head: #dbe7f5;
  --ink: #1b2430;
  --ink2: #33445a;
  --muted: #6b7785;
  --faint: #c3ccd6;
  --accent: #0b3486;
  --accent-soft: #e9eefb;
  --on-accent: #ffffff;
  --bg: #f4f6f9;
  --card: #fff;
  --surface2: #fafbfc;
  --track: #e6ebf1;
  --carry: #b45309;
  --quip: #ea580c; /* 오늘의 한마디 — 오렌지 */
  --shadow: rgba(11, 52, 134, 0.08);
  --sat: #2563eb; /* 토요일 */
  --sun: #dc2626; /* 일요일·공휴일 */
  color-scheme: light;
}

/* ─────────────────────────── 다크 모드 */

:root[data-theme='dark'] {
  --line: #303c4c;
  --grid: #3a4859;
  --head: #1f2b3c;
  --ink: #e4ecf6;
  --ink2: #b9c9de;
  --muted: #8b9bb0;
  --faint: #55637a;
  --accent: #7ea6f6;
  --accent-soft: #182a4e;
  --on-accent: #0e131a;
  --bg: #0e131a;
  --card: #161d27;
  --surface2: #1b2431;
  --track: #2a3542;
  --carry: #fbbf24;
  --quip: #fb923c; /* 오늘의 한마디 — 어두운 화면에서는 한 톤 밝게 */
  --shadow: rgba(126, 166, 246, 0.18);
  --sat: #60a5fa;
  --sun: #f87171;
  color-scheme: dark;
}

/* 시스템 설정을 따르는 상태(자동) */
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] {
    --line: #303c4c;
    --grid: #3a4859;
    --head: #1f2b3c;
    --ink: #e4ecf6;
    --ink2: #b9c9de;
    --muted: #8b9bb0;
    --faint: #55637a;
    --accent: #7ea6f6;
    --accent-soft: #182a4e;
    --on-accent: #0e131a;
    --bg: #0e131a;
    --card: #161d27;
    --surface2: #1b2431;
    --track: #2a3542;
    --carry: #fbbf24;
  --quip: #fb923c; /* 오늘의 한마디 — 어두운 화면에서는 한 톤 밝게 */
    --shadow: rgba(126, 166, 246, 0.18);
    --sat: #60a5fa;
    --sun: #f87171;
    color-scheme: dark;
  }
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Malgun Gothic", "맑은 고딕", -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* 펼쳐지는 목록은 브라우저가 그립니다. 선택 상자를 투명하게 둔 곳(.row select 등)에서는
   목록 배경이 흰색으로 떨어지는데, 글자색은 --ink(어두운 화면에서 거의 흰색)를 그대로 써서
   흰 바탕에 흰 글씨가 됐습니다. 배경을 직접 정해 줍니다. */
select option {
  background-color: var(--card);
  color: var(--ink);
}

.hidden { display: none !important; }
.spacer { flex: 1; }

/* ─────────────────────────── 로그인 */

.login {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  z-index: 50;
}
.login-box {
  width: 320px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 로고 — 밝은 화면에는 검정, 어두운 화면에는 흰 것을 씁니다.
   로고 자체가 회사 이름을 말해주므로 아래 제목은 화면 이름만 담습니다.
   예전에는 두 장을 겹쳐 두고 CSS 로 하나를 숨겼는데, 그러면 브라우저가
   숨긴 것까지 내려받습니다. 지금은 그림이 한 장이고 주소를 갈아 끼웁니다. */
.login-logo { text-align: center; margin: 0 0 2px; }
.login-logo img { width: 100%; max-width: 190px; height: auto; }

.login-box h1 { margin: 0; font-size: 22px; text-align: center; letter-spacing: 1px; }
.login-sub { margin: 2px 0 12px; text-align: center; color: var(--muted); font-size: 12.5px; }
.login-box label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.login-box input {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.login-box button {
  margin-top: 6px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.err { color: #b91c1c; font-size: 13px; margin: 4px 0 0; min-height: 18px; }

/* 로그인 ↔ 회원가입 전환 */
.login-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}
.login-switch {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}
.login-switch button {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  width: auto;
}

/* ─────────────────────────── 상단바 */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* ─────────────────────────── 메뉴 레일 (왼쪽 세로)

   평소에는 아이콘만 보이는 56px 이고, 마우스를 올리면 200px 로 펼쳐 이름을 보여줍니다.
   펼침은 화면 위에 겹쳐 뜹니다 — 본문 폭이 흔들리면 읽던 자리를 놓치기 때문입니다.
   [≡] 를 누르면 펼친 채로 고정되고(그때는 본문이 밀립니다) 그 선택을 기억합니다. */

:root { --rail-w: 56px; --rail-open: 200px; }

.rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 30;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 7px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--card);
  border-right: 1px solid var(--line);
  transition: width 0.14s ease;
}
/* 펼쳤는지는 코드가 정합니다(.open). CSS :hover 로만 두면 접기를 눌러도
   커서가 레일 위에 남아 있어 곧바로 다시 펴집니다 — 접히지 않는 것처럼 보였습니다. */
.rail.open { width: var(--rail-open); }

#appRoot { padding-left: var(--rail-w); }
body.rail-pinned #appRoot { padding-left: var(--rail-open); }

/* 머리줄 — 회사 로고 · 숨김/펼침 · 검색.
   펼치면 한 줄로 늘어서고, 접히면 56px 안에 세로로 쌓입니다(셋이 나란히 설 수 없어서). */
.rail-brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.rail:not(.open) .rail-brand { flex-direction: column; gap: 2px; }
/* 세로로 쌓일 때 이름은 폭이 없어 clip 만 되고 줄만 차지합니다 — 아예 뺍니다 */
.rail:not(.open) .rail-name { display: none; }

/* WP 글자 배지 — 접혀 있을 때는 이것 하나가 곧 로고입니다 */
.rail-wp {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-name { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); font-size: 15px; letter-spacing: 0.5px; overflow: hidden; }

.rail-tool {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--accent);
  line-height: 0;
  padding: 5px;
  border-radius: 7px;
  cursor: pointer;
}
.rail-tool svg { display: block; }
.rail-tool:hover { background: var(--surface2); }
.rail-tool:hover svg { opacity: 0.75; }

/* ---- 통합 검색 ---- */
.search-panel {
  position: fixed;
  left: 50%;
  top: 68px;
  transform: translateX(-50%);
  z-index: 90;
  width: min(560px, calc(100vw - 32px));
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.search-panel input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface2);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.search-out { max-height: 60vh; overflow-y: auto; margin-top: 8px; }
.search-group { margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--faint); padding: 0 4px; }
.search-hit {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
}
.search-hit:hover, .search-hit.on { background: var(--accent-soft); }
.search-hit-title { flex: 1; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hit-sub { flex: none; font-size: 11.5px; color: var(--muted); }
.search-none { padding: 14px; text-align: center; color: var(--muted); font-size: 13px; }

/* 묶음 이름 — 펼쳤을 때만. 접혀 있을 때는 가느다란 줄로 남아 구분만 합니다. */
.rail-group {
  flex: none;
  margin: 12px 6px 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
}
.rail:not(.open) .rail-group { color: transparent; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }


.tab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 10px 11px;
  cursor: pointer;
  color: var(--muted);
  font-size: 13.5px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.tab:hover { background: var(--surface2); color: var(--ink); }
/* 지금 보고 있는 곳은 채운 알약으로 — 아이콘만 보일 때도 어디인지 한눈에.
   어두운 화면에서는 밝은 칩 + 짙은 글자(써베이 도구와 같은 결) */
.tab.active { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.tab.active:hover { background: var(--accent); color: var(--on-accent); }
.rail-ico { flex: none; width: 20px; display: flex; justify-content: center; }
.rail-ico svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 탭 이름 옆 숫자 — 들어가 보지 않아도 확인할 게 있는지 알려줍니다.
   접혀 있을 때는 아이콘 오른쪽 위에 작은 점처럼 붙습니다. */
.tab-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--track);
  color: var(--ink2);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.tab-badge.alert { background: #dc2626; color: #fff; }
/* 채운 칩 위에서는 숫자를 반투명 상자로 — 칩 색이 무엇이든 묻히지 않게 */
.tab.active .tab-badge { background: rgba(255, 255, 255, 0.28); color: var(--on-accent); }
:root[data-theme='dark'] .tab.active .tab-badge { background: rgba(0, 0, 0, 0.16); }
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .tab.active .tab-badge { background: rgba(0, 0, 0, 0.16); }
}
.tab.active .tab-badge.alert { background: #dc2626; color: #fff; }
/* 접혀 있을 때 — 숫자를 아이콘 위로 올려 56px 안에 들어오게 */
.rail:not(.open) .tab { position: relative; }
.rail:not(.open) .tab-badge {
  position: absolute;
  top: 3px;
  left: 26px;
  min-width: 15px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 15px;
}


/* ─────────────────────────── 오늘의 한마디

   상단바 왼쪽 빈자리에 한 줄. 8초마다 페이드로 바뀝니다.
   흘러가는 자막이 아니라 **바뀌는** 쪽으로 한 이유 — 매일 여덟 시간 켜두는 화면이라
   눈이 글자를 따라다녀야 하는 자막은 금세 거슬립니다.
   좁은 화면에서는 통째로 감춥니다(탭·알림이 먼저입니다). */
.quip {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  /* 글꼴은 이 한 줄에만 다릅니다 — 내용이 가벼운데 본문 글꼴로 쓰면 너무 진지해 보입니다.
     주아체가 없는 환경(인터넷 차단 등)에서는 뒤의 기본 글꼴로 떨어집니다. */
  font-family: 'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--quip);
  /* 바로가기가 늘어나도 한마디가 한 토막만 남지 않게 바닥을 깔아 둡니다 */
  min-width: 220px;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 0.45초는 시야 가장자리에서도 '깜박' 으로 잡혀 눈이 끌려옵니다.
     0.9초로 늘리면 바뀌는 순간은 안 보이고 다음에 볼 때 "바뀌었네" 가 됩니다. */
  transition: opacity 0.9s ease;
}
.quip:hover { filter: brightness(1.15); }
.quip.fading { opacity: 0; }
.quip.hidden { display: none; }
@media (prefers-reduced-motion: reduce) {
  .quip { transition: none; }
}
@media (max-width: 720px) {
  .quip { display: none; }
}

/* ─────────────────────────── 바로가기 (상단바)

   자주 여는 곳을 여기서 바로 엽니다. 팀 공용이 앞, 내 것이 뒤.
   한마디(왼쪽)와 프로필(오른쪽) 사이 빈 자리를 씁니다 — 좁아지면 이쪽이 먼저 줄어들고,
   단추가 많으면 가로로 밀어서 봅니다(줄바꿈하면 상단바 높이가 들쭉날쭉해집니다). */
.sc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  /* 단추가 많아도 한마디를 통째로 밀어내지 않게 상단바의 절반까지만 씁니다.
     넘치는 것은 가로로 밀어서 봅니다(줄바꿈하면 상단바 높이가 들쭉날쭉해집니다). */
  max-width: 46vw;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 2px 0;
}
.sc-bar::-webkit-scrollbar { display: none; }

.sc-pill {
  flex: 0 0 auto;
  max-width: 130px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink2);
  font-size: 12.5px;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-pill:hover { border-color: var(--accent); color: var(--accent); }
/* 팀 공용은 왼쪽에 점 하나로 구분합니다 — 색을 통째로 바꾸면 상단바가 알록달록해집니다 */
.sc-pill.team { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.sc-edit {
  flex: 0 0 auto;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.sc-edit:hover { border-color: var(--accent); color: var(--accent); }

/* 고치기 판 — 프로필 메뉴와 같은 그릇을 씁니다 */
.sc-menu { right: auto; left: 50%; transform: translateX(-50%); min-width: 420px; max-width: 92vw; }
.sc-sec + .sc-sec { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.sc-sec-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sc-line { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.sc-line .sc-label { flex: 0 0 110px; min-width: 0; }
.sc-line .sc-url { flex: 1 1 auto; min-width: 0; }
.sc-acts { display: flex; gap: 6px; margin-top: 12px; }
.sc-hint { margin: 8px 0 0; font-size: 11.5px; }

@media (max-width: 900px) {
  /* 좁아지면 바로가기부터 접습니다 — 한마디와 프로필이 먼저입니다 */
  .sc-bar { display: none; }
}

/* 바로가기가 늘어나면 이쪽이 눌려 이름이 두 줄로 접히고 상단바가 48 → 69px 로
   늘어났습니다(사본에서 단추 12개일 때). 오른쪽 묶음은 줄어들지 않게 못 박습니다. */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.topbar-right .who { white-space: nowrap; }
.who { color: var(--muted); font-size: 13px; }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; }

/* ─────────────────────────── 공통 컨트롤 */

.tab-panel { max-width: 980px; margin: 0 auto; padding: 16px; }

.datebar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.datebar button, .datebar input, .datebar select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  cursor: pointer;
}
.datebar input[type="date"], .datebar input[type="search"] { cursor: text; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.ghost { background: var(--card); }
button.small { padding: 4px 8px; font-size: 12px; }
.savestate { color: var(--muted); font-size: 12px; min-width: 90px; }

/* 구글 캘린더 연결 표시등 */
#calBtn { display: inline-flex; align-items: center; gap: 6px; }
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0 2px #fff inset;
  flex: none;
}
.dot.on { background: #22c55e; box-shadow: 0 0 5px #22c55e; }
.dot.err { background: #ef4444; box-shadow: 0 0 5px #ef4444; }

/* ─────────────────────────── 일지 */

.sheet {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 22px 26px;
}
.sheet-who {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 8px;
}
.sheet-title {
  margin: 0 0 18px;
  font-size: 19px;
  text-align: center;
  padding: 10px;
  background: var(--head);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.badge {
  font-size: 12px;
  font-weight: 400;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  vertical-align: middle;
}
.badge.done { background: #dcfce7; border-color: #86efac; color: #166534; }

.block { margin-bottom: 22px; }
/* 남의 자료를 보는 중 표시 */
.viewing-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-soft);
  font-size: 13px;
  font-weight: 600;
}
.viewing-bar span { flex: 1; }

/* ─────────────────────────── 팀 현황 */

.team-list { display: flex; flex-direction: column; gap: 6px; }
.team-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) 68px minmax(150px, 1fr) 2fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  font-size: 13px;
}
.team-row.clickable { cursor: pointer; }
.team-row.clickable:hover { border-color: var(--accent); background: var(--surface2); }
.team-row.none { border-left-color: #dc2626; }
.team-row.draft { border-left-color: #f59e0b; }
.team-row.ok { border-left-color: #16a34a; }

/* 이름과 소속을 한 줄에 — 두 줄로 두면(긴 소속은 세 줄) 줄 높이가 커져 한 화면에 몇 명 안 들어옵니다. */
.team-who { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.team-name { font-weight: 600; flex: none; white-space: nowrap; }
.team-who .who {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-badge {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.team-badge.none { background: #fee2e2; color: #991b1b; }
.team-badge.draft { background: #fef3c7; color: #92400e; }
.team-badge.ok { background: #dcfce7; color: #166534; }

.team-acts { display: flex; gap: 6px; white-space: nowrap; }
.team-cnt { color: var(--ink2); white-space: nowrap; }
.team-sum { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:root[data-theme='dark'] .team-badge.none { background: #7f1d1d; color: #fecaca; }
:root[data-theme='dark'] .team-badge.draft { background: #78350f; color: #fde68a; }
:root[data-theme='dark'] .team-badge.ok { background: #14532d; color: #bbf7d0; }
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .team-badge.none { background: #7f1d1d; color: #fecaca; }
  :root[data-theme='auto'] .team-badge.draft { background: #78350f; color: #fde68a; }
  :root[data-theme='auto'] .team-badge.ok { background: #14532d; color: #bbf7d0; }
}

@media (max-width: 820px) {
  .team-row { grid-template-columns: 1fr auto; }
  .team-cnt, .team-sum, .team-acts { grid-column: 1 / -1; }
}

/* 안 들어온 이월 업무 안내 */
.carry-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--carry);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--accent-soft);
  font-size: 13px;
}
/* ── 오늘 챙길 것 (한 줄) ──────────────────────────────────────────────
   윗줄은 누르면 일지 줄이 되는 것, 아랫줄은 다른 탭에 가서 볼 것.
   성격이 다르므로 색과 아이콘으로 갈라 둡니다. 인쇄에서는 빠집니다(no-print). */
.today-bar {
  margin: 0 0 14px;
  border: 1px solid var(--carry);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--accent-soft);
  font-size: 13px;
  overflow: hidden;
}
.tb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
}
.tb-row strong { font-weight: 700; white-space: nowrap; }
.tb-ico { font-size: 13px; line-height: 1; }
/* 아랫줄은 한 톤 낮춥니다 — 여기서는 아무 일도 일어나지 않습니다 */
.tb-look { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--card) 55%, transparent); }
.tb-look strong { color: var(--ink2); font-weight: 600; }

.tb-bits { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.tb-bit { color: var(--ink2); }
.tb-dot { color: var(--muted); }
/* 아랫줄의 숫자는 눌러서 그 탭으로 갑니다 */
button.tb-bit.link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.tb-bit.link:hover { color: var(--ink); }

/* [하나씩 보기] — 갈래마다 예전 띠와 같은 목록·[가져오기]·[닫기] */
.tb-detail { border-top: 1px solid var(--line); padding: 4px 12px 10px; }
.tb-group + .tb-group { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.tb-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-list { margin: 4px 0 0; padding-left: 18px; color: var(--ink2); }
.tb-list li { margin: 1px 0; }

@media (max-width: 700px) {
  /* 좁은 화면에서 버튼이 글자를 밀어내지 않게 줄을 바꿉니다 */
  .tb-row .spacer { flex-basis: 100%; height: 0; }
}

/* 이제 이 규칙을 쓰는 것은 '날이 바뀐 안내'(#dayNotice) 하나뿐입니다 —
   이월·회의·나의 업무 세 띠는 [오늘 챙길 것] 한 줄로 합쳐졌습니다 */
.carry-notice #dayText {
  flex: 1;
  min-width: 220px;
  font-weight: 600;
}
/* 날이 바뀐 안내 — 다른 안내보다 먼저 눈에 띄어야 해서 주황 계열입니다 */
.carry-notice.day { border-color: var(--carry); background: transparent; }
.carry-notice.day #dayText { color: var(--carry); }
.carry-notice ul {
  flex-basis: 100%;
  margin: 2px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.block-head h2 { font-size: 14px; margin: 0; padding: 4px 0; }
.group-head {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 업무 줄 */

.rows { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.row {
  display: grid;
  /* 뒤에서 두 번째 24px 은 [⏸] 미루기 칸입니다 — 삭제 [✕] 왼쪽에 붙습니다. */
  grid-template-columns: 34px 1fr 172px 128px 24px 28px;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.row:first-child { border-top: 0; }
.row > * { border-left: 1px solid var(--line); padding: 6px 8px; min-height: 34px; }
.row > *:first-child { border-left: 0; }
.row .no { color: var(--muted); text-align: center; font-size: 12px; padding-top: 8px; cursor: pointer; user-select: none; }
.row .no:hover { color: var(--accent); }
/* 중요 안건 — 번호 자리에 ★ 이 서고 줄에 옅은 색이 깔립니다 */
.row .no.important { color: #dc2626; font-size: 15px; padding-top: 6px; }
.row.is-important { background: #fff6f6; }
.row.is-important .content-cell textarea { font-weight: 700; }
:root[data-theme='dark'] .row .no.important { color: #f87171; }
:root[data-theme='dark'] .row.is-important { background: #2a1c1c; }
.row .content-cell { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.row .content-cell textarea { flex: 1; min-width: 0; }

/* 메모에 적힌 주소 — 칸 아래에 눌러 열 수 있는 딱지로 답니다.
   주소가 없으면 .hidden 이 붙어 자리도 차지하지 않습니다. */
.linkbar { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; margin-top: 3px; }
.linkchip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--accent, #2563eb);
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1px 7px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.linkchip:hover { background: var(--head); text-decoration: underline; }

/* ---- 일지 줄의 사진 ----
   사진이 없는 줄에서는 **자리를 차지하지 않습니다.** 늘 한 줄을 차지하면 스무 줄짜리
   표가 400px 길어지고, 그렇다고 마우스를 얹을 때 끼워 넣으면 아래 줄들이 덜컥 밀립니다.
   그래서 비어 있을 때는 칸 오른쪽 아래에 **겹쳐서** 띄웁니다(비품 표의 [⋯] 와 같은 처리).
   **안 보이는 동안에는 `pointer-events: none`** — 투명해도 클릭은 받기 때문에, 없으면
   업무 내용 끝을 눌러 커서를 두려던 것이 보이지도 않는 단추에 걸립니다. */
.row .content-cell { position: relative; }
.photobar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; width: 100%; margin-top: 4px; }
.photobar.empty {
  position: absolute;
  right: 4px;
  bottom: 3px;
  width: auto;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  /* **페이드를 넣지 않습니다.** 넣어 보니 opacity 가 0 에 멈춘 채 pointer-events 만
     auto 로 바뀌는 상태가 있었습니다(사본에서 재어 확인) — 그러면 **안 보이는 단추가
     클릭을 받습니다.** 업무 내용 끝을 눌러 커서를 두려던 것이 엉뚱한 데 걸립니다.
     마우스를 얹었을 때 나타나는 단추는 곧바로 나타나는 편이 낫습니다. */
}
.row:hover .photobar.empty, .row:focus-within .photobar.empty { opacity: 1; pointer-events: auto; }

.photothumb {
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface2);
  cursor: zoom-in;
  overflow: hidden;
  max-width: 96px;
  line-height: 0;
}
.photothumb:hover { border-color: var(--accent); }
.photothumb img { display: block; height: 46px; width: auto; max-width: 96px; object-fit: cover; }
/* 설명은 썸네일 아래 한 줄로 — 사진만 늘어놓으면 무엇을 찍은 것인지 열어 봐야 압니다 */
.photocap {
  display: block;
  max-width: 96px;
  padding: 0 3px 1px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photoadd {
  border: 1px dashed var(--line);
  background: var(--surface2);
  color: var(--muted);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  padding: 5px 7px;
  cursor: pointer;
}
.photoadd:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
/* 끌어다 놓는 동안 그 줄을 밝힙니다 — 어느 줄에 들어갈지 알 수 없으면 못 씁니다 */
.row.photodrop { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--head); }

/* ---- 사진 크게 보기 ---- */
.photoview {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: rgba(10, 16, 26, 0.88);
  padding: 16px;
  gap: 10px;
}
.photoview-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
.photoview-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; background: #fff; }
.photoview-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.photoview-n { color: #e8eef7; font-size: 12px; }
.photoview-cap-ro { color: #e8eef7; font-size: 13px; }
.photoview-cap {
  flex: 0 1 320px;
  min-width: 160px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
}
.photoview .ghost { background: var(--card); }
.row textarea {
  border: 0;
  resize: none;
  width: 100%;
  padding: 2px 0;
  overflow: hidden;
  background: transparent;
}
.row textarea:focus, .row input:focus, .row select:focus { outline: 2px solid #bfdbfe; outline-offset: 1px; }
.row select, .row input {
  border: 0;
  width: 100%;
  background: transparent;
  padding: 2px 0;
}
.row .del {
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
  padding: 0;
}
.row:hover .del { color: #ef4444; }
.row.is-done { background: var(--surface2); }
.row.is-done textarea { color: var(--muted); }

/* 진행중 — 결과 칸에 진행률 입력과 막대 */
.res-cell { display: flex; align-items: center; gap: 4px; }
.res-cell select { flex: 1; min-width: 0; }
/* 결과 칸 — [진행중 ▾] [연료 게이지] 한 줄 */
.res-cell { flex-wrap: nowrap; gap: 5px; }
.res-cell select { flex: 1; min-width: 0; }

.gauge {
  position: relative;
  flex: none;
  width: 62px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.gauge.hidden { display: none; }
.gauge-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background-image: linear-gradient(90deg, #38bdf8, var(--accent)),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.35) 7px 8px);
  background-blend-mode: overlay;
  transition: width 0.08s linear;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.gauge-num {
  position: relative;
  display: block;
  text-align: center;
  font-size: 11.5px;
  line-height: 14px;
  font-weight: 700;
  color: #1b2430;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}
.carry.out { color: #15803d; }
.carry {
  color: var(--carry);
  font-size: 12.5px;
  white-space: nowrap;
  padding-top: 3px;
}
/* 일지의 프로젝트 줄을 실제 프로젝트로 올리는 작은 단추 */
.promote {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  padding: 0 7px;
  margin-top: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.promote:hover { border-color: var(--accent); color: var(--accent); }
.rowhead {
  display: grid;
  grid-template-columns: 34px 1fr 172px 128px 24px 28px;
  background: var(--head);
  font-size: 12px;
  color: var(--ink2);
}
.rowhead > * { padding: 5px 8px; border-left: 1px solid var(--line); text-align: center; }
.rowhead > *:first-child { border-left: 0; }

/* 표 머리줄의 [+ 업무 추가] — 비고 칸 머리 자리에 큼직하게 */
.rowhead .addcell { padding: 0; display: grid; place-items: center; }
.rowhead .memo-head { padding: 3px 6px; }
.addbtn.big {
  width: 100%;
  height: 26px;
  font-size: 12.5px;
  font-weight: 700;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.addbtn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--accent);
  border-radius: 4px;
  width: 20px;
  height: 20px;
  line-height: 1;
  padding: 0;
  font-size: 15px;
  cursor: pointer;
}
.addbtn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 중요 안건이 있는 날 — 일지 목록의 날짜 옆에서 깜박입니다.

   **깜박임은 CSS 애니메이션이 아니라 자바스크립트가 켜고 끕니다.** 처음에는 @keyframes 로
   만들었는데, 윈도우의 '애니메이션 효과 끄기'(prefers-reduced-motion)를 켜 둔 PC 에서는
   그대로 멎어 버렸습니다 — 정작 눈에 띄어야 할 표시가 가만히 있었습니다.
   사용자가 깜박이기를 분명히 요청한 자리라, 설정과 무관하게 깜박이게 두고
   인쇄물에서만 멈춥니다. */
.blink-important {
  margin-left: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #dc2626;
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: 8px;
  background: #fee2e2;
}
.blink-important.off { opacity: 0.15; }
:root[data-theme='dark'] .blink-important { color: #fecaca; background: #7f1d1d; }
.logcard.has-important { border-left: 3px solid #dc2626; }
@media print {
  .blink-important { opacity: 1 !important; color: #000; background: transparent; }
}

/* 내일 계획 위에 붙는 내일 캘린더 일정 */
.tomorrow-cal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: #f2f7ff;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.tc-head { color: var(--ink2); font-weight: 700; }
.tc-ev {
  background: var(--card);
  border: 1px solid #c7dbf5;
  border-radius: 10px;
  padding: 1px 8px;
  color: var(--ink);
}

/* 주간 일정 */

.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.week-day { border-left: 1px solid var(--line); min-height: 62px; background: var(--card); min-width: 0; }
.week-day:first-child { border-left: 0; }

/* 주말 좁게 / 숨기기 / 블록 접기 */
.week-block-collapsed { display: none; }
#weekBlock.collapsed #weekGrid,
#weekBlock.collapsed #weekRange { display: none; }
/* 한 줄에 모았으므로 기간은 단추 뒤로 밀어 둡니다 */
#weekBlock #weekRange { margin-left: auto; }

/* 지시사항 접기 — 접어도 건수는 제목 옆에 남습니다 */
#dirBlock.collapsed #directiveList { display: none; }
#dirBlock .block-head #dirCount { margin-left: 2px; }
#dirBlock .block-head #dirToggle { margin-left: auto; }
.week-day.weekend { background: var(--surface2); }
.week-day.today { background: var(--accent-soft); }
.week-day .wd {
  font-size: 12px;
  padding: 4px 6px;
  background: var(--head);
  color: var(--ink2);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}
.week-day.today .wd { background: var(--accent); color: #fff; font-weight: 700; }
.week-day .wd:hover { text-decoration: underline; }
.week-evs { padding: 4px 6px; display: flex; flex-direction: column; gap: 3px; }
.week-ev {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink);
  overflow: hidden;
  /* 한 줄로 자르지 않고 두 줄까지 보여줍니다 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.week-day:not(.open) .week-ev.extra { display: none; }
.week-more {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 12.5px;
  padding: 1px 0;
  cursor: pointer;
  text-align: left;
}
.week-more:hover { text-decoration: underline; }
.week-ev { position: relative; padding-right: 14px; }
.week-ev b { color: var(--accent); font-weight: 700; margin-right: 3px; }
.ev-hide {
  position: absolute;
  right: 0;
  top: 0;
  border: 0;
  background: none;
  color: #b9c4d0;
  font-size: 12.5px;
  line-height: 1.3;
  padding: 0 1px;
  cursor: pointer;
  opacity: 0.55;
}
.week-ev:hover .ev-hide { opacity: 1; }
.ev-hide:hover { color: #ef4444; }
.week-ev.allday b { color: var(--carry); }
.week-none { font-size: 12.5px; color: var(--faint); padding: 6px; text-align: center; }

/* 지시사항 */

.directive-list { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }

/* 지시자별 칸 — 왼쪽에 이사장님/대표님, 오른쪽에 그 지시자의 항목들 */
.dir-group {
  display: grid;
  grid-template-columns: 110px 1fr;
  border-top: 1px solid var(--line);
}
.dir-group:first-child { border-top: 0; }
.dir-src {
  background: var(--head);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
  padding: 8px;
}
.dir-body { border-left: 1px solid var(--line); min-width: 0; }
.dir-body .empty { padding: 8px; text-align: left; }

.dir {
  display: grid;
  grid-template-columns: 1fr 56px 86px auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.dir.with-src { grid-template-columns: 74px 1fr 56px 86px auto; }
.dir-body > .dir:first-child { border-top: 0; }
.dir .src { font-size: 12px; color: var(--ink2); background: var(--head); border-radius: 3px; padding: 2px 6px; text-align: center; }
.dir .age { font-size: 12px; color: var(--muted); text-align: right; }
.dir .age.warn { color: #b91c1c; font-weight: 700; }

.dir select { border: 1px solid var(--line); border-radius: 4px; padding: 3px 4px; background: var(--card); }
.dir .acts { display: flex; gap: 4px; }
.dir-content { min-width: 0; }
.dir .content { cursor: text; }
/* 감싸는 칸 안에서는 input 이 저절로 늘지 않습니다 — 안 적어두면 기본 너비(약 175px)에서 글이 잘립니다 */
.dir input.content { width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 3px 4px; }
.dir input.content:focus { outline: 2px solid #bfdbfe; outline-offset: 1px; border-radius: 3px; }
.dir-form { grid-template-columns: 90px 1fr auto; background: var(--surface2); }
.dir-form.fixed { grid-template-columns: 1fr auto; }
.dir-form input.content { border: 1px solid var(--line); border-radius: 4px; background: var(--card); padding: 5px 8px; }
.empty { color: var(--muted); padding: 12px; text-align: center; font-size: 13px; }

/* 월간 캘린더 */

.tab-panel.wide { max-width: 1400px; }
.cal-title { font-size: 15px; min-width: 110px; text-align: center; }

.cal-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  cursor: pointer;
  color: var(--muted);
}
.cal-chip.on { color: var(--ink); border-color: #9db5d4; }
.cal-chip input { display: none; }
.cal-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); opacity: 0.35; flex: none; }
.cal-chip.on .cal-dot { opacity: 1; }

.month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--grid);
  border-radius: 6px;
  overflow: hidden;
  background: var(--card);
}
/* 칸마다 실선 — 마지막 열·행은 바깥 테두리가 대신합니다 */
.m-head,
.m-cell {
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
}
.m-head:nth-child(7n),
.m-cell:nth-child(7n) { border-right: 0; }
.m-cell:nth-last-child(-n + 7) { border-bottom: 0; }

.m-head {
  background: var(--head);
  text-align: center;
  font-size: 12px;
  padding: 6px 0;
  color: var(--ink2);
  font-weight: 700;
}
.m-head.sun { color: #b91c1c; }
.m-head.sat { color: #1d4ed8; }

.m-cell {
  background: var(--card);
  min-height: 108px;
  padding: 3px 4px 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.m-cell.out { background: var(--surface2); }
.m-cell.out .m-num { color: var(--faint); }
.m-cell.today { background: var(--accent-soft); }
.m-day { display: flex; align-items: center; justify-content: space-between; }
.m-num { font-size: 12px; color: var(--ink2); padding: 1px 4px; }
.m-day.sun .m-num { color: #b91c1c; }
.m-day.sat .m-num { color: #1d4ed8; }
.m-cell.today .m-num { background: var(--accent); color: #fff; border-radius: 10px; font-weight: 700; }
.m-day { gap: 4px; }
.m-open,
.m-add {
  border: 0;
  background: none;
  color: transparent;
  font-size: 12.5px;
  cursor: pointer;
  padding: 0 2px;
}
.m-add { font-size: 14px; line-height: 1; margin-left: auto; }
.m-cell:hover .m-open { color: var(--accent); text-decoration: underline; }
.m-cell:hover .m-add { color: var(--accent); }
.m-add:hover { background: var(--accent); color: #fff !important; border-radius: 3px; }

.m-add-form { margin-top: 2px; }
.m-add-form input {
  width: 100%;
  font-size: 12.5px;
  padding: 3px 5px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  outline: none;
}

.m-ev {
  font-size: 12.5px;
  line-height: 1.35;
  border-radius: 3px;
  padding: 1px 4px;
  color: #fff;
  background: var(--c, #2563eb);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}
.m-ev b { font-weight: 700; margin-right: 3px; opacity: 0.9; }
.m-ev.allday { filter: saturate(1.1); }
.m-ev.from-log { box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.25); }
.m-cell:not(.open) .m-ev.extra { display: none; }

/* 내 상조 일정 — 구글 일정과 헷갈리지 않게 칠하지 않고 테두리만 둡니다 */
.m-sj {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  line-height: 1.35;
  border-radius: 3px;
  padding: 1px 4px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--surface2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}
.m-sj.anniversary { border-color: var(--line); color: var(--ink2); }
.m-sj-ico { font-size: 11px; }
.m-more {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  text-align: left;
  padding: 0 2px;
  cursor: pointer;
}
.m-more:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 900px) {
  .m-cell { min-height: 74px; }
  .m-ev { font-size: 11.5px; }
}

/* OKR */

.okr-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.okr-stat { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.okr-stat-label { font-size: 12px; color: var(--muted); }
.okr-stat-value { font-size: 22px; font-weight: 700; margin: 2px 0; }
.okr-stat-sub { font-size: 12.5px; color: var(--muted); }

.okr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.okr-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.okr-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(37, 99, 235, 0.08); }
.okr-card.off { opacity: 0.6; }
.okr-card-head { display: flex; align-items: flex-start; gap: 8px; }
.okr-title { font-weight: 700; font-size: 15px; flex: 1; line-height: 1.35; }
.okr-desc { font-size: 12px; color: var(--muted); }

.okr-badge {
  font-size: 12.5px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  background: var(--track);
  color: var(--muted);
}
.okr-badge.good { background: #dcfce7; color: #166534; }
.okr-badge.warn { background: #fef3c7; color: #92400e; }
.okr-badge.risk { background: #fee2e2; color: #b91c1c; }

.okr-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; min-width: 40px; }
.okr-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.okr-bar.good .okr-bar-fill { background: #22c55e; }
.okr-bar.warn .okr-bar-fill { background: #f59e0b; }
.okr-bar.risk .okr-bar-fill { background: #ef4444; }
.okr-bar.off .okr-bar-fill { background: #94a3b8; }
.okr-progress-row { display: flex; align-items: center; gap: 8px; }
.okr-pct { font-size: 13px; font-weight: 700; width: 40px; text-align: right; }

.okr-krs { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--line); padding-top: 8px; }
.okr-kr-mini { display: grid; grid-template-columns: 1fr auto 70px; gap: 8px; align-items: center; font-size: 12px; }
.okr-kr-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.okr-kr-val { color: var(--muted); font-size: 12.5px; }
.okr-kr-more { font-size: 12.5px; color: var(--muted); }
.okr-foot { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }

/* 간트 차트 */

.gantt-head { margin: 4px 0 6px; }
.gantt-head h2 { font-size: 14px; margin: 0; }
.gantt {
  --glabel: 230px;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.g-row { display: grid; grid-template-columns: var(--glabel) 1fr; align-items: center; gap: 8px; min-height: 22px; }
.g-label {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  padding: 2px 0;
}
.g-obj-label { font-weight: 700; }
.g-obj-label:hover, .g-ini-label:hover { color: var(--accent); text-decoration: underline; }
.g-kr-label { padding-left: 10px; font-size: 11.5px; color: var(--ink2); }
.g-ini-label { color: var(--muted); padding-left: 26px; font-size: 12.5px; }

.g-track { position: relative; height: 16px; background: var(--surface2); border-radius: 3px; }
.g-header .g-track { background: none; height: 18px; }
.g-month {
  position: absolute;
  top: 0;
  height: 18px;
  font-size: 12.5px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 4px;
  line-height: 18px;
}

/* 단계가 내려갈수록 색이 연해집니다: 목표(진함) > KR(중간) > 이니셔티브(연함) */
.g-bar { position: absolute; top: 2px; height: 12px; border-radius: 3px; cursor: pointer; }
.g-obj { background: var(--track); top: 1px; height: 14px; overflow: hidden; }
.g-fill { height: 100%; background: var(--accent); border-radius: 3px 0 0 3px; }
.g-obj .g-fill { opacity: 1; }
.g-obj.good .g-fill { background: #16a34a; }
.g-obj.warn .g-fill { background: #d97706; }
.g-obj.risk .g-fill { background: #dc2626; }
.g-obj.off .g-fill { background: #64748b; }
.g-bar-text {
  position: absolute;
  right: 5px;
  top: 0;
  font-size: 11.5px;
  line-height: 14px;
  color: var(--ink2);
  font-weight: 700;
}
.g-kr { background: var(--track); top: 3px; height: 10px; overflow: hidden; }
.g-kr .g-fill { opacity: 0.62; }
.g-kr.good .g-fill { background: #22c55e; }
.g-kr.warn .g-fill { background: #f59e0b; }
.g-kr.risk .g-fill { background: #ef4444; }
.g-kr .g-bar-text { line-height: 10px; font-size: 9px; }

.g-ini { top: 4px; height: 8px; opacity: 0.5; background: #60a5fa; }
.g-ini.done { background: #4ade80; }
.g-ini.late { background: #f87171; opacity: 0.65; }
.g-ini.undated {
  opacity: 0.22;
  background: repeating-linear-gradient(90deg, #94a3b8 0 6px, transparent 6px 12px);
}
.g-ini-label.done { text-decoration: line-through; }

.g-today {
  position: absolute;
  top: 26px;
  bottom: 8px;
  width: 2px;
  background: #ef4444;
  opacity: 0.65;
  pointer-events: none;
}

@media (max-width: 760px) {
  .gantt { --glabel: 120px; }
}

/* OKR 상세 */
.okr-detail-head { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.okr-detail-title { width: 100%; font-size: 19px; font-weight: 700; border: 0; border-bottom: 1px dashed transparent; padding: 2px 0; }
.okr-detail-title:hover, .okr-detail-title:focus { border-bottom-color: var(--line); outline: none; }
.okr-detail-desc { width: 100%; border: 0; resize: vertical; font-size: 13px; color: var(--muted); margin-top: 6px; padding: 2px 0; }
.okr-detail-desc:focus { outline: none; }
.okr-detail-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.okr-pct-big { font-size: 20px; font-weight: 700; }

.kr-list { display: flex; flex-direction: column; gap: 8px; }
.kr-row { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.kr-top { display: flex; gap: 8px; align-items: center; }
.kr-title { flex: 1; border: 0; font-size: 14px; font-weight: 600; padding: 2px 0; }
.kr-title:focus { outline: 2px solid #bfdbfe; outline-offset: 2px; }
.kr-mid { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.kr-pct { font-size: 12px; font-weight: 700; width: 40px; text-align: right; }
.kr-ctrl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kr-label { font-size: 12px; color: var(--muted); }
.kr-num { width: 80px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; }
.kr-note { flex: 1; min-width: 140px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; }
.kr-hist { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--line); font-size: 12.5px; color: var(--muted); }

/* 이니셔티브 (KR 아래 실행 항목) */
.ini-block { margin-top: 10px; padding-left: 10px; border-left: 3px solid #dbe7f5; }
.ini-head { font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.ini { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.ini-check { width: 14px; height: 14px; flex: none; cursor: pointer; }
.ini-title { flex: 1; border: 0; font-size: 13px; padding: 2px 0; background: transparent; min-width: 0; }
.ini-title:focus { outline: 2px solid #bfdbfe; outline-offset: 2px; }
.ini-due {
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--muted);
  padding: 1px 3px;
  background: transparent;
  flex: none;
}
.ini:hover .ini-due { border-color: var(--line); }
.ini-due.late { color: #b91c1c; font-weight: 700; }
.ini-tilde { font-size: 12.5px; color: var(--muted); flex: none; }
.ini.done .ini-title { text-decoration: line-through; color: var(--muted); }
.ini.dropped { opacity: 0.5; }
.ini-add { margin-top: 4px; }
.ini-add input {
  width: 100%;
  border: 1px dashed var(--line);
  border-radius: 4px;
  font-size: 12px;
  padding: 4px 8px;
  background: var(--surface2);
}
.ini-add input:focus { outline: none; border-style: solid; border-color: var(--accent); background: var(--card); }

.kr-add { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.kr-add input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; }
.kr-add input:first-child { flex: 1; min-width: 200px; }
.kr-add input[type="number"] { width: 76px; }

@media (max-width: 760px) {
  .okr-summary { grid-template-columns: repeat(2, 1fr); }
}

/* 목록 */

.loglist { display: flex; flex-direction: column; gap: 8px; }
.logcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.logcard:hover { border-color: var(--accent); }
.logcard .d { font-weight: 700; width: 130px; flex: none; }
.logcard .s { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logcard .cnt { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

.dirlist { display: flex; flex-direction: column; gap: 6px; }
.dircard { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.dircard .hist { font-size: 12px; color: var(--muted); margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--line); }

.nolog {
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 28px;
  text-align: center;
}
.preview { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: left; }
.preview li { margin: 2px 0; }

/* ─────────────────────────── 인쇄 */

@media print {
  @page { size: A4; margin: 12mm; }
  body.has-statusbar { padding-bottom: 0 !important; }
  body { background: #fff; font-size: 12.5px; }
  .no-print, .topbar, .rail, .datebar, .addrow, .del, .block-head button { display: none !important; }
  #appRoot, body.rail-pinned #appRoot { padding-left: 0 !important; }
  .tab-panel { padding: 0; max-width: none; }
  .sheet { border: 0; padding: 0; }
  .sheet-title { font-size: 15px; }
  .row, .rowhead { grid-template-columns: 30px 1fr 124px 104px; }
  .row > *:last-child, .rowhead > *:last-child { display: none; }
  .row textarea { color: #000 !important; }
  .gauge { width: 54px; height: 13px; }
  .gauge-num { font-size: 9px; line-height: 11px; }
  /* 인쇄물에는 접힌 일정까지 모두 나오게 */
  #weekBlock.collapsed #weekGrid { display: grid !important; }
  /* 인쇄물에는 접어둔 지시사항도 모두 나오게 */
  #dirBlock.collapsed #directiveList { display: block !important; }
  #dirBlock #dirCount { display: none; }
  .week-day .week-ev.extra { display: -webkit-box !important; }
  .week-ev { -webkit-line-clamp: 3; }
  .week-day { min-height: 0; }
  .week-ev { font-size: 9px; }
  .week-day .wd { padding: 2px 4px; font-size: 11.5px; }
  #tab-list, #tab-directives, #tab-calendar, #tab-okr { display: none !important; }
}

/* ─────────────────────────── 다크 모드 세부 보정 */

:root[data-theme='dark'] .dot,
:root[data-theme='auto'] .dot { box-shadow: 0 0 0 2px var(--card) inset; }

:root[data-theme='dark'] .gauge-num,
:root[data-theme='auto'] .gauge-num { color: var(--ink); text-shadow: 0 0 3px var(--card), 0 0 3px var(--card); }

:root[data-theme='dark'] .badge.done,
:root[data-theme='auto'] .badge.done { background: #14532d; border-color: #166534; color: #bbf7d0; }

:root[data-theme='dark'] .okr-badge.good,
:root[data-theme='auto'] .okr-badge.good { background: #14532d; color: #bbf7d0; }
:root[data-theme='dark'] .okr-badge.warn,
:root[data-theme='auto'] .okr-badge.warn { background: #452c05; color: #fde68a; }
:root[data-theme='dark'] .okr-badge.risk,
:root[data-theme='auto'] .okr-badge.risk { background: #4c1414; color: #fecaca; }
:root[data-theme='dark'] .okr-badge,
:root[data-theme='auto'] .okr-badge { background: var(--surface2); color: var(--muted); }

:root[data-theme='dark'] .row textarea:focus,
:root[data-theme='dark'] .row input:focus,
:root[data-theme='dark'] .row select:focus,
:root[data-theme='auto'] .row textarea:focus,
:root[data-theme='auto'] .row input:focus,
:root[data-theme='auto'] .row select:focus { outline-color: #1d4ed8; }

:root[data-theme='dark'] .err,
:root[data-theme='auto'] .err { color: #fca5a5; }

:root[data-theme='dark'] .carry.out,
:root[data-theme='auto'] .carry.out { color: #4ade80; }

:root[data-theme='dark'] .m-head.sun,
:root[data-theme='auto'] .m-head.sun,
:root[data-theme='dark'] .m-day.sun .m-num,
:root[data-theme='auto'] .m-day.sun .m-num { color: #fca5a5; }
:root[data-theme='dark'] .m-head.sat,
:root[data-theme='auto'] .m-head.sat,
:root[data-theme='dark'] .m-day.sat .m-num,
:root[data-theme='auto'] .m-day.sat .m-num { color: #93c5fd; }

:root[data-theme='dark'] .ini-due.late,
:root[data-theme='auto'] .ini-due.late { color: #fca5a5; }

:root[data-theme='dark'] .okr-card:hover,
:root[data-theme='auto'] .okr-card:hover { box-shadow: 0 2px 10px var(--shadow); }

/* 인쇄는 항상 밝은 색으로 */
@media print {
  :root {
    --line: #c9d4e0;
    --grid: #b6c2d1;
    --head: #dbe7f5;
    --ink: #1b2430;
    --ink2: #33445a;
    --muted: #6b7785;
    --faint: #c3ccd6;
    --accent: #0b3486;
    --accent-soft: #e9eefb;
    --bg: #fff;
    --card: #fff;
    --surface2: #fafbfc;
    --track: #e6ebf1;
    color-scheme: light;
  }
}

.theme-btn {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 이니셔티브 진행률 */
.ini-gauge { width: 54px; height: 14px; flex: none; }
.ini-gauge .gauge-num { font-size: 9px; line-height: 12px; }
.g-ini { overflow: hidden; }
.g-ini-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.55);
  mix-blend-mode: overlay;
}
:root[data-theme='dark'] .g-ini-fill,
:root[data-theme='auto'] .g-ini-fill { background: rgba(255, 255, 255, 0.35); }

/* 일지 안의 OKR 칸 */
.okr-mini { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.okr-mini-obj {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--head);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-top: 1px solid var(--line);
}
.okr-mini-obj:first-child { border-top: 0; }
.omo-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omo-pct { flex: none; }
.okr-mini-kr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.omk-title { flex: 1.2; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.omk-val { font-size: 12.5px; color: var(--muted); flex: none; width: 92px; }
.omk-note {
  flex: 1;
  min-width: 100px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  background: var(--card);
}
@media print {
  .omk-note { border: 0; }
}

/* ─────────────────────────── 오늘 일지 2단 배치 (좌: 주간 일정 / 우: 일지) */

.today-panel { max-width: none; padding: 16px 20px; }
.today-layout {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 1442px;
  margin: 0 auto;
}
.today-side { width: 560px; flex: none; position: sticky; top: 62px; display: flex; flex-direction: column; gap: 14px; }
.today-side .block { margin-bottom: 0; }
.today-main { flex: 1; min-width: 0; }

/* 사이드바에서는 주간 일정을 세로 목록으로 */
.today-side .week { grid-template-columns: 1fr; }
.today-side .week-day {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: stretch;
  border-left: 0;
  border-top: 1px solid var(--line);
  min-height: 0;
}
.today-side .week-day:first-child { border-top: 0; }
.today-side .week-day .wd {
  text-align: left;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
}
.today-side .week-evs { padding: 4px 6px; }
.today-side .week-ev { -webkit-line-clamp: 3; }
.today-side .week-none { text-align: left; padding: 4px 6px; }

/* 2단이 유지되려면 본문에 1180px 이 필요합니다. 그런데 화면 분기점은 '창' 기준이고
   왼쪽 레일이 그중 56px(고정하면 200px)을 먼저 가져갑니다 — 기준을 그만큼 올려야
   레일이 먹은 만큼을 창이 넓다고 잘못 세지 않습니다. 두 벌인 이유가 이것입니다. */
@media (max-width: 1400px) {
  .today-layout { flex-direction: column; align-items: stretch; }
  /* 세로로 쌓일 때는 일지가 먼저 — 옆 칸이 위에 오면 매번 스크롤해야 합니다 */
  .today-main { width: 100%; order: 1; }
  .today-side { width: 100%; position: static; order: 2; }
  .today-side .week { grid-template-columns: repeat(7, 1fr); }
  .today-side .week-day { display: block; border-left: 1px solid var(--line); border-top: 0; }
  .today-side .week-day .wd { text-align: center; border-right: 0; display: block; }
}
@media (max-width: 1544px) {
  body.rail-pinned .today-layout { flex-direction: column; align-items: stretch; }
  body.rail-pinned .today-main { width: 100%; order: 1; }
  body.rail-pinned .today-side { width: 100%; position: static; order: 2; }
  body.rail-pinned .today-side .week { grid-template-columns: repeat(7, 1fr); }
  body.rail-pinned .today-side .week-day { display: block; border-left: 1px solid var(--line); border-top: 0; }
  body.rail-pinned .today-side .week-day .wd { text-align: center; border-right: 0; display: block; }
}

@media print {
  /* 인쇄물에는 옆 칸을 넣지 않습니다 */
  .today-layout { display: block; max-width: none; }
  .today-side { display: none !important; }
}

/* ─────────────────────────── 업무요청 한눈에 (옆 칸의 표 둘)

   좁은 칸이라 한 칸에 넉넉히 담을 수 없습니다. 그래서 **칸마다 줄을 나누지 않고**
   격자 하나에 셀을 죽 넣습니다 — 그래야 머리줄과 칸이 정확히 맞습니다.
   같은 사람이 이어지면 이름을 되풀이하지 않습니다. */

/* **두 표가 같은 칸 나눔을 씁니다.** 서로 다르면 위아래로 놓았을 때 줄이 어긋나 보입니다.
   마지막 22px 은 '거두기(✕)' 자리인데, 받은 표에서는 비워 둡니다 — 비워야 줄이 맞습니다. */
.dirmini {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 58px 62px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  font-size: 12px;
  align-items: stretch;
}
/* 셀마다 높이를 맞춥니다 — align-self:center 로 두면 입력칸이 있는 줄만 높아져 어긋납니다 */
/* **줄은 `.row` 로 한 겹 감싸여 있습니다**(display:contents). 그래서 `.dirmini > .칸` 으로만
   적어두면 **머리줄에만 걸리고 데이터 줄에는 하나도 안 걸립니다** —
   기한이 두 줄로 접히고("4일 지"/"남"), 지난 기한이 빨갛지 않고, 긴 제목이 안 잘렸습니다
   (2026-09-01 · 사용자가 화면에서 짚어 알았습니다). 칸 규칙은 후손 선택자로 적습니다. */
.dirmini > div, .dirmini > .row > div {
  padding: 4px 6px;
  border-top: 1px solid var(--line);
  min-width: 0;
  display: flex;
  align-items: center;
}
.dirmini .h {
  border-top: 0;
  background: var(--head);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink2);
  justify-content: center;
  padding: 5px 4px;
}
.dirmini .h.left { justify-content: flex-start; }
.dirmini .who-c { font-weight: 700; color: var(--ink2); justify-content: center; font-size: 11.5px; text-align: center; }
.dirmini .who-c.can-edit { cursor: pointer; }
.dirmini .who-c.can-edit:hover { text-decoration: underline; color: var(--accent); }
.dirmini .c { overflow: hidden; }
.dirmini .c > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dirmini .d { justify-content: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink2); }
.dirmini .d.noneset { color: var(--faint); }
.dirmini .d.soon { color: var(--carry); font-weight: 700; }
.dirmini .d.over { color: #ef4444; font-weight: 700; }
.dirmini .d.can-edit { cursor: pointer; }
.dirmini .d.can-edit:hover { text-decoration: underline; }
.dirmini .s { justify-content: center; color: var(--muted); }
.dirmini .s.s-doing { color: var(--accent); font-weight: 700; }
.dirmini .x { justify-content: center; color: var(--faint); cursor: pointer; padding: 4px 2px; }
.dirmini .x:hover { color: #ef4444; }
.dirmini .none { grid-column: 1 / -1; justify-content: center; color: var(--muted); padding: 12px; }

/* 줄 하나 — display:contents 라 격자 칸은 그대로 맞으면서 줄 단위로 누를 수 있습니다.
   줄마다 상자를 씌우면 머리줄과 칸이 어긋납니다. */
.dirmini > .row { display: contents; }
.dirmini > .row > div { cursor: pointer; }
.dirmini > .row:hover > div { background: var(--surface2); }
/* 끝난 것 — 이레 동안 남겨 두되 챙길 일과 구별되게 */
.dirmini > .row.done > div { opacity: 0.5; }
.dirmini > .row.done > .c { text-decoration: line-through; }

/* 자세히 보는 판 — 표에는 제목만 두고, 내용과 결과는 여기서 읽고 적습니다 */
.dirdetail {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dd-box {
  width: min(560px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 48px var(--shadow);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dd-head { display: flex; align-items: baseline; gap: 8px; }
.dd-who { font-size: 13px; font-weight: 700; color: var(--accent); }
.dd-kind { font-size: 12px; color: var(--muted); }
.dd-head .spacer { flex: 1; }
.dd-field { display: flex; flex-direction: column; gap: 4px; }
.dd-field > label { font-size: 12px; color: var(--muted); }
.dd-field input, .dd-field select, .dd-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  padding: 6px 8px;
}
.dd-field textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
.dd-field .ro { padding: 6px 8px; background: var(--surface2); border-radius: 4px; color: var(--ink2); white-space: pre-wrap; min-height: 20px; }
.dd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 보내기 판의 갈래 제목 — 새로 나가는 것과 요청자만 옮기는 것을 눈으로 가릅니다 */
.dd-sec { margin: 10px 0 3px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.dd-foot { display: flex; gap: 8px; align-items: center; }
.dd-foot .spacer { flex: 1; }


/* 받는 사람 — 이름을 눌러 켜고 끄는 딱지. 여러 명을 고르면 사람마다 한 건씩 나갑니다 */
.dd-people { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-person {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 14px;
  padding: 4px 12px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.dd-person:hover { border-color: var(--accent); color: var(--accent); }
.dd-person.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
/* 몇 명에게 몇 건이 나가는지 — 누르기 전에 알려줍니다 */
.dd-people-note { margin-top: -6px; }
.dd-people-note.warn { color: var(--quip); } /* 이 앱에 --warn 은 없습니다 — 오렌지는 --quip 하나입니다 */

/* 받아쓴 글 — 클로바노트에서 옮겨온 회의 녹취. 접었다 폈다 합니다(길어서 늘 펼쳐 두면 표가 밀립니다) */
.mtg-tr { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface2); }
.mtg-tr-head { display: flex; align-items: center; gap: 8px; }
.mtg-tr-head .spacer { flex: 1; }
.mtg-tr-head .ghost.on { color: var(--accent); font-weight: 700; }
/* 클로바노트로 건너가는 링크 — 진짜 <a> 입니다(가운데 클릭·[새 탭으로 열기] 가 다 됩니다).
   .ghost·.small 은 button 에만 걸려 있어 여기서 따로 입힙니다. */
.mtg-clova {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink2);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.mtg-clova:hover { border-color: var(--accent); color: var(--accent); }
/* 받아쓰기 도구 고르개 — 두 단추가 한 덩이로 보이게 붙여 둡니다(고른 쪽만 진하게).
   목록(select)이 아니라 단추인 것은, 고를 것이 둘뿐이라 펼치는 손이 아깝기 때문입니다. */
.mtg-stt-pick { display: inline-flex; gap: 0; }
.mtg-stt-btn {
  font-size: 12px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 0;
  white-space: nowrap;
}
.mtg-stt-btn:first-child { border-radius: 6px 0 0 6px; }
.mtg-stt-btn:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.mtg-stt-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
/* 고른 쪽 테두리가 옆 단추에 가리지 않게 */
.mtg-stt-btn.on + .mtg-stt-btn { border-left: none; }
.mtg-stt-when { margin-top: 2px; font-size: 12px; }
.mtg-tr-body { margin-top: 8px; }
.mtg-tr-body.hidden { display: none; }
/* 정리하는 길 — 받아쓴 글 칸 바로 아래, 차례대로 읽히게 */
.mtg-tr-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mtg-tr-acts .who { flex: 1; min-width: 160px; }
.mtg-prompt { width: 100%; box-sizing: border-box; font-size: 12px; line-height: 1.5; }
.mtg-tr-text { width: 100%; box-sizing: border-box; font-size: 12.5px; line-height: 1.55; }
/* 정리해서 들어온 줄 — 사람이 확인해야 하는 줄이라 왼쪽에 띠를 답니다 */
/* 딱지 자리 — 딱지가 없는 줄에도 늘 있습니다(칸이 줄마다 어긋나지 않게).
   '업무요청으로 보냄' 이 108px 이라 그만큼 잡아 둡니다. 딱지가 둘이면 이 안에서 접힙니다. */
.mtg-todo-flags { flex: 0 0 110px; display: flex; flex-wrap: wrap; gap: 3px; }
.mtg-todo.from-ai { border-left: 3px solid var(--quip); padding-left: 6px; }
/* 북토크 회차 — 받아쓴 글 칸과 뽑아온 할 일 줄. 회의 화면과 같은 표시를 씁니다. */
.bt-tr { margin: 10px 0 4px; }
.bt-todo.from-ai { border-left: 3px solid var(--quip); padding-left: 6px; }
.mtg-sent-flag { background: var(--accent); color: var(--on-accent); }

/* 업무요청으로 보내기 판 — 무엇이 누구에게 가는지 보고 누릅니다 */
.mtg-send-list { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow: auto; }
.mtg-send-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.mtg-send-row:hover { background: var(--surface2); }
.mtg-send-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 요청 뼈대 고르기 — 고른 것만 진하게 */
.dd-tpl { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-tpl .ghost.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.dd-qs { display: flex; flex-direction: column; gap: 12px; }

/* 주간 일정 — 날짜 칸의 [+] 와 입력줄 */
.week-day .wd { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.wd-text { cursor: pointer; }
.wd-text:hover { text-decoration: underline; }
.wd-add { width: 17px; height: 17px; font-size: 13px; opacity: 0; flex: none; }
.week-day:hover .wd-add { opacity: 1; }
.week-day.today .wd-add { opacity: 0.85; border-color: rgba(255, 255, 255, 0.6); background: transparent; color: #fff; }
.week-day.today .wd-add:hover { background: #fff; color: var(--accent); }
.week-add { margin-top: 3px; }
.week-add input {
  width: 100%;
  font-size: 12.5px;
  padding: 3px 5px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--card);
  outline: none;
}

/* 일지 OKR 칸 — 목표 줄의 진행률 막대 */
.okr-mini-obj .okr-bar { flex: 1; max-width: 260px; height: 7px; }
.omo-title { flex: 1.4; }
.omo-pct { width: 42px; text-align: right; }

/* Objective / KR 라벨 태그 */
.okr-tag {
  display: inline-block;
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.okr-tag.kr { background: var(--head); color: var(--ink2); border: 1px solid var(--line); }
.okr-tag.big { font-size: 12.5px; padding: 2px 8px; }
.okr-title-row { display: flex; align-items: center; gap: 8px; }
.okr-mini-obj .okr-tag, .okr-mini-kr .okr-tag { margin-right: 2px; }
.okr-kr-mini .okr-kr-title .okr-tag { margin-right: 3px; }

/* 메모를 앞으로, 게이지를 끝으로 */
.okr-mini-kr .omk-val { text-align: right; }
.okr-mini-kr .gauge { margin-left: 2px; }

/* ─────────────────────────── 프로젝트 */

.proj-kind {
  display: inline-block;
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--track);
  color: var(--ink2);
  vertical-align: middle;
  margin-right: 2px;
}
.proj-kind.big { font-size: 12.5px; padding: 3px 9px; }
.proj-kind.k-normal { background: #dbeafe; color: #1e40af; }
.proj-kind.k-adhoc { background: #fee2e2; color: #b91c1c; }
.proj-kind.k-long { background: #dcfce7; color: #166534; }
:root[data-theme='dark'] .proj-kind.k-normal,
:root[data-theme='auto'] .proj-kind.k-normal { background: #1e3a8a; color: #bfdbfe; }
:root[data-theme='dark'] .proj-kind.k-adhoc,
:root[data-theme='auto'] .proj-kind.k-adhoc { background: #4c1414; color: #fecaca; }
:root[data-theme='dark'] .proj-kind.k-long,
:root[data-theme='auto'] .proj-kind.k-long { background: #14532d; color: #bbf7d0; }

.okr-foot .late { color: #ef4444; font-weight: 700; }
.proj-meta { flex-wrap: wrap; gap: 8px; }
.proj-meta input[type='date'] {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 6px;
  background: var(--card);
  font-size: 12px;
}
.proj-meta input.late { color: #ef4444; font-weight: 700; }
.proj-meta .okr-bar { flex: 1; min-width: 120px; max-width: 320px; }

.proj-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  margin-bottom: 6px;
}
.proj-item.done .ini-title { text-decoration: line-through; color: var(--muted); }
.proj-item .ini-title { flex: 1; font-size: 13px; }

/* 글자 크기 조절 버튼 */
.zoom-group { display: inline-flex; gap: 2px; }
.zoom-btn { padding: 3px 7px; min-width: 34px; text-align: center; }
#zoomReset { min-width: 46px; }

@media print {
  /* 인쇄는 항상 기본 크기로 */
  :root { zoom: 1 !important; }
}

/* 프로젝트 카드 — 끌어서 순서 변경 */
.proj-card { cursor: grab; user-select: none; }
.proj-card:active { cursor: grabbing; }
.proj-card.dragging { opacity: 0.45; border-color: var(--accent); transform: scale(0.99); }
.proj-card input, .proj-card textarea { user-select: text; }
.okr-kr-title.done { text-decoration: line-through; color: var(--muted); }

/* ─────────────────────────── 프로젝트 대시보드 */

.ph-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ph-crumb { font-size: 12.5px; color: var(--muted); }
.ph-title { font-size: 30px; font-weight: 800; margin: 2px 0 0; letter-spacing: -0.02em; }
.ph-new {
  border: 0;
  border-radius: 8px;
  background: #c6f24e;
  color: #17210b;
  font-weight: 700;
  padding: 9px 16px;
  cursor: pointer;
}
.ph-new:hover { filter: brightness(0.95); }

.ph-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ph-pills { display: flex; gap: 4px; }
.ph-pill {
  border: 1px solid transparent;
  background: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.ph-pill:hover { background: var(--surface2); }
.ph-pill.on { background: var(--ink); color: var(--card); font-weight: 700; }
.ph-pill-n { opacity: 0.7; margin-left: 2px; }
.ph-select, .ph-search {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--card);
  font-size: 13px;
}
.ph-search { min-width: 200px; }

.ph-section { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.ph-recent-wrap { margin-bottom: 18px; }
.ph-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ph-recent-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--card);
  cursor: pointer;
}
.ph-recent-card:hover { border-color: var(--accent); }
.ph-recent-name { font-size: 13.5px; font-weight: 600; }
.ph-recent-txt { min-width: 0; }
.ph-recent-name, .ph-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ph-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  flex: none;
}
.ph-icon.small { width: 30px; height: 30px; font-size: 13px; }

.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ph-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  cursor: grab;
  user-select: none;
  display: flex;
  flex-direction: column;
}
.ph-card:hover { box-shadow: 0 4px 14px var(--shadow); }
.ph-card.off { opacity: 0.62; }
.ph-card.dragging { opacity: 0.45; border-color: var(--accent); }
.ph-card-top { padding: 14px 16px 16px; min-height: 116px; display: flex; flex-direction: column; gap: 6px; }
.ph-name { font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.ph-meta { font-size: 12px; opacity: 0.78; margin-top: auto; }
.ph-meta.late { color: #ef4444; opacity: 1; font-weight: 700; }

.ph-card-bottom { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.ph-prog-line { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.ph-prog-pct { font-weight: 700; color: var(--ink); }
.ph-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }

/* 카드 맨 아래 — 함께하는 사람 */
.ph-who {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.ph-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface2);
  color: var(--ink2);
  border: 1px solid var(--line);
}
.ph-avatar.owner { background: var(--accent); color: #fff; border-color: transparent; }
.ph-who-solo { font-size: 11.5px; color: var(--muted); margin-left: 2px; }
.ph-status {
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  white-space: nowrap;
}
.ph-status.hold { background: #fef3c7; color: #92400e; }
.ph-status.done { background: var(--track); color: var(--muted); }
.ph-status.dropped { background: var(--track); color: var(--muted); }
:root[data-theme='dark'] .ph-status,
:root[data-theme='auto'] .ph-status { background: #14532d; color: #bbf7d0; }
:root[data-theme='dark'] .ph-status.hold,
:root[data-theme='auto'] .ph-status.hold { background: #452c05; color: #fde68a; }
:root[data-theme='dark'] .ph-status.done,
:root[data-theme='dark'] .ph-status.dropped,
:root[data-theme='auto'] .ph-status.done,
:root[data-theme='auto'] .ph-status.dropped { background: var(--track); color: var(--muted); }
.ph-swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; flex: none; }

/* ─────────────────────────── 프로젝트 상세: 머리줄·보기 전환 */

.pd-bar { display: flex; align-items: center; gap: 10px; padding: 4px 0 12px; flex-wrap: wrap; }
.pd-name { font-size: 17px; font-weight: 800; }
.pd-views { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pd-view {
  border: 0;
  background: none;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.pd-view:hover { color: var(--ink); }
.pd-view.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }

/* ─────────────────────────── 칸반 보드 */

.pd-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; }
.kb-col { width: 268px; flex: none; display: flex; flex-direction: column; }
.kb-col.over .kb-list { background: var(--accent-soft); border-radius: 8px; }
.kb-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 8px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 10px;
}
.kb-title { flex: 1; border: 0; background: none; font-size: 14.5px; font-weight: 700; padding: 2px 0; min-width: 0; }
.kb-title:focus { outline: 2px solid #bfdbfe; outline-offset: 2px; }
.kb-count { font-size: 12.5px; color: var(--muted); }
.kb-more { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 2px; }
.kb-more:hover { color: #ef4444; }

.kb-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; padding: 2px; }
.kb-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 10px 12px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kb-card:hover { border-color: var(--accent); }
.kb-card.dragging { opacity: 0.45; border-style: dashed; }
.kb-card.done .kb-card-title { text-decoration: line-through; color: var(--muted); }
.kb-card-top { display: flex; align-items: flex-start; gap: 8px; }
.kb-card-title { font-size: 13.5px; line-height: 1.35; }
.kb-bar { height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.kb-bar-fill { height: 100%; background: var(--accent); }
/* ─────────────────────────── 아이디어뱅크 */

.idea-new { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.idea-new input[type='text'],
.idea-new #ideaTitle {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
}
.idea-share { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* ---- 거품 보기 ----
   아이디어는 늘어놓는 것보다 떠 있는 쪽이 어울립니다.
   반응을 받을수록 커지고(자바스크립트에서 지름 계산) 색이 뜨거워집니다. */

.idea-field {
  display: flex;
  flex-wrap: wrap;
  /* 거품마다 크기가 달라서 위쪽을 맞추면 아래가 들쭉날쭉합니다 — 가운데 선에 맞춥니다 */
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 4px 2px 8px;
}
.idea-bubble {
  position: relative;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--ink2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px;
  cursor: pointer;
  text-align: center;
  /* background 는 전환 대상에서 뺍니다 — 색을 변수로 쓰기 때문에, 테마를 바꿨을 때
     전환이 다시 계산되지 않아 옛 색에 멈춰 있습니다(밝은 화면 색이 그대로 남습니다). */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.idea-bubble:hover { transform: translateY(-3px); box-shadow: 0 6px 16px var(--shadow); }
.idea-bubble.open { box-shadow: 0 0 0 3px var(--accent); }

/* 반응이 쌓일수록 뜨겁게 */
.idea-bubble.cool { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.idea-bubble.warm { background: #4c1d95; border-color: #7c3aed; color: #ede9fe; }
.idea-bubble.hot { background: #7c2d12; border-color: #f97316; color: #ffedd5; }

/* 상태는 테두리로 — 색(온도)과 겹치지 않게 */
.idea-bubble.adopted { border-width: 3px; border-color: #16a34a; }
.idea-bubble.hold { opacity: 0.5; }
.idea-bubble.review { border-style: dashed; }

.ib-title {
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 한글은 띄어쓰기에서 끊어야 읽힙니다. keep-all 이 없으면 '설명회 프 / 로세스 관' 처럼
     단어 중간이 잘립니다. 한 낱말이 칸보다 길 때만 어쩔 수 없이 끊습니다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.ib-foot { display: flex; gap: 6px; font-size: 11px; opacity: 0.9; }
.ib-like.on { color: #fca5a5; font-weight: 700; }
.ib-quiet { opacity: 0.6; }
/* 공개 여부는 눈에 들어와야 합니다 — 실수로 공개한 것을 알아채는 게 목적이라 흐리게 두지 않습니다 */
.ib-lock { position: absolute; top: 9px; right: 11px; font-size: 12px; opacity: 0.9; }
.ib-lock.open { opacity: 0.5; }

.idea-detail {
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--card);
  margin-top: 6px;
  overflow: hidden;
}
.idea-detail-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--head); flex-wrap: wrap; }
.idea-detail-title { flex: none; font-size: 14px; }
.idea-lock { font-size: 11.5px; color: var(--muted); }

.idea-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.idea-row { border: 1px solid var(--line); border-radius: 8px; background: var(--card); overflow: hidden; }
.idea-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; }
.idea-head:hover { background: var(--surface2); }
.idea-title { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idea-row.adopted .idea-title { font-weight: 700; }
.idea-row.hold .idea-title { color: var(--muted); }
.idea-meta { flex: none; font-size: 11.5px; }

.idea-badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 8px;
  background: var(--surface2);
  color: var(--ink2);
}
.idea-badge.review { background: #78350f; color: #fde68a; }
.idea-badge.adopted { background: #14532d; color: #bbf7d0; }
.idea-badge.hold { background: var(--track); color: var(--muted); }

.idea-new select,
.idea-acts select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 12.5px;
}
.idea-cat {
  flex: none;
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1px 7px;
  color: var(--muted);
}
.idea-proj { flex: none; font-size: 11.5px; color: var(--accent); cursor: pointer; white-space: nowrap; }
.idea-proj:hover { text-decoration: underline; }
.idea-tpl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 구체화 — 왼쪽 질문은 고정 항목이라 지워지지 않고, 오른쪽 칸에 답만 적습니다 */
.idea-detail-form { display: flex; flex-direction: column; gap: 6px; }
.idea-qa { display: flex; gap: 8px; align-items: flex-start; }
.idea-q {
  flex: none;
  width: 176px;
  padding: 7px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink2);
  word-break: keep-all;
}
.idea-a {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 9px;
  background: var(--surface2);
  color: var(--ink);
  font-size: 13px;
  resize: vertical;
}
.idea-save { display: flex; align-items: center; gap: 8px; }
/* 뼈대 이름 — 여러 개 붙였을 때 어디서 어디까지인지 보이게 */
.idea-tpl-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
  border-left: 3px solid var(--accent);
  padding-left: 7px;
}

@media (max-width: 640px) {
  .idea-qa { flex-direction: column; gap: 3px; }
  .idea-q { width: auto; padding: 0; }
}

/* 좋아요·댓글 */
.idea-react { flex: none; font-size: 11.5px; color: var(--muted); }
.idea-react.on { color: #ef4444; }
.idea-react-bar { display: flex; align-items: center; gap: 6px; padding-top: 4px; border-top: 1px solid var(--line); }
.idea-react-bar .on { color: #ef4444; border-color: #ef4444; }
.idea-readnote { white-space: pre-wrap; font-size: 13px; color: var(--ink2); }

.idea-comments { display: flex; flex-direction: column; gap: 4px; }
.idea-comment { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; }
.idea-comment-who { flex: none; font-weight: 700; color: var(--ink2); }
.idea-comment-body { flex: 1; min-width: 0; color: var(--ink); word-break: break-word; }
.idea-comment .del { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 12px; }
.idea-comment .del:hover { color: #ef4444; }

.idea-comment-new { display: flex; gap: 6px; }
.idea-comment-new input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 9px;
  background: var(--card);
  color: var(--ink);
  font-size: 12.5px;
}

.idea-body { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.idea-note {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--surface2);
  color: var(--ink);
  font-size: 13px;
  resize: vertical;
}
.idea-acts { display: flex; align-items: center; gap: 6px; }
.idea-acts select { border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; background: var(--card); color: var(--ink); font-size: 12.5px; }

/* 프로젝트 필터·정렬 */
.pd-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.pd-filter select,
.pd-filter .pf-q {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 12.5px;
}
.pd-filter .pf-q { flex: 1; min-width: 140px; max-width: 260px; }

/* ─────────────────────────── 프로젝트 캘린더 */

.cal-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cal-title { font-size: 15px; min-width: 116px; text-align: center; }

.cal-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.cal-head {
  background: var(--head);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
}
.cal-head.sun { color: #ef4444; }
.cal-head.sat { color: #3b82f6; }

.cal-cell {
  background: var(--card);
  min-height: 96px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-cell.other { background: var(--surface2); }
.cal-cell.other .cal-daynum { color: var(--faint); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-daynum { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink2); font-weight: 700; }
.cal-today-chip {
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 700;
}

.cal-chip {
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.cal-chip.done { background: #16a34a; }
.cal-chip.late { background: #ef4444; }

/* ─────────────────────────── 프로젝트 타임라인
   하루 한 칸으로 그리고 가로로 넘깁니다. 이름 칸은 스크롤해도 왼쪽에 붙어 있습니다.
   (OKR 타임라인이 쓰는 .g-* 와는 별개 클래스입니다) */

.tl-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.tl-range {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 12.5px;
}

.tl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.tl-inner { position: relative; min-width: max-content; }

.tl-head { display: flex; position: sticky; top: 0; z-index: 3; background: var(--head); border-bottom: 1px solid var(--line); }
.tl-label {
  flex: none;
  width: 180px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 4px 8px;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-head .tl-label { background: var(--head); }
.tl-track { flex: none; position: relative; }

.tl-months { display: flex; }
.tl-month {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
  padding: 3px 4px;
  border-left: 1px solid var(--line);
  box-sizing: border-box;
}
.tl-days { display: flex; }
.tl-day {
  flex: none;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 0 3px;
  box-sizing: border-box;
}
.tl-day.off { color: var(--faint); }
.tl-day.today { color: var(--accent); font-weight: 700; }

.tl-body { position: relative; }
.tl-bg { position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 0; }
.tl-weekend { position: absolute; top: 0; bottom: 0; background: var(--surface2); opacity: 0.55; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0.8; }

.tl-row { display: flex; align-items: center; min-height: 26px; position: relative; z-index: 1; }
.tl-row.tl-sec .tl-label { font-weight: 700; color: var(--ink2); }
.tl-item-label { color: var(--muted); padding-left: 18px; }

.tl-bar {
  position: absolute;
  top: 4px;
  height: 17px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  line-height: 17px;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}
.tl-bar.done { background: #16a34a; }
.tl-bar.late { background: #ef4444; }
.tl-bar.todo { background: var(--accent); }

/* 멤버 관리 */
.pmem-add { display: flex; gap: 6px; margin-top: 10px; }
.pmem-add select {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--card);
  color: var(--ink);
}
/* 보기 전용 멤버에게는 고치는 단추를 감춥니다(서버도 막지만, 눌러보고 실패하는 건 나쁜 경험입니다) */
#projDetail.is-viewer .kb-add,
#projDetail.is-viewer .kr-add,
#projDetail.is-viewer #projToLog { display: none; }

/* ─────────────────────────── 프로젝트 대시보드 */

.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.dash-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.dash-tile.warn { border-color: #ef4444; }
.dash-tile-label { font-size: 12px; color: var(--muted); }
.dash-tile-value { font-size: 24px; line-height: 1.15; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}
.dash-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px 14px;
}
.dash-panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }

.dash-bars { display: flex; flex-direction: column; gap: 7px; }
.dash-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dash-bar-label { flex: none; width: 92px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-track { flex: 1; display: flex; height: 14px; background: var(--track); border-radius: 3px; overflow: hidden; }
.dash-bar-done { background: var(--accent); }
.dash-bar-rest { background: var(--faint); opacity: 0.5; }
.dash-bar-num { flex: none; width: 46px; text-align: right; color: var(--muted); font-size: 12px; }

.dash-burn-svg { width: 100%; height: 90px; color: var(--accent); display: block; }
.dash-burn-foot { display: flex; justify-content: space-between; margin-top: 4px; }

.dash-risk { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.dash-risk-row { color: var(--ink2); }
.dash-risk-row.late { color: #ef4444; font-weight: 600; }

.kb-card-foot { display: flex; align-items: center; gap: 6px; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
/* 담당자 — 카드 안에서는 자리를 적게 차지하도록 테두리 없이 */
.kb-assignee {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink2);
  font-size: 11.5px;
  padding: 0;
  cursor: pointer;
}
.ini-assignee {
  flex: none;
  width: 96px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink2);
  font-size: 12px;
  padding: 4px 6px;
}
.kb-card-foot .late { color: #ef4444; font-weight: 700; }
.kb-pct { font-weight: 700; }

.kb-add {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: none;
  color: var(--muted);
  padding: 8px;
  cursor: pointer;
  font-size: 12.5px;
}
.kb-add:hover { border-color: var(--accent); color: var(--accent); }
.kb-input input {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--card);
  outline: none;
}
.kb-addcol { width: 220px; flex: none; padding-top: 40px; }
.kb-addcol-btn {
  width: 100%;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: none;
  color: var(--muted);
  padding: 12px;
  cursor: pointer;
}
.kb-addcol-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ─────────────────────────── 회원·센터 관리 */

.adm-users, .adm-centers { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.adm-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 100px auto;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
}
.adm-row:first-child { border-top: 0; }
.adm-head { background: var(--head); color: var(--ink2); font-size: 12.5px; font-weight: 700; }
.adm-row.off { opacity: 0.55; }
.adm-name { font-weight: 600; }
.adm-row select, .adm-row input {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--card);
  width: 100%;
}
.adm-row select:disabled, .adm-row button:disabled { opacity: 0.45; cursor: not-allowed; }
.adm-acts { display: flex; gap: 6px; justify-content: flex-end; }
.adm-center-row { grid-template-columns: 1fr 100px; }
.adm-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  margin-bottom: 12px;
  background: var(--accent-soft);
}
.adm-form input, .adm-form select { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; background: var(--card); }

/* ─────────────────────────── 조직 마인드맵 */

.mm { overflow-x: auto; padding: 12px 4px 18px; }
.mm-node { display: flex; align-items: flex-start; }
.mm-sub {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 34px;
  margin-left: 12px;
  position: relative;
}
.mm-sub::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--line);
}
.mm-sub > .mm-node { position: relative; }
.mm-sub > .mm-node::before {
  content: '';
  position: absolute;
  left: -34px;
  top: 22px;
  width: 34px;
  height: 2px;
  background: var(--line);
}

.mm-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 10px 12px;
  min-width: 210px;
  max-width: 280px;
  flex: none;
}
.mm-card.off { opacity: 0.55; }
.mm-card.over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mm-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.mm-name { font-weight: 700; font-size: 14px; cursor: pointer; }
.mm-kind {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--track);
  color: var(--ink2);
}
.mm-kind.k-최고관리 { background: #ede9fe; color: #5b21b6; }
.mm-kind.k-센터 { background: #dbeafe; color: #1e40af; }
.mm-kind.k-관 { background: #dcfce7; color: #166534; }
.mm-kind.k-팀 { background: #ffedd5; color: #9a3412; }
.mm-kind.k-과 { background: #fce7f3; color: #9d174d; }
:root[data-theme='dark'] .mm-kind.k-최고관리, :root[data-theme='auto'] .mm-kind.k-최고관리 { background: #3b2a63; color: #ddd6fe; }
:root[data-theme='dark'] .mm-kind.k-센터, :root[data-theme='auto'] .mm-kind.k-센터 { background: #1e3a8a; color: #bfdbfe; }
:root[data-theme='dark'] .mm-kind.k-관, :root[data-theme='auto'] .mm-kind.k-관 { background: #14532d; color: #bbf7d0; }
:root[data-theme='dark'] .mm-kind.k-팀, :root[data-theme='auto'] .mm-kind.k-팀 { background: #4a2508; color: #fed7aa; }
:root[data-theme='dark'] .mm-kind.k-과, :root[data-theme='auto'] .mm-kind.k-과 { background: #500f30; color: #fbcfe8; }

.mm-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 8px; }
.mm-chip {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  cursor: grab;
  user-select: none;
  white-space: nowrap;
}
.mm-chip:active { cursor: grabbing; }
.mm-chip.me { border-color: var(--accent); font-weight: 700; }
.mm-chip.off { opacity: 0.5; text-decoration: line-through; }

.mm-acts { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.mm-btn {
  border: 1px dashed var(--line);
  background: none;
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--muted);
  padding: 2px 8px;
  cursor: pointer;
}
.mm-btn:hover { border-color: var(--accent); color: var(--accent); }
.mm-btn.dim:hover { border-color: #ef4444; color: #ef4444; }

.mm-form { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.mm-form input, .mm-form select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12.5px;
  background: var(--card);
  min-width: 0;
  flex: 1;
}

.mm-menu {
  position: absolute;
  z-index: 60;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 버튼 넉 줄([비번 초기화][계정 중지][겸직 추가][삭제])이 한 줄에 들어가는 폭입니다.
     220px 이었을 때는 제목이 긴 사람(마케팅팀 > 미디어)만 판이 넓어져 제대로 보이고,
     소속이 짧은 사람은 판이 좁아 글자가 '비번 / 초기 / 화' 처럼 세 줄로 접혔습니다. */
  min-width: 300px;
}
.mm-menu-title { font-size: 12.5px; font-weight: 700; }
/* 글자를 접는 대신 줄을 내립니다 — 아주 좁은 화면에서도 단추 모양은 지킵니다 */
.mm-menu-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mm-menu button { white-space: nowrap; }
.mm-menu-row select { flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; background: var(--card); }

/* ─────────────────────────── 관리: 좌측 회원 목록 + 위→아래 조직도 */

.adm-layout { display: flex; gap: 16px; align-items: flex-start; }
.adm-side {
  width: 250px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 10px;
  position: sticky;
  top: 62px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 90px);
}
.adm-side.over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.adm-side input[type='search'] {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  background: var(--card);
}
.adm-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.adm-sec { font-size: 11.5px; color: var(--muted); font-weight: 700; margin: 6px 0 2px; }
.adm-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'name lv' 'unit unit';
  gap: 0 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 9px;
  cursor: grab;
  user-select: none;
  background: var(--card);
}
.adm-item:hover { border-color: var(--accent); }
.adm-item:active { cursor: grabbing; }
.adm-item.me { border-color: var(--accent); }
.adm-item.off { opacity: 0.5; }
.adm-item-name { grid-area: name; font-weight: 600; font-size: 13.5px; }
.adm-item-lv { grid-area: lv; font-size: 11px; color: var(--accent); font-weight: 700; align-self: center; }
.adm-item-unit { grid-area: unit; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-hint { font-size: 11px; line-height: 1.5; margin: 2px 0 0; }
.adm-main { flex: 1; min-width: 0; overflow-x: auto; }

/* 위 → 아래 조직도 */
/* 조직도는 지도처럼 끌어서 봅니다 — 조직이 커지면 스크롤막대만으로는 찾기 어렵습니다.
   가로·세로 모두 이 안에서 움직이므로 왼쪽 회원 목록은 그대로 있습니다. */
.oc {
  padding: 8px 4px 20px;
  overflow: auto;
  overscroll-behavior: contain;
  /* 높이를 내용에 맡기면 조직이 깊어질 때마다 상자가 늘어나 페이지가 통째로 길어집니다.
     칸을 고정해 두면 넘치는 만큼은 상자 안에서 위아래로 끌어 봅니다. */
  height: calc(100vh - 200px);
  min-height: 340px;
  cursor: grab;
  /* 끌면 조직도가 움직여야 하는데 글자가 잡히면 그쪽이 먼저 먹습니다 — 그림이라 선택할 일이 없습니다 */
  user-select: none;
  -webkit-user-select: none;
}
.oc.panning { cursor: grabbing; }
/* 배율 겉옷 — 확대한 만큼 자리를 차지해야 끌 수 있는 거리가 생깁니다 */
.oc-zoom { position: relative; }
.oc-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.oc-tools .oc-hint { margin-left: 6px; }
#ocPct { min-width: 42px; text-align: center; }
.oc.panning * { pointer-events: none; } /* 끄는 동안 카드에 걸리지 않게 */
/* 배율 겉옷이 폭을 정해도 그림 자체는 늘 제 크기여야 합니다 —
   min-width 만 두면 겉옷이 넓어질 때 따라 늘어나 배율 계산이 밀립니다. */
.oc-root { display: flex; justify-content: flex-start; gap: 40px; width: max-content; }
.oc-node { display: flex; flex-direction: column; align-items: center; position: relative; }
.oc-stub { width: 2px; height: 16px; background: var(--grid); }
.oc-kids {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 16px;
  position: relative;
}
/* 자식마다 위로 올라가는 선 */
.oc-kids > .oc-node::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  width: 2px;
  height: 16px;
  background: var(--grid);
}
/* 형제를 잇는 가로선 */
.oc-kids > .oc-node::after {
  content: '';
  position: absolute;
  top: -16px;
  height: 2px;
  background: var(--grid);
  left: 0;
  right: 0;
}
.oc-kids > .oc-node:first-child::after { left: 50%; }
.oc-kids > .oc-node:last-child::after { right: 50%; }
.oc-kids > .oc-node:only-child::after { display: none; }

.oc .mm-card { min-width: 180px; max-width: 240px; }

.ghost.danger { color: #ef4444; border-color: #ef4444; }
.ghost.danger:hover { background: #ef4444; color: #fff; }

@media (max-width: 900px) {
  .adm-layout { flex-direction: column; }
  .adm-side { width: 100%; position: static; max-height: 300px; }
}

/* ─────────────────────────── 관리: 전체 폭 사용 + 좁은 세로형 카드 */

#tab-admin { max-width: none; padding: 12px 10px 20px; }
#tab-admin .adm-layout { gap: 10px; }
#tab-admin .adm-side {
  width: 186px;
  padding: 8px;
  border-radius: 8px;
}
.adm-item { padding: 4px 8px; }
.adm-item-name { font-size: 12.5px; }
.adm-item-unit { font-size: 10.5px; }
.adm-hint { display: none; }

/* 조직도 카드 — 세로형(버튼을 아래로 쌓음), 폭 최소화 */
.oc { padding: 4px 0 14px; }
.oc-root { gap: 14px; }
.oc-kids { gap: 8px; padding-top: 14px; }
.oc-kids > .oc-node::before { top: -14px; height: 14px; }
.oc-kids > .oc-node::after { top: -14px; }
.oc-stub { height: 14px; }

.oc .mm-card {
  min-width: 0;
  width: 128px;
  max-width: 128px;
  padding: 7px 8px 8px;
  border-radius: 9px;
}
.oc .mm-head { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 4px; }
.oc .mm-name { font-size: 12.5px; line-height: 1.25; word-break: keep-all; }
.oc .mm-kind { font-size: 9.5px; padding: 0 6px; }
.oc .mm-chips { gap: 3px; }
.oc .mm-chip { font-size: 10.5px; padding: 1px 7px; }

/* + 버튼 세로 배열 */
.oc .mm-acts { flex-direction: column; align-items: stretch; gap: 3px; margin-top: 6px; }
.oc .mm-btn { font-size: 10.5px; padding: 2px 6px; text-align: center; }

.oc .mm-form { flex-direction: column; }
.oc .mm-form input, .oc .mm-form select { width: 100%; flex: none; font-size: 11.5px; }

/* 조직도 카드 폭 축소 — 한글 5자 기준 */
.oc .mm-card {
  width: 84px;
  max-width: 84px;
  padding: 6px 6px 7px;
}
.oc .mm-name { font-size: 12px; line-height: 1.3; word-break: keep-all; overflow-wrap: break-word; }
.oc .mm-kind { font-size: 9px; padding: 0 5px; }
.oc .mm-chip { font-size: 10px; padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.oc .mm-btn { font-size: 10px; padding: 2px 4px; }
.oc-root { gap: 10px; }
.oc-kids { gap: 6px; }

/* 조직도 카드 — 클릭해야 버튼이 펼쳐짐, 칩 접기 */
.oc .mm-card.clickable { cursor: pointer; }
.oc .mm-acts { display: none; }
.oc .mm-card.acts-open .mm-acts { display: flex; }
.oc .mm-card.acts-open { border-color: var(--accent); }
.mm-more-chip {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 10px;
  padding: 1px 4px;
  cursor: pointer;
}
.mm-more-chip:hover { text-decoration: underline; }

/* 조직도 전체를 가운데로 */
.oc-root { justify-content: center; }
.oc-kids { justify-content: center; }

/* 겸직 칩 — 점선 테두리로 주 소속과 구분 */
.mm-chip.sub { border-style: dashed; opacity: 0.85; }
.mm-menu-sub { font-size: 11px; color: var(--muted); }
.mm-mail { word-break: break-all; }
.mm-mail.clickable { cursor: pointer; text-decoration: underline dotted; }
.mm-mail.clickable:hover { color: var(--accent); }

/* ─────────────────────────── 휴지통·최근 활동 오버레이 */

.share-list { padding: 10px 12px 14px; }
.share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.share-row:last-child { border-bottom: 0; }
.share-url {
  flex: 1;
  min-width: 240px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--surface2);
  color: var(--ink);
  font-size: 12.5px;
}
.share-row.off .share-url { text-decoration: line-through; color: var(--faint); }

.img-preview {
  overflow: auto;
  max-height: 70vh;
  padding: 10px;
}
.img-preview img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.adm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  z-index: 80;
}
.adm-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.adm-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.adm-panel-head .who { flex: 1; }
.adm-panel.narrow { max-width: 420px; }

/* 회원가입 설정 */
.adm-signup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.adm-signup label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.adm-signup input[type='text'], .adm-signup input:not([type]) {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.adm-signup .who { margin: -4px 0 4px; line-height: 1.6; }
.adm-check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 600; }
.adm-check input { width: 16px; height: 16px; }

/* 조직 배정을 기다리는 회원 */
.adm-pending {
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 600;
}
:root[data-theme='dark'] .adm-pending { background: #78350f; color: #fde68a; }
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .adm-pending { background: #78350f; color: #fde68a; }
}

.adm-trash-list, .adm-audit-list {
  overflow-y: auto;
  padding: 10px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adm-trash-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
}
.adm-trash-info { flex: 1; min-width: 0; }
.adm-trash-days { font-size: 12px; color: var(--muted); white-space: nowrap; }

.adm-audit-row {
  display: grid;
  grid-template-columns: 110px 70px 110px 1fr;
  gap: 8px;
  font-size: 12.5px;
  padding: 6px 4px;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.adm-audit-row:first-child { border-top: 0; }
.adm-audit-actor { font-weight: 700; }
.adm-audit-action { color: var(--accent); }
.adm-audit-target { font-weight: 600; }
.adm-audit-detail { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }

/* 조직도 — 하위 접기/펼치기 */
.oc .mm-card { position: relative; }
.oc-toggle {
  position: absolute;
  top: -9px;
  right: -6px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 999px;
  font-size: 9.5px;
  line-height: 1;
  padding: 3px 6px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.oc-toggle:hover { border-color: var(--accent); color: var(--accent); }
.oc-node.collapsed > .mm-card { border-style: dashed; }
.oc-node.collapsed .oc-toggle { color: var(--accent); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   좁은 화면 (휴대폰·태블릿)
   가로 스크롤 없이 한 화면에 들어오게 하고, 터치 영역을 키웁니다.
   ═══════════════════════════════════════════════════════════ */

/* 어느 폭에서든 도구 줄은 넘치면 다음 줄로 */
.datebar, .topbar-right, .ph-head, .ph-filters { flex-wrap: wrap; }

@media (max-width: 768px) {
  /* ---- 상단바 ---- */
  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;
  }
  .rail { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rail::-webkit-scrollbar { display: none; }
  .topbar-right { width: 100%; justify-content: flex-end; align-items: center; gap: 6px; }
  /* 이름이 길어도 도구 버튼을 아래로 밀지 않게 */
  .topbar-right .who {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-right button, .topbar-right .link { padding: 6px 8px; font-size: 12px; }

  /* ---- 공통 터치 영역 ---- */
  .datebar button, .datebar input, .datebar select,
  .topbar-right button, .topbar-right a {
    min-height: 40px;
  }
  button.small { min-height: 34px; padding: 6px 10px; }
  /* 작은 아이콘 버튼도 손가락으로 누를 수 있게 */
  .addbtn, .row .del, .dir .del, .week-more, .ev-hide {
    min-width: 32px;
    min-height: 32px;
  }

  /* ---- 본문 ---- */
  .tab-panel, .today-panel { padding: 12px 10px; }
  .today-layout { gap: 12px; }
  .sheet { padding: 12px 10px; }

  /* ---- 업무 표 → 카드형 세로 배치 ---- */
  .rowhead {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .rowhead .rowhead-label { display: none; }
  /* 좁은 화면 — [+ 업무 추가] 가 오른쪽 칸을 차지합니다(빈 칸은 감춥니다) */
  .rowhead .memo-head { grid-column: 2; padding: 4px 6px; }
  .rowhead .addcell { display: none; }
  .rowhead::before {
    content: '업무';
    padding: 5px 8px;
    color: var(--muted);
    font-size: 12px;
  }

  /* ---- 업무 한 건 = 한 줄 ----
     예전에는 제목·상태·비고가 각각 줄을 차지해 한 건이 155px 이었습니다. 열 건이면
     1200px 이 넘어 스크롤만 하다 끝납니다. 게다가 대부분의 줄은 **상태도 비고도 비어
     있는데** 그 빈 칸이 자리를 다 먹고 있었습니다.

     지금은 상태를 제목 옆으로 올려 한 줄에 담고, 비고는 **적힌 것이 있거나 그 줄을
     만지고 있을 때만** 아래에 폅니다(`:placeholder-shown` 으로 빈 칸을 가려냅니다).
     비고를 없애는 것이 아니라, 쓸 때만 나오게 한 것입니다 — 제목을 누르면 그 줄이
     열리므로 새로 적는 길도 그대로입니다. */
  .row {
    /* 폰에서는 줄의 [⏸] 을 감춥니다 — 단추 하나가 제목 폭을 24px 먹으면 제목이 한 줄 더 접혀,
       업무 한 건을 51~82px 로 줄여 놓은 것이 도로 늘어납니다. 폰에서 미루는 길은
       [정리하기] 판에 그대로 있습니다(거기서는 단추가 제목 아래로 내려갑니다). */
    grid-template-columns: 26px 1fr auto 34px;
    grid-template-areas:
      'no content res  del'
      '.  memo    memo memo';
    row-gap: 2px;
    padding-bottom: 4px;
  }
  .row > * { border-left: 0; padding: 4px 6px; min-height: 0; }
  .row .no { grid-area: no; padding-top: 10px; }
  .row .content-cell { grid-area: content; min-width: 0; }
  .row .res-cell { grid-area: res; display: flex; align-items: center; gap: 4px; }
  .row .memo-cell { grid-area: memo; }
  .row .del { grid-area: del; min-height: 40px; }
  .row .snooze-btn { display: none; }
  /* iOS 확대 방지는 **16px 이상**이라야 합니다 — 15px 은 아슬아슬하게 모자라서
     업무 제목을 탭할 때마다 화면이 확대됐습니다(재어 확인). */
  .row textarea { font-size: 16px; }
  .row .res-cell select, .row .memo-cell input { min-height: 36px; font-size: 14px; }
  /* 상태 칸이 제목을 밀지 않게 — select 는 **가장 긴 옵션**('진행중')에 맞춰 폭이 잡히므로
     그냥 두면 92px 을 먹고 제목이 세 줄로 접힙니다. 글자를 줄이고 폭에 뚜껑을 씌웁니다. */
  .row .res-cell select { width: auto; min-width: 0; max-width: 74px; font-size: 13px; padding: 4px 2px 4px 4px; }
  .gauge { width: 48px; height: 18px; }

  /* 비고가 비어 있고 그 줄을 만지고 있지 않으면 감춥니다.
     `:has()` 를 모르는 브라우저에서는 예전처럼 늘 보입니다 — 기능이 사라지지는 않습니다. */
  .row:not(:focus-within) .memo-cell:has(input:placeholder-shown) { display: none; }

  /* ---- 지시사항 ----
     두 칸으로 두면 오른쪽 칸이 [오늘 업무로][✕] 폭에 맞춰지면서 지시 내용이 74px 까지 눌립니다.
     내용에 한 줄을 통째로 주고 나머지를 아래에 늘어놓습니다. */
  .dir:not(.dir-form), .dir.with-src:not(.dir-form) {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      'content content content'
      'age status acts';
    row-gap: 4px;
  }
  .dir:not(.dir-form) .dir-content { grid-area: content; }
  .dir:not(.dir-form) .age { grid-area: age; text-align: left; }
  .dir:not(.dir-form) select { grid-area: status; }
  .dir:not(.dir-form) .acts { grid-area: acts; justify-content: flex-end; }

  /* ---- 프로젝트 · OKR ---- */
  .ph-search { min-width: 0; width: 100%; }
  .kr-add input:first-child { min-width: 0; }
  .carry-notice #dayText { min-width: 0; }

  /* ---- 관리(조직도) ---- */
  .adm-layout { flex-direction: column; align-items: stretch; }
  .adm-side { width: 100%; }
  /* 조직도는 원래 넓은 그림입니다 — 페이지 대신 그림 안에서만 좌우로 넘깁니다 */
  .adm-main, #admCentersWrap { min-width: 0; max-width: 100%; }
  #orgMap { max-width: 100%; overflow-x: auto; }

  /* ---- iOS 확대 막기 ----
     사파리는 글자가 16px 보다 작은 입력칸을 탭하면 **화면을 확대합니다.** 그러면 레이아웃이
     틀어지고 사람이 손가락으로 도로 줄여야 합니다. 재어 보니 나의 업무 표(13px)·회의(13.5px)·
     프로젝트 검색(13px)이 여기 걸렸습니다. 표가 조금 넓어지지만 그 표들은 이미 자기 상자
     안에서 좌우로 넘기게 되어 있어 잘리지 않습니다. */
  /* **`!important` 를 쓴 이유** — 화면마다 `.bt-add input[type=text]` 처럼 명시도가 더 높은
     글자 크기가 박혀 있어서, 평범한 규칙으로는 하나씩 쫓아다녀야 하고 새 화면을 만들 때마다
     같은 함정을 다시 밟습니다. "폰에서 글자 넣는 칸은 16px 이상" 은 디자인 취향이 아니라
     확대를 막는 조건이라 개별 설정보다 위에 둡니다.
     **select 는 뺐습니다** — iOS 는 고르개에서 피커를 띄우므로 확대와 무관하고,
     16px 로 키우면 업무 줄의 상태 칸이 넓어져 제목을 밀어냅니다. */
  input:not([type='checkbox']):not([type='radio']),
  textarea { font-size: 16px !important; }

  /* ---- 손가락으로 누를 수 있게 ----
     재어 보니 조직도 펼침(21×17)·비품 열 고르기(13×13)·열 추가(15×15)는 손끝보다 작습니다.
     마우스로는 되지만 폰에서는 몇 번씩 헛나갑니다. 겉모습은 그대로 두고 누르는 자리만 넓힙니다. */
  .oc-toggle { min-width: 32px; min-height: 32px; }
  .eq-th-pick { width: 20px; height: 20px; }
  .eq-th-add { min-width: 28px; min-height: 28px; }
  /* 업무요청 상태 고르개가 28px 이라 다른 줄과 겹쳐 눌립니다 */
  .dir select { min-height: 36px; }
  .ph-filters button, .ph-filters select { min-height: 36px; }
}

/* ─────────────────────────── 화면 아래 고정 바 (저장 상태 · 제출) */

.statusbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--card);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
  font-size: 13px;
}
.sb-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--faint);
}
.sb-dot.draft { background: #f59e0b; }
.sb-dot.ok { background: #16a34a; }
.sb-state { font-weight: 600; }
.sb-save { flex: 1; color: var(--muted); font-size: 12px; }
.statusbar button { padding: 9px 18px; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; }

/* 고정 바에 내용이 가리지 않게 */
body.has-statusbar { padding-bottom: 58px; }

@media (max-width: 768px) {
  .statusbar { padding: 8px 10px; gap: 8px; }
  .sb-save { display: none; } /* 좁은 화면에서는 제출 버튼을 우선 */
  .statusbar button { min-height: 42px; padding: 9px 16px; }
  body.has-statusbar { padding-bottom: 64px; }
}

/* ─────────────────────────── 프로필 메뉴 */

/* 프로필 메뉴는 상단바를 기준으로 붙습니다. sticky 도 위치 기준이 되므로
   relative 로 덮어쓰지 않습니다 — 예전엔 이 줄 때문에 상단 고정이 풀려 있었습니다. */
.topbar { position: sticky; top: 0; }

.tb-ico {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink2);
  cursor: pointer;
  font-size: 14px;
}
.profile-btn:hover, .profile-btn.on { border-color: var(--accent); color: var(--accent); }
.profile-btn .caret { font-size: 10px; }

.profile-menu {
  position: absolute;
  right: 12px;
  top: calc(100% - 4px);
  z-index: 60;
  min-width: 230px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.pm-who {
  padding: 4px 8px 8px;
  color: var(--muted);
  font-size: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.pm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
}
.pm-label { color: var(--muted); font-size: 12.5px; }
.pm-sep { height: 1px; background: var(--line); margin: 6px 0; }
.pm-item {
  display: block;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink2);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.pm-item:hover { background: var(--surface2); color: var(--accent); }
.pm-item.danger:hover { color: #ef4444; }

@media (max-width: 768px) {
  /* 좁은 화면에서는 프로필 메뉴 안의 글자 크기 조절도 쓸 수 있게 다시 보입니다 */
  .profile-menu .zoom-group { display: inline-flex; }
  .profile-menu { right: 8px; left: 8px; min-width: 0; }
  .pm-item { min-height: 40px; }
}

/* ─────────────────────────── 캘린더 설정 메뉴 */

.cal-group { position: relative; display: inline-flex; gap: 2px; }
#calMenuBtn { padding: 7px 6px; }
.cal-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 60;
  min-width: 200px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  text-align: left;
}
.cal-menu .pm-who { white-space: pre-line; }

/* 진행률 게이지 — 키보드로 조작할 때 위치가 보이게 */
.gauge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ 제안사항 게시판 */

/* 게시판 줄 — 번호 · 날짜 · 작성자 · 제목 · 제안요청자.
   제목 칸만 남는 폭을 다 가져갑니다(읽을 것이 거기 있으므로). */
.post-list { margin-top: 10px; border-top: 2px solid var(--line); }
.post-head, .post-row {
  display: grid;
  grid-template-columns: 48px 58px 70px 92px minmax(0, 1fr) 140px 74px;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}
.post-head {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  background: var(--head);
  position: sticky;
  top: 0;
  z-index: 5;
}

/* 머리줄 칸 — 이름을 누르면 정렬, ▾ 를 누르면 그 칸으로 거르기 */
.post-hcell { position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; }
.post-hcell:nth-child(5) { justify-content: flex-start; } /* 제목 */
.post-hsort {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 4px;
  white-space: nowrap;
}
.post-hsort:hover { color: var(--accent); background: var(--surface2); }
.post-arrow { margin-left: 2px; font-size: 9px; color: var(--accent); }
.post-hfilter {
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
  font-size: 10px;
  padding: 2px 3px;
  border-radius: 4px;
}
.post-hfilter:hover { color: var(--accent); background: var(--surface2); }
.post-hfilter.on { color: var(--accent); }
.post-hcell.filtered { color: var(--accent); }

.post-fmenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 70;
  min-width: 150px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  font-weight: 400;
  text-align: left;
}
.post-fmenu :last-child { border-radius: 6px; }
.post-fitem {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.post-fitem:hover { background: var(--surface2); }
.post-fitem.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* 걸어둔 조건 — 머리줄이 안 보이는 좁은 화면에서도 여기서 풉니다 */
.post-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.post-chip {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 11.5px;
  cursor: pointer;
}
.post-chip.clear { border-color: var(--line); background: var(--surface2); color: var(--muted); }
.post-row { cursor: pointer; }
.post-row:hover { background: var(--surface2); }
.post-item.on .post-row { background: var(--accent-soft); }
.post-row.pinned { background: var(--accent-soft); }

.post-no, .post-date, .post-author { font-size: 12px; color: var(--muted); text-align: center; }
.post-author { color: var(--ink2); }
.post-cat-cell { display: flex; justify-content: center; min-width: 0; }
.post-title-cell { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.post-title { font-weight: 700; color: var(--ink); word-break: keep-all; overflow-wrap: break-word; }
.post-to { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; font-size: 11.5px; }
.post-to .mention { font-weight: 400; }
.post-state-cell { position: relative; display: flex; justify-content: center; }
/* 답할 수 있는 사람에게는 누를 수 있는 것으로 보이게 */
.post-state.pickable { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; }
.post-state.pickable:hover { filter: brightness(1.08); border-color: var(--accent); }
.post-state.pickable .post-arrow { margin-left: 3px; font-size: 8px; color: inherit; opacity: 0.75; }
.post-fmenu.right { left: auto; right: 0; }

/* 펼친 내용 */
.post-open {
  padding: 14px 16px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface2);
}
.post-open-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* 마우스를 올렸을 때의 미리보기 */
.post-peek {
  position: fixed;
  z-index: 80;
  max-width: 420px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.post-peek-title { font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.post-peek-body {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink2);
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.post-cat {
  flex: none;
  font-size: 11.5px;
  color: var(--accent);
  border: 1px solid var(--line);
  background: var(--surface2);
  border-radius: 10px;
  padding: 1px 8px;
}
.post-reply { flex: none; font-size: 11.5px; color: var(--accent); font-weight: 700; }

/* 상태 — 받는 쪽이 적어주는 처리 단계 */
.post-state {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  color: var(--ink2);
  background: var(--head);
}
.post-state.s-done { color: #14833b; border-color: #86dfa5; background: #e9f8ee; }
.post-state.s-doing { color: #1d4ed8; border-color: #a9c4fb; background: #eef4ff; }
.post-state.s-hold { color: #92400e; border-color: #f0cf95; background: #fdf3e2; }
.post-state.s-other { color: #6d28d9; border-color: #cbb6f5; background: #f3edff; }
:root[data-theme='dark'] .post-state.s-done { color: #6ee7a0; border-color: #1f5136; background: #14301f; }
:root[data-theme='dark'] .post-state.s-doing { color: #93b8fd; border-color: #23406f; background: #16233b; }
:root[data-theme='dark'] .post-state.s-hold { color: #f3c583; border-color: #6a4c1c; background: #33240f; }
:root[data-theme='dark'] .post-state.s-other { color: #c4a8f7; border-color: #432f6b; background: #241a3a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .post-state.s-done { color: #6ee7a0; border-color: #1f5136; background: #14301f; }
  :root:not([data-theme='light']) .post-state.s-doing { color: #93b8fd; border-color: #23406f; background: #16233b; }
  :root:not([data-theme='light']) .post-state.s-hold { color: #f3c583; border-color: #6a4c1c; background: #33240f; }
  :root:not([data-theme='light']) .post-state.s-other { color: #c4a8f7; border-color: #432f6b; background: #241a3a; }
}

/* ---- 글쓰기 ---- */
.post-editor { display: flex; flex-direction: column; gap: 8px; }
.post-cat-pick, .post-state-pick {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--card);
  color: var(--ink);
  align-self: flex-start;
}
.post-title-input, .post-body-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.post-title-input { font-size: 15px; font-weight: 700; }
.post-body-input { line-height: 1.65; resize: vertical; }
.post-editor-acts { display: flex; gap: 8px; }
/* 받는 사람 — 고르면 본문에 @가 들어가고, 지금 누구를 부르고 있는지 옆에 보입니다 */
.post-to-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-to-live.warn { color: #d97706; }

/* ---- 펼친 내용 ---- */
.post-body {
  margin-top: 6px;
  line-height: 1.75;
  color: var(--ink);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.post-body a { color: var(--accent); }
.mention {
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 700;
}

.post-comments { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.post-comments-head { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.post-comment { border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; background: var(--surface2); }
.post-comment-head { display: flex; align-items: baseline; gap: 8px; }
.post-comment-who { font-weight: 700; color: var(--ink2); font-size: 12.5px; }
.post-comment-head .del { margin-left: auto; border: 0; background: none; color: var(--faint); cursor: pointer; }
.post-comment-head .del:hover { color: #ef4444; }
.post-comment-body { margin-top: 4px; font-size: 13px; line-height: 1.65; word-break: keep-all; overflow-wrap: break-word; }

.post-reply-new { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.post-reply-new textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}
.post-reply-new .primary { align-self: flex-end; }
.post-reply-note { min-height: 16px; }

/* ---- @ 부르기 자동완성 ---- */
.mention-anchor { position: relative; }
.mention-menu {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 70;
  min-width: 200px;
  max-height: 230px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.mention-item { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.mention-item.on, .mention-item:hover { background: var(--accent-soft); }
.mention-name { font-weight: 700; color: var(--ink); }

/* ---- 알림함 ---- */
.profile-btn.bell { position: relative; }
.bell-dot {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: #dc2626;
  color: #fff;
  font-size: 10.5px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}
.bell-menu { right: 52px; min-width: 300px; }
.bell-list { max-height: 340px; overflow-y: auto; }
.bell-item { padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.bell-item:hover { background: var(--surface2); }
.bell-item.unread { background: var(--accent-soft); }
.bell-who { font-size: 12.5px; color: var(--ink2); }
.bell-sum { font-size: 13px; font-weight: 700; color: var(--ink); word-break: keep-all; overflow-wrap: break-word; }

/* 좁은 화면 — 다섯 칸이 안 들어갑니다. 번호·날짜·작성자를 한 줄로 접고 제목을 아래에 크게. */
@media (max-width: 768px) {
  /* 머리줄은 칸을 맞출 수 없지만 정렬·거르기는 남겨둡니다 — 줄줄이 흐르게 */
  .post-head {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    padding: 6px 8px;
  }
  .post-hcell, .post-hcell:nth-child(5) { justify-content: flex-start; }

  .post-row {
    grid-template-columns: auto auto auto 1fr auto;
    grid-template-areas:
      'no date author cat state'
      'title title title title title'
      'to to to to to';
    gap: 4px 8px;
  }
  .post-no { grid-area: no; text-align: left; }
  .post-date { grid-area: date; text-align: left; }
  .post-author { grid-area: author; text-align: left; justify-self: start; }
  .post-cat-cell { grid-area: cat; justify-content: flex-start; }
  .post-state-cell { grid-area: state; justify-content: flex-end; }
  .post-title-cell { grid-area: title; }
  .post-to { grid-area: to; justify-content: flex-start; }
  .post-peek { display: none; } /* 손가락에는 올려두는 동작이 없습니다 */
}

/* ─────────────────────────── 레일: 좁은 화면
   56px 을 세로로 두면 본문이 너무 좁아집니다. 예전처럼 가로줄로 눕히고 옆으로 밀어 봅니다. */
@media (max-width: 768px) {
  .rail {
    position: static;
    width: auto;
    flex-direction: row;
    gap: 2px;
    padding: 4px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .rail, .rail.open { width: auto; }
  #appRoot, body.rail-pinned #appRoot { padding-left: 0; }
  #railPin { display: none; } /* 눕힌 상태에서는 고정할 것이 없습니다 */
  .rail-group { display: none; }
  /* 좁은 줄에서는 로고와 이름은 빼고 검색만 남깁니다 */
  .rail-brand { padding: 0; margin: 0 6px 0 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .rail-brand .rail-wp, .rail-name { display: none; }
  .search-panel { top: 8px; }
  .tab { width: auto; padding: 8px 10px; }
  .rail-ico { width: auto; }
  .rail:not(.open) .tab { position: static; }
  .rail:not(.open) .tab-badge {
    position: static;
    min-width: 18px;
    padding: 1px 5px;
    font-size: 11px;
    line-height: 16px;
  }
}

/* ─────────────────────────── 주간 돌아보기 */

.wr-panel { max-width: 860px; }
.wr-sheet { overflow-y: auto; padding: 6px 20px 20px; }
.wr-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 8px 0 10px; border-bottom: 2px solid var(--accent); margin-bottom: 8px; }
.wr-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.wr-sum { color: var(--muted); font-size: 12.5px; }
.wr-day { margin-top: 12px; }
.wr-date { font-weight: 700; font-size: 13px; color: var(--ink2); padding-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.wr-badge { font-size: 10.5px; font-weight: 700; color: #166534; background: #dcfce7; border-radius: 8px; padding: 0 7px; }
:root[data-theme='dark'] .wr-badge { color: #bbf7d0; background: #14532d; }
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .wr-badge { color: #bbf7d0; background: #14532d; }
}
.wr-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0 3px 4px; font-size: 13px; }
.wr-mark { flex: none; width: 18px; text-align: center; }
.wr-text { flex: 1; min-width: 0; color: var(--ink); word-break: keep-all; overflow-wrap: break-word; }
.wr-tail { flex: none; font-size: 11.5px; color: var(--muted); }

/* ─────────────────────────── 업무 회의 */

.mtg-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mtg-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.mtg-card:hover { border-color: var(--accent); }
/* 비공개는 왼쪽 선까지 세워 목록에서 바로 갈립니다 */
.mtg-card.private { border-left: 3px solid var(--accent); }

.mtg-priv {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--faint);
  background: transparent;
  white-space: nowrap;
}
.mtg-priv.on {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 700;
}
.mtg-priv-toggle { color: var(--muted); }
.mtg-priv-toggle.on { color: var(--accent); font-weight: 700; }
/* 카드는 늘 두 줄 — 머리줄은 접지 않습니다(nowrap). 접히면 카드마다 높이가 달라져
   목록을 훑는 눈이 걸립니다. 넘치는 것은 제목과 참석자가 …로 줄어 감당합니다. */
.mtg-card-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; }
.mtg-date { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtg-title {
  font-size: 15px;
  min-width: 4em;
  flex: 0 4 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 참석자 — 공개·비공개 칩 바로 뒤. 자리가 모자라면 제목보다 **먼저** 줄어듭니다
   (shrink 를 크게) — 제목이 잘리면 어느 회의인지 알 수 없습니다. */
.mtg-who {
  font-size: 12px;
  /* 자리가 없어도 몇 글자는 남깁니다 — 0 까지 줄어들면 참석자가 통째로 사라지는데,
     '있는데 안 보이는 것' 과 '없는 것' 을 구분할 수 없게 됩니다(좁은 창에서 실제로 0px 였습니다) */
  min-width: 7em;
  flex: 0 20 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 작성자 — 오른쪽 끝(할 일 배지 앞) */
.mtg-by { font-size: 12px; white-space: nowrap; }
/* 아주 좁은 창에서는 작성자를 감춥니다 — 넷이 다 버티면 오른쪽 끝이 카드 밖으로 밀려납니다
   (480px 에서 실제로 21px 넘쳤습니다). 참석자와 할 일이 먼저입니다. */
@media (max-width: 620px) {
  .mtg-by { display: none; }
}
.mtg-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mtg-count.open { color: var(--accent); font-weight: 700; }
.mtg-peek {
  font-size: 13px;
  color: var(--ink2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mtg-one { display: flex; flex-direction: column; gap: 10px; }
.mtg-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mtg-head input[type='text'], .mtg-head input[type='date'] {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.mtg-title-input { flex: 1; min-width: 200px; font-weight: 700 !important; }
.mtg-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 6px;
}

/* 이어지는 일 — 앞 회의의 미완료. 베끼지 않고 그대로 보여줍니다 */
.mtg-carry {
  border: 1px solid var(--line);
  border-left: 3px solid var(--carry);
  border-radius: 0 9px 9px 0;
  background: var(--surface2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mtg-carry-head { font-size: 12.5px; font-weight: 700; color: var(--ink2); }

/* ─────────────────────────── 우리 한마디 (관리 탭)

   최고관리가 문장을 여러 줄 적고 고치는 판입니다. 한 줄 = 문장 + 날짜 + 적은 사람.
   오늘 나오는 줄은 왼쪽에 오렌지 선을 세워 훑기만 해도 갈리게 합니다 — 한마디 글자색과 같은 색입니다. */

.qown {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 10px 12px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qown.hidden { display: none; }
.qown-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qown-bar strong { font-size: 15px; }
.qown-lede { font-size: 12px; color: var(--muted); }
.qown-rows { display: flex; flex-direction: column; gap: 4px; }

.qown-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding-block: 2px;
  border-left: 3px solid transparent;
  padding-left: 7px;
}
.qown-row.today { border-left-color: var(--quip); }
/* 인증키처럼 생긴 줄 — 모두가 보는 자리라 붉게 짚어 저장을 막습니다 */
.qown-row.secret { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.07); }
.qown-row.secret .qown-text { color: #dc2626; }
.qown-row input[type=text] {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.qown-text { flex: 1; min-width: 180px; }
/* 기간 · 해마다 — 진짜 날짜 고르개입니다. 글자칸에 적게 했더니 모양이 조금만 달라도 조용히 무시됐습니다 */
.qown-when { display: flex; align-items: center; gap: 4px; flex: none; }
/* 날짜 고르개는 `input[type=text]` 규칙에 안 걸립니다 — 따로 칠하지 않으면
   어두운 화면에서 브라우저 기본색(회색)이 그대로 나옵니다 */
.qown-day {
  width: 132px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color-scheme: inherit;
}
.qown-tilde { color: var(--muted); font-size: 12px; }
.qown-yearly { display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.qown-yearly input { width: 14px; height: 14px; }
.qown-who {
  flex: none;
  width: 132px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
}
.qown-chip {
  flex: none;
  width: 58px;
  font-size: 11px;
  color: var(--quip);
  font-weight: 700;
  white-space: nowrap;
}
.qown-del { flex: none; }
.qown-by { flex: 0 1 130px; min-width: 0; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qown-acts { display: flex; align-items: center; gap: 8px; }
.qown-hint { font-size: 11.5px; margin: 0; }
.qown-hint code {
  background: var(--track);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 11px;
}

/* ─────────────────────────── 북토크

   한 권이 한 판입니다. 목록은 표지가 왼쪽에 선 가로 카드고, 상세는 위에서 아래로
   책 → 내용 → 메모 → 북토크 → 남길 한 줄 순서입니다(읽는 순서 그대로).
   메모는 종류마다 왼쪽 색 선이 달라, 훑기만 해도 구절과 질문이 갈립니다. */

.bt-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bt-card {
  display: flex;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 10px 12px;
  cursor: pointer;
}
.bt-card:hover { border-color: var(--accent); }
.bt-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bt-card-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bt-card-title { font-size: 15px; }
.bt-peek {
  font-size: 13px;
  color: var(--ink2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bt-card-foot { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 2px; }
.bt-card-foot .on { color: var(--accent); font-weight: 700; }

/* 표지 — 없으면 제목 두 글자로 대신합니다. 빈 네모만 늘어놓으면 목록이 읽히지 않습니다 */
.bt-cover, .bt-cover-none { width: 44px; height: 62px; flex: none; border-radius: 4px; object-fit: cover; background: var(--track); }
.bt-cover-none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--faint);
  border: 1px solid var(--line);
}
.bt-cover-big { width: 108px; height: 152px; flex: none; border-radius: 6px; object-fit: cover; background: var(--track); }
.bt-cover-big.bt-cover-none { font-size: 28px; }

.bt-stat {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.bt-stat.reading { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.bt-stat.done { color: var(--muted); }
.bt-stat.plan { color: var(--carry); border-color: var(--carry); }
.bt-stars { font-size: 12.5px; color: var(--quip); letter-spacing: 1px; }

/* 다가오는 북토크 — 목록 위 한 줄. 모이는 날을 놓치지 않게 하는 것이 이 기능의 값입니다 */
.bt-up { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bt-up-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-left: 3px solid var(--carry);
  border-radius: 0 9px 9px 0;
  background: var(--surface2);
  padding: 8px 12px;
  cursor: pointer;
}
.bt-up-when { font-size: 12.5px; font-weight: 700; color: var(--carry); white-space: nowrap; }

/* 책 담기 */
.bt-add {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 10px 12px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bt-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bt-add input[type=text], .bt-add select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.bt-grow { flex: 1; min-width: 200px; }
.bt-found { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.bt-found-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.bt-found-row:hover { background: var(--surface2); }
.bt-found-row.on { border-color: var(--accent); background: var(--accent-soft); }
.bt-found-cover { width: 30px; height: 42px; flex: none; border-radius: 3px; object-fit: cover; background: var(--track); }
.bt-found-cover.bt-cover-none { font-size: 11px; }
.bt-found-txt { display: flex; flex-direction: column; min-width: 0; }
.bt-found-sub { font-weight: 400; color: var(--muted); font-size: 12.5px; }

/* 한 권 */
.bt-one { display: flex; flex-direction: column; gap: 8px; }
.bt-save { font-size: 12px; white-space: nowrap; }
.bt-readonly { font-size: 12.5px; color: var(--muted); }
.bt-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-top: 4px; }
.bt-fields { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 260px; }
.bt-field { display: flex; align-items: center; gap: 8px; }
.bt-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.bt-field-label { font-size: 12px; color: var(--muted); width: 58px; flex: none; text-align: right; }
.bt-field input[type=text], .bt-field input[type=date], .bt-field select {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  flex: 1;
  min-width: 0;
}
.bt-strong { font-weight: 700 !important; font-size: 15px !important; }
.bt-link { font-size: 12.5px; color: var(--accent); margin-left: 66px; }

.bt-star-pick { display: flex; gap: 1px; }
.bt-star {
  background: none;
  border: none;
  padding: 0 1px;
  font-size: 17px;
  line-height: 1;
  color: var(--faint);
  cursor: pointer;
}
.bt-star.on { color: var(--quip); }
.bt-star:disabled { cursor: default; }

.bt-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 10px;
}
.bt-h-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bt-hint { font-size: 11.5px; font-weight: 400; letter-spacing: 0; color: var(--faint); }

.bt-area {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.7;
  resize: vertical;
  overflow: hidden;
}
.bt-takeaway { border-left: 3px solid var(--accent); }

/* 메모 — 종류마다 왼쪽 색 선이 다릅니다. 훑기만 해도 구절과 질문이 갈립니다 */
.bt-notes { display: flex; flex-direction: column; gap: 4px; }
.bt-note {
  display: flex;
  gap: 6px;
  align-items: center;
  border-left: 3px solid var(--line);
  padding-left: 7px;
}
.bt-note.quote { border-left-color: var(--accent); }
.bt-note.thought { border-left-color: var(--quip); }
.bt-note.question { border-left-color: var(--carry); }
.bt-note.link { border-left-color: var(--grid); }
.bt-note input[type=text], .bt-note select {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.bt-note-kind { flex: none; width: 68px; }
.bt-note-page { flex: none; width: 62px; text-align: center; }
.bt-note-text { flex: 1; min-width: 120px; }
.bt-note-url { flex: 0 1 190px; min-width: 90px; }
.bt-note-go { flex: none; color: var(--accent); text-decoration: none; padding: 0 3px; }
.bt-note-del { flex: none; }
.bt-add-note { align-self: flex-start; margin-top: 3px; }

/* 북토크 회차 */
.bt-talks { display: flex; flex-direction: column; gap: 10px; }
.bt-talk {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bt-talk-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bt-talk-head input {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.bt-talk-place { width: 130px; }
.bt-talk-who { flex: 1; min-width: 140px; }
.bt-talk-h { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-top: 4px; }

/* 책 담기 — 두 갈래를 나란히. 도서관에 없는 책도 있어 [직접 적기] 를 접어두지 않습니다 */
.bt-add-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.bt-add-head strong { font-size: 14px; }
.bt-add-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.bt-nofind { font-size: 12.5px; color: var(--carry); padding: 4px 2px; }

/* 회차의 할 일 — 회의의 할 일과 같은 모양입니다 */
.bt-todos { display: flex; flex-direction: column; gap: 5px; }
.bt-todo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bt-todo input[type=checkbox] { width: 17px; height: 17px; flex: none; }
.bt-todo input[type=text], .bt-todo select, .bt-todo input[type=date] {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.bt-todo .bt-todo-text { flex: 1; min-width: 150px; }
.bt-todo-who { flex: none; width: 96px; }
.bt-todo-due { flex: none; }
.bt-todo.done .bt-todo-text { text-decoration: line-through; color: var(--muted); }

/* 이어지는 일 — 앞 회차의 미완료. 베끼지 않고 그대로 보여줍니다 */
.bt-carry {
  border: 1px solid var(--line);
  border-left: 3px solid var(--carry);
  border-radius: 0 9px 9px 0;
  background: var(--surface2);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}
.bt-carry-head { font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.bt-todo.carry { font-size: 13.5px; color: var(--ink2); }
.bt-todo.carry .bt-todo-text { flex: 1; min-width: 160px; }
.bt-todo.carry.done .bt-todo-text { text-decoration: line-through; color: var(--muted); }

.bt-talk-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bt-talk-count.open { color: var(--accent); font-weight: 700; }

/* 저장되지 못한 초안 — 회의와 같은 문구·같은 자리 */
.bt-draft {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--carry);
  border-radius: 9px;
  background: var(--surface2);
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink2);
}

/* ─────────────────────────── 신입 관리 */
.onb-list { display: flex; flex-direction: column; gap: 8px; }
.onb-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 9px 9px 0;
  background: var(--card);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.onb-card:hover { background: var(--surface2); }
.onb-card.done { border-left-color: var(--line); opacity: 0.7; }
.onb-name { font-weight: 700; font-size: 15px; }
.onb-dday { font-size: 12px; font-weight: 700; color: var(--accent); }
.onb-late { font-size: 12px; font-weight: 700; color: var(--danger, #dc2626); }
.onb-bar { flex: 1; min-width: 120px; height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.onb-bar i { display: block; height: 100%; background: var(--accent); }

/* 왼쪽 체크리스트 표 · 오른쪽 신입 목록 표.
   좁은 화면에서는 위아래로 쌓입니다(오른쪽 표가 먼저 오면 체크리스트가 아래로 밀립니다). */
.onb-layout { display: flex; gap: 14px; align-items: flex-start; }

/* 두 표를 각각 세로로 스크롤되는 상자에 담습니다.
   `overflow-y` 를 주어야 머리줄 sticky 가 붙을 자리가 생깁니다 — 페이지가 스크롤을
   가져가면 머리줄은 그냥 위로 사라집니다(시설&비품 표에서 겪은 것과 같습니다). */
.onb-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 250px);
  min-height: 220px;
  border-bottom: 1px solid var(--line);
}
/* 지금 고치는 중인 줄 — 판이 오른쪽에 있어서 왼쪽에 표가 나야 짝이 보입니다 */
.onb-tpl tr.editing td { background: var(--surface2); box-shadow: inset 3px 0 0 var(--quip); }
.onb-tpl tr.can-edit { cursor: pointer; }

/* 오른쪽 칸에 뜨는 단계 고치기 판 */
.onb-side .onb-step-form { margin: 0 0 12px; }

.onb-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* `--surface` 라는 토큰은 이 앱에 없습니다 — 처음에 그렇게 적었더니 머리줄이
     **투명**해져서 줄들이 글자 위로 지나갔습니다(사본에서 rgba(0,0,0,0) 확인).
     비품 표(`.eq-sheet thead th`)가 쓰는 `--head` 와 같은 것을 씁니다. */
  background: var(--head);
}
/* 반반입니다(사용자가 정한 것). min-width:0 이 없으면 표가 칸을 밀어내 5:5 가 깨집니다. */
.onb-main { flex: 1 1 50%; min-width: 0; }
.onb-side { flex: 1 1 50%; min-width: 0; }
@media (max-width: 900px) {
  .onb-layout { flex-direction: column; }
  /* 쌓일 때는 둘 다 통으로 씁니다 — 왼쪽만 flex 기준(50%)을 물고 있으면
     좁은 화면에서 왼쪽이 596px, 오른쪽이 717px 로 어긋나 보입니다 */
  .onb-main,
  .onb-side { flex: none; width: 100%; }
  .onb-scroll { max-height: 55vh; }
}

.onb-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 2px;
}
.onb-head strong { font-size: 16px; }
.onb-side-head { font-size: 12.5px; font-weight: 700; color: var(--ink2); padding-bottom: 6px; }

.onb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.onb-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.onb-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.onb-table tbody tr:hover { background: var(--surface2); }

/* 단계가 바뀌는 자리 — 줄 하나로 사이를 끊습니다 */
.onb-table tr.onb-sep td {
  background: var(--surface2);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink2);
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
}
.onb-table tr.onb-sep:hover td { background: var(--surface2); }

.onb-table .c-num { width: 30px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.onb-table .c-when { width: 54px; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }
.onb-table .c-when.dday { color: var(--accent); }
.onb-table .c-date { width: 52px; color: var(--muted); font-variant-numeric: tabular-nums; }
.onb-table .c-date.late { color: var(--danger, #dc2626); font-weight: 700; }
.onb-table .c-who { width: 88px; }
.onb-table .c-done { width: 40px; text-align: center; }
.onb-table .c-done input { width: 17px; height: 17px; }
.onb-table .c-del { width: 28px; }
.onb-table tr.is-done .onb-title { text-decoration: line-through; color: var(--muted); }
.onb-table .onb-detail { padding-left: 0; margin-top: 2px; }

/* 기본 프로세스 표 — 고른 사람이 지금 서 있는 줄에 표가 납니다 */
.onb-tpl tr.can-edit { cursor: pointer; }
.onb-tpl tr.passed .onb-title { color: var(--muted); }
.onb-tpl tr.here td {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.onb-tpl tr.here:hover td { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.onb-tpl tr.here .c-num { color: var(--accent); font-weight: 700; }
.onb-form-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.onb-step-form textarea { width: 100%; }
.onb-step { font-weight: 700; color: var(--accent); font-size: 13px; }

/* 오른쪽 신입 목록 */
.onb-people td { cursor: pointer; font-size: 12.5px; }
.onb-people .onb-name { font-weight: 700; font-size: 13.5px; }
.onb-people tr.on { background: var(--surface2); box-shadow: inset 3px 0 0 var(--accent); }
.onb-people tr.on:hover { background: var(--surface2); }
.onb-people tr.done { opacity: 0.6; }
.onb-people .onb-bar { min-width: 0; width: 100%; margin-bottom: 3px; }
.onb-people .c-prog { width: 130px; }
.onb-people .c-when { width: 80px; }
.onb-people .c-who2 { width: 110px; }

/* 목록 안에 바로 펼치는 시계열 체크리스트 */
.onb-timeline { margin: 2px 0 14px 14px; padding-left: 10px; border-left: 2px solid var(--line); }
.onb-num {
  flex: none;
  min-width: 20px;
  text-align: right;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.onb-when {
  flex: none;
  min-width: 62px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}

.onb-phase { margin-top: 14px; }
.onb-phase-head {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.onb-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 2px; flex-wrap: wrap; }
.onb-item input[type='checkbox'] { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.onb-item.is-done .onb-title { text-decoration: line-through; color: var(--muted); }
.onb-title { font-size: 13.5px; }
.onb-detail { font-size: 12px; color: var(--muted); width: 100%; padding-left: 25px; }
/* 담당 딱지는 접지 않습니다 — '경영지원' 이 열 폭에 밀려 '경영지 / 원' 으로 두 줄이 됐습니다.
   딱지는 짧은 이름표라 두 줄이 되면 줄 높이까지 늘어나 표 전체가 헐거워집니다. */
.onb-who { font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink2); white-space: nowrap; display: inline-block; }
.onb-who.new { border-color: var(--accent); color: var(--accent); }
.onb-due { font-size: 11.5px; color: var(--muted); }
.onb-due.late { color: var(--danger, #dc2626); font-weight: 700; }
/* 판 머리 — 지금 등록인지 고치기인지 한눈에 */
.onb-form-head { font-weight: 700; font-size: 13.5px; color: var(--ink2); margin-bottom: 6px; }

.onb-warn {
  border: 1px solid var(--carry);
  border-left: 3px solid var(--carry);
  border-radius: 0 9px 9px 0;
  background: var(--surface2);
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink2);
  margin: 8px 0;
}

/* 저장 상태 — 회의 머리줄 오른쪽. 일지 하단의 #saveState 와 같은 노릇입니다 */
.mtg-save { font-size: 12px; white-space: nowrap; }

/* 저장 못 한 채 사라진 초안이 있을 때 — 이월 안내와 같은 색(주황)을 씁니다 */
.mtg-draft {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid var(--carry);
  border-left: 3px solid var(--carry);
  border-radius: 0 9px 9px 0;
  background: var(--surface2);
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink2);
}

.mtg-todos { display: flex; flex-direction: column; gap: 5px; }
.mtg-todo {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.mtg-todo input[type='checkbox'] { width: 17px; height: 17px; flex: none; }
.mtg-todo input[type='text'] {
  flex: 1;
  min-width: 180px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.mtg-todo select, .mtg-todo input[type='date'] {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.mtg-due-label { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* 사용 방법 — 오른쪽에서 열리는 안내판. 목록을 가리지 않고 옆에 펼쳐 두고 봅니다 */
#mtgHelpBtn.on { border-color: var(--accent); color: var(--accent); }
.mtg-help {
  position: fixed;
  top: 62px;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 92vw;
  z-index: 70;
  background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
}
.mtg-help.hidden { display: none; }
.mtg-help-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--head);
}
.mtg-help-bar strong { flex: 1; font-size: 15px; }
.mtg-help-body { overflow-y: auto; padding: 14px 16px 40px; font-size: 13.5px; line-height: 1.7; color: var(--ink2); }
.mtg-help-body h4 {
  margin: 18px 0 6px;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.mtg-help-body h4:first-of-type { margin-top: 10px; }
.mtg-help-body p { margin: 0 0 8px; }
.mtg-help-body ul { margin: 0 0 8px; padding-left: 18px; }
.mtg-help-body li { margin-bottom: 4px; }
.mtg-help-body b { color: var(--ink); }
.mtg-help-body code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ink);
}
.mtg-help-lede {
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--surface2);
  border-radius: 0 8px 8px 0;
}
.mtg-help-foot {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
/* 넓은 화면에서는 목록을 밀어 안내판과 나란히 봅니다.

   **칸을 파먹지 않고 그만큼 넓힙니다.** 탭은 `.tab-panel { max-width: 980px }` 로 가운데
   묶여 있어서, 예전처럼 padding 만 주면 안내판이 열릴 때 본문이 980 → 588px 로 줄었습니다
   (내용·비고 칸이 눈에 띄게 좁아지고 [받아쓴 글] 줄의 단추가 두 줄로 접혔습니다 —
   처음 들어온 사람에게는 안내판이 저절로 펴지므로 "화면이 왜 이렇게 좁지" 로 읽힙니다.
   실제로 그런 신고를 받았습니다). 양옆에 210px 씩 남는 자리가 있는데 굳이 본문을 줄일
   까닭이 없습니다. 넓힌 만큼 padding 으로 비우므로 **본문 폭은 열기 전과 같습니다.**
   창이 좁아 넓힐 자리가 없으면 max-width 가 저절로 접혀 예전처럼 됩니다. */
@media (min-width: 901px) {
  #tab-meetings.help-open { max-width: calc(980px + 376px); padding-right: 376px; }
}
@media (max-width: 900px) {
  .mtg-help { width: 100%; max-width: none; top: 0; }
}
.mtg-todo.carry { font-size: 13.5px; color: var(--ink2); }
.mtg-todo.carry .mtg-todo-text { flex: 1; min-width: 160px; }
.mtg-acts { display: flex; gap: 8px; margin-top: 8px; }
#mtgSearch {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  min-width: 180px;
}

/* ───────────────────────── 나의 업무 (반복 업무) */

/* 같은 목록을 주기로 묶을지 주제로 묶을지 — 오른쪽 위 작은 두 버튼 */
.rtn-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rtn-seg button {
  border: 0;
  background: var(--surface2);
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  cursor: pointer;
}
.rtn-seg button + button { border-left: 1px solid var(--line); }
.rtn-seg button.on { background: var(--accent); color: var(--on-accent); font-weight: 700; }

/* 돌아온 것 — 화면 맨 위에 따로 세웁니다 */
.rtn-due {
  margin: 12px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--accent-soft);
}
.rtn-due.hidden { display: none; }
.rtn-due-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rtn-due-head strong { font-size: 14px; }
.rtn-due-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.rtn-due-title { font-size: 14px; }
.rtn-dday {
  min-width: 62px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9px;
  background: var(--track);
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rtn-dday.now { background: var(--accent); color: var(--on-accent); }
.rtn-dday.late { background: var(--carry); color: #fff; }
.rtn-due-row.late .rtn-due-title { color: var(--carry); }

/* 주기 칩 — 일·주·월·분기·연을 한눈에 갈리게 */
.rtn-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.rtn-chip.daily { color: var(--accent); border-color: var(--accent); }
.rtn-chip.weekly { color: #0f766e; border-color: #0f766e; }
.rtn-chip.monthly { color: #7c3aed; border-color: #7c3aed; }
.rtn-chip.quarterly { color: #b45309; border-color: #b45309; }
.rtn-chip.halfyear { color: #0369a1; border-color: #0369a1; }
.rtn-chip.yearly { color: #be123c; border-color: #be123c; }
:root[data-theme='dark'] .rtn-chip.weekly { color: #5eead4; border-color: #5eead4; }
:root[data-theme='dark'] .rtn-chip.monthly { color: #c4b5fd; border-color: #c4b5fd; }
:root[data-theme='dark'] .rtn-chip.quarterly { color: #fbbf24; border-color: #fbbf24; }
:root[data-theme='dark'] .rtn-chip.halfyear { color: #7dd3fc; border-color: #7dd3fc; }
:root[data-theme='dark'] .rtn-chip.yearly { color: #fda4af; border-color: #fda4af; }

.rtn-topic {
  font-size: 11.5px;
  padding: 1px 8px;
  border-radius: 9px;
  background: var(--track);
  color: var(--muted);
  white-space: nowrap;
}

/* 표 — 엑셀로 쓰던 업무 정리표 그대로입니다(구분 · 업무 제목 · 내용 · 비고).
   칸 안에서 바로 고치므로 input 은 테두리 없이 칸을 꽉 채웁니다. */
.rtn-board { margin-top: 12px; overflow-x: auto; }
/* 화면 넓이를 그대로 씁니다 — 좁을 때만 표 안에서 좌우로 넘깁니다(본문은 넘기지 않습니다) */
.rtn-sheet {
  width: 100%;
  min-width: 860px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--card);
}
.rtn-sheet th, .rtn-sheet td { border: 1px solid var(--grid); padding: 0; }
.rtn-sheet th {
  background: var(--head);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 8px;
  text-align: center;
  white-space: nowrap;
}
/* 내용 칸이 남는 자리를 모두 가져갑니다 — 실제로 가장 길게 적는 칸입니다 */
.rtn-sheet .c-cat { width: 84px; }
.rtn-sheet .c-title { width: 20%; }
.rtn-sheet .c-note { width: 15%; }
.rtn-sheet .c-act { width: 186px; }

/* 왼쪽 구분 칸 — 세로로 병합해 한 번만 씁니다 */
td.rtn-cat {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  padding: 6px;
}

.rtn-cell {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  outline: none;
}
.rtn-cell:focus { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.rtn-cell::placeholder { color: var(--faint); }

.rtn-row.due .c-title .rtn-cell { font-weight: 700; }
.rtn-row.due td:not(.rtn-cat) { background: var(--accent-soft); }
.rtn-row.off .rtn-cell { color: var(--muted); text-decoration: line-through; }
.rtn-row.saved td:not(.rtn-cat) { background: var(--accent-soft); transition: background 0.6s; }
/* 구분 사이를 벌려 표가 덩어리로 읽히게 합니다 */
tr.rtn-gap td { border: 0; height: 10px; background: transparent; }

/* 마지막 칸 — 주기 요약과 버튼들 */
td.c-act { padding: 3px 6px; }
td.c-act { white-space: nowrap; }
.rtn-cyc {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface2);
  color: var(--ink2);
  font: inherit;
  font-size: 11.5px;
  padding: 3px 8px;
  cursor: pointer;
}
.rtn-cyc:hover { border-color: var(--accent); color: var(--accent); }
.rtn-due-flag {
  margin-left: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
}
.rtn-del {
  border: 0;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 5px;
  margin-left: 4px;
}
.rtn-row:hover .rtn-del { color: var(--carry); }
.rtn-off-flag { font-size: 11px; color: var(--muted); margin-left: 5px; }

/* 한 건 고치기 */
.rtn-one { max-width: 760px; }
.rtn-form { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.rtn-field {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.rtn-field.hidden { display: none; }
.rtn-field > label { font-size: 13px; color: var(--muted); padding-top: 5px; }
.rtn-field-val { display: flex; flex-direction: column; gap: 3px; }
.rtn-field-val > input[type='text'],
.rtn-field-val > select,
.rtn-field-val > textarea { width: 100%; max-width: 420px; }
.rtn-field-val .who { font-size: 12px; }
.rtn-field-val .who:empty { display: none; }
.rtn-num { width: 90px; }

.rtn-weekdays { display: flex; gap: 5px; flex-wrap: wrap; }
.rtn-day {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.rtn-day.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }

/* 적는 대로 다음 세 번의 날짜를 보여줍니다 — 말로 설명하는 것보다 확실합니다 */
.rtn-preview {
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: var(--surface2);
  border-radius: 0 8px 8px 0;
}
.rtn-preview-head { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.rtn-preview-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
}

/* 넓은 화면에서는 목록을 밀어 안내판과 나란히 봅니다 */
@media (min-width: 901px) {
  #tab-routines.help-open { max-width: calc(980px + 376px); padding-right: 376px; }
}
/* 표는 화면 넓이를 그대로 씁니다 — 가운데로 몰아 놓으면 내용 칸이 좁아 한 줄이 다 안 보입니다
   (관리 탭의 조직도와 같은 취급입니다) */
#tab-routines.tab-panel { max-width: none; }
@media (max-width: 700px) {
  .rtn-field { grid-template-columns: 1fr; gap: 4px; }
  .rtn-field > label { padding-top: 0; font-weight: 700; }
}

/* ───────────────────────── 비품

   사용자가 쓰던 표 그대로 — 줄은 센터+층, 칸은 품목, 값은 수량.
   열이 스무 개 가까이 되므로 가로로 넘기되, 왼쪽 두 칸(센터·층)은 붙여 둡니다. */

/* 표 상자 — **세로로도 스크롤되는 상자**여야 첫 줄이 붙습니다.
   가로로만 넘기게 두면(overflow-x) 세로 스크롤은 페이지가 하게 되고,
   그러면 sticky 가 붙을 자리(스크롤 상자)가 없어 머리줄이 그냥 위로 사라집니다. */
.eq-grid {
  overflow: auto;
  /* 실제 높이는 eqFitHeight() 가 창에 맞춰 넣습니다 — 이건 그 전에 잠깐 쓰이는 값입니다 */
  max-height: calc(100vh - 178px);
  min-height: 240px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  /* 드래그 바를 잡지 않고 화면을 끌어 옮길 수 있게 — 손 모양으로 알립니다 */
  cursor: grab;
  overscroll-behavior: contain;
}
.eq-grid.grabbing { cursor: grabbing; user-select: none; }
/* 칸과 버튼 위에서는 원래 모양대로 — 눌러서 고치는 자리입니다 */
.eq-grid input, .eq-grid button { cursor: auto; }
.eq-grid button, .eq-grid .can-edit { cursor: pointer; }
.eq-grid input { cursor: text; }
.eq-sheet {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11.5px;
  line-height: 1.2;
  background: var(--card);
}
.eq-sheet th, .eq-sheet td {
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
  padding: 0;
}
.eq-sheet thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--head);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 5px;
  text-align: center;
  white-space: nowrap;
  border-top: 1px solid var(--grid);
}
.eq-sheet thead th:first-child { border-left: 1px solid var(--grid); }

/* 둘째 줄 — 전체 합계. 머리줄과 함께 위에 붙어 있습니다(top 은 화면에서 재어 넣습니다). */
.eq-total-row th, .eq-total-row td {
  position: sticky;
  z-index: 2;
  background: var(--head);
  color: var(--ink);
  font-weight: 700;
  padding: 2px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid var(--accent);
}
.eq-total-row .c-center { left: 0; z-index: 3; text-align: right; border-left: 1px solid var(--grid); }
.eq-total-row .c-sum.grand { background: var(--accent); color: var(--on-accent); }
/* 품목 열 — 이름이 길어도 칸은 좁게 */
.eq-sheet .c-item { min-width: 62px; max-width: 92px; }

/* 왼쪽 두 칸은 스크롤해도 붙어 있습니다 */
.eq-sheet .c-center,
.eq-sheet .c-floor {
  position: sticky;
  z-index: 1;
  background: var(--card);
  padding: 1px 6px;
  white-space: nowrap;
}
/* left 값은 화면에서 재어 넣습니다(fitSticky) — 여기 숫자는 그리기 전에 잠깐 쓰이는 값입니다 */
.eq-sheet .c-center { left: 0; min-width: 66px; padding: 1px 4px; background: var(--accent-soft); color: var(--accent); font-weight: 700; vertical-align: middle; text-align: center; border-left: 1px solid var(--grid); }
.eq-sheet .c-floor { left: 76px; min-width: 52px; background: var(--surface2); color: var(--ink2); text-align: center; }
.eq-sheet thead .c-center { z-index: 3; left: 0; }
.eq-sheet thead .c-floor { z-index: 3; }

.eq-sheet .c-num { text-align: right; }
/* [⋯] 이 붙을 자리 — tbody 로 한정해야 합니다: thead 의 '전체 합계' 줄에도 c-num 이 있어서,
   relative 가 sticky 를 덮으면 fitSticky 가 넣는 top 이 '아래로 이동' 이 되어 숫자 칸만 한 줄 밀립니다 */
.eq-sheet tbody .c-num { position: relative; }
.eq-sheet .c-sum {
  padding: 1px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: var(--surface2);
  white-space: nowrap;
}
.eq-sheet-foot td, .eq-sheet-foot th { background: var(--head); font-weight: 700; padding: 2px 7px; text-align: right; font-variant-numeric: tabular-nums; }
/* 센터 소계 — **줄 전체를 다른 색으로 칠합니다.** 센터가 여럿이라 굵은 선만으로는
   어디서 한 덩이가 끝나는지 한눈에 안 들어옵니다. */
.eq-center-sum td, .eq-center-sum th {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  padding: 1px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}
.eq-sheet .c-center-sum {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: right;
  white-space: nowrap;
  border-left: 1px solid var(--grid);
  background: var(--accent-soft);
}
/* 소계 줄의 합계 칸은 조금 더 진하게 — 그 센터의 총량입니다 */
.eq-center-sum .c-sum { background: var(--accent); color: var(--on-accent); }
.eq-sheet-foot .c-center { position: sticky; left: 0; z-index: 1; text-align: right; }
.eq-sheet-foot .c-sum.grand { background: var(--accent-soft); color: var(--accent); }

/* 칸 — 테두리 없이 칸을 꽉 채웁니다(엑셀처럼) */
.eq-cell {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11.5px;
  text-align: right;
  padding: 1px 5px;
  outline: none;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.eq-cell::-webkit-outer-spin-button, .eq-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.eq-cell:focus { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.eq-cell.saved { background: var(--accent-soft); transition: background 0.6s; }

/* 표 위에서 바로 늘리는 [+] */
.eq-plus {
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--accent);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  line-height: 1;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.eq-plus.wide { width: auto; height: 26px; padding: 0 12px; font-size: 12.5px; }
.eq-plus:hover { background: var(--accent); color: var(--on-accent); border-style: solid; }
.eq-sheet .c-add { width: 34px; padding: 3px; text-align: center; background: var(--surface2); }
.eq-sheet thead .c-add { background: var(--head); }
.eq-addrow td { background: var(--surface2); padding: 0 4px; }
.eq-addrow .eq-plus.wide { height: 15px; padding: 0 8px; font-size: 10.5px; line-height: 1; }
.eq-addrow .c-rest { border-right: 0; }
.eq-below { margin-top: 8px; }
.eq-below.hidden { display: none; }
.eq-below .who { display: block; margin: 6px 0 0; }
.eq-add-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 열 머리 — 이름과 [+](이 열 뒤에 끼워넣기) */
.eq-sheet .c-item { position: relative; }
.eq-th-name { display: inline-block; }
.eq-th-name.can-edit { cursor: pointer; }
.eq-th-name.can-edit:hover { text-decoration: underline; }
.eq-th-add {
  position: absolute;
  right: 1px;
  top: 1px;
  border: 0;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 3px;
  cursor: pointer;
  border-radius: 4px;
}
.eq-sheet thead th:hover .eq-th-add { color: var(--accent); background: var(--card); }
.eq-th-add:hover { background: var(--accent) !important; color: var(--on-accent) !important; }

/* 이름을 눌러 고칠 수 있는 칸 */
.eq-sheet .c-center.can-edit, .eq-sheet .c-floor.can-edit, .eq-sheet .c-item.can-edit { cursor: pointer; }
.eq-sheet .c-center.can-edit:hover, .eq-sheet .c-floor.can-edit:hover, .eq-sheet .c-item.can-edit:hover {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}


/* 칸의 [⋯] — 이동 · 구입 · 입고 · 폐기를 적는 판을 엽니다.
   평소에는 안 보이다가 그 칸에 마우스를 얹거나 커서가 들어오면 나타납니다 —
   칸마다 늘 떠 있으면 숫자 스무 열이 점으로 뒤덮입니다. */
.eq-cell-mark {
  position: absolute;
  left: 1px;
  top: 0;
  bottom: 0;
  border: 0;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
  /* 안 보이는 동안에는 클릭을 먹지 않습니다 — 안 그러면 칸 왼쪽을 눌러 숫자를 고치려던 것이
     보이지도 않는 단추에 걸립니다(투명해도 클릭은 받습니다) */
  pointer-events: none;
}
.eq-sheet td.c-num:hover .eq-cell-mark,
.eq-sheet td.c-num:focus-within .eq-cell-mark { opacity: 1; color: var(--accent); pointer-events: auto; }
.eq-cell-mark:hover { background: var(--accent); color: var(--on-accent) !important; }

/* 칸에서 여는 기록 판 — 열·층 판(.eq-colmenu)의 그릇을 그대로 쓰고 안쪽만 다릅니다 */
.eq-cellmenu { min-width: 268px; padding: 6px; gap: 0; }
.eq-cellmenu .eq-colmenu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.eq-cellmenu .eq-colmenu-head .who { font-weight: 400; }
.eq-cf-kinds { display: flex; gap: 4px; margin: 6px 0 8px; }
.eq-cf-kind {
  flex: 1;
  padding: 4px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.eq-cf-kind:hover { border-color: var(--accent); color: var(--accent); }
.eq-cf-kind.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.eq-cf-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.eq-cf-row.hidden { display: none; }
.eq-cf-row > label { flex: 0 0 52px; font-size: 12px; color: var(--muted); }
.eq-cf-val { flex: 1; display: flex; gap: 4px; min-width: 0; }
.eq-cf-val input, .eq-cf-val select { min-width: 0; }
.eq-cf-num { width: 66px; text-align: right; }
.eq-cf-num.wide { width: 100px; }
.eq-cf-txt { flex: 1; }
.eq-cf-sel { flex: 1; }
.eq-cf-hint { margin: 2px 0 8px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.eq-cf-acts { display: flex; gap: 6px; }
.eq-cf-acts button { flex: 1; }

/* 열 머리의 체크칸 — 통계에 넣을 항목 고르기 */
.eq-th-pick { margin: 0 3px 0 0; vertical-align: middle; cursor: pointer; }

/* 통계 · 그래프 — 이미지로 담기는 부분(.eq-stat-sheet)은 화면 색을 그대로 씁니다 */
.eq-stat { max-width: 980px; }
.eq-stat-sheet {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.eq-stat-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.eq-stat-head strong { font-size: 16px; }
.eq-stat-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 18px; }
.eq-stat-table th, .eq-stat-table td { border: 1px solid var(--grid); padding: 5px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.eq-stat-table thead th { background: var(--head); text-align: center; font-size: 12px; white-space: nowrap; }
.eq-stat-table tbody th { background: var(--accent-soft); color: var(--accent); text-align: left; white-space: nowrap; }
.eq-stat-table .sum { background: var(--surface2); font-weight: 700; }
.eq-stat-table .foot th, .eq-stat-table .foot td { background: var(--head); font-weight: 700; }
.eq-stat-table .foot .sum { background: var(--accent); color: var(--on-accent); }

.eq-bars { margin-bottom: 16px; }
.eq-bars-title { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.eq-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; font-size: 12.5px; }
.eq-bar-name { width: 110px; text-align: right; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-bar-track { flex: 1; height: 14px; background: var(--track); border-radius: 3px; overflow: hidden; }
.eq-bar-fill { height: 14px; background: var(--accent); border-radius: 3px; }
.eq-bar-num { width: 52px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* 이력 · 기록 화면 */
.eq-hist, .eq-move { max-width: 860px; }

/* 담당자 — 이름을 눌러 켜고 끄는 딱지 */
.eq-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 4px; }
.eq-chip {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 14px;
  padding: 3px 12px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.eq-chip:hover { border-color: var(--accent); color: var(--accent); }
.eq-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }

/* 담당자 판 — 표 아래 [담당자] 에서 엽니다 */
.eq-mgrmenu { min-width: 300px; max-width: 380px; padding: 6px; }
.eq-mgrmenu .eq-cf-hint { margin: 6px 0 2px; }
.eq-mgrmenu .eq-chips { margin-bottom: 2px; }

/* 기록 폼 */
.eq-form { display: flex; flex-direction: column; margin-top: 10px; }
.eq-field {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.eq-field.hidden { display: none; }
.eq-field > label { font-size: 13px; color: var(--muted); padding-top: 5px; }
.eq-field-val { display: flex; flex-direction: column; gap: 3px; }
.eq-field-val > input[type='text'], .eq-field-val > select, .eq-field-val > input[type='date'] { width: 100%; max-width: 380px; }
.eq-field-val .who:empty { display: none; }
.eq-num { width: 110px; }
.eq-num.wide { width: 160px; }

/* 이력 */
.eq-hist-list { display: flex; flex-direction: column; }
.eq-hrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.eq-hname { font-size: 13.5px; }
.eq-hqty { font-variant-numeric: tabular-nums; font-weight: 700; }
.eq-hmemo { color: var(--ink2); font-size: 12.5px; }
.eq-won { font-variant-numeric: tabular-nums; color: var(--ink2); }
.eq-kind {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.eq-kind.buy { color: #0f766e; border-color: #0f766e; }
.eq-kind.in { color: var(--accent); border-color: var(--accent); }
.eq-kind.move { color: #7c3aed; border-color: #7c3aed; }
.eq-kind.scrap { color: #dc2626; border-color: #dc2626; }
.eq-kind.adjust { color: #b45309; border-color: #b45309; }
:root[data-theme='dark'] .eq-kind.buy { color: #5eead4; border-color: #5eead4; }
:root[data-theme='dark'] .eq-kind.move { color: #c4b5fd; border-color: #c4b5fd; }
:root[data-theme='dark'] .eq-kind.scrap { color: #f87171; border-color: #f87171; }
:root[data-theme='dark'] .eq-kind.adjust { color: #fbbf24; border-color: #fbbf24; }

@media (max-width: 700px) {
  .eq-field { grid-template-columns: 1fr; gap: 4px; }
  .eq-field > label { padding-top: 0; font-weight: 700; }
}

/* ─────────────────────────── 상조회 */

.sj-list { margin-top: 10px; border-top: 2px solid var(--line); }
.sj-head, .sj-row {
  display: grid;
  grid-template-columns: 56px 58px minmax(0, 1.1fr) minmax(0, 1.4fr) 110px auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.sj-head { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--head); }
.sj-row.done { opacity: 0.6; }
.sj-row.late .sj-dday { color: #dc2626; font-weight: 700; }
.sj-date { font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.sj-dday { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sj-dday.near { color: var(--accent); font-weight: 700; }
.sj-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sj-name { font-weight: 700; white-space: nowrap; }
.sj-who .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.sj-what { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.sj-kind { font-size: 13.5px; }
.sj-flag {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface2);
  white-space: nowrap;
}
.sj-flag.half { color: #b45309; border-color: #f0cf95; background: #fdf3e2; }
.sj-flag.note { color: var(--accent); border-color: var(--accent); }
:root[data-theme='dark'] .sj-flag.half { color: #f3c583; border-color: #6a4c1c; background: #33240f; }
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .sj-flag.half { color: #f3c583; border-color: #6a4c1c; background: #33240f; }
}
.sj-amt { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sj-acts { display: flex; gap: 5px; justify-content: flex-end; white-space: nowrap; }
.sj-state { font-size: 11.5px; font-weight: 700; color: #166534; }
.sj-state.skipped { color: var(--muted); }
:root[data-theme='dark'] .sj-state { color: #6ee7a0; }
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .sj-state { color: #6ee7a0; }
}
.sj-sep {
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--surface2);
  border-bottom: 1px solid var(--line);
}
.sj-missing {
  margin: 10px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--carry);
  background: var(--surface2);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--ink2);
}

/* 통보 — 알려야 아는 일. 자동 산정 목록보다 위에 두고, 카드로 눈에 띄게 합니다 */
.sj-reports { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.sj-reports:empty { display: none; }
.sj-rep-head { display: flex; align-items: baseline; gap: 8px; }
.sj-rep-done { display: flex; flex-direction: column; gap: 8px; }
.sj-rep {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--card);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sj-rep.done { opacity: 0.6; border-left-color: var(--line); }
.sj-rep-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sj-rep-kind { font-weight: 700; color: var(--accent); }
.sj-rep-date { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sj-rep-bits { font-size: 12.5px; color: var(--ink2); }
.sj-rep-memo { font-size: 13px; color: var(--ink2); white-space: pre-wrap; }

/* 판정 — 막지 않고 근거를 보여줍니다. block 은 회칙상 대상이 아님, warn 은 회칙에 답이 없음 */
.sj-judge {
  font-size: 12.5px;
  line-height: 1.5;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--surface2);
  color: var(--ink2);
  border-left: 2px solid var(--line);
}
.sj-judge.block { color: #b91c1c; border-left-color: #dc2626; background: #fef2f2; }
.sj-judge.warn { color: #b45309; border-left-color: #f59e0b; background: #fdf3e2; }
:root[data-theme='dark'] .sj-judge.block { color: #fca5a5; background: #3a1414; }
:root[data-theme='dark'] .sj-judge.warn { color: #f3c583; background: #33240f; }
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .sj-judge.block { color: #fca5a5; background: #3a1414; }
  :root[data-theme='auto'] .sj-judge.warn { color: #f3c583; background: #33240f; }
}

/* 알리기 폼 */
.sj-opts { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sj-opts .hidden { display: none; }
.sj-memo {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.sj-field select {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}

/* 임원 — 회장 · 총무 */
.sj-officer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; width: 100%; }
.sj-officer { display: flex; flex-direction: column; gap: 6px; }
.sj-officer .who { font-size: 12.5px; line-height: 1.5; }

/* 장부 — 회비징수부 · 현금출납부 · 결산 */
.sj-book-tabs { display: flex; gap: 4px; margin-left: auto; }
.sj-book-tabs .on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.sj-book-body { margin-top: 10px; }
.sj-book-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.sj-book-bar input[type='month'], .sj-book-bar input[type='date'], .sj-year {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.sj-year { width: 90px; }
.sj-balance { font-size: 15px; color: var(--accent); }
.sj-num { text-align: right; font-variant-numeric: tabular-nums; }

.sj-dues-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 150px minmax(0, 1.2fr);
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
.sj-dues-row.head { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--head); padding: 8px 10px; }
.sj-dues-row.left { opacity: 0.65; }
.sj-dues-row input {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  width: 100%;
  min-width: 0;
}

.sj-cash-row {
  display: grid;
  grid-template-columns: 96px 84px minmax(0, 1.6fr) 110px 110px 120px 60px;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.sj-cash-row.head { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--head); }
.sj-cash-cat { font-size: 12px; font-weight: 700; }
.sj-cash-cat.in { color: #166534; }
.sj-cash-cat.out { color: #b45309; }
:root[data-theme='dark'] .sj-cash-cat.in { color: #6ee7a0; }
:root[data-theme='dark'] .sj-cash-cat.out { color: #f3c583; }
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .sj-cash-cat.in { color: #6ee7a0; }
  :root[data-theme='auto'] .sj-cash-cat.out { color: #f3c583; }
}

.sj-book-add {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface2);
}
.sj-book-add input, .sj-book-add select {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.sj-book-add input[type='text'] { min-width: 120px; }

.sj-settle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.sj-settle { width: 100%; }
.sj-settle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 120px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.sj-settle-row.total { font-weight: 700; color: var(--accent); border-bottom: 0; }

/* 회원 — 이름 치고 Enter 로 연달아 넣는 화면 */
.sj-mem-name { min-width: 180px; font-size: 14px !important; }
.sj-mem-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 60px minmax(0, 1.2fr) 80px;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.sj-mem-row.head { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--head); }
.sj-members input[type='search'] {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  min-width: 200px;
}

/* 회의록 — 확정한 것은 왼쪽 선이 진해집니다 */
.sj-minute {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sj-minute.locked { border-left-color: var(--accent); }
.sj-minute-h { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); margin-top: 4px; }
.sj-minute-dec {
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface2);
  border-left: 2px solid var(--accent);
}

/* 지급 이력 */
.sj-hist-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) 110px 80px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.sj-hist-row.head { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--head); }

/* 내 정보 */
.sj-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 16px 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.sj-card-head { font-weight: 700; font-size: 15px; }
.sj-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; width: 100%; }
.sj-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink2); }
.sj-field input[type='date'], .sj-field input[type='text'] {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.sj-field input[type='checkbox'] { align-self: flex-start; width: 18px; height: 18px; }
.sj-fam-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sj-fam {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
  font-size: 13.5px;
}
.sj-fam-rel { font-weight: 700; color: var(--accent); flex: none; }
.sj-fam-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-fam-birth { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sj-fam .del { margin-left: auto; border: 0; background: none; color: var(--faint); cursor: pointer; }
.sj-fam .del:hover { color: #ef4444; }
.sj-fam-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.sj-fam-add select, .sj-fam-add input {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.sj-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink2); }

/* 지급 기준 */
.sj-rule-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.sj-rule-group {
  padding: 6px 14px;
  background: var(--head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink2);
}
.sj-rule-row {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  gap: 10px;
  align-items: center;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.sj-rule-row:last-child { border-bottom: 0; }
.sj-rule-input {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .sj-head { display: none; }
  .sj-row {
    grid-template-columns: auto auto 1fr;
    grid-template-areas: 'date dday who' 'what what what' 'amt acts acts';
    row-gap: 4px;
  }
  .sj-date { grid-area: date; }
  .sj-dday { grid-area: dday; }
  .sj-who { grid-area: who; }
  .sj-what { grid-area: what; }
  .sj-amt { grid-area: amt; text-align: left; }
  .sj-acts { grid-area: acts; }
  .sj-rule-row { grid-template-columns: 1fr 110px auto; }
}

/* 달력의 음력 — 날짜 옆에 작게. 초하루·설날·추석은 진하게 */
.m-lunar {
  font-size: 9.5px;
  color: var(--faint);
  margin-left: 3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.m-lunar.key { color: var(--accent); font-weight: 700; }
.ghost.on { border-color: var(--accent); color: var(--accent); }

/* ─────────────────────────── 계정 관리

   돈이 나가는 자료라 '다음 결제일' 이 가장 먼저 눈에 들어와야 합니다.
   지난 것은 붉게, 이레 안쪽은 주황으로 표시합니다. */

.acc-list { margin-top: 12px; overflow-x: auto; }
.acc-setup, .acc-form-wrap { max-width: 860px; }

.acc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.acc-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.acc-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.acc-table .who { font-size: 11.5px; }

.acc-cat td {
  padding: 14px 10px 4px;
  border-bottom: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.acc-row { cursor: pointer; }
.acc-row:hover { background: var(--surface2); }
.acc-row.dim { opacity: 0.55; }

.acc-title { font-weight: 600; }
/* 서비스 줄 — 계정 수가 이 화면의 요점이라 숫자를 키웁니다 */
.acc-count strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.acc-count .who { margin-left: 2px; }
.acc-go { color: var(--faint); font-size: 17px; }
.acc-row:hover .acc-go { color: var(--accent); }
.acc-site-plain { font-size: 11.5px; color: var(--muted); }
.acc-detail { max-width: 1000px; }
.acc-detail .datebar .acc-site { margin-left: 2px; }
.acc-site { display: block; font-size: 11.5px; color: var(--muted); text-decoration: none; }
.acc-site:hover { color: var(--accent); text-decoration: underline; }
.acc-cost { font-variant-numeric: tabular-nums; color: var(--muted); }
.acc-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.acc-when.soon { color: var(--carry); font-weight: 600; }
.acc-when.over { color: #ef4444; font-weight: 700; }
.acc-auto {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--muted);
  font-size: 10.5px;
}
.acc-id { word-break: break-all; }

.acc-st { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; }
.acc-st.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.acc-st.hold { background: var(--surface2); color: var(--muted); }
.acc-st.ended { background: var(--surface2); color: var(--muted); text-decoration: line-through; }

.acc-act { text-align: right; white-space: nowrap; }
.acc-money { display: flex; align-items: center; gap: 6px; }
.acc-money input { width: 120px; }
.acc-check { display: flex; align-items: center; gap: 6px; }
.acc-foot { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

/* 열 머리를 눌렀을 때 뜨는 판 — 이름·좌우 이동·삭제.
   표가 가로로 밀려 있어 자리를 CSS 로 정할 수 없어, 화면에서 재어 넣습니다(eqTypeMenu). */
.eq-colmenu {
  position: fixed;
  z-index: 60;
  min-width: 178px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow);
  display: flex;
  flex-direction: column;
}
.eq-colmenu-head {
  padding: 6px 10px 7px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.eq-colmenu .pm-item { text-align: left; white-space: nowrap; }
.eq-colmenu .pm-item:disabled { opacity: 0.35; cursor: default; }
.eq-colmenu .pm-item:disabled:hover { background: none; color: inherit; }

/* 요청 추가 줄 — 받는 사람 · 내용 · 기한 */
.dir-form .dir-to { max-width: 92px; }
.dir-form .dir-due { max-width: 132px; }

/* ---- 저장할까요? — 적은 것을 흘리지 않게 묻는 판 (2026-08-30) ----
   무엇보다 위에 뜹니다(z-index 100) — 판 위에서 나가려다 뜨는 물음이라
   아래에 깔리면 눌러도 답할 수가 없습니다. */
.guard-back {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.guard-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  width: min(420px, 100%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.guard-card h3 { margin: 0 0 8px; font-size: 16px; }
.guard-card p { margin: 0 0 6px; font-size: 13px; }
.guard-foot { display: flex; gap: 8px; margin-top: 14px; }
/* [저장] 에 커서가 가 있는 것이 보여야 엔터·스페이스를 누를 마음이 듭니다 */
.guard-foot button:focus-visible,
.guard-foot button:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 상조회 회의록 — [저장] 옆에 '수정 중… / 저장됨 19:04' 이 붙습니다 */
.sj-minute-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* Alt 노트 고르기 판 — 줄마다 제목과 날짜. 목록이 길면 판 안에서만 굴립니다 */
.alt-note-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 46vh; overflow-y: auto; }
.alt-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 8px 10px;
  width: 100%;
}
.alt-note strong { font-size: 14px; }
.mtg-alt-pull.hidden { display: none; }

/* ─────────────────────────── 이월 · 미루기 ────────────────────────────
   일지 스무 줄 가운데 열여덟 줄이 어제 것인 날이 있습니다. 어제 넘어온 줄과
   3주째 끌고 있는 줄이 똑같이 보이면 무엇이 밀렸는지 알 수 없어, 날수에 따라 색을 올립니다.
   (재어 본 것 — 2026-09-01 기준 닷새 넘게 안 끝난 채 따라오는 줄이 52건) */
.carry.d3 { font-weight: 600; }
.carry.d7 {
  font-weight: 700;
  color: var(--on-accent);
  background: var(--carry);
  border-radius: 9px;
  padding: 1px 7px 2px;
  margin-top: 2px;
}
.carry.snoozed {
  color: var(--muted);
  background: var(--track);
  border-radius: 9px;
  padding: 1px 7px 2px;
  margin-top: 2px;
  font-weight: 600;
}
/* 미뤄 둔 줄은 오늘 일지에 남되 뒤로 물러나 있습니다 — 지우는 것이 아니라 미룬 것이므로 */
.row.is-snoozed .content-cell textarea,
.row.is-snoozed .memo-cell input { opacity: 0.55; }

/* 줄 끝 [⏸] — 삭제 [✕] 옆. 평소에는 흐리게 있다가 줄에 마우스가 오면 또렷해집니다 */
.snooze-btn {
  border: 0;
  background: none;
  color: var(--faint);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 6px;
  align-self: start;
  margin-top: 5px;
}
.row:hover .snooze-btn,
.row:focus-within .snooze-btn { color: var(--muted); }
.snooze-btn:hover { background: var(--track); color: var(--carry); }
.snooze-btn.on { color: var(--carry); }

/* 미루기 판 — 비품의 열·층 판과 같은 그릇입니다 */
.colmenu {
  position: fixed;
  z-index: 60;
  min-width: 208px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow);
  display: flex;
  flex-direction: column;
}
.colmenu-head {
  padding: 6px 10px 7px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.colmenu-item {
  display: block;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink2);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.colmenu-item:hover { background: var(--accent-soft); color: var(--accent); }
.colmenu-item.danger:hover { background: var(--track); color: var(--carry); }
.colmenu-row { display: flex; gap: 5px; padding: 5px 5px 3px; border-top: 1px solid var(--line); margin-top: 3px; }
.colmenu-date { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 5px 6px; }
.colmenu-go {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink2);
  border-radius: 6px;
  font-size: 12.5px;
  padding: 4px 9px;
  cursor: pointer;
}
.colmenu-go:hover { border-color: var(--accent); color: var(--accent); }

/* ─────────────────────────── 아침 정리 판 ─────────────────────────────
   넘어온 줄을 한 판에서 훑습니다. 표에서 한 줄씩 고치려면 스무 번 오르내려야 합니다. */
.tb-tidy .tb-ico { filter: none; }
.tidy {
  width: min(860px, 96vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.tidy-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--head);
}
.tidy-head h3 { margin: 0; font-size: 15.5px; }
.tidy-left { flex: 1 1 auto; font-size: 12.5px; color: var(--muted); }
.tidy-guide { margin: 0; padding: 9px 16px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.tidy-list { overflow-y: auto; padding: 4px 0; }
.tidy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--line);
}
.tidy-row:last-child { border-bottom: 0; }
.tidy-day {
  flex: 0 0 auto;
  min-width: 52px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--track);
  border-radius: 9px;
  padding: 2px 7px;
}
.tidy-day.hot { background: var(--carry); color: #fff; }
.tidy-txt { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.tidy-memo { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.tidy-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
.tidy-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink2);
  border-radius: 7px;
  font-size: 12.5px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.tidy-btn:hover { border-color: var(--accent); color: var(--accent); }
.tidy-btn.ok:hover { border-color: #15803d; color: #15803d; }
.tidy-btn.zzz:hover { border-color: var(--carry); color: var(--carry); }
.tidy-mark { min-width: 44px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; }
/* 고른 줄은 물러납니다 — 남은 것이 무엇인지 한눈에 보이게 */
.tidy-row.picked-done { background: var(--surface2); }
.tidy-row.picked-done .tidy-txt { color: var(--muted); text-decoration: line-through; }
.tidy-row.picked-done .tidy-mark { color: #15803d; }
.tidy-row.picked-snooze { background: var(--surface2); }
.tidy-row.picked-snooze .tidy-txt { color: var(--muted); }
.tidy-row.picked-snooze .tidy-mark { color: var(--carry); }
.tidy-row.picked-today .tidy-mark { color: var(--accent); }
@media (max-width: 768px) {
  /* 폰에서는 단추를 제목 아래로 내립니다 — 한 줄에 넣으면 제목이 두세 글자만 남습니다 */
  .tidy-row { flex-wrap: wrap; }
  .tidy-txt { flex: 1 1 100%; order: 2; }
  .tidy-acts { flex: 1 1 100%; order: 3; justify-content: flex-end; }
  .tidy-btn { min-height: 34px; }
}

/* 갈라진 줄 합치기 — "최고간부 북토그" 와 "북토크" 가 따로 굴러다니던 것 */
.tidy-merges:empty { display: none; }
.tidy-merges { border-bottom: 1px solid var(--line); background: var(--surface2); padding: 8px 16px 10px; }
.tidy-merge-head { font-size: 12.5px; font-weight: 600; color: var(--carry); margin-bottom: 6px; }
.tidy-merge { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tidy-merge:last-child { margin-bottom: 0; }
.tidy-merge-opts { display: flex; flex-direction: column; gap: 4px; }
.tidy-merge-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.tidy-merge-opt:hover { border-color: var(--carry); background: var(--head); }
.tidy-merge-opt .tidy-day { min-width: 46px; }
.tidy-merge-skip {
  align-self: flex-start;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  padding: 2px 4px;
  cursor: pointer;
  text-decoration: underline;
}
.tidy-merge-skip:hover { color: var(--ink2); }
/* 아주 긴 줄(전현수 님의 소방 작업 기록처럼)이 판을 밀어내지 않게 */
.tidy-merge-opt > span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}

/* 한 줄 담기 — 어느 탭에서든 Alt+N */
.quick {
  width: min(520px, 94vw);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
.quick h3 { margin: 0 0 4px; font-size: 16px; }
.quick > .who { margin: 0 0 12px; }
.quick-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink);
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
}
.quick-input:focus { outline: 2px solid #bfdbfe; outline-offset: 1px; }
.quick-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
@media (max-width: 768px) {
  /* 폰에서 입력칸은 16px 이상이라야 iOS 가 화면을 확대하지 않습니다 */
  .quick-input { font-size: 16px !important; }
}

/* 탭 정리 — 접어둔 탭은 사라지지 않고 레일 맨 아래로 들어갑니다 */
.tab.tab-off { display: none; }
.rail-more {
  margin: 6px 8px 10px;
  border: 1px dashed var(--line);
  background: none;
  color: var(--muted);
  border-radius: 8px;
  font-size: 12px;
  padding: 6px 8px;
  cursor: pointer;
  text-align: center;
}
.rail-more:hover { border-color: var(--accent); color: var(--accent); }
.rail-more.hidden { display: none; }
.tabs-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.tabs-chip {
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--muted);
  border-radius: 20px;
  font-size: 13px;
  padding: 5px 12px;
  cursor: pointer;
}
.tabs-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.tabs-panel { width: min(560px, 94vw); }

/* 지난 제목 되쓰기 — 업무 칸 아래에 뜹니다 */
.title-hints {
  position: fixed;
  z-index: 65;
  max-width: 520px;
  padding: 3px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow);
  display: flex;
  flex-direction: column;
}
.title-hint {
  border: 0;
  background: none;
  color: var(--ink2);
  border-radius: 6px;
  font-size: 13px;
  text-align: left;
  padding: 6px 9px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.title-hint:hover, .title-hint.on { background: var(--accent-soft); color: var(--accent); }
.tidy-day.cal { background: var(--accent-soft); color: var(--accent); }

/* 캘린더 붙이기 안내 — 캘린더 탭의 빈 자리와 [이번 주 일정] 칸 둘 다 씁니다.
   연결 안 된 사람에게 칸을 통째로 감추면, 그 메뉴가 있는 줄도 몰라 붙일 생각을 못 합니다. */
.cal-connect {
  /* [이번 주 일정] 칸은 요일 일곱 개짜리 grid 라, 안내를 그냥 넣으면 셀 하나에 들어가
     세로로 1117px 까지 늘어납니다(사본에서 재어 확인). 줄 전체를 쓰고 높이는 내용만큼만. */
  grid-column: 1 / -1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface2);
}
.cal-connect strong { font-size: 14px; }
.cal-connect .who { margin: 0; max-width: 62ch; }
.cal-connect button { margin-top: 4px; }
/* 어느 계정으로 붙어 있는지 — 캘린더 칩 줄 끝에 조용히 */
.cal-acct { font-size: 12px; color: var(--muted); align-self: center; margin-left: 4px; }
/* 다시 붙어야 하는 자리 — 처음 붙이는 안내와 색으로 갈라둡니다 */
.cal-connect.warn { border-style: solid; border-color: var(--carry); background: var(--head); }
.cal-connect.warn strong { color: var(--carry); }
/* "확인되지 않은 앱" 안내 — 여기서 대부분 멈추므로 조금 도드라지게 */
.cal-warn { border-top: 1px dashed var(--line); padding-top: 7px; margin-top: 2px !important; }

/* ─────────────────────────── 사용법 ──────────────────────────────────
   화면마다 [? 사용법] 을 달고 접었다 폅니다. 접힌 상태가 기본이라 평소에는
   한 줄 높이만 차지합니다 — 늘 펼쳐 두면 매일 쓰는 사람에게는 그게 곧 방해입니다. */
.help-wrap { margin: 0 0 10px; }
.help-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px 5px 9px;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.help-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.help-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 아이콘 — 레일 아이콘과 같은 선 굵기로 맞춥니다 */
.help-ico, .help-chev {
  width: 15px;
  height: 15px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.help-chev { width: 13px; height: 13px; opacity: .7; transition: transform .18s ease; }
.help-btn.on .help-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .help-chev { transition: none; } }

.help-body {
  margin-top: 8px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--surface2);
  max-width: 760px;
}
.help-body.hidden { display: none; }
.help-one { margin: 0 0 12px; font-size: 13.5px; color: var(--ink2); font-weight: 600; }
/* 질문 줄은 단추입니다 — 누른 것만 답이 펴집니다 */
.help-item { border-top: 1px solid var(--line); }
.help-item:first-of-type { border-top: 0; }
.help-q-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 8px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.help-q-line:hover { color: var(--accent); }
.help-q-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
.help-mark {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
  transition: transform .16s ease;
}
.help-item.open .help-mark { transform: rotate(90deg); color: var(--accent); }
.help-item.open .help-q-line { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .help-mark { transition: none; } }
.help-a { font-size: 13.5px; line-height: 1.75; color: var(--ink2); padding: 0 0 10px 20px; }
.help-a.hidden { display: none; }
/* 다른 화면 사용법 찾기 */
.help-more {
  margin-top: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 8px;
  font-size: 12.5px;
  padding: 6px 12px;
  cursor: pointer;
}
.help-more:hover { border-color: var(--accent); color: var(--accent); }
.help-a strong { color: var(--ink); font-weight: 700; }
/* 검색에서 찾아 들어온 항목을 잠깐 밝힙니다 — 어디를 보라는 것인지 알려주려고 */
.help-item.flash { background: var(--accent-soft); border-radius: 6px; padding-left: 8px; padding-right: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .help-item.flash { animation: helpFlash 1.6s ease-out; }
  @keyframes helpFlash { 0%, 55% { background: var(--accent-soft); } 100% { background: transparent; } }
}

/* 상단바 검색에 섞이는 사용법 결과 */
.search-hit.is-help .search-hit-title { display: flex; align-items: center; gap: 5px; }
.search-help-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 1px 7px;
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .help-body { padding: 12px 13px 14px; }
  .help-btn { min-height: 34px; }
}
/* 한 화면에 사용법 묶음이 둘일 때(오늘 일지 + 설정·프로필) 소제목 */
.help-sub {
  margin: 16px 0 6px;
  padding-top: 14px;
  border-top: 2px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
/* [? 사용법] 을 날짜 줄 오른쪽 끝으로 밀어 놓습니다 —
   그 줄에는 spacer 가 없으므로 margin-left 로 밉니다. */
.datebar .help-btn.in-bar { margin-left: auto; }
/* 날짜 줄 안에서는 그 줄의 다른 단추들과 높이를 맞춥니다(.datebar button 규칙이 먼저 걸립니다) */
.datebar .help-btn.in-bar { border-radius: 20px; padding: 5px 12px 5px 9px; }
/* 날짜 줄이 없는 화면 — 단추만 오른쪽, 본문은 폭 전체 */
.help-wrap.bare { display: flex; flex-direction: column; align-items: flex-end; }
.help-wrap.bare .help-body { align-self: stretch; }
@media (max-width: 768px) {
  /* 폰에서는 날짜 줄이 접히므로 단추가 다음 줄 오른쪽으로 갑니다 — 그대로 둡니다 */
  .datebar .help-btn.in-bar { margin-left: auto; }
}

/* ─────────────────────────── 사용법을 오른쪽에 세우기 ────────────────────
   위에서 아래로 펼치면 화면 내용이 저 아래로 밀려, 설명을 읽으며 화면을 짚어볼 수 없습니다.
   오른쪽에 세워 두면 왼쪽에서 눌러가며 오른쪽을 읽습니다.
   폭은 `--help-w` 하나로 다룹니다 — 패널과 바깥 여백이 같은 값을 봐야 어긋나지 않습니다. */
:root { --help-w: 360px; }

@media (min-width: 1100px) {
  .help-body {
    position: fixed;
    top: 48px;              /* 상단바 아래 */
    right: 0;
    bottom: 0;
    width: var(--help-w);
    max-width: none;
    margin: 0;
    padding: 16px 18px 28px;
    overflow-y: auto;
    z-index: 40;
    border: 0;
    border-left: 3px solid var(--accent);
    border-radius: 0;
    background: var(--card);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  }
  /* 앱 전체를 그만큼 왼쪽으로 좁힙니다 — 패널마다 폭을 손대지 않으려는 것입니다 */
  body.help-open #appRoot { padding-right: var(--help-w); }
  body.help-open .topbar { padding-right: calc(16px + var(--help-w)); }
  /* 하단 저장 바도 함께 비켜섭니다 */
  body.help-open .statusbar, body.help-open .bottombar { padding-right: calc(16px + var(--help-w)); }
}

/* 아주 넓은 화면에서는 조금 더 넓게 — 글줄이 너무 짧으면 읽기 나쁩니다 */
@media (min-width: 1500px) { :root { --help-w: 420px; } }

/* 좁은 화면에서는 예전처럼 위에서 아래로 폅니다(세로로 세울 자리가 없습니다) */
@media (max-width: 1099px) {
  body.help-open #appRoot { padding-right: 0; }
}
@media print {
  .help-body { display: none !important; }
  body.help-open #appRoot { padding-right: 0 !important; }
}

/* 짧은 글자가 두 글자씩 접히던 곳 둘 —
   달력 칸의 [일지](24px 안에서 "일"/"지")와 조직도의 [맞춤](46px 안에서 "맞"/"춤").
   화면을 훑어 재어 찾은 것입니다(2026-09-01). 버튼 이름은 접히면 읽는 데 힘이 듭니다. */
.m-open, .m-add { white-space: nowrap; }
#ocFit { white-space: nowrap; }

/* ═══════════════════════════ 공정표

   현장 공사 일정(간트). 엑셀 두 개(건축·인테리어)를 뼈대로 깔고, 오늘 선·늦은 공정처럼
   엑셀이 못 하던 것을 더했습니다. 자세한 설계는 src/schedules.js 머리글에 있습니다.

   표는 '하루당 픽셀' 로 깝니다 — 칸에 맞춰 그리지 않기 때문에, 눈금(일·주·순·월)을
   바꿔도 같은 막대가 늘었다 줄었다 할 뿐입니다. 그래서 CSS 에 칸 너비를 박지 않고
   자바스크립트가 재어 넣습니다(비품 표의 fitSticky 와 같은 생각). */

.sch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 12px 0; }
.sch-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.sch-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px var(--shadow); }
.sch-card.dim { opacity: 0.62; }
.sch-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sch-kind {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.sch-kind.dim { background: var(--track); color: var(--muted); }
.sch-mini { height: 5px; background: var(--track); border-radius: 3px; overflow: hidden; }
.sch-mini-fill { height: 100%; background: var(--accent); }

/* ---- 뼈대 고르기 ---- */
.sch-tpl { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sch-tpl-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.sch-tpl-card.on { border-color: var(--accent); background: var(--accent-soft); }
.sch-check { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.sch-check input { width: auto; }

/* ---- 오늘 기준 요약 띠 ----
   엑셀이 못 하던 것 가운데 가장 큰 것입니다. 숫자를 누르면 그 공정 목록이 열립니다. */
.sch-today {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 8px;
}
.sch-chip {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.sch-chip strong { font-size: 14px; color: var(--ink); }
.sch-chip:disabled { opacity: 0.45; cursor: default; }
.sch-chip:not(:disabled):hover { border-color: var(--accent); }
.sch-chip.late:not(:disabled) { border-color: #ef4444; }
.sch-chip.late:not(:disabled) strong { color: #dc2626; }
.sch-chip.now:not(:disabled) strong { color: var(--accent); }

.sch-gauge { position: relative; width: 140px; height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; }
.sch-gauge-fill { height: 100%; background: var(--accent); }
.sch-gauge-fill.behind { background: #ea580c; }
/* 달력이 어디까지 왔는지 — 진행률 막대 위에 눈금 하나로 얹습니다.
   둘이 벌어지는 것 자체가 신호라, 숫자 두 개를 나란히 적는 것보다 한눈에 들어옵니다. */
.sch-gauge-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); opacity: 0.55; }

/* ---- 간트 ---- */
.sch-wrap { --name-w: 132px; }
.sch-scroller {
  overflow: auto;
  max-height: calc(100vh - 250px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}
.sch-grid { position: relative; width: max-content; min-width: 100%; }
.sch-head-row, .sch-row { display: flex; align-items: stretch; }
/* 머리 두 줄은 위에, 공종 칸은 왼쪽에 붙여 둡니다 — 가로로 한참 밀려도 어디인지 알게.
   z-index 가 층층이 달라야 모서리 칸이 가장 위에 옵니다. */
.sch-head-row { position: sticky; z-index: 3; background: var(--head); }
.sch-head-top { top: 0; }
.sch-head-bot { top: 22px; }
.sch-name-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 var(--name-w);
  width: var(--name-w);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 8px;
  background: var(--card);
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.sch-head-row .sch-name-cell { background: var(--head); z-index: 4; font-weight: 700; color: var(--ink2); }
.sch-name-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* [⋯] 는 마우스를 얹거나 커서가 들어올 때만 — 안 보이는 동안에는 클릭도 받지 않습니다
   (투명해도 클릭은 받습니다. 비품 표에서 겪은 것과 같은 함정). */
.sch-row-menu { opacity: 0; pointer-events: none; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 3px; }
.sch-row:hover .sch-row-menu, .sch-row:focus-within .sch-row-menu { opacity: 1; pointer-events: auto; }
.sch-row-menu:hover { color: var(--accent); }

.sch-track { position: relative; display: flex; }
.sch-grp-cell, .sch-col-cell {
  flex: 0 0 auto;
  text-align: center;
  font-size: 11px;
  color: var(--ink2);
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  line-height: 21px;
  height: 22px;
}
.sch-col-cell { color: var(--muted); font-size: 10.5px; }
.sch-col-cell.off { background: var(--track); }
.sch-col-cell.today { background: var(--accent); color: var(--on-accent); font-weight: 700; }
/* 하루 눈금: 날짜 밑에 요일. 토 파랑 · 일·공휴일 빨강(공휴일은 밑줄 하나 더, 이름은 마우스를 얹으면) */
.sch-head-bot.with-dow .sch-col-cell { height: 36px; line-height: 1.25; padding-top: 3px; box-sizing: border-box; }
.sch-col-cell .d, .sch-col-cell .w { display: block; }
.sch-col-cell .w { font-size: 9.5px; }
.sch-col-cell.sat { color: var(--sat); }
.sch-col-cell.sun { color: var(--sun); }
.sch-col-cell.hol { box-shadow: inset 0 -2px 0 var(--sun); font-weight: 700; }
.sch-col-cell.today.sat, .sch-col-cell.today.sun { color: var(--on-accent); }

.sch-row { min-height: 26px; }
.sch-row.two { min-height: 40px; }
.sch-row-track { border-bottom: 1px solid var(--line); }
.sch-row-track.addable { cursor: copy; }
.sch-grp-row { background: var(--head); }
.sch-grp-name { background: var(--head); font-weight: 700; color: var(--accent); font-size: 11.5px; }
.sch-grp-row .sch-track { border-bottom: 1px solid var(--grid); }

.sch-lane { position: relative; height: 20px; width: 100%; }
.sch-row.two .sch-lane { height: 19px; }
.sch-bar {
  position: absolute;
  top: 3px;
  height: 15px;
  padding: 0 4px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 10.5px;
  line-height: 13px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.sch-bar:hover { box-shadow: 0 0 0 2px var(--accent-soft); z-index: 2; }
/* 진행률은 막대 안쪽을 채워 보여줍니다 — 숫자만 적으면 훑을 때 안 들어옵니다 */
.sch-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); opacity: 0.22; }
.sch-bar-txt { position: relative; }
.sch-bar.done { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sch-bar.late { border-color: #ef4444; background: #fee2e2; color: #991b1b; }
/* 실적은 계획과 모양이 달라야 합니다 — 같으면 둘이 겹쳤을 때 어느 쪽인지 모릅니다 */
.sch-bar.actual { background: #dcfce7; border-color: #16a34a; color: #14532d; top: 2px; height: 14px; }

/* 오늘 선 — 이 표에서 제일 먼저 눈이 가야 하는 것입니다 */
.sch-now { position: absolute; top: 44px; bottom: 0; width: 2px; background: var(--quip); z-index: 2; pointer-events: none; }

.sch-below { display: flex; align-items: center; gap: 10px; padding: 8px 2px; flex-wrap: wrap; }

.sch-units { display: flex; gap: 2px; }
.sch-unit {
  padding: 3px 9px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
}
.sch-unit.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }

/* ---- 판 ---- */
.dd-box.wide { width: min(900px, 100%); }
.sch-dates { display: flex; gap: 10px; width: 100%; }
.sch-dates .dd-field { flex: 1 1 0; }
.sch-panel-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.sch-panel-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  text-align: left;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface2);
  cursor: pointer;
  font-size: 12.5px;
}
.sch-panel-row:hover { border-color: var(--accent); }
.sch-panel-row strong { flex: 0 0 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-panel-row span:nth-child(2) { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 주간 보고 ---- */
.sch-weekly { background: var(--card); padding: 12px; border-radius: 6px; }
.sch-weekly-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.sch-weekly-table { width: 100%; border-collapse: collapse; margin-top: 10px; table-layout: fixed; }
.sch-weekly-table th, .sch-weekly-table td {
  border: 1px solid var(--line);
  padding: 7px 9px;
  vertical-align: top;
  font-size: 12.5px;
  text-align: left;
}
.sch-weekly-table th { background: var(--head); color: var(--ink2); }
.sch-weekly-grp { margin-bottom: 7px; }
.sch-weekly-grp strong { font-size: 12px; color: var(--accent); }
.sch-weekly-line { color: var(--ink); padding-left: 2px; }
.sch-weekly-line.late { color: #dc2626; }
.sch-weekly-late { margin-top: 10px; padding: 8px 10px; border: 1px solid #ef4444; border-radius: 5px; font-size: 12.5px; color: #991b1b; background: #fef2f2; }
.sch-copybox { width: 100%; font-size: 12px; font-family: inherit; }

/* 좁은 화면 — 공종 칸을 줄이고 표는 가로로 밀어 봅니다 */
@media (max-width: 760px) {
  .sch-wrap { --name-w: 92px; }
  .sch-list { grid-template-columns: 1fr; }
  .sch-dates { flex-direction: column; gap: 0; }
}

/* 인쇄·이미지로 담을 때는 스크롤 상자를 펴서 통째로 나오게 합니다 */
@media print {
  .sch-scroller { max-height: none; overflow: visible; }
  .sch-row-menu, .sch-units, .sch-below { display: none; }
}

/* 공정표 머리줄 — 이름과 현장을 한 덩이로 묶어 줄여 씁니다.
   그냥 두면 긴 현장 이름이 오른쪽 단추들을 밀어내 [설정] 이 두 번째 줄로 떨어집니다
   (사본에서 머리줄이 40 → 78px 로 불어난 것을 재어 확인). */
.sch-head-txt {
  flex: 1 1 auto;
  min-width: 60px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}
.sch-head-txt strong, .sch-head-txt .who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sch-head-txt strong { flex: 0 1 auto; }
.sch-head-txt .who { flex: 1 1 auto; }
/* 머리줄이 한 줄을 넘지 않게 — 단추는 줄어들지 않습니다 */
#schDetail .datebar { flex-wrap: nowrap; }
#schDetail .datebar > button, #schDetail .sch-units { flex: 0 0 auto; }

/* 공정표는 **화면 넓이를 그대로 씁니다** — 간트는 가로로 읽는 표라 가운데 980px 에
   몰아 놓으면 두 달치도 한 화면에 안 들어오고 오른쪽이 통째로 비어 있습니다
   (나의 업무 표·관리 탭 조직도와 같은 취급. 사용자가 짚은 것 · 2026-11-09).
   세로도 마찬가지라 표 높이를 창에 맞춰 늘립니다. */
#tab-schedules.tab-panel { max-width: none; }
.sch-scroller { max-height: calc(100vh - 190px); }
/* 사용법 판을 펴면 그만큼만 비켜 줍니다 — 칸을 파먹지 않습니다 */
@media (min-width: 901px) {
  #tab-schedules.help-open { padding-right: 376px; }
}

/* ---- 공종 속사정 카드 ---- */
/* 공종 이름이 곧 단추입니다 — 표에서 제일 먼저 눈이 가고 제일 누르기 쉬운 자리입니다 */
.sch-name-txt {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
}
.sch-name-txt:hover { color: var(--accent); text-decoration: underline; }
/* 적어 둔 것이 있는 줄에만 — 빈 카드에까지 딱지가 붙으면 소용없습니다 */
.sch-name-mark { flex: 0 0 auto; font-size: 9.5px; color: var(--accent); opacity: 0.85; }

.sch-card .sch-sect {
  width: 100%;
  margin-top: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.sch-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; width: 100%; }
.sch-grid2 .dd-field.wide { grid-column: 1 / -1; }
.sch-span {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.sch-money { display: flex; align-items: center; gap: 5px; }
.sch-money input { text-align: right; }
/* 남은 금액은 적는 칸이 아니라 센 값입니다 — 두 곳에 적으면 반드시 어긋납니다 */
.sch-left { font-size: 12px; color: var(--muted); text-align: right; width: 100%; }
.sch-left.over { color: #dc2626; font-weight: 700; }
.sch-shots { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; width: 100%; }
.sch-card.photodrop { outline: 2px dashed var(--accent); outline-offset: -4px; }
/* 전화번호는 눌러서 걸립니다 — 휴대폰으로 현장에서 보는 화면입니다 */
.sch-tel { color: var(--accent); text-decoration: none; font-size: 12.5px; }
.sch-tel:hover { text-decoration: underline; }

/* ---- 업체 연락망 ---- */
.sch-vendor-sum { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; font-size: 13px; }
.sch-vendor-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sch-vendor-table tr.dim { opacity: 0.5; }
.sch-vendor-name { border: 0; background: none; color: var(--accent); font: inherit; padding: 0; cursor: pointer; text-align: left; }
.sch-vendor-name:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .sch-grid2 { grid-template-columns: 1fr; }
}

/* ---- 사진 단계 · 전후 비교 ---- */
.sch-sect-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sch-ba-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 4px;
  font-size: 11.5px;
  padding: 2px 9px;
  cursor: pointer;
  font-weight: 400;
}
.sch-ba-btn.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.sch-ba-btn:disabled { opacity: 0.4; cursor: default; }

.sch-stages { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.sch-stage-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
/* 단계마다 색을 달리합니다 — 글자를 읽지 않고도 어느 칸인지 알아야 합니다 */
.sch-stage-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9px;
  white-space: nowrap;
}
.sch-stage-tag.before { background: #fef3c7; color: #92400e; }
.sch-stage-tag.during { background: #dbeafe; color: #1e40af; }
.sch-stage-tag.after  { background: #dcfce7; color: #14532d; }
.sch-stage-tag.sample { background: var(--track); color: var(--muted); }

.photoview-stage { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 12.5px; }

.sch-ba { background: var(--card); padding: 14px; border-radius: 6px; }
.sch-ba-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.sch-ba-row { margin-top: 12px; }
.sch-ba-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: 13px; }
.sch-ba-miss { font-size: 11px; color: #b45309; }
.sch-ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sch-ba-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px;
  background: var(--surface2);
}
.sch-ba-img { width: 100%; height: auto; max-height: 300px; object-fit: contain; border-radius: 3px; background: #fff; }
.sch-ba-empty {
  width: 100%;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  border: 1px dashed var(--line);
  border-radius: 3px;
}

@media (max-width: 700px) {
  .sch-ba-pair { grid-template-columns: 1fr; }
}

.sch-ba-hint { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; }

/* ---- 막대 끌기 ----
   양쪽 끝을 잡으면 길이가, 가운데를 잡으면 자리가 바뀝니다.
   손잡이는 **마우스를 얹었을 때만** 보입니다 — 막대가 15px 이라 늘 보이면
   막대 자체보다 손잡이가 더 눈에 띕니다. 다만 **과녁은 늘 있습니다**(투명한 6px). */
.sch-bar.draggable { cursor: grab; touch-action: none; }
.sch-bar.dragging { cursor: grabbing; z-index: 5; box-shadow: 0 2px 8px var(--shadow); }
.sch-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  background: var(--accent);
  opacity: 0;
}
.sch-grip.l { left: 0; border-radius: 2px 0 0 2px; }
.sch-grip.r { right: 0; border-radius: 0 2px 2px 0; }
.sch-bar:hover .sch-grip, .sch-bar.dragging .sch-grip { opacity: 0.85; }
.sch-bar.done .sch-grip, .sch-bar.actual .sch-grip { background: var(--on-accent); }
.sch-bar.late .sch-grip { background: #dc2626; }

/* 끄는 동안 날짜를 띄웁니다 — 막대만 움직이면 며칟날에 놓였는지 알 수 없습니다 */
.sch-dragtip {
  position: fixed;
  z-index: 400;
  display: none;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  white-space: nowrap;
  pointer-events: none;
}
.sch-dragtip.on { display: block; }

/* ---- 막대 색 — 골라 둔 여덟 가지 ----
   글자색과 배경을 짝지어 둡니다. 아무 색이나 받으면 어두운 화면에서 글자가 안 보이는
   조합이 나오고, 그건 고치는 길이 없습니다. */
.sch-bar.c-orange { background: #ffedd5; border-color: #ea580c; color: #7c2d12; }
.sch-bar.c-green  { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.sch-bar.c-teal   { background: #ccfbf1; border-color: #0d9488; color: #134e4a; }
.sch-bar.c-purple { background: #ede9fe; border-color: #7c3aed; color: #4c1d95; }
.sch-bar.c-red    { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; }
.sch-bar.c-brown  { background: #f5ead6; border-color: #a16207; color: #713f12; }
.sch-bar.c-gray   { background: #e5e7eb; border-color: #6b7280; color: #1f2937; }
.sch-bar[class*='c-'] .sch-bar-fill { background: currentColor; opacity: 0.18; }

.sch-colors { display: flex; flex-wrap: wrap; gap: 5px; }
.sch-swatch {
  width: 30px;
  height: 26px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.sch-swatch.on { outline: 2px solid var(--ink); outline-offset: 1px; }
.sch-swatch.c-orange { background: #ffedd5; border-color: #ea580c; color: #7c2d12; }
.sch-swatch.c-green  { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.sch-swatch.c-teal   { background: #ccfbf1; border-color: #0d9488; color: #134e4a; }
.sch-swatch.c-purple { background: #ede9fe; border-color: #7c3aed; color: #4c1d95; }
.sch-swatch.c-red    { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; }
.sch-swatch.c-brown  { background: #f5ead6; border-color: #a16207; color: #713f12; }
.sch-swatch.c-gray   { background: #e5e7eb; border-color: #6b7280; color: #1f2937; }

/* ---- 공종 줄 옮기기 ---- */
.sch-name-txt.sortable { cursor: grab; touch-action: none; }
.sch-name-txt.dragging { cursor: grabbing; color: var(--accent); font-weight: 700; }
.sch-name-txt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
/* 놓을 자리를 선으로 알려줍니다 — 어디에 들어가는지 모르면 끌어 놓을 수가 없습니다 */
.sch-row.drop-above { box-shadow: inset 0 2px 0 0 var(--accent); }
.sch-row.drop-below { box-shadow: inset 0 -2px 0 0 var(--accent); }
.sch-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---- 적던 것이 있어 안 닫힐 때 ----
   조용히 안 닫히면 "판이 고장났나" 가 됩니다. 왜 안 닫히는지, 무엇을 누르면 되는지
   한 줄로 알려주고 판을 한 번 흔듭니다. */
.dd-warn {
  width: 100%;
  margin-top: 2px;
  padding: 6px 10px;
  border: 1px solid #ea580c;
  border-radius: 5px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
}
@keyframes ddShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.dd-box.shake { animation: ddShake 0.28s; }
/* 흔들림이 거슬리는 분께는 멈춥니다 — 안내 줄은 그대로 뜹니다 */
@media (prefers-reduced-motion: reduce) {
  .dd-box.shake { animation: none; }
}

/* 그려둔 로고를 넣은 배지 — 글자 배지와 같은 자리, 같은 크기입니다.
   사본(터플로)은 'WP' 글자 대신 마크를 씁니다. 글자 그대로 두면 'WP터플로' 로 읽힙니다. */
.rail-wp.is-mark { padding: 4px; }
.rail-wp.is-mark svg { width: 100%; height: 100%; display: block; }

/* 로그인 화면의 로고 — 사본은 그림 대신 마크를 큼직하게 씁니다.
   여기에 위드피플·과사람 로고 그림이 박혀 있어서, 사이드바만 고치면
   들어오는 첫 화면이 그대로 남습니다. */
.login-logo.is-mark { display: flex; justify-content: center; }
.login-logo.is-mark svg {
  width: 60px;
  height: 60px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 16px;
  padding: 9px;
}

/* 조직이 작을 때(8칸 이하)는 칸의 단추를 처음부터 펼쳐 둡니다 — 처음 만드는 사람이
   어디를 눌러야 하는지 못 찾습니다. 칸이 많아지면 예전처럼 클릭으로 펼칩니다. */
.oc .oc-root.acts-always .mm-acts { display: flex; }