/* shikotan — baseline (足場用)。最終デザインは frontend ステップで差し替え */
:root{
  --bg:#0c0d10;
  --bg-elev:#15171c;
  --line:#23262e;
  --ink:#eceef2;
  --ink-dim:#9aa0ad;
  --accent:#e8c15a;        /* 抑制した一点アクセント */
  --accent-ink:#1a1a1a;
  --ok:#5ad08a;
  --ng:#e06464;
  --radius:14px;
  --maxw:1040px;
  --font-disp:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.site-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.brand{font-family:var(--font-disp);font-weight:800;font-size:1.35rem;letter-spacing:.01em}
.brand-mark{color:var(--accent)}
.lang-switch{display:flex;flex-wrap:wrap;gap:.35rem .6rem}
.lang-item{font-size:.82rem;color:var(--ink-dim);padding:.15rem .3rem;border-radius:6px}
.lang-item.is-active{color:var(--accent)}
.lang-item:hover{color:var(--ink)}

.site-main{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:2rem 1.25rem}

.hero{padding:2.5rem 0 1.5rem}
.hero-eyebrow{color:var(--accent);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 .6rem}
.hero-title{font-family:var(--font-disp);font-size:clamp(2rem,6vw,3.4rem);line-height:1.05;margin:0 0 .8rem}
.hero-sub{color:var(--ink-dim);max-width:46ch;margin:0}

.panel{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;margin-top:1.5rem}
.panel-title{font-family:var(--font-disp);font-size:1.05rem;margin:0 0 1rem}
.status{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.status .ok{color:var(--ok)}
.status .ng{color:var(--ng)}
.counts{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.9rem}
.counts td{border-top:1px solid var(--line);padding:.5rem .25rem}
.counts td:last-child{text-align:right;color:var(--accent)}
.hint{color:var(--ink-dim);font-size:.85rem;margin:1.2rem 0 0}

.site-foot{border-top:1px solid var(--line);padding:1.25rem;text-align:center;color:var(--ink-dim);font-size:.8rem}

/* 18禁ゲート */
.gate{min-height:60vh;display:flex;align-items:center;justify-content:center}
.gate-card{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:2.5rem 2rem;max-width:520px;text-align:center}
.gate-eyebrow{color:var(--accent);font-size:.72rem;letter-spacing:.22em;margin:0 0 1rem}
.gate-title{font-family:var(--font-disp);font-size:1.6rem;margin:0 0 1rem}
.gate-lead{color:var(--ink-dim);margin:0 0 1.5rem}
.gate-region{color:var(--ink-dim);font-size:.8rem;margin:0 0 1rem}
.gate-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.7rem 1.4rem;border-radius:999px;font-weight:700;font-size:.95rem;border:1px solid transparent}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{border-color:var(--line);color:var(--ink-dim)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink-dim)}

[dir="rtl"] .site-head{flex-direction:row-reverse}

@media (max-width:560px){
  .site-main{padding:1.25rem}
  .gate-card{padding:1.75rem 1.25rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}