/* fudousan-news.com — 正典: docs/DESIGN.md v1（この CSS は正典の実装であって、正典ではない） */
:root{
  color-scheme: light;
  --paper:#FFFDF8; --paper-warm:#F7F1E7; --paper-edge:#EDE4D6;
  --ink:#2B2622; --ink-mid:#6B625A; --ink-soft:#8A8078;
  --sun:#E8722C; --sun-deep:#A4501A; --sun-soft:#FBE3CE;
  --leaf:#2F8F5B; --leaf-deep:#1F6B43; --leaf-soft:#DCEFE2;
  --sky:#3E7FA8; --sky-deep:#2B6183;
  --alert:#B8452F; --stage:#1B1613; --stage-bar:#221C18;
  --shelf:#8A6D3B;
  --r-card:18px; --r-chip:999px; --r-window:14px;
  --w-page:1120px; --w-read:720px;
  --font-display:"Zen Maru Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  --font-body:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans",sans-serif;
  --font-num:"Barlow",ui-monospace,SFMono-Regular,monospace;
  --shadow:0 2px 10px rgba(120,80,40,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
  font-size:16px;line-height:1.9;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--sky);text-decoration:none}
a:hover{color:var(--sky-deep);text-decoration:underline}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;line-height:1.4;margin:0}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--w-page);margin:0 auto;padding:0 24px}
.warm{background:var(--paper-warm)}
.sec{padding:72px 0}
@media (max-width:720px){ .sec{padding:48px 0} }
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.sec-head h2{font-size:26px}
.sec-head .note{font-size:13px;color:var(--ink-mid)}
.lead{font-size:16px;line-height:1.95;color:#4A423B;max-width:640px}
.small{font-size:13px;color:var(--ink-mid)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--paper);padding:8px 14px;border-radius:8px;z-index:99}

/* ヘッダー */
.site-head{border-bottom:1px solid var(--paper-edge);background:var(--paper);position:relative;z-index:5}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;
  max-width:var(--w-page);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand b{font-family:var(--font-display);font-size:19px;font-weight:700}
.nav{display:flex;gap:22px;font-size:14px;color:var(--ink-mid);flex-wrap:wrap}
.nav a{color:var(--ink-mid)}
.nav a[aria-current="page"]{color:var(--sun-deep);font-weight:700}
.roomline{height:4px}

/* ヒーロー */
.hero{position:relative;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,253,248,.97) 0%,rgba(255,253,248,.95) 48%,rgba(255,253,248,.62) 68%,rgba(255,253,248,0) 94%)}
.hero .inner{position:relative;max-width:var(--w-page);margin:0 auto;padding:60px 24px 150px}
.hero h1{font-size:clamp(30px,5.2vw,52px);line-height:1.25;margin:14px 0}
.hero .lead{max-width:560px}
.tagrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-mid)}

/* チップ */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-chip);padding:5px 11px;
  font-size:12px;font-weight:700;background:var(--paper-warm);color:var(--ink-mid);white-space:nowrap}
