/* =========================================================================
   ISSUES — "Engineering Logbook" design system  (rev.2)
   단일 파일, 외부 의존 없음. 모바일 퍼스트 320px → 데스크탑.
   방향: 제도용지 위 잉크 + 틸 1색 + 의미기반 상태색. 그림자 대신 헤어라인으로
   구조를 잡는 '엔지니어링 문서/로그북' 미감. 시그니처: 모노스페이스 티켓ID·
   상태색 좌측 엣지·커밋로그형 타임라인. 한글은 어절 단위로 자연스럽게 줄바꿈.
   본문 Pretendard(한글 일관) / 라벨·번호·ID는 JetBrains Mono(계기 목소리).
   ========================================================================= */

/* ── Design tokens ───────────────────────────────────────────────────── */
:root {
  --bg: #EDF0F3;
  --surface: #FFFFFF;
  --surface-2: #F4F6F9;
  --line: #DCE1E8;
  --line-strong: #C6CCD5;
  --grid-line: rgba(20, 23, 28, .035);

  --ink: #16191F;
  --ink-2: #454C57;
  --muted: #5E6672;

  --brand: #0B6E75;
  --brand-ink: #0A565B;
  --brand-soft: #E3EFEF;

  --st-open: #C2410C;
  --st-progress: #1D4ED8;
  --st-resolved: #047857;
  --st-closed: #64748B;

  --p-low: #64748B;
  --p-medium: #0B6E75;
  --p-high: #C2410C;
  --p-critical: #B91C1C;

  --radius: 6px;
  --radius-sm: 4px;
  --shadow: none;
  --shadow-pop: 0 1px 2px rgba(20, 23, 28, .06), 0 18px 44px -22px rgba(20, 23, 28, .32);

  /* 본문/제목: Pretendard (한글+라틴 일관) · 시그니처: JetBrains Mono */
  --font-body: "Pretendard", "Pretendard Variable", ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-display: var(--font-body);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Apple SD Gothic Neo", "Noto Sans KR", monospace;

  --tap: 44px;
  --focus-ring: 0 0 0 3px rgba(11, 110, 117, .42);
  --maxw: 1080px;
  --maxw-admin: 1280px;
}

/* ── Dark mode: 토큰만 재정의, 컴포넌트 규칙 재사용 ───────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1216;
    --surface: #171B21;
    --surface-2: #1D222B;
    --line: #2A313B;
    --line-strong: #3A434F;
    --grid-line: rgba(255, 255, 255, .028);

    --ink: #E9ECF1;
    --ink-2: #B9C1CC;
    --muted: #939CA8;

    --brand: #2FB7BF;
    --brand-ink: #6FD8DE;
    --brand-soft: rgba(47, 183, 191, .14);

    --st-open: #FB923C;
    --st-progress: #60A5FA;
    --st-resolved: #34D399;
    --st-closed: #94A3B8;

    --p-low: #94A3B8;
    --p-medium: #2FB7BF;
    --p-high: #FB923C;
    --p-critical: #F87171;

    --shadow-pop: 0 1px 2px rgba(0, 0, 0, .5), 0 22px 48px -18px rgba(0, 0, 0, .82);
    --focus-ring: 0 0 0 3px rgba(47, 183, 191, .40);
  }
}

/* ── Reset / base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body.app {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  /* 아주 옅은 제도용지 격자 (텍스처만, 거의 인지 안 됨) */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center top;
  /* 한글: 어절 단위 줄바꿈 + 긴 토큰은 안전하게 분리 */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1 { font-size: 1.65rem; }
h2 { font-size: 1.24rem; }
h3 { font-size: 1.02rem; }

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
b, strong { font-weight: 700; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.muted { color: var(--muted); }
.prose { overflow-wrap: anywhere; word-break: keep-all; line-height: 1.65; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.divider { height: 1px; background: var(--line); border: 0; margin: 4px 0; }

/* 공통: 계기/로그 라벨 (eyebrow) — 모노 대문자 트래킹 */
.eyebrow,
.filters__title,
.brand__tag {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--muted);
}

/* ── Top bar / nav ───────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar--admin { border-bottom: 1px solid var(--brand); }

.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 58px;
}
.topbar--admin .topbar__inner { max-width: var(--maxw-admin); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand__mark { color: var(--brand); font-size: 1.1rem; line-height: 1; letter-spacing: 0; }
.brand__name { font-size: .98rem; }
.brand__tag {
  color: var(--brand-ink);
  background: var(--brand-soft);
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  letter-spacing: .02em;
}

/* hamburger — 데스크탑 숨김, 모바일 표시 */
.navtoggle {
  display: none;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.navtoggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform .18s ease, opacity .18s ease;
}

.topnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  color: var(--ink-2);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.topnav__link:hover { text-decoration: none; color: var(--ink); background: var(--surface-2); }
.topnav__link.is-active { color: var(--brand-ink); background: var(--brand-soft); }
.topnav__link--admin { color: var(--brand-ink); border-color: var(--brand-soft); }
.topnav__user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.topnav__who {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted);
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Main wrap ───────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px 22px 64px;
  flex: 1 0 auto;
}
.wrap--admin { max-width: var(--maxw-admin); }

