/* =========================================================
   GARDEN — Operations Dashboard
   Editorial UI · acid-lime accent · mono numerals
   Dark (default) + Light theme via [data-theme="light"]
   (design language referenced from SNACK & GARDEN — OPS)
   ========================================================= */

: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;
  --accent-text: #c6ff2e;
  --accent-ink:  #0a0a0b;

  /* status */
  --green: #4ade80;
  --red:   #ff5a52;
  --amber: #f0b429;
  --slate: #9aa3b2;
  --blue:  #5b9dff;
  --violet:#b48cff;

  --shadow: 0 14px 40px rgba(0,0,0,.4);
  --today-glow: rgba(198,255,46,.09);

  --mono: "Kakao Big 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: #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;
  --blue:  #2563eb;
  --violet:#7c3aed;

  --shadow: 0 14px 40px rgba(20,22,10,.10);
  --today-glow: rgba(150,200,0,.16);

  color-scheme: light;
}

/* 게임즈 가든과 같은 서체 (KS2350 서브셋) */
@font-face { font-family: "Kakao Big Sans"; src: url("../fonts/kbs-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kakao Big Sans"; src: url("../fonts/kbs-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kakao Big Sans"; src: url("../fonts/kbs-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Kakao Big 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: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }

/* ---------------- 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__row { display: flex; align-items: center; gap: 9px; }
.brand__icon { width: 24px; height: 24px; border-radius: 7px; flex: none; display: block; }
.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: 8px 14px; margin: 1px 0; border-radius: 999px;
  color: var(--ink-2); font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: color .16s, background .16s;
}
.nav__item:hover { color: var(--ink); background: var(--panel-2); }
.nav__item.is-active { color: var(--accent-ink); background: var(--accent); }
.nav__item.is-active:hover { background: var(--accent); }
.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 span { color: var(--ink-3); font-size: 15px; }
.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 {
  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; animation: viewIn .28s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } }
.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; }

/* ---------------- 오늘의 날씨 위젯 (분당구 · Open-Meteo) ---------------- */
.wxw {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: 232px; min-height: 78px;
  border-radius: 18px; color: #fff;
  background: #ec7263;
  box-shadow: 0 6px 20px rgba(236, 114, 99, .30), inset 0 1px 0 rgba(255,255,255,.12);
}
.wxw__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wxw__bg span { position: absolute; border-radius: 50%; background: #efc745; }
.wxw__bg span:nth-child(1) { top: -74px; right: -48px; width: 156px; height: 156px; opacity: .38; }
.wxw__bg span:nth-child(2) { top: -52px; right: -22px; width: 108px; height: 108px; opacity: .40; }
.wxw__bg span:nth-child(3) { top: -14px; right: 8px;   width: 46px;  height: 46px;  opacity: 1; }
.wxw__body {
  position: relative; z-index: 1; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
}
.wxw__left { display: flex; flex-direction: column; gap: 4px; }
.wxw__temp { display: flex; align-items: center; gap: 8px; line-height: 1; }
.wxw__ico { font-size: 23px; }
.wxw__deg { font-size: 33px; font-weight: 700; letter-spacing: -1.5px; }
.wxw__feel { font-size: 12px; font-weight: 600; opacity: .95; }
.wxw__right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.wxw__loc { font-size: 13px; font-weight: 800; letter-spacing: -.2px; }
.wxw__date { font-size: 11px; opacity: .88; font-family: var(--mono); }

@media (max-width: 640px) {
  .page-head { flex-wrap: wrap; }
  .wxw { width: 100%; }
}

/* ---------------- BUTTONS ---------------- */
.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; }
.seg { display: flex; gap: 6px; }
.btn.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }

/* ---------------- STAT CARDS ---------------- */
.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 { font-size: 11px; margin-top: 5px; opacity: .9; }
.stat__sub.up { color: var(--green); }
.stat__sub.down { color: var(--red); }
.stat__sub.flat { color: var(--ink-3); }
.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); }

/* ---------------- DASH GRID / DONUT / BARS ---------------- */
.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);
}
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.card-head h3 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.2px; }
.card-head .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; }

.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 .6s 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; }

.tbars { display: grid; gap: 14px; flex: 1; align-content: center; }
.tbar { display: grid; grid-template-columns: 92px 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; width: 0; transition: width .7s cubic-bezier(.2,.9,.3,1); }
.tbar__val { font-size: 13px; font-weight: 700; color: var(--ink); min-width: 48px; text-align: right; font-family: var(--mono); }
.tbar__val small { font-size: 10.5px; color: var(--ink-3); font-weight: 500; margin-left: 2px; }

/* ---------------- NOTICE CARD (window · dark) ---------------- */
.notice-card {
  padding: 0; overflow: hidden;
  border: 1px solid #0c2a3b;
  border-radius: 8px;
  background: #011522;
}
.notice-tools { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.notice-box { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.notice-box.red { background: #ff605c; }
.notice-box.yellow { background: #ffbd44; }
.notice-box.green { background: #00ca4e; }
.notice-card__in { padding: 16px 20px 18px; }
.notice-card .card-head { margin-bottom: 12px; }
.notice-card .card-head h3 { color: #fff; }
.notice-card .card-head .asof { color: rgba(255,255,255,.55); }
.notice-card__text {
  margin: 0; padding: 12px 15px;
  font-size: 13.5px; line-height: 1.65; color: #ffffff;
  white-space: pre-line; cursor: pointer;
  background: rgba(255,255,255,.05);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  transition: background .16s;
}
.notice-card__text:hover { background: rgba(255,255,255,.09); }
.notice-card--empty .notice-card__text,
.notice-card--empty .notice-card__text:hover { color: rgba(255,255,255,.5); cursor: default; background: rgba(255,255,255,.04); border-left-color: rgba(255,255,255,.15); }
.notice-old { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 3px; }
.notice-old__row {
  display: flex; align-items: baseline; gap: 10px; cursor: pointer; font-size: 12.5px;
  padding: 5px 8px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
  transition: border-color .14s, background .14s;
}
.notice-old__row:hover { border-left-color: var(--accent); background: rgba(255,255,255,.05); }
.notice-old__date { color: var(--accent); font-family: var(--mono); font-size: 11px; flex: none; font-weight: 600; }
.notice-old__text { color: rgba(255,255,255,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-old__row:hover .notice-old__text { color: #fff; }

/* ---------------- SPARK / TODAY ---------------- */
.split-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.spark { width: 100%; height: 120px; margin-top: 8px; }
.spark path.line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.spark path.area { fill: url(#sparkFill); opacity: .5; }
.spark .dotp { fill: var(--accent); }
.spark-x { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .5px; }

.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1; }
.todo li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: var(--r-sm); font-size: 13px; }
.todo li:hover { background: var(--panel-2); }
.todo__tick {
  width: 16px; height: 16px; border-radius: 5px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--line); display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; color: transparent;
}
.todo li.done .todo__tick { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.todo li.done .todo__txt { color: var(--ink-3); text-decoration: line-through; }
.todo__time { font-family: var(--mono); font-size: 10.5px; color: var(--accent-text); font-weight: 600; }
.todo__txt { color: var(--ink); }

/* ---------------- DASHBOARD: 최근 식물 이슈 ---------------- */
.dri-more { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--accent-text); }
.dri-more:hover { text-decoration: underline; }
.dri-list { display: flex; flex-direction: column; }
.dri-row { display: grid; grid-template-columns: 46px minmax(96px, 1fr) minmax(0, 1.7fr) 48px auto; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .12s; }
.dri-row:last-child { border-bottom: none; }
.dri-row:hover { background: var(--panel-2); }
.dri-date { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.dri-loc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dri-place { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dri-title { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dri-row .iss-row__urg { text-align: right; }

@media (max-width: 720px) {
  .dri-row { grid-template-columns: 44px 1fr auto; }
  .dri-loc { display: none; }
}

/* ---------------- TABLE ---------------- */
.toolbar-row { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.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); }

.table-wrap { border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; background: var(--card-bg); }
.grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid-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;
}
.grid-table th.num, .grid-table td.num { text-align: right; font-family: var(--mono); }
.grid-table td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.grid-table tr:last-child td { border-bottom: none; }
.grid-table tbody tr { transition: background .12s; cursor: default; }
.grid-table tbody tr:hover { background: var(--panel-2); }

.crew-name b { font-weight: 700; white-space: nowrap; }
.crew-name-btn {
  font: inherit; font-weight: 700; white-space: nowrap; background: none; border: none; padding: 0;
  color: var(--ink); cursor: pointer; text-align: left;
}
.crew-name-btn:hover { color: var(--accent-text); text-decoration: underline; }
.grid-table td:first-child { white-space: nowrap; }
.crew-name span.t { display: block; color: var(--ink-2); font-family: var(--mono); font-size: 10.5px; margin-top: 2px; }
.gdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 9px; vertical-align: middle; flex: none; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 11px; 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::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--c); }
.badge--active { --c: var(--green); }
.badge--leave  { --c: var(--amber); }
.badge--out    { --c: var(--slate); }

.dleg__pct { font-size: 11px; color: var(--ink-3); width: 46px; text-align: right; font-family: var(--mono); }

/* 장애유형 셀 */
.dis { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.dis__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dc, var(--slate)); flex: none; }
.tbar__label .gdot { margin-right: 8px; }

/* 재직 기간 · 상태 · 비고 · 퇴사행 */
.mono-cell { font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; padding-top: 16px; padding-bottom: 16px; }
.crew-since { color: var(--ink); }
.crew-ten { margin-left: 10px; font-size: 10.5px; color: var(--accent-text); font-family: var(--mono); white-space: nowrap; }
.grid-table td.crew-status, .grid-table th.crew-status-col { padding-left: 32px; }
.crew-status { padding-top: 16px; padding-bottom: 16px; }
.crew-status__row { display: flex; align-items: center; gap: 10px; }
.crew-left { font-family: var(--mono); font-size: 10.5px; color: var(--slate); white-space: nowrap; }
.crew-out { opacity: .55; }
.crew-out:hover { opacity: 1; }
.crew-memo { display: block; color: var(--ink); }

/* 모달 (크루 등록) */
.gmodal { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 24px; }
.gmodal__bd { position: absolute; inset: 0; background: color-mix(in srgb, #000 60%, transparent); backdrop-filter: blur(4px); animation: fade .16s ease; }
.gmodal__card {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 22px 24px; animation: pop .2s cubic-bezier(.2,.9,.3,1.2);
}
.gmodal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.gmodal__head h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.gmodal__x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); font-size: 17px; cursor: pointer; }
.gmodal__x:hover { border-color: var(--red); color: var(--red); }
.gform { display: grid; gap: 14px; }
.fld { display: grid; gap: 6px; }
.fld > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); }
.fld input, .fld select {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; color: var(--ink); font-size: 13px; font-family: inherit; outline: none; transition: border-color .14s;
}
.fld input:focus, .fld select:focus { border-color: var(--accent); }
.fld input::placeholder { color: var(--ink-3); }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gmodal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.gmodal__spacer { flex: 1; }
.btn--danger { 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); }

.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); }

/* =========================================================
   MONTHLY SCHEDULE (월간 스케줄)
   ========================================================= */
.wb-layout { display: grid; grid-template-columns: 316px 1fr; gap: 18px; align-items: stretch; }

/* --- 월간 달력 --- */
.mcal {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card-bg);
  padding: 20px 18px; box-shadow: var(--shadow);
}
.mcal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mcal__title { font-weight: 800; font-size: 16px; letter-spacing: -.4px; }
.mcal__nav {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1;
  transition: border-color .14s, color .14s, transform .1s;
}
.mcal__nav:hover { border-color: var(--accent); color: var(--ink); }
.mcal__nav:active { transform: scale(.94); }

