/* ==========================================================================
   PALM AI — 웹사이트 공통 디자인 시스템
   web_site/design.md 의 컬러 토큰 / 타이포그래피 / 접근성 기준을 구현한다.
   라이트(기본)와 다크 두 가지 테마를 CSS 변수로 전환한다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   Tailwind 에서 투명도 수식어(bg-accent/20)를 쓸 수 있도록 RGB 채널값으로 둔다.
   -------------------------------------------------------------------------- */
:root {
    /* 라이트 테마 — design.md 4장 컬러 토큰 */
    --c-bg: 247 245 242;          /* Background  #F7F5F2 */
    --c-paper: 255 255 255;       /* Paper       #FFFFFF */
    --c-text: 27 25 39;           /* Main Text   #1B1927 */
    --c-muted: 102 99 122;        /* Muted Text  #66637A */
    --c-line: 27 25 39;           /* 경계선 (알파는 사용처에서 지정) */

    --c-ink: 23 21 37;            /* Deep Ink    #171525 — 어두운 구간 배경 */
    --c-ink2: 34 31 54;           /* 어두운 구간 위의 카드 표면 */
    --c-onink: 255 255 255;       /* 어두운 구간의 본문 색 */
    --c-oninkmuted: 176 172 199;  /* 어두운 구간의 보조 설명 색 */

    --c-accent: 123 97 255;       /* Core Purple #7B61FF */
    --c-accentsoft: 238 233 255;  /* Purple Soft #EEE9FF */
    --c-green: 36 95 75;          /* Palm Green  #245F4B */
    --c-greenbg: 33 79 67;        /* 다국어 구간 배경 — web_ui.pen #214F43 */
    --c-tint-a: 241 238 232;      /* 신뢰 요약 구간 — web_ui.pen #F1EEE8 */
    --c-tint-b: 243 240 248;      /* 온디바이스 구간 — web_ui.pen #F3F0F8 */
    --c-aqua: 44 208 223;         /* Aqua        #2CD0DF */

    --shadow-card: 0 1px 2px rgb(23 21 37 / 0.04), 0 12px 32px -12px rgb(23 21 37 / 0.14);
    --shadow-phone: 0 40px 80px -28px rgb(23 21 37 / 0.55), 0 8px 24px -12px rgb(23 21 37 / 0.4);

    /* design.md 4장 타이포그래피 — Pretendard 는 설치되어 있으면 대체로 사용 */
    --font-display: "Gothic A1", "Pretendard Variable", Pretendard, sans-serif;
    --font-sans: "Noto Sans KR", "Noto Sans JP", "Pretendard Variable", Pretendard, system-ui, sans-serif;
    --font-label: "Space Grotesk", "Noto Sans KR", system-ui, sans-serif;

    color-scheme: light;
}

html.dark {
    /* 다크 테마 — 라이트 팔레트의 역할을 유지한 채 명도만 뒤집는다 */
    --c-bg: 19 17 32;
    --c-paper: 28 26 43;
    --c-text: 242 241 247;
    --c-muted: 165 162 184;
    --c-line: 255 255 255;

    --c-ink: 11 10 20;            /* 페이지 배경보다 더 깊게 두어 구간을 구분한다 */
    --c-ink2: 26 24 42;
    --c-onink: 242 241 247;
    --c-oninkmuted: 160 156 182;

    --c-accent: 156 134 255;      /* 어두운 배경에서 AA 대비를 확보하려 밝힌 퍼플 */
    --c-accentsoft: 46 39 82;
    --c-green: 74 160 130;
    --c-greenbg: 14 40 34;
    --c-tint-a: 23 20 30;
    --c-tint-b: 21 19 31;
    --c-aqua: 90 226 238;

    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.6);
    --shadow-phone: 0 40px 80px -28px rgb(0 0 0 / 0.8), 0 8px 24px -12px rgb(0 0 0 / 0.6);

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. 기본 문서 스타일
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 6.5rem; /* 고정 내비게이션에 가리지 않도록 */
}

body {
    background-color: rgb(var(--c-bg));
    color: rgb(var(--c-text));
    font-family: var(--font-sans);
    overflow-x: hidden;
    word-break: keep-all;       /* 한글 단어 중간 줄바꿈 방지 */
    line-break: normal;
    -webkit-font-smoothing: antialiased;
    transition: background-color .3s ease, color .3s ease;
}

body { transition: background-color .3s ease, color .3s ease; }

body h1, body h2, body .display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
body .label { font-family: var(--font-label); }