/* ── Page head ───────────────────────────────────────────────────────── */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-strong);
}
.page-head > div:first-child { min-width: 0; }
.page-head__title { font-size: 1.65rem; line-height: 1.3; }
.page-head__title .mono { color: var(--brand-ink); font-weight: 700; }
.page-head__sub { margin-top: 6px; color: var(--muted); font-size: .92rem; max-width: 70ch; }
.page-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Layout primitives ───────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: 16px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--detail { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid--detail { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

/* ── Card (헤어라인 기반, 그림자 없음) ───────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.card__title { font-size: 1rem; margin: 0; }
.card__body { padding: 18px; }
.card__foot {
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--tap);
  padding: 9px 17px;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .04s ease;
}
.btn:hover { text-decoration: none; background: var(--surface-2); border-color: var(--muted); }
.btn:active { transform: translateY(1px); }

.btn--primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--line); }

.btn--danger { color: #fff; background: var(--p-critical); border-color: var(--p-critical); }
.btn--danger:hover { filter: brightness(.93); }

.btn--sm { min-height: 34px; padding: 6px 12px; font-size: .84rem; }
.btn--block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.field__hint { font-size: .82rem; color: var(--muted); }
.field__error { font-size: .82rem; color: var(--p-critical); font-weight: 500; }

.input, .textarea, .select {
  width: 100%;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  min-height: var(--tap);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--muted); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
input[type="color"].input { padding: 4px; height: var(--tap); width: 100%; cursor: pointer; }
.field__label input[type="checkbox"] { width: auto; min-height: 0; margin-right: 7px; vertical-align: -2px; }

/* choice chips (라디오 그룹) */
.choicechips { display: flex; flex-wrap: wrap; gap: 8px; }
.choicechip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 15px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.choicechip input[type="radio"],
.choicechip input[type="checkbox"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.choicechip:hover { border-color: var(--muted); }
.choicechip input:checked ~ span { color: var(--brand-ink); font-weight: 700; } /* :has 미지원 폴백 */
.choicechip:has(input:checked) { color: var(--brand-ink); background: var(--brand-soft); border-color: var(--brand); }
.choicechip:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* file drop */
.filedrop {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  text-align: center;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.filedrop:hover { border-color: var(--brand); background: var(--brand-soft); }
.filedrop input[type="file"] { width: 100%; cursor: pointer; }
.filedrop__preview { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.filedrop__preview:empty { display: none; }
.filedrop__preview img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
}

/* ── Ledger / ticket rows (signature) ────────────────────────────────── */
.ledger {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ticket {
  position: relative;
  display: grid;
  grid-template-columns: 4px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 0;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background .12s ease;
}
.ticket:last-child { border-bottom: 0; }
.ticket:hover { text-decoration: none; background: var(--surface-2); }
.ticket:focus-visible { outline: none; box-shadow: inset var(--focus-ring); background: var(--surface-2); }

/* 상태색 좌측 엣지 — 각짐 */
.ticket__edge { align-self: stretch; width: 4px; background: var(--st-closed); }
.ticket[data-status="open"] .ticket__edge { background: var(--st-open); }
.ticket[data-status="in_progress"] .ticket__edge { background: var(--st-progress); }
.ticket[data-status="resolved"] .ticket__edge { background: var(--st-resolved); }
.ticket[data-status="closed"] .ticket__edge { background: var(--st-closed); }

.ticket__id {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.ticket__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ticket__title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ticket:hover .ticket__title { color: var(--brand-ink); }
.ticket__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ticket__side { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.ticket__time { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); white-space: nowrap; }

/* ── Badges / priority / chips / project tag ─────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: normal;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  white-space: nowrap;
  line-height: 1.4;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge--open { color: var(--st-open); background: color-mix(in srgb, var(--st-open) 10%, transparent); }
.badge--in_progress { color: var(--st-progress); background: color-mix(in srgb, var(--st-progress) 10%, transparent); }
.badge--resolved { color: var(--st-resolved); background: color-mix(in srgb, var(--st-resolved) 10%, transparent); }
.badge--closed { color: var(--st-closed); background: color-mix(in srgb, var(--st-closed) 10%, transparent); }

.prio { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.prio__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p-medium); flex: none; }
.prio--low { color: var(--p-low); } .prio--low .prio__dot { background: var(--p-low); }
.prio--medium { color: var(--p-medium); } .prio--medium .prio__dot { background: var(--p-medium); }
.prio--high { color: var(--p-high); } .prio--high .prio__dot { background: var(--p-high); }
.prio--critical { color: var(--p-critical); font-weight: 700; } .prio--critical .prio__dot { background: var(--p-critical); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .76rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  white-space: nowrap;
  line-height: 1.5;
}
.chip--type { color: var(--ink-2); }
.chip--count { color: var(--muted); font-family: var(--font-mono); }
.chip--admin {
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-color: var(--brand);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
}
/* 인터랙티브 필터 칩 (대시보드) */
a.chip { min-height: 32px; padding-top: 6px; padding-bottom: 6px; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
a.chip:hover { text-decoration: none; border-color: var(--brand); color: var(--brand-ink); }
.chip.is-active { color: var(--brand-ink); background: var(--brand-soft); border-color: var(--brand); font-weight: 600; }

.projtag { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 500; color: var(--ink-2); }
.projtag__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--brand)); flex: none; }

/* ── Timeline (commit-log conversation) ──────────────────────────────── */
.timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.tl-item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 2px 0; }
.tl-item__rail { position: relative; display: flex; justify-content: center; width: 28px; }
.tl-item__rail::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: var(--line);
}
.tl-item:first-child .tl-item__rail::before { top: 14px; }
.tl-item:last-child .tl-item__rail::before { bottom: auto; height: 14px; }
.tl-item__dot {
  position: relative;
  z-index: 1;
  width: 11px; height: 11px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--muted);
  flex: none;
}
.tl-item__body { min-width: 0; padding-bottom: 18px; }
.tl-item__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tl-item__who { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.tl-item__time { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); white-space: nowrap; }

/* 시스템 이벤트: 조용하게 */
.tl-item--event .tl-item__dot { width: 8px; height: 8px; margin-top: 9px; background: var(--muted); border: none; }
.tl-item__meta { font-size: .86rem; color: var(--ink-2); padding-top: 4px; }
.tl-item__meta time { margin-left: 6px; color: var(--muted); font-family: var(--font-mono); font-size: .74rem; }

/* 댓글 본문 박스 */
.tl-comment {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  color: var(--ink);
  font-size: .94rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* 관리자 답변 — 틸 액센트 */
.tl-item--admin .tl-item__dot { background: var(--brand); border-color: var(--brand); }
.tl-item--admin .tl-comment { border-color: var(--brand); border-left-width: 3px; background: var(--brand-soft); }
.tl-item--admin .tl-item__who { color: var(--brand-ink); }

/* ── Attachments ─────────────────────────────────────────────────────── */
.attachlist { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.attach { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); max-width: 100%; }
.attach:hover { text-decoration: none; }
.attach--img { padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.attach--img:hover { border-color: var(--brand); }
.attach__thumb { width: 96px; height: 96px; object-fit: cover; display: block; }
.attach__file {
  font-size: .85rem;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}
.attach__file:hover { border-color: var(--brand); color: var(--ink); }

/* ── Admin board: 필터 레일 + 본문 (2단 데스크탑 / 1단 모바일) ───────── */
.adminboard { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.adminboard__main { min-width: 0; }
@media (min-width: 900px) {
  .adminboard { grid-template-columns: 256px minmax(0, 1fr); }
}
.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 900px) { .filters { position: sticky; top: 74px; } }
.filters__group { display: flex; flex-direction: column; gap: 8px; }
.filters__title { margin: 0; }

/* stat grid — auto-fit: 통계 4~5개를 폭에 맞춰 자동 배치(:has 의존 없음) */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stat__num {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat__label { font-size: .78rem; color: var(--muted); font-weight: 500; }
.stat--open { border-left-color: var(--st-open); } .stat--open .stat__num { color: var(--st-open); }
.stat--progress { border-left-color: var(--st-progress); } .stat--progress .stat__num { color: var(--st-progress); }
.stat--resolved { border-left-color: var(--st-resolved); } .stat--resolved .stat__num { color: var(--st-resolved); }
.stat--closed { border-left-color: var(--st-closed); } .stat--closed .stat__num { color: var(--st-closed); }
.stat--critical { border-left-color: var(--p-critical); } .stat--critical .stat__num { color: var(--p-critical); }

/* toolbar */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* admin data table — 모바일에서 카드로 reflow */
.dtable {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-collapse: collapse;
  overflow: hidden;
}
.dtable thead th {
  text-align: left;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--muted);
  padding: 11px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.dtable td, .dtable__row td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  color: var(--ink);
  vertical-align: middle;
}
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--surface-2); }

@media (max-width: 719px) {
  .dtable, .dtable thead, .dtable tbody, .dtable tr, .dtable th, .dtable td { display: block; }
  .dtable { box-shadow: none; border: 0; background: transparent; }
  .dtable thead { position: absolute; left: -9999px; top: -9999px; }
  .dtable tbody tr, .dtable__row {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px 14px;
    margin-bottom: 12px;
  }
  .dtable td, .dtable__row td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
  }
  .dtable tbody tr td:last-child { border-bottom: 0; }
  .dtable td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: .78rem;
    color: var(--muted);
    text-align: left;
    flex: none;
  }
  /* 복잡한 '동작' 셀 및 폼/버튼이 든 셀은 세로 스택 예외(좁은 화면 충돌 방지) */
  .dtable td[data-label="동작"],
  .dtable td:has(form),
  .dtable td:has(.btn) { display: block; text-align: left; }
  .dtable td[data-label="동작"]::before,
  .dtable td:has(form)::before,
  .dtable td:has(.btn)::before { display: block; margin-bottom: 8px; }
  .dtable td[data-label="동작"] .cluster,
  .dtable td:has(form) .cluster { justify-content: flex-start; }
}

