/* =========================================================
   SNACK & GARDEN — OPS
   Editorial UI · acid-lime accent · mono numerals
   Dark (default) + Light theme via [data-theme="light"]
   Buttons inspired by "100 card UI kit" (mono label · 12px · 1px border)
   ========================================================= */

/* ---------------- 고딕체 : Wanted Sans (자체 호스팅) ---------------- */
@font-face { font-family: "Wanted Sans"; src: url("../fonts/wanted-sans/WantedSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Wanted Sans"; src: url("../fonts/wanted-sans/WantedSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Wanted Sans"; src: url("../fonts/wanted-sans/WantedSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Wanted Sans"; src: url("../fonts/wanted-sans/WantedSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Wanted Sans"; src: url("../fonts/wanted-sans/WantedSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Wanted Sans"; src: url("../fonts/wanted-sans/WantedSans-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Wanted Sans"; src: url("../fonts/wanted-sans/WantedSans-ExtraBlack.ttf") format("truetype"); font-weight: 950; font-style: normal; font-display: swap; }

:root {
  /* surfaces */
  --bg:        #0a0a0b;
  --panel:     #0f0f10;
  --panel-2:   #151517;
  --card-bg:   #131315;
  --line:      #232326;
  --line-soft: #1a1a1c;

  /* text */
  --ink:       #f4f4f5;
  --ink-2:     #a1a1a6;
  --ink-3:     #6b6b70;

  /* accent */
  --accent:      #c6ff2e;   /* fills / borders */
  --accent-text: #c6ff2e;   /* accent used as text */
  --accent-ink:  #0a0a0b;   /* text on accent fill */

  /* status */
  --green: #4ade80;
  --red:   #ff5a52;
  --amber: #f0b429;
  --slate: #9aa3b2;

  /* misc */
  --check-border: #3a3a40;
  --shadow: 0 14px 40px rgba(0,0,0,.4);
  --today-glow: rgba(198,255,46,.09);
  --holiday-tint: rgba(74,222,128,.10);

  --mono: "Wanted Sans", "Pretendard", system-ui, sans-serif;
  --r-sm: 8px;
  --r:    10px;
  --r-lg: 16px;
  --side-w: 240px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:        #f4f5f1;
  --panel:     #ffffff;
  --panel-2:   #eef0ea;
  --card-bg:   #ffffff;
  --line:      #e2e3dd;
  --line-soft: #ededd8;
  --line-soft: #ecede7;

  --ink:       #16160f;
  --ink-2:     #55554d;
  --ink-3:     #9a9a90;

  --accent:      #bff000;
  --accent-text: #5c7a08;
  --accent-ink:  #14160a;

  --green: #16a34a;
  --red:   #dc2f28;
  --amber: #b7791f;
  --slate: #64748b;

  --check-border: #c9cabd;
  --shadow: 0 14px 40px rgba(20,22,10,.10);
  --today-glow: rgba(150,200,0,.16);
  --holiday-tint: rgba(22,163,74,.10);

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Wanted Sans", "Pretendard", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
  transition: background .25s, color .25s;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 20px; }
::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: var(--mono); font-feature-settings: "tnum"; }

.layout { display: none; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
html[data-authed="1"] .layout { display: grid; }
html[data-authed="1"] .lock { display: none; }

/* ---------------- LOCK SCREEN ---------------- */
.lock {
  position: fixed; inset: 0; z-index: 999; display: flex;
  align-items: center; justify-content: center; background: var(--bg);
}
.lock__card { text-align: center; padding: 40px; width: min(320px, 86vw); }
.lock__brand { font-weight: 800; font-size: 21px; letter-spacing: -.5px; margin-bottom: 32px; color: var(--ink); }
.lock__brand em { color: var(--accent-text); font-style: normal; margin: 0 1px; }
.lock__label { color: var(--ink-3); font-size: 13px; margin: 0 0 22px; }
.lock__dots { position: relative; display: flex; gap: 16px; justify-content: center; }
.lock__dots.is-shake { animation: lockShake .4s; }
.lock__dot {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line);
  transition: background .12s, border-color .12s, transform .12s;
}
.lock__dot.is-filled { background: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.lock__input {
  position: absolute; inset: -14px 0 auto 0; height: 44px; width: 100%;
  opacity: 0; border: none; outline: none; padding: 0; cursor: default;
}
.lock__error { color: var(--red); font-size: 12px; margin: 18px 0 0; min-height: 15px; }
.lock__error[hidden] { display: none; }

/* --- 관리자 로그인 폼 --- */
.lock__form { display: flex; flex-direction: column; align-items: stretch; }
.lock__form.is-shake { animation: lockShake .4s; }
.lock__form .lock__label { margin-bottom: 24px; }
.lock__field {
  position: relative; display: flex; align-items: center;
  margin-bottom: 10px; text-align: left;
}
.lock__ficon {
  position: absolute; left: 13px; display: flex; color: var(--ink-3);
  pointer-events: none;
}
.lock__text {
  width: 100%; height: 46px; padding: 0 14px 0 40px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink);
  font-size: 14px; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.lock__text::placeholder { color: var(--ink-3); }
.lock__text:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.lock__submit {
  height: 46px; margin-top: 8px; border: none; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink, #fff);
  font-size: 14px; font-weight: 700; font-family: inherit; letter-spacing: -.2px;
  cursor: pointer; transition: filter .15s, opacity .15s;
}
.lock__submit:hover { filter: brightness(1.05); }
.lock__submit:active { filter: brightness(.96); }
.lock__submit:disabled { opacity: .6; cursor: default; }
.lock__remember {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 16px; color: var(--ink-3); font-size: 12px; cursor: pointer;
  user-select: none;
}
.lock__remember input { accent-color: var(--accent); cursor: pointer; }

/* --- 로그아웃 버튼 (사이드바 하단) --- */
.side__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side__foot-status { display: inline-flex; align-items: center; }
.side__logout {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: transparent; color: var(--ink-3);
  font-size: 11px; font-family: inherit; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.side__logout:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }

@keyframes lockShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* ---------------- LOADING ---------------- */
.loading-screen { display: grid; place-content: center; justify-items: center; gap: 16px; min-height: 60vh; }
.loading-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line-soft); border-top-color: var(--accent);
  animation: loadingSpin .8s linear infinite;
}
.loading-text { color: var(--ink-3); font-family: var(--mono); font-size: 12px; letter-spacing: .5px; }
@keyframes loadingSpin { to { transform: rotate(360deg); } }

/* ---------------- 앱 부팅 로더 ---------------- */
.boot {
  display: grid; place-content: center; justify-items: center; gap: 22px;
  min-height: 66vh; text-align: center; animation: bootFade .4s ease both;
}
.boot__mark { position: relative; display: inline-flex; align-items: center; }
.boot__logo {
  font-weight: 800; font-size: 27px; letter-spacing: -.02em; color: var(--ink);
  animation: bootBreath 1.9s ease-in-out infinite;
}
.boot__logo em { color: var(--accent-text); font-style: normal; margin: 0 2px; }
/* 로고 옆 라임 점 — 부드럽게 확장하는 신호등 */
.boot__ping {
  position: absolute; right: -14px; top: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
}
.boot__ping::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent); animation: bootPing 1.4s cubic-bezier(0,0,.2,1) infinite;
}
/* 인디터미닛 진행바 — 라임 스윕 */
.boot__bar {
  position: relative; width: 190px; height: 3px; border-radius: 100px;
  background: var(--line); overflow: hidden;
}
.boot__bar span {
  position: absolute; top: 0; left: 0; height: 100%; width: 42%; border-radius: 100px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: bootSweep 1.15s cubic-bezier(.45,0,.25,1) infinite;
}
.boot__sub { color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; letter-spacing: .4px; }

@keyframes bootFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bootBreath { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes bootPing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes bootSweep { 0% { left: -42%; } 100% { left: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .boot__logo, .boot__ping::after, .boot__bar span { animation: none; }
  .boot__logo { opacity: 1; }
  .boot__bar span { left: 0; width: 100%; opacity: .6; }
}

/* ---------------- SIDEBAR ---------------- */
.side {
  background: var(--panel);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand { padding: 26px 22px 20px; display: block; border-bottom: 1px solid var(--line-soft); }
.brand__mark { font-weight: 800; font-size: 19px; letter-spacing: -.6px; color: var(--ink); display: block; line-height: 1; }
.brand__mark em { color: var(--accent-text); font-style: normal; margin: 0 2px; }
.brand__sub {
  display: block; margin-top: 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  color: var(--ink-3); text-transform: uppercase;
}

.nav { flex: 1; overflow-y: auto; padding: 8px 12px 20px; }
.nav__label {
  margin: 18px 12px 8px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  color: var(--ink-3); letter-spacing: 1.5px;
}
.nav__item {
  display: block; position: relative;
  padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 13.5px; cursor: pointer;
  transition: color .14s, background .14s;
}
.nav__item::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 0; background: var(--accent); border-radius: 2px; transition: height .16s;
}
.nav__item:hover { color: var(--ink); background: var(--panel-2); }
.nav__item.is-active { color: var(--ink); font-weight: 700; background: var(--panel-2); }
.nav__item.is-active::before { height: 16px; }
.nav__item.is-soon { opacity: .38; cursor: default; }
.nav__item.is-soon:hover { background: transparent; color: var(--ink-2); }

.side__foot {
  padding: 13px 22px; border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: .5px; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.side__foot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* ---------------- TOPBAR ---------------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 30px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar__crumb { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--ink-3); text-transform: uppercase; }
.topbar__right { display: flex; align-items: center; gap: 12px; }
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 12px; width: 240px;
}
.search input { background: none; border: none; outline: none; color: var(--ink); width: 100%; font-size: 13px; }
.search input::placeholder { color: var(--ink-3); }
.search kbd { font-family: var(--mono); font-size: 11px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }

/* theme toggle */
.theme-toggle {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2);
  padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer;
  display: flex; align-items: center; gap: 7px; transition: border-color .14s, color .14s;
}
.theme-toggle:hover { border-color: color-mix(in srgb, var(--ink-3) 60%, transparent); color: var(--ink); }
.theme-toggle .knob { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }


/* ---------------- VIEW SHELL ---------------- */
.view { padding: 30px; max-width: 1400px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--accent-text); text-transform: uppercase; margin: 0 0 8px; }
.page-head h2 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -1.2px; line-height: 1; }
.page-head .sub { margin: 8px 0 0; color: var(--ink-3); font-size: 13px; }

/* ---------------- BUTTONS (figma card-kit language) ---------------- */
.btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: .3px; font-weight: 500;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  padding: 9px 16px; border-radius: 12px; cursor: pointer;
  transition: transform .1s, background .14s, border-color .14s, color .14s;
}
.btn:hover { border-color: color-mix(in srgb, var(--ink-3) 55%, transparent); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 82%, #fff); border-color: var(--accent); }
.btn--sm { padding: 7px 12px; font-size: 11.5px; }
.btn--xs { padding: 4px 9px; font-size: 10px; border-radius: 100px; }
.btn--pill { border-radius: 100px; }
.btn.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.btn--danger { background: transparent; color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.btn--danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: var(--red); }

/* =========================================================
   SCHEDULE
   ========================================================= */
.summary {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; margin-bottom: 22px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--today-glow), transparent 55%),
    var(--card-bg);
}
.summary__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.summary__head h3 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.2px; }
.summary__asof { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.chip-mono { font-family: var(--mono); font-size: 11px; font-weight: 700; background: var(--accent); color: var(--accent-ink); padding: 3px 9px; border-radius: 999px; }
.issue-add {
  width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--ink-2); font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  margin-left: auto; transition: border-color .14s, color .14s;
}
.issue-add:hover { border-color: var(--accent); color: var(--accent-text); }
.summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.summary li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); cursor: default; }
.summary li::before { content: ""; margin-top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.issue-text { min-width: 0; }
.summary li:hover .evt__actions { opacity: 1; }
.link-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px; margin-left: 4px; vertical-align: middle;
  border: 1px solid var(--line); background: var(--panel-2); font-size: 11px; line-height: 1;
  transition: border-color .14s, transform .1s;
}
.link-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.summary--report { grid-template-columns: 1fr; margin-bottom: 0; margin-top: 22px; }
.summary--report li { align-items: center; }
.summary--report li::before { display: none; }
.report-num {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: none;
  min-width: 14px; text-align: right;
}
.report-urgent-toggle {
  width: 9px; height: 9px; border-radius: 50%; flex: none; padding: 0;
  border: 1.5px solid var(--line); background: transparent; cursor: pointer;
  font-size: 0; line-height: 0; color: transparent; overflow: hidden;
  transition: border-color .12s, background .12s, transform .1s;
}
.report-urgent-toggle:hover { border-color: var(--red); transform: scale(1.3); }
.report-urgent-toggle.is-urgent { background: var(--red); border-color: var(--red); }
.summary--report li.is-urgent .issue-text { font-weight: 700; }
.report-add-row { color: var(--ink-3); font-family: var(--mono); font-size: 11px; cursor: pointer; }
.report-add-row:hover { color: var(--ink-2); }
.summary__col h4 { margin: 0 0 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--ink-3); text-transform: uppercase; }
.summary__subhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.summary__subhead h4 { margin: 0; }
.summary__point { color: var(--ink-3); font-size: 13px; }

.cal-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px; margin-bottom: 18px; }
.cal-toolbar__nav { display: flex; align-items: center; gap: 10px; }
.cal-toolbar__range { font-weight: 800; font-size: 17px; letter-spacing: -.4px; padding: 0 6px; }
.cal-toolbar__range span { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 8px; }
.iconbtn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--ink-2); cursor: pointer; font-family: var(--mono); font-size: 14px;
}
.iconbtn:hover { border-color: color-mix(in srgb, var(--ink-3) 55%, transparent); color: var(--ink); }
.seg { display: flex; gap: 6px; }

.week-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); margin: 8px 2px 10px; }
.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }

.day {
  background: var(--card-bg); border: 1px solid var(--line-soft);
  border-radius: var(--r); min-height: 210px;
  display: flex; flex-direction: column; overflow: hidden; transition: border-color .14s;
}
.day:hover { border-color: var(--line); }
.day.is-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 30px var(--today-glow); }
.day.is-holiday { background: linear-gradient(180deg, var(--holiday-tint), var(--card-bg)); }
/* 법정 공휴일 = 빨간날 (사내 휴일 이벤트의 초록 틴트와 구분) */
.day.is-pubhol { background: linear-gradient(180deg, color-mix(in srgb, var(--red) 11%, transparent), var(--card-bg)); }
.day.is-pubhol .day__date { color: var(--red); }
.day__holiday {
  align-self: flex-start; max-width: 100%; box-sizing: border-box;
  margin: 2px 0 4px; padding: 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red);
  font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.day__head { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid var(--line-soft); }
.day__date { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.day__date small { color: var(--ink-3); font-weight: 500; font-size: 11px; margin-left: 4px; }
.day.is-sun .day__date { color: var(--red); }
.day.is-today .day__date { color: var(--accent-text); }
.day__count { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.day__body { padding: 8px; display: flex; flex-direction: column; gap: 3px; flex: 1; }

.evt { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border-radius: var(--r-sm); font-size: 12.5px; cursor: pointer; transition: background .12s; }
.evt:hover { background: var(--panel-2); }
.evt__check {
  width: 14px; height: 14px; border-radius: 4px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--check-border); display: grid; place-items: center;
  font-family: var(--mono); font-size: 9px; color: transparent;
}
.evt.is-done .evt__check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.evt.is-done .evt__text { color: var(--ink-3); text-decoration: line-through; }
.evt__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.evt__time { font-family: var(--mono); font-size: 10.5px; color: var(--accent-text); font-weight: 600; }
.evt__text { color: var(--ink); line-height: 1.35; }
.evt__half {
  display: inline-block; margin-left: 5px; padding: 0 6px; vertical-align: 1px;
  border-radius: 999px; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  line-height: 15px; white-space: nowrap;
}
.evt__half--am { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.evt__half--pm { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.evt.is-done .evt__half { opacity: .5; }
.evt__cat { width: 5px; height: 5px; border-radius: 50%; margin-top: 6px; flex: none; }

/* 완료 토글 — 시간 앞 원을 클릭하면 완료/해제 */
.evt__toggle {
  width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 1px;
  border: 2px solid var(--check-border); background: transparent; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  font-family: var(--mono); font-size: 9px; line-height: 1; color: transparent;
  transition: border-color .12s, background .12s, transform .1s;
}
.evt__toggle:hover { border-color: var(--accent) !important; transform: scale(1.12); }
.evt.is-done .evt__toggle { background: var(--accent); border-color: var(--accent) !important; color: var(--accent-ink); }
.evt__alarm-mark { font-size: 8px; margin-left: 3px; opacity: .8; vertical-align: 1px; }
/* 연차 = 리프레시 칩 (종일 휴식) */
.evt--leave { align-items: center; padding: 3px 2px; }
.evt--leave:hover { background: transparent; }
.evt-leave2 { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 8px 11px; border-radius: 11px; background: color-mix(in srgb, var(--green) 15%, transparent); }
.evt-leave2__ic { color: var(--green); display: grid; place-items: center; flex: none; }
.evt-leave2__t { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-leave2__tag { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--green); background: color-mix(in srgb, var(--green) 20%, transparent); padding: 2px 8px; border-radius: 999px; flex: none; }
/* 반차 마커 — 완료 체크 대신 '반나절 휴무'를 뜻하는 반쯤 채운 원(클릭 불가) */
.evt__leave {
  width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 1px;
  box-sizing: border-box; cursor: default;
}
.evt__leave--am { border: 2px solid var(--accent); background: linear-gradient(90deg, var(--accent) 0 50%, transparent 50% 100%); }
.evt__leave--pm { border: 2px solid var(--amber);  background: linear-gradient(90deg, transparent 0 50%, var(--amber) 50% 100%); }
.evt__link {
  flex: none; margin-top: -1px; width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; font-size: 11px; line-height: 1;
  border: 1px solid var(--line); background: var(--panel-2); transition: border-color .14s;
}
.evt__link:hover { border-color: var(--accent); }
.evt__link { position: relative; }
.evt__link-badge {
  position: absolute; top: -6px; right: -6px; min-width: 13px; height: 13px; padding: 0 3px;
  border-radius: 7px; background: var(--accent); color: #fff; font-family: var(--mono);
  font-size: 9px; line-height: 13px; text-align: center; font-weight: 700;
}

/* 일정 모달 — 제목 색상 스와치 */
.evt-colors { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.evt-color-sw {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line); transition: box-shadow .14s, transform .14s;
}
.evt-color-sw:hover { transform: scale(1.08); }
.evt-color-sw.is-active { border-color: var(--panel); box-shadow: 0 0 0 2px var(--ink); }
.evt-color-sw--none { background: var(--panel-2); position: relative; }
.evt-color-sw--none::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px;
  background: var(--ink-3); transform: rotate(-45deg);
}

/* 일정 모달 — 링크 목록(최대 5개) */
.evt-links { display: flex; flex-direction: column; gap: 6px; }
.evt-link-row { display: flex; gap: 6px; align-items: center; }
.evt-link-row .evt-link-in { flex: 1; min-width: 0; }
.evt-link-del {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-sm); line-height: 1;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-3); cursor: pointer;
  font-size: 16px; transition: border-color .14s, color .14s;
}
.evt-link-del:hover { border-color: var(--red); color: var(--red); }
.evt-links__add { margin-top: 8px; }
.evt-links__add:disabled { opacity: .5; cursor: default; }
.evt__add { margin-top: auto; color: var(--ink-3); font-family: var(--mono); font-size: 11px; padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; }
.evt__add:hover { background: var(--panel-2); color: var(--ink-2); }
.holiday-mark { text-align: center; margin: auto; color: var(--green); font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }

