/* ことねむ / Kotonemu — 法務・サポート
   配色はアプリの Theme.swift に合わせる（純黒＋暖色の白＋砂金）。
   深夜に開かれる可能性があるので、面の明るさは抑える。 */

*{ box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing:antialiased; }
:root{
  color-scheme:dark;
  --bg:#000000;
  --card:#0B0B0C;
  --ink:#E8E2D6;
  --ink-soft:#989287;
  --ink-dim:#666158;
  --ink-faint:#413D36;
  --accent:#C9A96A;
  --hair:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.10);
}
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',
              system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;
  line-height:1.9;
  min-height:100vh;
  display:flex; flex-direction:column;
  -webkit-text-size-adjust:100%;
}
::selection{ background:var(--accent); color:#000; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ── ナビ ───────────────────────────── */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px clamp(18px,5vw,40px);
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hair);
}
.brand{ display:flex; align-items:center; gap:11px; color:var(--ink); }
.brand img{ width:30px; height:30px; border-radius:7px; }
.brand .name{ font-size:14px; letter-spacing:.16em; font-weight:400; }

/* 言語切替。
   ネイティブ select は iOS だと OS 標準の灰色メニューが出て、
   ページの配色と完全に断絶する（実機で確認）。見た目を握るため自前で組む。
   role/aria は付けて、キーボードと読み上げには従来どおり対応させる。 */
.lang{ position:relative; flex-shrink:0; }

.lang-btn{
  display:flex; align-items:center; gap:9px;
  font:inherit; font-size:12.5px; line-height:1;
  color:var(--ink-soft); background:transparent;
  border:1px solid var(--hair); border-radius:999px;
  padding:9px 14px; cursor:pointer; transition:.18s;
}
.lang-btn:hover{ color:var(--ink); border-color:var(--border); }
.lang-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lang-btn .chev{
  width:9px; height:9px; flex-shrink:0;
  stroke:var(--ink-dim); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.lang[data-open="true"] .lang-btn{ color:var(--ink); border-color:var(--border); }
.lang[data-open="true"] .chev{ transform:rotate(180deg); }

.lang-menu{
  position:absolute; top:calc(100% + 9px); right:0; z-index:60;
  min-width:158px; list-style:none; margin:0; padding:5px;
  background:rgba(10,10,12,.97);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border); border-radius:14px;
  box-shadow:0 20px 44px rgba(0,0,0,.66), 0 2px 8px rgba(0,0,0,.5);
  /* visibility は離散値なので transition の間だけ visible が残る。
     閉じた瞬間に当たり判定を切るため pointer-events も併用する。 */
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-7px) scale(.97); transform-origin:top right;
  transition:opacity .19s ease, transform .19s cubic-bezier(.34,1.3,.64,1), visibility .19s;
}
.lang[data-open="true"] .lang-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1);
}
.lang-menu li{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:13px; color:var(--ink-soft);
  padding:11px 13px; border-radius:9px; cursor:pointer;
  transition:background .14s, color .14s; margin:0;
  white-space:nowrap;
}
.lang-menu li:hover{ background:rgba(255,255,255,.045); color:var(--ink); }
.lang-menu li[aria-selected="true"]{ color:var(--ink); }
/* 選択中の印。チェックではなく点にして、アプリ内の設定画面と揃える */
.lang-menu li::after{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--accent); opacity:0; transition:opacity .14s; flex-shrink:0;
}
.lang-menu li[aria-selected="true"]::after{ opacity:1; }

/* ── 本文 ───────────────────────────── */
.wrap{
  flex:1; width:100%; max-width:720px; margin:0 auto;
  padding:clamp(40px,8vw,72px) clamp(20px,5vw,32px) 64px;
}
.eyebrow{
  font-size:10.5px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:14px;
}
h1{
  font-size:clamp(24px,5vw,31px); font-weight:200; letter-spacing:.06em;
  line-height:1.45; margin-bottom:10px;
}
.updated{ font-size:12px; color:var(--ink-dim); margin-bottom:44px; }

h2{
  font-size:15px; font-weight:400; letter-spacing:.04em;
  color:var(--ink); margin:40px 0 12px;
  padding-top:22px; border-top:1px solid var(--hair);
}
.updated + h2{ border-top:none; padding-top:0; margin-top:0; }
h3{ font-size:13.5px; font-weight:400; color:var(--ink); margin:22px 0 7px; }
p{ font-size:14px; color:var(--ink-soft); margin-bottom:13px; }
ul,ol{ margin:0 0 14px 20px; }
li{ font-size:14px; color:var(--ink-soft); margin-bottom:7px; }
strong{ color:var(--ink); font-weight:500; }

/* 強調ブロック（免責など、読み飛ばされたら困るもの） */
.note{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:18px 20px; margin:20px 0;
}
.note p:last-child{ margin-bottom:0; }
.note.warn{ border-color:rgba(201,169,106,.28); }

/* トップページのメニュー */
.menu{ display:flex; flex-direction:column; gap:10px; margin-top:32px; }
.menu a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--card); border:1px solid var(--border); border-radius:13px;
  padding:17px 19px; color:var(--ink); text-decoration:none; transition:.18s;
}
.menu a:hover{ border-color:rgba(201,169,106,.34); }
.menu .t{ display:block; font-size:14.5px; }
.menu .d{ display:block; font-size:12px; color:var(--ink-dim); margin-top:3px; }
.menu .arrow{ color:var(--ink-faint); font-size:15px; flex-shrink:0; }

dl.faq{ margin-top:8px; }
dl.faq dt{ font-size:14px; color:var(--ink); margin:26px 0 6px; }
dl.faq dd{ font-size:14px; color:var(--ink-soft); margin:0; }

/* ── フッター ─────────────────────────── */
.foot{
  border-top:1px solid var(--hair);
  padding:26px clamp(20px,5vw,32px) 40px;
  text-align:center;
}
.foot .links{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.foot .links a{ font-size:12.5px; color:var(--ink-dim); }
.foot .links a:hover{ color:var(--ink-soft); text-decoration:none; }
.foot .copy{ font-size:11px; color:var(--ink-faint); letter-spacing:.04em; }

/* 表示言語の出し分け。
   ★ 既定を「全部隠す」にしてはいけない。
     JS が落ちる・キャッシュで HTML と JS の版が食い違う、といった場合に
     法務文書が丸ごと消える（実際に白紙になった）。
     JS 無しでは日本語が出る状態を素の CSS で保証し、
     JS が走ったときだけ .on による制御へ切り替える。 */
[data-lang]{ display:block; }
[data-lang]:not([data-lang="ja"]){ display:none; }

.js [data-lang]{ display:none; }
.js [data-lang].on{ display:block; }