/* ============================================================
   app.css — TAmJ 地域インテリジェンス
   白背景 / gold #a4863f / Fraunces + Zen Old Mincho + Zen Kaku Gothic
   ============================================================ */
:root{
  --ink:#2b2621;--ink-soft:#5a5147;--ink-faint:#938978;
  --paper:#faf6ec;--paper-warm:#f2ebda;--paper-line:#e7ddc8;
  --gold:#a4863f;--gold-deep:#7d6329;--gold-wash:#f0e7d3;
  --coral:#a8432e;--coral-deep:#8a3620;--coral-wash:#f1e0d7;
  --rule:#ddd2ba;--alert:#a8432e;--pos:#7d6329;--male:#2b2621;--female:#a4863f;
  --pop:#2b2621;--aging:#a8432e;
  --serif-en:'Fraunces',serif;--serif-jp:'Shippori Mincho','Zen Old Mincho',serif;
  --brush:'Yuji Syuku','Shippori Mincho',serif;--sans-jp:'Zen Kaku Gothic New',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans-jp);line-height:1.7;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold-wash)}
.num{font-family:var(--serif-en);font-feature-settings:"tnum"}
.mincho{font-family:var(--serif-jp)}
h1,h2,h3{font-family:var(--brush);font-weight:400;letter-spacing:.04em;line-height:1.45}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}

/* header */
header.site{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:50}
.site .bar{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,4vw,48px)}
.site .brand{font-family:var(--brush);font-weight:400;font-size:1.2rem;letter-spacing:.06em}
.site .brand .en{font-family:var(--serif-en);font-style:italic;font-weight:500;color:var(--gold-deep);font-size:.8rem;display:block;letter-spacing:.06em;margin-top:1px}
.site .authbox{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:.85rem}
.site .authbox .who{color:var(--ink-soft)}
.site .authbox button,.site .authbox a.btn{font-family:var(--sans-jp);font-size:.8rem;padding:7px 16px;border:1px solid var(--gold);color:var(--gold-deep);background:none;cursor:pointer;border-radius:3px;text-decoration:none;transition:.2s}
.site .authbox a.btn.solid{background:var(--gold);color:#fff;border-color:var(--gold)}
.site .authbox button:hover,.site .authbox a.btn:hover{background:var(--gold-wash)}
.site .authbox a.btn.solid:hover{background:var(--gold-deep)}

/* macro ticker */
.ticker{background:var(--ink);color:var(--paper-warm);overflow:hidden}
.ticker .row{display:flex;gap:0;flex-wrap:wrap}
.ticker .t{flex:1 1 auto;padding:12px 22px;border-right:1px solid rgba(255,255,255,.1);white-space:nowrap}
.ticker .t .k{font-size:.64rem;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;font-family:var(--serif-en)}
.ticker .t .v{font-family:var(--serif-en);font-size:1.15rem;font-weight:500;margin-top:2px}
.ticker .t .v small{font-family:var(--serif-jp);font-size:.72rem;color:rgba(250,248,244,.6);margin-left:3px}
.ticker .upd{padding:12px 22px;font-size:.64rem;color:rgba(250,248,244,.5);align-self:center;font-family:var(--serif-en)}

/* hero/intro */
.intro{padding:clamp(30px,5vw,56px) 0 10px}
.intro .eyebrow{font-family:var(--serif-en);font-style:italic;color:var(--gold-deep);font-size:.9rem;margin-bottom:12px}
.intro h1{font-size:clamp(1.5rem,3.6vw,2.4rem);margin-bottom:14px}
.intro p{color:var(--ink-soft);max-width:64ch;font-size:.98rem}
.intro .est-tag{display:inline-block;margin-top:14px;font-size:.72rem;color:var(--gold-deep);border:1px solid var(--gold);border-radius:20px;padding:4px 14px;letter-spacing:.06em}

/* selector */
.selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:26px 0 8px;padding:20px;background:var(--paper-warm);border:1px solid var(--rule);border-radius:10px}
.selector .fld label{display:block;font-size:.7rem;letter-spacing:.1em;color:var(--gold-deep);text-transform:uppercase;font-family:var(--serif-en);margin-bottom:6px}
.selector input,.selector select{width:100%;padding:11px 12px;font-family:var(--sans-jp);font-size:.95rem;border:1px solid var(--rule);border-radius:6px;background:var(--paper);color:var(--ink);cursor:pointer}
.selector input:focus,.selector select:focus{outline:none;border-color:var(--gold)}

