/* ─── 슬라이더 레이아웃 ─── */
.hero-slider-wrap {
    position: relative;
    z-index: 10;
    height: 140vh;
    min-height: 800px;
    background: #000;
}
.hero-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    z-index: 0;
}
.hero-slider__fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,1) 100%);
    opacity: 0;
    z-index: 6;
    pointer-events: none;
    will-change: opacity;
}
.hero-slider__track { position: relative; width: 100%; height: 100%; }

/* ─── 개별 슬라이드 ─── */
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}
.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* ─── 미디어 ─── */
.hero-slide__media {
    position: absolute; inset: -40px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.hero-slide__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 8s ease-out;
}
.hero-slide.is-active .hero-slide__img {
    transform: scale(1.06);
}
.hero-slide__video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.hero-slide__iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh; /* 16:9 비율 */
    min-width: 100%;
    height: 100vh;
    min-height: 56.25vw; /* 역 16:9 */
    transform: translate(-50%, -50%);
}
.hero-slide__overlay {
    position: absolute; inset: 0;
    background: #000;
    pointer-events: none;
}

/* ─── 텍스트 콘텐츠 ─── */
.hero-slide__content {
    position: absolute; inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0 clamp(1.5rem, 5vw, 6rem);
    padding-bottom: clamp(4rem, 12vh, 8rem);
    z-index: 2;
}
.hero-slide__content--center { justify-content: center; text-align: center; }
.hero-slide__content--left   { justify-content: flex-start; text-align: left; }
.hero-slide__content--right  { justify-content: flex-end; text-align: right; }

.hero-slide__inner {
    max-width: 720px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* 밝은 텍스트 (어두운 배경) */
.hero-slide__content--light .hero-slide__subtitle,
.hero-slide__content--light .hero-slide__title,
.hero-slide__content--light .hero-slide__desc { color: #fff; }
.hero-slide__content--light .hero-slide__btn {
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}
.hero-slide__content--light .hero-slide__btn:hover {
    background: #fff;
    color: #111;
    border-color: #fff;
}

/* 어두운 텍스트 (밝은 배경) */
.hero-slide__content--dark .hero-slide__subtitle,
.hero-slide__content--dark .hero-slide__title,
.hero-slide__content--dark .hero-slide__desc { color: #111; }
.hero-slide__content--dark .hero-slide__btn {
    color: #111;
    border-color: rgba(0,0,0,0.3);
}
.hero-slide__content--dark .hero-slide__btn:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}

.hero-slide__subtitle {
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(20px);
}
.hero-slide__title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.15;
    /* h1(첫 슬라이드)과 p(나머지)의 브라우저 기본 margin-top이 달라 높이가 어긋난다 */
    margin-top: 0;
    margin-bottom: 1.25rem;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(30px);
}
.hero-slide__desc {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    line-height: 1.7;
    margin-bottom: 2rem;
    opacity: 0.85;
    opacity: 0;
    transform: translateY(20px);
}
.hero-slide__btn {
    display: inline-block;
    padding: 0.85rem 2.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1.5px solid;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

/* ─── 텍스트 애니메이션 ─── */
.hero-slide.is-active .hero-slide__subtitle {
    animation: heroTextUp 0.8s 0.3s ease forwards;
}
.hero-slide.is-active .hero-slide__title:not(.is-split) {
    animation: heroTextUp 0.8s 0.5s ease forwards;
}
.hero-slide.is-active .hero-slide__desc {
    animation: heroTextUp 0.8s 0.7s ease forwards;
}
.hero-slide.is-active .hero-slide__btn {
    animation: heroTextUp 0.8s 0.9s ease forwards;
}

@keyframes heroTextUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ─── 글자 단위 애니메이션 ─── */
.hero-slide__title.is-split {
    opacity: 1;
    transform: none;
}
.hero-slide__title .hero-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) rotateX(40deg);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero-slide.is-active .hero-slide__title .hero-char {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* ─── 인디케이터 ─── */
.hero-slider__indicators {
    position: absolute;
    bottom: clamp(1.5rem, 4vh, 2.5rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}
.hero-slider__dot {
    width: 32px; height: 3px;
    background: rgba(255,255,255,0.3);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: background 0.3s;
}
.hero-slider__dot:hover { background: rgba(255,255,255,0.5); }
.hero-slider__dot-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: #fff;
    border-radius: 2px;
}
.hero-slider__dot.is-active .hero-slider__dot-fill {
    animation: heroDotFill var(--slide-duration, 6s) linear forwards;
}

@keyframes heroDotFill {
    to { width: 100%; }
}

/* ─── 스크롤 힌트 ─── */
.hero-slider__scroll-hint {
    position: absolute;
    bottom: clamp(1.5rem, 4vh, 2.5rem);
    right: clamp(1.5rem, 5vw, 3rem);
    color: rgba(255,255,255,0.5);
    z-index: 5;
}
.hero-scroll-dot {
    animation: heroScrollBounce 2s ease-in-out infinite;
}
@keyframes heroScrollBounce {
    0%, 100% { cy: 8; }
    50%      { cy: 18; }
}



.problem-section { padding-top: 100px; padding-bottom: 0; position: relative; z-index: 11; }

/* ─── 텍스트 핀 + 슬라이더 커버 ───
   sticky 의 부모가 섹션 전체(슬라이더 포함)여야 고정 구간이 생긴다.
   슬라이더는 z-index 를 높여 고정된 텍스트 위로 미끄러져 덮는다. */
.problem-text-sticky {
    position: sticky;
    top: 150px;
    z-index: 1;
}
@media (max-width: 767px) {
    .problem-text-sticky { top: 76px; }
}
.problem-slider { z-index: 5; }

/* ─── 캔버스 안개 ─── */
.hero-smoke {
    position: relative;
    z-index: 10;
    height: 90vh;
    margin-top: -70vh;
    margin-bottom: -1px; /* 다음 섹션과의 서브픽셀 이음새 방지 */
    pointer-events: none;
}
.hero-smoke__canvas {
    position: absolute;
    left: 0;
    top: -30vh; /* 안개 윗머리가 히어로 쪽으로 번질 여유 */
    width: 100%;
    height: calc(100% + 30vh);
    display: block;
}
.problem-text-wrap { margin-bottom: 100px; }
.problem-tagline { font-size: 14px; line-height: 60%; letter-spacing: 0.2em; margin-bottom: 20px; }
.problem-heading { font-size: 32px; line-height: 1.2em; margin-bottom: 30px; }
.problem-desc { font-size: 16px; line-height: 26px; max-width: 36rem; word-break: keep-all; }
/* 쉼표 앞뒤를 덩어리로 묶는다 — 폭이 모자라면 문장 한가운데가 아니라 쉼표에서 끊기고,
   넉넉하면 한 줄로 남는다. <br> 로 박으면 넓은 화면에서도 끊기고 문구가 바뀔 때마다
   기준 폭을 다시 잡아야 한다. inline-block 이라 아주 좁은 화면에서는 덩어리 안에서 또 접힌다. */
.pd-seg { display: inline-block; }

@media (min-width: 768px) {
    .problem-section { padding-top: 120px; padding-bottom: 0; }
    .problem-text-wrap { margin-bottom: 120px; }
    .problem-tagline { font-size: 16px; margin-bottom: 24px; }
    .problem-heading { font-size: 36px; margin-bottom: 32px; }
    .problem-desc { font-size: 17px; line-height: 30px; }
}

@media (min-width: 1024px) {
    .problem-section { padding-top: 160px; padding-bottom: 0; }
    .problem-text-wrap { margin-bottom: 160px; }
    .problem-tagline { font-size: 18px; margin-bottom: 28px; }
    .problem-heading { font-size: 44px; margin-bottom: 36px; }
    .problem-desc { font-size: 18px; line-height: 32px; }
}

@media (min-width: 1280px) {
    .problem-section { padding-top: 180px; padding-bottom: 0; }
    .problem-text-wrap { margin-bottom: 180px; }
    .problem-tagline { font-size: 20px; margin-bottom: 28px; }
    .problem-heading { font-size: 52px; margin-bottom: 38px; }
    .problem-desc { font-size: 19px; line-height: 33px; }
}

@media (min-width: 1600px) {
    .problem-section { padding-top: 200px; padding-bottom: 0; }
    .problem-text-wrap { margin-bottom: 200px; }
    .problem-tagline { font-size: 22px; margin-bottom: 30px; }
    .problem-heading { font-size: 60px; margin-bottom: 40px; }
    /* 글자만 20px 로 키우고 폭을 36rem 에 두면 둘째 문장이 넘쳐 3줄이 된다.
       한 문장 = 한 줄을 유지하려면 글자가 커진 만큼 폭도 같이 넓혀야 한다. */
    .problem-desc { font-size: 20px; line-height: 33px; max-width: 40rem; }
}

/* ─── Problem 워드 애니메이션 ─── */
.problem-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) rotateX(40deg);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.problem-word.is-visible {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* ─── Problem 라인 클립 언베일 ─── */
.problem-line {
    display: block;
    overflow: hidden;
}
.problem-line-inner {
    display: block;
    transform: translateY(105%);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.problem-line.is-visible .problem-line-inner {
    transform: translateY(0);
}

/* ─── Problem 슬라이더 ─── */
.problem-slider {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* 크로스페이드 중 두 슬라이드 불투명도 합이 잠깐 1 미만이 된다 —
       바탕이 없으면 밑에 고정된 인트로 텍스트가 비친다 */
    background: #fff;
}
.problem-slider-track { position: relative; }
.problem-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.problem-slide:first-child { position: relative; }
.problem-slide.is-active { opacity: 1; pointer-events: auto; }
.problem-slide img {
    will-change: transform;
    transition: transform 5s cubic-bezier(0.25, 0.1, 0.25, 1);
    height: 400px;
    object-fit: cover;
}
@media (min-width: 768px) {
    .problem-slide img { height: auto; }
}

/* ─── 오버레이 ─── */
.ps-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 10;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 50%, transparent 100%);
    padding: 80px 20px 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.ps-overlay-link {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    display: block;
}
.ps-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ps-counter {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.5);
}
.ps-title-wrap {
    position: relative;
    height: 28px;
    overflow: hidden;
}
.ps-title {
    position: absolute;
    top: 0; left: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ps-title.is-active {
    opacity: 1;
    transform: translateY(0);
}
.ps-title.is-exit {
    opacity: 0;
    transform: translateY(-100%);
}
.ps-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
    transition: color 0.3s, gap 0.3s;
}
.ps-overlay-link:hover .ps-view {
    color: rgba(255,255,255,0.9);
    gap: 10px;
}

/* ─── 프로그레스 인디케이터 ─── */
.ps-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    align-self: flex-end;
}
.ps-dot {
    width: 3px; height: 14px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: height 0.3s;
}
.ps-dot.is-active { height: 28px; }
.ps-dot-fill {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0;
    background: #fff;
    border-radius: 2px;
}
.ps-dot.is-active .ps-dot-fill {
    animation: psDotFill 4s linear forwards;
}
@keyframes psDotFill {
    from { height: 0; }
    to { height: 100%; }
}

@media (min-width: 768px) {
    .ps-overlay { padding: 100px 32px 28px; gap: 20px; }
    .ps-counter { font-size: 12px; }
    .ps-title-wrap { height: 32px; }
    .ps-title { font-size: 22px; line-height: 32px; }
    .ps-view { font-size: 13px; }
    .ps-dot { width: 3px; height: 18px; }
    .ps-dot.is-active { height: 36px; }
    .ps-progress { gap: 5px; }
}
@media (min-width: 1024px) {
    .ps-overlay { padding: 120px 48px 36px; }
    .ps-info { gap: 10px; }
    .ps-counter { font-size: 12px; }
    .ps-title-wrap { height: 36px; }
    .ps-title { font-size: 26px; line-height: 36px; }
    .ps-view { font-size: 14px; }
    .ps-dot { height: 20px; }
    .ps-dot.is-active { height: 40px; }
}
@media (min-width: 1280px) {
    .ps-overlay { padding: 140px 60px 44px; }
    .ps-title-wrap { height: 40px; }
    .ps-title { font-size: 30px; line-height: 40px; }
}

/* ─── 좌우 화살표 ─── */
.ps-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s, background 0.3s, transform 0.2s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.problem-slider:hover .ps-arrow { opacity: 1; }
.ps-arrow:hover { background: rgba(0,0,0,0.5); transform: translateY(-50%) scale(1.06); }
.ps-arrow:active { transform: translateY(-50%) scale(0.95); }
.ps-arrow-prev { left: 16px; }
.ps-arrow-next { right: 16px; }
@media (min-width: 768px) {
    .ps-arrow { width: 48px; height: 48px; }
    .ps-arrow-prev { left: 24px; }
    .ps-arrow-next { right: 24px; }
}
@media (min-width: 1024px) {
    .ps-arrow-prev { left: 32px; }
    .ps-arrow-next { right: 32px; }
}

/* ─── Reveal 애니메이션 (공통 — 다른 섹션용) ─── */
.reveal {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal-scale { transform: scale(0.95); }
.reveal-d1 { transition-delay: 0.15s; }
.reveal-d2 { transition-delay: 0.3s; }
.reveal-d3 { transition-delay: 0.45s; }



.solution-scroll-area {
    position: relative;
    z-index: 10;
    margin-top: -50px;
}
.solution-section {
    position: sticky;
    top: 0;
    height: 100vh;
    background: #f6f7f9;
}
.solution-inner {
    position: relative;
    /* overflow hidden 금지: 할로 글로우가 경계에서 직선으로 잘린다.
       위(problem z-11)·아래(work-preview bg-white) 섹션이 불투명이라 번짐은 자연히 덮인다. */
    height: 100%;
}

/* ─── 텍스트 오버레이 (좌상단) ─── */
.solution-text {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    left: clamp(24px, 6vw, 110px);
    max-width: 660px;
    pointer-events: none;
}
.solution-heading {
    font-size: clamp(34px, 5vw, 72px); /* 홈 공통 디스플레이 스케일 */
    line-height: 1.22;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin-bottom: 26px;
}

/* ─── 활성 영역 키워드 ─── */
.exp-kw {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-size: 14px;
    color: #6e6e73;
}
.exp-kw-rule {
    display: block;
    width: 28px;
    height: 1px;
    background: #0071e3;
    align-self: center;
    flex: none;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.exp-kw.is-on .exp-kw-rule { opacity: 1; transform: scaleX(1); }
.exp-kw-rows { position: relative; min-height: 1.6em; flex: 1; min-width: 0; }
.exp-kw-row {
    position: absolute;
    top: 0; left: 0; right: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
    pointer-events: none;
    white-space: nowrap;
}
.exp-kw-row.is-active { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ─── 빌드 상태 캡션 (좌하단) ─── */
.asm-status {
    position: absolute;
    z-index: 3;
    left: clamp(24px, 6vw, 110px);
    bottom: clamp(28px, 6vh, 64px);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #6e6e73;
}
.asm-status-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0071e3;
    animation: asmStatusPulse 1.6s ease-in-out infinite;
}
.asm-status-dot.is-done { background: #16a34a; animation: none; }
@keyframes asmStatusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.55); opacity: 0.45; }
}

