/*
  TenPick Studio shared layout guard.
  Keep this file narrow: it aligns the page columns and removes nested
  workspace scrollbars. Canvas play/seek controls live in
  shared/studio-preview-controls.css; app-specific tables and scene drawings
  stay in each app renderer.
*/
:root {
  --tenpick-page: #f3f5f8;
  --tenpick-panel: #fbfcfe;
  --tenpick-line: #c9d3df;
  --tenpick-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--tenpick-page);
}

.app-shell,
.app {
  width: 100%;
  min-width: 1840px;
  min-height: 100vh;
  margin: 0;
  padding: 22px;
  background: var(--tenpick-page);
}

.workbench {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.stage-row,
.studio-grid,
.app {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(520px, 1fr) 430px 260px;
  gap: 18px;
  align-items: start;
}

.stage-row > .ranking-workspace-panel,
.stage-row > .ranking-workspace-panel.ranking-picker-box,
.studio-grid > .source-panel,
.app > .panel.editor {
  width: 100%;
  min-width: 0;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.ranking-workspace-panel,
.ranking-workspace-panel.ranking-picker-box,
.ranking-workspace-panel .ranking-picker-options,
.ranking-category-list,
.result-list,
.mode-panel,
.source-panel,
.panel.editor,
.history-panel,
.history-card {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.stage-row > .preview-area,
.studio-grid > .preview-panel,
.app > .preview {
  width: 430px;
  min-width: 430px;
  max-width: 430px;
  display: grid;
  align-content: start;
}

.preview-area .canvas-frame,
.preview-area .canvas-stack,
.preview-panel .canvas-frame,
.preview-panel .canvas-stack,
.preview .canvas-stage {
  width: 430px;
  max-width: 430px;
}

.stage-row > .side-controls,
.studio-grid > .side-controls,
.studio-grid > .control-panel.side-controls,
.app > .panel.actions {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  margin: 0;
  align-content: start;
}

.data-overview-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
}

.data-overview-grid > .result-panel,
.data-overview-grid > .source-panel,
.club-panel,
.player-panel {
  min-width: 0;
}

@media (max-width: 1180px) {
  .app-shell,
  .app {
    min-width: 0;
    padding: 12px;
  }

  .stage-row,
  .studio-grid,
  .app,
  .data-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage-row > .preview-area,
  .studio-grid > .preview-panel,
  .app > .preview,
  .stage-row > .side-controls,
  .studio-grid > .side-controls,
  .studio-grid > .control-panel.side-controls,
  .app > .panel.actions,
  .preview-area .canvas-frame,
  .preview-area .canvas-stack,
  .preview-panel .canvas-frame,
  .preview-panel .canvas-stack,
  .preview .canvas-stage {
    width: 100%;
    min-width: 0;
    max-width: 430px;
  }
}