/* --- 공통 --- */
.section_wrap {
    display: flex;
    gap: 40px;
}
.sub_navi_wrap {
    margin-bottom: 0px;
}
.title,
#calTitle {
    font-size: 20px;
}
#deliveredOnly[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 100px;
    accent-color: var(--primary-orange);
}
.visual_tit {
    padding: 20px 0;
}
.section02 {
    width: 60%;
    height: 75vh;
    margin: 0 auto;
}
.section03 {
    width: 40%;
}
.section02.stats {
  --bg:#fff; 
  --muted:#6b7280; 
  --line:#e5e7eb; 
  --ink:#111827;
  --heat:#ef4444; 
  --salad:#059669; 
  --total:#111827;
  --chip:#f3f4f6; 
  --chip-ink:#374151;
  --accent:#f97316;
}
.section02.stats .muted { color: var(--muted); }

.section02.stats .btn {
  padding: 8px 12px; 
  border: 1px solid var(--line); 
  border-radius: 8px; 
  background:#fff; 
  cursor:pointer;
}
.section02.stats .btn.outline { background:#fff; }
.section02.stats .btn:hover { background:#f9fafb; }

/* 헤더 */
.section02.stats .stats-head {
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:16px; 
  margin-bottom:16px;
}
.section02.stats .stats-head .controls { 
    display:flex; 
    flex-wrap:wrap; 
    gap:8px; 
    align-items:center; 
}
.section02.stats .stats-head label { 
    display:flex; 
    gap:6px; 
    align-items:center; 
}
.section02.stats .stats-head .inline { margin-left:8px; }

/* ========= Compact Stats (이미지 스타일) ========= */
.section02.stats {
  --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --bg:#fff;
  --chip:#f3f4f6;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans KR",sans-serif;
}
.section02.stats .matrix-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0;
}
.section02.stats .matrix-head .title{ 
    font-weight:700; 
    color:var(--ink); 
}
.section02.stats .matrix-head .controls{ 
    display:flex; 
    gap:8px; 
    align-items:center; 
}
.section02.stats .matrix-head .controls .muted{ 
    color:var(--muted); 
    font-size:14px; 
}
.section02.stats .btn{ 
    padding:6px 10px; 
    border:1px solid var(--line); 
    background:#fff; 
    border-radius:8px; 
    cursor:pointer; 
}
.section02.stats .btn:hover{ background:#f9fafb; }
.section02.stats .btn-nav{
    padding:6px 8px; 
    border:1px solid var(--line); 
    background:#fff; 
    border-radius:8px; 
    cursor:pointer; 
}
.section02.stats-compact select{ 
    padding:6px 10px; 
    border:1px solid var(--line); 
    border-radius:8px; 
    background:#fff; 
}
.section02.stats .ck-inline{ 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    color: var(--muted); 
}

.section02.stats .matrix-wrap{ 
    overflow: auto; 
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line); 
}
.section02.stats .matrix-table{ 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0; 
}
.section02.stats .matrix-table #monthlyYear,
.section02.stats .matrix-table #dailyAvgYear,
.section02.stats .matrix-table td {
    background: #fff; 
}
.section02.stats .matrix-table th,
.section02.stats .matrix-table td{
  padding: 6px 14px; 
  border-bottom: 1px solid var(--line); 
  text-align: right; 
  white-space: nowrap;
}
.section02.stats .matrix-table thead th{
  color: var(--muted); 
  font-weight: 600; 
  text-align: center;
}
.section02.stats .matrix-table .avg-col{ 
    text-align: right; 
    font-weight: 700; 
}
.matrix-table .year-col{ 
    text-align: left !important; 
    width: 84px; 
    color: var(--muted); 
    font-weight: 600; 
    min-width: 100px;
}
.section02.stats .matrix-table tbody th{ 
    color:var(--ink); 
    font-weight: 600; 
    text-align: left;
}
.section02.stats .matrix-table tbody td{ 
    color: var(--ink);
    text-align: center;
}
.section02.stats .mt24{ margin-top:24px; }

@media (max-width: 900px){
    .section02.stats .matrix-table th,
    .section02.stats .matrix-table td{ 
        padding: 8px 10px; 
        font-size: 14px; 
    }
    .section02.stats .matrix-head{ 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 6px; 
    }
}

/* 달력 */
.section02.stats .calendar-wrap { 
    padding-top: 30px;
}
.section02.stats .cal-head { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 10px; 
}
.section02.stats .legend { 
    display: flex; 
    gap: 10px; 
    align-items: center; 
    color: var(--muted); 
    font-size: 13px;
}
.section02.stats .legend .dot { 
    width: 10px; 
    height: 10px; 
    border-radius:2px; 
    display:inline-block; 
}
.section02.stats .legend .low  { background:#e5f3ff; }
.section02.stats .legend .mid  { background:#c7f9cc; }
.section02.stats .legend .high { background:#ffd6a5; }

.section02.stats .calendar { 
    border:1px solid var(--line); 
    border-radius:12px; 
    overflow:hidden; 
}
.section02.stats .cal-row.cal-weekday {
    display:grid; 
    grid-template-columns: repeat(7, 1fr);
    background:#f9fafb; 
    color:#374151; 
    font-weight:700; 
    border-bottom:1px solid var(--line);
}
.section02.stats .cal-row.cal-weekday > div { padding:8px; text-align:center; }

.section02.stats .cal-grid {
  display:grid; 
  grid-template-columns: repeat(7, 1fr);
}
.section02.stats .cal-cell {
  aspect-ratio: 1/0.65; 
  border-right:1px solid var(--line); 
  border-bottom:1px solid var(--line);
  padding:6px; 
  position:relative; 
  overflow:hidden; 
  background:#fff;
}
.section02.stats .cal-cell:nth-child(7n) { border-right:none; }
.section02.stats .cal-cell .date {
  font-size: 14px; 
  color: #6b7280; 
  position: absolute; 
  top:6px; left:6px;
}
.section02.stats .cal-cell .cnt {
  font-size:16px; 
  font-weight:700; 
  color:#111827; 
  position:absolute; 
  bottom:8px; 
  right:8px;
}
.section02.stats .cal-cell.is-empty { background:#fafafa; }
.section02.stats .cal-cell .heat { background:#ffedd5; }
.section02.stats .cal-cell[data-level="0"] { background:#f8fafc; }
.section02.stats .cal-cell[data-level="1"] { background:#e5f3ff; }
.section02.stats .cal-cell[data-level="2"] { background:#c7f9cc; }
.section02.stats .cal-cell[data-level="3"] { background:#ffd6a5; }
.section02.stats .cal-cell[data-level="4"] { background:#ffc6c7; }

/* 툴팁 */
.section02.stats .cal-tooltip{
  position:fixed; 
  z-index:10; 
  background:#111827; 
  color:#fff;
  padding:8px 10px; 
  border-radius:8px; 
  font-size:12px; 
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  pointer-events:none;
}
/* ====== section 03 ======*/
.section03 .title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
}
.section03 .sub_title {
    font-size: 16px;
    font-weight: 500;
    color: #767676;
    margin-top: 8px;
}
.section03 {
    display: flex;
    gap: 20px;
    margin-top: 0;
}
.date_group {
    display: flex;
    gap: 10px;
}
.date_input_wrap {
    flex: 1;
    padding: 20px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: center;
}
.date_input_wrap input[type="date"] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}
.date_input_wrap input[type="date"]::-webkit-calendar-picker-indicator {
     display: none;
}
.tip {
    align-items: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    font-size: 30px;
}
.excel_download_btn {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-green);
    border-radius: 10px;
    padding: 20px 10px;
    color: white;
    font-size: 20px;
    transition: all 0.3s;
    cursor: pointer;
    font-weight: 500;
}
.excel_download_btn:hover {
    background-color: var(--primary-brown);
}
.icon_excel {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: currentColor;
  -webkit-mask: url("../public/icon/excel.svg") center/contain no-repeat;
          mask: url("../public/icon/excel.svg") center/contain no-repeat;
}

/* ====== section 03 end ====== */

/* 반응형 */
@media (max-width: 960px){
  .section02.stats .summary-cards { grid-template-columns: 1fr; }
  .section02.stats .stats-head { 
    flex-direction:column; 
    align-items:flex-start; 
    gap:10px; 
}
  .section02.stats .stats-head .controls { width:100%; gap:6px; }
  .section02.stats .calendar .cal-row.cal-weekday { font-size:12px; }
}