/* 처음이 챗봇 업주 콘솔 (2026-10-03) — Material 3 · 처음 스튜디오 토큰(primary #002E5D · secondary #0FA3B1) · Tailwind CDN 쓰지 않음(C5)
   기획 docs/choeum/챗봇/100_고객콘솔_기획서_v1.md ⑥⑪ — 글자 16px+ · 버튼 48px+(모바일 52) · 강조색은 주 버튼 한 곳 */
:root{--p:#002E5D;--on-p:#fff;--s:#0FA3B1;--bg:#F8FAFC;--sf:#fff;--tx:#1f2328;--sub:#5b6470;--bd:#E5E7EB;--warn:#B3261E;--warn-bg:#FDECEA;--ok:#1E6B3A;--ok-bg:#E7F4EC;--r:16px}
*{box-sizing:border-box}
html,body{margin:0}
body.cs{background:var(--bg);color:var(--tx);font:17px/1.6 "Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;padding-bottom:84px}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.35}
/* 상단 바 */
.cs-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;height:64px;padding:0 16px;background:var(--sf);border-bottom:1px solid var(--bd)}
.cs-logo{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px}
.cs-logo:hover,.cs-logo:focus-visible{background:#002e5d14}
.cs-prod{font-weight:800;color:var(--p);text-decoration:none;font-size:18px;white-space:nowrap;margin-right:12px}
.cs-menu{display:flex;gap:4px;flex:1;min-width:0}
.cs-mi{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:22px;text-decoration:none;color:var(--sub);font-weight:600;white-space:nowrap}
.cs-mi:hover{background:#002e5d0f}
.cs-mi.on{background:#0fa3b11f;color:var(--p)}
.cs-acct{position:relative;margin-left:auto}
.cs-acct-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--bd);border-radius:22px;background:var(--sf);font:inherit;font-size:15px;cursor:pointer;max-width:240px}
.cs-co{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.cs-role{font-size:13px;color:var(--sub)}
.cs-acct-menu{position:absolute;right:0;top:52px;min-width:200px;background:var(--sf);border-radius:12px;box-shadow:0 2px 6px 2px #00000026,0 1px 2px #0000004d;padding:8px 0}
.cs-acct-menu a{display:flex;align-items:center;height:48px;padding:0 16px;text-decoration:none}
.cs-acct-menu a:hover{background:#002e5d0f}
/* 본문 */
.cs-main{max-width:1080px;margin:0 auto;padding:24px 16px}
.cs-main.loading{opacity:.45;transition:opacity .2s}
.cs-h{font-size:24px;margin:4px 0 16px}
.cs-muted{color:var(--sub);font-size:15px;margin:4px 0}
.cs-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.cs-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:24px;border:1px solid var(--bd);background:var(--sf);color:var(--p);font:inherit;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;white-space:nowrap}
.cs-btn.f{background:var(--p);color:var(--on-p);border-color:var(--p)}
.cs-btn.sm{min-height:40px;padding:0 14px;font-size:15px}
.cs-btn.o{color:var(--warn)}
.cs-btn:focus-visible,.cs-mi:focus-visible,.cs-chip:focus-visible{outline:3px solid var(--s);outline-offset:2px}
.cs-kakao{background:#FEE500;border-color:#FEE500;color:#111}
/* 할 일 · 카드 */
.cs-todo{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:16px 20px;margin-bottom:16px}
.cs-todo h2{font-size:18px;margin-bottom:8px}
.cs-todo-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--bd)}
.cs-todo-row:first-of-type{border-top:0}
.cs-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.cs-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:16px 20px;margin-bottom:12px;min-width:0}
.cs-cards .cs-card{margin:0}
.cs-card h3{font-size:15px;color:var(--sub);font-weight:700;margin-bottom:6px}
.cs-card.wide h3{font-size:18px;color:var(--tx)}
.cs-card.warn{border-color:var(--warn);background:var(--warn-bg)}
.cs-card-hd{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.cs-card-hd h3{margin:0}
.cs-big{font-size:30px;font-weight:800;margin:0;color:var(--p)}
.cs-big.sm{font-size:20px}
.cs-big small{font-size:15px;margin-left:2px;color:var(--sub)}
.cs-sep{color:var(--bd)}
.cs-meter{height:8px;border-radius:4px;background:var(--bd);overflow:hidden;margin-top:8px}
.cs-meter span{display:block;height:100%;background:var(--s)}
.cs-badge{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:14px;background:#002e5d0f;font-size:14px;font-weight:700;color:var(--p)}
.st-active,.bl-paid{background:var(--ok-bg);color:var(--ok)}
.st-stop,.bl-overdue{background:var(--warn-bg);color:var(--warn)}
.warn{color:var(--warn)}
/* 고르기 */
.cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cs-chip{min-height:40px;padding:0 16px;border-radius:20px;border:1px solid var(--bd);background:var(--sf);font:inherit;font-size:15px;cursor:pointer}
.cs-chip.on{background:var(--p);color:var(--on-p);border-color:var(--p)}
.cs-seg{display:inline-flex;border:1px solid var(--bd);border-radius:22px;overflow:hidden;margin-bottom:8px}
.cs-seg a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;text-decoration:none;color:var(--sub);font-weight:600}
.cs-seg a.on{background:#0fa3b11f;color:var(--p)}
.cs-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.cs-filter input[type=search],.cs-link{flex:1;min-width:180px;min-height:48px;padding:0 16px;border:1px solid var(--bd);border-radius:24px;font:inherit;font-size:16px;background:var(--sf)}
/* 대화 */
.cs-talk{list-style:none;margin:8px 0;padding:0}
.cs-talk li{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:12px 16px;margin-bottom:8px}
.cs-talk-meta{font-size:14px;color:var(--sub)}
.cs-q,.cs-a{margin:6px 0;overflow-wrap:anywhere}
.cs-q b,.cs-a b{display:inline-block;min-width:52px;font-size:14px;color:var(--sub)}
/* 통계 */
.cs-bars{display:flex;align-items:flex-end;gap:4px;height:160px;padding-top:8px;overflow-x:auto}
.cs-col{flex:1;min-width:18px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.cs-col span{display:block;width:100%;max-width:28px;background:var(--s);border-radius:6px 6px 0 0}
.cs-col em{font-style:normal;font-size:12px;color:var(--sub);margin-top:4px;white-space:nowrap}
.cs-bars.h .cs-col em{font-size:11px}
.cs-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cs-list{margin:0;padding-left:20px}
.cs-list li{margin:8px 0;overflow-wrap:anywhere}
.cs-list.plain{list-style:none;padding:0}
/* 결제 */
.cs-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0;border-top:1px solid var(--bd)}
.cs-sub:first-of-type{border-top:0}
.cs-plan{width:100%}
.cs-plan summary,.cs-code summary{cursor:pointer;color:var(--p);font-weight:700;min-height:44px;display:flex;align-items:center}
.cs-code pre{white-space:pre-wrap;word-break:break-all;background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:12px;font-size:14px}
.cs-table-wrap{overflow-x:auto}
.cs-table{width:100%;border-collapse:collapse;font-size:16px}
.cs-table th{text-align:left;font-size:14px;color:var(--sub);font-weight:700;padding:8px;border-bottom:1px solid var(--bd);white-space:nowrap}
.cs-table td{padding:12px 8px;border-bottom:1px solid var(--bd);vertical-align:middle}
.cs-table td.num{text-align:right;font-weight:700;white-space:nowrap}
/* 빈 화면 · 로그인 · 알림 */
.cs-empty,.cs-login{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:32px 20px;text-align:center}
.cs-empty .cs-row,.cs-login .cs-row{justify-content:center}
.cs-login{max-width:480px;margin:48px auto}
.cs-login h1{font-size:24px;margin-bottom:8px;color:var(--p)}
.cs-login .cs-btn{margin-top:16px}
.cs-snack{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);max-width:calc(100% - 32px);background:#313033;color:#fff;padding:14px 20px;border-radius:12px;font-size:16px;z-index:50}
.cs-snack-inline{background:var(--ok-bg);color:var(--ok);border-radius:12px;padding:12px 16px;margin:0 0 16px}
.cs-snack-inline.warn{background:var(--warn-bg);color:var(--warn)}
/* 모바일 아래 탭 */
.cs-tabs{display:none}
@media (max-width:820px){
  body.cs{font-size:17px}
  .cs-menu{display:none}
  .cs-prod{flex:1}
  .cs-acct-btn{max-width:150px}
  .cs-role{display:none}
  .cs-main{padding:16px}
  .cs-two{grid-template-columns:1fr}
  .cs-cards{grid-template-columns:1fr 1fr}
  .cs-btn{min-height:52px}
  .cs-btn.sm{min-height:44px}
  .cs-tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;height:72px;background:var(--sf);border-top:1px solid var(--bd)}
  .cs-ti{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;font-size:13px;font-weight:700;color:var(--sub)}
  .cs-ti.on{color:var(--p)}
  .cs-ti-ic{width:52px;height:30px;border-radius:15px;display:block;background:center/22px no-repeat}
  .cs-ti.on .cs-ti-ic{background-color:#0fa3b12e}
  .cs-table th:nth-child(3),.cs-table td:nth-child(3){display:none}
}
@media (max-width:400px){.cs-cards{grid-template-columns:1fr}.cs-big{font-size:26px}}
/* 아래 탭 아이콘(글자와 함께) */
.cs-ic-home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002E5D' stroke-width='2'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
.cs-ic-bot{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002E5D' stroke-width='2'%3E%3Crect x='4' y='7' width='16' height='12' rx='3'/%3E%3Cpath d='M12 3v4M9 13h.01M15 13h.01'/%3E%3C/svg%3E")}
.cs-ic-talk{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002E5D' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
.cs-ic-stat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002E5D' stroke-width='2'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")}
.cs-ic-pay{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002E5D' stroke-width='2'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E")}
.nowrap{white-space:nowrap}