/*!
 * Media Clip Kit
 * Copyright (c) 2026 dihwang. All rights reserved.
 * Proprietary and confidential. See the LICENSE file in the project root.
 */
/* static/pages/page.css
 * ─────────────────────────────────────────────────────────────────────
 * 정보 페이지(앱버전·저작권 등) 공용 스타일.
 * 이 폴더(static/pages/)의 html 파일들이 공통으로 불러 씁니다.
 * 새 페이지를 추가할 때도 이 css만 링크하면 같은 디자인이 적용됩니다.
 * (디자인 토큰은 메인 style.css와 같은 #011627 다크 테마에 맞췄습니다.)
 * ───────────────────────────────────────────────────────────────────── */

:root {
    --bg: #011627;
    --surface: #0a2742;
    --border: #1d3b53;
    --text: #d6deeb;
    --text-muted: #8aa6c2;
    --text-subtle: #5f7e9b;
    --primary: #3b97ff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    background: var(--bg);
}

body {
    font-family:
        -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI",
        Roboto, "Malgun Gothic", "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    padding: 24px 22px 40px;
    font-size: 15px;
}

.page {
    max-width: 640px;
    margin: 0 auto;
}

/* 페이지 머리말 — 아이콘 + 제목 */
.page-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.page-head .page-icon {
    font-size: 30px;
    line-height: 1;
}
.page-head h1 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.page-head .page-sub {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

/* 본문 */
.page h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 24px 0 8px;
    color: var(--text);
}
.page p {
    color: var(--text-muted);
    margin: 8px 0;
}
.page a {
    color: var(--primary);
    text-decoration: none;
}
.page a:hover {
    text-decoration: underline;
}
.page strong {
    color: var(--text);
}

/* 정보 항목(키-값) 목록 — 앱버전 페이지 등에 사용 */
.info-list {
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.info-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 13px 16px;
    background: var(--surface);
}
.info-list li + li {
    border-top: 1px solid var(--border);
}
.info-list .k {
    color: var(--text-muted);
    font-size: 14px;
}
.info-list .v {
    color: var(--text);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* 라이선스 등 긴 약관 본문 박스 */
.legal {
    white-space: pre-wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
}

.page-foot {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-subtle);
    text-align: center;
}