/* 라틴 아이브로우 / 배지 — design.md 4장 */
body .eyebrow {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* 워드마크는 PALM AI 로 띄어 쓴다 — design.md 3장 */
body .wordmark {
    font-family: var(--font-label);
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   3. 접근성 — 키보드 포커스 / 모션 축소
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgb(var(--c-accent));
    outline-offset: 3px;
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -150%);
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: rgb(var(--c-accent));
    color: #fff;
    border-radius: 0 0 12px 12px;
    font-weight: 700;
    transition: transform .2s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .float, .float-slow { animation: none !important; }
}

/* --------------------------------------------------------------------------
   4. 표면 — 카드 / 유리 / 어두운 구간
   -------------------------------------------------------------------------- */
.card {
    background: rgb(var(--c-paper));
    border: 1px solid rgb(var(--c-line) / 0.08);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-card);
}

.section-ink {
    background: rgb(var(--c-ink));
    color: rgb(var(--c-onink));
}

/* web_ui.pen 의 Final CTA — rotation 102, #6C4EF2 → #7B61FF → #3A8678 */
.section-cta {
    background: linear-gradient(102deg, #6C4EF2 0%, #7B61FF 55%, #3A8678 100%);
    color: #fff;
}
.section-cta .cta-body { color: #ECE8FF; }
/* 그라디언트 위에서는 흰 버튼에 잉크색 글자 (원본 Final Google Play Button) */
.btn-on-cta { background: #fff; color: rgb(23 21 37); }
.btn-on-cta:hover { box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.35); }

.section-tint-a { background: rgb(var(--c-tint-a)); }
.section-tint-b { background: rgb(var(--c-tint-b)); }

.section-green {
    background: rgb(var(--c-greenbg));
    color: #fff;
}
html.dark /* web_ui.pen 의 Final CTA — rotation 102, #6C4EF2 → #7B61FF → #3A8678 */
.section-cta {
    background: linear-gradient(102deg, #6C4EF2 0%, #7B61FF 55%, #3A8678 100%);
    color: #fff;
}
.section-cta .cta-body { color: #ECE8FF; }
/* 그라디언트 위에서는 흰 버튼에 잉크색 글자 (원본 Final Google Play Button) */
.btn-on-cta { background: #fff; color: rgb(23 21 37); }
.btn-on-cta:hover { box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.35); }

.section-tint-a { background: rgb(var(--c-tint-a)); }
.section-tint-b { background: rgb(var(--c-tint-b)); }

.section-green { color: rgb(var(--c-onink)); }

.card-ink {
    background: rgb(var(--c-ink2));
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 1.5rem;
}

.glass {
    background: rgb(var(--c-paper) / 0.92);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgb(var(--c-line) / 0.08);
    box-shadow: 0 2px 6px rgb(23 21 37 / 0.08), 0 18px 40px -20px rgb(23 21 37 / 0.35);
}
html.dark .glass {
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.5), 0 18px 40px -20px rgb(0 0 0 / 0.7);
}

.divider { border-color: rgb(var(--c-line) / 0.1); }
.divider-ink { border-color: rgb(255 255 255 / 0.1); }

/* --------------------------------------------------------------------------
   5. 버튼
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1rem 1.75rem;
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, background-color .2s ease, color .2s ease;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
    background: rgb(var(--c-accent));
    color: #fff;
    box-shadow: 0 12px 30px -12px rgb(var(--c-accent) / 0.8);
}
.btn-primary:hover { box-shadow: 0 18px 40px -12px rgb(var(--c-accent) / 0.9); }
html.dark .btn-primary { color: #14121f; }

.btn-ghost {
    background: rgb(var(--c-paper));
    color: rgb(var(--c-text));
    border: 1px solid rgb(var(--c-line) / 0.14);
}

/* 어두운 구간 위에 놓이는 보조 버튼 */
.btn-ghost-ink {
    background: rgb(255 255 255 / 0.08);
    color: rgb(var(--c-onink));
    border: 1px solid rgb(255 255 255 / 0.16);
}
.btn-ghost-ink:hover { background: rgb(255 255 255 / 0.14); }

/* --------------------------------------------------------------------------
   6. 폰 목업 — 실제 앱 캡처를 기기 프레임에 넣는다 (design.md 4장)
   -------------------------------------------------------------------------- */
.phone {
    position: relative;
    /* 위쪽 베젤을 조금 더 두어 스피커 표현이 화면을 가리지 않게 한다 */
    padding: 15px 6px 6px;
    border-radius: 2.25rem;
    background: linear-gradient(160deg, #3b3752 0%, #14121f 45%, #2a2740 100%);
    box-shadow: var(--shadow-phone);
    flex: none;
}
.phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.85rem;
    background: rgb(var(--c-ink2));
}
/* 프레임 상단의 스피커/노치 표현 */
.phone::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    height: 5px;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.5);
    pointer-events: none;
}
.phone-sm { border-radius: 1.75rem; padding: 13px 5px 5px; }
.phone-sm img { border-radius: 1.4rem; }
.phone-sm::after { width: 28%; height: 4px; top: 4.5px; }

/* Hero / Final CTA 의 후광 */
.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

/* --------------------------------------------------------------------------
   7. 모션 — 부유 효과와 스크롤 등장
   -------------------------------------------------------------------------- */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
.float { animation: floatY 7s ease-in-out infinite; }
.float-slow { animation: floatY 9s ease-in-out infinite; animation-delay: -3s; }

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. 내비게이션 — 언어 / 테마 전환 컨트롤
   -------------------------------------------------------------------------- */
.seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: 999px;
    background: rgb(var(--c-line) / 0.07);
}
.seg a,
.seg button {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    color: rgb(var(--c-muted));
    transition: background-color .2s ease, color .2s ease;
}
.seg a:hover,
.seg button:hover { color: rgb(var(--c-text)); }
.seg a[aria-current],
.seg button[aria-pressed="true"] {
    background: rgb(var(--c-paper));
    color: rgb(var(--c-accent));
    box-shadow: 0 1px 3px rgb(var(--c-line) / 0.16);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    color: rgb(var(--c-muted));
    transition: background-color .2s ease, color .2s ease;
}
.icon-btn:hover { background: rgb(var(--c-line) / 0.07); color: rgb(var(--c-text)); }