/* ── Flashes ─────────────────────────────────────────────────────────── */
.flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.flash {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: .92rem;
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  transition: opacity .3s ease, transform .3s ease;
}
.flash::before { font-family: var(--font-mono); font-weight: 700; flex: none; }
.flash.is-hiding { opacity: 0; transform: translateY(-6px); }
.flash--success { border-left-color: var(--st-resolved); }
.flash--success::before { content: "✓"; color: var(--st-resolved); }
.flash--error { border-left-color: var(--p-critical); }
.flash--error::before { content: "!"; color: var(--p-critical); }
.flash--info { border-left-color: var(--st-progress); }
.flash--info::before { content: "i"; color: var(--st-progress); }

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 56px 24px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.empty__icon { font-size: 2rem; line-height: 1; color: var(--brand); opacity: .8; }
.empty__title { font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.empty__text { color: var(--muted); font-size: .92rem; max-width: 46ch; }
.empty .btn { margin-top: 8px; }

/* ── Pager ───────────────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 26px; }
.pager__link, .pager__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: .85rem;
}
.pager__link {
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.pager__link:hover { text-decoration: none; border-color: var(--brand); color: var(--brand-ink); }
.pager__current { color: var(--muted); }

/* ── Auth (login / signup) ───────────────────────────────────────────── */
.authshell { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 40px 18px; min-height: 72vh; }
.authcard {
  width: 100%;
  max-width: 408px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.authcard__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--ink);
}
.authcard__brand .brand__mark { color: var(--brand); letter-spacing: 0; }
.authcard__title { font-size: 1.32rem; font-weight: 700; letter-spacing: -.015em; }
.authcard__foot { text-align: center; font-size: .88rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; }

/* ── App footer ──────────────────────────────────────────────────────── */
.appfoot { flex: none; border-top: 1px solid var(--line); background: var(--surface); }
.appfoot--admin { border-left-color: var(--brand); }
.appfoot__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.appfoot--admin .appfoot__inner { max-width: var(--maxw-admin); }
.appfoot__brand { font-family: var(--font-mono); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .84rem; color: var(--ink-2); }
.appfoot__meta { color: var(--muted); font-size: .85rem; }

/* ═══════════════════════════════════════════════════════════════════════
   Responsive: 모바일 네비 (topnav 는 .topbar.is-open 일 때만)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .navtoggle { display: inline-flex; }
  .topbar__inner { padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
  .topnav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px 0 10px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
  }
  .topbar.is-open .topnav { display: flex; }
  .topnav__link { min-height: var(--tap); width: 100%; border-radius: var(--radius-sm); }
  .topnav__user {
    margin-left: 0; padding-left: 0; border-left: 0;
    border-top: 1px solid var(--line);
    margin-top: 6px; padding-top: 10px; width: 100%;
    justify-content: space-between;
  }
  .topnav__who { max-width: none; }

  .topbar.is-open .navtoggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .topbar.is-open .navtoggle span:nth-child(2) { opacity: 0; }
  .topbar.is-open .navtoggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* 티켓 행: 좁은 화면에서 세로 스택 */
  .ticket {
    grid-template-columns: 4px minmax(0, 1fr);
    grid-template-areas: "edge id" "edge main" "edge side";
    align-items: start;
    padding: 13px 15px 13px 0;
    row-gap: 8px;
  }
  .ticket__edge { grid-area: edge; }
  .ticket__id { grid-area: id; }
  .ticket__main { grid-area: main; }
  .ticket__side { grid-area: side; justify-content: flex-start; }

  .page-head { align-items: flex-start; }
  .page-head__actions { width: 100%; }
  .page-head__actions .btn { flex: 1 1 auto; }
}

@media (max-width: 380px) {
  body.app { font-size: 14.5px; }
  .wrap { padding: 20px 14px 44px; }
  .card__body { padding: 15px; }
}

/* ── Quality floor ───────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn:focus-visible,
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible,
.pager__link:focus-visible,
.topnav__link:focus-visible,
.ticket:focus-visible,
a.chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
}

/* color-mix() 미지원 브라우저: 틴트 배지는 평면 배경으로 우아하게 강등 */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .badge--open, .badge--in_progress, .badge--resolved, .badge--closed { background: var(--surface-2); }
  .topbar { background: var(--surface); }
}

/* backdrop-filter 미지원 시 반투명 토픽바를 불투명으로(가독성 보호) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar { background: var(--surface); }
}

/* ═══════════════════════════════════════════════════════════════════════
   rev.4 업그레이드 — 로그인 히어로 · 절제된 모션 · 디테일
   ═══════════════════════════════════════════════════════════════════════ */

