/* 반응형 공통 — 바깥 창 960px 미만은 모바일, 960px 이상은 PC ────────────────────────────────────────────── 기준은 화면 배율을 되돌린 모니터 픽셀이다. 1920 모니터를 반으로 붙이면 960이라 PC가 된다. html[data-layout="mobile"] 일 때만 이 파일의 모바일 규칙이 적용된다. 모바일 1. 350px까지는 페이지 가로 스크롤이 없다. 그보다 좁을 때만 생긴다. 2. 세로는 헤더와 본문을 포함한 브라우저 스크롤 하나만 쓴다. 3. 여러 열로 나뉜 것은 한 열로 쌓고, 호버 팝오버는 숨긴다. */ /* ── 1. 바깥 창 959px 이하는 가로로 화면에 맞춘다 ── */ html:where([data-layout="mobile"]){ min-width: 350px; } html:where([data-layout="mobile"]), :where(html[data-layout="mobile"]) body{ height: auto !important; max-height: none !important; overflow: visible !important; } :where(html[data-layout="mobile"]) body{ display: block !important; margin: 0 !important; padding: 0 !important; } :where(html[data-layout="mobile"]) .body-wrapper{ padding-top: 0 !important; } :where(html[data-layout="mobile"]) .navigation-bar{ position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; } :where(html[data-layout="mobile"]) body, :where(html[data-layout="mobile"]) .body-wrapper, :where(html[data-layout="mobile"]) .window, :where(html[data-layout="mobile"]) .content, :where(html[data-layout="mobile"]) .panel, :where(html[data-layout="mobile"]) .panel-body{ max-width: 100%; min-width: 0; } :where(html[data-layout="mobile"]) .body-wrapper, :where(html[data-layout="mobile"]) .window, :where(html[data-layout="mobile"]) .window:has(> .content.xab-page), :where(html[data-layout="mobile"]) .content, :where(html[data-layout="mobile"]) .content.xab-page, :where(html[data-layout="mobile"]) .content.work-page, :where(html[data-layout="mobile"]) .iar-wrap, :where(html[data-layout="mobile"]) .title-bar{ height: auto !important; max-height: none !important; overflow-x: clip !important; overflow-y: visible !important; flex: none !important; position: static !important; } :where(html[data-layout="mobile"]) .content{ padding-left: 1.2rem; padding-right: 1.2rem; } :where(html[data-layout="mobile"]) img, :where(html[data-layout="mobile"]) video, :where(html[data-layout="mobile"]) canvas, :where(html[data-layout="mobile"]) pre, :where(html[data-layout="mobile"]) textarea, :where(html[data-layout="mobile"]) input, :where(html[data-layout="mobile"]) select{ max-width: 100%; } /* ── 2. 여러 열 → 한 열 ──────────────────────── */ :where(html[data-layout="mobile"]) .tool-hub .tool-grid, :where(html[data-layout="mobile"]) .stat-grid, :where(html[data-layout="mobile"]) .panel-grid, :where(html[data-layout="mobile"]) .panel-grid.is-2, :where(html[data-layout="mobile"]) .panel-grid.is-3, :where(html[data-layout="mobile"]) .chart-grid, :where(html[data-layout="mobile"]) .xs-help-grid, :where(html[data-layout="mobile"]) .iar-grid, :where(html[data-layout="mobile"]) .inq-draft-grid, :where(html[data-layout="mobile"]) .inq-work-band, :where(html[data-layout="mobile"]) .cstalk-shell, :where(html[data-layout="mobile"]) .cstalk-stats, :where(html[data-layout="mobile"]) .cs-stats-list, :where(html[data-layout="mobile"]) .cs-stats-cols, :where(html[data-layout="mobile"]) .work-title-due-group{ grid-template-columns: minmax(0, 1fr); flex-direction: column; align-items: stretch; } :where(html[data-layout="mobile"]) .cs-stats-cols > *, :where(html[data-layout="mobile"]) .cs-stats-chart-panel, :where(html[data-layout="mobile"]) .cs-stats-note{ flex: 1 1 auto; width: 100%; max-width: none; } /* 두 열을 가르던 세로선은 한 열이 되면 가로선이 돼야 한다. */ :where(html[data-layout="mobile"]) .cs-stats-cat-col + .cs-stats-cat-col{ border-left: 0; border-top: 1px solid var(--border); } /* 페이지 안쪽의 세로 스크롤 칸은 문서 흐름으로 편다. 메뉴·드롭다운은 그대로 둔다. */ :where(html[data-layout="mobile"]) .cs-sms-tabs, :where(html[data-layout="mobile"]) .cs-sms-main, :where(html[data-layout="mobile"]) .cs-sms-pane, :where(html[data-layout="mobile"]) .cs-sms-body, :where(html[data-layout="mobile"]) .cs-sms-scroll, :where(html[data-layout="mobile"]) .cs-sms-preset-qa, :where(html[data-layout="mobile"]) .cs-sms-history-list, :where(html[data-layout="mobile"]) .cs-sms-chips, :where(html[data-layout="mobile"]) .cs-sms-hist-people-wrap, :where(html[data-layout="mobile"]) .cs-app-push-scroll, :where(html[data-layout="mobile"]) .cs-app-push-history, :where(html[data-layout="mobile"]) .cs-app-push-history-list, :where(html[data-layout="mobile"]) .cstalk-page, :where(html[data-layout="mobile"]) .cstalk-shell, :where(html[data-layout="mobile"]) .cstalk-rooms, :where(html[data-layout="mobile"]) .cstalk-faq-body, :where(html[data-layout="mobile"]) .inquiry-page--detail .inq-detail-sidebar{ position: static; overflow: visible !important; height: auto !important; max-height: none !important; min-height: auto; flex: none; scrollbar-gutter: auto; } /* 넓은 표만 그 칸 안에서 가로로 넘긴다. 페이지 자체는 350px까지 가로 스크롤이 없다. X/A/B 배송 표는 아래 PC 전용 규칙을 따른다. */ :where(html[data-layout="mobile"]) .approval-table-scroll, :where(html[data-layout="mobile"]) .board-scroll, :where(html[data-layout="mobile"]) .cs-sms-table-wrap, :where(html[data-layout="mobile"]) .inq-table-scroll{ max-width: 100%; overflow-x: auto !important; overflow-y: visible !important; } /* ── 4. 필터·툴바는 줄바꿈하고 폭을 채운다 ─────── */ :where(html[data-layout="mobile"]) .inq-toolbar, :where(html[data-layout="mobile"]) .board-search, :where(html[data-layout="mobile"]) .cs-sms-toolbar, :where(html[data-layout="mobile"]) .work-toolbar, :where(html[data-layout="mobile"]:not([data-xab-layout="desktop"])) .xab-filter, :where(html[data-layout="mobile"]:not([data-xab-layout="desktop"])) .xab-filter-row, :where(html[data-layout="mobile"]:not([data-xab-layout="desktop"])) .xab-filter-row-filters{ flex-wrap: wrap; row-gap: .6rem; } :where(html[data-layout="mobile"]) .inq-toolbar .xab-filter-group, :where(html[data-layout="mobile"]:not([data-xab-layout="desktop"])) .xab-filter .xab-filter-group{ flex: 1 1 14rem; min-width: 0; } :where(html[data-layout="mobile"]) .inq-toolbar .xab-dd, :where(html[data-layout="mobile"]:not([data-xab-layout="desktop"])) .xab-filter .xab-dd{ width: 100%; } :where(html[data-layout="mobile"]) .inq-search, :where(html[data-layout="mobile"]) .inq-search input{ margin-left: 0; width: 100%; } /* ── 5. 손가락으로 쓰는 화면 ──────────────────── */ :where(html[data-layout="mobile"]:not([data-xab-layout="desktop"])) .xab-dd-toggle, :where(html[data-layout="mobile"]) .btn, :where(html[data-layout="mobile"]) .inq-page-btn, :where(html[data-layout="mobile"]) .cs-sms-page-btn, :where(html[data-layout="mobile"]) .cs-stats-preset, :where(html[data-layout="mobile"]) .cs-stats-note-save, :where(html[data-layout="mobile"]) .cs-stats-note-cancel{ min-height: 3.6rem; } /* 호버가 없는 기기에서는 마우스를 올려야 보이는 것이 영영 안 보인다. */ :where(html[data-layout="mobile"]) .cs-stats-cat-pop{ display: none !important; } /* ── 6. CS 문의 통계 ──────────────────────────── */ :where(html[data-layout="mobile"]) .cs-stats-cols{ gap: .8rem; } :where(html[data-layout="mobile"]) .cs-stats-chart{ min-height: 12rem; } :where(html[data-layout="mobile"]) .cs-stats-note-list{ max-height: 24rem; } :where(html[data-layout="mobile"]) .cs-stats-quick{ margin-left: 0; } :where(html[data-layout="mobile"]) .cs-stats-presets{ flex-wrap: wrap; } /* 개별 문자: 탭과 본문이 같은 세로 스크롤에 있다. 탭은 고정하지 않는다. */ .window:has(.cs-work-bar) .content.cs-sms-page, .window:has(.cs-work-bar) .content.cs-app-push-page { overflow-x: hidden; overflow-y: auto; } .content.cs-sms-page .cs-sms-tabs, .content.cs-sms-page .cs-sms-main, .content.cs-sms-page .cs-sms-pane, .content.cs-sms-page .cs-sms-preset-qa, .content.cs-sms-page .cs-sms-history-list, .content.cs-app-push-page .cs-sms-tabs, .content.cs-app-push-page .cs-app-push-main, .content.cs-app-push-page .cs-sms-pane, .content.cs-app-push-page .cs-sms-preset-qa, .content.cs-app-push-page .cs-sms-history-list { position: static; flex: none; height: auto; max-height: none; min-height: auto; overflow: visible; } /* 아주 좁은 화면(350~479px)에서만 한 번 더 줄인다. */ @media (max-width: 479px) { .content { padding-left: .8rem; padding-right: .8rem; } .cs-stats-cat { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; } .cs-stats-note-item { grid-template-columns: minmax(0, 1fr); } .cs-stats-preset { flex: 1 1 8rem; } } /* X/A/B 배송은 모바일 배치를 쓰지 않는다. 바깥 창이 960px 미만이어도 본문은 화면 높이에 두고, 표 안에서만 스크롤한다. */ html[data-xab-layout="desktop"][data-layout="mobile"]:has(.content.xab-page), html[data-xab-layout="desktop"][data-layout="mobile"]:has(.content.xab-page) body { height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; } html[data-xab-layout="desktop"][data-layout="mobile"]:has(.content.xab-page) body { display: flex !important; flex-direction: column !important; } html[data-xab-layout="desktop"][data-layout="mobile"] .body-wrapper:has(.content.xab-page) { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow: hidden !important; position: relative !important; } html[data-xab-layout="desktop"][data-layout="mobile"] .window:has(> .content.xab-page) { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow: hidden !important; position: relative !important; display: flex !important; flex-direction: column !important; } html[data-xab-layout="desktop"][data-layout="mobile"] .window > .content.xab-page { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow: hidden !important; position: relative !important; } html[data-xab-layout="desktop"][data-layout="mobile"] .xab-table-wrap { overflow: auto !important; }