/* v64 — repository fonts */
@font-face{
  font-family:'KoPubWorld Batang';
  src:url('./KoPubWorld Batang Light.ttf') format('truetype');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'KoPubWorld Batang';
  src:url('./KoPubWorld Batang Medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'KoPubWorld Batang';
  src:url('./KoPubWorld Batang Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'KoPubWorld Dotum';
  src:url('./KoPubWorld Dotum Light.ttf') format('truetype');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'KoPubWorld Dotum';
  src:url('./KoPubWorld Dotum Medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'KoPubWorld Dotum';
  src:url('./KoPubWorld Dotum Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Noto Sans KR';
  src:url('./NotoSansKR-VariableFont_wght.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Pretendard';
  src:url('./PretendardVariable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

*{box-sizing:border-box}
:root{
  --app-bg:#f5f7fb;
  --panel:#ffffff;
  --panel-soft:#f8faff;
  --line:#e4e9f1;
  --line-strong:#d5dce8;
  --text:#252b35;
  --muted:#7d8797;
  --accent:#7896c6;
  --accent-strong:#5e7fb6;
  --accent-soft:#edf3fc;
  --danger:#a66e78;
  --shadow:0 18px 55px rgba(63,78,101,.10);
}
html,body{margin:0;min-height:100%;font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--app-bg)}
button,input{font:inherit}
button{cursor:pointer}
.topbar{
  height:68px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
  backdrop-filter:blur(16px)
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text)}
.brand-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-strong);font-size:14px}
.brand-name{font-weight:760;font-size:19px;letter-spacing:-.02em}
.brand-sub{font-size:9px;letter-spacing:.14em;color:var(--muted);border-left:1px solid var(--line);padding-left:10px}
.top-actions{display:flex;gap:8px}
.btn{
  border:1px solid var(--line-strong);background:#fff;color:var(--text);border-radius:10px;
  padding:9px 13px;font-weight:650;font-size:12px;transition:.16s
}
.btn:hover{border-color:#b7c6dc;background:#fafcff}
.btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.btn-primary:hover{background:#5475aa;border-color:#5475aa}
.btn-subtle{background:#f8faff}
.app{display:grid;grid-template-columns:330px minmax(0,1fr);min-height:calc(100vh - 68px)}
.sidebar{
  background:var(--panel);border-right:1px solid var(--line);padding:28px 24px 48px;overflow:auto
}
.intro{padding:2px 2px 24px}
.kicker{font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--accent-strong);margin-bottom:9px}
.intro h1{font-size:24px;line-height:1.32;letter-spacing:-.035em;margin:0 0 11px;font-weight:760}
.intro p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.tool-section{border-top:1px solid var(--line);padding:20px 0}
.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;font-size:12px;font-weight:750}
.section-title small{font-size:8px;letter-spacing:.12em;color:#a5adba}
.template-grid{display:grid;gap:8px}
.template-card{
  width:100%;display:grid;grid-template-columns:38px 1fr;gap:10px;text-align:left;align-items:center;
  padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text)
}
.template-card:hover{background:#fafcff;border-color:#cdd8e8}
.template-card.active{border-color:#afc2df;background:var(--accent-soft);box-shadow:0 0 0 2px rgba(120,150,198,.08)}
.template-icon{
  width:36px;height:36px;border:1px solid #dfe6f0;background:#fff;border-radius:10px;
  display:grid;place-items:center;font-weight:800;color:#4f6688
}
.template-card span:last-child{display:grid;gap:2px}
.template-card b{font-size:12px}
.template-card small{font-size:8px;letter-spacing:.09em;color:var(--muted)}
.field{display:grid;gap:7px;margin-bottom:12px;font-size:10px;color:var(--muted)}
.field input[type=text]{
  width:100%;padding:10px 11px;border-radius:10px;border:1px solid var(--line-strong);
  background:#fbfcfe;color:var(--text);outline:none;font-size:12px
}
.field input[type=text]:focus,.prefix-input:focus-within{border-color:#aabedc;box-shadow:0 0 0 3px rgba(120,150,198,.10)}
.prefix-input{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:10px;background:#fbfcfe;padding-left:11px}
.prefix-input i{font-style:normal;color:#8d97a6}
.prefix-input input{border:0!important;box-shadow:none!important;padding-left:3px!important;background:transparent!important}
.file-button{
  position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;
  min-height:38px;border:1px dashed #cbd5e3;border-radius:10px;background:#fafcff;color:#63748d;font-weight:650
}
.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer}
.color-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.color-row label{display:grid;gap:6px;color:var(--muted);font-size:9px}
.color-row input{width:100%;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:3px}
.toggle-row{margin-top:13px;display:flex;justify-content:space-between;align-items:center}
.toggle-row span{display:grid;gap:2px}
.toggle-row b{font-size:11px}
.toggle-row small{font-size:9px;color:var(--muted)}
.toggle-row input{width:17px;height:17px;accent-color:var(--accent)}
.button-stack{display:grid;gap:7px}
.btn-wide{width:100%;background:#fbfcfe}
.btn-danger{color:var(--danger)}
.tip{display:flex;gap:9px;border:1px solid #dfe7f3;background:#f7faff;border-radius:12px;padding:12px;font-size:10px;line-height:1.45;color:var(--muted)}
.tip b{color:var(--accent-strong)}
.stage{padding:32px clamp(18px,4vw,58px) 70px;overflow:auto}
.stage-top{max-width:660px;margin:0 auto 14px;display:flex;justify-content:space-between;align-items:flex-end}
.stage-top>div{display:grid;gap:4px}
.stage-top b{font-size:13px}
.stage-top span{font-size:10px;color:var(--muted)}
.editing-badge{font-size:8px!important;letter-spacing:.13em;border:1px solid #dce5f2;border-radius:999px;padding:6px 8px;background:#f9fbff;color:#6682ad!important}
.capture-shell{max-width:660px;margin:0 auto}
.capture{
  --preview-bg:#f5f7fb;--preview-card:#ffffff;--preview-accent:#7896c6;--preview-text:#252b35;--preview-muted:#7d8797;--preview-line:#e4e9f1;
  background:var(--preview-bg);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;
  min-height:650px
}
.capture.dark{
  --preview-bg:#171a20;--preview-card:#20242c;--preview-text:#f4f6f9;--preview-muted:#929cab;--preview-line:#343a46;
}

/* shared preview */
.preview-top{
  min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;
  background:var(--preview-card);border-bottom:1px solid var(--preview-line);color:var(--preview-text)
}
.preview-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px}
.preview-brand i{font-style:normal;color:var(--preview-accent)}
.preview-icon-btn{border:0;background:transparent;color:var(--preview-text);font-size:15px}
.avatar{
  display:block;object-fit:cover;border-radius:50%;background:#eaf0f8;flex:0 0 auto
}
.editable{outline:none;border-radius:5px}
.editable:focus{background:rgba(120,150,198,.14);box-shadow:0 0 0 2px rgba(120,150,198,.12)}
.image-picker{position:relative;display:block;cursor:pointer;overflow:hidden}
.image-picker input{display:none}
.image-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:#91a0b5;font-size:10px}
.image-placeholder b{font-size:20px;font-weight:400}

/* X template */
.x-page{color:var(--preview-text)}
.x-compose,.x-post{
  background:var(--preview-card);border-bottom:1px solid var(--preview-line);padding:17px 20px
}
.x-compose{display:flex;gap:12px}
.x-compose .avatar{width:42px;height:42px}
.x-compose-main{flex:1}
.x-compose-text{min-height:58px;font-size:13px;line-height:1.6;padding:7px 0;color:var(--preview-text)}
.x-compose-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.x-compose-tools{color:var(--preview-accent);letter-spacing:.18em;font-size:13px}
.x-post-btn{border:0;border-radius:999px;background:var(--preview-accent);color:white;padding:7px 14px;font-size:10px;font-weight:750}
.x-post-header{display:flex;justify-content:space-between}
.x-user{display:flex;gap:10px}
.x-user .avatar{width:39px;height:39px}
.x-user-name{font-size:12px;font-weight:750}
.x-meta{font-size:10px;color:var(--preview-muted)}
.x-body{font-size:13px;line-height:1.65;margin:13px 0}
.x-media{min-height:210px;border:1px solid var(--preview-line);border-radius:15px;background:rgba(120,150,198,.05);margin:9px 0 13px}
.x-media img{display:block;width:100%;height:270px;object-fit:cover}
.x-actions{display:grid;grid-template-columns:repeat(4,1fr);color:var(--preview-muted);font-size:10px;padding-top:2px}
.x-actions span:last-child{text-align:right}

/* Instagram template */
.ig-page{color:var(--preview-text)}
.ig-profile{
  background:var(--preview-card);padding:20px;border-bottom:1px solid var(--preview-line);
  display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center
}
.ig-profile .avatar{width:82px;height:82px;border:3px solid var(--preview-card);outline:2px solid var(--preview-accent)}
.ig-name-row{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.ig-handle{font-size:14px;font-weight:700}
.ig-follow{border:0;border-radius:8px;background:var(--preview-accent);color:white;padding:6px 10px;font-size:9px;font-weight:700}
.ig-counts{display:flex;gap:18px;font-size:10px;margin-bottom:9px}
.ig-counts b{font-size:11px}
.ig-bio{font-size:10px;line-height:1.5;color:var(--preview-text)}
.ig-tabs{
  background:var(--preview-card);display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--preview-line)
}
.ig-tabs span{text-align:center;padding:11px;color:var(--preview-muted);font-size:12px}
.ig-tabs span:first-child{color:var(--preview-text);border-bottom:2px solid var(--preview-text)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--preview-line)}
.ig-tile{aspect-ratio:1;background:var(--preview-card);position:relative;overflow:hidden}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ig-tile .image-placeholder{position:absolute;inset:0;background:rgba(120,150,198,.04)}

/* DM template */
.dm-page{color:var(--preview-text);min-height:650px;display:flex;flex-direction:column}
.dm-head{background:var(--preview-card);padding:13px 17px;border-bottom:1px solid var(--preview-line);display:flex;align-items:center;justify-content:space-between}
.dm-user{display:flex;align-items:center;gap:10px}
.dm-user .avatar{width:38px;height:38px}
.dm-name{font-size:12px;font-weight:750}
.dm-status{font-size:9px;color:var(--preview-muted)}
.dm-body{flex:1;padding:22px 18px;display:flex;flex-direction:column;gap:9px}
.dm-day{text-align:center;color:var(--preview-muted);font-size:9px;margin-bottom:7px}
.bubble-row{display:flex;gap:7px;align-items:flex-end}
.bubble-row.mine{justify-content:flex-end}
.bubble-row .avatar{width:25px;height:25px}
.bubble{
  max-width:72%;padding:9px 11px;border-radius:16px;background:var(--preview-card);
  border:1px solid var(--preview-line);font-size:11px;line-height:1.5
}
.mine .bubble{background:var(--preview-accent);border-color:var(--preview-accent);color:white;border-bottom-right-radius:5px}
.theirs .bubble{border-bottom-left-radius:5px}
.dm-time{font-size:8px;color:var(--preview-muted);white-space:nowrap}
.dm-compose{background:var(--preview-card);border-top:1px solid var(--preview-line);padding:13px 16px;display:flex;gap:8px;align-items:center}
.dm-input{flex:1;border:1px solid var(--preview-line);border-radius:999px;padding:9px 12px;color:var(--preview-muted);font-size:10px}
.dm-send{border:0;background:transparent;color:var(--preview-accent);font-weight:750;font-size:10px}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{border-right:0;border-bottom:1px solid var(--line)}
  .template-grid{grid-template-columns:repeat(3,1fr)}
  .template-card{grid-template-columns:1fr;text-align:center}
  .template-card span:last-child{justify-items:center}
}
@media(max-width:560px){
  .topbar{height:60px;padding:0 13px}
  .brand-sub{display:none}
  .btn{padding:8px 9px}
  .sidebar{padding:22px 16px 34px}
  .template-grid{grid-template-columns:1fr}
  .template-card{grid-template-columns:38px 1fr;text-align:left}
  .template-card span:last-child{justify-items:start}
  .stage{padding:22px 10px 50px}
  .capture{border-radius:18px}
  .ig-profile{grid-template-columns:70px 1fr;gap:12px;padding:16px}
  .ig-profile .avatar{width:64px;height:64px}
  .ig-counts{gap:10px}
}


/* v3 controls */
.chat-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chat-profile-card{border:1px solid var(--line);background:#fafcff;border-radius:12px;padding:10px}
.chat-profile-card>b{display:block;font-size:10px;color:var(--text);margin-bottom:8px}
.chat-profile-card .field{margin-bottom:8px}
.chat-profile-card .field:last-child{margin-bottom:0}
.main-color-field input[type=color]{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:4px}
.auto-palette-row{margin:0 0 10px}
.palette-preview{display:grid;grid-template-columns:32px 32px 32px 1fr;gap:5px;align-items:center;margin-bottom:12px}
.palette-preview span{height:20px;border:1px solid var(--line);border-radius:6px}
.palette-preview small{font-size:9px;color:var(--muted);margin-left:4px}
.field-note{font-size:9px;color:var(--muted);line-height:1.45;margin:9px 0 0}
.chat-add-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
[hidden]{display:none!important}

/* chat shared v3 */
.chat-message-stack{display:flex;align-items:flex-end;gap:6px;max-width:78%}
.bubble-row.mine{flex-direction:row-reverse}
.bubble-row.mine .chat-message-stack{flex-direction:row-reverse}
.chat-side-avatar{width:25px!important;height:25px!important}
.chat-photo{display:block;width:190px;min-height:135px;border-radius:15px;overflow:hidden;border:1px solid var(--preview-line);background:rgba(120,150,198,.06)}
.chat-photo img{width:100%;height:180px;display:block;object-fit:cover}
.chat-photo .image-placeholder{height:135px}
.dm-photo{border-bottom-left-radius:5px}
.mine .dm-photo{border-bottom-left-radius:15px;border-bottom-right-radius:5px}

/* Kakao */
.kakao-page{
  min-height:650px;background:var(--chat-bg,#dfe8ef);
  color:#232323;display:flex;flex-direction:column
}
.kakao-head{
  min-height:66px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;
  padding:0 16px;background:rgba(255,255,255,.3);border-bottom:1px solid rgba(0,0,0,.04)
}
.kakao-head button{border:0;background:transparent;font-size:28px;font-weight:300}
.kakao-head>div{display:grid;text-align:center;gap:2px}
.kakao-head b{font-size:13px}
.kakao-head small{font-size:9px;color:#68717b}
.kakao-head>span{font-size:15px;white-space:nowrap}
.kakao-room{flex:1;padding:18px 17px 24px;display:flex;flex-direction:column;gap:13px}
.kakao-date{
  align-self:center;background:rgba(0,0,0,.10);color:rgba(255,255,255,.95);
  border-radius:999px;padding:5px 10px;font-size:9px;margin:2px 0 4px
}
.kakao-message{display:flex;gap:8px;align-items:flex-start}
.kakao-message.mine{flex-direction:row-reverse}
.kakao-avatar{width:36px;height:36px;border-radius:13px}
.kakao-message-main{max-width:76%;display:grid;gap:5px}
.kakao-message.mine .kakao-message-main{justify-items:end}
.kakao-sender{font-size:9px;color:#4f5963;padding:0 2px}
.kakao-content-row{display:flex;align-items:flex-end;gap:5px}
.kakao-message.mine .kakao-content-row{flex-direction:row-reverse}
.kakao-message .bubble{
  background:#fff;border:0;border-radius:5px 15px 15px 15px;color:#252525;
  box-shadow:0 1px 1px rgba(0,0,0,.03)
}
.kakao-message.mine .bubble{
  background:#fee500;color:#252525;border-radius:15px 5px 15px 15px
}
.kakao-time{font-size:8px;color:#68717b;white-space:nowrap}
.kakao-photo{width:190px;min-height:135px;background:rgba(255,255,255,.6);border:0;border-radius:7px 15px 15px 15px}
.kakao-message.mine .kakao-photo{border-radius:15px 7px 15px 15px}
.kakao-photo img{display:block;width:100%;height:180px;object-fit:cover}
.kakao-photo .image-placeholder{height:135px}
.kakao-compose{
  min-height:58px;background:#fff;display:grid;grid-template-columns:28px 1fr auto;align-items:center;
  gap:8px;padding:9px 14px;border-top:1px solid rgba(0,0,0,.05)
}
.kakao-input{border:1px solid #e6e8eb;border-radius:7px;padding:9px 10px;font-size:10px;color:#9298a0}
.kakao-compose>span{font-size:14px;color:#6e747c}

@media(max-width:560px){
  .chat-profile-grid,.chat-add-row{grid-template-columns:1fr}
  .chat-photo,.kakao-photo{width:155px}
  .chat-photo img,.kakao-photo img{height:150px}
}


/* v4 phone canvas */
.capture-shell{display:flex;justify-content:center}
.capture{
  width:390px;
  min-width:390px;
  max-width:390px;
  min-height:844px;
  border-radius:30px;
  overflow:hidden;
}
@media(max-width:520px){
  .capture-shell{overflow-x:auto;justify-content:flex-start;padding-bottom:4px}
  .capture{transform-origin:top left}
}

/* chat background */
.chat-wallpaper{
  background-color:var(--chat-bg,#dfe8ef);
  background-image:var(--chat-bg-image,none);
  background-size:cover;
  background-position:center;
}

/* better DM phone layout */
.dm-page{min-height:844px;height:844px}
.dm-head{flex:0 0 auto}
.dm-body{
  flex:1;
  min-height:0;
  overflow:hidden;
  padding:22px 15px;
  background-color:var(--chat-bg,#eef3f8);
  background-image:var(--chat-bg-image,none);
  background-size:cover;
  background-position:center;
}
.dm-compose{flex:0 0 auto}
.bubble-row{
  width:100%;
  display:flex;
  gap:7px;
  align-items:flex-end;
}
.bubble-row.mine{justify-content:flex-start;flex-direction:row-reverse}
.bubble-row.theirs{justify-content:flex-start}
.chat-message-stack{max-width:74%}
.dm-read{
  font-size:8px;
  color:var(--preview-accent);
  min-width:22px;
  text-align:center;
  cursor:pointer;
}
.dm-read.off{color:transparent}
.chat-click-target{cursor:pointer}

/* Kakao fixed phone */
.kakao-page{
  min-height:844px;
  height:844px;
  background-color:var(--chat-bg,#dfe8ef);
  background-image:var(--chat-bg-image,none);
  background-size:cover;
  background-position:center;
}
.kakao-room{min-height:0;overflow:hidden}
.kakao-read-one{
  font-size:9px;
  font-weight:700;
  color:#f0a500;
  min-width:8px;
  text-align:center;
  cursor:pointer;
}
.kakao-read-one.off{color:transparent}

/* X actions */
.x-actions{grid-template-columns:repeat(4,1fr);gap:2px}
.x-actions span{white-space:nowrap}
.x-actions .editable{font-weight:600}

/* notice */
.notice-backdrop{
  position:fixed;inset:0;z-index:1000;
  background:rgba(33,42,55,.34);
  backdrop-filter:blur(5px);
  display:grid;place-items:center;padding:20px;
}
.notice-modal{
  width:min(440px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 28px 80px rgba(40,55,80,.22);
  padding:24px;
}
.notice-kicker{font-size:9px;letter-spacing:.16em;font-weight:800;color:var(--accent-strong);margin-bottom:7px}
.notice-modal h2{font-size:20px;margin:0 0 14px}
.notice-content{font-size:12px;line-height:1.7;color:#5f6978}
.notice-content p{margin:7px 0}
.notice-actions{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:20px;padding-top:15px;border-top:1px solid var(--line)}
.notice-actions label{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:6px}


/* v5 unified template sizing */
.capture-shell{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.capture{
  width:390px;
  min-width:390px;
  max-width:390px;
  min-height:844px;
  height:auto;
  border-radius:30px;
  overflow:hidden;
}
.x-page,.ig-page,.dm-page,.kakao-page{
  width:390px;
  min-width:390px;
  max-width:390px;
  box-sizing:border-box;
}

/* chat can grow vertically */
.dm-page,.kakao-page{
  min-height:844px;
  height:auto !important;
}
.dm-body,.kakao-room{
  overflow:visible !important;
}
.dm-page{
  display:flex;
  flex-direction:column;
}
.dm-body{
  flex:none !important;
  min-height:720px;
}
.kakao-page{
  display:flex;
  flex-direction:column;
}
.kakao-room{
  flex:none !important;
  min-height:720px;
}

/* x media placeholder perfect centering */
.x-media{
  position:relative;
  display:block;
}
.x-media .image-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  gap:4px;
}

/* video play overlay */
.media-play-toggle{
  position:absolute;
  top:10px;
  right:10px;
  z-index:4;
  border:1px solid rgba(255,255,255,.8);
  background:rgba(20,27,38,.58);
  color:#fff;
  border-radius:999px;
  padding:5px 8px;
  font-size:9px;
  backdrop-filter:blur(4px);
}
.video-play-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:3;
}
.video-play-overlay span{
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding-left:4px;
  background:rgba(20,27,38,.62);
  color:#fff;
  font-size:24px;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.ig-tile .media-play-toggle{
  top:6px;
  right:6px;
  padding:4px 6px;
  font-size:8px;
}
.ig-tile .video-play-overlay span{
  width:38px;
  height:38px;
  font-size:18px;
}
.chat-photo{
  position:relative;
}
.chat-photo .media-play-toggle{
  top:7px;
  right:7px;
}


/* v6 image fitting */
.x-media{
  min-height:0;
  height:auto;
  background:rgba(120,150,198,.04);
}
.x-media.has-image{
  border-style:solid;
}
.x-media img{
  width:100%;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center;
  display:block;
  background:var(--preview-card);
}
.x-media:not(.has-image){
  min-height:210px;
}
.x-media:not(.has-image) .image-placeholder{
  min-height:210px;
}
.chat-photo{
  width:min(250px,100%);
  height:auto;
  min-height:0;
  background:rgba(255,255,255,.38);
}
.chat-photo.has-image{
  min-height:0;
}
.chat-photo img,
.kakao-photo img{
  width:100%;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center;
  display:block;
}
.chat-photo:not(.has-image) .image-placeholder,
.kakao-photo:not(.has-image) .image-placeholder{
  min-height:145px;
}

/* Instagram: always keep clean 3-column square feed and never clip */
.ig-page{
  height:auto !important;
  min-height:844px;
  overflow:visible !important;
}
.ig-grid{
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:auto;
  overflow:visible;
}
.ig-tile{
  width:100%;
  aspect-ratio:1 / 1;
  min-width:0;
  overflow:hidden;
}
.ig-tile img{
  width:100%;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center;
}
.ig-tile .image-placeholder{
  position:absolute;
  inset:0;
}

/* wider / more readable DM and Kakao */
.dm-body,.kakao-room{
  padding-left:11px !important;
  padding-right:11px !important;
}
.bubble-row{
  gap:5px;
}
.chat-message-stack{
  max-width:84% !important;
}
.bubble{
  max-width:none !important;
}
.dm-page .bubble{
  font-size:12px;
  line-height:1.55;
}
.dm-page .chat-side-avatar{
  width:24px !important;
  height:24px !important;
}
.kakao-message{
  gap:6px;
}
.kakao-message-main{
  max-width:84% !important;
}
.kakao-content-row{
  max-width:100%;
}
.kakao-message .bubble{
  max-width:100%;
  font-size:12px;
  line-height:1.55;
}
.kakao-avatar{
  width:32px;
  height:32px;
}
.kakao-photo{
  width:min(250px,100%);
}

/* output-only cleanup */
.capture.clean-output .media-play-toggle{
  display:none !important;
}
.capture.clean-output .image-picker:not(.has-image) .image-placeholder{
  display:none !important;
}
.capture.clean-output .x-media:not(.has-image),
.capture.clean-output .chat-photo:not(.has-image),
.capture.clean-output .kakao-photo:not(.has-image){
  display:none !important;
}
.capture.clean-output .ig-tile:not(.has-image){
  background:var(--preview-card);
}
.capture.clean-output .ig-tile:not(.has-image) .image-placeholder{
  display:none !important;
}

/* preview modal */
.preview-backdrop{
  position:fixed;
  inset:0;
  z-index:950;
  background:rgba(30,39,52,.38);
  backdrop-filter:blur(6px);
  padding:24px;
  overflow:auto;
}
.preview-modal{
  width:min(520px,100%);
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 30px 90px rgba(31,45,67,.24);
  overflow:hidden;
}
.preview-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}
.preview-modal-head>div{
  display:grid;
  gap:3px;
}
.preview-modal-head b{
  font-size:13px;
}
.preview-modal-head span{
  font-size:9px;
  color:var(--muted);
}
.preview-modal-body{
  padding:20px;
  display:flex;
  justify-content:center;
  background:#eef2f7;
  overflow:auto;
}
.preview-modal-body .capture{
  box-shadow:0 16px 50px rgba(42,58,83,.13);
}

/* compact responsive preview */
@media(max-width:460px){
  .preview-backdrop{padding:8px}
  .preview-modal-body{padding:8px;justify-content:flex-start}
}


/* v7 compact vertical sizing */
.capture{
  min-height:0 !important;
  height:auto !important;
}
.x-page,.ig-page{
  min-height:0 !important;
  height:auto !important;
}
.dm-page,.kakao-page{
  min-height:700px !important;
  height:auto !important;
}
.dm-body,.kakao-room{
  min-height:560px !important;
}

/* Instagram rebuilt layout */
.ig-profile{
  grid-template-columns:72px 1fr !important;
  gap:14px !important;
  padding:16px 18px !important;
}
.ig-profile .avatar{
  width:68px !important;
  height:68px !important;
}
.ig-name-row{margin-bottom:7px !important}
.ig-counts{
  display:grid !important;
  grid-template-columns:repeat(3,max-content);
  gap:12px !important;
  margin-bottom:7px !important;
  align-items:center;
}
.ig-bio{line-height:1.45 !important}
.ig-tabs span{padding:9px !important}
.ig-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:1px !important;
  width:390px !important;
  background:var(--preview-line);
}
.ig-tile{
  width:129.33px !important;
  height:129.33px !important;
  aspect-ratio:auto !important;
  position:relative;
}
.ig-tile img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.ig-tile .image-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

/* X media optional controls */
.x-media-row{
  margin:7px 0 2px;
  display:flex;
  justify-content:flex-end;
}
.x-media-enable{
  border:1px solid var(--preview-line);
  background:transparent;
  color:var(--preview-muted);
  border-radius:999px;
  padding:5px 8px;
  font-size:9px;
}
.x-media-enable.active{
  color:var(--preview-accent);
  border-color:var(--preview-accent);
}
.capture.clean-output .x-media-row{
  display:none !important;
}

/* preview header */
.preview-head-actions{display:flex;gap:7px}


/* v8 X polish */
.x-actions{
  grid-template-columns:repeat(4,1fr) !important;
}
.x-actions span:nth-child(4){
  text-align:right;
}
.x-actions .x-shares{
  display:none !important;
}
.x-more-wrap{position:relative}
.x-more-btn{
  border:0;
  background:transparent;
  color:var(--preview-muted);
  letter-spacing:2px;
  font-size:11px;
}
.x-more-menu{
  position:absolute;
  top:22px;
  right:0;
  z-index:12;
  min-width:126px;
  padding:6px;
  background:var(--preview-card);
  border:1px solid var(--preview-line);
  border-radius:10px;
  box-shadow:0 10px 28px rgba(43,57,78,.14);
}
.x-more-menu button{
  width:100%;
  border:0;
  background:transparent;
  color:var(--preview-text);
  padding:8px 9px;
  border-radius:7px;
  font-size:10px;
  text-align:left;
}
.x-more-menu button:hover{
  background:rgba(120,150,198,.10);
}
.capture.clean-output .x-more-menu{display:none!important}

.quote-card{
  margin:10px 0 12px;
  border:1px solid var(--preview-line);
  border-radius:14px;
  padding:11px 12px;
  background:var(--preview-card);
}
.quote-user{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.quote-user .avatar{
  width:26px;
  height:26px;
}
.quote-user-main{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
}
.quote-name{
  font-size:10px;
  font-weight:700;
}
.quote-meta{
  font-size:9px;
  color:var(--preview-muted);
}
.quote-body{
  font-size:11px;
  line-height:1.55;
}

/* softer rendering lines */
.capture{
  border-color:#edf0f4 !important;
}
.preview-top,.x-compose,.x-post,.ig-profile,.ig-tabs,.dm-head,.dm-compose{
  border-color:#edf0f4 !important;
}
.capture.clean-output{
  border-color:transparent !important;
  box-shadow:none !important;
}
.capture.clean-output .x-post,
.capture.clean-output .x-compose,
.capture.clean-output .preview-top,
.capture.clean-output .ig-profile,
.capture.clean-output .ig-tabs,
.capture.clean-output .dm-head,
.capture.clean-output .dm-compose{
  border-color:#f1f3f6 !important;
}

/* bigger chat media */
.dm-page .chat-photo,
.kakao-page .chat-photo,
.kakao-page .kakao-photo{
  width:min(292px,100%) !important;
}
.dm-page .chat-photo:not(.has-image) .image-placeholder,
.kakao-page .chat-photo:not(.has-image) .image-placeholder,
.kakao-page .kakao-photo:not(.has-image) .image-placeholder{
  min-height:180px !important;
}
.dm-page .chat-photo img,
.kakao-page .chat-photo img,
.kakao-page .kakao-photo img{
  width:100% !important;
  height:auto !important;
  max-height:380px !important;
  object-fit:contain !important;
}

/* DM read state */
.dm-read{
  min-width:34px !important;
  white-space:nowrap;
}
.dm-read.off{
  color:var(--preview-muted) !important;
  opacity:.72;
}

/* chat bio */
.chat-bio-preview{
  font-size:9px;
  color:var(--preview-muted);
  max-width:210px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* v9 per-template profiles + background */
.capture{
  background-color:var(--template-bg-color,#fff) !important;
  background-image:var(--template-bg-image,none) !important;
  background-size:var(--template-bg-size,100%) auto !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
}
.x-page,.ig-page,.dm-page,.kakao-page{
  background-color:transparent !important;
}
.bg-scale-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  color:var(--muted);
  margin:8px 0 2px;
}
.bg-scale-info b{color:var(--text)}

/* Instagram avatar geometry fix */
.ig-profile{
  align-items:start !important;
}
.ig-profile > .image-picker{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  min-height:72px !important;
  max-width:72px !important;
  max-height:72px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  display:block !important;
  position:relative !important;
}
.ig-profile > .image-picker .avatar{
  position:absolute !important;
  inset:0 !important;
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  min-height:72px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  display:block !important;
}

/* X media option now lives only in more menu */
.x-media-row{display:none!important}

/* allow menu option grouping */
.x-more-menu .menu-sep{
  height:1px;
  background:var(--preview-line);
  margin:4px 2px;
}

/* background stays visible through content surfaces */
.x-page,.ig-page{background:rgba(255,255,255,.90)!important}
.dm-body,.kakao-room{
  background-color:var(--chat-bg,#dfe8ef) !important;
}


/* v10 X fixed media frame + internal image transform */
.x-media{
  height:240px !important;
  min-height:240px !important;
  max-height:240px !important;
  overflow:hidden !important;
  position:relative;
  background:rgba(120,150,198,.04);
}
.x-media.has-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center;
  transform:scale(var(--media-scale,1));
  transform-origin:center center;
  transition:none;
}
.x-media .image-placeholder{
  min-height:240px !important;
}
.x-media-scale-hint{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:5;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(20,27,38,.55);
  color:#fff;
  font-size:8px;
  pointer-events:none;
}
.capture.clean-output .x-media-scale-hint{display:none!important}

/* Instagram avatar better quality / crop */
.ig-profile > .image-picker{
  background:var(--preview-card) !important;
}
.ig-profile > .image-picker .avatar{
  image-rendering:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  backface-visibility:hidden;
}

/* DM sender name on bubbles */
.dm-sender-name{
  font-size:9px;
  color:var(--preview-muted);
  margin:0 0 3px 2px;
}
.bubble-row.mine .dm-sender-name{
  text-align:right;
  margin:0 2px 3px 0;
}

/* typing indicator */
.typing-row{
  display:flex;
  align-items:flex-end;
  gap:7px;
}
.typing-row.mine{flex-direction:row-reverse}
.typing-wrap{
  display:flex;
  flex-direction:column;
  gap:3px;
  max-width:84%;
}
.typing-name{
  font-size:9px;
  color:var(--preview-muted);
  padding:0 2px;
}
.typing-bubble{
  display:flex;
  gap:4px;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:30px;
  padding:0 10px;
  border-radius:15px;
  background:var(--preview-card);
  border:1px solid var(--preview-line);
}
.typing-row.mine .typing-bubble{
  background:var(--preview-accent);
  border-color:var(--preview-accent);
}
.typing-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--preview-muted);
  opacity:.75;
}
.typing-row.mine .typing-dot{background:#fff}
.kakao-page .typing-bubble{
  background:#fff;
  border:0;
  border-radius:5px 15px 15px 15px;
}
.kakao-page .typing-row.mine .typing-bubble{
  background:#fee500;
}
.kakao-page .typing-row.mine .typing-dot{background:#4b4b4b}


/* v11 My Editor shared beige palette */
:root{
  --app-bg:#f5f4f1;
  --panel:#ffffff;
  --panel-soft:#faf9f7;
  --line:#e7e4de;
  --line-strong:#d8d4cc;
  --text:#292826;
  --muted:#8c8982;
  --accent:#5d5a55;
  --accent-strong:#5d5a55;
  --accent-soft:#ece9e3;
  --shadow:0 10px 35px rgba(45,42,37,.06);
}
html,body{background:#f5f4f1}
.stage{background:#f5f4f1}
.sidebar{background:#ffffff}
.template-card.active{
  border-color:#d8d4cc;
  background:#faf9f7;
}
.brand-mark{
  background:#f8f7f4;
  color:#5d5a55;
  border:1px solid #d8d4cc;
}
.btn-primary{
  background:#292826;
  border-color:#292826;
}
.btn-primary:hover{
  background:#413f3a;
  border-color:#413f3a;
}
.symbol-select{
  width:100%;
  padding:10px 11px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:#fbfaf8;
  color:var(--text);
  font-size:12px;
  outline:none;
}
.name-symbol{
  margin-left:4px;
  color:var(--preview-muted);
  font-weight:500;
}

/* X composer decorative toolbar */
.x-compose-tools{
  display:flex !important;
  align-items:center;
  gap:13px;
  color:#8a9a9d !important;
  letter-spacing:0 !important;
}
.x-tool-icon{
  width:17px;
  height:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.x-tool-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.x-tool-gif{
  font-size:7px;
  font-weight:800;
  border:1.5px solid currentColor;
  border-radius:4px;
  width:18px;
  height:15px;
}

/* X reactions larger + centered */
.x-actions{
  margin-top:5px;
  padding:12px 8px 2px !important;
  align-items:center;
}
.x-actions span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:12px !important;
  min-height:24px;
}
.x-actions span:nth-child(4){
  justify-content:center !important;
}
.x-actions .editable{
  font-size:11px;
}

/* beige X surfaces */
.capture{
  --preview-bg:#f5f4f1;
  --preview-card:#ffffff;
  --preview-accent:#5d5a55;
  --preview-text:#292826;
  --preview-muted:#8c8982;
  --preview-line:#e7e4de;
}


/* v12 background controls */
.bg-control-card{border:1px solid var(--line);border-radius:13px;background:#fbfaf8;overflow:hidden}
.bg-control-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px}
.bg-control-row>div:first-child,.bg-control-copy{display:grid;gap:3px}
.bg-control-row b{font-size:10px;color:var(--text)}
.bg-control-row small{font-size:8px;line-height:1.45;color:var(--muted)}
.bg-control-divider{height:1px;background:var(--line)}
.bg-control-row--stack{align-items:flex-start;flex-direction:column}
.bg-color-chip{width:42px;height:32px;padding:3px;border:1px solid var(--line-strong);border-radius:9px;background:#fff}
.bg-image-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mini-upload-btn,.mini-ghost-btn{min-height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:9px;background:#fff;color:var(--text);font-size:9px;font-weight:650}
.mini-upload-btn{position:relative;overflow:hidden}.mini-upload-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.bg-scale-bar{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);font-size:8px;color:var(--muted)}
.bg-scale-meter{height:5px;border-radius:999px;background:#ece9e3;overflow:hidden}.bg-scale-meter i{display:block;height:100%;width:25%;border-radius:999px;background:#5d5a55}
.bg-scale-bar b{font-size:9px;color:var(--text)}

/* avatar theme */
.avatar,.post-avatar{background:#ece9e3 !important}
.x-compose .avatar,.x-post .avatar,.ig-profile .avatar{box-shadow:0 0 0 1px #e1ddd5}

/* Instagram profile rebuilt */
.ig-profile{display:grid !important;grid-template-columns:76px minmax(0,1fr) !important;gap:15px !important;align-items:center !important;padding:17px 18px !important}
.ig-avatar-picker{width:76px !important;height:76px !important;min-width:76px !important;min-height:76px !important;max-width:76px !important;max-height:76px !important;border-radius:50% !important;overflow:hidden !important;border:1px solid #ded9d0;background:#ece9e3 !important;position:relative !important;display:block !important;padding:0 !important;outline:0 !important}
.ig-avatar-picker .avatar{position:absolute !important;inset:0 !important;width:76px !important;height:76px !important;min-width:76px !important;min-height:76px !important;max-width:76px !important;max-height:76px !important;margin:0 !important;padding:0 !important;border:0 !important;outline:0 !important;box-shadow:none !important;border-radius:50% !important;object-fit:cover !important;object-position:center !important;display:block !important}
.ig-profile-info{min-width:0;display:grid;gap:7px}.ig-name-row{margin:0 !important}.ig-counts{margin:0 !important;grid-template-columns:repeat(3,max-content) !important;gap:10px !important}.ig-bio{margin:0 !important}

/* X reactions */
.x-actions{position:relative;display:grid !important;grid-template-columns:repeat(3,1fr) 36px !important;gap:0 !important;padding:12px 2px 3px 8px !important}
.x-action-btn{border:0;background:transparent;color:var(--preview-muted);display:flex;align-items:center;justify-content:center;gap:5px;min-height:30px;font-size:13px;padding:0}
.x-action-btn.is-active{color:var(--preview-accent);font-weight:700}
.x-action-btn.share{justify-self:end;width:28px;margin-right:0}
.x-action-btn b{min-width:26px;text-align:left;font-size:10px;font-weight:600}
.x-post-author-note{font-size:8px;color:var(--preview-muted);margin-top:1px}


/* v15 — avatar artwork must fill the circle */
.avatar{
  object-fit:cover !important;
  object-position:center !important;
  overflow:hidden !important;
  flex:0 0 auto;
}
img.avatar{
  display:block !important;
  padding:0 !important;
  margin:0 !important;
}
.x-compose .avatar,.x-post .avatar,.dm-page .avatar,.kakao-page .avatar{
  object-position:center center !important;
}
/* default SVG person was clipped because its body reached the SVG edge */
.avatar[src^="data:image/svg+xml"]{
  object-fit:cover !important;
}

/* X author vertical rhythm */
.x-post-header{
  align-items:flex-start !important;
}
.x-user{
  align-items:center !important;
}
.x-user>div{
  min-width:0;
  padding-top:1px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.x-user-name{
  line-height:1.25 !important;
  min-height:14px;
}
.x-meta{
  line-height:1.25 !important;
  margin-top:0 !important;
}
.x-author-name,.x-author-handle{outline:none}

/* X author editor in more menu */
.x-author-editor{
  padding:8px;
  display:grid;
  gap:6px;
  border-top:1px solid var(--preview-line);
}
.x-author-editor[hidden]{display:none}
.x-author-editor label{
  display:grid;
  gap:3px;
  font-size:8px;
  color:var(--preview-muted);
}
.x-author-editor input{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--preview-line);
  border-radius:7px;
  background:var(--preview-card);
  color:var(--preview-text);
  padding:7px 8px;
  font:inherit;
}
.x-author-edit-toggle{width:100%}

/* three-column app with right quick editor */
.app{
  grid-template-columns:minmax(250px,310px) minmax(430px,1fr) 270px !important;
}
.inspector{
  position:sticky;
  top:0;
  height:calc(100vh - 58px);
  overflow:auto;
  box-sizing:border-box;
  padding:20px 16px;
  background:#fff;
  border-left:1px solid var(--line);
}
.inspector-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:18px;
}
.inspector-head>div{display:grid;gap:3px}
.inspector-head small{font-size:7px;letter-spacing:.16em;color:var(--muted)}
.inspector-head b{font-size:13px;color:var(--text)}
.inspector-head>span{font-size:8px;color:var(--muted)}
.inspector-empty{
  border:1px dashed var(--line-strong);
  border-radius:12px;
  padding:18px 12px;
  color:var(--muted);
  font-size:9px;
  line-height:1.7;
  text-align:center;
}
.inspector-fields{display:grid;gap:11px}
.inspector-fields textarea,
.inspector-fields select{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:#fbfaf8;
  color:var(--text);
  padding:10px;
  font:inherit;
  resize:vertical;
}
.inspector-actions{display:grid;gap:6px;margin-top:4px}
.is-selected-item{
  outline:2px solid rgba(93,90,85,.28) !important;
  outline-offset:-2px;
}

/* on narrower screens the quick editor becomes a normal right drawer column */
@media(max-width:1180px){
  .app{grid-template-columns:270px minmax(420px,1fr) !important}
  .inspector{
    position:fixed;
    z-index:40;
    right:14px;
    top:72px;
    width:260px;
    height:auto;
    max-height:calc(100vh - 90px);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 16px 45px rgba(45,42,37,.12);
  }
}

/* message groups look naturally consecutive */
.bubble-row + .bubble-row,
.kakao-message + .kakao-message{
  margin-top:4px !important;
}


/* v16 save format menu */
.save-menu-wrap{position:relative}
.save-menu{
  position:absolute;
  right:0;
  top:calc(100% + 7px);
  z-index:120;
  min-width:132px;
  padding:5px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 12px 32px rgba(45,42,37,.12);
}
.save-menu button{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  border-radius:7px;
  padding:9px 10px;
  font-size:10px;
  cursor:pointer;
}
.save-menu button:hover{background:#f5f4f1}


/* v17: fixed workspace, independently scrollable sidebars */
html,body{
  height:100%;
  overflow:hidden !important;
}
body{
  min-height:100%;
}
.topbar{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  z-index:100;
}
.app{
  position:fixed !important;
  inset:68px 0 0 0;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  align-items:stretch;
}
.sidebar{
  height:100% !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.stage{
  height:100% !important;
  overflow:auto !important;
  overscroll-behavior:contain;
  padding-top:28px !important;
  padding-bottom:50px !important;
}
.stage-top{
  position:sticky;
  top:0;
  z-index:12;
  background:linear-gradient(to bottom,#f5f4f1 78%,rgba(245,244,241,0));
  padding-top:4px;
  padding-bottom:14px;
}
.capture-shell{
  position:relative;
}
.inspector{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  height:100% !important;
  max-height:none !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* keep editor stage visually anchored while controls scroll */
.capture{
  margin-left:auto;
  margin-right:auto;
}

/* right-side content tools */
.inspector-content-tools{
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.inspector-section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.inspector-section-title b{
  font-size:11px;
  color:var(--text);
}
.inspector-section-title small{
  font-size:8px;
  color:var(--muted);
}

/* tighter right chat buttons */
.inspector .chat-add-row{
  grid-template-columns:1fr !important;
}

/* default avatar fills to the bottom edge */
.avatar[src^="data:image/svg+xml"]{
  object-fit:cover !important;
  object-position:center center !important;
}

@media(max-width:1180px){
  .app{
    grid-template-columns:250px minmax(390px,1fr) 250px !important;
  }
  .inspector{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    width:auto !important;
    height:100% !important;
    max-height:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
}
@media(max-width:900px){
  html,body{overflow:auto !important;height:auto}
  .topbar{position:sticky !important}
  .app{
    position:relative !important;
    inset:auto !important;
    height:auto !important;
    display:block !important;
    overflow:visible !important;
  }
  .sidebar,.stage,.inspector{
    height:auto !important;
    overflow:visible !important;
  }
  .inspector{border-top:1px solid var(--line)}
}


/* v19 left profile preview */
.profile-image-control{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:10px;
  align-items:center;
}
.sidebar-avatar-preview{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  display:block;
  background:#ece9e3;
  border:1px solid var(--line);
}

/* per-post avatar */
.x-post .x-post-avatar{
  width:39px;
  height:39px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  display:block;
  background:#ece9e3;
  border:1px solid var(--preview-line);
}
.x-author-photo-editor{
  padding:8px;
  border-top:1px solid var(--preview-line);
  display:grid;
  gap:7px;
}
.x-author-photo-editor[hidden]{display:none}
.x-author-photo-preview{
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
  background:#ece9e3;
  border:1px solid var(--preview-line);
}
.x-author-photo-row{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:8px;
  align-items:center;
}
.x-author-photo-upload{
  position:relative;
  overflow:hidden;
  min-height:30px;
  border:1px solid var(--preview-line);
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  color:var(--preview-text);
  background:var(--preview-card);
}
.x-author-photo-upload input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

/* attachment background color */
.x-media{
  background:var(--media-bg,#f5f4f1) !important;
}
.x-media.has-image img{
  background:transparent !important;
}

/* inspector image background color input */
#inspectImageBg{
  width:100%;
  height:36px;
  padding:3px;
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:#fff;
}


/* v22 exact My Editor favicon is provided as file; UI changes below */

/* larger left profile preview */
.profile-image-control{
  grid-template-columns:72px 1fr !important;
  gap:12px !important;
}
.sidebar-avatar-preview{
  width:72px !important;
  height:72px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:center !important;
  border:1px solid var(--line) !important;
  background:#ece9e3 !important;
}

/* right inspector post avatar editor */
.inspect-post-avatar{
  display:grid;
  gap:7px;
}
.inspect-label{
  font-size:9px;
  color:var(--muted);
}
.inspect-post-avatar-row{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:10px;
  align-items:center;
}
#inspectPostAvatarPreview{
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  display:block;
  background:#ece9e3;
  border:1px solid var(--line);
}
.inspect-post-avatar-actions{
  display:grid;
  gap:6px;
}

/* X fixed frame, image itself freely adjustable */
.x-media{
  height:240px !important;
  min-height:240px !important;
  max-height:240px !important;
  overflow:hidden !important;
  position:relative !important;
  cursor:grab;
}
.x-media.is-dragging{cursor:grabbing}
.x-media.has-image img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  max-width:none !important;
  max-height:none !important;
  transform:
    translate(calc(-50% + var(--media-x,0px)),calc(-50% + var(--media-y,0px)))
    scale(var(--media-scale,1)) !important;
  transform-origin:center center !important;
  user-select:none !important;
  pointer-events:none !important;
}
.x-media-scale-hint{
  left:10px !important;
  right:auto !important;
  bottom:10px !important;
}
.capture.clean-output .x-media-scale-hint{display:none!important}


/* v24 — preview actions in one clean horizontal row */
.preview-head-actions{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
}
.preview-head-actions > .save-menu-wrap{
  display:block;
  flex:0 0 auto;
}
.preview-head-actions > .btn,
.preview-head-actions .save-menu-wrap > .btn{
  width:auto !important;
  min-width:64px;
  margin:0 !important;
  white-space:nowrap;
}
.preview-modal-head{
  align-items:center !important;
}


/* v25 — X reaction active states */
.x-action{
  transition:color .14s ease, font-weight .14s ease, transform .12s ease;
}
.x-action.active{
  font-weight:700 !important;
}
.x-action.active svg,
.x-action.active .icon{
  stroke:currentColor !important;
  fill:currentColor !important;
}

/* reply = blue */
.x-action.reply.active,
.x-action[data-action="reply"].active{
  color:#1d9bf0 !important;
}

/* repost = green */
.x-action.repost.active,
.x-action[data-action="repost"].active{
  color:#00ba7c !important;
}

/* like = red/pink */
.x-action.like.active,
.x-action[data-action="like"].active{
  color:#f91880 !important;
}

/* slightly stronger feedback when pressed */
.x-action.active{
  transform:scale(1.04);
}


/* v26 — exported X image uses a baked snapshot of the exact editor framing */
.x-media.is-flattened-output > img{
  position:absolute !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  transform:none !important;
  max-width:none !important;
  max-height:none !important;
  pointer-events:none !important;
}


/* v27 — keep the whole work canvas visible and anchored */
.stage{
  position:relative !important;
  overflow:hidden !important;
  padding:18px 14px 28px 18px !important;
}

/* Move title/badge left and keep them fixed at the top of the work column */
.stage-top{
  position:absolute !important;
  top:14px !important;
  left:18px !important;
  right:18px !important;
  z-index:20 !important;
  padding:0 0 10px 0 !important;
  margin:0 !important;
  background:linear-gradient(to bottom,#f5f4f1 82%,rgba(245,244,241,0)) !important;
}

/* The template itself gets the remaining viewport and is always visible at once.
   Scaling happens visually without changing the actual template dimensions. */
.capture-shell{
  position:absolute !important;
  top:68px !important;
  left:18px !important;
  right:18px !important;
  bottom:18px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
}

/* Default desktop fit. JS below refines this dynamically per template/viewport. */
.capture{
  margin:0 !important;
  transform-origin:top left !important;
  flex:0 0 auto !important;
}

/* On small screens revert to normal page flow. */
@media(max-width:900px){
  .stage{
    position:relative !important;
    overflow:visible !important;
    padding:20px !important;
  }
  .stage-top{
    position:relative !important;
    inset:auto !important;
    padding:0 0 16px !important;
    background:none !important;
  }
  .capture-shell{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    overflow:visible !important;
  }
  .capture{
    transform:none !important;
    margin:0 auto !important;
  }
}


/* v28 — restore centered fixed workspace */
.stage{
  position:relative !important;
  overflow:hidden !important;
  padding:18px 18px 28px !important;
}

/* Header text stays at left, LIVE EDIT goes to the far right */
.stage-top{
  position:absolute !important;
  top:14px !important;
  left:18px !important;
  right:18px !important;
  z-index:20 !important;
  margin:0 !important;
  padding:0 0 10px 0 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  background:linear-gradient(to bottom,#f5f4f1 82%,rgba(245,244,241,0)) !important;
}
.stage-top > div{
  margin:0 !important;
}
.stage-top .editing-badge,
.stage-top > span:last-child{
  margin-left:auto !important;
  margin-right:0 !important;
  flex:0 0 auto !important;
}

/* Main template is always centered in the available work area */
.capture-shell{
  position:absolute !important;
  top:68px !important;
  left:18px !important;
  right:18px !important;
  bottom:18px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.capture{
  margin:0 !important;
  transform-origin:top center !important;
  flex:0 0 auto !important;
}

/* Narrow layouts continue to use normal flow */
@media(max-width:900px){
  .stage{
    position:relative !important;
    overflow:visible !important;
  }
  .stage-top{
    position:relative !important;
    inset:auto !important;
  }
  .capture-shell{
    position:relative !important;
    inset:auto !important;
    justify-content:center !important;
  }
  .capture{
    transform:none !important;
    margin:0 auto !important;
  }
}


/* v29 — remove LIVE EDIT and move template heading to the right */
.editing-badge{display:none !important}

.stage-top{
  position:absolute !important;
  top:14px !important;
  left:18px !important;
  right:18px !important;
  z-index:20 !important;
  margin:0 !important;
  padding:0 0 10px 0 !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:flex-start !important;
  background:linear-gradient(to bottom,#f5f4f1 82%,rgba(245,244,241,0)) !important;
}
.stage-top > div{
  margin-left:auto !important;
  text-align:right !important;
  align-items:flex-end !important;
}
.stage-top > div > b,
.stage-top > div > span{
  display:block;
  text-align:right !important;
}

/* main canvas remains centered */
.capture-shell{
  justify-content:center !important;
}

/* ---------- mobile optimization ---------- */
@media(max-width:900px){
  html,body{
    height:auto !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  body{
    min-width:0 !important;
  }

  .topbar{
    position:sticky !important;
    top:0 !important;
    height:auto !important;
    min-height:56px;
    padding:10px 12px !important;
    gap:8px;
  }

  .brand{
    min-width:0;
  }
  .brand-sub{
    display:none !important;
  }
  .top-actions{
    gap:6px !important;
    flex-wrap:nowrap !important;
  }
  .top-actions .btn{
    min-height:36px;
    padding:8px 10px !important;
    font-size:10px !important;
  }

  .app{
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  /* workspace first on mobile */
  .stage{
    order:1 !important;
    position:relative !important;
    height:auto !important;
    overflow:visible !important;
    padding:14px 10px 18px !important;
    border-bottom:1px solid var(--line);
  }

  .stage-top{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    margin:0 0 10px 0 !important;
    padding:0 4px 8px !important;
    background:none !important;
  }
  .stage-top > div{
    margin:0 !important;
    text-align:right !important;
  }

  .capture-shell{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    overflow:visible !important;
  }

  .capture{
    transform-origin:top center !important;
    margin:0 auto !important;
    max-width:none !important;
  }

  /* left settings after workspace */
  .sidebar{
    order:2 !important;
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
    border-right:0 !important;
    border-bottom:1px solid var(--line);
    padding:18px 14px 24px !important;
  }

  /* quick edit last */
  .inspector{
    order:3 !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    border-left:0 !important;
    border-top:1px solid var(--line);
    padding:18px 14px 30px !important;
  }

  .template-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .template-card{
    min-width:0 !important;
    padding:9px !important;
  }

  .chat-profile-grid{
    grid-template-columns:1fr !important;
  }

  .color-row{
    grid-template-columns:repeat(3,1fr) !important;
  }

  .preview-backdrop{
    padding:8px !important;
  }
  .preview-modal{
    width:min(100%,420px) !important;
  }
  .preview-modal-head{
    gap:10px;
    padding:12px !important;
  }
  .preview-head-actions{
    gap:6px !important;
  }
  .preview-modal-body{
    padding:8px !important;
    overflow:auto !important;
  }

  .save-menu{
    right:0 !important;
  }
}

@media(max-width:520px){
  .brand-name{
    font-size:16px !important;
  }

  .template-grid{
    grid-template-columns:1fr !important;
  }

  .top-actions .btn{
    padding:7px 8px !important;
  }

  .stage{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  .sidebar,
  .inspector{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .bg-image-actions{
    grid-template-columns:1fr !important;
  }

  .profile-image-control{
    grid-template-columns:64px 1fr !important;
  }
  .sidebar-avatar-preview{
    width:64px !important;
    height:64px !important;
  }

  .inspect-post-avatar-row{
    grid-template-columns:52px 1fr !important;
  }
  #inspectPostAvatarPreview{
    width:52px !important;
    height:52px !important;
  }
}


/* v30 — local slot save */
.inspector-slots{
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.slot-list{
  display:grid;
  gap:7px;
}
.slot-row{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fbfaf8;
  padding:9px;
  display:grid;
  gap:7px;
}
.slot-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.slot-info b{
  font-size:10px;
  color:var(--text);
}
.slot-info small{
  font-size:8px;
  color:var(--muted);
  text-align:right;
}
.slot-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:5px;
}
.slot-actions button{
  min-height:28px;
  border:1px solid var(--line-strong);
  border-radius:7px;
  background:#fff;
  color:var(--text);
  font-size:8px;
  cursor:pointer;
}
.slot-actions button:hover{
  background:#f5f4f1;
}
.slot-actions .slot-delete{
  color:#9a6464;
}
.slot-actions button:disabled{
  opacity:.42;
  cursor:not-allowed;
}
.slot-note{
  margin:8px 1px 0;
  color:var(--muted);
  font-size:8px;
  line-height:1.5;
}
@media(max-width:900px){
  .slot-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:520px){
  .slot-list{grid-template-columns:1fr}
}


/* v33 slot utility modal */
.utility-dock{position:fixed;left:12px;bottom:14px;z-index:140;display:flex;flex-direction:column;gap:6px}
.utility-dock-btn{width:48px;min-height:58px;border:1px solid #dedad3;border-radius:11px;background:rgba(41,40,38,.94);color:#f7f5f0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:0 7px 22px rgba(41,40,38,.12);cursor:pointer;font-size:8px}
.utility-dock-btn:hover{background:#292826}
.utility-dock-icon{font-size:18px;line-height:1;color:#d8a06a}
.slot-backdrop{position:fixed;inset:0;z-index:300;background:rgba(30,29,27,.34);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:18px}
.slot-modal{width:min(460px,100%);max-height:min(760px,calc(100vh - 36px));overflow:auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 28px 80px rgba(41,40,38,.22);padding:20px}
.slot-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.slot-modal-head>div{display:grid;gap:4px}.slot-modal-head small{font-size:8px;letter-spacing:.17em;color:var(--muted)}.slot-modal-head h2{margin:0;font-size:17px;color:var(--text)}.slot-modal-head p{margin:1px 0 0;font-size:9px;line-height:1.55;color:var(--muted)}
.slot-close-btn{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#fbfaf8;color:var(--text);font-size:19px;line-height:1;cursor:pointer}
.autosave-card{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;margin:15px 0 13px;padding:11px;border:1px solid #e2ded7;border-radius:12px;background:#f7f5f1}
.autosave-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:#ece9e3;color:#5d5a55;font-size:17px}
.autosave-copy{display:grid;gap:3px}.autosave-copy b{font-size:10px;color:var(--text)}.autosave-copy small{font-size:8px;color:var(--muted)}
.autosave-badge{border-radius:999px;background:#e9eee8;color:#60705d;font-size:7px;font-weight:800;padding:5px 7px}
.slot-modal-list{display:grid;gap:7px}.slot-modal-note{margin:10px 1px 0;color:var(--muted);font-size:8px;line-height:1.5}
.slot-modal .slot-row{grid-template-columns:1fr auto;align-items:center;gap:10px}
.slot-modal .slot-actions{display:flex;grid-template-columns:none;gap:5px}.slot-modal .slot-actions button{min-width:48px;padding:0 7px}

/* template heading near the right edge; canvas stays centered */
.stage-top{position:absolute !important;top:16px !important;left:auto !important;right:26px !important;width:230px !important;z-index:20 !important;margin:0 !important;padding:0 !important;display:block !important;background:none !important;pointer-events:none}
.stage-top>div{width:100% !important;margin:0 !important;text-align:right !important}
.stage-top>div>b,.stage-top>div>span{display:block !important;text-align:right !important}
.stage-top>div>b{font-size:11px !important}.stage-top>div>span{margin-top:3px !important;font-size:8px !important}
.capture-shell{top:54px !important;left:18px !important;right:18px !important;justify-content:center !important}

@media(max-width:900px){
  .utility-dock{left:auto;right:10px;bottom:10px}
  .slot-modal{padding:16px}.slot-modal .slot-row{grid-template-columns:1fr}.slot-modal .slot-actions{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .stage-top{position:relative !important;top:auto !important;left:auto !important;right:auto !important;width:100% !important;margin:0 0 10px !important;padding:0 4px 8px !important}
  .capture-shell{top:auto !important;left:auto !important;right:auto !important}
}


/* v34 — slot utility button on the right */
.utility-dock{
  left:auto !important;
  right:12px !important;
  bottom:14px !important;
}

@media(max-width:900px){
  .utility-dock{
    left:auto !important;
    right:10px !important;
    bottom:10px !important;
  }
}


/* v35 — editable slot names */
.slot-name-input{
  min-width:0;
  width:140px;
  max-width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:10px;
  font-weight:700;
  padding:2px 0;
}
.slot-name-input:focus{
  border-bottom:1px solid var(--line-strong);
}
.slot-info{
  min-width:0;
}
@media(max-width:520px){
  .slot-name-input{width:100%}
}


/* v37 — Kakao bottom area fix */
.kakao-page{
  width:100% !important;
  min-height:720px !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:inherit !important;
  box-sizing:border-box !important;
}

.kakao-room{
  flex:1 1 auto !important;
  min-height:580px !important;
  padding-bottom:22px !important;
  box-sizing:border-box !important;
}

/* Make the white input bar fully cover the rounded bottom edge */
.kakao-compose{
  flex:0 0 auto !important;
  min-height:72px !important;
  margin-top:auto !important;
  margin-bottom:-2px !important;
  padding:10px 14px 18px !important;
  box-sizing:border-box !important;
  background:#ffffff !important;
  border-radius:0 0 28px 28px !important;
  position:relative !important;
  z-index:5 !important;
}

/* Extend white fill below the toolbar so no template/capture background peeks through */
.kakao-compose::after{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  bottom:-18px;
  height:20px;
  background:#ffffff;
  pointer-events:none;
}

.kakao-input{
  min-height:34px !important;
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

/* clean exported / preview bottom too */
.capture.clean-output .kakao-compose{
  margin-bottom:-2px !important;
}


/* v38 — uploaded images start in a clean automatic fit */

/* X: entire photo fits inside the fixed frame first.
   User can zoom/drag afterwards. */
.x-media.has-image img{
  object-fit:contain !important;
  object-position:center center !important;
}

/* Instagram profile/avatar: centered crop without distortion */
.ig-avatar-picker img,
.sidebar-avatar-preview,
.x-post-avatar,
.chat-side-avatar,
.kakao-avatar{
  object-fit:cover !important;
  object-position:center center !important;
}

/* Instagram feed intentionally fills the square cell */
.ig-tile.has-image img{
  object-fit:cover !important;
  object-position:center center !important;
}

/* DM / Kakao photo messages show the full uploaded photo by default */
.dm-page .chat-photo.has-image img,
.kakao-page .chat-photo.has-image img,
.kakao-page .kakao-photo.has-image img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}


/* v39 — clearer/larger X post avatars */
.x-post .x-post-avatar{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  image-rendering:auto !important;
  backface-visibility:hidden;
  transform:translateZ(0);
  background:#ece9e3 !important;
  border:1px solid #ded9d0 !important;
}
.x-post .x-user{
  gap:10px !important;
}
.x-post .x-user>div{
  padding-top:2px !important;
}

/* bigger inspector preview for post avatar */
#inspectPostAvatarPreview{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  min-height:72px !important;
  object-fit:cover !important;
  object-position:center center !important;
  image-rendering:auto !important;
  border-radius:50% !important;
}
.inspect-post-avatar-row{
  grid-template-columns:72px 1fr !important;
  gap:12px !important;
}

/* selection outline stays visible but not intrusive */
.is-selected-item{
  outline:2px solid rgba(93,90,85,.30) !important;
  outline-offset:-2px !important;
}


/* v40 — selection no longer clips at card edges */
.is-selected-item{
  outline:none !important;
  box-shadow:
    inset 0 0 0 2px rgba(93,90,85,.42),
    inset 0 0 0 3px rgba(255,255,255,.45) !important;
}

/* higher-quality profile rendering */
.x-post-avatar,
.sidebar-avatar-preview,
.ig-avatar-picker .avatar,
.chat-side-avatar,
.kakao-avatar,
#inspectPostAvatarPreview{
  image-rendering:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  backface-visibility:hidden !important;
}

/* profile editor */
.profile-editor-backdrop{
  position:fixed;
  inset:0;
  z-index:420;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(31,30,28,.42);
  backdrop-filter:blur(6px);
}
.profile-editor-modal{
  width:min(520px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 28px 90px rgba(41,40,38,.24);
  padding:20px;
}
.profile-editor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.profile-editor-head>div{display:grid;gap:4px}
.profile-editor-head small{
  font-size:8px;
  letter-spacing:.16em;
  color:var(--muted);
}
.profile-editor-head h2{
  margin:0;
  font-size:17px;
  color:var(--text);
}
.profile-editor-head p{
  margin:0;
  font-size:9px;
  line-height:1.55;
  color:var(--muted);
}
.profile-editor-close{
  width:30px;height:30px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfaf8;
  color:var(--text);
  font-size:19px;
  cursor:pointer;
}
.profile-editor-work{
  display:grid;
  gap:14px;
  padding:16px 0;
}
.profile-editor-canvas-wrap{
  width:min(420px,100%);
  aspect-ratio:1;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:#ece9e3;
  border:1px solid var(--line);
  touch-action:none;
  cursor:grab;
}
.profile-editor-canvas-wrap.is-dragging{cursor:grabbing}
#profileEditorCanvas{
  width:100%;
  height:100%;
  display:block;
}
.profile-editor-circle-guide{
  position:absolute;
  inset:7%;
  border:2px solid rgba(255,255,255,.94);
  border-radius:50%;
  box-shadow:
    0 0 0 999px rgba(29,28,26,.22),
    inset 0 0 0 1px rgba(41,40,38,.18);
  pointer-events:none;
}
.profile-editor-controls{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:end;
}
.profile-editor-zoom{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:9px;
  align-items:center;
  color:var(--muted);
  font-size:9px;
}
.profile-editor-zoom input{
  width:100%;
}
.profile-editor-zoom b{
  min-width:38px;
  text-align:right;
  color:var(--text);
  font-size:9px;
}
.profile-editor-preview-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfaf8;
  color:var(--muted);
  font-size:9px;
}
#profileEditorPreview{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#ece9e3;
  border:1px solid var(--line);
}
.profile-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
@media(max-width:560px){
  .profile-editor-modal{padding:14px}
  .profile-editor-controls{grid-template-columns:1fr}
  .profile-editor-actions .btn{flex:1}
}


/* v41 — keep uploaded photos untouched: no stretching, no forced crop */

/* Instagram feed cells keep their square frame, but the image itself stays at
   its natural aspect ratio. It may shrink to fit, but it is never stretched
   or forced to fill/crop the square. */
.ig-tile{
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--preview-card,#fff) !important;
}
.ig-tile.has-image img{
  position:static !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  image-rendering:auto !important;
  backface-visibility:visible !important;
}

/* Do not let generic image rules stretch the Instagram feed image */
.ig-grid .ig-tile.has-image > img{
  flex:0 1 auto !important;
}

/* X attachments: preserve source aspect ratio inside the fixed frame.
   Manual zoom/drag still works afterwards. */
.x-media.has-image img{
  object-fit:contain !important;
  object-position:center center !important;
}

/* DM / Kakao photo messages: preserve source ratio, never stretch */
.dm-page .chat-photo.has-image img,
.kakao-page .chat-photo.has-image img,
.kakao-page .kakao-photo.has-image img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:auto !important;
}

/* Profile images remain cropped intentionally because they are circular avatars;
   feed/content photos above are not cropped. */


/* v42 — help button */
.utility-dock-help .utility-dock-icon{
  color:#b7c3d0;
}

/* help modal */
.help-backdrop{
  position:fixed;
  inset:0;
  z-index:310;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(30,29,27,.34);
  backdrop-filter:blur(5px);
}
.help-modal{
  width:min(520px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 28px 80px rgba(41,40,38,.22);
  padding:20px;
}
.help-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:15px;
  border-bottom:1px solid var(--line);
}
.help-modal-head>div{display:grid;gap:4px}
.help-modal-head small{
  font-size:8px;
  letter-spacing:.16em;
  color:var(--muted);
}
.help-modal-head h2{
  margin:0;
  font-size:17px;
  color:var(--text);
}
.help-modal-head p{
  margin:0;
  font-size:9px;
  color:var(--muted);
}
.help-close-btn{
  width:30px;
  height:30px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfaf8;
  color:var(--text);
  font-size:19px;
  cursor:pointer;
}
.help-sections{
  display:grid;
  gap:9px;
  padding-top:14px;
}
.help-sections section{
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfaf8;
}
.help-sections b{
  display:block;
  margin-bottom:4px;
  font-size:10px;
  color:var(--text);
}
.help-sections p{
  margin:0;
  font-size:9px;
  line-height:1.6;
  color:var(--muted);
}


/* v43 — Instagram feed becomes 4:5 portrait cards */
.ig-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-rows:auto !important;
  gap:1px !important;
}
.ig-tile{
  width:100% !important;
  height:auto !important;
  aspect-ratio:4 / 5 !important;
  min-height:0 !important;
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--preview-card,#fff) !important;
  cursor:grab;
}
.ig-tile.is-dragging{cursor:grabbing}

.ig-tile.has-image > img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:
    translate(calc(-50% + var(--ig-x,0px)),calc(-50% + var(--ig-y,0px)))
    scale(var(--ig-scale,1)) !important;
  transform-origin:center center !important;
  user-select:none !important;
  pointer-events:none !important;
  image-rendering:auto !important;
}
.ig-edit-hint{
  position:absolute;
  left:6px;
  bottom:6px;
  z-index:4;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(20,27,38,.56);
  color:#fff;
  font-size:7px;
  line-height:1;
  pointer-events:none;
  backdrop-filter:blur(3px);
}
.capture.clean-output .ig-edit-hint{display:none !important}

.ig-tile.is-flattened-output > img{
  position:absolute !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:fill !important;
  transform:none !important;
}


/* v44 — universal photo editing workflow */
.profile-editor-canvas-wrap{
  width:min(500px,100%) !important;
  aspect-ratio:var(--editor-aspect,1 / 1) !important;
  max-height:62vh !important;
}
#profileEditorCanvas{
  width:100% !important;
  height:100% !important;
}
.profile-editor-circle-guide{
  display:none;
}
.profile-editor-canvas-wrap.is-profile-mode .profile-editor-circle-guide{
  display:block;
}
#profileEditorPreview{
  border-radius:10px !important;
  object-fit:contain;
}
.profile-editor-preview-row.is-profile-mode #profileEditorPreview{
  border-radius:50% !important;
}

/* The template itself no longer has direct drag/zoom editing UI.
   Images are edited only in the photo editor popup. */
.x-media-scale-hint,
.ig-edit-hint{
  display:none !important;
}
.x-media,
.ig-tile{
  cursor:default !important;
}
.x-media.is-dragging,
.ig-tile.is-dragging{
  cursor:default !important;
}

.photo-edit-badge{
  position:absolute;
  left:8px;
  bottom:8px;
  z-index:6;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(24,24,24,.58);
  color:#fff;
  font-size:8px;
  line-height:1;
  pointer-events:none;
  backdrop-filter:blur(4px);
}
.capture.clean-output .photo-edit-badge{
  display:none !important;
}

/* Edited media is already baked into the correct crop.
   Do not re-stretch it in the template. */
.x-media.has-image > img,
.ig-tile.has-image > img,
.dm-page .chat-photo.has-image > img,
.kakao-page .chat-photo.has-image > img,
.kakao-page .kakao-photo.has-image > img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  left:auto !important;
  top:auto !important;
  position:relative !important;
}

/* Instagram's edited output is 4:5 and therefore fills its 4:5 cell cleanly. */
.ig-tile.has-image > img{
  object-fit:cover !important;
}


/* v45 — editor guide equals the actual target frame */
.profile-editor-canvas-wrap{
  position:relative !important;
  background:#dfe5e8 !important;
  border:0 !important;
  border-radius:10px !important;
  overflow:hidden !important;
}
.profile-editor-canvas-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  border:3px solid #2498e8;
  border-radius:8px;
  box-sizing:border-box;
  pointer-events:none;
  z-index:5;
}
.profile-editor-circle-guide{
  display:none !important;
}

/* image editor is intentionally limited to zoom + position */
.profile-editor-controls{
  grid-template-columns:1fr auto !important;
}
.profile-editor-preview-row{
  display:none !important;
}
#profileEditorReset{
  white-space:nowrap;
}


/* v49 — selected item outline: all four edges always visible */
.x-post,
.bubble-row,
.kakao-message,
.typing-row{
  position:relative;
}

.is-selected-item{
  outline:none !important;
  box-shadow:none !important;
}

.is-selected-item::after{
  content:"";
  position:absolute;
  inset:3px;
  z-index:30;
  border:2px solid rgba(93,90,85,.55);
  border-radius:inherit;
  box-sizing:border-box;
  pointer-events:none;
}

/* X cards sometimes have no explicit radius on inner posts */
.x-post.is-selected-item::after{
  inset:3px !important;
  border-radius:10px !important;
}

/* Keep edit focus visible without changing selection state */
.x-post [contenteditable="true"]:focus{
  outline:none !important;
}
.x-post [contenteditable="true"]:focus-visible{
  box-shadow:inset 0 -1px 0 rgba(93,90,85,.32);
}


/* v51 — X posts are read-only on-canvas; edit from right inspector only */
.x-post .x-body-edit,
.x-post .x-author-name,
.x-post .x-author-handle,
.x-post .x-time,
.x-post .quote-name-edit,
.x-post .quote-handle-edit,
.x-post .quote-body-edit{
  cursor:default !important;
  user-select:text;
}

/* Never render a broken image marker if a legacy slot has an empty avatar. */
.x-post-avatar,
.avatar,
.sidebar-avatar-preview,
#inspectPostAvatarPreview{
  background:#ece9e3;
}


/* v52 — Instagram outer area is always clean white */
.ig-page,
.ig-profile,
.ig-tabs,
.ig-grid{
  background:#ffffff !important;
}
.ig-grid{
  border-top-color:#ece9e3 !important;
}
.ig-tile{
  background:var(--ig-photo-bg,#ffffff) !important;
}

/* Keep empty margins inside an edited Instagram image controlled only
   by the photo background color, never by the global template background. */
.ig-tile.has-image{
  background:var(--ig-photo-bg,#ffffff) !important;
}

/* Font settings */
.font-settings-card{
  display:grid;
  gap:9px;
  margin-bottom:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfaf8;
}
.font-setting-note{
  color:var(--muted);
  font-size:8px;
  line-height:1.5;
}
#fontSelect{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:#fff;
  color:var(--text);
  padding:9px 10px;
  font:inherit;
}

/* One font variable controls all Dearlog template typography. */
.capture,
.preview-modal,
.notice-modal,
.slot-modal,
.help-modal{
  font-family:var(--dearlog-font,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif) !important;
}


/* v53 — optional source credit on preview/export */
.export-source{
  width:100%;
  box-sizing:border-box;
  padding:8px 12px 10px;
  text-align:right;
  font-family:var(--dearlog-font,system-ui,sans-serif);
  font-size:9px;
  line-height:1.3;
  color:#8f8a81;
  background:transparent;
}
.capture.clean-output .export-source{
  display:block !important;
}


/* v54 — mandatory source credit */
.source-required-card{
  display:grid;
  gap:4px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfaf8;
}
.source-required-card b{
  font-size:10px;
  color:var(--text);
}
.source-required-card small{
  font-size:8px;
  line-height:1.5;
  color:var(--muted);
}


/* v55 — source credit as a separate tail below the original */
.clean-output{
  background:transparent !important;
}
.export-source{
  width:100% !important;
  box-sizing:border-box !important;
  padding:7px 12px 8px !important;
  margin:0 !important;
  text-align:right !important;
  font-family:var(--dearlog-font,system-ui,sans-serif) !important;
  font-size:8px !important;
  line-height:1.2 !important;
  color:#8f8a81 !important;
  background:#f7f5f1 !important;
  border-top:1px solid #ece8e1 !important;
  border-radius:0 0 12px 12px !important;
}

/* Ensure original template keeps its own bottom edge */
.capture.clean-output > .x-page,
.capture.clean-output > .ig-page,
.capture.clean-output > .dm-page,
.capture.clean-output > .kakao-page{
  border-radius:inherit !important;
}


/* Instagram drag sorting */
.ig-tile[draggable="true"]{
  cursor:grab !important;
}
.ig-tile.ig-dragging{
  opacity:.45 !important;
}
.ig-tile.ig-drag-over{
  box-shadow:inset 0 0 0 3px rgba(93,90,85,.45) !important;
}


/* Photo editor guide is strictly the editable frame */
.profile-editor-canvas-wrap{
  position:relative !important;
  overflow:hidden !important;
}
.profile-editor-canvas-wrap::after{
  inset:0 !important;
  border:3px solid #2498e8 !important;
  border-radius:8px !important;
  box-sizing:border-box !important;
  pointer-events:none !important;
}


/* v56 — Instagram preview/export automatically fits the number of photos */
.clean-output .ig-grid{
  grid-template-columns:repeat(3,1fr) !important;
  height:auto !important;
  min-height:0 !important;
}
.clean-output .ig-grid .ig-tile{
  aspect-ratio:4 / 5 !important;
  min-height:0 !important;
}
/* A final incomplete row remains left-aligned like a real profile grid. */
.clean-output .ig-page{
  height:auto !important;
  min-height:0 !important;
}


/* v57 — template background color applies reliably */
.capture{
  background:var(--template-bg,#f5f4f1) !important;
}
.capture::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:var(--template-bg,#f5f4f1);
  background-image:var(--template-bg-image,none);
  background-repeat:no-repeat;
  background-position:center;
  background-size:var(--template-bg-scale,100%);
  pointer-events:none;
  z-index:0;
}
.capture > *{
  position:relative;
  z-index:1;
}
/* Instagram's actual UI stays white; only outer template/canvas background changes. */
.ig-page{
  background:#fff !important;
}


/* v57 — smoother Instagram reorder feedback */
.ig-tile{
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    opacity .16s ease,
    box-shadow .16s ease !important;
  will-change:transform;
}
.ig-tile.ig-dragging{
  opacity:.35 !important;
  transform:scale(.96) !important;
}
.ig-tile.ig-drag-over{
  transform:scale(.985) !important;
  box-shadow:inset 0 0 0 3px rgba(93,90,85,.38) !important;
}
.ig-grid{
  transition:height .18s ease !important;
}


/* Instagram video toggle must remain clickable above label/file area */
.ig-video-toggle{
  position:absolute !important;
  top:7px !important;
  right:7px !important;
  z-index:12 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}
.ig-tile > input.ig-image-input{
  pointer-events:none !important;
}
.ig-tile{
  position:relative !important;
}


/* v59 source + video editor */
.source-required-label{
  display:flex;
  align-items:center;
  gap:5px;
  margin-bottom:5px;
  color:var(--muted);
  font-size:8px;
  font-weight:700;
}
.source-copyright{font-size:11px;line-height:1;color:var(--text)}
.source-site-fixed{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top:8px;
  margin-top:2px;
  border-top:1px solid var(--line);
}
.source-site-fixed small{font-size:8px;color:var(--muted)}
.source-site-fixed b{font-size:9px;color:var(--text)}

.export-source{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  text-align:left !important;
}
.export-source-label{
  display:flex;
  align-items:center;
  gap:5px;
  color:#8f8a81;
  font-size:8px;
}
.export-source-copy{font-size:10px;line-height:1}
.export-source > b{
  margin-left:auto;
  color:#8f8a81;
  font-size:8px;
  font-weight:600;
  white-space:nowrap;
}

.media-play-toggle,.x-video-toggle,.ig-video-toggle,.chat-video-toggle{
  display:none !important;
}
.profile-editor-video-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfaf8;
}
.profile-editor-video-row[hidden]{display:none !important}
.profile-editor-video-row>span{display:grid;gap:3px}
.profile-editor-video-row b{font-size:10px;color:var(--text)}
.profile-editor-video-row small{font-size:8px;color:var(--muted)}
.profile-editor-video-row input{width:18px;height:18px}
.clean-output .video-play-overlay,
.preview-modal .video-play-overlay{display:flex !important;z-index:20 !important}


/* v60 — video overlay always centered in the actual photo frame */
.video-play-overlay{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  pointer-events:none !important;
  z-index:18 !important;
}
.video-play-overlay > span{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  margin:0 !important;
  transform:none !important;
  background:rgba(20,20,20,.58) !important;
  color:#fff !important;
  line-height:1 !important;
  font-size:17px !important;
  padding-left:2px !important;
  box-sizing:border-box !important;
}

/* Ensure all media frames establish the correct positioning context */
.x-media,
.ig-tile,
.chat-photo,
.dm-photo,
.kakao-photo{
  position:relative !important;
  overflow:hidden !important;
}

/* ---------------------------------------------------------
   Source tail: artwork source left, site credit right
   --------------------------------------------------------- */
.export-source{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:7px 12px 8px !important;
  background:#f7f5f1 !important;
  border-top:1px solid #ece8e1 !important;
}
.export-source-label{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  min-width:0 !important;
  color:#8f8a81 !important;
  font-size:8px !important;
  overflow:hidden !important;
}
.export-source-label > span:last-child{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.export-source-copy{
  flex:0 0 auto;
  font-size:10px !important;
  line-height:1 !important;
}
.export-site-credit{
  justify-self:end !important;
  margin:0 !important;
  color:#8f8a81 !important;
  font-size:8px !important;
  font-weight:600 !important;
  white-space:nowrap !important;
}

/* Right inspector artwork source editor */
.inspect-source-editor{
  display:grid;
  gap:8px;
  margin-bottom:16px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfaf8;
}
.inspect-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.inspect-label-row b{
  font-size:10px;
  color:var(--text);
}
.inspect-label-row small{
  font-size:8px;
  color:var(--muted);
}
.inspect-source-preview{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 9px;
  border-radius:8px;
  background:#f3f0eb;
  font-size:8px;
  color:#8f8a81;
}
.inspect-source-preview > span:first-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.inspect-source-fixed{
  flex:0 0 auto;
  white-space:nowrap;
}


/* v61 — appearance/source tools live in the right inspector */
.inspector .inspector-appearance{
  margin:0 0 16px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfaf8;
}
.inspector .inspector-appearance .section-title{
  margin-bottom:9px;
}
.inspector .inspector-appearance .color-row{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.inspector .font-settings-card{
  margin-bottom:9px;
}

/* Instagram photo background now follows the normal background color control. */
.ig-tile,
.ig-tile.has-image{
  background:var(--ig-photo-bg,#ffffff) !important;
}


/* v62 — wider right inspector + tabbed editing */
@media(min-width:1181px){
  .app{
    grid-template-columns:330px minmax(0,1fr) 330px !important;
  }
  .inspector{
    width:330px !important;
    min-width:330px !important;
    padding:24px !important;
  }
}

.inspector-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:12px 0 18px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#f5f3ef;
}
.inspector-tab{
  min-height:36px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}
.inspector-tab.is-active{
  background:#fff;
  color:var(--text);
  box-shadow:0 2px 8px rgba(45,42,37,.08);
}
.inspector-tab-panel[hidden]{display:none !important}
.inspector-tab-panel{
  min-width:0;
}
.inspector-tab-panel .inspector-appearance,
.inspector-tab-panel #templateBackgroundSection,
.inspector-tab-panel .inspect-source-editor{
  margin-bottom:16px;
}
.inspector-tab-panel #templateBackgroundSection{
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfaf8;
}
.inspect-label-row{
  justify-content:flex-start !important;
}

/* On mobile both tabs stay at the top of the right-panel section. */
@media(max-width:900px){
  .inspector-tabs{
    position:sticky;
    top:0;
    z-index:5;
  }
}


/* v65 — rebuilt design panel */
#designTabPanel{
  display:block;
}
#designTabPanel[hidden]{
  display:none !important;
}
#designTabPanel .tool-section{
  display:block !important;
  margin:0 0 16px !important;
  padding:12px !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  background:#fbfaf8 !important;
}
#designTabPanel .section-title{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin-bottom:10px !important;
}
#designTabPanel .section-title span{
  font-size:11px !important;
  font-weight:800 !important;
  color:var(--text) !important;
}
#designTabPanel .section-title small{
  font-size:8px !important;
  color:var(--muted) !important;
}
#designTabPanel .field,
#designTabPanel .toggle-row,
#designTabPanel .font-settings-card,
#designTabPanel .palette-preview,
#designTabPanel .color-row,
#designTabPanel .bg-control-card,
#designTabPanel .inspect-source-preview{
  visibility:visible !important;
  opacity:1 !important;
}


/* v68 — source credit */
.source-text-field > span{
  display:none !important;
}
.source-skip-row{
  margin-top:8px;
}
.inspect-source-preview{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
}
#inspectSourceLeft[hidden]{
  display:none !important;
}

/* Always show site credit at the right edge. */
.export-source{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
}
.export-source.source-left-hidden{
  grid-template-columns:1fr auto !important;
}
.export-source.source-left-hidden .export-site-credit{
  grid-column:2 !important;
}
.export-site-credit{
  justify-self:end !important;
}

/* Live workspace credit */
.workspace-source-credit{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-26px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  padding:6px 10px !important;
  box-sizing:border-box !important;
  background:#f7f5f1 !important;
  border-top:1px solid #ece8e1 !important;
  color:#8f8a81 !important;
  font-family:var(--dearlog-font,system-ui,sans-serif) !important;
  font-size:8px !important;
  pointer-events:none !important;
  z-index:50 !important;
}
.workspace-source-left{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.workspace-source-right{
  justify-self:end;
  white-space:nowrap;
}
.workspace-source-credit.source-left-hidden{
  grid-template-columns:1fr auto !important;
}

/* Keep room for the live tail beneath the editor. */
.capture-shell{
  padding-bottom:30px !important;
}


/* v69 — source tail is part of the visible workspace itself */
.capture{
  overflow:visible !important;
}

.workspace-source-credit{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;

  width:100% !important;
  min-height:30px !important;
  box-sizing:border-box !important;

  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;

  margin:0 !important;
  padding:7px 11px !important;

  background:#f7f5f1 !important;
  border-top:1px solid #ece8e1 !important;
  border-radius:0 !important;

  color:#8f8a81 !important;
  font-family:var(--dearlog-font,system-ui,sans-serif) !important;
  font-size:8px !important;
  line-height:1.2 !important;

  pointer-events:none !important;
  z-index:1 !important;
}

.workspace-source-credit.source-left-hidden{
  grid-template-columns:1fr auto !important;
}

.workspace-source-left{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.workspace-source-right{
  justify-self:end !important;
  white-space:nowrap !important;
  font-weight:500 !important;
}

/* Tail visually attaches to the rounded template card above. */
.capture > .x-page + .workspace-source-credit,
.capture > .ig-page + .workspace-source-credit,
.capture > .dm-page + .workspace-source-credit,
.capture > .kakao-page + .workspace-source-credit{
  border-radius:0 0 16px 16px !important;
}

/* Avoid extra fake spacing below capture; tail now takes real layout space. */
.capture-shell{
  padding-bottom:0 !important;
}

/* Preview/export tail uses the exact same layout. */
.export-source{
  position:relative !important;
  width:100% !important;
}

.clean-output .export-source{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
}


/* v70 — iMessage-like DM */
.dm-page{
  height:814px !important;
  min-height:814px !important;
  background:#fff !important;
  color:#111 !important;
  border-radius:30px 30px 0 0 !important;
  overflow:hidden !important;
}
.dm-head{
  min-height:64px !important;
  padding:8px 14px !important;
  background:rgba(250,250,250,.97) !important;
  border-bottom:1px solid #e8e8eb !important;
}
.dm-user{
  flex:1 !important;
  justify-content:center !important;
  position:relative !important;
}
.dm-user .avatar{
  width:34px !important;
  height:34px !important;
}
.dm-name{
  font-size:11px !important;
  color:#111 !important;
}
.chat-bio-preview{
  font-size:8px !important;
  color:#8e8e93 !important;
}
.dm-head-actions{
  color:#007aff !important;
  font-size:13px !important;
  white-space:nowrap !important;
}
.dm-body{
  padding:18px 12px 14px !important;
  gap:7px !important;
  background-color:var(--chat-bg,#fff) !important;
}
.dm-day{
  color:#8e8e93 !important;
  font-size:8px !important;
  margin:2px 0 8px !important;
}
.bubble-row .avatar{
  width:22px !important;
  height:22px !important;
}
.dm-page .bubble{
  border:0 !important;
  border-radius:18px !important;
  padding:8px 11px !important;
  font-size:11px !important;
  line-height:1.35 !important;
  box-shadow:none !important;
}
.dm-page .theirs .bubble{
  background:#e9e9eb !important;
  color:#111 !important;
  border-bottom-left-radius:6px !important;
}
.dm-page .mine .bubble{
  background:#0a84ff !important;
  color:#fff !important;
  border-bottom-right-radius:6px !important;
}
.dm-time{
  color:#8e8e93 !important;
  font-size:7px !important;
}
.dm-read{
  color:#8e8e93 !important;
  font-size:7px !important;
}
.dm-compose{
  min-height:58px !important;
  padding:8px 12px !important;
  gap:8px !important;
  background:#fff !important;
  border-top:1px solid #ededf0 !important;
}
.dm-plus{
  width:28px !important;
  height:28px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background:#e5e5ea !important;
  color:#666 !important;
  font-size:18px !important;
}
.dm-input{
  min-height:32px !important;
  box-sizing:border-box !important;
  padding:8px 38px 8px 12px !important;
  border:1px solid #d1d1d6 !important;
  border-radius:18px !important;
  color:#8e8e93 !important;
  background:#fff !important;
}
.dm-send{
  width:28px !important;
  height:28px !important;
  padding:0 !important;
  border-radius:50% !important;
  background:#0a84ff !important;
  color:#fff !important;
  font-size:16px !important;
  line-height:28px !important;
}

/* v70 — Kakao: header is always white; only conversation room uses editable background */
.kakao-page{
  height:814px !important;
  min-height:814px !important;
  background:#fff !important;
  background-image:none !important;
  border-radius:30px 30px 0 0 !important;
  overflow:hidden !important;
}
.kakao-head{
  flex:0 0 66px !important;
  background:#fff !important;
  background-image:none !important;
  border-bottom:1px solid #ededed !important;
}
.kakao-room{
  flex:1 !important;
  min-height:0 !important;
  overflow:hidden !important;
  background-color:var(--chat-bg,#dfe8ef) !important;
  background-image:var(--chat-bg-image,none) !important;
  background-size:cover !important;
  background-position:center !important;
}
.kakao-compose{
  flex:0 0 58px !important;
  background:#fff !important;
}

/* v70 — source tail is inside the 844px capture instead of being clipped below it */
.capture{
  min-height:844px !important;
}
.workspace-source-credit{
  height:30px !important;
  min-height:30px !important;
  flex:0 0 30px !important;
  padding:6px 11px !important;
  background:#f7f5f1 !important;
  border-top:1px solid #ece8e1 !important;
  border-radius:0 0 16px 16px !important;
  box-sizing:border-box !important;
}


/* v71 — shorter DM/Kakao canvas */
.capture[data-template="dm"],
.capture[data-template="kakao"]{
  min-height:0 !important;
  height:auto !important;
}
.dm-page,
.kakao-page{
  height:620px !important;
  min-height:620px !important;
}

/* iMessage: all-white shell and conversation area */
.dm-page,
.dm-head,
.dm-body,
.dm-compose{
  background:#fff !important;
  background-image:none !important;
}
.dm-page .theirs .bubble{
  background:var(--dm-their-bubble,#e9e9eb) !important;
  color:var(--dm-their-text,#111) !important;
}
.dm-page .mine .bubble{
  background:var(--dm-my-bubble,#0a84ff) !important;
  color:var(--dm-my-text,#fff) !important;
}

/* Kakao: top/footer remain white, middle room alone receives template background */
.kakao-page{
  background:#fff !important;
  background-image:none !important;
}
.kakao-head,
.kakao-compose{
  background:#fff !important;
  background-image:none !important;
}
.kakao-room{
  background-color:var(--chat-bg,#dfe8ef) !important;
  background-image:var(--chat-bg-image,none) !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:var(--chat-bg-size,100%) !important;
}

/* sticker layer */
.capture{
  position:relative !important;
}
.sticker-layer{
  position:absolute;
  inset:0 0 30px 0;
  z-index:60;
  pointer-events:none;
  overflow:hidden;
}
.sticker-item{
  position:absolute;
  height:auto;
  max-width:none !important;
  user-select:none;
  touch-action:none;
  cursor:grab;
  pointer-events:auto;
  filter:none;
}
.sticker-item.is-dragging{cursor:grabbing}
.sticker-item.is-selected{
  outline:2px dashed rgba(93,90,85,.55);
  outline-offset:3px;
}
.clean-output .sticker-item,
.preview-modal .sticker-item{
  outline:none !important;
}
.sticker-upload-btn{
  position:relative;
  overflow:hidden;
  text-align:center;
  cursor:pointer;
}
.sticker-upload-btn input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.sticker-help{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:8px;
  line-height:1.5;
}
.dm-color-grid{
  grid-template-columns:1fr 1fr !important;
}

/* Shorter template leaves no giant empty block above the credit tail. */
.capture[data-template="dm"] .workspace-source-credit,
.capture[data-template="kakao"] .workspace-source-credit{
  position:relative !important;
}

/* v72 — DM/Kakao compact layout without losing composer */
.dm-page,.kakao-page{
  height:560px !important;
  min-height:560px !important;
  display:flex !important;
  flex-direction:column !important;
}
.dm-head{flex:0 0 64px !important}
.dm-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.dm-compose{
  display:flex !important;
  flex:0 0 56px !important;
  min-height:56px !important;
  position:relative !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:5 !important;
}
.kakao-head{flex:0 0 66px !important}
.kakao-room{flex:1 1 auto !important;min-height:0 !important}
.kakao-compose{display:flex !important;flex:0 0 56px !important;min-height:56px !important}

/* three inspector tabs */
.inspector-tabs{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:4px !important}
.inspector-tab{padding:10px 6px !important;font-size:9px !important}

/* Sticker Studio */
#stickerTabPanel{display:block}
#stickerTabPanel[hidden]{display:none !important}
.sticker-studio{padding:14px !important;border:1px solid var(--line) !important;border-radius:12px !important;background:#fbfaf8 !important}
.sticker-studio .section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sticker-studio-toggle[aria-pressed="true"]{background:#292724 !important;color:#fff !important}
.sticker-studio-status{margin:8px 0 14px !important;font-size:8px !important;color:var(--muted) !important}
.sticker-library-head{display:flex;justify-content:space-between;align-items:center;margin:16px 0 8px;gap:12px}
.sticker-library-head b{font-size:10px}.sticker-library-head small{font-size:8px;color:var(--muted)}
.sticker-library{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:76px;margin-bottom:12px}
.sticker-library-empty{grid-column:1/-1;display:grid;place-items:center;min-height:74px;border:1px dashed var(--line-strong);border-radius:10px;font-size:8px;color:var(--muted)}
.sticker-thumb{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:#fff;padding:5px;overflow:hidden;cursor:pointer}
.sticker-thumb img{width:100%;height:100%;object-fit:contain}
.sticker-thumb span{position:absolute;right:4px;bottom:3px;font-size:10px}
.sticker-thumb.is-selected{outline:2px solid var(--accent);outline-offset:1px}
.sticker-studio-actions{display:grid;gap:7px}
.sticker-item.is-locked{outline:none !important}

/* Source controls: no checkbox, more breathing room */
.inspect-source-editor{padding:14px !important}
.inspect-source-editor .section-title{margin-bottom:14px !important}
.source-text-field{margin-bottom:14px !important}
.source-skip-row{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:16px !important;margin:0 0 14px !important;padding:10px 0 !important;border-top:1px solid var(--line) !important;
}
.source-skip-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.source-skip-copy b{font-size:9px}.source-skip-copy small{font-size:8px;color:var(--muted);line-height:1.45}
.source-skip-btn{flex:0 0 auto !important;min-width:68px !important}
.source-skip-btn.is-off{opacity:.62}
.inspect-source-preview{margin-top:8px !important;padding:9px 10px !important}

/* move utility dock into the wide blank right-side workspace */
.utility-dock{
  position:fixed !important;
  left:auto !important;
  right:calc(var(--inspector-w, 330px) + 34px) !important;
  bottom:34px !important;
  display:flex !important;
  flex-direction:row !important;
  gap:8px !important;
  z-index:45 !important;
}
.utility-dock-btn{width:48px !important;height:48px !important;border-radius:12px !important}
@media(max-width:1100px){
  .utility-dock{right:12px !important;bottom:12px !important}
}


/* v73 — Instagram profile proportions */
.capture[data-template="instagram"]{
  min-height:0 !important;
  height:auto !important;
}
.ig-page{
  min-height:0 !important;
  height:auto !important;
}
.ig-profile{
  grid-template-columns:64px minmax(0,1fr) !important;
  gap:12px !important;
  padding:14px 16px !important;
  min-height:0 !important;
}
.ig-avatar-picker,
.ig-profile > .image-picker{
  width:64px !important;
  height:64px !important;
  min-width:64px !important;
  min-height:64px !important;
  max-width:64px !important;
  max-height:64px !important;
}
.ig-avatar-picker .avatar,
.ig-profile > .image-picker .avatar{
  width:64px !important;
  height:64px !important;
  min-width:64px !important;
  min-height:64px !important;
}
.ig-name-row{
  margin-bottom:5px !important;
}
.ig-handle{
  font-size:12px !important;
}
.ig-follow{
  padding:5px 8px !important;
  font-size:8px !important;
}
.ig-counts{
  gap:10px !important;
  margin-bottom:5px !important;
  font-size:9px !important;
}
.ig-counts b{
  font-size:10px !important;
}
.ig-bio{
  font-size:9px !important;
  line-height:1.35 !important;
}
.ig-tabs span{
  padding:8px !important;
  font-size:10px !important;
}
.ig-grid{
  width:390px !important;
  grid-template-columns:repeat(3,130px) !important;
  grid-auto-rows:130px !important;
  gap:0 !important;
  background:#fff !important;
}
.ig-tile{
  width:130px !important;
  height:130px !important;
  aspect-ratio:1 / 1 !important;
  border-right:1px solid var(--preview-line) !important;
  border-bottom:1px solid var(--preview-line) !important;
  box-sizing:border-box !important;
}
.ig-tile:nth-child(3n){
  border-right:0 !important;
}
.clean-output .ig-grid{
  grid-template-columns:repeat(3,130px) !important;
  grid-auto-rows:130px !important;
}
.clean-output .ig-grid .ig-tile{
  width:130px !important;
  height:130px !important;
  aspect-ratio:1 / 1 !important;
}

/* v73 — DM/Kakao slightly taller */
.dm-page,.kakao-page{
  height:600px !important;
  min-height:600px !important;
}
.dm-body,.kakao-room{
  min-height:0 !important;
}

/* v73 — refined Sticker Studio */
.sticker-studio{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
.sticker-studio-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.sticker-studio-head > div{
  display:grid;
  gap:2px;
}
.sticker-studio-head small{
  font-size:7px;
  letter-spacing:.12em;
  color:var(--muted);
}
.sticker-studio-head b{
  font-size:13px;
  color:var(--text);
}
.sticker-state-pill{
  flex:0 0 auto;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f3f0eb;
  color:var(--muted);
  font-size:8px;
  font-weight:700;
}
.sticker-state-pill.is-active{
  background:#292724;
  border-color:#292724;
  color:#fff;
}
.sticker-studio-switch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px;
  margin-bottom:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfaf8;
}
.sticker-studio-switch > div{
  display:grid;
  gap:4px;
}
.sticker-studio-switch b{
  font-size:10px;
}
.sticker-studio-switch small{
  font-size:8px;
  line-height:1.45;
  color:var(--muted);
}
.sticker-mode-btn{
  flex:0 0 auto;
  border:0;
  border-radius:9px;
  padding:8px 11px;
  background:#ece8e2;
  color:var(--text);
  font-size:9px;
  font-weight:700;
  cursor:pointer;
}
.sticker-mode-btn[aria-pressed="true"]{
  background:#292724;
  color:#fff;
}
.sticker-add-card{
  position:relative;
  display:grid;
  grid-template-columns:32px 1fr;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  margin-bottom:14px;
  border:1px dashed var(--line-strong);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}
.sticker-add-card input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.sticker-add-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#f3f0eb;
  font-size:17px;
}
.sticker-add-card > span:last-of-type{
  display:grid;
  gap:2px;
}
.sticker-add-card b{
  font-size:10px;
}
.sticker-add-card small{
  font-size:7px;
  color:var(--muted);
}
.sticker-library-head{
  margin:0 0 7px !important;
}
.sticker-library{
  grid-template-columns:repeat(4,1fr) !important;
  gap:6px !important;
  min-height:68px !important;
  margin-bottom:10px !important;
}
.sticker-thumb{
  border-radius:9px !important;
  padding:4px !important;
}
.sticker-thumb.is-selected{
  outline:2px solid #6c665e !important;
}
.sticker-thumb-lock{
  right:3px !important;
  bottom:2px !important;
  padding:1px 2px;
  border-radius:4px;
  background:rgba(255,255,255,.82);
  font-size:8px !important;
}
.sticker-selection-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfaf8;
}
.sticker-selection-copy{
  display:grid;
  gap:2px;
  min-width:0;
}
.sticker-selection-copy small{
  font-size:7px;
  color:var(--muted);
}
.sticker-selection-copy b{
  font-size:9px;
}
.sticker-selection-actions{
  display:flex;
  gap:5px;
}
.sticker-icon-btn{
  width:30px;
  height:30px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font-size:12px;
  cursor:pointer;
}
.sticker-icon-btn:disabled{
  opacity:.35;
  cursor:default;
}
.sticker-delete-icon{
  color:#a95454;
  font-size:18px;
  line-height:1;
}
.sticker-help{
  margin:9px 2px 0 !important;
  line-height:1.55 !important;
}


/* v74 — DM/Kakao colors follow main color automatically */
.dm-page .theirs .bubble{
  background:var(--dm-their-bubble,#e9e9eb) !important;
  color:var(--dm-their-text,#111) !important;
}
.dm-page .mine .bubble{
  background:var(--dm-my-bubble,#0a84ff) !important;
  color:var(--dm-my-text,#fff) !important;
}
.dm-send{
  background:var(--dm-my-bubble,#0a84ff) !important;
  color:var(--dm-my-text,#fff) !important;
}
.dm-head-actions{
  color:var(--dm-my-bubble,#0a84ff) !important;
}

.kakao-message .bubble{
  background:var(--kakao-their-bubble,#fff) !important;
  color:var(--kakao-their-text,#252525) !important;
}
.kakao-message.mine .bubble{
  background:var(--kakao-my-bubble,#fee500) !important;
  color:var(--kakao-my-text,#252525) !important;
}
.kakao-read-one{
  color:var(--preview-accent) !important;
}


/* v74 — preview/export follows actual visible template height */
.clean-output,
.preview-capture,
.preview-modal .capture{
  min-height:0 !important;
  height:auto !important;
}
.clean-output .x-page,
.clean-output .ig-page,
.clean-output .dm-page,
.clean-output .kakao-page,
.preview-modal .x-page,
.preview-modal .ig-page,
.preview-modal .dm-page,
.preview-modal .kakao-page{
  min-height:0 !important;
}
.clean-output .x-page,
.preview-modal .x-page{
  height:auto !important;
}
.clean-output .ig-page,
.preview-modal .ig-page{
  height:auto !important;
}

/* DM/Kakao keep their designed card height, then source tail attaches immediately. */
.clean-output .dm-page,
.clean-output .kakao-page,
.preview-modal .dm-page,
.preview-modal .kakao-page{
  height:600px !important;
  min-height:600px !important;
}

.clean-output .workspace-source-credit,
.preview-modal .workspace-source-credit{
  margin-top:0 !important;
  position:relative !important;
}

.capture[data-template="x"]{
  min-height:0 !important;
  height:auto !important;
}
.x-page{
  min-height:0 !important;
  height:auto !important;
}


/* v74 — Kakao composer uses the full width like DM */
.kakao-compose{
  display:grid !important;
  grid-template-columns:28px minmax(0,1fr) 42px !important;
  align-items:center !important;
  gap:8px !important;
  padding:9px 12px !important;
  box-sizing:border-box !important;
}
.kakao-input{
  width:100% !important;
  min-width:0 !important;
  min-height:34px !important;
  box-sizing:border-box !important;
  padding:9px 11px !important;
  border:1px solid #e2e2e5 !important;
  border-radius:18px !important;
  background:#fff !important;
  color:#8e8e93 !important;
}
.kakao-compose>span:first-child{
  width:28px !important;
  height:28px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background:#ededf0 !important;
}
.kakao-compose>span:last-child{
  width:42px !important;
  text-align:center !important;
  white-space:nowrap !important;
}

.workspace-source-credit.source-left-hidden,
.export-source.source-left-hidden{
  grid-template-columns:1fr auto !important;
}
.workspace-source-credit.source-left-hidden .workspace-source-right,
.export-source.source-left-hidden .workspace-source-right{
  grid-column:2 !important;
  justify-self:end !important;
}


/* v75 — Instagram photo grid: slightly taller portrait ratio */
.ig-grid{
  width:390px !important;
  grid-template-columns:repeat(3,130px) !important;
  grid-auto-rows:156px !important;
  gap:0 !important;
  background:#fff !important;
}
.ig-tile{
  width:130px !important;
  height:156px !important;
  aspect-ratio:5 / 6 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.ig-tile img,
.ig-tile .media-image,
.ig-tile .ig-media{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.clean-output .ig-grid,
.preview-modal .ig-grid{
  grid-template-columns:repeat(3,130px) !important;
  grid-auto-rows:156px !important;
}
.clean-output .ig-grid .ig-tile,
.preview-modal .ig-grid .ig-tile{
  width:130px !important;
  height:156px !important;
  aspect-ratio:5 / 6 !important;
}


/* v78 — background image lives inside appearance, above dark mode */
#appearanceSection #templateBackgroundSection{
  margin:14px 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
#appearanceSection #templateBackgroundSection .section-title{
  margin-bottom:8px !important;
}
.bg-image-only-card{
  padding:10px !important;
}
.bg-image-only-card .bg-control-row--stack{
  gap:9px !important;
}

/* Smoother color editing: avoid layout transitions on the preview while dragging color inputs */
.capture,
.capture *{
  transition-property:background-color,color,border-color,box-shadow !important;
  transition-duration:.08s !important;
}


/* v79 — keep the editor canvas at real 390px size on desktop */
@media(min-width:901px){
  .stage{
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  .capture-shell{
    min-width:390px !important;
    overflow:visible !important;
    align-items:flex-start !important;
  }
  .capture{
    transform:none !important;
    width:390px !important;
    min-width:390px !important;
    max-width:390px !important;
  }
}

/* v79 — slightly larger, easier-to-read template typography */
.preview-brand,
.preview-brand span{
  font-size:17px !important;
}
.x-compose-text{
  font-size:13px !important;
  line-height:1.55 !important;
}
.x-user-name,
.x-author-name{
  font-size:12px !important;
}
.x-meta,
.ig-meta{
  font-size:9px !important;
}
.x-body{
  font-size:13px !important;
  line-height:1.55 !important;
}
.x-actions{
  font-size:9px !important;
}

.ig-handle{
  font-size:13px !important;
}
.ig-counts{
  font-size:10px !important;
}
.ig-counts b{
  font-size:11px !important;
}
.ig-bio{
  font-size:10px !important;
  line-height:1.45 !important;
}
.ig-tabs{
  font-size:11px !important;
}

.dm-name,
.kakao-head b{
  font-size:12px !important;
}
.chat-bio-preview,
.kakao-head small{
  font-size:9px !important;
}
.dm-page .bubble,
.kakao-message .bubble{
  font-size:12px !important;
  line-height:1.45 !important;
}
.dm-time,
.dm-read,
.kakao-time,
.kakao-sender{
  font-size:8px !important;
}
.dm-input,
.kakao-input{
  font-size:11px !important;
}

/* Keep source tail readable without making it visually heavy */
.workspace-source-credit,
.export-source{
  font-size:8.5px !important;
}

.preview-icon-btn,
.dm-head-actions,
.kakao-head>span{
  font-size:14px !important;
}


/* v80 — workspace must always be fully visible, no stage scrolling */
.stage{
  overflow:hidden !important;
}
.capture-shell{
  overflow:visible !important;
  align-items:flex-start !important;
  justify-content:center !important;
}
@media(min-width:901px){
  .capture{
    width:390px !important;
    min-width:390px !important;
    max-width:390px !important;
  }
}

/* v80 — left/right panel readability */
.sidebar,
.inspector{
  font-size:11px !important;
  line-height:1.5 !important;
}
.sidebar .section-title span,
.sidebar .sidebar-section-title,
.sidebar h2,
.sidebar h3,
.inspector .section-title span,
.inspector .inspector-section-title b,
.inspector .inspector-head b,
.inspector h2,
.inspector h3{
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
}
.sidebar .section-title small,
.sidebar small,
.sidebar .field-note,
.inspector .section-title small,
.inspector small,
.inspector .field-note{
  font-size:9.5px !important;
  line-height:1.5 !important;
}
.sidebar .field > span,
.sidebar label > span,
.inspector .field > span,
.inspector label > span,
.inspector .inspect-label{
  font-size:10.5px !important;
  line-height:1.4 !important;
  font-weight:700 !important;
}
.sidebar input,
.sidebar select,
.sidebar textarea,
.inspector input,
.inspector select,
.inspector textarea{
  font-size:11px !important;
  line-height:1.45 !important;
}
.sidebar .btn,
.sidebar button,
.inspector .btn,
.inspector button{
  font-size:10.5px !important;
  line-height:1.35 !important;
}

/* Right panel especially: larger and easier to scan */
.inspector-head small{
  font-size:8.5px !important;
}
.inspector-head b{
  font-size:14px !important;
}
#inspectorType{
  font-size:9.5px !important;
}
.inspector-tabs{
  gap:5px !important;
}
.inspector-tab{
  font-size:10.5px !important;
  font-weight:800 !important;
  padding:11px 7px !important;
}
#contentControls .inspector-section-title{
  margin-bottom:10px !important;
}
#contentControls .inspector-section-title b{
  font-size:12px !important;
}
#contentToolHint{
  font-size:9px !important;
}
.inspector-empty{
  font-size:10.5px !important;
  line-height:1.7 !important;
}
.inspector-fields{
  gap:12px !important;
}
#designTabPanel .tool-section{
  padding:14px !important;
}
#designTabPanel .section-title{
  margin-bottom:12px !important;
}
#designTabPanel .section-title span{
  font-size:12px !important;
}
#designTabPanel .section-title small{
  font-size:9px !important;
}
.toggle-row b,
.source-skip-copy b,
.sticker-studio-switch b{
  font-size:10.5px !important;
}
.toggle-row small,
.source-skip-copy small,
.sticker-studio-switch small,
.sticker-help{
  font-size:9px !important;
  line-height:1.55 !important;
}
.palette-preview small,
.bg-control-copy small,
.bg-scale-bar,
.inspect-source-preview{
  font-size:9px !important;
}

/* A little more spacing so larger type does not feel cramped */
.sidebar section,
.inspector .tool-section,
.inspector-content-tools{
  margin-bottom:18px !important;
}
.sidebar .field,
.inspector .field{
  margin-bottom:11px !important;
}
.button-stack{
  gap:8px !important;
}


/* v81 — X only: slightly smaller editor preview so the whole template stays visible */
@media(min-width:901px){
  .capture[data-template="x"]{
    transform-origin:top center !important;
  }
  .stage,
  .capture-shell{
    padding-bottom:8px !important;
  }
}


/* v82 — X editor preview: clearly smaller and centered with bottom breathing room */
@media(min-width:901px){
  .capture-shell{
    padding-top:4px !important;
    padding-bottom:54px !important;
  }
  .capture[data-template="x"]{
    transform-origin:top center !important;
  }
}


/* v83 — X workspace is truly centered vertically inside the editor */
@media(min-width:901px){
  .stage{
    overflow:hidden !important;
  }
  .capture-shell{
    padding-top:0 !important;
    padding-bottom:0 !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }
  .capture[data-template="x"]{
    transform-origin:top center !important;
  }
}


/* v84 — X editor visibly smaller and centered */
@media(min-width:901px){
  .capture-shell{
    position:relative !important;
  }
  .capture[data-template="x"]{
    transform-origin:top center !important;
  }
}

/* X metric values: normal digit spacing, no padded-zero look */
.x-actions .editable{
  min-width:0 !important;
  letter-spacing:0 !important;
  font-variant-numeric:tabular-nums;
}


/* v85 — X engagement numbers support up to 9,999 */
.x-actions .editable{
  min-width:26px !important;
  max-width:42px !important;
  display:inline-block !important;
  text-align:left !important;
  white-space:nowrap !important;
  font-variant-numeric:tabular-nums !important;
}


/* v86 — X reaction metrics in Body Edit */
.inspect-x-metrics{
  display:grid;
  gap:9px;
  padding:11px;
  margin:2px 0 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfaf8;
}
.inspect-x-metrics[hidden]{display:none !important}
.inspect-x-metrics-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.inspect-x-metrics-head>span{
  font-size:10.5px;
  font-weight:800;
  color:var(--text);
}
#randomizeXMetricsBtn{
  min-height:28px;
  padding:5px 9px !important;
  font-size:9px !important;
}
.inspect-x-metrics-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.inspect-x-metrics-grid label{
  display:grid;
  gap:5px;
  min-width:0;
}
.inspect-x-metrics-grid label>span{
  font-size:9px !important;
  font-weight:700;
  color:var(--muted);
}
.inspect-x-metrics-grid input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  text-align:center;
  padding:8px 5px !important;
  font-variant-numeric:tabular-nums;
}
.inspect-x-metrics>small{
  font-size:8.5px !important;
  line-height:1.45 !important;
  color:var(--muted);
}


/* v87 — newly added X post remains visible after the canvas re-fits */
.x-post.is-selected-item{
  position:relative;
}


/* v88 — clean centered workspace */
.stage{
  position:relative !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  overflow:auto !important;
  padding:34px 34px 42px !important;
  box-sizing:border-box !important;
}
.capture-shell{
  width:390px !important;
  min-width:390px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  margin:0 auto !important;
  padding:0 !important;
  overflow:visible !important;
}
.capture{
  width:390px !important;
  min-width:390px !important;
  max-width:390px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Remove old stage labels completely */
.stage-copy,
.stage-head,
#stageTitle,
#stageDesc{
  display:none !important;
}

/* Zoom controller */
.workspace-zoom{
  position:sticky;
  top:16px;
  align-self:flex-start;
  z-index:80;
  display:flex;
  align-items:center;
  gap:4px;
  margin-right:14px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 22px rgba(50,46,40,.09);
  backdrop-filter:blur(8px);
}
.workspace-zoom button{
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  font-size:18px !important;
  font-weight:700;
  cursor:pointer;
}
.workspace-zoom button:hover{
  background:#f1eee9;
}
.workspace-zoom .zoom-value{
  width:54px;
  font-size:9.5px !important;
  font-weight:800;
  color:var(--muted);
}
.workspace-zoom .zoom-value:hover{
  color:var(--text);
}

/* Center X visually, regardless of how many posts are added */
.capture[data-template="x"]{
  transform-origin:top center !important;
}

/* Mobile: keep controls compact */
@media(max-width:900px){
  .stage{
    padding:18px 10px 28px !important;
  }
  .workspace-zoom{
    position:fixed;
    right:12px;
    bottom:12px;
    top:auto;
    margin:0;
  }
}


/* v89 — zoom defaults to 100% with a separate reset button */
.workspace-zoom{
  gap:5px !important;
}
.workspace-zoom .zoom-value{
  width:52px !important;
  height:34px !important;
  display:grid !important;
  place-items:center !important;
  color:var(--muted) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  font-variant-numeric:tabular-nums !important;
}
.workspace-zoom .zoom-reset-btn{
  width:auto !important;
  min-width:48px !important;
  padding:0 10px !important;
  border-left:1px solid var(--line) !important;
  border-radius:8px !important;
  color:var(--muted) !important;
  font-size:9px !important;
  font-weight:700 !important;
}
.workspace-zoom .zoom-reset-btn:hover{
  color:var(--text) !important;
}

/* X alone sits slightly higher; other templates are untouched */
.capture[data-template="x"]{
  position:relative !important;
}


/* v90 — source tail alignment must be identical in workspace, preview and saved output */
.workspace-source-credit,
.export-source,
.clean-output .workspace-source-credit,
.clean-output .export-source{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  box-sizing:border-box !important;
}

.workspace-source-left{
  flex:1 1 auto !important;
  min-width:0 !important;
  text-align:left !important;
}

.workspace-source-right{
  flex:0 0 auto !important;
  margin-left:auto !important;
  text-align:right !important;
  justify-self:auto !important;
  white-space:nowrap !important;
}

.workspace-source-credit.source-left-hidden .workspace-source-right,
.export-source.source-left-hidden .workspace-source-right{
  margin-left:auto !important;
}


/* v91 — contextual guided help */
.help-guide-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:9990 !important;
  display:block !important;
  background:rgba(44,43,40,.54) !important;
  backdrop-filter:saturate(.55) !important;
}
.help-guide-backdrop[hidden]{display:none !important}

.help-guide-target{
  position:relative !important;
  z-index:9992 !important;
  outline:3px solid rgba(255,190,86,.98) !important;
  outline-offset:6px !important;
  border-radius:12px !important;
  box-shadow:
    0 0 0 9999px rgba(55,54,51,.12),
    0 0 0 7px rgba(255,255,255,.92),
    0 12px 34px rgba(30,28,24,.22) !important;
  filter:none !important;
  isolation:isolate !important;
}

/* Keep the selected real UI vivid while the rest of the page is muted. */
body.help-guide-open .help-guide-target,
body.help-guide-open .help-guide-target *{
  opacity:1 !important;
  filter:none !important;
}

.help-guide-card{
  position:fixed !important;
  z-index:9994 !important;
  box-sizing:border-box !important;
  padding:18px !important;
  border:1px solid rgba(225,218,207,.95) !important;
  border-radius:16px !important;
  background:#fffdfa !important;
  color:#282622 !important;
  box-shadow:0 18px 50px rgba(30,28,24,.24) !important;
}
.help-guide-kicker{
  margin-bottom:7px;
  color:#b8843c;
  font-size:8px !important;
  font-weight:800;
  letter-spacing:.14em;
}
.help-guide-card h2{
  margin:0 0 8px !important;
  font-size:16px !important;
  line-height:1.3 !important;
}
.help-guide-card p{
  margin:0 !important;
  color:#6e6961 !important;
  font-size:10.5px !important;
  line-height:1.65 !important;
}
.help-guide-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid #eee9e2;
}
.help-guide-actions>div{
  display:flex;
  gap:6px;
}
.help-guide-actions button{
  min-height:32px;
  padding:0 12px;
  border:1px solid #ded8cf;
  border-radius:9px;
  background:#fff;
  color:#514d47;
  font-size:9.5px !important;
  font-weight:700;
  cursor:pointer;
}
.help-guide-actions button:disabled{
  opacity:.35;
  cursor:default;
}
.help-guide-actions .help-guide-next{
  border-color:#2f2c28;
  background:#2f2c28;
  color:#fff;
}
.help-guide-actions .help-guide-skip{
  border-color:transparent;
  background:transparent;
  color:#8a847b;
  padding-left:2px;
}

/* old text-only help presentation is no longer used */
.help-modal,
.help-sections{
  display:none !important;
}


/* v92 — left panel merged into Body Edit */
@media(min-width:1181px){
  .app{
    grid-template-columns:minmax(0,1fr) 390px !important;
  }
  .inspector{
    width:390px !important;
    min-width:390px !important;
    max-width:390px !important;
  }
}
.sidebar{
  display:none !important;
}
.moved-sidebar-tools{
  display:grid;
  gap:14px;
  margin-bottom:16px;
}
.moved-sidebar-tools .tool-section{
  margin:0 !important;
  padding:13px !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  background:#fbfaf8 !important;
}
.moved-sidebar-tools .section-title{
  margin-bottom:10px !important;
}
.moved-sidebar-tools .template-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:7px !important;
}
.moved-sidebar-tools .template-card{
  min-height:58px !important;
}
.moved-sidebar-tools .chat-profile-grid{
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}
.edit-panel-divider{
  height:1px;
  margin:4px 0 16px;
  background:var(--line);
}

/* With no left panel, keep the workspace genuinely centered in the remaining stage. */
.stage{
  grid-column:1 !important;
  justify-content:center !important;
}
.inspector{
  grid-column:2 !important;
}

/* v92 — zoom must never be overridden by older transform:none rules */
.capture{
  transform-origin:top center !important;
  will-change:transform;
}


/* v93 — left-side quick tools */
.stage{
  position:relative !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:34px 34px 72px 150px !important;
  box-sizing:border-box !important;
}

.stage-left-tools{
  position:sticky !important;
  top:28px !important;
  left:22px !important;
  align-self:flex-start !important;
  justify-self:flex-start !important;
  z-index:90 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:10px !important;

  width:max-content !important;
  height:max-content !important;
  margin-right:auto !important;
}

/* Slot / Help now live on the left. */
.stage-left-tools .utility-dock{
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  top:auto !important;

  display:flex !important;
  flex-direction:row !important;
  gap:7px !important;
  margin:0 !important;
}
.stage-left-tools .utility-dock-btn{
  width:52px !important;
  height:52px !important;
}

/* Zoom sits directly beneath them. */
.stage-left-tools .workspace-zoom{
  position:static !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  display:grid !important;
  grid-template-columns:34px 50px 34px !important;
  gap:4px !important;

  margin:0 !important;
  padding:5px !important;
  border:1px solid var(--line) !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.95) !important;
  box-shadow:0 8px 22px rgba(50,46,40,.08) !important;
}
.stage-left-tools .workspace-zoom .zoom-reset-btn{
  grid-column:1 / -1 !important;
  width:100% !important;
  min-width:0 !important;
  height:28px !important;
  border-left:0 !important;
  border-top:1px solid var(--line) !important;
  margin-top:2px !important;
  padding:0 !important;
}
.stage-left-tools .workspace-zoom .zoom-value{
  width:50px !important;
}

/* Center the actual workspace in the usable area. */
.capture-shell{
  margin:0 auto !important;
  width:390px !important;
  min-width:390px !important;
  overflow:visible !important;
  box-sizing:content-box !important;
}

/* X needs real scrollable space below scaled content. */
.capture[data-template="x"]{
  overflow:visible !important;
}
.stage:has(.capture[data-template="x"]){
  padding-bottom:120px !important;
}

/* Mobile/tablet */
@media(max-width:1180px){
  .stage{
    padding-left:110px !important;
  }
}
@media(max-width:900px){
  .stage{
    padding:18px 12px 90px !important;
  }
  .stage-left-tools{
    position:fixed !important;
    left:12px !important;
    bottom:12px !important;
    top:auto !important;
    flex-direction:row !important;
    align-items:flex-end !important;
  }
  .stage-left-tools .utility-dock{
    flex-direction:row !important;
  }
  .stage-left-tools .workspace-zoom{
    grid-template-columns:30px 46px 30px !important;
  }
}


/* v94 — true centered workspace + neat bottom-left tool dock */

/* The workspace must be centered independently of the quick tools. */
.stage{
  position:relative !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;

  /* remove the old left-side reservation that pushed the canvas right */
  padding:34px 34px 110px !important;
  box-sizing:border-box !important;
}

.capture-shell{
  width:390px !important;
  min-width:390px !important;
  max-width:390px !important;
  margin:0 auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  justify-self:center !important;
  align-self:flex-start !important;
}

/* Bottom-left floating control card */
.stage-left-tools{
  position:fixed !important;
  left:26px !important;
  bottom:24px !important;
  top:auto !important;

  z-index:95 !important;
  width:132px !important;
  margin:0 !important;
  padding:8px !important;

  display:grid !important;
  grid-template-columns:1fr !important;
  gap:7px !important;

  border:1px solid var(--line) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 12px 30px rgba(46,42,37,.12) !important;
  backdrop-filter:blur(10px) !important;
}

/* Slot + Help: same size and aligned */
.stage-left-tools .utility-dock{
  position:static !important;
  inset:auto !important;

  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:6px !important;

  width:100% !important;
  margin:0 !important;
}

.stage-left-tools .utility-dock-btn{
  width:100% !important;
  height:48px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:5px 3px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;

  border-radius:10px !important;
}

.stage-left-tools .utility-dock-icon{
  line-height:1 !important;
}
.stage-left-tools .utility-dock-btn > span:last-child{
  font-size:8px !important;
  line-height:1 !important;
}

/* Zoom bar beneath Slot / Help, same overall width */
.stage-left-tools .workspace-zoom{
  position:static !important;
  inset:auto !important;

  width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:4px !important;

  display:grid !important;
  grid-template-columns:30px minmax(0,1fr) 30px !important;
  gap:3px !important;

  border:1px solid var(--line) !important;
  border-radius:11px !important;
  background:#faf9f7 !important;
  box-shadow:none !important;
}

.stage-left-tools .workspace-zoom button{
  width:30px !important;
  height:30px !important;
  min-width:0 !important;
  padding:0 !important;
  border-radius:8px !important;
  font-size:15px !important;
}

.stage-left-tools .workspace-zoom .zoom-value{
  width:auto !important;
  min-width:0 !important;
  height:30px !important;
  font-size:8.5px !important;
}

.stage-left-tools .workspace-zoom .zoom-reset-btn{
  grid-column:1 / -1 !important;
  width:100% !important;
  height:27px !important;
  min-width:0 !important;
  margin:1px 0 0 !important;
  padding:0 !important;

  border:0 !important;
  border-top:1px solid var(--line) !important;
  border-radius:0 0 7px 7px !important;

  background:transparent !important;
  font-size:8px !important;
}

/* X still gets enough real bottom scroll space, but remains horizontally centered. */
.stage:has(.capture[data-template="x"]){
  padding-left:34px !important;
  padding-right:34px !important;
  padding-bottom:140px !important;
}

/* At narrower desktop widths keep the dock compact without shifting the canvas. */
@media(max-width:1180px){
  .stage{
    padding-left:24px !important;
    padding-right:24px !important;
  }
  .stage-left-tools{
    left:14px !important;
    bottom:14px !important;
    width:122px !important;
  }
}

/* Mobile: compact bottom bar, canvas remains centered. */
@media(max-width:900px){
  .stage{
    padding:18px 10px 100px !important;
  }
  .stage-left-tools{
    position:fixed !important;
    left:10px !important;
    bottom:10px !important;
    width:118px !important;
    display:grid !important;
  }
}


/* v95 — export/preview site credit is pinned to the right edge */
.export-source{
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-height:30px !important;
  box-sizing:border-box !important;
}
.export-source .workspace-source-left{
  position:absolute !important;
  left:11px !important;
  right:auto !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  max-width:68% !important;
  text-align:left !important;
}
.export-source .workspace-source-right{
  position:absolute !important;
  right:11px !important;
  left:auto !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  text-align:right !important;
  white-space:nowrap !important;
}

/* Keep live workspace credit unchanged. */
.capture:not(.clean-output) > .workspace-source-credit:not(.export-source) .workspace-source-right{
  position:static !important;
  margin-left:auto !important;
}


/* v96 — square outer template frames everywhere
   Keep internal UI (message bubbles, inputs, cards) rounded; only the full template frame becomes rectangular. */
.capture,
.clean-output,
#previewCapture{
  border-radius:0 !important;
  overflow:visible !important;
}

.x-page,
.ig-page,
.dm-page,
.kakao-page,
.clean-output .x-page,
.clean-output .ig-page,
.clean-output .dm-page,
.clean-output .kakao-page,
#previewCapture .x-page,
#previewCapture .ig-page,
#previewCapture .dm-page,
#previewCapture .kakao-page{
  border-radius:0 !important;
}

/* Remove the rounded tail corners that left empty transparent/white wedges. */
.workspace-source-credit,
.export-source,
.capture > .x-page + .workspace-source-credit,
.capture > .ig-page + .workspace-source-credit,
.capture > .dm-page + .workspace-source-credit,
.capture > .kakao-page + .workspace-source-credit,
.clean-output .workspace-source-credit,
.clean-output .export-source{
  border-radius:0 !important;
}

/* Ensure preview/export occupies the complete rectangular width with no corner gaps. */
.preview-modal-body #previewMount,
.preview-modal-body #previewMount .capture,
.clean-output{
  background-clip:border-box !important;
}
.clean-output > .x-page,
.clean-output > .ig-page,
.clean-output > .dm-page,
.clean-output > .kakao-page,
#previewCapture > .x-page,
#previewCapture > .ig-page,
#previewCapture > .dm-page,
#previewCapture > .kakao-page{
  width:100% !important;
  box-sizing:border-box !important;
}

/* Source tail: make commission credit as crisp/readable as the Dearlog credit. */
.workspace-source-credit{
  color:#746f67 !important;
  opacity:1 !important;
  font-weight:500 !important;
  -webkit-font-smoothing:antialiased !important;
  text-rendering:geometricPrecision !important;
}
.workspace-source-left,
.export-source .workspace-source-left{
  color:#746f67 !important;
  opacity:1 !important;
  font-weight:500 !important;
}
.workspace-source-right,
.export-source .workspace-source-right{
  color:#746f67 !important;
  opacity:1 !important;
  font-weight:500 !important;
}

/* html2canvas/export needs explicit opacity/color inheritance. */
.clean-output .workspace-source-left,
.clean-output .workspace-source-right,
.clean-output .export-source .workspace-source-left,
.clean-output .export-source .workspace-source-right{
  color:#746f67 !important;
  opacity:1 !important;
  font-weight:500 !important;
}


/* v97 — quoted original profile controls */
.inspect-quote-profile{
  display:grid;
  gap:10px;
  padding:12px;
  margin:2px 0 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfaf8;
}
.inspect-quote-profile[hidden]{
  display:none !important;
}
.inspect-quote-profile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:1px;
}
.inspect-quote-profile-head>span{
  font-size:10.5px;
  font-weight:800;
  color:var(--text);
}
.inspect-quote-profile-head>small{
  font-size:8px !important;
  color:var(--muted);
}
.inspect-quote-profile .field{
  margin-bottom:0 !important;
}
.inspect-quote-profile .inspect-post-avatar{
  margin-top:2px;
}
.inspect-quote-profile .inspect-post-avatar-row{
  align-items:center;
}
#inspectQuoteAvatarPreview{
  width:46px;
  height:46px;
  min-width:46px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--line);
  background:#f3f0eb;
}


/* v98 — quoted original text editor */
#inspectQuoteBody{
  min-height:86px !important;
  resize:vertical !important;
  line-height:1.55 !important;
}