/* 알림톡 관리 — 잉크 네이비 + 알림톡 말풍선 하나만 강조 */
:root{
  --paper:#F3F5F8; --surface:#FFFFFF; --ink:#18202E; --ink-2:#526075; --line:#DCE1E8; --line-2:#EBEEF2;
  --navy:#213A63; --navy-ink:#FFFFFF; --navy-soft:#E5EBF4;
  --bubble:#FAE14B; --bubble-ink:#3A3000;
  --ok:#17714A; --ok-bg:#E2F2E9; --err:#B3261E; --err-bg:#FBE8E6; --warn:#7A5200; --warn-bg:#FFF1CF;
  --r-s:6px; --r-m:10px; --r-l:16px;
  --side:228px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0E131A; --surface:#161C25; --ink:#E3E7ED; --ink-2:#97A2B1; --line:#283140; --line-2:#1F2733;
    --navy:#9DB8E8; --navy-ink:#0E131A; --navy-soft:#1C283B;
    --bubble:#E9CF3A; --bubble-ink:#2A2300;
    --ok:#5FD39A; --ok-bg:#12291E; --err:#FF8A80; --err-bg:#341614; --warn:#F3C766; --warn-bg:#33270B;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 15px/1.6 "IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-feature-settings:"tnum"}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 틀 ---------- */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px;
  padding:22px 14px;border-right:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:center;gap:10px;padding:0 10px 22px;font-weight:700;font-size:17px;letter-spacing:-.01em}
.brand .mark{width:28px;height:28px;border-radius:9px 9px 9px 3px;background:var(--bubble);display:grid;place-items:center;color:var(--bubble-ink)}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-s);color:var(--ink-2);font-weight:500}
.nav a:hover{background:var(--line-2);text-decoration:none;color:var(--ink)}
.nav a.on{background:var(--navy-soft);color:var(--navy);font-weight:600}
.nav svg{width:19px;height:19px;flex:none}
.side .foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:0 6px}
.mode{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-m);font-size:13px;line-height:1.45}
.mode.dry{background:var(--warn-bg);color:var(--warn)}
.mode.live{background:var(--ok-bg);color:var(--ok)}
.mode.err{background:var(--err-bg);color:var(--err)}
.mode.mock{background:var(--navy-soft);color:var(--navy)}
.mode b{display:block;font-size:13.5px}
.main{min-width:0;padding:34px 40px 80px}
.page{max-width:1000px}
.topbar,.tabbar{display:none}

@media (max-width:860px){
  .shell{display:block}
  .side{display:none}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:10;padding:12px 16px;
    background:var(--surface);border-bottom:1px solid var(--line)}
  .topbar .brand{padding:0;font-size:16px}
  .topbar .pill{margin-left:auto}
  .main{padding:20px 16px 96px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;z-index:10;
    background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;font-size:11px;color:var(--ink-2)}
  .tabbar a.on{color:var(--navy);font-weight:600}
  .tabbar a:hover{text-decoration:none}
  .tabbar svg{width:22px;height:22px}
}

/* ---------- 글자 ---------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
h1{font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.02em;margin:0}
h2{font-size:16px;line-height:1.4;font-weight:600;margin:0 0 4px}
.lede{color:var(--ink-2);margin:6px 0 0;max-width:62ch}
.sub{color:var(--ink-2);font-size:13.5px}
.headline{font-size:28px;line-height:1.35;font-weight:600;letter-spacing:-.025em;margin:0 0 6px;max-width:24ch}
.headline .num{font-weight:700}
.headline .bad{color:var(--err)}
code{font:500 13px/1 "IBM Plex Sans KR",monospace;background:var(--line-2);padding:2px 6px;border-radius:4px}

/* ---------- 면 ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:22px;margin-bottom:18px}
.panel.flat{background:transparent;border-style:dashed}
.panel > header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1000px){.split{grid-template-columns:1fr}}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.cols2{grid-template-columns:1fr}.panel{padding:18px}}
.sticky{position:sticky;top:24px}

/* ---------- 목록 ---------- */
.rows{list-style:none;margin:0;padding:0}
.rows > li{display:grid;gap:4px 14px;padding:13px 0;border-top:1px solid var(--line-2);align-items:center}
.rows > li:first-child{border-top:0;padding-top:0}
.rows.src > li{grid-template-columns:minmax(0,1fr) auto}
.rows.log > li{grid-template-columns:22px 92px minmax(0,1.2fr) minmax(0,1fr) 64px minmax(0,1.4fr)}
.rows.log > li.hdr{color:var(--ink-2);font-size:12.5px;padding-bottom:8px}
.rows .t{font-weight:600}
.rows .m{color:var(--ink-2);font-size:13.5px}
@media (max-width:760px){
  .rows.log > li{grid-template-columns:22px minmax(0,1fr) auto}
  .rows.log > li > .c-time{grid-column:2;order:-1}
  .rows.log > li > .c-ck{grid-row:span 3}
  .rows.log > li > .c-src,.rows.log > li > .c-who,.rows.log > li > .c-desc{grid-column:2 / 4}
  .rows.log > li > .c-res{grid-column:3;grid-row:1;justify-self:end}
  .rows.log > li.hdr{display:none}
}
.facts{display:flex;flex-wrap:wrap;gap:4px 18px;margin:6px 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:13.5px}
.facts b{color:var(--ink);font-weight:500}