/* 이벤트 행 액션 — 업무 이관(→) · 취소/삭제(×) : 항상 노출 (연차 등 즉시 취소 가능하도록) */
.evt__actions { display: flex; align-items: center; gap: 1px; margin-left: auto; flex: none; opacity: 0; transition: opacity .12s; }
.evt:hover .evt__actions, .evt:focus-within .evt__actions { opacity: 1; }
.evt .evt__actions { opacity: 1; }
.evt__act {
  width: 18px; height: 18px; border-radius: 5px; border: none; background: transparent;
  color: var(--ink-3); font-family: var(--mono); font-size: 12px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0; transition: background .12s, color .12s;
}
.evt__act:hover { background: var(--panel-2); color: var(--ink); }
.evt__act--del:hover { color: var(--red); }
.evt__act--next:hover { color: var(--accent-text); }
.report-act--done:hover { color: var(--green); }

/* 일정 인라인 등록 (팝업 없이 날짜 칸에서 바로 입력) */
.evt__quickinput {
  margin-top: auto; width: 100%; background: var(--panel-2); border: 1px solid var(--accent);
  border-radius: var(--r-sm); padding: 6px 8px; color: var(--ink); font-size: 12px;
  font-family: inherit; outline: none;
}

/* ---------- 월간 달력 ---------- */
.month-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 6px; }
.month-head__d { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 4px 0; }
.month-head__d.is-sun { color: var(--red); }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 18px; }
.mcell {
  background: var(--card-bg); border: 1px solid var(--line-soft); border-radius: var(--r);
  min-height: 100px; padding: 8px; display: flex; flex-direction: column; gap: 5px;
  cursor: pointer; transition: border-color .14s;
}
.mcell:hover { border-color: var(--line); }
.mcell.is-out { opacity: .38; }
.mcell.is-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mcell.is-pubhol { background: color-mix(in srgb, var(--red) 8%, transparent); }
.mcell__head { display: flex; }
.mcell__d { font-family: var(--mono); font-weight: 700; font-size: 12.5px; }
.mcell__d.is-sun { color: var(--red); }
.mcell__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mchip { display: flex; align-items: center; gap: 5px; font-size: 10.5px; padding: 2px 4px; border-radius: 5px; cursor: pointer; min-width: 0; }
.mchip:hover { background: var(--panel-2); }
.mchip__dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.mchip__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.mchip.is-done .mchip__t { color: var(--ink-3); text-decoration: line-through; }
.mchip--more { color: var(--ink-3); font-family: var(--mono); }
.mchip--hol { color: var(--red); font-weight: 700; background: color-mix(in srgb, var(--red) 12%, transparent); cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.mchip--hol:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
.mchip--leave { background: color-mix(in srgb, var(--green) 14%, transparent); }
.mchip--leave .mchip__t { color: var(--green); font-weight: 700; }
.mchip--leave:hover { background: color-mix(in srgb, var(--green) 14%, transparent); }

/* =========================================================
   INTERVIEW · 면담 & 근무 기록
   ========================================================= */

/* 면담 모달 — 컨디션 세그먼트 · 기록자 · 비공개 메모 */
.modal__card--iv { max-width: 620px; padding: 22px 24px; }
.modal__card--iv #interviewForm { display: grid; gap: 15px; }
/* 면담일지 상세 팝업 — 내용이 길어서 훨씬 넓게 */
.modal__card.modal__card--jd { max-width: min(920px, 94vw); padding: 22px 24px; }
.ivseg { display: flex; gap: 6px; }
.ivseg__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2);
  padding: 10px 8px; border-radius: var(--r-sm); cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.ivseg__btn:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); color: var(--ink); }
.ivseg__btn.is-on {
  color: var(--c); font-weight: 700;
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 13%, transparent);
}
.iv-recorder {
  display: flex; align-items: center; font-size: 13px; color: var(--ink-2);
  background: var(--panel-2); border: 1px dashed var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; min-height: 42px;
}
.fld--check-box {
  border: 1px solid var(--line); background: var(--panel-2);
  border-radius: var(--r-sm); padding: 12px 14px;
}
.fld--check-box span em { font-style: normal; color: var(--ink-3); font-size: 11px; }
.fld--private > span { color: var(--amber); }
.fld--private textarea {
  border-style: dashed; border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
  background: color-mix(in srgb, var(--amber) 6%, var(--panel-2));
}

/* ---------- 크루 상세 · 면담기록 게시판 ---------- */
.board { border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--card-bg); overflow: hidden; }
.board__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line-soft); }
.board__title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.2px; display: flex; align-items: center; gap: 8px; }
.board__scroll { overflow-x: auto; }
.board__table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.board__table th {
  text-align: left; padding: 11px 20px; color: var(--ink-3);
  font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  border-bottom: 1px solid var(--line); background: var(--panel); white-space: nowrap;
}
.board__table:not(.board__table--iv):not(.board__table--ak):not(.board__table--jd):not(.board__table--note):not(.board__table--note-archive):not(.board__table--hc):not(.board__table--ob):not(.board__table--edu2):not(.board__table--mtg) th:nth-child(1) { width: 132px; }
.board__table:not(.board__table--iv):not(.board__table--ak):not(.board__table--jd):not(.board__table--note):not(.board__table--note-archive):not(.board__table--hc):not(.board__table--ob):not(.board__table--edu2):not(.board__table--mtg) th:nth-child(2) { width: 96px; }
.board__table:not(.board__table--iv):not(.board__table--ak):not(.board__table--jd):not(.board__table--note):not(.board__table--note-archive):not(.board__table--hc):not(.board__table--ob):not(.board__table--edu2):not(.board__table--mtg) th:nth-child(3) { width: 92px; }
.board__table:not(.board__table--iv):not(.board__table--ak):not(.board__table--jd):not(.board__table--note):not(.board__table--note-archive):not(.board__table--hc):not(.board__table--ob):not(.board__table--edu2):not(.board__table--mtg) th:nth-child(5) { width: 88px; text-align: right; }

/* 회의록 표 — 제목 칸을 넓게(자동 확장), 참석 칸은 좁게 */
.board__table--mtg { table-layout: fixed; }
.board__table--mtg th:nth-child(1) { width: 140px; }        /* 날짜 */
.board__table--mtg th:nth-child(2) { width: auto; }         /* 제목 — 남는 폭 전부 */
.board__table--mtg th:nth-child(3) { width: 96px; }         /* 유형 */
.board__table--mtg th:nth-child(4) { width: 104px; }        /* 참석 — 1명 + 외 N명 */
.board__table--mtg th:nth-child(5) { width: 100px; }        /* 자료·링크 */
.board__table--mtg th:nth-child(6) { width: 76px; }         /* 상태 */
.board__table--mtg td { vertical-align: middle; }
.board__table--mtg td:nth-child(4) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board__table--mtg td:nth-child(1) { font-size: 12.5px; color: var(--ink-2); }
.board__table--mtg .mtg-sub { max-width: none; }
/* 유형·상태 pill 이 세로로 쪼개지지 않도록 */
.board__table--mtg .mtg-cat,
.board__table--mtg .mtg-status { white-space: nowrap; }
.board__table--iv th:nth-child(1) { width: 190px; }
.board__table--iv th:nth-child(2) { width: 132px; }
.board__table--iv th:nth-child(3) { width: 96px; }
.board__table--iv th:nth-child(4) { width: 92px; }
.board__table--iv:not(.board__table--at) th:nth-child(6) { width: 88px; text-align: right; }
.board__table--at th:nth-child(6) { width: 96px; }
.board__table--ak th:nth-child(1) { width: 190px; }
.board__table--ak th:nth-child(2) { width: 110px; }
.board__table--ak th:nth-child(3) { width: 80px; }
.board__crew { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; background: var(--panel); }
.board__crew__n { display: block; color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; font-weight: 500; margin-top: 3px; }
.board__recorder { white-space: nowrap; font-size: 12.5px; }
.board__table td { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.board__table tbody tr:last-child td { border-bottom: none; }
.board__row { cursor: pointer; transition: background .12s; }
.board__row:hover { background: var(--panel-2); }
.board__row.is-selected { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.board__check { padding-left: 20px !important; padding-right: 0 !important; }
.board__check input[type="checkbox"], .note-check-all { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.board__date { white-space: nowrap; color: var(--ink-2); font-size: 12px; }
.board__date small { color: var(--ink-3); margin-left: 3px; }
.board__time { color: var(--ink-3); }
.board__type { white-space: nowrap; color: var(--ink); font-family: var(--mono); font-size: 12px; }
.board__cond { white-space: nowrap; color: var(--ink); }
.board__conddot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.board__ctext { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.board__flags { white-space: nowrap; text-align: right; }
.board__issue-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--red); margin-left: 6px; vertical-align: middle;
}
.board__flag { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10.5px; padding: 3px 8px; border-radius: 999px; margin-left: 4px; }
.board__flag--follow { color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.board__flag--private { color: var(--amber); border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent); }
.board__empty { padding: 44px 20px; text-align: center; color: var(--ink-2); line-height: 1.8; }

/* =========================================================
   DASHBOARD
   ========================================================= */
.dash-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; margin-bottom: 22px; align-items: stretch; }
.dash-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; background: var(--card-bg);
}
.dash-card--donut {
  background:
    radial-gradient(130% 150% at 0% 0%, var(--today-glow), transparent 55%),
    var(--card-bg);
}
.dash-card .summary__head { margin-bottom: 20px; }

.donut-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; flex: 1; }
.donut { width: 190px; height: 190px; flex: none; }
.donut circle { transition: stroke-dasharray .5s cubic-bezier(.2,.9,.3,1), stroke-dashoffset .5s cubic-bezier(.2,.9,.3,1); }
.donut__num { font-family: var(--mono); font-weight: 800; font-size: 30px; letter-spacing: -1px; fill: var(--ink); }
.donut__unit { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; fill: var(--ink-3); }

.dleg { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 170px; display: grid; gap: 12px; }
.dleg__row { display: flex; align-items: center; gap: 10px; }
.dleg__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dleg__label { font-size: 13px; color: var(--ink); font-weight: 600; }
.dleg__val { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--ink); }
.dleg__val small { font-size: 11px; color: var(--ink-3); font-weight: 500; margin-left: 2px; }
.dleg__pct { font-size: 11px; color: var(--ink-3); width: 48px; text-align: right; }

.tbars { display: grid; gap: 13px; }
.tbar { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 12px; }
.tbar__label { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbar__track { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.tbar__fill { display: block; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2,.9,.3,1); }
.tbar__val { font-size: 13px; font-weight: 700; color: var(--ink); min-width: 34px; text-align: right; }
.tbar__val small { font-size: 10.5px; color: var(--ink-3); font-weight: 500; margin-left: 2px; }

/* =========================================================
   CREW
   ========================================================= */
.month-nav {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line-soft)); border-radius: var(--r-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--card-bg)), var(--card-bg));
}
.month-nav__nav { display: flex; align-items: center; gap: 10px; }
.month-nav__label { font-weight: 800; font-size: 16px; letter-spacing: -.3px; min-width: 88px; text-align: center; }
.month-nav__count { flex: none; }
.month-nav__seg { margin-left: auto; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.stat { border: 1px solid var(--line-soft); border-radius: var(--r); padding: 18px 20px; background: var(--card-bg); position: relative; overflow: hidden; }
.stat__num { font-family: var(--mono); font-size: 32px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.stat__num small { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-left: 3px; }
.stat__label { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; margin-top: 10px; }
.stat__sub { color: var(--ink-3); font-size: 11px; margin-top: 5px; opacity: .85; }
.stat--acid { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-soft)); }
.stat--acid .stat__num { color: var(--accent-text); }
.stat--green .stat__num { color: var(--green); }
.stat--warn { border-color: color-mix(in srgb, var(--red) 38%, var(--line-soft)); }
.stat--warn .stat__num { color: var(--red); }
.stat--clickable { cursor: pointer; transition: border-color .14s, transform .1s, box-shadow .14s; }
.stat--clickable:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.stats--3 { grid-template-columns: repeat(3, 1fr); }

.toolbar-row { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filter { display: flex; gap: 6px; }
.filter--xs { gap: 4px; padding-left: 12px; border-left: 1px solid var(--line-soft); }
.searchbox {
  flex: 1; min-width: 200px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 14px; color: var(--ink); font-size: 13px; outline: none;
}
.searchbox::placeholder { color: var(--ink-3); }
.searchbox:focus { border-color: var(--accent); }
.filter-select {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 12px; color: var(--ink); font-size: 12.5px;
  font-family: inherit; outline: none;
}
.filter-select:focus { border-color: var(--accent); }

.table-wrap { border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; background: var(--card-bg); }
.crew-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.crew-table th {
  text-align: left; padding: 13px 18px; color: var(--ink-3);
  font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  border-bottom: 1px solid var(--line); background: var(--panel); white-space: nowrap;
}
.crew-table th.th-sort { cursor: pointer; user-select: none; transition: color .12s, background .12s; }
.crew-table th.th-sort:hover { color: var(--ink-2); background: var(--panel-2); }
.crew-table th.th-sort:focus-visible { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.crew-table th.th-sort.is-active { color: var(--accent-text); border-bottom: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.crew-table th.th-sort .th-sort__arrow { font-family: var(--mono); margin-left: 3px; }
.crew-table td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.crew-table tr:last-child td { border-bottom: none; }
.crew-table tbody tr { transition: background .12s, opacity .12s; cursor: pointer; }
.crew-table tbody tr:hover { background: var(--panel-2); }

/* 상태별 구분 헤더 행 (재직 → 휴직 → 퇴사) */
.crew-table tr.crew-section td {
  padding: 10px 18px; background: var(--panel);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  color: var(--ink-2); text-transform: uppercase;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft);
}
.crew-table tr.crew-section:first-child td { border-top: none; }
.crew-section__n { color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.crew-table tr.crew-section--leave td { color: var(--amber); }
.crew-table tr.crew-section--out td { color: var(--slate); }
/* 퇴사 인원 행 — 하단에 흐리게 구분 */
.crew-table tbody tr.is-left { opacity: .55; }
.crew-table tbody tr.is-left:hover { opacity: 1; }

.crew-name { display: flex; align-items: center; }
.crew-name b { font-weight: 700; }
.crew-name span.t { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-family: var(--mono); font-size: 10.5px; margin-top: 2px; }
.gdot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; }
.gdot--lg { width: 10px; height: 10px; margin-right: 10px; vertical-align: middle; }
.badge--probation {
  display: inline-flex; align-items: center; flex: none; padding: 1px 7px; border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-text);
}

/* status badge — soft tint + colored border + line icon */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .3px;
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.badge--active { --c: var(--green); }
.badge--leave  { --c: var(--amber); }
.badge--out    { --c: var(--slate); }
.badge--dis    { --c: var(--amber); }
.badge--nodis  { --c: var(--slate); }

.tagset { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 11px; padding: 2px 8px; border-radius: 6px; }
.muted { color: var(--ink-3); }
.mono-cell { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

/* placeholder */
.placeholder { display: grid; place-content: center; justify-items: start; min-height: 55vh; gap: 6px; }
.placeholder .eyebrow { margin-bottom: 4px; }
.placeholder h2 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -1.5px; }
.placeholder p { color: var(--ink-3); margin: 0; }
.placeholder--sm { min-height: 160px; justify-items: center; text-align: center; }

/* =========================================================
   CREW DETAIL
   ========================================================= */
.crew-detail__banner {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 22px 24px; margin: 16px 0 20px; background: var(--card-bg);
}
.crew-detail__info { flex: 1; min-width: 180px; }
.crew-detail__info h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.5px; display: flex; align-items: center; }
.crew-detail__info p { margin: 4px 0 0; }
.crew-detail__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip-tag {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--panel-2);
  padding: 5px 10px; border-radius: 999px;
}
.crew-detail__actions { display: flex; gap: 8px; flex: none; }

.crew-tabs {
  display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line-soft);
  margin-bottom: 20px; padding-bottom: 1px;
}
.crew-tab {
  font-size: 13px; font-weight: 500; white-space: nowrap;
  color: var(--ink-3); background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 14px; cursor: pointer; transition: color .14s, border-color .14s;
}
.crew-tab:hover { color: var(--ink-2); }
.crew-tab.is-on { color: var(--accent-text); border-color: var(--accent); font-weight: 700; }

.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 24px; background: var(--card-bg);
}
.detail-fld { display: flex; flex-direction: column; gap: 6px; }
.detail-fld__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.detail-fld__value {
  font-size: 13.5px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 10px 12px;
}

