/* MusicFrame SMART/MECE. Scoped, content-sized, theme-aware. */
.direction-panel > section.mf-smart-studio {
  grid-column: 1 / -1;
  order: 1;
}
.mf-smart-studio {
  --smart-gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 16px;
  border: 1px solid var(--mf-line, #dce1e8);
  border-radius: 16px;
  background: var(--mf-card, #fff);
  color: var(--mf-ink, #202632);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  color-scheme: inherit;
}
.mf-smart-studio *,
.mf-smart-studio *::before,
.mf-smart-studio *::after { box-sizing: border-box; }
.mf-smart-studio :where(div, section, article, nav, header, fieldset, label, details, pre) { min-width: 0; }
.mf-smart-studio [hidden] { display: none !important; }
.mf-smart-studio :where(h2, h3, p, pre) { margin: 0; }
.mf-smart-studio :where(button, input, select, textarea) { font: inherit; color: inherit; }
.mf-smart-studio :where(button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--mf-accent, #6757e8);
  outline-offset: 3px;
}
.mf-smart-studio .mf-smart-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: var(--smart-gap); margin-bottom: 12px;
}
.mf-smart-studio .mf-smart-head > div { flex: 1 1 220px; }
.mf-smart-studio .mf-smart-head h2 { font-size: 19px; line-height: 1.35; font-weight: 750; }
.mf-smart-studio .mf-smart-head p { margin-top: 4px; color: var(--mf-muted, #667085); }
.mf-smart-studio .mf-smart-head > label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 13px; cursor: pointer;
}
.mf-smart-studio input[type="checkbox"] {
  appearance: auto; width: 18px; min-width: 18px; max-width: 18px;
  height: 18px; margin: 0; padding: 0; flex: 0 0 18px;
  accent-color: var(--mf-accent, #6757e8); vertical-align: middle;
}
.mf-smart-studio .mf-smart-tabs {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px; padding: 6px; margin-bottom: 12px;
  border-radius: 12px; background: var(--mf-soft, #f4f5f8);
}
.mf-smart-studio button {
  min-height: 44px; max-width: 100%; padding: 9px 12px;
  border: 1px solid var(--mf-line, #dce1e8); border-radius: 9px;
  background: var(--mf-card, #fff); cursor: pointer;
  line-height: 1.4; white-space: normal; overflow-wrap: anywhere;
  touch-action: manipulation;
}
.mf-smart-studio .mf-smart-tabs button { width: 100%; padding: 8px 6px; font-size: 13px; }
.mf-smart-studio .mf-smart-tabs button[aria-selected="true"] {
  background: var(--mf-accent, #6757e8); color: var(--mf-on-accent, #fff);
  border-color: var(--mf-accent, #6757e8); font-weight: 700;
}
.mf-smart-studio button:disabled { opacity: .55; cursor: not-allowed; }
.mf-smart-studio .mf-smart-pane { display: grid; gap: var(--smart-gap); }
.mf-smart-studio .mf-smart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--smart-gap); }
.mf-smart-studio .mf-smart-wide { grid-column: 1 / -1; }
.mf-smart-studio .mf-smart-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mf-smart-studio .mf-smart-field > label,
.mf-smart-studio .mf-smart-field > span,
.mf-smart-studio .mf-smart-field > label > span { font-size: 13px; font-weight: 650; }
.mf-smart-studio .mf-smart-field > label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mf-smart-studio .mf-smart-field :where(input:not([type="checkbox"]):not([type="range"]), select, textarea),
.mf-smart-studio .mf-smart-section-grid :where(select, input:not([type="checkbox"]):not([type="range"]), textarea) {
  width: 100%; min-width: 0; max-width: 100%; padding: 10px 11px;
  border: 1px solid var(--mf-line, #dce1e8); border-radius: 9px;
  background: var(--mf-card, #fff); line-height: 1.5;
}
.mf-smart-studio .mf-smart-field textarea { resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.mf-smart-studio input[type="range"] {
  display: block; width: 100%; min-width: 0; max-width: 100%;
  margin: 6px 0; padding: 0; accent-color: var(--mf-accent, #6757e8);
}
.mf-smart-studio :where(input, textarea)::placeholder { color: var(--mf-muted, #667085); opacity: .85; }
.mf-smart-studio :where(input, select, textarea):disabled { opacity: .65; cursor: not-allowed; }
.mf-smart-studio small { font-size: 12px; line-height: 1.5; color: var(--mf-muted, #667085); }
.mf-smart-studio .mf-smart-note {
  padding: 10px 12px; border: 1px solid var(--mf-line, #dce1e8);
  border-radius: 10px; color: var(--mf-muted, #667085); background: var(--mf-soft, #f4f5f8);
}
.mf-smart-studio .mf-smart-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mf-smart-studio .mf-smart-summary > * {
  max-width: 100%; padding: 4px 9px; border-radius: 999px;
  background: var(--mf-tint, #eeebff); color: var(--mf-ink, #202632); font-size: 12px;
}
.mf-smart-studio .mf-smart-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--smart-gap); }
.mf-smart-studio .mf-smart-examples > article,
.mf-smart-studio .mf-smart-examples > button {
  padding: 12px; border: 1px solid var(--mf-line, #dce1e8);
  border-radius: 10px; background: var(--mf-soft, #f4f5f8); text-align: left;
}
.mf-smart-studio .mf-smart-examples strong { display: block; font-size: 14px; }
.mf-smart-studio .mf-smart-examples p { margin-top: 5px; font-size: 13px; color: var(--mf-muted, #667085); }
.mf-smart-studio .mf-smart-examples article > button { width: 100%; margin-top: 10px; }
.mf-smart-studio .mf-smart-preview {
  max-width: 100%; padding: 12px; border: 1px solid var(--mf-line, #dce1e8);
  border-radius: 10px; background: var(--mf-soft, #f4f5f8);
}
.mf-smart-studio pre.mf-smart-preview,
.mf-smart-studio .mf-smart-preview pre {
  font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
  max-width: 100%; margin: 0;
}
.mf-smart-studio .mf-smart-example-info {
  border: 1px solid var(--mf-line, #dce1e8); border-radius: 10px; background: var(--mf-card, #fff);
}
.mf-smart-studio .mf-smart-example-info summary { min-height: 44px; padding: 10px 12px; cursor: pointer; font-weight: 650; }
.mf-smart-studio .mf-smart-example-info > div { padding: 0 12px 12px; }
.mf-smart-studio .mf-smart-example-info p + p { margin-top: 8px; }
.mf-smart-studio .mf-smart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mf-smart-studio .mf-smart-actions .primary {
  background: var(--mf-accent, #6757e8); border-color: var(--mf-accent, #6757e8);
  color: var(--mf-on-accent, #fff); font-weight: 700;
}
.mf-smart-studio .mf-smart-actions .secondary { background: var(--mf-soft, #f4f5f8); color: var(--mf-ink, #202632); }
.mf-smart-studio .mf-smart-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mf-smart-studio .mf-smart-metrics article {
  display: flex; flex-direction: column; gap: 4px; padding: 10px;
  border: 1px solid var(--mf-line, #dce1e8); border-radius: 10px; background: var(--mf-soft, #f4f5f8);
}
.mf-smart-studio .mf-smart-metrics strong { font-size: 20px; line-height: 1.3; }
.mf-smart-studio .mf-smart-metrics span { font-size: 13px; }
.mf-smart-studio .mf-smart-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mf-smart-studio .mf-smart-checks li { padding: 10px 12px; border: 1px solid var(--mf-line, #dce1e8); border-radius: 10px; }
.mf-smart-studio .mf-smart-checks label { display: flex; align-items: flex-start; gap: 8px; min-height: 24px; font-size: 13px; cursor: pointer; }
.mf-smart-studio .mf-smart-checks label input[type="checkbox"] { margin-top: 2px; }
.mf-smart-studio .mf-smart-checks p { margin: 4px 0 0 26px; }
.mf-smart-studio :where(.mf-smart-warning, .mf-smart-success) {
  padding: 10px 12px; border: 1px solid var(--mf-line, #dce1e8);
  border-inline-start: 3px solid var(--mf-accent, #6757e8); border-radius: 8px;
  background: var(--mf-tint, #eeebff); color: var(--mf-ink, #202632);
  font-size: 13px; line-height: 1.6;
}
.mf-smart-studio .mf-smart-section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--smart-gap); }
.mf-smart-studio .mf-smart-section-grid fieldset {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start; gap: 8px; margin: 0; padding: 10px;
  border: 1px solid var(--mf-line, #dce1e8); border-radius: 10px;
}
.mf-smart-studio .mf-smart-section-grid legend { max-width: 100%; padding: 0 5px; font-size: 13px; font-weight: 700; }
.mf-smart-studio .mf-smart-section-grid fieldset > :where(p, small) { grid-column: 1 / -1; }
.mf-smart-studio .mf-smart-status { margin: 0; font-size: 13px; line-height: 1.6; color: var(--mf-ink, #202632); overflow-wrap: anywhere; }
@media (hover: hover) {
  .mf-smart-studio button:not(:disabled):hover { border-color: var(--mf-accent, #6757e8); }
}
@media (max-width: 900px) {
  .mf-smart-studio .mf-smart-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-smart-studio .mf-smart-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mf-smart-studio { padding: 12px; border-radius: 12px; }
  .mf-smart-studio .mf-smart-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mf-smart-studio :where(.mf-smart-grid, .mf-smart-examples, .mf-smart-section-grid, .mf-smart-metrics) { grid-template-columns: minmax(0, 1fr); }
  .mf-smart-studio .mf-smart-section-grid fieldset { grid-template-columns: minmax(0, 1fr); }
  .mf-smart-studio .mf-smart-actions > button { flex: 1 1 140px; }
}
/* Hide only the named duplicate legacy panels while SMART is active. */
.app-shell[data-mf-smart-active="true"]:not([data-mf-smart-legacy="true"]) .direction-panel > .sound-board-fields,
.app-shell[data-mf-smart-active="true"]:not([data-mf-smart-legacy="true"]) .direction-panel > .mf-section-heading,
.app-shell[data-mf-smart-active="true"]:not([data-mf-smart-legacy="true"]) .direction-panel > .mf-design-tabs,
.app-shell[data-mf-smart-active="true"]:not([data-mf-smart-legacy="true"]) .direction-panel > .sound-preset-grid,
.app-shell[data-mf-smart-active="true"]:not([data-mf-smart-legacy="true"]) .direction-panel > .lyric-craft-board,
.app-shell[data-mf-smart-active="true"]:not([data-mf-smart-legacy="true"]) .direction-panel > .advanced-settings-panel { display: none !important; }


.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio{border-radius:6px!important;line-height:1.7!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-section-grid fieldset{grid-template-columns:minmax(0,1fr)!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio input[type=checkbox]{width:18px!important;min-width:18px!important;max-width:18px!important;height:18px!important;min-height:18px!important;max-height:18px!important;flex:0 0 18px!important;margin:2px 0 0!important;padding:0!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-check{display:flex!important;align-items:flex-start!important;gap:9px!important;min-width:0!important;height:auto!important;line-height:1.8!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-check>span{flex:1 1 0%!important;min-width:0!important;max-width:100%!important;display:block!important;height:auto!important;line-height:1.8!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-check small{display:block!important;margin-top:4px!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-summary{margin:4px 0 16px!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-field>span{height:auto!important;min-height:0!important;line-height:1.8!important;font-size:13px!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-preview pre{padding:12px!important;margin:10px 0!important;font-size:13px!important;line-height:1.85!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important;height:auto!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-preview p{margin:8px 0!important;font-size:13px!important;line-height:1.8!important;color:var(--mf-muted)!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-actions{margin-top:16px!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-status{margin-top:14px!important;line-height:1.8!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio [data-smart-notice]:empty{display:none!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-tabs button{font-size:13px!important;min-height:46px!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-tabs button[aria-selected=true]{color:var(--mf-on-accent)!important;background:var(--mf-accent)!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-actions .primary{color:var(--mf-on-accent)!important;background:var(--mf-accent)!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio h3{font-size:16px!important;line-height:1.7!important;margin:12px 0!important;color:var(--mf-ink)!important}@media(max-width:600px){.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio input:not([type=checkbox]),.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio select,.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio textarea{font-size:16px!important}}


@media(max-width:600px){.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-grid,.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-examples,.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-section-grid,.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-metrics{grid-template-columns:minmax(0,1fr)!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-section-grid fieldset{grid-template-columns:minmax(0,1fr)!important;width:100%!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-wide{grid-column:1!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-field{width:100%!important}.app-shell:is(.theme-light,.theme-dark) .mf-smart-studio .mf-smart-field select{width:100%!important}}