.mc__wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.mc__wd span { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .5px; color: var(--ink-3); padding: 4px 0; }
.mc__wd span.is-wknd { color: color-mix(in srgb, var(--red) 60%, var(--ink-3)); }
.mc__grid { display: flex; flex-direction: column; gap: 3px; }
.mc__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mc__d {
  position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center;
  border: none; background: transparent; cursor: pointer;
  border-radius: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  transition: background .12s, color .12s, transform .1s;
}
.mc__d--pad { visibility: hidden; cursor: default; }
.mc__d:not(.mc__d--pad):hover { background: var(--panel-2); }
.mc__d:active { transform: scale(.9); }
.mc__d.is-wknd { color: color-mix(in srgb, var(--red) 55%, var(--ink-3)); }
.mc__d.is-holiday { color: var(--red); font-weight: 700; }
.mc__d.is-today { background: var(--accent); color: var(--accent-ink); font-weight: 800; box-shadow: 0 4px 14px var(--today-glow); }
.mc__d.has-ex { color: var(--ink); font-weight: 700; }
.mc__dot {
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.mc__d.is-today .mc__dot { background: var(--accent-ink); box-shadow: none; }
.mc__dot--legend { position: static; transform: none; display: inline-block; vertical-align: middle; }

.mcal__foot { display: flex; align-items: center; gap: 16px; margin: 14px 2px 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.mcal__legend { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.mc__hol--legend { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); vertical-align: middle; }

/* 이번 달 공휴일 목록 */
.mc__hol { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mc__holrow {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid color-mix(in srgb, var(--red) 30%, var(--line-soft));
  background: color-mix(in srgb, var(--red) 8%, var(--panel-2));
  border-radius: 8px; padding: 5px 9px; font-size: 11.5px;
}
.mc__holrow b { color: var(--red); font-family: var(--mono); font-size: 11px; flex: none; }
.mc__holrow span { color: var(--ink-2); }

.mc__ex { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.mc__exrow {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 1px solid var(--line-soft); background: var(--panel-2); border-radius: 9px;
  padding: 8px 11px; cursor: pointer; color: var(--ink-2); font-size: 12px;
  transition: border-color .14s, transform .1s;
}
.mc__exrow:hover { border-color: var(--accent); transform: translateX(2px); }
.mc__exrow b { color: var(--accent-text); font-family: var(--mono); font-size: 11.5px; flex: none; }
.mc__exrow span { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc__exdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.mc__hint { margin: 12px 2px 2px; color: var(--ink-3); font-size: 11.5px; line-height: 1.6; }

/* --- 보드 --- */
.wb-board {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card-bg);
  overflow: hidden; box-shadow: var(--shadow);
}
.wb-board__head {
  display: flex; align-items: center; gap: 10px; padding: 17px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: radial-gradient(120% 180% at 0% 0%, var(--today-glow), transparent 60%);
}
.wb-board__head h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.wb-board__badge {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
  color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 4px 11px; border-radius: 999px;
}
.wb-scroll { overflow-x: auto; flex: 1; }

.wb-table { width: 100%; border-collapse: collapse; font-size: 13px; height: 100%; }
.wb-table th, .wb-table td { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
.wb-table th:last-child, .wb-table td:last-child { border-right: none; }
.wb-table tbody tr:last-child th, .wb-table tbody tr:last-child td { border-bottom: none; }

.wb-corner { width: 96px; }
.wb-th, .wb-corner {
  padding: 13px 14px; background: var(--panel); vertical-align: middle;
  font-family: var(--mono); font-weight: 500; color: var(--ink-3);
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
}
.wb-th { text-align: center; }
.wb-th__d { display: block; color: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: 0; }
.wb-th.is-today { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.wb-th.is-today .wb-th__d { color: var(--accent-text); }
.wb-th.is-today::after { content: "TODAY"; display: block; margin-top: 3px; font-size: 8px; letter-spacing: 1px; color: var(--accent-text); }

.wb-area {
  position: relative; padding: 14px 16px; vertical-align: middle; background: var(--panel);
  white-space: nowrap; min-width: 96px;
}
.wb-area__t { font-weight: 700; font-size: 13.5px; color: var(--ink); outline: none; border-radius: 5px; padding: 2px 4px; }
.wb-area__t:focus { background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: 0 0 0 1px var(--accent); }
.wb-area__x {
  position: absolute; top: 8px; right: 8px; width: 17px; height: 17px; border-radius: 5px; border: none;
  background: transparent; color: var(--ink-3); font-size: 13px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .12s, color .12s;
}
.wb-area:hover .wb-area__x { opacity: 1; }
.wb-area__x:hover { color: var(--red); }
.wb-area--note { color: var(--ink-2); font-family: var(--mono); font-size: 11px; letter-spacing: .5px; }

.wbcell { position: relative; padding: 10px 11px; vertical-align: top; min-width: 138px; transition: background .12s; }
.wbcell.is-today { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.wbcell__body { display: flex; flex-direction: column; gap: 4px; min-height: 24px; }
.wbcell__empty { color: var(--ink-3); opacity: .45; font-family: var(--mono); padding: 2px 4px; }

.wbitem {
  display: flex; align-items: center; gap: 4px;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 1px 3px 1px 5px; transition: border-color .12s, background .12s;
}
.wbitem:hover { border-color: color-mix(in srgb, var(--ink-3) 40%, var(--line)); }
.wbitem__t {
  flex: 1; min-width: 0; padding: 4px 4px; border-radius: 5px; color: var(--ink);
  font-family: var(--mono); font-size: 12px; outline: none; line-height: 1.35; word-break: break-word;
}
.wbitem__t:focus { background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: 0 0 0 1px var(--accent); }
.wbitem__x {
  flex: none; width: 17px; height: 17px; border-radius: 5px; border: none; background: transparent;
  color: var(--ink-3); font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, color .12s;
}
.wbitem:hover .wbitem__x { opacity: 1; }
.wbitem__x:hover { color: var(--red); }
.wbadd {
  margin-top: 5px; width: 100%; border: 1px dashed var(--line); background: transparent;
  color: var(--ink-3); border-radius: 8px; padding: 5px 0; font-family: var(--mono); font-size: 11px; cursor: pointer;
  opacity: 0; transition: opacity .14s, border-color .14s, color .14s;
}
.wbcell:hover .wbadd { opacity: 1; }
.wbadd:hover { border-color: var(--accent); color: var(--accent-text); }

.wbnote { padding: 12px 16px; vertical-align: middle; background: color-mix(in srgb, var(--violet) 6%, transparent); }
.wbnote__t {
  display: block; color: var(--violet); font-size: 12.5px; outline: none; border-radius: 5px; padding: 4px 6px; min-height: 22px;
}
.wbnote__t:focus { background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: 0 0 0 1px var(--accent); color: var(--ink); }

/* =========================================================
   PLANT CHECK (식물 상태 점검)
   ========================================================= */
.phead {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card-bg);
  padding: 16px 20px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.phead__prog { display: flex; align-items: center; gap: 14px; }
.pring { width: 60px; height: 60px; flex: none; }
.pring__bg { fill: none; stroke: var(--line-soft); stroke-width: 7; }
.pring__fg { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray .6s cubic-bezier(.2,.9,.3,1); }
.pring__t { font-family: var(--mono); font-size: 15px; font-weight: 800; fill: var(--ink); }
.phead__round { font-weight: 800; font-size: 15px; letter-spacing: -.3px; }
.phead__done { color: var(--ink-3); font-size: 12.5px; margin-top: 3px; }
.phead__done b { color: var(--accent-text); font-family: var(--mono); }

.ptabs { display: flex; gap: 4px; margin-left: auto; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 4px; }
.ptab {
  border: none; background: transparent; color: var(--ink-3); cursor: pointer;
  font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 9px;
  transition: color .14s, background .14s;
}
.ptab:hover { color: var(--ink); }
.ptab.is-on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

.proundbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.proundbar__lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.pround {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2);
  font-family: var(--mono); font-size: 12px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: border-color .14s, color .14s;
}
.pround:hover { border-color: color-mix(in srgb, var(--ink-3) 55%, transparent); color: var(--ink); }
.pround.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }

/* 점검 입력 */
.pgroup { border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--card-bg); overflow: hidden; margin-bottom: 14px; }
.pgroup__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--line-soft);
}
.pgroup__name { font-weight: 800; font-size: 13.5px; letter-spacing: -.2px; }
.pgroup__n { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.prow {
  display: grid; grid-template-columns: 1fr auto 1.1fr; align-items: center; gap: 14px;
  padding: 10px 18px; border-bottom: 1px solid var(--line-soft); transition: background .12s;
}
.prow:last-child { border-bottom: none; }
.prow:hover { background: var(--panel-2); }
.prow__z { font-size: 13px; color: var(--ink); }
.pgrades { display: flex; gap: 5px; }
.pgrade {
  width: 34px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2);
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink-3);
  transition: all .12s;
}
.pgrade:hover { border-color: var(--gc); color: var(--gc); }
.pgrade.is-on { background: var(--gc); border-color: var(--gc); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--gc) 35%, transparent); }
.pgrade--clr { color: var(--ink-3); font-weight: 500; }
.pgrade--clr.is-on { background: var(--line); border-color: var(--line); color: var(--ink-2); box-shadow: none; }
.prow__issue {
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 8px 11px; color: var(--ink); font-size: 12.5px; outline: none; transition: border-color .14s;
}
.prow__issue:focus { border-color: var(--accent); }
.prow__issue::placeholder { color: var(--ink-3); }

/* 관리자: 구역 삭제 버튼 */
.prow--admin { grid-template-columns: 1fr auto 1.1fr auto; }
.prow__del {
  width: 26px; height: 26px; border-radius: 7px; flex: none; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-3);
  font-size: 14px; line-height: 1; transition: border-color .12s, color .12s, background .12s;
}
.prow__del:hover { border-color: var(--red); color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.prow-add {
  display: block; width: calc(100% - 36px); margin: 10px 18px 4px; padding: 9px;
  border: 1px dashed var(--line); border-radius: var(--r-sm); background: transparent;
  color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.prow-add:hover { border-color: var(--accent); color: var(--accent-text); }
.plant-admin-badge {
  display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .5px; color: var(--accent-ink); background: var(--accent);
  padding: 5px 10px; border-radius: 999px;
}
.plant-pw { letter-spacing: 8px; text-align: center; font-size: 18px !important; }

/* 통계 요약 */
.pstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pstat {
  border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 16px 18px; background: var(--card-bg);
}
.pstat__g { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--ink-3); text-transform: uppercase; }
.pstat__n { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -1px; margin-top: 8px; }
.pstat__n small { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-left: 2px; }
.pissue { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.pissue:last-child { border-bottom: none; }
.pissue b { min-width: 130px; }
.pissue span:last-child { color: var(--ink-2); }

/* 현황 매트릭스 */
.pm-table th, .pm-table td { text-align: center; }
.pm-table .pm-z { text-align: left; white-space: nowrap; }
.pm-r.is-cur, .pm-cell.is-cur { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pm-table th.is-cur { color: var(--accent-text); }
.pm-sec td { text-align: left !important; background: var(--panel); font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; color: var(--ink-2); text-transform: uppercase; padding: 9px 18px; }
.pgrade-dot {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: #fff;
  background: var(--gc, var(--slate));
}

@media (max-width: 900px) {
  .pstats { grid-template-columns: repeat(3, 1fr); }
  .prow { grid-template-columns: 1fr auto; }
  .prow--admin { grid-template-columns: 1fr auto auto; }
  .prow__issue { grid-column: 1 / -1; }
}

/* =========================================================
   FLOOR STATUS (각층 현황 · 게시판형 + 팝업)
   ========================================================= */
.fl-board { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-bg); overflow: hidden; box-shadow: var(--shadow); }
.flb-row {
  display: grid; grid-template-columns: 116px 1fr auto; align-items: center; gap: 16px;
  padding: 12px 18px; border-bottom: 1px solid var(--line-soft); transition: background .12s;
}
.flb-row:last-child { border-bottom: none; }
.flb-row:hover { background: var(--panel-2); }
.flb-head { display: flex; align-items: center; gap: 9px; }
.flb-name { font-weight: 800; font-size: 14px; letter-spacing: -.3px; white-space: nowrap; }
.flb-count {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  min-width: 20px; text-align: center; padding: 2px 7px; border-radius: 999px;
}
.flb-thumbs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 40px; }
.flb-thumb {
  width: 40px; height: 40px; border-radius: 8px; flex: none; cursor: pointer; padding: 0;
  background: var(--panel-2) center/cover no-repeat; border: 1px solid var(--line-soft);
  transition: transform .1s, border-color .12s, box-shadow .12s;
}
.flb-thumb:hover { transform: scale(1.12); border-color: var(--accent); box-shadow: 0 4px 12px var(--today-glow); z-index: 1; }
.flb-more { font-family: var(--mono); font-size: 11px; color: var(--ink-3); align-self: center; margin-left: 2px; }
.flb-empty { font-family: var(--mono); font-size: 12px; color: var(--ink-3); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; }
.flb-empty:hover { color: var(--accent-text); border-color: var(--accent); }
.flb-meta { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.flb-date { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.flb-folder { font-family: var(--mono); font-size: 11px; color: var(--ink-3); transition: color .12s; }
.flb-folder:hover { color: var(--accent-text); }

.fl-empty { display: grid; place-items: center; gap: 14px; min-height: 40vh; text-align: center; border: 1px dashed var(--line); border-radius: 16px; color: var(--ink-3); }
.fl-empty p { margin: 0; font-size: 13.5px; }

/* 스켈레톤 */
.fl-sk { background: linear-gradient(90deg, var(--panel-2) 25%, var(--line-soft) 37%, var(--panel-2) 63%); background-size: 400% 100%; animation: flShimmer 1.3s ease infinite; border-radius: 8px; }
.fl-sk--name { display: inline-block; width: 60px; height: 14px; }
.fl-sk--strip { height: 40px; }
@keyframes flShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* 라이트박스 팝업 */
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 30px; }
.lightbox__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, #000 78%, transparent); backdrop-filter: blur(6px); animation: fade .18s ease; }
.lightbox__fig { position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 92vw; max-height: 88vh; animation: pop .2s cubic-bezier(.2,.9,.3,1.2); }
.lightbox__img { max-width: 92vw; max-height: 78vh; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.6); background: var(--panel-2); }
.lightbox__cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: #eee; font-family: var(--mono); }
.lightbox__cap b { color: #fff; font-weight: 700; }
.lightbox__cap span { color: rgba(255,255,255,.6); font-size: 11.5px; }
.lightbox__cap a { color: var(--accent); }
.lightbox__close {
  position: absolute; top: 18px; right: 20px; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  transition: background .14s, transform .1s;
}
.lightbox__close:hover { background: rgba(0,0,0,.7); }
.lightbox__del {
  position: absolute; top: 18px; left: 20px; z-index: 2; height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(255,90,82,.5); background: rgba(0,0,0,.4); color: #ff7a73;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background .14s, color .14s, transform .1s;
}
.lightbox__del:hover { background: var(--red); color: #fff; border-color: var(--red); }
.lightbox__del:active { transform: scale(.96); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  transition: background .14s;
}
.lightbox__nav:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }

@media (max-width: 720px) {
  .flb-row { grid-template-columns: 1fr; gap: 10px; }
  .flb-meta { justify-content: flex-start; }
  .lightbox__nav { width: 40px; height: 40px; }
}

/* =========================================================
   SAFETY & HEALTH (산업안전보건 — 안전매뉴얼 · 주간회의 · 정기점검 게시판)
   ========================================================= */
.sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sf-folder {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 999px; transition: border-color .12s, color .12s;
}
.sf-folder:hover { border-color: var(--accent); color: var(--accent-text); }

/* 문서 확장자 배지 (이모지 대신) */
.sf-ext {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  font-family: var(--mono); font-weight: 800; letter-spacing: .3px; color: var(--accent-ink);
  background: var(--accent); border-radius: 7px;
  min-width: 34px; height: 22px; padding: 0 6px; font-size: 10px;
}
.sf-list { display: flex; flex-direction: column; gap: 6px; }
.sf-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2);
  transition: border-color .12s, background .12s;
}
.sf-row:hover { border-color: color-mix(in srgb, var(--ink-3) 55%, transparent); background: var(--panel); }
.sf-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; }
.sf-date { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); flex: none; }
.sf-open { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--accent-text); flex: none; }
.sf-open:hover { text-decoration: underline; }

