/* 公開ページ（/ , /privacy , /terms）の見た目。
   この3ページは認証の外側に置き、YouTube のコンプライアンス監査の証拠資料を兼ねる。
   アプリ本体のバンドルを読み込まなくても成立させること（監査で見られるページを
   JS の失敗に巻き込まないため）。 */

:root {
  color-scheme: light dark;
  --bg:#eef0f3; --surface:#ffffff; --sunken:#f6f7f9;
  --ink:#15181f; --muted:#49525f; --faint:#7b8492;
  --line:#d2d7df; --line-soft:#e4e7ec;
  --accent:#3b32a0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#13151c; --surface:#1b1e27; --sunken:#181b23;
    --ink:#e7e9f0; --muted:#a8b0be; --faint:#7e8798;
    --line:#2e3341; --line-soft:#262b37;
    --accent:#948cf5;
  }
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
  font-size:16px; line-height:1.9; -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-underline-offset:2px; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

header, footer { background:var(--surface); border-color:var(--line); }
header {
  border-bottom:1px solid var(--line); padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand .mark {
  width:26px; height:26px; border-radius:7px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.brand .name { font-weight:900; font-size:16px; letter-spacing:-.005em; }
nav { display:flex; gap:22px; flex-wrap:wrap; }
nav a { font-size:14px; text-decoration:none; }
nav a[aria-current="page"] { font-weight:700; }

main { max-width:720px; margin:0 auto; padding:52px 24px 72px; display:flex; flex-direction:column; gap:38px; }
h1 { margin:0; font-weight:900; font-size:clamp(1.8rem,5vw,2.35rem); line-height:1.35; letter-spacing:-.015em; text-wrap:balance; }
h2 { margin:0; font-weight:900; font-size:1.15rem; line-height:1.5; letter-spacing:-.01em;
     border-top:2px solid var(--ink); padding-top:14px; }
p { margin:0; }
.stack { display:flex; flex-direction:column; gap:14px; }
.lede { font-size:1rem; line-height:2; color:var(--muted); max-width:40rem; }
.stamp { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:var(--faint); }
.muted { color:var(--muted); }
strong { font-weight:700; }

.cards { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:20px 18px; display:flex; flex-direction:column; gap:8px;
}
.card .k { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px;
  font-weight:700; letter-spacing:.13em; color:var(--muted); }
.card .t { font-size:14.5px; font-weight:700; line-height:1.5; }
.card .d { font-size:13px; line-height:1.85; color:var(--muted); }

/* YouTube API Services の開示。監査で最初に見られる箇所 */
.disclose {
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:26px 26px 24px; display:flex; flex-direction:column; gap:16px;
}
.disclose .head { display:flex; align-items:center; gap:12px; }
.disclose .head span { font-size:15px; font-weight:700; line-height:1.5; }
.disclose p { font-size:13.5px; line-height:2; color:var(--muted); }
.disclose .sep { border-top:1px solid var(--line-soft); padding-top:15px; }

.rows { display:flex; flex-direction:column; border-top:1px solid var(--line-soft); }
.rows > div {
  display:grid; grid-template-columns:190px 1fr; gap:20px;
  padding:12px 0; border-bottom:1px solid var(--line-soft); align-items:start;
}
.rows .k { font-size:13.5px; font-weight:700; }
.rows .v { font-size:13.5px; line-height:1.9; color:var(--muted); }
@media (max-width:560px) { .rows > div { grid-template-columns:1fr; gap:3px; } }

.list { display:flex; flex-direction:column; gap:10px; }
.list > div { display:grid; grid-template-columns:22px 1fr; gap:11px; align-items:start; }
.list .n { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  font-weight:700; color:var(--accent); line-height:1.95; }
.list .t { font-size:14px; line-height:1.95; color:var(--muted); }

.panel { background:var(--sunken); border-radius:8px; padding:20px 22px;
  display:flex; flex-direction:column; gap:14px; }

footer {
  border-top:1px solid var(--line); padding:26px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
footer .links { display:flex; gap:22px; flex-wrap:wrap; }
footer a { font-size:12.5px; text-decoration:none; }
footer .c { font-size:12.5px; color:var(--muted); }