/* Content only: the shared 450px shell, header, footer and navigation stay unchanged. */
.ai-intro { --ai-ink: #171830; --ai-muted: #767086; --ai-accent: #8564a5; --ai-line: #e9e1e5; color: var(--ai-ink); background: #fff; font: inherit; font-size: 14px; line-height: 1.65; letter-spacing: 0; }
.ai-intro *, .ai-intro *::before, .ai-intro *::after { box-sizing: border-box; letter-spacing: 0; }
.ai-intro :is(h1,h2,h3,p,ul,ol) { margin: 0; }
.ai-intro :is(h1,h2,h3) { word-break: keep-all; }
.ai-intro :is(h1,h2) { font-family: 'MoonArirangRoot', 'Noto Serif KR', 'Batang', serif; font-weight: 400; line-height: 1.42; }
.ai-intro :is(a,button,summary):focus-visible { outline: 3px solid #9970b4; outline-offset: 4px; }
.ai-ui-icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 24px; vertical-align: middle; }
.ai-intro-hero { padding: 18px 24px 20px; text-align: center; }
.ai-intro-eyebrow { display: flex; align-items: center; justify-content: center; gap: 7px; color: #7d6195; font-size: 13px; font-weight: 650; }
.ai-intro-eyebrow .ai-ui-icon { width: 20px; height: 20px; flex-basis: 20px; }
.ai-intro-hero h1 { margin: 18px 0 12px; font-size: 32px; }
.ai-intro-lead { color: var(--ai-muted); font-size: 14px; word-break: keep-all; }
.ai-intro-scene { position: relative; aspect-ratio: 1.35; margin: 6px -12px 4px; isolation: isolate; pointer-events: none; }
.ai-intro-scene img { position: absolute; display: block; object-fit: contain; }
.ai-intro-window { z-index: -1; width: 84%; height: 110%; top: -3%; left: 8%; }
.ai-intro-counselors { width: 106%; height: 124%; bottom: -13%; left: -3%; }
.ai-intro-primary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 8px; background: #806097; color: #fff; font: inherit; font-size: 15px; font-weight: 750; text-decoration: none; }
.ai-intro-primary:hover { background: #6b4a82; }
.ai-intro-primary .ai-ui-icon { width: 21px; height: 21px; flex-basis: 21px; filter: brightness(0) invert(1); }
.ai-intro-status { margin-top: 9px !important; color: var(--ai-muted); font-size: 12px; }
.ai-intro-scroll { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px; margin-top: 13px; color: #9d83b2; font-size: 11px; text-decoration: none; }
.ai-intro-scroll .ai-ui-icon { width: 22px; height: 22px; flex-basis: 22px; }
.ai-intro-conversation { padding: 22px 24px 32px; border-top: 1px solid #f1edf1; }
.ai-intro-heading { position: relative; text-align: center; }
.ai-intro-heading h2 { font-size: 27px; }
.ai-intro-heading > p:not(.ai-concept-label,.ai-intro-eyebrow) { margin-top: 10px; color: #767086; font-size: 13px; }
.ai-conversation-heading { padding-bottom: 20px; }
.ai-conversation-heading h2 { position: relative; z-index: 1; }
.ai-heading-sprig { position: absolute; width: 60px; height: 60px; right: -12px; top: 28px; object-fit: contain; opacity: .7; pointer-events: none; }
.ai-example-chat { position: relative; overflow: hidden; padding: 15px 13px 14px; border: 1px solid #eee7f5; border-radius: 8px; background: #f3eef8; }
.ai-example-label { display: inline-flex; padding: 3px 10px; border-radius: 6px; color: #765093; background: #e9def1; font-size: 11px; font-weight: 700; }
.ai-example-message { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; margin-top: 14px; }
.ai-example-avatar { display: block; flex: 0 0 38px; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: #e6daef; }
.ai-example-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.17); }
.ai-example-message > p { max-width: calc(100% - 45px); padding: 11px 9px; border-radius: 12px 12px 12px 2px; color: #25203e; background: #fff; font-size: 12px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
.ai-example-message.is-user { justify-content: flex-end; margin-block: 12px; }
.ai-example-message.is-user p { border-radius: 12px 12px 2px 12px; color: #fff; background: #8964ad; }
.ai-example-footer { position: relative; z-index: 1; min-height: 132px; margin-top: 16px; padding-right: 73px; }
.ai-example-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.ai-example-choices button { min-width: 0; min-height: 44px; padding: 7px 3px; border: 1px solid #9572b1; border-radius: 8px; background: #fff; color: #795296; font: inherit; font-size: 11px; font-weight: 700; line-height: 1.5; word-break: keep-all; cursor: pointer; }
.ai-example-choices button[aria-pressed="true"] { color: #fff; border-color: #765093; background: #765093; }
.ai-example-response-slot { min-height: 63px; padding-top: 10px; }
.ai-example-response { color: #694982; font-size: 11px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
.ai-example-caption { color: #8b7d99; font-size: 10px; line-height: 1.6; word-break: keep-all; }
.ai-example-companion { position: absolute; z-index: 0; right: -8px; bottom: -9px; width: 102px; height: 125px; object-fit: contain; }
.ai-topic-heading { margin: 28px 0 16px; }
.ai-topic-heading h2 { font-size: 25px; }
.ai-heading-rule { display: block; width: 22px; height: 3px; margin: 9px auto 0; border-radius: 2px; background: #d6c1e3; }
.ai-topic-list { display: grid; gap: 10px; padding: 0; list-style: none; }
.ai-topic-list a { display: grid; grid-template-columns: 42px minmax(0,1fr) 19px; align-items: center; gap: 10px; min-height: 76px; padding: 11px 12px; border: 1px solid #eae2df; border-radius: 8px; color: inherit; background: #fff; text-decoration: none; }
.ai-topic-list a:hover { border-color: #b899c7; }
.ai-topic-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f5f0f9; }
.ai-topic-icon .ai-ui-icon { width: 27px; height: 27px; }
.ai-topic-list strong { display: block; font-size: 16px; font-weight: 800; line-height: 1.5; }
.ai-topic-list strong + span { display: block; margin-top: 2px; color: var(--ai-muted); font-size: 12px; word-break: keep-all; }
.ai-topic-list a > .ai-ui-icon { width: 19px; height: 19px; }
.ai-intro-benefits { padding: 30px 20px; border-block: 1px solid #f1e9e5; background: #fffdfd; }
.ai-benefits-heading { padding-bottom: 20px; }
.ai-concept-label { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 12px !important; color: #80728d; font-size: 11px; }
.ai-concept-label::before, .ai-concept-label::after { content: ''; width: 28px; height: 1px; background: #d2c3da; }
.ai-benefits-heading h2 { position: relative; z-index: 1; margin-top: 12px; font-size: 28px; }
.ai-benefit-branch { position: absolute; top: 28px; right: -12px; width: 96px; height: 110px; object-fit: contain; opacity: .65; pointer-events: none; }
.ai-benefit-list { display: grid; gap: 12px; padding: 0; list-style: none; }
.ai-benefit { min-width: 0; overflow: hidden; padding: 15px 12px 12px; border: 1px solid #eae0dc; border-radius: 8px; background: #fff; }
.ai-benefit-heading { display: flex; align-items: flex-start; gap: 9px; }
.ai-benefit-number { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; color: #333055; background: #f0e9fa; font: 18px/1 'Batang',serif; }
.ai-benefit h3 { padding-top: 2px; font-size: 16px; line-height: 1.55; font-weight: 800; }
.ai-benefit-heading p { margin-top: 3px; color: var(--ai-muted); font-size: 12px; line-height: 1.6; word-break: keep-all; }
.ai-sample-label { margin: 11px 0 6px !important; color: #85738e; font-size: 10px; text-align: right; word-break: keep-all; }
.ai-stat-example { display: grid; gap: 9px; padding: 12px 8px; background: #f7f3fb; }
.ai-stat-row { display: grid; grid-template-columns: 92px minmax(0,1fr) 30px; align-items: center; gap: 6px; font-size: 11px; }
.ai-stat-row strong { color: #7e6595; font-size: 11px; text-align: right; }
.ai-stat-track { height: 10px; overflow: hidden; border-radius: 5px; background: #e9e0f0; }
.ai-stat-track > span { display: block; height: 100%; background: #9e80bd; border-radius: inherit; }
.ai-stat-row + .ai-stat-row .ai-stat-track > span { background: #bba3d1; }
.ai-benefit-note { display: flex; align-items: center; gap: 7px; margin-top: 8px !important; padding: 8px; color: #80708e; background: #f7f3fa; font-size: 10px; line-height: 1.6; word-break: keep-all; }
.ai-benefit-note .ai-ui-icon { width: 16px; height: 16px; flex-basis: 16px; }
.ai-record-examples { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px !important; padding: 0; list-style: none; }
.ai-record-examples li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 8px 3px; border-bottom: 1px solid #e6dbe9; font-size: 12px; font-weight: 700; word-break: keep-all; }
.ai-record-examples .ai-ui-icon { width: 30px; height: 30px; flex-basis: 30px; }
.ai-perspectives { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin-top: 13px !important; padding: 10px 0; list-style: none; background: #f8f5fb; }
.ai-perspectives li { min-width: 0; padding: 0 5px; text-align: center; }
.ai-perspectives li + li { border-left: 1px solid #e7ddec; }
.ai-perspectives .ai-ui-icon { display: block; width: 28px; height: 28px; margin: 0 auto 6px; }
.ai-perspectives strong { display: block; font-size: 11px; white-space: nowrap; }
.ai-perspectives span { display: block; margin-top: 4px; color: var(--ai-muted); font-size: 10px; line-height: 1.7; }
.ai-choice-history { display: grid; grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr); align-items: center; gap: 7px; padding: 9px 6px; background: #f8f5fb; }
.ai-choice-history > div { display: flex; align-items: center; gap: 5px; }
.ai-choice-history > div .ai-ui-icon { width: 18px; height: 18px; flex-basis: 18px; }
.ai-choice-history > .ai-ui-icon { width: 18px; height: 18px; }
.ai-choice-history span { color: #8c7b99; font-size: 10px; }
.ai-choice-history strong { display: block; color: #4d355f; font-size: 11px; line-height: 1.7; word-break: keep-all; }
.ai-concept-notice { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px !important; color: #81708c; font-size: 11px; line-height: 1.7; text-align: center; }
.ai-concept-notice .ai-ui-icon { width: 19px; height: 19px; flex-basis: 19px; }
.ai-intro-guide { padding: 30px 24px 0; }
.ai-guide-scene { position: relative; height: 145px; margin-top: 4px; overflow: hidden; }
.ai-guide-scene img { display: block; width: 235px; height: 235px; margin: -45px auto 0; object-fit: contain; }
.ai-intro-use { scroll-margin-top: 80px; padding: 16px; border: 1px solid #e6dced; border-radius: 8px; background: #f6f1fa; }
.ai-intro-use h3 { display: flex; align-items: center; gap: 7px; color: #84609e; font-size: 13px; }
.ai-intro-use h3 .ai-ui-icon { width: 19px; height: 19px; flex-basis: 19px; }
.ai-price-heading { display: flex; align-items: center; gap: 12px; margin-top: 15px; }
.ai-price-icon { display: grid; place-items: center; flex: 0 0 43px; width: 43px; height: 43px; border-radius: 50%; background: #fff; }
.ai-price-icon .ai-ui-icon { width: 25px; height: 25px; }
.ai-price-heading strong { font-size: 20px; line-height: 1.5; font-weight: 800; }
.ai-price-heading p { margin-top: 4px; color: var(--ai-muted); font-size: 12px; }
.ai-intro-faq { margin-top: 25px; }
.ai-intro-faq > h2 { margin-bottom: 15px; font-size: 26px; text-align: center; }
.ai-faq-list { overflow: hidden; border: 1px solid #e7e0dc; border-radius: 8px; }
.ai-intro-faq details + details { border-top: 1px solid #e7e0dc; }
.ai-intro-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 50px; padding: 12px 13px; list-style: none; font-size: 13px; font-weight: 750; cursor: pointer; }
.ai-intro-faq summary::-webkit-details-marker { display: none; }
.ai-intro-faq summary .ai-ui-icon { width: 18px; height: 18px; flex-basis: 18px; }
.ai-intro-faq details[open] summary .ai-ui-icon { transform: rotate(180deg); }
.ai-intro-faq details p { padding: 12px 13px; color: #7b6e87; background: #f8f5fb; font-size: 12px; line-height: 1.8; word-break: keep-all; }
.ai-intro-closing { margin-top: 25px; padding: 17px 0 23px; border-top: 1px solid #eee5df; text-align: center; }
.ai-intro-closing > .ai-ui-icon { width: 20px; height: 20px; }
.ai-intro-closing h2 { margin: 7px 0 17px; font-size: 25px; }
.ai-intro-closing .ai-intro-primary { gap: 7px; font-size: 13px; }
.ai-intro-closing p { margin-top: 10px; color: var(--ai-muted); font-size: 11px; }
#ai-example { scroll-margin-top: 80px; }
@media (max-height: 840px) { .ai-intro-hero { padding-bottom: 14px; } .ai-intro-scene { aspect-ratio: 1.75; } .ai-intro-hero h1 { margin-top: 13px; } }
@media (max-height: 760px) { .ai-intro-hero { padding-top: 12px; padding-bottom: 10px; } .ai-intro-scene { margin-bottom: 0; } .ai-intro-hero h1 { margin: 7px 0 10px; font-size: 29px; } .ai-intro-scroll { min-height: 34px; margin-top: 5px; } }
@media (max-height: 640px) { .ai-intro-hero > .ai-intro-eyebrow, .ai-intro-scroll { display: none; } .ai-intro-hero h1 { font-size: 26px; line-height: 1.28; } .ai-intro-scene { height: 125px; aspect-ratio: auto; } }
@media (max-width: 359px) { .ai-intro-hero, .ai-intro-conversation, .ai-intro-guide { padding-left: 16px; padding-right: 16px; } .ai-intro-benefits { padding-left: 14px; padding-right: 14px; } .ai-stat-row { grid-template-columns: 88px minmax(0,1fr) 28px; gap: 4px; } }