/* === Reset & Base === */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary: #e0352a;
    --primary-dark: #b82a21;
    --primary-soft: #ff6b5e;
    --primary-bg: #fff1ef;
    --primary-border: #f7c4bf;
    --ink: #1a1a1a;
    --ink-2: #3a3a3a;
    --ink-3: #6b6b6b;
    --ink-4: #9a9a9a;
    --paper: #fafafa;
    --paper-2: #f5f5f5;
    --line: #eeeeee;
    --yellow: #f5a623;
    --accent-purple: #a78bfa;
    --accent-blue: #60a5fa;
    --accent-green: #34d399;
    --accent-yellow: #fbbf24;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background: var(--paper);
    /* 커서·선택 정책 — "사용자가 직접 입력하는 곳만 caret/selection 활성화" */
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}
a { text-decoration: none; color: inherit; }

/* 키보드 입력이 의도된 element만 caret + 선택 가능 */
input, textarea, [contenteditable="true"], [contenteditable=""] {
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

/* ============================================
   MAIN LANDING PAGE (index.html) — Dark Theme
   ============================================ */
.landing-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #080c20;
    color: #e0e4f0;
    position: relative;
    overflow: hidden;
}
.landing-page::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(224,53,42,0.12) 0%, transparent 70%);
    pointer-events: none;
}

/* 좌상단 홈 로고 — 텍스트 기반 DaK! CI 마크 (정적, hero보다 작은 사이즈).
   landing 시퀀스 마지막에 페이드인. */
.home-logo {
    position: absolute;
    top: 18px;
    left: 22px;
    z-index: 10;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 33px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1;
    color: #F4EEDF;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0;
    animation: hero-reveal 0.6s ease 4.57s both;
}
.home-logo:hover { opacity: 0.78; transform: translateY(-1px); }

/* 홈 로고 글자별 — hero CI와 동일한 컬러·외곽선 사양. stroke만 사이즈
   비례로 줄임(28px → 2.5px stroke ≈ 1.25px outline, 약 9% 비율). */
