/* えっと帖のサポート・ポリシーのページ。アプリと同じ空気にしてある（DESIGN §9-2）。
   色は無彩色だけ: 生成りの白 #faf8f4 / 墨 #2c2a28 / 灰 #a09a92 / 薄灰 #d6d0c7 / 罫 #e9e3da。アクセント色は置かない。
   書体は本文 Zen Kaku Gothic New、数字と欧文 DM Sans（アプリと同じ）。docs/fonts の woff2 はページ内の文字だけに
   絞った自前のもの（tools/build_docs_fonts.sh）。Google Fonts には飛ばさない（ポリシーのページが外部に通信しないように）。
   カード・影・塗りボタンは使わない。線は 1px。見出しは縦組み、右に 1px の線（アプリのホームと同じ記号）。 */
@font-face { font-family: "Zen Kaku Gothic New"; src: url("fonts/zen-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("fonts/zen-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("fonts/zen-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Zen Maru Gothic"; src: url("fonts/zenmaru-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dmsans.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }

:root {
    --paper: #faf8f4;
    --ink: #2c2a28;
    --mute: #a09a92;
    --faint: #d6d0c7;
    --rule: #e9e3da;
}

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

html {
    background: var(--paper);
    color: var(--ink);
    font-family: "DM Sans", "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
}

/* ごく薄い紙の粒子を一面に（アプリと同じ） */
html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .17 0 0 0 0 .16 0 0 0 0 .15 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

body {
    line-height: 2;
    letter-spacing: .02em;
    font-size: 15px;
}

.container {
    max-width: 680px;
    margin: 0 auto;
    padding: 44px 24px 72px;
}

/* ---- 頭: 左上に小さく名前、右に縦組みの見出しと 1px の線 ---- */
header.top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    min-height: 300px;
    margin-bottom: 44px;
}

.name {
    font-size: 15px;
    letter-spacing: .32em;
    color: var(--mute);
    text-decoration: none;
    padding-top: 6px;
}

a.name:hover { color: var(--ink); }

h1.title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-feature-settings: "vert" 1, "vrt2" 1;
    font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(26px, 4.2vw, 36px);
    line-height: 1.55;
    letter-spacing: .14em;
    padding-right: 20px;
    border-right: 1px solid var(--ink);
    margin-top: 4px;
}

/* ---- 本文 ---- */
.meta {
    color: var(--mute);
    font-size: 13px;
    letter-spacing: .06em;
    margin-bottom: 28px;
}

.card + .card { margin-top: 8px; }

h2 {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1.8;
    margin-top: 52px;
    padding-top: 16px;
    border-top: 1px solid var(--ink);
    margin-bottom: 14px;
}

.card:first-of-type h2:first-child { margin-top: 0; }

h2[id] { scroll-margin-top: 24px; }

h3 {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .04em;
    margin: 30px 0 6px;
}

p { margin-bottom: 14px; }

ul {
    list-style: none;
    margin: 0 0 16px;
}

li {
    position: relative;
    padding-left: 1.3em;
    margin-bottom: 6px;
}

li::before {
    content: "";
    position: absolute;
    left: .15em;
    top: .95em;
    width: .45em;
    height: 1px;
    background: var(--mute);
}

/* 強調は色を変えない。太さを一段だけ上げる（アプリと同じ） */
strong {
    font-weight: 500;
    color: var(--ink);
}

/* リンクは文字と下線だけ（アプリの TextLink と同じ文法） */
a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--faint);
    text-decoration-thickness: 1px;
    text-underline-offset: .3em;
}

a:hover { text-decoration-color: var(--ink); }

/* ---- 表: 細い罫だけ ---- */
.tablewrap {
    overflow-x: auto;
    margin-bottom: 18px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.8;
}

th, td {
    text-align: left;
    vertical-align: top;
    padding: 12px 16px 12px 0;
    border-top: 1px solid var(--rule);
}

tr:last-child th,
tr:last-child td { border-bottom: 1px solid var(--rule); }

th {
    font-weight: 400;
    color: var(--mute);
    font-size: 12px;
    letter-spacing: .1em;
    white-space: nowrap;
}

td:first-child { font-weight: 500; }

.tablewrap table { min-width: 560px; }

/* 項目名と内容の 2 列の表（特商法）は、狭い画面で縦に積む */
table.stack { min-width: 0; }

@media (max-width: 560px) {
    table.stack tr { display: block; border-top: 1px solid var(--rule); padding: 10px 0; }
    table.stack tr:first-child { display: none; }
    table.stack tr:last-child { border-bottom: 1px solid var(--rule); }
    table.stack td { display: block; border: none; padding: 0; }
    table.stack td:first-child { color: var(--mute); font-weight: 400; font-size: 12px; letter-spacing: .1em; }
}

.note {
    font-size: 13px;
    color: var(--mute);
}

/* ---- 脚: 行き先を並べる。© は右に小さく ---- */
footer {
    margin-top: 72px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    font-size: 13px;
    color: var(--mute);
    letter-spacing: .04em;
}

footer p { margin: 0; }

footer nav a { margin-right: 18px; }

@media (max-width: 560px) {
    body { font-size: 15px; }
    .container { padding: 32px 20px 56px; }
    header.top { min-height: 260px; margin-bottom: 36px; }
    h2 { margin-top: 44px; }
}