/* 선택 영역 · 스크롤바 */
::selection { background: color-mix(in srgb, var(--brand) 24%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--bg); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-track { background: transparent; }

/* 빈 상태 아이콘 — '빈 원장' 모티프(좌측 틸 엣지 + 옅은 괘선), ▌ 글자 대체 */
.empty__icon {
  width: 56px; height: 56px;
  font-size: 0; color: transparent; line-height: 0;
  border: 1.5px solid var(--line-strong);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background-image: linear-gradient(var(--line) 1.5px, transparent 1.5px);
  background-size: 100% 13px;
  background-position: 0 15px;
  background-repeat: repeat-y;
  opacity: 1;
}

/* ── 로그인/가입 히어로: 좌측 잉크 패널(제품 정의 + 상태 어휘) ────── */
.authsplit {
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
@media (min-width: 800px) { .authsplit { grid-template-columns: 1.04fr 1fr; } }

.authaside {
  position: relative;
  isolation: isolate;
  background: #11171B;
  color: #fff;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}
.authaside::before {                /* 옅은 제도 격자 + 코너 틸 글로우 */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
    radial-gradient(120% 90% at 0% 0%, rgba(47, 183, 191, .16), transparent 55%);
  background-size: 26px 26px, 26px 26px, 100% 100%;
}
.authaside__brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; font-size: 1rem; color: #fff;
}
.authaside__brand .brand__mark { color: #2FB7BF; letter-spacing: 0; font-size: 1.1rem; }
.authaside__thesis {
  font-size: 1.5rem; line-height: 1.32; font-weight: 700;
  letter-spacing: -.015em; color: #fff; margin-top: 4px;
}
.authaside__sub { color: rgba(255, 255, 255, .66); font-size: .92rem; max-width: 32ch; }
.authlegend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; margin: auto 0 0; padding: 0; }
.authlegend li { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; color: rgba(255, 255, 255, .78); }
.authlegend__dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.authlegend__dot[data-st="open"] { background: #F97316; }
.authlegend__dot[data-st="in_progress"] { background: #60A5FA; }
.authlegend__dot[data-st="resolved"] { background: #34D399; }
.authlegend__dot[data-st="closed"] { background: #94A3B8; }
.authaside__foot { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; color: rgba(255, 255, 255, .42); }

/* 분할 내부 카드: 테두리/그림자는 래퍼가 담당 */
.authsplit .authcard { border: 0; border-radius: 0; box-shadow: none; max-width: none; justify-content: center; }

@media (max-width: 799px) {
  .authaside { padding: 26px 24px; gap: 14px; }
  .authaside__thesis { font-size: 1.3rem; }
}

/* ── 모션: 입장 1회(스태거) + 절제된 호버 ───────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .wrap > * { animation: it-rise .5s cubic-bezier(.2, .6, .2, 1) both; }
  .wrap > *:nth-child(1) { animation-delay: .02s; }
  .wrap > *:nth-child(2) { animation-delay: .07s; }
  .wrap > *:nth-child(3) { animation-delay: .12s; }
  .wrap > *:nth-child(4) { animation-delay: .17s; }
  .wrap > *:nth-child(n+5) { animation-delay: .2s; }
  .authsplit { animation: it-rise .55s cubic-bezier(.2, .6, .2, 1) both; }
  .ticket__edge { transition: transform .15s ease; transform-origin: left center; }
  .ticket:hover .ticket__edge { transform: scaleX(1.7); }
}
@keyframes it-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   rev.5 — 관리 대시보드: 오늘의 로그(데일리 리추얼) + 프로젝트 진행 막대
   ═══════════════════════════════════════════════════════════════════════ */

/* 대시보드 구획 헤더 */
.dash-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-sec__title { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
.dash-sec__title small { font-family: var(--font-mono); font-weight: 700; font-size: .68rem; letter-spacing: .1em; color: var(--muted); margin-left: 8px; }

/* 오늘의 로그 — 좌측 틸 엣지 로그북 카드(히어로) */
.daylog { border-left: 3px solid var(--brand); }
.daylog__date {
  font-family: var(--font-mono); font-weight: 700; font-size: 1.02rem;
  color: var(--ink); letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px;
}
.daylog__date .mark { color: var(--brand); }
.daylog__date .dow { color: var(--brand-ink); }
.daylog__cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 880px) { .daylog__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.daylog__col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.daylog__lab { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.daylog__lab .n { color: var(--ink-2); letter-spacing: 0; }
/* 데일리 로그 3박스(전날 한일·오늘 할일·일일 회고)를 균일한 세트로 — 같은 높이/테두리/글자 */
.daylog__cols { align-items: stretch; }
.daylog__col .textarea,
.readbox {
  flex: 1 1 auto;
  min-height: 156px;
  padding: 12px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: .94rem;
  line-height: 1.65;
}
.readbox {
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: auto;
}
.readbox--empty { color: var(--muted); display: flex; align-items: center; justify-content: flex-start; }

/* 프로젝트 진행 막대 — 칸반 프로세스 한눈에 (백로그→…→완료 흐름) */
.pgrid { display: flex; flex-direction: column; }
.pprog { display: flex; flex-direction: column; gap: 9px; padding: 15px 2px; border-bottom: 1px solid var(--line); }
.pprog:first-child { padding-top: 4px; }
.pprog:last-child { border-bottom: 0; padding-bottom: 4px; }
.pprog__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pprog__name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pprog__meta { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); white-space: nowrap; }
.pprog__meta b { color: var(--st-resolved); font-weight: 700; }
.pprog__bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
.pprog__bar:empty::after { content: ""; flex: 1; }
.pprog__seg { min-width: 2px; transition: filter .12s ease; }
.pprog__seg:hover { filter: brightness(1.12); }
.pseg--backlog { background: #94A3B8; }
.pseg--todo    { background: #2563EB; }
.pseg--doing   { background: #C2410C; }
.pseg--test    { background: #7C3AED; }
.pseg--done    { background: #047857; }
.pseg--discard { background: #CBD5E1; }
.pprog__legend { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: .74rem; color: var(--muted); }
.pleg { display: inline-flex; align-items: center; gap: 5px; }
.pleg.is-zero { opacity: .4; }
.pleg__dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.pleg__n { font-family: var(--font-mono); color: var(--ink-2); font-weight: 700; }

/* 진행 막대 행 클릭 → 해당 프로젝트 칸반 */
a.pprog { color: inherit; text-decoration: none; cursor: pointer; transition: background .12s ease; }
a.pprog:hover { background: var(--surface-2); }
a.pprog:hover .pprog__name { color: var(--brand-ink); }
a.pprog:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }

/* rev.6 — 오늘 콘솔 카드 헤더 + 계기판 readout */
.daylog__id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.daylog__greet { font-weight: 600; font-size: .95rem; color: var(--ink-2); }
.readout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px;
  font-family: var(--font-mono);
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.gauge { display: inline-flex; align-items: baseline; gap: 6px; }
.gauge__k { color: var(--muted); font-size: .72rem; letter-spacing: .02em; }
.gauge__v { font-weight: 700; font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.readout__sep { width: 1px; height: 14px; background: var(--line-strong); align-self: center; }

/* rev.7 — EasyMDE 마크다운 에디터를 Engineering Logbook 테마로 */
.daylog__col .EasyMDEContainer { flex: 1 1 auto; display: flex; flex-direction: column; }
.editor-toolbar {
  border: 1px solid var(--line-strong); border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--surface-2); opacity: 1;
}
.editor-toolbar button { color: var(--ink-2) !important; border: 1px solid transparent; border-radius: 4px; }
.editor-toolbar button:hover, .editor-toolbar button.active {
  background: var(--brand-soft); border-color: var(--brand-soft);
}
.editor-toolbar i.separator { border-left: 1px solid var(--line); border-right: 0; }
.EasyMDEContainer .CodeMirror {
  flex: 1 1 auto; min-height: 150px;
  border: 1px solid var(--line-strong); border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: .94rem; line-height: 1.65; padding: 4px 6px;
}
.EasyMDEContainer .CodeMirror-cursor { border-color: var(--ink); }
.EasyMDEContainer .cm-link, .EasyMDEContainer .cm-url { color: var(--brand-ink); }
.EasyMDEContainer .CodeMirror-placeholder { color: var(--muted); }
.editor-preview, .editor-preview-side { background: var(--surface-2); color: var(--ink); font-family: var(--font-body); padding: 12px 14px; }
.editor-toolbar.fullscreen, .CodeMirror-fullscreen { z-index: 60; }

/* 전날 한일: 렌더된 마크다운 본문 */
.readbox--md { white-space: normal; }
.readbox--md > :first-child { margin-top: 0; }
.readbox--md > :last-child { margin-bottom: 0; }
.readbox--md p { margin: 0 0 .5em; }
.readbox--md ul, .readbox--md ol { margin: 0 0 .5em; padding-left: 1.2em; }
.readbox--md li { margin: .15em 0; }
.readbox--md h1, .readbox--md h2, .readbox--md h3 { font-size: 1rem; font-weight: 700; margin: .5em 0 .3em; }
.readbox--md code { font-family: var(--font-mono); font-size: .85em; background: var(--surface); border: 1px solid var(--line); padding: 1px 4px; border-radius: 3px; }
.readbox--md a { color: var(--brand-ink); }

/* ═══════════════════════════════════════════════════════════════════════
   rev.10 — Bear Daily 통합 (데일리 홈 · 음악 · 도구 · 치트시트 · ADbox)
   기존 토큰만 사용 → 라이트/다크 자동. 그림자 대신 헤어라인, 모노 계기 목소리.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── GitHub 한국 인기 리포 리스트 ─────────────────────────────────────── */
.repo-list { display: flex; flex-direction: column; }
.repo-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 14px;
  padding: 13px 18px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background .12s ease;
}
.repo-row:last-child { border-bottom: 0; }
.repo-row:hover { text-decoration: none; background: var(--surface-2); }
.repo-row__rank {
  grid-row: span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .92rem;
  color: var(--muted);
  min-width: 2.2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.repo-row:hover .repo-row__rank { color: var(--brand-ink); }
.repo-row__repo { font-size: .98rem; line-height: 1.4; min-width: 0; }
.repo-row__owner { color: var(--muted); }
.repo-row__name { font-weight: 700; color: var(--ink); }
.repo-row:hover .repo-row__name { color: var(--brand-ink); }
.repo-row__chevron { align-self: center; color: var(--muted); font-family: var(--font-mono); }
.repo-row__desc {
  grid-column: 2 / 3;
  font-size: .86rem;
  color: var(--ink-2);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.repo-row__meta { grid-column: 2 / 3; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin-top: 2px; font-size: .74rem; color: var(--muted); }
.repo-row__star { font-family: var(--font-mono); color: var(--ink-2); }

/* ── 브리핑 벤토 (글랜서블 타일 그리드) ──────────────────────────────── */
.bento { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bento__tile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px;
  min-height: 116px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .12s ease;
}
.bento__tile:hover { text-decoration: none; border-color: var(--brand); background: var(--surface-2); }
.bento__tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bento__lab { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bento__num { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bento__sub { font-size: .82rem; color: var(--muted); margin-top: auto; }
.bento__cover { width: 46px; height: 46px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--line); flex: none; }
.bento__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bento__row-meta { min-width: 0; }
.bento__row-title { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bento__row-meta-sub { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 뉴스 헤드라인 — 이미지 히어로 타일(가로 span) */
.bento__tile--hero { position: relative; min-height: 188px; padding: 0; overflow: hidden; color: #fff; grid-column: 1 / -1; }
@media (min-width: 560px) { .bento__tile--hero { grid-column: span 2; grid-row: span 2; } }
.bento__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bento__hero-body { position: relative; z-index: 1; margin-top: auto; width: 100%; padding: 16px; background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.25) 70%, transparent); }
.bento__hero-title { color: #fff; font-size: 1.12rem; font-weight: 700; line-height: 1.35; }
.bento__hero-meta { display: block; margin-top: 7px; font-family: var(--font-mono); font-size: .74rem; color: rgba(255,255,255,.78); }
.bento__tile--hero:hover { border-color: var(--brand); }
.bento__tile--hero:hover .bento__hero-title { color: #fff; }

/* 미니 칩(치트시트 타일 등) */
.bento__chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* ── 음악: Top Tracks 리스트 + 신곡 가로 스크롤 ─────────────────────── */
.music-list { display: flex; flex-direction: column; }
.track-row {
  display: grid;
  grid-template-columns: auto 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.track-row:last-child { border-bottom: 0; }
.track-row:hover { text-decoration: none; background: var(--surface-2); }
.track-row__rank { font-family: var(--font-mono); font-weight: 700; color: var(--muted); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.track-row__cover { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); }
.track-row__meta { min-width: 0; }
.track-row__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-row__artist { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-row__side { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); white-space: nowrap; }

.rel-scroll { display: flex; gap: 14px; overflow-x: auto; padding: 2px 0 10px; scroll-snap-type: x proximity; }
.rel-card { flex: 0 0 152px; scroll-snap-align: start; color: var(--ink); }
.rel-card:hover { text-decoration: none; }
.rel-card__cover { width: 152px; height: 152px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); }
.rel-card:hover .rel-card__cover { border-color: var(--brand); }
.rel-card__title { font-weight: 600; font-size: .88rem; margin-top: 8px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rel-card__artist { font-size: .78rem; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 음악 range 토글(중기/단기/장기) — choicechip 패턴 재사용 가능, 별칭 */
.seg-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.seg-toggle button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: .84rem; font-weight: 600; color: var(--ink-2);
  padding: 6px 13px; border-radius: 3px; min-height: 32px;
}
.seg-toggle button.is-active { background: var(--brand); color: #fff; }

/* ── 도구: 주차/투두 ─────────────────────────────────────────────────── */
.todo-list { display: flex; flex-direction: column; }
.todo-row { display: flex; align-items: center; gap: 11px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.todo-row:last-child { border-bottom: 0; }
.todo-row input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--brand); flex: none; cursor: pointer; }
.todo-row__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.todo-row.is-done .todo-row__text { text-decoration: line-through; color: var(--muted); }
.todo-row__del { flex: none; color: var(--muted); background: none; border: 0; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 4px 8px; border-radius: var(--radius-sm); }
.todo-row__del:hover { color: var(--p-critical); background: var(--surface-2); }

/* ── 치트시트: 아코디언 + 코드 블록 ─────────────────────────────────── */
.acc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.acc + .acc { margin-top: 10px; }
.acc__sum {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; font-weight: 600; color: var(--ink);
}
.acc__sum::-webkit-details-marker { display: none; }
.acc__sum::after { content: "+"; font-family: var(--font-mono); font-weight: 700; color: var(--muted); font-size: 1.1rem; }
.acc[open] .acc__sum { border-bottom: 1px solid var(--line); }
.acc[open] .acc__sum::after { content: "\2212"; }
.acc__sum:hover { background: var(--surface-2); }
.acc__body { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.cheat-item__desc { font-size: .86rem; color: var(--muted); margin-bottom: 5px; }
.cheat-pre {
  font-family: var(--font-mono); font-size: .84rem; line-height: 1.65;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; overflow-x: auto; white-space: pre; color: var(--ink);
}

/* ── ADbox: 이미지 그리드 ─────────────────────────────────────────────── */
.adbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.adbox-grid a, .adbox-grid img { display: block; }
.adbox-grid img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer;
  transition: border-color .15s ease;
}
.adbox-grid img:hover { border-color: var(--brand); }

/* repo 더보기 토글 수정: hidden 속성이 .repo-row의 display:grid를 이기도록 (폰/PC 공통 버그 수정) */
.repo-extra[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Dashboard rev.3 — 5탭 작업 콘솔 (투두·칸반·캘린더·회고·타임트래커)
   Engineering Logbook 미감 확장: 헤어라인 구조 · 모노 라벨 · 틸 1색 · 상태 엣지
   기존 토큰만 사용(라이트/다크 자동). 외부 의존 없음.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 콘솔 헤더 ─────────────────────────────────────────────────────── */
.dash-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-hero__id { display: flex; flex-direction: column; gap: 3px; }
.dash-hero__date { font-family: var(--font-mono); font-size: .92rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.dash-hero__date .mark { color: var(--brand); }
.dash-hero__date .dow { color: var(--muted); }
.dash-hero__greet { font-size: 1.34rem; font-weight: 700; letter-spacing: -.02em; }
.dash-hero__stat { display: flex; gap: 16px; font-size: .8rem; color: var(--muted); }
.dash-hero__stat b { color: var(--ink); font-size: 1rem; margin-left: 3px; }

/* ── 탭 네비 — 모노 라벨 + 하단 틸 언더라인 ───────────────────────── */
.dtabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.dtabs::-webkit-scrollbar { display: none; }
.dtab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; font-size: .92rem; font-weight: 600; color: var(--muted); white-space: nowrap; border: 0; background: none; cursor: pointer; transition: color .15s ease; }
.dtab:hover { color: var(--ink-2); text-decoration: none; }
.dtab.is-active { color: var(--brand-ink); }
.dtab.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--brand); border-radius: 2px 2px 0 0; }
.dtab__ic { font-size: .95em; opacity: .85; }
.dtabs__ink { display: none; }

/* ── 패널 전환 (탭 변경 시 staggered 등장) ──────────────────────────── */
.dpanel { display: none; margin-top: 18px; }
.dpanel.is-active { display: block; animation: dpanel-in .34s cubic-bezier(.2, .7, .2, 1); }
@keyframes dpanel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dpanel.is-active { animation: none; } }

/* ── 투두 ──────────────────────────────────────────────────────────── */
.todo-add { padding: 14px 16px; margin-bottom: 16px; }
.todo-add__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.todo-add__row .select { flex: 0 0 auto; min-width: 156px; }
.todo-add__title { flex: 1 1 240px; }
.todo-add__due { flex: 0 0 auto; width: 154px; }

.todo-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.todo-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border-left: 3px solid var(--proj-edge, var(--brand)); transition: background .12s ease; }
.todo-item:hover { background: var(--surface-2); }
.todo-item.is-doing { border-left-color: var(--st-progress); }
.todo-item__check { display: flex; margin: 0; }
.checkbox { width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 5px; background: var(--surface); cursor: pointer; position: relative; flex: 0 0 auto; transition: border-color .15s ease, box-shadow .15s ease; }
.checkbox::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--brand); opacity: 0; transition: opacity .15s ease; }
.checkbox:hover { border-color: var(--brand); }
.checkbox:hover::after { opacity: .55; }
.checkbox:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.todo-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.todo-item__title { font-weight: 500; line-height: 1.45; }
.todo-item__meta { display: flex; gap: 9px; align-items: center; font-size: .76rem; flex-wrap: wrap; }
.proj-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; background: var(--brand-soft); color: var(--brand-ink); border-radius: 20px; font-size: .73rem; font-weight: 600; white-space: nowrap; }
.todo-item__tag { padding: 1px 7px; background: var(--st-progress); color: #fff; border-radius: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.todo-item__due { color: var(--muted); font-family: var(--font-mono); }
.todo-item__due.is-over { color: var(--p-critical); font-weight: 700; }

/* ── 칸반 ──────────────────────────────────────────────────────────── */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.kcol { flex: 0 0 244px; display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); border-top: 2px solid var(--kc, var(--line-strong)); }
.kcol--backlog { --kc: var(--st-closed); }
.kcol--todo    { --kc: var(--st-progress); }
.kcol--doing   { --kc: var(--brand); }
.kcol--test    { --kc: #8B5CF6; }
.kcol--done    { --kc: var(--st-resolved); }
.kcol--discard { --kc: var(--muted); }
.kcol__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.kcol__name { font-weight: 700; font-size: .86rem; }
.kcol__n { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); background: var(--surface); padding: 1px 9px; border-radius: 20px; border: 1px solid var(--line); }
.kcol__body { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 56px; }
.kcard { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--kc, var(--line-strong)); border-radius: var(--radius-sm); padding: 10px 11px; transition: transform .12s ease, box-shadow .12s ease; }
.kcard:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.kcard__title { font-size: .87rem; line-height: 1.46; margin-bottom: 8px; }
.kcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kcard__q { font-family: var(--font-mono); font-size: .67rem; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
.kcol__empty { color: var(--muted); text-align: center; padding: 12px 0; font-size: .82rem; opacity: .5; }
.kcol--discard .kcard__title { text-decoration: line-through; color: var(--muted); }
.kcard[draggable="true"] { cursor: grab; -webkit-user-select: none; user-select: none; }
.kcard.is-dragging { opacity: .45; transform: rotate(2deg); }
.kcol.is-over { outline: 2px dashed var(--brand); outline-offset: -2px; }

/* ── 대시보드 간트(전체 프로젝트, 읽기 전용) — admin/planner.php 간트의 포팅 축약판 ── */
.dgantt {
  --q1: var(--p-critical); --q2: var(--st-progress); --q3: var(--p-high); --q4: var(--st-closed);
  /* 일 줌 격자 — 배경 텍스처보다 진하고 주 경계(--line)보다 옅게 */
  --gantt-day-line: color-mix(in srgb, var(--line) 55%, transparent);
}
.dgantt .gantt-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dgantt .gantt-zoom { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.dgantt .gantt-zoom button { border: none; background: transparent; padding: 6px 12px; border-radius: var(--radius-sm); font-size: .78rem; font-weight: 700; color: var(--muted); cursor: pointer; min-height: 0; }
.dgantt .gantt-zoom button.on { background: var(--brand); color: #fff; }
.dgantt .gantt-hint { font-size: .76rem; color: var(--muted); }
.dgantt .gantt-range { margin-left: auto; font-size: .74rem; color: var(--muted); }

.dgantt .gantt-frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dgantt .gantt-scroll { overflow: auto; max-height: 72vh; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.dgantt .gantt-canvas { position: relative; }

.dgantt .gantt-head { position: sticky; top: 0; z-index: 5; display: flex; background: var(--surface); border-bottom: 1px solid var(--line-strong); }
.dgantt .gantt-corner { position: sticky; left: 0; z-index: 6; flex: none; width: var(--gantt-label-w); background: var(--surface); border-right: 1px solid var(--line); display: flex; align-items: flex-end; padding: 6px 12px; font-size: .7rem; font-weight: 700; color: var(--muted); }
.dgantt .gantt-months { display: flex; height: 22px; border-bottom: 1px solid var(--line); }
.dgantt .gantt-m { flex: none; display: flex; align-items: center; padding: 0 6px; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; color: var(--ink-2); border-left: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.dgantt .gantt-days { display: flex; height: 24px; }
.dgantt .gantt-d { flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .66rem; color: var(--muted); border-left: 1px solid var(--gantt-day-line); }
.dgantt .gantt-d.is-we { opacity: .45; }
.dgantt .gantt-d.is-today { color: var(--brand-ink); background: var(--brand-soft); font-weight: 700; }

.dgantt .gantt-body { position: relative; min-height: 120px; }
.dgantt .gantt-todayline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--brand); z-index: 3; pointer-events: none; }
.dgantt .gantt-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); z-index: 1; pointer-events: none; }
.dgantt .gantt-canvas.zoom-quarter .gantt-track { background-image: none; }   /* 분기 줌: 주 격자 대신 월 경계 div */
.dgantt .gantt-empty-note { padding: 40px 16px 40px calc(var(--gantt-label-w) + 20px); color: var(--muted); font-size: .84rem; }

/* 프로젝트 구분 행 — 라벨 클릭 → 플래너 딥링크 */
.dgantt .gantt-prow { display: flex; border-bottom: 1px solid var(--line); }
.dgantt .gantt-plabel { position: sticky; left: 0; z-index: 4; flex: none; width: var(--gantt-label-w); background: var(--surface-2); border-right: 1px solid var(--line); padding: 7px 12px; font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.dgantt .gantt-plabel .go { color: var(--muted); font-weight: 400; font-size: .7rem; }
.dgantt .gantt-plabel:hover { color: var(--brand-ink); }
.dgantt .gantt-ptrack { height: 32px; background-color: var(--surface-2); }

.dgantt .gantt-row { display: flex; border-bottom: 1px solid var(--line); }
.dgantt .gantt-row:hover .gantt-label { background: var(--surface-2); }
.dgantt .gantt-label { position: sticky; left: 0; z-index: 4; flex: none; width: var(--gantt-label-w); background: var(--surface); border-right: 1px solid var(--line); padding: 5px 12px 0 20px; min-width: 0; cursor: pointer; }
.dgantt .gantt-label-title { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dgantt .gantt-row.is-done .gantt-label-title { text-decoration: line-through; color: var(--muted); }
.dgantt .gantt-label-meta { font-family: var(--font-mono); font-size: .64rem; color: var(--muted); margin-top: 1px; }
.dgantt .gantt-label-meta .over { color: var(--p-critical); font-weight: 700; }

/* 트랙 배경: repeating-gradient (rangeStart 월요일 정렬 전제 — --g-ppd/--g-week는 canvas 인라인 주입) */
.dgantt .gantt-track { position: relative; height: 40px; flex: none;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--g-week) - 1px), var(--line) calc(var(--g-week) - 1px), var(--line) var(--g-week)); }
.dgantt .gantt-canvas.zoom-day .gantt-track, .dgantt .gantt-canvas.zoom-week .gantt-track {
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--g-week) - 1px), var(--line) calc(var(--g-week) - 1px), var(--line) var(--g-week)),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--g-ppd)*5), var(--surface-2) calc(var(--g-ppd)*5), var(--surface-2) var(--g-week)); }
.dgantt .gantt-canvas.zoom-day .gantt-track {
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--g-week) - 1px), var(--line) calc(var(--g-week) - 1px), var(--line) var(--g-week)),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--g-ppd) - 1px), var(--gantt-day-line) calc(var(--g-ppd) - 1px), var(--gantt-day-line) var(--g-ppd)),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--g-ppd)*5), var(--surface-2) calc(var(--g-ppd)*5), var(--surface-2) var(--g-week)); }
.dgantt .gantt-prow .gantt-ptrack { background-image: none; }

