/* ==========================================================================
   시작 화면 — 전역 스타일 (Base/Helpers/StartScreen.cs + js/start-screen.js)

   로그인하지 않은 사람이 웹(clevi.app)·Ivy 앱에서 처음 보는 화면이다. 스크립트가 body 끝에 만드는 층이라
   스코프 속성이 붙지 않고, 웹에서는 런타임을 내려받는 동안(테마 CSS 가 붙기 전)부터 보이므로 전역 파일로 둔다.
   두 index.html 이 clevi-tour.css 다음에 링크한다.

   색: 부트 카드(app.css .boot-loader)와 같은 규칙이다. 잉크·액센트·프리즘은 테마 토큰이 먼저고, 리터럴은 토큰이
   아직 없는 첫 프레임의 폴백이다. 재질(종이·필드·그림자)만은 Mist 값을 직접 적는다 — surface.css 가 비-Mist 바닥값
   (#FFFFFF)을 테마보다 먼저 정의해, 토큰을 먼저 읽으면 다크 첫 프레임에 흰 판이 뜬다. 다크 값은 스크립트가 지금 지면을
   읽어 단 data-ground="dark" 에 건다(웹 data-clevi-theme, Ivy 테마 링크를 함께 본다).
   층: 1150 — 기존 로그인 대기 화면(.client-login-redirect, Ivy .auth-container)과 같은 자리. 앱 셸·다이얼로그 위,
   부트 카드(9000) 아래라 웹 첫 방문의 진행 막대가 이 화면 위에 남는다.
   움직임: 이 파일에는 애니메이션이 없다. 오너 결정(2026-10-02)으로 움직임 줄이기 설정과 관계없이 움직이므로, 반복·등장
   움직임은 스크립트가 Web Animations·캔버스로 그린다(surface.css 의 움직임 바닥이 닿지 않는다).
   Mist 규칙: 표면에 선·링 없음, 강조는 워시와 깊이, 포커스는 블룸과 워시.
   ========================================================================== */

