/* Keep the workbench's visual language; give foldable screens their full working width. */
:root {
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
.preview-context {
  padding: 14px 32px;
  border-bottom: 1px solid #d7ded9;
  background: #edf5ef;
  color: #365440;
}
.preview-context strong { font-size: 13px; font-weight: 600; line-height: 1.7; }
.preview-context p { margin-top: 3px; font-size: 12px; color: #5f6c64; }
.preview-menu-close, .preview-menu-backdrop { display: none; }
.preview-menu-backdrop[hidden] { display: none; }
.mobile-preview :is(.app-shell, main, .panel, .panel-body, #records-area, .knowledge-workspace, .workspace-overview, .scene-layout > div, .research-layout > *) { min-width: 0; }
.mobile-preview :is(.table-wrap, .knowledge-table-scroll, .team-table-scroll) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-preview :is(button, a, input, select, summary) { -webkit-tap-highlight-color: #00833e18; }
.mobile-preview button:disabled { cursor: not-allowed; }
.mobile-preview .app-footer { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.mobile-preview .sidebar { overscroll-behavior-y: contain; }
.mobile-preview dialog { max-height: calc(100dvh - 24px); }
.mobile-preview .scene-stage canvas { touch-action: none; }
.mobile-preview #baseline-select { min-width: 0; max-width: 100%; min-height: 44px; }

@media (max-width: 1024px) {
  .mobile-preview .sidebar {
    width: min(280px, calc(100vw - 52px));
    padding: max(23px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .2s ease, visibility .2s;
    z-index: 40;
    box-shadow: none;
  }
  .mobile-preview .sidebar.open { transform: translateX(0); visibility: visible; box-shadow: 10px 0 40px #183d2625; }
  .mobile-preview .app-shell { margin-left: 0; width: 100%; }
  .mobile-preview .mobile-menu { display: inline-flex; flex-shrink: 0; }
  .mobile-preview .preview-menu-close { display: inline-flex; position: absolute; top: max(14px, env(safe-area-inset-top)); right: 12px; font-size: 25px; }
  .mobile-preview .sidebar .brand { padding-right: 42px; }
  .preview-menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 30; border: 0; border-radius: 0; padding: 0; background: #182d224d; touch-action: none; }
  .mobile-preview .topbar { min-height: calc(66px + env(safe-area-inset-top)); height: auto; padding: max(8px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); gap: 12px; }
  .mobile-preview .breadcrumb { min-width: 0; gap: 10px; }
  .mobile-preview .breadcrumb > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-preview .topbar-right { flex-shrink: 0; gap: 10px; }
  .mobile-preview .user-switch select { max-width: 145px; font-size: 12px; }
  .mobile-preview .preview-context { padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
  .mobile-preview main { padding: 25px max(24px, env(safe-area-inset-right)) 30px max(24px, env(safe-area-inset-left)); }
  .mobile-preview .toast { left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); }
  .mobile-preview :is(.btn, .btn.small, .icon-button, .nav-link, .type-tab, .knowledge-category-tabs button, .library-tabs button, .team-org-item, .chat-channel, .knowledge-title-button) { min-height: 44px; }
  .mobile-preview .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
  .mobile-preview :is(.form-field input, .form-field select, .search-field input, .filter-row select, .knowledge-search, .knowledge-search input, .knowledge-filters select, .team-search, .team-search input) { min-height: 44px; }
  .mobile-preview :is(.field-control, .form-field input, .form-field select, .form-field textarea, .search-field input, .knowledge-search input, .team-search input) { font-size: 16px; }
  .mobile-preview .scene-layout { grid-template-columns: minmax(0, 1fr); }
  .mobile-preview .scene-stage { height: clamp(360px, 55vw, 480px); }
  .mobile-preview .scene-toolbar { left: 14px; right: 14px; top: 14px; flex-wrap: wrap; gap: 8px; }
  .mobile-preview .scene-toolbar .btn { font-size: 12px; padding: 8px 12px; }
  .mobile-preview .scenario-panel .panel-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
  .mobile-preview .scenario-panel :is(.notice, .full-width, .calc-box) { grid-column: 1 / -1; }
  .mobile-preview .range-top { font-size: 13px; }
  .mobile-preview .range-top input { min-height: 40px; font-size: 16px; width: 82px; }
  .mobile-preview input[type="range"] { min-height: 32px; }
  .mobile-preview .scene-bottom { line-height: 1.8; }
  .mobile-preview :is(.dialog-head, .dialog-foot) { gap: 12px; }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .mobile-preview .workspace-overview { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .mobile-preview .scene-preview { height: 265px; }
  .mobile-preview .scene-info { display: flex; flex-direction: column; justify-content: center; border-top: 0; border-left: 1px solid #d7ded9; padding: 24px; gap: 20px; }
  .mobile-preview .scene-info p { display: block; }
  .mobile-preview .scene-info .inline-metrics { width: 100%; margin-top: 0; }
  .mobile-preview .scene-info h2 { font-size: 19px; }
  .mobile-preview .research-layout { grid-template-columns: minmax(210px, 29%) minmax(0, 1fr); }
  .mobile-preview .research-reader { padding: 24px; }
  .mobile-preview .research-list-item { padding: 20px 18px; }
  .mobile-preview .page-head > div:first-child { flex-basis: 330px; }
  .mobile-preview .page-head .head-actions { flex-shrink: 1; }
  .mobile-preview .connection-grid { grid-template-columns: 1fr; }
  .mobile-preview .knowledge-recipe-table { min-width: 740px; }
}

@media (max-width: 700px) {
  .mobile-preview .topbar { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); gap: 8px; }
  .mobile-preview .topbar-right .demo-badge { display: none; }
  .mobile-preview .topbar-right { gap: 0; }
  .mobile-preview .user-switch select { max-width: 124px; font-size: 11px; }
  .mobile-preview .preview-context { padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
  .preview-context strong { font-size: 12px; }
  .preview-context p { font-size: 11px; line-height: 1.8; }
  .mobile-preview main { padding: 23px max(16px, env(safe-area-inset-right)) 26px max(16px, env(safe-area-inset-left)); }
  .mobile-preview .page-head > div:first-child { flex-basis: auto; }
  .mobile-preview h1, .mobile-preview .knowledge-head h1, .mobile-preview .team-page h1 { font-size: 24px; line-height: 1.45; }
  .mobile-preview .head-actions { flex-wrap: wrap; }
  .mobile-preview .head-actions .btn { flex: 1 1 130px; font-size: 12px; }
  .mobile-preview .filter-row { flex-wrap: wrap; }
  .mobile-preview .filter-row .search-field { flex: 1 1 100%; }
  .mobile-preview .filter-row select { flex: 1 1 auto; max-width: none; }
  .mobile-preview .compare-tools #baseline-select { flex-basis: 100%; width: 100%; }
  .mobile-preview .scene-stage { height: 370px; }
  .mobile-preview .scene-toolbar { left: 10px; right: 10px; top: 10px; gap: 5px; }
  .mobile-preview .scene-toolbar .btn { font-size: 11px; padding-inline: 8px; }
  .mobile-preview .scenario-panel .panel-body { grid-template-columns: minmax(0, 1fr); }
  .mobile-preview .range-field { margin-bottom: 22px; }
  .mobile-preview .range-top input { width: 92px; }
  .mobile-preview .app-footer { padding-inline: 16px; }
  .mobile-preview dialog { max-width: calc(100vw - 20px); }
  .mobile-preview .report-actions { flex-wrap: wrap; }
  .mobile-preview .report-row > div { min-width: 0; }
  .mobile-preview .report-row h3 { overflow-wrap: anywhere; line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-preview .sidebar { transition: none; }
}