/* 역할: 편집기 도구 배치·가독성.
 * 화면 표현용 스타일입니다. 권한·요금제 판단은 서버에서 수행합니다.
 * 전체 구조: docs/CODE_GUIDE.md
 */
/* One viewport per editor, one scrollable canvas; panels remain independently accessible. */
body.editor-body {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.editor-body .editor-header {
  position: relative;
  flex: none;
  height: auto !important;
  min-height: 64px;
}
.editor-body .editor-layout {
  flex: 1;
  min-height: 0;
  height: auto !important;
  overflow: hidden;
}
.editor-body .canvas-area {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.editor-body .canvas-scroll {
  min-height: 0;
  height: auto !important;
  flex: 1;
  overflow: hidden;
  padding: 8px !important;
  overscroll-behavior: contain;
}
.editor-body .canvas-toolbar {
  flex-shrink: 0;
  gap: 8px;
  flex-wrap: wrap;
}
.editor-body .canvas-toolbar > div {
  display: flex;
  flex-wrap: wrap;
}
.editor-body #canvas-stage {
  max-width: 100%;
  margin: auto;
}
.editor-body #canvas {
  max-width: none;
  display: block;
  transform-origin: top left;
}
.editor-body .editor-notice {
  flex: none;
}
.editor-body .editor-sidebar,
.editor-body .property-panel {
  overscroll-behavior: contain;
  min-height: 0;
}
.editor-panel-heading,
.editor-body .property-panel > .side-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  padding: 10px 4px;
  border-bottom: 1px solid #eceaf3;
}
.editor-panel-heading .icon-btn,
.property-panel > .side-heading .icon-btn {
  min-width: 40px;
  min-height: 40px;
}
.editor-service-actions {
  display: grid;
  gap: 7px;
  padding: 12px 0;
}
.editor-service-actions a,
.studio-service-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #dbd8f4;
  border-radius: 10px;
  background: #f5f3ff;
  color: #5143ac;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}