.chip.fun{background:var(--sun-soft);color:var(--sun-deep)}
.chip.new{background:var(--leaf-soft);color:var(--leaf-deep)}
.chip.warnc{background:#F7E4E0;color:var(--alert)}
.chip .dot{width:8px;height:8px;border-radius:999px;background:var(--leaf);display:inline-block}

/* 窓（プレーヤー） */
.window{border-radius:var(--r-window);overflow:hidden;background:var(--stage);box-shadow:var(--shadow)}
.window .glass{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 40%,#2A231E 0%,#171310 100%);border:0;width:100%;padding:0;cursor:pointer}
.window .glass:focus-visible{outline:3px solid var(--sun);outline-offset:-3px}
.window iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.open-btn{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--paper)}
.open-btn .disc{width:72px;height:72px;border-radius:999px;background:var(--sun);display:flex;align-items:center;justify-content:center}
.open-btn span{font-family:var(--font-display);font-size:15px}
.window .sash{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;background:var(--stage-bar);flex-wrap:wrap}
.window .sash .l{display:flex;align-items:center;gap:12px;min-width:0}
.window .sash .n{color:var(--sun);font-size:20px;font-weight:700}
.window .sash .t{color:var(--paper);font-family:var(--font-display);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.window .sash a{color:#C9C0B4;font-size:12px}
.tally{display:inline-flex;align-items:center;gap:7px;color:#9FD8B7;font-size:12px}

/* カード */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){ .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .g3,.g4{grid-template-columns:1fr} }
.card{background:var(--paper);border:1px solid var(--paper-edge);border-radius:var(--r-card);
  padding:20px;display:flex;flex-direction:column;gap:9px}
a.card{color:inherit}
a.card:hover{background:#FFF8EE;text-decoration:none}
.card h3{font-size:18px}
.card .who{font-size:13.5px;color:var(--ink-mid);line-height:1.8}
.room-num{font-family:var(--font-num);font-size:26px;font-weight:700}
.ch-card{background:var(--paper);border:1px solid var(--paper-edge);border-radius:var(--r-card);
  padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.ch-card .head{display:flex;align-items:baseline;gap:10px}
.ch-card .head .n{font-family:var(--font-num);font-size:16px;font-weight:700}
.ch-card .head .name{font-size:15px;font-weight:500;line-height:1.5}
.ch-card .why{font-size:13px;color:var(--ink-mid);line-height:1.8}
.ch-card .meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-soft)}
.ch-card.dormant{background:#FAF7F1;border-style:dashed}
.ch-card button.play{align-self:flex-start;border:1px solid var(--paper-edge);background:var(--paper-warm);
  color:var(--ink);border-radius:var(--r-chip);padding:7px 15px;font:inherit;font-size:13px;cursor:pointer}
.ch-card button.play:hover{background:var(--sun-soft);color:var(--sun-deep)}

/* リモコン */
.remote{background:var(--paper);border:1px solid var(--paper-edge);border-radius:var(--r-card);padding:20px;max-width:380px}
.remote .disp{background:var(--paper-warm);border-radius:12px;padding:12px 16px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.remote .disp .d{font-family:var(--font-num);font-size:28px;font-weight:700;letter-spacing:.14em}
.remote .disp .hit{font-size:12px;color:var(--ink-mid);text-align:right;line-height:1.5}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.keys button{height:56px;border:1px solid var(--paper-edge);background:var(--paper);border-radius:12px;
  font-family:var(--font-num);font-size:20px;font-weight:600;color:var(--ink);cursor:pointer}
.keys button:hover{background:#FFF8EE}
.keys button:active{transform:translateY(2px)}
.keys button.go{background:var(--sun);color:var(--paper);border-color:var(--sun);font-family:var(--font-display);font-size:15px}
.keys button.clr{font-family:var(--font-display);font-size:14px;color:var(--ink-mid)}

/* 表（番組表） */
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{text-align:left;font-size:12.5px;color:var(--ink-mid);font-weight:500;
  border-bottom:1px solid var(--paper-edge);padding:10px 8px}
.table td{border-bottom:1px solid #F2EADC;padding:13px 8px;vertical-align:top}
.table td.n{font-family:var(--font-num);font-weight:700;width:72px}
.table td.why{color:var(--ink-mid);font-size:12.5px}
.table tr.dormant td{color:var(--ink-soft)}
.tablewrap{overflow-x:auto}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.filters button{border:1px solid var(--paper-edge);background:var(--paper);border-radius:var(--r-chip);
  padding:8px 16px;font:inherit;font-size:13px;color:var(--ink-mid);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--paper-warm);color:var(--ink);font-weight:700}

/* 本棚 */
.shelf{background:var(--paper);border:1px solid var(--paper-edge);border-radius:var(--r-card);padding:22px;
  display:flex;flex-direction:column;gap:14px}
.shelf h3{display:flex;align-items:center;gap:10px;font-size:18px}
.shelf h3::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--shelf)}
.site-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-top:1px solid #F2EADC}
.site-row:first-of-type{border-top:0}
.site-row .nm{font-size:15px}
.site-row .op{font-size:12px;color:var(--ink-soft)}
.site-row .wy{font-size:12.5px;color:var(--ink-mid);line-height:1.75}

/* 読みもの */
.read{max-width:var(--w-read);margin:0 auto;padding:48px 24px 72px}
.read h1{font-size:clamp(24px,4vw,34px);line-height:1.45;margin-bottom:14px}
.read p{margin:0 0 22px}
.read h2{font-size:20px;margin:38px 0 14px}
.read .meta{font-size:13px;color:var(--ink-mid);margin-bottom:30px}
.read ul{padding-left:1.2em;margin:0 0 22px}
.read li{margin-bottom:8px}
.readbox{border:1px solid var(--paper-edge);border-radius:var(--r-card);padding:20px;background:var(--paper-warm);margin:28px 0}

/* フッター */
.site-foot{background:var(--ink);color:var(--paper-warm);margin-top:0}
.site-foot .inner{max-width:var(--w-page);margin:0 auto;padding:34px 24px 44px;
  display:flex;gap:36px;justify-content:space-between;flex-wrap:wrap}
.site-foot p{font-size:13px;line-height:1.9;color:#C9C0B4;max-width:560px;margin:8px 0 0}
.site-foot a{color:#C9C0B4}
.site-foot .links{display:flex;gap:26px;font-size:13px;flex-wrap:wrap}

@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

/* 2カラム（スマホでは必ず縦に積む） */
.split{display:grid;gap:32px;align-items:start}
.split.wide{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.split.half{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split.room{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.split.remote-row{grid-template-columns:minmax(0,1fr) minmax(0,380px);align-items:center}
@media (max-width:860px){ .split.wide,.split.half,.split.room,.split.remote-row{grid-template-columns:1fr} }

/* ヘッダー: 銘板は折り返さない */
.brand b{white-space:nowrap}
@media (max-width:720px){
  .site-head .bar{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 16px}
  .nav{gap:16px;font-size:13px}
}
/* ヒーロー: 文字が乗る帯は必ず淡いまま */
@media (max-width:720px){
  .hero .inner{padding:36px 16px 90px}
  .hero .veil{background:linear-gradient(180deg,rgba(255,253,248,.96) 0%,rgba(255,253,248,.86) 52%,rgba(255,253,248,.15) 90%)}
}
.wrap{padding-left:24px;padding-right:24px}
@media (max-width:720px){ .wrap{padding-left:16px;padding-right:16px} }