/* 예시 화면 CSS(styles·screens·flow)에 없는 것만 더한다 */
a.logo{text-decoration:none;color:inherit}
/* 로그아웃은 윗줄 오른쪽 끝(styles.css .who 의 margin-left:auto 를 폼 여백 초기화가 덮지 않게) */
.row-acts form{margin:0}
.who{margin:0 0 0 auto}
.who-name{font-size:13px}
.msgs{list-style:none;margin:0;padding:12px 28px 0;display:flex;flex-direction:column;gap:6px}
.msgs li{border-radius:10px;padding:10px 14px;font-weight:600;background:var(--ok-bg);color:var(--ok)}
.msgs li.msg-error{background:var(--bad-bg);color:var(--bad)}
.msgs li.msg-warning{background:#FFF4DB;color:#9A6200}
.form-error{color:var(--bad);font-size:13px;margin:0}
.form .form-error.full{grid-column:1/-1}
.field input[type=checkbox]{width:auto;align-self:flex-start}
.hint{font-size:12px;color:var(--muted)}
.hint ul{margin:4px 0 0;padding-left:18px}
.row-acts{display:flex;gap:6px;align-items:center}
code{font-size:13px;background:var(--soft);border-radius:6px;padding:1px 6px;word-break:break-all}

/* 로그인 · 2단계 인증 · 비밀번호 변경 */
.auth-body{display:grid;place-items:center;min-height:100vh;padding:16px}
.auth{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;width:min(420px,100%);display:flex;flex-direction:column;gap:18px}
.auth h1{margin:0;font-size:22px;letter-spacing:-.02em}
.auth form{display:flex;flex-direction:column;gap:14px}
.auth .msgs{padding:0}
.auth .steps{margin:0;padding-left:20px;color:#3C4459;display:flex;flex-direction:column;gap:4px}
.otp-qr{display:grid;place-items:center}

/* QR 동의 */
.cboard{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:20px;align-items:start}
.qr-box{align-self:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px;width:200px}
.qr-box svg{display:block;width:100%;height:auto}
.plist form{margin:0}
/* 들어온 동의 한 줄: 시각 · 이름 · 번호 · 지점·방법·날짜 · 칩 · 단추.
   모든 줄이 같은 칸(grid)을 써서 폭마다 세로로 맞는다 — 넓으면 한 줄, 중간이면 단추를 오른쪽에 두고 세 줄,
   휴대폰이면 단추를 맨 아래로 내린 네 줄. 시각은 늘 왼쪽 칸에 따로 둔다 */
.plist li.prow{display:grid;align-items:center;gap:4px 12px;padding:10px 0;
  grid-template-columns:3.2em 5em minmax(0,1fr) auto;
  grid-template-areas:"time name phone acts" ". where where acts" ". chips chips acts"}
.prow>.time{grid-area:time}
.prow>.pname{grid-area:name}
.prow>.meta.num{grid-area:phone}
.prow>.where{grid-area:where}
.prow>.agreechips{grid-area:chips;min-width:0}
.prow>.row-acts{grid-area:acts;justify-self:end}
.prow>.time,.prow>.pname,.prow>.meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){
  .plist li.prow{grid-template-columns:3.2em 5em minmax(0,1fr);
    grid-template-areas:"time name phone" ". where where" ". chips chips" ". acts acts"}
}
@media (min-width:901px){
  .plist li.prow{gap:6px 14px;grid-template-columns:3.2em 5em 8.5em 12.5em minmax(0,1fr) auto;
    grid-template-areas:"time name phone where chips acts"}
}
.board-search{display:flex;gap:6px;align-items:center;margin-top:10px;flex-wrap:wrap}
.board-search input[name=q]{border:1px solid var(--line);border-radius:10px;padding:6px 10px;width:150px;background:var(--surface)}
/* flow.css의 1280px 이하 규칙이 .qr-panel·.pending을 둘째 칸으로 보내므로 되돌린다 */
.cboard .qr-panel,.cboard .pending{grid-column:auto;grid-row:auto}
/* 1400px 이하에서는 QR 칸을 옆에 두면 목록이 한 줄에 들어가지 않아 목록을 QR 아래 전체 폭으로 내린다 */
@media (max-width:1400px){.cboard{grid-template-columns:1fr}}

@media (max-width:860px){.msgs{padding-inline:16px}}

/* 고객 */
:root{--t-install:#0EA5E9;--t-install-bg:#E0F2FE;--t-expiry:#DB2777;--t-expiry-bg:#FCE7F3}
.c-install{background:var(--t-install-bg);color:#0369A1}
.c-expiry{background:var(--t-expiry-bg);color:#9D174D}
/* 안내 상태 '지연'. 예약(s-wait)과 구별한다 */
.s-late{background:#FFF4DB;color:#9A6200}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 18px;margin:0}
.kv dt{color:var(--muted);font-size:13px;font-weight:600}
.kv dd{margin:0}
.kv .m{color:var(--muted);font-size:13px}
.head .acts form{margin:0}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding-top:12px}

/* 고객 등록 */
.addons{gap:8px}
.addon-rows{display:flex;flex-direction:column;gap:8px}
.addon-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:8px 12px;align-items:end}
.addon-del{display:flex;gap:4px;align-items:center;font-size:13px;color:var(--muted);padding-bottom:12px;white-space:nowrap}
.auto{align-items:start} /* flow.css의 end를 덮는다 — 도움말 줄이 있는 칸이 위로 뜨지 않게 */
.auto .hint{grid-column:1/-1}
.checks{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
@media (max-width:520px){.addon-row{grid-template-columns:1fr}}

/* 알림톡 문구 */
.tpl .band.k-open{background:#1D5FD1}
.tpl .band.k-addon{background:#6A3BE0}
.tpl .band.k-plan{background:#C2530A}
.tpl .band.k-install{background:#0369A1}
.tpl .band.k-expiry{background:#9D174D}
.tpl .band.k-device{background:#07875F}
.tpl .band.k-ad_agreed,.tpl .band.k-ad_withdrawn{background:#475569}
.tpl .band.k-ad_reconfirm{background:#334155}
.tpl .row b{color:var(--ink)}
.tpl .row .row-acts{margin-left:auto}
/* 솔라피 같은 말풍선(render.bubble_html) — 문구 카드·고치기·솔라피에서 고르기·고객 등록 미리보기 */
.kt-head{display:flex;flex-direction:column;gap:2px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.kt-sub{font-size:12px;color:var(--muted)}
.kt-title{font-size:16px;font-weight:800;color:var(--ink);line-height:1.35}
.kt-btns{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.kt-btn{display:block;text-align:center;background:#EEF0F3;border-radius:6px;padding:8px 10px;font-size:13px;font-weight:600;color:var(--ink)}
.kt-qrs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kt-qr{background:#EEF0F3;border-radius:999px;padding:4px 12px;font-size:12px;color:var(--ink)}
/* 문구 카드는 회색 바탕(.tpl .msg)이라 단추를 흰 바탕·테두리로 띄운다 */
.tpl .msg .kt-btn,.tpl .msg .kt-qr{background:#fff;border:1px solid var(--line)}
.kt-extra{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted)}
.bubble .bb em{font-style:normal;background:#FFF3B0;border-radius:4px;padding:0 3px;font-weight:600;color:var(--ink)}
.bubble.kt-bubble{margin-left:0;max-width:340px;border:1px solid var(--line)}
.form-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:20px;align-items:start}
.vars-table{min-width:0}
.vars-table td{vertical-align:top}
.vars-table .nowrap{white-space:nowrap}
.vars-kind summary{cursor:pointer;font-weight:700;padding:8px 0}
.vars-kind + .vars-kind{border-top:1px solid var(--line)}
.pick-branches{display:flex;flex-wrap:wrap;gap:8px}
.pick-branch p{margin:6px 0 0}
.pick-channels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pick-channels li{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.pick-list{display:flex;flex-direction:column;gap:16px}
.pick-body{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:20px;align-items:start}
.pick-kinds > ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pick-kinds .st{margin-left:6px}
.pick-problems{margin:4px 0 0;padding-left:18px;font-size:13px;color:var(--bad)}
.pick-form{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.pick-form select{border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--surface);font:inherit;font-size:13px}
@media (max-width:860px){.form-side,.pick-body{grid-template-columns:1fr}}
.field textarea{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);width:100%;font:inherit;line-height:1.6;resize:vertical}
.field textarea:focus{border-color:var(--t-open);outline:0;box-shadow:0 0 0 3px var(--t-open-bg)}

/* 운영 현황 */
.queue li.m{display:block;color:var(--muted)}
.branch .bh .st{margin-left:0}
.branch .hint{margin:0}

/* 발송 현황 */
.sums a.sum{text-decoration:none}
.sums a.sum:nth-child(1){color:var(--ink)}
.sums a.sum[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
a.fchip{display:inline-block;text-decoration:none;color:var(--ink)}
.board-search select{border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--surface);font:inherit;font-size:13px}
.sends-table td .m{color:var(--muted);font-size:12px}
.sends-table td div.m{margin-top:2px}

/* 접속기록 점검 */
.review-month select{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);font-weight:600}
.head p.review-state{color:var(--ink);font-size:13px;font-weight:600}

/* ── 7단계: 인라인 style 대신 종류 색 클래스, 운영 현황 SVG 도넛·막대 ── */
.k-open{background:var(--t-open)}.k-addon{background:var(--t-addon)}.k-plan{background:var(--t-plan)}
.k-install{background:var(--t-install)}.k-expiry{background:var(--t-expiry)}.k-device{background:var(--t-device)}.k-result{background:#475569}.k-none{background:var(--line)}
.donut-chart{width:180px;height:180px;position:relative}
/* 바깥 지름 180px·링 두께 30px(예시 화면 .donut과 같다). 원 둘레 100(r 15.9155)을 지키려고 SVG를 상자보다 조금 크게 둔다. */
.donut-chart svg{position:absolute;left:-4.98%;top:-4.98%;width:109.96%;height:109.96%;display:block}
.donut-ring{fill:none;stroke:var(--line);stroke-width:6.366}
.donut-seg{fill:none;stroke-width:6.366}
.donut-seg.k-open{stroke:var(--t-open)}.donut-seg.k-addon{stroke:var(--t-addon)}.donut-seg.k-plan{stroke:var(--t-plan)}
.donut-seg.k-install{stroke:var(--t-install)}.donut-seg.k-expiry{stroke:var(--t-expiry)}
.donut-seg.k-device{stroke:var(--t-device)}
.donut-chart .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut-chart .c b{font-size:30px;letter-spacing:-.03em;line-height:1}
.donut-chart .c span{color:var(--muted);font-size:12px}
.stack-bar{display:block;width:100%;height:10px;border-radius:99px;overflow:hidden}
.stack-bar .k-open{fill:var(--t-open)}.stack-bar .k-addon{fill:var(--t-addon)}.stack-bar .k-plan{fill:var(--t-plan)}
.stack-bar .k-install{fill:var(--t-install)}.stack-bar .k-expiry{fill:var(--t-expiry)}
.stack-bar .k-device{fill:var(--t-device)}.stack-bar .k-none{fill:var(--line)}