/* PasteCam 사이트 공통 스타일.
 *
 * 앱과 같은 팔레트를 쓴다 — OnboardingDecor.swift 의 세 색이 원본이다.
 *   deepBlue #07549A · yellow #FBD60D · sky #13AAD5
 *
 * 외부 폰트도 외부 스크립트도 쓰지 않는다. 이 사이트는 App Store 심사자가
 * 열어 볼 페이지다. 네트워크 사정과 무관하게 항상 떠야 한다.
 */

:root {
    color-scheme: light dark;

    --deep-blue: #07549a;
    --yellow: #fbd60d;
    --sky: #13aad5;

    --bg: #ffffff;
    --bg-raised: #f6f8fa;
    --ink: #14181d;
    --ink-soft: #4b5563;
    --ink-faint: #6b7280;
    --rule: #e3e8ee;
    --accent: var(--deep-blue);
    --accent-ink: #ffffff;

    --shell: 44rem;
    --radius: 14px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b1420;
        --bg-raised: #121e2d;
        --ink: #e8eef5;
        --ink-soft: #a8b6c6;
        --ink-faint: #7d8b9b;
        --rule: #1e2d40;
        /* 어두운 바탕에서는 #07549A 가 읽히지 않아 밝은 파랑으로 바꾼다.
         * 그러면 그 위에 얹는 글자는 흰색이 아니라 어두운 색이어야 대비가 산다. */
        --accent: #6db4ee;
        --accent-ink: #08111c;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* 머리말이 붙박이라 앵커로 뛰면 제목이 그 아래로 숨는다. */
    scroll-padding-top: 4.5rem;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
        "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
    font-size: 17px;
    line-height: 1.72;
    letter-spacing: -0.01em;
    /* 한국어는 단어 중간에서 끊기면 읽기 나쁘다. */
    word-break: keep-all;
    overflow-wrap: break-word;
}

.shell {
    max-width: var(--shell);
    margin: 0 auto;
    /* 단축 속성을 쓰면 main 의 세로 여백까지 0 으로 덮는다. 가로만 건드린다. */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ── 머리말 ─────────────────────────────────────────── */

.masthead {
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

.masthead .shell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 60px;
}

.wordmark {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 680;
    font-size: 1.0625rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
}

.wordmark img {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: block;
}

.masthead nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.masthead nav a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
}

.masthead nav a:hover,
.masthead nav a[aria-current="page"] {
    color: var(--accent);
}

/* 언어 전환. 버튼 두 개를 한 알약 안에 넣는다. */
.langswitch {
    display: inline-flex;
    border: 1px solid var(--rule);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-raised);
}

.langswitch button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-faint);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    line-height: 1.4;
}

.langswitch button[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-ink);
}

/* ── 본문 ───────────────────────────────────────────── */

main {
    padding-top: 3rem;
    padding-bottom: 5rem;
}

h1 {
    font-size: 2rem;
    line-height: 1.3;
    letter-spacing: -0.03em;
    font-weight: 720;
    margin: 0 0 0.5rem;
}

h2 {
    font-size: 1.25rem;
    line-height: 1.45;
    letter-spacing: -0.02em;
    font-weight: 680;
    margin: 2.75rem 0 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

h2:first-of-type {
    border-top: 0;
    padding-top: 0;
}

/* 자주 묻는 질문 묶음 뒤에 제목이 오면 줄이 두 겹으로 그어져 빈 칸처럼 보인다.
 * 마지막 질문의 아래 줄을 그대로 구분선으로 쓴다. */
details + h2 {
    border-top: 0;
    padding-top: 0;
    margin-top: 2.25rem;
}

h3 {
    font-size: 1.0625rem;
    font-weight: 660;
    letter-spacing: -0.015em;
    margin: 1.75rem 0 0.4rem;
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--accent);
    text-underline-offset: 0.18em;
}

ul,
ol {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
}

li {
    margin-bottom: 0.4rem;
}

strong {
    font-weight: 660;
}

.lede {
    font-size: 1.125rem;
    color: var(--ink-soft);
    margin-bottom: 2rem;
}