/* =========================================================
   JOURNAL · 면담일지 검토
   ========================================================= */
.jlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.jcard {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: var(--card-bg); padding: 18px 20px; cursor: pointer;
  transition: border-color .14s, transform .1s, box-shadow .14s;
  display: flex; flex-direction: column; gap: 12px;
}
.jcard:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.jcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.jcard__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jcard__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.jcard__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jcard__name { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.jcard__meta { font-size: 11px; color: var(--ink-3); }
.jcard__link { flex: none; font-size: 14px; opacity: .6; transition: opacity .12s; text-decoration: none; }
.jcard__link:hover { opacity: 1; }
.jcard__cat {
  align-self: flex-start; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--panel-2); padding: 3px 9px; border-radius: 999px;
}
.jcard__preview {
  margin: 0; color: var(--ink); font-size: 13px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.jcard__foot { font-size: 11.5px; margin-top: auto; }

.board__table--jd th:nth-child(1) { width: 92px; }
.board__table--jd th:nth-child(2) { width: 80px; }
.board__table--jd th:nth-child(4) { width: 84px; }
.board__table--jd td { vertical-align: top; }
.board__table--jd td:nth-child(3) { width: auto; }
.jd-content { white-space: pre-wrap; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }
.jd-scroll { max-height: 60vh; }

/* =========================================================
   NOTE · 노트 기록
   ========================================================= */
.note-quickadd {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-bg);
  padding: 16px 18px; margin-bottom: 18px;
}
.note-quickadd textarea {
  width: 100%; resize: vertical; min-height: 64px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px;
  color: var(--ink); font-family: inherit; font-size: 13px; line-height: 1.5; outline: none;
  transition: border-color .14s;
}
.note-quickadd textarea:focus { border-color: var(--accent); }
.note-quickadd__foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.note-quickadd__hint { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.note-quickadd__link {
  width: 100%; margin-top: 8px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px;
  color: var(--ink); font-family: inherit; font-size: 12.5px; outline: none;
  transition: border-color .14s;
}
.note-quickadd__link:focus { border-color: var(--accent); }
.board__table--note th:nth-child(1) { width: 40px; }
.board__table--note th:nth-child(2) { width: 130px; }
.board__table--note th:nth-child(3) { width: 110px; }
.board__table--note th:nth-child(5) { width: 110px; }
.board__table--note-archive th:nth-child(1) { width: 130px; }
.board__table--note-archive th:nth-child(2) { width: 110px; }
.board__table--note-archive th:nth-child(4) { width: 170px; }
.board__table--note-archive th:nth-child(5) { width: 172px; }
.board__table--hc th:nth-child(1) { width: 150px; }
.board__table--hc th:nth-child(2) { width: 96px; }
.board__table--hc th:nth-child(3) { width: 110px; }
.board__table--hc th:nth-child(6) { width: 90px; }
.board__note-actions { display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.board__row--static { cursor: default; }
.board__row--static:hover { background: none; }

/* =========================================================
   NOTIFY · 알림 설정
   ========================================================= */
.notify-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-bg);
  padding: 16px 20px; margin-bottom: 16px;
}
.notify-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--card-bg);
}
.notify-row + .notify-row { margin-top: 10px; }
.notify-row--setting { border: none; background: none; padding: 6px 0; }
.notify-row__label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.notify-row__label .muted { font-size: 11.5px; color: var(--ink-3); font-weight: 400; }
.notify-row__icon { font-size: 16px; flex: none; }
.notify-row__name { font-weight: 700; font-size: 13px; flex: none; }
.notify-row__meta { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); margin-left: auto; }
.notify-row__badge {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); flex: none;
}
.notify-row__badge.is-today { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); color: var(--accent-text); }
.notify-upcoming { display: grid; gap: 10px; margin-top: 14px; }
.notify-preview { margin-top: 20px; }

/* 온/오프 스위치 */
.switch {
  position: relative; width: 38px; height: 22px; flex: none; padding: 0;
  border: 1px solid var(--line); background: var(--panel-2); border-radius: 999px; cursor: pointer;
  transition: background .14s, border-color .14s;
}
.switch__knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-3); transition: transform .14s, background .14s;
}
.switch.is-on { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.switch.is-on .switch__knob { transform: translateX(16px); background: var(--accent); }

/* 축하 팝업 */
.celeb-card { max-width: 420px; }
.celeb-list { display: grid; gap: 10px; margin: 4px 0 20px; }
.celeb-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--panel-2);
}
.celeb-item__icon { font-size: 22px; flex: none; }
.celeb-item__text { font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* =========================================================
   WORK REPORT · 업무 보고
   ========================================================= */
.wr-month { margin-bottom: 26px; }
.wr-month__title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.wr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.wr-list li { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); padding: 10px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--card-bg); }
.wr-list li:hover .evt__actions { opacity: 1; }
.wr-date { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: none; }
.wr-act--undo:hover { color: var(--accent-text); }

/* =========================================================
   MODAL (일정 등록)
   ========================================================= */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(3px);
  animation: fade .16s ease;
}
.modal__card {
  position: relative; width: 100%; max-width: 440px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 24px 26px; animation: pop .18s cubic-bezier(.2,.9,.3,1.2);
}
.modal__card--crew { max-width: 640px; padding: 20px 24px; }
.modal__card--crew .modal__head { margin-bottom: 14px; }
.modal__card--crew #crewForm { gap: 13px; }
.modal__card--crew .fld { gap: 6px; }
.modal__card--crew .fld input, .modal__card--crew .fld select { padding: 9px 12px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.modal__head h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.modal__head-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.modal__x {
  width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink-2); font-size: 16px; cursor: pointer; line-height: 1;
}
.modal__x:hover { border-color: color-mix(in srgb, var(--ink-3) 55%, transparent); color: var(--ink); }

#eventForm, #crewForm { display: grid; gap: 17px; }
.fld { display: grid; gap: 7px; }
/* .fld 의 display:grid 가 hidden 속성을 덮어써 반복 종료일·알림 시간 칸이 항상 보이던 문제 */
.fld[hidden] { display: none; }
.fld > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); }
.fld > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-3); opacity: .8; }
.fld input, .fld select, .fld textarea {
  width: 100%; min-width: 0; box-sizing: border-box;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 12px; color: var(--ink); font-size: 13px; font-family: inherit; outline: none;
  transition: border-color .14s;
}
.fld textarea { resize: vertical; line-height: 1.55; min-height: 44px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--accent); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-3); }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld-row--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fld--check { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.fld--check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.fld--check span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 4px; }
.modal__spacer { flex: 1; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1100px) {
  .summary { grid-template-columns: 1fr; }
  .week { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 50; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
  .side.is-open { transform: none; }
  .week { grid-template-columns: 1fr; }
  .search { display: none; }
  .table-wrap { overflow-x: auto; }
  .page-head h2 { font-size: 26px; }
  .mcell { min-height: 64px; padding: 6px; }
  .mchip__t { font-size: 9.5px; }
  .fld-row, .fld-row--3 { grid-template-columns: 1fr; }
  .modal__card--crew { max-width: 440px; }
}

/* =========================================================
   EDUCATION · 교육 관리
   ========================================================= */
.stats--edu { grid-template-columns: repeat(4, 1fr); }
.edu-stat { --c: var(--slate); }
.edu-stat .stat__label { display: inline-flex; align-items: center; gap: 7px; }
.edu-stat.is-on { border-color: var(--c); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.edu-stat.is-on .stat__num { color: var(--c); }
.edu-cat__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }

/* 임박/초과 알림 배너 */
.edu-alert {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--red) 40%, var(--line-soft));
  background: color-mix(in srgb, var(--red) 8%, var(--card-bg));
  border-radius: var(--r); padding: 14px 18px; margin-bottom: 20px;
}
.edu-alert__icon { color: var(--red); font-size: 16px; line-height: 1.4; flex: none; }
.edu-alert__body { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.edu-alert__body b { color: var(--red); font-size: 12.5px; }
.edu-alert__body span { color: var(--ink-2); font-size: 12px; line-height: 1.5; }

/* 페이지 헤드 액션 + ghost 버튼 */
.page-head__actions { display: flex; gap: 10px; align-items: center; }
.btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; }
.btn--ghost:hover { border-color: var(--accent); color: var(--ink); }

/* 섹션 탭 */
.edu-tabs { display: flex; gap: 8px; margin-bottom: 22px; border-bottom: 1px solid var(--line-soft); padding-bottom: 0; flex-wrap: wrap; }
.edu-tab {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  padding: 10px 6px 12px; margin-bottom: -1px; color: var(--ink-3);
  font-size: 14px; font-weight: 600; transition: color .14s, border-color .14s;
}
.edu-tab:hover { color: var(--ink-2); }
.edu-tab.is-on { color: var(--ink); border-bottom-color: var(--c); }
.edu-tab__count {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px;
}
.edu-tab.is-on .edu-tab__count { color: var(--c); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }

/* 표 (법정/정기) — 7컬럼. 좁은 화면에선 board__scroll 로 가로 스크롤 */
.board__table--edu2 { width: 100%; min-width: 760px; }
.board__table--edu2 th, .board__table--edu2 td { padding: 12px 14px; }
.board__table--edu2 th:nth-child(1) { width: auto; }         /* 교육명 */
.board__table--edu2 th:nth-child(2) { width: 100px; }        /* 대상 */
.board__table--edu2 th:nth-child(3) { width: 106px; }        /* 실시일 */
.board__table--edu2 th:nth-child(4) { width: 122px; text-align: left; } /* 이수기한 */
.board__table--edu2 th:nth-child(5) { width: 72px; }         /* 상태 */
.board__table--edu2 th:nth-child(6) { width: 132px; }        /* 담당·기관 */
.board__table--edu2 th:nth-child(7),
.board__table--edu2 td:nth-child(7) { width: 96px; text-align: center; } /* 서명 */
.board__table--edu2 [data-edu-signup] { white-space: nowrap; padding: 5px 12px; }
.edu-row { cursor: pointer; transition: background .12s; }
.edu-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.edu-title b { display: block; color: var(--ink); font-weight: 600; }
.edu-title__note { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 3px; }
.edu-hours { color: var(--ink-3); font-size: 11px; font-family: var(--mono); margin-left: 4px; }

/* 상태 배지 */
.edu-badge {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .3px;
  color: var(--c); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}

/* 이수기한 셀 */
.edu-due { color: var(--ink-2); font-size: 12px; }
.edu-due b { font-family: var(--mono); font-size: 9.5px; font-weight: 700; margin-left: 5px; padding: 1px 6px; border-radius: 999px; }
.edu-due--soon { color: var(--amber); }
.edu-due--soon b { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.edu-due--over { color: var(--red); }
.edu-due--over b { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.edu-catseg { flex-wrap: wrap; }

/* 월별/연별 기간 검색 (컴팩트) */
.toolbar-row--edu { align-items: center; }
.edu-period { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.edu-period__seg { gap: 4px; }
.edu-period__seg .btn--sm { padding: 4px 11px; font-size: 11.5px; }
.edu-period__nav { display: inline-flex; align-items: center; gap: 6px; }
.iconbtn--sm { width: 26px; height: 26px; font-size: 12px; padding: 0; }
.edu-period__label { font-size: 12.5px; color: var(--ink); min-width: 78px; text-align: center; font-weight: 600; }
.edu-period__hint { font-size: 11px; color: var(--ink-3); margin-left: 2px; }
.toolbar-row--edu .searchbox { margin-left: auto; }

/* =========================================================
   ONBOARDING · 온보딩 카드 · 체크리스트
   ========================================================= */
/* 참고 패널 */
.ob-ref { border: 1px solid var(--line-soft); border-radius: var(--r); margin-bottom: 22px; overflow: hidden; }
.ob-ref__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--card-bg); border: none; cursor: pointer; padding: 14px 18px;
  color: var(--ink-2); font-size: 13px; font-weight: 600;
}
.ob-ref__toggle:hover { color: var(--ink); }
.ob-ref__chev { color: var(--ink-3); font-size: 10px; }
.ob-ref__body { padding: 4px 18px 18px; border-top: 1px solid var(--line-soft); display: grid; gap: 20px; }
.ob-ref__block h4 { margin: 14px 0 10px; font-size: 12px; font-weight: 700; color: var(--accent-text); letter-spacing: .3px; }
.ob-proc { display: grid; gap: 6px; }
.ob-proc__row {
  display: grid; grid-template-columns: 128px 96px 1fr 110px; gap: 12px; align-items: baseline;
  padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 12px;
}
.ob-proc__step { font-weight: 700; color: var(--ink); }
.ob-proc__when { color: var(--accent-text); font-size: 11px; }
.ob-proc__what { color: var(--ink-2); line-height: 1.5; }
.ob-proc__who { color: var(--ink-3); font-size: 11px; text-align: right; }
.ob-jobs { display: grid; gap: 10px; }
.ob-jobs__part { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: baseline; }
.ob-jobs__name { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; color: var(--ink); }
.ob-jobs__seq { color: var(--ink-2); font-size: 12px; line-height: 1.6; }
.ob-ref__block--dis { border-top: 1px dashed var(--line); padding-top: 4px; }
.ob-dissteps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ob-disstep { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--ink); }
.ob-disstep b { font-family: var(--mono); font-size: 10px; color: var(--accent-text); background: var(--panel); width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ob-disarrow { color: var(--ink-3); font-size: 11px; }
.ob-ref__note { color: var(--ink-2); font-size: 12px; line-height: 1.6; margin: 0; }
.ob-ref__note b { color: var(--ink); }

/* 온보딩 게시판(표) */
.ob-empty { border: 1px dashed var(--line); border-radius: var(--r); }
.board__table--ob th:nth-child(1) { width: 120px; }
.board__table--ob th:nth-child(2) { width: 160px; }
.board__table--ob th:nth-child(3) { width: 220px; }
.board__table--ob th:nth-child(4) { width: 220px; }
.board__table--ob th:nth-child(5) { width: 140px; }
.ob-card__group { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.ob-card__dis { color: var(--amber); font-weight: 600; }
.ob-dday { color: var(--accent-text); font-weight: 700; }
.ob-dday--done { color: var(--ink-3); }
.ob-progress { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.ob-progress__bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #60a5fa)); transition: width .3s ease; }
.ob-progress--lg { height: 11px; }
.ob-row-progress { display: flex; align-items: center; gap: 10px; }
.ob-row-progress .ob-progress { flex: 1; min-width: 70px; max-width: 130px; }
.ob-row-progress__txt { font-size: 12px; color: var(--ink-2); white-space: nowrap; font-family: var(--mono); }
.ob-card__link { text-decoration: none; font-size: 11px; font-family: var(--mono); color: var(--ink-3); margin-left: 8px; text-decoration: underline; }
.ob-card__link:hover { color: var(--accent-text); }

/* 온보딩 모달 */
.modal__card--ob { max-width: 720px; width: 92vw; max-height: 88vh; display: flex; flex-direction: column; }
.ob-modal__body { overflow-y: auto; padding: 4px 2px; }
.ob-modal__sub { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); font-family: var(--mono); margin-top: 4px; }
.ob-modal__summary { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.ob-modal__summary .ob-progress { flex: 1; }
.ob-modal__pct { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.ob-dis-banner {
  background: color-mix(in srgb, var(--amber) 9%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--amber) 32%, var(--line));
  border-radius: 10px; padding: 11px 14px; margin-bottom: 16px; font-size: 12.5px; color: var(--ink-2);
}
.ob-dis-banner b { color: var(--amber); }
.ob-dis-banner span { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }

.ob-areas { display: grid; gap: 14px; }
.ob-area { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; background: var(--panel-2); }
.ob-area__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ob-area__head h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.ob-area__count { font-family: var(--mono); font-size: 11px; color: var(--accent-text); background: var(--panel); border-radius: 999px; padding: 2px 9px; }
.ob-items { display: grid; gap: 8px; }
.ob-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.ob-item__label { font-size: 12.5px; color: var(--ink-2); }
.ob-item__opts { display: inline-flex; gap: 4px; flex: none; }
.ob-item__opt {
  cursor: pointer; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink-3); font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 7px;
  transition: all .12s; white-space: nowrap;
}
.ob-item__opt:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); color: var(--ink); }
.ob-item__opt.is-on { color: var(--c); border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }

@media (max-width: 900px) {
  .stats--edu { grid-template-columns: repeat(2, 1fr); }
  .ob-proc__row { grid-template-columns: 1fr; gap: 3px; }
  .ob-proc__who { text-align: left; }
  .ob-jobs__part { grid-template-columns: 1fr; gap: 3px; }
  .ob-item { grid-template-columns: 1fr; }
  .ob-item__opts { flex-wrap: wrap; }
}

/* =========================================================
   AI 면담 요약 카드 (크루 상세 상단)
   ========================================================= */
.aisum{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  margin:16px 0 20px;
  overflow:hidden;
}
.aisum--risk{ border-color:color-mix(in srgb, var(--red) 45%, var(--line)); }

.aisum__head{
  width:100%;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--panel-2);
  border:0;border-bottom:1px solid var(--line);
  padding:14px 18px;cursor:pointer;text-align:left;
  color:var(--ink);font:inherit;
}
.aisum__head:hover{ background:color-mix(in srgb, var(--accent) 8%, var(--panel-2)); }
.aisum__title{ font-size:15px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:9px; }
.aisum__tag{
  font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:color-mix(in srgb, var(--accent) 18%, var(--card-bg));
  color:var(--accent-text);
}
.aisum__tag--risk{ background:color-mix(in srgb, var(--red) 16%, var(--card-bg)); color:var(--red); }
.aisum__stats{ display:flex;gap:6px;flex-wrap:wrap;margin-left:auto; }
.aisum__chip{
  font-size:11.5px;color:var(--ink-2);
  background:var(--card-bg);border:1px solid var(--line);border-radius:999px;padding:2px 9px;
}
.aisum__chip b{ color:var(--ink);font-variant-numeric:tabular-nums; }
.aisum__chip--warn{ color:var(--amber);border-color:color-mix(in srgb, var(--amber) 40%, var(--line)); }
.aisum__chip--warn b{ color:var(--amber); }
.aisum__caret{ color:var(--ink-2);font-size:12px; }