/* 테마에 따라 해/달 아이콘 중 하나만 보인다 */
.icon-sun { display: none; }
html.dark .icon-sun { display: block; }
html.dark .icon-moon { display: none; }

/* --------------------------------------------------------------------------
   9. 기타 조각
   -------------------------------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: rgb(var(--c-paper) / 0.9);
    color: rgb(var(--c-text));
    border: 1px solid rgb(var(--c-line) / 0.08);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(10px);
}

.badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    background: rgb(var(--c-accentsoft));
    color: rgb(var(--c-accent));
    flex: none;
}
html.dark .badge-icon { background: rgb(var(--c-accent) / 0.18); }

.badge-icon-ink {
    background: rgb(255 255 255 / 0.08);
    color: rgb(var(--c-aqua));
}

/* 사용 방법 단계 번호 */
.step-num {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: rgb(var(--c-accent));
}

/* 사용 방법 구간 — 앱 화면 없이 활자만으로 세우는 단계 (design.md 4장 타이포그래피)
   각 단계는 상단 규칙선 + 큰 숫자 + 하위 항목의 얇은 구분선으로 위계를 만든다. */
.how-step {
    border-top: 3px solid rgb(var(--c-accent));
    padding-top: 1.75rem;
}

.how-step-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.how-step-label {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(var(--c-muted));
}

.how-step-num {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: clamp(3rem, 6.5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--c-accent));
}

.how-step-title {
    font-size: 1.3125rem;
    line-height: 1.35;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .how-step-title { font-size: 1.4375rem; } }

.how-list { list-style: none; margin: 0; padding: 0; }
.how-list > li {
    border-top: 1px solid rgb(var(--c-line) / 0.1);
    padding: 0.8125rem 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgb(var(--c-muted));
}
.how-list > li:last-child { padding-bottom: 0; }

/* 다국어 구간의 인사말 격자 — 인사말은 본문 폰트를 유지한다 (design.md 4장) */
.greeting {
    font-family: var(--font-sans);
    font-weight: 500;
}

/* details 기본 마커 제거 — 자체 아이콘을 쓴다 */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] summary svg { transform: rotate(180deg); }
summary svg { transition: transform .2s ease; }

/* keep-all 은 한국어용 규칙이다. 일본어·영어는 각 언어의 기본 줄바꿈을 따른다. */
html[lang="ja"] body { word-break: normal; line-break: strict; }
html[lang="en"] body { word-break: normal; }

/* 모바일에서만 적용되는 줄바꿈 */
.br-mobile { display: inline; }
@media (min-width: 640px) { .br-mobile { display: none; } }

/* 긴 단어가 좁은 화면을 밀어내지 않도록 하는 안전장치 */
p, li, h1, h2, h3, figcaption { overflow-wrap: break-word; }

svg { flex: none; }

/* --------------------------------------------------------------------------
   10. Hero 제목 크기
   web_ui.pen 의 Hero Copy 열은 560px, 제목은 66px/800 이고 줄바꿈은
   "내 마음에 맞춘 AI, / 내 폰 안에서." 로 지금 구현과 같다.
   같은 문장이라도 라틴·가나는 글자 폭이 달라 66px 에서는 열을 넘치므로
   언어별로 크기를 나눈다. 한국어는 원본 값을 그대로 쓴다.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    html[lang] .hero-title { font-size: 58px; line-height: 1.1; }
    html[lang="ko"] .hero-title { font-size: 66px; }
    html[lang="ja"] .hero-title { font-size: 54px; }
}