.studio-service-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 8px 0 12px;
}
.studio-mobile-nav {
  display: none;
}
.properties-closed .property-panel {
  display: none !important;
}
@media (min-width: 901px) {
  .tools-collapsed .editor-sidebar {
    display: none !important;
  }
  .editor-body.tools-collapsed .editor-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
  .editor-body.properties-closed .editor-layout {
    grid-template-columns: 245px minmax(0, 1fr);
  }
  .editor-body.tools-collapsed.properties-closed .editor-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-workspace.studio-expanded .ai-studio-grid {
    align-items: stretch;
    min-height: 960px;
    height: calc(100dvh - 220px);
  }
  .ai-workspace.studio-expanded .ai-chat {
    height: 100%;
    min-height: 0;
    max-height: none;
    position: relative;
    top: auto;
  }
  .ai-workspace.studio-expanded .ai-messages {
    flex: 1;
    min-height: 190px;
    max-height: none;
    overscroll-behavior: contain;
  }
  .ai-workspace.studio-expanded .ai-preview-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .ai-workspace.studio-expanded .ai-preview-stage {
    flex: 1;
    min-height: 0;
    height: auto;
  }
  .ai-workspace.studio-expanded #studio-editor {
    height: 100%;
    min-height: 0;
  }
  .ai-workspace.studio-expanded .ai-preview-toolbar,
  .ai-workspace.studio-expanded .ai-editor-switch,
  .ai-workspace.studio-expanded .ai-preview-actions {
    flex: none;
  }
}
@media (max-width: 900px) {
  .editor-body .editor-header {
    min-height: 60px;
    gap: 6px;
    padding: 8px 10px !important;
  }
  .editor-body .editor-header #site-name {
    min-width: 80px;
    max-width: 40vw;
  }
  .editor-body .editor-actions {
    width: 100%;
    padding-bottom: 3px;
  }
  .editor-body .editor-actions #editor-tools-toggle {
    display: none;
  }
  .editor-body .mobile-editor-tools {
    flex: none;
    min-height: 47px;
    gap: 3px;
    padding: 5px;
  }
  .mobile-editor-tools button {
    min-height: 36px;
    font-size: 12px;
    padding: 6px 7px;
    flex: 1;
    white-space: normal;
  }
  .mobile-editor-tools button[aria-expanded="true"] {
    background: #ece8ff;
    color: #5143ac;
  }
  .editor-body .editor-layout {
    display: block !important;
    position: relative !important;
  }
  .editor-body .canvas-area {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .editor-body .editor-sidebar {
    height: 100%;
    max-height: 100%;
    top: 0;
    bottom: 0;
    overflow-y: auto;
  }
  .editor-body .property-panel {
    position: absolute !important;
    inset: 0 0 0 auto !important;
    height: 100%;
    max-height: 100% !important;
    width: min(380px, 100%) !important;
    overflow-y: auto;
    box-shadow: -12px 0 40px #18113222;
  }
  .editor-body .canvas-toolbar {
    padding: 8px !important;
    min-height: 48px;
  }
  .editor-body .canvas-toolbar > span {
    font-size: 10px;
  }
  .editor-body .editor-notice {
    font-size: 11px;
    line-height: 1.5;
    padding: 7px 10px;
    max-height: 78px;
    overflow-y: auto;
  }
  .studio-expanded.ai-workspace {
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: 85px;
    scroll-behavior: smooth;
  }
  .studio-service-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
  }
  .studio-service-actions a {
    font-size: 12px;
    padding: 9px 6px;
  }
  .studio-expanded .ai-chat {
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    top: auto !important;
    scroll-margin-top: 12px;
  }
  .studio-expanded #ai-messages {
    height: clamp(340px, 52dvh, 640px) !important;
    min-height: 340px !important;
    max-height: none !important;
    flex: none !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 14px;
    line-height: 1.85;
  }
  .studio-expanded #ai-prompt {
    font-size: 16px;
    min-height: 104px;
    max-height: 260px;
  }
  .studio-expanded .ai-preview-panel {
    scroll-margin-top: 12px;
    min-width: 0;
  }
  .studio-expanded #studio-editor {
    height: max(640px, calc(100svh - 80px)) !important;
    min-height: 640px !important;
    max-width: 100%;
  }
  .studio-expanded .ai-preview-stage {
    overflow: hidden;
  }
  .studio-mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: #fffffff2;
    border-top: 1px solid #ded9ef;
    box-shadow: 0 -8px 30px #28194812;
    backdrop-filter: blur(12px);
  }
  .studio-mobile-nav button {
    min-height: 46px;
    flex: 1;
    border: 0;
    border-radius: 12px;
    background: #eeebfb;
    color: #3f347c;
    font-weight: 750;
    font-size: 12px;
  }
  .studio-mobile-nav button:last-child {
    background: #514bd6;
    color: #fff;
  }
  .ai-workspace.studio-expanded .ai-modebar #ai-preview-open {
    display: inline-flex;
    min-height: 42px;
  }
  .ai-workspace.studio-expanded .ai-modebar {
    align-items: end;
  }
  .ai-workspace.studio-expanded .ai-preview-toolbar > div {
    display: flex;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studio-expanded.ai-workspace {
    scroll-behavior: auto;
  }
}

/* A single editor owns the draft; embedded chrome only exposes unique actions. */
.embedded-editor .back-link,
.embedded-editor .language-switch,
.embedded-editor #preview-link,
.embedded-editor #editor-development,
.embedded-editor #editor-domain {
  display: none !important;
}
.embedded-editor .editor-header {
  flex-wrap: wrap;
  gap: 8px;
}
.embedded-editor .editor-header #site-name {
  min-width: 100px;
  max-width: 180px;
}
.embedded-editor .editor-actions {
  flex-wrap: wrap;
  gap: 5px;
}
.embedded-editor .editor-actions button {
  min-height: 36px;
}
.ai-editor-switch #studio-manual.active,
.ai-chat-mode #studio-chat.active {
  background: #5936d9;
  color: white;
  border-color: #5936d9;
}
@media (max-width: 900px) {
  .ai-workspace.studio-expanded .ai-modebar #ai-preview-open {
    display: none;
  }
  .ai-workspace .ai-messages {
    min-height: 280px;
    max-height: 55dvh;
  }
  .ai-workspace #ai-prompt {
    min-height: 100px;
  }
  .studio-mobile-nav button {
    min-height: 48px;
  }
  .embedded-editor .editor-header #save-state {
    font-size: 11px;
  }
}
#runtime-settings .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 18px;
}
#runtime-settings label {
  display: grid;
  gap: 6px;
}
#runtime-settings input[type="checkbox"] {
  width: auto;
}
#runtime-settings small {
  color: #4c586d;
}
@media (max-width: 900px) {
  .ai-workspace.studio-expanded .ai-modebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
  }
  .ai-workspace.studio-expanded .ai-modebar > label {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    white-space: normal;
    font-size: 12px;
  }
  .ai-workspace.studio-expanded .ai-modebar > label:first-child {
    grid-column: 1/-1;
  }
  .ai-workspace.studio-expanded .ai-modebar select {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  .ai-workspace.studio-expanded .ai-modebar > #ai-new {
    grid-column: 1/-1;
  }
  .ai-workspace.studio-expanded .studio-service-actions a {
    overflow-wrap: anywhere;
    text-align: center;
  }
  .embedded-editor #site-name {
    flex: 1;
    max-width: 55vw !important;
  }
}