/* ---------- 상태 ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ok{background:var(--ok-bg);color:var(--ok)}.p-err{background:var(--err-bg);color:var(--err)}
.p-warn{background:var(--warn-bg);color:var(--warn)}.p-skip{background:var(--navy-soft);color:var(--navy)}.p-off{background:var(--line-2);color:var(--ink-2)}
.flash{padding:12px 16px;border-radius:var(--r-m);margin-bottom:18px;font-weight:500}
.flash.ok{background:var(--ok-bg);color:var(--ok)}.flash.err{background:var(--err-bg);color:var(--err)}
.note{padding:12px 14px;border-radius:var(--r-m);background:var(--line-2);color:var(--ink-2);font-size:13.5px}
.note.warn{background:var(--warn-bg);color:var(--warn)}

/* ---------- 폼 ---------- */
label{display:block;font-size:13.5px;font-weight:500;margin:14px 0 6px}
label:first-child{margin-top:0}
label .sub{font-weight:400}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--surface);color:var(--ink);font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
textarea{min-height:170px;resize:vertical;line-height:1.6}
.check{display:flex;align-items:flex-start;gap:10px;font-weight:400;cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--navy)}
.step{display:flex;gap:12px;align-items:baseline}
.step .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--navy-soft);color:var(--navy);
  font-size:13px;font-weight:700;display:grid;place-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 14.5px/1.2 inherit;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--line-2);text-decoration:none}
.btn.primary{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.danger{color:var(--err)}
.btn.sm{padding:6px 11px;font-size:13.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline{display:inline}
.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end}
.filters label{margin-top:0}
@media (max-width:760px){.filters{grid-template-columns:1fr 1fr}.filters .actions{grid-column:1 / -1}}
details > summary{cursor:pointer;color:var(--navy);font-weight:500;list-style:none}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"＋ "}
details[open] > summary::before{content:"－ "}

/* ---------- 알림톡 말풍선 (이 화면의 유일한 강조) ---------- */
.phone{background:#B9CEDF;border-radius:var(--r-l);padding:18px 16px 22px}
@media (prefers-color-scheme:dark){.phone{background:#24384B}}
.phone .who{display:flex;align-items:center;gap:8px;font-size:13px;color:#2C3A47;margin-bottom:8px}
@media (prefers-color-scheme:dark){.phone .who{color:#C9D6E3}}
.phone .who .av{width:34px;height:34px;border-radius:12px;background:var(--bubble);display:grid;place-items:center;
  color:var(--bubble-ink);font-weight:700;font-size:14px}
.bubble{margin-left:42px;max-width:320px;border-radius:4px 14px 14px 14px;overflow:hidden;background:#fff;color:#1E1E1E;
  box-shadow:0 1px 0 rgba(0,0,0,.06)}
.bubble .bh{background:var(--bubble);color:var(--bubble-ink);font-size:13px;font-weight:600;padding:9px 14px}
.bubble .bb{padding:14px;white-space:pre-wrap;font-size:14px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
.bubble .var{background:#FFF4B8;border-radius:3px;padding:0 2px}
.bubble .var.empty{background:#FDE2DF;color:#9A2A20}
.phone .meta{margin:8px 0 0 42px;font-size:12px;color:#3D4C5A}
@media (prefers-color-scheme:dark){.phone .meta{color:#A9B8C7}}

/* ---------- 모의 시트 표 ---------- */
.grid-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-m);max-height:540px}
table.sheet{border-collapse:collapse;font-size:13px;min-width:100%}
table.sheet th,table.sheet td{border:1px solid var(--line-2);padding:6px 9px;white-space:nowrap;text-align:left}
table.sheet thead th{position:sticky;top:0;background:var(--line-2);color:var(--ink-2);font-weight:500}
table.sheet td.rn{color:var(--ink-2);background:var(--line-2);text-align:right}
table.sheet tr.hdr td{font-weight:600}
table.sheet td.st-y{color:var(--ok);font-weight:600}
table.sheet td.st-n{color:var(--err);font-weight:600}
table.sheet td.st-t{color:var(--warn);font-weight:600}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs a{padding:7px 13px;border-radius:99px;border:1px solid var(--line);color:var(--ink-2);font-size:13.5px;background:var(--surface)}
.tabs a.on{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
.tabs a:hover{text-decoration:none}

.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .panel{width:100%;max-width:380px}
.empty{padding:26px 0;text-align:left;color:var(--ink-2)}
.empty .btn{margin-top:10px}

.alert{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:16px 18px;border-radius:var(--r-m);margin-bottom:18px;background:var(--err-bg);color:var(--err)}
.alert b{display:block;font-size:16px;margin-bottom:2px}
.notes{list-style:none;margin:0;padding:0}
.notes li{display:grid;grid-template-columns:8px 1fr auto;gap:12px;padding:11px 0;border-top:1px solid var(--line-2)}
.notes li:first-child{border-top:0}
.notes .dot{width:8px;height:8px;border-radius:50%;margin-top:8px;background:var(--ink-2)}
.notes .error .dot{background:var(--err)}.notes .warn .dot{background:var(--warn)}.notes .info .dot{background:var(--ok)}
.notes .b{color:var(--ink-2);font-size:13.5px;white-space:pre-line}