@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');
.css-dialog{width:min(760px,92vw)}.platform-select{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;margin:18px 0 7px;color:#d6d2e0;font-size:12px}.platform-select select{width:100%;padding:9px 11px;background:#171820;border:1px solid #444557;border-radius:7px;color:#ece9f5;font:12px Pretendard}.platform-status{display:block;margin:0 0 12px;color:#a9a3bd}#obs-css{display:block;width:100%;min-height:310px;resize:vertical;border:1px solid #424354;border-radius:8px;background:#12131a;color:#d8d5e4;padding:14px;font:10px/1.55 'DM Mono',monospace;white-space:pre;tab-size:2}.css-actions{display:flex;justify-content:flex-end;margin:10px 0}.embed-note{display:block;line-height:1.55}
:root{color-scheme:dark;font-family:Pretendard,Arial,sans-serif;background:#10111a;color:#f4f2ff}*{box-sizing:border-box}body{margin:0;min-width:1000px}.studio{display:grid;grid-template-columns:310px 1fr;min-height:100vh}.controls{background:#171822;border-right:1px solid #292a35;padding:22px 18px 18px;overflow:auto;max-height:100vh}.brand{display:flex;gap:10px;align-items:center;padding:0 6px 22px}.brand-mark{display:grid;place-items:center;width:33px;height:33px;border:1px solid #b9a6ff;border-radius:12px;color:#d9d1ff;font-size:23px}.brand strong{font-size:17px;letter-spacing:-.4px}.brand small{display:block;font-family:'DM Mono';font-size:8px;letter-spacing:1.2px;color:#858398;margin-top:3px}.project-name{display:flex;align-items:center;gap:8px;background:#20212c;border:1px solid #2c2d3a;border-radius:8px;padding:8px 10px;margin-bottom:20px}.project-name input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#c9c7d5;font-size:12px}.status-dot{width:6px;height:6px;border-radius:50%;background:#7ee7c3}.tabs{display:flex;border-bottom:1px solid #2c2d39;margin:0 -2px 20px}.tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:0 0 11px;color:#807e92;font-size:12px;cursor:pointer}.tab.active{color:#d7ccff;border-color:#a78bfa}.tab-panel{display:none}.tab-panel.active{display:block}h2{font-size:12px;margin:22px 0 12px;color:#e4e2ec;letter-spacing:-.2px}.tab-panel h2:first-child{margin-top:0}.preset-grid,.frame-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.preset,.frame-choice{background:#20212b;border:1px solid #30313d;color:#b9b7c8;border-radius:8px;cursor:pointer;text-align:left;font-size:11px;padding:9px}.preset span{display:block;color:#cbbdff;font-size:16px;margin-bottom:4px}.preset.selected,.frame-choice.selected{border-color:#a78bfa;background:#29253c;color:#f0ecff}.frame-choice{text-align:center;padding:7px 4px}.frame-choice span{display:block;margin-top:4px;font-size:10px}.frame-mini{display:block;margin:auto;width:40px;height:23px;border:1px solid #817ca1;border-radius:5px;background:#333445}.frame-mini.outline{background:transparent;border:2px solid #b5a8ef}.frame-mini.bubble{border-radius:12px 12px 12px 2px}.frame-mini.notebook{border-radius:1px;background:repeating-linear-gradient(#333445 0 5px,#858198 6px 7px)}.frame-mini.retro{border-radius:0;box-shadow:3px 3px 0 #5eead4}.frame-mini.soft{border-radius:14px;background:#615b78}.frame-mini.neon-glow{border:2px solid #00f0ff;background:#0d0e17;box-shadow:0 0 8px #00f0ff,inset 0 0 4px rgba(0,240,255,0.4);border-radius:6px}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title h2{margin-bottom:12px}.reset-small{border:0;background:none;color:#8d88a4;font-size:10px;cursor:pointer}.control{display:block;margin:11px 0}.control>span{display:flex;justify-content:space-between;color:#b7b5c4;font-size:11px;margin-bottom:7px}.control b{color:#858297;font-family:'DM Mono';font-size:10px;font-weight:400}.color-control>div{display:flex;align-items:center;gap:7px}.color-control input[type=color]{width:29px;height:25px;border:0;border-radius:5px;padding:0;background:none;cursor:pointer}.color-control code{font-family:'DM Mono';font-size:10px;color:#8f8ca0;width:57px}.color-control input[type=range]{flex:1}.color-control b{font-family:'DM Mono';font-size:10px;color:#8f8ca0}input[type=range]{appearance:none;width:100%;height:3px;border-radius:4px;background:#444355;accent-color:#a78bfa;cursor:pointer}.select-control select{width:100%;padding:8px 9px;background:#22232d;color:#c9c6d6;border:1px solid #363744;border-radius:6px;font:11px Pretendard}.toggle{display:flex;align-items:center;justify-content:space-between}.toggle>span{margin:0}.toggle input{display:none}.toggle i{width:29px;height:17px;background:#454554;border-radius:12px;position:relative;transition:.2s}.toggle i:after{content:'';position:absolute;width:11px;height:11px;border-radius:50%;background:#a5a3b2;top:3px;left:3px;transition:.2s}.toggle input:checked+i{background:#8b73dd}.toggle input:checked+i:after{left:15px;background:white}details{border-top:1px solid #2d2e39;margin-top:17px;padding-top:13px}summary{font-size:11px;color:#b9b6c7;display:flex;justify-content:space-between;cursor:pointer}.hint{font-size:11px;line-height:1.55;color:#898698;margin:-3px 0 13px}.hint.warning{margin-top:15px;color:#bda785}.upload{height:85px;border:1px dashed #59556d;border-radius:8px;display:grid;place-items:center;color:#aaa5bf;font-size:11px;cursor:pointer;margin-bottom:11px}.upload span{font-size:20px}.upload input{display:none}.character-thumb{min-height:28px;font-size:10px;color:#858294;text-align:center}.character-thumb img{height:65px;max-width:100%;object-fit:contain}.character-thumb button{display:block;margin:3px auto 12px;background:none;border:0;color:#c99ba8;font-size:10px;cursor:pointer}.ai-card{display:flex;gap:8px;padding:10px;border-radius:8px;background:#242337;margin-top:18px}.ai-card>span{color:#d8c5ff}.ai-card strong{font-size:11px}.ai-card p{font-size:9px;color:#9995a9;margin:3px 0}.ai-card button{margin-left:auto;background:none;border:0;color:#777388;font-size:9px}.save-row{display:flex;justify-content:space-between;padding:20px 2px 0;color:#777487;font-size:10px}.ghost{background:transparent;border:1px solid #41414d;color:#c5c2d0;border-radius:7px;padding:9px 12px;font:11px Pretendard;cursor:pointer}.workspace{padding:34px 48px 22px;min-width:650px;background:radial-gradient(circle at 80% 10%,#20213a 0,transparent 28%),#10111a;display:flex;flex-direction:column}.workspace header{display:flex;justify-content:space-between;align-items:center;margin-bottom:29px}.eyebrow{font:10px 'DM Mono';letter-spacing:1.4px;color:#8f88a8}h1{font-size:25px;letter-spacing:-1px;margin:7px 0 0}h1 em{font-style:normal;color:#bea8ff}.header-actions{display:flex;gap:8px}.primary{background:#a78bfa;border:0;border-radius:7px;padding:10px 14px;color:#171426;font:600 12px Pretendard;cursor:pointer}.primary span{font-size:15px;margin-left:4px}.preview-toolbar{display:flex;gap:8px;align-items:center;height:34px;color:#9794a6;font-size:10px}.checker-icon{font-size:14px}.preview-toolbar>div{margin-left:auto}.zoom{border:0;background:transparent;color:#777486;padding:4px 7px;font:10px 'DM Mono';cursor:pointer}.zoom.selected{color:#d8d4e5;background:#282936;border-radius:4px}.stage{flex:1;min-height:580px;border:1px solid #2b2d38;border-radius:12px;background-color:#191a24;background-image:linear-gradient(45deg,#20212c 25%,transparent 25%),linear-gradient(-45deg,#20212c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#20212c 75%),linear-gradient(-45deg,transparent 75%,#20212c 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;position:relative;overflow:hidden;display:grid;place-items:center}.preview{transition:transform .2s;width:min(100%,750px)}.workspace footer{display:flex;justify-content:space-between;color:#6e6c7d;font:10px 'DM Mono';padding-top:15px}.chat-wrap{width:var(--width);max-width:90vw;min-height:420px;padding:22px;background:transparent;border-radius:16px;position:relative;color:var(--text);font-family:var(--font);text-align:var(--align);box-shadow:0 15px 50px #0003}.chat-wrap-bg{position:absolute;inset:0;background:var(--canvas);border-radius:inherit;z-index:-2;pointer-events:none}.chat-list{display:flex;flex-direction:column;gap:var(--gap);position:relative}.message{display:flex;align-items:flex-start;gap:7px;padding:var(--padding);border:var(--border) solid transparent;border-radius:var(--radius);background:var(--bubble);box-shadow:0 6px calc(var(--shadow) * 1px) #0003;animation:.45s message-rise}.message-content{min-width:0;font-size:var(--size);line-height:var(--line);letter-spacing:var(--tracking);font-weight:var(--weight);word-break:keep-all}.message-content strong{color:var(--name);font-weight:700;margin-right:8px;white-space:nowrap;display:inline-block}.badge{font-size:16px;line-height:1.3}.outline .message{border-color:var(--outline);box-shadow:none}.bubble .message{border-color:var(--outline);border-radius:var(--radius) var(--radius) var(--radius) 3px}.bubble .message:nth-child(even){border-radius:var(--radius) 3px var(--radius) var(--radius)}.notebook .message{border-radius:2px;border-left:4px solid var(--outline);background:color-mix(in srgb,var(--bubble),#fbf2cf 20%)}.retro .message{border-radius:0;border:2px solid var(--outline);box-shadow:4px 4px 0 var(--accent2)}.soft .message{border:var(--border) solid var(--outline);background:linear-gradient(120deg,var(--bubble),color-mix(in srgb,var(--accent),transparent 85%));box-shadow:0 8px 25px color-mix(in srgb,var(--accent),transparent 82%)}.neon-glow .message{border:var(--border) solid var(--outline)!important;box-shadow:0 0 16px var(--outline),inset 0 0 10px color-mix(in srgb,var(--outline),transparent 65%)!important;border-radius:var(--radius);background:var(--bubble)}.fade-old .message:not(.newest){opacity:.55}.safe-area{position:absolute;bottom:10px;right:13px;font:8px 'DM Mono';letter-spacing:1px;color:#ffffff55}.character{display:none;position:absolute;z-index:4;pointer-events:none}.character img{width:var(--char-size);max-width:none;transform:translate(var(--char-x),var(--char-y));filter:drop-shadow(0 8px 5px #0004)}.character:not(:empty){display:block}.character.left{left:-8%;bottom:8%}.character.right{right:-8%;bottom:8%;transform:scaleX(-1)}.character.top{top:-11%;left:50%;transform:translateX(-50%)}.character.bottom{bottom:-9%;left:50%;transform:translateX(-50%)}.character.none{display:none}@keyframes message-rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}.pop .message{animation-name:message-pop}.slide .message{animation-name:message-slide}.none .message{animation:none}@keyframes message-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}@keyframes message-slide{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}dialog{width:min(560px,90vw);background:#242532;border:1px solid #48465b;border-radius:14px;color:#eeeaf8;padding:30px;box-shadow:0 25px 90px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(3px)}dialog h2{font-size:18px;margin:12px 0 8px}dialog p{font-size:12px;line-height:1.7;color:#b7b3c5}.dialog-icon{font-size:26px;color:#c3adff}.close{position:absolute;right:13px;top:10px;border:0;background:none;color:#b8b5c5;font-size:22px;cursor:pointer}.link-box{display:flex;gap:7px;margin:20px 0 11px}.link-box input{min-width:0;flex:1;background:#161720;border:1px solid #3f4050;color:#c7c4d1;border-radius:6px;padding:10px;font:10px 'DM Mono'}.link-box button{background:#a78bfa;border:0;border-radius:6px;padding:0 13px;color:#171426;font:600 11px Pretendard;cursor:pointer}dialog small{font-size:10px;color:#858294}.overlay-mode{background:transparent;width:100vw;height:100vh;overflow:hidden}.overlay-mode .chat-wrap{width:100%;max-width:none;min-height:100vh;border-radius:0;background:var(--canvas)}

.frame-mini.kawaii-watercolor-ribbon-moon{width:48px;height:25px;border:0;border-radius:0;background:transparent url('./assets/frames/kawaii-pastel-watercolor-frame-v1.png') center/contain no-repeat;filter:drop-shadow(0 1px 1px #0002)}
.frame-mini[class*="concept-"],.frame-mini[class*="redraw-"],.frame-mini[class*="stretch-safe-"],.frame-mini[class*="stretch-filled-"],.frame-mini[class*="stretch-open-"],.frame-mini[class*="separated-"],.frame-mini[class*="basic-filled-"],.frame-mini[class*="basic-open-"]{width:48px;height:25px;border:0;border-radius:0;background-color:transparent;background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 1px 1px #0002)}
.kawaii-watercolor-ribbon-moon .chat-list{gap:calc(var(--gap) + 20px)}
.kawaii-watercolor-ribbon-moon .message{position:relative;isolation:isolate;min-height:96px;padding:max(var(--padding),28px) max(var(--padding),56px) max(var(--padding),24px);border:0;background:transparent!important;background-image:none!important;border-radius:0;box-shadow:none}
.kawaii-watercolor-ribbon-moon .message::before{content:"";position:absolute;inset:-20px -24px;z-index:2;pointer-events:none;border:1px solid transparent;border-image-source:url('./assets/frames/kawaii-pastel-watercolor-frame-v1.png');border-image-slice:300 360 220 360;border-image-width:62px 76px 48px 76px;border-image-repeat:stretch;filter:hue-rotate(var(--frame-hue,0deg)) saturate(var(--frame-saturation,100%)) brightness(var(--frame-brightness,100%))}
.kawaii-watercolor-ribbon-moon .message-fill{position:absolute;inset:0;z-index:0;border-radius:26px;background:radial-gradient(circle at 16% 18%,var(--watercolor-wash-a),transparent 44%),radial-gradient(circle at 84% 82%,var(--watercolor-wash-b),transparent 48%),var(--watercolor-fill);pointer-events:none}
.kawaii-watercolor-ribbon-moon .message-content,.kawaii-watercolor-ribbon-moon .badge,.kawaii-watercolor-ribbon-moon .ornament-layer{position:relative;z-index:3}
.concept-frame .chat-list{gap:calc(var(--gap) + 14px)}
.concept-frame .message{position:relative;border:0;background:transparent!important;box-shadow:none}
.concept-frame .message::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border:0;background:var(--art-frame-url) center/100% 100% no-repeat;filter:hue-rotate(var(--frame-hue,0deg)) saturate(var(--frame-saturation,100%)) brightness(var(--frame-brightness,100%))}
.concept-frame .message-fill{position:absolute;inset:var(--art-safe-top,20px) 10px var(--art-safe-bottom,18px);z-index:0;border-radius:24px;background:radial-gradient(circle at 16% 18%,var(--watercolor-wash-a),transparent 44%),radial-gradient(circle at 84% 82%,var(--watercolor-wash-b),transparent 48%),var(--watercolor-fill);pointer-events:none}
.concept-frame .message-content,.concept-frame .badge,.concept-frame .ornament-layer{position:relative;z-index:3}
.concept-frame .message-content{font-size:calc(var(--size) * var(--art-font-scale,1));line-height:var(--art-message-line,var(--line))}
.message-chat-content{position:relative;z-index:3;min-width:0;flex:1;transform:translate(var(--chat-start-x,0px),var(--chat-start-y,0px))}
.badge{display:inline-flex;align-items:center;justify-content:center;font-size:1.05em;line-height:1;margin-right:5px;vertical-align:-1.5px}
.stretch-safe-frame .chat-list{gap:calc(var(--gap) + 22px)}
.stretch-safe-frame .message{display:flex;align-items:flex-start;width:fit-content;max-width:100%;aspect-ratio:auto;min-width:var(--art-frame-min-width,220px);min-height:max(var(--art-frame-min-height,92px),88px);padding:max(var(--padding),var(--art-safe-top,25px)) max(var(--padding),var(--art-safe-right,70px)) max(var(--padding),var(--art-safe-bottom,23px)) max(var(--padding),var(--art-safe-left,70px))}
.stretch-safe-frame .message::before{inset:-14px -18px;border:1px solid transparent;background:none;border-image-source:var(--art-frame-url);border-image-slice:var(--art-frame-slice);border-image-width:var(--art-frame-top) var(--art-frame-right) var(--art-frame-bottom) var(--art-frame-left);border-image-repeat:stretch;z-index:2;pointer-events:none}
.stretch-safe-frame .message-fill{position:absolute;inset:var(--frame-fill-top,18px) var(--frame-fill-right,-4px) var(--frame-fill-bottom,13px) var(--frame-fill-left,-4px);border-radius:var(--frame-fill-radius,20px);background:var(--watercolor-fill);pointer-events:none;z-index:0}
.integrated-background-frame .message-fill{display:none}
.separated-frame .message-fill{position:absolute;inset:var(--frame-fill-top,0px) var(--frame-fill-right,4px) var(--frame-fill-bottom,0px) var(--frame-fill-left,4px);border:0!important;border-image:none!important;background:var(--watercolor-fill,var(--bubble))!important;border-radius:var(--frame-fill-radius,20px);pointer-events:none;z-index:0}
.separated-frame.hide-frame-bg .message-fill{display:none!important}


.frame-mini.bow-corner,.frame-mini.heart-stitch,.frame-mini.leaf-stitch,.frame-mini.cloud-stitch,.frame-mini.gold-sparkle,.frame-mini.violet-star{border:2px solid #8eb9e8;background:linear-gradient(135deg,transparent 74%,#b9d6f3 75% 84%,transparent 85%),#f7fbff;box-shadow:inset 0 0 0 2px #fff}.frame-mini.heart-stitch{border-style:dashed;border-color:#e99cae}.frame-mini.leaf-stitch{border-style:dashed;border-color:#85b694}.frame-mini.cloud-stitch{border-style:dashed;border-color:#82b1df}.frame-mini.gold-sparkle{border-style:dashed;border-color:#d6ab55}.frame-mini.violet-star{border-style:dashed;border-color:#9d83d2}
.bow-corner .message,.heart-stitch .message,.leaf-stitch .message,.cloud-stitch .message,.gold-sparkle .message,.violet-star .message{border:2px solid var(--outline);box-shadow:inset 0 0 0 3px var(--bubble),inset 0 0 0 4px color-mix(in srgb,var(--accent),transparent 38%),0 6px 18px #0002;background-color:var(--bubble);background-size:38px 38px}.bow-corner .message{background-image:radial-gradient(circle at calc(100% - 16px) 14px,var(--accent) 0 4px,transparent 5px),linear-gradient(45deg,transparent 46%,color-mix(in srgb,var(--accent),transparent 34%) 47% 53%,transparent 54%)}.heart-stitch .message{border-style:dashed;background-image:radial-gradient(circle at 12px 12px,color-mix(in srgb,var(--accent),transparent 82%) 0 3px,transparent 3.5px)}.leaf-stitch .message{border-style:dashed;background-image:radial-gradient(ellipse at 12px 15px,color-mix(in srgb,var(--accent),transparent 80%) 0 4px,transparent 4.5px)}.cloud-stitch .message{border-style:dashed;background-image:radial-gradient(ellipse at 13px 18px,color-mix(in srgb,var(--accent),transparent 84%) 0 7px,transparent 7.5px)}.gold-sparkle .message{border-style:dashed;background-image:linear-gradient(45deg,transparent 47%,color-mix(in srgb,var(--accent),transparent 76%) 48% 52%,transparent 53%)}.violet-star .message{border-style:dashed;background-image:radial-gradient(circle at 10px 10px,color-mix(in srgb,var(--accent),transparent 72%) 0 2px,transparent 2.5px),linear-gradient(45deg,transparent 48%,color-mix(in srgb,var(--accent2),transparent 70%) 49% 51%,transparent 52%)}

/* 10 New Aesthetic Frames */
/* 1. cat-ears-simple (실루엣 캣 - 고양이귀) */
.cat-ears-simple .message { border-color: var(--outline); border-radius: var(--radius); position: relative; }
.cat-ears-simple .message::before, .cat-ears-simple .message::after { content: ''; position: absolute; top: -12px; width: 20px; height: 14px; background: var(--bubble); border: var(--border) solid var(--outline); border-bottom: 0; border-radius: 6px 14px 0 0; z-index: 1; }
.cat-ears-simple .message::before { left: 18px; transform: rotate(-10deg); }
.cat-ears-simple .message::after { right: 18px; border-radius: 14px 6px 0 0; transform: rotate(10deg); }
.frame-mini.cat-ears-simple { position: relative; border-radius: 4px; border: 1px solid #b5a8ef; }
.frame-mini.cat-ears-simple::before, .frame-mini.cat-ears-simple::after { content: ''; position: absolute; top: -5px; width: 6px; height: 5px; background: #b5a8ef; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.frame-mini.cat-ears-simple::before { left: 4px; }
.frame-mini.cat-ears-simple::after { right: 4px; }

/* 2. mini-wings (엔젤 윙 - 양쪽 날개) */
.mini-wings .message { border-color: var(--outline); border-radius: var(--radius); position: relative; }
.mini-wings .message::before, .mini-wings .message::after { content: '🪽'; position: absolute; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.mini-wings .message::before { left: -22px; transform: translateY(-50%) scaleX(-1); }
.mini-wings .message::after { right: -22px; }
.frame-mini.mini-wings { position: relative; border-radius: 5px; border: 1px solid #e0e7ff; }
.frame-mini.mini-wings::before, .frame-mini.mini-wings::after { content: ''; position: absolute; top: 50%; width: 7px; height: 9px; background: #a5b4fc; border-radius: 50% 50% 50% 0; transform: translateY(-50%); }
.frame-mini.mini-wings::before { left: -4px; transform: translateY(-50%) scaleX(-1); }
.frame-mini.mini-wings::after { right: -4px; }

/* 3. chat-tail-left (메신저 꼬리 - 왼쪽) */
.chat-tail-left .message { margin-left: 12px; border-color: var(--outline); border-radius: var(--radius); position: relative; }
.chat-tail-left .message::before { content: ''; position: absolute; left: -12px; top: 18px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 12px solid var(--outline); pointer-events: none; }
.chat-tail-left .message::after { content: ''; position: absolute; left: -9px; top: 18px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 11px solid var(--bubble); pointer-events: none; }
.frame-mini.chat-tail-left { position: relative; border-radius: 4px; margin-left: 5px; }
.frame-mini.chat-tail-left::before { content: ''; position: absolute; left: -5px; top: 6px; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-right: 5px solid #817ca1; }

/* 4. chat-tail-right (메신저 꼬리 - 오른쪽) */
.chat-tail-right .message { margin-right: 12px; border-color: var(--outline); border-radius: var(--radius); position: relative; }
.chat-tail-right .message::before { content: ''; position: absolute; right: -12px; top: 18px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 12px solid var(--outline); pointer-events: none; }
.chat-tail-right .message::after { content: ''; position: absolute; right: -9px; top: 18px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 11px solid var(--bubble); pointer-events: none; }
.frame-mini.chat-tail-right { position: relative; border-radius: 4px; margin-right: 5px; }
.frame-mini.chat-tail-right::before { content: ''; position: absolute; right: -5px; top: 6px; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid #817ca1; }

/* 5. cyber-bevel (사이버 챔퍼 - SF 각진 테두리) */
.cyber-bevel .message { border-radius: 0; border: var(--border) solid var(--outline); clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); box-shadow: 0 0 12px color-mix(in srgb, var(--accent), transparent 75%); }
.frame-mini.cyber-bevel { border-radius: 0; clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px); border: 1.5px solid #00f0ff; }

/* 6. ticket-punch (빈티지 티켓 - 펀칭) */
.ticket-punch .message { border-style: dashed; border-color: var(--outline); border-radius: 6px; position: relative; }
.ticket-punch .message::before, .ticket-punch .message::after { content: ''; position: absolute; top: 50%; width: 14px; height: 14px; background: var(--canvas, #10111a); border: var(--border) solid var(--outline); border-radius: 50%; transform: translateY(-50%); pointer-events: none; }
.ticket-punch .message::before { left: -8px; }
.ticket-punch .message::after { right: -8px; }
.frame-mini.ticket-punch { border-style: dashed; position: relative; }
.frame-mini.ticket-punch::before, .frame-mini.ticket-punch::after { content: ''; position: absolute; top: 50%; width: 6px; height: 6px; background: #171822; border-radius: 50%; transform: translateY(-50%); }
.frame-mini.ticket-punch::before { left: -3px; }
.frame-mini.ticket-punch::after { right: -3px; }

/* 7. ribbon-badge (리본 태그) */
.ribbon-badge .message { border-color: var(--outline); border-radius: var(--radius); position: relative; }
.ribbon-badge .message::before { content: '🎀'; position: absolute; top: -14px; left: 16px; font-size: 20px; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
.frame-mini.ribbon-badge { position: relative; }
.frame-mini.ribbon-badge::before { content: ''; position: absolute; top: -3px; left: 5px; width: 6px; height: 6px; background: #f472b6; border-radius: 1px; }

/* 8. scallop-cloud (스캘럽 퐁퐁 구름) */
.scallop-cloud .message { border-color: var(--outline); border-radius: 26px 22px 26px 8px; position: relative; box-shadow: 0 6px 20px color-mix(in srgb, var(--accent), transparent 85%); }
.scallop-cloud .message::before { content: '☁️'; position: absolute; top: -12px; right: 18px; font-size: 16px; line-height: 1; pointer-events: none; }
.frame-mini.scallop-cloud { border-radius: 10px 8px 10px 3px; border: 1px solid #93c5fd; }

/* 9. bracket-focus (HUD 포커스 브래킷) */
.bracket-focus .message { border-radius: 4px; border-color: color-mix(in srgb, var(--outline), transparent 60%); position: relative; }
.bracket-focus .message::before { content: ''; position: absolute; top: -3px; left: -3px; width: 14px; height: 14px; border-top: 3px solid var(--accent); border-left: 3px solid var(--accent); pointer-events: none; }
.bracket-focus .message::after { content: ''; position: absolute; bottom: -3px; right: -3px; width: 14px; height: 14px; border-bottom: 3px solid var(--accent); border-right: 3px solid var(--accent); pointer-events: none; }
.frame-mini.bracket-focus { border-radius: 2px; position: relative; }
.frame-mini.bracket-focus::before { content: ''; position: absolute; top: -2px; left: -2px; width: 6px; height: 6px; border-top: 2px solid #f59e0b; border-left: 2px solid #f59e0b; }
.frame-mini.bracket-focus::after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 6px; height: 6px; border-bottom: 2px solid #f59e0b; border-right: 2px solid #f59e0b; }

/* 10. heart-corner (쁘띠 하트 테두리) */
.heart-corner .message { border-color: var(--outline); border-radius: var(--radius); position: relative; }
.heart-corner .message::after { content: '💖'; position: absolute; top: -12px; right: 14px; font-size: 18px; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
.frame-mini.heart-corner { position: relative; }
.frame-mini.heart-corner::after { content: ''; position: absolute; top: -3px; right: 3px; width: 5px; height: 5px; background: #f43f5e; border-radius: 50%; }

/* --- 5 New Aesthetic Stationery & Memo Frames --- */
/* 11. memo-stitch (스티치 다이어리 메모) */
.memo-stitch .message { border: var(--border) solid var(--outline); border-radius: var(--radius); position: relative; background: var(--bubble); padding: calc(var(--padding) + 2px) calc(var(--padding) + 4px); }
.memo-stitch .message::after { content: ''; position: absolute; inset: 5px; border: 1.5px dashed color-mix(in srgb, var(--outline), transparent 30%); border-radius: calc(var(--radius) - 3px); pointer-events: none; }
.frame-mini.memo-stitch { border-radius: 5px; border: 1px solid #817ca1; position: relative; }
.frame-mini.memo-stitch::after { content: ''; position: absolute; inset: 2px; border: 1px dashed #c0b8e6; border-radius: 3px; }

/* 12. washi-tape (마스킹 테이프 메모) */
.washi-tape .message { border: var(--border) solid var(--outline); border-radius: 8px; position: relative; background: var(--bubble); padding-top: calc(var(--padding) + 8px); margin-top: 10px; }
.washi-tape .message::before { content: ''; position: absolute; top: -11px; left: 24px; width: 62px; height: 18px; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent), transparent 25%) 0 6px, color-mix(in srgb, var(--accent2, #fef08a), transparent 25%) 6px 12px); border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 2px 4px rgba(0,0,0,0.15); transform: rotate(-1.5deg); pointer-events: none; z-index: 2; opacity: 0.94; }
.frame-mini.washi-tape { border-radius: 3px; border: 1px solid #817ca1; position: relative; }
.frame-mini.washi-tape::before { content: ''; position: absolute; top: -4px; left: 8px; width: 16px; height: 6px; background: #f472b6; transform: rotate(-2deg); }

/* 13. heart-clip (하트 클립 메모) */
.heart-clip .message { border: var(--border) solid var(--outline); border-radius: var(--radius); position: relative; background: var(--bubble); padding-top: calc(var(--padding) + 4px); padding-left: calc(var(--padding) + 8px); margin-top: 8px; }
.heart-clip .message::before { content: ''; position: absolute; top: -14px; left: 14px; width: 22px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30' fill='none' stroke='%23f43f5e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 28V12C12 7.5 16 7.5 16 11C16 14 12 18 12 18'/%3E%3Cpath d='M12 28V10C12 5 7 4 4.5 7C2 10 3 14 6 17L12 23L18 17C21 14 22 10 19.5 7C17 4 12 5 12 10'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.22)); pointer-events: none; z-index: 2; }
.frame-mini.heart-clip { border-radius: 4px; border: 1px solid #817ca1; position: relative; }
.frame-mini.heart-clip::before { content: ''; position: absolute; top: -4px; left: 5px; width: 6px; height: 8px; border: 1px solid #f43f5e; border-radius: 3px; }

/* 14. spiral-pad (스프링 바인더 노트) */
.spiral-pad .message { border: var(--border) solid var(--outline); border-radius: 6px 6px var(--radius) var(--radius); position: relative; background: var(--bubble); padding-top: calc(var(--padding) + 12px); margin-top: 8px; }
.spiral-pad .message::before { content: ''; position: absolute; top: -8px; left: 20px; right: 20px; height: 16px; background-image: repeating-linear-gradient(90deg, transparent 0 16px, var(--outline) 16px 18px, color-mix(in srgb, var(--outline), #fff 40%) 18px 20px, transparent 20px 26px); pointer-events: none; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }
.spiral-pad .message::after { content: ''; position: absolute; top: 4px; left: 20px; right: 20px; height: 5px; background-image: repeating-linear-gradient(90deg, transparent 0 16px, rgba(0,0,0,0.25) 16px 20px, transparent 20px 26px); border-radius: 3px; pointer-events: none; }
.frame-mini.spiral-pad { border-radius: 2px 2px 4px 4px; border: 1px solid #817ca1; position: relative; }
.frame-mini.spiral-pad::before { content: ''; position: absolute; top: -3px; left: 4px; right: 4px; height: 4px; background: repeating-linear-gradient(90deg, #b5a8ef 0 3px, transparent 3px 6px); }

/* 15. pill-banner (스티치 캡슐 배너) */
.pill-banner .message { border: var(--border) solid var(--outline); border-radius: 9999px; position: relative; background: var(--bubble); padding: calc(var(--padding) + 2px) calc(var(--padding) + 16px); }
.pill-banner .message::after { content: ''; position: absolute; inset: 4px; border: 1.5px dashed color-mix(in srgb, var(--outline), transparent 35%); border-radius: 9999px; pointer-events: none; }
.frame-mini.pill-banner { border-radius: 9999px; border: 1px solid #817ca1; position: relative; }
.frame-mini.pill-banner::after { content: ''; position: absolute; inset: 2px; border: 1px dashed #b5a8ef; border-radius: 9999px; }

/* --- 10 Themed Stationery Memo Frames (Corner Motifs) --- */
/* memo-ribbon (핑크 리본 메모) */
.memo-ribbon .message {
  border: var(--border) solid var(--outline);
  border-radius: var(--radius);
  position: relative;
  background: var(--bubble);
  outline: 1.5px dashed color-mix(in srgb, var(--outline), transparent 35%);
  outline-offset: -5px;
  padding-top: calc(var(--padding) + 6px); padding-left: calc(var(--padding) + 12px);
}
.memo-ribbon .message::before {
  content: '';
  position: absolute;
  top: -13px; left: 14px;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><path d='M16 16C12 11 6 10 5 14C4 18 10 19 16 16Z' fill='%23f472b6' stroke='%23be185d' stroke-width='1.8' stroke-linejoin='round'/><path d='M16 16C20 11 26 10 27 14C28 18 22 19 16 16Z' fill='%23f472b6' stroke='%23be185d' stroke-width='1.8' stroke-linejoin='round'/><path d='M14 17C12 21 8 26 7 28C10 27 13 25 15 20' fill='%23f472b6' stroke='%23be185d' stroke-width='1.8' stroke-linecap='round'/><path d='M18 17C20 21 24 26 25 28C22 27 19 25 17 20' fill='%23f472b6' stroke='%23be185d' stroke-width='1.8' stroke-linecap='round'/><circle cx='16' cy='16' r='3.5' fill='%23fbcfe8' stroke='%23be185d' stroke-width='1.8'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 2;
}
.frame-mini.memo-ribbon {
  border-radius: 4px;
  border: 1px solid #817ca1;
  position: relative;
  outline: 1px dashed #b5a8ef;
  outline-offset: -2px;
}
.frame-mini.memo-ribbon::before {
  content: '';
  position: absolute;
  top: -3px; left: 3px;
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><path d='M16 16C12 11 6 10 5 14C4 18 10 19 16 16Z' fill='%23f472b6' stroke='%23be185d' stroke-width='1.8' stroke-linejoin='round'/><path d='M16 16C20 11 26 10 27 14C28 18 22 19 16 16Z' fill='%23f472b6' stroke='%23be185d' stroke-width='1.8' stroke-linejoin='round'/><path d='M14 17C12 21 8 26 7 28C10 27 13 25 15 20' fill='%23f472b6' stroke='%23be185d' stroke-width='1.8' stroke-linecap='round'/><path d='M18 17C20 21 24 26 25 28C22 27 19 25 17 20' fill='%23f472b6' stroke='%23be185d' stroke-width='1.8' stroke-linecap='round'/><circle cx='16' cy='16' r='3.5' fill='%23fbcfe8' stroke='%23be185d' stroke-width='1.8'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
/* memo-bunny (빼꼼 토끼 메모) */
.memo-bunny .message {
  border: var(--border) solid var(--outline);
  border-radius: var(--radius);
  position: relative;
  background: var(--bubble);
  outline: 1.5px dashed color-mix(in srgb, var(--outline), transparent 35%);
  outline-offset: -5px;
  padding-right: calc(var(--padding) + 24px); padding-bottom: calc(var(--padding) + 4px);
}
.memo-bunny .message::after {
  content: '';
  position: absolute;
  bottom: -10px; right: 14px;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'><ellipse cx='13' cy='9' rx='3' ry='8' fill='%23ffffff' stroke='%2378716c' stroke-width='1.8'/><ellipse cx='13' cy='9' rx='1.6' ry='5' fill='%23fecdd3'/><ellipse cx='23' cy='9' rx='3' ry='8' fill='%23ffffff' stroke='%2378716c' stroke-width='1.8'/><ellipse cx='23' cy='9' rx='1.6' ry='5' fill='%23fecdd3'/><ellipse cx='18' cy='23' rx='12' ry='10' fill='%23ffffff' stroke='%2378716c' stroke-width='1.8'/><circle cx='14' cy='22' r='1.3' fill='%2344403c'/><circle cx='22' cy='22' r='1.3' fill='%2344403c'/><ellipse cx='11.5' cy='25' rx='1.8' ry='1.2' fill='%23fda4af'/><ellipse cx='24.5' cy='25' rx='1.8' ry='1.2' fill='%23fda4af'/><path d='M17 25Q18 26 19 25' stroke='%2378716c' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 2;
}
.frame-mini.memo-bunny {
  border-radius: 4px;
  border: 1px solid #817ca1;
  position: relative;
  outline: 1px dashed #b5a8ef;
  outline-offset: -2px;
}
.frame-mini.memo-bunny::after {
  content: '';
  position: absolute;
  bottom: -3px; right: 3px;
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'><ellipse cx='13' cy='9' rx='3' ry='8' fill='%23ffffff' stroke='%2378716c' stroke-width='1.8'/><ellipse cx='13' cy='9' rx='1.6' ry='5' fill='%23fecdd3'/><ellipse cx='23' cy='9' rx='3' ry='8' fill='%23ffffff' stroke='%2378716c' stroke-width='1.8'/><ellipse cx='23' cy='9' rx='1.6' ry='5' fill='%23fecdd3'/><ellipse cx='18' cy='23' rx='12' ry='10' fill='%23ffffff' stroke='%2378716c' stroke-width='1.8'/><circle cx='14' cy='22' r='1.3' fill='%2344403c'/><circle cx='22' cy='22' r='1.3' fill='%2344403c'/><ellipse cx='11.5' cy='25' rx='1.8' ry='1.2' fill='%23fda4af'/><ellipse cx='24.5' cy='25' rx='1.8' ry='1.2' fill='%23fda4af'/><path d='M17 25Q18 26 19 25' stroke='%2378716c' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
/* memo-cat (치즈 냥이 메모) */
.memo-cat .message {
  border: var(--border) solid var(--outline);
  border-radius: var(--radius);
  position: relative;
  background: var(--bubble);
  outline: 1.5px dashed color-mix(in srgb, var(--outline), transparent 35%);
  outline-offset: -5px;
  padding-right: calc(var(--padding) + 24px); padding-bottom: calc(var(--padding) + 4px);
}
.memo-cat .message::after {
  content: '';
  position: absolute;
  bottom: -10px; right: 14px;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'><path d='M8 18L10 9L17 14Z' fill='%23fef08a' stroke='%2378350f' stroke-width='1.8' stroke-linejoin='round'/><path d='M10 16L11.5 11L15 14Z' fill='%23fecdd3'/><path d='M28 18L26 9L19 14Z' fill='%23fef08a' stroke='%2378350f' stroke-width='1.8' stroke-linejoin='round'/><path d='M26 16L24.5 11L21 14Z' fill='%23fecdd3'/><ellipse cx='18' cy='22' rx='12' ry='9' fill='%23fffbeb' stroke='%2378350f' stroke-width='1.8'/><circle cx='14' cy='21' r='1.3' fill='%2378350f'/><circle cx='22' cy='21' r='1.3' fill='%2378350f'/><ellipse cx='11' cy='24' rx='1.8' ry='1.2' fill='%23fca5a5'/><ellipse cx='25' cy='24' rx='1.8' ry='1.2' fill='%23fca5a5'/><path d='M16.5 24Q18 25.5 19.5 24' stroke='%2378350f' stroke-width='1.4' stroke-linecap='round'/><line x1='6' y1='21' x2='10' y2='22' stroke='%2378350f' stroke-width='1.3' stroke-linecap='round'/><line x1='30' y1='21' x2='26' y2='22' stroke='%2378350f' stroke-width='1.3' stroke-linecap='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 2;
}
.frame-mini.memo-cat {
  border-radius: 4px;
  border: 1px solid #817ca1;
  position: relative;
  outline: 1px dashed #b5a8ef;
  outline-offset: -2px;
}
.frame-mini.memo-cat::after {
  content: '';
  position: absolute;
  bottom: -3px; right: 3px;
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'><path d='M8 18L10 9L17 14Z' fill='%23fef08a' stroke='%2378350f' stroke-width='1.8' stroke-linejoin='round'/><path d='M10 16L11.5 11L15 14Z' fill='%23fecdd3'/><path d='M28 18L26 9L19 14Z' fill='%23fef08a' stroke='%2378350f' stroke-width='1.8' stroke-linejoin='round'/><path d='M26 16L24.5 11L21 14Z' fill='%23fecdd3'/><ellipse cx='18' cy='22' rx='12' ry='9' fill='%23fffbeb' stroke='%2378350f' stroke-width='1.8'/><circle cx='14' cy='21' r='1.3' fill='%2378350f'/><circle cx='22' cy='21' r='1.3' fill='%2378350f'/><ellipse cx='11' cy='24' rx='1.8' ry='1.2' fill='%23fca5a5'/><ellipse cx='25' cy='24' rx='1.8' ry='1.2' fill='%23fca5a5'/><path d='M16.5 24Q18 25.5 19.5 24' stroke='%2378350f' stroke-width='1.4' stroke-linecap='round'/><line x1='6' y1='21' x2='10' y2='22' stroke='%2378350f' stroke-width='1.3' stroke-linecap='round'/><line x1='30' y1='21' x2='26' y2='22' stroke='%2378350f' stroke-width='1.3' stroke-linecap='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
/* memo-tulip (튤립 화원 메모) */
.memo-tulip .message {
  border: var(--border) solid var(--outline);
  border-radius: var(--radius);
  position: relative;
  background: var(--bubble);
  outline: 1.5px dashed color-mix(in srgb, var(--outline), transparent 35%);
  outline-offset: -5px;
  padding-right: calc(var(--padding) + 22px); padding-bottom: calc(var(--padding) + 4px);
}
.memo-tulip .message::after {
  content: '';
  position: absolute;
  bottom: -8px; right: 16px;
  width: 28px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36' fill='none'><path d='M16 18V33' stroke='%234ade80' stroke-width='2.4' stroke-linecap='round'/><path d='M16 28Q22 26 24 20Q18 22 16 28Z' fill='%2386efac' stroke='%2322c55e' stroke-width='1.6' stroke-linejoin='round'/><path d='M11 16C8 13 8 7 12 4C14 7 15 13 16 17C14 17 12 17 11 16Z' fill='%23f43f5e' stroke='%239f1239' stroke-width='1.8' stroke-linejoin='round'/><path d='M21 16C24 13 24 7 20 4C18 7 17 13 16 17C18 17 20 17 21 16Z' fill='%23f43f5e' stroke='%239f1239' stroke-width='1.8' stroke-linejoin='round'/><path d='M12 5C14 3 18 3 20 5C19 10 17 16 16 18C15 16 13 10 12 5Z' fill='%23fb7185' stroke='%239f1239' stroke-width='1.8' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 2;
}
.frame-mini.memo-tulip {
  border-radius: 4px;
  border: 1px solid #817ca1;
  position: relative;
  outline: 1px dashed #b5a8ef;
  outline-offset: -2px;
}
.frame-mini.memo-tulip::after {
  content: '';
  position: absolute;
  bottom: -3px; right: 3px;
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36' fill='none'><path d='M16 18V33' stroke='%234ade80' stroke-width='2.4' stroke-linecap='round'/><path d='M16 28Q22 26 24 20Q18 22 16 28Z' fill='%2386efac' stroke='%2322c55e' stroke-width='1.6' stroke-linejoin='round'/><path d='M11 16C8 13 8 7 12 4C14 7 15 13 16 17C14 17 12 17 11 16Z' fill='%23f43f5e' stroke='%239f1239' stroke-width='1.8' stroke-linejoin='round'/><path d='M21 16C24 13 24 7 20 4C18 7 17 13 16 17C18 17 20 17 21 16Z' fill='%23f43f5e' stroke='%239f1239' stroke-width='1.8' stroke-linejoin='round'/><path d='M12 5C14 3 18 3 20 5C19 10 17 16 16 18C15 16 13 10 12 5Z' fill='%23fb7185' stroke='%239f1239' stroke-width='1.8' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
/* memo-blossom (보라 꽃송이 메모) */
.memo-blossom .message {
  border: var(--border) solid var(--outline);
  border-radius: var(--radius);
  position: relative;
  background: var(--bubble);
  outline: 1.5px dashed color-mix(in srgb, var(--outline), transparent 35%);
  outline-offset: -5px;
  padding-top: calc(var(--padding) + 6px); padding-left: calc(var(--padding) + 12px);
}
.memo-blossom .message::before {
  content: '';
  position: absolute;
  top: -12px; left: 14px;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><circle cx='16' cy='10' r='5' fill='%23c084fc' stroke='%236b21a8' stroke-width='1.6'/><circle cx='10' cy='15' r='5' fill='%23c084fc' stroke='%236b21a8' stroke-width='1.6'/><circle cx='22' cy='15' r='5' fill='%23c084fc' stroke='%236b21a8' stroke-width='1.6'/><circle cx='12' cy='22' r='5' fill='%23c084fc' stroke='%236b21a8' stroke-width='1.6'/><circle cx='20' cy='22' r='5' fill='%23c084fc' stroke='%236b21a8' stroke-width='1.6'/><circle cx='16' cy='16' r='4' fill='%23fde047' stroke='%236b21a8' stroke-width='1.6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 2;
}
.frame-mini.memo-blossom {
  border-radius: 4px;
  border: 1px solid #817ca1;
  position: relative;
  outline: 1px dashed #b5a8ef;
  outline-offset: -2px;
}
.frame-mini.memo-blossom::before {
  content: '';
  position: absolute;
  top: -3px; left: 3px;
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><circle cx='16' cy='10' r='5' fill='%23c084fc' stroke='%236b21a8' stroke-width='1.6'/><circle cx='10' cy='15' r='5' fill='%23c084fc' stroke='%236b21a8' stroke-width='1.6'/><circle cx='22' cy='15' r='5' fill='%23c084fc' stroke='%236b21a8' stroke-width='1.6'/><circle cx='12' cy='22' r='5' fill='%23c084fc' stroke='%236b21a8' stroke-width='1.6'/><circle cx='20' cy='22' r='5' fill='%23c084fc' stroke='%236b21a8' stroke-width='1.6'/><circle cx='16' cy='16' r='4' fill='%23fde047' stroke='%236b21a8' stroke-width='1.6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
/* memo-strawberry (달콤 딸기 메모) */
.memo-strawberry .message {
  border: var(--border) solid var(--outline);
  border-radius: var(--radius);
  position: relative;
  background: var(--bubble);
  outline: 1.5px dashed color-mix(in srgb, var(--outline), transparent 35%);
  outline-offset: -5px;
  padding-right: calc(var(--padding) + 22px); padding-bottom: calc(var(--padding) + 4px);
}
.memo-strawberry .message::after {
  content: '';
  position: absolute;
  bottom: -8px; right: 14px;
  width: 28px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36' fill='none'><path d='M16 8C7 8 6 18 9 26C12 33 16 34 16 34C16 34 20 33 23 26C26 18 25 8 16 8Z' fill='%23ef4444' stroke='%23991b1b' stroke-width='1.8' stroke-linejoin='round'/><path d='M12 6C13 9 16 8 16 8C16 8 19 9 20 6C18 7 17 4 16 2C15 4 14 7 12 6Z' fill='%234ade80' stroke='%23166534' stroke-width='1.6' stroke-linejoin='round'/><circle cx='12' cy='15' r='1' fill='%23fef08a'/><circle cx='17' cy='13' r='1' fill='%23fef08a'/><circle cx='20' cy='17' r='1' fill='%23fef08a'/><circle cx='14' cy='20' r='1' fill='%23fef08a'/><circle cx='18' cy='23' r='1' fill='%23fef08a'/><circle cx='15' cy='27' r='1' fill='%23fef08a'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 2;
}
.frame-mini.memo-strawberry {
  border-radius: 4px;
  border: 1px solid #817ca1;
  position: relative;
  outline: 1px dashed #b5a8ef;
  outline-offset: -2px;
}
.frame-mini.memo-strawberry::after {
  content: '';
  position: absolute;
  bottom: -3px; right: 3px;
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36' fill='none'><path d='M16 8C7 8 6 18 9 26C12 33 16 34 16 34C16 34 20 33 23 26C26 18 25 8 16 8Z' fill='%23ef4444' stroke='%23991b1b' stroke-width='1.8' stroke-linejoin='round'/><path d='M12 6C13 9 16 8 16 8C16 8 19 9 20 6C18 7 17 4 16 2C15 4 14 7 12 6Z' fill='%234ade80' stroke='%23166534' stroke-width='1.6' stroke-linejoin='round'/><circle cx='12' cy='15' r='1' fill='%23fef08a'/><circle cx='17' cy='13' r='1' fill='%23fef08a'/><circle cx='20' cy='17' r='1' fill='%23fef08a'/><circle cx='14' cy='20' r='1' fill='%23fef08a'/><circle cx='18' cy='23' r='1' fill='%23fef08a'/><circle cx='15' cy='27' r='1' fill='%23fef08a'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
/* memo-bear (말랑 곰돌이 메모) */
.memo-bear .message {
  border: var(--border) solid var(--outline);
  border-radius: var(--radius);
  position: relative;
  background: var(--bubble);
  outline: 1.5px dashed color-mix(in srgb, var(--outline), transparent 35%);
  outline-offset: -5px;
  padding-top: calc(var(--padding) + 6px); padding-left: calc(var(--padding) + 12px);
}
.memo-bear .message::before {
  content: '';
  position: absolute;
  top: -15px; left: 14px;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'><circle cx='9' cy='12' r='4.5' fill='%23b45309' stroke='%2378350f' stroke-width='1.8'/><circle cx='9' cy='12' r='2.5' fill='%23fde68a'/><circle cx='27' cy='12' r='4.5' fill='%23b45309' stroke='%2378350f' stroke-width='1.8'/><circle cx='27' cy='12' r='2.5' fill='%23fde68a'/><ellipse cx='18' cy='22' rx='12' ry='10' fill='%23d97706' stroke='%2378350f' stroke-width='1.8'/><ellipse cx='18' cy='24' rx='4.5' ry='3.5' fill='%23fef3c7' stroke='%2378350f' stroke-width='1.4'/><ellipse cx='18' cy='22.5' rx='1.8' ry='1.2' fill='%2378350f'/><circle cx='13' cy='19' r='1.3' fill='%23451a03'/><circle cx='23' cy='19' r='1.3' fill='%23451a03'/><ellipse cx='10' cy='23' rx='1.6' ry='1.1' fill='%23fca5a5'/><ellipse cx='26' cy='23' rx='1.6' ry='1.1' fill='%23fca5a5'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 2;
}
.frame-mini.memo-bear {
  border-radius: 4px;
  border: 1px solid #817ca1;
  position: relative;
  outline: 1px dashed #b5a8ef;
  outline-offset: -2px;
}
.frame-mini.memo-bear::before {
  content: '';
  position: absolute;
  top: -3px; left: 3px;
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'><circle cx='9' cy='12' r='4.5' fill='%23b45309' stroke='%2378350f' stroke-width='1.8'/><circle cx='9' cy='12' r='2.5' fill='%23fde68a'/><circle cx='27' cy='12' r='4.5' fill='%23b45309' stroke='%2378350f' stroke-width='1.8'/><circle cx='27' cy='12' r='2.5' fill='%23fde68a'/><ellipse cx='18' cy='22' rx='12' ry='10' fill='%23d97706' stroke='%2378350f' stroke-width='1.8'/><ellipse cx='18' cy='24' rx='4.5' ry='3.5' fill='%23fef3c7' stroke='%2378350f' stroke-width='1.4'/><ellipse cx='18' cy='22.5' rx='1.8' ry='1.2' fill='%2378350f'/><circle cx='13' cy='19' r='1.3' fill='%23451a03'/><circle cx='23' cy='19' r='1.3' fill='%23451a03'/><ellipse cx='10' cy='23' rx='1.6' ry='1.1' fill='%23fca5a5'/><ellipse cx='26' cy='23' rx='1.6' ry='1.1' fill='%23fca5a5'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
/* memo-cloud (방긋 구름 메모) */
.memo-cloud .message {
  border: var(--border) solid var(--outline);
  border-radius: var(--radius);
  position: relative;
  background: var(--bubble);
  outline: 1.5px dashed color-mix(in srgb, var(--outline), transparent 35%);
  outline-offset: -5px;
  padding-right: calc(var(--padding) + 26px); padding-bottom: calc(var(--padding) + 4px);
}
.memo-cloud .message::after {
  content: '';
  position: absolute;
  bottom: -8px; right: 14px;
  width: 34px;
  height: 27px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 30' fill='none'><path d='M10 24C6 24 3 21 3 17C3 13 6 10 10 11C11 7 15 4 20 4C25 4 29 7 30 11C33 11 36 14 36 17C36 21 33 24 29 24Z' fill='%23e0f2fe' stroke='%230284c7' stroke-width='1.8' stroke-linejoin='round'/><path d='M13 16Q15 14 17 16' stroke='%230369a1' stroke-width='1.4' stroke-linecap='round'/><path d='M23 16Q25 14 27 16' stroke='%230369a1' stroke-width='1.4' stroke-linecap='round'/><path d='M18 19Q20 21 22 19' stroke='%230369a1' stroke-width='1.4' stroke-linecap='round'/><ellipse cx='11.5' cy='18' rx='1.6' ry='1.1' fill='%23f9a8d4'/><ellipse cx='28.5' cy='18' rx='1.6' ry='1.1' fill='%23f9a8d4'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 2;
}
.frame-mini.memo-cloud {
  border-radius: 4px;
  border: 1px solid #817ca1;
  position: relative;
  outline: 1px dashed #b5a8ef;
  outline-offset: -2px;
}
.frame-mini.memo-cloud::after {
  content: '';
  position: absolute;
  bottom: -3px; right: 3px;
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 30' fill='none'><path d='M10 24C6 24 3 21 3 17C3 13 6 10 10 11C11 7 15 4 20 4C25 4 29 7 30 11C33 11 36 14 36 17C36 21 33 24 29 24Z' fill='%23e0f2fe' stroke='%230284c7' stroke-width='1.8' stroke-linejoin='round'/><path d='M13 16Q15 14 17 16' stroke='%230369a1' stroke-width='1.4' stroke-linecap='round'/><path d='M23 16Q25 14 27 16' stroke='%230369a1' stroke-width='1.4' stroke-linecap='round'/><path d='M18 19Q20 21 22 19' stroke='%230369a1' stroke-width='1.4' stroke-linecap='round'/><ellipse cx='11.5' cy='18' rx='1.6' ry='1.1' fill='%23f9a8d4'/><ellipse cx='28.5' cy='18' rx='1.6' ry='1.1' fill='%23f9a8d4'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
/* memo-sprout (싱그런 새싹 메모) */
.memo-sprout .message {
  border: var(--border) solid var(--outline);
  border-radius: var(--radius);
  position: relative;
  background: var(--bubble);
  outline: 1.5px dashed color-mix(in srgb, var(--outline), transparent 35%);
  outline-offset: -5px;
  padding-top: calc(var(--padding) + 6px); padding-left: calc(var(--padding) + 12px);
}
.memo-sprout .message::before {
  content: '';
  position: absolute;
  top: -12px; left: 14px;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><path d='M16 28C16 22 16 16 16 12' stroke='%2316a34a' stroke-width='2.2' stroke-linecap='round'/><path d='M16 16C12 14 7 15 5 18C7 22 12 21 16 17' fill='%234ade80' stroke='%2315803d' stroke-width='1.6' stroke-linejoin='round'/><path d='M16 12C19 8 25 7 27 10C26 15 20 16 16 13' fill='%2386efac' stroke='%2315803d' stroke-width='1.6' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 2;
}
.frame-mini.memo-sprout {
  border-radius: 4px;
  border: 1px solid #817ca1;
  position: relative;
  outline: 1px dashed #b5a8ef;
  outline-offset: -2px;
}
.frame-mini.memo-sprout::before {
  content: '';
  position: absolute;
  top: -3px; left: 3px;
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><path d='M16 28C16 22 16 16 16 12' stroke='%2316a34a' stroke-width='2.2' stroke-linecap='round'/><path d='M16 16C12 14 7 15 5 18C7 22 12 21 16 17' fill='%234ade80' stroke='%2315803d' stroke-width='1.6' stroke-linejoin='round'/><path d='M16 12C19 8 25 7 27 10C26 15 20 16 16 13' fill='%2386efac' stroke='%2315803d' stroke-width='1.6' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
/* memo-moon (초승달 별빛 메모) */
.memo-moon .message {
  border: var(--border) solid var(--outline);
  border-radius: var(--radius);
  position: relative;
  background: var(--bubble);
  outline: 1.5px dashed color-mix(in srgb, var(--outline), transparent 35%);
  outline-offset: -5px;
  padding-right: calc(var(--padding) + 22px); padding-bottom: calc(var(--padding) + 4px);
}
.memo-moon .message::after {
  content: '';
  position: absolute;
  bottom: -8px; right: 14px;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><path d='M24 16C24 22.6 18.6 28 12 28C9.5 28 7.2 27.2 5.3 25.8C8.5 25.8 11.5 24.5 13.7 22.3C16 20 17.2 17 17.2 13.8C17.2 10.5 16 7.5 13.7 5.3C15.8 4.2 18.3 3.5 21 4C19 7 19.5 11 21.5 13.5C23.5 16 24 16 24 16Z' fill='%23fef08a' stroke='%23ca8a04' stroke-width='1.8' stroke-linejoin='round'/><path d='M15 14Q17 15 19 14' stroke='%23a16207' stroke-width='1.3' stroke-linecap='round'/><ellipse cx='14' cy='16' rx='1.3' ry='0.9' fill='%23fca5a5'/><path d='M25 6L26 9L29 10L26 11L25 14L24 11L21 10L24 9Z' fill='%23fde047' stroke='%23ca8a04' stroke-width='1.2' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 2;
}
.frame-mini.memo-moon {
  border-radius: 4px;
  border: 1px solid #817ca1;
  position: relative;
  outline: 1px dashed #b5a8ef;
  outline-offset: -2px;
}
.frame-mini.memo-moon::after {
  content: '';
  position: absolute;
  bottom: -3px; right: 3px;
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><path d='M24 16C24 22.6 18.6 28 12 28C9.5 28 7.2 27.2 5.3 25.8C8.5 25.8 11.5 24.5 13.7 22.3C16 20 17.2 17 17.2 13.8C17.2 10.5 16 7.5 13.7 5.3C15.8 4.2 18.3 3.5 21 4C19 7 19.5 11 21.5 13.5C23.5 16 24 16 24 16Z' fill='%23fef08a' stroke='%23ca8a04' stroke-width='1.8' stroke-linejoin='round'/><path d='M15 14Q17 15 19 14' stroke='%23a16207' stroke-width='1.3' stroke-linecap='round'/><ellipse cx='14' cy='16' rx='1.3' ry='0.9' fill='%23fca5a5'/><path d='M25 6L26 9L29 10L26 11L25 14L24 11L21 10L24 9Z' fill='%23fde047' stroke='%23ca8a04' stroke-width='1.2' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}


/* --- 5 Aesthetic Capsule Banners (외곽선/흰틀 없는 둥근 캡슐 & 빅사이즈 모티브) --- */

/* 1. capsule-heart (러블리 하트 클라우드 캡슐) */
.capsule-heart .message {
  position: relative;
  border-radius: 28px;
  border: var(--border) solid var(--outline);
  background-color: var(--bubble);
  background-image:
    radial-gradient(ellipse 60px 24px at 15% 100%, rgba(255,255,255,0.45) 0%, transparent 80%),
    radial-gradient(ellipse 70px 28px at 45% 100%, rgba(255,255,255,0.45) 0%, transparent 80%),
    radial-gradient(ellipse 60px 24px at 75% 100%, rgba(255,255,255,0.45) 0%, transparent 80%),
    repeating-linear-gradient(0deg, transparent, transparent 15px, rgba(255,255,255,0.15) 15px, rgba(255,255,255,0.15) 16px),
    repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(255,255,255,0.15) 15px, rgba(255,255,255,0.15) 16px);
  outline: 1.5px dashed rgba(255, 255, 255, 0.75);
  outline-offset: -5px;
  padding: calc(var(--padding) + 2px) 54px;
}
.capsule-heart .message::before {
  content: '';
  position: absolute;
  left: -4px; bottom: -6px;
  width: 52px; height: 44px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 44' fill='none'>  <path d='M10 24C4 18 5 9 12 7C17 5 21 11 21 11C21 11 25 5 30 7C37 9 38 18 32 24L21 35L10 24Z' fill='%23f43f5e' filter='drop-shadow(0 2px 3px rgba(0,0,0,0.15))'/>  <path d='M3 13C0 9 1 4 5 3C8 2 10 5 10 5C10 5 12 2 15 3C19 4 20 9 17 13L10 20L3 13Z' fill='%23fb7185' opacity='0.9'/>  <path d='M28 28C26 25 26 21 29 20C31 19 33 21 33 21C33 21 35 19 37 20C40 21 40 25 38 28L33 33L28 28Z' fill='%23ffffff' opacity='0.95'/>  <circle cx='15' cy='12' r='2' fill='%23ffffff' opacity='0.7'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  pointer-events: none; z-index: 2;
}
.capsule-heart .message::after {
  content: '';
  position: absolute;
  right: -2px; top: -8px;
  width: 58px; height: 50px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50' fill='none'>  <path d='M25 26C16 17 18 6 27 4C33 2 38 9 38 9C38 9 43 2 49 4C58 6 60 17 51 26L38 39L25 26Z' fill='%23fda4af' opacity='0.75'/>  <path d='M12 32C7 26 8 18 14 16C18 15 21 19 21 19C21 19 24 15 28 16C34 18 35 26 30 32L21 41L12 32Z' fill='%23f43f5e'/>  <path d='M35 16C32 13 32 9 35 8C37 7 39 9 39 9C39 9 41 7 43 8C46 9 46 13 44 16L39 21L35 16Z' fill='%23ffffff' opacity='0.95'/>  <path d='M44 32C42 29 42 26 45 25C47 24 48 26 48 26C48 26 50 24 51 25C54 26 54 29 52 32L48 36L44 32Z' fill='%23fb7185'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  pointer-events: none; z-index: 2;
}
.frame-mini.capsule-heart {
  border-radius: 12px;
  border: 1px solid #f87171;
  background: #fca5a5;
  position: relative;
  outline: 1px dashed rgba(255,255,255,0.8);
  outline-offset: -2px;
}
.frame-mini.capsule-heart::before {
  content: '♥';
  position: absolute;
  top: -4px; right: 2px;
  font-size: 8px; color: #f43f5e; line-height: 1;
}

/* 2. capsule-leaf (보태니컬 리프 캡슐) */
.capsule-leaf .message {
  position: relative;
  border-radius: 28px;
  border: var(--border) solid var(--outline);
  background-color: var(--bubble);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(255,255,255,0.22) 14px, rgba(255,255,255,0.22) 15px),
    repeating-linear-gradient(90deg, transparent, transparent 14px, rgba(255,255,255,0.22) 14px, rgba(255,255,255,0.22) 15px);
  outline: 1.5px dashed rgba(255, 255, 255, 0.75);
  outline-offset: -5px;
  padding: calc(var(--padding) + 2px) 54px;
}
.capsule-leaf .message::before {
  content: '';
  position: absolute;
  left: 2px; bottom: -6px;
  width: 44px; height: 42px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 44' fill='none'>  <path d='M6 34C6 20 18 10 32 14C34 26 22 36 6 34Z' fill='%23ffffff' stroke='%2386efac' stroke-width='1.8' stroke-linejoin='round'/>  <path d='M10 30Q22 22 28 17' stroke='%2386efac' stroke-width='1.5' stroke-linecap='round'/>  <path d='M24 38C24 28 32 20 40 22C42 30 34 38 24 38Z' fill='%234ade80' stroke='%2322c55e' stroke-width='1.5'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.12));
  pointer-events: none; z-index: 2;
}
.capsule-leaf .message::after {
  content: '';
  position: absolute;
  right: 4px; top: -12px;
  width: 52px; height: 58px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 60' fill='none'>  <path d='M14 54Q24 36 28 12' stroke='%2322c55e' stroke-width='2' stroke-linecap='round'/>  <!-- White leaf -->  <path d='M16 48C10 44 10 30 24 32C24 44 18 48 16 48Z' fill='%23ffffff' stroke='%234ade80' stroke-width='1.8' stroke-linejoin='round'/>  <path d='M15 44Q20 38 23 34' stroke='%234ade80' stroke-width='1.4' stroke-linecap='round'/>  <!-- Upper leaf -->  <path d='M26 28C22 18 30 10 38 12C42 22 32 28 26 28Z' fill='%23bbf7d0' stroke='%2322c55e' stroke-width='1.8' stroke-linejoin='round'/>  <!-- Right big leaf -->  <path d='M28 38C28 26 44 24 46 36C40 46 30 44 28 38Z' fill='%23ffffff' stroke='%234ade80' stroke-width='1.8' stroke-linejoin='round'/>  <path d='M30 38Q38 34 43 32' stroke='%234ade80' stroke-width='1.4' stroke-linecap='round'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  pointer-events: none; z-index: 2;
}
.frame-mini.capsule-leaf {
  border-radius: 12px;
  border: 1px solid #4ade80;
  background: #bbf7d0;
  position: relative;
  outline: 1px dashed rgba(255,255,255,0.8);
  outline-offset: -2px;
}
.frame-mini.capsule-leaf::before {
  content: '🌿';
  position: absolute;
  top: -5px; right: 1px;
  font-size: 8px; line-height: 1;
}

/* 3. capsule-bubble (방울방울 구름 캡슐) */
.capsule-bubble .message {
  position: relative;
  border-radius: 28px;
  border: var(--border) solid var(--outline);
  background-color: var(--bubble);
  background-image:
    radial-gradient(ellipse 65px 26px at 20% 100%, rgba(255,255,255,0.5) 0%, transparent 80%),
    radial-gradient(ellipse 80px 30px at 50% 100%, rgba(255,255,255,0.5) 0%, transparent 80%),
    radial-gradient(ellipse 70px 26px at 80% 100%, rgba(255,255,255,0.5) 0%, transparent 80%),
    repeating-linear-gradient(0deg, transparent, transparent 15px, rgba(255,255,255,0.18) 15px, rgba(255,255,255,0.18) 16px),
    repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(255,255,255,0.18) 15px, rgba(255,255,255,0.18) 16px);
  outline: 1.5px dashed rgba(255, 255, 255, 0.75);
  outline-offset: -5px;
  padding: calc(var(--padding) + 2px) 54px;
}
.capsule-bubble .message::before {
  content: '';
  position: absolute;
  left: 2px; bottom: -4px;
  width: 52px; height: 44px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 46' fill='none'>  <!-- Back cloud -->  <path d='M12 36H44C48 36 52 32 52 28C52 24 48 21 44 21C43 14 37 9 30 9C24 9 19 13 18 18C14 18 10 22 10 26C10 31 12 36 12 36Z' fill='%23ffffff' opacity='0.75'/>  <!-- Front cloud -->  <path d='M6 38H34C38 38 41 35 41 31C41 28 38 25 35 25C34 19 29 15 23 15C18 15 14 18 13 22C10 22 6 25 6 29C6 34 6 38 6 38Z' fill='%23ffffff' filter='drop-shadow(0 2px 3px rgba(0,0,0,0.12))'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
  pointer-events: none; z-index: 2;
}
.capsule-bubble .message::after {
  content: '';
  position: absolute;
  right: 2px; top: -8px;
  width: 52px; height: 52px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none'>  <!-- Main bubble -->  <circle cx='28' cy='28' r='14' fill='%23ffffff' opacity='0.85' filter='drop-shadow(0 2px 4px rgba(56,189,248,0.3))'/>  <circle cx='24' cy='22' r='3.5' fill='%23ffffff'/>  <circle cx='34' cy='32' r='1.5' fill='%23ffffff'/>  <!-- Satellite bubble 1 -->  <circle cx='12' cy='16' r='6' fill='%2338bdf8' opacity='0.75'/>  <circle cx='10' cy='14' r='1.5' fill='%23ffffff'/>  <!-- Satellite bubble 2 -->  <circle cx='44' cy='18' r='5' fill='%23ffffff' opacity='0.9'/>  <circle cx='43' cy='16' r='1.2' fill='%2338bdf8'/>  <!-- Mini bubble 3 -->  <circle cx='38' cy='44' r='4' fill='%2338bdf8' opacity='0.6'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 2px 4px rgba(56,189,248,0.25));
  pointer-events: none; z-index: 2;
}
.frame-mini.capsule-bubble {
  border-radius: 12px;
  border: 1px solid #60a5fa;
  background: #93c5fd;
  position: relative;
  outline: 1px dashed rgba(255,255,255,0.8);
  outline-offset: -2px;
}
.frame-mini.capsule-bubble::before {
  content: '🫧';
  position: absolute;
  top: -5px; right: 1px;
  font-size: 8px; line-height: 1;
}

/* 4. capsule-crown (샤이닝 크라운 캡슐) */
.capsule-crown .message {
  position: relative;
  border-radius: 28px;
  border: var(--border) solid var(--outline);
  background-color: var(--bubble);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(255,255,255,0.3) 11px, rgba(255,255,255,0.3) 12.5px);
  outline: 1.5px dashed rgba(255, 255, 255, 0.75);
  outline-offset: -5px;
  padding: calc(var(--padding) + 2px) 54px;
}
.capsule-crown .message::before {
  content: '';
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none'>  <!-- Big shine star -->  <path d='M18 6Q18 18 6 18Q18 18 18 30Q18 18 30 18Q18 18 18 6Z' fill='%23ffffff' filter='drop-shadow(0 1px 2px rgba(234,179,8,0.4))'/>  <!-- Mini star -->  <path d='M34 26Q34 33 27 33Q34 33 34 40Q34 33 41 33Q34 33 34 26Z' fill='%23fde047'/>  <circle cx='36' cy='12' r='2' fill='%23ffffff'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 1px 2px rgba(234,179,8,0.3));
  pointer-events: none; z-index: 2;
}
.capsule-crown .message::after {
  content: '';
  position: absolute;
  right: 2px; top: -16px;
  width: 60px; height: 52px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 52' fill='none'>  <g transform='rotate(12 30 26)'>    <!-- Crown base & peaks -->    <path d='M12 36L15 20L22 27L30 14L38 27L45 20L48 36H12Z' fill='%23ffffff' stroke='%23eab308' stroke-width='2.2' stroke-linejoin='round' filter='drop-shadow(0 2px 4px rgba(0,0,0,0.12))'/>    <!-- Crown bottom band -->    <path d='M12 36H48V39C48 40.5 46.5 42 45 42H15C13.5 42 12 40.5 12 39V36Z' fill='%23fef08a' stroke='%23eab308' stroke-width='1.8'/>    <circle cx='18' cy='39' r='1.2' fill='%23ca8a04'/>    <circle cx='30' cy='39' r='1.2' fill='%23ca8a04'/>    <circle cx='42' cy='39' r='1.2' fill='%23ca8a04'/>    <!-- Pearls on peaks -->    <circle cx='15' cy='18' r='3' fill='%23fef9c3' stroke='%23eab308' stroke-width='1.8'/>    <circle cx='30' cy='12' r='3.8' fill='%23fef9c3' stroke='%23eab308' stroke-width='1.8'/>    <circle cx='45' cy='18' r='3' fill='%23fef9c3' stroke='%23eab308' stroke-width='1.8'/>  </g>  <!-- Sparkles around crown -->  <path d='M52 8Q52 14 46 14Q52 14 52 20Q52 14 58 14Q52 14 52 8Z' fill='%23f59e0b'/>  <circle cx='8' cy='28' r='1.8' fill='%23ffffff'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  pointer-events: none; z-index: 2;
}
.frame-mini.capsule-crown {
  border-radius: 12px;
  border: 1px solid #fbbf24;
  background: #fcd34d;
  position: relative;
  outline: 1px dashed rgba(255,255,255,0.8);
  outline-offset: -2px;
}
.frame-mini.capsule-crown::before {
  content: '👑';
  position: absolute;
  top: -5px; right: 1px;
  font-size: 8px; line-height: 1;
}

/* 5. capsule-dream (코스믹 드림 나비 캡슐) */
.capsule-dream .message {
  position: relative;
  border-radius: 28px;
  border: var(--border) solid var(--outline);
  background-color: var(--bubble);
  background-image:
    radial-gradient(circle at 7px 7px, rgba(255,255,255,0.35) 1.5px, transparent 2px);
  background-size: 14px 14px;
  outline: 1.5px dashed rgba(255, 255, 255, 0.75);
  outline-offset: -5px;
  padding: calc(var(--padding) + 2px) 54px;
}
.capsule-dream .message::before {
  content: '';
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 42px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 46' fill='none'>  <!-- Bold cross twinkle -->  <rect x='16' y='8' width='6' height='22' rx='3' fill='%23ffffff'/>  <rect x='8' y='16' width='22' height='6' rx='3' fill='%23ffffff'/>  <!-- Mini 4-point star -->  <path d='M35 24Q35 29 30 29Q35 29 35 34Q35 29 40 29Q35 29 35 24Z' fill='%23c084fc'/>  <circle cx='12' cy='34' r='2' fill='%23ffffff' opacity='0.8'/>  <circle cx='32' cy='10' r='1.5' fill='%23f3e8ff'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 1px 2px rgba(147,51,234,0.3));
  pointer-events: none; z-index: 2;
}
.capsule-dream .message::after {
  content: '';
  position: absolute;
  right: 4px; top: -14px;
  width: 58px; height: 52px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 54' fill='none'>  <!-- Butterfly -->  <g transform='rotate(-8 30 27)'>    <!-- Top left wing -->    <path d='M26 24C24 12 12 12 14 24C15 28 22 28 26 24Z' fill='%23ffffff' stroke='%239333ea' stroke-width='1.8' stroke-linejoin='round'/>    <circle cx='18' cy='20' r='2' fill='%23e9d5ff'/>    <!-- Bottom left wing -->    <path d='M25 26C21 28 16 34 20 38C24 40 26 34 25 26Z' fill='%23d8b4fe' stroke='%239333ea' stroke-width='1.5'/>    <!-- Top right wing -->    <path d='M30 24C32 10 46 10 44 24C43 28 34 28 30 24Z' fill='%23ffffff' stroke='%239333ea' stroke-width='1.8' stroke-linejoin='round'/>    <circle cx='38' cy='19' r='2' fill='%23e9d5ff'/>    <!-- Bottom right wing -->    <path d='M31 26C35 28 40 34 36 38C32 40 30 34 31 26Z' fill='%23d8b4fe' stroke='%239333ea' stroke-width='1.5'/>    <!-- Body -->    <ellipse cx='28' cy='26' rx='2.5' ry='8' fill='%237e22ce'/>    <path d='M27 18Q24 12 21 11' stroke='%237e22ce' stroke-width='1.2' stroke-linecap='round'/>    <path d='M29 18Q32 12 35 11' stroke='%237e22ce' stroke-width='1.2' stroke-linecap='round'/>  </g>  <!-- Sparkles -->  <path d='M50 12Q50 16 46 16Q50 16 50 20Q50 16 54 16Q50 16 50 12Z' fill='%23ffffff'/>  <circle cx='48' cy='36' r='1.8' fill='%23c084fc'/>  <circle cx='10' cy='14' r='1.5' fill='%23ffffff'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  pointer-events: none; z-index: 2;
}
.frame-mini.capsule-dream {
  border-radius: 12px;
  border: 1px solid #c084fc;
  background: #d8b4fe;
  position: relative;
  outline: 1px dashed rgba(255,255,255,0.8);
  outline-offset: -2px;
}
.frame-mini.capsule-dream::before {
  content: '🦋';
  position: absolute;
  top: -5px; right: 1px;
  font-size: 8px; line-height: 1;
}

/* ==========================================================================
   Ultra-Cute & Neon Custom Frames (할로윈 네온 캣, 산뜻 수채화 고래, 사이버 네온 고래)
   ========================================================================== */

/* halloween-neon (할로윈 네온 캣) */
.halloween-neon .message {
  position: relative;
  border-radius: 26px;
  background: var(--bubble-color, #1c142e);
  border: 2px solid var(--border-color, #a855f7);
  outline: 1.5px dashed rgba(244, 114, 182, 0.75);
  outline-offset: -5px;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.45), 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 14px 68px 14px 54px;
  box-sizing: border-box;
  overflow: visible;
  color: var(--text-color, #f3e8ff);
}
.halloween-neon .message::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 38px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40' fill='none'><path d='M14 6Q14 16 4 16Q14 16 14 26Q14 16 14 6Z' fill='%23c084fc' filter='drop-shadow(0 0 6px %23a855f7)'/><path d='M32 20Q32 27 25 27Q32 27 32 34Q32 27 39 27Q32 27 32 20Z' fill='%23f472b6' filter='drop-shadow(0 0 4px %23ec4899)'/><circle cx='34' cy='8' r='2' fill='%23fef08a'/></svg>") no-repeat center / contain;
  pointer-events: none;
  z-index: 2;
}
.frame-mini.halloween-neon {
  border-radius: 8px;
  border: 1px solid #a855f7;
  background: #1c142e;
  position: relative;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.5);
}
.frame-mini.halloween-neon::before {
  content: '✦';
  position: absolute;
  top: -4px; left: 2px;
  font-size: 7px; color: #f472b6; line-height: 1;
}

/* ocean-watercolor (산뜻 수채화 고래) */
.ocean-watercolor .message {
  position: relative;
  border-radius: 28px;
  background: var(--bubble-color, #f0f9ff);
  border: 2px solid var(--border-color, #0284c7);
  outline: 1.5px dashed rgba(56, 189, 248, 0.7);
  outline-offset: -5px;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.16);
  padding: 14px 74px 14px 56px;
  box-sizing: border-box;
  overflow: visible;
  color: var(--text-color, #0c4a6e);
}
.ocean-watercolor .message::before {
  content: '';
  position: absolute;
  left: 8px;
  bottom: -4px;
  width: 44px;
  height: 42px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 44' fill='none'><path d='M16 6L18 13L25 13L19 18L21 25L16 21L11 25L13 18L7 13L14 13Z' fill='%23fde047' stroke='%23eab308' stroke-width='1.2' stroke-linejoin='round' filter='drop-shadow(0 2px 3px rgba(0,0,0,0.12))'/><circle cx='34' cy='14' r='4' fill='%23bae6fd' opacity='0.85'/><circle cx='32.5' cy='12.5' r='1.2' fill='%23ffffff'/><circle cx='30' cy='28' r='6' fill='%237dd3fc' opacity='0.7'/><circle cx='28' cy='26' r='1.8' fill='%23ffffff'/><circle cx='18' cy='34' r='2.5' fill='%2338bdf8' opacity='0.8'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 2px 4px rgba(2, 132, 199, 0.15));
  pointer-events: none;
  z-index: 2;
}
.frame-mini.ocean-watercolor {
  border-radius: 8px;
  border: 1px solid #0284c7;
  background: #f0f9ff;
  position: relative;
}
.frame-mini.ocean-watercolor::before {
  content: '⭐';
  position: absolute;
  bottom: -3px; left: 1px;
  font-size: 7px; line-height: 1;
}

/* cyber-neon-whale (사이버 네온 고래 - 왼쪽 방울 제외) */
.cyber-neon-whale .message {
  position: relative;
  border-radius: 28px;
  background: var(--bubble-color, #0f0a1c);
  border: 2px solid var(--border-color, #c084fc);
  outline: 1.5px solid rgba(168, 85, 247, 0.5);
  outline-offset: -5px;
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.55), inset 0 0 12px rgba(168, 85, 247, 0.25), 0 8px 24px rgba(0, 0, 0, 0.6);
  padding: 14px 72px 14px 20px;
  box-sizing: border-box;
  overflow: visible;
  color: var(--text-color, #faf5ff);
}
.frame-mini.cyber-neon-whale {
  border-radius: 8px;
  border: 1px solid #c084fc;
  background: #0f0a1c;
  position: relative;
  box-shadow: 0 0 6px rgba(192, 132, 252, 0.6);
}

/* ==========================================================================
   Ultra-Cute Illustrated Character Frames (소다 컵 아기냥이, 풍선 댕댕이, 수국 리본, 요정 유리병, 딸기 디저트 냥이)
   ========================================================================== */

/* 4. cute-fairy-jar (별빛 요정 유리병) */
.cute-fairy-jar .message {
  position: relative;
  border-radius: 28px;
  background: var(--bubble-color, #38bdf8);
  border: 2px solid var(--border-color, #0284c7);
  outline: 1.5px dashed rgba(255, 255, 255, 0.75);
  outline-offset: -5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: 14px 58px;
  box-sizing: border-box;
  overflow: visible;
  color: var(--text-color, #0c4a6e);
}
.cute-fairy-jar .message::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 40px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 46' fill='none'> <path d='M16 6Q16 18 4 18Q16 18 16 30Q16 18 28 18Q16 18 16 6Z' fill='%23fef08a' filter='drop-shadow(0 2px 4px rgba(234,179,8,0.4))'/> <path d='M36 22Q36 30 28 30Q36 30 36 38Q36 30 44 30Q36 30 36 22Z' fill='%23ffffff'/> <circle cx='36' cy='10' r='2' fill='%23fef08a'/> </svg>") no-repeat center / contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
  pointer-events: none;
  z-index: 2;
}
.cute-fairy-jar .message::after {
  content: '';
  position: absolute;
  right: 2px;
  top: -16px;
  width: 62px;
  height: 64px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 74' fill='none'> <defs> <radialGradient id='jarGlow' cx='50%' cy='60%' r='45%'> <stop offset='0%' stop-color='%23fef08a' stop-opacity='0.9'/> <stop offset='60%' stop-color='%23fed7aa' stop-opacity='0.4'/> <stop offset='100%' stop-color='%2338bdf8' stop-opacity='0.15'/> </radialGradient> </defs> <!-- Jar cork lid --> <rect x='27' y='8' width='22' height='7' rx='2' fill='%23d97706' stroke='%2378350f' stroke-width='1.8'/> <!-- Jar neck --> <rect x='24' y='14' width='28' height='6' rx='2' fill='%23e0f2fe' stroke='%230284c7' stroke-width='1.8'/> <!-- Twine / Ribbon with cute tag --> <line x1='24' y1='17' x2='52' y2='17' stroke='%230284c7' stroke-width='2.2'/> <rect x='44' y='22' width='12' height='16' rx='2' fill='%23ffffff' stroke='%230284c7' stroke-width='1.4' transform='rotate(12 50 30)'/> <path d='M47 28L51 32L53 26' stroke='%2338bdf8' stroke-width='1.2' stroke-linecap='round'/> <!-- Glass Jar Body --> <path d='M22 20C17 20 16 26 16 32V58C16 64 22 68 28 68H48C54 68 60 64 60 58V32C60 26 59 20 54 20Z' fill='url(%23jarGlow)' stroke='%230284c7' stroke-width='2.4' stroke-linejoin='round'/> <!-- Fairy lights string & warm glowing sparkles inside --> <path d='M24 30Q38 34 32 46Q28 58 48 56Q52 54 46 40' stroke='%23f59e0b' stroke-width='1.4' stroke-dasharray='3 4' fill='none'/> <circle cx='30' cy='32' r='3' fill='%23fde047' filter='drop-shadow(0 0 4px %23f59e0b)'/> <circle cx='36' cy='42' r='4' fill='%23ffffff' filter='drop-shadow(0 0 5px %23fde047)'/> <circle cx='48' cy='46' r='3' fill='%23fde047' filter='drop-shadow(0 0 4px %23f59e0b)'/> <circle cx='28' cy='54' r='3.5' fill='%23fef08a' filter='drop-shadow(0 0 5px %23eab308)'/> <circle cx='44' cy='60' r='2.5' fill='%23ffffff'/> <!-- Glass shine reflection --> <path d='M20 28C19 32 19 50 21 60' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' opacity='0.8'/> </svg>") no-repeat center / contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
  pointer-events: none;
  z-index: 2;
}
.frame-mini.cute-fairy-jar {
  border-radius: 12px;
  border: 1px solid #0284c7;
  background: #38bdf8;
  position: relative;
  outline: 1px dashed rgba(255, 255, 255, 0.8);
  outline-offset: -2px;
}
.frame-mini.cute-fairy-jar::before {
  content: '✨';
  position: absolute;
  top: -5px; right: 1px;
  font-size: 8px; line-height: 1;
}

/* Ornament Manager & UI Edit Enhancements */
.ornament-manager-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; padding: 10px; background: #20212c; border: 1px solid #37384a; border-radius: 8px; align-items: center; }
.add-category-row { flex: 1; display: flex; gap: 6px; min-width: 180px; }
.add-category-row input { flex: 1; padding: 6px 10px; background: #151620; border: 1px solid #434458; border-radius: 6px; color: #f0ecff; font: 11px Pretendard; outline: none; }
.add-category-row input:focus { border-color: #a78bfa; }
.primary-small { background: #a78bfa; color: #161426; border: 0; border-radius: 6px; padding: 6px 10px; font: 600 11px Pretendard; cursor: pointer; white-space: nowrap; }
.primary-small:hover { background: #ba9ffb; }
.library-label-row { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 6px; }
.library-label-row .library-label { margin: 0; }
.group-count { font-size: 10px; color: #858298; font-weight: normal; margin-left: 3px; }
.category-delete-btn { border: 0; background: none; color: #c99ba8; font-size: 10px; cursor: pointer; padding: 2px 4px; }
.category-delete-btn:hover { color: #f43f5e; text-decoration: underline; }
.empty-category-notice { grid-column: 1 / -1; padding: 14px 10px; text-align: center; font-size: 11px; color: #88849b; background: #1a1b26; border: 1px dashed #353648; border-radius: 6px; }
.ornament-card-wrap, .theme-card-wrap { display: flex; flex-direction: column; width: 100%; position: relative; }
.ornament-card-edit-bar { margin-top: 4px; width: 100%; }
.category-move-select { width: 100%; background: #161722; border: 1px solid #3c3d52; border-radius: 5px; color: #b8b5c9; font: 10px Pretendard; padding: 3px 4px; cursor: pointer; }
.category-move-select:focus { border-color: #a78bfa; outline: none; }

.card-thumb-btn { display: block; width: 100%; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; outline: none; position: relative; }
.card-thumb-btn img { display: block; width: 100%; height: 42px; object-fit: contain; filter: drop-shadow(0 3px 4px #0003); transition: transform .15s; }
.card-thumb-btn:hover img { transform: scale(1.05); }
.card-thumb-btn .badge { position: absolute; right: 2px; bottom: 2px; }

.editable-name-row { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; width: 100%; }
.theme-label-text, .ornament-label-text { display: block; text-align: center; font-size: 10px; color: #c9c6d6; }
.theme-label-text.editable-label, .ornament-label-text.editable-label {
  flex: 1;
  min-width: 0;
  display: inline-block;
  cursor: text;
  border-bottom: 1px dashed #8e80be;
  padding: 2px 3px;
  border-radius: 3px;
  background: rgba(142, 128, 190, 0.08);
  transition: all .15s;
  outline: none;
  word-break: break-all;
  white-space: normal;
  text-align: center;
}
.theme-label-text.editable-label:hover, .ornament-label-text.editable-label:hover {
  background: rgba(167, 139, 250, 0.22);
  border-bottom-color: #a78bfa;
  color: #fff;
}
.theme-label-text.editable-label:focus, .ornament-label-text.editable-label:focus {
  background: #2b2344;
  border-bottom: 1.5px solid #a78bfa;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.25);
  color: #fff;
}
.edit-pencil-icon { font-size: 9px; opacity: 0.5; flex-shrink: 0; user-select: none; cursor: pointer; }
.in-edit-mode:hover .edit-pencil-icon { opacity: 0.95; }


/* Quick Opacity Presets */
.quick-preset-row { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0 14px; }
.preset-pill { background: #20212d; border: 1px solid #343547; color: #b2afc4; padding: 5px 9px; border-radius: 12px; font: 10px Pretendard; cursor: pointer; transition: .15s; }
.preset-pill:hover { border-color: #656185; color: #fff; }
.preset-pill.active { background: #332b4a; border-color: #a78bfa; color: #f0ecff; font-weight: 600; }


/* Top-Right Language Switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  background: #171822;
  border: 1px solid #333446;
  border-radius: 8px;
  padding: 3px 5px;
  gap: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.lang-globe {
  font-size: 13px;
  padding: 0 4px 0 2px;
  user-select: none;
  opacity: 0.85;
}
.lang-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #8c899e;
  font: 600 11px/1 'DM Mono', Pretendard, sans-serif;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lang-btn:hover {
  color: #f0ecff;
  background: #252636;
}
.lang-btn.active {
  background: #2f274a;
  color: #f3edff;
  border-color: #8b6fdc;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(139, 111, 220, 0.3);
}

/* Cutout Dialog & Decoration Cropping */
.cutout-dialog {
  width: min(700px, 95vw);
  background: #1e1f2b;
  border: 1px solid #464459;
  border-radius: 14px;
  color: #eeeaf8;
  padding: 24px;
  box-shadow: 0 25px 90px #0009;
}
.cutout-dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}
.cutout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.cutout-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cutout-title-box h2 {
  margin: 0;
  font-size: 16px;
  color: #ede9fe;
}
.cutout-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #161722;
  border: 1px solid #333446;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 12px 0;
}
.cutout-tool-group {
  display: flex;
  gap: 5px;
}
.cutout-tool-group .tool-btn {
  background: #232433;
  border: 1px solid #3e4052;
  color: #c8c5d8;
  border-radius: 6px;
  padding: 6px 12px;
  font: 11px Pretendard;
  cursor: pointer;
  transition: .15s;
}
.cutout-tool-group .tool-btn.active {
  background: #a78bfa;
  border-color: #a78bfa;
  color: #161226;
  font-weight: 600;
}
.cutout-slider-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #aaa5bc;
  flex: 1;
}
.cutout-slider-label input[type="range"] {
  flex: 1;
}
.cutout-canvas-wrap {
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #14151e;
  background-image: linear-gradient(45deg, #1c1d29 25%, transparent 25%),
                    linear-gradient(-45deg, #1c1d29 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #1c1d29 75%),
                    linear-gradient(-45deg, transparent 75%, #1c1d29 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border: 1px solid #333446;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  user-select: none;
}
#cutout-canvas {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  cursor: crosshair;
}
.cutout-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.part-btn {
  background: #252634;
  border: 1px solid #3e4052;
  color: #bcb8cd;
  border-radius: 6px;
  padding: 6px 2px;
  font: 10px Pretendard;
  cursor: pointer;
  transition: .15s;
}
.part-btn:hover {
  background: #2f3042;
  border-color: #635f7a;
}
.part-btn.selected {
  background: #392f52;
  border-color: #a78bfa;
  color: #fff;
  font-weight: 600;
}
.crop-details {
  border-top: 1px solid #2d2e39;
  margin-top: 10px;
  padding-top: 8px;
}
.crop-details summary {
  font-size: 11px;
  color: #b9b6c7;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Curation Gallery Panel Layout */
.studio.curation-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}
.curation-layout .controls {
  overflow-y: auto;
  max-height: 100vh;
  min-width: 0;
  width: 100%;
}
.curation-layout .curation-panel {
  min-width: 0;
  width: 100%;
}
.curation-panel {
  background: #13141d;
  border-right: 1px solid #292a38;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  padding: 16px 18px;
}
.curation-header {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #262734;
}
.curation-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.curation-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 8px;
  padding-right: 4px;
}
.curation-card {
  background: #1c1d29;
  border: 1px solid #2d2f3e;
  border-radius: 8px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, border-color 0.15s;
  content-visibility: auto;
  contain-intrinsic-size: 130px 170px;
}
.curation-card:hover {
  border-color: #585575;
  transform: translateY(-2px);
}
.curation-card.drag-over {
  outline: 2px dashed #a78bfa !important;
  outline-offset: 2px;
  transform: scale(1.02);
}
.cat-drop-hover {
  outline: 2px solid #a78bfa !important;
  background: #3b285a !important;
  color: #fff !important;
  transform: scale(1.05);
  transition: transform 0.1s;
}
.curation-card.is-selected {
  border-color: #a78bfa;
  background: #232236;
}
.curation-card.is-hidden {
  opacity: 0.65;
  border-style: dashed;
}
.curation-card.is-in-trash {
  border-color: #f43f5e !important;
  border-style: dashed !important;
  background: #27141b !important;
}
.curation-trash-btn {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(20, 20, 30, 0.82);
  border: 1px solid #4a4b60;
  color: #c5c1d6;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
  z-index: 5;
}
.curation-trash-btn:hover {
  background: #be123c;
  border-color: #f43f5e;
  color: #fff;
}
.curation-trash-btn.is-active {
  background: #e11d48;
  border-color: #fb7185;
  color: #fff;
  box-shadow: 0 0 6px rgba(225, 29, 72, 0.6);
}
.curation-card.is-in-move {
  border-color: #8b5cf6 !important;
  background: #1c182e !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
}
.curation-move-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(20, 20, 30, 0.85);
  border: 1px solid #4a4b60;
  color: #c4b5fd;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
  z-index: 5;
}
.curation-move-btn:hover {
  background: #6d28d9;
  border-color: #a78bfa;
  color: #fff;
}
.curation-move-btn.is-active {
  background: #7c3aed;
  border-color: #c4b5fd;
  color: #fff;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.6);
}
.curation-layout .workspace {
  padding: 16px 20px;
  min-width: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.curation-layout .stage {
  min-height: 540px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.curation-layout .preview {
  width: auto;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center center;
}
.curation-layout .chat-wrap {
  max-width: 100%;
}

/* Category Drag & Drop and Deletion Styles */
.cat-mgr-item {
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.cat-mgr-item.cat-dragging {
  opacity: 0.45;
  border-style: dashed !important;
  border-color: #818cf8 !important;
}
.cat-mgr-item.cat-drag-over-top {
  border-top: 2px solid #818cf8 !important;
}
.cat-mgr-item.cat-drag-over-bottom {
  border-bottom: 2px solid #818cf8 !important;
}
.cat-drag-handle {
  cursor: grab;
  color: #94a3b8;
  font-size: 15px;
  padding: 2px 5px;
  display: inline-flex;
  align-items: center;
  user-select: none;
}
.cat-drag-handle:active {
  cursor: grabbing;
}
.cat-order-btn:hover:not(:disabled) {
  background: #4f46e5;
  color: #fff;
}

/* Category Pills Drag Reordering */
.ornament-cat-pill {
  cursor: grab;
  user-select: none;
  transition: transform 0.12s ease, outline 0.12s ease, background 0.12s ease;
}
.ornament-cat-pill:active {
  cursor: grabbing;
}
.ornament-cat-pill.cat-pill-dragging {
  opacity: 0.35;
}
.ornament-cat-pill.cat-pill-drag-over {
  outline: 2px solid #818cf8 !important;
  outline-offset: 1px;
  background: #312e81 !important;
  transform: scale(1.06);
}

/* Accordion Header Drag & Quick Delete */
.accordion-drag-handle {
  cursor: grab;
  color: #64748b;
  font-size: 13px;
  padding: 2px 4px;
  margin-right: 2px;
  display: inline-flex;
  align-items: center;
  user-select: none;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
}
.accordion-drag-handle:hover {
  opacity: 1;
  color: #c7d2fe;
}
.accordion-drag-handle:active {
  cursor: grabbing;
}
.cat-quick-delete-btn {
  background: transparent;
  border: 0;
  color: #ef4444;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0.65;
  margin-right: 4px;
  transition: all 0.15s ease;
}
.cat-quick-delete-btn:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.15);
}
.ornament-accordion-item.accordion-drag-over {
  border-top: 2px solid #818cf8 !important;
}


/* ==========================================================================
   Nickname Tag (네임태그 미니 테두리 4종 & 네온)
   ========================================================================== */
.chat-wrap.has-nickname-tag .message {
  margin-top: var(--nickname-clearance-top, 0px);
}

.nickname-tag {
  position: absolute;
  left: var(--tag-x, var(--nickname-tag-x, 14px));
  top: var(--tag-y, var(--nickname-tag-y, -16px));
  z-index: calc(var(--layer-z-text, 6) + 2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: calc(var(--size) * 0.88);
  line-height: 1.25;
  font-weight: 700;
  color: var(--name);
  white-space: nowrap;
  user-select: none;
  cursor: grab;
  transform: rotate(var(--tag-rotation, var(--nickname-tag-rotation, 0deg))) scale(var(--nickname-tag-scale, 1));
  transform-origin: left center;
  transition: box-shadow 0.15s ease;
  pointer-events: auto;
}

.nickname-tag:active {
  cursor: grabbing;
}

.nickname-tag .badge {
  font-size: 1.1em;
  line-height: 1;
  margin-right: 2px;
}

.nickname-tag .nickname-text {
  font-weight: 700;
  color: inherit;
}

/* 1. 미니 캡슐 (capsule) */
.nickname-tag.tag-capsule {
  background: var(--bubble);
  border: 1.5px solid var(--outline);
  border-radius: 9999px;
  padding: 3px 12px 3px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

/* 2. 미니 꼬리 말풍선 (mini-bubble) */
.nickname-tag.tag-mini-bubble {
  background: var(--bubble);
  border: 1.5px solid var(--outline);
  border-radius: 12px 12px 12px 3px;
  padding: 3px 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
}
.nickname-tag.tag-mini-bubble::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 10px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--outline);
}

/* 3. 파스텔 스티치 (stitch) */
.nickname-tag.tag-stitch {
  background: color-mix(in srgb, var(--bubble), #fff 20%);
  border: 1.5px solid var(--outline);
  outline: 1.5px dashed color-mix(in srgb, var(--accent2, var(--outline)), #fff 35%);
  outline-offset: -3.5px;
  border-radius: 8px;
  padding: 3px 11px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* 4. 사이버 네온 (neon) */
.nickname-tag.tag-neon {
  background: rgba(16, 13, 30, 0.88);
  border: 1.5px solid var(--outline);
  border-radius: 10px;
  padding: 3px 12px;
  color: color-mix(in srgb, var(--name), #fff 45%);
  box-shadow: 0 0 10px var(--outline), inset 0 0 6px color-mix(in srgb, var(--outline), transparent 30%), 0 4px 10px rgba(0, 0, 0, 0.45);
  text-shadow: 0 0 6px var(--outline);
}

/* The layer controller must be able to move frame art, text, and ornaments
   independently. Artwork frames use pseudo-elements, so pin each part to the
   current layer variables instead of their built-in fixed z-index values. */
.chat-wrap .message {
  /* Absolute background/border layers must be scoped to this message. Without
     this, they use .chat-list as their containing block and cover all three
     samples, which looks like the selected frame suddenly became enormous. */
  position: relative;
  isolation: isolate;
}
.chat-wrap .message-fill { z-index: var(--layer-z-bg, 1) !important; }
.chat-wrap .message-background-layer {
  position: absolute;
  inset: 0;
  z-index: var(--layer-z-bg, 1) !important;
  pointer-events: none;
  background: inherit;
  border-radius: inherit;
}
.chat-wrap.hide-frame-bg .message-background-layer,
.chat-wrap.hide-frame-bg .message-fill {
  display: none !important;
}
/* Ordinary CSS frames paint their fill on .message itself. Remove that paint
   as well when the shared background switch is off. Integrated artwork is
   deliberately excluded: its colour is baked into the frame PNG. */
.chat-wrap.hide-frame-bg:not(.integrated-background-frame) .message {
  background-color: transparent !important;
  background-image: none !important;
}
.chat-wrap .message-border-layer {
  position: absolute;
  inset: 0;
  z-index: var(--layer-z-border, 4) !important;
  pointer-events: none;
  border: inherit;
  border-radius: inherit;
}
.chat-wrap .message::after { z-index: var(--layer-z-border, 4) !important; }
/* Frame artwork and left-side corner motifs are commonly drawn with
   ::before. It paints before the generated background layer, so sharing that
   layer's z-index lets an opaque fill hide it. Keep it one paint step above
   the frame/background stack while chat text stays on its own layer. */
.chat-wrap .message::before,
.chat-wrap.memo-ribbon .message::before,
.chat-wrap.memo-bunny .message::after,
.chat-wrap.memo-cat .message::after,
.chat-wrap.memo-tulip .message::after,
.chat-wrap.memo-blossom .message::before,
.chat-wrap.memo-strawberry .message::after,
.chat-wrap.memo-bear .message::before,
.chat-wrap.memo-cloud .message::after,
.chat-wrap.memo-sprout .message::before,
.chat-wrap.memo-moon .message::after {
  z-index: calc(max(var(--layer-z-border, 4), var(--layer-z-bg, 1)) + 1) !important;
}
.chat-wrap .message-chat-content,
.chat-wrap .message-content { position: relative; z-index: var(--layer-z-text, 6) !important; }
.chat-wrap .message-chat-content {
  left: var(--chat-start-x, 0px);
  top: var(--chat-start-y, 0px);
  transform: none !important;
}

/* CSS flex gap does not accept negative values. Use a negative sibling margin
   when the selected spacing goes below the frame's built-in safe gap. */
.chat-wrap { --frame-gap-extra: 0px; }
.chat-wrap.concept-frame { --frame-gap-extra: 14px; }
.chat-wrap.stretch-safe-frame { --frame-gap-extra: 22px; }
.chat-wrap .chat-list {
  gap: max(calc(var(--gap) + var(--frame-gap-extra) + var(--ornament-clearance, 0px)), 0px) !important;
}
.chat-wrap .chat-list > .message + .message {
  margin-top: min(calc(var(--gap) + var(--frame-gap-extra) + var(--ornament-clearance, 0px)), 0px);
}

/* 네임태그 컨트롤 UI 스타일 */
.nickname-tag-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 8px 0 12px;
}
.nickname-tag-choice {
  background: #20212c;
  border: 1px solid #363748;
  border-radius: 8px;
  padding: 8px;
  color: #c9c6d6;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.nickname-tag-choice:hover {
  background: #282938;
  border-color: #8b73dd;
}
.nickname-tag-choice.selected {
  background: #2b2542;
  border-color: #a78bfa;
  color: #f3efff;
}
.nickname-preset-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 10px;
}
.nickname-preset-btn {
  background: #20212c;
  border: 1px solid #363748;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 10px;
  color: #c9c6d6;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nickname-preset-btn:hover {
  background: #282938;
  border-color: #8b73dd;
  color: #fff;
}

.chat-wrap.has-text-stroke .message-content span,
.chat-wrap.has-text-stroke .message-content strong,
.chat-wrap.has-text-stroke .nickname-text {
  -webkit-text-stroke: var(--text-stroke-width, 1.5px) var(--text-stroke-color, #000000);
  paint-order: stroke fill;
}

.chat-wrap.has-text-shadow .message-content,
.chat-wrap.has-text-shadow .message-content *,
.chat-wrap.has-text-shadow .nickname-tag,
.chat-wrap.has-text-shadow .nickname-tag *,
.chat-wrap.has-text-shadow .message-name-label {
  text-shadow: var(--custom-text-shadow, 1px 2px 3px rgba(0, 0, 0, .45)) !important;
}