/* ═══════════════════════════════════════════════════════════
   AKETINGMONGO — 완전 반응형 v2  (Mobile-First)
   320px → 480px → 640px → 768px → 1024px → 1280px → 1600px
═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────
   0. 전역 기초 — 가로 넘침 방지
────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* ──────────────────────────────────────
   1. CSS 변수 — 브레이크포인트별 재정의
────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --sb-w: 220px; --rp-w: 220px; }
}
@media (max-width: 768px) {
  :root { --sb-w: 48px; --rp-w: 0px; --hdr-h: 52px; --tb-h: 42px; }
}
@media (max-width: 480px) {
  :root { --hdr-h: 50px; --tb-h: 40px; }
}

/* ──────────────────────────────────────
   2. 사이트 헤더
────────────────────────────────────── */
@media (max-width: 1024px) {
  .pc-nav         { display: none !important; }
  .brand-logo     { font-size: 16px; letter-spacing: 2px; }
  .site-header-inner { padding: 0 14px; gap: 8px; }
}
@media (max-width: 768px) {
  .site-header    { height: 52px; }
  .site-header-inner { padding: 0 12px; gap: 6px; }
  .brand-logo     { font-size: 15px; letter-spacing: 1.5px; }
  .hdr-right      { gap: 4px; }
  .hdr-right .hdr-text-btn { display: none !important; }
  .hdr-icon-btn   { width: 34px; height: 34px; font-size: 14px; }
}
@media (max-width: 360px) {
  .brand-logo     { font-size: 13px; letter-spacing: 1px; }
  .site-header-inner { padding: 0 10px; }
  .hdr-icon-btn   { width: 30px; height: 30px; font-size: 13px; }
}

/* ──────────────────────────────────────
   3. 하단 탭바
────────────────────────────────────── */
@media (max-width: 768px) {
  .bottom-tab-bar { display: flex !important; }
  body            { padding-bottom: 62px; }
}
@media (max-width: 360px) {
  .bottom-tab-bar { height: 54px; }
  .btb-item       { font-size: 8px; }
  .btb-item i     { font-size: 17px; }
}

/* ──────────────────────────────────────
   4. 메인 래퍼 / 섹션 공통
────────────────────────────────────── */
.main-wrapper { margin-top: var(--hdr-h); width: 100%; overflow-x: hidden; }