.home-logo .ci-d,
.home-logo .ci-k { color: #F4EEDF; }
.home-logo .ci-a,
.home-logo .ci-excl { color: #4EA590; }
.home-logo .ci-a {
    display: inline-block;
    margin-left: -0.12em;
    position: relative;
    isolation: isolate;
}
.home-logo .ci-a::before {
    content: "a";
    position: absolute;
    inset: 0;
    color: #080c20;
    -webkit-text-stroke: 2.5px #080c20;
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 768px) {
    .home-logo { top: 14px; left: 14px; font-size: 28px; }
    .home-logo .ci-a::before { -webkit-text-stroke: 2px #080c20; }
}

.hero-main {
    text-align: center;
    padding: 116px 20px 52px;  /* 홈 로고 위 여유 확보 */
    position: relative;
    z-index: 1;
    /* max-width 없음 — viewport 전폭 활용. 슬로건/부제/타이틀은 가운데 정렬에
       nowrap(아래 i18n 보정 블록)이라 콘텐츠 너비만큼만 차지. 다국어로 길이가
       달라져도 가운데 자동 정렬. 큰 화면에서도 시각적 균형 유지. */
    margin: 0 auto;
}

/* 슬로건 + 부제 — 동일한 핸드라이팅 톤·동일한 컬러.
   ⚠ .hero-main 스코프로 명시 — 다른 .landing-hero 섹션의 .hero-title 규칙과
   섞이지 않도록(같은 클래스명이 두 곳에서 쓰임). */
.hero-main .hero-slogan,
.hero-main .hero-subtitle {
    font-family: 'Caveat', 'Nanum Brush Script', 'Ma Shan Zheng', 'Klee One', 'Kalam', cursive;
    font-weight: 550;
    font-size: clamp(2.6rem, 5.8vw, 3.25rem);
    color: #F4EEDF;
    line-height: 1.28;
    letter-spacing: 0.005em;
    margin: 0;
    /* JS가 .hero-split 클래스를 추가하기 전엔 숨김(FOUC 방지) */
    visibility: hidden;
}
.hero-main .hero-slogan.hero-split,
.hero-main .hero-subtitle.hero-split {
    visibility: visible;
}
.hero-main .hero-slogan { margin-bottom: 14px; }
.hero-main .hero-subtitle { margin-bottom: 40px; }

/* 타이핑 애니메이션 — 글자별 span(.hero-ch)이 sequential 페이드인.
   슬로건: 0s부터 글자당 0.04s 간격 → 17자 0.68s까지.
   부제:  0.88s부터 시작 → 15자 1.48s까지.
   다음 단계(AI 앱 솔루션 페이드인)는 1.55s 시작. */
.hero-main .hero-ch {
    opacity: 0;
    animation: hero-ch-appear 0.04s linear forwards;
    animation-delay: calc(var(--i) * 0.04s);
}
.hero-main .hero-subtitle .hero-ch {
    animation-delay: calc(0.88s + var(--i) * 0.04s);
}
@keyframes hero-ch-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* CI 라인 "AI 앱 솔루션 DaKi"
   - 전체 Arial 패밀리(daki-logo.html .letter 와 동일).
   - 프리픽스 "AI 앱 솔루션": DaKi와 동일 사이즈(2.4~3.4rem) + weight 600.
     컬러는 D·K와 같은 따뜻한 cream(#F4EEDF) — 한 줄 톤 통일.
   - DaKi: weight 700. 글자별 컬러:
       D, K = #F4EEDF (warm cream)
       a, i = #4EA590 (어두운 청녹색)
   - "a"만 D와 살짝 겹침(margin-left 음수). 베이스라인 정렬 유지. */
.hero-main .hero-title {
    font-family: Arial, sans-serif;
    font-size: clamp(2.4rem, 5.8vw, 3.4rem);
    font-weight: 600;
    color: #F4EEDF;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* 프리픽스 "AI App Solutions" — 영문이라 한글 광학 보정 불필요.
   font-size 0.85em은 DaK과의 시각 위계(작은 부제 vs 큰 브랜드 마크) 위해 유지.
   color는 슬로건/부제와 swap되어 light blue로 설정 (cream은 슬로건/부제로 이동). */
.hero-main .hero-prefix {
    font-size: 0.85em;
    color: #c2cae3;
}
/* hero-title 라인 전체(프리픽스 + DaK 글자) 동일한 타이핑 시퀀스.
   프리픽스 0.85em 환경에서도 var(--i) * 0.04s 간격 유지. */
.hero-main .hero-title .hero-ch {
    animation-delay: calc(1.7s + var(--i) * 0.04s);
}
.hero-main .hero-ci {
    font-weight: 700;
    letter-spacing: -0.015em;
}
.hero-main .hero-ci .ci-d,
.hero-main .hero-ci .ci-k { color: #F4EEDF; }
.hero-main .hero-ci .ci-a,
.hero-main .hero-ci .ci-excl { color: #4EA590; }

/* DaK 글자(D, a, K)는 .hero-ch 타이핑만 적용 — 색상/margin은 기존 규칙 유지.
   inline-block 필요한 a만 명시 (D-overlap margin-left 유지). */
.hero-main .hero-ci .ci-a {
    display: inline-block;
    margin-left: -0.12em;
    /* a 외곽선: 가중치 적층(stacked weight) 방식.
       ::before pseudo로 같은 "a"를 더 두꺼운 weight(900) + 페이지 바탕색
       으로 깔고, 본체 a(weight 700)를 그 위에 올림. weight 차이만큼
       배경 a가 외곽으로 삐져나와 자연스러운 외곽선 효과.
       폰트 자체의 곡률·균형이 살아있어 -webkit-text-stroke보다 자연스러움. */
    position: relative;
    isolation: isolate;
}
.hero-main .hero-ci .ci-a::before {
    content: "a";
    position: absolute;
    inset: 0;
    color: #080c20;
    /* font-weight 명시 안 해서 부모와 동일한 700 inherited.
       동일 weight·동일 폰트 → 글리프 위치 100% 일치(synthetic bold offset 없음).
       -webkit-text-stroke를 fill과 같은 색으로 줘서 letter를 균일하게 두껍게.
       stroke 4px = 2px 외측 확장 (5px→4px, 약 80% 두께로 줄임 — 900→800 비율). */
    -webkit-text-stroke: 4px #080c20;
    z-index: -1;
    pointer-events: none;
}

/* i: 타이핑 페이드인 → 잠시 보임 → "꽈당" 우측 쓰러짐(bottom-center pivot)
   → 잠깐 누워있음 → "퉁" 튀어오르면서 빙글 회전 → 정점 페이드 아웃.
   transform-origin이 핵심 — 가운데가 아닌 아래쪽 면을 축으로 회전해야
   진짜 도미노가 옆으로 쓰러지는 자연스러운 무브먼트가 됨. */
.hero-main .hero-ci .ci-finale {
    display: inline-block;
    position: relative;
}
/* 3중 wrapper로 phase별 pivot 분리:
   .ci-i-jump:    translateY 점프 (회전 X — 중첩되는 자식들이 회전 담당)
   .ci-i-tipper:  tipping 회전, pivot bottom-center (50% 80% baseline)
   .ci-i-spinner: spin 회전, pivot center (50% 50% — 누운 body 한가운데)
   각각 자기 transform-origin 기준으로만 동작해서 spin이 lying body의
   LEFT 끝에서가 아니라 정중앙을 축으로 빙글 돌게 됨. */
.hero-main .hero-ci .ci-i-jump {
    display: inline-block;
    color: #4EA590;
    opacity: 0;
    animation: hero-ci-i-translate 1.7s linear calc(1.7s + var(--i) * 0.04s) forwards;
}
.hero-main .hero-ci .ci-i-tipper {
    display: inline-block;
    transform-origin: 50% 80%;
    animation: hero-ci-i-tip 1.7s linear calc(1.7s + var(--i) * 0.04s) forwards;
}
.hero-main .hero-ci .ci-i-spinner {
    display: inline-block;
    transform-origin: 50% 50%;
    animation: hero-ci-i-spin 1.7s linear calc(1.7s + var(--i) * 0.04s) forwards;
}
.hero-main .hero-ci .ci-excl {
    position: absolute;
    left: 0;
    top: 0;
    color: #4EA590;
    opacity: 0;
    transform-origin: center bottom;
    animation: hero-ci-excl-appear 0.3s linear 4.16s 1 forwards;
}

/* .ci-i-jump: translateY (점프) + opacity (typing fade in / 정점 fade out) */
@keyframes hero-ci-i-translate {
    0%    { transform: translateY(0); opacity: 0; }
    3%    { transform: translateY(0); opacity: 1; }
    89%   { transform: translateY(0); opacity: 1; }
    92%   { transform: translateY(0); opacity: 1;
            animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
    98%   { transform: translateY(-180%); opacity: 1; }
    99.5% { transform: translateY(-180%); opacity: 0; }
    100%  { transform: translateY(-180%); opacity: 0; }
}

/* .ci-i-tipper: tipping 회전, pivot bottom-center (꽈당 + 꿈틀) */
@keyframes hero-ci-i-tip {
    0%   { transform: rotate(0deg); }
    44%  { transform: rotate(0deg); }
    52%  { transform: rotate(90deg); }                              /* 꽈당 — 살짝 앞당김 (45→44, 53→52) */
    71%  { transform: rotate(90deg); animation-timing-function: ease-in-out; }
    80%  { transform: rotate(100deg); animation-timing-function: ease-in-out; }   /* 꿈틀 1 */
    89%  { transform: rotate(90deg); }                              /* 꿈틀 2 — 다시 90° */
    100% { transform: rotate(90deg); }                              /* 점프 phase 동안에도 90° 유지 (visual: 누운 채) */
}

/* .ci-i-spinner: spin 회전, pivot center — 누운 body 한가운데를 축으로 720° */
@keyframes hero-ci-i-spin {
    0%   { transform: rotate(0deg); }
    89%  { transform: rotate(0deg); }
    92%  { transform: rotate(0deg);
           animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }   /* physicsEaseOut */
    98%  { transform: rotate(720deg); }                                    /* 정점에 720° (2바퀴) 회전 완료 */
    100% { transform: rotate(720deg); }
}

/* daki-logo.html 원본 ! 시퀀스 (0.3s) — phase별 physics easing:
   L7 (0~1%):    짠 등장
   L8 (1~50%):   자리로 떨어짐 — physicsEaseIn (가속)
   L9 (50~75%):  작은 바운스 위로 — physicsEaseOut (감속)
   L10 (75~92%): 정착 — physicsEaseIn
   92~100%:      유지 */
@keyframes hero-ci-excl-appear {
    0%   { transform: translateY(-180%); opacity: 0; }
    1%   { transform: translateY(-180%); opacity: 1;
           animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }   /* L8 fall: physicsEaseIn */
    50%  { transform: translateY(0);     opacity: 1;
           animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }          /* L9 bounce: physicsEaseOut */
    75%  { transform: translateY(-12%);  opacity: 1;
           animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }   /* L10 settle: physicsEaseIn */
    92%  { transform: translateY(0);     opacity: 1; }
    100% { transform: translateY(0);     opacity: 1; }
}

/* 마지막 단계: 홈로고는 위에서 처리, 여기서 .products·.landing-footer 페이드인.
   타이핑(0~1.48s) + 프리픽스/DaK 타이핑(1.7~2.22s) + i 점프(~3.56s) +
   ! 정착(~4.03s) 모두 끝난 ~4.1s에 일괄 등장. */
.products,
.landing-footer {
    opacity: 0;
    animation: hero-reveal 0.6s ease 4.57s both;
}
@keyframes hero-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    /* 전체 landing 시퀀스 비활성: 모든 요소 즉시 최종 상태로 표시 */
    .home-logo,
    .products,
    .landing-footer,
    .hero-main .hero-slogan,
    .hero-main .hero-title,
    .hero-main .hero-prefix,
    .hero-main .hero-subtitle,
    .hero-main .hero-ch,
    .hero-main .hero-ci .ci-excl {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }
    .hero-main .hero-slogan,
    .hero-main .hero-subtitle {
        visibility: visible;
    }
    /* i는 숨기고(레이아웃 자리는 차지) ! 가 그 위치에 표시 */
    .hero-main .hero-ci .ci-i-jump,
    .hero-main .hero-ci .ci-i-tipper,
    .hero-main .hero-ci .ci-i-spinner {
        animation: none;
    }
    .hero-main .hero-ci .ci-i-jump {
        visibility: hidden;
    }
}

/* Product grid */
.products { padding: 20px; width: 100%; max-width: 880px; position: relative; z-index: 1; }
.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s, background 0.2s, border-color 0.2s;
    cursor: pointer;
    text-align: center;
}
.product-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
}
.product-icon { margin-bottom: 16px; color: var(--primary-soft); }
.product-card h3 {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 6px;
}

/* YT Summary 카드: 익스텐션 시작 splash 애니메이션 (로고+워드마크) 루프.
   원본 디자인은 apps/web/assets/splash.html — 메인 카드에 맞게 미니화. */
.yt-card-splash {
    width: 100%;
    height: 76px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    pointer-events: none; /* 카드 <a> 클릭을 막지 않음 */
    -webkit-user-select: none;
    user-select: none;
}
.yt-card-splash.no-anim,
.yt-card-splash.no-anim * { transition: none !important; }
.yt-card-splash-group {
    display: flex;
    align-items: center;
    gap: 8px;
    will-change: transform;
}
.yt-card-splash-icon {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 22.37%;
    overflow: hidden;
    transition: width 900ms cubic-bezier(.65,.05,.2,1), height 900ms cubic-bezier(.65,.05,.2,1);
    flex-shrink: 0;
}
.yt-card-splash-icon.small { width: 36px; height: 36px; }
.yt-card-splash-icon.tiny {
    width: 18px; height: 18px;
    transition: width 600ms cubic-bezier(.34,1.1,.64,1), height 600ms cubic-bezier(.34,1.1,.64,1);
}
.yt-card-splash-icon svg { width: 100%; height: 100%; display: block; }
.yt-card-splash-text {
    display: flex;
    flex-direction: column;
    opacity: 0;
    width: 0;
    overflow: hidden;
    padding-bottom: .3em;
    padding-right: .15em;
    transform: translate(-8px, 4px);
    transition: opacity 500ms ease, width 900ms cubic-bezier(.65,.05,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
    white-space: nowrap;
    min-width: 0;
    font-size: 22px;
}
.yt-card-splash-text.visible {
    opacity: 1;
    width: var(--tw, auto);
    transform: translate(0, 4px);
}
.yt-card-splash-wordmark {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: #fff;
    line-height: 1.25;
    padding: .15em .12em .2em 0;
    display: flex;
    gap: 0.32em;
    white-space: nowrap;
    font-family: -apple-system, "SF Pro Display", BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.yt-card-splash-wordmark .word { display: inline-flex; overflow: visible; }
.yt-card-splash-wordmark .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(.15em);
    transition: opacity 260ms ease, transform 320ms cubic-bezier(.2,.7,.2,1);
    line-height: 1.25;
}
.yt-card-splash-wordmark .char.shown { opacity: 1; transform: translateY(0); }
.yt-card-splash-wordmark .char[data-k] { margin-right: var(--k); }

.product-desc {
    font-size: 0.85rem;
    color: #8890b5;
    margin-bottom: 12px;
}
.product-badge {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
}
.badge-soon { background: rgba(255,255,255,0.08); color: #8890b5; }
.badge-web { background: rgba(46,125,50,0.2); color: #81c784; }

/* 두 플랫폼 배지 (Chrome 확장 + 모바일 앱) */
.product-badges {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.badge-platform {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
}
.badge-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
/* Chrome 확장 — 활성 배지 (기존 badge-web 톤) */
.badge-platform--active {
    background: rgba(46, 125, 50, 0.2);
    color: #81c784;
}
/* 모바일 앱 — 곧 출시 (살짝 muted한 indigo 톤) */
.badge-platform--coming {
    background: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
}
/* "곧 출시" 우상단 플로팅 라벨 (amber로 시선 잡기, 스티커처럼 살짝 기울임) */
.badge-coming-tag {
    position: absolute;
    top: -7px;
    right: -10px;
    background: #f59e0b;
    color: #1a1a1a;
    font-size: 0.55rem;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.3;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
    transform: rotate(13deg);
    transform-origin: center;
}

/* Landing footer */
.landing-footer {
    margin-top: auto;
    padding: 24px;
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 1;
}
.landing-footer p { color: #555e80; font-size: 0.8rem; }
.landing-footer .footer-links a { color: #6670a0; }
.landing-footer .footer-links a:hover { color: #9fa8da; }
.landing-footer .footer-divider { color: #333a5c; }

/* 사업자 정보 — 전자상거래법 §13 (collapsible, 네이버페이 패턴) */
/* 색상 통일: .landing-footer p (#555e80) + .footer-links a (#6670a0) 톤과 일치 */
.footer-business-toggle {
    margin: 14px auto 0;
    max-width: 560px;
    text-align: left;
}
.footer-business-toggle summary {
    cursor: pointer;
    color: #6670a0;
    font-size: 0.78rem;
    text-align: center;
    padding: 4px;
    list-style: none;
    user-select: none;
}
.footer-business-toggle summary::-webkit-details-marker { display: none; }
.footer-business-toggle summary:hover { color: #9fa8da; }
.footer-business-toggle[open] summary { color: #6670a0; }

.footer-business-table {
    margin: 8px auto 0;
    border-collapse: collapse;
    font-size: 0.74rem;
    color: #555e80;
    line-height: 1.6;
}
.footer-business-table th {
    text-align: left;
    color: #555e80;
    font-weight: 500;
    padding: 4px 14px 4px 0;
    white-space: nowrap;
}
.footer-business-table td { padding: 4px 0; }
.footer-business-table a {
    color: #6670a0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.footer-business-table a:hover { color: #9fa8da; }

.footer-copyright { margin-top: 10px; color: #555e80 !important; }

/* ============================================
   YT SUMMARY PAGE
   ============================================ */
.yt-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Header */
.yt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    z-index: 50;
}
.yt-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--ink);
}
.yt-logo-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-soft));
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
}
.yt-logo-text { font-size: 1.1rem; letter-spacing: -0.01em; }

/* Tab nav */
.yt-tabs {
    display: flex;
    gap: 2px;
    background: var(--paper-2);
    border-radius: 10px;
    padding: 3px;
}
.yt-tab-btn {
    padding: 7px 20px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.yt-tab-btn:hover { color: #555; }
.yt-tab-btn.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.yt-header-actions { display: flex; align-items: center; gap: 12px; }
.btn-chrome {
    background: var(--primary) !important;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem !important;
    font-weight: 600;
    transition: background 0.2s !important;
}
.btn-chrome:hover { background: var(--primary-dark) !important; }

/* Tab content */
.yt-tab-content { display: none; flex: 1; }
.yt-tab-content.active { display: flex; flex-direction: column; }

/* ============================================
   LANDING HERO SECTION (v2)
   ============================================ */
.landing-hero {
    text-align: center;
    padding: 72px 24px 56px;
    background: linear-gradient(180deg, #fff1ef 0%, #fff 100%);
    position: relative;
}
.landing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 30%, rgba(224,53,42,0.06) 0, transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(255,107,94,0.05) 0, transparent 40%);
    pointer-events: none;
    z-index: 0;
}
.landing-hero > * { position: relative; z-index: 1; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fffaeb;
    border: 1px solid #f3d58a;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #8b6c1a;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}
.hero-eyebrow-dot { color: var(--yellow); }

.hero-title {
    font-size: 2.8rem;
    color: var(--ink);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
    font-weight: 800;
    line-height: 1.1;
}

.hero-tagline {
    font-size: 1.1rem;
    color: var(--ink-3);
    margin-bottom: 28px;
}

.hero-cta-row {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-cta-install {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary);
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 6px 18px rgba(224,53,42,0.25);
}
.btn-cta-install:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 10px 22px rgba(224,53,42,0.3);
}

.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    transition: border-color 0.2s, transform 0.2s;
}
.btn-cta-secondary:hover {
    border-color: var(--ink-4);
    transform: translateY(-2px);
}

.hero-footnote {
    margin-top: 14px;
    color: var(--ink-4);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

/* 데스크톱 Safari·Firefox 등 비Chromium 브라우저에만 JS로 노출 (기본 hidden) */
.hero-browser-hint {
    margin-top: 10px;
    max-width: 30rem;
    margin-inline: auto;
    color: var(--ink-4);
    font-size: 0.8rem;
    line-height: 1.5;
    opacity: 0.85;
}

/* ============================================
   LANDING HOW IT WORKS (animated demo)
   ============================================ */
.landing-howto {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 60px;
    width: 100%;
}
.howto-container {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.04);
    overflow: hidden;
}
.howto-container .section-title {
    padding: 28px 24px 0;
    text-align: center;
    margin-bottom: 18px;
}

.howto-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    background: var(--paper-2);
}
.howto-tab {
    flex: 1;
    padding: 14px 16px;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-3);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-right: 1px solid var(--line);
}
.howto-tab:last-child { border-right: none; }
.howto-tab.active {
    background: #fff;
    color: var(--primary);
}
.howto-tab-ic {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--paper-2);
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.howto-tab.active .howto-tab-ic {
    background: var(--primary-bg);
}

.howto-body { padding: 24px 28px 28px; }
.howto-stage { display: none; }
.howto-stage.active { display: block; animation: howFadeIn 0.25s ease; }
@keyframes howFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.step-track {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.step-pill {
    flex: 1 1 140px;
    padding: 9px 12px;
    border: 1.5px dashed var(--line);
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--ink-4);
    text-align: center;
    transition: all 0.2s;
    font-weight: 600;
}
.step-pill.active {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
    border-style: solid;
}
.step-pill.done {
    border-color: var(--accent-green);
    background: #f2faf5;
    color: #2e7d57;
    border-style: solid;
}
.step-pill .n {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: currentColor;
    color: #fff;
    font-size: 0.7rem;
    line-height: 18px;
    margin-right: 6px;
    vertical-align: middle;
    opacity: 0.85;
}

.demo-stage {
    background: #0f0f0f;
    border-radius: 14px;
    padding: 22px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    min-height: 320px;
    position: relative;
    overflow: hidden;
}
.demo-space { flex: 1; }
.demo-mono {
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    color: #666;
}

/* ── YouTube 홈 (영상 그리드) ── */
.demo-yt {
    background: #0f0f0f;
    border: 1px solid #262626;
    border-radius: 10px;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 상단바 */
.demo-yt-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #1e1e1e;
    background: #0f0f0f;
}
.demo-yt-burger {
    color: #aaa;
    font-size: 14px;
    line-height: 1;
    width: 16px;
    text-align: center;
}
.demo-yt-logo {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: -0.02em;
}
.demo-yt-logo-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 13px;
    background: var(--primary);
    border-radius: 3px;
    color: #fff;
    font-size: 8px;
    line-height: 1;
}
.demo-yt-search {
    flex: 1;
    background: #121212;
    border: 1px solid #303030;
    border-radius: 999px;
    padding: 4px 12px;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    color: #666;
}
.demo-yt-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fb923c, #f472b6);
    flex-shrink: 0;
}

/* 카테고리 칩 */
.demo-yt-chips {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    overflow: hidden;
    border-bottom: 1px solid #1e1e1e;
}
.demo-yt-chip {
    padding: 3px 10px;
    border-radius: 6px;
    background: #272727;
    color: #ccc;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}
.demo-yt-chip.active {
    background: #f1f1f1;
    color: #0f0f0f;
}

/* 영상 그리드 2x2 */
.demo-yt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
    flex: 1;
}
.demo-yt-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px;
    transition: transform 0.2s, box-shadow 0.2s, outline-color 0.2s;
    outline: 2px solid transparent;
}
.demo-yt-card.highlight {
    outline-color: var(--primary);
    box-shadow: 0 6px 22px rgba(224,53,42,0.35);
    transform: translateY(-2px);
}

/* 썸네일 — 각 영상마다 다른 컬러 패턴 */
.demo-yt-thumb {
    aspect-ratio: 16/9;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 4px;
}
.demo-yt-thumb.thumb-1 {
    background:
      radial-gradient(circle at 30% 40%, rgba(167,139,250,0.55), transparent 55%),
      linear-gradient(135deg, #1a1f2e 0%, #2a1b4d 60%, #0d0d1a 100%);
}
.demo-yt-thumb.thumb-1::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 15%;
    right: 30%;
    height: 3px;
    background: #a78bfa;
    border-radius: 2px;
    box-shadow: 0 8px 0 rgba(167,139,250,0.6), 0 16px 0 rgba(167,139,250,0.3);
}
.demo-yt-thumb.thumb-2 {
    background:
      radial-gradient(circle at 70% 30%, rgba(52,211,153,0.45), transparent 55%),
      linear-gradient(135deg, #0d2418 0%, #1a3a2a 60%, #0a1a12 100%);
}
.demo-yt-thumb.thumb-2::before {
    content: '';
    position: absolute;
    inset: 30% 20% 30% 20%;
    background: repeating-linear-gradient(90deg, #34d399 0 8px, transparent 8px 16px);
    opacity: 0.35;
    border-radius: 2px;
}
.demo-yt-thumb.thumb-3 {
    background:
      radial-gradient(circle at 40% 50%, rgba(251,191,36,0.4), transparent 55%),
      linear-gradient(135deg, #2a1f0d 0%, #3a2a0d 60%, #1a120a 100%);
}
.demo-yt-thumb.thumb-3::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    width: 20%;
    height: 30%;
    background: #fbbf24;
    border-radius: 4px;
    transform: translateX(-50%);
    opacity: 0.7;
}
.demo-yt-thumb.thumb-4 {
    background:
      radial-gradient(circle at 60% 60%, rgba(96,165,250,0.5), transparent 55%),
      linear-gradient(135deg, #0d1a2e 0%, #1a2a4a 60%, #0a0d1a 100%);
}
.demo-yt-thumb.thumb-4::before {
    content: '';
    position: absolute;
    inset: 25% 25% 25% 25%;
    border: 2px solid #60a5fa;
    border-radius: 50%;
    opacity: 0.7;
}

.demo-yt-dur {
    position: relative;
    z-index: 1;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-family: ui-monospace, monospace;
    font-size: 8.5px;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
}

.demo-yt-card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 2px;
}
.demo-yt-title-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.demo-yt-ch-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
}
.demo-yt-ch-dot.ch-1 { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.demo-yt-ch-dot.ch-2 { background: linear-gradient(135deg, #34d399, #0d9668); }
.demo-yt-ch-dot.ch-3 { background: linear-gradient(135deg, #fbbf24, #d97706); }
.demo-yt-ch-dot.ch-4 { background: linear-gradient(135deg, #60a5fa, #2563eb); }

.demo-yt-title-text {
    color: #f1f1f1;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.demo-yt-sub {
    color: #808080;
    font-size: 9px;
    font-family: ui-monospace, monospace;
    padding-left: 20px;
    line-height: 1.3;
}

/* ── 익스텐션 사이드패널 ── */
.demo-ext {
    background: #0f0f0f;
    border: 1px solid #262626;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.demo-ext.in {
    opacity: 1;
    transform: translateX(0);
}
.demo-ext-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1e1e1e;
    margin-bottom: 10px;
}
.demo-ext-head b { color: #fff; font-size: 0.82rem; letter-spacing: -0.01em; }
.demo-ext-logo {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--primary), var(--primary-soft));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(224,53,42,0.4);
}
.demo-ext-logo-play {
    color: #fff;
    font-size: 9px;
    line-height: 1;
}
.demo-ext-credit {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #1a1a1a;
    color: #e0e0e0;
    font-size: 0.68rem !important;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #2a2a2a;
    font-family: ui-monospace, monospace !important;
    font-weight: 600;
}
.demo-ext-credit-ic { font-size: 9px; }

/* 빈 상태 (영상 선택 전) */
.demo-ext-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 16px;
    text-align: center;
    opacity: 1;
    transition: opacity 0.3s;
}
.demo-ext-empty.hide { opacity: 0; pointer-events: none; position: absolute; }
.demo-ext-empty-ic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-bottom: 10px;
    border: 1px dashed #333;
}
.demo-ext-empty-text {
    color: #666;
    font-size: 0.72rem;
    font-family: ui-monospace, monospace;
}

/* 감지 카드 — 썸네일 + 제목 + 채널 */
.demo-detect {
    background: linear-gradient(135deg, #1a1f2e 0%, #1e2540 100%);
    border: 1px solid #3a5080;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-6px);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.demo-detect.show {
    opacity: 1;
    max-height: 120px;
    transform: none;
}
.demo-detect-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.demo-detect-ic {
    color: #34d399;
    font-size: 8px;
    animation: detectPulse 1.6s ease-in-out infinite;
}
@keyframes detectPulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.demo-detect small {
    color: #7ab4ff;
    font-size: 0.68rem;
    font-family: ui-monospace, monospace;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.demo-detect-card {
    display: flex;
    gap: 8px;
    align-items: center;
}
.demo-detect-thumb {
    width: 52px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
}
.demo-detect-meta {
    flex: 1;
    min-width: 0;
}
.demo-detect-meta .t {
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.demo-detect-meta .s {
    color: #9ab0cf;
    font-size: 0.65rem;
    font-family: ui-monospace, monospace;
    margin-top: 2px;
}

/* 모드 선택 */
.demo-ext-modes-label {
    color: #888;
    font-size: 0.65rem;
    font-family: ui-monospace, monospace;
    font-weight: 700;
    letter-spacing: 0.7px;
    margin-bottom: 6px;
    opacity: 0;
    transition: opacity 0.3s;
}
.demo-ext-modes-label.show { opacity: 1; }
.demo-modes {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}
.demo-modes.show { opacity: 1; }
.demo-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #1a1a1a;
    color: #aaa;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.3s;
    border: 1px solid #2a2a2a;
}
.demo-mode .mode-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.demo-mode .mode-dot.dot-detail { background: #60a5fa; }
.demo-mode .mode-dot.dot-key    { background: var(--primary); }
.demo-mode .mode-dot.dot-blog   { background: #a78bfa; }
.demo-mode .mode-dot.dot-easy   { background: #34d399; }
.demo-mode.sel {
    background: rgba(224,53,42,0.15);
    color: #fff;
    border-color: var(--primary);
    transform: scale(1.04);
}
.demo-mode.pulse {
    animation: demoPulse 1s ease-in-out 2;
}
@keyframes demoPulse {
    0%,100% { transform: scale(1.05); }
    50% { transform: scale(1.14); box-shadow: 0 0 0 5px rgba(224,53,42,0.25); }
}

.demo-btn {
    width: 100%;
    padding: 9px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
}
.demo-btn.show {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.demo-btn.busy {
    background: #333;
    color: #aaa;
}
.demo-btn.busy::after {
    content: '●';
    margin-left: 6px;
    animation: demoDot 1s infinite;
}
@keyframes demoDot {
    0%,100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.demo-result {
    flex: 1;
    background: #0f0f0f;
    border: 1px solid #222;
    border-radius: 6px;
    padding: 8px;
    overflow: hidden;
    position: relative;
    min-height: 100px;
}
.demo-result-line {
    height: 5px;
    background: #444;
    border-radius: 2px;
    margin: 3px 0;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.4s;
}
.demo-result-line.show { opacity: 1; transform: none; }
.demo-result-line.key {
    background: linear-gradient(90deg, #7ab4ff, #3a5080);
    height: 7px;
    margin: 5px 0;
}

.floating-hand {
    position: absolute;
    font-size: 28px;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 10;
    top: 55%;
    left: 55%;
    opacity: 0;
}

.demo-mobile {
    background: #0f0f0f;
    border-radius: 14px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 380px;
}
.demo-phone {
    width: 220px;
    border: 2px solid #333;
    border-radius: 26px;
    background: #111;
    padding: 8px;
    position: relative;
}
.demo-phone::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 12px;
    background: #000;
    border-radius: 0 0 10px 10px;
    z-index: 2;
}
.demo-phone-screen {
    border: 1px solid #222;
    border-radius: 18px;
    padding: 22px 10px 10px;
    min-height: 380px;
    background: #0f0f0f;
    position: relative;
    overflow: hidden;
    color: #eee;
}
.demo-phone-placeholder {
    text-align: center;
    color: #666;
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    padding-top: 60px;
}

.demo-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
    flex-wrap: wrap;
}
.demo-play {
    padding: 7px 16px;
    border: 1.5px solid var(--ink);
    background: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    color: var(--ink);
    transition: background 0.2s;
}
.demo-play:hover { background: var(--paper-2); }
.demo-hint {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--ink-4);
}

/* ============================================
   LANDING FEATURES SECTION
   ============================================ */
.landing-features {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 24px 60px;
    width: 100%;
}

.section-title {
    text-align: center;
    font-size: 1.6rem;
    color: var(--ink);
    margin-bottom: 32px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.features-grid-landing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature-card {
    padding: 28px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(224,53,42,0.08);
    border-color: var(--primary-border);
}

.feature-card-icon {
    width: 52px;
    height: 52px;
    background: var(--primary-bg);
    color: var(--primary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.feature-card h3 {
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 8px;
    font-weight: 700;
}

.feature-card p {
    font-size: 0.86rem;
    color: var(--ink-3);
    line-height: 1.55;
}

/* ============================================
   LANDING REVIEWS SECTION (v2)
   ============================================ */
.landing-reviews {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 24px 80px;
    width: 100%;
}

.reviews-head {
    text-align: center;
    margin-bottom: 32px;
}
.reviews-title { margin-bottom: 10px; }
.reviews-summary { display: flex; flex-direction: column; align-items: center; }
.reviews-stars-big {
    font-size: 2.4rem;
    color: var(--yellow);
    letter-spacing: 0.25em;
    line-height: 1;
    margin-bottom: 6px;
}
.reviews-summary-meta {
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    color: var(--ink-3);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.review-card {
    padding: 20px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
}
.review-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-border);
}

.review-stars {
    color: var(--yellow);
    font-size: 0.95rem;
    margin-bottom: 10px;
    letter-spacing: 0.15em;
}

.review-text {
    font-size: 0.9rem;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 14px;
    flex: 1;
}

.review-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}
.review-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid currentColor;
}
.avatar-blue { background: #dbeafe; color: #2563eb; }
.avatar-green { background: #dcfce7; color: #15803d; }
.avatar-purple { background: #ede9fe; color: #7c3aed; }
.review-author {
    font-size: 0.8rem;
    color: var(--ink-3);
    font-family: ui-monospace, monospace;
    font-weight: 600;
}
.review-source {
    margin-left: auto;
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--ink-4);
}

/* ============================================
   PRICING TAB
   ============================================ */
.pricing-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 24px 60px;
}
.pricing-title {
    text-align: center;
    font-size: 2rem;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    font-weight: 800;
}
.pricing-subtitle {
    text-align: center;
    color: var(--ink-3);
    margin-bottom: 48px;
}
.pricing-section { margin-bottom: 48px; }
.pricing-section-title {
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: 4px;
}
.pricing-section-desc {
    font-size: 0.88rem;
    color: var(--ink-4);
    margin-bottom: 20px;
}

/* Price cards */
.credit-cards, .sub-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
/* 2026-05-29: 4-card grid (Free+Pro+Max+Ultra). 좁아진 셀에 맞게 패딩·폰트 축소.
   모바일 reflow 는 기존 미디어 쿼리(1열)로 자동 처리. */
.sub-cards--4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.sub-cards--4 .price-card { padding: 22px 16px; }
.sub-cards--4 .price-card h4 { font-size: 1rem; }
.sub-cards--4 .price-card .card-desc { font-size: 0.75rem; }
.sub-cards--4 .price { font-size: 1.7rem; }
.sub-cards--4 .price-card li { font-size: 0.8rem; padding: 3px 0 3px 18px; }

/* 첫 결제 $5 할인 hook — pricing 섹션 위 단일 라인 강조 */
.pricing-hook {
    text-align: center;
    background: linear-gradient(90deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 0.92rem;
    padding: 10px 16px;
    border-radius: 999px;
    margin: 0 auto 24px;
    max-width: 680px;
    line-height: 1.4;
}
.pricing-hook b { color: #c2410c; font-weight: 700; }

/* 카드 내부 첫 결제 $5 할인 배지 — 가격 위에 작은 pill */
.first-purchase-badge {
    display: inline-block;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 6px;
    white-space: nowrap;
}

/* Free 카드 — 회색 ghost 톤 (Pro/Max/Ultra 빨강과 시각 차별) */
.price-card--free { border-color: var(--line); background: #fafaf9; }
.price-card--free h4 { color: var(--ink-2); }
.price--free { color: var(--ink-3) !important; }
.price-num-small { font-size: 1.2rem; font-weight: 700; }

/* 가격 아래 보조 라인 — 첫 결제 다음 정가 안내 / Free 의 "30일 후 초기화" */
.price-after {
    font-size: 0.75rem;
    color: var(--ink-4);
    margin-top: -8px;
    margin-bottom: 14px;
    line-height: 1.4;
}
.price-after .price-regular { font-weight: 600; color: var(--ink-3); }

/* Ghost 버튼 (Free 카드 CTA) */
.btn-buy--ghost {
    border-color: var(--line) !important;
    color: var(--ink-3) !important;
    background: transparent !important;
}
.btn-buy--ghost:hover {
    background: var(--line) !important;
    color: var(--ink-2) !important;
}
.price-card {
    padding: 28px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: center;
    position: relative;
    background: #fff;
    transition: transform 0.2s, border-color 0.2s;
}
.price-card:hover { transform: translateY(-2px); }
.price-card.featured {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(224,53,42,0.10);
}
.popular-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 10px;
    white-space: nowrap;
}
.price-card h4 {
    font-size: 1.1rem;
    color: var(--ink);
    margin-bottom: 4px;
}
.price-card .card-desc {
    font-size: 0.8rem;
    color: var(--ink-4);
    margin-bottom: 12px;
}
.price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
    line-height: 1.2;
}
.price span { font-size: 0.85rem; font-weight: 400; color: var(--ink-3); }
.price-card ul {
    list-style: none;
    text-align: left;
    font-size: 0.85rem;
    color: var(--ink-2);
    margin-bottom: 20px;
}
.price-card li {
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
}
.price-card li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}
.btn-buy {
    display: block;
    width: 100%;
    padding: 10px;
    border: 2px solid var(--primary);
    border-radius: 10px;
    background: transparent;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.btn-buy:hover {
    background: var(--primary);
    color: #fff;
}
.price-card.featured .btn-buy {
    background: var(--primary);
    color: #fff;
}
.price-card.featured .btn-buy:hover {
    background: var(--primary-dark);
}

/* Billing toggle */
.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}
.toggle-label {
    font-size: 0.9rem;
    color: var(--ink-3);
    font-weight: 500;
}
.toggle-label.active { color: var(--primary); font-weight: 600; }
.toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
    display: inline-block;
}
.toggle-switch input { display: none; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 26px;
    cursor: pointer;
    transition: background 0.3s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--primary);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}
.save-badge {
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* ============================================
   YT FOOTER
   ============================================ */
.yt-footer {
    padding: 24px;
    text-align: center;
    border-top: 1px solid var(--line);
    margin-top: auto;
}
.yt-footer p { color: var(--ink-4); font-size: 0.8rem; }

/* ============================================
   COMING SOON PAGE (kids_link)
   ============================================ */
.coming-soon-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.coming-soon-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
}
.coming-soon-icon { margin-bottom: 24px; opacity: 0.6; }
.coming-soon-main h1 {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 8px;
}
.coming-soon-desc {
    color: var(--ink-3);
    margin-bottom: 24px;
}
.coming-soon-badge {
    background: #f0f0f0;
    color: var(--ink-4);
    padding: 8px 24px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 16px;
}
.coming-soon-sub {
    color: var(--ink-4);
    font-size: 0.85rem;
    margin-bottom: 32px;
}
.btn-back {
    padding: 10px 24px;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 0.9rem;
    transition: border-color 0.2s, color 0.2s;
}
.btn-back:hover { border-color: var(--primary); color: var(--primary); }

/* ============================================
   SHARED: Footer links
   ============================================ */
.footer-links { margin-bottom: 8px; }
.footer-links a {
    color: var(--ink-4);
    font-size: 0.85rem;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--ink-2); }
.footer-divider { color: #ddd; margin: 0 8px; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1000px) {
    .demo-stage { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .product-card { padding: 24px 12px; }

    .yt-header { padding: 10px 16px; }

    /* Landing hero */
    .landing-hero { padding: 56px 16px 36px; }
    .hero-title { font-size: 2rem; }
    .hero-tagline { font-size: 1rem; margin-bottom: 20px; }
    .hero-cta-row { flex-direction: column; width: 100%; max-width: 320px; margin: 0 auto; }
    .btn-cta-install, .btn-cta-secondary { width: 100%; justify-content: center; }

    /* How it works */
    .howto-body { padding: 18px 16px 20px; }
    .demo-stage { padding: 14px; gap: 14px; }
    .demo-mobile { padding: 20px; }

    /* Landing features & reviews */
    .features-grid-landing { grid-template-columns: 1fr 1fr; }
    .reviews-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Pricing */
    .credit-cards, .sub-cards {
        grid-template-columns: 1fr;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }
    .pricing-page { padding: 32px 16px 40px; }
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; }
    .yt-header-actions .btn-chrome { display: none; }
    .yt-tabs { gap: 1px; padding: 2px; }
    .yt-tab-btn { padding: 6px 14px; font-size: 0.82rem; }

    /* Landing hero */
    .landing-hero { padding: 44px 16px 30px; }
    .hero-title { font-size: 1.7rem; }
    .btn-cta-install { padding: 12px 24px; font-size: 0.95rem; }

    /* Landing features */
    .features-grid-landing {
        grid-template-columns: 1fr;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }

    .howto-tab { font-size: 0.85rem; padding: 12px 10px; }
    .step-pill { font-size: 0.8rem; padding: 8px 8px; }
}

/* ===== Login & User Menu ===== */
.btn-login {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.btn-login:hover {
    background: var(--primary);
    color: #fff;
}

.user-menu {
    position: relative;
    cursor: pointer;
}
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    object-fit: cover;
}
.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 200px;
    z-index: 100;
    padding: 12px 0;
}
.user-dropdown .user-info {
    padding: 8px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.user-dropdown .user-info span { display: block; }
.user-dropdown .user-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.user-dropdown .user-email { color: var(--ink-4); font-size: 0.8rem; margin-top: 2px; }
.user-dropdown .dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    color: #e53935;
}
.user-dropdown .dropdown-item:hover { background: #f5f5f5; }

/* ===== Login Modal ===== */
.login-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}
.login-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.login-modal-content h3 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    color: var(--primary);
}
.login-modal-content p {
    color: var(--ink-3);
    font-size: 0.88rem;
    margin: 0 0 24px;
    line-height: 1.5;
}
.login-option { margin-bottom: 12px; display: flex; justify-content: center; }
.login-option-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.apple-login-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    width: 100%;
    max-width: 340px;
    background: #000;
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    box-sizing: border-box;
}
.apple-login-placeholder .apple-icon { font-size: 1.1rem; }
.login-modal .coming-soon-badge {
    background: #444;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 400;
}
.login-legal-web {
    font-size: 0.72rem;
    color: #999;
    text-align: center;
    margin: 12px 0 0;
    line-height: 1.5;
}
.login-legal-web a {
    color: #bbb;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.login-legal-web a:hover {
    color: #fff;
}

/* ============================================================
   Language selector — used on every landing/legal page.
   Built statically by build.mjs at <!--LANG_SELECTOR_PLACEHOLDER-->.
   ============================================================ */
.lang-selector {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #F4EEDF;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.lang-selector:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}
.lang-selector-icon {
    font-size: 14px;
    line-height: 1;
    opacity: 0.9;
}
.lang-selector-select {
    background: transparent;
    border: none;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    padding: 0 14px 0 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%23F4EEDF' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 10px;
}
.lang-selector-select option {
    background: #11162a;
    color: #F4EEDF;
}

/* Landing 메인 페이지: 우상단 절대 배치 (좌상단 home-logo와 대칭) */
.landing-page .lang-selector {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 10;
}
@media (max-width: 768px) {
    .landing-page .lang-selector {
        top: 14px;
        right: 14px;
        font-size: 12px;
        padding: 5px 8px;
    }
}

/* yt-header 안에 들어갈 때: flex 마지막 항목으로 자연스럽게 우측 정렬 */
.yt-header .lang-selector {
    margin-left: auto;
}
/* yt-summary 헤더는 이미 yt-header-actions로 우측 push되어 있어 셀렉터를 그 옆에 */
.yt-header .yt-header-actions + .lang-selector {
    margin-left: 8px;
}
@media (max-width: 768px) {
    .yt-header .lang-selector {
        font-size: 12px;
        padding: 5px 8px;
    }
}

/* coming-soon-page 헤더에서도 동일하게 우측 정렬 */
.coming-soon-page .yt-header .lang-selector {
    margin-left: auto;
}

/* ============================================================
   i18n 줄바꿈 보정 — splitText가 텍스트를 글자별 span으로 만들면
   각 span 사이가 줄바꿈 가능 지점이 됨. 단어 사이 공백이 없는
   CJK 언어나 prefix/슬로건이 길어진 다국어판에서 어색하게 끊김.
   - 슬로건/부제/타이틀: 데스크톱 nowrap (한 줄 유지),
     모바일은 자연 줄바꿈 + word-break: keep-all (CJK 단어 보존).
   - hero-ci(DaK!)는 항상 inline-block + nowrap → 통째로 한 단위.
   - product-badge도 통째로 (아이콘+텍스트+태그 분리 방지).
   ============================================================ */
.hero-main .hero-slogan,
.hero-main .hero-subtitle,
.hero-main .hero-title {
    white-space: nowrap;
}
.hero-main .hero-ci {
    display: inline-block;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .hero-main .hero-slogan,
    .hero-main .hero-subtitle,
    .hero-main .hero-title {
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
}
.product-badge {
    white-space: nowrap;
}

/* ============================================================
   Coming-soon modal — used by [data-coming-soon] triggers.
   Sits on top of landing page; backdrop blur + centered card.
   Brand tones: cream text + teal primary action.
   ============================================================ */
html.modal-open { overflow: hidden; }
.modal[hidden] { display: none; }
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 32, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
}
.modal-content {
    position: relative;
    z-index: 1;
    background: #11162a;
    color: #F4EEDF;
    padding: 36px 28px 28px;
    border-radius: 16px;
    max-width: 400px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    text-align: center;
    animation: modal-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.modal-close-x {
    position: absolute;
    top: 8px; right: 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 26px;
    line-height: 1;
    width: 32px; height: 32px;
    cursor: pointer;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.modal-close-x:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #F4EEDF;
}
.modal-icon {
    color: #4EA590;
    margin-bottom: 8px;
    display: flex; justify-content: center;
    opacity: 0.85;
}
.modal-content h2 {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #F4EEDF;
    letter-spacing: -0.005em;
}
.modal-content p {
    margin: 0 0 22px;
    color: #9aa3c0;
    font-size: 0.93rem;
    line-height: 1.55;
}
.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.btn-modal-primary {
    background: #4EA590;
    color: #fff;
    padding: 12px 20px;
    border-radius: 9px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background 0.15s, transform 0.1s;
}
.btn-modal-primary:hover {
    background: #3e8a76;
    transform: translateY(-1px);
}
.btn-modal-primary:active {
    transform: translateY(0);
}
.btn-modal-secondary {
    background: transparent;
    color: #9aa3c0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 11px 20px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-modal-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #F4EEDF;
    border-color: rgba(255, 255, 255, 0.22);
}