/* ====================================================================
   다힘 모바일 중앙 통제 CSS — 2026-10-01
   모든 PHP 화면에 assets/dh_mobile/prepend.php 가 자동으로 싣는다.
   PC(768px 이상)는 건드리지 않는다. 휴대폰 폭에서만:
     ① 한글은 띄어쓰기에서만 줄을 바꾼다(«수익 분/석» 처럼 단어 중간에서 꺾여
        글자가 세로로 쌓이는 것 방지). 칸이 그래도 좁으면 표·줄은 dh_mobile.js 가
        가로 스크롤 상자로 바꿔 좌우로 밀어 볼 수 있게 한다.
     ② 그림·영상·틀은 화면 폭을 넘지 않는다.
   빼기: 요소에 data-dh-mobile="off" (그 안은 손대지 않음)
   ==================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 767.98px) {
    /* ① 단어 중간 꺾임 금지 — :where 로 명시도 0, 페이지가 !important 로 정한 곳은 그쪽이 이긴다 */
    body :where(*:not(pre):not(code):not(kbd):not(samp):not(textarea):not([data-dh-mobile="off"]):not([data-dh-mobile="off"] *)) {
        word-break: keep-all !important;
        overflow-wrap: break-word;
    }
    body { word-break: keep-all; overflow-wrap: break-word; }

    /* ② 매체는 화면 폭 안으로 */
    /* (canvas 는 빼 둔다 — 화면 크기만 줄이면 판서·서명 좌표가 어긋나는 화면이 있다) */
    :where(img, video, iframe, embed, object):not([data-dh-mobile="off"] *) { max-width: 100%; }

    /* ③ dh_mobile.js 가 쓰는 상자 */
    .dhm-xscroll {
        display: block; width: 100%; max-width: 100%;
        overflow-x: auto !important; -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .dhm-xscroll > table { margin-bottom: 0; }
    /* 가로로 밀 수 있다는 표시(오른쪽 가장자리 그림자) */
    /* (페이지 자체 요소에 붙는 .dhm-rowscroll 에는 쓰지 않는다 — 원래 배경색을 덮으므로) */
    .dhm-xscroll.dhm-more {
        background:
            linear-gradient(to left, rgba(15,23,42,.10), rgba(15,23,42,0)) right center / 14px 100% no-repeat scroll;
    }
}

@media print {
    .dhm-xscroll { overflow: visible !important; background: none !important; }
    .dhm-rowscroll { overflow: visible !important; }
}