/*
 * ダメーター 法務文書スタイル。
 * アプリ内 Bundle 表示と外部公開（GitHub Pages 等）の両方で同じ見た目になるよう、
 * アプリの脱力系デザイン（暖色系の背景・丸ゴシック・オレンジのアクセント）に寄せている。
 *
 * 色は Color+Dameter.swift の Brand / Surface / Ink トークンと同値に揃えている:
 *   --color-bg          ≈ Surface.background
 *   --color-text        ≈ Ink.dark
 *   --color-text-muted  ≈ Ink.mid
 *   --color-text-soft   ≈ Ink.light
 *   --color-link        ≈ Brand.accent
 *   --color-border      ≈ Effect.lockedStar
 */

:root {
    --color-text: #2A1F14;
    --color-text-muted: #7A6347;
    --color-text-soft: #A89478;
    --color-border: #E8D5C0;
    --color-bg: #FFF5EB;
    --color-bg-alt: #FFFFFF;
    --color-link: #FF8C42;
    --max-width: 720px;
    /* 注意書きボックス（ドラフト告知・翻訳の正文告知）。 */
    --color-notice-bg: #FFF6E6;
    --color-notice-border: #D9A441;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    /* アプリ本体は SF Pro Rounded を使用。WebKit の ui-rounded は iOS 13+ で SF Rounded
       に解決されるため、これを最優先にしてアプリと同じ字面感を出す。 */
    font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Hiragino Sans",
                 "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    word-break: break-word;
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 32px 20px 80px;
}

header {
    margin-bottom: 32px;
}

header h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}

header .meta {
    color: var(--color-text-soft);
    font-size: 13px;
    margin: 0;
}

/* 見出しは罫線ではなく余白とウェイトで階層を表現する（脱力系・カード UI と整合） */
h2 {
    font-size: 19px;
    font-weight: 800;
    margin: 40px 0 12px;
    color: var(--color-text);
}

h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 28px 0 10px;
    color: var(--color-text);
}

p {
    margin: 0 0 14px;
}

ol, ul {
    padding-left: 1.4em;
    margin: 0 0 14px;
}

ol li, ul li {
    margin-bottom: 6px;
}

ol ol, ul ul, ol ul, ul ol {
    margin-top: 6px;
    margin-bottom: 0;
}

a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

a:hover {
    text-decoration: none;
}

/* 本文中で強調が必要な箇所（24h 対応の宣言など） */
strong {
    font-weight: 800;
    color: var(--color-link);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 22px;
    font-size: 15px;
    background-color: var(--color-bg-alt);
    border-radius: 12px;
    overflow: hidden;
}

th, td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

tr:last-child th, tr:last-child td {
    border-bottom: none;
}

th {
    background-color: var(--color-bg);
    font-weight: 700;
}

dl {
    margin: 0 0 14px;
}

dt {
    font-weight: 700;
    margin-top: 12px;
}

dd {
    margin: 4px 0 0 1.4em;
}

footer {
    margin-top: 56px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-soft);
    font-size: 12px;
    text-align: center;
}

@media (max-width: 600px) {
    main {
        padding: 24px 16px 64px;
    }

    header h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 17px;
    }

    h3 {
        font-size: 15px;
    }

    table {
        font-size: 14px;
    }

    th, td {
        padding: 8px 10px;
    }
}

/* 注意書きボックス（ドラフト告知・翻訳の正文告知）。
   色をインライン style で直書きすると背景だけ明るいままダークモードで文字が読めなくなるため、
   必ずこのクラスを使う（文字色は --color-text を継承させる）。 */
.notice {
    border: 1px solid var(--color-notice-border);
    background: var(--color-notice-bg);
    color: var(--color-text);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.notice p {
    margin: 0;
}

/* 言語切り替え（ja ⇄ en）。
   `assets/lang-switch.js` が実行時に注入するため、HTML には実体を書かない。
   アプリ内 WebView は allowsContentJavaScript = false で JS を止めているので、
   この UI はアプリ内には出ない（＝アプリは OS の言語設定に自動追従のまま）。
   Web だけで切り替えたいという要件を、HTML を二重管理せずに満たすための構造。 */
.lang-switch {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 16px 20px 0;
}

.lang-switch a {
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-link);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 5px 14px;
    line-height: 1.4;
    /* 指で押せる最小サイズを確保する（44pt には満たないが、
       文字リンクの列としては十分なタップ領域を持たせる） */
    min-height: 30px;
    display: inline-flex;
    align-items: center;
}

/* LP のナビ内に差し込む場合は、独立したバーとしての余白・幅指定を解除して
   flex の一要素として振る舞わせる（テーマ切り替えボタンの隣に並ぶ）。 */
.lang-switch.lang-switch-inline {
    max-width: none;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    gap: 4px;
}

.lang-switch.lang-switch-inline a,
.lang-switch.lang-switch-inline span[aria-current="true"] {
    padding: 4px 10px;
    font-size: 12px;
}

/* 現在表示中の言語。押しても同じページなのでリンクにせず、状態表示に留める */
.lang-switch span[aria-current="true"] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-soft);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 5px 14px;
    line-height: 1.4;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
}

/* ダークモード: アプリの Surface.background = #1F1812 等と揃える */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #F5EBDC;
        --color-text-muted: #C8B59A;
        --color-text-soft: #9A8A75;
        --color-border: #5C4D3F;
        --color-bg: #1F1812;
        --color-bg-alt: #2E251D;
        --color-link: #FFA565;
        /* 明るい背景のままだと本文の明色テキストが読めないので、暗い琥珀に反転させる */
        --color-notice-bg: #3A2E1C;
        --color-notice-border: #8A6A2F;
    }
}