body { font-family: Pretendard, -apple-system, 'Malgun Gothic', sans-serif; }
.nav-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .9rem; border-radius:.5rem; color:#cbd5e1; font-size:.9rem; cursor:pointer; }
.nav-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active { background:#fff; color:#3730a3; font-weight:600; }
.card { background:#fff; border:1px solid #e2e8f0; border-radius:.75rem; }
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:.5rem; font-size:.85rem; font-weight:600; }
.btn-primary { background:#4f46e5; color:#fff; } .btn-primary:hover { background:#4338ca; }
.btn-ghost { background:#fff; border:1px solid #cbd5e1; color:#334155; } .btn-ghost:hover { background:#f1f5f9; }
.inp { border:1px solid #cbd5e1; border-radius:.5rem; padding:.4rem .6rem; font-size:.85rem; background:#fff; }
.inp:focus { outline:2px solid #a5b4fc; border-color:#6366f1; }
table.tbl { width:100%; font-size:.82rem; border-collapse:collapse; }
table.tbl th { background:#f8fafc; text-align:left; padding:.55rem .6rem; color:#64748b; font-weight:600; border-bottom:1px solid #e2e8f0; white-space:nowrap; }
table.tbl td { padding:.55rem .6rem; border-bottom:1px solid #f1f5f9; vertical-align:top; }
.badge { display:inline-block; padding:.1rem .45rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.review-body { white-space:pre-wrap; line-height:1.5; max-width:46rem; }
.toast { position:fixed; right:1.2rem; bottom:1.2rem; background:#1e293b; color:#fff; padding:.7rem 1rem; border-radius:.6rem; font-size:.85rem; z-index:99; }
/* 좁은 화면에서 표가 잘리지 않고 가로 스크롤 */
.card.overflow-x-auto { max-width:100%; }
.card.overflow-x-auto table.tbl { min-width:640px; }

/* AI에게 질문 */
.model-opt { display:flex; flex-direction:column; gap:1px; padding:.4rem .7rem; border:1px solid #e2e8f0; border-radius:.5rem; cursor:pointer; min-width:9.5rem; background:#fff; }
.model-opt.on { border-color:#6366f1; background:#eef2ff; box-shadow:0 0 0 1px #6366f1 inset; }
.ask-warn { margin-top:.4rem; padding:.45rem .7rem; border:1px solid; border-radius:.5rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.ask-answer { line-height:1.75; font-size:.92rem; overflow-x:auto; }
.ask-answer h1 { font-size:1.15rem; font-weight:700; margin:.6rem 0 .4rem; }
.ask-answer h2 { font-size:1.05rem; font-weight:700; margin:1rem 0 .4rem; color:#3730a3; }
.ask-answer h3 { font-weight:700; margin:.8rem 0 .3rem; }
.ask-answer ul { list-style:disc; padding-left:1.3rem; } .ask-answer ol { list-style:decimal; padding-left:1.3rem; }
.ask-answer table { border-collapse:collapse; margin:.5rem 0; font-size:.85rem; }
.ask-answer th, .ask-answer td { border:1px solid #e2e8f0; padding:.3rem .55rem; text-align:left; vertical-align:top; }
.ask-answer th { background:#f1f5f9; }
.ask-answer hr { margin:.9rem 0; border-color:#e2e8f0; }
.ask-answer strong { color:#1e293b; }
.cite { color:#4f46e5; background:#eef2ff; border-radius:.25rem; padding:0 .2rem; font-size:.8em; font-weight:600; white-space:nowrap; }
.cite:hover { background:#c7d2fe; }
.ask-hist { display:block; width:100%; text-align:left; padding:.4rem .5rem; border-radius:.4rem; }
.ask-hist:hover { background:#f1f5f9; } .ask-hist.on { background:#eef2ff; }

/* ================= 레이아웃 (PC: 고정 사이드바 / 모바일: 서랍 메뉴) ================= */
.layout { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; width:15rem; background:#1e1b4b; color:#fff; display:flex; flex-direction:column; z-index:40; transition:transform .22s ease; }
.main { margin-left:15rem; padding:1.5rem; min-width:0; }
.topbar { display:none; }
.scrim { display:none; }
.nav-group { margin:.9rem .9rem .3rem; font-size:.68rem; letter-spacing:.06em; color:#a5b4fc; opacity:.75; font-weight:700; }
.nav-group:first-child { margin-top:.2rem; }
.topbar-btn { width:2.25rem; height:2.25rem; display:inline-flex; align-items:center; justify-content:center; border-radius:.5rem; font-size:1.1rem; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.page-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

@media (max-width: 1023px) {
  .sidebar { transform:translateX(-100%); width:min(17rem, 84vw); box-shadow:0 0 40px rgba(0,0,0,.35); padding-top:env(safe-area-inset-top); }
  body.menu-open .sidebar { transform:none; }
  body.menu-open { overflow:hidden; }
  .scrim { display:block; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:39; opacity:0; pointer-events:none; transition:opacity .2s; }
  body.menu-open .scrim { opacity:1; pointer-events:auto; }
  .topbar { display:flex; position:sticky; top:0; z-index:30; align-items:center; justify-content:space-between; gap:.5rem;
    height:3.25rem; padding:0 .5rem; padding-top:env(safe-area-inset-top); background:#1e1b4b; color:#fff; }
  .main { margin-left:0; padding:.85rem; padding-bottom:calc(1.5rem + env(safe-area-inset-bottom)); }
  .page-head { margin-bottom:.85rem; }
  .page-actions { width:100%; }
  .page-actions .btn { flex:1 1 auto; justify-content:center; }
  .nav-item { padding:.7rem .9rem; font-size:.95rem; }
}

/* 터치하기 쉬운 크기 */
@media (max-width: 767px) {
  .btn { padding:.55rem .85rem; font-size:.88rem; }
  .inp { padding:.55rem .65rem; font-size:16px; } /* 16px 미만이면 iOS가 확대함 */
  .card { border-radius:.65rem; }
  table.tbl { font-size:.8rem; }
  .toast { left:.75rem; right:.75rem; bottom:calc(.75rem + env(safe-area-inset-bottom)); text-align:center; }
  .hide-sm { display:none !important; }
  /* 필터: 가로로 접기 */
  .filter-bar { display:grid !important; grid-template-columns:1fr 1fr; gap:.5rem !important; }
  .filter-bar > * { min-width:0; width:100%; }
  .filter-bar .span-2 { grid-column:span 2; }
}
@media (min-width: 768px) { .only-sm { display:none !important; } }

/* 모바일 카드형 목록 (표 대신) */
.m-list > .m-item { padding:.8rem .9rem; border-bottom:1px solid #f1f5f9; }
.m-list > .m-item:last-child { border-bottom:0; }

/* ================= 대시보드 ================= */
.kpi-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.6rem; }
@media (min-width: 768px) { .kpi-grid { grid-template-columns:repeat(3, minmax(0,1fr)); gap:.9rem; } }
@media (min-width: 1280px) { .kpi-grid { grid-template-columns:repeat(6, minmax(0,1fr)); } }
.kpi { padding:.8rem .9rem; }
.kpi .lbl { font-size:.75rem; color:#64748b; display:flex; align-items:center; gap:.35rem; }
.kpi .val { font-size:1.35rem; font-weight:800; margin-top:.15rem; line-height:1.2; }
.kpi .sub { font-size:.72rem; color:#94a3b8; margin-top:.15rem; }
.delta-up { color:#16a34a; } .delta-down { color:#dc2626; } .delta-up.bad { color:#dc2626; } .delta-down.bad { color:#16a34a; }
.dash-grid { display:grid; gap:.9rem; grid-template-columns:minmax(0,1fr); }
@media (min-width: 1024px) { .dash-grid.two { grid-template-columns:repeat(2, minmax(0,1fr)); } .dash-grid.three { grid-template-columns:2fr 1fr; } }
.panel { padding:1rem; }
.panel h3 { font-weight:700; font-size:.95rem; margin-bottom:.7rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.chart-box { position:relative; height:240px; }
@media (max-width: 767px) { .chart-box { height:200px; } .panel { padding:.85rem; } .kpi .val { font-size:1.15rem; } }
.bar-row { display:grid; grid-template-columns:5.5rem 1fr 3.2rem; align-items:center; gap:.5rem; font-size:.82rem; padding:.22rem 0; }
.bar-row .track { background:#f1f5f9; height:.55rem; border-radius:999px; overflow:hidden; }
.bar-row .fill { height:100%; border-radius:999px; }
.rank-row { display:flex; align-items:center; gap:.6rem; padding:.45rem 0; border-bottom:1px solid #f1f5f9; font-size:.86rem; }
.rank-row:last-child { border-bottom:0; }
.rank-no { width:1.5rem; height:1.5rem; border-radius:999px; background:#eef2ff; color:#4338ca; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chip { display:inline-flex; align-items:center; gap:.25rem; padding:.25rem .6rem; border-radius:999px; font-size:.78rem; background:#f1f5f9; color:#334155; border:1px solid transparent; white-space:nowrap; }
.chip.on { background:#eef2ff; color:#4338ca; border-color:#c7d2fe; font-weight:600; }
.scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .scroll-x::-webkit-scrollbar { display:none; }
.heat { text-align:center; border-radius:.3rem; font-variant-numeric:tabular-nums; }
mark { background:#fef08a; padding:0 .1rem; border-radius:.15rem; }

.r-clamp { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-4 { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* 모달: 모바일은 아래에서 올라오는 시트 */
@media (max-width: 767px) {
  .modal-card { border-radius:1rem 1rem 0 0 !important; padding-bottom:calc(1.25rem + env(safe-area-inset-bottom)) !important; animation:sheetUp .2s ease; }
  .modal-card .flex.justify-end { position:sticky; bottom:-1.25rem; background:#fff; padding-bottom:.25rem; }
}
@keyframes sheetUp { from { transform:translateY(30%); opacity:.4 } to { transform:none; opacity:1 } }

/* AI에게 질문: 모델 선택 (모바일 2열) */
.model-row { display:flex; flex-wrap:wrap; gap:.5rem; }
@media (max-width: 767px) { .model-row { display:grid; grid-template-columns:1fr 1fr; } .model-opt { min-width:0; } }
.ask-hist .truncate { max-width:100%; }
/* 안전장치: 페이지 전체가 옆으로 밀리지 않게 (내부 스크롤 영역은 각자 스크롤) */
.main { overflow-x:hidden; }
.ask-answer table { display:block; overflow-x:auto; max-width:100%; }

/* 인사이트 카드 */
.ins-grid { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }
.ins-card { padding:.9rem 1rem; display:flex; flex-direction:column; min-width:0; }
@media (max-width: 767px) { .ins-grid { grid-template-columns:1fr; } }

/* 이슈 보드 */
.issue-board { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.75rem; align-items:start; }
.issue-col { background:#f1f5f9; border-radius:.75rem; padding:.6rem; min-height:12rem; border:2px dashed transparent; transition:border-color .15s; }
.issue-col.drop { border-color:#818cf8; background:#eef2ff; }
.issue-col-head { display:flex; align-items:center; gap:.4rem; font-size:.85rem; margin:0 .2rem .5rem; }
.issue-list { display:flex; flex-direction:column; gap:.5rem; }
.issue-card { padding:.65rem .75rem; cursor:pointer; }
.issue-card:hover { border-color:#a5b4fc; }
.issue-tabs { display:flex; gap:.4rem; }
@media (max-width: 767px) {
  .issue-board { grid-template-columns:1fr; }
  .issue-col { display:none; background:transparent; padding:0; min-height:0; }
  .issue-col.on { display:block; }
  .issue-col-head { display:none; }
}

/* 알림 배지 */
.nav-badge { margin-left:auto; min-width:1.25rem; height:1.25rem; padding:0 .35rem; border-radius:999px; background:#f59e0b; color:#fff; font-size:.7rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.nav-badge.bad, .top-badge.bad { background:#ef4444; }
.top-badge { position:absolute; top:.1rem; right:.05rem; min-width:1rem; height:1rem; padding:0 .25rem; border-radius:999px; background:#f59e0b; color:#fff; font-size:.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* 주간 리포트 */
.rep-headline { font-size:1.05rem; font-weight:700; color:#312e81; background:#eef2ff; border-left:4px solid #6366f1; padding:.6rem .8rem; border-radius:.4rem; }
.rep-body h2 { font-size:1.02rem; font-weight:700; margin:1.1rem 0 .4rem; padding-bottom:.25rem; border-bottom:1px solid #e2e8f0; }
.rep-body ul { padding-left:1.1rem; list-style:disc; } .rep-body li { margin:.25rem 0; line-height:1.6; }
@media print {
  .sidebar, .topbar, .scrim, .no-print, .page-head, .toast { display:none !important; }
  .main { margin:0 !important; padding:0 !important; }
  body { background:#fff !important; }
  .card { box-shadow:none !important; border:none !important; }
  #repDoc { padding:0 !important; }
  .kpi-grid { grid-template-columns:repeat(4,1fr) !important; }
  .dash-grid { grid-template-columns:1fr 1fr !important; }
  a.cite { color:#4338ca; text-decoration:none; }
}

/* 사이드바 계정/매장 선택 (어두운 배경) */
.scope-sel { width: 100%; background: rgba(255,255,255,.08); color: #e2e8f0; border: 1px solid rgba(255,255,255,.15); border-radius: .5rem; padding: .4rem .5rem; font-size: .8rem; }
.scope-sel option { color: #0f172a; }
/* 운영자가 고객 화면 보기 중일 때 상단 바 */
.viewas-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; border-radius: .6rem; padding: .5rem .8rem; margin-bottom: 1rem; font-size: .85rem; }