@media (max-width: 1280px) {
  .section-wrap   { padding: 26px 30px; }
}
@media (max-width: 1024px) {
  .section-wrap   { padding: 20px 22px; }
  .section-hd h2  { font-size: 19px; }
}
@media (max-width: 768px) {
  .section-wrap   { padding: 14px 13px !important; }
  .section-hd     { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
  .section-hd h2  { font-size: 17px; }
  .section-sub    { font-size: 11px; }
}
@media (max-width: 480px) {
  .section-wrap   { padding: 12px 11px !important; }
  .section-hd h2  { font-size: 15px; }
}

/* ──────────────────────────────────────
   5. 홈 — 히어로 배너
────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-slides    { height: 210px !important; }
  .hero-slide     { padding: 20px 16px !important; }
  .hero-title     { font-size: 22px !important; letter-spacing: -.5px; margin-bottom: 8px; }
  .hero-desc      { font-size: 11px !important; margin-bottom: 14px; }
  .hero-btn       { padding: 10px 16px !important; font-size: 12px !important; gap: 5px; }
}
@media (max-width: 480px) {
  .hero-slides    { height: 185px !important; }
  .hero-title     { font-size: 18px !important; }
  .hero-badge     { font-size: 9px; padding: 3px 8px; }
  .hero-desc      { display: none !important; }
  .hero-btn       { padding: 8px 14px !important; font-size: 11px !important; }
}
@media (max-width: 360px) {
  .hero-slides    { height: 165px !important; }
  .hero-title     { font-size: 16px !important; }
}

/* ──────────────────────────────────────
   6. 홈 — 카테고리 모듈
────────────────────────────────────── */
@media (max-width: 900px) {
  .hcm-row        { grid-template-columns: repeat(4, 1fr) !important; gap: 10px; }
}
@media (max-width: 480px) {
  .hcm-row        { grid-template-columns: repeat(4, 1fr) !important; gap: 7px; }
  .hcm-circle     { width: 44px; height: 44px; font-size: 18px; }
  .hcm-item span  { font-size: 9px; }
  .hcm-block      { padding: 12px 11px 10px; }
  .hcm-title      { font-size: 11px; margin-bottom: 12px; }
}
@media (max-width: 360px) {
  .hcm-row        { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
  .hcm-circle     { width: 40px; height: 40px; font-size: 17px; }
}

/* ──────────────────────────────────────
   7. 홈 — 템플릿 스크롤 / 섹션 타이틀
────────────────────────────────────── */
@media (max-width: 768px) {
  .home-tpl-scroll   { padding: 0 13px 14px; gap: 9px; }
  .home-tpl-card     { width: 88px; }
  .htc-thumb         { width: 88px; height: 117px; border-radius: 8px; }
  .htc-name          { font-size: 10px; }
  .home-section-title { font-size: 13px; padding: 16px 13px 9px; }
}
@media (max-width: 480px) {
  .home-tpl-card     { width: 78px; }
  .htc-thumb         { width: 78px; height: 104px; }
  .htc-name          { font-size: 9px; }
}

/* ──────────────────────────────────────
   8. 홈 — 빠른 편집 배너
────────────────────────────────────── */
@media (max-width: 768px) {
  .quick-edit-banner { margin: 0 13px 16px; padding: 14px 15px; border-radius: 12px; }
  .qeb-title         { font-size: 13px; }
  .qeb-sub           { font-size: 10px; }
  .qeb-arrow         { font-size: 16px; }
}
@media (max-width: 480px) {
  .quick-edit-banner { margin: 0 11px 13px; padding: 12px 13px; }
  .qeb-title         { font-size: 12px; }
}

/* ──────────────────────────────────────
   9. 에디터 레이아웃
────────────────────────────────────── */
/* 속성 패널 토글 버튼 */
.tb-prop-toggle-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: #f5f5f5; color: #333;
  border: 1.5px solid #ddd; border-radius: 8px;
  font-size: 13px; cursor: pointer; transition: all .18s;
  flex-shrink: 0;
}
.tb-prop-toggle-btn:hover  { background: #e0e0e0; border-color: #999; }
.tb-prop-toggle-btn.active { background: #0d0d0d; color: #fff; border-color: #0d0d0d; }

@media (max-width: 1024px) {
  .editor-body    { grid-template-columns: 56px 1fr; }
  .right-props    { display: none !important; }
  .sbt span       { display: none; }
  .tb-prop-toggle-btn { display: flex !important; }
  .right-props.rp-open {
    display: flex !important; position: fixed !important;
    top: calc(var(--hdr-h) + var(--tb-h)) !important;
    right: 0 !important; width: 260px !important;
    height: calc(100vh - var(--hdr-h) - var(--tb-h)) !important;
    z-index: 900 !important; overflow-y: auto !important;
    flex-direction: column !important;
    box-shadow: -4px 0 20px rgba(0,0,0,.15) !important;
    background: #fff !important;
  }
}
@media (max-width: 768px) {
  .editor-body    {
    grid-template-columns: 46px 1fr;
    height: calc(100vh - var(--hdr-h) - var(--tb-h) - 60px);
    min-height: 380px;
  }
  .left-sb        { width: 46px; }
  .sbt            { padding: 10px 2px 8px; }
  .sbt i          { font-size: 15px; }
}
@media (max-width: 480px) {
  .editor-body    { grid-template-columns: 42px 1fr; }
  .left-sb        { width: 42px; }
}

/* ── 에디터 툴바 ── */
@media (max-width: 768px) {
  .editor-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 8px;
    gap: 5px;
  }
  .tb-right-actions { margin-left: auto; flex-shrink: 0; }
  .tb-save-quick-btn  { padding: 6px 12px !important; font-size: 11px !important; }
  .tb-export-quick-btn { display: none !important; }
}
@media (max-width: 480px) {
  .tb-save-quick-btn span { display: none; }
  .tb-save-quick-btn  { padding: 6px 9px !important; }
  .tb-select          { font-size: 10px; padding: 0 4px; }
  .tb-num             { width: 36px; font-size: 10px; }
}

/* ──────────────────────────────────────
   10. 다이어리 섹션
────────────────────────────────────── */
@media (max-width: 1200px) {
  .diary-main { grid-template-columns: 1fr 300px; }
}
@media (max-width: 960px) {
  .diary-main  { grid-template-columns: 1fr !important; }
  .diary-right { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 768px) {
  .diary-page     { padding: 13px 11px 80px !important; }
  .diary-page-hd  { flex-direction: column; align-items: stretch; gap: 9px; margin-bottom: 14px; }
  .diary-page-hd-right { flex-direction: column; gap: 7px; }
  .diary-search-box    { min-width: 0; width: 100%; }
  .diary-new-btn       { justify-content: center; }
  .diary-page-title    { font-size: 18px; }
}
@media (max-width: 640px) {
  .diary-right    { grid-template-columns: 1fr; }
  .cal-d          { min-height: 34px; }
  .cal-d-num      { font-size: 11px; }
  .diary-cal-month { font-size: 15px; }
  .diary-cal-nav  { width: 28px; height: 28px; font-size: 13px; }
}
@media (max-width: 480px) {
  .diary-page     { padding: 10px 10px 80px !important; }
  .cal-d          { min-height: 30px; border-radius: 6px; }
  .cal-d-num      { font-size: 10px; }
  .diary-cal-dow  { font-size: 9px; }
}

/* ──────────────────────────────────────
   11. 인쇄 주문 섹션
────────────────────────────────────── */
@media (max-width: 1280px) {
  .print-layout   { grid-template-columns: 1fr 340px; gap: 20px; }
}
@media (max-width: 1024px) {
  .print-layout   { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 768px) {
  .print-layout   { grid-template-columns: 1fr; gap: 13px; }
  .print-card     { padding: 14px 13px; border-radius: 12px; }
  .pc-title       { font-size: 13px; flex-wrap: wrap; gap: 5px; }
  .pc-desc-hint   { font-size: 11px; }
}
@media (max-width: 480px) {
  .print-card     { padding: 12px 11px; }
}

/* ── 스텝바 ── */
@media (max-width: 768px) {
  .step-bar       { gap: 4px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .step-bar::-webkit-scrollbar { display: none; }
  .step           { min-width: 46px; }
  .step-dot       { width: 24px; height: 24px; font-size: 10px; }
  .step span      { font-size: 9px; }
  .step-line      { min-width: 12px; flex: 1; }
}
@media (max-width: 400px) {
  .step-dot       { width: 21px; height: 21px; font-size: 9px; }
  .step span      { font-size: 8px; }
}

/* ── 파일 선택 탭 ── */
@media (max-width: 480px) {
  .pf-tab-row     { gap: 4px; }
  .pf-tab         { padding: 7px 9px; font-size: 10px; gap: 4px; }
  .pf-tab-label   { display: none; }
  .pf-tab i       { font-size: 15px; }
  .pf-upload-zone { padding: 22px 11px; }
  .pf-upload-main { font-size: 12px; }
  .pf-upload-sub  { font-size: 10px; }
}

/* ── 프로젝트 파일 그리드 ── */
@media (max-width: 768px) {
  .pf-project-list { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
}
@media (max-width: 480px) {
  .pf-project-list { grid-template-columns: repeat(2, 1fr) !important; gap: 7px; }
}
@media (max-width: 360px) {
  .pf-project-list { grid-template-columns: repeat(2, 1fr) !important; gap: 5px; }
}

/* ── 인쇄소 선택 ── */
@media (max-width: 768px) {
  .partner-opt    { padding: 10px 11px; gap: 9px; }
  .partner-logo-wrap { display: none; }
  .partner-name   { font-size: 12px; }
  .partner-desc   { font-size: 10px; }
  .ptag           { font-size: 9px; padding: 2px 6px; }
  .printer-type-tabs { gap: 6px; }
  .ptt-tab        { padding: 8px 12px; font-size: 11px; }
}
@media (max-width: 480px) {
  .ptt-tab        { padding: 7px 10px; font-size: 10px; }
}

/* ── QR/NFC 옵션 ── */
@media (max-width: 768px) {
  .qrnfc-options  { grid-template-columns: 1fr 1fr; gap: 7px; }
  .qrnfc-opt-name { font-size: 11px; }
  .qrnfc-opt-price { font-size: 11px; }
  .qrnfc-title    { font-size: 13px; }
  .qrnfc-desc     { font-size: 11px; }
}
@media (max-width: 480px) {
  .qrnfc-options  { grid-template-columns: 1fr 1fr; gap: 6px; }
  .qrnfc-opt-inner { padding: 9px 8px; gap: 8px; }
}
@media (max-width: 360px) {
  .qrnfc-options  { grid-template-columns: 1fr; }
}

/* ── 배송 정보 ── */
@media (max-width: 768px) {
  .delivery-form  { gap: 9px; }
  .df-row label   { font-size: 11px; }
  .df-row input, .df-row textarea { font-size: 13px; padding: 9px 10px; }
  .delivery-badge { font-size: 11px; padding: 7px 10px; border-radius: 8px; }
}

/* ── 주문 요약 ── */
@media (max-width: 768px) {
  .order-summary  { border-radius: 12px; }
  .sum-total      { font-size: 16px; }
  .btn-order      { padding: 13px; font-size: 13px; }
}

/* ── 추가 커스터마이징 ── */
@media (max-width: 768px) {
  .addon-list     { gap: 5px; }
  .addon-item     { padding: 8px 10px; }
  .addon-name     { font-size: 11px; }
  .addon-custom-list { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .open-cem-btn   { padding: 11px; font-size: 13px; }
}
@media (max-width: 480px) {
  .addon-custom-list { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────
   12. 멤버십 섹션
────────────────────────────────────── */
@media (max-width: 1200px) {
  .mem2-plan-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .mem2-wrap      { padding: 0 13px 70px; }
  .mem2-hero      { padding: 26px 0 18px; }
  .mem2-hero-title { font-size: clamp(20px, 5.5vw, 32px); }
  .mem2-hero-sub  { font-size: 12px; }
  .mem2-plan-grid { grid-template-columns: 1fr 1fr !important; gap: 11px; }
  .mem2-card      { padding: 16px 13px; }
  .mem2-card-name { font-size: 12px; }
  .mem2-price     { font-size: 20px; }
  .mem2-feat-grid { grid-template-columns: 1fr 1fr !important; gap: 9px; }
  .mem2-feat-card { padding: 13px 11px; }
  .mem2-why-grid  { grid-template-columns: 1fr !important; gap: 9px; }
  .mem2-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mem2-compare-table { min-width: 460px; }
  .mem2-compare-table th, .mem2-compare-table td { font-size: 11px; padding: 8px 7px; }
  .mem2-faq-list  { gap: 7px; }
  .mem2-faq-q     { font-size: 12px; }
  .mem2-faq-a     { font-size: 11px; }
}
@media (max-width: 540px) {
  .mem2-plan-grid { grid-template-columns: 1fr !important; }
  .mem2-feat-grid { grid-template-columns: 1fr !important; }
  .mem2-card.recommended { transform: none !important; }
}
@media (max-width: 480px) {
  .mem2-wrap      { padding: 0 10px 70px; }
  .mem2-hero-title { font-size: 18px; }
  .mem2-compare-table { min-width: 400px; }
}

/* ──────────────────────────────────────
   13. 아케팅 스튜디오 섹션
────────────────────────────────────── */
@media (max-width: 768px) {
  .ab-hero        { min-height: 250px; padding: 0; }
  .ab-hero-content { padding: 28px 16px; }
  .ab-hero-title  { font-size: clamp(22px, 5.5vw, 38px); }
  .ab-hero-sub    { font-size: 12px; }
  .ab-hero-btns   { flex-direction: column; gap: 9px; }
  .ab-hero-btn    { width: 100%; justify-content: center; }
  .ab-features-grid { grid-template-columns: 1fr 1fr !important; gap: 11px; padding: 0 13px; }
  .ab-feature-card { padding: 15px 13px; }
  .ab-stats-row   { gap: 14px; flex-wrap: wrap; }
  .ab-stat-item   { min-width: 80px; }
  .ab-cta-title   { font-size: clamp(20px, 5vw, 32px); }
  .ab-cta-btns    { flex-direction: column; align-items: center; gap: 10px; }
  .ab-btn-outline-white { width: 100%; text-align: center; justify-content: center; }
  .ab-faq-item    { padding: 13px 14px; }
  .ab-faq-q       { font-size: 13px; }
  .ab-faq-a       { font-size: 11px; }
}
@media (max-width: 480px) {
  .ab-features-grid { grid-template-columns: 1fr !important; }
  .ab-hero-title  { font-size: 20px; }
  .ab-hero-label  { font-size: 10px; }
  .ab-genre-grid  { grid-template-columns: 1fr 1fr !important; gap: 9px; }
}
@media (max-width: 360px) {
  .ab-features-grid { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────
   14. QR 섹션
────────────────────────────────────── */
@media (max-width: 1024px) {
  .qr-layout      { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .qr-info-card   { padding: 16px 14px; }
  .qr-info-card h3 { font-size: 17px; }
  .qr-flow        { flex-wrap: wrap; }
  .qr-flow-step   { flex: 1 1 calc(50% - 8px); min-width: 60px; }
  .qr-reg-card    { padding: 16px 14px; }
  .qr-reg-card h3 { font-size: 15px; }
}
@media (max-width: 480px) {
  .qr-feat        { padding: 10px; gap: 9px; }
  .qf-icon        { width: 30px; height: 30px; font-size: 13px; }
}

/* ──────────────────────────────────────
   15. 모달 — 공통 (모바일 바텀시트)
────────────────────────────────────── */
@media (max-width: 768px) {
  .modal-overlay  {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal-box {
    border-radius: 20px 20px 0 0 !important;
    max-height: 93vh !important;
    overflow-y: auto !important;
    padding: 20px 16px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    animation: mInMobile .26s ease !important;
    margin: 0 !important;
  }
  .modal-inner    { grid-template-columns: 1fr !important; }
  .modal-preview  { display: none !important; }
  .modal-close    { top: 14px; right: 14px; }
}
@media (max-width: 480px) {
  .modal-box {
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 13px 14px !important;
  }
}
@keyframes mInMobile {
  from { transform: translateY(50px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── 저장 확인 모달 ── */
@media (max-width: 768px) {
  .scm-box        { max-height: 95vh; }
  .scm-hero       { padding: 16px 16px 12px; }
  .scm-hero-title { font-size: 16px; }
  .scm-body       { padding: 13px 15px 6px; }
  .scm-actions    { padding: 11px 15px 15px; gap: 8px; }
  .scm-btn-row    { grid-template-columns: 1fr 1fr; gap: 6px; }
  .scm-btn-confirm { grid-column: 1 / -1; }
  .scm-upload-guide-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .scm-go-print-btn { width: 100%; justify-content: center; }
  .scm-sum-row    { flex-direction: column; gap: 5px; }
  .scm-priority-row { gap: 4px; }
  .scm-priority-btn { font-size: 10px; padding: 7px 3px; }
}

/* ── 저장 옵션 모달 ── */
@media (max-width: 768px) {
  .som-box        { max-height: 92vh; }
  .som-header     { padding: 15px 16px; }
  .som-body       { padding: 14px 16px; }
  .som-save-modes { grid-template-columns: 1fr 1fr; gap: 7px; }
  .som-mode-btn   { padding: 10px 8px; }
}
@media (max-width: 480px) {
  .som-save-modes { grid-template-columns: 1fr; gap: 6px; }
  .som-mode-btn   { flex-direction: row; text-align: left; padding: 10px 12px; }
}

/* ── 인쇄 옵션 모달 ── */
@media (max-width: 768px) {
  .pom-section    { margin-bottom: 13px; }
  .pom-label      { font-size: 12px; }
  .pom-presets    { gap: 5px; flex-wrap: wrap; }
  .pom-preset     { padding: 5px 10px; font-size: 11px; }
  .pom-paper-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 7px; }
  .pom-paper-opt  { padding: 9px 9px; }
  .pom-bind-row   { gap: 6px; flex-wrap: wrap; }
  .pom-bind-btn   { padding: 8px 10px; font-size: 11px; }
  .pom-qty-row    { gap: 6px; }
}
@media (max-width: 480px) {
  .pom-paper-grid { grid-template-columns: 1fr 1fr !important; }
  .pom-qty-input  { width: 54px; font-size: 15px; }
}

/* ── 인쇄 결제 모달 ── */
@media (max-width: 768px) {
  .ppm-header     { padding: 15px 16px; }
  .ppm-total-amount { font-size: 22px; }
  .ppm-body       { padding: 14px 16px; }
  .ppm-section-title { font-size: 12px; }
  .ppm-input      { font-size: 13px; padding: 9px 11px; }
  .ppm-method-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 7px; }
  .ppm-card-fields { grid-template-columns: 1fr !important; }
  .ppm-confirm-btn { padding: 13px; font-size: 14px; }
}
@media (max-width: 480px) {
  .ppm-method-btn { padding: 10px 8px; font-size: 11px; }
  .ppm-method-btn span { font-size: 10px; }
}

/* ── 주문 완료 ── */
@media (max-width: 768px) {
  .order-success  { padding: 22px 15px; }
  .order-success h2 { font-size: 18px; }
  .os-icon        { font-size: 40px; }
}

/* ──────────────────────────────────────
   16. 커스터마이징 에디터 모달
────────────────────────────────────── */
@media (max-width: 768px) {
  .cem-box {
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100dvh !important;
    border-radius: 0 !important; transform: none !important;
    min-width: unset !important; min-height: unset !important;
  }
  .cem-resize-handle { display: none !important; }
  .cem-footer     { flex-direction: column; align-items: stretch; gap: 8px; }
  .cem-footer-btns { justify-content: flex-end; }
  .cem-header     { padding: 11px 13px; }
  .cem-title      { font-size: 13px; }
}

/* ──────────────────────────────────────
   17. 햄버거 사이드바
────────────────────────────────────── */
@media (max-width: 768px) {
  .ham-sidebar    { width: 290px; }
  .ham-header     { padding: 13px 15px; }
  .ham-nav-item   { padding: 11px 15px; font-size: 13px; }
}
@media (max-width: 440px) {
  .ham-sidebar    { width: 100vw !important; }
}

/* ──────────────────────────────────────
   18. 검색 패널
────────────────────────────────────── */
@media (max-width: 768px) {
  .search-panel   { top: 52px; }
  .sp-inner       { padding: 13px; }
  .sp-input-wrap  { padding: 8px 11px; }
}
@media (max-width: 480px) {
  .search-panel   { left: 0; right: 0; top: 50px; border-radius: 0 0 14px 14px; }
  .sp-quick-grid  { grid-template-columns: repeat(3, 1fr) !important; gap: 7px; }
  .sp-quick-btn   { padding: 10px 6px; font-size: 11px; }
}

/* ──────────────────────────────────────
   19. 토스트
────────────────────────────────────── */
@media (max-width: 768px) {
  .toast          { bottom: 76px !important; max-width: 88vw !important; font-size: 12px !important; }
}

/* ──────────────────────────────────────
   20. 버튼 touch target 보장
────────────────────────────────────── */
@media (max-width: 768px) {
  .btn-primary, .btn-outline { padding: 10px 15px; font-size: 12px; min-height: 40px; }
  .btn-outline-full          { padding: 10px 15px; font-size: 12px; }
  .btn-outline-sm            { padding: 7px 11px; font-size: 11px; min-height: 34px; }
  .btn-primary-sm            { padding: 7px 12px; font-size: 11px; min-height: 34px; }
}

/* ──────────────────────────────────────
   21. 스크롤바 — 모바일 숨김
────────────────────────────────────── */
@media (max-width: 768px) {
  .step-bar::-webkit-scrollbar,
  .pf-tab-row::-webkit-scrollbar,
  .home-tpl-scroll::-webkit-scrollbar,
  .cat-scroll::-webkit-scrollbar,
  .printer-type-tabs::-webkit-scrollbar { display: none; }

  .step-bar, .pf-tab-row, .home-tpl-scroll,
  .cat-scroll, .printer-type-tabs { scrollbar-width: none; }
}

/* ──────────────────────────────────────
   22. 모달 meta 그리드 (공통)
────────────────────────────────────── */
@media (max-width: 480px) {
  .mod-meta-grid  { grid-template-columns: 1fr; gap: 6px; }
}

/* ──────────────────────────────────────
   23. 다이어리 폴더 사이드바 — 모바일 오버레이
────────────────────────────────────── */
@media (max-width: 768px) {
  .dfc-sidebar {
    position: fixed !important;
    left: -100% !important; top: var(--hdr-h) !important;
    bottom: 60px !important; width: 260px !important;
    background: #fff !important; z-index: 900 !important;
    border-right: 1.5px solid #e2e0dc !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.12) !important;
    transition: left .24s ease !important;
    overflow-y: auto !important;
  }
  .dfc-sidebar.open { left: 0 !important; }
}