/*
 * 문득 사이트. 앱의 규칙을 그대로 따른다 (CLAUDE.md §3):
 *   · 색은 장소에만 쓴다 → 이 사이트에는 장소가 없으므로 검정·흰색·회색뿐이다
 *   · 예외는 워드마크의 대괄호 둘 (§3-1). 파랑 여는 괄호, 코랄 닫는 괄호
 */
:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --surface: #f4f5f7;
    --text: #14161a;
    --text-2: #5f646d;
    --text-3: #9096a0;
    --line: #e7eaed;
    --blue: #2e9ae8;
    --coral: #ff6f52;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14161a;
        --surface: #1e2126;
        --text: #f2f3f5;
        --text-2: #b3b8c0;
        --text-3: #7d838d;
        --line: #2a2e34;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    line-height: 1.75;
    letter-spacing: -0.01em;
    -webkit-text-size-adjust: 100%;
}

.wrap {
    max-width: 44rem;
    margin: 0 auto;
    padding: 4rem 1.5rem 6rem;
}

/* 워드마크 — 대괄호 둘만 색을 진다. 앱 홈 상단바와 같은 규칙이다. */
.mark {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--text);
    display: inline-block;
}
.mark .b { color: var(--blue); }
.mark .c { color: var(--coral); }

h1 {
    font-size: clamp(1.75rem, 5vw, 2.4rem);
    line-height: 1.35;
    letter-spacing: -0.03em;
    margin: 2.5rem 0 0.75rem;
    text-wrap: balance;
}

/* 6항으로 바로 뛰는 링크가 있다 — 제목이 화면 맨 위에 딱 붙지 않게 띄운다. */
h2 {
    scroll-margin-top: 1.5rem;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    margin: 3rem 0 0.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

h3 {
    font-size: 1rem;
    margin: 1.75rem 0 0.25rem;
}

p { margin: 0.75rem 0; color: var(--text-2); }
h1 + p { font-size: 1.05rem; }

strong { color: var(--text); font-weight: 600; }

ul { margin: 0.75rem 0; padding-left: 1.2rem; color: var(--text-2); }
li { margin: 0.4rem 0; }

/* 표는 좁은 화면에서 스스로 스크롤한다 — 본문이 옆으로 밀리면 안 된다. */
.scroll { overflow-x: auto; margin: 1.25rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
th, td {
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
th { color: var(--text-3); font-weight: 600; white-space: nowrap; }
td { color: var(--text-2); }

.card {
    background: var(--surface);
    border-radius: 18px;
    padding: 1.5rem 1.6rem;
    margin: 1.75rem 0;
}
.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.meta { color: var(--text-3); font-size: 0.9rem; }

a { color: var(--text); text-decoration-color: var(--text-3); text-underline-offset: 3px; }

/*
 * 스토어로 가는 문 (2026-10-02 출시). 앱의 기본 버튼처럼 검정 하나다 — 색은 장소에만 쓴다.
 * 다크 모드에서는 글자색·바탕색을 맞바꿔 그대로 눈에 띈다.
 */
.store {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
    text-decoration: none;
}
.store:hover { opacity: 0.88; }

/* 삭제 방법으로 가는 문. Play 가 「눈에 띄게 표시」를 요구해서 카드 바로 밑에 세운다. */
.lead-link a { text-decoration-color: var(--text); }
a:hover { text-decoration-color: var(--text); }

footer {
    margin-top: 4rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
    color: var(--text-3);
    font-size: 0.9rem;
}