.sf-empty {
  display: grid; place-items: center; gap: 12px; text-align: center; padding: 24px 12px;
  border: 1px dashed var(--line); border-radius: var(--r); color: var(--ink-3);
}
.sf-empty p { margin: 0; font-size: 12.5px; line-height: 1.5; }

/* 정기회의 게시판 */
.tf-board { display: flex; flex-direction: column; gap: 10px; }
.tf-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2);
  transition: border-color .12s, background .12s;
}
.tf-card:hover { border-color: color-mix(in srgb, var(--ink-3) 55%, transparent); background: var(--panel); }
.tf-date { display: flex; flex-direction: column; align-items: center; flex: none; width: 52px; font-family: var(--mono); }
.tf-date b { font-size: 16px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.tf-date span { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.tf-body { flex: 1; min-width: 0; }
.tf-tag {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 34%, transparent);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 7px;
}
.tf-link { display: inline-block; margin-left: 6px; font-size: 12px; text-decoration: none; vertical-align: middle; line-height: 1; transition: transform .1s; }
.tf-link:hover { transform: scale(1.18); }
.tf-title { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.tf-attendees { margin: 5px 0 0; font-size: 11.5px; color: var(--ink-3); }
.tf-acts { display: flex; flex-direction: column; gap: 6px; flex: none; }

/* 정기 안전점검 게시판 */
.chk-board { display: flex; flex-direction: column; gap: 12px; }
.chk-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.chk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chk-title { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.2px; margin-right: auto; }
.chk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.chk-grid b { display: block; margin-top: 3px; font-size: 13px; }
.chk-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-3); }
.chk-row { margin-bottom: 10px; }
.chk-row p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); }
.chk-row--sent { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
.chk-row--sent .chk-label { flex: none; }
.chk-sent { font-family: var(--mono); font-size: 12px; font-weight: 700; margin-right: auto; }
.chk-sent--ok { color: var(--green); }
.chk-sent--warn { color: var(--amber); }

/* 더보기 / 접기 */
.board-more {
  display: block; width: 100%; margin-top: 10px; padding: 9px; text-align: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  border: 1px dashed var(--line); border-radius: var(--r-sm); background: transparent; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.board-more:hover { border-color: var(--accent); color: var(--accent-text); }

@media (max-width: 900px) {
  .sf-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tf-card { flex-direction: column; }
  .tf-date { flex-direction: row; gap: 6px; width: auto; }
  .chk-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* =========================================================
   PLANT ISSUES (식물 이슈 관리 — 상태별 그룹 리스트 · 미니멀)
   색상 바 없이 타이포·헤어라인으로만 위계 구성
   ========================================================= */
.iss-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.iss-stat { border: 1px solid var(--line-soft); border-radius: var(--r); padding: 16px 18px; background: var(--card-bg); }
.iss-stat__n { font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.iss-stat__n small { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-left: 3px; }
.iss-stat__n--red { color: var(--red); }
.iss-stat__n--acid { color: var(--accent-text); }
.iss-stat__l { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; margin-top: 10px; }

.iss-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

/* 기간 네비게이터 (월간 / 연간) */
.iss-period {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: radial-gradient(120% 180% at 0% 0%, var(--today-glow), transparent 60%), var(--card-bg);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; margin-bottom: 14px;
}
.iss-nav {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1;
  transition: border-color .12s, color .12s, transform .08s;
}
.iss-nav:hover { border-color: var(--accent); color: var(--ink); }
.iss-nav:active { transform: scale(.92); }
.iss-period__title { font-weight: 800; font-size: 16px; letter-spacing: -.4px; min-width: 108px; text-align: center; }
.iss-modeseg { margin-left: auto; display: flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px; }
.iss-modebtn { border: none; background: transparent; color: var(--ink-3); cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 999px; transition: color .12s, background .12s; }
.iss-modebtn:hover { color: var(--ink); }
.iss-modebtn.is-on { background: var(--accent); color: var(--accent-ink); }
.iss-seg { display: flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 4px; }
.iss-segbtn { border: none; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 8px 16px; border-radius: 9px; transition: color .14s, background .14s; }
.iss-segbtn:hover { color: var(--accent-text); }
.iss-segbtn.is-on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.iss-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.iss-chip { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: border-color .14s, color .14s; }
.iss-chip:hover { border-color: var(--accent); color: var(--ink); }
.iss-chip.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.iss-search { flex: 1; min-width: 180px; }

/* 상태별 그룹 리스트 */
.iss-groups { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-bg); overflow: hidden; box-shadow: var(--shadow); }
.iss-group { border-bottom: 1px solid var(--line); }
.iss-group:last-child { border-bottom: none; }
.iss-ghead { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; cursor: pointer; padding: 13px 18px; background: var(--panel); border: none; border-bottom: 1px solid var(--line-soft); transition: background .12s; }
.iss-ghead:hover { background: var(--panel-2); }
.iss-group.is-collapsed .iss-ghead { border-bottom: none; }
.iss-ghead__name { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); }
.iss-ghead__n { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--panel-2); border-radius: 999px; padding: 2px 9px; min-width: 22px; text-align: center; }
.iss-ghead__chev { margin-left: auto; color: var(--ink-3); font-size: 10px; transition: transform .16s; }
.iss-group.is-collapsed .iss-ghead__chev { transform: rotate(-90deg); }

.iss-row { display: grid; grid-template-columns: 60px minmax(120px, 1fr) minmax(0, 1.7fr) 52px 64px; align-items: center; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .12s; }
.iss-row:last-child { border-bottom: none; }
.iss-row:hover { background: var(--panel-2); }
.iss-row--done { opacity: .5; }
.iss-row--done:hover { opacity: 1; }
.iss-row__date { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.iss-row__loc { display: flex; align-items: center; gap: 8px; min-width: 0; }
.iss-chip-b { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; flex: none; }
.iss-row__place { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iss-row__main { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.iss-row__title { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iss-row__cat { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; flex: none; }
.iss-row__urg { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.iss-row__urg[data-u="주의"] { color: var(--ink-2); }
.iss-row__urg[data-u="긴급"] { color: var(--red); }
.iss-row__done { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--accent-text); text-align: right; white-space: nowrap; }
.iss-row__who { font-size: 12px; color: var(--ink-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iss-recur-sm { font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; flex: none; white-space: nowrap; }

/* 태그 (상세 모달 · 테이블 공용) */
.iss-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.iss-urgtext { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--ink-3); }
.iss-urgtext[data-u="긴급"] { color: var(--red); }
.iss-tag--done { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* 구분: VOK(카카오 민원) · LKG(내부 셀프 확인) — 색상 구분 */
.iss-src { font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: .5px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid; }
.iss-src--vok { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); border-color: color-mix(in srgb, var(--amber) 42%, transparent); }
.iss-src--lkg { color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); border-color: color-mix(in srgb, var(--blue) 38%, transparent); }
.fld-note { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); margin-top: 2px; }

/* 목록(테이블) 뷰 */
.iss-table tbody tr { cursor: pointer; }
.iss-table tr.is-done { opacity: .5; }
.iss-td-title { font-weight: 600; }
.iss-empty { display: grid; place-items: center; min-height: 30vh; border: 1px dashed var(--line); border-radius: 16px; color: var(--ink-3); }

/* 상세 모달 */
.gmodal__card--wide { max-width: 620px; max-height: 88vh; overflow-y: auto; }
.issd-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.issd-head h3 { margin: 6px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -.4px; width: 100%; }
.issd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 22px; }
.issd-row { display: flex; flex-direction: column; gap: 3px; }
.issd-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); }
.issd-val { font-size: 13.5px; color: var(--ink); }
.issd-block { margin-top: 14px; }
.issd-block p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; white-space: pre-wrap; }
.issd-photo { margin-top: 14px; display: inline-block; }

/* 폼 확장 (textarea · 3열 · 체크박스) */
.fld textarea { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; color: var(--ink); font-size: 13px; font-family: inherit; outline: none; resize: vertical; transition: border-color .14s; }
.fld textarea:focus { border-color: var(--accent); }
.fld textarea::placeholder { color: var(--ink-3); }
.fld-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.fld-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.fld-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.fld-hint { font-family: var(--mono); font-size: 10.5px; color: var(--accent-text); margin-top: 2px; align-self: start; }
.fld-hint:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .iss-stats { grid-template-columns: repeat(3, 1fr); }
  .fld-row--3 { grid-template-columns: 1fr; }
  .issd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .iss-stats { grid-template-columns: repeat(2, 1fr); }
  .iss-row { grid-template-columns: 52px 1fr auto; gap: 10px; }
  .iss-row__main { grid-column: 1 / -1; }
  .iss-row__who { display: none; }
}

/* =========================================================
   CREW TRAINING (크루 교육 관리 — 4대 법정의무교육 이수)
   색상 바 없이 타이포·헤어라인 · 브랜드 액센트 포인트
   ========================================================= */
.edu-ovgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.edu-ov { border: 1px solid var(--line-soft); border-radius: var(--r); padding: 16px 18px; background: var(--card-bg); }
.edu-ov__name { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.edu-ov__val { display: block; margin-top: 10px; font-family: var(--mono); font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--ink); }
.edu-ov__val small { font-size: 12px; color: var(--ink-3); font-weight: 500; letter-spacing: 0; margin-left: 3px; }
.edu-ov__val.is-full { color: var(--accent-text); }

.edu-mtx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 26px 0 14px; }
.edu-mtx-head h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.edu-year {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 7px 12px; color: var(--ink); font-family: var(--mono); font-size: 12px; cursor: pointer; outline: none;
  transition: border-color .14s;
}
.edu-year:hover { border-color: var(--accent); }

.edu-wrap { overflow-x: auto; }
.edu-table { min-width: 680px; }
.edu-table th.edu-col { text-align: center; line-height: 1.25; }
.edu-table td { text-align: center; vertical-align: middle; }
.edu-table td.edu-name { text-align: left; white-space: nowrap; }
.edu-name b { font-weight: 700; }
.edu-name .t { display: block; color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; margin-top: 2px; }

.edu-cell { cursor: pointer; transition: background .12s; }
.edu-cell:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.edu-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.edu-chip--done { background: var(--accent); color: var(--accent-ink); }
.edu-chip--miss { background: transparent; color: var(--ink-3); border: 1px solid var(--line); }
.edu-cell-date { display: block; margin-top: 5px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.edu-empty { text-align: center !important; color: var(--ink-3); padding: 30px 12px !important; }
.edu-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.edu-hint b { color: var(--ink-2); }

@media (max-width: 900px) {
  .edu-ovgrid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   LOADING — 새싹 로더 + 스켈레톤 (시트 최초 로드 중)
   GIF 대신 CSS/SVG: 용량 0KB · 선명 · 다크/라이트 자동 대응
   ========================================================= */
.boot { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 0 26px; }
.sprout { width: 46px; height: 58px; overflow: visible; }
.sprout__stem {
  fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 32; stroke-dashoffset: 4;
  animation: sproutStem 1.8s ease-in-out infinite;
}
.sprout__leaf { fill: var(--accent); transform-box: fill-box; transform-origin: 50% 100%; opacity: .55; }
.sprout__leaf--l { animation: sproutLeafL 1.8s ease-in-out infinite; }
.sprout__leaf--r { animation: sproutLeafR 1.8s ease-in-out infinite .18s; }
@keyframes sproutStem { 0%, 100% { stroke-dashoffset: 6; } 50% { stroke-dashoffset: 0; } }
@keyframes sproutLeafL {
  0%, 100% { opacity: .5; transform: scale(.82) rotate(3deg); }
  50%      { opacity: 1;  transform: scale(1) rotate(-4deg); }
}
@keyframes sproutLeafR {
  0%, 100% { opacity: .5; transform: scale(.82) rotate(-3deg); }
  50%      { opacity: 1;  transform: scale(1) rotate(4deg); }
}
.boot__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-3);
  animation: bootPulse 1.8s ease-in-out infinite;
}
@keyframes bootPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.sk { background: linear-gradient(90deg, var(--panel-2) 25%, var(--line-soft) 37%, var(--panel-2) 63%); background-size: 400% 100%; animation: flShimmer 1.3s ease infinite; border-radius: 8px; }
.sk-card { height: 190px; border-radius: var(--r-lg); }
.sk-card--flat { height: 110px; border-radius: var(--r); }
.sk-rows { background: var(--card-bg); }
.sk-row { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.sk-row:last-child { border-bottom: none; }
.sk-line { height: 12px; border-radius: 6px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .sprout__stem, .sprout__leaf--l, .sprout__leaf--r, .boot__label, .sk { animation: none; }
  .sprout__leaf { opacity: .85; }
  .sprout__stem { stroke-dashoffset: 0; }
}

/* =========================================================
   SETTLEMENT (운영 정산 관리 — 벤토 그리드)
   크기가 다른 카드가 맞물리는 모듈형 · 라운드 · 색상 바 없음
   ========================================================= */
.stl-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.bento { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-bg); padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; }
.bento__lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.bento__num { font-family: var(--mono); font-weight: 800; letter-spacing: -1px; color: var(--ink); margin-top: 8px; line-height: 1; font-size: 24px; }
.bento__num small { font-size: 14px; color: var(--ink-3); font-weight: 500; margin-left: 2px; }
.bento__sub { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 10px; }
.bento--total { grid-column: 1 / 3; grid-row: 1 / 3; background: radial-gradient(130% 150% at 0% 0%, var(--today-glow), transparent 55%), var(--card-bg); }
.bento--total .bento__num { font-size: 40px; letter-spacing: -2px; color: var(--accent-text); }
.bento--total.is-filtered { cursor: pointer; }
.bento__num--sm { font-size: 21px; }
.bento--place { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.bento--place:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.bento--place.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bento--place.is-on .bento__lbl { color: var(--accent-text); }
.bento-bar { display: block; height: 5px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-top: 12px; }
.bento-bar__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s cubic-bezier(.2,.9,.3,1); }

