:root{
  --bg:#08172f;--panel:#112746;--panel2:#152d4f;--panel3:#0d213f;--line:#294564;
  --text:#f5f7fb;--muted:#a7bbd2;--accent:#ffc44d;--accent2:#f2ae2e;
  --bubble-bg:#fff4d2;--bubble-text:#3c2a17;--bubble-border:#85531c;--bubble-border-width:2px;
  --bubble-radius-tl:14px;--bubble-radius-tr:14px;--bubble-radius-br:14px;--bubble-radius-bl:14px;
  --bubble-pt:9px;--bubble-pr:14px;--bubble-pb:9px;--bubble-pl:14px;
  --bubble-shadow:0 4px 0 rgba(0,0,0,.12),0 8px 18px rgba(0,0,0,.10);
  --sample-max-width:420px;--sample-gap:8px;--donation-width:250px;
  --font-size:15px;--line-height:1.45;--font-weight:500;--letter-spacing:0px;
  --nick-size:12px;--nick-gap:4px;--nick-color:#5c4632;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,Pretendard,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
button,input,select{font:inherit}
button{cursor:pointer}
.app{display:grid;grid-template-columns:300px minmax(560px,1fr) 350px;height:100vh}
.panel{background:var(--panel);border-right:1px solid var(--line);padding:16px;overflow:auto}
.panel.right{border-right:0;border-left:1px solid var(--line)}
.brand{font-weight:850;font-size:18px;margin-bottom:4px}
.sub{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.45}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:#0d213f;border:1px solid var(--line);border-radius:10px;margin-bottom:16px}
.mode-switch button{height:34px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12px;font-weight:750}
.mode-switch button.active{background:#2b3342;color:#fff}
.section{margin:0 0 18px}
.section h3{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#c9d2df;margin:0 0 9px}
.note{font-size:11px;color:var(--muted);line-height:1.5}
.control{display:grid;grid-template-columns:1fr 128px;gap:9px;align-items:center;margin:8px 0}
.control label{font-size:12px;color:#dce2ea}
.control input[type=color]{width:100%;height:34px;border:1px solid var(--line);background:transparent;border-radius:8px;padding:2px}
.control input[type=number],.control select,.wide{
  width:100%;height:34px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px;padding:0 9px
}
.switch{display:flex;justify-content:flex-end}.switch input{width:18px;height:18px}
.quick-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.quick-buttons.three{grid-template-columns:repeat(3,1fr)}
.quick-btn{height:34px;border:1px solid var(--line);background:var(--panel2);color:#dce4f0;border-radius:8px;font-size:11px}
.quick-btn.active{background:#2f3b55;border-color:#6782d5;color:#fff}
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.preset{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:9px;padding:8px;text-align:left;font-size:11px}
.preset:hover{border-color:#59657a}
.divider{height:1px;background:var(--line);margin:12px 0}
.file-row input{width:100%}
.layer-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.layer-item{display:grid;grid-template-columns:28px 1fr auto;gap:7px;align-items:center;padding:7px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.layer-item.selected{border-color:var(--accent);background:#242b39}
.modal-layer-picker{margin:10px 0 12px;display:flex;flex-direction:column;gap:8px}
.modal-layer-empty{padding:10px 12px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:13px;background:rgba(255,255,255,.02)}
.modal-layer-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto;padding-right:2px}
.modal-layer-item{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);cursor:pointer;transition:.15s}
.modal-layer-item:hover{border-color:#6e86ff;background:#242b39}
.modal-layer-item.selected{border-color:var(--accent);box-shadow:0 0 0 1px rgba(110,134,255,.25) inset;background:#242b39}
.modal-layer-item img{width:38px;height:38px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.modal-layer-item .layer-main{min-width:0}
.modal-layer-item .layer-main b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-layer-item .layer-main span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.modal-layer-badge{font-size:12px;color:#c6d2ff;background:#23304f;border:1px solid rgba(110,134,255,.3);padding:5px 8px;border-radius:999px;white-space:nowrap}
.modal-layer-help{font-size:12px;color:var(--muted)}
.thumb{width:28px;height:28px;border-radius:5px;object-fit:cover;background:#111}
.layer-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-scope{font-size:10px;color:var(--muted)}
.layer-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}
.layer-actions button{height:31px;border:1px solid var(--line);background:var(--panel2);color:#fff;border-radius:7px;font-size:11px}
.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}
.position-grid button{height:30px;border:1px solid var(--line);background:#1d232d;color:#cbd6e6;border-radius:7px;font-size:10px}
.position-grid button:hover{border-color:#6078bc;background:#253047}
.ratio-readout{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}
.ratio-readout div{padding:6px 7px;border-radius:7px;background:#11151c;border:1px solid var(--line);font-size:10px;color:#aebbd0;text-align:center}

.advanced-only{display:none}
body.advanced .advanced-only{display:block}
body.advanced .advanced-grid{display:grid}
.easy-only{display:block}
body.advanced .easy-only{display:none}

.preview-wrap{display:flex;flex-direction:column;min-width:0}
.topbar{height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#12151b}
.badge{padding:5px 8px;border-radius:999px;background:#1c2330;border:1px solid #344054;font-size:11px;color:#ccd6e5}
.top-actions{display:flex;align-items:center;gap:7px}
.icon-btn{height:31px;border:1px solid var(--line);border-radius:7px;background:#1b2029;color:#dce5f2;font-size:11px;padding:0 9px}
.icon-btn.active{border-color:#627ed5;background:#27334b}
.preview{
  flex:1;position:relative;overflow:hidden;
  background:
    linear-gradient(45deg,#1a1e26 25%,transparent 25%) 0 0/24px 24px,
    linear-gradient(45deg,transparent 75%,#1a1e26 75%) 0 0/24px 24px,
    linear-gradient(45deg,transparent 75%,#1a1e26 75%) 12px -12px/24px 24px,
    linear-gradient(45deg,#1a1e26 25%,#151820 25%) 12px -12px/24px 24px;
}
.stage-hint{position:absolute;left:16px;bottom:12px;color:#7f8a9c;font-size:11px;pointer-events:none}
.overlay-frame{
  position:absolute;border:1px solid #394151;border-radius:14px;background:rgba(10,12,17,.68);
  padding:22px;overflow:visible;box-shadow:0 18px 60px rgba(0,0,0,.35);user-select:none
}
.overlay-frame.selected{outline:2px solid var(--accent);outline-offset:3px}
.preview-label{font-size:10px;color:#8591a3;margin-bottom:10px;pointer-events:none}
.frame-editbar{
  display:none;position:absolute;left:12px;top:-28px;height:24px;padding:0 9px;border-radius:6px;
  background:var(--accent);color:#08101f;font-size:10px;font-weight:850;align-items:center;cursor:move;z-index:50
}
.overlay-frame.selected .frame-editbar{display:flex}
.frame-resize{display:none;position:absolute;right:-9px;bottom:-9px;width:17px;height:17px;border-radius:4px;background:#fff;border:3px solid var(--accent);cursor:nwse-resize;z-index:60}
.overlay-frame.selected .frame-resize{display:block}
.chat-list{height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sample-gap);position:relative}
.sample-row{display:flex;width:100%;position:relative}
.sample-bubble{
  position:relative;display:inline-block;max-width:var(--sample-max-width);
  background:var(--bubble-bg);color:var(--bubble-text);border:var(--bubble-border-width) solid var(--bubble-border);
  border-radius:var(--bubble-radius-tl) var(--bubble-radius-tr) var(--bubble-radius-br) var(--bubble-radius-bl);
  padding:var(--bubble-pt) var(--bubble-pr) var(--bubble-pb) var(--bubble-pl);
  box-shadow:var(--bubble-shadow);line-height:var(--line-height);word-break:break-word;cursor:pointer;
  font-size:var(--font-size);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)
}
.sample-bubble.selected{outline:2px solid var(--accent);outline-offset:3px}
.sample-bubble.selected.edit-width{/* selection must not change layout geometry */}
.sample-bubble .meta{font-size:var(--nick-size);font-weight:700;margin-bottom:var(--nick-gap);opacity:.9;color:var(--nick-color)}
.sample-bubble .platform{font-size:.85em;margin-right:4px;opacity:.7}
.sample-bubble .msg{font-size:inherit}
.sample-bubble .emote-sample{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:rgba(127,127,127,.12);font-size:28px}
/* Tail is an independent part. It never inherits bubble border width. */
.tail-part{
  position:absolute;
  width:var(--tail-width,18px);
  height:var(--tail-height,12px);
  box-sizing:border-box;
  z-index:12;
  cursor:grab;
  user-select:none;
  touch-action:none;
  pointer-events:auto;

  background:var(--tail-bg,var(--bubble-bg));
  clip-path:polygon(0 0,100% 0,50% 100%);
  filter:drop-shadow(0 0 var(--tail-outline,2px) var(--tail-border,var(--bubble-border)));
}
.tail-part.tail-soft{
  clip-path:polygon(7% 0,93% 0,50% 100%);
}
.tail-part:active{cursor:grabbing}
.tail-part.selected{outline:2px solid var(--accent);outline-offset:4px}
.tail-part.tail-none{display:none!important}

.tail-resize{
  position:absolute;width:14px;height:14px;border-radius:4px;background:#fff;border:3px solid var(--accent);
  cursor:nwse-resize;z-index:84
}
.donation{min-width:var(--donation-width);text-align:center}.donation .msg{font-weight:800}
.event-service-surface{
  padding:8px 12px;
  border-radius:10px;
  background:linear-gradient(180deg,#f5f6f8,#e8ebef);
  color:#2e3339;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 1px 2px rgba(0,0,0,.08);
}
.donation.event-strip-surface .event-service-surface{
  padding:0;
  border-radius:0;
  background:transparent!important;
  color:inherit;
  box-shadow:none!important;
  border:0!important;
  outline:0!important;
}
.donation.event-separate-style{
  background:var(--event-bg);
  color:var(--event-text);
  border-color:var(--event-border);
  border-width:var(--event-border-width);
  border-radius:var(--event-radius);
}

/* direct bubble editing */
.bubble-resize{display:none;position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:16px;height:34px;border-radius:5px;background:#fff;border:3px solid var(--accent);cursor:ew-resize;z-index:70}
.sample-bubble.selected .bubble-resize{display:block}
.padding-guide{display:none;position:absolute;left:var(--bubble-pl);right:var(--bubble-pr);top:var(--bubble-pt);bottom:var(--bubble-pb);border:1px dashed rgba(124,156,255,.9);pointer-events:none;z-index:65}
.sample-bubble.selected .padding-guide{display:block}
.pad-handle{display:none;position:absolute;background:#fff;border:2px solid var(--accent);z-index:75}
.sample-bubble.selected .pad-handle{display:block}
.pad-handle.left,.pad-handle.right{width:8px;height:24px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.pad-handle.top,.pad-handle.bottom{width:24px;height:8px;left:50%;transform:translateX(-50%);cursor:ns-resize}
.pad-handle.left{left:calc(var(--bubble-pl) - 4px)}.pad-handle.right{right:calc(var(--bubble-pr) - 4px)}
.pad-handle.top{top:calc(var(--bubble-pt) - 4px)}.pad-handle.bottom{bottom:calc(var(--bubble-pb) - 4px)}

/* decoration */
.deco-layer{position:absolute;z-index:20;object-fit:contain;cursor:grab;user-select:none;-webkit-user-drag:none;touch-action:none}
.deco-layer:active{cursor:grabbing}
.deco-layer.selected{outline:2px solid var(--accent);outline-offset:2px}.deco-layer.template-peer{outline:0}
.deco-resize{position:absolute;width:15px;height:15px;background:#fff;border:3px solid var(--accent);border-radius:4px;cursor:nwse-resize;z-index:80}
.smart-guide{position:absolute;background:rgba(124,156,255,.75);pointer-events:none;z-index:90;display:none}
.smart-guide.v{width:1px;top:0;bottom:0}.smart-guide.h{height:1px;left:0;right:0}
.snap-chip{position:absolute;z-index:95;padding:3px 6px;border-radius:999px;background:#6f8cff;color:#08101f;font-size:9px;font-weight:850;pointer-events:none;display:none}


.selection-card{padding:10px;border:1px solid var(--line);border-radius:9px;background:#141820;margin-bottom:10px}
.selection-title{font-size:12px;font-weight:850}.selection-sub{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.45}
.inspector-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.pill{font-size:10px;padding:3px 6px;border-radius:999px;background:#222936;color:#aebbd0}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.action{height:37px;border:1px solid #3a4354;background:#232936;color:#fff;border-radius:9px}
.primary{background:#6f8cff;border-color:#6f8cff;color:#08101f;font-weight:850}
textarea{width:100%;height:170px;background:#0e1117;color:#dfe8f5;border:1px solid var(--line);border-radius:9px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;resize:vertical}
.ok{color:#7fe3aa}.warn{color:#ffcc7a}.hidden{display:none!important}
.four-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.four-grid .mini{display:grid;grid-template-columns:34px 1fr;gap:5px;align-items:center}
.four-grid .mini span{font-size:10px;color:var(--muted)}
.four-grid .mini input{width:100%;height:31px;border:1px solid var(--line);background:var(--panel2);color:#fff;border-radius:7px;padding:0 7px}
.link-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.link-row label{font-size:10px;color:var(--muted)}
@media(max-width:1220px){.app{grid-template-columns:285px 1fr}.panel.right{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);max-height:42vh}}


/* ==================== v0.15 Friendly UI ==================== */
.app{
  grid-template-columns:248px minmax(620px,1fr) 318px;
  background:#0d1016;
}
.panel{
  padding:0;
  background:#151922;
}
.panel:not(.right){
  border-right:1px solid #2a3140;
}
.panel.right{
  border-left:1px solid #2a3140;
  padding:16px;
}
.panel:not(.right) > .brand{
  padding:18px 16px 0;
  font-size:20px;
}
.panel:not(.right) > .sub{
  padding:0 16px;
  margin:5px 0 14px;
}
.legacy-mode-switch{display:none!important}

.side-tabs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  padding:0 12px 12px;
}
.side-tab{
  min-height:56px;
  border:1px solid #303849;
  border-radius:11px;
  background:#1c212b;
  color:#b8c2d2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  padding:8px 10px;
  font-size:12px;
  font-weight:750;
}
.side-tab-icon{font-size:15px;color:#8ea7ff}
.side-tab.active{
  background:#283653;
  border-color:#6685df;
  color:#fff;
  box-shadow:0 0 0 1px rgba(124,156,255,.12) inset;
}
.side-panel-intro{
  margin:0 12px 10px;
  padding:11px 12px;
  border-radius:10px;
  background:#10141b;
  border:1px solid #262d39;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.side-panel-intro b{font-size:12px}
.side-panel-intro span{font-size:10px;color:#8f9bac;line-height:1.45}

.left-group-section{
  margin:0;
  padding:14px 14px 16px;
  border-top:1px solid #252c38;
}
.left-group-section h3{
  font-size:12px;
  text-transform:none;
  letter-spacing:0;
  color:#eef2fa;
  margin-bottom:10px;
}
.left-group-section.is-hidden{display:none!important}
.group-help{
  margin:0 0 11px;
  font-size:10px;
  color:#8d9aac;
  line-height:1.45;
}

.preset-grid-friendly{
  grid-template-columns:1fr;
  gap:7px;
}
.preset-grid-friendly .preset{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
}
.preset-swatch{
  width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  border:2px solid var(--swatch-border,#555);
  background:var(--swatch-bg,#fff);
}
.preset-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.preview-wrap{background:#08172f}
.topbar{
  height:60px;
  padding:0 14px 0 18px;
}
.topbar b{font-size:14px}
.top-actions{gap:6px}
.icon-btn{
  height:34px;
  background:#181e28;
  border-color:#2d3543;
}
.apply-btn{
  height:36px;
  padding:0 17px;
  border:0;
  border-radius:9px;
  background:#ffc44d;
  color:#08101f;
  font-weight:850;
  font-size:12px;
}
.preview-label{
  color:#738196;
}
.stage-hint{
  background:rgba(13,16,22,.78);
  padding:7px 10px;
  border-radius:8px;
  max-width:68%;
}

.panel.right > .section{
  margin:0 0 12px;
  padding:13px;
  border:1px solid #2b3341;
  border-radius:12px;
  background:#181d26;
}
.panel.right > .section:first-child{
  background:#11161e;
}
.panel.right .section h3{
  text-transform:none;
  letter-spacing:0;
  color:#eef2fa;
  font-size:12px;
}
.details-toggle{
  width:100%;
  height:36px;
  margin:0 0 12px;
  border-radius:9px;
  border:1px solid #354052;
  background:#1e2632;
  color:#dce5f2;
  font-size:11px;
  font-weight:750;
}
.inspector-context.is-hidden{display:none!important}
.inspector-empty{
  text-align:center;
  padding:28px 18px!important;
  color:#9ca9bb;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.inspector-empty .empty-icon{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:#222b39;color:#89a4ff;font-size:20px;
  margin-bottom:4px;
}
.inspector-empty b{color:#e7edf7;font-size:12px}
.inspector-empty span{font-size:10px;line-height:1.55}
.inspector-tip{
  padding:10px;
  background:#11161e;
  border:1px solid #2a3340;
  border-radius:9px;
  font-size:10px;
  color:#91a0b5;
  line-height:1.55;
}

.control{
  grid-template-columns:minmax(0,1fr) 116px;
}
.control label{font-size:11px}
.note{font-size:10px}
.divider{margin:11px 0}

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(3,5,9,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal-backdrop.hidden{display:none!important}
.export-card{
  width:min(520px,94vw);
  max-height:86vh;
  overflow:auto;
  border-radius:16px;
  border:1px solid #3a4558;
  background:#171c25;
  box-shadow:0 28px 90px rgba(0,0,0,.5);
}
.export-head{
  position:sticky;top:0;z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border-bottom:1px solid #303848;
  background:#171c25;
}
.export-head > div{display:flex;flex-direction:column;gap:3px}
.export-head b{font-size:16px}
.export-head span{font-size:10px;color:#98a5b7}
.modal-close{
  height:30px;padding:0 10px;border-radius:8px;
  border:1px solid #374255;background:#222936;color:#dce5f2;
}
#exportContent{padding:16px}
#exportContent .section{margin:0}
#exportContent h3{display:none}
.code-details{
  margin-top:12px;
  border:1px solid #303949;
  border-radius:9px;
  overflow:hidden;
}
.code-details summary{
  cursor:pointer;
  padding:10px 11px;
  background:#11161e;
  font-size:11px;
  color:#b9c5d6;
}
.code-details textarea{
  border:0;
  border-top:1px solid #303949;
  border-radius:0;
}

@media(max-width:1180px){
  .app{grid-template-columns:220px 1fr 286px}
  .panel.right{grid-column:auto;max-height:none}
}


/* ==================== v0.16 Simpler workflow ==================== */
.app{
  grid-template-columns:300px minmax(620px,1fr) 320px;
}

/* Old tab navigation is intentionally gone. */
.side-tabs,.side-panel-intro{display:none!important}

.panel:not(.right){
  overflow-y:auto;
  scrollbar-width:thin;
}
.panel:not(.right) > .brand{
  padding:18px 16px 0;
}
.panel:not(.right) > .sub{
  padding:0 16px 14px;
  border-bottom:1px solid #252d39;
}

.direct-customizer,
.quick-layout-main{
  margin:0!important;
  padding:16px!important;
  border:0!important;
  border-bottom:1px solid #252d39!important;
  border-radius:0!important;
  background:transparent!important;
}
.direct-customizer h3,
.quick-layout-main h3{
  margin:0 0 10px;
  font-size:13px;
  color:#f3f6fb;
}
.direct-help{
  margin:-3px 0 12px;
}

/* Make color controls look like primary controls, not hidden developer inputs. */
.direct-customizer .control{
  grid-template-columns:minmax(0,1fr) 86px;
  min-height:38px;
  margin:7px 0;
}
.direct-customizer .control label{
  font-size:12px;
  font-weight:700;
  color:#dbe4f0;
}
.direct-customizer input[type="color"]{
  width:58px!important;
  justify-self:end;
  border-radius:10px!important;
  cursor:pointer;
}
.direct-customizer input[type="number"]{
  width:86px;
}

/* Native accordions: stable, obvious, and clickable without JS routing. */
.tool-accordion{
  margin:10px 12px 0;
  border:1px solid #2d3644;
  border-radius:12px;
  background:#181e27;
  overflow:hidden;
}
.tool-accordion:last-child{margin-bottom:16px}
.tool-accordion summary{
  list-style:none;
  cursor:pointer;
  min-height:58px;
  padding:11px 13px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  position:relative;
  user-select:none;
}
.tool-accordion summary::-webkit-details-marker{display:none}
.tool-accordion summary::after{
  content:"＋";
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-50%);
  color:#8fa7ef;
  font-size:18px;
  font-weight:400;
}
.tool-accordion[open] summary::after{content:"－"}
.tool-accordion[open] summary{
  background:#202735;
  border-bottom:1px solid #303a49;
}
.accordion-title{
  color:#f0f4fb;
  font-size:12px;
  font-weight:800;
  padding-right:28px;
}
.accordion-desc{
  color:#8f9cad;
  font-size:9.5px;
  line-height:1.4;
  padding-right:28px;
}
.accordion-body{
  padding:4px 13px 13px;
}
.accordion-body > .section{
  margin:0!important;
  padding:10px 0 0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
}
.accordion-subheading{
  margin:9px 0 6px!important;
  font-size:10px!important;
  color:#aab8cb!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.preset-optional-note{
  margin:5px 0 10px;
  color:#8f9cad;
  font-size:10px;
  line-height:1.45;
}

/* Presets should feel optional, not like the only workflow. */
.accordion-presets .preset-grid-friendly{
  grid-template-columns:1fr 1fr;
}
.accordion-presets .preset{
  min-height:48px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
}
.accordion-presets .preset-swatch{
  width:100%;
  height:10px;
  border-radius:999px;
}
.accordion-presets .preset-name{font-size:10.5px}

/* Right side should clearly read as "selected item". */
.panel.right{
  padding:14px;
}
.panel.right > .section{
  border-radius:11px;
}
.details-toggle{
  margin-top:-2px;
}

/* The preview gets more visual priority. */
.preview-label{
  opacity:.75;
}
.stage-hint{
  max-width:52%;
}

/* Avoid the old left-tab hidden state ever interfering. */
.left-group-section.is-hidden{display:block!important}

@media(max-width:1180px){
  .app{grid-template-columns:270px 1fr 294px}
}

/* v0.18 single left panel */
.app{grid-template-columns:350px minmax(640px,1fr)}
.panel.right{display:none!important}
.panel:not(.right){padding:0;background:#151922;overflow-y:auto;border-right:1px solid #2b3340}
.panel:not(.right)>.brand{padding:18px 16px 0}
.panel:not(.right)>.sub{padding:0 16px 14px;margin:5px 0 0;border-bottom:1px solid #252d39}
.side-tabs,.side-panel-intro,.left-workflow-title{display:none!important}
.single-panel-intro{padding:12px 16px 4px;display:flex;flex-direction:column;gap:2px}
.single-panel-intro b{font-size:13px}.single-panel-intro span{font-size:9.5px;color:#8d9aac}

.component-card{margin:10px 12px 0;padding:13px;border:1px solid #2e3745;border-radius:12px;background:#181e27}
.component-card.selected-component{border-color:#667fcb;box-shadow:0 0 0 1px rgba(124,156,255,.12) inset}
.component-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:10px}
.component-head>div{display:flex;flex-direction:column;gap:2px}.component-head b{font-size:13px}.component-head span{font-size:9.5px;color:#8d9aac}
.component-detail-btn{height:29px;padding:0 9px;border:1px solid #394659;border-radius:8px;background:#222b38;color:#cfdaea;font-size:10px;white-space:nowrap}
.component-detail-btn:hover{border-color:#6b86dc;background:#293653}
.component-body .control{grid-template-columns:minmax(0,1fr) 108px;margin:7px 0}.component-body .control label{font-size:11px;color:#dce5f2}
.component-body input[type=color]{width:56px!important;height:32px!important;justify-self:end;cursor:pointer}
.component-body input[type=number],.component-body select{height:32px!important}
.component-body .section{margin:0!important;padding:0!important;border:0!important;background:transparent!important}
.component-body .divider{margin:9px 0}.component-body .note{font-size:9.5px}
.optional-presets{margin:10px 12px 18px!important;opacity:.86}

.selection-status{margin-left:auto;margin-right:8px;display:flex;gap:6px;align-items:center}.selection-status #selectionKind{padding:4px 7px;border-radius:999px;background:#202837;color:#95a9e8;font-size:9px}.selection-status #selectionTitle{font-size:9.5px;color:#9eabba}

.settings-backdrop{position:fixed;inset:0;z-index:10020;background:rgba(3,5,9,.72);display:flex;align-items:center;justify-content:center;padding:24px}
.settings-backdrop.hidden{display:none!important}.settings-dialog{width:min(540px,94vw);max-height:86vh;overflow:auto;border:1px solid #3a4659;border-radius:16px;background:#171c25;box-shadow:0 28px 90px rgba(0,0,0,.5)}
.settings-head{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;gap:12px;padding:15px 17px;border-bottom:1px solid #303949;background:#171c25}.settings-head>div{display:flex;flex-direction:column;gap:3px}.settings-head b{font-size:15px}.settings-head span{font-size:10px;color:#93a0b3}
#settingsClose{height:30px;padding:0 10px;border:1px solid #394457;border-radius:8px;background:#222936;color:#dce5f2}
.settings-body{padding:15px}.settings-panel.hidden{display:none!important}.modal-section{margin:0!important;padding:0!important;border:0!important;background:transparent!important}.modal-section .advanced-only,.modal-section .easy-only{display:block!important}
.modal-section>h3{font-size:11px;color:#aebbd0;text-transform:none;letter-spacing:0;margin:12px 0 8px}

.preview-wrap{min-width:0}.stage-hint{max-width:60%}
@media(max-width:1050px){.app{grid-template-columns:310px 1fr}}


/* ==================== v0.19 Beginner-first layout ==================== */
html,body{min-width:1180px}
body{
  background:#0d1016;
  display:flex;
  justify-content:center;
}
.app{
  width:min(100vw,1500px);
  max-width:1500px;
  grid-template-columns:460px minmax(720px,1040px);
  box-shadow:0 0 0 1px #202733;
}
.panel:not(.right){
  width:auto;
  border-right:1px solid #2a3340;
}
.panel:not(.right)>.brand{font-size:21px;padding:20px 20px 0}
.panel:not(.right)>.sub{padding:0 20px 16px;font-size:10.5px;line-height:1.55}
.legacy-mode-switch{display:none!important}

/* Step 1 */
.environment-card{
  margin:14px 16px 12px;
  padding:14px;
  border:1px solid #3d4d69;
  border-radius:14px;
  background:linear-gradient(180deg,#1d2533,#181f2a);
}
.environment-step,.editor-step-title{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.environment-step>div,.editor-step-title>div{display:flex;flex-direction:column;gap:3px}
.environment-step b,.editor-step-title b{font-size:13px;color:#f4f7fb}
.environment-step span:not(.step-num),.editor-step-title span:not(.step-num){
  font-size:10px;color:#94a2b5;line-height:1.45
}
.step-num{
  flex:0 0 auto;
  width:23px;height:23px;
  border-radius:999px;
  display:grid;place-items:center;
  background:#ffc44d;color:#08101f;
  font-size:11px;font-weight:900;
}
.environment-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}
.environment-option{
  position:relative;
  min-height:78px;
  padding:11px;
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  border:1px solid #344054;
  border-radius:11px;
  background:#151b24;
  color:#dfe6f1;
}
.environment-option:hover{border-color:#6480d5;background:#1c2534}
.environment-option.active{
  border-color:#ffc44d;
  background:#253554;
  box-shadow:0 0 0 1px rgba(124,156,255,.18) inset;
}
.env-icon{
  flex:0 0 auto;
  width:35px;height:35px;
  border-radius:9px;
  display:grid;place-items:center;
  background:#0f141c;
  border:1px solid #3c485b;
  color:#9ab0f3;
  font-size:10px;font-weight:900;
}
.env-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.env-copy b{font-size:11px;color:#f2f5fb}
.env-copy small{font-size:8.5px;color:#8d9aac;line-height:1.35}
.env-check{
  display:none;
  position:absolute;
  right:8px;top:7px;
  color:#8fb0ff;font-size:11px;font-weight:900;
}
.environment-option.active .env-check{display:block}
.environment-help{
  margin-top:9px;
  font-size:9.5px;
  color:#f0bd76;
}
.environment-help.ready{color:#82d6a4}
.environment-select-hidden{
  position:absolute!important;
  width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important;
}
.editor-step-title{margin:16px 16px 6px}

/* When environment is not selected, keep Step 1 active and gently disable editing. */
body.environment-pending .component-card,
body.environment-pending .optional-presets{
  opacity:.38;
  pointer-events:none;
  filter:saturate(.5);
}

/* Left panel cards */
.component-card{
  margin:9px 16px 0;
  padding:14px 15px;
  border-radius:13px;
}
.component-head b{font-size:13px}
.component-head span{font-size:9.8px}
.component-detail-btn{
  height:30px;
  padding:0 10px;
  font-weight:750;
}
.component-body .control{
  grid-template-columns:minmax(0,1fr) 128px;
  min-height:38px;
}
.component-body .control label{font-size:11.5px}
.component-body input[type=color]{
  width:64px!important;height:34px!important;
}
.component-body input[type=number],.component-body select{height:34px!important}
.optional-presets{margin:10px 16px 20px!important}

/* Preview area is deliberately compact instead of filling the whole monitor. */
.preview-wrap{
  width:100%;
  max-width:1040px;
  min-width:0;
  background:#0e1218;
}
.topbar{
  height:56px;
  padding:0 16px;
}
.topbar>.top-actions{
  margin-left:auto;
}
.topbar>.top-actions>*:not(#applyBtn){display:none!important}
.topbar #applyBtn{
  height:36px;
  padding:0 18px;
}
.preview{
  min-height:0;
  overflow:auto;
}
.overlay-frame{
  box-shadow:0 12px 42px rgba(0,0,0,.28);
}
.environment-gate{
  position:absolute;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(12,15,21,.64);
  backdrop-filter:blur(1px);
}
.environment-gate.hidden{display:none!important}
.gate-card{
  width:300px;
  padding:18px;
  border-radius:14px;
  border:1px solid #465573;
  background:#171e29;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.gate-card b{font-size:13px;color:#f3f6fb}
.gate-card span{font-size:10px;color:#93a1b4;line-height:1.5}

/* Native detail modal - no popup window. */
.settings-dialog-native{
  width:min(620px,92vw);
  max-height:86vh;
  padding:0;
  border:1px solid #3c495d;
  border-radius:16px;
  background:#171c25;
  color:#f5f7fb;
  box-shadow:0 30px 100px rgba(0,0,0,.55);
}
.settings-dialog-native::backdrop{
  background:rgba(2,4,8,.72);
  backdrop-filter:blur(2px);
}
.settings-dialog-native .settings-dialog{
  width:100%;
  max-height:86vh;
  overflow:auto;
  border:0;
  box-shadow:none;
  background:transparent;
}
.settings-head{
  position:sticky;top:0;
  border-radius:16px 16px 0 0;
}
.settings-body{padding:18px}
.modal-section .control{
  grid-template-columns:minmax(0,1fr) 160px;
  min-height:40px;
  margin:8px 0;
}
.modal-section .control label{font-size:11.5px}
.layout-tools{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #303949;
}
.layout-tools h3{font-size:11px;margin:0 0 8px;color:#b5c2d4}
.modal-tool-btn{
  height:34px;
  margin:0 6px 6px 0;
  padding:0 10px;
  border:1px solid #3a4659;
  border-radius:8px;
  background:#222b38;
  color:#dbe4f0;
}
.export-status-row,.export-environment-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  margin-bottom:8px;
  border:1px solid #303949;
  border-radius:9px;
  background:#11161e;
  font-size:10px;
}
.export-environment-row b{color:#9eb4f5}

/* Large desktop only; on narrower screens preserve usability. */
@media(max-width:1280px){
  html,body{min-width:960px}
  .app{width:100vw;grid-template-columns:390px 1fr}
  .environment-options{grid-template-columns:1fr}
}


/* ==================== v0.20 Wide left workspace + left modal ==================== */

/* Use the full browser width. No centered app shell. */
html,body{
  min-width:1180px;
  width:100%;
}
body{
  display:block!important;
  justify-content:initial!important;
  background:#0d1016;
}
.app{
  width:100vw!important;
  max-width:none!important;
  margin:0!important;
  grid-template-columns:560px minmax(620px,1fr)!important;
  box-shadow:none!important;
}

/* Wider left working area. */
.panel:not(.right){
  width:560px!important;
  max-width:560px!important;
  min-width:560px!important;
  border-right:1px solid #2b3442;
  background:#151922;
}
.panel:not(.right)>.brand{
  padding:20px 22px 0!important;
  font-size:22px;
}
.panel:not(.right)>.sub{
  padding:0 22px 16px!important;
  line-height:1.55;
}

/* Environment selector uses the extra width. */
.environment-card{
  margin:14px 18px 12px!important;
  padding:15px!important;
}
.environment-options{
  grid-template-columns:1fr 1fr!important;
  gap:10px;
}
.environment-option{
  min-height:82px;
}

/* Step 2 and cards use the whole left width. */
.editor-step-title{
  margin:17px 18px 7px!important;
}
.component-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 18px 12px;
}
.component-card{
  margin:0!important;
  min-width:0;
  padding:14px!important;
}
.component-card.span-two{
  grid-column:1 / -1;
}
.compact-card .component-head{
  margin-bottom:9px;
}
.compact-card .component-head>div{
  min-width:0;
}
.compact-card .component-head b{
  font-size:13px;
}
.compact-card .component-head span{
  font-size:9.5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.compact-card .component-detail-btn{
  flex:0 0 auto;
}
.compact-card .component-body .control{
  grid-template-columns:minmax(0,1fr) 96px!important;
}
.compact-card .component-body input[type=color]{
  width:54px!important;
}
.compact-card .quick-buttons button{
  min-width:0;
  padding:0 7px;
  font-size:10px;
}
.optional-presets{
  margin:0 18px 20px!important;
}

/* Preview gets the remainder only; no centered application shell. */
.preview-wrap{
  width:auto!important;
  max-width:none!important;
  min-width:0;
  background:#0e1218;
}
.preview{
  min-height:0;
}
.overlay-frame{
  /* frame X/Y is managed by JS, now starting near top-left */
  box-shadow:0 12px 42px rgba(0,0,0,.28);
}

/* Top-right: Apply only. */
.topbar{
  height:58px;
  padding:0 18px!important;
}
.topbar>.top-actions{
  margin-left:auto;
}
.topbar>.top-actions>*:not(#applyBtn){
  display:none!important;
}
#applyBtn{
  height:38px;
  padding:0 20px;
  font-size:12px;
  font-weight:850;
}

/* Detail settings = left-side modal sheet, not a centered floating popup. */
.settings-dialog-native{
  position:fixed!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  right:auto!important;
  width:560px!important;
  min-width:560px!important;
  max-width:560px!important;
  height:100vh!important;
  max-height:100vh!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-right:1px solid #3c485a!important;
  border-radius:0!important;
  background:#171c25!important;
  color:#f5f7fb;
  box-shadow:12px 0 48px rgba(0,0,0,.4)!important;
}
.settings-dialog-native::backdrop{
  background:rgba(3,5,9,.58)!important;
  backdrop-filter:blur(1.5px);
}
.settings-dialog-native .settings-dialog{
  width:100%!important;
  height:100%!important;
  max-height:100vh!important;
  overflow:auto!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.settings-head{
  position:sticky;
  top:0;
  z-index:3;
  min-height:72px;
  padding:15px 18px!important;
  border-radius:0!important;
  border-bottom:1px solid #303949;
  background:#171c25;
  display:grid!important;
  grid-template-columns:auto 1fr;
  align-items:center!important;
  justify-content:initial!important;
}
#settingsClose{
  grid-column:1;
  grid-row:1;
  margin-right:12px;
  height:34px!important;
  padding:0 10px!important;
}
.settings-head>div{
  grid-column:2;
  grid-row:1;
}
.settings-body{
  padding:18px 20px 28px!important;
}
.modal-section .control{
  grid-template-columns:minmax(0,1fr) 180px!important;
  min-height:42px;
  margin:9px 0;
}
.modal-section input[type=color]{
  width:72px!important;
  height:36px!important;
  justify-self:end;
}
.modal-section input[type=number],
.modal-section select{
  height:36px!important;
}

/* Export modal remains centered because it is the final action, not a settings popup. */
.export-card{
  width:min(560px,92vw)!important;
}

/* Smaller desktop fallback. */
@media(max-width:1320px){
  html,body{min-width:1020px}
  .app{grid-template-columns:500px minmax(520px,1fr)!important}
  .panel:not(.right){
    width:500px!important;
    min-width:500px!important;
    max-width:500px!important;
  }
  .settings-dialog-native{
    width:500px!important;
    min-width:500px!important;
    max-width:500px!important;
  }
}


/* ==================== v0.21 Preview containment fix ==================== */

/*
  이전 구조:
    preview-label + chat-list(height:100%)
  라서 label 높이만큼 실제 콘텐츠가 frame 아래로 밀렸습니다.

  수정:
    overlay-frame을 세로 flex layout으로 만들고
    chat-list가 "남은 높이"만 사용하도록 합니다.
*/
.overlay-frame{
  display:flex!important;
  flex-direction:column!important;
  overflow:visible!important; /* 편집용 외곽 핸들은 계속 보여야 함 */
}

.preview-label{
  flex:0 0 auto;
}

/*
  꼬리까지 frame 안에 들어오도록 하단 안전 여백을 확보합니다.
  chat-list 자체는 frame 내부 출력 영역이므로 밖으로 나가는 내용은 잘라냅니다.
*/
.chat-list{
  height:auto!important;
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding-bottom:calc(var(--tail-height, 12px) + max(0px, var(--tail-y, 0px)) + 8px)!important;
  overflow:hidden!important;
}

/* 긴 메시지 / 큰 후원 박스도 frame 너비보다 커질 수 없게 합니다. */
.sample-row{
  flex:0 0 auto;
  min-width:0;
  max-width:100%;
}
.sample-bubble{
  max-width:min(var(--sample-max-width), 100%)!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.sample-bubble.donation{
  min-width:min(var(--donation-width), 100%)!important;
  max-width:100%!important;
}

/* 텍스트와 이벤트 내부 래퍼도 부모 폭 안에서 줄바꿈됩니다. */
.sample-bubble .msg,
.event-service-surface{
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}


/* ==================== v0.22 Detail modal: preview stays fully visible ==================== */

/*
  상세 설정은 왼쪽 시트형 native dialog를 유지하지만,
  오른쪽 Preview는 어둡게/흐리게 하지 않습니다.
  값을 바꾸는 동안 결과를 그대로 확인할 수 있어야 합니다.
*/
.settings-dialog-native::backdrop{
  background:rgba(0,0,0,0)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* backdrop 대신 왼쪽 시트 자체의 경계만으로 모달 레이어를 구분 */
.settings-dialog-native{
  box-shadow:10px 0 34px rgba(0,0,0,.34)!important;
}
.settings-dialog-native .settings-head{
  box-shadow:0 1px 0 rgba(255,255,255,.03);
}
.live-preview-note{
  margin:0 0 14px;
  padding:10px 11px;
  border-radius:9px;
  border:1px solid #31405a;
  background:#111923;
  color:#9db0ca;
  font-size:10px;
  line-height:1.45;
}

/* Preview 자체에는 opacity/filter를 절대 적용하지 않음 */
.preview-wrap,
.preview,
#overlayFrame{
  opacity:1!important;
  filter:none!important;
}


/* ==================== v0.23 Preset placement ==================== */
.preset-step-title{
  margin:16px 18px 7px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.preset-step-title>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.preset-step-title b{
  font-size:13px;
  color:#f4f7fb;
}
.preset-step-title span:not(.step-num){
  font-size:10px;
  color:#94a2b5;
  line-height:1.45;
}
.optional-presets{
  margin:0 18px 12px!important;
}
#editorStepTitle{
  margin-top:14px!important;
}


/* ==================== v0.24 Direct-manipulation guidance ==================== */

.direct-edit-guide{
  position:absolute;
  top:16px;
  right:16px;
  z-index:420;
  width:310px;
  padding:12px 13px;
  border-radius:12px;
  border:1px solid rgba(124,156,255,.55);
  background:rgba(18,24,34,.94);
  box-shadow:0 12px 36px rgba(0,0,0,.28);
  color:#e8eef8;
  pointer-events:auto;
}
.direct-edit-guide.hidden{
  display:none!important;
}
.direct-edit-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.direct-edit-title b{
  font-size:11.5px;
}
.move-glyph{
  width:24px;height:24px;
  border-radius:7px;
  display:grid;place-items:center;
  background:#2a3b5f;
  color:#9fb7ff;
  font-size:14px;
  font-weight:900;
}
.direct-edit-items{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:9.5px;
  color:#aebbd0;
  line-height:1.4;
}
.direct-edit-items span{
  display:flex;
  align-items:center;
  gap:6px;
}
.guide-dot{
  width:7px;height:7px;border-radius:999px;display:inline-block;flex:0 0 auto;
}
.image-dot{background:#86a4ff}
.tail-dot{background:#f3bb75}
.frame-dot{background:#81d4a4}
#guideDismiss{
  margin-top:9px;
  height:28px;
  padding:0 10px;
  border:1px solid #3c4b63;
  border-radius:7px;
  background:#222b38;
  color:#dce5f2;
  font-size:9.5px;
}

.frame-editbar{
  gap:5px;
}
.drag-hand{
  font-size:12px;
  line-height:1;
}

/* Cursor + hover outlines make draggable objects feel movable before clicking. */
.deco-layer{
  cursor:grab!important;
}
.deco-layer:hover{
  outline:2px dashed rgba(124,156,255,.82);
  outline-offset:3px;
}
.tail-part{
  cursor:grab!important;
}
.tail-part:hover{
  outline:2px dashed rgba(243,187,117,.88);
  outline-offset:3px;
}
.frame-editbar{
  cursor:grab!important;
}
.frame-editbar:hover{
  filter:brightness(1.08);
  box-shadow:0 0 0 2px rgba(124,156,255,.24);
}

/* Selected draggable items get a small helper chip. */
.drag-helper-chip{
  position:absolute;
  z-index:95;
  padding:4px 7px;
  border-radius:999px;
  background:#ffc44d;
  color:#08101f;
  font-size:9px;
  font-weight:850;
  pointer-events:none;
  white-space:nowrap;
}
.drag-helper-chip.hidden{display:none!important}

/* Brief pulse on first load to draw attention to editable preview. */
@keyframes editablePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(124,156,255,0)}
  50%{box-shadow:0 0 0 3px rgba(124,156,255,.22)}
}
.overlay-frame.guide-pulse{
  animation:editablePulse 1.15s ease-in-out 2;
}

/* Prevent the guide from covering content on smaller preview widths. */
@media(max-width:1280px){
  .direct-edit-guide{
    width:270px;
    right:10px;
    top:10px;
  }
}


/* ==================== v0.26 Image upload = Step 3 ==================== */
.image-step-title{
  margin:16px 18px 7px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.image-step-title>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.image-step-title b{
  font-size:13px;
  color:#f4f7fb;
}
.image-step-title span:not(.step-num){
  font-size:10px;
  color:#94a2b5;
  line-height:1.45;
}
.image-step-card{
  margin:0 18px 14px!important;
  border-color:#3b4a62!important;
  background:linear-gradient(180deg,#1a2230,#181e27)!important;
}
.image-step-card .component-head{
  margin-bottom:11px;
}
.image-step-card .component-head b{
  font-size:13.5px;
}
.image-step-card .component-head span{
  font-size:9.8px;
}
.image-step-card input[type=file]{
  width:100%;
  min-height:36px;
}
#editorStepTitle{
  margin-top:16px!important;
}


/* ==================== v0.27 Guidance overlap fix ==================== */
.preview-label{
  margin-top:2px!important;
  margin-bottom:14px!important;
  line-height:1.45;
}
.frame-editbar{
  white-space:nowrap;
}


/* ==================== v0.28 Comfortable 150%-like editor scale ==================== */
/*
  목표:
  - 브라우저 100%에서도 이전 버전을 150% 확대해서 본 것에 가까운 체감 크기
  - 테마 실제 값(fontSize/padding 등)은 바꾸지 않음
  - 편집기 UI만 크게, 여백은 줄이고, Preview는 남은 영역을 더 꽉 사용
*/

/* 전체 작업공간 */
.app{
  grid-template-columns:700px minmax(640px,1fr)!important;
}
.panel:not(.right){
  width:700px!important;
  min-width:700px!important;
  max-width:700px!important;
}
.panel:not(.right)>.brand{
  padding:24px 24px 0!important;
  font-size:28px!important;
  line-height:1.15;
}
.panel:not(.right)>.sub{
  padding:4px 24px 18px!important;
  font-size:13px!important;
  line-height:1.55!important;
}

/* 단계 제목 */
.environment-card{
  margin:16px 20px 14px!important;
  padding:18px!important;
  border-radius:16px!important;
}
.environment-step,.preset-step-title,.image-step-title,.editor-step-title{
  gap:12px!important;
}
.environment-step b,.preset-step-title b,.image-step-title b,.editor-step-title b{
  font-size:16px!important;
}
.environment-step span:not(.step-num),
.preset-step-title span:not(.step-num),
.image-step-title span:not(.step-num),
.editor-step-title span:not(.step-num){
  font-size:12px!important;
  line-height:1.5!important;
}
.step-num{
  width:30px!important;
  height:30px!important;
  font-size:14px!important;
}
.preset-step-title,.image-step-title,.editor-step-title{
  margin-left:20px!important;
  margin-right:20px!important;
}
.environment-options{
  gap:12px!important;
  margin-top:14px!important;
}
.environment-option{
  min-height:98px!important;
  padding:14px!important;
  border-radius:13px!important;
}
.env-icon{
  width:42px!important;
  height:42px!important;
  font-size:12px!important;
}
.env-copy b{font-size:14px!important}
.env-copy small{font-size:11px!important;line-height:1.4!important}
.environment-help{font-size:11.5px!important;margin-top:11px!important}

/* 예시 디자인 */
.optional-presets{
  margin:0 20px 15px!important;
}
.optional-presets summary{
  min-height:68px!important;
  padding:14px 16px!important;
}
.accordion-title{font-size:14px!important}
.accordion-desc{font-size:11.5px!important}
.accordion-presets .preset{
  min-height:60px!important;
  padding:10px 12px!important;
}
.accordion-presets .preset-name{font-size:13px!important}
.accordion-presets .preset-swatch{height:14px!important}

/* 이미지 추가 */
.image-step-card{
  margin:0 20px 17px!important;
  padding:18px!important;
  border-radius:15px!important;
}
.image-step-card .component-head b{font-size:16px!important}
.image-step-card .component-head span{font-size:12px!important}
.image-step-card .group-help,
.image-step-card .note{
  font-size:12px!important;
  line-height:1.5!important;
}
.image-step-card input[type=file]{
  min-height:44px!important;
  font-size:14px!important;
}
.layer-list{gap:9px!important;margin-top:12px!important}
.layer-item{
  grid-template-columns:42px 1fr auto!important;
  gap:10px!important;
  padding:11px!important;
  border-radius:11px!important;
}
.layer-item .thumb{
  width:42px!important;
  height:42px!important;
}
.layer-name{font-size:14px!important}
.layer-scope{font-size:11.5px!important}
.pill{font-size:11.5px!important;padding:5px 8px!important}

/* 직접 꾸미기 카드 */
.component-grid{
  gap:12px!important;
  padding:0 20px 16px!important;
}
.component-card{
  padding:18px!important;
  border-radius:15px!important;
}
.component-head{
  margin-bottom:13px!important;
}
.component-head b{
  font-size:16px!important;
}
.component-head span{
  font-size:11.5px!important;
  line-height:1.35!important;
}
.component-detail-btn{
  height:38px!important;
  padding:0 13px!important;
  font-size:12px!important;
  border-radius:9px!important;
}
.component-body .control{
  grid-template-columns:minmax(0,1fr) 126px!important;
  min-height:46px!important;
  margin:8px 0!important;
}
.component-body .control label{
  font-size:14px!important;
}
.component-body input[type=color]{
  width:66px!important;
  height:40px!important;
  border-radius:10px!important;
}
.component-body input[type=number],
.component-body select{
  height:40px!important;
  font-size:14px!important;
  border-radius:9px!important;
}
.component-body .quick-buttons{
  gap:8px!important;
}
.component-body .quick-buttons button,
.quick-btn{
  height:42px!important;
  font-size:13px!important;
  border-radius:10px!important;
}
.component-body .note,
.component-body .group-help{
  font-size:11.5px!important;
  line-height:1.5!important;
}

/* Preview header / actions */
.topbar{
  height:70px!important;
  padding:0 20px!important;
}
.topbar b{
  font-size:17px!important;
}
#applyBtn{
  height:46px!important;
  padding:0 22px!important;
  font-size:14px!important;
  border-radius:11px!important;
}
.preview-label{
  font-size:12px!important;
}

/* Preview 영역의 빈 여백을 줄이고 실제 채팅 영역을 크게 */
.preview{
  padding:10px!important;
}
.stage-hint{
  left:12px!important;
  bottom:9px!important;
  font-size:12px!important;
}
.overlay-frame{
  /* theme 자체 값이 아니라 editor preview 위치/기본 크기만 더 꽉 채움 */
  padding:20px!important;
}

/* 드래그 안내 */
.frame-editbar{
  height:32px!important;
  top:-36px!important;
  padding:0 12px!important;
  font-size:12px!important;
  border-radius:8px!important;
}
.drag-helper-chip{
  padding:6px 9px!important;
  font-size:11px!important;
}
.direct-edit-guide{
  width:360px!important;
  padding:15px 16px!important;
}
.direct-edit-title b{font-size:13.5px!important}
.direct-edit-items{font-size:11.5px!important;gap:7px!important}
#guideDismiss{
  height:34px!important;
  font-size:11px!important;
}

/* 상세 설정 왼쪽 시트도 같은 체감 크기로 */
.settings-dialog-native{
  width:700px!important;
  min-width:700px!important;
  max-width:700px!important;
}
.settings-head{
  min-height:86px!important;
  padding:18px 22px!important;
}
.settings-head b{font-size:18px!important}
.settings-head span{font-size:12px!important}
#settingsClose{
  height:40px!important;
  font-size:13px!important;
  padding:0 13px!important;
}
.settings-body{
  padding:22px 24px 34px!important;
}
.live-preview-note{
  padding:12px 13px!important;
  font-size:12px!important;
}
.modal-section>h3,
.layout-tools h3{
  font-size:14px!important;
}
.modal-section .control{
  grid-template-columns:minmax(0,1fr) 210px!important;
  min-height:50px!important;
  margin:10px 0!important;
}
.modal-section .control label{
  font-size:14px!important;
}
.modal-section input[type=color]{
  width:78px!important;
  height:42px!important;
}
.modal-section input[type=number],
.modal-section select{
  height:42px!important;
  font-size:14px!important;
}
.modal-tool-btn,
.layer-actions button{
  min-height:40px!important;
  font-size:13px!important;
}

/* 이미지 상세 목록 */
.modal-layer-list{gap:10px!important;max-height:290px!important}
.modal-layer-item{
  grid-template-columns:48px 1fr auto!important;
  gap:12px!important;
  padding:12px!important;
}
.modal-layer-item img{width:48px!important;height:48px!important}
.modal-layer-item .layer-main b{font-size:15px!important}
.modal-layer-item .layer-main span{font-size:12px!important}
.modal-layer-badge{font-size:12px!important}
.modal-layer-help{font-size:12.5px!important}

/* 적용하기 */
.export-card{
  width:min(680px,92vw)!important;
}
.export-head{
  padding:19px 22px!important;
}
.export-head b{font-size:19px!important}
.export-head span{font-size:12px!important}
#exportContent{padding:20px!important}

/* 150% 느낌에서도 1920급 화면에서 가로 스크롤 없이 사용 */
@media(max-width:1500px){
  .app{
    grid-template-columns:620px minmax(600px,1fr)!important;
  }
  .panel:not(.right){
    width:620px!important;
    min-width:620px!important;
    max-width:620px!important;
  }
  .settings-dialog-native{
    width:620px!important;
    min-width:620px!important;
    max-width:620px!important;
  }
}


/* ==================== v0.29 Wider left workspace ==================== */
/*
  v0.28의 150% 느낌은 유지하고,
  왼쪽 편집 공간을 더 넓혀 2열 카드와 긴 설명/입력값이 답답하지 않게 함.
*/
.app{
  grid-template-columns:800px minmax(680px,1fr)!important;
}
.panel:not(.right){
  width:800px!important;
  min-width:800px!important;
  max-width:800px!important;
}
.settings-dialog-native{
  width:800px!important;
  min-width:800px!important;
  max-width:800px!important;
}

/* 넓어진 좌측 영역을 실제로 활용 */
.component-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:14px!important;
}
.component-card{
  min-width:0;
}
.component-body .control{
  grid-template-columns:minmax(0,1fr) 150px!important;
}
.component-body input[type=number],
.component-body select{
  width:100%!important;
}
.environment-options{
  gap:14px!important;
}
.accordion-presets .preset-grid-friendly{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* 이미지 추가 단계는 여전히 좌측 전체 폭 사용 */
.image-step-card{
  width:auto!important;
}

/* 상세 설정 시트도 넓어진 폭에 맞춤 */
.modal-section .control{
  grid-template-columns:minmax(0,1fr) 240px!important;
}
.modal-layer-list{
  max-height:320px!important;
}

/* 1600px 이하에서는 약간 줄여 가로 스크롤을 방지 */
@media(max-width:1650px){
  .app{
    grid-template-columns:720px minmax(640px,1fr)!important;
  }
  .panel:not(.right){
    width:720px!important;
    min-width:720px!important;
    max-width:720px!important;
  }
  .settings-dialog-native{
    width:720px!important;
    min-width:720px!important;
    max-width:720px!important;
  }
}


/* ==================== v0.30 Persistent direct-edit guide ==================== */
.guide-persistent-note{
  display:block;
  margin-top:7px;
  color:#7f90a8;
  font-size:9.5px;
  line-height:1.4;
}


/* ==================== v0.31 Pin guide outside scrollable preview ==================== */
.preview-wrap{
  position:relative!important;
}
.direct-edit-guide{
  position:absolute!important;
  top:78px!important;
  right:18px!important;
  z-index:900!important;
}


/* ==================== v0.34 Simplified apply modal ==================== */
#exportModal .dev-export-hidden{display:none!important;}
#exportModal .section > h3{display:none!important;}
#exportModal .actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}
#exportModal #copyCss{
  width:100%!important;
  height:58px!important;
  font-size:18px!important;
  font-weight:850!important;
}
#exportModal #saveDesign{
  display:block!important;
  width:100%!important;
  height:48px!important;
  font-size:15px!important;
  font-weight:750!important;
}
#exportModal .apply-help-note{
  margin:9px 2px 0;
  color:#8ea0ba;
  font-size:12px;
  line-height:1.5;
}
#exportModal .code-details{margin-top:18px!important;}


/* ==================== v0.35 Background pattern ==================== */
.sample-bubble{
  background-color:var(--bubble-bg)!important;
  background-image:var(--bubble-pattern-image,none)!important;
  background-size:var(--bubble-pattern-size,auto)!important;
  background-position:0 0!important;
}
.donation.event-separate-style{
  background:var(--event-bg)!important;
}
.pattern-preview-strip{
  height:54px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background-color:var(--bubble-bg);margin-top:10px;
}
.preset-pattern-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.pattern-swatch{min-height:88px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;cursor:pointer}
.pattern-swatch:hover{border-color:#59657a}
.pattern-swatch.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:#242b39}
.pattern-swatch i{display:flex;width:72px;height:38px;align-items:center;justify-content:center;border-radius:8px;background-color:var(--bubble-bg);border:1px solid rgba(255,255,255,.13);font-style:normal;color:var(--muted);font-size:11px;overflow:hidden}
.pattern-controls{margin-top:8px!important}
@media(max-width:1650px){.preset-pattern-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}