/* 바: 칸반 카드의 좌측 엣지 시그니처를 시간축으로 이식(읽기 전용 — 커서 기본) */
.dgantt .gantt-bar { position: absolute; top: 7px; height: 26px; min-width: 10px; z-index: 2;
  --gb: var(--line-strong);
  background: color-mix(in srgb, var(--gb) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gb) 45%, var(--surface));
  border-left: 3px solid var(--gb);
  border-radius: var(--radius-sm); }
.dgantt .gantt-bar.q1 { --gb: var(--q1); } .dgantt .gantt-bar.q2 { --gb: var(--q2); }
.dgantt .gantt-bar.q3 { --gb: var(--q3); } .dgantt .gantt-bar.q4 { --gb: var(--q4); }
.dgantt .gantt-bar.is-done { opacity: .55; }
.dgantt .gantt-bar.is-overdue { border-color: color-mix(in srgb, var(--p-critical) 60%, var(--surface)); }
.dgantt .gantt-bar.clip-l { border-left-style: dashed; }
.dgantt .gantt-bar.clip-r { border-right-style: dashed; }

/* color-mix 미지원 강등 (app.css 관례 동일) */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .dgantt .gantt-bar { background: var(--surface-2); border-color: var(--line-strong); }
  .dgantt { --gantt-day-line: var(--line); }
}
@media (max-width: 780px) {
  .dgantt .gantt-label-meta { display: none; }
  .dgantt .gantt-label { padding-left: 14px; }
}

