.sb-home, .sb-chat {
    --sb-ink: #14252a;
    --sb-muted: #66737a;
    --sb-line: #e0e7e6;
    --sb-coral: #d96850;
    --sb-rose: #e05555;
    --sb-rose-dark: #ca4d4d;
}
.sb-home {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 740px;
    color: var(--sb-ink);
    background: #fefafa;
    font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.sb-home, .sb-home * { box-sizing: border-box; }
.sb-home__glow {
    position: absolute;
    top: -310px;
    right: -210px;
    width: 750px;
    height: 750px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 85, 85, .015), rgba(224, 85, 85, 0) 70%);
    pointer-events: none;
}
.sb-home__wrap {
    position: relative;
    max-width: 1152px;
    margin: 0 auto;
    padding: 58px 28px 64px;
}
.sb-intro { margin-bottom: 30px; }
.sb-intro__brandline { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; row-gap:4px; }
.sb-intro__since { color:#42636a; font-size:11px; font-weight:700; letter-spacing:.14em; white-space:nowrap; }
.sb-intro h1 {
    margin: 0;
    font-size: clamp(38px, 4.8vw, 58px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .045em;
    word-break: keep-all;
}
.sb-intro__text {
    margin: 17px 0 0;
    color: var(--sb-muted);
    font-size: 15px;
    line-height: 1.6;
}
.sb-home__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}
.sb-product, .sb-chat {
    min-width: 0;
    border: 1px solid rgba(33, 65, 67, .1);
    border-radius: 25px;
    box-shadow: 0 18px 48px rgba(22, 52, 55, .07);
    overflow: hidden;
}
.sb-product {
    display: flex;
    flex-direction: column;
    padding: 27px 30px 28px;
    background: #fff;
}
.sb-card-top, .sb-chat__header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sb-card-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}
.sb-product .sb-card-kicker { color: #758184; }
.sb-product__copy { margin-top: 0; }
.sb-product__type {
    margin: 0 0 8px;
    color: var(--sb-coral);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .04em;
}
.sb-product h2 {
    margin: 0;
    color: #15262b;
    font-size: clamp(27px, 2.55vw, 36px);
    font-weight: 800;
    line-height: 1.24;
    letter-spacing: -.052em;
    word-break: keep-all;
}
.sb-product__copy > p:last-child {
    margin: 14px 0 0;
    color: #657379;
    font-size: 13px;
    line-height: 1.8;
    word-break: keep-all;
}
.sb-product__visual {
    display: block;
    height: 236px;
    margin: 18px -9px 0;
    border-radius: 18px;
    background: #faf9f7;
    overflow: hidden;
}
.sb-product__visual img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center 70%;
}
.sb-product__bottom { margin-top: auto; padding-top: 16px; }
.sb-product__features {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.sb-product__features span {
    padding: 7px 10px;
    border: 1px solid #e2e9e7;
    border-radius: 999px;
    color: #53666a;
    font-size: 11px;
    font-weight: 700;
}
.sb-product__button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    min-height: 54px;
    padding: 0 19px;
    border-radius: 11px;
    background: var(--sb-rose);
    color: #fff !important;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
}
.sb-product__button:hover, .sb-product__button:focus, .sb-product__button:active { background:var(--sb-rose); transform:none; }
.sb-product__button span { flex:none; font-size: 19px; font-weight: 400; }
.sb-chat { display: flex; flex-direction: column; background: #fff; }
.sb-chat__header {
    padding: 27px 29px 25px;
    background: linear-gradient(135deg, #173940, #285f62);
    color: #fff;
}
.sb-chat__header .sb-card-kicker { color: #a8ceca; }
.sb-chat__status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #e1f0ee;
    font-size: 11px;
    font-weight: 700;
}
.sb-chat__status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #80d5ad;
    box-shadow: 0 0 0 4px rgba(128, 213, 173, .14);
}
.sb-chat__identity { display: flex; gap: 15px; align-items: center; margin-top: 27px; }
.sb-chat__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 53px;
    height: 53px;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 17px;
    background: rgba(255,255,255,.1);
}
.sb-chat__icon svg { width: 27px; height: 27px; }
.sb-chat h2 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.04em;
}
.sb-chat__identity p { margin: 0; color: #c5dfdc; font-size: 12px; }
.sb-chat__body { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 20px 25px 18px; }
.sb-chat__messages {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 256px;
    overflow-y: auto;
    padding: 1px 3px 7px;
    scrollbar-color: #bdcbc9 transparent;
}
.sb-message { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.sb-message--user { justify-content: flex-end; }
.sb-message__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 25px;
    height: 25px;
    border-radius: 9px;
    background: #e4f0ed;
    color: #356b70;
    font-size: 12px;
    font-weight: 900;
}
.sb-message__content { max-width: 84%; }
.sb-message__bubble {
    max-width: 84%;
    padding: 13px 15px;
    border-radius: 4px 15px 15px 15px;
    background: #f0f4f3;
    color: #314448;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.sb-message__content .sb-message__bubble { max-width: 100%; }
.sb-message--user .sb-message__bubble {
    border-radius: 15px 15px 4px 15px;
    background: #dfecea;
    color: #183f44;
}
.sb-message--error .sb-message__bubble { background: #fff1ec; color: #8a4d3d; }
.sb-message__sources { margin: 7px 0 0; padding: 0 0 0 3px; list-style: none; }
.sb-message__sources li { margin-top: 4px; }
.sb-message__sources a {
    color: #386a70;
    font-size: 11px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sb-chat__suggestions { display: flex; gap: 6px; flex-wrap: wrap; margin: 11px 0 13px; }
.sb-chat__suggestions button {
    padding: 7px 10px;
    border: 1px solid #dce6e4;
    border-radius: 999px;
    background: #fff;
    color: #436268;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.sb-chat__form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-height: 54px;
    padding: 7px 7px 7px 15px;
    border: 1px solid #cad8d5;
    border-radius: 13px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.sb-chat__form textarea {
    flex: 1;
    width: 100%;
    min-height: 36px;
    max-height: 114px;
    padding: 7px 0;
    resize: none;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    color: #21373b;
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
}
.sb-chat__form textarea::placeholder { color: #91a09f; }
.sb-chat__send {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 9px;
    background: #1c4b51;
    color: #fff;
    cursor: pointer;
}

.sb-chat__send:disabled { opacity: .48; cursor: wait; }
.sb-chat__send svg { width: 18px; height: 18px; }
.sb-chat__note {
    margin: 10px 0 0;
    color: #91a09f;
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}
.sb-home__links { display: flex; justify-content: center; gap: 26px; margin-top: 28px; }
.sb-home__links a {
    color: #53696e;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.sb-home__links a:hover, .sb-home__links a:focus { color: #1b4a50; text-decoration: underline; }
.sb-home__links span { margin-left: 3px; }
.sb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 850px) {
    .sb-home__wrap { padding-top: 42px; }
    .sb-home__grid { grid-template-columns: 1fr; max-width: 610px; margin: 0 auto; }
    .sb-intro { max-width: 610px; margin: 0 auto 28px; }
    .sb-product__visual { height: 275px; }
}
@media (max-width: 540px) {
    .sb-home__wrap { padding: 37px 15px 46px; }
    .sb-intro h1 { font-size: clamp(30px, 8.8vw, 38px); }
    .sb-intro__text { font-size: 13px; }
    .sb-home__grid { gap: 14px; }
    .sb-product, .sb-chat { border-radius: 19px; }
    .sb-product { padding: 22px 20px 21px; }
    .sb-product__copy { margin-top: 0; }
    .sb-product h2 { font-size: 27px; }
    .sb-product__visual { height: 215px; margin-left: -7px; margin-right: -7px; }
    .sb-chat__header { padding: 22px 20px; }
    .sb-chat__identity { margin-top: 20px; }
    .sb-chat h2 { font-size: 20px; }
    .sb-chat__body { padding: 17px 16px; }
    .sb-chat__messages { height: 260px; }
    .sb-home__links { gap: 16px; flex-wrap: wrap; margin-top: 22px; }
}

.sb-message__usage{margin-top:10px;padding:10px 12px;border:1px solid #dbe2ea;border-radius:10px;background:#f7f9fc;font-size:12px;line-height:1.55;color:#526174;overflow-wrap:anywhere}
.sb-message__usage strong{display:block;margin-bottom:3px;color:#27394c;font-size:12px}
.sb-message__usage table{width:100%;border-collapse:collapse;margin:6px 0;font-size:11px}
.sb-message__usage th,.sb-message__usage td{padding:3px 4px;text-align:right;border-bottom:1px solid #e6ebf1}
.sb-message__usage th:first-child,.sb-message__usage td:first-child{text-align:left}
.sb-message__usage-note{font-size:10px;color:#6c7b8e}


/* 쉐-GPT: roomy dark conversation surface. */
.sb-home__grid { align-items:start; }
.sb-chat, .sb-chat * { box-sizing:border-box; }
.sb-chat {
    height:clamp(740px,82vh,960px); min-height:0;
    background:#212121; color:#ececec; border-color:#383838;
    box-shadow:0 20px 50px rgba(0,0,0,.13);
}
.sb-chat__header {
    flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:24px 24px 18px; background:#212121; border-bottom:1px solid #333;
}
.sb-chat h2 { margin:0; color:#f5f5f5; font-size:32px; line-height:1.2; letter-spacing:-.045em; font-weight:700; }
.sb-chat__expand {
    flex:none; display:flex; align-items:center; gap:7px; padding:9px 11px;
    border:1px solid #505050; border-radius:10px; background:transparent; color:#ddd;
    font:inherit; font-size:12px; cursor:pointer; white-space:nowrap;
}
.sb-chat__expand svg { width:17px; height:17px; }


.sb-chat__body { flex:1; min-height:0; padding:22px 22px 20px; gap:20px; }
.sb-chat__messages { flex:1; min-height:0; height:auto; gap:25px; padding:0 3px 8px; scrollbar-color:#555 #212121; overscroll-behavior:contain; }
.sb-message { gap:0; align-items:flex-start; }
.sb-message__avatar { display:none; }
.sb-message__content { max-width:100%; }
.sb-message--assistant .sb-message__content { width:100%; }
.sb-message__bubble { max-width:100%; padding:2px 1px; border-radius:0; background:transparent; color:#ececec; font-size:15px; font-weight:400; line-height:1.85; }
.sb-message--user .sb-message__content { max-width:88%; }
.sb-message--user .sb-message__bubble { padding:11px 16px; border-radius:21px; background:#303030; color:#f4f4f4; line-height:1.65; }
.sb-message--error .sb-message__bubble { background:#432a2a; color:#ffd0c8; padding:12px 15px; border-radius:14px; }
.sb-message__sources a { color:#adcefa; font-size:12px; }
.sb-message__usage { background:#1b1b1b; border-color:#424242; color:#bdbdbd; }
.sb-message__usage strong { color:#eee; }
.sb-message__usage th,.sb-message__usage td { border-color:#383838; }
.sb-message__usage-note { color:#ababab; }
.sb-chat__form { flex:none; min-height:60px; padding:9px 10px 9px 18px; border:1px solid #454545; border-radius:28px; background:#303030; }

.sb-chat__form textarea { color:#f0f0f0; font-size:15px; }
.sb-chat__form textarea::placeholder { color:#aaa; }
.sb-chat__send { width:38px; height:38px; border-radius:50%; background:#f3f3f3; color:#171717; }

.sb-chat__send:disabled { opacity:.35; }
html.sb-chat-open, body.sb-chat-open { overflow:hidden !important; }
.sb-chat.sb-chat--expanded {
    position:fixed; inset:0; z-index:2147483000; width:100%; height:100vh; height:100dvh;
    min-height:0; margin:0; border:0; border-radius:0; font-family:"Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
}
.sb-chat--expanded .sb-chat__header { padding:calc(18px + env(safe-area-inset-top,0px)) 24px 18px; }
.sb-chat--expanded .sb-chat__body { width:100%; max-width:960px; margin:0 auto; padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)); }
@media (max-width:850px) {
    .sb-chat { height:calc(100vh - 24px); height:calc(100svh - 24px); min-height:480px; }
    .sb-chat__header { padding:20px 18px 16px; }
    .sb-chat h2 { min-width:0; font-size:26px; line-height:1.25; word-break:keep-all; overflow-wrap:anywhere; }
    .sb-chat__body { padding:18px 16px 16px; gap:16px; }
    .sb-chat__form textarea { font-size:16px; }
    .sb-chat--expanded .sb-chat__header { padding:calc(15px + env(safe-area-inset-top,0px)) 16px 15px; }
    .sb-chat--expanded .sb-chat__body { padding:16px 14px calc(12px + env(safe-area-inset-bottom,0px)); }
    .sb-chat--expanded .sb-chat__expand { padding:8px 9px; font-size:11px; }
}


/* Light theme and keyboard-safe expanded layout. */
.sb-chat { background:#fff; color:#202020; border-color:#e2e2e2; box-shadow:0 18px 48px rgba(22,52,55,.07); }
.sb-chat__header { background:#fff; border-color:#ececec; }
.sb-chat h2 { color:#171717; }
.sb-chat__expand { justify-content:center; width:44px; height:44px; padding:10px; border:0; background:transparent; color:#353535; border-radius:10px; }
.sb-chat__expand svg { width:23px; height:23px; }
.sb-home button, .sb-chat button, .sb-product__button { -webkit-tap-highlight-color:transparent; }
.sb-home button:focus, .sb-home button:focus-visible,
.sb-chat button:focus, .sb-chat button:focus-visible,
.sb-product__button:focus, .sb-product__button:focus-visible { outline:0; box-shadow:none; }
.sb-chat__expand:hover, .sb-chat__expand:focus, .sb-chat__expand:active { background:transparent; color:#353535; }
.sb-chat__send:hover, .sb-chat__send:focus, .sb-chat__send:active { background:#222; color:#fff; }
.sb-chat__suggestions button:hover, .sb-chat__suggestions button:focus, .sb-chat__suggestions button:active { background:transparent; border:0; text-decoration:none; }
/* Focusing the send button must not add a ring around its parent form. */
.sb-chat__form:focus-within { border-color:#e3e3e3; box-shadow:none; }



.sb-chat__messages { scrollbar-color:#c1c1c1 #fff; -webkit-overflow-scrolling:touch; overscroll-behavior-y:auto; overscroll-behavior-x:contain; }
.sb-message__bubble { color:#242424; }
.sb-message--user .sb-message__bubble { color:#222; background:#f1f1f1; }
.sb-message--error .sb-message__bubble { background:#fff1ec; color:#8a4d3d; }
.sb-message__sources a { color:#315e8f; }
.sb-message__usage { color:#59636e; background:#f7f9fb; border-color:#e0e5ea; }
.sb-message__usage strong { color:#27394c; }
.sb-message__usage th,.sb-message__usage td { border-color:#e3e8ee; }
.sb-message__usage-note { color:#697787; }
.sb-chat__form { margin:0; background:#f3f3f3; border-color:#e3e3e3; }

.sb-chat__form textarea { color:#222; }
.sb-chat__form textarea::placeholder { color:#858585; }
.sb-chat__send { color:#fff; background:#222; }

body.sb-chat-open { position:fixed; top:var(--sb-page-top,0px); left:0; right:0; width:100%; }
.sb-chat.sb-chat--expanded { display:grid; grid-template-rows:auto minmax(0,1fr); bottom:auto; }
.sb-chat--expanded .sb-chat__body { display:grid; grid-template-rows:minmax(0,1fr) auto; min-height:0; height:100%; overflow:hidden; }
.sb-chat--expanded .sb-chat__messages { height:auto !important; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.sb-chat--expanded .sb-chat__form { min-width:0; margin:0; }
@media (max-width:850px) {
    .sb-chat--expanded .sb-chat__expand { padding:10px; }
    .sb-chat--expanded .sb-chat__body { padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
}

/* Compact header and default panel; expanded layout keeps viewport sizing. */
.sb-chat:not(.sb-chat--expanded) { height:clamp(560px,68vh,720px); min-height:0; }
.sb-chat__header { position:relative; min-height:132px; justify-content:center; padding:24px 54px; gap:14px; }
.sb-chat__brand { display:flex; flex:0 1 auto; flex-direction:column; min-width:0; align-items:center; gap:9px; text-align:center; }
.sb-chat__logo { flex:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#fff1ef; color:var(--sb-rose); }
.sb-chat__logo svg { width:30px; height:30px; }
.sb-chat__expand { position:absolute; top:19px; right:16px; }
.sb-chat h2 { min-width:0; font-size:26px; line-height:1.25; word-break:keep-all; overflow-wrap:anywhere; }
.sb-chat--expanded .sb-chat__header { min-height:64px; padding:calc(10px + env(safe-area-inset-top,0px)) 64px 10px; }
.sb-chat--expanded .sb-chat__subtitle { display:none; }
.sb-chat--expanded .sb-chat__brand { gap:0; }
.sb-chat--expanded .sb-chat__expand { top:calc(10px + env(safe-area-inset-top,0px)); }
@media(max-width:850px) {
 .sb-chat:not(.sb-chat--expanded) { height:70vh; height:70svh; min-height:400px; max-height:640px; }
 .sb-chat__header { padding:20px 50px; }
 .sb-chat h2 { font-size:20px; }
}

/* The menu layer renders the same chat without the surrounding homepage. */
.sb-home--layer { min-height:0; padding:0; background:#fff; }
.sb-home--layer > .sb-home__glow,.sb-home--layer .sb-intro,.sb-home--layer .sb-product { display:none; }
.sb-home--layer .sb-home__wrap { width:100%; max-width:none; margin:0; padding:0; }
.sb-home--layer .sb-home__grid { display:block; }

.sb-chat__suggestions[hidden]{display:none!important}
.sb-chat__suggestions{margin:6px 0 8px}
.sb-chat__suggestions button{font-size:14px;font-weight:500;color:#333;background:#f5f5f5;border-color:#dedede;padding:10px 14px}

/* Source links share an icon with wrapping titles. */
.sb-message__sources a { display:inline-flex; align-items:flex-start; gap:5px; max-width:100%; }
.sb-message__sources .sb-source-icon { flex:none; width:14px; height:14px; margin-top:3px; }
.sb-message__sources a span { min-width:0; overflow-wrap:anywhere; }

/* A: quiet message-icon starter suggestions. */
.sb-question-prompts { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:16px 0 4px; }
.sb-question-prompts__label { color:#657077; font-size:12px; font-weight:400; line-height:1.5; }
.sb-chat__suggestions button {
    display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:44px;
    margin:0; padding:6px 0; border:0; border-radius:0; background:transparent; box-shadow:none;
    color:#172027; font:inherit; font-size:15px; font-weight:400; line-height:1.75; text-align:left; text-decoration:none;
}



.sb-chat__suggestions button span { min-width:0; overflow-wrap:anywhere; }
.sb-question-prompts .sb-prompt-icon { flex:none; width:17px; height:17px; color:#657077; }

@media(max-width:420px) {
 .sb-chat h2 { font-size:18px; }
 .sb-chat__header { gap:10px; }
}

/* Centered chat brand selected from the header designs. */
.sb-chat__heading { display:flex; min-width:0; align-items:center; justify-content:center; gap:9px; }
.sb-chat__heading h2 { font-size:30px; line-height:1.2; }
.sb-chat__subtitle { margin:0; color:#657077; font-size:12px; font-weight:400; line-height:1.5; }
@media(max-width:850px) {
 .sb-chat__heading h2 { font-size:24px; }
 .sb-chat__subtitle { font-size:11px; }
}
@media(max-width:420px) {
 .sb-chat__heading h2 { font-size:22px; }
}