.stl-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.stl-search { flex: 1; min-width: 200px; }

.stl-board { border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--card-bg); overflow-x: auto; box-shadow: var(--shadow); }
.stl-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 840px; }
.stl-table th { text-align: left; padding: 13px 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); font-weight: 500; border-bottom: 1px solid var(--line); background: var(--panel); white-space: nowrap; }
.stl-table th.stl-col-amt { text-align: right; }
.stl-table td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.stl-table tbody tr { cursor: pointer; transition: background .12s; }
.stl-table tbody tr:hover { background: var(--panel-2); }
.stl-table tr:last-child td { border-bottom: none; }
.stl-title { font-weight: 700; }
.stl-amt { text-align: right; font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.stl-stmt, .stl-photo { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--accent-text); }
.stl-stmt:hover, .stl-photo:hover { text-decoration: underline; }
.stl-empty { text-align: center !important; color: var(--ink-3); padding: 34px 12px !important; }

@media (max-width: 900px) {
  .stl-bento { grid-template-columns: repeat(2, 1fr); }
  .bento--total { grid-column: 1 / 3; grid-row: auto; }
}

/* =========================================================
   ENTRY GATE (입장 비밀번호)
   ========================================================= */
.gate { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.gate__card {
  width: 100%; max-width: 340px; text-align: center;
  background: radial-gradient(130% 130% at 50% 0%, var(--today-glow), transparent 55%), var(--card-bg);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 34px 28px; animation: pop .24s cubic-bezier(.2,.9,.3,1.2);
}
.gate__brand { display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 800; font-size: 20px; letter-spacing: -.6px; color: var(--ink); }
.gate__icon { width: 26px; height: 26px; border-radius: 7px; }
.gate__sub { color: var(--ink-3); font-size: 13px; margin: 12px 0 20px; }
.gate__input {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; color: var(--ink); font-size: 15px; text-align: center; outline: none;
  letter-spacing: 2px; transition: border-color .14s;
}
.gate__input:focus { border-color: var(--accent); }
.gate__input::placeholder { color: var(--ink-3); letter-spacing: normal; }
.gate__btn { width: 100%; margin-top: 12px; padding: 12px; }
.gate__err { color: var(--red); font-size: 12px; min-height: 16px; margin: 12px 0 0; }
.gate__card.shake { animation: gateShake .3s; }
@keyframes gateShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.side__lock { margin-left: auto; background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px; transition: transform .1s, opacity .12s; opacity: .7; }
.side__lock:hover { opacity: 1; transform: scale(1.12); }

/* toast */
.toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--shadow);
  padding: 11px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .3px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.toast.is-on { opacity: 1; transform: none; }
.toast--err { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); color: var(--red); }

/* 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; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .dash-grid, .split-2 { grid-template-columns: 1fr; }
  .wb-layout { grid-template-columns: 1fr; }
  .mcal { max-width: 340px; }
}
@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; }
  .search { display: none; }
  .page-head h2 { font-size: 26px; }
  .view { padding: 20px; }
}

/* ===== 월간 리뷰 보드 (카카오 × 링키지랩) ===== */
.mr-view {
  --mr-ease: cubic-bezier(.23, 1, .32, 1);
  --mr-line: var(--line);
}
/* 헤더 */
.mr-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.mr-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 2px;
  color: var(--ink-3); margin: 0 0 8px; display: flex; align-items: center; gap: 6px;
}
.mr-eyebrow span { color: var(--accent-text); font-weight: 800; }
.mr-title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.mr-lead { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; word-break: keep-all; }
@media (min-width: 768px) { .mr-lead { white-space: nowrap; } }
.mr-top__r { display: flex; align-items: center; gap: 8px; }
.mr-drive {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px;
  border: 1px solid var(--mr-line); border-radius: 999px; background: var(--panel);
  font-size: 12.5px; font-weight: 600; color: var(--ink); transition: border-color .16s var(--mr-ease), transform .16s var(--mr-ease); }
.mr-drive:hover { border-color: var(--accent); transform: translateY(-1px); }
.mr-drive__ic { font-family: var(--mono); font-weight: 800; color: var(--accent-text); }
.mr-new {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px;
  border: none; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 12.5px; font-weight: 800; cursor: pointer;
  transition: transform .16s var(--mr-ease), box-shadow .16s var(--mr-ease); }
.mr-new span { font-size: 14px; line-height: 1; }
.mr-new:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px var(--accent); }
.mr-new:active { transform: scale(.97); }

.mr-who {
  display: flex; align-items: center; gap: 8px; margin: 18px 0 22px;
  font-size: 12px; color: var(--ink-3); }
.mr-who b { color: var(--ink); font-weight: 700; }
.mr-who__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hue, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue, var(--accent)) 22%, transparent); flex: none; }

/* 게시판 = 좌측 타임라인 스파인 + 스레드 */
.mr-board { position: relative; }
.mr-empty {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 60px 20px; color: var(--ink-2);
  border: 1px dashed var(--mr-line); border-radius: 14px; }
.mr-empty__mark { font-family: var(--mono); font-size: 34px; font-weight: 800; color: var(--line); letter-spacing: -1px; }
.mr-empty p { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.mr-empty__sub { font-size: 12.5px; color: var(--ink-3); }

/* 스레드 한 건 */
.mr-post {
  position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 0;
  padding-bottom: 8px;
  animation: mrIn .5s var(--mr-ease) both; animation-delay: calc(var(--d, 0) * 70ms + 60ms); }
@keyframes mrIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 좌측 스파인 */
.mr-post__spine { position: relative; }
.mr-post__spine::before {
  content: ""; position: absolute; left: 5px; top: 0; bottom: -8px; width: 2px;
  background: linear-gradient(var(--mr-line), color-mix(in srgb, var(--mr-line) 30%, transparent)); }
.mr-post:last-child .mr-post__spine::before { bottom: auto; height: 34px; }
.mr-post__node {
  position: absolute; left: 0; top: 26px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg, var(--panel)); border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); z-index: 1; }

/* 우측 본문 */
.mr-post__main {
  border-bottom: 1px solid var(--mr-line); padding: 0 2px 26px; margin-bottom: 18px; }
.mr-post:last-child .mr-post__main { border-bottom: none; margin-bottom: 0; }

.mr-post__head { display: flex; align-items: center; gap: 14px; }
.mr-post__date { display: flex; align-items: baseline; gap: 5px; }
.mr-post__mo { font-family: var(--mono); font-size: 27px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; color: var(--ink); }
.mr-post__yr { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-3); }
.mr-post__meta { display: flex; align-items: center; gap: 6px 18px; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; margin-right: 4px; }
.mr-meet, .mr-att { display: inline-flex; align-items: center; gap: 6px; }
.mr-meet { flex: 0 0 auto; }
.mr-att { flex: 1 1 auto; min-width: 0; }
.mr-meet__ic, .mr-att__ic {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-3); padding: 2px 6px; border: 1px solid var(--mr-line); border-radius: 5px;
  flex: 0 0 auto; white-space: nowrap; word-break: keep-all; }
.mr-meet__in, .mr-att__in {
  background: transparent; border: none; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 3px 4px; border-radius: 5px; outline: none; transition: background .14s; min-width: 0; }
.mr-att__in { width: 100%; }
.mr-meet__in:hover, .mr-att__in:hover { background: var(--panel-2); }
.mr-meet__in:focus, .mr-att__in:focus { background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--accent); }
.mr-att__in::placeholder { color: var(--ink-3); }
.mr-post__ctl { flex: none; display: flex; align-items: center; gap: 4px; }
.mr-post__edit, .mr-post__del {
  flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--ink-3); cursor: pointer; font-size: 12px;
  opacity: 0; transition: opacity .16s, color .16s, border-color .16s; }
.mr-post:hover .mr-post__edit, .mr-post:hover .mr-post__del { opacity: 1; }
.mr-post__edit:hover { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mr-post__del:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }

/* 이슈 = 라벨 | 본문 가로 배치 */
.mr-issue { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; margin: 14px 0 4px; }
.mr-issue__lbl {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-3); padding-top: 4px; }
.mr-issue__val {
  font-size: 13.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word;
  padding: 3px 8px; margin: -3px -8px; border-radius: 7px; outline: none;
  transition: background .14s, box-shadow .14s; }