/* ─── 조립 무대 (풀블리드) ─── */
.asm-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: radial-gradient(#e2e5ea 1px, transparent 1px);
    background-size: 24px 24px;
}
.asm-stage { justify-content: flex-end; }
.asm-wrap {
    position: relative;
    width: min(760px, 55vw);
    margin-right: clamp(40px, 8vw, 160px);
    margin-top: clamp(24px, 8vh, 90px);
    will-change: transform;
}
.asm-part { will-change: transform, opacity; }

.asm-browser {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 48px 96px -40px rgba(16, 17, 20, 0.32);
    overflow: hidden;
    transition: box-shadow 0.7s ease, border-color 0.7s ease;
}
/* AI 각성: 프롬프트 입력 완료 순간 — 시리 스타일 엣지 글로우 + 스윕 플래시 */
/* is-ai 외부 그림자는 뒤의 asm-halo(움직이는 시리 그라데이션 발광판)가 담당 */
@property --asm-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
/* 시리 글로우: 화면 안쪽 가장자리를 따라 흐르는 컬러 링(::before) + 넓게 번지는 오라(::after) */
.asm-siri {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.asm-browser.is-ai .asm-siri { opacity: 1; }
/* 띠(밴드) 마스크 금지 — 어떤 블러를 줘도 '액자 틀'로 읽힌다.
   전체를 덮는 컬러 레이어에 방사형 감쇠 마스크: 가장자리에서 진하고 중앙으로 갈수록
   연속적으로 사라진다. 경계선이라는 것이 구조적으로 없다. */
.asm-siri::before,
.asm-siri::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(from var(--asm-angle),
        #0071e3, #5e5ce6, #bf5af2, #ff375f, #ff9f0a, #bf5af2, #0071e3);
    animation: asmSiriSpin 3.2s linear infinite;
}
/* 가장자리를 감싸는 얇은 색기운 */
.asm-siri::before {
    -webkit-mask-image: radial-gradient(100% 100% at 50% 50%, transparent 74%, rgba(0,0,0,0.55) 90%, #000 104%);
    mask-image: radial-gradient(100% 100% at 50% 50%, transparent 74%, rgba(0,0,0,0.55) 90%, #000 104%);
    filter: blur(7px);
    opacity: 0.75;
}
/* 넓게 스며드는 오라 (숨쉬기) */
.asm-siri::after {
    -webkit-mask-image: radial-gradient(100% 100% at 50% 50%, transparent 46%, rgba(0,0,0,0.35) 76%, #000 102%);
    mask-image: radial-gradient(100% 100% at 50% 50%, transparent 46%, rgba(0,0,0,0.35) 76%, #000 102%);
    filter: blur(22px);
    opacity: 0.3;
    animation: asmSiriSpin 3.2s linear infinite, asmSiriBreathe 2.6s ease-in-out infinite alternate;
}
@keyframes asmSiriSpin {
    to { --asm-angle: 360deg; }
}
@keyframes asmSiriBreathe {
    from { opacity: 0.2; }
    to { opacity: 0.38; }
}
/* 움직이는 시리 그림자: 브라우저 뒤 발광판 — 회전하는 컬러가 큰 블러로 번져 그림자가 된다 */
.asm-halo {
    position: absolute;
    inset: -8px;
    border-radius: 24px;
    background: conic-gradient(from var(--asm-angle),
        #0071e3, #5e5ce6, #bf5af2, #ff375f, #ff9f0a, #bf5af2, #0071e3);
    filter: blur(26px);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease;
    pointer-events: none;
    will-change: opacity, transform;
}
.asm-halo.is-on {
    opacity: 0.38;
    animation: asmSiriSpin 4.2s linear infinite, asmHaloBreathe 3s ease-in-out infinite alternate;
}
@keyframes asmHaloBreathe {
    from { opacity: 0.28; transform: translateY(10px) scale(0.995); }
    to { opacity: 0.42; transform: translateY(10px) scale(1.008); }
}
.asm-browser::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(115deg, transparent 22%, rgba(0, 113, 227, 0.12) 42%, rgba(191, 90, 242, 0.14) 56%, transparent 78%);
    transform: translateX(-130%);
    pointer-events: none;
    z-index: 3;
}
.asm-browser.is-ai::after { animation: asmAiSweep 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes asmAiSweep {
    0% { transform: translateX(-130%); opacity: 1; }
    100% { transform: translateX(130%); opacity: 0; }
}
/* 조립 중(1구간)에는 스켈레톤 바에 시머가 흐른다 */
.asm-browser .asm-bar { position: relative; overflow: hidden; }
.asm-browser.is-building .asm-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.9) 50%, transparent 70%);
    animation: asmBarShimmer 1.4s linear infinite;
}
@keyframes asmBarShimmer {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
}
.asm-chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #f3f4f6;
}
.asm-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #e5e7eb; flex: none; }
.asm-address {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 8px 15px;
    min-width: 0;
    transition: box-shadow 0.35s ease;
}
.asm-address.is-hot { box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.22); }
.asm-url { font-family: 'Outfit', sans-serif; font-size: 12.5px; color: #6e6e73; white-space: nowrap; overflow: hidden; }
.asm-caret {
    display: block; width: 1.5px; height: 13px; background: #0071e3; flex: none;
    animation: asmCaretBlink 0.9s step-end infinite;
}
.asm-caret.is-done { display: none; }
@keyframes asmCaretBlink { 50% { opacity: 0; } }

.asm-body { padding: 22px; display: flex; flex-direction: column; gap: 17px; }
.asm-bar { display: block; border-radius: 4px; background: #eef0f3; height: 8px; }
.asm-nav { display: flex; align-items: center; gap: 13px; }
.asm-logo { font-size: 13px; font-weight: 700; color: #1d1d1f; letter-spacing: -0.01em; white-space: nowrap; }
.asm-spacer { flex: 1; }
.asm-bar-link { width: 42px; height: 10px; transition: background 0.35s ease; }
.asm-bar-link.is-hot { background: #b8d9f7; }
.asm-hero {
    position: relative;
    height: clamp(130px, 24vh, 210px);
    border-radius: 11px;
    background: #eef0f3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.asm-hero { flex-direction: column; gap: 12px; }
.asm-hero-copy {
    font-weight: 800;
    font-size: clamp(18px, 2.4vw, 30px);
    letter-spacing: -0.02em;
    color: #1d1d1f;
    min-height: 1.2em;
    white-space: nowrap;
    transition: color 0.5s ease;
}
.asm-browser.is-ai .asm-hero-copy {
    background: linear-gradient(90deg, #0071e3, #bf5af2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.asm-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.75) 50%, transparent 70%);
    transform: translateX(-120%);
}
.asm-hero.is-landed::after { animation: asmShine 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes asmShine { to { transform: translateX(120%); } }

.asm-lines { display: flex; flex-direction: column; gap: 10px; }
.asm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.asm-card { display: flex; flex-direction: column; gap: 10px; }
.asm-thumb {
    display: block;
    height: clamp(64px, 10vh, 92px);
    border-radius: 8px;
    background: #eef0f3;
    transition: background 0.7s ease;
}
/* 3구간: AI 가 콘텐츠를 채워넣는 틴트 (팝 바운스와 함께) */
.asm-thumb.is-tinted-0 { background: linear-gradient(135deg, #dcebfb, #eef0f3); animation: asmThumbPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.asm-thumb.is-tinted-1 { background: linear-gradient(135deg, #e9e3fb, #eef0f3); animation: asmThumbPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.asm-thumb.is-tinted-2 { background: linear-gradient(135deg, #ddf0f6, #eef0f3); animation: asmThumbPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes asmThumbPop {
    0% { transform: scale(0.92); }
    60% { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.asm-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.asm-feature {
    display: flex; flex-direction: column; gap: 9px;
    border: 1px solid #f0f1f4; border-radius: 9px; padding: 13px;
}
.asm-feature-icon { display: block; width: 24px; height: 24px; border-radius: 7px; background: #e3ecf8; }

.asm-snippet {
    position: absolute;
    /* 좌측 돌출 축소 — 공통 디스플레이 스케일(72px)로 커진 문장과 겹치지 않게 */
    left: -3%;
    top: 6%;
    width: 44%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 28px 56px -26px rgba(16, 17, 20, 0.34);
    display: flex;
    flex-direction: column;
    gap: 11px;
}
/* Wavvy Surf 스코어 카드 — 스니펫·칩과 같은 카드 어휘 */
.asm-surf {
    position: absolute;
    /* 문장 세 줄 아래로 — 72px 스케일에서 '정교하게.'를 가리지 않는 위치 */
    left: -5%;
    top: 58%;
    width: 200px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px 15px;
    box-shadow: 0 22px 44px -20px rgba(16, 17, 20, 0.3);
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.asm-surf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.asm-surf-name { font-size: 12.5px; font-weight: 700; color: #1d1d1f; letter-spacing: -0.01em; white-space: nowrap; }
.asm-surf-desc { font-size: 10px; color: #9ca3af; white-space: nowrap; }
.asm-surf-score { display: flex; align-items: center; gap: 12px; }
.asm-surf-score b {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    min-width: 34px;
    background: linear-gradient(120deg, #0071e3, #7d3ff2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.asm-surf-bar {
    position: relative;
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #eef0f3;
    overflow: hidden;
}
.asm-surf-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0071e3, #7d3ff2);
}
/* 측정 완료: 카드 펄스 1회 + 숫자 팝 */
.asm-surf::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 13px;
    border: 2px solid rgba(0, 113, 227, 0.45);
    opacity: 0;
    pointer-events: none;
}
.asm-surf.is-done::after { animation: asmGaugePulse 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes asmGaugePulse {
    0% { opacity: 0.8; transform: scale(0.97); }
    100% { opacity: 0; transform: scale(1.12); }
}
.asm-surf.is-done .asm-surf-score b { animation: asmGaugeNumPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes asmGaugeNumPop {
    0% { transform: scale(0.85); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.asm-snippet-tag { font-size: 10px; color: #9ca3af; margin-bottom: 2px; }
.asm-snippet-title { font-size: 13px; font-weight: 600; color: #0071e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asm-snippet-url { font-size: 10.5px; color: #16a34a; }
.asm-prompt {
    position: absolute;
    left: -10%;
    bottom: 8%;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 10px 16px;
    box-shadow: 0 18px 36px -16px rgba(139, 92, 246, 0.35);
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
}
.asm-chips {
    position: absolute;
    right: -10%;
    top: 22%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.asm-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: 8px 13px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #48484d;
    box-shadow: 0 12px 24px -12px rgba(16, 17, 20, 0.25);
    white-space: nowrap;
}
.asm-chip-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: #0071e3; flex: none; }

.asm-toast {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    padding: 9px 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    box-shadow: 0 16px 32px -16px rgba(16, 17, 20, 0.3);
    white-space: nowrap;
}
.asm-toast-indexed { left: 6%; top: -22px; }
.asm-toast-auto { right: -8%; bottom: 18%; }

.asm-ai-chip {
    position: absolute;
    right: 16%;
    top: -30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 9px 16px;
    box-shadow: 0 16px 32px -14px rgba(139, 92, 246, 0.45);
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.asm-ai-chip.is-hot { transform: scale(1.12) !important; }
.asm-ai-chip span {
    background: linear-gradient(90deg, #0071e3, #bf5af2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.asm-spark {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    background: linear-gradient(135deg, #0071e3, #bf5af2);
    clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
    pointer-events: none;
}
.asm-flow {
    position: absolute;
    left: 8%;
    top: 34%;
    pointer-events: none;
}

.asm-cursor {
    position: absolute;
    left: 0; top: 0;
    z-index: 6;
    opacity: 0;
    filter: drop-shadow(0 3px 6px rgba(16, 17, 20, 0.3));
    pointer-events: none;
}
.asm-ripple {
    position: absolute;
    z-index: 5;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 2px solid #0071e3;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
.asm-ripple.is-go { animation: asmRipple 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes asmRipple {
    from { opacity: 0.7; transform: scale(0.25); }
    to { opacity: 0; transform: scale(1.15); }
}

@media (min-width: 768px) {
    .solution-heading { margin-bottom: 30px; }
}
@media (min-width: 1024px) {
    .solution-heading { margin-bottom: 36px; }
    .exp-kw { font-size: 15px; }
}
@media (min-width: 1280px) {
    .solution-heading { margin-bottom: 42px; }
    .exp-kw { font-size: 16px; }
}
@media (min-width: 1600px) {
    .solution-heading { margin-bottom: 48px; }
}
/* 모바일: 오버레이 대신 위아래 흐름 + 위성 카드 화면 안 재배치 */
@media (max-width: 767px) {
    .solution-scroll-area { margin-top: 0; }
    .solution-section { height: auto; min-height: 100svh; }
    .solution-inner { display: flex; flex-direction: column; height: auto; }
    .solution-text { position: static; transform: none; padding: 120px 24px 0; max-width: none; }
    .exp-kw { font-size: 12px; gap: 12px; }
    .exp-kw-rule { width: 20px; }
    .exp-kw-row { white-space: normal; }
    .exp-kw-rows { min-height: 2.9em; }
    .asm-status { display: none; }

    .asm-stage {
        position: relative;
        inset: auto;
        height: auto;
        margin-top: 26px;
        padding: 26px 0 110px; /* 하단 여백 — 카드 밑에 매달리는 asm-prompt(bottom:-16px)와 다음 섹션 경계 사이 숨통 */
        justify-content: center;
        align-items: flex-start;
    }
    .asm-wrap { width: 82%; margin: 0 auto; }
    /* 할로가 화면 여백 안에서 완전히 감쇠하도록 축소 — 클리핑 경계에 닿으면 직선으로 잘린다 */
    .asm-halo { inset: -4px; filter: blur(16px); }
    .asm-halo.is-on { opacity: 0.32; }

    /* 브라우저 밀도 축소 */
    .asm-body { padding: 14px; gap: 12px; }
    .asm-chrome { padding: 10px 12px; }
    .asm-hero { height: 110px; }
    .asm-hero-copy { font-size: 17px; }
    .asm-thumb { height: 46px; }
    .asm-feature { padding: 10px; }
    .asm-logo { font-size: 11px; }

    /* 위성 카드: 음수 오프셋을 화면 안쪽으로 */
    .asm-snippet { left: -8px; top: 5%; width: 64%; padding: 11px 13px; gap: 7px; }
    .asm-snippet-title { font-size: 11px; }
    .asm-chips { right: -8px; top: 22%; gap: 8px; }
    .asm-chip { font-size: 10px; padding: 5px 9px; box-shadow: 0 8px 16px -10px rgba(16, 17, 20, 0.25); }
    .asm-surf { left: -8px; top: auto; bottom: 12%; width: 158px; padding: 10px 12px 11px; gap: 8px; }
    .asm-surf-score b { font-size: 19px; min-width: 28px; }
    .asm-surf-name { font-size: 11px; }
    .asm-surf-desc { font-size: 9px; }
    .asm-prompt { left: 8px; bottom: -16px; font-size: 11px; padding: 8px 12px; }
    .asm-ai-chip { right: 0; top: -16px; font-size: 11px; padding: 7px 12px; }
    .asm-toast { font-size: 10.5px; padding: 7px 11px; }
    .asm-toast-indexed { left: 8px; top: -14px; }
    .asm-toast-auto { right: -6px; bottom: 34%; }

    /* 작은 화면에서 의미가 약한 요소 정리 */
    .asm-flow, .asm-cursor, .asm-ripple { display: none; }
}

/* ─── 텍스트 컬러 필 (아래에서 위로 차오름) ─── */
.sol-line {
    display: block;
    background-image: linear-gradient(45deg, var(--accent) calc(var(--fill) - 20%), #d2d2d7 calc(var(--fill) - 5%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: none;
}
.sol-ai-gradient {
    background: linear-gradient(90deg, #0071e3, #bf5af2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}



.solp-card {
    width: min(440px, 100%);
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    box-shadow: 0 30px 60px -34px rgba(16, 17, 20, 0.28);
    overflow: hidden;
}
.solp-card-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--color-line-soft);
}
.solp-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-line); flex: none; }
.solp-card-url { font-size: 11px; color: #6e6e73; margin-left: 6px; }
.solp-card-body { padding: 16px; display: flex; flex-direction: column; gap: 13px; }
.solp-bar { display: block; height: 8px; border-radius: 4px; background: #eef0f3; }
.solp-block { display: block; height: 52px; border-radius: 7px; background: #eef0f3; }
.solp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* 실제 제품 스크린샷 */
.solp-shot {
    display: block;
    width: 100%;
    aspect-ratio: 1280 / 780;
    object-fit: cover;
    object-position: top;
}

/* Core: 스튜디오 리치 목업 */
.solp-core-panel { display: grid; grid-template-columns: 128px 1fr; min-height: 236px; }
.solp-core-side {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 15px 12px;
    background: #f6f7f9;
    border-right: 1px solid var(--color-line-soft);
}
.solp-core-logo { font-size: 12px; font-weight: 700; color: #1d1d1f; margin-bottom: 8px; }
.solp-core-menu {
    font-size: 11px;
    font-weight: 500;
    color: #6e6e73;
    padding: 6px 9px;
    border-radius: 6px;
    white-space: nowrap;
}
.solp-core-menu.is-active { background: #e3ecf8; color: #0b62b8; font-weight: 600; }
.solp-core-main { display: flex; flex-direction: column; gap: 13px; padding: 15px 16px; }
.solp-core-head { display: flex; align-items: baseline; justify-content: space-between; }
.solp-core-title { font-size: 12.5px; font-weight: 700; color: #1d1d1f; }
.solp-core-date { font-size: 10px; color: #9ca3af; border: 1px solid var(--color-line); border-radius: 5px; padding: 2px 7px; }
.solp-core-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.solp-core-stat {
    border: 1px solid var(--color-line-soft);
    border-radius: 8px;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.solp-core-stat-label { font-size: 10px; font-weight: 600; color: #6e6e73; }
.solp-core-spark { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.solp-core-spark i { flex: 1; border-radius: 2px 2px 0 0; background: #7cb5ee; }
.solp-core-spark-alt i { background: #b3a4ef; }
.solp-core-rows { display: flex; flex-direction: column; gap: 8px; }
.solp-core-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--color-line-soft);
    border-radius: 7px;
    padding: 8px 11px;
}
.solp-pill {
    font-size: 9.5px;
    font-weight: 600;
    color: #6e6e73;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 3px 8px;
    flex: none;
}
.solp-pill-green { color: #15803d; background: #e7f6ec; }

/* 정보 텍스트 */
.solp-name-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.solp-name { font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; color: #1d1d1f; letter-spacing: -0.01em; }
.solp-tag { font-size: 12px; font-weight: 500; color: #9ca3af; letter-spacing: 0.01em; }
.solp-desc { font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.75; color: #48484d; margin: 0 0 22px; }
.solp-note { font-size: 13px; color: #6e6e73; }
.solp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #0071e3;
    text-decoration: none;
    transition: gap 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.solp-link:hover { gap: 10px; text-decoration: underline; text-underline-offset: 4px; }



/* toss 집행: 폰 한 대만, 장식 없음 — 부유 애니메이션도 두지 않는다 */
.medmo {
    --ph: min(860px, 90vh); /* 폰 높이 — 레퍼런스처럼 무대를 크게 차지한다 */
    position: relative;
    width: 100%;
    height: min(900px, 94vh);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* 무대(cardwrap preserve-3d + prod perspective 3200px)의 원근이 내부 matrix3d 에
       이중으로 걸리지 않도록 확실한 평탄화 경계 — filter 는 스펙상 그룹핑을 강제한다.
       없으면 기립(rotateX) 중에 프레임과 스크린 콘텐츠가 서로 다르게 투영되어 어긋난다 */
    transform: translateZ(0);
    filter: opacity(1);
}
/* 각도 렌더 프레임(1303×1600) 합성 — 스크린 사분면 꼭짓점은 알파·에지 실측값(JS NAT 상수).
   콘텐츠는 340×739 설계 공간에 그려지고 matrix3d 가 사분면으로 투영한다 (toss 동일 기법) */
.medmo-phone {
    position: relative;
    height: var(--ph);
    aspect-ratio: 1079 / 1458; /* 프레임 이미지 원본 비율과 반드시 일치 — 어긋나면 사분면 매핑이 틀어진다 */
}
.medmo-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 44px 44px rgba(16, 17, 20, 0.3)); /* 알파 실루엣을 따르는 그림자 하나 */
}
.medmo-screenwrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 340px;
    height: 770px;
    transform-origin: 0 0; /* matrix3d 는 JS(fitScreen)가 건다 */
    z-index: 2;
    /* 변환 요소 자신의 clip-path 는 로컬 좌표에서 페인트를 먼저 자르고 나서 변환된다 —
       조상 클립을 무시하는 합성 페인트 탈출(크로미움)에 대한 확실한 차단 */
    clip-path: inset(0 round 56px 64px 56px 56px);
}
.medmo-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 56px 64px 56px 56px; /* 설계 공간 기준 스크린 곡률 — 우상단은 글라스 곡률에 맞춰 크게 */
    overflow: hidden;
    clip-path: inset(0 round 56px 64px 56px 56px); /* 합성 자식이 클립을 뚫지 못하게 이중 안전장치 */
    background: #fff;
}
.medmo-island {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 102px;
    height: 30px;
    border-radius: 999px;
    background: #0a0a0c;
    z-index: 5;
}
.medmo-island::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #26364d, #0a0a0c 65%);
}
/* 유리 글레어 — 좌상단에서 떨어지는 빛 한 줄 */
.medmo-glare {
    position: absolute;
    inset: 0;
    z-index: 9;
    border-radius: inherit;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 22%, transparent 38%);
    pointer-events: none;
}
.medmo-statusbar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 28px;
    background: #fff;
}
.medmo-time { font-size: 15px; font-weight: 700; color: #111; letter-spacing: -0.01em; }
.medmo-sicons { display: inline-flex; align-items: center; gap: 5px; }
.medmo-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; }
.medmo-sig b { width: 3px; border-radius: 1px; background: #111; }
.medmo-sig b:nth-child(1) { height: 4px; }
.medmo-sig b:nth-child(2) { height: 6px; }
.medmo-sig b:nth-child(3) { height: 8px; }
.medmo-sig b:nth-child(4) { height: 10px; }
.medmo-batt { width: 21px; height: 10px; border: 1.5px solid rgba(17, 17, 17, 0.5); border-radius: 3px; position: relative; }
.medmo-batt::after { content: ''; position: absolute; inset: 1.5px; right: 5px; background: #111; border-radius: 1px; }

/* 검색↔웹 패널 — 전환은 브라우저 페이지 이동처럼 좌우 슬라이드(스크럽).
   박스 밖으로 나간 페인트는 screenwrap 자신의 clip-path(로컬 좌표에서 변환 전에 자름)와
   screen 의 overflow+clip-path 이중 안전장치가 잘라낸다 — 합성 페인트 탈출 차단 전제 하의 이동 */
.medmo-view { position: absolute; top: 52px; left: 0; right: 0; bottom: 0; }
.medmo-search, .medmo-web { position: absolute; inset: 0; background: #fff; }
.medmo-web { transform: translateX(100%); box-shadow: -18px 0 40px rgba(16, 17, 20, 0.14); }

/* 화면 1 · 검색 (홀드 화면 — 완성 상태로 정지) */
.medmo-search { padding: 10px 16px 0; }
.medmo-sbar {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 15px;
    border-radius: 14px;
    background: #f1f3f6;
    font-size: 14.5px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.medmo-mic { margin-left: auto; flex: none; }
.medmo-results { margin-top: 14px; display: flex; flex-direction: column; gap: 11px; }
.medmo-rcard {
    display: flex;
    gap: 11px;
    padding: 14px;
    border: 1.5px solid #cfe0f7;
    background: #f7faff;
    border-radius: 14px;
}
.medmo-rfav {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #1c2c4a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.medmo-rbody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.medmo-rbody b { font-size: 14.5px; font-weight: 700; color: #1d1d1f; letter-spacing: -0.01em; }
.medmo-rbody span { font-size: 12px; color: #6e6e73; line-height: 1.45; }
.medmo-rbody em { font-style: normal; font-size: 11px; color: #0b62b8; }
.medmo-rrow { display: flex; gap: 11px; padding: 13px 14px; border: 1px solid #eef0f3; border-radius: 14px; }
.medmo-ric { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #eef1f5; }
.medmo-rtxt { flex: 1; display: flex; flex-direction: column; gap: 7px; padding-top: 2px; }
.medmo-rtxt i { display: block; height: 11px; border-radius: 999px; background: #e2e5eb; }
.medmo-rtxt .medmo-rline { height: 9px; background: #eef0f3; }

/* 화면 2 · 병원 홈페이지 */
.medmo-addr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    background: #f7f8fa;
    border-bottom: 1px solid #ececf1;
    font-size: 11.5px;
    font-weight: 600;
    color: #3a3a3c;
}
.medmo-webview {
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: #fff;
}
/* 가상 병원 페이지 — 스크롤은 스크럽이 translateY 로 */
.medmo-page { position: absolute; top: 0; left: 0; right: 0; background: #fff; will-change: transform; }
.medmo-sitebar { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 18px; }
.medmo-sitelogo { font-size: 13px; font-weight: 700; color: #16324a; letter-spacing: -0.01em; }
.medmo-menu { display: inline-flex; flex-direction: column; gap: 4px; }
.medmo-menu i { display: block; width: 16px; height: 1.5px; border-radius: 1px; background: #1d1d1f; }
.medmo-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 600px;
    margin: 0 12px;
    border-radius: 18px;
    padding: 26px 22px;
    text-align: center;
    color: #f4f1e8;
    background:
        radial-gradient(120% 70% at 80% 0%, rgba(126, 178, 221, 0.26), transparent 55%),
        radial-gradient(90% 60% at 10% 100%, rgba(74, 124, 168, 0.3), transparent 60%),
        linear-gradient(165deg, #1b2f40 0%, #13222f 55%, #0e1a24 100%);
}
.medmo-hero-eyebrow { font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; color: rgba(244, 241, 232, 0.6); }
.medmo-hero b { font-size: 23px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.42; }
.medmo-hero p { margin: 0; font-size: 11.5px; line-height: 1.85; color: rgba(244, 241, 232, 0.72); }
.medmo-hero-btn {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    padding: 10px 19px;
    border: 1px solid rgba(244, 241, 232, 0.45);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}
.medmo-sec { padding: 36px 22px 6px; }
.medmo-sec b { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.45; color: #16324a; }
.medmo-sec p { margin: 10px 0 0; font-size: 12px; line-height: 1.75; color: #6e6e73; }
.medmo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 12px 8px; }
.medmo-card { height: 132px; border-radius: 16px; display: flex; align-items: flex-end; padding: 13px 15px; }
.medmo-card span { font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: -0.01em; text-shadow: 0 1px 6px rgba(16, 17, 20, 0.25); }
.medmo-card-a { background: linear-gradient(160deg, #d8c3bc, #bda49b); }
.medmo-card-b { background: linear-gradient(160deg, #c4d1c4, #9fb3a0); }
.medmo-card-c { background: linear-gradient(160deg, #c2d1dd, #9db3c5); }
.medmo-card-d { background: linear-gradient(160deg, #d2cac1, #b0a498); }
/* 푸터는 밝은 톤 — 짙은 배경은 스크롤 정지 지점에서 하단에 걸리면 깨진 띠처럼 보인다 */
.medmo-foot { margin-top: 16px; padding: 24px 22px 30px; background: #f2f4f7; border-top: 1px solid #e8ebf0; display: flex; flex-direction: column; gap: 9px; }
.medmo-foot span { font-size: 11px; font-weight: 700; color: #86868b; margin-bottom: 3px; }
.medmo-foot i { display: block; height: 7px; border-radius: 999px; background: #e0e4ea; }
.medmo-ctabar {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 14px;
    background: #0071e3;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 10px 24px -10px rgba(0, 113, 227, 0.55);
    opacity: 0; /* 동선 설계 장면(0.72)에 박스 안에서 페이드 등장 */
}
.medmo-sheetdim { position: absolute; inset: 0; background: #0b0c0f; opacity: 0; }
.medmo-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 53%; /* 폼 내용에 맞는 높이 — 반쯤만 올라와 페이지 상단(헤딩)이 계속 보인다 */
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: 0 -14px 40px rgba(16, 17, 20, 0.16);
    padding: 10px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    transform: translateY(108%); /* 닫힌 상태 — 아래에서 슬라이드로 올라온다 (108%: 상단 그림자까지 숨김) */
}
.medmo-handle { display: block; width: 38px; height: 4px; border-radius: 999px; background: #dfe3e9; margin: 0 auto 2px; }
.medmo-sheet-title { font-size: 15px; font-weight: 700; color: #1d1d1f; letter-spacing: -0.01em; }
.medmo-field { display: flex; flex-direction: column; gap: 5px; }
.medmo-field span { font-size: 10.5px; font-weight: 600; color: #86868b; }
.medmo-field i { display: flex; align-items: center; padding: 0 12px; height: 38px; border: 1.5px solid #e3e6ec; border-radius: 10px; background: #fafbfc; }
.medmo-field-ta i { height: 62px; align-items: flex-start; padding-top: 9px; }
.medmo-fval { font-style: normal; font-size: 12.5px; color: #1d1d1f; letter-spacing: -0.01em; opacity: 0; }
.medmo-done {
    position: absolute;
    inset: 0;
    border-radius: 22px 22px 0 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
}
.medmo-done-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #0071e3; color: #fff; margin-bottom: 4px; }
.medmo-done b { font-size: 15.5px; font-weight: 700; color: #1d1d1f; letter-spacing: -0.01em; }
.medmo-done-sub { font-size: 11.5px; color: #6e6e73; }
.medmo-submit {
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 12px;
    background: #0071e3;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
}

/* 모바일: 콘텐츠는 340×739 설계 공간 그대로 — matrix3d 가 통째로 축소 투영하므로
   폰 높이만 줄이면 된다 (내부 개별 축소 규칙 불필요) */
@media (max-width: 767px) {
    /* 모바일은 플랫 스택(핀 없음)이라 폴드 수납 제약이 풀렸다 — 폰을 크게.
       124vw 캡: 폰 폭(높이×1079/1458)이 화면 폭 92vw 를 넘지 않는 상한 */
    .medmo { height: min(600px, 70lvh, 130vw); --ph: min(560px, 66lvh, 124vw); } /* 높이도 vw 캡 — 폰보다 큰 빈 컨테이너 여백 방지 */
}
/* 좁고 낮은 화면(SE 등) */
@media (max-width: 767px) and (max-height: 740px) {
    .medmo { height: min(480px, 62lvh); --ph: min(450px, 58lvh); }
}



.coremo { width: 100%; }
.coremo-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0; /* toss 문법: 카드가 붙어 하나의 밴드를 이룬다 */
    align-items: start;
}
/* 카드: 등장은 스크럽(JS 인라인)이 구동 — 트랜지션을 두지 않는다 */
.corec { display: flex; flex-direction: column; align-items: flex-start; text-align: left; opacity: 0; }
.corec-stage {
    position: relative;
    width: 100%;
    height: clamp(290px, 42vh, 440px);
    border-radius: 0; /* 밴드 양끝만 라운드 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 1.8vw, 30px);
    margin-bottom: 22px;
}
.corec:first-child .corec-stage { border-radius: 22px 0 0 22px; }
.corec:last-child .corec-stage { border-radius: 0 22px 22px 0; }
/* 호버(toss 문법): 카드는 그대로, 안의 세계가 살아난다 — 배경 글로우 + 패널 3D 틸트 +
   내용물 시차 웨이브. 스크럽이 인라인 transform 을 쓰는 요소(.corec, 미완성 칩)와는 충돌하지 않고,
   칩은 완성 시 인라인이 '' 로 비워지므로 정지 상태에선 CSS 호버가 먹는다 */
@media (hover: hover) {
    .corec-stage::after {
        content: '';
        position: absolute;
        inset: -30%;
        background: radial-gradient(46% 46% at 50% 28%, rgba(255, 255, 255, 0.55), transparent 72%);
        opacity: 0;
        transition: opacity 0.55s ease;
        pointer-events: none;
    }
    .corec:hover .corec-stage::after { opacity: 1; }
    .corec-panel, .cn-core, .cpr, .cn-chip, .cn-caption {
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
    }
    .corec:hover .corec-panel {
        transform: perspective(900px) translateY(-14px) rotateX(4.5deg); /* 확대 없음 */
        box-shadow: 0 40px 90px -34px rgba(20, 30, 60, 0.55);
    }
    /* 목록 행들이 시차를 두고 따라 떠오르는 웨이브 */
    .corec:hover .cpr { transform: translateY(-5px); }
    .corec:hover .cpr:nth-child(2) { transition-delay: 0.04s; }
    .corec:hover .cpr:nth-child(3) { transition-delay: 0.08s; }
    .corec:hover .cpr:nth-child(4) { transition-delay: 0.12s; }
    .corec:hover .cpr:nth-child(5) { transition-delay: 0.16s; }
    /* 터미널: 커서가 깜빡이기 시작한다 */
    .corec:hover .cc-caret { animation: corecBlink 1s steps(2, jump-none) infinite; }
    /* SaaS: 코어 타일이 커지고 칩들이 바깥으로 흩어지며 캡션이 또렷해진다 */
    .corec:hover .cn-core {
        transform: translate(-50%, -50%) rotate(-3deg); /* 확대 없음 */
        box-shadow: 0 36px 80px -26px rgba(20, 30, 60, 0.65);
    }
    .corec:hover .cn-chip-a { transform: translate(-9px, -8px); }
    .corec:hover .cn-chip-b { transform: translate(9px, -7px); transition-delay: 0.04s; }
    .corec:hover .cn-chip-c { transform: translate(-8px, 8px); transition-delay: 0.08s; }
    .corec:hover .cn-chip-d { transform: translate(9px, 9px); transition-delay: 0.12s; }
    .corec:hover .cn-caption { transform: translateY(-4px); }
}
@keyframes corecBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .corec:hover .cc-caret { animation: none; }
}
/* 유리질 파스텔 무대 — 잉크 배경 위에서 부드럽게 발광 */
.corec-st-a { background: linear-gradient(165deg, #e3ecfb 0%, #ccd9f1 100%); }
.corec-st-b { background: linear-gradient(165deg, #e6e1fa 0%, #cfc7ee 100%); }
.corec-st-c { background: linear-gradient(165deg, #f7e9da 0%, #e9d2bd 100%); }
.corec-st-d { background: linear-gradient(165deg, #ddf0e5 0%, #c3e0d0 100%); }
.corec-cap { padding-left: clamp(18px, 1.8vw, 30px); font-size: clamp(16px, 1.5vw, 22px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.5; color: rgba(255, 255, 255, 0.88); } /* toss 카드 캡션 스케일 — 라벨과 같은 라이트한 무게 */
.corec-lbl { padding-left: clamp(18px, 1.8vw, 30px); margin-top: 10px; font-size: clamp(13px, 1.15vw, 16px); font-weight: 400; color: rgba(255, 255, 255, 0.4); }

/* ── 공용 패널: 카드 폭을 채우고 하단으로 흘러넘치는 반투명 유리 (toss 해부학) ── */
.corec-panel {
    position: absolute;
    left: clamp(16px, 1.7vw, 28px);
    right: clamp(16px, 1.7vw, 28px);
    top: 13%;
    bottom: -4%; /* 하단 에지에 크롭 — 앱을 들여다보는 창 */
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.66);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 60px -30px rgba(20, 30, 60, 0.4);
    padding: clamp(16px, 1.6vw, 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cph-lbl { font-size: 11px; font-weight: 500; color: #9ca1ab; }
.cph-tt { margin: 5px 0 14px; font-size: clamp(15px, 1.3vw, 18px); font-weight: 700; letter-spacing: -0.015em; color: #1d1d1f; }
.cph-rows { display: flex; flex-direction: column; gap: 9px; }
.cpr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 22px -16px rgba(20, 30, 60, 0.3);
}
.cpr em { font-style: normal; font-size: clamp(11px, 1vw, 13px); font-weight: 600; color: #3a3a3c; }
.cpr-st { display: inline-flex; width: 15px; height: 15px; color: #0a8f4d; opacity: 0; }
.cpr-st svg { width: 100%; height: 100%; }

/* ── 2 · 터미널 패널 (다크 변형) ── */
.corec-panel-term { background: rgba(21, 23, 29, 0.95); gap: 13px; }
.cc-dots { display: flex; gap: 5px; }
.cc-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.cc-line { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(10px, 0.9vw, 12px); color: #9fe8b9; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.cc-line em { font-style: normal; color: #e8eaf0; }
.cc-caret { width: 6px; height: 13px; margin-left: 2px; background: #9fe8b9; flex: none; }
.cc-ok { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(10px, 0.9vw, 12px); font-weight: 400; color: #7ddf9e; opacity: 0; }
.cc-ghost { display: flex; flex-direction: column; gap: 10px; margin-top: 5px; }
.cc-ghost i { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }

/* ── 3 · 떠 있는 오브젝트 (toss 2번 카드 문법) ── */
.cn-float { position: absolute; inset: 0; }
.cn-core {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(70px, 6.6vw, 96px);
    height: clamp(70px, 6.6vw, 96px);
    border-radius: 26px;
    background: #1d1d1f;
    color: #fff;
    font-size: clamp(13px, 1.15vw, 16px);
    font-weight: 700;
    box-shadow: 0 26px 60px -24px rgba(20, 30, 60, 0.55);
}
.cn-chip {
    position: absolute;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 30px -16px rgba(20, 30, 60, 0.45);
    font-style: normal;
    font-size: clamp(10.5px, 0.95vw, 12.5px);
    font-weight: 600;
    color: #1d1d1f;
    opacity: 0;
}
.cn-chip-a { left: 13%; top: 16%; }
.cn-chip-b { right: 11%; top: 25%; }
.cn-chip-c { left: 17%; top: 56%; }
.cn-chip-d { right: 15%; top: 63%; }
.cn-caption { position: absolute; left: 0; right: 0; bottom: clamp(20px, 3vh, 34px); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cn-caption em { font-style: normal; font-size: 11.5px; color: #6e6e73; }
.cn-caption b { font-size: clamp(13px, 1.15vw, 15.5px); font-weight: 700; color: #1d1d1f; letter-spacing: -0.01em; }

/* 모바일: 2×2 컴팩트 — 무대(100lvh) 안에 수납 */
@media (max-width: 767px) {
    .coremo-cards { grid-template-columns: 1fr; gap: 76px; } /* 1열 — 카드마다 온전한 무대 */
    .corec-stage { height: clamp(210px, 30lvh, 300px); border-radius: 24px; padding: 14px; margin-bottom: 28px; }
    .corec:first-child .corec-stage, .corec:last-child .corec-stage { border-radius: 24px; }
    /* 1열 카드: 글씨는 본문 크기로, 패널은 파스텔 여백이 보이게 인셋 */
    .corec-cap, .corec-lbl { padding-left: 6px; }
    .corec-cap { font-size: 19px; line-height: 1.55; }
    .corec-lbl { margin-top: 7px; font-size: 15.5px; }
    .corec-panel { left: 32px; right: 32px; top: 16%; bottom: -6%; border-radius: 13px; padding: 12px 12px; }
    .cph-lbl { font-size: 10px; }
    .cph-tt { margin: 2px 0 8px; font-size: 13px; }
    .cph-rows { gap: 7px; }
    .cpr { padding: 7.5px 10px; border-radius: 9px; }
    .cpr em { font-size: 11px; }
    .cpr-st { width: 11.5px; height: 11.5px; }
    .corec-panel-term { gap: 9px; }
    .cc-line, .cc-ok { font-size: 10px; }
    .cc-caret { height: 10px; }
    .cc-ghost { gap: 8px; }
    .cc-ghost i { height: 7px; }
    .cn-core { width: 48px; height: 48px; border-radius: 16px; font-size: 11px; }
    .cn-chip { padding: 4.5px 9px; font-size: 10px; }
    .cn-caption { bottom: 16px; gap: 2px; }
    .cn-caption em { font-size: 10px; }
    .cn-caption b { font-size: 12.5px; }
}



.surfmo {
    position: relative;
    width: 100%; /* 크롬 없는 무대 — 카드 컬럼(7fr)을 통째로 쓴다 (스크린샷 비율 제약 해제) */
    height: min(560px, 62vh);
    overflow: hidden;
}
/* 카드가 지녔던 부유만 이어받는다 (모바일·reduced-motion 은 무대 규칙대로 차단) */
.solxb-cardwrap .surfmo { animation: solxbFloat 6.5s ease-in-out infinite alternate; }
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
    .solxb-cardwrap .surfmo { animation: none; }
}
/* 장면 불투명도·타이핑·게이지 수치는 전부 스크럽(JS 인라인)이 구동 — 여기엔 트랜지션을 두지 않는다 */
.surfmo-scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 22px;
    opacity: 0;
    pointer-events: none;
}
.surfmo-s1 { opacity: 1; }
.surfmo-scap { display: none; } /* 모바일 카드 스택에서만 노출 */

/* ─── 장면 1 · 입력 ─── */
.surfmo-h {
    font-size: clamp(26px, 2.9vw, 42px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.32;
    color: #fff;
}
.surfmo-form {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(520px, 94%);
    height: 68px;
    padding: 0 8px 0 28px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.65);
}
.surfmo-url {
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    font-size: 20px;
    color: #1d1d1f;
    text-align: left;
}
.surfmo-caret {
    width: 2px;
    height: 24px;
    margin-left: 3px;
    background: #0071e3;
    animation: surfmoBlink 1s steps(1) infinite;
}
@keyframes surfmoBlink { 50% { opacity: 0; } }
.surfmo-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 54px;
    padding: 0 26px;
    border-radius: 999px;
    background: #0071e3;
    color: #fff;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    flex: none;
}
.surfmo-meta { margin-top: 17px; font-size: 15px; color: rgba(255, 255, 255, 0.5); }

/* ─── 장면 2 · 로딩 ─── */
.surfmo-sea {
    position: relative;
    width: min(280px, 60%);
    height: 56px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.surfmo-wave { position: absolute; top: 0; left: 0; width: 200%; height: 100%; display: block; }
.surfmo-w1 { animation: surfmoWave 3.8s linear infinite; }
.surfmo-w2 { animation: surfmoWave 6.2s linear infinite reverse; top: 5px; }
@keyframes surfmoWave { to { transform: translateX(-50%); } }
.surfmo-h2 { margin-top: 12px; font-size: 25px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.surfmo-h2 b { color: #6db4ff; }
.surfmo-track {
    margin-top: 22px;
    width: min(440px, 88%);
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}
.surfmo-track i {
    display: block;
    position: relative;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0071e3, #3ea0ff);
    overflow: hidden;
}
.surfmo-track i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: surfmoSheen 1.9s ease-in-out infinite;
}
@keyframes surfmoSheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.surfmo-cntrow {
    margin-top: 13px;
    width: min(440px, 88%);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
#surfmoAxis { font-size: 15px; font-weight: 600; color: #8fbcff; letter-spacing: -0.01em; }
#surfmoCnt { font-size: 15px; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; }
.surfmo-list {
    margin-top: 13px;
    width: min(440px, 88%);
    height: 96px;
    overflow: hidden;
    text-align: left;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
    mask-image: linear-gradient(180deg, #000 40%, transparent);
}
.surfmo-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 3.5px 0;
    font-size: 16.5px;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s, transform 0.3s; /* 항목 팝인만 짧은 트랜지션 — 역방향은 즉시 제거라 안 걸린다 */
}
.surfmo-row.is-in { opacity: 1; transform: none; }
.surfmo-row span { color: #4ade80; flex: none; }

/* ─── 장면 3 · 점수 ─── */
.surfmo-s3 { flex-direction: row; gap: 44px; }
.surfmo-ring { position: relative; flex: none; }
.surfmo-ring-in {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.surfmo-ring-lbl { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.55); }
.surfmo-num {
    font-size: 62px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.surfmo-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; }
.surfmo-grade {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #ffb340;
    opacity: 0;
}
.surfmo-cat {
    display: grid;
    grid-template-columns: 104px 172px 36px;
    gap: 15px;
    align-items: center;
}
.surfmo-cat > span { font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, 0.8); white-space: nowrap; }
.surfmo-cat > b { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.85); text-align: right; font-variant-numeric: tabular-nums; }
.surfmo-cbar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.surfmo-cbar i { display: block; height: 100%; width: 0%; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
    .surfmo-wave, .surfmo-caret, .surfmo-track i::after { animation: none; }
}
/* 모바일: 스테이지 높이가 폴드에 갇히므로 내부도 한 단계 줄인다 */
@media (max-width: 767px) {
    /* 활주로는 슬롯(solutions-b 플랫 규칙)이 맡는다 — 무대는 sticky 그룹 안의 일반 블록 */
    .surfmo-area { height: auto; }
    .surfmo { height: min(400px, 48lvh); } /* 텍스트와 합쳐 100lvh 에 꽉 차는 높이 — 남는 공간 최소화 */
    .surfmo-h { font-size: clamp(22px, 6vw, 28px); }
    .surfmo-form { width: min(420px, 96%); height: 56px; padding: 0 6px 0 20px; margin-top: 20px; }
    .surfmo-url { font-size: 16.5px; }
    .surfmo-go { height: 44px; padding: 0 20px; font-size: 14.5px; }
    .surfmo-meta { margin-top: 12px; font-size: 13px; }
    .surfmo-sea { width: min(220px, 60%); height: 44px; }
    .surfmo-h2 { font-size: 20px; }
    .surfmo-track { margin-top: 16px; height: 6px; }
    #surfmoAxis, #surfmoCnt { font-size: 13px; }
    .surfmo-row { font-size: 14.5px; }
    .surfmo-list { height: 76px; }
    /* 점수 장면: 좌우 배치는 좁은 화면에서 숫자가 잘린다 — 게이지 위·리포트 아래 세로 스택 */
    .surfmo-s3 { flex-direction: column; gap: 16px; }
    .surfmo-side { align-items: center; text-align: center; }
    .surfmo-ring svg { width: 132px; height: 132px; }
    .surfmo-num { font-size: 42px; }
    .surfmo-ring-lbl { font-size: 11.5px; }
    .surfmo-grade { font-size: 24px; }
    .surfmo-cat { grid-template-columns: 76px 108px 26px; gap: 10px; }
    .surfmo-cat > span { font-size: 13.5px; }
    .surfmo-cat > b { font-size: 14px; }
}
/* 좁고 낮은 화면(SE 등)에서 수납 */
@media (max-width: 767px) and (max-height: 740px) {
    .surfmo-s3 { gap: 14px; }
    .surfmo-ring svg { width: 116px; height: 116px; }
    .surfmo-num { font-size: 31px; }
    .surfmo-cat { grid-template-columns: 64px 84px 22px; gap: 8px; }
    .surfmo-list { height: 56px; }
}



.solxb-area { position: relative; z-index: 10; }
.solxb {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #eef4fc;
}
/* ─── 테마 배경 레이어 ─── */
.solxb-bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}
.solxb-bg.is-on { opacity: 1; }
.solxb-bg-light {
    background-color: #eef4fc;
    background-image:
        radial-gradient(60vw 60vw at 88% 6%, rgba(0, 113, 227, 0.1), rgba(0, 113, 227, 0.04) 45%, transparent 72%),
        radial-gradient(64vw 64vw at 6% 96%, rgba(125, 63, 242, 0.08), rgba(125, 63, 242, 0.03) 45%, transparent 72%),
        linear-gradient(150deg, rgba(236, 243, 252, 1) 0%, rgba(241, 239, 253, 0.9) 58%, rgba(248, 241, 251, 0.85) 100%),
        radial-gradient(rgba(255, 255, 255, 0.85) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 24px 24px;
}
.solxb-bg-ink {
    background-color: #101114;
    background-image:
        radial-gradient(64vw 64vw at 86% 8%, rgba(0, 113, 227, 0.2), rgba(0, 113, 227, 0.07) 45%, transparent 72%),
        radial-gradient(60vw 60vw at 8% 94%, rgba(94, 92, 230, 0.14), rgba(94, 92, 230, 0.05) 45%, transparent 72%),
        linear-gradient(160deg, #16171d 0%, #0e0f13 100%),
        radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 24px 24px;
}
.solxb-bg-violet {
    background-color: #131024;
    background-image:
        radial-gradient(64vw 64vw at 84% 10%, rgba(191, 90, 242, 0.22), rgba(191, 90, 242, 0.08) 45%, transparent 72%),
        radial-gradient(62vw 62vw at 10% 92%, rgba(0, 113, 227, 0.18), rgba(0, 113, 227, 0.06) 45%, transparent 72%),
        linear-gradient(150deg, #1a1433 0%, #0f0d1f 100%),
        radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 24px 24px;
}


/* ─── 스텝 슬롯: 센터 스테이지 ─── */
.solxb-steps { position: absolute; inset: 0; }
.solxb-slot {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 90px clamp(20px, 4vw, 60px) 60px;
    opacity: 0;
    transform: translateY(46px) scale(0.96);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.3, 0.5, 1);
    pointer-events: none;
}
.solxb-slot.is-active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* 퇴장 기본값: 위로 떠오른 상태 — 실제 퇴장 움직임은 스크롤 스크럽(is-hold+인라인)이 구동하고,
   이 트랜지션은 스텝을 건너뛰는 플릭 등 스크럽이 못 잡는 경우의 폴백이다 */
.solxb-slot.is-past {
    opacity: 0;
    transform: translateY(-88px) scale(0.96);
    transition: opacity 1s ease, transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.solxb-slot.is-past.is-hold { transition: none; }
/* 인트로 유지 모드: Med 스텝 진행도가 직접 제어 (클래스 트랜지션 개입 금지) */
.solxb-slot.is-hold { transition: none; }

/* 인트로: 중앙 정렬 — 제품 데모 무대(중앙)와 축을 맞춘다 */
.solxb-slot-intro {
    align-items: center;
    text-align: center;
    justify-content: center;
    padding-left: clamp(24px, 6vw, 110px);
    padding-right: clamp(24px, 6vw, 110px);
}
.solxb-eyebrow {
    font-size: 14px;
    font-weight: 500;
    color: #6e6e73;
    margin-bottom: 22px;
}
.solxb-heading {
    font-size: clamp(34px, 5vw, 72px); /* 홈 공통 디스플레이 스케일 — EXPERTISE·HWW·SELECTED WORK 와 동일 */
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin-bottom: 30px;
}
.solxb-heading .sol-line { display: block; }
.solxb-intro-sub { margin: 0; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.75; color: #6e6e73; }

/* 제품 스텝: 좌 텍스트 / 우 카드 (toss 문법) — 카드는 왼쪽 아래에서 누워 진입해 반듯하게 선다 */

.solxb-prod {
    perspective: 3200px; /* toss 계측값 — 45° 기울여도 왜곡이 우아하게 유지되는 원근 */
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
    width: 100%;
    max-width: 1360px;
    padding: 0 clamp(24px, 4vw, 70px);
    text-align: left;
}
.solxb-prodtext { opacity: 0; transform: translateY(26px); will-change: transform, opacity; }
.solxb-prodtext .solp-name-row { margin-bottom: 18px; }
.solxb-cardwrap { position: relative; width: 100%; will-change: transform, opacity; transform-style: preserve-3d; }
.solxb-cardwrap .solp-card {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 48px 96px -40px rgba(16, 17, 20, 0.4);
    animation: solxbFloat 6.5s ease-in-out infinite alternate;
}
@keyframes solxbFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}
.solxb-feats {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.solxb-feats li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: clamp(14px, 1.1vw, 15.5px);
    color: #48484d;
    transition: color 0.6s ease;
}
.solxb-feat-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e3ecf8;
    color: #0b62b8;
    flex: none;
    transition: background 0.6s ease, color 0.6s ease;
}
.solxb-feat-ic svg { width: 11px; height: 11px; }
.solxb.is-dark .solxb-feats li { color: rgba(255, 255, 255, 0.74); }
.solxb.is-dark .solxb-feat-ic { background: rgba(255, 255, 255, 0.14); color: #6db4ff; }
.solxb-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #0071e3;
    text-decoration: none;
    border: 1.5px solid rgba(0, 113, 227, 0.35);
    border-radius: 999px;
    padding: 10px 18px;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, gap 0.25s ease;
}
.solxb-cta:hover { background: rgba(0, 113, 227, 0.08); border-color: #0071e3; gap: 11px; }
.solxb.is-dark .solxb-cta { color: #6db4ff; border-color: rgba(109, 180, 255, 0.4); }
.solxb.is-dark .solxb-cta:hover { background: rgba(109, 180, 255, 0.12); border-color: #6db4ff; }
.solxb-desc {
    margin: 0 0 18px;
    max-width: 460px;
    font-size: clamp(14.5px, 1.15vw, 16.5px);
    line-height: 1.75;
    color: #48484d;
    transition: color 0.6s ease;
}
/* ─── Core 와이드 모드: 센터 헤딩 + 카드 행 ─── */
.solxb-prod-wide {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(32px, 6vh, 70px); /* 최소 간격 */
    height: 100%;
    max-width: 1520px;
    padding: 0 clamp(16px, 2vw, 40px); /* 기본 prod 패딩보다 얕게 — 밴드가 화면을 넓게 쓴다 */
}
/* 카드는 바닥에 앵커, 헤딩은 남는 공간의 가운데 — 위·아래 auto 마진이 여백을 균등 분배 */
.corex-headwrap { margin-top: auto; }
.corex-cardwrap { margin-top: auto; }
.corex-headwrap .solp-name-row { justify-content: center; margin-bottom: 0; }
.corex-headwrap .medx-head { margin: 14px 0 0; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.28; } /* toss 섹션 헤딩 스케일 */
.corex-cardwrap { width: 100%; }
@media (max-width: 767px) {
    /* 와이드 모드는 모바일에서도 헤딩이 먼저 — 뒤에 오는 공통 order(카드 우선) 규칙을 이긴다 */
    .solxb-prod-wide { gap: 72px; } /* 헤딩↔카드 — 모바일도 숨 쉴 간격 */
    .solxb-prod-wide .corex-headwrap { order: 0; }
    .solxb-prod-wide .corex-cardwrap { order: 1; }
}

/* ─── Med 좌측: toss 제품 블록 문법 (대형 헤드라인 + 아코디언 + pill CTA) ─── */
.medx-text { max-width: 470px; }
.medx-head {
    margin: 16px 0 22px;
    font-size: clamp(24px, 2.3vw, 36px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.32;
    color: #1d1d1f;
}
/* 구분선: 배경(#eef4fc)과 겹치지 않게 잉크 반투명 — 배경이 바뀌어도 보인다 */
.medx-list { margin-bottom: 24px; border-top: 1px solid rgba(29, 29, 31, 0.12); }
.medx-item { padding: 14px 2px; border-bottom: 1px solid rgba(29, 29, 31, 0.12); }
.medx-item-title {
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #9aa0ab;
    transition: color 0.35s ease, font-size 0.35s ease;
}
.medx-item.is-on .medx-item-title { color: #1d1d1f; font-size: clamp(17px, 1.5vw, 21px); }
.medx-item-desc {
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #6e6e73;
    transition: max-height 0.4s ease, opacity 0.35s ease, margin-top 0.4s ease;
}
.medx-item.is-on .medx-item-desc { max-height: 96px; opacity: 1; margin-top: 10px; }
@media (max-width: 767px) {
    .medx-head { margin: 10px 0 16px; }
    .medx-list { margin-bottom: 20px; }
    .medx-item { padding: 11px 2px; }
    .medx-item-desc { font-size: 13.5px; }
}

/* 위성 라벨: 카드 기립 후 스크롤이 더 진행되면 순차 팝 → 이후 부유 */
.solxb-sat {
    position: absolute;
    z-index: 2;
    opacity: 0;
    transform: translateY(14px) scale(0.88);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.solxb-sat.is-in { opacity: 1; transform: none; animation: solxbFloat 5.8s ease-in-out 0.7s infinite alternate; }
.solxb-sat-a { top: -16px; right: -7%; }
.solxb-sat-b { bottom: -14px; right: 9%; }
.solxb-sat-c { top: 40%; left: -9%; }
.solxb-sat-b.is-in { animation-delay: 1s; }
.solxb-sat-c.is-in { animation-delay: 1.3s; }

/* ─── 다크 테마 텍스트 반전 ─── */
.solxb .solp-name, .solxb .solp-tag, .solxb .solp-note,
.solxb .solxb-intro-sub { transition: color 0.6s ease; }
/* medx 아코디언(공용)의 잉크 배경 변형 — Core 스텝에서 쓰인다 */
.solxb.is-dark .medx-head { color: #fff; }
.solxb.is-dark .medx-list { border-top-color: rgba(255, 255, 255, 0.18); }
.solxb.is-dark .medx-item { border-bottom-color: rgba(255, 255, 255, 0.18); }
.solxb.is-dark .medx-item-title { color: rgba(255, 255, 255, 0.38); }
.solxb.is-dark .medx-item.is-on .medx-item-title { color: #fff; }
.solxb.is-dark .medx-item-desc { color: rgba(255, 255, 255, 0.66); }
.solxb.is-dark .solp-name { color: #fff; }
.solxb.is-dark .solxb-desc { color: rgba(255, 255, 255, 0.74); }
.solxb.is-dark .solp-tag { color: rgba(255, 255, 255, 0.45); }
.solxb.is-dark .solp-note { color: rgba(255, 255, 255, 0.55); }
.solxb.is-dark .solp-link { color: #6db4ff; }

@media (prefers-reduced-motion: reduce) {
    .solxb-cardwrap .solp-card, .solxb-sat { animation: none; }
}
@media (max-width: 767px) {
    /* 손을 떼면 무대가 완전히 멈추도록 — 스크롤과 무관한 자가 모션(부유) 차단 */
    .solxb-cardwrap .solp-card, .solxb-sat { animation: none; }
    /* PC와 같은 스텝 무대를 모바일에서도 그대로 돌린다 — 단일 컬럼 배치만 다르다 */
    /* dvh 는 주소창 수축마다 값이 변해 아래 콘텐츠 전체가 튕긴다 — 고정값인 lvh 사용
       (주소창이 보이는 잠깐만 하단 64px 이 폴드 밑, 스크럽 중엔 정확히 꽉 참) */
    .solxb { height: 100lvh; }
    .solxb-slot { padding: 84px 20px 36px; }
    /* 모바일은 카드가 먼저, 텍스트가 아래 — 카드↔텍스트 44px (카드 밑단 칩 bottom:-12px 공간 포함) */
    .solxb-prod { grid-template-columns: 1fr; gap: 44px; padding: 0 4px; }
    .solxb-cardwrap { order: 1; }
    .solxb-prodtext { order: 2; }
    .solxb-prodtext .solp-name-row { margin-bottom: 12px; }
    .solxb-desc { margin-bottom: 14px; }
    .solxb-feats { margin-bottom: 20px; gap: 9px; }
    .solxb-cardwrap { width: 100%; }
    /* 위성 칩: 음수 오프셋을 화면 안쪽으로 */
    .solxb-sat-a { top: -14px; right: 0; }
    .solxb-sat-b { bottom: -12px; right: 8px; }
    .solxb-sat-c { top: 42%; left: 0; }
}
/* 낮은 화면(SE 등): 카드 축소로 무대 안에 수납 */
@media (max-width: 767px) and (max-height: 740px) {
    .solxb-cardwrap .solp-card { width: min(300px, 100%); margin: 0 auto; }
    .solxb-feats { gap: 7px; }
}

/* ─── 플랫 폴백: reduced-motion + 모바일 — 스텝 무대 대신 4개 슬롯을 정적으로 쌓는다 ─── */
.solxb.is-flat { position: relative; height: auto; min-height: 0; padding: 52px 0 0; overflow: visible; } /* sticky(모바일 Surf 스크럽)가 동작하려면 필수 */
.solxb.is-flat .solxb-steps { position: relative; inset: auto; }
.solxb.is-flat .solxb-slot {
    position: relative;
    inset: auto;
    display: flex;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding: 112px 20px 112px; /* 전 제품 동일 — 고정 헤더 여유 포함 */
}
.solxb.is-flat .solxb-slot-intro { padding: 0 20px 4px; }
.solxb.is-flat .solxb-prodtext { opacity: 1; transform: none; }
/* 플랫 Core: 센터 헤딩(와이드 모드) 대신 왼쪽 정렬 + 헤딩 아래 여백을 명시 마진으로 확보
   (데스크톱 무대용 margin-top:auto 앵커는 플랫에서 해제) */
.solxb.is-flat .solxb-slot[data-index="2"] .solxb-prod-wide { text-align: left; align-items: flex-start; height: auto; }
.solxb.is-flat .solxb-slot[data-index="2"] .corex-headwrap { margin-top: 0; margin-bottom: 48px; }
.solxb.is-flat .solxb-slot[data-index="2"] .corex-cardwrap { margin-top: 0; }
.solxb.is-flat .solxb-slot[data-index="2"] .solp-name-row { justify-content: flex-start; }
/* 플랫에선 배경 레이어(스테이지 전용) 대신 Core·Surf 슬롯이 자기 다크 배경을 칠한다 */
.solxb.is-flat .solxb-slot[data-index="2"] { background: linear-gradient(160deg, #16171d 0%, #0e0f13 100%); }
/* Surf 는 Core 의 잉크(#0e0f13)에서 시작해 바이올렛으로 — 경계가 그라데이션으로 이어진다 */
.solxb.is-flat .solxb-slot[data-index="3"] { background: linear-gradient(180deg, #0e0f13 0%, #16112a 22%, #1a1433 45%, #0f0d1f 100%); }
.solxb.is-flat .solxb-slot[data-index="2"] .solp-name,
.solxb.is-flat .solxb-slot[data-index="3"] .solp-name,
.solxb.is-flat .solxb-slot[data-index="2"] .medx-head,
.solxb.is-flat .solxb-slot[data-index="3"] .medx-head,
.solxb.is-flat .solxb-slot[data-index="3"] .medx-item.is-on .medx-item-title { color: #fff; }
.solxb.is-flat .solxb-slot[data-index="2"] .solp-tag,
.solxb.is-flat .solxb-slot[data-index="3"] .solp-tag { color: rgba(255, 255, 255, 0.45); }
.solxb.is-flat .solxb-slot[data-index="3"] .medx-item-title { color: rgba(255, 255, 255, 0.38); }
.solxb.is-flat .solxb-slot[data-index="3"] .medx-item-desc { color: rgba(255, 255, 255, 0.66); }
.solxb.is-flat .solxb-slot[data-index="3"] .medx-list { border-top-color: rgba(255, 255, 255, 0.18); }
.solxb.is-flat .solxb-slot[data-index="3"] .medx-item { border-bottom-color: rgba(255, 255, 255, 0.18); }
.solxb.is-flat .solxb-slot[data-index="3"] .solxb-cta { color: #6db4ff; border-color: rgba(109, 180, 255, 0.4); }
/* 플랫 타이포 통일 — 제품(Med·Core·Surf)마다 달랐던 크기를 한 세트로 */
.solxb.is-flat .medx-head { font-size: clamp(26px, 7.2vw, 34px); line-height: 1.32; }
/* 플랫에선 아코디언을 전부 펼쳐 정적 목록으로 — 스크럽 싱크가 없으니 숨은 항목이 '안 보이는' 문제 해소 */
.solxb.is-flat .medx-item-title { color: #1d1d1f; font-size: 19px; } /* Core 카드 캡션(19px)과 동일 */
.solxb.is-flat .medx-item.is-on .medx-item-title { font-size: 19px; }
.solxb.is-flat .medx-item-desc { max-height: none; opacity: 1; margin-top: 8px; font-size: 15.5px; }
.solxb.is-flat .solxb-slot[data-index="3"] .medx-item.is-on .medx-item-title,
.solxb.is-flat .solxb-slot[data-index="3"] .medx-item .medx-item-title { color: #fff; }
/* Surf 는 장면 카드가 설명을 품으므로 좌측 아코디언은 모바일에서 중복 — 숨긴다 */
.solxb.is-flat .solxb-slot[data-index="3"] .medx-list { display: none; }
/* Surf 플랫: 슬롯이 활주로(320lvh)가 되고, 텍스트+무대 한 덩어리가 100lvh 로 sticky —
   PC 무대의 미니 버전. 수동 오프셋이 없어 화면 크기와 무관하게 잘리지 않는다 */
.solxb.is-flat .solxb-slot[data-index="3"] { display: block; height: 320lvh; padding: 0; }
.solxb.is-flat .solxb-slot[data-index="3"] .solxb-prod {
    position: sticky;
    top: 0;
    height: 100lvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 112px 20px 32px; /* 상단: 고정 헤더에 이름줄이 가리지 않는 오프셋 */
}
.solxb.is-flat .solxb-slot[data-index="3"] .solxb-prodtext { order: 0; text-align: center; }
.solxb.is-flat .solxb-slot[data-index="3"] .solxb-cardwrap { order: 1; width: 100%; }
.solxb.is-flat .solxb-slot[data-index="3"] .solp-name-row { justify-content: center; }
/* Surf 시네마틱 등장 — 준비(is-cine-ready)는 JS 가 걸어주므로 reduced/데스크톱 플랫에선 항상 보인다 */
.solxb.is-flat .solxb-slot[data-index="3"] .solxb-prodtext.is-cine-ready > * { opacity: 0; }
.solxb.is-flat .solxb-slot[data-index="3"] .solxb-prodtext.is-cine > * {
    animation: surfCine 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.solxb.is-flat .solxb-slot[data-index="3"] .solxb-prodtext.is-cine > *:nth-child(2) { animation-delay: 0.2s; }
.solxb.is-flat .solxb-slot[data-index="3"] .solxb-prodtext.is-cine > *:nth-child(3) { animation-delay: 0.4s; }
@keyframes surfCine {
    from { opacity: 0; transform: translateY(28px); filter: blur(12px); }
    to { opacity: 1; transform: none; filter: none; }
}
@media (max-width: 767px) {
    .solxb.is-flat .solxb-prod { grid-template-columns: 1fr; gap: 24px; padding: 0; }
}



.gsent-area { position: relative; z-index: 10; }
.gsent {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    background-image: radial-gradient(#e2e5ea 1px, transparent 1px);
    background-size: 24px 24px;
    display: flex;
    align-items: center;
}
.gsent-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 75rem; /* 전 섹션 공통 정렬선 */
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 4rem);
}
.gsent-eyebrow {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #6e6e73;
    margin-bottom: 26px;
    opacity: 0;
    transform: translateY(18px);
    filter: blur(5px);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
.gsent-eyebrow.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }
.gsent-sentence {
    margin: 0;
    font-size: clamp(34px, 5vw, 72px); /* 홈 공통 디스플레이 스케일 */
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.32;
    color: #1d1d1f;
    max-width: 56rem;
}
.gsent-w {
    display: inline-block;
    margin-right: 0.35em;
    opacity: 0;
    transform: translateY(26px);
    filter: blur(6px);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
.gsent-w.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }
.gsent-w-accent.is-in {
    background: linear-gradient(90deg, #0071e3, #7d3ff2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gsent-ev { position: absolute; inset: 0; pointer-events: none; }
.gsent-e {
    position: absolute;
    left: var(--x);
    top: var(--y);
    opacity: 0;
    transform: translateY(16px) rotate(calc(var(--r) * 1deg)) scale(0.88);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gsent-e.is-in { opacity: 1; transform: translateY(0) rotate(calc(var(--r) * 1deg)) scale(1); animation: gsentFloat 6s ease-in-out infinite alternate; }
.gsent-e.is-in:nth-child(2n) { animation-delay: -2.6s; }
@keyframes gsentFloat {
    from { margin-top: 0; }
    to { margin-top: -8px; }
}

/* 자립형 칩·토스트 (다른 페이지에서도 단독 동작) */
.gsent-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 7px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #48484d;
    box-shadow: 0 12px 24px -12px rgba(16, 17, 20, 0.25);
    white-space: nowrap;
}
.gsent-chip-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: #0071e3; flex: none; }
.gsent-toast {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    box-shadow: 0 16px 32px -16px rgba(16, 17, 20, 0.3);
    white-space: nowrap;
}

.gsent-wire {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 132px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 9px;
    padding: 12px;
    box-shadow: 0 14px 28px -14px rgba(16, 17, 20, 0.25);
}
.gsent-wire-bar { display: block; height: 7px; border-radius: 4px; background: #e8eaee; }
.gsent-wire-box { display: block; height: 34px; border-radius: 6px; border: 1.5px dashed #d3d7dd; background: #f3f5f8; }
.gsent-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    color: #0071e3;
    box-shadow: 0 14px 28px -14px rgba(16, 17, 20, 0.25);
}
.gsent-live {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 9px;
    padding: 11px 13px;
    box-shadow: 0 14px 28px -14px rgba(16, 17, 20, 0.25);
}
.gsent-live svg { width: 100px; height: 24px; }
.gsent-live-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; animation: gsentPulse 1.6s ease-in-out infinite; flex: none; }
.gsent-live-label { font-size: 12px; font-weight: 600; color: #48484d; white-space: nowrap; }
@keyframes gsentPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.6); opacity: 0.5; } }
.gsent-label {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 7px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #48484d;
    box-shadow: 0 12px 24px -12px rgba(16, 17, 20, 0.25);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .gsent-w, .gsent-e { transition: none; }
    .gsent-e.is-in { animation: none; }
}
@media (max-width: 767px) {
    /* 모바일도 PC와 같은 핀 스크럽 — 증거 칩만 숨긴다 */
    .gsent { height: 100lvh; } /* dvh 는 주소창 수축마다 변해 덜컹 — 고정 lvh */
    .gsent-ev { display: none; }
}



.selw { position: relative; z-index: 10; }
.selw-area { position: relative; /* height 는 JS 가 트랙 가로 초과분만큼 세팅 */ }
.selw-pin {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    gap: clamp(2.25rem, 5vh, 4rem);
}
.selw-inner {
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 4rem);
}
.selw-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}
.selw-eyebrow { display: block; font-size: 14px; font-weight: 500; color: #6e6e73; margin-bottom: 22px; }
/* 헤딩 — 홈 공통 디스플레이 스케일 + sol-line 채움 문법 */
.selw-heading {
    font-size: clamp(34px, 5vw, 72px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    background-image: linear-gradient(45deg, #1d1d1f calc(var(--fill) - 20%), #d2d2d7 calc(var(--fill) - 5%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.selw-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #6e6e73;
    text-decoration: none;
    transition: color 0.25s ease, gap 0.25s ease;
    white-space: nowrap;
}
.selw-all:hover { color: #0071e3; gap: 11px; }

/* ─── 가로 트랙 ─── */
.selw-track-wrap { width: 100%; }
.selw-track {
    display: flex;
    align-items: flex-start;
    gap: clamp(24px, 3vw, 44px);
    width: max-content;
    /* 시작점을 컨테이너 좌측 정렬선에 맞춘다 */
    padding-left: calc(max((100vw - 75rem) / 2, 0px) + clamp(1.5rem, 5vw, 4rem));
    padding-right: calc(max((100vw - 75rem) / 2, 0px) + clamp(1.5rem, 5vw, 4rem));
    will-change: transform;
}
.selw-item {
    display: block;
    text-decoration: none;
    /* 낮은 뷰포트에서는 세로 공간에 맞춰 카드 폭 축소 */
    width: min(38vw, 540px, calc((100svh - 22rem) * 4 / 3));
    flex: none;
}

/* 브라우저 크롬 카드 — SOLUTIONS .solp-card 와 동일 어휘 */
.selw-card {
    background: #fff;
    border: 1px solid var(--color-line, #e2e5ea);
    border-radius: 14px;
    box-shadow: 0 30px 60px -34px rgba(16, 17, 20, 0.28);
    overflow: hidden;
    margin-bottom: 18px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
.selw-item:hover .selw-card {
    transform: translateY(-5px);
    box-shadow: 0 40px 72px -34px rgba(16, 17, 20, 0.38);
}
.selw-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--color-line-soft, #eef0f3);
}
.selw-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-line, #e2e5ea); flex: none; }
.selw-url { font-size: 11px; color: #6e6e73; margin-left: 6px; }
.selw-thumb {
    margin: 0;
    background: #f3f4f6;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.selw-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.selw-item:hover .selw-thumb img { transform: scale(1.03); }
.selw-title {
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1d1d1f;
    margin: 0 0 5px;
    transition: color 0.25s ease;
}
.selw-item:hover .selw-title { color: #0071e3; }
.selw-sub { margin: 0 0 5px; font-size: 13px; font-weight: 500; color: #6e6e73; }
.selw-scope { margin: 0; font-size: 13px; color: #9ca3af; }

/* 전체 보기 카드 */
.selw-item-more { width: min(30vw, 360px, calc((100svh - 22rem) * 4 / 3)); }
.selw-card-more {
    aspect-ratio: 4 / 4.9; /* 폭이 좁은 만큼 비율을 세워 작품 카드(크롬+4/3)와 같은 높이로 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #f6f7f9;
    border-style: dashed;
    box-shadow: none;
}
.selw-item-more:hover .selw-card-more { box-shadow: 0 30px 60px -34px rgba(16, 17, 20, 0.2); }
.selw-more-label { font-size: 22px; font-weight: 700; color: #1d1d1f; letter-spacing: -0.01em; }
.selw-more-arrow {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--color-line, #e2e5ea);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d1d1f;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.selw-item-more:hover .selw-more-arrow { background: #0071e3; color: #fff; transform: translateX(4px); }
.selw-more-desc { font-size: 13px; color: #6e6e73; }

/* 모바일: 핀 없이 네이티브 가로 스와이프 */
@media (max-width: 767px) {
    .selw-area { height: auto !important; }
    .selw-pin {
        position: static;
        height: auto;
        min-height: 100svh; /* 한 화면을 꽉 사용 — 헤딩+트랙을 세로 중앙 배치 */
        overflow: visible;
        justify-content: center;
        padding: 5.5rem 0 6.5rem; /* 상단은 고정 헤더 몫, 하단은 CTA 경계와의 숨통 */
        gap: 2.5rem;
    }
    .selw-track-wrap {
        overflow-x: auto;
        /* mandatory 는 세로 스와이프의 축 판정을 뺏어 페이지 스크롤을 씹는다 — proximity 로 완화 */
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        /* 스냅이 트랙 좌측 패딩(1.5rem)을 먹지 않게 스냅 기준선을 같은 값으로 */
        scroll-padding-left: 1.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .selw-track-wrap::-webkit-scrollbar { display: none; }
    .selw-track { transform: none !important; }
    .selw-item { width: 84vw; scroll-snap-align: start; opacity: 1 !important; transform: none !important; } /* 카드도 화면 폭을 넓게 */
    .selw-item-more { width: 62vw; }
}



.side-index {
    --si-ink: #1d1d1f;
    --si-track: rgba(29, 29, 31, 0.18);
    position: fixed;
    left: clamp(16px, 2vw, 30px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.side-index.is-dark {
    --si-ink: #ffffff;
    --si-track: rgba(255, 255, 255, 0.28);
}
.side-index.is-visible { opacity: 1; pointer-events: auto; }
.si-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 2.5px 0;
    cursor: pointer;
}
.si-bar {
    display: block;
    width: 24px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--si-track);
    transform: scaleX(0.5);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
    flex: none;
}
.si-item.is-active .si-bar { background: var(--si-ink); }
/* 내비 호버: 전체가 서로 다른 길이로 펼쳐진다 */
.side-index:hover .si-bar { transform: scaleX(var(--sx, 0.9)); }
.si-item:hover .si-bar { background: var(--si-ink); transform: scaleX(1); }
.si-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--si-ink);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
    pointer-events: none;
}
.si-item:hover .si-label { opacity: 1; transform: translateX(0); }
@media (max-width: 1023px) { .side-index { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .si-bar, .si-label { transition: none; }
}



/* clip-path 는 늘 건다 — main 안의 fixed 장식(홈 사이드 목차 등)이 main 영역 밖, 즉 CTA 위로 새지 않게 잘라 준다 */
#main-content.has-cx { margin-bottom: -100vh; transform-origin: 50% 100%; clip-path: inset(0); }
#main-content.has-cx::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100vh; background: #000; opacity: var(--cx-dim, 0); pointer-events: none; z-index: 100; }

.cx-scene { --cx-night: #15181d; --cx-gx: clamp(1.25rem, 5.5vw, 7rem); position: relative; height: 300vh; background: var(--cx-night); color: #fff; font-family: 'Wanted Sans Variable', 'Outfit', system-ui, sans-serif; word-break: keep-all; }
.cx-scene .cta-section { position: absolute; top: 100vh; left: 0; width: 0; height: 0; }
.cx-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; }
.cx-wrap { max-width: 1680px; margin: 0 auto; padding: 0 var(--cx-gx); }
.cx-scene [data-in] { opacity: var(--o, 0); }
.cx-rise { display: block; transform: translateY(calc((1 - var(--o, 0)) * 28px)); }

/* 처음엔 2.39:1 시네마 스코프 창 → 화면 전체로 열린다 */
.cx-frame { position: absolute; inset: 0; z-index: 0; overflow: hidden; clip-path: inset(calc((1 - var(--o, 0)) * 31vh) calc((1 - var(--o, 0)) * 22vw) round calc((1 - var(--o, 0)) * 20px)); }
.cx-frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 58% 40%; transform: scale(calc(1.28 - var(--cam, 0) * .28)); }
/* 제목 자리(왼쪽 아래)만 가라앉히고, 맨 아래는 푸터 바탕색과 같게 끝나 이음매가 없다 */
.cx-shade { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg, var(--cx-night) 0%, rgba(21,24,29,.9) 18%, rgba(21,24,29,.55) 52%, rgba(21,24,29,.28) 100%),
                linear-gradient(90deg, rgba(21,24,29,.6) 0%, rgba(21,24,29,0) 62%); }
.cx-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(40px, 7vh, 88px); }
.cx-label { display: inline-flex; align-items: center; gap: 10px; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.66); }
.cx-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cx-title { margin: 20px 0 0; font-size: clamp(56px, 8.4vw, 156px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.cx-w { display: inline-block; padding-bottom: .05em; filter: blur(calc((1 - var(--o, 0)) * 16px)); transform: translateY(calc((1 - var(--o, 0)) * .3em)); }
/* 막대의 선만 진행도로 켜고 내용은 각자 등장한다 */
.cx-scene .cx-bar { opacity: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: clamp(28px, 5vh, 56px); padding-top: clamp(20px, 3vh, 28px); border-top: 1px solid rgba(255,255,255,calc(var(--o, 0) * .16)); }
.cx-sub { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: rgba(255,255,255,.8); }
.cx-acts { display: flex; align-items: center; gap: 22px; }
.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 64px; padding: 0 34px; border-radius: 999px; background: #fff; color: #191f28; font-size: 17px; font-weight: 700; white-space: nowrap; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.cx-btn svg { width: 18px; height: 18px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.cx-btn:hover { transform: translateY(-2px); } .cx-btn:hover svg { transform: translateX(4px); }
.cx-tel { display: inline-flex; align-items: center; gap: 10px; height: 64px; font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 600; color: #fff; white-space: nowrap; }
.cx-tel small { font-family: 'Wanted Sans Variable', sans-serif; font-size: 14px; font-weight: 500; opacity: .6; }

@media (max-width: 767px) {
    .cx-frame { clip-path: inset(calc((1 - var(--o, 0)) * 40vh) calc((1 - var(--o, 0)) * 8vw) round calc((1 - var(--o, 0)) * 14px)); }
    .cx-frame img { object-position: 62% 40%; }
    .cx-title { font-size: 14.4vw; line-height: 1.04; }
    .cx-w { filter: none; }
    .cx-scene .cx-bar { flex-direction: column; align-items: stretch; gap: 18px; }
    .cx-acts { flex-direction: column; align-items: stretch; gap: 6px; }
    .cx-btn { width: 100%; height: 58px; }
    .cx-tel { justify-content: center; height: 48px; }
}



.ft { position: relative; z-index: 10; background: #15181d; font-family: 'Wanted Sans Variable', 'Outfit', system-ui, sans-serif; word-break: keep-all; }
.ft--on-light { background: #fff; }
.ft-sheet { background: #f2f4f6; color: #191f28; border-radius: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px) 0 0; padding: clamp(72px, 7vw, 112px) 0 calc(40px + env(safe-area-inset-bottom, 0px)); }
.ft-wrap { max-width: 1680px; margin: 0 auto; padding: 0 clamp(1.25rem, 5.5vw, 7rem); }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 48px clamp(28px, 3vw, 56px); }
.ft-logo { height: 26px; width: auto; }
.ft-logo-text { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700; }
.ft-say { margin: 20px 0 0; font-size: clamp(22px, 1.8vw, 30px); font-weight: 800; letter-spacing: -.035em; line-height: 1.35; }
.ft-say span { color: #8b95a1; }
.ft-hd { margin: 0 0 18px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8b95a1; }
.ft-col { display: grid; align-content: start; gap: 11px; font-size: 16px; }
.ft-col a { justify-self: start; color: #4e5968; transition: color .2s; }
.ft-col a:hover { color: #191f28; }
.ft-en { font-family: 'Outfit', 'Wanted Sans Variable', sans-serif; font-weight: 500; }
.ft-col small { display: block; margin-top: -2px; font-size: 13.5px; color: #8b95a1; }
.ft-office .ft-hd { margin-bottom: 7px; }
.ft-office p { margin: 0; font-size: 15px; line-height: 1.6; color: #4e5968; }
.ft-maps { display: flex; gap: 14px; font-size: 14px; }
.ft-maps a { color: #191f28; border-bottom: 1px solid #c9cfd6; }
.ft-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; margin-top: clamp(64px, 6vw, 96px); padding-top: 24px; border-top: 1px solid #dde1e6; font-size: 13.5px; line-height: 1.7; color: #8b95a1; }
.ft-legal-l { display: flex; flex-wrap: wrap; gap: 0 18px; }
.ft-legal-r { display: flex; gap: 20px; white-space: nowrap; }
.ft-legal-r a { color: #4e5968; } .ft-legal-r b { font-weight: 700; }
@media (max-width: 1100px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 767px) {
    .ft-grid { gap: 40px 24px; }
    .ft-office { grid-column: 1 / -1; }
    .ft-legal { flex-direction: column; }
    .ft-legal-l { flex-direction: column; }
}



        /* iOS 사파리는 데스크탑 엔진이 무시하는 우측 오버플로도 팬 영역으로 열어버린다.
           clip 은 hidden 과 달리 스크롤 컨테이너를 만들지 않아 sticky 무대가 안 깨지고,
           미지원 브라우저는 값을 무시하므로 부작용이 없다 */
        html, body { overflow-x: clip; }
        /* viewport-fit=cover: 페이지가 iOS 툴바·홈 인디케이터 뒤까지 채워진다(흰 띠 대신 원래 화면).
           대신 고정 헤더·푸터·모바일 메뉴는 안전영역만큼 밀어 노치/홈바에 먹히지 않게 */
        @supports (padding: env(safe-area-inset-top)) {
            header { padding-top: env(safe-area-inset-top); }
            #mobile-menu { padding-top: env(safe-area-inset-top); }
        }
        header {
            transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        header.header-hidden {
            transform: translateY(-50%) scale(0.96);
            opacity: 0;
            filter: blur(12px);
            pointer-events: none;
        }
    


.wchat-fab{--wc-brand:#0077E6;--wc-brand-hover:#0068cc;position:fixed;right:24px;bottom:24px;z-index:70;width:60px;height:60px;border:0;border-radius:23px;background:var(--wc-brand);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px #0077e644;transition:transform .25s,opacity .3s,visibility .3s}
.wchat-fab:hover{transform:translateY(-3px)}
/* 공통 CTA 장면("사진이 열린다")에서는 연출을 가리지 않게 물러난다. 패널이 열려 있으면 그대로 둔다 */
.wchat-fab.is-away:not(.open){opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none}
.wchat-fab svg{position:absolute;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;transition:opacity .2s,transform .25s}
.wchat-fab .ic-x{opacity:0;transform:rotate(-90deg)}
.wchat-fab.open .ic-chat{opacity:0;transform:rotate(90deg)}
.wchat-fab.open .ic-x{opacity:1;transform:rotate(0)}
.wchat-fab .badge{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 5px;border:2px solid #fff;border-radius:12px;background:#ef5261;color:#fff;font-size:14px;font-weight:700;display:none;align-items:center;justify-content:center}
/* 글꼴: 닫힌 패널도 글자가 배치되면 브라우저가 폰트를 받는다. About·Expertise 는 1.29MB 전체 폰트를
   일부러 안 받는 페이지라, 처음 열 때(.is-used) 에만 전체 폰트를 건다 */
.wchat-panel{--wc-brand:#0077E6;--wc-brand-hover:#0068cc;--wc-line:#e5e7eb;position:fixed;right:24px;bottom:98px;z-index:71;width:410px;max-width:calc(100vw - 32px);height:700px;max-height:calc(100dvh - 122px);background:#f6f7f9;color:#252a34;border:1px solid #ffffffd9;border-radius:28px;box-shadow:0 24px 80px #172c462b,0 4px 20px #172c4612;display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);transform-origin:bottom right;pointer-events:none;transition:opacity .25s,transform .3s,visibility .25s;font-family:ui-sans-serif,system-ui,sans-serif;text-align:left;word-break:keep-all}
.wchat-panel.is-used{font-family:'Wanted Sans Variable','Outfit',ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji'}
.wchat-panel.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.wchat-panel [hidden]{display:none!important}
.wchat-panel button,.wchat-panel textarea,.wchat-panel input{font-family:inherit}
.wchat-panel button:focus-visible,.wchat-fab:focus-visible{outline:3px solid var(--wc-brand);outline-offset:3px}
.wchat-head{display:flex;align-items:center;gap:10px;padding:20px 22px;background:#fff;flex-shrink:0}
.wchat-avatar{width:38px;height:38px;border-radius:13px;background:#eaf4ff;color:var(--wc-brand);display:flex;align-items:center;justify-content:center;font:800 22px 'Outfit',sans-serif;flex-shrink:0}
.wchat-head b{font-size:15px;letter-spacing:-.03em}
.wchat-status{display:block;font-size:14px;color:#667382;margin-top:3px}
.wchat-close{margin-left:auto;border:0;background:transparent;width:30px;height:30px;border-radius:10px;color:#737b87;font-size:25px;line-height:1;cursor:pointer}
.wchat-close:hover{background:#f0f2f5}
.wchat-home{flex:1;min-height:0;overflow-y:auto;padding:25px 22px 18px;background:radial-gradient(ellipse at 10% 0%,#e7f2ff 0%,transparent 65%),#f6f7f9;overscroll-behavior:contain}
.wchat-eyebrow{font:600 12px 'Outfit',sans-serif;letter-spacing:.14em;color:#5781a8}
.wchat-intro h2{font-size:27px;line-height:1.35;letter-spacing:-.065em;font-weight:750;margin:10px 0}
.wchat-intro h2 span{font-size:24px}
.wchat-intro p{font-size:15px;line-height:1.7;color:#788391;margin:0}
.wchat-welcome{background:#fff;border:1px solid #e9edf2;border-radius:20px;padding:17px;margin-top:23px;box-shadow:0 4px 12px #1a355507}
.wchat-team{display:flex;align-items:center;gap:10px;margin-bottom:17px}
.wchat-team-icon{width:36px;height:36px;border-radius:13px;background:#eef5ff;color:var(--wc-brand);display:flex;align-items:center;justify-content:center;font:800 20px 'Outfit',sans-serif}
.wchat-team b{display:block;font-size:15px;font-weight:700}
.wchat-team div>span{display:block;font-size:14px;color:#667382;margin-top:4px}
.wchat-start{width:100%;border:0;border-radius:12px;padding:14px 16px;background:var(--wc-brand);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:background .2s}
.wchat-start:hover{background:var(--wc-brand-hover)}
.wchat-chevron{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wchat-hours{display:flex;align-items:center;justify-content:center;gap:5px;font-size:14px;color:#667382;margin:12px 0 0}
.wchat-hours>span{width:5px;height:5px;border-radius:50%;background:#95a4b7}
.wchat-topics{margin-top:21px}
.wchat-topics h3{font-size:14px;font-weight:650;color:#808996;margin:0 0 10px 3px}
.wchat-topics button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 14px;margin-top:6px;border:1px solid #e9edf2;border-radius:12px;background:#fff;font-size:15px;color:#505c6c;text-align:left;cursor:pointer;transition:background .2s}
.wchat-topics button:hover{background:#eef5ff}
.wchat-topics .wchat-chevron{width:16px;height:16px;color:#8795a5}
.wchat-home-note{font-size:14px;text-align:center;color:#667382;margin:16px 0 0;line-height:1.6}
.wchat-conversation{display:flex;flex-direction:column;flex:1;min-height:0}
.wchat-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 18px;display:flex;flex-direction:column;gap:3px;background:#f6f7f9}
.wchat-body::-webkit-scrollbar,.wchat-home::-webkit-scrollbar{width:4px}
.wchat-body::-webkit-scrollbar-thumb,.wchat-home::-webkit-scrollbar-thumb{background:#d6dae0;border-radius:2px}
.wchat-nav{display:flex;justify-content:space-around;background:#fff;border-top:1px solid #eceff3;padding:10px 30px;flex-shrink:0}
.wchat-nav button{display:flex;flex-direction:column;align-items:center;gap:5px;width:90px;padding:5px;border:0;border-radius:10px;background:none;color:#667382;font-size:14px;cursor:pointer}
.wchat-nav button[aria-current]{color:var(--wc-brand)}
.wchat-nav button:hover{background:#f5f8fc}
.wchat-nav svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linejoin:round}
.wchat-error{margin:0;padding:7px 16px 12px;background:#fff;color:#bb4452;font-size:14px;line-height:1.5}
.wchat-msg{position:relative;max-width:78%;padding:6px 11px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;animation:wchat-in .35s cubic-bezier(.22,1,.36,1)}
@keyframes wchat-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes wchat-blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.wchat-msg.me{align-self:flex-end;background:var(--wc-brand);color:#fff;border-radius:16px 4px 16px 16px}
.wchat-msg.me+.wchat-msg.me{border-radius:16px}
.wchat-msg.admin{align-self:flex-start;background:#fff;color:#374151}
.wchat-msg.admin,.wchat-hello{box-shadow:0 2px 6px #172c4607;border:1px solid #eceff3;border-radius:4px 16px 16px 16px}
.wchat-message-content{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:5px}
.wchat-sender{font-size:12px;line-height:1.3;font-weight:600;color:#667382;padding-left:2px}
.wchat-body>.wchat-reply:not(:first-child){margin-top:13px}
.wchat-body>.wchat-reply+.wchat-msg.me{margin-top:13px}
.wchat-body>.wchat-card,.wchat-body>.wchat-row:not(.wchat-reply){margin-top:10px}
/* 메신저 문법: 프로필과 이름은 묶음의 첫 말풍선 위에만, 이어지는 말풍선은 같은 들여쓰기로 붙는다 */
.wchat-body>.wchat-reply.is-cont{margin-top:0}
/* 눈에만 안 보이게 — display:none 이면 묶인 답변의 발화자가 접근성 트리에서도 사라진다 */
.wchat-reply.is-cont .wchat-sender{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wchat-reply.is-cont .wchat-mini{visibility:hidden;height:0;padding:0}
.wchat-reply.is-cont .wchat-msg.admin{border-radius:16px}
/* 시각은 같은 사람이 같은 분에 보낸 묶음의 마지막 말풍선 옆에만. 말풍선 밖에 얹어 배치를 건드리지 않는다 */
.wchat-time{position:absolute;bottom:1px;font-size:11px;line-height:1.3;color:#7a8594;white-space:nowrap;font-weight:400}
.wchat-msg.me .wchat-time{right:100%;margin-right:6px}
.wchat-msg.admin .wchat-time{left:100%;margin-left:6px}
.no-time .wchat-time{display:none}
.wchat-hello{align-self:flex-start;background:#fff;color:#374151;font-size:14px;line-height:1.5;padding:7px 11px}
/* 연락처 카드 (첫 메시지 후, 선택 입력) */
.wchat-card{align-self:stretch;background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(9,30,66,.07);animation:wchat-in .35s cubic-bezier(.22,1,.36,1)}
.wchat-card p{font-size:13px;color:#6b7280;line-height:1.55;margin:0 0 10px}
.wchat-card input{width:100%;border:1px solid var(--wc-line);border-radius:10px;padding:9px 12px;font-size:14px;margin-bottom:8px;outline:none;transition:border-color .2s ease}
.wchat-card input:focus{border-color:var(--wc-brand)}
.wchat-card .row{display:flex;gap:6px;align-items:center}
.wchat-card .btn-save{flex:1;background:var(--wc-brand);color:#fff;border:0;border-radius:10px;padding:10px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s ease}
.wchat-card .btn-save:hover{background:var(--wc-brand-hover)}
.wchat-card .btn-skip{background:none;border:0;color:#667382;font-size:14px;cursor:pointer;padding:10px}
.wchat-card .note{font-size:12px;color:#667382;margin:8px 0 0;text-align:center}
/* 답변 말풍선 옆 심볼 아바타 + 수신 타이핑 표시 */
.wchat-row{display:flex;align-items:flex-start;gap:8px;align-self:flex-start;max-width:80%}
.wchat-row .wchat-msg,.wchat-row .wchat-hello{max-width:100%}
.wchat-mini{width:36px;height:36px;border-radius:13px;flex-shrink:0;object-fit:contain;background:#fff;box-shadow:0 1px 4px rgba(9,30,66,.14);padding:7px}
.wchat-mini.txt{display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:800;font-size:17px;color:var(--wc-brand);padding:0}
.wchat-typing-bubble{display:inline-flex;gap:4px;align-items:center;background:#fff;border-radius:4px 16px 16px 16px;padding:14px 14px;box-shadow:0 2px 10px rgba(9,30,66,.07);animation:wchat-in .3s ease}
.wchat-typing-bubble span{width:6px;height:6px;border-radius:50%;background:#9ca3af;animation:wchat-blink 1.2s infinite}
.wchat-typing-bubble span:nth-child(2){animation-delay:.2s}
.wchat-typing-bubble span:nth-child(3){animation-delay:.4s}
/* 캡슐형 입력창 안에 원형 전송 버튼 */
.wchat-foot{flex-shrink:0;padding:12px 14px;background:#f6f7f9}
.wchat-compose-pill{display:flex;align-items:flex-end;gap:8px;padding:5px;border:1px solid #e0e5eb;border-radius:28px;background:#fff;transition:border-color .2s}
.wchat-compose-pill:focus-within{border-color:#a4c6e7}
.wchat-foot textarea{display:block;flex:1;width:100%;min-width:0;min-height:42px;max-height:140px;resize:none;border:0;border-radius:0;outline:none;box-shadow:none;padding:8px 0 8px 12px;background:transparent;color:#252a34;caret-color:var(--wc-brand);font-size:16px;line-height:26px;overflow-y:auto}
.wchat-foot textarea::placeholder{color:#63798c}
.wchat-send{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;flex-shrink:0;border:0;border-radius:50%;background:var(--wc-brand);color:#fff;cursor:pointer;transition:background .2s}
.wchat-send svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wchat-send:hover{background:var(--wc-brand-hover)}
.wchat-send:disabled{background:#c6daeb;color:#6c8ba5;cursor:default}
.wchat-back{display:flex;align-items:center;justify-content:center;width:32px;height:36px;padding:0;flex-shrink:0;border:0;border-radius:10px;background:transparent;color:#526173;cursor:pointer}
.wchat-back:hover{background:#f0f3f7}
.wchat-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wchat-panel[data-view="chat"] .wchat-nav{display:none}
.wchat-panel[data-view="chat"] .wchat-head{padding:14px 16px;gap:8px;border-bottom:1px solid #eef0f3}
.wchat-panel[data-view="chat"] .wchat-avatar{width:34px;height:34px}
.wchat-panel[data-view="chat"] .wchat-body{padding:20px 16px}
.wchat-panel[data-view="chat"] .wchat-foot{padding:10px 12px 14px}
/* 상담 종료 막대 — 입력창 자리를 대신한다 */
.wchat-closed{flex-shrink:0;padding:14px 14px 16px;background:#fff;border-top:1px solid #eceff3;text-align:center}
.wchat-closed p{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 12px;font-size:14px;font-weight:600;color:#4b5563}
.wchat-closed p svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wchat-closed-actions{display:flex;gap:8px}
.wchat-closed-actions button{flex:1;padding:12px 10px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}
.wchat-closed-leave{border:1px solid #e0e5eb;background:#fff;color:#505c6c}
.wchat-closed-leave:hover{background:#f3f5f8}
.wchat-closed-restart{border:0;background:var(--wc-brand);color:#fff}
.wchat-closed-restart:hover{background:var(--wc-brand-hover)}
/* 저장 대기·실패 상태는 해당 말풍선에 표시 */
.wchat-msg.pending{opacity:.7}
.wchat-msg .wchat-delivery{display:block;margin-top:5px;font-size:12px;line-height:1.4}
.wchat-msg.failed{background:#edf1f5;color:#465363;box-shadow:inset 0 0 0 1px #d9e0e8}
.wchat-delivery button{padding:2px 4px;border:0;background:transparent;color:var(--wc-brand);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
@media(max-width:820px){
  .wchat-fab{right:16px;bottom:calc(20px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:21px}
  .wchat-panel{right:16px;bottom:calc(88px + env(safe-area-inset-bottom));max-height:calc(100dvh - 108px - env(safe-area-inset-bottom))}
}
@media(max-width:480px){
  .wchat-panel{right:0;bottom:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);z-index:110;overflow:visible}
  /* 패널 아래를 같은 색으로 끝까지 덮는다 — visualViewport.height 는 사파리 하단 바를 뺀 값이라,
     거기에 높이를 맞추면 패널이 하단 바 위에서 끝나고 반투명한 바 뒤로 뒷화면이 비친다고 캡처에서 해석했다(실기 좌표 미측정).
     바 높이는 수시로 바뀌어 계산으로 못 맞춘다. 키보드 뒤까지 내려가도 보이지 않으니 넉넉히 둔다 */
  .wchat-panel::after{content:'';position:absolute;left:0;right:0;top:100%;height:60vh;background:#f6f7f9;pointer-events:none}
  .wchat-panel[data-view="home"]::after{background:#fff}
  .wchat-home{padding:26px 24px}
  .wchat-intro h2{font-size:30px}
  .wchat-welcome{margin-top:28px}
  .wchat-topics{margin-top:25px}
  .wchat-card input{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.wchat-panel,.wchat-fab,.wchat-fab svg,.wchat-msg,.wchat-card,.wchat-typing-bubble{animation:none;transition:none}}
@media print{.wchat-fab,.wchat-panel{display:none}}