/* 프리즘 링·AI 아바타가 도는 각도. 스크립트가 Web Animations 로 이 값을 돌린다. */
@property --cl-start-spin {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* --------------------------------------------------------------------------
   1. 바탕 — 값 한 벌. 다크는 아래 [data-ground="dark"] 가 같은 이름을 바꾼다.
   -------------------------------------------------------------------------- */
.cl-start {
    --cl-start-canvas: var(--clc-body-background-color, #ECEBEF);
    --cl-start-paper: rgba(255, 255, 255, 0.82);
    --cl-start-raised: rgba(255, 255, 255, 0.95);
    --cl-start-chrome: rgba(255, 255, 255, 0.72);
    --cl-start-field: rgba(20, 16, 40, 0.05);
    --cl-start-field-strong: rgba(20, 16, 40, 0.085);
    --cl-start-shadow-1: 0 1px 2px rgba(20, 14, 45, 0.06), 0 4px 14px rgba(20, 14, 45, 0.06);
    --cl-start-shadow-2: 0 2px 4px rgba(20, 14, 45, 0.06), 0 14px 36px rgba(20, 14, 45, 0.11);
    --cl-start-specular: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    --cl-start-ink: var(--clv-text-primary, #1A1922);
    --cl-start-ink-2: var(--clv-text-secondary, #5C5A68);
    --cl-start-ink-3: var(--clv-text-tertiary, #7F7D8A);
    --cl-start-accent: var(--clc-primary, #6B45EE);
    --cl-start-on-accent: var(--clc-on-primary, #FFFFFF);
    --cl-start-accent-ink: var(--clc-mist-ink-primary, #5634D0);
    --cl-start-wash: var(--clc-mist-wash-primary, rgba(107, 69, 238, 0.12));
    --cl-start-success: var(--clc-success, #12794A);
    --cl-start-on-success: var(--clc-on-success, #FFFFFF);
    --cl-start-danger-ink: var(--clc-mist-ink-danger, #9A332D);
    --cl-start-danger-wash: var(--clc-mist-wash-danger, rgba(196, 60, 49, 0.10));
    --cl-start-info-ink: var(--clc-mist-ink-info, #1D63C8);
    --cl-start-info-wash: var(--clc-mist-wash-info, rgba(29, 99, 200, 0.10));
    --cl-start-focus: var(--clc-mist-focus-shadow, 0 0 12px 2px rgba(107, 69, 238, 0.45));
    --cl-start-p1: var(--clv-prism-1, #8A62FF);
    --cl-start-p2: var(--clv-prism-2, #008DDC);
    --cl-start-p3: var(--clv-prism-3, #009D7B);
    --cl-start-p4: var(--clv-prism-4, #D445A3);
    --cl-start-aurora: 0.5;
    /* 프리즘 빛의 심지·결에 섞는 흰빛. 흰 지면에서는 섞지 않는다(Mist 프리즘 라이트 보정과 같은 이유). */
    --cl-start-white: 0%;
    /* 그림 속 사람·사진의 색. 내용이라 지면을 따라 바뀌지 않는다. */
    --cl-start-person-a: #2F7D6D;
    --cl-start-person-b: #A8621B;
    --cl-start-person-c: #4B5BD0;
    --cl-start-person-d: #8A4FB8;
    --cl-start-on-person: #FFFFFF;
    /* 워드마크의 고정 잉크(SvgIconCatalogDefaults.LogoTextColor). 브랜드 자산이라 지면을 따라 뒤집지 않는다. */
    --cl-start-wordmark: #565968;
    --cl-start-photo-sky: #FFB27C;
    --cl-start-photo-dusk: #F48FAA;
    --cl-start-photo-sea: #3C72B9;
    --cl-start-photo-deep: #1F4682;
    --cl-start-photo-sun: #FFE9A8;
    --cl-start-photo-night: #1B2350;
    --cl-start-photo-violet: #3B2F70;
    --cl-start-photo-lamp: #FFD27A;
    --cl-start-photo-wall-1: #F5C6A5;
    --cl-start-photo-wall-2: #9CC8E2;
    --cl-start-photo-wall-3: #F2E2A0;
    --cl-start-photo-wall-4: #B9A2E2;
    --cl-start-photo-hill: #6E9F7E;
    --cl-start-photo-teal: #7FD3CF;
    --cl-start-photo-tide: #2E8FA0;
    --cl-start-photo-map: #E9E4D4;
    --cl-start-photo-trail: #D2493B;
    --cl-start-photo-wood: #7FA77F;
    position: fixed;
    z-index: 1150;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    container: cl-start / inline-size;
    background: var(--cl-start-canvas);
    color: var(--cl-start-ink);
    font-family: Pretendard, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
}

.cl-start[data-ground="dark"] {
    --cl-start-canvas: var(--clc-body-background-color, #141318);
    --cl-start-paper: rgba(33, 32, 42, 0.85);
    --cl-start-raised: rgba(46, 44, 58, 0.94);
    --cl-start-chrome: rgba(48, 46, 60, 0.72);
    --cl-start-field: rgba(255, 255, 255, 0.06);
    --cl-start-field-strong: rgba(255, 255, 255, 0.10);
    --cl-start-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.30);
    --cl-start-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.40), 0 16px 40px rgba(0, 0, 0, 0.48);
    --cl-start-specular: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --cl-start-ink: var(--clv-text-primary, #F0EFF4);
    --cl-start-ink-2: var(--clv-text-secondary, #B9B7C4);
    --cl-start-ink-3: var(--clv-text-tertiary, #8A8896);
    --cl-start-accent: var(--clc-primary, #BDA8FA);
    --cl-start-on-accent: var(--clc-on-primary, #2A1A5E);
    --cl-start-accent-ink: var(--clc-mist-ink-primary, #CFC0FC);
    --cl-start-wash: var(--clc-mist-wash-primary, rgba(189, 168, 250, 0.16));
    --cl-start-success: var(--clc-success, #7FDCA6);
    --cl-start-on-success: var(--clc-on-success, #0C3A24);
    --cl-start-danger-ink: var(--clc-mist-ink-danger, #FBB2AB);
    --cl-start-danger-wash: var(--clc-mist-wash-danger, rgba(255, 158, 146, 0.16));
    --cl-start-info-ink: var(--clc-mist-ink-info, #9FC7FF);
    --cl-start-info-wash: var(--clc-mist-wash-info, rgba(159, 199, 255, 0.14));
    --cl-start-focus: var(--clc-mist-focus-shadow, 0 0 12px 2px rgba(189, 168, 250, 0.45));
    --cl-start-p1: var(--clv-prism-1, #A78BFF);
    --cl-start-p2: var(--clv-prism-2, #6FB8F2);
    --cl-start-p3: var(--clv-prism-3, #6FD8B8);
    --cl-start-p4: var(--clv-prism-4, #F09FCE);
    --cl-start-aurora: 0.4;
    --cl-start-white: 30%;
}

.cl-start [hidden] {
    display: none !important;
}

.cl-start :where(h1, p) {
    margin: 0;
}

.cl-start :where(button) {
    font: inherit;
    color: inherit;
}

/* --------------------------------------------------------------------------
   2. 배경 — 오로라와 신경망 캔버스. 누름은 화면 전체가 받고 캔버스 자신은 받지 않는다.
   -------------------------------------------------------------------------- */
.cl-start__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.cl-start__aurora {
    position: absolute;
    inset: -25% -12%;
}

.cl-start__aurora i {
    position: absolute;
    width: clamp(300px, 52cqi, 760px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(56px);
    opacity: var(--cl-start-aurora);
    will-change: transform;
}

.cl-start__aurora i:nth-child(1) {
    top: -8%;
    left: -6%;
    background: radial-gradient(circle, var(--cl-start-p1), transparent 66%);
}

.cl-start__aurora i:nth-child(2) {
    top: -14%;
    right: -8%;
    background: radial-gradient(circle, var(--cl-start-p2), transparent 66%);
}

.cl-start__aurora i:nth-child(3) {
    bottom: -36%;
    left: 24%;
    background: radial-gradient(circle, var(--cl-start-p3), transparent 66%);
}

.cl-start__aurora i:nth-child(4) {
    right: 12%;
    bottom: -28%;
    width: clamp(240px, 36cqi, 560px);
    background: radial-gradient(circle, var(--cl-start-p4), transparent 66%);
    opacity: calc(var(--cl-start-aurora) * 0.7);
}

/* 머리 글자 바로 뒤만 옅게 해 글을 가리지 않는다. 좁은 화면은 아래 컨테이너 규칙이 전체를 옅게 바꾼다. */
.cl-start__neural {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-mask-image: radial-gradient(ellipse 34% 40% at 25% 50%, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.5) 62%, #000 100%);
    mask-image: radial-gradient(ellipse 34% 40% at 25% 50%, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.5) 62%, #000 100%);
}

/* --------------------------------------------------------------------------
   3. 뼈대 — 위(브랜드), 가운데(글·버튼·미리 보기), 아래(약관). 화면보다 길면 줄이 자라 스크롤된다.
   -------------------------------------------------------------------------- */
.cl-start__scroll {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding:
        var(--clv-safe-area-top, 0px)
        var(--clv-safe-area-right, 0px)
        var(--clv-safe-area-bottom, 0px)
        var(--clv-safe-area-left, 0px);
}

.cl-start__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px clamp(20px, 4cqi, 48px) 0;
}

/* Clevi 로고: 색 심벌과 워드마크(제품 원본 경로). 심벌 높이는 Mist 머리 띠 기본값 32px 이고, 워드마크 상자는 같은 높이에
   원본 비율(373:193)을 지킨다. 워드마크는 고정 잉크라 다크 지면에서 대비가 2.66:1 로 떨어져 심벌만 남긴다
   (Mist 기초 §8 다크 지면의 로고 — 흰 워드마크를 임의로 만들지 않는다). */
.cl-start__brand {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cl-start__brand svg {
    display: block;
    flex: none;
}

.cl-start__symbol {
    width: 32px;
    height: 32px;
}

.cl-start__wordmark {
    width: 62px;
    height: 32px;
    fill: var(--cl-start-wordmark);
}

.cl-start[data-ground="dark"] .cl-start__wordmark {
    display: none;
}

/* 웹에만 있다. 앱 안에서는 받을 앱이 없다. 그림 위에 떠 있는 작은 표면이라 크롬 재질이다. */
.cl-start__get-app {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--cl-start-chrome);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: var(--cl-start-shadow-1);
    color: var(--cl-start-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.cl-start__get-app svg {
    width: 14px;
    height: 14px;
}

.cl-start__main {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    grid-template-areas:
        "copy preview"
        "actions preview";
    align-content: center;
    gap: 24px clamp(28px, 5cqi, 64px);
    width: min(100%, 1160px);
    margin-inline: auto;
    padding: 12px clamp(20px, 4cqi, 48px);
}

.cl-start__copy {
    grid-area: copy;
    display: grid;
    align-self: end;
    gap: 16px;
}

.cl-start__actions {
    grid-area: actions;
    display: grid;
    align-content: start;
    gap: 12px;
}

/* 세 줄로 끊어 3·3 → 5 → 3·3 박자가 계단처럼 떨어진다(오너가 고른 문구). */
.cl-start__title {
    font-size: clamp(2rem, 4.7cqi, 3.5rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.cl-start__brandword {
    background: linear-gradient(100deg, var(--cl-start-p1), var(--cl-start-p2), var(--cl-start-p3), var(--cl-start-p4), var(--cl-start-p1));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --------------------------------------------------------------------------
   4. 알림 — 링크로 들어옴·실패·만료·로그아웃. 선 없이 워시로만 구분한다.
   -------------------------------------------------------------------------- */
.cl-start__notice {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    max-width: 30em;
    padding: 11px 14px 11px 11px;
    border-radius: 16px;
    background: var(--cl-start-wash);
}

.cl-start__notice-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--cl-start-raised);
    color: var(--cl-start-accent-ink);
}

.cl-start__notice-icon svg {
    width: 16px;
    height: 16px;
}

.cl-start__notice strong {
    display: block;
    font-size: 0.875rem;
    line-height: 1.45;
}

.cl-start__notice span {
    display: block;
    color: var(--cl-start-ink-2);
    font-size: 0.84375rem;
    line-height: 1.55;
}

.cl-start__notice[data-tone="danger"] {
    background: var(--cl-start-danger-wash);
}

.cl-start__notice[data-tone="danger"] .cl-start__notice-icon {
    color: var(--cl-start-danger-ink);
}

.cl-start__notice[data-tone="info"] {
    background: var(--cl-start-info-wash);
}

.cl-start__notice[data-tone="info"] .cl-start__notice-icon {
    color: var(--cl-start-info-ink);
}

/* --------------------------------------------------------------------------
   5. 버튼·안내
   -------------------------------------------------------------------------- */
.cl-start__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cl-start__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 132px;
    min-height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--cl-start-chrome);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: var(--cl-start-shadow-1);
    color: var(--cl-start-ink);
    font-size: 0.96875rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.cl-start__button:hover {
    background: var(--cl-start-raised);
}

.cl-start__button--primary,
.cl-start__button--primary:hover {
    background: var(--cl-start-accent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 10px 26px rgba(20, 14, 45, 0.18);
    color: var(--cl-start-on-accent);
}

.cl-start__button:focus-visible,
.cl-start__get-app:focus-visible,
.cl-start__more:focus-visible,
.cl-start__tab:focus-visible,
.cl-start__link:focus-visible,
.cl-start__foot a:focus-visible {
    outline: none;
    box-shadow: var(--cl-start-focus);
}

/* 로그인 버튼이 화면 아래로 밀려 안 보일 때만 화면 아래 가운데에 뜬다. 누르면 버튼까지 내려 준다.
   그림·글 위에 떠 있는 작은 표면이라 크롬 재질이고, 스크롤 칸 밖(층 바로 아래)에 있어 내려도 제자리에 남는다. */
.cl-start__more {
    position: absolute;
    right: 0;
    bottom: calc(var(--clv-safe-area-bottom, 0px) + 16px);
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: calc(100% - 32px);
    min-height: 40px;
    margin-inline: auto;
    padding: 0 16px 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--cl-start-chrome);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: var(--cl-start-shadow-2);
    color: var(--cl-start-ink);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

.cl-start__more:hover {
    background: var(--cl-start-raised);
}

.cl-start__more svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--cl-start-accent-ink);
}

.cl-start__button[aria-disabled="true"] {
    cursor: progress;
}

.cl-start__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: conic-gradient(from var(--cl-start-spin), transparent 0 25%, currentColor);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}

.cl-start__button.is-working .cl-start__spinner {
    display: block;
}

.cl-start__status,
.cl-start__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cl-start-ink-3);
    font-size: 0.8125rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.cl-start__hint svg {
    flex: none;
    width: 15px;
    height: 15px;
}

.cl-start[data-state="working"] .cl-start__hint,
.cl-start[data-state="done"] .cl-start__hint {
    display: none;
}

/* 앱에서 브라우저를 연 뒤 기다리는 판. 누른 버튼 자리를 그대로 이어받는다. */
.cl-start__waiting {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    max-width: 30em;
    padding: 14px 16px;
    border-radius: 20px;
    background: var(--cl-start-chrome);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: var(--cl-start-shadow-2);
}

.cl-start__orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--cl-start-raised);
    color: var(--cl-start-accent-ink);
}

.cl-start__orb::before {
    content: "";
    position: absolute;
    inset: -3px;
    padding: 2.5px;
    border-radius: 50%;
    background: conic-gradient(from var(--cl-start-spin), var(--cl-start-p1), transparent 30%, var(--cl-start-p2) 50%, transparent 70%, var(--cl-start-p3) 90%, var(--cl-start-p1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.cl-start__orb svg {
    width: 20px;
    height: 20px;
}

.cl-start__waiting.is-done .cl-start__orb {
    background: var(--cl-start-success);
    color: var(--cl-start-on-success);
}

.cl-start__waiting.is-done .cl-start__orb::before,
.cl-start__waiting.is-done .cl-start__waiting-actions {
    display: none;
}

.cl-start__waiting strong {
    display: block;
    font-size: 0.9375rem;
}

.cl-start__waiting p {
    color: var(--cl-start-ink-2);
    font-size: 0.84375rem;
    line-height: 1.55;
}

.cl-start__waiting-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.cl-start__waiting-actions .cl-start__button {
    min-width: 0;
    min-height: 40px;
    padding: 0 18px;
    font-size: 0.875rem;
}

.cl-start__link {
    padding: 6px 2px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--cl-start-ink-2);
    font-size: 0.84375rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   6. 미리 보기 카드 — 아이비·메신저·할 일·드라이브 장면이 번갈아 돈다. 프리즘은 AI 가 답하는 동안만 켠다.
   -------------------------------------------------------------------------- */
.cl-start__preview {
    grid-area: preview;
    position: relative;
    isolation: isolate;
    align-self: center;
    justify-self: center;
    width: min(100%, 470px);
}

/* 아이비가 답하는 동안 카드 가장자리에서 빛이 밖으로 퍼진다 — Mist 프리즘 빛 시안 B(오너 확정 2026-10-02)와 같은 세
   겹이다. 꼬리(두꺼운 띠를 크게 흐림 — 끊김 없이 멀리까지 옅어진다) · 결(둘레를 서로 다른 빠르기로 흐르는 밝은 자리) ·
   심지(경계에 붙은 얇은 띠 — 링이 끊긴 두 호에서만 달아오른다). 값은 Mist 프리미티브의 응답 중 값이다(플랫폼 홈 예시
   카드와 같다). 다크 지면에서는 세 겹을 더한다(plus-lighter — 겹치는 자리가 흰빛 쪽으로 밝아진다). 미리 보기가
   isolation 이라 빛은 지면이 아니라 층끼리만 더해진다 — Mist 프리미티브와 같은 조건이다.
   흐림(바깥 상자)과 띠(안쪽 <i> 의 마스크)는 두 겹으로 나눈다. 한 요소에 filter 와 mask 를 함께 걸면 마스크가 흐림 뒤에
   적용되어 번진 빛을 도로 잘라내고, 그 잘린 자리가 둥근 사각형 테두리로 보인다(Mist 프리즘 인수인계 §7의 함정). */
.cl-start__tail,
.cl-start__glint,
.cl-start__core,
.cl-start__ring {
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.cl-start__tail {
    inset: -24px;
    z-index: 0;
    filter: blur(34px) saturate(1.5);
}

.cl-start__glint {
    inset: -10px;
    z-index: 0;
    filter: blur(9px) saturate(1.5);
}

.cl-start__core {
    inset: -3px;
    z-index: 0;
    filter: blur(3px) saturate(1.5);
}

.cl-start[data-ground="dark"] .cl-start__tail,
.cl-start[data-ground="dark"] .cl-start__glint,
.cl-start[data-ground="dark"] .cl-start__core {
    mix-blend-mode: plus-lighter;
}

/* 회전은 각도를 그리는 요소 자신이 돈다(--cl-start-spin 은 상속하지 않는다 — 스크립트가 띠·링에 각각 건다). */
.cl-start__tail i,
.cl-start__glint i,
.cl-start__core i,
.cl-start__ring {
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* 띠는 바깥 상자 끝에서 카드 안 1~2px 까지다. 안쪽은 카드가 덮으므로 빛은 밖으로만 보인다. */
.cl-start__tail i,
.cl-start__glint i,
.cl-start__core i {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
}

.cl-start__tail i {
    border-radius: 48px;
    padding: 26px;
    background: conic-gradient(from var(--cl-start-spin), var(--cl-start-p1), var(--cl-start-p2), var(--cl-start-p3), var(--cl-start-p4), var(--cl-start-p1));
}

.cl-start__glint i {
    border-radius: 34px;
    padding: 12px;
    background:
        conic-gradient(from calc(var(--cl-start-spin) * 0.42), transparent 0deg, color-mix(in srgb, #fff var(--cl-start-white), var(--cl-start-p3)) 30deg, transparent 78deg, transparent 186deg, color-mix(in srgb, #fff var(--cl-start-white), var(--cl-start-p2)) 212deg, transparent 250deg, transparent 360deg),
        conic-gradient(from calc(var(--cl-start-spin) * 1.9), transparent 0deg, color-mix(in srgb, #fff var(--cl-start-white), var(--cl-start-p1)) 16deg, transparent 44deg, transparent 138deg, color-mix(in srgb, #fff var(--cl-start-white), var(--cl-start-p4)) 162deg, transparent 196deg, transparent 360deg);
}

/* 심지는 링이 가장 옅은 두 호(84°·266°)에서만 달아오른다. 빛이 센 곳에서는 윤곽선이 빛에 묻힌다. */
.cl-start__core i {
    border-radius: 27px;
    padding: 4px;
    background: conic-gradient(from var(--cl-start-spin),
        color-mix(in srgb, color-mix(in srgb, #fff var(--cl-start-white), var(--cl-start-p1)) 28%, transparent) 0deg,
        color-mix(in srgb, #fff var(--cl-start-white), var(--cl-start-p2)) 84deg,
        color-mix(in srgb, color-mix(in srgb, #fff var(--cl-start-white), var(--cl-start-p3)) 28%, transparent) 172deg,
        color-mix(in srgb, #fff var(--cl-start-white), var(--cl-start-p4)) 266deg,
        color-mix(in srgb, color-mix(in srgb, #fff var(--cl-start-white), var(--cl-start-p1)) 28%, transparent) 360deg);
}

/* 링은 두 군데서 끊는다. 빛이 센 자리에서는 윤곽선이 날아가야 테두리가 아니라 빛으로 읽힌다(Mist 프리즘 링과 같은 식). */
.cl-start__ring {
    inset: 0;
    z-index: 2;
    padding: 1.5px;
    border-radius: 24px;
    background: conic-gradient(from var(--cl-start-spin), var(--cl-start-p1) 0deg, color-mix(in srgb, var(--cl-start-p2) 15%, transparent) 84deg, var(--cl-start-p3) 172deg, color-mix(in srgb, var(--cl-start-p4) 15%, transparent) 266deg, var(--cl-start-p1) 360deg);
}

.cl-start__preview.is-ai .cl-start__tail {
    opacity: 0.4;
}

.cl-start__preview.is-ai .cl-start__glint {
    opacity: 0.52;
}

.cl-start__preview.is-ai .cl-start__core {
    opacity: 0.9;
}

.cl-start__preview.is-ai .cl-start__ring {
    opacity: 0.9;
}

.cl-start__card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px 16px 14px;
    border-radius: 24px;
    background: var(--cl-start-raised);
    box-shadow: var(--cl-start-shadow-2), var(--cl-start-specular);
}

.cl-start__tabs {
    display: flex;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 999px;
    background: var(--cl-start-field);
}

/* 탭은 줄어들며 글자를 자르지 않는다. 자리가 모자라면 탭 줄을 옆으로 밀어 본다. */
.cl-start__tab {
    position: relative;
    flex: none;
    overflow: hidden;
    padding: 6px 13px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--cl-start-ink-2);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.cl-start__tab:hover {
    background: var(--cl-start-field-strong);
}

.cl-start__tab.is-active {
    background: var(--cl-start-raised);
    box-shadow: var(--cl-start-shadow-1);
    color: var(--cl-start-ink);
}

/* 다음 장면으로 넘어가기 전 쉬는 동안 차오르는 밑줄. 스크립트가 늘린다. */
.cl-start__tab-progress {
    position: absolute;
    right: 13px;
    bottom: 2px;
    left: 13px;
    height: 2px;
    border-radius: 2px;
    background: var(--cl-start-accent);
    opacity: 0.75;
    transform: scaleX(0);
    transform-origin: left;
}

.cl-start__scene-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-height: 34px;
}

.cl-start__head-title {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.cl-start__head-title b {
    font-size: 0.90625rem;
}

.cl-start__head-title span {
    color: var(--cl-start-ink-3);
    font-size: 0.75rem;
}

.cl-start__head-end {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--cl-start-ink-3);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.cl-start__head-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--cl-start-wash);
    color: var(--cl-start-accent-ink);
}

.cl-start__head-icon svg {
    width: 18px;
    height: 18px;
}

.cl-start__stack {
    display: flex;
}

.cl-start__stack .cl-start__av {
    width: 24px;
    height: 24px;
    box-shadow: 0 0 0 2px var(--cl-start-raised);
    font-size: 0.65625rem;
}

.cl-start__stack .cl-start__av + .cl-start__av {
    margin-left: -7px;
}

/* 장면 칸 높이는 고정값이 아니다. 스크립트가 장면마다 마지막 모습까지 미리 재서 가장 긴 장면에 맞춘다(잘림·출렁임 방지). */
.cl-start__stage {
    position: relative;
    overflow: hidden;
    padding-bottom: 8px;
}

.cl-start__stage.is-chat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
}

.cl-start__stage.is-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
}

.cl-start__measure {
    position: absolute;
    top: 0;
    left: 16px;
    z-index: -1;
    visibility: hidden;
    pointer-events: none;
}

.cl-start__measure .cl-start__stage {
    height: auto !important;
}

/* 장면 속 사람 */
.cl-start__av {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cl-start-person-c);
    color: var(--cl-start-on-person);
    font-size: 0.75rem;
    font-weight: 700;
}

.cl-start__av[data-c="a"] {
    background: var(--cl-start-person-a);
}

.cl-start__av[data-c="b"] {
    background: var(--cl-start-person-b);
}

.cl-start__av[data-c="d"] {
    background: var(--cl-start-person-d);
}

.cl-start__av.is-ai {
    background: conic-gradient(from var(--cl-start-spin), var(--cl-start-p1), var(--cl-start-p2), var(--cl-start-p3), var(--cl-start-p4), var(--cl-start-p1));
}

.cl-start__av.is-ai::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cl-start-raised);
}

/* 대화 */
.cl-start__msg {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: end;
    gap: 8px;
}

.cl-start__who {
    margin: 0 0 3px 2px;
    color: var(--cl-start-ink-3);
    font-size: 0.71875rem;
}

.cl-start__msg-body {
    display: grid;
    justify-items: start;
    gap: 5px;
    min-width: 0;
}

.cl-start__bubble {
    position: relative;
    width: fit-content;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 16px 16px 16px 6px;
    background: var(--cl-start-field-strong);
    font-size: 0.84375rem;
    line-height: 1.58;
    white-space: pre-line;
}

.cl-start__msg.is-me {
    grid-template-columns: minmax(0, 1fr);
}

.cl-start__msg.is-me .cl-start__msg-body {
    justify-items: end;
}

.cl-start__line {
    display: flex;
    align-items: end;
    gap: 6px;
    max-width: 100%;
}

.cl-start__msg.is-me .cl-start__bubble {
    border-radius: 16px 16px 6px 16px;
    background: var(--cl-start-accent);
    color: var(--cl-start-on-accent);
}

.cl-start__read {
    color: var(--cl-start-accent-ink);
    font-size: 0.6875rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cl-start__msg.is-ai .cl-start__bubble {
    background: var(--cl-start-paper);
    box-shadow: var(--cl-start-shadow-1);
}

.cl-start__typing {
    display: inline-flex;
    gap: 4px;
    padding: 4px 2px;
}

.cl-start__typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cl-start-ink-3);
}

.cl-start__caret {
    display: inline-block;
    width: 7px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -2px;
    border-radius: 2px;
    background: var(--cl-start-accent);
}

.cl-start__photo-msg {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: min(100%, 250px);
    padding: 8px 12px 8px 8px;
    border-radius: 14px;
    background: var(--cl-start-paper);
    box-shadow: var(--cl-start-shadow-1);
}

.cl-start__photo-msg b {
    display: block;
    font-size: 0.8125rem;
}

.cl-start__photo-msg small {
    color: var(--cl-start-ink-3);
    font-size: 0.71875rem;
}

.cl-start__map {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 72% 30%, var(--cl-start-photo-trail) 0 3px, transparent 3.5px),
        linear-gradient(125deg, transparent 46%, var(--cl-start-photo-trail) 47% 50%, transparent 51%),
        radial-gradient(circle at 30% 70%, var(--cl-start-photo-wood) 0 30%, transparent 31%),
        radial-gradient(circle at 75% 65%, var(--cl-start-photo-wood) 0 22%, transparent 23%),
        var(--cl-start-photo-map);
}

.cl-start__reaction {
    position: absolute;
    right: -8px;
    bottom: -9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--cl-start-raised);
    box-shadow: var(--cl-start-shadow-1);
    font-size: 0.75rem;
    font-weight: 600;
}

/* 할 일 */
.cl-start__todo {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto 26px;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    border-radius: 14px;
    background: var(--cl-start-field);
}

.cl-start__todo.is-focus {
    background: var(--cl-start-wash);
}

.cl-start__check {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1.6px var(--cl-start-ink-3);
    color: transparent;
}

.cl-start__check svg {
    width: 13px;
    height: 13px;
}

.cl-start__todo.is-done .cl-start__check {
    background: var(--cl-start-success);
    box-shadow: none;
    color: var(--cl-start-on-success);
}

.cl-start__todo-title {
    min-width: 0;
    font-size: 0.84375rem;
    font-weight: 600;
    line-height: 1.4;
}

.cl-start__todo.is-done .cl-start__todo-title {
    color: var(--cl-start-ink-3);
    text-decoration: line-through;
}

.cl-start__due {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--cl-start-field-strong);
    color: var(--cl-start-ink-2);
    font-size: 0.71875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cl-start__todo .cl-start__av {
    width: 26px;
    height: 26px;
    font-size: 0.6875rem;
}

.cl-start__pbar {
    width: 72px;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--cl-start-field-strong);
}

.cl-start__pbar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--cl-start-accent);
}

.cl-start__adder {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    background: var(--cl-start-wash);
    color: var(--cl-start-ink-3);
    font-size: 0.84375rem;
}

.cl-start__adder svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--cl-start-accent-ink);
}

.cl-start__typed {
    color: var(--cl-start-ink);
}

/* 사진 — 그림은 지면과 상관없는 내용 색이다. */
.cl-start__photos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.cl-start__photo {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: var(--cl-start-shadow-1);
}

.cl-start__photo[data-p="sea"] {
    background:
        radial-gradient(circle at 68% 40%, var(--cl-start-photo-sun) 0 9%, transparent 10%),
        linear-gradient(to bottom, var(--cl-start-photo-sky) 0%, var(--cl-start-photo-dusk) 54%, var(--cl-start-photo-sea) 55%, var(--cl-start-photo-deep) 100%);
}

.cl-start__photo[data-p="night"] {
    background:
        radial-gradient(circle, var(--cl-start-photo-lamp) 0 1.6px, transparent 2.2px) 0 58% / 12px 12px repeat-x,
        linear-gradient(to bottom, transparent 61%, var(--cl-start-photo-lamp) 61.5% 62.5%, transparent 63%),
        linear-gradient(to bottom, var(--cl-start-photo-night) 0%, var(--cl-start-photo-violet) 100%);
}

.cl-start__photo[data-p="village"] {
    background:
        linear-gradient(to bottom, var(--cl-start-photo-sky) 0 22%, transparent 22%),
        linear-gradient(90deg, var(--cl-start-photo-wall-1) 0 20%, var(--cl-start-photo-wall-2) 20% 38%, var(--cl-start-photo-wall-3) 38% 57%, var(--cl-start-photo-wall-4) 57% 76%, var(--cl-start-photo-wall-1) 76%) 0 30% / 100% 26% no-repeat,
        linear-gradient(90deg, var(--cl-start-photo-wall-3) 0 18%, var(--cl-start-photo-wall-4) 18% 40%, var(--cl-start-photo-wall-2) 40% 62%, var(--cl-start-photo-wall-1) 62% 82%, var(--cl-start-photo-wall-3) 82%) 0 64% / 100% 26% no-repeat,
        var(--cl-start-photo-hill);
}

.cl-start__photo[data-p="market"] {
    background:
        radial-gradient(circle at 30% 72%, var(--cl-start-photo-teal) 0 16%, transparent 17%),
        linear-gradient(160deg, var(--cl-start-photo-teal) 0%, var(--cl-start-photo-tide) 100%);
}

/* 올리는 중인 사진은 캔버스 색 베일 아래에 있고, 가운데 고리가 받은 만큼 찬다. */
.cl-start__photo.is-up::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cl-start-canvas);
    opacity: 0.58;
}

.cl-start__up-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    background: conic-gradient(var(--cl-start-accent) calc(var(--cl-start-upload, 0) * 1%), var(--cl-start-field-strong) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
}

.cl-start__photo-meta {
    color: var(--cl-start-ink-3);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.cl-start__toast-chip {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--cl-start-chrome);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: var(--cl-start-shadow-1);
    font-size: 0.78125rem;
    font-weight: 600;
}

.cl-start__toast-chip svg {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--cl-start-success);
}

/* --------------------------------------------------------------------------
   7. 약관 — 웹에만 있다. 앱의 약관은 가입·로그인 화면과 설정에서 본다.
   -------------------------------------------------------------------------- */
.cl-start__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 0 clamp(20px, 4cqi, 48px) 18px;
    color: var(--cl-start-ink-3);
    font-size: 0.78125rem;
}

.cl-start__foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.cl-start__foot a {
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}

.cl-start__foot a:hover {
    color: var(--cl-start-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 개인정보처리방침은 눈에 띄게 둔다(플랫폼 바닥글과 같은 규칙). */
.cl-start__foot .is-emphasis {
    color: var(--cl-start-ink-2);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   8. 좁은 화면(휴대폰·좁힌 창): 카드를 위로, 버튼은 엄지가 닿는 아래로 둔다.
   -------------------------------------------------------------------------- */
@container cl-start (max-width: 760px) {
    .cl-start__neural {
        -webkit-mask-image: none;
        mask-image: none;
        opacity: 0.42;
    }

    .cl-start__top {
        padding-top: 14px;
    }

    .cl-start__symbol {
        width: 28px;
        height: 28px;
    }

    .cl-start__wordmark {
        width: 54px;
        height: 28px;
    }

    .cl-start__get-app {
        min-height: 32px;
        padding: 0 12px;
        font-size: 0.78125rem;
    }

    .cl-start__main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "preview"
            "copy"
            "actions";
        align-content: stretch;
        gap: 20px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .cl-start__preview {
        align-self: start;
        width: 100%;
    }

    .cl-start__copy {
        align-self: start;
        gap: 12px;
    }

    .cl-start__actions {
        align-self: end;
        align-content: end;
    }

    .cl-start__card {
        gap: 10px;
        padding: 12px 12px 10px;
        border-radius: 22px;
    }

    .cl-start__ring {
        border-radius: 22px;
    }

    .cl-start__tail i {
        border-radius: 46px;
    }

    .cl-start__glint i {
        border-radius: 32px;
    }

    .cl-start__core i {
        border-radius: 25px;
    }

    .cl-start__scene-head {
        min-height: 30px;
    }

    .cl-start__head-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

    .cl-start__tab {
        padding: 5px 10px;
        font-size: 0.78125rem;
    }

    .cl-start__tab-progress {
        right: 10px;
        left: 10px;
    }

    .cl-start__bubble {
        font-size: 0.8125rem;
    }

    .cl-start__title {
        font-size: clamp(1.625rem, 7.6cqi, 1.9375rem);
    }

    .cl-start__cta {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .cl-start__button {
        width: 100%;
    }

    .cl-start__waiting,
    .cl-start__notice {
        max-width: none;
    }

    .cl-start__status,
    .cl-start__hint {
        justify-content: center;
        text-align: center;
    }

    .cl-start__foot {
        justify-content: center;
        padding-bottom: 14px;
        font-size: 0.75rem;
    }
}

/* 강제 색 모드: 그림은 걷히고 글·버튼만 시스템 색으로 남는다. */
@media (forced-colors: active) {
    .cl-start__bg,
    .cl-start__tail,
    .cl-start__glint,
    .cl-start__core,
    .cl-start__ring {
        display: none;
    }

    .cl-start__brandword {
        background: none;
        color: CanvasText;
    }

    .cl-start__button,
    .cl-start__more {
        border: 1px solid ButtonText;
    }
}