/* VOLT WAVE — 開発ポートフォリオ (public) | 銀座 institutional aesthetic, mother-site tokens */
:root{
  --bg:#fafaf7; --surface:#ffffff; --surface-2:#f5f3ee;
  --ink:#0f1e3d; --ink-2:#4a5468; --muted:#6b7280;
  --line:#e5e2d9; --line-2:#eeece5;
  --accent:#b89968; --accent-dark:#8f7244;
  --st-done:#3d6b5c; --st-progress:#b89968; --st-hold:#b0654f; --st-future:#c3c9d4;
  --serif:"Noto Serif JP","Noto Serif SC",Georgia,serif;
  --sans:Inter,"Noto Sans JP","Noto Sans SC",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif); font-weight:600; color:var(--ink); line-height:1.35; margin:0}
a{color:var(--ink); text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* header */
.site-head{border-bottom:1px solid var(--line); background:rgba(250,250,247,.9); backdrop-filter:blur(8px); position:sticky; top:0; z-index:10}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; letter-spacing:.14em; font-size:15px}
.brand img{width:26px; height:26px}
.nav{display:flex; align-items:center; gap:22px; font-size:13.5px}
.nav a{color:var(--ink-2)} .nav a:hover{color:var(--ink)}
.lang{display:flex; gap:8px; font-size:12.5px}
.lang a{color:var(--muted); padding:2px 6px; border-radius:4px}
.lang a.on{color:var(--ink); background:var(--surface-2)}

/* hero */
.hero{padding:72px 0 40px}
.hero .eyebrow{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:18px}
.hero h1{font-size:34px; letter-spacing:.01em}
.hero .lede{color:var(--ink-2); font-size:16.5px; max-width:640px; margin-top:18px}

/* stat row */
.stats{display:flex; flex-wrap:wrap; gap:14px; margin:36px 0 8px}
.stat{flex:1 1 160px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px 22px}
.stat .num{font-family:var(--serif); font-size:30px; font-weight:600; color:var(--ink)}
.stat .num small{font-size:15px; color:var(--ink-2); font-weight:500; margin-left:3px}
.stat .lab{font-size:12.5px; color:var(--muted); margin-top:4px; letter-spacing:.03em}

/* section */
.section{padding:44px 0}
.section-h{display:flex; align-items:baseline; gap:14px; margin-bottom:26px}
.section-h h2{font-size:22px}
.section-h .rule{flex:1; height:1px; background:var(--line)}

/* map */
.map-panel{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px; display:grid; grid-template-columns:1.15fr .85fr; gap:24px}
.map-svg{width:100%; height:auto; display:block}
.pref-tile{fill:var(--surface-2); stroke:var(--line); stroke-width:1.5}
.pref-tile.active{fill:#f3ede2; stroke:var(--accent)}
.pref-label{font-family:var(--sans); font-size:13px; fill:var(--ink-2); font-weight:500}
.dot{cursor:pointer; transition:r .15s}
.dot-core{stroke:var(--surface); stroke-width:2}
.dot:hover .dot-halo{opacity:.5}
.dot-halo{opacity:0; transition:opacity .15s}
.dot-lab{font-size:11px; fill:var(--ink-2); font-family:var(--sans)}
.map-legend{display:flex; flex-direction:column; gap:14px; justify-content:center}
.map-legend .li{display:flex; align-items:flex-start; gap:11px; font-size:13.5px; color:var(--ink-2)}
.map-legend .sw{width:12px; height:12px; border-radius:50%; margin-top:5px; flex:none}
.map-note{font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.5}

/* cards */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; transition:border-color .15s, transform .15s}
.card:hover{border-color:var(--accent); transform:translateY(-2px)}
.card .loc{font-family:var(--serif); font-size:18px; font-weight:600}
.card .loc .pref{color:var(--muted); font-size:13px; font-weight:500; display:block; margin-bottom:2px}
.card .spec{margin:16px 0 14px; display:flex; flex-direction:column; gap:7px}
.card .kv{display:flex; justify-content:space-between; font-size:13px}
.card .kv .k{color:var(--muted)} .card .kv .v{color:var(--ink); font-family:var(--mono); font-size:12.5px}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:20px; letter-spacing:.02em}
.badge .bd{width:7px; height:7px; border-radius:50%}
.badge.done{background:rgba(61,107,92,.1); color:var(--st-done)}
.badge.done .bd{background:var(--st-done)}
.badge.progress{background:rgba(184,153,104,.14); color:var(--accent-dark)}
.badge.progress .bd{background:var(--st-progress)}

/* principle note */
.note{background:var(--surface-2); border-left:3px solid var(--accent); border-radius:0 10px 10px 0; padding:22px 26px; color:var(--ink-2); font-size:14.5px; line-height:1.75}
.note strong{color:var(--ink); font-weight:600}

/* cta */
.cta{text-align:center; padding:56px 0}
.cta h2{font-size:24px; margin-bottom:14px}
.cta p{color:var(--ink-2); margin:0 auto 26px; max-width:520px}
.btn{display:inline-block; background:var(--ink); color:var(--bg); padding:13px 30px; border-radius:8px; font-size:14px; font-weight:600; letter-spacing:.03em; transition:background .15s}
.btn:hover{background:#1a2d52}

/* footer */
.site-foot{border-top:1px solid var(--line); margin-top:40px; padding:36px 0; color:var(--muted); font-size:12.5px}
.site-foot .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px}
.site-foot .co{color:var(--ink-2)}

@media(max-width:760px){
  .map-panel{grid-template-columns:1fr}
  .hero h1{font-size:27px}
  .hero{padding:48px 0 28px}
  .nav .hide-sm{display:none}
}