/* 제목 바로 뒤의 한 줄은 시행일·수정일이다. 본문보다 물러나 있어야 한다. */
.updated,
h1 + p {
    font-size: 0.875rem;
    color: var(--ink-faint);
    margin: 0 0 2.5rem;
}

/* 표 — 좁은 화면에서 가로로만 스크롤되게 가둔다. */
.tablewrap {
    overflow-x: auto;
    margin: 0 0 1.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9375rem;
    /* min-width 를 두면 좁은 화면에서 몇 px 때문에 가로 스크롤이 생긴다.
     * 넘칠 때만 .tablewrap 이 받아 주면 충분하다. */
}

th,
td {
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

thead th {
    background: var(--bg-raised);
    font-weight: 660;
    font-size: 0.875rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

tbody tr:last-child td {
    border-bottom: 0;
}

/* 강조 상자 */
.callout {
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    margin: 0 0 1.5rem;
}

.callout p:last-child {
    margin-bottom: 0;
}

.callout--brand {
    border-left: 4px solid var(--yellow);
}

/* 자주 묻는 질문 */
details {
    border-bottom: 1px solid var(--rule);
    padding: 0.15rem 0;
}

details summary {
    cursor: pointer;
    padding: 0.9rem 0;
    font-weight: 620;
    letter-spacing: -0.015em;
    list-style: none;
    display: flex;
    gap: 0.65rem;
    align-items: baseline;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::before {
    content: "＋";
    color: var(--accent);
    font-weight: 700;
    flex: none;
    line-height: 1.6;
}

details[open] summary::before {
    content: "－";
}

details .answer {
    padding: 0 0 0.9rem 1.55rem;
    color: var(--ink-soft);
}

details .answer > :last-child {
    margin-bottom: 0;
}

/* 표지 (index) */
.hero {
    text-align: center;
    padding: 1rem 0 0.5rem;
}

.hero img {
    width: 104px;
    height: 104px;
    border-radius: 23px;
    margin-bottom: 1.25rem;
}

.hero h1 {
    font-size: 2.25rem;
}

.hero .lede {
    max-width: 30rem;
    margin: 0 auto 2rem;
}

.linkgrid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 2rem 0 0;
}

.linkcard {
    display: block;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: var(--ink);
    background: var(--bg-raised);
}

.linkcard:hover {
    border-color: var(--accent);
}

.linkcard b {
    display: block;
    font-weight: 660;
    letter-spacing: -0.015em;
    margin-bottom: 0.15rem;
}

.linkcard span {
    font-size: 0.9375rem;
    color: var(--ink-faint);
}

/* ── 꼬리말 ─────────────────────────────────────────── */

footer {
    border-top: 1px solid var(--rule);
    padding: 2rem 0 3rem;
    font-size: 0.875rem;
    color: var(--ink-faint);
}

footer a {
    color: var(--ink-soft);
}

footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* ── 언어 전환 동작 ─────────────────────────────────── */

html[data-lang="ko"] [lang="en"],
html[data-lang="en"] [lang="ko"] {
    display: none;
}

/* 자바스크립트가 죽어도 한국어는 보인다. */
html:not([data-lang]) [lang="en"] {
    display: none;
}

/* 머리말은 본문보다 먼저 좁아진다. 글자 크기가 그대로면 46rem 근처에서 넘친다. */
@media (max-width: 46rem) {
    .masthead nav {
        gap: 0.8rem;
    }

    .masthead nav a {
        font-size: 0.875rem;
    }

    .wordmark {
        font-size: 1rem;
    }
}

@media (max-width: 30rem) {
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 1.6rem;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    .shell {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .masthead nav {
        gap: 0.7rem;
    }

    th,
    td {
        padding: 0.6rem 0.55rem;
        font-size: 0.875rem;
    }

    /* 아주 좁으면 이름 글자를 접는다. 아이콘이 그대로 표지로 가는 링크다.
     * 지원·처리방침 링크는 남긴다 — 지원 사이트에서 그게 먼저다. */
    .wordmark span {
        display: none;
    }
}