:root{--ink:#16181d;--muted:#8b8e98;--purple:#8b47e8;--line:#e9e9ef}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:'Pretendard Variable','Apple SD Gothic Neo',sans-serif;-webkit-font-smoothing:antialiased}button,textarea,input,a{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{cursor:default}button,a,textarea{ -webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #9a67ef;outline-offset:4px}button{transition:background .18s,transform .18s,box-shadow .18s}button:hover:not(:disabled){filter:brightness(.98)}textarea{resize:none;outline:none;border:0;color:inherit}textarea::placeholder{color:#989ba4}h1,h2,h3,p{margin:0}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.site-bar{height:32px;background:#f7f8fa}.site-bar nav{height:100%;display:flex;padding-left:60px;gap:4px}.site-bar button{font-family:'Apple SD Gothic Neo',sans-serif;font-size:12px;padding:0 12px;color:#555e6e}.site-bar button.selected{background:#fff;color:#212a3d}.header{height:72px;display:flex;align-items:center;gap:48px;padding:0 60px;background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 1px 0 #00000008}.logo{display:flex;align-items:center;flex-shrink:0}.logo img{display:block}.main-nav{display:flex;align-items:center;gap:24px;height:100%;flex:1;white-space:nowrap}.main-nav button{font-family:'Apple SD Gothic Neo',sans-serif;font-size:14px;padding:12px 0;display:flex;gap:9px;align-items:center}.chevron{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);display:inline-block;vertical-align:3px}.auth-nav{display:flex;align-items:center;gap:8px;white-space:nowrap}.auth-nav button{font-family:'Apple SD Gothic Neo',sans-serif;font-size:14px}.icon-button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:8px}.icon-button:hover{background:#16181d08}.globe{margin-right:8px}.login,.signup{padding:11px 16px;border-radius:4px;min-height:38px}.login{background:#f5f5f5}.signup{background:#00d4da;color:#fff}.mobile-menu{display:none}.nav-dropdown{position:absolute;top:calc(100% + 8px);left:245px;background:white;border:1px solid var(--line);box-shadow:0 12px 40px #20243d1f;border-radius:16px;padding:12px;min-width:240px;max-height:70vh;overflow:auto;z-index:30}.nav-dropdown button{display:block;padding:12px 16px;text-align:left;width:100%;border-radius:8px}.nav-dropdown button:hover{background:#f5f0ff}.hero{background:linear-gradient(135deg,#c5e8ff,#ffdcfa);padding:64px 24px 88px;display:flex;justify-content:center}.hero-card{width:1036px;height:520px;border:2px solid #ffffffa0;border-radius:40px;background:#23242a05;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:28px}.hero-left{display:flex;flex-direction:column;justify-content:space-between;min-width:0}.hero-left h1{font-size:56px;line-height:80px;letter-spacing:-1.2px;font-weight:700;padding:8px 0 0 16px;white-space:nowrap}.hero-visual{min-width:0;height:100%;border-radius:24px;overflow:hidden}.hero-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}.hero-composer{padding-bottom:4px}.hero-selector{height:40px;display:flex;align-items:center;margin-bottom:16px;gap:4px;padding:0 4px}.hero-selector .icon-button{width:40px}.hero-selector h3{font-size:18px;font-weight:600;line-height:26px}.hero-selector svg{width:20px;height:20px}.prompt-box{min-height:120px;background:white;border-radius:20px;display:flex;align-items:flex-end;gap:12px;padding:8px 16px 8px 8px;box-shadow:0 0 0 1px #00000002}.prompt-box:focus-within{box-shadow:0 0 0 2px #a575e955}.prompt-field{flex:1;min-width:0}.prompt-field textarea{width:100%;height:64px;background:transparent;display:block;padding:2px 10px;font-size:18px;line-height:28px}.upload-row{display:flex;gap:8px;height:40px;align-items:center;padding-left:8px}.upload-row>span{font-size:12px;font-weight:600;color:#9971cf;background:#f6f0ff;padding:2px 5px;border-radius:3px}.upload-button{border:1px solid #e8e8ed;border-radius:8px;padding:7px 10px;display:flex;gap:4px;align-items:center;font-size:14px;height:32px}.upload-button svg{width:18px;height:18px;stroke:#6a6e7a;stroke-width:1.3}.generate-button{background:#c989e5;color:white;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:4px}.generate-button:hover{background:#aa69d5}.generate-button span{display:none}.generate-button svg{width:28px;height:28px;stroke-width:2}.attachment-chip{display:flex;align-items:center;gap:8px;margin:4px 10px;font-size:12px;background:#f5f0ff;border-radius:8px;padding:4px}.attachment-chip img{width:32px;height:32px;object-fit:cover;border-radius:4px}.attachment-chip button{margin-left:auto;padding:4px}.tools{padding:48px 24px 64px;background:#fff}.tools-inner{max-width:1360px;margin:auto}.tools h2{text-align:center;font-size:40px;line-height:48px;letter-spacing:-.6px;font-weight:700;padding:24px 0 0}.tools h2 span{color:transparent;background:linear-gradient(90deg,#1ac5ea,#ac89d7);background-clip:text}.main-tools{display:flex;justify-content:center;gap:16px;margin:32px auto 48px;padding-bottom:16px}.main-tool{width:232px;height:304px;border-radius:24px;background:#405bbf1a;padding:40px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:12px}.main-tool:hover{transform:translateY(-5px);box-shadow:0 10px 28px #424ba018}.main-tool>img{width:144px;height:144px;object-fit:contain}.main-tool h3{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.3px}.round-arrow{display:flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:50%;background:#fff}.round-arrow svg{width:24px;height:24px;stroke:#505a72}.category-tabs{display:flex;justify-content:center;gap:12px;margin:0 auto 24px;max-width:920px;flex-wrap:wrap}.category-tab{height:44px;padding:0 16px;border-radius:22px;font-size:16px;color:#565960;border:1px solid #e5e5eb;background:#fff;white-space:nowrap}.category-tab.active{background:#23242a;color:#fff;border-color:#23242a}.tool-grid{max-width:800px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px;row-gap:32px}.tool-card{text-align:left;display:block;padding:0;min-width:0}.tool-card>img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;display:block;transition:transform .2s,box-shadow .2s;background:#f0f0f5}.tool-card:hover>img{transform:translateY(-4px);box-shadow:0 8px 24px #20243d1c}.tool-card h3{margin-top:16px;font-size:18px;line-height:26px;font-weight:600;letter-spacing:-.15px}.suggest{background:linear-gradient(135deg,#c5e8ff,#ffdcfa);padding:88px 24px}.suggest-inner{max-width:1036px;margin:auto;display:flex;flex-direction:column;gap:16px;align-items:flex-start}.suggest h2{font-size:24px;font-weight:600;line-height:32px;margin-bottom:0}.mobile-break{display:none}.suggest-border{padding:2px;background:linear-gradient(90deg,#1ac5ea,#ff67cb);border-radius:16px;width:100%}.suggest textarea{display:block;width:100%;height:100px;padding:10px 16px;background:#fff;border-radius:14px;font-size:18px;line-height:28px}.primary{padding:12px 24px;border-radius:10px;min-height:48px;background:#8b47e8;color:white;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.primary:hover{background:#7735ce}.primary:disabled{background:#a5a5b1;color:#fff;opacity:.6}.suggest-button{align-self:flex-end;min-width:120px}.secondary{padding:12px 24px;min-height:48px;border:1px solid #e1dbe9;border-radius:10px;background:#fff;color:#554b66;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.secondary:hover{background:#f9f6fc}footer{background:#5862761a;padding:60px 64px 32px;font-family:'Apple SD Gothic Neo','Pretendard Variable',sans-serif;color:#555d6d}.footer-main{max-width:1200px;margin:auto;display:grid;grid-template-columns:1.9fr 1fr 1.15fr 1fr;gap:48px}.footer-logo{filter:grayscale(1);opacity:.7;margin-bottom:22px}.company p{font-size:12px;line-height:23px;margin-bottom:12px}.company button{font-size:11px;text-decoration:underline;padding:0 4px}.company strong{font-size:14px}.certificates{display:flex;align-items:center;gap:18px;margin-top:32px}.certificates img{height:40px;width:auto;object-fit:contain}.footer-column h3{font-size:14px;margin:0 0 20px;font-weight:600}.footer-column button{display:block;font-size:13px;margin:0 0 15px;padding:0;text-align:left;color:#636b7b}.footer-column button:hover{text-decoration:underline}.footer-bottom{max-width:1200px;margin:48px auto 0;display:flex;justify-content:space-between;gap:24px;border-top:1px solid #58627615;padding-top:24px;font-size:12px}.footer-bottom nav{display:flex;gap:20px;flex-wrap:wrap}.footer-bottom button{padding:0;font-size:12px}.footer-bottom>button{white-space:nowrap}.demo-footer{max-width:1200px;margin:24px auto 0;font-size:11px;color:#8e93a0}dialog{border:none;border-radius:24px;padding:40px;width:min(760px,calc(100vw - 40px));max-height:90vh;overflow:auto;box-shadow:0 24px 100px #26203645;color:var(--ink)}dialog::backdrop{background:#14122270;backdrop-filter:blur(5px)}.modal-close{position:absolute;right:16px;top:16px;z-index:1}.modal-close svg{width:20px}.dialog-tool{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start;margin-top:12px}.dialog-tool>img{width:100%;border-radius:16px;object-fit:cover;aspect-ratio:1}.dialog-tool h2,dialog h2{font-size:26px;line-height:36px;margin-bottom:12px;padding-right:16px}.dialog-form{display:flex;flex-direction:column;gap:16px}.dialog-form textarea,dialog textarea{width:100%;min-height:120px;border:1px solid #e2dce9;border-radius:12px;padding:14px;font-size:15px;line-height:24px;background:#fbfaff;box-sizing:border-box}.dialog-form textarea:focus{border-color:#9e70e9}.dialog-form p,dialog p{font-size:14px;line-height:23px;color:#6c6576;margin-bottom:12px}dialog input[type=file]{width:100%;font-size:12px;border:1px dashed #c5b6d6;padding:14px;border-radius:10px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}.demo-label{font-size:12px;color:#8a53ca;background:#f4edff;border-radius:20px;padding:6px 12px;display:inline-block;margin-bottom:14px}.result-image{display:block;max-width:100%;max-height:48vh;object-fit:contain;border-radius:16px;margin:16px auto}.loading-spinner{border:3px solid #eee4fb;border-top-color:#a16be7;border-radius:50%;width:48px;height:48px;margin:36px auto;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-options{display:flex;flex-direction:column;gap:12px;margin-top:24px}.auth-options button{width:100%}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,15px);background:#282331;color:#fff;padding:14px 22px;border-radius:12px;box-shadow:0 6px 30px #0002;font-size:14px;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px);text-align:center}.toast.show,.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1700px){.header{padding:0 80px}.site-bar nav{padding-left:80px}}
@media(max-width:1150px){.header{padding:0 24px;gap:24px}.main-nav{gap:18px}.main-nav button{font-size:13px}.hero-left h1{font-size:48px;line-height:70px}.footer-main{gap:24px}.hero-card{width:100%;max-width:1036px}}
@media(max-width:900px) and (min-width:701px){.main-nav button:nth-last-child(-n+2){display:none}.header{gap:20px}.hero{padding:48px 24px 64px}.hero-card{height:460px;gap:20px}.hero-left h1{font-size:40px;line-height:64px}.prompt-field textarea{font-size:16px}.tool-grid{max-width:740px}.category-tabs{gap:8px}.category-tab{padding:0 12px;font-size:14px}.footer-main{grid-template-columns:1.4fr 1fr 1fr}.footer-column:last-child{display:none}}
@media(max-width:700px){.site-bar{height:32px}.site-bar nav{padding-left:12px;gap:0;justify-content:flex-start}.site-bar button{padding:0 12px;font-size:11px}.header{height:64px;padding:0 16px;gap:8px;position:sticky}.mobile-menu{display:flex;width:24px;height:36px;padding:0;margin-right:8px}.mobile-menu svg{width:20px;height:20px}.logo img{width:126px;height:auto}.main-nav,.globe,.signup{display:none!important}.auth-nav{margin-left:auto}.login{background:#5862761a;padding:10px 12px;border-radius:2px;font-size:12px!important}.nav-dropdown{left:16px;right:16px;min-width:0}.hero{padding:0;background:linear-gradient(135deg,#c5e8ff,#ffdcfa)}.hero-card{display:flex;flex-direction:column;position:relative;border:0;border-radius:0;background:transparent;padding:0 20px 32px;width:100%;height:auto;gap:16px}.hero-left{display:contents}.hero-left h1{order:0;padding:24px 16px 0;font-size:32px;line-height:48px;letter-spacing:-.5px}.hero-visual{order:1;margin-top:0;align-self:center;border-radius:16px;width:220px;height:220px;flex-shrink:0}.hero-composer{order:2;padding:0}.hero-selector{justify-content:center;margin-bottom:16px;height:32px;gap:4px}.hero-selector h3{font-size:18px;line-height:26px}.hero-selector .icon-button{height:32px;width:32px}.hero-selector svg{width:18px;height:18px}.prompt-box{padding:8px 8px 0;min-height:176px;flex-direction:column;gap:12px;border-radius:16px;align-items:stretch}.prompt-field textarea{height:64px;font-size:16px;line-height:26px;padding:8px}.upload-row{height:32px;padding-left:8px}.generate-button{width:calc(100% + 16px);margin:0 -8px;height:44px;border-radius:0 0 16px 16px;background:#c791ec;gap:6px;font-size:14px;font-weight:600;min-height:44px}.generate-button svg{display:none}.generate-button span{display:inline}.upload-button{height:32px;font-size:14px}.upload-row>span{font-size:12px}.tools{padding:32px 20px 48px}.tools h2{font-size:24px;line-height:32px;padding:0;max-width:260px;white-space:normal;margin:0 auto 28px;text-align:center;letter-spacing:-.4px}.main-tools{display:none}.category-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow:auto;margin:0 -20px 24px;padding:0 20px 4px;gap:8px;scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.category-tab{font-size:14px;height:36px;padding:0 14px;border-radius:20px;flex-shrink:0}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.tool-card>img{border-radius:12px}.tool-card h3{font-size:16px;line-height:24px;font-weight:500;margin-top:8px}.suggest{padding:40px 20px}.suggest-inner{gap:16px}.suggest h2{font-size:20px;line-height:30px}.mobile-break{display:block}.suggest textarea{font-size:16px;height:112px;line-height:24px;padding:12px 14px}.suggest-button{width:100%}footer{padding:36px 20px 24px}.footer-main{display:flex;flex-wrap:wrap;gap:32px 24px}.company{width:100%}.company p{font-size:11px;line-height:21px}.footer-logo{margin-bottom:16px}.footer-column{flex:1;min-width:92px}.footer-column h3{font-size:13px}.footer-column button{font-size:11px;margin-bottom:13px}.footer-bottom{margin-top:24px;flex-direction:column;gap:24px}.footer-bottom nav{gap:12px 16px}.footer-bottom button{font-size:11px}.footer-bottom>button{align-self:flex-start}.certificates{margin-top:20px}.demo-footer{line-height:18px}dialog{padding:28px 20px;border-radius:20px;max-height:88vh}.dialog-tool{display:flex;flex-direction:column;gap:20px}.dialog-tool>img{width:160px;align-self:center}.dialog-tool h2,dialog h2{font-size:23px}.dialog-form{width:100%}.modal-actions .primary,.modal-actions .secondary{flex:1}.toast{font-size:13px;width:max-content;bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition:none!important}}

/* Tool previews are images, not the legacy two-column dialog wrapper. */
img.dialog-tool{display:block;width:240px;max-width:100%;height:auto;object-fit:cover;border-radius:16px;margin:12px auto 20px}
@media(max-width:700px){img.dialog-tool{width:160px}}


/* ---- 데모 전용: 우하단 개발 도구(A/B 토글 · 코드 보기). 실제 구현에는 넣지 않는다 ---- */
.dev-tools{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;gap:8px}
.dev-tools button{height:40px;padding:0 14px;border-radius:999px;background:#1e2124;color:#fff;font-size:13px;font-weight:600;box-shadow:0 6px 20px #0003;display:inline-flex;align-items:center;gap:6px}
.dev-tools button:hover{background:#34373d;filter:none}
.variant-switch{display:inline-flex;align-items:center;gap:2px;height:40px;padding:0 4px 0 12px;border-radius:999px;background:#1e2124;color:#fff;box-shadow:0 6px 20px #0003}.variant-switch .vs-label{font-size:12px;color:#b9bcc6;margin-right:6px}.dev-tools .variant-switch button{height:30px;padding:0 12px;border-radius:999px;background:transparent;color:#c9ccd6;font-size:13px;font-weight:600;box-shadow:none}.dev-tools .variant-switch button:hover{background:#34373d}.dev-tools .variant-switch button[aria-pressed="true"]{background:#8b47e8;color:#fff}
.code-panel{position:fixed;right:20px;bottom:72px;z-index:95;width:min(640px,calc(100vw - 40px));max-height:min(72vh,760px);display:flex;flex-direction:column;background:#fff;border:1px solid #e4e2ea;border-radius:16px;box-shadow:0 24px 80px #20183a40;overflow:hidden}
.code-head{display:flex;align-items:center;gap:8px;padding:12px 12px 12px 16px;border-bottom:1px solid #eeecf3;font-size:13px;color:#4b4557}
.code-head strong{font-size:14px;color:#1e2124;margin-right:auto;white-space:nowrap}.code-head span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-tabs{display:flex;gap:4px;padding:10px 12px 0}
.code-tabs button{padding:6px 12px;border-radius:8px;font-size:13px;color:#6b6478;border:1px solid transparent}
.code-tabs button.active{background:#f4edff;color:#5f2fc0;border-color:#e2d3fb}
.code-note{margin:10px 16px 0;font-size:12px;line-height:18px;color:#6b6478;background:#f8f7fb;border-radius:8px;padding:8px 10px}
.code-body{margin:10px 12px 12px;flex:1;min-height:0;overflow:auto;background:#15131d;border-radius:10px}
.code-body pre{margin:0;padding:14px 16px;font:12px/18px ui-monospace,SFMono-Regular,Menlo,monospace;color:#e8e6f0;white-space:pre;tab-size:2}
.code-actions{display:flex;gap:8px;justify-content:flex-end;padding:0 12px 12px}
.code-actions button{height:36px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:600}
.code-actions .copy{background:#8b47e8;color:#fff}.code-actions .copy:hover{background:#7735ce}
.code-actions .close{background:#f1eff5;color:#4b4557}
@media(max-width:700px){.dev-tools{right:12px;bottom:12px}.dev-tools button{height:36px;padding:0 12px;font-size:12px}.code-panel{right:12px;left:12px;width:auto;bottom:60px}}

/* === connector-banner: start === (여기부터 파일 끝까지가 배너 구현 CSS) */
/* 커넥터 홍보 배너 — 미리클 메인 「미리클로 무엇이든 만들어보세요」 제목 위 (Figma AIP-mcp Page 6 · S5-b 12715:287 꼴, 세 카드 폭) */
.connector-banner{position:relative;display:flex;align-items:center;gap:24px;width:1036px;max-width:100%;margin:0 auto 56px;padding:26px 32px;border-radius:20px;background:#1d1a3c;color:#fff;text-align:left;overflow:hidden;isolation:isolate;box-shadow:0 10px 30px #2a1f6a24;transition:transform .18s,box-shadow .18s}
.connector-banner:hover{filter:none;transform:translateY(-3px);box-shadow:0 16px 36px #2a1f6a33}
.connector-banner:focus-visible{outline-offset:3px}
.cb-glow{position:absolute;inset:-24px;z-index:-1;filter:blur(22px);background:
 radial-gradient(28% 150% at 12% 50%,rgba(123,92,255,.62),rgba(123,92,255,.28) 45%,transparent 100%),
 radial-gradient(20% 120% at 38% 100%,rgba(157,123,255,.36),rgba(157,123,255,.16) 45%,transparent 100%),
 radial-gradient(21% 130% at 54% 90%,rgba(43,212,240,.42),rgba(43,212,240,.19) 45%,transparent 100%),
 radial-gradient(20% 130% at 75% 40%,rgba(200,92,255,.34),rgba(200,92,255,.15) 45%,transparent 100%),
 radial-gradient(28% 150% at 96% 30%,rgba(255,92,168,.52),rgba(255,92,168,.23) 45%,transparent 100%)}
.cb-chat{position:relative;flex:0 0 232px;height:100px}
.cb-bubble{position:absolute;right:0;top:58px;display:inline-block;padding:9px 16px;border-radius:22px 22px 2px 22px;background:#fff;color:#1e2124;font-size:15px;line-height:22px;font-weight:500;white-space:nowrap;box-shadow:0 4px 12px #0000001f}
.cb-file{position:absolute;right:0;top:0;display:flex;align-items:center;gap:10px;width:100%;height:50px;padding:0 12px 0 9px;border-radius:16px;background:#d6def7;color:#1e2124;box-shadow:0 4px 12px #0000001f}
.cb-file-icon{width:32px;height:32px;flex-shrink:0;fill:none;stroke:none}
.cb-file-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.cb-file-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-file-meta{font-size:11px;color:#6b6e78;margin-top:2px}
.cb-sparkle{position:absolute;left:228px;top:-16px;width:20px;height:20px;fill:#e0f690;stroke:none}
.cb-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cb-title{display:block;font-size:26px;line-height:34px;font-weight:700;letter-spacing:-.4px;word-break:keep-all}
.cb-title em{font-style:normal;color:#efff94}
.cb-desc{display:block;font-size:16px;line-height:24px;color:#cfd0e8;word-break:keep-all}
.cb-button{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;height:56px;padding:0 24px 0 18px;border-radius:999px;background:#1e2124;border:1px solid #c4b5ffd9;box-shadow:0 0 0 3px #c4b5ff2e,0 8px 22px #00000040;font-size:17px;line-height:24px;font-weight:600;white-space:nowrap;transition:box-shadow .18s}
.connector-banner:hover .cb-button{box-shadow:0 0 0 4px #c4b5ff47,0 0 24px #9d7bff66,0 6px 18px #00000040}
.cb-logos{display:inline-flex;gap:6px}
.cb-logos svg{width:26px;height:26px;fill:none;stroke:none}.connector-hosts svg{width:20px;height:20px;fill:none;stroke:none}
.connector-hosts{display:flex;flex-direction:column;gap:12px;margin:8px 0 16px}
.connector-host{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid #e2dce9;border-radius:14px;background:#fbfaff}
.connector-host svg{width:36px;height:36px;flex-shrink:0}
.connector-host .host-text{flex:1;min-width:0}
.connector-host h3{font-size:16px;line-height:24px;font-weight:600}
.connector-host p{margin:0;font-size:13px;line-height:20px}
.connector-host .primary{min-height:40px;padding:8px 16px;min-width:96px}
.connector-host .primary.connected{background:#eaf7f0;color:#1f7a4d;opacity:1}
.connector-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#f4f2f8;border-radius:8px;padding:10px 12px;color:#5b5466;overflow-wrap:anywhere}
.connector-reset{align-self:flex-start;font-size:13px;color:#8a53ca;text-decoration:underline;padding:4px 0}
@media(max-width:1150px){.connector-banner{width:min(1036px,100%)}}
/* 배너 폭 920 미만(뷰포트 701~967): 글 칸이 좁아져 제목이 낱말마다 꺾이므로 버튼을 아래 줄로 내린다 */
@media(max-width:967px) and (min-width:701px){.connector-banner{display:grid;grid-template-columns:minmax(0,1fr) 232px;grid-template-areas:"text chat" "button chat";column-gap:24px;row-gap:18px;align-items:center;padding:24px 28px}.cb-text{grid-area:text;align-self:end}.cb-button{grid-area:button;justify-self:start;align-self:start}.cb-chat{grid-area:chat;align-self:center}.cb-br{display:none}.cb-title{white-space:nowrap;font-size:clamp(18px,calc((100vw - 360px)/18.5),26px);line-height:1.3}.cb-desc{white-space:nowrap;font-size:clamp(13px,calc((100vw - 360px)/22),16px)}}
@media(max-width:700px){.connector-banner{display:flex;flex-direction:column;align-items:stretch;gap:16px;width:100%;margin:0 0 32px;padding:20px;border-radius:16px}.cb-chat{display:block;flex:none;width:232px;height:100px;align-self:flex-end;order:-1;margin-top:4px}.cb-title{font-size:20px;line-height:28px}.cb-desc{font-size:14px;line-height:20px}.cb-button{justify-content:center;height:50px;font-size:15px}.cb-logos svg{width:22px;height:22px}.connector-host{flex-wrap:wrap}.connector-host .primary{width:100%}}
/* 580~700: 제목·부제 왼쪽, 칩·말풍선 오른쪽 한 줄, 버튼은 아래 가득 */
@media(max-width:700px) and (min-width:580px){.connector-banner{display:grid;grid-template-columns:minmax(0,1fr) 232px;grid-template-areas:"text chat" "button button";column-gap:16px;row-gap:16px;align-items:center}.cb-text{grid-area:text}.cb-desc{font-size:13.5px;line-height:19px}.cb-chat{grid-area:chat;align-self:center;margin-top:0}.cb-button{grid-area:button}}
/* B안: 세 카드 아래에 둘 때 (body[data-banner="B"]) — 폭을 세 카드(728)에 맞추고, 글+버튼 왼쪽 · 그래픽 오른쪽 */
body[data-banner="B"] .tools-inner .main-tools{margin-bottom:0;padding-bottom:0}
body[data-banner="B"] .connector-banner{margin:24px auto 48px}
@media(min-width:701px){body[data-banner="B"] .connector-banner{width:728px;display:grid;grid-template-columns:minmax(0,1fr) 232px;grid-template-areas:"text chat" "button chat";column-gap:24px;row-gap:18px;align-items:center;padding:24px 28px}body[data-banner="B"] .cb-text{grid-area:text;align-self:end;flex:none}body[data-banner="B"] .cb-button{grid-area:button;justify-self:start;align-self:start;margin-left:0}body[data-banner="B"] .cb-chat{grid-area:chat;align-self:center}body[data-banner="B"] .cb-br{display:inline}body[data-banner="B"] .cb-title{white-space:normal;font-size:26px;line-height:34px}body[data-banner="B"] .cb-desc{white-space:normal;font-size:16px;line-height:24px}}
@media(max-width:700px){body[data-banner="B"] .connector-banner{margin:0 0 28px}}
/* === connector-banner: end === */