/* auth gate overlay */
.gate{position:relative}
.gate.locked .dash{filter:blur(6px);opacity:.5;pointer-events:none;user-select:none}
.gate-card{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:20}
.gate.locked .gate-card{display:flex}
.gate-card .inner{background:var(--paper);border:1px solid var(--gold);border-radius:12px;padding:36px 40px;max-width:440px;text-align:center;box-shadow:0 20px 60px rgba(27,26,23,.12)}
.gate-card h3{font-size:1.3rem;margin-bottom:10px}
.gate-card p{color:var(--ink-soft);font-size:.9rem;margin-bottom:22px;line-height:1.9}
.gate-card .acts{display:flex;gap:12px;justify-content:center}
.gate-card a{font-size:.9rem;padding:11px 26px;border-radius:5px;text-decoration:none;transition:.2s}
.gate-card a.primary{background:var(--gold);color:#fff}
.gate-card a.primary:hover{background:var(--gold-deep)}
.gate-card a.ghost{border:1px solid var(--gold);color:var(--gold-deep)}
.gate-card a.ghost:hover{background:var(--gold-wash)}
.gate-card .free{font-family:var(--serif-en);font-style:italic;color:var(--gold-deep);font-size:.82rem;margin-top:16px}

/* dashboard */
.area-head{display:flex;align-items:baseline;gap:14px;margin:28px 0 6px;border-bottom:2px solid var(--ink);padding-bottom:14px;flex-wrap:wrap}
.area-head h2{font-size:clamp(1.4rem,3vw,2rem)}
.area-head .pref{color:var(--ink-faint);font-size:.9rem}
.area-head .asof{margin-left:auto;font-family:var(--serif-en);font-size:.78rem;color:var(--gold-deep)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:20px 0}
.card{background:var(--paper);padding:22px 20px}
.card .lbl{font-size:.74rem;letter-spacing:.08em;color:var(--gold-deep);text-transform:uppercase;font-family:var(--serif-en);margin-bottom:10px}
.card .big{font-family:var(--serif-en);font-weight:500;font-size:clamp(1.8rem,4vw,2.5rem);color:var(--ink);line-height:1}
.card .big small{font-family:var(--serif-jp);font-size:.85rem;color:var(--ink-soft);margin-left:3px}
.card .sub{font-size:.8rem;color:var(--ink-faint);margin-top:8px;line-height:1.6}
.card.wide{grid-column:1/-1}

/* split bar (male/female) */
.splitbar{display:flex;height:26px;border-radius:4px;overflow:hidden;margin:12px 0 6px}
.splitbar .m{background:var(--male)}
.splitbar .f{background:var(--female)}
.splitbar-legend{display:flex;gap:16px;font-size:.76rem;color:var(--ink-soft)}
.splitbar-legend .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* age 3-band */
.age3{display:flex;height:26px;border-radius:4px;overflow:hidden;margin:12px 0 6px}
.age3 .y{background:var(--gold)}
.age3 .w{background:var(--ink-faint)}
.age3 .e{background:var(--gold-deep)}
.age3-legend{display:flex;gap:14px;font-size:.74rem;color:var(--ink-soft);flex-wrap:wrap}

/* bar list (診療科目) */
.barlist{margin:8px 0}
.barlist .b{display:grid;grid-template-columns:120px 1fr 56px;align-items:center;gap:12px;padding:5px 0}
.barlist .b .nm{font-size:.82rem;color:var(--ink-soft);text-align:right}
.barlist .b .tr{background:var(--paper-warm);height:16px;border-radius:3px;overflow:hidden}
.barlist .b .fl{height:100%;background:var(--gold);border-radius:3px}
.barlist .b .vl{font-family:var(--serif-en);font-size:.82rem;text-align:right}

/* trend chart */
.trend{background:var(--paper-warm);border:1px solid var(--rule);border-radius:10px;padding:24px;margin:20px 0}
.trend h3{font-size:1.05rem;margin-bottom:4px}
.trend .cap{font-size:.76rem;color:var(--ink-faint);margin-bottom:14px}
.trend svg{width:100%;height:auto;display:block}
.trend .lg{display:flex;gap:18px;font-size:.76rem;color:var(--ink-soft);margin-top:10px}
.trend .lg .dot{display:inline-block;width:10px;height:3px;margin-right:6px;vertical-align:middle}

.note{border-left:3px solid var(--gold);background:var(--gold-wash);padding:16px 20px;margin:18px 0;border-radius:0 6px 6px 0;font-size:.88rem;color:var(--ink-soft);line-height:1.85}
.note b{color:var(--ink)}

footer.site{background:var(--ink);color:rgba(250,248,244,.6);padding:40px clamp(16px,4vw,48px);margin-top:40px;font-size:.78rem;line-height:1.8}
footer.site .brand{font-family:var(--serif-jp);color:var(--paper);font-size:1.1rem;margin-bottom:10px}
footer.site .src{font-size:.72rem;color:rgba(250,248,244,.4);margin-top:12px}

@media(max-width:640px){
  .barlist .b{grid-template-columns:92px 1fr 46px;gap:8px}
  .ticker .t{flex:1 1 40%}
  .area-head .asof{margin-left:0;flex-basis:100%}
}

/* shared top nav */
.topnav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.topnav a{font-family:var(--sans-jp);font-size:.86rem;color:var(--ink-soft);text-decoration:none;padding:8px 14px;border-radius:20px;transition:.2s}
.topnav a:hover{background:var(--gold-wash);color:var(--gold-deep)}
.topnav a.on{background:var(--gold);color:#fff}
.topnav a.on:hover{background:var(--gold-deep);color:#fff}
@media(max-width:640px){.topnav a{padding:6px 10px;font-size:.8rem}}

/* data table */
#dtable{margin-top:20px}
.dtbl{width:100%;border-collapse:collapse;font-size:.9rem}
.dtbl th,.dtbl td{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:right}
.dtbl th:first-child,.dtbl td:first-child{text-align:left}
.dtbl th{font-family:var(--sans-jp);font-weight:700;color:var(--gold-deep);background:var(--gold-wash);font-size:.8rem}
.dtbl td.num{font-family:var(--serif-en)}
.dtbl td.pos{color:var(--gold-deep)}
.dtbl td.neg{color:var(--ink-soft)}
.dtbl tr.now td{background:var(--gold-wash);font-weight:700}

/* history / 沿革 */
.history{margin:26px 0}
.history .htitle{font-family:var(--brush);font-size:1.25rem;margin-bottom:6px}
.history .hnote{font-size:.84rem;color:var(--ink-faint);margin-bottom:16px;line-height:1.7}
.history .hnote b{color:var(--gold-deep)}
.hcard{border:1px solid var(--rule);border-radius:12px;padding:18px 20px;margin-bottom:14px;background:var(--paper)}
.hcard .hh{font-family:var(--brush);font-weight:600;font-size:1rem;margin-bottom:8px;color:var(--ink)}
.hcard p{font-size:.92rem;color:var(--ink-soft);line-height:1.85;margin:0}
.hcard ul{margin:0;padding-left:1.1em}
.hcard li{font-size:.9rem;color:var(--ink-soft);line-height:1.8;margin-bottom:4px}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hcard.good{border-left:3px solid var(--gold);border-radius:0 12px 12px 0}
.hcard.good .hh{color:var(--gold-deep)}
.hcard.bad{border-left:3px solid var(--ink-faint);border-radius:0 12px 12px 0}
.hcard.bad .hh{color:var(--ink-soft)}
.hcard.care{border-left:3px solid var(--gold-deep);border-radius:0 12px 12px 0;background:var(--gold-wash)}
@media(max-width:680px){.hgrid{grid-template-columns:1fr}}