#properties [hidden] {display:none!important}
.element-property-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:14px;border-bottom:1px solid #e5e7eb;margin-bottom:16px}
.element-property-heading button {font-size:12px;padding:7px;border:1px solid #ddd;background:white;cursor:pointer}

/* Familiar slide-editor layout: insert and layers on the left, tools above canvas. */
.editor-ribbon {background:#fff;border:1px solid #dedee8;border-radius:12px;margin:0 12px 8px;padding:10px 12px;box-shadow:0 2px 8px #20205005;flex-shrink:0}
.ribbon-heading {display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:13px}
.ribbon-heading span {color:#737383;font-size:11px}
.ribbon-heading button {margin-left:auto}
.ribbon-controls {display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.ribbon-controls label {display:flex;flex-direction:column;gap:4px;font-size:11px;color:#57576b;margin:0}
.editor-ribbon input,.editor-ribbon textarea,.editor-ribbon select {height:34px;padding:5px 7px;border:1px solid #dcdce8;border-radius:6px;font-size:13px;width:74px;min-width:0;margin:0}
.editor-ribbon select {width:130px}
.editor-ribbon input[type=color] {width:40px;padding:3px}
.ribbon-copy {flex:1 1 160px;max-width:320px}
.ribbon-copy input,.ribbon-copy textarea {width:100%}.ribbon-copy textarea {resize:vertical;min-height:34px;max-height:80px}
.editor-ribbon button,.easy-insert button {min-height:34px;padding:7px 10px;border:1px solid #dedee8;border-radius:7px;background:#fff;color:#34334d;cursor:pointer;font-size:12px;white-space:nowrap}
.editor-ribbon button:hover,.easy-insert button:hover {background:#f0ecff;border-color:#9075db}
.editor-ribbon button[aria-pressed=true] {background:#ede7ff;color:#5625bc;border-color:#8254db}
.editor-ribbon .ribbon-delete {color:#c03636;background:#fff6f5;border-color:#f0d2cd}
.ribbon-delete small {opacity:.65;margin-left:6px}
.ribbon-hint {padding:8px 0;color:#6e6684;font-size:12px}
.easy-insert {padding:14px;background:#f6f3ff;border:1px solid #e5ddfa;border-radius:10px;margin:0 0 18px}
.easy-insert>div {display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.easy-insert p {font-size:11px;color:#78718b;margin:10px 0 0}
#element-outline {margin:12px 0 18px;padding:10px 0;border-top:1px solid #e5e4ed;border-bottom:1px solid #e5e4ed}
.element-list-row {display:flex;border:1px solid transparent;border-radius:6px;margin:3px 0;overflow:hidden}
.element-list-row.active {background:#efeaff;border-color:#9874e2}
.element-list-row button {border:0;background:transparent;cursor:pointer;color:#403d55}
.element-pick {flex:1;text-align:left;padding:8px;min-width:0}
.element-pick span,.element-pick small {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.element-pick span {font-size:12px;font-weight:600}.element-pick small {font-size:10px;color:#837e91;margin-top:2px}
.element-remove {min-width:38px;font-size:13px}.element-remove:hover {background:#fee8e5;color:#bd3232}
.element-pick:disabled {opacity:.45}
.easy-more {width:100%;margin-top:8px}
.editor-more-tools {margin-top:20px;border-top:1px solid #e5e4ed;padding-top:12px}
.editor-more-tools>summary {padding:10px 0;font-size:12px;font-weight:650;cursor:pointer;color:#676178}
.editor-more-tools[open]>summary {margin-bottom:12px}
.insert-element-dialog {width:min(560px,calc(100vw - 32px));max-height:85vh;border:0;border-radius:18px;padding:24px;box-shadow:0 24px 80px #211c4540;color:#292339}
.insert-element-dialog::backdrop {background:#19152b66}
.insert-element-dialog header {display:flex;align-items:center;justify-content:space-between;gap:16px}
.insert-element-dialog header h2 {font-size:22px;letter-spacing:-.7px;margin:4px 0 0}
.insert-element-dialog header small {color:#7555c2;font-size:12px}
.insert-element-dialog [data-close] {border:0;border-radius:50%;width:36px;height:36px;background:#f3f1f7;cursor:pointer;font-size:24px}
.insert-element-dialog>p,.insert-element-dialog .micro {font-size:13px;line-height:1.6;color:#777181}
.insert-element-dialog label {display:flex;gap:12px;align-items:center;font-size:13px;margin:16px 0}
.insert-element-dialog label input,.insert-element-dialog label select {flex:1;min-width:0;margin:0}
.insert-element-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.insert-element-grid>button {display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-height:112px;border:1px solid #e4dfec;border-radius:12px;padding:14px;background:#fff;cursor:pointer;color:inherit;text-align:left}
.insert-element-grid>button:hover,.insert-element-grid>button:focus-visible {outline:2px solid #7956ce;background:#f7f4ff}
.insert-element-grid strong {font-size:22px;color:#7851cc}
.insert-element-grid b {font-size:14px}.insert-element-grid small {font-size:11px;color:#7d7788}
.media-source-actions {display:flex;gap:12px;margin:24px 0}
.media-source-actions button {flex:1;padding:16px 10px;border:1px solid #ddd4ee;border-radius:10px;background:#f8f5ff;color:#543992;cursor:pointer;font-weight:650}
.insert-element-dialog .form-error {color:#b83232;font-size:13px}
@media(max-width:600px){.insert-element-dialog{padding:18px}.insert-element-grid{grid-template-columns:repeat(2,1fr)}.insert-element-dialog label{flex-direction:column;align-items:stretch}}
@media(max-width:900px){.editor-ribbon{margin:0 4px 6px;padding:8px}.ribbon-heading span{display:none}.ribbon-controls{max-height:190px;overflow:auto}.editor-ribbon input,.editor-ribbon select{min-height:40px}.editor-ribbon button{min-height:40px}.ribbon-copy{flex-basis:100%;max-width:none}}
/* 3.42: clear AI/manual modes and comfortable, touch-sized editing controls. */
.ai-workspace .ai-chat {border:2px solid #8e6bd5;min-width:0}
.ai-workspace .ai-preview-panel {border:2px solid #228a9c;min-width:0}
.ai-chat-mode #studio-chat {border:2px solid #8e6bd5;color:#67439e;background:#f4effc;min-height:48px;font-size:15px}
.ai-editor-switch #studio-manual {border:2px solid #228a9c;color:#176d7c;background:#eef9fa;min-height:48px;font-size:15px}
.ai-chat-mode #studio-chat.active {background:#7047b5;border-color:#7047b5;color:#fff}
.ai-editor-switch #studio-manual.active {background:#167b8c;border-color:#167b8c;color:#fff}
.ai-workspace .ai-message {text-align:left;text-indent:0;min-width:0;max-width:100%;box-sizing:border-box;font-size:15px;line-height:1.75;word-break:normal;overflow-wrap:anywhere;flex-shrink:0}
.ai-workspace .ai-messages {align-items:stretch;padding:18px 16px;gap:14px;scroll-padding:18px}
.ai-workspace .ai-message.user {align-self:flex-end;max-width:90%}.ai-workspace .ai-message.assistant{align-self:flex-start;max-width:95%}
.ai-workspace .ai-message p {margin:0 0 8px}.ai-workspace .ai-message p:last-child{margin-bottom:0}
.ai-workspace button,.ai-workspace select {min-height:44px}.ai-workspace textarea {font-size:16px;line-height:1.6}
.editor-mobile-hint {display:none}
.editor-ribbon button,.easy-insert button {min-height:44px;font-size:13px;padding:10px 12px;white-space:normal;line-height:1.4}
.editor-ribbon input,.editor-ribbon select {height:44px;font-size:14px}
.editor-ribbon label {font-size:12px}.ribbon-heading{flex-wrap:wrap}.ribbon-heading span{line-height:1.5}
.editor-body .block-row {min-height:48px}.editor-body .block-row>button{min-width:42px;min-height:42px}
.editor-body .tool-tabs button {min-height:44px}.editor-body .editor-actions button,.editor-body .editor-actions a{min-height:42px;line-height:1.4;white-space:normal}
.editor-body .element-pick {min-height:44px}.editor-body .element-pick small{font-size:12px}.editor-body .element-pick span{white-space:normal;font-size:13px}
.editor-body .property-panel label {font-size:13px}.editor-body .property-panel input,.editor-body .property-panel select{min-height:44px}
@media(max-width:900px){
 .editor-mobile-hint{display:inline}.editor-desktop-hint{display:none}
 .ribbon-controls{max-height:min(210px,28dvh);padding-bottom:6px;overflow-x:hidden;overscroll-behavior:contain}
 .ribbon-hint{font-size:13px;line-height:1.65}.ribbon-heading strong{font-size:14px}.ribbon-heading button{margin-left:auto}
 .editor-ribbon input,.editor-ribbon select,.editor-ribbon textarea {font-size:16px}
 .editor-body .editor-header{gap:6px;padding:8px}.editor-body .editor-actions{gap:6px;flex-wrap:wrap}
 .editor-body #site-name{font-size:16px}.editor-body .canvas-toolbar{padding:8px;font-size:12px}
 .editor-body .canvas-toolbar button{min-height:42px;padding:8px 12px}
 .editor-body .editor-notice{font-size:12px;line-height:1.6;padding:8px 12px}
 .embedded-editor .editor-header #save-state{font-size:12px;white-space:normal}
 .ai-workspace .ai-composer-tools{flex-wrap:wrap;gap:10px}.ai-workspace .ai-composer-tools select{min-width:0;flex:1}
 .ai-workspace .ai-message{font-size:15px;padding:14px;max-width:100%}
 .studio-mobile-nav button[data-studio-jump=chat]{border:2px solid #8e6bd5;background:#f4effc;color:#67439e}
 .studio-mobile-nav button[data-studio-jump=manual]{border:2px solid #228a9c;background:#eef9fa;color:#176d7c}
}
@media(max-width:600px){
 .editor-body .editor-header .editor-actions{width:100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior:contain;padding-bottom:4px}
 .editor-body .editor-actions button,.editor-body .editor-actions a{flex:none;white-space:nowrap}
 .ribbon-controls{max-height:min(156px,22dvh)}
 .editor-body .canvas-toolbar>span{font-size:11px}
}
/* 3.46: a shared, quiet animated border system and a full-height mobile canvas. */
@property --studio-hue {syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes studio-border-flow {to{--studio-hue:360deg}}
.ai-workspace .ai-chat,.ai-workspace .ai-preview-panel {border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--studio-hue),#8c9cff,#d7b5ed,#9bd8e1,#8c9cff) border-box;animation:studio-border-flow 12s linear infinite}
.ai-workspace .ai-preview-panel {animation-delay:-6s}
.ai-chat-mode #studio-chat,.ai-editor-switch #studio-manual,.studio-mobile-nav button[data-studio-jump] {border:1px solid #c8c8e6;color:#554e83;background:#f4f3fb}
.ai-chat-mode #studio-chat.active,.ai-editor-switch #studio-manual.active{border-color:transparent;background:linear-gradient(115deg,#6d6ed6,#9579cb);color:#fff}
.studio-service-actions {justify-content:flex-end;margin:0 0 12px;gap:12px}.studio-service-actions a{font-size:12px}
.studio-page-step {margin:22px 0;padding:20px;background:#f8f8fc;border:1px solid #e9e8f2;border-radius:14px}
.studio-page-step h2,.studio-edit-step{font-size:20px;margin:0 0 16px}.studio-page-step small,.studio-edit-step small{color:#8275ba;font-size:12px;margin-right:12px}
.studio-page-actions{display:flex;flex-wrap:wrap;gap:8px}.studio-page-step .ai-modebar{padding:0 0 14px;margin:0;background:none;border:0}
#trial-edit-copy{display:block;margin-top:14px;padding:12px;border-left:3px solid #a694cf;background:#f7f4fb;font-size:12px;line-height:1.7;color:#706580}#trial-edit-copy[hidden]{display:none}
.credit-help{position:relative;border:1px solid #b5abc9;border-radius:50%;background:#fff;width:20px;height:20px;min-height:20px!important;padding:0;color:#6b5e83;font-size:12px}.credit-help [role=tooltip]{display:none;position:absolute;top:27px;left:-40px;width:210px;padding:12px;background:#332f49;color:#fff;border-radius:10px;z-index:20;font-size:12px;line-height:1.6}.credit-help:hover [role=tooltip],.credit-help:focus [role=tooltip]{display:block}
.editor-header .editor-service-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;font-size:12px}.embedded-editor #preview-link{display:inline-flex!important}
@media(max-width:900px){
 .ai-workspace.studio-expanded.manual-open .ai-chat{display:none}
 .ai-workspace.studio-expanded .ai-editor-switch{display:flex!important;position:sticky;top:0;z-index:25;background:#fff;padding:8px}
 .ai-workspace.studio-expanded.manual-open .ai-preview-panel{height:calc(100dvh - 76px);min-height:620px;display:flex;flex-direction:column;scroll-margin-top:0}
 .ai-workspace.studio-expanded.manual-open .ai-preview-stage{flex:1;min-height:0;height:auto;overflow:hidden;padding:0}
 .ai-workspace.studio-expanded.manual-open #studio-editor{height:100%!important;min-height:0!important;width:100%;border:0}
 .ai-workspace.studio-expanded.manual-open .ai-preview-toolbar,.ai-workspace.studio-expanded.manual-open .ai-preview-actions{display:none}
 .embedded-editor .editor-layout{height:calc(100dvh - 110px);min-height:360px}
 .embedded-editor .editor-service-actions{display:none}
 .studio-page-step{padding:14px}.studio-page-actions .btn{font-size:12px}.studio-service-actions{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.ai-workspace .ai-chat,.ai-workspace .ai-preview-panel{animation:none}}

/* Scripted tour embeds the production templates and editor code, without provider calls. */
.studio-tour-body>header,.studio-tour-body>footer,.studio-tour-body .studio-home,.studio-tour-body .ai-workspace-head,.studio-tour-body .studio-service-actions,.studio-tour-body .studio-template-bar,.studio-tour-body .studio-page-step,.studio-tour-body .studio-edit-step,.studio-tour-body .studio-trial-welcome,.studio-tour-body #ai-status,.studio-tour-body .studio-mobile-nav{display:none!important}
.studio-tour-body .ai-workspace{width:100%;max-width:none;padding:18px;margin:0}
.studio-tour-body .ai-studio-grid{grid-template-columns:360px minmax(0,1fr)!important;height:870px!important}
.studio-tour-body .ai-chat{height:870px!important}.studio-tour-body .ai-preview-panel{height:870px!important}.studio-tour-body #studio-editor{height:760px!important;width:100%}

@media(max-width:900px){.embedded-editor .editor-ribbon[data-selection=section] .ribbon-controls{display:none}.embedded-editor .editor-notice{font-size:11px;line-height:1.4;max-height:48px;overflow:auto}.embedded-editor .editor-ribbon{margin:0 4px 4px}.embedded-editor .editor-header{padding:6px}.embedded-editor .canvas-toolbar{padding:4px}}

/* 3.47: a clear path from first idea to launch. */
.studio-brand-intro{padding:34px 30px;margin:20px 0;background:linear-gradient(120deg,#f1edff,#f2faf9);border-radius:22px}.studio-brand-intro>span{font-size:11px;letter-spacing:.2em;color:#7656ae}.studio-brand-intro h2{font-size:clamp(24px,3vw,38px);line-height:1.4;margin:14px 0}.studio-brand-intro p{line-height:1.9;color:#686273}.studio-upgrade-step{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px;margin:28px 0;border-radius:20px;background:#f3effb}.studio-upgrade-step small{color:#7556b3;font-weight:800}.studio-upgrade-step h2{font-size:23px}.studio-upgrade-step p{line-height:1.7}.ai-workspace #studio-home small{display:inline-flex;align-items:center;background:#6041a5;color:white;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:750;box-shadow:0 5px 15px #6041a526}.ai-workspace #studio-home{gap:20px}@media(max-width:600px){.studio-brand-intro{padding:24px 18px}.studio-upgrade-step{display:block;padding:24px 18px}.studio-upgrade-step .btn{margin-top:15px;width:100%;box-sizing:border-box}.ai-workspace #studio-home{flex-wrap:wrap;gap:10px}}

@media(max-width:700px){
 .ai-workspace .ai-chat,.ai-workspace .ai-preview-panel{animation:none;--studio-hue:35deg}
 .ai-workspace .ai-preview-panel{--studio-hue:185deg}
}