/* DREALT mobile layer v0.8.19
   PC 보호형 모바일 분리 구조: 이 파일의 모든 규칙은 767px 이하에서만 적용됩니다. */
@media (max-width: 767px) {
  :root { --mobile-edge: 10px; --mobile-gap: 10px; }

  html, body { width:100%; max-width:100%; overflow-x:clip !important; }
  html { scroll-padding-top:72px; }
  body { font-size:16px; line-height:1.62; -webkit-text-size-adjust:100%; word-break:keep-all; }
  body * { min-width:0; }
  .wrap { width:calc(100% - (var(--mobile-edge) * 2)) !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; }
  main, section, article, aside, nav, header, footer, form, fieldset { max-width:100%; }
  img, video, iframe, svg { max-width:100%; height:auto; }
  input, select, textarea, button { max-width:100%; font-size:16px; }
  textarea { width:100%; }
  p, li, td, th, a, button, label, span, strong, small { overflow-wrap:anywhere; }
  pre, code { max-width:100%; overflow-wrap:anywhere; }
  pre { overflow:auto; white-space:pre-wrap; }

  /* Header: PC navigation is left untouched; phone gets a compact dropdown. */
  .site-header .nav { min-height:62px !important; padding:7px 0 !important; display:flex !important; flex-direction:row !important; align-items:center !important; flex-wrap:wrap !important; gap:7px !important; }
  .brand { display:flex; align-items:center; gap:7px; font-size:20px !important; letter-spacing:.045em; }
  .brand-logo { width:34px !important; height:34px !important; object-fit:contain; }
  .brand > span { font-size:20px !important; }
  .mobile-menu-btn { margin-left:auto !important; min-height:42px !important; padding:7px 11px !important; border-radius:10px !important; }
  .mobile-menu-btn span { font-size:18px !important; }
  .mobile-menu-btn b { font-size:13px !important; }
  .site-header .navlinks { width:100% !important; margin:0 !important; padding:7px !important; overflow:visible !important; border-radius:12px !important; }
  .site-header .navlinks.mobile-open { display:grid !important; grid-template-columns:1fr 1fr !important; gap:5px !important; }
  .site-header .navlinks a { width:100% !important; min-height:43px !important; padding:8px 9px !important; justify-content:flex-start !important; font-size:14px !important; white-space:normal !important; }

  /* Page headers: less vertical space before the actual content. */
  .hero, .hero-home { padding:26px 0 22px !important; }
  .hero.compact { padding:22px 0 16px !important; }
  .hero h1, .hero.compact h1 { margin:12px 0 10px !important; font-size:clamp(29px,8.2vw,36px) !important; line-height:1.18 !important; letter-spacing:-.03em; }
  .lead { font-size:16px !important; line-height:1.62 !important; }
  .eyebrow { padding:6px 9px !important; font-size:12px !important; }
  .useful-back-link { margin-top:16px !important; min-height:42px; padding:7px 11px !important; font-size:13px !important; }
  .useful-back-link + .hero.compact { padding-top:17px !important; }
  .section { padding:24px 0 32px !important; }
  .section-title { font-size:25px !important; line-height:1.3; }
  .section-desc { margin-bottom:16px !important; font-size:15px !important; line-height:1.58; }
  .simple-panel, .info-card, .analytics-summary, .analytics-panel, .analytics-note { padding:16px !important; border-radius:15px !important; }
  .source-note { padding:14px !important; gap:6px !important; flex-direction:column !important; }
  .source-note strong { font-size:15px !important; }
  .source-note p { font-size:13px !important; }

  /* Standard controls: wrap instead of making users swipe sideways. */
  .actions, .page-bar, .search-row, .gallery-cats, .program-tabs, .tool-actions,
  .tip-link-row, .meta, .creator-source-links, .footer-action-row { flex-wrap:wrap !important; overflow:visible !important; }
  .actions .btn { min-height:48px; padding:9px 13px; font-size:15px; }
  .page-bar { align-items:stretch; }
  .page-bar .home-link { margin-left:0 !important; }
  .search-row { flex-direction:column; }
  .search-row > * { width:100%; }
  .gallery-cats button, .program-tabs a { white-space:normal !important; }

  /* Main grids and card families. */
  .task-grid, .points, .category-grid, .gallery-grid, .service-grid, .main-info-grid,
  .useful-preview-grid, .useful-hub-grid, .info-card-grid, .concept-grid, .term-grid,
  .language-grid, .gear-grid, .shortcut-grid, .product-list-grid, .product-guide-grid,
  .content-seed-grid, .checklist-seed-grid, .toolbox-seed-grid, .briefing-step-grid,
  .request-flow, .portfolio-grid, .video-grid, .creator-card-grid, .ypp-level-grid,
  .creator-status-strip, .creator-verified, .creator-check-grid, .creator-explain-grid,
  .creator-next-tools, .privacy-overview, .analytics-summary-grid, .analytics-note-grid {
    grid-template-columns:1fr !important;
  }
  .task-card, .service-card, .useful-hub-card, .product-guide-card, .portfolio-card,
  .video-card, .site-rec-card { min-height:0 !important; }
  .service-card { padding:15px !important; }
  .service-card h3 { font-size:19px !important; }
  .task-card { padding:17px !important; }
  .task-card h2, .task-card h3 { font-size:21px !important; }

  /* Useful-information switchers: no horizontal category strip on phones. */
  .section-switcher { display:block !important; margin:13px 0 28px !important; }
  .section-switcher-nav { position:static !important; top:auto !important; padding:11px !important; border-radius:14px !important; }
  .section-switcher-title { margin-bottom:8px !important; font-size:15px !important; }
  .section-switcher-buttons { display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; overflow:visible !important; padding:0 !important; }
  .section-switcher-buttons button, .section-switcher-link { width:100% !important; min-height:43px !important; white-space:normal !important; text-align:left !important; line-height:1.35; }
  .section-switcher-link { margin-top:7px !important; }
  .section-switcher-hint { display:none !important; }
  .section-panel-heading { margin-top:13px; }

  /* Recommended sites: category/filter chips become visible rows, not swipe strips. */
  .site-directory-layout { display:block !important; margin-top:13px !important; }
  .site-directory-sidebar { position:static !important; top:auto !important; padding:13px !important; border-radius:15px !important; margin-bottom:11px; }
  .site-directory-title { margin-bottom:9px !important; font-size:16px !important; }
  .site-directory-categories { display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; overflow:visible !important; }
  .site-directory-categories button { width:100% !important; min-height:42px !important; padding:7px 9px !important; white-space:normal !important; text-align:center !important; font-size:12px !important; line-height:1.3; }
  .site-directory-categories button b { float:none !important; margin-left:3px; }
  .site-directory-hint { display:none !important; }
  .site-finder { margin:0 0 12px !important; padding:13px !important; border-radius:15px !important; }
  .site-search { height:50px !important; padding:0 12px !important; }
  .site-search input { font-size:16px !important; }
  .site-filter-row, .site-filter-row.compact { display:flex !important; flex-wrap:wrap !important; gap:7px !important; overflow:visible !important; padding:10px 0 0 !important; }
  .site-filter-row .filter-label { flex:0 0 100% !important; margin:1px 0 -1px !important; }
  .site-filter-row button, .favorite-list-link { flex:0 1 auto !important; min-height:40px !important; white-space:normal !important; }
  .favorite-filter-row .favorite-list-link { display:inline-flex; align-items:center; padding:7px 10px; border:1px solid #2c4969; border-radius:10px; }
  .site-result-line { flex-wrap:wrap; }
  .site-result-line button { margin-left:0 !important; }
  .site-rec-grid { grid-template-columns:1fr !important; gap:10px !important; }
  .site-rec-card { padding:15px !important; border-radius:15px !important; }
  .site-rec-card > p { margin:10px 0 !important; font-size:14px !important; }
  .site-rec-link { min-height:43px; }

  /* Tool box: categories and actions stay on-screen. */
  .toolbox-page { width:calc(100% - 12px) !important; max-width:none !important; }
  .tool-category-tabs { position:static !important; top:auto !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; overflow:visible !important; padding:7px !important; }
  .tool-category-tabs button { width:100% !important; min-height:42px !important; white-space:normal !important; line-height:1.3; }
  .tool-subnav { display:flex !important; flex-wrap:wrap !important; overflow:visible !important; gap:7px !important; }
  .tool-subnav button { flex:1 1 45% !important; white-space:normal !important; }
  .tool-panel { padding:13px !important; border-radius:15px !important; }
  .tool-field-grid, .tool-field-grid.two, .image-lab, .tool-results { grid-template-columns:1fr !important; }
  .tool-button-wrap, .tool-button-row { display:grid !important; grid-template-columns:1fr !important; gap:7px !important; }
  .tool-button-wrap button, .tool-button-row .btn, .tool-panel > .btn, .pdf-download-btn { width:100% !important; }
  .image-preview-wrap canvas { width:100% !important; height:auto !important; max-height:420px; }

  /* Policy / tabs / chips: convert all sticky horizontal strips into wrapped groups. */
  .policy-toc { position:static !important; top:auto !important; display:flex !important; flex-wrap:wrap !important; overflow:visible !important; padding:8px !important; }
  .policy-toc a { flex:1 1 calc(50% - 7px) !important; min-height:40px; white-space:normal !important; }
  .policy-section { grid-template-columns:38px minmax(0,1fr) !important; gap:11px !important; padding:15px !important; }
  .policy-number { width:38px !important; height:38px !important; }
  .policy-contact { flex-direction:column !important; align-items:flex-start !important; gap:10px !important; padding:15px !important; }

  /* Analytics: toolbar stacks; JS turns wide tables into readable cards. */
  .analytics-toolbar, .analytics-panel-head { flex-direction:column !important; align-items:stretch !important; gap:11px !important; }
  .date-control { display:grid !important; grid-template-columns:auto minmax(0,1fr) auto !important; }
  .date-control input { width:100% !important; min-width:0 !important; }
  .analytics-update { justify-content:space-between; }
  .analytics-search input { width:100% !important; }
  .analytics-chart { min-width:0; overflow:hidden; }
  .analytics-table-wrap { overflow:visible !important; }

  /* Generic mobile card tables. mobile.js supplies data-mobile-label. */
  table.drealt-mobile-card-table { min-width:0 !important; width:100% !important; border-collapse:separate !important; border-spacing:0 9px !important; }
  table.drealt-mobile-card-table thead { display:none !important; }
  table.drealt-mobile-card-table tbody, table.drealt-mobile-card-table tr { display:block !important; width:100% !important; }
  table.drealt-mobile-card-table tr { margin:0 0 10px !important; padding:8px 11px !important; border:1px solid #29445f !important; border-radius:13px !important; background:#0b192a !important; }
  table.drealt-mobile-card-table td { display:grid !important; grid-template-columns:minmax(82px,34%) minmax(0,1fr) !important; gap:8px !important; width:100% !important; padding:8px 2px !important; border:0 !important; border-bottom:1px solid rgba(67,94,124,.28) !important; text-align:left !important; white-space:normal !important; }
  table.drealt-mobile-card-table td:last-child { border-bottom:0 !important; }
  table.drealt-mobile-card-table td::before { content:attr(data-mobile-label); color:#7fa6cc; font-size:12px; font-weight:850; }
  table.drealt-mobile-card-table td[colspan] { display:block !important; }
  table.drealt-mobile-card-table td[colspan]::before { display:none; }

  /* Creator/platform pages. */
  .creator-status-strip, .creator-verified, .ypp-level-grid, .creator-card-grid,
  .creator-check-grid, .creator-explain-grid, .creator-next-tools { grid-template-columns:1fr !important; }
  .future-policy-numbers { grid-template-columns:1fr !important; }
  .chapter-tool, .chapter-tool-main { grid-template-columns:1fr !important; }
  .chapter-rule-grid { grid-template-columns:1fr 1fr !important; }
  .creator-source-links { display:grid !important; grid-template-columns:1fr !important; }
  .creator-source-links a { min-height:42px; display:flex; align-items:center; }
  .spec-table-card { overflow:visible !important; }
  .creator-spec-table { min-width:0 !important; }

  /* Product/details content. */
  .purchase-panel, .product-filter-note, .briefing-editorial, .briefing-empty { flex-direction:column !important; align-items:flex-start !important; }
  .product-buy-btn.large { width:100% !important; min-width:0 !important; }
  .product-card-main { grid-template-columns:44px minmax(0,1fr) !important; }
  .product-card-main > * { min-width:0; }

  /* Keyboard / names guides: mobile-specific view must never force desktop width. */
  .keyboard-desktop-wrap, .keyboard-board, .keyboard-mobile, .keyboard-detail, .keyboard-shell { max-width:100% !important; min-width:0 !important; }
  .keyboard-desktop-wrap { overflow:hidden !important; }
  .kb-mobile-tabs, .kb-mobile-groups { display:flex !important; flex-wrap:wrap !important; overflow:visible !important; gap:6px !important; }
  .kb-mobile-tabs button, .kb-mobile-groups button { flex:1 1 calc(50% - 6px) !important; white-space:normal !important; }

  /* Image maker: same URL/data, but a genuinely separate mobile arrangement. */
  .image-maker-page.wrap { width:calc(100% - 8px) !important; }
  .image-maker-toplinks { display:flex !important; flex-wrap:wrap !important; gap:6px !important; }
  .image-maker-hero { padding-top:16px !important; padding-bottom:12px !important; }
  .im-hero-copy h1 { font-size:29px !important; margin-top:10px !important; }
  .im-hero-copy .lead { font-size:15px !important; }
  .im-hero-quick { display:none !important; }
  .im-app-toolbar { display:grid !important; grid-template-columns:1fr !important; gap:8px !important; padding:8px !important; border-radius:13px !important; }
  .im-app-toolbar .im-toolbar-group { width:100% !important; min-width:0 !important; padding:0 !important; border:0 !important; overflow:visible !important; }
  .im-app-toolbar .im-app-main-menu { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; }
  .im-app-toolbar .im-preset-group { display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px !important; }
  .im-app-toolbar .im-preset-group > label:first-child, .im-app-toolbar .im-preset-group > select { grid-column:1/-1 !important; }
  .im-app-toolbar .im-preset-group select { width:100% !important; min-width:0 !important; max-width:none !important; }
  .im-app-toolbar .im-history-group { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:6px !important; }
  .im-app-toolbar .im-export-group { display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px !important; }
  .im-app-toolbar .im-export-group .im-toolbar-color { grid-column:1/-1; }
  .im-app-toolbar .im-small-btn, .im-app-toolbar .im-toolbar-color, .im-app-toolbar .im-toolbar-inline { width:100% !important; min-width:0 !important; height:auto !important; min-height:42px !important; padding:7px 8px !important; justify-content:center !important; white-space:normal !important; font-size:12px !important; }
  .im-toolbar-inline { display:grid !important; grid-template-columns:auto minmax(0,1fr) !important; }
  .im-toolbar-inline input { width:100% !important; }
  .im-studio-layout { display:flex !important; flex-direction:column !important; gap:9px !important; }
  .im-left-shell { display:contents !important; }
  .im-tool-rail { order:1; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:6px !important; width:100% !important; max-height:none !important; overflow:visible !important; padding:6px !important; }
  .im-tool-rail button { width:100% !important; min-height:48px !important; padding:5px 3px !important; }
  .im-tool-rail button b { font-size:10px !important; white-space:normal !important; }
  .image-maker-workspace { order:2; width:100% !important; min-width:0 !important; }
  .im-tool-panel { order:3; width:100% !important; max-height:none !important; padding:11px !important; }
  .im-right-panel { order:4; width:100% !important; max-height:none !important; position:static !important; }
  .im-workspace-head { display:grid !important; grid-template-columns:1fr !important; gap:7px !important; padding:0 3px !important; }
  .im-workspace-head-left { justify-content:space-between; }
  .im-workspace-head-tools { display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:5px !important; overflow:visible !important; width:100% !important; }
  .im-workspace-head-tools button { width:100% !important; min-height:36px !important; padding:5px 3px !important; font-size:10px !important; white-space:normal !important; }
  .im-workspace-head p { display:none !important; }
  .im-context-toolbar { width:100% !important; max-width:100% !important; display:flex !important; flex-wrap:wrap !important; overflow:visible !important; justify-content:flex-start !important; gap:5px !important; padding:7px !important; }
  .im-context-toolbar[hidden] { display:none !important; }
  .im-context-toolbar strong { flex:0 0 100%; }
  .im-context-toolbar button, .im-context-toolbar label { flex:1 1 calc(33.333% - 5px); min-width:88px !important; white-space:normal !important; justify-content:center; }
  .im-context-separator { display:none !important; }
  .im-canvas-shell { width:100% !important; min-height:330px !important; max-height:68vh; padding:27px 5px 7px 27px !important; overflow:auto !important; overscroll-behavior:contain; }
  .im-canvas-stage { min-width:100% !important; }
  .im-ruler-top { left:27px !important; }
  .im-ruler-left { top:27px !important; }
  .im-number-grid, .im-number-grid.compact { grid-template-columns:1fr 1fr !important; }
  .im-guide-control > div { grid-template-columns:1fr auto !important; }
  .im-guide-control output { grid-column:auto !important; grid-row:auto !important; }
  .im-shortcut-modal-list { grid-template-columns:1fr !important; }
  .im-modal-card { width:calc(100% - 12px) !important; max-width:none !important; max-height:88vh !important; }

  /* Menu maker: single-column workflow, no fixed desktop sidebar. */
  .menu-maker-page.wrap { width:calc(100% - 12px) !important; }
  .menu-maker-page .hero h1 { font-size:29px !important; }
  .menu-maker-layout { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; }
  .menu-maker-controls { position:static !important; top:auto !important; max-height:none !important; overflow:visible !important; }
  .mm-row-grid { grid-template-columns:minmax(0,1fr) 96px !important; }
  .mm-toolbar { flex-direction:column !important; align-items:stretch !important; gap:7px !important; }
  .mm-toolbar > div { display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px !important; }
  .mm-toolbar button { width:100% !important; min-height:42px !important; }
  .mm-canvas-shell { min-height:330px !important; max-height:70vh; padding:6px !important; overflow:auto !important; }
  .mm-canvas-shell canvas { max-width:100% !important; height:auto !important; }

  /* Footer: one comfortable column, with stats wrapping instead of widening. */
  .footer { padding-bottom:25px !important; }
  .footer-brand-block { padding-top:22px !important; gap:14px !important; }
  .footer-action-row { display:grid !important; grid-template-columns:1fr !important; gap:7px !important; width:100% !important; }
  .footer-pill { width:100% !important; min-height:44px !important; justify-content:center !important; }
  .visitor-stat-list { gap:6px 10px !important; }
  .visitor-stat-list span { white-space:normal !important; }
  .footer-nav-row { display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px 10px !important; }
  .footer-nav-row a { min-height:34px; display:flex; align-items:center; font-size:13px; }
  .footer-copy-row { font-size:12px !important; }
}

@media (max-width: 390px) {
  .site-header .navlinks.mobile-open,
  .section-switcher-buttons,
  .site-directory-categories,
  .tool-category-tabs,
  .policy-toc { grid-template-columns:1fr !important; }
  .site-directory-categories { grid-template-columns:1fr 1fr !important; }
  .chapter-rule-grid { grid-template-columns:1fr !important; }
  .im-tool-rail { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .im-app-toolbar .im-app-main-menu { grid-template-columns:1fr 1fr !important; }
  .im-app-toolbar .im-app-main-menu > :first-child { grid-column:1/-1; }
  .im-app-toolbar .im-history-group { grid-template-columns:1fr 1fr !important; }
  .im-workspace-head-tools { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .footer-nav-row { grid-template-columns:1fr !important; }
}

/* Remaining phone-only navigation strips found by overflow audit. */
@media (max-width: 767px) {
  .product-layout, .product-layout.detail { grid-template-columns:1fr !important; gap:11px !important; }
  .product-sidebar { position:static !important; top:auto !important; padding:12px !important; }
  .product-sidebar-buttons, .product-detail-nav { display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; overflow:visible !important; }
  .product-sidebar-buttons button, .product-detail-nav a { width:100% !important; min-height:42px !important; white-space:normal !important; text-align:center !important; justify-content:center !important; line-height:1.3; }
  .product-sidebar-hint { display:none !important; }

  .compare-picker { display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; overflow:visible !important; padding-bottom:11px !important; }
  .compare-picker button { width:100% !important; min-height:43px !important; white-space:normal !important; }
  .compare-panel { padding:14px !important; border-radius:16px !important; }
  .compare-head { flex-direction:column !important; gap:9px !important; }
  .mini-link { width:100%; text-align:center; }
  .compare-table-wrap { overflow:visible !important; border:0 !important; }
  .compare-table { min-width:0 !important; }
  table.drealt-mobile-card-table tbody th { display:block !important; width:100% !important; padding:5px 2px 9px !important; border:0 !important; background:transparent !important; color:#dcecff !important; font-size:14px !important; }
}

@media (max-width: 390px) {
  .product-sidebar-buttons, .product-detail-nav, .compare-picker { grid-template-columns:1fr !important; }
}