.aisum__body{ padding:18px; }
.aisum__headline{
  margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--ink);
  padding-left:12px;border-left:3px solid var(--accent);
}
.aisum__cats{ display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px; }
.aisum__cat{ font-size:11.5px;background:var(--panel-2);color:var(--ink-2);border-radius:6px;padding:2px 8px; }
.aisum__cat b{ color:var(--ink); }

.aisum__dim{ margin:0 0 18px; }
.aisum__dim > h4{
  margin:0 0 10px;font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px;
}
.aisum__dim > h4::before{ content:"";width:4px;height:15px;border-radius:2px;background:var(--accent); }

.aisum__grid{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px; }
@media(max-width:760px){ .aisum__grid{ grid-template-columns:1fr; } }
.aisum__box{ border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px; }
.aisum__box h5{ margin:0 0 7px;font-size:11.5px;font-weight:800;letter-spacing:.02em; }
.aisum__box ul{ margin:0;padding-left:16px; }
.aisum__box li{ margin:0 0 5px;font-size:13px;line-height:1.55;color:var(--ink); }
.aisum__box--good{ background:color-mix(in srgb, var(--green) 10%, var(--card-bg)); }
.aisum__box--good h5{ color:var(--green); }
.aisum__box--gap{ background:color-mix(in srgb, var(--amber) 11%, var(--card-bg)); }
.aisum__box--gap h5{ color:var(--amber); }
.aisum__box--sup{ background:color-mix(in srgb, var(--accent) 10%, var(--card-bg)); }
.aisum__box--sup h5{ color:var(--accent-text); }

.aisum__tl{ border-left:2px solid var(--line);padding-left:16px;margin:2px 0 8px; }
.aisum__tlrow{ position:relative;margin:0 0 9px;font-size:13px;line-height:1.5;color:var(--ink);display:flex;gap:10px; }
.aisum__tlrow::before{
  content:"";position:absolute;left:-21px;top:6px;width:8px;height:8px;border-radius:50%;
  background:var(--ink-2);
}
.aisum__tlrow.is-flag::before{ background:var(--red); }
.aisum__tld{ font-size:12px;font-weight:700;color:var(--accent-text);white-space:nowrap;min-width:78px; }
.aisum__note{
  margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-2);
  background:var(--panel-2);border-radius:var(--r-sm);padding:9px 12px;
}
.aisum__pending{ margin:4px 0 0;font-size:13px;color:var(--ink-2); }
.aisum__meta{ margin:6px 0 0;font-size:11.5px;color:var(--ink-3, var(--ink-2)); text-align:right; }

/* 면담일지 · 팀 선택 툴바 (팀 필터 왼쪽 + 검색 오른쪽) */
.toolbar-row--split .searchbox { margin-left: auto; }
#journalTeamFilter { padding-left: 0; border-left: 0; }
#journalTeamFilter .chip-mono { opacity: .7; margin-left: 2px; }

/* AI 지원가이드 확장: 핵심 강점 · 위기신호 트리거 · 장애특성 팁 */
.aisum__strengths{ display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 16px; }
.aisum__strengths-lbl{ font-size:12px;font-weight:800;color:var(--accent-text);margin-right:2px; }
.aisum__strength{
  font-size:12.5px;padding:3px 10px;border-radius:999px;
  background:color-mix(in srgb, var(--accent) 12%, var(--card-bg));
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  color:var(--ink);
}
.aisum__triggers{ display:flex;flex-direction:column;gap:6px; }
.aisum__trigger{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:color-mix(in srgb, var(--amber) 9%, var(--card-bg));
  border:1px solid color-mix(in srgb, var(--amber) 28%, var(--line));
  border-radius:var(--r-sm);padding:8px 12px;font-size:13px;
}
.aisum__trig-sig{ font-weight:700;color:var(--amber); }
.aisum__trig-arrow{ color:var(--ink-2); }
.aisum__trig-res{ color:var(--ink); }
.aisum__dtype{
  font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--panel-2);color:var(--ink-2);vertical-align:middle;
}
.aisum__tips{ margin:0;padding-left:18px; }
.aisum__tips li{ margin:0 0 5px;font-size:13.5px;line-height:1.55;color:var(--ink); }

/* AI 지원가이드 · 관리자 성장형: 성장 로드맵 */
.aisum__road{ display:flex;flex-direction:column;gap:6px; }
.aisum__roadrow{
  display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.55;
  background:color-mix(in srgb, var(--accent) 7%, var(--card-bg));
  border:1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius:var(--r-sm);padding:8px 12px;color:var(--ink);
}
.aisum__roadstage{
  flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--accent-ink);
  background:var(--accent);border-radius:999px;padding:2px 10px;white-space:nowrap;
}

/* AI 지원가이드 · 비장애(직무지도·운영 관리자) 성장 지원형 */
.aisum__mgrbadges{ display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 12px; }
.aisum__rolebadge{
  font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;
  background:var(--panel-2);color:var(--ink);border:1px solid var(--line);
}
.aisum__level{ font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px; }
.aisum__level--need{ background:color-mix(in srgb,var(--red) 15%,var(--card-bg)); color:var(--red); }
.aisum__level--doing{ background:color-mix(in srgb,#60a5fa 16%,var(--card-bg)); color:#3b82f6; }
.aisum__level--indep{ background:color-mix(in srgb,var(--green) 15%,var(--card-bg)); color:var(--green); }
.aisum__level--ext{ background:color-mix(in srgb,var(--accent) 20%,var(--card-bg)); color:var(--accent-text); }
.aisum__level--obs{ background:var(--panel-2); color:var(--ink-2); }
.aisum__goal{ margin:0 0 16px;font-size:13.5px;line-height:1.6;color:var(--ink);padding-left:12px;border-left:3px solid var(--accent); }
.aisum__goal-lbl{ font-weight:800;color:var(--accent-text);margin-right:6px; }

.aisum__lead{ display:flex;flex-direction:column;gap:7px; }
.aisum__leadrow{
  display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.55;color:var(--ink);
  background:color-mix(in srgb,var(--accent) 8%,var(--card-bg));
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  border-radius:var(--r-sm);padding:9px 12px;
}
.aisum__method{
  flex:0 0 auto;font-size:11px;font-weight:800;color:var(--accent-ink);
  background:var(--accent);border-radius:999px;padding:2px 9px;white-space:nowrap;
}
.aisum__intensity{ display:flex;flex-wrap:wrap;gap:4px;align-items:center; }
.aisum__istep{
  font-size:11.5px;padding:3px 9px;border-radius:6px;color:var(--ink-3,var(--ink-2));
  background:var(--panel-2);border:1px solid var(--line-soft);
}
.aisum__istep.is-past{ opacity:.5; }
.aisum__istep.is-on{ background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:800; }

/* AI 지원가이드 · 스낵 비장애 평가 기준 (접이식 참고) */
.aisum__eval{ margin-top:16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2); }
.aisum__eval > summary{
  cursor:pointer;list-style:none;padding:10px 14px;font-size:13px;font-weight:800;color:var(--ink);
  display:flex;align-items:center;gap:6px;user-select:none;
}
.aisum__eval > summary::-webkit-details-marker{ display:none; }
.aisum__eval > summary::after{ content:"펼치기";margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink-2); }
.aisum__eval[open] > summary::after{ content:"접기"; }
.aisum__eval-body{ padding:4px 14px 14px;display:grid;grid-template-columns:1fr 1fr;gap:14px; }
@media(max-width:680px){ .aisum__eval-body{ grid-template-columns:1fr; } }
.aisum__eval-group > h5{ margin:6px 0 8px;font-size:12px;font-weight:800;color:var(--accent-text);
  border-bottom:1px solid var(--line);padding-bottom:4px; }
.aisum__eval-ind{ margin:0 0 10px; }
.aisum__eval-ind > b{ font-size:12.5px;color:var(--ink); }
.aisum__eval-ind ul{ margin:3px 0 0;padding-left:16px; }
.aisum__eval-ind li{ font-size:12px;line-height:1.5;color:var(--ink-2);margin:0 0 3px; }

/* 평가 기준 · 면담 대조(evalMap) 배지 + 공통 역량 표 */
.aisum__evbadge{ font-size:10.5px;font-weight:800;padding:1px 8px;border-radius:999px;vertical-align:middle; }
.aisum__evbadge--good{ background:color-mix(in srgb,var(--green) 18%,var(--card-bg));color:var(--green); }
.aisum__evbadge--grow{ background:color-mix(in srgb,var(--amber) 18%,var(--card-bg));color:var(--amber); }
.aisum__evbadge--obs{ background:var(--panel-2);color:var(--ink-2); }
.aisum__evnote{ margin:3px 0 4px;font-size:11.5px;line-height:1.5;color:var(--ink-2);
  background:var(--panel-2);border-radius:6px;padding:5px 9px; }
.aisum__evtag{ margin-left:auto;font-size:11px;font-weight:700;color:var(--accent-ink);
  background:var(--accent);border-radius:999px;padding:2px 9px; }
.aisum__eval > summary{ display:flex;align-items:center;gap:6px; }

/* 공통 역량 표 */
.aisum__cmp-body{ padding:6px 14px 14px;display:flex;flex-direction:column;gap:14px; }
.aisum__cmp{ border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--card-bg); }
.aisum__cmp-head{ display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px; }
.aisum__cmp-head > b{ font-size:13px;color:var(--ink); }
.aisum__cmp-def{ font-size:11.5px;color:var(--ink-2); }
.aisum__cmp-lv{ border-left:3px solid var(--line);padding:2px 0 2px 10px;margin:5px 0; }
.aisum__cmp-lv ul{ margin:2px 0 0;padding-left:16px; }
.aisum__cmp-lv li{ font-size:11.5px;line-height:1.5;color:var(--ink-2);margin:0 0 2px; }
.aisum__cmp-lvl{ font-size:11px;font-weight:800; }
.aisum__cmp-lv--top{ border-left-color:var(--accent); }
.aisum__cmp-lv--top .aisum__cmp-lvl{ color:var(--accent-text); }
.aisum__cmp-lv--meet{ border-left-color:var(--green); }
.aisum__cmp-lv--meet .aisum__cmp-lvl{ color:var(--green); }
.aisum__cmp-lv--need{ border-left-color:var(--amber); }
.aisum__cmp-lv--need .aisum__cmp-lvl{ color:var(--amber); }

/* AI 지원가이드 · 상담/직무지도 지원 멘트 (장애 크루) */
.aisum__scripts{ display:flex;flex-direction:column;gap:8px; }
.aisum__script{
  border-left:3px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,var(--card-bg));
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:8px 12px;
}
.aisum__script-sit{ font-size:11px;font-weight:800;color:var(--accent-text);display:block;margin-bottom:3px; }
.aisum__script-line{ margin:0;font-size:13.5px;line-height:1.6;color:var(--ink); }
.aisum__script-line::before{ content:"“";color:var(--ink-2); }
.aisum__script-line::after{ content:"”";color:var(--ink-2); }

/* AI 지원가이드 · 2026년 성장 포인트 (25년 말 대비) */
.aisum__growth{
  margin:0 0 16px;padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--green) 32%,var(--line));
  background:color-mix(in srgb,var(--green) 8%,var(--card-bg));
  border-radius:var(--r-md,10px);
}
.aisum__growth-h{ margin:0 0 8px;font-size:13px;font-weight:800;color:var(--green);display:flex;align-items:center;gap:6px; }
.aisum__growth-h .aisum__dtype{ color:var(--ink-2); }
.aisum__growth-sum{ margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--ink); }
.aisum__growth-list{ display:flex;flex-direction:column;gap:7px; }
.aisum__growth-row{ display:flex;flex-direction:column;gap:3px; }
.aisum__growth-area{ font-size:11px;font-weight:800;color:var(--green); }
.aisum__growth-ba{ display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:13px;line-height:1.55; }
.aisum__growth-before{ color:var(--ink-2);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink-2) 55%,transparent); }
.aisum__growth-arrow{ color:var(--green);font-weight:800; }
.aisum__growth-after{ color:var(--ink);font-weight:600; }

/* =========================================================
   2026 KPI 뷰
   ========================================================= */
