/* 개발자 안내: 리포트와 통계의 필터·수치·표 레이아웃. 화면 수치는 서버 조회값이며 CSS에서 상태 의미를 바꾸지 않는다. */
.ecm-analytics{
    --bg: #FAF9F7; --panel: #ffffff; --line: #e6e8ec; --line-soft: #f0f1f4;
    --text: #220901; --sub: #6b7280; --muted: #9aa1ac;
    --brand: #941B0C; --brand-soft: #FFF3DC; --brand-dark: #621708;
    --blue: #621708; --green: #BC3908; --purple: #941B0C; --orange: #F6AA1C; --red: #220901; --sky: #BC3908;
    --warn-bg: #fff8e8; --warn-line: #f5d58a; --warn-text: #8a6100;
  }
.ecm-analytics *{ box-sizing: border-box; }
.ecm-analytics{ margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; }
.ecm-analytics button{ font: inherit; cursor: pointer; }
.ecm-analytics .topbar{ display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: #fff; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--sub); }
.ecm-analytics .topbar b{ color: var(--brand-dark); }
.ecm-analytics .layout{ display: grid; grid-template-columns: 228px 1fr; min-height: calc(100vh - 41px); }
.ecm-analytics aside{ background: #fff; border-right: 1px solid var(--line); padding: 22px 14px; }
.ecm-analytics .logo{ font-size: 22px; font-weight: 800; padding: 0 12px 20px; letter-spacing: -0.3px; }
.ecm-analytics .logo span{ color: #941B0C; }
.ecm-analytics .nav-group{ padding: 11px 12px; border-radius: 8px; color: var(--sub); font-weight: 500; }
.ecm-analytics .nav-group.open{ background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.ecm-analytics .nav-sub{ display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px 9px 30px; border-radius: 6px; color: var(--sub); }
.ecm-analytics .nav-sub.active{ background: #eef0f3; color: var(--text); font-weight: 600; }
.ecm-analytics .nav-sub:hover{ background: #f3f4f6; }
.ecm-analytics .nav-dim{ padding: 11px 12px; color: #b7bcc4; }
.ecm-analytics main{ padding: 22px 28px 60px; min-width: 0; }
.ecm-analytics .crumb{ font-size: 13px; color: var(--sub); }
.ecm-analytics .crumb b{ color: var(--brand-dark); font-weight: 600; }
.ecm-analytics .head{ display: flex; justify-content: space-between; align-items: flex-end; margin: 8px 0 16px; gap: 12px; }
.ecm-analytics h1{ font-size: 28px; margin: 0; letter-spacing: -0.5px; }
.ecm-analytics .desc{ color: var(--sub); font-size: 13px; margin-top: 4px; }
.ecm-analytics .btn{ border: 1px solid #d5d9df; background: #fff; border-radius: 6px; padding: 7px 14px; color: var(--text); }
.ecm-analytics .btn:hover{ background: #f7f8fa; }
.ecm-analytics .tabs{ display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ecm-analytics .tab{ border: 1px solid #d5d9df; background: #fff; border-radius: 6px; padding: 7px 16px; }
.ecm-analytics .tab.active{ background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.ecm-analytics .card{ background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; }
.ecm-analytics .filter-row{ display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ecm-analytics .field{ display: flex; flex-direction: column; gap: 6px; min-width: 170px; flex: 1; }
.ecm-analytics .field label{ font-size: 12px; color: var(--sub); }
.ecm-analytics .field input,.ecm-analytics .field select{ height: 36px; border: 1px solid #d5d9df; border-radius: 6px; padding: 0 10px; font: inherit; background: #fff; }
.ecm-analytics .seg{ display: inline-flex; background: #f3f4f6; border-radius: 8px; padding: 3px; }
.ecm-analytics .seg button{ border: 0; background: none; padding: 5px 14px; border-radius: 6px; color: var(--sub); white-space: nowrap; }
.ecm-analytics .seg button.active{ background: #fff; color: var(--brand-dark); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ecm-analytics .asof{ font-size: 12px; color: var(--muted); margin-left: auto; }
.ecm-analytics .note{ border: 1px solid var(--warn-line); background: var(--warn-bg); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: var(--warn-text); }
.ecm-analytics .note summary{ cursor: pointer; font-weight: 700; }
.ecm-analytics .note ul{ margin: 8px 0 2px; padding-left: 18px; }
.ecm-analytics .note li{ margin: 2px 0; }
.ecm-analytics .sec-title{ display: flex; align-items: baseline; gap: 8px; margin: 18px 0 10px; }
.ecm-analytics .sec-title h2{ font-size: 15px; margin: 0; color: var(--brand-dark); }
.ecm-analytics .sec-title span{ font-size: 12px; color: var(--muted); }
.ecm-analytics .kpis{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ecm-analytics .kpis.four{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ecm-analytics .kpi{ background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-height: 150px; display: flex; flex-direction: column; }
.ecm-analytics .kpi .label{ font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: flex-start; gap: 4px 6px; flex-wrap: wrap; }
.ecm-analytics .kpi .body{ flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 6px 0; }
.ecm-analytics .kpi .big{ font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.ecm-analytics .kpi .big small{ font-size: 14px; font-weight: 500; color: var(--sub); margin-left: 2px; }
.ecm-analytics .kpi .foot{ font-size: 12px; color: var(--muted); }
.ecm-analytics .badge{ display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-line); white-space: nowrap; }
.ecm-analytics .grid2{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ecm-analytics .panel-head{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.ecm-analytics .panel-head h3{ margin: 0; font-size: 16px; }
.ecm-analytics .panel-head p{ margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.ecm-analytics table{ width: 100%; border-collapse: collapse; font-size: 13px; }
.ecm-analytics th{ background: #f7f8fa; color: var(--sub); font-weight: 600; text-align: right; padding: 8px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ecm-analytics td{ padding: 8px 10px; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
.ecm-analytics th:first-child,.ecm-analytics td:first-child{ text-align: left; }
.ecm-analytics tfoot td{ font-weight: 700; background: #fafbfc; border-top: 1px solid var(--line); }
.ecm-analytics .table-wrap{ overflow-x: auto; }
.ecm-analytics .small{ font-size: 12px; color: var(--muted); margin-top: 8px; }
.ecm-analytics .chart{ width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto; }
.ecm-analytics .legend{ display: flex; justify-content: center; gap: 14px; font-size: 12px; color: var(--sub); margin-top: 4px; }
.ecm-analytics .legend i{ display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.ecm-analytics .compare{ display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; font-size: 13px; color: var(--sub); }
.ecm-analytics .compare button{ border: 1px solid #d5d9df; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12px; }
.ecm-analytics .compare button.active{ border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); font-weight: 700; }
.ecm-analytics .pager{ display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--sub); }
.ecm-analytics .target-row{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 10px; }
.ecm-analytics .target-row div span{ display: block; font-size: 12px; color: var(--sub); }
.ecm-analytics .target-row div b{ font-size: 20px; }
.ecm-analytics .catalog{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ecm-analytics .cat-item{ display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.ecm-analytics .cat-item.off{ color: #b0b6bf; text-decoration: line-through; }
.ecm-analytics .cat-item .why{ text-decoration: none; display: inline-block; font-size: 11px; color: var(--warn-text); margin-left: 6px; }
.ecm-analytics .modal-bg{ position: fixed; inset: 0; background: rgba(15, 20, 25, .4); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 10; }
.ecm-analytics .modal-bg.show{ display: flex; }
.ecm-analytics .modal{ background: #fff; border-radius: 14px; max-width: 640px; width: 100%; max-height: 86vh; overflow: auto; padding: 22px 24px; }
.ecm-analytics .modal h3{ margin: 0 0 10px; }
.ecm-analytics .modal dl{ margin: 0; font-size: 13px; }
.ecm-analytics .modal dt{ font-weight: 700; margin-top: 12px; }
.ecm-analytics .modal dd{ margin: 3px 0 0; color: var(--sub); }
@media (max-width: 1100px){.ecm-analytics .kpis{ grid-template-columns: repeat(3, 1fr); }
.ecm-analytics .grid2,.ecm-analytics .catalog{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){.ecm-analytics .layout{ grid-template-columns: 1fr; }
.ecm-analytics aside{ display: none; }
.ecm-analytics main{ padding: 16px; }
.ecm-analytics .kpis,.ecm-analytics .kpis.four{ grid-template-columns: repeat(2, 1fr); }
.ecm-analytics .target-row{ grid-template-columns: repeat(2, 1fr); }
}
@media print{.ecm-analytics aside,.ecm-analytics .topbar,.ecm-analytics .note,.ecm-analytics .head .btn{ display: none; }
.ecm-analytics .layout{ grid-template-columns: 1fr; }
}

.ecm-analytics{width:100%;min-width:0;padding:22px 24px 60px;line-height:1.5;font-family:var(--pretendard-regular-font),"Malgun Gothic",sans-serif}
.ecm-analytics h1,.ecm-analytics h2,.ecm-analytics h3,.ecm-analytics p{margin-top:0}
.ecm-analytics .card{box-shadow:none;display:block}
.ecm-analytics .field input,.ecm-analytics .field select{width:100%;min-width:0;color:var(--text)}
.ecm-analytics .btn,.ecm-analytics .tab{font-size:13px;line-height:1.5;display:inline-block;min-height:34px}
.ecm-analytics .card:has(+.sec-title){margin-bottom:14px}
.ecm-analytics .kpis+.card{margin-top:14px}
.ecm-analytics .table-wrap table{table-layout:auto;min-width:100%}
.ecm-analytics .table-wrap th,.ecm-analytics .table-wrap td{font-size:12px}
.ecm-analytics button:disabled{opacity:.45;cursor:default}
.ecm-analytics .empty-banner{border:1px solid var(--line);padding:10px 14px;background:#fff;color:var(--sub);border-radius:8px;margin-bottom:14px;font-size:13px}
.ecm-analytics .loading{padding:60px;text-align:center;color:var(--sub)}
.ecm-analytics .error{padding:24px;border:1px solid #C8A89F;background:#fff;color:#621708;border-radius:8px}
.ecm-analytics .chart:empty{height:230px}
.ecm-analytics.dialog-content{padding:0;background:#fff}
.ecm-analytics.dialog-content .field{margin-bottom:14px}
.ecm-analytics.dialog-content dl{margin:0}
.ecm-analytics.dialog-content dt{font-weight:700;margin-top:14px}
.ecm-analytics.dialog-content dd{margin:4px 0;color:var(--sub);font-size:13px}
.ecm-analytics .head-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
@media(max-width:1550px){.ecm-analytics .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.ecm-analytics .kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1100px){.ecm-analytics .target-row{grid-template-columns:repeat(3,minmax(0,1fr))}.ecm-analytics .kpis.four{grid-template-columns:repeat(2,minmax(0,1fr))}.ecm-analytics .head{align-items:flex-start;flex-direction:column}}
@media(max-width:760px){.ecm-analytics{padding:16px}.ecm-analytics .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ecm-analytics .seg{flex-wrap:wrap}.ecm-analytics .target-row{grid-template-columns:repeat(2,minmax(0,1fr))}.ecm-analytics .asof{margin-left:0}}
@media print{body:has(.ecm-analytics) #sidebar,body:has(.ecm-analytics) .Sidebar_container__6ViGD,body:has(.ecm-analytics) .Header_container__7FxWA,body:has(.ecm-analytics) #toasts{display:none!important}body:has(.ecm-analytics) #page{padding:0!important;margin:0!important;width:100%!important}.ecm-analytics{padding:0;background:#fff}.ecm-analytics .head-actions,.ecm-analytics .tabs,.ecm-analytics .compare button,.ecm-analytics .pager,.ecm-analytics [data-action=target],.ecm-analytics [data-export]{display:none!important}.ecm-analytics .kpi,.ecm-analytics .card{break-inside:avoid}.ecm-analytics .grid2{grid-template-columns:1fr 1fr}.ecm-analytics .chart{max-height:210px}.ecm-analytics .table-wrap{overflow:visible}}

/* Readable desktop scale; screen-only so report printing keeps its page layout. */
@media screen {
  .ecm-analytics{font-size:var(--ecm-font-body,16px);line-height:1.55;padding:28px 30px 56px;--muted:#756C67;--sub:#665B55}
  .ecm-analytics:not(.dialog-content){container-name:ecmAnalytics;container-type:inline-size}
  .ecm-analytics h1{font-size:32px;line-height:1.3}
  .ecm-analytics .head{align-items:flex-start;flex-wrap:wrap;gap:16px;margin:10px 0 22px}
  .ecm-analytics .head-actions{max-width:100%;flex-shrink:1}
  .ecm-analytics .crumb,.ecm-analytics .desc,.ecm-analytics .field label,
  .ecm-analytics .asof,.ecm-analytics .note,.ecm-analytics .sec-title span,
  .ecm-analytics .kpi .foot,.ecm-analytics .panel-head p,.ecm-analytics .small,
  .ecm-analytics .legend,.ecm-analytics .pager,.ecm-analytics .target-row div span,
  .ecm-analytics .cat-item .why,.ecm-analytics .empty-banner,
  .ecm-analytics.dialog-content dd{font-size:var(--ecm-font-small,14px)}
  .ecm-analytics .desc{margin-top:7px}
  .ecm-analytics .btn,.ecm-analytics .tab{font-size:16px;min-height:44px;padding:9px 16px;line-height:1.5}
  .ecm-analytics .tabs{gap:10px;margin-bottom:18px}
  .ecm-analytics .field{flex:1 1 190px;min-width:0;gap:8px}
  .ecm-analytics .field input,.ecm-analytics .field select{height:44px;padding:0 12px;font-size:16px}
  .ecm-analytics .filter-row{gap:16px}
  .ecm-analytics .seg{max-width:100%;flex-wrap:wrap}
  .ecm-analytics .seg button{font-size:15px;min-height:38px;padding:7px 15px}
  .ecm-analytics .card{padding:22px 24px;margin-bottom:18px;min-width:0}
  .ecm-analytics .sec-title{gap:10px;flex-wrap:wrap;margin:22px 0 12px}
  .ecm-analytics .sec-title h2,.ecm-analytics .panel-head h3{font-size:20px;line-height:1.4}
  .ecm-analytics .panel-head{gap:14px;flex-wrap:wrap;margin-bottom:14px}
  .ecm-analytics .kpis{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
  .ecm-analytics .kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ecm-analytics .kpi{padding:18px;min-width:0;min-height:176px}
  .ecm-analytics .kpi .label{font-size:16px;line-height:1.4;gap:8px}
  .ecm-analytics .kpi .big{font-size:34px;line-height:1.35}
  .ecm-analytics .kpi .big small{font-size:16px}
  .ecm-analytics .badge{font-size:13px;padding:3px 9px}
  .ecm-analytics .grid2,.ecm-analytics .catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .ecm-analytics .grid2>*,.ecm-analytics .catalog>*{min-width:0}
  .ecm-analytics .table-wrap{max-width:100%;min-width:0;overflow:auto;overscroll-behavior-x:contain}
  .ecm-analytics table,.ecm-analytics .table-wrap th,.ecm-analytics .table-wrap td{font-size:15px;line-height:1.55}
  .ecm-analytics th,.ecm-analytics td{padding:12px 14px}
  .ecm-analytics .chart{max-width:760px;overflow:visible}
  .ecm-analytics .chart text{font-size:14px}
  .ecm-analytics .legend{flex-wrap:wrap;gap:8px 18px}
  .ecm-analytics .compare{font-size:15px;gap:8px}
  .ecm-analytics .compare button{font-size:14px;min-height:38px;padding:7px 14px}
  .ecm-analytics .pager{flex-wrap:wrap}
  .ecm-analytics .target-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .ecm-analytics .target-row div b{font-size:26px}
  .ecm-analytics .cat-item{font-size:16px;align-items:flex-start;padding:12px 0;flex-wrap:wrap}
  .ecm-analytics .cat-item>span[style]{font-size:14px!important}
  .ecm-analytics.dialog-content{padding:0}
  .ecm-analytics .modal dl{font-size:16px}
  @container ecmAnalytics (max-width:1180px){
    .ecm-analytics .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
    .ecm-analytics .kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
  }
  @container ecmAnalytics (max-width:880px){
    .ecm-analytics .grid2,.ecm-analytics .catalog{grid-template-columns:1fr}
    .ecm-analytics .kpis.four{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ecm-analytics .target-row{grid-template-columns:repeat(3,minmax(0,1fr))}
    .ecm-analytics .head{flex-direction:column}
  }
  @container ecmAnalytics (max-width:580px){
    .ecm-analytics .kpis,.ecm-analytics .kpis.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .ecm-analytics .target-row{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ecm-analytics .card{padding:18px 16px}
    .ecm-analytics .kpi{padding:14px;min-height:160px}
    .ecm-analytics .asof{margin-left:0}
  }
}
@media screen and (max-width:760px){.ecm-analytics{padding:20px 16px 40px}.ecm-analytics h1{font-size:28px}.ecm-analytics.dialog-content{padding:0}}
.ecm-analytics .operation-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ecm-analytics .operation-summary>div{display:flex;flex-direction:column;gap:8px}
.ecm-analytics .operation-summary span{color:var(--sub);font-size:15px}
.ecm-analytics .operation-summary b{font-size:28px;color:var(--text)}
.ecm-analytics .operation-summary small{font-size:15px;font-weight:500;margin-left:5px}
.ecm-analytics .field .ecm-multi{width:100%;min-width:0}
.ecm-analytics .field .ecm-multi input[type=checkbox]{padding:0;width:18px;height:18px;min-height:18px}
@media screen and (max-width:1000px){.ecm-analytics .operation-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