.mr-issue__val:hover { background: var(--panel-2); }
.mr-issue__val:focus { background: var(--panel-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.mr-issue__val:empty::before { content: attr(data-ph); color: var(--ink-3); }

/* 코멘트 스레드 */
.mr-thread { margin-top: 16px; padding-left: 52px; }
.mr-thread__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mr-thread__lbl { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #b39700; }
[data-theme="light"] .mr-thread__lbl { color: #8a7400; }
.mr-thread__n {
  font-family: var(--mono); font-size: 10px; font-weight: 800; min-width: 17px; text-align: center;
  padding: 1px 5px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--mr-line); }
.mr-thread__empty { margin: 0 0 10px; font-size: 12px; color: var(--ink-3); }

.mr-cmts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; }
.mr-cmt {
  padding: 7px 8px; border-radius: 9px;
  transition: background .14s; animation: mrIn .4s var(--mr-ease) both; }
.mr-cmt:hover { background: var(--panel-2); }
.mr-cmt__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--hue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue) 20%, transparent); }
.mr-cmt__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.mr-cmt__who { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.mr-cmt__at { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.mr-cmt__x {
  border: none; background: transparent; color: var(--ink-3); font-size: 10.5px; cursor: pointer;
  padding: 0; margin-left: auto; opacity: 0; transition: opacity .14s, color .14s; }
.mr-cmt:hover .mr-cmt__x { opacity: 1; }
.mr-cmt__x:hover { color: var(--red); }
.mr-cmt__text { font-size: 13px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; word-break: break-word;
  padding: 2px 6px; margin: 0 -6px; border-radius: 6px; outline: none; }
.mr-cmt__text.is-editable:hover { background: color-mix(in srgb, var(--panel) 60%, transparent); }
.mr-cmt__text:focus { background: var(--panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue, var(--accent)) 45%, transparent); }

/* 코멘트 작성기 */
.mr-compose { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 4px; }
.mr-compose__in {
  background: var(--panel-2); border: 1px solid var(--mr-line); border-radius: 999px;
  padding: 9px 14px; color: var(--ink); font: inherit; font-size: 12.5px; outline: none;
  transition: border-color .16s, box-shadow .16s; }
.mr-compose__in::placeholder { color: var(--ink-3); }
.mr-compose__in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.mr-compose__go {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 800;
  transition: transform .14s var(--mr-ease); }
.mr-compose__go:hover { transform: scale(1.06); }
.mr-compose__go:active { transform: scale(.94); }
.mr-compose__lock { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* ── 확인 하트 (제이미·엘리) ─────────────────────────── */
.mr-cmt__x { margin-left: 6px; }
.mr-heart {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  border: none; background: transparent; cursor: pointer; padding: 2px 5px; border-radius: 999px;
  color: var(--ink-3); line-height: 1; transition: background .14s, color .14s, transform .12s; }
.mr-heart svg { width: 14px; height: 14px; display: block; fill: none;
  stroke: currentColor; stroke-width: 1.9; transition: fill .18s, stroke .18s, transform .18s; }
.mr-heart__n { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: currentColor; min-width: 6px; }
.mr-heart:hover { background: color-mix(in srgb, #ff5a7a 16%, transparent); color: #ff5a7a; }
.mr-heart.is-on { color: #ff4d6d; }
.mr-heart.is-on svg { fill: #ff4d6d; stroke: #ff4d6d; }
.mr-heart.is-ro { cursor: default; }
.mr-heart.is-ro:hover { background: transparent; color: var(--ink-3); }
.mr-heart.is-on.is-ro { color: #ff4d6d; }
.mr-heart.is-pop svg { animation: heartPop .42s var(--mr-ease); }
@keyframes heartPop {
  0% { transform: scale(1); } 30% { transform: scale(1.42) rotate(-8deg); }
  55% { transform: scale(.9); } 100% { transform: scale(1); } }

/* ── 회의록 스튜디오 ─────────────────────────────────── */
/* 스레드 헤더의 작은 회의록 버튼 */
.mm-btn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--mr-line);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent); color: var(--ink-2);
  font-size: 11.5px; font-weight: 700; line-height: 1;
  transition: background .14s, border-color .14s, color .14s, transform .12s; }
.mm-btn:hover { background: var(--panel-2); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--mr-line)); }
.mm-btn:active { transform: scale(.96); }
.mm-btn__ic { font-size: 12px; }
.mm-btn__t { letter-spacing: .2px; }
.mm-btn__n {
  font-family: var(--mono); font-size: 10px; font-weight: 800; min-width: 15px; text-align: center;
  padding: 1px 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

/* 모달 */
.mm-modal .gmodal__head { margin-bottom: 14px; }
.mm-modal__sub { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-3); margin-left: 6px; }
.mm-modal .mm-list { max-height: none; }

.mm-studio {
  border: 1px solid var(--mr-line); border-radius: 13px; padding: 12px;
  background: color-mix(in srgb, var(--panel) 70%, transparent); }
.mm-studio__title {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--mr-line);
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; padding: 4px 2px 8px; outline: none; }
.mm-studio__title:focus { border-color: var(--accent); }
.mm-studio__ta {
  width: 100%; margin-top: 10px; resize: vertical; min-height: 96px;
  background: var(--panel-2); border: 1px solid var(--mr-line); border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 13px; line-height: 1.6; padding: 10px 12px; outline: none;
  transition: border-color .16s, box-shadow .16s; }
.mm-studio__ta:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.mm-studio__ta::placeholder { color: var(--ink-3); }
.mm-studio__bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mm-studio__hint { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.mm-studio__save {
  margin-left: auto; border: none; cursor: pointer; border-radius: 999px; padding: 8px 16px;
  background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 800;
  transition: transform .14s var(--mr-ease), filter .14s; }
.mm-studio__save:hover { transform: translateY(-1px); filter: brightness(1.05); }
.mm-studio__save:active { transform: scale(.96); }

.mm-prev { margin-top: 12px; border-top: 1px dashed var(--mr-line); padding-top: 12px; animation: mrIn .3s var(--mr-ease) both; }
.mm-prev__cap { margin: 0 0 8px; font-size: 10.5px; font-family: var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; }
.mm-prev__sec { margin-bottom: 10px; }
.mm-prev__h { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--ink); }
.mm-prev__h em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-left: 4px; }
.mm-prev__sec ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.mm-prev__sec li { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.mm-prev__sec.is-dec li::marker { color: #35c759; }
.mm-prev__sec.is-act li::marker { color: var(--accent); }

.mm-list { margin-top: 14px; display: grid; gap: 10px; }
.mm-none, .mm-empty { margin: 4px 0; font-size: 12px; color: var(--ink-3); }
.mm-card {
  border: 1px solid var(--mr-line); border-radius: 12px; padding: 10px 12px;
  background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.mm-card.is-open { border-color: color-mix(in srgb, var(--accent) 40%, var(--mr-line)); box-shadow: 0 6px 20px -14px rgba(0,0,0,.5); }
.mm-card__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm-card__toggle { display: flex; align-items: center; gap: 8px; border: none; background: transparent; cursor: pointer; padding: 0; color: var(--ink); }
.mm-card__title { font-size: 13.5px; font-weight: 700; }
.mm-card__chev { color: var(--ink-3); font-size: 11px; transition: transform .2s; }
.mm-card.is-open .mm-card__chev { transform: rotate(180deg); }
.mm-card__chips { display: flex; gap: 5px; margin-left: auto; flex-wrap: wrap; }
.mm-chip { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.mm-chip--sum { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.mm-chip--dec { background: color-mix(in srgb, #35c759 16%, transparent); color: #2ba24a; }
.mm-chip--act { background: color-mix(in srgb, #ff9f0a 18%, transparent); color: #c77b00; }
.mm-card__at { margin: 6px 0 0; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.mm-card__body { margin-top: 10px; border-top: 1px solid var(--mr-line); padding-top: 10px; }
.mm-sec { margin-bottom: 10px; }
.mm-sec__h { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; color: var(--ink); }
.mm-sec ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.mm-sec li { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.mm-sec--act li::marker { color: #ff9f0a; }
.mm-raw { margin: 8px 0; }
.mm-raw summary { cursor: pointer; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.mm-raw pre { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 12px; line-height: 1.6;
  color: var(--ink-2); background: var(--panel-2); border-radius: 8px; padding: 10px 12px; max-height: 240px; overflow: auto; }
.mm-card__act { display: flex; gap: 8px; margin-top: 8px; }
.mm-mini {
  border: 1px solid var(--mr-line); background: transparent; color: var(--ink-2); cursor: pointer;
  font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; transition: background .14s, color .14s, border-color .14s; }
.mm-mini:hover { background: var(--panel-2); color: var(--ink); }
.mm-mini--del:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--mr-line)); }
@media (max-width: 640px) {
  .mm-btn__t { display: none; }
  .mm-studio__save { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-heart.is-pop svg, .mm-prev { animation: none; }
  .mm-studio__save, .mm-btn, .mr-heart { transition: none; }
}

@media (max-width: 640px) {
  .mr-title { font-size: 24px; }
  .mr-post { grid-template-columns: 54px 1fr; }
  .mr-thread { padding-left: 0; }
  .mr-issue { grid-template-columns: 44px 1fr; gap: 8px; }
  .mr-post__head { flex-wrap: wrap; }
  .mr-post__meta { flex-wrap: wrap; }
  .mr-att { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-post, .mr-cmt { animation: none; }
  .mr-drive, .mr-new, .mr-compose__go { transition: none; }
}

/* ===== 월간 리포트 (자동 산출) ===== */
.rp-block .card-head { flex-wrap: wrap; }
.rp-sumlist { margin: 0; padding-left: 18px; display: grid; gap: 7px; font-size: 13.5px; line-height: 1.6; color: var(--ink); word-break: keep-all; }
.rp-sumlist li::marker { color: var(--accent-text); }
.rp-block { margin-bottom: 14px; }
.rp-block .card-head { margin-bottom: 14px; }
.rp-block .table-wrap { overflow-x: auto; }
.rp-table { min-width: 720px; }
.rp-table td.num, .rp-table th.num { text-align: right; }
.rp-table tbody tr { cursor: pointer; }
.rp-table.iss-table tr.is-done td { color: var(--ink-3); }
.rp-table tfoot td { padding: 13px 16px; font-weight: 800; border-top: 1px solid var(--line); background: var(--panel); }
.rp-none { margin: 4px 0; font-size: 12.5px; color: var(--ink-3); }
.rp-lines { display: grid; gap: 8px; font-size: 12.5px; }
.rp-lines p { margin: 0; line-height: 1.5; color: var(--ink-2); }
.rp-lines b { color: var(--ink); }

/* 월간리포트 — 시트형 월별 비교표 (관리 페이지 크루 현황표와 같은 굵은 머리줄) */
.rp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.rp-title { margin: 6px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.8px; line-height: 1.15; }
.rp-head .mr-lead { margin-top: 8px; }
.rp-head__r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rp-head__r .btn { border-radius: 999px; }
.rp-mnav { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.rp-thismonth { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.rp-thismonth:hover { color: var(--ink); border-color: var(--ink-3); }
.rp-print { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; }
.rp-sheet-card { padding: 0; overflow: hidden; margin-bottom: 14px; }
.rp-sheet-card > .card-head { padding: 18px 22px 10px; margin: 0; flex-wrap: wrap; }
.rp-sheet-wrap { overflow-x: auto; }
.rp-sheet { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.rp-sheet th { padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 800; color: var(--ink-3); border-bottom: 1.5px solid var(--ink); white-space: nowrap; }
.rp-sheet td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.rp-sheet th:first-child, .rp-sheet td:first-child { padding-left: 22px; }
.rp-sheet th:last-child, .rp-sheet td:last-child { padding-right: 22px; }
.rp-sheet .num { text-align: right; }
.rp-sheet td:first-child { font-weight: 700; }
.rp-sheet td small { margin-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.rp-sheet tr.is-strong td { font-weight: 800; }
.rp-sheet tr.is-minor td { color: var(--ink-2); font-size: 12.5px; }
.rp-sheet tr.is-minor td:first-child { padding-left: 38px; font-weight: 500; }
.rp-sheet td.is-zero { color: var(--ink-3); }
.rp-sheet .is-cur { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--ink); font-weight: 800; }
.rp-sheet th.is-cur { border-radius: 10px 10px 0 0; }
.rp-sheet__grp td { background: var(--panel-2); font-size: 11.5px; font-weight: 800; color: var(--ink-2); padding-top: 7px; padding-bottom: 7px; }
.rp-dl { font-size: 11.5px; font-weight: 800; color: var(--ink-3); }
.rp-dl.is-bad { color: var(--red); }
.rp-dl.is-good { color: var(--green); }
.rp-cmt { display: grid; grid-template-columns: 140px 1fr; border-top: 1px solid var(--line); }
.rp-cmt__l { margin: 0; padding: 16px 22px; font-size: 12px; font-weight: 800; color: var(--ink-2); border-right: 1px solid var(--line-soft); }
.rp-cmt__l small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500; color: var(--ink-3); }
.rp-cmt .rp-sumlist { padding: 14px 22px 16px 40px; }
@media (max-width: 720px) {
  .rp-title { font-size: 22px; }
  .rp-head .mr-lead { white-space: normal; }
  .rp-cmt { grid-template-columns: 1fr; }
  .rp-cmt__l { border-right: 0; padding-bottom: 0; }
}

/* A4 요약 한 장 — 화면에선 숨김, 인쇄 때만 (210×297mm = 794×1123px) */
.rp-a4 { display: none; }
.rp-a4.is-measure { display: flex; position: fixed; left: -9999px; top: 0; }
.rp-a4 {
  width: 794px; height: 1123px; overflow: hidden; flex-direction: column; gap: 14px;
  padding: 40px 46px 30px; background: #fff; color: #16160f; font-size: 10.5px; line-height: 1.45;
  --ink: #16160f; --ink-2: #55554d; --ink-3: #8a8a80; --line: #dcddd6; --line-soft: #ecede7; --panel-2: #f3f4ef;
  --accent: #bff000; --red: #dc2f28; --green: #16a34a;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rp-a4 > * { flex-shrink: 0; }
.rp-a4 { page: rpA4; }
@page rpA4 { size: A4; margin: 0; }
.rp-a4__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.rp-a4__eb { margin: 0; font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; color: var(--ink-3); }
.rp-a4__ttl { margin: 4px 0 0; font-size: 24px; font-weight: 900; letter-spacing: -.7px; line-height: 1.1; }
.rp-a4__meta { margin: 0; font-size: 9.5px; color: var(--ink-3); text-align: right; line-height: 1.5; }
.rp-a4__h { margin: 0 0 6px; font-size: 11px; font-weight: 900; }
.rp-a4__h small { margin-left: 6px; font-size: 9.5px; font-weight: 700; color: var(--ink-3); }
.rp-a4 .rp-sheet { min-width: 0; font-size: 10px; }
.rp-a4 .rp-sheet th { padding: 4px 6px; font-size: 9px; border-bottom-width: 1.2px; }
.rp-a4 .rp-sheet td { padding: 3px 6px; }
.rp-a4 .rp-sheet th:first-child, .rp-a4 .rp-sheet td:first-child { padding-left: 0; }
.rp-a4 .rp-sheet th:last-child, .rp-a4 .rp-sheet td:last-child { padding-right: 0; }
.rp-a4 .rp-sheet tr.is-minor td { font-size: 9.5px; }
.rp-a4 .rp-sheet tr.is-minor td:first-child { padding-left: 12px; }
.rp-a4 .rp-sheet .is-cur { background: #ecffad; }
.rp-a4 .rp-sheet__grp td { padding: 3px 6px; font-size: 9px; }
.rp-a4 .rp-sheet__grp td:first-child { padding-left: 6px; }
.rp-a4 .rp-dl { font-size: 9.5px; }
.rp-a4 .rp-sheet td small { font-size: 8.5px; margin-left: 4px; }
.rp-a4__cmt { background: var(--panel-2); border-radius: 10px; padding: 10px 14px; }
.rp-a4__cmt ul { margin: 0; padding-left: 14px; display: grid; gap: 2px; font-size: 10.5px; line-height: 1.55; }
.rp-a4__t { width: 100%; border-collapse: collapse; font-size: 9.5px; table-layout: auto; }
.rp-a4__t th { text-align: left; padding: 4px 5px; font-size: 9px; font-weight: 800; color: var(--ink-3); border-bottom: 1.2px solid var(--ink); white-space: nowrap; }
.rp-a4__t td { padding: 3.5px 5px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.rp-a4__t td.w { white-space: normal; width: 100%; }
.rp-a4__t th:first-child, .rp-a4__t td:first-child { padding-left: 0; }
.rp-a4__t th:last-child, .rp-a4__t td:last-child { padding-right: 0; }
.rp-a4__t .num { text-align: right; }
.rp-a4__t tr.is-done td { color: var(--ink-3); }
.rp-a4__t tfoot td { font-weight: 900; border-top: 1.2px solid var(--ink); border-bottom: 0; }
.rp-a4__vok { display: inline-block; padding: 0 5px; border-radius: 4px; background: #fee500; color: #3c1e1e; font-size: 8.5px; }
.rp-a4__more { margin: 4px 0 0; font-size: 9.5px; font-weight: 700; color: var(--ink-3); }
.rp-a4__more:empty { display: none; }
.rp-a4__none { margin: 0; font-size: 10px; color: var(--ink-3); }
.rp-a4__foot { margin-top: auto; display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); font-size: 9px; color: var(--ink-3); }

/* 인쇄 · PDF — 리포트 화면이면 A4 요약 한 장만 */
@media print {
  .side, .topbar, .gmodal { display: none !important; }
  .layout, .main { display: block !important; margin: 0 !important; }
  body { background: #fff; }
  .view { padding: 0 !important; }
  .dash-card, .iss-stat, .table-wrap { break-inside: avoid; }
}
@media print {
  html:has(.rp-a4) { background: #fff !important; }
  .rp-view > :not(.rp-a4) { display: none !important; }
  .rp-a4, .rp-a4.is-measure { display: flex !important; position: static; }
}

/* 등록 폼 */
.sw-kindsel { display: flex; gap: 8px; }
.sw-kindsel label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); font-size: 13px; font-weight: 600; cursor: pointer; }
.sw-kindsel label:has(input:checked) { border-color: var(--accent); color: var(--accent-text); }
.sw-kindsel input { accent-color: var(--accent); }
.sw-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sw-photos__h { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px; color: var(--ink-3); margin-bottom: 6px; }
.sw-photos__h small { margin-left: 4px; }
.sw-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-slot { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); }
.sw-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-slot em { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 9px; text-align: center; background: rgba(0,0,0,.6); color: #fff; padding: 2px 0; }
.sw-slot button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.sw-slot--add { display: grid; place-items: center; border-style: dashed; color: var(--ink-3); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.sw-slot--add:hover { border-color: var(--accent); color: var(--ink); }
.sw-slot--add input { display: none; }
.sw-linkrow { display: flex; gap: 6px; }
.sw-linkrow input { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .sw-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sw-photos, .sw-strips { grid-template-columns: 1fr; }
  .sw-linkrow { flex-wrap: wrap; }
  .sw-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-card { transition: none; }
}
.fld[hidden] { display: none; }

/* ===== 교체 현황 — 게임즈 가든과 같은 레이아웃 (카드 + 우측 상세 패널) ===== */
.gg-view, .gg-flow, .gg-zoom {
  --photo-bg: #18191a; --gg-r: 12px; --gg-rl: 18px;
  --ease-out: cubic-bezier(.23,1,.32,1); --ease-in: cubic-bezier(.55,.06,.68,.19);
}
:root[data-theme="light"] .gg-view, :root[data-theme="light"] .gg-flow { --photo-bg: #e6e9df; }
.gg-view { padding: 0; max-width: none; }
.gg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 460px; min-height: calc(100vh - 64px); }
.gg-main { min-width: 0; padding: 22px 28px 60px; display: flex; flex-direction: column; gap: 22px; }
.gg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gg-head h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; }
.gg-head p { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; }
.gg-rec { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 800; padding: 10px 16px; cursor: pointer; transition: transform .12s ease-out; }
.gg-rec:active { transform: scale(.97); }
.gg-rec svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }

.gg-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--gg-rl); margin: 0; }
.gg-summary > div { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gg-summary > div + div { border-left: 1px solid var(--line-soft); }
.gg-summary dt { font-size: 12px; color: var(--ink-3); }
.gg-summary dd { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.gg-summary dd small { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-left: 3px; letter-spacing: 0; }
.gg-summary .sub { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gg-seg { position: relative; display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--panel-2); border-radius: 999px; overflow-x: auto; max-width: 100%; scrollbar-width: none; align-self: flex-start; }
.gg-seg::-webkit-scrollbar { display: none; }
.gg-seg button { position: relative; z-index: 1; border: 0; background: none; padding: 7px 13px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: color .2s ease; }
.gg-seg button[aria-pressed="true"] { color: var(--accent-ink); }
.gg-seg .yr { position: relative; z-index: 1; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: var(--ink-3); padding: 0 4px 0 10px; }
.gg-pill { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; border-radius: 999px; background: var(--accent); transition: transform .32s var(--ease-out), width .32s var(--ease-out); }

.gg-months { display: flex; flex-direction: column; gap: 30px; }
.gg-month { display: flex; flex-direction: column; gap: 12px; }
.gg-month__h { display: flex; align-items: baseline; gap: 10px; }
.gg-month__h h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.gg-month__h span { font-size: 12.5px; color: var(--ink-3); }
.gg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
@keyframes ggRise { from { opacity: 0; transform: translateY(10px); } }
.gg-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--gg-rl); overflow: hidden; transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .15s ease; animation: ggRise .42s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.gg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gg-card:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.gg-card[aria-selected="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.gg-ph, .gg-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--panel); }
.gg-half { position: relative; aspect-ratio: 3 / 4; background: var(--photo-bg); overflow: hidden; }
.gg-half > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.gg-card:hover .gg-half img { transform: scale(1.04); }
.gg-lab { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 3px 8px; border-radius: 999px; background: rgba(10,10,11,.58); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; backdrop-filter: blur(6px); }
.gg-half.after .gg-lab { background: var(--accent); color: var(--accent-ink); }
.gg-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink-3); font-size: 11px; text-align: center; padding: 12px; }
.gg-empty svg, .gg-none svg, .gg-detail__none svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.gg-seam { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.18); z-index: 2; }
.gg-seam svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2.4; }
.gg-cg { display: grid; gap: 2px; background: var(--panel); }
.gg-cg i { position: relative; overflow: hidden; background: var(--photo-bg); min-height: 0; }
.gg-cg i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gg-cg2 { grid-template: 1fr 1fr / 1fr; }
.gg-cg3 { grid-template: 2fr 1fr / 1fr 1fr; } .gg-cg3 i:first-child { grid-column: 1 / 3; }
.gg-cg4 { grid-template: 1fr 1fr / 1fr 1fr; }
.gg-cg5 { grid-template: 2fr 1fr / 1fr 1fr 1fr; } .gg-cg5 i:first-child { grid-column: 1 / 4; }
.gg-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,10,11,.5); color: #fff; font-size: 15px; font-weight: 800; }
.gg-card__b { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 8px; }
.gg-card__t { display: flex; align-items: center; gap: 8px; }
.gg-card__t b { font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-card__f { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.gg-card__f > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-when { font-weight: 700; color: var(--ink); white-space: nowrap; }
.gg-kind { font-size: 11px; font-weight: 700; color: var(--ink-2); background: var(--panel-2); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.gg-kind--swap { color: var(--accent-ink); background: var(--accent); }
.gg-badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent); background: color-mix(in srgb, var(--amber) 12%, var(--panel)); }
.gg-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.gg-none { display: grid; justify-items: center; gap: 8px; padding: 56px 20px; border: 1px dashed var(--line); border-radius: var(--gg-rl); color: var(--ink-3); text-align: center; }
.gg-none p { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.gg-none span { font-size: 12.5px; }

/* 우측 상세 패널 */
.gg-detail { background: var(--panel); border-left: 1px solid var(--line-soft); position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
.gg-detail__in { padding: 20px 22px 40px; display: flex; flex-direction: column; gap: 20px; }
@keyframes ggDIn { from { opacity: 0; transform: translateX(12px); } }
.gg-detail__in.swap-in { animation: ggDIn .3s var(--ease-out); }
.gg-detail__none { height: 100%; align-items: center; justify-content: center; text-align: center; color: var(--ink-3); }
.gg-detail__none p { margin: 0; font-size: 13px; line-height: 1.6; }
.gg-dtop { display: flex; align-items: flex-start; gap: 10px; }
.gg-dtop h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.4px; line-height: 1.25; }
.gg-dtop p { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; }
.gg-dclose { margin-left: auto; display: none; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; font-size: 20px; line-height: 1; }
.gg-pair { gap: 4px; border-radius: var(--gg-rl); overflow: hidden; }
.gg-pair .gg-lab { font-size: 11.5px; padding: 4px 10px; left: 10px; bottom: 10px; }
.gg-pair .gg-seam { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.gg-bigpair .gg-half > img { cursor: zoom-in; }
.gg-mode { display: flex; gap: 2px; padding: 3px; background: var(--panel-2); border-radius: 999px; align-self: flex-start; margin-bottom: -8px; }
.gg-mode button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: background .2s ease, color .2s ease; }
.gg-mode button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.gg-compare { position: relative; aspect-ratio: 4 / 5; border-radius: var(--gg-rl); overflow: hidden; background: var(--photo-bg); user-select: none; touch-action: pan-y; --pos: 50%; }
.gg-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gg-compare .b-img { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.gg-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none; }
.gg-knob { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.3); display: grid; place-items: center; }
.gg-knob svg { width: 18px; height: 18px; stroke: #16160f; fill: none; stroke-width: 2.2; }
.gg-compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.gg-clab { position: absolute; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(10,10,11,.55); color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
.gg-clab.l { left: 12px; } .gg-clab.r { right: 12px; }
.gg-strips { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }
.gg-strip { display: flex; gap: 4px; min-width: 0; }
.gg-strip button { flex: 1 1 0; max-width: 20%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: .6; outline: 2px solid transparent; outline-offset: -2px; background: var(--photo-bg); }
.gg-strip button.on { opacity: 1; outline-color: var(--ink); }
.gg-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; background: var(--panel-2); border-radius: var(--gg-r); }
.gg-steps li { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gg-steps li + li { border-left: 1px solid var(--line); }
.gg-steps small { font-size: 11.5px; color: var(--ink-3); }
.gg-steps b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.gg-steps .now b { color: var(--accent-text); }
.gg-kv { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13.5px; }
.gg-kv dt { color: var(--ink-3); }
.gg-kv dd { margin: 0; }
.gg-note { font-size: 13.5px; color: var(--ink-2); background: var(--panel-2); border-radius: var(--gg-r); padding: 12px 14px; line-height: 1.55; }
.gg-acts { display: flex; flex-direction: column; gap: 8px; }
.gg-approve, .gg-edit, .gg-del { font: inherit; font-size: 13.5px; font-weight: 700; border-radius: var(--gg-r); padding: 12px; cursor: pointer; }
.gg-approve { border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.gg-edit { border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); }
.gg-del { border: 1.5px solid color-mix(in srgb, var(--red) 40%, var(--line)); background: none; color: var(--red); }
.gg-scrim { display: none; }
.gg-zoom { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.85); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.gg-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }

/* 교체 기록하기 (전체화면 단계형) */
@keyframes ggFIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes ggStep { from { opacity: 0; transform: translateX(18px); } }
@keyframes ggPop { from { transform: scale(.6); opacity: 0; } }
.gg-flow { position: fixed; inset: 0; z-index: 260; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; animation: ggFIn .3s var(--ease-out); }
.gg-flow[hidden] { display: none; }
.gg-flow button { font-family: inherit; color: inherit; }
.gg-ftop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; max-width: 720px; width: 100%; margin: 0 auto; }
.gg-ftop .back, .gg-ftop .x { min-width: 56px; height: 56px; border-radius: 16px; border: 2px solid var(--line); background: var(--panel); font-size: 17px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; }
.gg-ftop .back svg, .gg-ftop .x svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.gg-ftop .back[hidden] { display: none; }
.gg-ftop .dots { flex: 1; display: flex; gap: 6px; justify-content: center; }
.gg-ftop .dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--line); transition: background .2s ease, transform .2s var(--ease-out); }
.gg-ftop .dots i.on { background: var(--accent-text); transform: scale(1.15); }
.gg-ftop .dots i.done { background: var(--ink-3); }
.gg-fbody { flex: 1; overflow-y: auto; padding: 8px 16px 32px; }
.gg-fstep { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; animation: ggStep .28s var(--ease-out); }
.gg-fstep h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.5px; line-height: 1.25; }
.gg-fstep h2:focus { outline: none; }
.gg-fstep .hint { margin: -12px 0 0; font-size: 18px; color: var(--ink-2); }
.gg-fstep .center { text-align: center; }
.gg-bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gg-bgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gg-bigbtn { min-height: 96px; border: 3px solid var(--line); background: var(--panel); border-radius: 20px; font-size: 24px; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; text-align: center; transition: transform .12s ease-out, border-color .15s ease; }
.gg-bigbtn.zone { font-size: 19px; word-break: keep-all; }
.gg-bigbtn:active { transform: scale(.97); }
.gg-bigbtn:hover { border-color: var(--ink-3); }
.gg-bigbtn small { font-size: 15px; font-weight: 400; color: var(--ink-2); }
.gg-bigbtn svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.gg-bigbtn.yes { border-color: var(--accent-text); }
.gg-bigbtn.add { border-style: dashed; }
.gg-bigbtn.why { font-size: 20px; }
.gg-bigbtn .q { font-size: 30px; color: var(--ink-3); }
.gg-plant { border: 3px solid var(--line); background: var(--panel); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.gg-plantpick { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; transition: transform .12s ease-out; }
.gg-plantpick:active { transform: scale(.97); }
.gg-plantpick img, .gg-plantpick .noimg { width: 100%; aspect-ratio: 1; object-fit: cover; display: grid; place-items: center; background: var(--photo-bg); color: var(--ink-3); font-size: 44px; font-weight: 800; }
.gg-plantpick .pn { padding: 10px 8px 12px; font-size: 19px; font-weight: 800; text-align: center; line-height: 1.25; }
.gg-addtile { min-height: 160px; border: 3px dashed var(--ink-3); background: transparent; border-radius: 20px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 19px; font-weight: 800; }
.gg-addtile svg { width: 44px; height: 44px; stroke: currentColor; fill: none; stroke-width: 2; }
.gg-addtile b { font-size: 40px; color: var(--ink-3); }
.gg-addtile.quiet { border-style: solid; border-color: var(--line); background: var(--panel); }
.gg-pick2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gg-pickbtn { position: relative; min-height: 150px; border: 3px dashed var(--ink-3); background: var(--panel); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 20px; font-weight: 800; text-align: center; cursor: pointer; padding: 12px; transition: transform .12s ease-out, border-color .15s ease; }
.gg-pickbtn:active { transform: scale(.97); }
.gg-pickbtn:hover { border-color: var(--ink); }
.gg-pickbtn svg { width: 48px; height: 48px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.gg-pickbtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gg-shots + .hint + .gg-pick2 .gg-pickbtn { min-height: 110px; font-size: 18px; }
.gg-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gg-shotth { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--photo-bg); }
.gg-shotth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gg-shotth .rm { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(10,10,11,.65); color: #fff !important; font-size: 22px; cursor: pointer; }
.gg-shotth .cover { position: absolute; left: 8px; bottom: 8px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.gg-shot img { width: 100%; max-height: 40vh; object-fit: contain; border-radius: 20px; background: var(--photo-bg); display: block; }
.gg-primary { min-height: 72px; border: 0; border-radius: 20px; background: var(--accent); color: var(--accent-ink) !important; font-size: 24px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform .12s ease-out; }
.gg-primary:active { transform: scale(.98); }
.gg-primary[disabled] { opacity: .35; cursor: default; }
.gg-primary svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.gg-ghost { min-height: 60px; border: 2px solid var(--line); border-radius: 18px; background: var(--panel); font-size: 19px; font-weight: 700; cursor: pointer; }
.gg-bigin { min-height: 72px; border: 3px solid var(--line); border-radius: 20px; background: var(--panel); color: var(--ink); font: inherit; font-size: 22px; font-weight: 700; padding: 0 20px; outline: none; }
.gg-bigin:focus { border-color: var(--accent-text); }
.gg-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.gg-keys .key { min-height: 52px; padding: 0 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); font-size: 17px; font-weight: 700; cursor: pointer; }
.gg-keys .key.on { border-color: var(--accent-text); }
.gg-recap { display: flex; flex-direction: column; gap: 12px; background: var(--panel); border-radius: 22px; padding: 16px; border: 2px solid var(--line); }
.gg-recap .gg-lab { font-size: 15px; padding: 6px 12px; }
.gg-recap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gg-recap li { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 800; }
.gg-recap li > span { font-size: 16px; font-weight: 400; color: var(--ink-2); min-width: 64px; }
.gg-datepick { position: relative; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gg-datepick .date-chg { font: inherit; font-size: 14px; font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 6px 12px; border: none; border-radius: 999px; cursor: pointer; }
/* 달력은 버튼이 showPicker 로 연다 — 입력칸은 버튼 아래에 숨겨 둔다(달력 위치 기준) */
.gg-datepick input { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; font-size: 16px; }
.gg-donemark { width: 120px; height: 120px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; margin: 20px auto 0; animation: ggPop .45s var(--ease-out); }
.gg-donemark svg { width: 64px; height: 64px; stroke: var(--accent-ink); fill: none; stroke-width: 3; }

@media (max-width: 1440px) {
  .gg-layout { grid-template-columns: minmax(0, 1fr); }
  .gg-detail { position: fixed; top: 0; right: 0; bottom: 0; height: auto; width: min(460px, 100%); z-index: 240; box-shadow: var(--shadow); transform: translateX(100%); transition: transform .28s var(--ease-out); visibility: hidden; }
  .gg-detail.open { transform: none; visibility: visible; }
  .gg-dclose { display: block; }
  .gg-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 239; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  .gg-scrim.on { opacity: 1; pointer-events: auto; }
}
@media (max-width: 860px) {
  .gg-main { padding: 14px 16px 40px; gap: 18px; }
  .gg-head h1 { font-size: 24px; }
  .gg-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gg-summary > div { padding: 12px 14px; gap: 2px; }
  .gg-summary dd { font-size: 20px; }
  .gg-summary > div:nth-child(3) { border-left: 0; }
  .gg-summary > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .gg-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gg-card:hover { transform: none; box-shadow: none; }
  .gg-fstep h2 { font-size: 26px; }
  .gg-bgrid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gg-detail__in { padding: 16px 16px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .gg-card, .gg-detail__in.swap-in, .gg-flow, .gg-fstep { animation: none; }
}

/* =========================================================
   가드너 현장 기록 (사이드바 · 게임즈 가든과 같은 버튼)
   ========================================================= */
.nav__item--sub { padding-left: 26px; font-size: 13px; }
.nav__item--sub::after { content: ""; position: absolute; left: 14px; top: 50%; width: 6px; height: 1px; background: var(--ink-3); }
.fbtn { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; align-items: center; gap: 9px; padding: 10px 10px 10px 9px; border-radius: 14px; transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1); }
.fbtn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20,22,10,.16); }
.fbtn:active { transform: scale(.98); }
.fbtn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.fbtn .fi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.fbtn .fi svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.fbtn .ft { display: flex; flex-direction: column; min-width: 0; }
.fbtn .ft b { font-size: 14px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; }
.fbtn .ft small { font-size: 11px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbtn .fa { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; transition: transform .2s cubic-bezier(.23,1,.32,1); }
.fbtn:hover .fa { transform: translateX(3px); }
.fbtn--swap { background: var(--accent); color: var(--accent-ink); }
.fbtn--swap .fi { background: rgba(20,22,10,.1); }
.fbtn--care { background: var(--ink); color: var(--bg); }
.fbtn--care .fi { background: color-mix(in srgb, var(--bg) 14%, transparent); }
.fbtn--big { grid-template-columns: 64px minmax(0, 1fr) 26px; gap: 16px; padding: 22px 20px; border-radius: 22px; min-height: 120px; }
.fbtn--big .fi { width: 64px; height: 64px; border-radius: 18px; }
.fbtn--big .fi svg { width: 34px; height: 34px; }
.fbtn--big .ft b { font-size: 24px; }
.fbtn--big .ft small { font-size: 15px; white-space: normal; }
.fbtn--big .fa { width: 24px; height: 24px; }

/* =========================================================
   체감온도기록
   ========================================================= */
.ht-entry { display: grid; grid-template-columns: minmax(0, 520px); margin-bottom: 18px; }
.ht-entry .fbtn--care { background: var(--accent); color: var(--accent-ink); }
.ht-entry .fbtn--care .fi { background: rgba(20,22,10,.1); }
.ht-sub { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; word-break: keep-all; }
/* 단계 색 — 숫자·태그 글자색만 (색 바 없음) */
.ht-lv--ok { --lv: var(--green); } .ht-lv--watch { --lv: var(--blue); } .ht-lv--caution { --lv: var(--amber); }
.ht-lv--warn { --lv: #f07c1e; } .ht-lv--danger { --lv: var(--red); } .ht-lv--none { --lv: var(--ink-3); }
.ht-tag { display: inline-block; font-size: 11.5px; font-weight: 800; color: var(--lv); border: 1px solid color-mix(in srgb, var(--lv) 45%, transparent); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ht-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ht-cal__w { font-size: 11px; font-weight: 700; color: var(--ink-3); text-align: center; padding: 4px 0; }
.ht-cal__d { min-height: 86px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; background: var(--card-bg); min-width: 0; }
.ht-cal__d.is-blank { border: 0; background: transparent; }
.ht-cal__d.is-off { background: var(--panel-2); }
.ht-cal__d.is-today { border-color: var(--accent-text); }
.ht-cal__top { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.ht-cal__top b { font-size: 13px; }
.ht-cal__h { font-size: 10px; font-weight: 700; color: var(--red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-cal__w.is-red, .ht-cal__d.is-red .ht-cal__top b { color: var(--red); }
.ht-cal__w.is-sat, .ht-cal__d.is-sat .ht-cal__top b { color: var(--blue); }
.ht-cal__v { font-family: var(--mono); font-size: 20px; font-weight: 800; color: var(--lv); letter-spacing: -.5px; line-height: 1.05; }
.ht-cal__v small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0; }
.ht-cal__n { font-size: 10.5px; color: var(--ink-3); }
.ht-cal__miss { color: var(--red); font-weight: 700; }
.ht-missline { margin: 12px 0 0; font-size: 12.5px; color: var(--red); font-weight: 600; }
.ht-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ht-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ht-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.ht-table .num { text-align: right; font-family: var(--mono); }
.ht-basis { margin: 14px 2px 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; word-break: keep-all; }

/* 크루 입력 화면 */
.ht-step { display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px; gap: 12px; align-items: stretch; }
.ht-step__btn { min-height: 110px; border: 3px solid var(--line); border-radius: 22px; background: var(--panel); font-size: 48px; font-weight: 700; cursor: pointer; transition: transform .12s ease-out; }
.ht-step__btn:active { transform: scale(.95); }
.ht-step__val { display: flex; align-items: center; justify-content: center; gap: 6px; border: 3px solid var(--accent-text); border-radius: 22px; background: var(--panel); padding: 0 12px; }
.ht-step__val input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 56px; font-weight: 800; text-align: right; outline: none; letter-spacing: -1.5px; }
.ht-step__val span { font-size: 26px; font-weight: 800; color: var(--ink-2); }
.ht-result { border: 3px solid var(--lv); border-radius: 22px; background: var(--panel); padding: 18px 20px; display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 12px; }
.ht-result span { grid-column: 1 / -1; font-size: 16px; color: var(--ink-2); }
.ht-result b { font-size: 56px; font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--lv); }
.ht-result em { font-style: normal; font-size: 26px; font-weight: 800; color: var(--lv); }
.ht-result p { grid-column: 1 / -1; margin: 6px 0 0; font-size: 19px; font-weight: 700; line-height: 1.4; word-break: keep-all; }
.ht-flow .gg-recap li { flex-wrap: wrap; }

/* PDF 원본 (화면 밖에서 그린 뒤 파일로 저장) — 항상 밝은 A4 */
/* 화면에는 안 보이게 0×0 상자 안에 두고(잘림), PDF 변환기는 원본 그대로 그린다 */
.ht-print-host { position: fixed; left: 0; top: 0; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ht-print-host > .ht-print { position: absolute; left: 0; top: 0; }
.ht-print { width: 760px; background: #fff; color: #16160f; padding: 8px 4px;
  --ink: #16160f; --ink-2: #4a4b44; --ink-3: #7a7b72; --line: #e2e3dd; --line-soft: #ecede7; --card-bg: #fff; --panel: #fff; --panel-2: #f4f5f1;
  --green: #16a34a; --red: #dc2f28; --amber: #b7791f; --blue: #2563eb; --accent-text: #5c7a08; }
.ht-print__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid #16160f; margin-bottom: 14px; }
.ht-print__head p { margin: 0 0 4px; font-size: 10px; letter-spacing: 1px; color: #7a7b72; font-weight: 700; }
.ht-print__head h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.5px; }
.ht-print__head span { font-size: 10.5px; color: #4a4b44; }
.ht-print__head > div:first-child { min-width: 0; }
.ht-print__org { flex: 0 0 auto; font-size: 10.5px; text-align: right; color: #4a4b44; line-height: 1.5; }
.ht-print h2 { font-size: 13px; margin: 16px 0 8px; }
.ht-print .iss-stats { grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 4px; }
.ht-print .iss-stat { padding: 10px 11px; }
.ht-print .iss-stat__n { font-size: 20px; }
.ht-print .ht-cal__d { min-height: 64px; padding: 5px 6px; }
.ht-print .ht-cal__v { font-size: 15px; }
.ht-print .ht-table { font-size: 10.5px; }
.ht-print .ht-table td, .ht-print .ht-table th { padding: 5px 6px; }
.ht-print .table-wrap { overflow: visible; }
/* PDF 변환기(html2canvas)는 color-mix 를 못 읽음 → 단색으로 */
.ht-print .ht-tag { border-color: currentColor; }

@media (max-width: 860px) {
  .ht-cal { gap: 3px; }
  .ht-cal__d { min-height: 64px; padding: 5px 4px; border-radius: 8px; }
  .ht-cal__h, .ht-cal__n { display: none; }
  .ht-cal__v { font-size: 14px; }
  .ht-cal__v small { font-size: 9px; }
  .ht-cal__d.is-miss { border-color: color-mix(in srgb, var(--red) 50%, transparent); }
  .ht-step { grid-template-columns: 72px minmax(0, 1fr) 72px; gap: 8px; }
  .ht-step__btn { min-height: 96px; font-size: 40px; }
  .ht-step__val input { font-size: 44px; }
  .ht-result b { font-size: 46px; }
  .fbtn--big { min-height: 100px; padding: 18px 16px; }
  .fbtn--big .ft b { font-size: 21px; }
  /* 휴대폰에서 PDF를 만들어도 A4 배치 그대로 */
  .ht-print .ht-cal { gap: 6px; }
  .ht-print .ht-cal__d { min-height: 64px; padding: 5px 6px; border-radius: 10px; }
  .ht-print .ht-cal__d.is-miss { border-color: var(--line-soft); }
  .ht-print .ht-cal__h, .ht-print .ht-cal__n { display: block; }
  .ht-print .ht-cal__v { font-size: 15px; }
  .ht-print .ht-cal__v small { font-size: 10.5px; }
  .ht-print .iss-stats { grid-template-columns: repeat(5, 1fr); }
}

/* =========================================================
   설정 — 계정 · 권한 (게임즈 가든 관리자 설정과 같은 구성)
   ========================================================= */
.st-lock { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.st-lock h3 { margin: 0; }
.st-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-soft); border-radius: 18px; background: var(--card-bg); overflow: hidden; margin-bottom: 18px; }
.st-roles > div { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.st-roles > div + div { border-left: 1px solid var(--line-soft); }
.st-roles b { font-size: 14px; }
.st-roles span { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; word-break: keep-all; }
.st-list { border: 1px solid var(--line-soft); border-radius: 18px; background: var(--card-bg); overflow: hidden; margin-bottom: 18px; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px auto; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line-soft); }
.st-row:first-child { border-top: 0; }
.st-row--h { background: var(--panel-2); font-size: 11.5px; color: var(--ink-3); padding: 10px 18px; }
.st-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-who b { font-size: 14.5px; }
.st-who span { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-role { justify-self: start; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); white-space: nowrap; }
.st-role--admin { background: var(--accent); color: var(--accent-ink); }
.st-date { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.st-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.st-rolesel { height: 32px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12.5px; padding: 0 10px; }
.st-add { max-width: 760px; }
.st-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.st-radios label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.st-radios label:has(input:checked) { border-color: var(--accent-text); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.st-radios input { accent-color: var(--accent-text); }
.st-foot { display: flex; gap: 8px; margin-top: 14px; }
.gate__input + .gate__input { margin-top: 8px; }
@media (max-width: 860px) {
  .st-roles { grid-template-columns: 1fr; }
  .st-roles > div + div { border-left: 0; border-top: 1px solid var(--line-soft); }
  .st-row { grid-template-columns: minmax(0, 1fr) auto; }
  .st-row--h { display: none; }
  .st-date { display: none; }
  .st-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .st-add .fld-row { grid-template-columns: minmax(0, 1fr); }
  .st-add .fld input { min-width: 0; width: 100%; }
}

/* =========================================================
   대시보드 — 게임즈 가든식 타일 그리드 (2026-11-03)
   ========================================================= */
:root { --bt-c0: #2a2a2d; --bt-c1: #c6ff2e; --bt-c2: #8fbf10; --bt-c3: #5a760c; --bt-c4: #3d4a1a; --bt-c5: #e3f7a6; }
:root[data-theme="light"] { --bt-c0: #e2e3dd; --bt-c1: #bff000; --bt-c2: #8cbf00; --bt-c3: #4f7300; --bt-c4: #c8d98a; --bt-c5: #2f4500; }

.dash-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(156px, auto); gap: 14px; }
.bt {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 18px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.bt--s2 { grid-column: span 2; }
.bt--r2 { grid-row: span 2; }
.bt__lbl { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.bt__big { font-size: 46px; font-weight: 800; letter-spacing: -1.6px; line-height: 1; font-variant-numeric: tabular-nums; }
.bt__big small { font-size: 16px; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.bt__sub { font-size: 12.5px; font-weight: 700; }
.bt__word { font-size: 22px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; }
.bt__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bt__more { font-size: 12px; font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.bt__foot { margin-top: auto; }
.bt--accent { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.bt--accent .bt__lbl { color: var(--accent-ink); opacity: .7; }
.bt--link { transition: border-color .2s, transform .2s cubic-bezier(.23,1,.32,1); }
.bt--link:hover { border-color: var(--ink-3); }
.bt--link:active { transform: scale(.98); }
.bt-pill { align-self: flex-start; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.bt-pill--warn { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }

/* 공지 — 진한 타일 */
.bt--dark { background: #16160f; border-color: transparent; color: #f4f4f5; }
:root[data-theme="dark"] .bt--dark { background: var(--panel-2); border-color: var(--line); }
.bt--dark .bt__lbl { color: rgba(244,244,245,.6); }
.bt-notice__t { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.45; cursor: pointer; }
.bt-notice__olds { display: flex; flex-direction: column; gap: 2px; }
.bt-notice__old { all: unset; cursor: pointer; font-size: 12px; color: rgba(244,244,245,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-notice__old span { margin-right: 8px; opacity: .7; font-variant-numeric: tabular-nums; }
.bt-notice__old:hover { color: #f4f4f5; }
.bt-ghost { border: 1px solid rgba(244,244,245,.25); background: transparent; color: inherit; border-radius: 999px;
  padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.bt-ghost:hover { border-color: rgba(244,244,245,.55); }

/* 날씨 — wxFill 이 채우는 마크업을 타일 모양으로 */
.bt-wx .wxw__left { display: flex; flex-direction: column; gap: 6px; }
.bt-wx .wxw__temp { display: flex; align-items: center; gap: 8px; }
.bt-wx .wxw__ico { font-size: 34px; line-height: 1; }
.bt-wx .wxw__deg { font-size: 46px; font-weight: 800; letter-spacing: -1.6px; line-height: 1; font-variant-numeric: tabular-nums; }
.bt-wx .wxw__feel { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.bt-wx .wxw__right { display: none; }

/* 크루 구성 — 도넛 링 */
.bt-ring { display: flex; align-items: center; gap: 24px; }
.bt-ring svg { width: 120px; height: 120px; flex: none; }
.bt-ring__n { font-size: 26px; font-weight: 800; fill: var(--ink); font-family: inherit; }
.bt-ring__u { font-size: 11px; fill: var(--ink-3); font-family: inherit; }
.bt-lg { flex: 1; display: flex; flex-direction: column; gap: 7px; font-size: 13px; min-width: 0; }
.bt-lg div { display: flex; align-items: center; gap: 8px; }
.bt-lg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bt-lg b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* 최근 이슈 목록 — 타일 폭에 맞게 위치 칸을 넓히고 긴급도는 숨김 */
.bt .dri-list { margin: 0; }
.bt .dri-row { grid-template-columns: 40px minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 10px; padding: 10px 2px; }
.bt .dri-row .iss-row__urg { display: none; }

@media (max-width: 1100px) {
  .dash-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dash-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bt--s2 { grid-column: auto; }
  .bt--r2 { grid-row: auto; }
  .bt__big, .bt-wx .wxw__deg { font-size: 40px; }
}
@media (max-width: 720px) {
  .bt .dri-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
}

/* =========================================================
   크루 로스터 — 요약 띠 + 깔끔한 표 (2026-11-03)
   ========================================================= */
.rs-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line-soft); border-radius: 18px; }
.rs-sum > div { padding: 16px 20px; border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-sum > div:first-child { border-left: 0; }
.rs-sum span { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.rs-sum b { font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rs-sum b small { font-size: 13px; font-weight: 700; color: var(--ink-3); margin-left: 2px; letter-spacing: 0; }
.rs-sum em { font-style: normal; font-size: 12px; color: var(--ink-3); }

.rs-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 12px; }
.rs-tools .searchbox { flex: 0 1 300px; border-radius: 999px; }
.rs-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--panel-2); border-radius: 999px; }
.rs-seg button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.rs-seg button.is-on { background: var(--accent); color: var(--accent-ink); }

.rs-table tbody tr { cursor: pointer; }
.rs-table td { padding: 13px 18px; }
.rs-name b { display: block; font-size: 14px; font-weight: 800; }
.rs-name span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.rs-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-date span { display: block; font-size: 11.5px; color: var(--ink-3); }
.rs-ten { font-weight: 800; white-space: nowrap; }
.rs-st { display: inline-flex; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.rs-st--leave { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.rs-st--out { background: var(--panel-2); color: var(--ink-3); }
.rs-tag { display: inline-flex; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); white-space: nowrap; margin: 1px 4px 1px 0; }
.rs-memo { color: var(--ink-2); font-size: 12.5px; max-width: 260px; }
.rs-table .crew-out td { color: var(--ink-3); }
.rs-table .crew-out .rs-name b { color: var(--ink-2); }
.rs-outwrap { margin-top: 18px; }
.rs-outh { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.rs-more { margin-top: 12px; border: 0; background: none; padding: 6px 2px; font: inherit; font-size: 13px; font-weight: 800; color: var(--ink-2); cursor: pointer; }
.rs-more:hover { color: var(--ink); }

@media (max-width: 900px) {
  .rs-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-sum > div:nth-child(3) { border-left: 0; }
  .rs-sum > div:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 720px) {
  .rs-tools .searchbox { flex: 1 1 100%; }
  .rs-table thead { display: none; }
  .rs-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  .rs-table td { padding: 0; border: 0; }
  .rs-table td:nth-child(n + 5) { display: none; }
  .rs-table .rs-date { grid-column: 1; font-size: 12px; color: var(--ink-3); }
  .rs-table .rs-ten { grid-column: 2; grid-row: 2; text-align: right; }
  .rs-table td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  .rs-table td:first-child { grid-column: 1; grid-row: 1; }
}

/* 사이드바 — 게임즈 가든식 마무리: 하위 메뉴는 대시 없이 들여쓰기만 */
.nav__item--sub { padding-left: 28px; font-weight: 400; }
.nav__item--sub::after { content: none; }
.nav__item--sub.is-active { font-weight: 700; }
.nav__label { font-weight: 800; }

/* =========================================================
   크루 교육 관리 — 요약 띠 + 체크 표 (2026-11-03)
   (요약 띠·연도 버튼은 크루 로스터의 .rs-sum · .rs-seg 재사용)
   ========================================================= */
.ed-hint { font-size: 12px; color: var(--ink-3); }
.ed-csv { margin-left: auto; }
.ed-table th { text-align: center; white-space: nowrap; }
.ed-table th:first-child { text-align: left; }
.ed-table td { text-align: center; padding: 12px 14px; }
.ed-table td:first-child { text-align: left; }
.ed-name b { display: block; font-size: 14px; font-weight: 800; }
.ed-name span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.ed-ok, .ed-no { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.ed-ok { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.ed-ok i { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; transition: transform .2s cubic-bezier(.23,1,.32,1); }
.ed-ok small { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ed-ok:hover i { transform: scale(1.08); }
.ed-no { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--line); color: transparent;
  display: inline-grid; place-items: center; font-size: 14px; font-weight: 800; transition: border-color .2s, color .2s; }
.ed-no:hover, .ed-no:focus-visible { border-color: var(--ink-3); color: var(--ink-2); outline: none; }
.ed-pr { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ed-pr.is-full { color: var(--accent-text); }

@media (max-width: 720px) {
  .ed-hint { display: none; }
  .ed-table th, .ed-table td { padding: 10px 8px; }
  .ed-table th { font-size: 10.5px; white-space: normal; word-break: keep-all; }
}

/* =========================================================
   공지사항 팝업 — 비밀번호 · 작성/수정 · 이력을 한 창에서 (2026-11-04)
   ========================================================= */
.nt-card { width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; }
.nt-lock p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); }
.nt-lock__row { display: flex; gap: 8px; }
.nt-lock__row input { flex: 1; min-width: 0; }
.nt-err { color: var(--red) !important; font-size: 12.5px !important; min-height: 18px; margin: 8px 0 0 !important; }
.nt-form { display: grid; gap: 12px; }
.nt-mode { margin: 0; font-size: 13px; font-weight: 800; color: var(--accent-text); }
.nt-actions { display: flex; align-items: center; gap: 8px; }
.nt-hist { margin-top: 20px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.nt-hist__h { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.nt-hist__h small { font-weight: 400; color: var(--ink-3); margin-left: 6px; }
.nt-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 10px; }
.nt-row + .nt-row { border-top: 1px solid var(--line-soft); }
.nt-row.is-on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.nt-row__d { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nt-row__d em { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--accent-text); }
.nt-row__t { font-size: 13px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nt-row__a { display: flex; gap: 4px; }
.bt-notice__btns { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .nt-row { grid-template-columns: 1fr; gap: 4px; }
  .nt-row__a { justify-content: flex-end; }
}

/* =========================================================
   식물 이슈 관리 — 채용 키트식 3단 (2026-11-04)
   위쪽 탭 · 왼쪽 한 줄 목록 · 가운데 단계 흐름 · 오른쪽 정보 칸
   ========================================================= */
.ik-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ik-tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--panel-2); border-radius: 999px; }
.ik-tabs button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.ik-tabs button b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.ik-tabs button.is-on { background: var(--ink); color: var(--bg); }
.ik-bf { display: inline-flex; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; }
.ik-bf button { border: 0; background: none; padding: 6px 11px; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.ik-bf button.is-on { background: var(--panel-2); color: var(--ink); }
.ik-search { flex: 0 1 260px; margin-left: auto; border-radius: 999px; }

.ik-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.ik-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 230px); overflow: auto; padding-right: 2px; }
.ik-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 11px 12px;
  border: 0; border-radius: 12px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.ik-row:hover { background: var(--panel); }
.ik-row.is-on { background: var(--ink); color: var(--bg); }
.ik-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.ik-dot.is-done { background: var(--green); }
.ik-dot.is-open { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent); }
.ik-dot.is-urg { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
.ik-row__m { min-width: 0; }
.ik-row__m b { display: block; font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-row__m small { display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-row__m em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--amber); margin-left: 5px; }
.ik-row.is-on .ik-row__m small { color: var(--bg); opacity: .6; }
.ik-row__s { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ik-row.is-on .ik-row__s { color: var(--accent); }
:root[data-theme="dark"] .ik-row.is-on .ik-row__s { color: #4f7300; }
.ik-g { margin: 12px 6px 4px; font-size: 11px; font-weight: 800; color: var(--ink-3); letter-spacing: .6px; }
.ik-empty { margin: 10px 8px; font-size: 13px; color: var(--ink-3); }

.ik-detail { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 18px; padding: 22px 24px; min-height: 420px; }
.ik-detail__h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.ik-detail__h > div { flex: 1; min-width: 0; }
.ik-detail__h h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1.25; }
.ik-detail__h p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.ik-done { font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.ik-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 16px; }
.ik-step:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--line-soft); }
.ik-step__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800;
  background: var(--panel-2); color: var(--ink-3); position: relative; z-index: 1; }
.ik-step.is-done .ik-step__n { background: var(--ink); color: var(--bg); }
.ik-step.is-now .ik-step__n { background: var(--accent); color: var(--accent-ink); }
.ik-step__c { min-width: 0; }
.ik-step__t { display: flex; align-items: baseline; gap: 8px; min-height: 34px; padding-top: 6px; flex-wrap: wrap; }
.ik-step__t b { font-size: 15px; font-weight: 800; }
.ik-step__t span { font-size: 12.5px; color: var(--ink-3); }
.ik-step__b { margin-top: 10px; background: var(--panel-2); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ik-step__b p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.ik-kv { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; font-weight: 700; }
.ik-kv i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin-right: 6px; }
.ik-photo { align-self: flex-start; }
.ik-acts { display: flex; gap: 6px; flex-wrap: wrap; }

.ik-info { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; }
.ik-info section { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.ik-info section:first-child { border-top: 0; padding-top: 0; }
.ik-info h6 { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; color: var(--ink-3); letter-spacing: .4px; }
.ik-v { font-size: 14px; font-weight: 800; line-height: 1.5; }
.ik-v small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
.ik-tag { display: inline-flex; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); margin: 0 4px 4px 0; }
.ik-tag.is-warn { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.ik-tag.is-red { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.ik-tag.is-blue { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.ik-hist { display: flex; flex-direction: column; gap: 5px; }
.ik-hist div { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.ik-hist span { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ik-memo { margin: 0; font-size: 13px; line-height: 1.5; }
.ik-info .ik-acts { padding-top: 12px; border-top: 1px solid var(--line-soft); }

@media (max-width: 1200px) {
  .ik-grid { grid-template-columns: 250px minmax(0, 1fr); }
  #ikInfo { grid-column: 2; }
}
@media (max-width: 900px) {
  .ik-grid { grid-template-columns: 1fr; }
  #ikInfo { grid-column: auto; }
  .ik-list { max-height: 340px; }
  .ik-search { flex: 1 1 100%; margin-left: 0; }
  .ik-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ik-detail { padding: 18px; min-height: 0; }
}

/* 아지트 가드너 앱 현장 이슈 (읽기 전용 연결) */
.ag-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px dashed var(--line); background: var(--panel); border-radius: 999px;
  padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.ag-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.ag-chip.is-on { border-style: solid; cursor: default; color: var(--accent-text); }
.ag-chip.is-on button { border: 0; background: var(--panel-2); border-radius: 999px; padding: 2px 8px; font: inherit; font-size: 11px; font-weight: 700; color: var(--ink-3); cursor: pointer; }
.ag-mark { font-style: normal; margin-right: 4px; }
.ag-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-text); }
.ag-lbl { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; color: var(--ink-3); }
.ag-ph { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-ph__i { width: 84px; height: 84px; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: var(--line); cursor: zoom-in; }
.ag-ph__i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-cheers { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-cheer { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-soft); }
.ag-cmts { display: flex; flex-direction: column; gap: 6px; }
.ag-cmt { background: var(--panel); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; }
.ag-cmt b { font-weight: 800; margin-right: 6px; }
.ag-cmt small { color: var(--ink-3); }
.ag-cmt p { margin: 3px 0 0; line-height: 1.45; }
.ag-names { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-names button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ag-names button.is-on { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.ik-tag.is-lime { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-text); }