@media (max-width: 768px) {
    .section-header {
        display: flex;
        flex-direction: column;
    }

    .section-header .com-btn {
        width: 50%;
        margin-bottom: 10px;
        white-space: nowrap;
    }

    .btn-area {
        display: flex;
        gap: 5px;
    }

    .new-paging {
        gap: 4px;
    }

    .new-paging a,
    .new-paging strong {
        min-width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 13px;
    }

    /* 테이블 구조 해제 */
    .search-tbl,
    .search-tbl tbody,
    .search-tbl tr,
    .search-tbl th,
    .search-tbl td {
        display: block;
        width: 100%;
    }

    /* row 간격 */
    .search-tbl tr {
        margin-bottom: 12px;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
    }

    /* label(th) */
    .search-tbl th {
        font-weight: 600;
        margin-bottom: 6px;
    }

    /* input 영역(td) */
    .search-tbl td {
        padding-left: 0;
    }

    /* 체크/라디오 줄바꿈 */
    .search-tbl .i-wrap {
        display: inline-flex;
        margin-bottom: 6px;
    }

    /* select + input 검색 */
    .search-tbl select,
    .search-tbl input[type="text"],
    .search-tbl input[type="date"] {
        width: 100%;
    }

    /* 검색 버튼 */
    .search-tbl .com-btn {
        width: 100%;
        margin-top: 8px;
    }

    .state-wrap {
        flex-wrap: wrap; /* 줄바꿈 허용 */
        gap: 12px; /* 박스 간격 */
        padding-top: 12px;
    }

    .state-box {
        margin-right: 0; /* 기존 20px 제거 (gap으로 대체) */
        min-width: 0; /* ✅ 모바일에서 min-width 해제 */
        flex: 1 1 calc(50% - 12px); /* 기본 2열 */
        padding: 16px 16px;
    }

    .state-box .box-title span {
        font-size: 20px;
    }

    .real-time-btn-area {
        margin-top: 8px;
    }

    .fl-l .c-select {
        margin-bottom: 8px;
    }

    .main-btn-box {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        max-width: 100%;
    }

    .main-btn-box > .com-btn {
        padding: 5px 8px !important;
        font-size: 12px !important;
        margin: 0 !important;
    }

    .date-navi .navi-btm {
        position: relative; /* 기존 유지 */
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0 4px;
    }

    /* absolute 해제해서 줄바꿈/겹침 방지 */
    .date-navi .navi-btm .prev,
    .date-navi .navi-btm .next {
        position: static;
        display: flex;
        align-items: center;
        gap: 6px;
        z-index: auto;
        flex: 1 1 0;
        min-width: 0;
    }

    .date-navi .navi-btm .prev {
        justify-content: flex-start;
    }

    .date-navi .navi-btm .next {
        justify-content: flex-end;
    }

    .date-navi .navi-btm .selected {
        flex: 0 0 auto;
        font-size: 14px;
        line-height: 16px;
        white-space: nowrap;
    }

    /* 화살표 버튼도 absolute 해제 */
    .date-navi .navi-btm a.btn-prev,
    .date-navi .navi-btm a.btn-next {
        position: static;
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }

    /* 텍스트는 길면 ... 처리 */
    .date-navi .navi-btm a.btn-text {
        display: block;
        font-size: 11px;
        line-height: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    /* 기존 200px 마진 제거 */
    .date-navi .navi-btm .prev a.btn-text {
        margin-left: 0;
    }

    .date-navi .navi-btm .next a.btn-text {
        margin-right: 0;
    }

    .studyroom-state-wrap .head .row {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navi-top {
        gap: 4px;
    }

    .time-input {
        max-width: 100%;
    }

    /* 기존 absolute/time 보정 제거: flex 흐름에 포함시키기 */
    .studyroom-state-wrap.day-res .head .row,
    .studyroom-state-wrap.day-res .body .row.back {
        padding-left: 0 !important; /* 기존 60px 밀어내기 제거 */
    }

    /* 시간칸 */
    .studyroom-state-wrap.day-res .head .row .column.time,
    .studyroom-state-wrap.day-res .body .row.back .column.time {
        position: relative !important; /* 기존 absolute 제거 */
        left: auto !important;
        top: auto !important;
        width: 60px !important;
        flex: 0 0 60px; /* ✅ 고정폭 */
    }

    /* 헤더의 스터디룸 칸들 */
    .studyroom-state-wrap.day-res .head .row .column:not(.time) {
        flex: 1 0 140px; /* ✅ 동일 폭 + 최소폭(원하는 값으로 조절) */
        min-width: 140px;
    }

    /* 바디의 스터디룸 칸들 */
    .studyroom-state-wrap.day-res .body .row.back .column.line {
        flex: 1 0 140px; /* ✅ 헤더랑 동일 */
        min-width: 140px;
    }

    /* (선택) 헤더와 바디가 같은 총 너비를 가지도록 */
    .studyroom-state-wrap.day-res .head,
    .studyroom-state-wrap.day-res .body {
        width: max-content;
    }


    /* 전체 영역: 모바일에선 가로 스크롤 허용 */
    .studyroom-state-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .studyroom-state-wrap .head {
        width: max-content !important;
    }

    /* 헤더/바디 row를 "7칸 고정 너비"가 아니라
       최소 너비를 주고 가로스크롤로 보이게 */
    .studyroom-state-wrap .head .row.month,
    .studyroom-state-wrap .body .row.month {
        flex-wrap: wrap !important;
        width: max-content;
        min-width: 700px; /* 7일 * 100px 정도. 필요시 조절 */
    }

    /* 월 헤더(요일) 높이/폰트 줄이기 */
    .studyroom-state-wrap .head .row.month .column,
    .studyroom-state-wrap .body .row.month .column {
        flex: 0 0 calc(100% / 7) !important; /* 한 줄에 항상 7개 */
        max-width: calc(100% / 7) !important;
        box-sizing: border-box;
    }

    /* 날짜 표시 */
    .studyroom-state-wrap .body .row.month .column p.day {
        font-size: 12px;
        padding: 0 4px;
    }

    /* 예약 리스트 */
    .studyroom-state-wrap .body .row.month .column .rsv-list {
        margin-top: 4px;
        font-size: 10px;
    }

    .studyroom-state-wrap .body .row.month .column .rsv-list li {
        margin-bottom: 4px;
    }

    /* 예약 태그(스터디룸명) - 길면 말줄임 */
    .studyroom-state-wrap .body .row.month .column .rsv-list li a {
        max-width: 100%;
        padding: 2px 4px;
        border-radius: 3px;
        margin-right: 6px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    /* 사용자명/시간도 터지지 않게 */
    .studyroom-state-wrap .body .row.month .column .rsv-list li span,
    .studyroom-state-wrap .body .row.month .column .rsv-list li div {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* "등록" 버튼: 겹침 방지 + 터치 영역 최소 확보 */
    .studyroom-state-wrap .body .row.month .column a[onclick*="createResForm"] {
        right: 6px !important;
        bottom: 6px !important;
        padding: 4px 6px !important;
        font-size: 11px;
        line-height: 1;
    }

    /* 오늘 표시 문구가 너무 길면(‘오늘’ before) 크기만 축소 */
    .studyroom-state-wrap .body .row.month .column.today p.day::before {
        margin-right: 6px;
        font-size: 11px;
    }

    /* 박스: 가로 → 세로 */
    .sale-status .status-box {
        flex-direction: column;
        padding: 16px 14px; /* 기존 30/40 축소 */
        gap: 14px;
    }

    /* summary: 고정폭 제거 + 구분선 방향 변경 */
    .sale-status .status-box .summary {
        width: 100%;
        padding-right: 0;
        border-right: 0;

        padding-bottom: 12px;
        border-bottom: 1px solid #E6E6E6;
    }

    /* 합계 영역: 간격 줄이기 */
    .sale-status .status-box .summary .sum {
        padding-bottom: 12px;
        margin-bottom: 12px;
        justify-content: space-between; /* space-around -> 균형 */
        gap: 10px;
    }

    .sale-status .status-box .summary .sum dl dt {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .sale-status .status-box .summary .sum dl dd {
        font-size: 12px;
    }

    .sale-status .status-box .summary .sum dl dd strong {
        font-size: 18px;
        padding-right: 4px;
    }

    /* detail: 폰트/행간/여백 축소 */
    .sale-status .status-box .summary .detail dl {
        margin-bottom: 10px;
    }

    .sale-status .status-box .summary .detail dl dt,
    .sale-status .status-box .summary .detail dl dd {
        font-size: 12px;
    }

    /* 너무 길면 줄바꿈/말줄임 선택 */
    .sale-status .status-box .summary .detail dl dt {
        width: 42%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sale-status .status-box .summary .detail dl dd {
        width: 29%;
    }

    .sale-status .status-box .summary .detail dl dd:nth-child(3) {
        width: 29%;
    }

    /* chart: padding 제거 + 캔버스 높이 확보 */
    .sale-status .status-box .chart {
        padding-left: 0;
        width: 100%;
    }

    /* 차트가 너무 작아지는 것 방지 (chart.js responsive면 특히 도움) */
    .sale-status .status-box .chart canvas {
        width: 100% !important;
        height: 240px !important; /* 필요시 200~280 조절 */
        display: block;
    }

    .period-box .search > * {
        margin-bottom: 5px;
    }

    .period-box .search .self .com-btn {
        margin-top: 5px;
    }

    .view-tbl {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .view-tbl pre {
        white-space: pre-wrap; /* ⬅ 핵심 */
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* 전체 래퍼: 세로 스택 */
    .com-tab {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* 탭 영역 */
    .com-tab > ul {
        order: 1;
        display: flex;
        flex-wrap: wrap; /* 탭 많으면 줄바꿈 */
        gap: 6px;
    }

    .com-tab > ul li {
        flex: 1 1 auto;
    }

    .com-tab > ul li a {
        display: block;
        text-align: center;
        font-size: 12px;
        padding: 8px 6px;
        white-space: nowrap;
    }

    /* 버튼 영역: 아래로 내려서 오른쪽 정렬 */
    /* ✅ 버튼 영역을 위로 */
    .com-tab > div {
        order: 0; /* 맨 위 */
        position: static !important; /* bottom:10px 무효화 */
        align-self: flex-start; /* 왼쪽 정렬 (원하면 center/end) */
    }

    .com-tab .com-btn {
        font-size: 12px;
        padding: 6px 10px;
    }

    .com-tab .com-btn.icn {
        padding-left: 28px; /* 아이콘 공간 확보 */
        background-position: 8px center; /* 아이콘 위치 재조정 */
        background-size: 14px auto; /* 아이콘 크기 (필요시) */
    }

    .statistics-summary {
        padding: 16px 14px; /* 30 40 -> 축소 */
    }

    /* 3열/4열 모두 2열로 */
    .statistics-summary .summary-grid,
    .statistics-summary .summary-grid.count-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .statistics-summary .summary-grid .summary-item {
        min-height: 68px;
        gap: 6px;
    }

    /* 타이틀: 줄바꿈 허용 + 말줄임(원하면) */
    .statistics-summary .summary-grid .summary-item .title {
        white-space: normal; /* 기존 nowrap 해제 */
        overflow-wrap: anywhere;
        line-height: 1.2;
        font-size: 13px;
    }

    .statistics-summary .summary-grid .summary-item .count {
        font-size: 20px;
    }

    .statistics-summary .summary-grid .summary-item .date {
        font-size: 11px;
        line-height: 1.2;
        word-break: break-word;
    }

    .statistics-user{
        padding: 16px;
    }

    /* 3개(가로) -> 세로 1개씩 */
    .statistics-user .user-grid{
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .statistics-user .user-grid .user-item{
        font-size: 13px;
    }
    .statistics-user .user-grid .user-item .sub{
        font-size: 11px;
    }

    /* 차트 + 레전드: 모바일에선 세로로 */
    .user-item .chart-wrapper{
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .user-item .chart-wrapper canvas{
        max-width: 100%;
        width: 100% !important;
        height: 180px !important;   /* 필요하면 160~220 조절 */
    }

    .user-item .chart-wrapper .chart-legend{
        font-size: 12px;
        line-height: 1.35;
    }

    .usage-mobile .h-tit-box{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    /* 탭 그룹: 모바일에서 줄바꿈 */
    .usage-mobile .tab-group.usage{
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .usage-mobile .tab-group.usage .tab-btn{
        flex: 1 1 auto;
        font-size: 12px;
        padding: 6px 8px;
        text-align: center;
        white-space: nowrap;
    }

    /* 차트 영역 패딩 축소 */
    .usage-mobile .statistics-usage{
        padding: 16px;
    }

    .summary-container-grid{
        display: grid;
        grid-template-columns: 1fr;   /* 2열 원하면: repeat(2, 1fr) */
        gap: 12px;
    }
    .summary-container-grid .statistics-summary{
        padding: 16px 16px;          /* 기존 30/40 너무 큼 */
    }
    .summary-container-grid .count{ font-size: 20px; }

    /* 좌우 → 세로 */
    .chart-container-wrapper{
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* 차트 카드 패딩 축소 */
    .statistics-usage.chart-center-wrap{
        padding: 16px;
    }

    /* 캔버스 높이 모바일 최적화 */
    .statistics-usage.chart-center-wrap canvas{
        width: 100% !important;
        height: 220px !important;   /* 기존 320 → 모바일 */
    }

    /* 중앙 텍스트 오버레이 축소 */
    .statistics-usage.chart-center-wrap .center-text-overlay{
        transform: translate(-50%, -50%) scale(0.9);
    }

    .statistics-usage.chart-center-wrap .center-text-overlay .total-label{
        font-size: 12px;
    }

    .statistics-usage.chart-center-wrap .center-text-overlay .total-value{
        font-size: 18px;
    }

    .summary-container-grid-3{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .summary-container-grid-3 .statistics-summary{
        padding: 16px;
    }

    .summary-container-grid-3 .summary-item .title{
        font-size: 12px;
        white-space: normal;        /* 제목 줄바꿈 허용 */
        line-height: 1.2;
    }

    .summary-container-grid-3 .summary-item .count{
        font-size: 20px;
    }

    /* ✅ 매출 캘린더(8칸) 전용: 7일 + 주별합계 = 8칸 고정 */
    .studyroom-state-wrap.sale-calendar .head .row.month,
    .studyroom-state-wrap.sale-calendar .body .row.month{
        /* 기존 월간 CSS에서 min-width 14.28% 잡는 규칙 무력화 */
        flex-wrap: wrap;              /* 주 단위로 줄바꿈 */
        padding-left: 0;              /* 이미 0 쓰고 있지만 안전 */
    }

    /* 헤더 + 바디 공통: 8칸(12.5%) 고정 */
    .studyroom-state-wrap.sale-calendar .head .row.month .column,
    .studyroom-state-wrap.sale-calendar .body .row.month.data .column{
        flex: 0 0 12.5% !important;
        max-width: 12.5% !important;
        min-width: 12.5% !important;  /* 기존 14.28% 덮어쓰기 */
        box-sizing: border-box;
    }

    /* 우측 테두리 정리(8번째마다 끊기) */
    .studyroom-state-wrap.sale-calendar .head .row.month .column:nth-child(8n),
    .studyroom-state-wrap.sale-calendar .body .row.month.data .column:nth-child(8n){
        border-right: none;
    }

    .dashboard-text{
        font-size: 13px;
    }
}