/* ── 캘린더 ────────────────────────────────────────────────────────── */
.cal { padding: 16px; }
.cal__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cal__title { font-size: 1.1rem; margin: 0 4px; }
.cal__legend { margin-left: auto; display: flex; align-items: center; gap: 11px; font-size: .73rem; color: var(--muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 2px; }
.dot--ev { background: var(--brand); }
.dot--due { background: var(--p-high); }
.dot--retro { background: var(--st-resolved); }
.dot--plan { background: var(--st-progress); }

/* 캘린더 × 플래너 일정 스팬 — 색은 아이젠하워 사분면, 라벨은 시작일·주 시작에만 */
.cal__span { display: block; height: 16px; line-height: 16px; padding: 0 4px; font-size: .62rem; font-weight: 600; color: var(--ink-2);
  --sp: var(--line-strong);
  background: color-mix(in srgb, var(--sp) 16%, var(--surface));
  border-left: 3px solid var(--sp); border-radius: 4px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.cal__span:hover { background: color-mix(in srgb, var(--sp) 30%, var(--surface)); color: var(--ink); }
.cal__span.q1 { --sp: var(--p-critical); } .cal__span.q2 { --sp: var(--st-progress); }
.cal__span.q3 { --sp: var(--p-high); }     .cal__span.q4 { --sp: var(--st-closed); }
.cal__span.is-done { opacity: .45; text-decoration: line-through; }
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .cal__span { background: var(--surface-2); }
}
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cal__dow { background: var(--surface-2); text-align: center; padding: 7px 0; font-size: .75rem; font-weight: 700; color: var(--muted); font-family: var(--font-mono); }
.cal__dow.is-sun { color: var(--p-high); }
.cal__dow.is-sat { color: var(--st-progress); }
.cal__cell { background: var(--surface); min-height: 94px; padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; }
.cal__cell.is-pad { background: var(--surface-2); opacity: .4; }
.cal__cell.is-today { background: var(--brand-soft); }
.cal__num { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-2); display: flex; justify-content: space-between; align-items: center; }
.cal__cell.is-sun .cal__num { color: var(--p-high); }
.cal__cell.is-sat .cal__num { color: var(--st-progress); }
.cal__cell.is-today .cal__num { color: var(--brand-ink); font-weight: 700; }
.cal__marks { display: inline-flex; gap: 2px; }
.cal__event { margin: 0; }
.cal__event-btn { display: block; width: 100%; text-align: left; font-size: .71rem; padding: 2px 6px; border: 0; border-left: 3px solid var(--ev, var(--brand)); background: var(--surface-2); color: var(--ink); border-radius: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter .12s ease; }
@supports (background: color-mix(in srgb, red, blue)) { .cal__event-btn { background: color-mix(in srgb, var(--ev) 15%, transparent); } }
.cal__event-btn:hover { filter: brightness(.94); }
.cal__more { font-family: var(--font-mono); font-size: .67rem; color: var(--muted); }
.cal__add { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.cal__add-title { flex: 1 1 160px; }
.cal__add-memo { flex: 1 1 140px; }
.cal__add-color { width: 42px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }

/* ── 회고 ──────────────────────────────────────────────────────────── */
.retro-list { display: flex; flex-direction: column; gap: 12px; }
.retro-card { border: 1px solid var(--line); border-left: 3px solid var(--st-resolved); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; }
.retro-card__date { font-size: .82rem; color: var(--ink-2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); }
.retro-card__date .mark { color: var(--st-resolved); }
.retro-card__body { font-size: .92rem; }
.retro-card__body > :first-child { margin-top: 0; }
.retro-card__body > :last-child { margin-bottom: 0; }

/* ── 타임트래커 ────────────────────────────────────────────────────── */
.tt-stage { padding: 24px 22px; margin-bottom: 18px; text-align: center; }
.tt-stage.is-running { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand), var(--shadow-pop); }
.tt-live { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tt-live__meta { display: flex; flex-direction: column; gap: 4px; }
.tt-live__proj { font-size: 1rem; font-weight: 700; color: var(--brand-ink); }
.tt-live__desc { color: var(--muted); font-size: .9rem; }
.tt-clock { font-size: 3rem; font-weight: 700; letter-spacing: .04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.tt-stage.is-running .tt-clock { animation: tt-pulse 2.4s ease-in-out infinite; }
@keyframes tt-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .tt-stage.is-running .tt-clock { animation: none; } }
.tt-start { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.tt-start .select { flex: 0 0 auto; min-width: 160px; }
.tt-start__desc { flex: 1 1 220px; max-width: 360px; }
.btn--stop { color: #fff; background: var(--p-critical); border-color: var(--p-critical); }
.btn--stop:hover { filter: brightness(.92); }
.tt-summary { margin-bottom: 18px; }
.tt-bars { display: flex; flex-direction: column; gap: 13px; }
.tt-bar__top { display: flex; justify-content: space-between; font-size: .84rem; margin-bottom: 5px; }
.tt-bar__name { font-weight: 600; }
.tt-bar__t { color: var(--muted); font-family: var(--font-mono); }
.tt-bar__track { height: 8px; background: var(--surface-2); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.tt-bar__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-ink)); border-radius: 20px; transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.tt-log { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tt-log__item { display: flex; align-items: center; gap: 12px; padding: 10px 13px; background: var(--surface); font-size: .86rem; }
.tt-log__item.is-live { background: var(--brand-soft); }
.tt-log__time { color: var(--muted); font-size: .77rem; flex: 0 0 auto; }
.tt-log__proj { font-weight: 600; color: var(--brand-ink); flex: 0 0 auto; }
.tt-log__desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-log__dur { font-weight: 700; flex: 0 0 auto; }
.tt-log__del { border: 0; background: none; color: var(--muted); font-size: 1.15rem; cursor: pointer; line-height: 1; padding: 2px 7px; border-radius: 4px; transition: color .12s ease, background .12s ease; }
.tt-log__del:hover { color: var(--p-critical); background: var(--surface-2); }
.tt-log__item form { margin: 0; }

/* ── 반응형 ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dash-hero { align-items: flex-start; }
  .todo-add__row { flex-direction: column; align-items: stretch; }
  .todo-add__row .select, .todo-add__title, .todo-add__due { width: 100%; flex-basis: auto; }
  .cal__cell { min-height: 64px; }
  .cal__legend { width: 100%; margin-left: 0; }
  .tt-clock { font-size: 2.3rem; }
  .kcol { flex-basis: 210px; }
  .tt-log__desc { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   로그인 기준 전역 통일 — 다크 잉크 브랜드 헤더/푸터  (rev.4)
   로그인 .authaside DNA(잉크 #11171B + 제도 격자 + 코너 틸 글로우)를
   전역 헤더(.topbar)와 푸터(.appfoot)에 입혀 모든 페이지를 한 프레임으로 묶는다.
   라이트/다크 모드 공통 다크 헤더(로그인 화면과 동일 거동). 본문은 현행 가독성 유지.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 헤더(topbar): 로그인 좌측 패널과 동일 톤 ──────────────────────── */
.topbar {
  background: #11171B;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--brand);
  isolation: isolate;
  /* 노치/상태바 영역만큼 헤더를 위로 확장(모바일 터치영역 확보) */
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    radial-gradient(140% 220% at 0% 0%, rgba(47, 183, 191, .18), transparent 56%);
  background-size: 26px 26px, 26px 26px, 100% 100%;
}
.topbar--admin { border-bottom-color: var(--brand); }
.topbar__inner { position: relative; }

/* 브랜드 — 흰 텍스트 + 틸 마크 */
.brand { color: #fff; }
.brand__mark { color: #2FB7BF; }
.brand__name { color: #fff; }
.brand__tag { color: #0B1417; background: #2FB7BF; }

/* 내비 링크 — 다크 위 반투명 흰, 활성/관리자 틸 */
.topnav__link { color: rgba(255, 255, 255, .72); }
.topnav__link:hover { color: #fff; background: rgba(255, 255, 255, .09); text-decoration: none; }
.topnav__link.is-active { color: #fff; background: rgba(47, 183, 191, .2); }
.topnav__link--admin { color: #6FD8DE; border-color: rgba(47, 183, 191, .4); background: rgba(47, 183, 191, .08); }
.topnav__user { border-left-color: rgba(255, 255, 255, .16); }
.topnav__who { color: rgba(255, 255, 255, .58); }

/* 헤더 안의 로그아웃 버튼 */
.topbar .btn--ghost { color: rgba(255, 255, 255, .82); border-color: transparent; }
.topbar .btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }

/* 햄버거(모바일) — 다크 헤더 위 반투명 버튼 + 흰 라인 */
.navtoggle { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); }
.navtoggle:hover { background: rgba(255, 255, 255, .12); }
.navtoggle span { background: #fff; }
/* 모바일 펼친 메뉴: 다크 배경 유지 */
.topbar.is-open .topnav { background: #11171B; border-top: 1px solid rgba(255, 255, 255, .08); }

/* ── 푸터(appfoot): 헤더와 대칭(코너 글로우는 우하단) ───────────────── */
.appfoot {
  /* position 필수: 없으면 ::before(absolute, inset:0)가 푸터를 벗어나
     initial containing block(첫 뷰포트 전체)에 깔려, 스크롤 시 틸 글로우가
     화면 하나 높이에서 뚝 끊기는 배경 버그가 생긴다. */
  position: relative;
  background: #11171B;
  color: rgba(255, 255, 255, .68);
  border-top: 1px solid var(--brand);
  isolation: isolate;
}
.appfoot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    radial-gradient(140% 220% at 100% 100%, rgba(47, 183, 191, .14), transparent 56%);
  background-size: 26px 26px, 26px 26px, 100% 100%;
}
.appfoot--admin { border-top-color: var(--brand); }
.appfoot__inner { position: relative; }
.appfoot__brand { color: rgba(255, 255, 255, .82); font-family: var(--font-mono); letter-spacing: .04em; }
.appfoot a { color: #6FD8DE; }

/* 다크 모드에서도 헤더/푸터는 동일 잉크(토큰 surface가 더 어두워도 고정) */
@media (prefers-color-scheme: dark) {
  .topbar, .appfoot { background: #0D1216; }
}

/* ═══════════════════════════════════════════════════════════════════════
   관리자 내비 그룹 드롭다운 (rev.5)
   16개 평면 링크 → 바로가기 2개 + 그룹 3개(라이프·지식·시스템)로 압축.
   데스크탑: 클릭 토글 드롭다운(다크 헤더와 동일 잉크 패널).
   모바일: 그룹 버튼이 섹션 라벨로 강등되고 하위 링크가 2열 그리드로 상시 노출.
   ═══════════════════════════════════════════════════════════════════════ */
.topnav__group { position: relative; }

.topnav__groupbtn {
  font: inherit;
  background: none;
  cursor: pointer;
  gap: 6px;
}

/* 캐럿: 2px 보더 셰브런, 열림 시 반전 */
.topnav__caret {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
  opacity: .65;
}
.topnav__group.is-open .topnav__caret { transform: translateY(2px) rotate(-135deg); }
.topnav__group.is-open .topnav__groupbtn { color: #fff; background: rgba(255, 255, 255, .09); }

.topnav__menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 176px;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: #151C21;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .42);
}
.topnav__group.is-open .topnav__menu { display: flex; }

.topnav__menuitem {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .74);
  font-weight: 500;
  white-space: nowrap;
}
.topnav__menuitem:hover { color: #fff; background: rgba(255, 255, 255, .09); text-decoration: none; }
.topnav__menuitem.is-active { color: #fff; background: rgba(47, 183, 191, .22); }
.topnav__menuitem:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.topnav__groupbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (max-width: 767px) {
  /* 드로어 안: 그룹 = 라벨 달린 섹션, 링크는 2열 그리드로 압축 노출 */
  .topnav__group { width: 100%; }
  .topnav__groupbtn {
    pointer-events: none;
    width: 100%;
    min-height: 0;
    margin-top: 8px;
    padding: 6px 12px 2px;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .46);
    background: none;
  }
  .topnav__group.is-open .topnav__groupbtn { color: rgba(255, 255, 255, .46); background: none; }
  .topnav__caret { display: none; }
  .topnav__menu {
    display: grid;
    position: static;
    grid-template-columns: 1fr 1fr;
    gap: 2px 6px;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .topnav__menuitem { min-height: var(--tap); }
  /* 메뉴가 길어도 화면 안에서 스크롤 */
  .topbar.is-open .topnav {
    max-height: calc(100vh - 86px);
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}