/* --- KPI 진행 대시보드 --- */
.kpi-dash{ background:var(--card-bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px;margin-bottom:18px; }
.kpi-dash__top{ display:flex;align-items:center;gap:24px;flex-wrap:wrap; }
.kpi-dash__ringwrap{ flex:0 0 auto; }

/* 완료율 도넛 */
.kpi-ring{ width:118px;height:118px;display:block; }
.kpi-ring circle{ fill:none;stroke-width:12;transform:rotate(-90deg);transform-origin:60px 60px;stroke-linecap:butt; }
.kpi-ring__track{ stroke:var(--panel-2); }
.kpi-ring__done{ stroke:var(--green);transition:stroke-dasharray .5s ease; }
.kpi-ring__prog{ stroke:var(--amber);transition:stroke-dasharray .5s ease,stroke-dashoffset .5s ease; }
.kpi-ring__num{ font-size:30px;font-weight:800;fill:var(--ink);text-anchor:middle;dominant-baseline:middle;font-variant-numeric:tabular-nums; }
.kpi-ring__pctsign{ font-size:15px;font-weight:700;fill:var(--ink-2); }
.kpi-ring__cap{ font-size:11px;font-weight:700;fill:var(--ink-3,var(--ink-2));text-anchor:middle; }

/* 지표 타일 */
.kpi-tiles{ display:grid;grid-template-columns:repeat(4,minmax(96px,1fr));gap:10px;flex:1 1 340px; }
@media(max-width:640px){ .kpi-tiles{ grid-template-columns:repeat(2,1fr); } }
.kpi-tile{ border:1px solid var(--line-soft);border-radius:var(--r-md,10px);padding:11px 13px;background:var(--panel); }
/* 카드 앞 색상 바 미사용 — 수치 색상으로만 상태 구분 */
.kpi-tile--done .kpi-tile__val{ color:var(--green); }
.kpi-tile--prog .kpi-tile__val{ color:var(--amber); }
.kpi-tile__val{ font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05; }
.kpi-tile__val small{ font-size:14px;margin-left:1px;color:var(--ink-2); }
.kpi-tile__sub{ font-size:15px;font-weight:700;color:var(--ink-3,var(--ink-2)); }
.kpi-tile__lbl{ margin-top:3px;font-size:11.5px;color:var(--ink-2);line-height:1.3; }

/* 범례 */
.kpi-legend{ display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:16px 0 10px;font-size:12px;color:var(--ink-2); }
.kpi-legend__it{ display:inline-flex;align-items:center;gap:6px;font-weight:700; }
.kpi-dot{ width:11px;height:11px;border-radius:3px;display:inline-block; }
.kpi-dot--done{ background:var(--green); }
.kpi-dot--prog{ background:var(--amber); }
.kpi-dot--none{ background:var(--panel-2);border:1px solid var(--line); }
.kpi-legend__note{ margin-left:auto;font-weight:400;color:var(--ink-3,var(--ink-2)); }

/* 목표별 진행 막대 */
.kpi-goals{ display:flex;flex-direction:column;gap:7px; }
.kpi-goal{ display:grid;grid-template-columns:22px minmax(90px,1.4fr) 70px 1fr 44px 62px;align-items:center;gap:10px; }
@media(max-width:720px){ .kpi-goal{ grid-template-columns:20px 1fr 56px;grid-auto-rows:auto;row-gap:4px; }
  .kpi-goal__track{ grid-column:1 / -1;order:5; } .kpi-goal__count{ order:3; } .kpi-badge{ order:4; } }
.kpi-goal__no{ width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center; }
.kpi-goal__title{ font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.kpi-goal__wt{ display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums; }
.kpi-goal__wt b{ font-weight:700; }
.kpi-goal__wtbar{ height:5px;border-radius:3px;background:color-mix(in srgb,var(--accent) 45%,var(--panel-2));flex:0 0 auto;min-width:3px; }
.kpi-goal__track{ height:12px;border-radius:6px;background:var(--panel-2);overflow:hidden;display:flex; }
.kpi-goal__seg{ height:100%;transition:width .4s ease; }
.kpi-goal__seg--done{ background:var(--green); }
.kpi-goal__seg--prog{ background:var(--amber);box-shadow:-2px 0 0 var(--card-bg); }
.kpi-goal__count{ font-size:12px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums; }
.kpi-goal__count b{ color:var(--green);font-weight:800; }
.kpi-badge{ font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;text-align:center;white-space:nowrap;
  background:var(--panel-2);color:var(--ink-3,var(--ink-2));border:1px solid var(--line-soft); }
.kpi-badge--top{ background:var(--accent);color:var(--accent-ink);border-color:var(--accent); }
.kpi-badge--meet{ background:var(--green);color:#fff;border-color:var(--green); }
.kpi-badge--need{ background:var(--amber);color:#fff;border-color:var(--amber); }
.kpi-badge--na{ background:var(--panel-2);color:var(--ink-3,var(--ink-2)); }

.kpi-list{ display:flex;flex-direction:column;gap:14px; }
.kpi-card{ background:var(--card-bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px; }
.kpi-card__head{ display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px; }
.kpi-no{ width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto; }
.kpi-title{ font-size:15px;letter-spacing:-.01em; }
.kpi-weight{ font-size:11.5px;font-weight:700;color:var(--ink-2);background:var(--panel-2);border-radius:999px;padding:2px 9px; }
.kpi-grade{ margin-left:auto;font-size:11.5px;font-weight:800;padding:3px 11px;border-radius:999px; }
.kpi-grade--top{ background:color-mix(in srgb,var(--accent) 20%,var(--card-bg));color:var(--accent-text); }
.kpi-grade--meet{ background:color-mix(in srgb,var(--green) 16%,var(--card-bg));color:var(--green); }
.kpi-grade--need{ background:color-mix(in srgb,var(--amber) 16%,var(--card-bg));color:var(--amber); }
.kpi-grade--na{ background:var(--panel-2);color:var(--ink-2); }

.kpi-parts{ display:grid;grid-template-columns:1fr 1fr;gap:10px; }
@media(max-width:720px){ .kpi-parts{ grid-template-columns:1fr; } }
.kpi-part{ border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:8px 12px; }
.kpi-part__name{ font-size:11.5px;font-weight:800;color:var(--accent-text); }
.kpi-part ul{ margin:5px 0 0;padding-left:16px; }
.kpi-part li{ font-size:12.5px;line-height:1.55;color:var(--ink);margin:0 0 5px; }
.kpi-target{ font-size:11px;font-weight:700;color:var(--ink-2);background:var(--panel-2);border-radius:5px;padding:1px 6px;white-space:nowrap; }
.kpi-cur{ font-size:11px;font-weight:700;color:var(--green); }
.kpi-note{ margin:8px 0 0;font-size:12px;color:var(--ink-2); }

.kpi-more{ margin-top:10px; }
.kpi-more > summary{ cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink-2);list-style:none;padding:4px 0; }
.kpi-more > summary::-webkit-details-marker{ display:none; }
.kpi-more > summary::before{ content:"▸ ";color:var(--ink-3,var(--ink-2)); }
.kpi-more[open] > summary::before{ content:"▾ "; }
.kpi-grades{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:6px; }
@media(max-width:720px){ .kpi-grades{ grid-template-columns:1fr; } }
.kpi-gr{ border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px; }
.kpi-gr__lbl{ font-size:11px;font-weight:800; }
.kpi-gr--top{ background:color-mix(in srgb,var(--accent) 8%,var(--card-bg)); }
.kpi-gr--top .kpi-gr__lbl{ color:var(--accent-text); }
.kpi-gr--meet{ background:color-mix(in srgb,var(--green) 9%,var(--card-bg)); }
.kpi-gr--meet .kpi-gr__lbl{ color:var(--green); }
.kpi-gr--need{ background:color-mix(in srgb,var(--amber) 9%,var(--card-bg)); }
.kpi-gr--need .kpi-gr__lbl{ color:var(--amber); }
.kpi-gr ul{ margin:3px 0 0;padding-left:15px; }
.kpi-gr li{ font-size:11.5px;line-height:1.5;color:var(--ink-2);margin:0 0 3px; }
.kpi-sched{ margin:8px 0 0;font-size:12px;color:var(--ink-2);background:var(--panel-2);border-radius:var(--r-sm);padding:7px 11px; }

/* KPI 편집: 등급 선택 · 세부목표 현재값 입력 */
.kpi-gradepick{ margin-left:auto;display:flex;gap:4px; }
.kpi-gp{ font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;cursor:pointer;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line-soft); }
.kpi-gp:hover{ border-color:var(--accent); }
.kpi-gp.is-on{ font-weight:800; }
.kpi-gp--top.is-on{ background:var(--accent);color:var(--accent-ink);border-color:var(--accent); }
.kpi-gp--meet.is-on{ background:var(--green);color:#fff;border-color:var(--green); }
.kpi-gp--need.is-on{ background:var(--amber);color:#fff;border-color:var(--amber); }
.kpi-curin{ width:88px;font-size:11.5px;padding:2px 7px;border-radius:6px;
  border:1px solid var(--line);background:var(--card-bg);color:var(--ink);margin-left:4px; }
.kpi-curin:focus{ outline:none;border-color:var(--accent); }
.kpi-curin::placeholder{ color:var(--ink-3,var(--ink-2));opacity:.6; }

/* KPI 세부목표: 진행중 / 완료 상태 기록 */
.kpi-subrow{ display:flex;align-items:center;flex-wrap:wrap;gap:4px; }
.kpi-subrow .kpi-sub{ margin-right:2px; }
.kpi-substatus{ display:inline-flex;gap:3px;margin-left:auto; }
.kpi-st{ font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;cursor:pointer;
  background:var(--panel-2);color:var(--ink-3,var(--ink-2));border:1px solid var(--line-soft);white-space:nowrap; }
.kpi-st:hover{ border-color:var(--accent); }
.kpi-st--prog.is-on{ background:var(--amber);color:#fff;border-color:var(--amber);font-weight:800; }
.kpi-st--done.is-on{ background:var(--green);color:#fff;border-color:var(--green);font-weight:800; }
.kpi-subrow.is-done .kpi-sub{ color:var(--ink-3,var(--ink-2));text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--green) 60%,transparent); }
.kpi-donechip{ font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line-soft); }
.kpi-donechip.is-all{ background:var(--green);color:#fff;border-color:var(--green); }

/* ---------- 연차관리 탭 ---------- */
.leave{ display:flex; flex-direction:column; gap:18px; }
.leave__empty{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:40px 20px; color:var(--ink-3); }
.leave__empty span{ font-size:34px; }
.leave__empty p{ font-size:13px; line-height:1.7; }
.leave__empty b{ color:var(--ink-2); }

.leave__hero{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.leave__hero--solo{ grid-template-columns:1fr; }
@media (max-width:560px){ .leave__hero{ grid-template-columns:1fr; } }
.leave__delta{ font-size:12.5px; color:var(--ink-2); background:var(--panel-2);
  border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:9px 13px; text-align:center; }
.leave__delta b{ color:var(--accent-text); font-weight:700; }
.leave__card{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:6px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; }
.leave__card--hot{ border-color:rgba(198,255,46,.38); background:rgba(198,255,46,.05); }
.leave__card--hot::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:3px; background:var(--accent); }
.leave__lbl{ font-size:12px; color:var(--ink-3); letter-spacing:.02em; }
.leave__lbl b{ color:var(--ink-2); font-weight:700; font-variant-numeric:tabular-nums; }
.leave__num{ font-size:38px; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.leave__card--hot .leave__num{ color:var(--accent-text); }
.leave__num em{ font-size:16px; font-weight:600; font-style:normal; color:var(--ink-3); margin-left:3px; }
.leave__sub{ font-size:11.5px; color:var(--ink-3); }

.leave__facts{ display:flex; flex-wrap:wrap; gap:8px; }
.leave__fact{ display:flex; flex-direction:column; gap:2px; min-width:92px;
  background:var(--panel-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:8px 12px; }
.leave__fact span{ font-size:10.5px; color:var(--ink-3); letter-spacing:.03em; }
.leave__fact b{ font-size:13.5px; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

.leave__h{ font-size:12px; color:var(--ink-2); font-weight:700; letter-spacing:.04em; margin:4px 0 -6px; }
.leave__steps{ display:flex; flex-direction:column; gap:8px; }
.leave__step{ display:flex; align-items:center; gap:12px;
  background:var(--panel-2); border:1px solid var(--line-soft); border-radius:var(--r); padding:12px 14px; }
.leave__step--total{ border-color:rgba(198,255,46,.32); background:rgba(198,255,46,.05); }
.leave__stepno{ flex-shrink:0; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; background:var(--line); color:var(--ink-2); }
.leave__step--total .leave__stepno{ background:var(--accent); color:var(--accent-ink); }
.leave__stepbody{ flex:1; min-width:0; }
.leave__stepbody b{ font-size:13.5px; color:var(--ink); font-weight:600; }
.leave__stepbody b em{ font-style:normal; font-size:10.5px; font-weight:600; color:var(--ink-3);
  background:var(--line); padding:1px 6px; border-radius:99px; margin-left:5px; }
.leave__stepbody p{ font-size:11.5px; color:var(--ink-3); margin:3px 0 0; font-variant-numeric:tabular-nums; }
.leave__stepval{ flex-shrink:0; font-size:16px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.leave__step--total .leave__stepval{ color:var(--accent-text); font-size:18px; font-weight:800; }

.leave__flat{ display:flex; align-items:center; gap:16px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px; }
.leave__flatnum{ flex-shrink:0; font-size:40px; font-weight:800; color:var(--accent-text); line-height:1;
  font-variant-numeric:tabular-nums; }
.leave__flatnum em{ font-size:16px; font-style:normal; color:var(--ink-3); margin-left:2px; }
.leave__flatbody b{ font-size:14px; color:var(--ink); }
.leave__flatbody p{ font-size:12px; margin:4px 0 0; line-height:1.6; }

.leave__rules{ background:var(--panel-2); border:1px dashed var(--line); border-radius:var(--r); padding:14px 16px; }
.leave__rulehead{ font-size:12.5px; font-weight:700; color:var(--ink); margin:0 0 8px; }
.leave__rulehead span{ font-weight:500; color:var(--ink-3); font-size:11px; margin-left:6px; }
.leave__rules ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.leave__rules li{ font-size:12px; color:var(--ink-2); line-height:1.5; }
.leave__note{ font-size:11px; color:var(--ink-3); margin:10px 0 0; line-height:1.6; }
.leave__note b{ color:var(--ink-2); }

/* ============================================================
   청구 관리 — 거래명세서 (STATEMENT)
   ============================================================ */
.crew-table td.num, .crew-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.stmt-list td.num { font-family: var(--mono); }
.stmt-rowact { white-space: nowrap; text-align: right; }
.stmt-rowact .btn { margin-left: 4px; }

/* ---- 편집기 폼 ---- */
.stmt-editor { display: flex; flex-direction: column; gap: 4px; }
.stmt-section-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-text); margin: 18px 0 8px; }
.stmt-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stmt-field { display: flex; flex-direction: column; gap: 5px; }
.stmt-field--wide { grid-column: 1 / -1; }
.stmt-field > span { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.stmt-in {
  width: 100%; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink); padding: 9px 11px; font-size: 13px;
  font-family: inherit; transition: border-color .12s, box-shadow .12s;
}
.stmt-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.stmt-in--num { text-align: right; font-family: var(--mono); }
.stmt-partner-save { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); margin-top: 10px; cursor: pointer; }
.stmt-partner-save input { accent-color: var(--accent); }

/* ---- 크루 민감정보 탭 ---- */
.sensi-gate { padding: 44px 24px; text-align: center; max-width: 420px; margin: 0 auto; }
.sensi-gate .stmt-form-grid { text-align: left; }
.sensi-body { padding: 18px 20px 20px; }

/* ---- 편집기 품목 테이블 ---- */
.stmt-item-table th.stmt-idx, .stmt-item-table td.stmt-idx { width: 44px; text-align: center; color: var(--ink-3); }
.stmt-item-table td { padding: 6px 8px; }
.stmt-item-table .stmt-in { padding: 7px 9px; }
.stmt-item-table .stmt-in--sm { max-width: 70px; }
.stmt-item-table .stmt-in--num { max-width: 110px; }
.stmt-item-table .stmt-cell-supply, .stmt-item-table .stmt-cell-vat, .stmt-item-table .stmt-cell-total { font-family: var(--mono); white-space: nowrap; }
.stmt-del-item { color: var(--red); border-color: var(--line); line-height: 1; }
.stmt-del-item:hover { border-color: var(--red); }
.stmt-total-row td { background: var(--panel-2); font-weight: 700; border-top: 2px solid var(--line); }
.stmt-total-row td.num { font-family: var(--mono); }
.stmt-ship-row td { background: var(--panel); border-top: 1px dashed var(--line); }
.stmt-ship-row td.num { font-family: var(--mono); }
.stmt-ship-row .stmt-in--num { max-width: 120px; margin-left: auto; }

/* ---- 보기/인쇄용 거래명세서 시트 (링키지랩 발행 양식) ---- */
.stmt-sheet {
  background: #fff; color: #1a1a1a; max-width: 900px; margin: 6px 0 0;
  padding: 40px 44px; border: 1px solid var(--line); border-radius: 10px;
}
.stmt-sheet--v2 { font-size: 13px; }
.stmt-sheet__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.stmt-sheet__brand { display: flex; flex-direction: column; gap: 14px; }
.stmt-sheet__title { font-size: 30px; font-weight: 800; letter-spacing: -.5px; color: #111; }
.stmt-sheet__logowrap { min-height: 20px; }
.stmt-sheet__logo { max-height: 46px; max-width: 240px; display: block; }
.stmt-sheet__logo-fallback { font-size: 18px; font-weight: 700; color: #111; }
.stmt-sheet__co { text-align: right; line-height: 1.7; }
.stmt-sheet__co-name { font-weight: 700; font-size: 14px; color: #111; }
.stmt-sheet__co-line { font-size: 11.5px; color: #555; }
.stmt-sheet__rule { height: 2px; background: #222; margin: 22px 0 20px; }
.stmt-sheet__meta { display: flex; justify-content: space-between; gap: 40px; margin-bottom: 26px; }
.stmt-sheet__meta-col { flex: 1; min-width: 0; }
.stmt-sheet__meta-col--r { max-width: 300px; }
.stmt-sheet__meta-h { font-weight: 700; color: #111; font-size: 12.5px; margin-bottom: 10px; }
.stmt-sheet__mrow { display: flex; gap: 12px; padding: 3px 0; font-size: 12.5px; }
.stmt-sheet__mrow .mk { color: #888; min-width: 66px; }
.stmt-sheet__mrow .mv { color: #222; word-break: break-word; }
.stmt-sheet__items { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.stmt-sheet__items th { font-size: 12px; color: #555; font-weight: 700; padding: 10px 8px; border-top: 1.5px solid #222; border-bottom: 1.5px solid #222; }
.stmt-sheet__items td { font-size: 12.5px; color: #222; padding: 11px 8px; border-bottom: 1px solid #e6e6e6; }
.stmt-sheet__items th.l, .stmt-sheet__items td.l { text-align: left; word-break: break-word; }
.stmt-sheet__items th.r, .stmt-sheet__items td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stmt-sheet__blank td { height: 30px; }
.stmt-sheet__totals { margin-left: auto; width: 260px; }
.stmt-sheet__trow { display: flex; justify-content: space-between; padding: 7px 0; font-size: 12.5px; color: #333; border-bottom: 1px solid #eee; }
.stmt-sheet__trow .tk { color: #666; }
.stmt-sheet__trow .tv { font-variant-numeric: tabular-nums; font-weight: 600; }
.stmt-sheet__trow--grand { border-bottom: none; border-top: 2px solid #222; margin-top: 2px; padding-top: 10px; font-size: 15px; font-weight: 800; color: #111; }
.stmt-sheet__trow--grand .tk { color: #111; }
.stmt-sheet__memo { margin-top: 30px; }
.stmt-sheet__memo-h { font-weight: 700; color: #111; font-size: 12.5px; margin-bottom: 6px; }
.stmt-sheet__memo-b { font-size: 12px; color: #444; word-break: break-word; }
.stmt-sheet__memo-b .muted { color: #aaa; }

/* ---- 청구서(INVOICE) 전용 요소 ---- */
.stmt-sheet__subtitle { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #999; margin-top: -8px; }
.stmt-sheet__pm { font-size: 11.5px; color: #555; line-height: 1.7; }
.stmt-sheet__pm .pmk { display: inline-block; min-width: 14px; color: #aaa; font-weight: 700; }
.stmt-sheet__to-name { font-size: 16px; font-weight: 800; color: #111; margin-bottom: 2px; }
.stmt-sheet__amtbox { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 14px; margin-bottom: 12px; background: #f7f7f8; border: 1px solid #ececef; border-radius: 8px; }
.stmt-sheet__amtbox-k { font-size: 12.5px; font-weight: 700; color: #333; white-space: nowrap; }
.stmt-sheet__amtbox-v { font-size: 20px; font-weight: 800; color: #111; font-variant-numeric: tabular-nums; }
.stmt-sheet__isub { font-size: 11px; color: #888; margin-top: 2px; }
.stmt-sheet__unit-note { text-align: right; font-size: 11px; color: #999; margin: -8px 0 14px; }
.stmt-sheet__purpose { margin-top: 30px; font-size: 13px; color: #222; text-align: center; letter-spacing: .2px; }
.stmt-sheet__sign { margin-top: 26px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.stmt-sheet__sign-co { line-height: 1.7; }
.stmt-sheet__sign-ceo { position: relative; font-size: 14px; font-weight: 700; color: #111; white-space: nowrap; padding-right: 74px; }
.stmt-sheet__inmark { color: #888; font-weight: 500; margin-left: 4px; }
.stmt-sheet__seal { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; opacity: .92; }

/* ---- 청구서(INVOICE) 리디자인 : 발신/수신 2단 · 금액 히어로 · 인덱스 표 ---- */
.stmt-sheet--inv .stmt-sheet__top { align-items: center; }
.stmt-sheet--inv .stmt-sheet__brand { gap: 4px; }
.stmt-sheet--inv .stmt-sheet__subtitle { margin-top: 0; }
.stmt-sheet--inv .stmt-sheet__parties { display: flex; gap: 40px; margin-bottom: 22px; }
.stmt-sheet--inv .stmt-sheet__party { flex: 1; min-width: 0; line-height: 1.7; }
.stmt-sheet--inv .stmt-sheet__party-name { font-size: 16px; font-weight: 800; color: #111; margin: 2px 0 4px; word-break: break-word; }
.stmt-sheet--inv .stmt-sheet__hero {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: #111; color: #fff; border-radius: 12px; padding: 20px 24px; margin-bottom: 14px;
}
.stmt-sheet--inv .stmt-sheet__hero-l { display: flex; flex-direction: column; gap: 5px; }
.stmt-sheet--inv .stmt-sheet__hero-k { font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #c6ff2e; }
.stmt-sheet--inv .stmt-sheet__hero-sub { font-size: 11.5px; color: #b7b7bc; }
.stmt-sheet--inv .stmt-sheet__hero-v { font-size: 30px; font-weight: 800; letter-spacing: -.6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stmt-sheet--inv .stmt-sheet__billmeta { display: flex; gap: 10px; margin-bottom: 24px; }
.stmt-sheet--inv .stmt-sheet__billmeta > div { flex: 1; background: #f7f7f8; border: 1px solid #ececef; border-radius: 8px; padding: 9px 13px; }
.stmt-sheet--inv .stmt-sheet__billmeta span { display: block; font-size: 10.5px; color: #8a8a90; margin-bottom: 2px; }
.stmt-sheet--inv .stmt-sheet__billmeta b { font-size: 13px; color: #111; font-weight: 700; font-variant-numeric: tabular-nums; }
.stmt-sheet--inv .stmt-sheet__items th { background: #111; color: #fff; border-top-color: #111; border-bottom-color: #111; }
.stmt-sheet--inv .stmt-sheet__items th.c, .stmt-sheet--inv .stmt-sheet__items td.c { text-align: center; width: 34px; color: #a0a0a5; font-variant-numeric: tabular-nums; }
.stmt-sheet--inv .stmt-sheet__items th.c { color: #cfcfd4; }
.stmt-sheet--inv .stmt-sheet__noitem { text-align: center; color: #aaa; padding: 24px; font-size: 12px; }
.stmt-sheet--inv .stmt-sheet__trow--grand .tv { color: #111; }

/* ---- 인쇄 : 화면의 명세서 시트 그대로 출력 ---- */
@media print {
  .side, .topbar, .lock, .stmt-actions, .side__foot { display: none !important; }
  .layout, .main, .view { display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
  body { background: #fff !important; }
  .stmt-sheet { border: none; border-radius: 0; max-width: none; margin: 0; padding: 10mm; }
  .stmt-sheet, .stmt-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- 명세서/거래처 게시판(board) 목록 : 크루 목록과 동일한 간격 ---- */
.board__table--stmt th, .board__table--partner th { padding: 13px 18px; }
.board__table--stmt td, .board__table--partner td { padding: 14px 18px; }
.board__table--stmt th:nth-child(1), .board__table--partner th:nth-child(1) { width: 52px; text-align: center; }
.board__table--stmt th:nth-child(2) { width: 100px; }
.board__table--stmt th:nth-child(3) { width: 100px; }
.board__table--stmt th:nth-child(6), .board__table--stmt th:nth-child(7) { width: 104px; text-align: right; }
.board__table--stmt th:nth-child(8) { width: 116px; text-align: right; }
.board__table--stmt th:nth-child(9) { width: 74px; }
.board__table--stmt th:nth-child(10) { width: 104px; }
.board__table--partner th:nth-child(2) { width: 220px; }
.board__table--partner th:nth-child(3) { width: 130px; }
.board__table--partner th:nth-child(4) { width: 150px; }
.board__table--partner th:nth-child(6) { width: 104px; }
.board__no { text-align: center; color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.board__supplier { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board__prod { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board__amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board__amt--total { color: var(--ink); }
.board__st { white-space: nowrap; }
.board__addr { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board__act { white-space: nowrap; text-align: right; }
.board__act .btn { margin-left: 4px; }
.stmt-hint { font-family: var(--mono); font-size: 10px; letter-spacing: 0; color: var(--ink-3); text-transform: none; margin-left: 8px; font-weight: 400; }

/* =========================================================
   업무 보고 · 발행 보고서 (게시형 문서)
   ========================================================= */
.wr-docs { margin: 4px 0 26px; }
.wr-docs__head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.wr-docs__head h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.wr-docs__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}
.wr-doc-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 17px; font-family: inherit; color: var(--ink);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.wr-doc-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateY(-2px); box-shadow: var(--shadow); }
.wr-doc-card__cat {
  align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 999px; padding: 3px 9px;
}
.wr-doc-card__title { font-size: 15.5px; font-weight: 800; line-height: 1.35; letter-spacing: -.3px; }
.wr-doc-card__sum { font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wr-doc-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.wr-doc-card__date { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.wr-doc-card__open { font-size: 12px; font-weight: 700; color: var(--accent-text); }

/* 문서 뷰어 모달 */
.modal__card--doc {
  max-width: min(1360px, 96vw); width: 100%; max-height: 92vh;
  display: flex; flex-direction: column; padding: 18px 20px 20px;
}
.modal__card--doc .modal__head { margin-bottom: 12px; }
.wrdoc-scroll { overflow-y: auto; border-radius: 12px; background: #f3f4f2; padding: 22px; }

/* 보고서 문서 하단 · 현장 사진 섹션 (.wrdoc 내부, 라이트 팔레트) */
.wrdoc-photos { margin-top: 34px; padding-top: 24px; border-top: 2px solid var(--line); }
.wrdoc-photos__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.wrdoc-photos__head h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.wrdoc-photos__head .wrdoc-no { font-size: 18px; }
.wrdoc-photos__status { font-size: 12px; color: var(--mute); }
.wrdoc-photo-add {
  margin-left: auto; cursor: pointer; border: 1px solid var(--g); background: var(--gs);
  color: var(--gd); font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; transition: .15s;
}
.wrdoc-photo-add:hover { background: var(--g); color: #fff; }
.wrdoc-photos__empty {
  color: var(--mute); font-size: 13.5px; padding: 30px 20px; text-align: center;
  border: 1px dashed var(--line); border-radius: 12px; background: #fafaf8;
}
.wrdoc-photos__empty b { color: var(--gd); }
.wrdoc-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.wrdoc-photo {
  position: relative; margin: 0; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: #fafaf8;
}
.wrdoc-photo img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  cursor: zoom-in; background: #eee; transition: transform .2s ease;
}
.wrdoc-photo:hover img { transform: scale(1.04); }
.wrdoc-photo figcaption { padding: 8px 11px; font-size: 12.5px; color: var(--soft); line-height: 1.45; }
.wrdoc-photo__del {
  position: absolute; top: 7px; right: 7px; width: 25px; height: 25px; border-radius: 50%;
  border: 0; background: color-mix(in srgb, #000 55%, transparent); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s;
}
.wrdoc-photo:hover .wrdoc-photo__del { opacity: 1; }
.wrdoc-photo__del:hover { background: #c0392b; }

/* ---- 보고서 본문 (항상 라이트 · 인쇄 안전) ---- */
.wrdoc {
  --g:#1b5e3f; --gd:#123f2a; --gs:#e7f0ea; --amber:#b5822e;
  --ink:#1a1d1b; --soft:#4a524d; --mute:#838c86; --line:#e3e1d9; --card:#fff;
  max-width: 100%; margin: 0 auto; background: #fff; color: var(--ink);
  border-radius: 12px; padding: 40px 52px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  font-family: "Wanted Sans", "Pretendard", system-ui, sans-serif; line-height: 1.7; letter-spacing: -.01em;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.wrdoc *, .wrdoc *::before, .wrdoc *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.wrdoc-head { margin-bottom: 30px; }
.wrdoc-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--g); margin-bottom: 10px; }
.wrdoc-title { font-size: 30px; font-weight: 800; line-height: 1.2; margin: 0 0 12px; color: var(--ink); }
.wrdoc-lede { font-size: 15px; color: var(--soft); margin: 0; }
.wrdoc-lede b, .wrdoc b { color: var(--ink); font-weight: 700; }
.wrdoc-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.wrdoc-meta b { color: var(--soft); }
.wrdoc-sec { margin-top: 34px; }
.wrdoc-sec h2 { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 800;
  margin: 0 0 16px; color: var(--ink); }
.wrdoc-no { flex: none; font-size: 12px; font-weight: 800; color: var(--g);
  border: 1.5px solid var(--g); border-radius: 999px; padding: 2px 10px; }
.wrdoc-tw { overflow-x: auto; border-radius: 10px; border: 1px solid var(--line); }
.wrdoc-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.wrdoc-table th, .wrdoc-table td { padding: 11px 15px; text-align: right; border-bottom: 1px solid #efeee8; }
.wrdoc-table th:first-child, .wrdoc-table td:first-child { text-align: left; }
.wrdoc-table thead th { background: #faf9f6; color: var(--soft); font-weight: 700; font-size: 12.5px; }
.wrdoc-table tbody tr:last-child td { border-bottom: 0; }
.wrdoc-table tr.wrdoc-total td { background: var(--gs); color: var(--gd); font-weight: 800; }
.wrdoc-table td.pos { color: var(--g); font-weight: 700; }
.wrdoc-note { font-size: 12.5px; color: var(--mute); margin: 11px 0 0; }
.wrdoc-note b { color: var(--amber); }
.wrdoc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.wrdoc-card { border: 1px solid var(--line); border-radius: 10px; padding: 15px; }
.wrdoc-card .k { font-size: 12.5px; color: var(--soft); margin: 0 0 7px; }
.wrdoc-card .v { font-size: 25px; font-weight: 800; color: var(--g); margin: 0; line-height: 1; }
.wrdoc-card .v small { font-size: 12px; color: var(--mute); font-weight: 600; }
.wrdoc-scen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.wrdoc-scard { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #fff; }
.wrdoc-scard.hot { background: var(--g); border-color: var(--g); color: #fff; }
.wrdoc-scard .tag { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--g); margin: 0 0 4px; }
.wrdoc-scard.hot .tag { color: rgba(255,255,255,.85); }
.wrdoc-scard .cond { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.wrdoc-scard .big { font-size: 38px; font-weight: 800; line-height: 1; margin: 0; }
.wrdoc-scard .big small { font-size: 15px; }
.wrdoc-scard .sub { font-size: 12.5px; color: var(--mute); margin: 9px 0 0; }
.wrdoc-scard.hot .sub { color: rgba(255,255,255,.85); }
.wrdoc-callout { border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: 0 12px 12px 0; padding: 16px 20px; margin-top: 16px; }
.wrdoc-callout .lbl { display: block; font-weight: 800; color: var(--amber); font-size: 13px; margin-bottom: 5px; }
.wrdoc-callout p { margin: 0; font-size: 14px; color: var(--soft); }
.wrdoc-summary { background: var(--gd); border-radius: 14px; padding: 26px 28px; color: #dceae0; }
.wrdoc-summary .rlabel { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #8fd3ac; margin: 0 0 12px; }
.wrdoc-summary p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.8; color: #dceae0; }
.wrdoc-summary p:last-child { margin-bottom: 0; }
.wrdoc-summary b { color: #fff; }
.wrdoc-summary .hl { color: #fce96a; font-weight: 800; }
@media (max-width: 620px) {
  .wrdoc { padding: 26px 20px; }
  .wrdoc-cards, .wrdoc-scen { grid-template-columns: 1fr; }
}

/* ---- 인쇄(PDF) : 보고서만 출력 ---- */
#wrPrintArea { display: none; }
@media print {
  body.is-wr-printing > *:not(#wrPrintArea) { display: none !important; }
  body.is-wr-printing #wrPrintArea { display: block !important; }
  #wrPrintArea .wrdoc { box-shadow: none; border-radius: 0; max-width: 100%; margin: 0; padding: 0 4mm; }
  .wrdoc-tw, .wrdoc-sec, .wrdoc-scard, .wrdoc-callout, .wrdoc-summary { break-inside: avoid; }
  @page { size: A4; margin: 14mm 12mm; }
}

/* =========================================================
   업무 보고 재설계 : 존/배지/드라이브/아카이브
   ========================================================= */
.wr-zone { margin: 4px 0 30px; }
.wr-zone__head { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; }
.wr-zone__no { font-size: 12px; font-weight: 800; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 2px 9px; }
.wr-zone__head h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.3px; }

.wr-badge { font-size: 10px; font-weight: 800; letter-spacing: .03em; border-radius: 6px; padding: 3px 7px; line-height: 1; flex: none; }
.wr-badge.b-html, .wr-badge.b-htm { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.wr-badge.b-ppt, .wr-badge.b-pptx { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); }
.wr-badge.b-pdf { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 38%, var(--line)); }
.wr-badge.b-xls, .wr-badge.b-xlsx, .wr-badge.b-csv { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 38%, var(--line)); }
.wr-badge.b-doc, .wr-badge.b-docx { background: color-mix(in srgb, var(--slate) 18%, transparent); color: var(--slate); border: 1px solid color-mix(in srgb, var(--slate) 38%, var(--line)); }
.wr-badge.b-img, .wr-badge.b-jpg, .wr-badge.b-png, .wr-badge.b-file { background: var(--panel-2); color: var(--ink-3); border: 1px solid var(--line); }

.wr-doc-card__top { display: flex; align-items: center; gap: 7px; }
.wr-doc-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1.5px dashed var(--line); border-radius: var(--r-lg); color: var(--ink-3); font-size: 13px; font-weight: 700; min-height: 120px; }
.wr-doc-add span { font-family: var(--mono); font-size: 10px; color: var(--ink-3); opacity: .7; }

.wr-folder { padding: 4px 4px 6px; margin-bottom: 14px; }
.wr-folder__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 10px; }
.wr-folder__title { font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.wr-folder__title .cnt { font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--panel-2); border-radius: 999px; padding: 2px 8px; margin-left: 4px; }
.wr-drivebtn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; cursor: pointer; text-decoration: none; transition: .15s; }
.wr-drivebtn:hover { border-color: var(--accent-text); color: var(--accent-text); }
.wr-drivebtn.is-off { opacity: .5; cursor: default; }
.wr-frow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line-soft); transition: background .12s; }
.wr-frow:hover { background: var(--panel-2); }
.wr-frow__name { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-frow__date { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.wr-frow__open { font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.wr-frow:hover .wr-frow__open { color: var(--accent-text); }
.wr-frow__open.is-off { opacity: .45; }
.wr-frow--empty { color: var(--ink-3); font-size: 12.5px; justify-content: center; }
.wr-fmore { display: block; width: 100%; text-align: center; padding: 11px; font-size: 12.5px; color: var(--ink-3);
  background: transparent; border: 0; border-top: 1px solid var(--line-soft); cursor: pointer; font-family: inherit; }
.wr-fmore:hover { color: var(--ink); }

.wr-arch__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wr-arch__right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wr-arch__stat { font-size: 12.5px; color: var(--ink-2); }
.wr-arch__stat b { font-size: 19px; font-weight: 800; color: var(--ink); font-family: var(--mono); margin-right: 3px; }
.seg.wr-arch__years, .seg.wr-arch__mode { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.seg.wr-arch__years button, .seg.wr-arch__mode button { border: 0; background: transparent; color: var(--ink-3); font-family: inherit; font-weight: 700; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.seg.wr-arch__years button.on, .seg.wr-arch__mode button.on { background: var(--ink); color: var(--bg); }
.wr-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }
.wr-mtile { text-align: left; cursor: pointer; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 15px; font-family: inherit; color: var(--ink); transition: .15s; }
.wr-mtile:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: var(--shadow); transform: translateY(-2px); }
.wr-mtile.empty { opacity: .55; cursor: default; }
.wr-mtile.empty:hover { transform: none; box-shadow: none; border-color: var(--line); }
.wr-mtile__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.wr-mtile__m { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.wr-mtile__m small { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-left: 3px; }
.wr-mtile__cnt { font-size: 11.5px; font-weight: 800; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 2px 9px; }
.wr-mtile__cnt.zero { background: var(--panel-2); color: var(--ink-3); }
.wr-mtile__peek { margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--ink-2); line-height: 1.75; }
.wr-mtile__peek li { padding-left: 12px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-mtile__peek li::before { content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-text); }
.wr-mtile__peek li.muted::before { background: var(--ink-3); }
.wr-mtile__more { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); font-weight: 700; }

.wr-timeline { position: relative; padding-left: 18px; }
.wr-timeline::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.wr-tl__month { position: relative; margin-bottom: 20px; }
.wr-tl__mark { position: absolute; left: -18px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); }
.wr-tl__head { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.wr-tl__head .chip-mono { margin-left: 6px; }
.wr-tl__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.wr-tl__list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; }
.wr-tl__list li:hover .evt__actions { opacity: 1; }
.wr-tl__date { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: none; }

.wr-back { border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-family: inherit; font-weight: 700;
  font-size: 12.5px; border-radius: 999px; padding: 6px 14px; cursor: pointer; margin-bottom: 12px; }
.wr-back:hover { border-color: var(--accent-text); color: var(--accent-text); }
.wr-month-detail__title { font-size: 16px; font-weight: 800; margin: 0 0 12px; }

@media (max-width: 640px) { .wr-arch__bar { align-items: stretch; } }

/* 발행 보고서 · 층별 식물·삭제 도면 */
.wrdoc-floors { display: grid; gap: 12px; }
.wrdoc-floors figure { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.wrdoc-floors figcaption { font-weight: 800; font-size: 13px; color: #1a1d1b; padding: 8px 12px; background: #faf9f6; border-bottom: 1px solid #efeee8; }
.wrdoc-floors img { display: block; width: 100%; height: auto; }

/* 발행 보고서 · 비용 조정 방안 섹션 */
.wrdoc .cs-p{font-size:14px;color:var(--ink-2);margin:0 0 12px;line-height:1.8}
.wrdoc .cs-p b{color:var(--ink)}
.wrdoc .cs-bt{font-size:14px;font-weight:800;color:var(--ink);margin:22px 0 12px;display:flex;align-items:center;gap:8px}
.wrdoc .cs-bt::before{content:"";width:8px;height:8px;border-radius:50%;background:#1b5e3f;flex:none}
.wrdoc .cs-cards .v{font-size:18px !important}
.wrdoc .cs-key{background:#123f2a;color:#eaf3ec;border-radius:12px;padding:18px 20px;margin:0 0 4px}
.wrdoc .cs-key ul{margin:0;padding-left:18px;display:grid;gap:8px}
.wrdoc .cs-key li{font-size:13px;line-height:1.65;color:#dceae0}
.wrdoc .cs-key b{color:#fff}
.wrdoc .cs-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wrdoc .cs-opt{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--card-bg)}
.wrdoc .cs-opt.rec{background:#1b5e3f;border-color:#1b5e3f;color:#fff}
.wrdoc .cs-opt .ot{font-size:11px;font-weight:800;color:#1b5e3f;margin:0 0 5px}
.wrdoc .cs-opt.rec .ot{color:rgba(255,255,255,.85)}
.wrdoc .cs-opt h4{font-size:14px;font-weight:800;margin:0 0 10px;color:var(--ink)}
.wrdoc .cs-opt.rec h4{color:#fff}
.wrdoc .cs-opt .amt{font-size:21px;font-weight:800;margin:0;color:#1b5e3f;font-family:var(--mono)}
.wrdoc .cs-opt.rec .amt{color:#fff}
.wrdoc .cs-opt .amt small{font-size:12px;font-weight:700}
.wrdoc .cs-opt .amtsub{font-size:11.5px;color:var(--ink-3);margin:6px 0 10px}
.wrdoc .cs-opt.rec .amtsub{color:rgba(255,255,255,.85)}
.wrdoc .cs-opt .d{font-size:12px;line-height:1.6;color:var(--ink-2);margin:0}
.wrdoc .cs-opt.rec .d{color:rgba(255,255,255,.92)}
.wrdoc .cs-opt .d b{color:var(--ink)}
.wrdoc .cs-opt.rec .d b{color:#fff}
@media(max-width:560px){.wrdoc .cs-opts{grid-template-columns:1fr}}

/* ================================================================
   업무 프로세스 HUB
   클린 카드(색상 좌측바 미사용) · 중요도/상태에만 색상
   ================================================================ */
.phub { max-width: 1120px; }
.phub__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.phub__head--detail { align-items: center; }
.phub__title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; }
.phub__sub { margin: 8px 0 0; color: var(--ink-3); font-size: 13px; }
.phub__headact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 검색창 */
.phub-search { display: flex; align-items: center; gap: 12px; padding: 4px 18px; margin-bottom: 30px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card-bg); transition: border-color .14s, box-shadow .14s; }
.phub-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.phub-search__icn { color: var(--ink-3); flex: 0 0 auto; }
.phub-search__in { flex: 1 1 auto; border: 0; background: transparent; color: var(--ink); font-size: 17px; padding: 16px 0; outline: none; font-family: inherit; }
.phub-search__in::placeholder { color: var(--ink-3); }

.phub-sec { margin-bottom: 30px; }
.phub-sec__t { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.phub-count { font-family: var(--mono); font-size: 12px; color: var(--accent-text); }
.phub-q { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.phub-empty { color: var(--ink-3); font-size: 13px; padding: 14px 2px; }

/* 카테고리 — pill 필터 바 (카드 아님) */
.phub-catbar { display: flex; flex-wrap: wrap; gap: 8px; }
.phub-catpill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: 100px; padding: 8px 8px 8px 15px; background: var(--card-bg); cursor: pointer;
  transition: border-color .14s, background .14s, color .14s; }
.phub-catpill:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card-bg)); }
.phub-catpill__n { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.phub-catpill__c { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-3);
  background: var(--panel-2); border-radius: 100px; min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; }
.phub-catpill:hover .phub-catpill__c { color: var(--ink); }
.phub-catpill.is-empty { opacity: .55; }
.phub-catpill.is-empty:hover { opacity: 1; }

/* 즐겨찾기 */
.phub-favs { display: flex; flex-wrap: wrap; gap: 10px; }
.phub-fav { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-soft); border-radius: 100px;
  padding: 9px 15px; background: var(--card-bg); cursor: pointer; transition: border-color .14s, transform .1s; }
.phub-fav:hover { border-color: var(--accent); transform: translateY(-1px); }
.phub-fav__dot { font-size: 10px; line-height: 1; }
.phub-fav__t { font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* 최근 업데이트 */
.phub-recent { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--r-lg, 14px); overflow: hidden; background: var(--card-bg); }
.phub-recent__row { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  padding: 13px 18px; background: transparent; border: 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .12s; }
.phub-recent__row:last-child { border-bottom: 0; }
.phub-recent__row:hover { background: var(--panel-2); }
.phub-recent__cat { flex: 0 0 150px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.phub-recent__t { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: var(--ink); }
.phub-recent__date { flex: 0 0 auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* 프로세스 카드 그리드 */
.phub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.phub-card { display: flex; flex-direction: column; gap: 8px; text-align: left; width: 100%;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg, 14px); padding: 18px 20px; background: var(--card-bg);
  cursor: pointer; transition: border-color .14s, transform .1s, box-shadow .14s; }
.phub-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.phub-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.phub-card__fav { font-size: 13px; }
.phub-card__t { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.phub-card__cat { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.phub-card__purpose { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phub-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.phub-card__date { margin: 4px 0 0; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.phub-chip { font-size: 11.5px; color: var(--ink-2); background: var(--panel-2); border-radius: 100px; padding: 3px 9px; line-height: 1.4; }
.phub-chip--btn { border: 0; cursor: pointer; transition: color .12s, background .12s; }
.phub-chip--btn:hover { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* 중요도 배지 (색상은 여기만) */
.phub-prio { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 100px; white-space: nowrap; border: 1px solid var(--line-soft); color: var(--ink-2); }
.phub-prio--lg { font-size: 13px; padding: 6px 13px; }
.ph-prio--immediate { color: #dc2626; border-color: color-mix(in srgb, #dc2626 40%, var(--line-soft)); background: color-mix(in srgb, #dc2626 8%, transparent); }
.ph-prio--today     { color: #ea580c; border-color: color-mix(in srgb, #ea580c 40%, var(--line-soft)); background: color-mix(in srgb, #ea580c 8%, transparent); }
.ph-prio--schedule  { color: #64748b; border-color: color-mix(in srgb, #64748b 45%, var(--line-soft)); background: color-mix(in srgb, #64748b 8%, transparent); }
.ph-prio--routine   { color: #16a34a; border-color: color-mix(in srgb, #16a34a 40%, var(--line-soft)); background: color-mix(in srgb, #16a34a 8%, transparent); }

/* 즐겨찾기 별 아이콘 (중립 톤) */
.phub-star { vertical-align: -2px; }
.phub-fav__ic { display: inline-flex; color: var(--ink-3); }
.phub-fav:hover .phub-fav__ic { color: var(--ink-2); }
.phub-card__fav { color: var(--ink-3); display: inline-flex; }
.phub-favbtn { display: inline-flex; align-items: center; gap: 5px; }
.phub-favbtn.is-on { color: var(--ink); border-color: var(--accent); }

/* ---------- 상세 ---------- */
.phub-detail__hero { border: 1px solid var(--line-soft); border-radius: var(--r-lg, 16px); padding: 24px 26px; background: var(--card-bg); margin-bottom: 22px; }
.phub-detail__title { margin: 12px 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; color: var(--ink); }
.phub-detail__crumb { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-3); }
.phub-detail__sep { color: var(--ink-3); opacity: .6; margin: 0 2px; }
.phub-detail__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .phub-detail__meta { grid-template-columns: 1fr; } }
.phub-meta__k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.phub-meta__v { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }

/* 섹션 블록 */
.phub-block { border: 1px solid var(--line-soft); border-radius: var(--r-lg, 16px); padding: 20px 22px; background: var(--card-bg); margin-bottom: 16px; }
.phub-block__h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.phub-block__badge { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--ink);
  background: var(--panel-2); border-radius: 6px; padding: 5px 10px; }
.phub-block__badge--soft { color: var(--ink-2); font-size: 12px; letter-spacing: .3px; }
.phub-block__cap { font-size: 12px; color: var(--ink-3); }

/* FLOW · DECISION 강조 */
.phub-block--flow, .phub-block--dp { border-color: var(--line); box-shadow: var(--shadow); }
.phub-block--flow .phub-block__badge { color: var(--accent-ink); background: var(--accent); }
.phub-block__badge--dp { color: #fff; background: #6d28d9; }

/* PROCESS FLOW */
.phub-flow { display: flex; flex-direction: column; align-items: stretch; }
.phub-flow__step { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 14px 16px; background: var(--panel); }
.phub-flow__no { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 800; font-size: 14px; color: var(--accent-ink); background: var(--accent); }
.phub-flow__body { display: flex; flex-direction: column; gap: 2px; }
.phub-flow__title { font-size: 15px; font-weight: 700; color: var(--ink); }
.phub-flow__desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.phub-flow__arrow { text-align: center; color: var(--ink-3); font-size: 16px; line-height: 1; padding: 6px 0; }

/* DECISION POINT */
.phub-dp { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.phub-dp__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.phub-dp__table th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; padding: 11px 16px; background: var(--panel-2); border-bottom: 1px solid var(--line-soft); }
.phub-dp__table td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink); vertical-align: top; }
.phub-dp__table tr:last-child td { border-bottom: 0; }
.phub-dp__table th:first-child, .phub-dp__sit { width: 32%; }
.phub-dp__sit { font-weight: 700; }
.phub-dp__crit { color: var(--ink-2); }

/* 보고 기준 */
.phub-report { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .phub-report { grid-template-columns: 1fr; } }
.phub-report__k, .phub-stake__k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.phub-report__v { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.phub-report__flags { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.phub-flag { font-size: 12.5px; color: var(--ink-3); border: 1px solid var(--line-soft); border-radius: 100px; padding: 5px 12px; }
.phub-flag.is-on { color: var(--ink); border-color: var(--accent); font-weight: 600; }

/* 담당 / 협업 */
.phub-stake { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .phub-stake { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .phub-stake { grid-template-columns: 1fr; } }
.phub-stake__v { font-size: 14px; color: var(--ink); }

/* 관련 자료 */
.phub-res { display: flex; flex-direction: column; gap: 8px; }
.phub-res__item { font-size: 14px; color: var(--accent-text); text-decoration: none; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 10px; transition: border-color .12s; }
.phub-res__item:hover { border-color: var(--accent); }
.phub-res__item--nolink { color: var(--ink-2); }

/* 과거 사례 */
.phub-cases { display: flex; flex-direction: column; gap: 12px; }
.phub-case { display: flex; gap: 14px; }
.phub-case__date { flex: 0 0 78px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-2); padding-top: 2px; }
.phub-case__body { flex: 1 1 auto; border-left: 2px solid var(--line-soft); padding-left: 14px; }
.phub-case__sit { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.phub-case__line { margin: 2px 0; font-size: 13px; color: var(--ink-2); }
.phub-case__line b { font-weight: 700; color: var(--ink-3); font-size: 11px; margin-right: 4px; }
.phub-case__result { color: var(--ink); font-weight: 600; }
.phub-case__note { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }

.phub-block--foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.phub-detail__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.phub-detail__updated { margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

/* ---------- 폼 (등록/수정) ---------- */
.phub-form { display: flex; flex-direction: column; }
.phub-fsec { margin: 24px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .3px; color: var(--ink); display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.phub-fsec:first-child { margin-top: 0; }
.phub-fsec__cap { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.phub-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
@media (max-width: 640px) { .phub-fgrid { grid-template-columns: 1fr; } }
.phub-fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.phub-fld--wide { grid-column: 1 / -1; }
.phub-fld > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-3); }
.phub-fld > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-3); opacity: .85; }
.phub-fld > span em.req { color: var(--red); }
.phub-in { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--card-bg); color: var(--ink);
  font-size: 14px; padding: 10px 12px; font-family: inherit; outline: none; transition: border-color .12s, box-shadow .12s; }
.phub-in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.phub-in::placeholder { color: var(--ink-3); }
.phub-in--err { border-color: var(--red); }
textarea.phub-in { resize: vertical; line-height: 1.55; }
.phub-checks { display: flex; gap: 18px; margin: 4px 0 12px; flex-wrap: wrap; }
.phub-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.phub-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* 동적 행 */
.phub-editrows { display: flex; flex-direction: column; gap: 8px; }
.phub-editrow { display: flex; align-items: center; gap: 8px; }
.phub-editrow--step .phub-editrow__no { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--panel-2); }
.phub-editrow--step .ph-step-title { flex: 1 1 42%; }
.phub-editrow--step .ph-step-desc { flex: 1 1 58%; }
.phub-editrow--dp .ph-dp-sit { flex: 0 0 32%; }
.phub-editrow--dp .ph-dp-crit { flex: 1 1 auto; }
.phub-editrow--res .ph-res-name { flex: 0 0 38%; }
.phub-editrow--res .ph-res-url { flex: 1 1 auto; }
.phub-editrow--case { flex-direction: column; align-items: stretch; gap: 8px; border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px; background: var(--panel); }
.phub-editrow__caserow { display: flex; gap: 8px; align-items: center; }
.phub-editrow--case .ph-case-date { flex: 0 0 130px; }
.phub-editrow__act { display: flex; gap: 4px; flex: 0 0 auto; }
.phub-iconbtn { width: 30px; height: 34px; border: 1px solid var(--line); background: var(--card-bg); color: var(--ink-3);
  border-radius: 8px; cursor: pointer; font-size: 12px; line-height: 1; transition: border-color .12s, color .12s; }
.phub-iconbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.phub-iconbtn:disabled { opacity: .35; cursor: default; }
.phub-iconbtn--del:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.phub-addrow { margin-top: 10px; align-self: flex-start; border: 1px dashed var(--line); background: transparent; color: var(--ink-2);
  border-radius: 10px; padding: 9px 16px; font-size: 13px; cursor: pointer; transition: border-color .12s, color .12s; }
.phub-addrow:hover { border-color: var(--accent); color: var(--accent-text); }
.phub-form__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

/* 반응형 */
@media (max-width: 720px) {
  .phub-grid { grid-template-columns: 1fr; }
  .phub-recent__cat { flex-basis: 110px; }
  .phub__title { font-size: 25px; }
}
@media (max-width: 460px) {
  .phub-editrow--step, .phub-editrow--dp, .phub-editrow--res { flex-wrap: wrap; }
  .phub-editrow--step .ph-step-title, .phub-editrow--step .ph-step-desc,
  .phub-editrow--dp .ph-dp-sit, .phub-editrow--dp .ph-dp-crit,
  .phub-editrow--res .ph-res-name, .phub-editrow--res .ph-res-url { flex-basis: 100%; }
}

/* =========================================================
   드라이브 HUB — 링크 게시판(레저)
   ========================================================= */
.dhub { max-width: 980px; }
.dhub__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dhub__title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.05; }
.dhub__sub { color: var(--ink-2); font-size: 13.5px; margin: 8px 0 0; }
.dhub__headact { flex: none; }

/* 검색 */
.dhub-search { position: relative; margin-bottom: 16px; }
.dhub-search__ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.dhub-search__in {
  width: 100%; box-sizing: border-box; padding: 13px 16px 13px 46px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink); font-family: var(--mono); font-size: 14px; transition: border-color .16s;
}
.dhub-search__in::placeholder { color: var(--ink-3); }
.dhub-search__in:focus { outline: none; border-color: var(--accent); }

/* 그룹 탭 */
.dhub-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.dhub-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); font-family: var(--mono); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .16s, color .16s, background .16s, transform .1s;
}
.dhub-tab:hover { color: var(--ink); border-color: var(--check-border); }
.dhub-tab:active { transform: scale(.97); }
.dhub-tab.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dhub-tab__c {
  font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-grid; place-items: center; background: rgba(127,127,127,.14); color: inherit; font-weight: 700;
}
.dhub-tab.is-on .dhub-tab__c { background: rgba(10,10,11,.16); }

/* 안내/카운트 */
.dhub-hint { color: var(--ink-3); font-size: 12.5px; margin: 0 0 14px; font-family: var(--mono); }
.dhub-count { color: var(--accent-text); font-weight: 800; }

/* 폴더 섹션 */
.dhub-fold { margin-bottom: 26px; }
.dhub-fold__h {
  display: flex; align-items: center; gap: 10px; padding: 0 2px 10px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.dhub-fold__ic { color: var(--accent-text); flex: none; }
.dhub-fold__crumb { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dhub-fold__crumb--none { color: var(--ink-3); }
.dhub-fold__seg { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.dhub-fold__seg.is-last { color: var(--ink); }
.dhub-fold__sep { color: var(--ink-3); font-size: 12px; }
.dhub-fold__c {
  margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}

/* 링크 행(게시) */
.dhub-list { list-style: none; margin: 0; padding: 0; }
.dhub-row {
  display: flex; align-items: center; gap: 13px; padding: 12px 12px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; position: relative;
  transition: background .14s, border-color .14s;
  animation: dhub-rise .34s var(--ease-out-quint, cubic-bezier(.23,1,.32,1)) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.dhub-row + .dhub-row { border-top: 1px solid var(--line-soft); border-radius: 0; }
.dhub-row:hover { background: var(--panel-2); border-color: var(--line); border-radius: var(--r-sm); }
.dhub-row:hover + .dhub-row { border-top-color: transparent; }
.dhub-row__no { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-weight: 700; width: 20px; flex: none; text-align: right; }
.dhub-row__ic { color: var(--ink-3); flex: none; display: grid; place-items: center; transition: color .14s; }
.dhub-row:hover .dhub-row__ic { color: var(--accent-text); }
.dhub-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dhub-row__name { color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dhub-row__dom { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.dhub-row__dom--empty { opacity: .6; font-style: italic; }
.dhub-row__ctx { font-size: 11.5px; color: var(--ink-3); }
.dhub-row__act { display: flex; gap: 2px; flex: none; opacity: 0; transition: opacity .14s; }
.dhub-row:hover .dhub-row__act, .dhub-row:focus-within .dhub-row__act { opacity: 1; }
.dhub-iconbtn {
  width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent;
  color: var(--ink-3); cursor: pointer; display: grid; place-items: center; transition: color .14s, border-color .14s, background .14s;
}
.dhub-iconbtn:hover { color: var(--ink); border-color: var(--line); background: var(--card-bg); }
.dhub-iconbtn--del:hover { color: var(--red); border-color: var(--red); }
.dhub-row__open {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-2); display: grid; place-items: center;
  transition: color .14s, border-color .14s, background .14s, transform .14s;
}
.dhub-row:hover .dhub-row__open { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); transform: translate(1px,-1px); }
.dhub-row__open.is-disabled { opacity: .35; cursor: default; }
.dhub-row:hover .dhub-row__open.is-disabled { color: var(--ink-2); background: var(--panel); border-color: var(--line); transform: none; }

/* 빈 상태 */
.dhub-empty { text-align: center; padding: 52px 20px; border: 1px dashed var(--line); border-radius: var(--r-lg); }
.dhub-empty__t { color: var(--ink); font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.dhub-empty__s { color: var(--ink-3); font-size: 13px; margin: 0 0 16px; }

/* 모달 */
.dhub-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.dhub-modal__bd { position: absolute; inset: 0; background: rgba(0,0,0,.55); animation: dhub-fade .18s ease-out both; }
.dhub-modal__card {
  position: relative; width: min(460px, 100%); background: var(--card-bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
  animation: dhub-pop .22s var(--ease-out-quint, cubic-bezier(.23,1,.32,1)) both;
}
.dhub-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.dhub-modal__head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.dhub-modal__x { width: 30px; height: 30px; border: none; background: transparent; color: var(--ink-3); font-size: 22px; line-height: 1; cursor: pointer; border-radius: var(--r-sm); transition: color .14s, background .14s; }
.dhub-modal__x:hover { color: var(--ink); background: var(--panel-2); }
.dhub-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.dhub-fld { display: flex; flex-direction: column; gap: 6px; }
.dhub-fld > span { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.dhub-fld em { color: var(--ink-3); font-style: normal; font-size: 11px; font-weight: 400; }
.dhub-fld em.req { color: var(--accent-text); font-weight: 700; }
.dhub-in {
  width: 100%; box-sizing: border-box; padding: 11px 13px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink); font-family: var(--mono); font-size: 14px; transition: border-color .16s;
}
.dhub-in::placeholder { color: var(--ink-3); }
.dhub-in:focus { outline: none; border-color: var(--accent); }
.dhub-in--err { border-color: var(--red); }
.dhub-modal__foot { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--line); }
.dhub-modal__spacer { flex: 1; }

@keyframes dhub-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dhub-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dhub-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .dhub-row, .dhub-modal__bd, .dhub-modal__card { animation: none; }
  .dhub-row:hover .dhub-row__open { transform: none; }
}

@media (max-width: 720px) {
  .dhub__head { flex-direction: column; align-items: flex-start; }
  .dhub__title { font-size: 25px; }
  .dhub-row__act { opacity: 1; }
}

/* =========================================================
   비밀번호 HUB (vault-hub.js)
   ========================================================= */
.vault { max-width: 980px; }
.vault__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.vault__title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.05; }
.vault__sub { color: var(--ink-2); font-size: 13.5px; margin: 8px 0 0; }
.vault__headact { flex: none; display: flex; align-items: center; gap: 8px; }
.vault-lockbtn { display: inline-flex; align-items: center; gap: 6px; }

/* ---- 게이트 ---- */
.vault-gate { min-height: 62vh; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.vault-gate__card {
  width: 100%; max-width: 380px; text-align: center;
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: 18px; padding: 34px 30px 26px;
  animation: vault-pop .28s ease both;
}
.vault-gate__card.is-shake { animation: vault-shake .4s; }
.vault-gate__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.vault-gate__title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 0; }
.vault-gate__sub { color: var(--ink-2); font-size: 13px; margin: 8px 0 22px; }
.vault-gate__form { display: block; }
.vault-gate__field { position: relative; display: flex; align-items: center; }
.vault-gate__ficon { position: absolute; left: 13px; display: flex; color: var(--ink-3); pointer-events: none; }
.vault-gate__in {
  width: 100%; box-sizing: border-box; padding: 12px 14px 12px 38px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; font-size: 14px;
}
.vault-gate__in::placeholder { color: var(--ink-3); }
.vault-gate__in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.vault-gate__err { color: var(--red); font-size: 12px; margin: 12px 0 0; }
.vault-gate__btn { width: 100%; margin-top: 16px; justify-content: center; }
.vault-gate__note { color: var(--ink-3); font-size: 11.5px; margin: 18px 0 0; }

/* ---- 검색 ---- */
.vault-search { position: relative; margin-bottom: 14px; }
.vault-search__ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.vault-search__in {
  width: 100%; box-sizing: border-box; padding: 12px 14px 12px 44px;
  background: var(--card-bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; font-size: 14px;
}
.vault-search__in::placeholder { color: var(--ink-3); }
.vault-search__in:focus { outline: none; border-color: var(--accent); }

/* ---- 그룹 탭 ---- */
.vault-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.vault-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px;
  background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.vault-tab:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink-3) 55%, transparent); }
.vault-tab.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vault-tab__c {
  font-family: var(--mono); font-size: 11px; min-width: 18px; text-align: center;
  padding: 1px 6px; border-radius: 100px; background: color-mix(in srgb, var(--ink-3) 22%, transparent);
}
.vault-tab.is-on .vault-tab__c { background: color-mix(in srgb, var(--accent-ink) 18%, transparent); color: var(--accent-ink); }

.vault-hint { color: var(--ink-3); font-size: 12.5px; margin: 0 0 14px; }
.vault-count { color: var(--accent-text); font-family: var(--mono); }

/* ---- 카드 리스트 ---- */
.vault-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.vault-card {
  position: relative; background: var(--card-bg); border: 1px solid var(--line);
  border-radius: 14px; padding: 15px 16px 14px;
  animation: vault-rise .28s ease both; animation-delay: calc(var(--i, 0) * 18ms);
}
.vault-card:hover { border-color: color-mix(in srgb, var(--ink-3) 45%, transparent); }
.vault-card__top { display: flex; align-items: flex-start; gap: 10px; }
.vault-card__ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; margin-top: 1px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text);
}
.vault-card__ident { flex: 1; min-width: 0; }
.vault-card__name { display: block; font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-card__dom, .vault-card__ctx { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; font-family: var(--mono); }
.vault-card__ctx { color: var(--accent-text); }
.vault-card__act { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.vault-card:hover .vault-card__act { opacity: 1; }
.vault-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.vault-iconbtn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink-3) 55%, transparent); }
.vault-iconbtn--del:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.vault-card__open {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 8px; color: var(--ink-3); transition: color .15s, transform .15s;
}
.vault-card__open:hover { color: var(--accent-text); transform: translate(1px, -1px); }

.vault-card__body { margin-top: 12px; display: grid; gap: 7px; }
.vault-field { display: flex; align-items: center; gap: 8px; }
.vault-field__lb { flex: none; width: 52px; color: var(--ink-3); font-size: 11px; font-weight: 600; }
.vault-field__val {
  flex: 1; min-width: 0; font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vault-field__val.is-empty { color: var(--ink-3); font-style: italic; }
.vault-field__pw { font-family: var(--mono); letter-spacing: .04em; }
.vault-mini {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--ink-2); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.vault-mini:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink-3) 55%, transparent); }
.vault-mini.is-copied { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.vault-card__memo {
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line-soft);
  color: var(--ink-2); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}

/* ---- 빈 상태 ---- */
.vault-empty { text-align: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: 14px; }
.vault-empty__t { font-weight: 700; font-size: 14px; margin: 0; }
.vault-empty__s { color: var(--ink-3); font-size: 12.5px; margin: 6px 0 16px; }

/* ---- 모달 ---- */
.vault-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vault-modal__bd { position: absolute; inset: 0; background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(3px); animation: vault-fade .2s ease both; }
.vault-modal__card {
  position: relative; width: 100%; max-width: 440px; max-height: 88vh; overflow: auto;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 16px;
  animation: vault-pop .24s ease both;
}
.vault-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; }
.vault-modal__head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.vault-modal__x { width: 30px; height: 30px; border: none; background: transparent; color: var(--ink-3); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px; }
.vault-modal__x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink-3) 14%, transparent); }
.vault-modal__body { padding: 4px 20px 8px; display: grid; gap: 13px; }
.vault-fld { display: grid; gap: 6px; }
.vault-fld > span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.vault-fld em { color: var(--ink-3); font-style: normal; font-weight: 500; font-size: 11px; }
.vault-fld em.req { color: var(--red); }
.vault-in {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 13.5px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
}
.vault-in::placeholder { color: var(--ink-3); }
.vault-in:focus { outline: none; border-color: var(--accent); }
.vault-in--area { resize: vertical; min-height: 46px; font-family: inherit; }
.vault-in--err { border-color: var(--red); }
.vault-pwwrap { position: relative; display: flex; align-items: center; }
.vault-pwwrap .vault-in { padding-right: 42px; }
.vault-pwtoggle {
  position: absolute; right: 6px; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: none; background: transparent; color: var(--ink-3); cursor: pointer; border-radius: 7px;
}
.vault-pwtoggle:hover { color: var(--ink); }
.vault-modal__foot { display: flex; align-items: center; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--line); margin-top: 6px; }
.vault-modal__spacer { flex: 1; }

@keyframes vault-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vault-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vault-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes vault-shake { 10%,90%{transform:translateX(-1px);} 30%,70%{transform:translateX(3px);} 50%{transform:translateX(-5px);} }

@media (prefers-reduced-motion: reduce) {
  .vault-card, .vault-modal__bd, .vault-modal__card, .vault-gate__card { animation: none; }
}
@media (max-width: 720px) {
  .vault__head { flex-direction: column; align-items: flex-start; }
  .vault__title { font-size: 25px; }
  .vault-card__act { opacity: 1; }
  .vault-list { grid-template-columns: 1fr; }
}

/* ===================== 설정 (SETTINGS) ===================== */
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.set-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; }
.set-card__t { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--ink); }
.set-card__sub { margin: 0 0 14px; font-size: 12px; color: var(--ink-3); }
.set-card__t + .set-rows, .set-card__t + .set-actions, .set-card__t + .set-exports { margin-top: 14px; }

.set-rows { display: flex; flex-direction: column; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.set-row:first-child { border-top: none; }
.set-row__k { font-size: 12.5px; color: var(--ink-2); font-weight: 600; flex: none; }
.set-row__v { font-size: 12.5px; color: var(--ink); text-align: right; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.set-muted { color: var(--ink-3) !important; font-weight: 400; }
.set-link { color: var(--accent-text); text-decoration: none; font-weight: 700; }
.set-link:hover { text-decoration: underline; }

.set-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; letter-spacing: .2px; }
.set-badge.is-on { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.set-badge.is-off { color: var(--ink-3); background: var(--panel-2); }

.set-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.set-actions--col { flex-direction: column; align-items: stretch; }
.set-hint { margin: 12px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--ink-3); }
.set-hint b { color: var(--ink-2); }

.set-select {
  appearance: none; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 30px 7px 12px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b70' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.set-select:focus { outline: none; border-color: var(--accent); }

/* HUB 메뉴 · 카테고리 이름 편집 (카테고리 트리) */
.set-hub { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.set-hub__grp { display: flex; flex-direction: column; gap: 8px; }
.set-hub__row { display: flex; align-items: center; gap: 10px; }
.set-hub__k {
  flex: 0 0 132px; font-size: 12.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.set-hub__k--sub { font-weight: 500; font-size: 12px; color: var(--ink-3); }
/* 카테고리들은 상위 메뉴 아래에 살짝 들여쓰기 + 왼쪽 가이드선 */
.set-hub__cats {
  display: flex; flex-direction: column; gap: 6px;
  margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line);
}
.set-hub__none { margin: 2px 0 0 12px; font-size: 11.5px; color: var(--ink-3); }
.set-input {
  flex: 1 1 auto; min-width: 0; appearance: none;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.set-input--sm { padding: 6px 10px; font-size: 12px; font-weight: 500; }
.set-input:focus { outline: none; border-color: var(--accent); }
/* 항목이 많은 카드는 그리드에서 넓게 (한 줄 전체) */
.set-card--wide { grid-column: 1 / -1; }

.set-exports { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.set-export {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--line); background: var(--panel-2); border-radius: 10px;
  padding: 11px 13px; cursor: pointer; color: var(--ink); font-family: inherit;
  transition: border-color .14s, transform .1s;
}
.set-export:hover { border-color: var(--accent); transform: translateY(-1px); }
.set-export:active { transform: scale(.98); }
.set-export__ic { font-size: 17px; flex: none; }
.set-export__l { font-size: 12.5px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-export__c { font-size: 11px; color: var(--ink-3); font-family: var(--mono, monospace); flex: none; }
.set-export__dl { font-size: 10.5px; color: var(--accent-text); font-weight: 700; flex: none; }

.set-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(16px);
  background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 700;
  padding: 11px 20px; border-radius: 100px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999;
}
.set-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.set-toast.is-err { background: var(--red); color: #fff; }

@media (max-width: 900px) {
  .set-grid { grid-template-columns: 1fr; }
  .set-exports { grid-template-columns: 1fr; }
}

/* ===================== 회의록 등록 모달 (크게) ===================== */
.modal__card--mtg { max-width: min(1000px, 96vw); padding: 30px 36px; max-height: calc(100vh - 28px); }
.modal__card--mtg .modal__head { margin-bottom: 22px; }
.modal__card--mtg .modal__head h3 { font-size: 23px; }
.modal__card--mtg #meetingForm { display: grid; gap: 20px; }
.modal__card--mtg .fld > span { font-size: 11.5px; }
.modal__card--mtg .fld input,
.modal__card--mtg .fld select,
.modal__card--mtg .fld textarea { padding: 12px 15px; font-size: 14.5px; border-radius: 10px; }
.modal__card--mtg .fld-row { gap: 18px; }
.modal__card--mtg textarea[name="agenda"] { min-height: 76px; }
.modal__card--mtg textarea[name="content"] { min-height: 180px; }
.modal__card--mtg textarea[name="decisions"] { min-height: 88px; }
.modal__card--mtg .mtg-multi { min-height: 160px; font-size: 14px; }
.modal__card--mtg .mtg-multi option { padding: 6px 8px; }
.modal__card--mtg .mtg-audioframe { height: 84px; }
.modal__card--mtg .mtg-act input[type="text"],
.modal__card--mtg .mtg-act input[type="date"] { padding: 10px 12px; font-size: 13.5px; }
.modal__card--mtg .modal__foot { margin-top: 6px; padding-top: 8px; }
.modal__card--mtg .modal__foot .btn { padding: 11px 20px; font-size: 14px; }
@media (max-width: 720px) {
  .modal__card--mtg { padding: 22px 18px; }
}

/* ===================== 회의록 관리 (MEETINGS) ===================== */
.mtg-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.mtg-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--c); padding: 3px 9px; border-radius: 100px; background: color-mix(in srgb, var(--c) 14%, transparent); }
.mtg-cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.mtg-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 100px; }
.mtg-status--done { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.mtg-status--soon { color: #6ea8ff; background: color-mix(in srgb, #6ea8ff 15%, transparent); }
.mtg-status--prog { color: #ffb020; background: color-mix(in srgb, #ffb020 16%, transparent); }

.mtg-multi { min-height: 108px; padding: 6px; }
.mtg-multi option { padding: 4px 6px; border-radius: 5px; }

.mtg-links { display: flex; flex-wrap: wrap; gap: 5px; }
.mtg-pill {
  display: inline-flex; align-items: center; gap: 3px; max-width: 160px;
  font-size: 11px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 100px;
  padding: 3px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .12s, color .12s;
}
.mtg-pill:hover { border-color: var(--accent); color: var(--ink); }
.mtg-pill--rec { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

.mtg-actlist { display: flex; flex-direction: column; gap: 6px; }
.mtg-act { display: grid; grid-template-columns: auto 1fr 90px 140px auto; gap: 6px; align-items: center; }
.mtg-act input[type="text"], .mtg-act input[type="date"] {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 9px; font-family: inherit; font-size: 12px; color: var(--ink); min-width: 0;
}
.mtg-act input:focus { outline: none; border-color: var(--accent); }
.mtg-act__done { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.mtg-act__x { border: none; background: transparent; color: var(--ink-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.mtg-act__x:hover { color: var(--red); }

.mtg-link { grid-template-columns: 170px 1fr auto; }
.mtg-link input { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font-family: inherit; font-size: 12px; color: var(--ink); min-width: 0; }
.mtg-link input:focus { outline: none; border-color: var(--accent); }
.modal__card--mtg .mtg-link input { padding: 10px 12px; font-size: 13.5px; }
@media (max-width: 640px) { .mtg-link { grid-template-columns: 1fr auto; } .mtg-link__label { grid-column: 1 / -1; } }

.mtg-audio { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 8px; }
.mtg-audioframe { width: 100%; height: 66px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }

@media (max-width: 640px) {
  .mtg-act { grid-template-columns: auto 1fr auto; }
  .mtg-act__owner, .mtg-act__due { grid-column: 2; }
}

/* ── AI 자료 HUB · 로그인 정보(아이디·비밀번호, 최대 5개 · 이 브라우저에만) ── */
#ahModal .dhub-modal__card { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
#ahModal .dhub-modal__body { overflow-y: auto; }
.ah-credfld { gap: 8px; }
.ah-credrow { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 28px; gap: 6px; align-items: center; }
.ah-pwwrap { position: relative; display: block; }
.ah-pwwrap .dhub-in { width: 100%; padding-right: 36px; }
.ah-pweye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; border-radius: var(--r-sm); }
.ah-pweye:hover, .ah-pweye.is-on { color: var(--ink); }
.ah-credadd { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .14s, color .14s; }
.ah-credadd:hover { border-color: var(--accent); color: var(--ink); }
.ah-credadd em { font-style: normal; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.ah-credmax { margin: 0; font-size: 12px; color: var(--ink-3); }
.ah-keybtn { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: border-color .14s, color .14s, background .14s; }
.ah-keybtn:hover, .ah-keybtn.is-on { border-color: var(--accent); color: var(--ink); background: var(--panel-2); }
.ah-creds { list-style: none; margin: 2px 0 8px 46px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--panel-2); display: flex; flex-direction: column; gap: 6px; animation: dhub-fade .18s ease-out both; }
.ah-cred { display: grid; grid-template-columns: 18px minmax(0,1fr) minmax(0,1fr); gap: 10px; align-items: center; }
.ah-cred__no { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-weight: 700; text-align: right; }
.ah-cred__f { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ah-cred__f em { font-style: normal; font-size: 11px; color: var(--ink-3); flex: none; margin-right: 4px; }
.ah-cred__f b { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ah-cred .dhub-iconbtn.is-on { color: var(--ink); }
.ah-cred .dhub-iconbtn.is-copied { color: var(--accent-text); border-color: var(--accent); }
.ah-creds__note { margin: 2px 0 0; font-size: 11px; color: var(--ink-3); }
@media (max-width: 640px) {
  .ah-creds { margin-left: 0; }
  .ah-cred { grid-template-columns: 18px minmax(0,1fr); }
  .ah-cred__f + .ah-cred__f { grid-column: 2; }
  .ah-credrow { grid-template-columns: minmax(0,1fr) 28px; }
  .ah-credrow .ah-pwwrap { grid-column: 1; grid-row: 2; }
}
.ah-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ah-by { font-size: 11.5px; color: var(--ink-3); }
.ah-meta > .dhub-row__dom + .ah-by::before, .ah-meta > .dhub-row__ctx + .ah-by::before { content: "·"; margin-right: 8px; }