/* Quiet Forensics - shared base for every public site (portal, scan., Auto-DFIR, J-ART).
   ORIGINAL lives in security-biz/qf-common/site/qf-base.css; each project holds a synced copy
   under site/shared/. Edit the original and run `python qf_sync.py sync` - a test in each
   project fails if its copy is edited in place.
   Contents: design tokens, JA/EN switching, base type, header (nav), buttons, footer, phone menu.
   Page layouts (hero, pricing, report views ...) stay in each project's own stylesheet. */
:root{
  --ground:#FFFFFF; --alt:#F3F8FD; --surface:#FFFFFF; --ink:#0B2236; --body-ink:#2F4254; --muted:#4F6275; --faint:#6B7C8D; --line:#D7E6F4; --line-2:#C3D6E8;
  --accent:#0077B6; --accent-hover:#005F92; --accent-ink:#FFFFFF; --accent-soft:#E6F4FD; --accent-soft-ink:#005F92;
  --fact:#15803D; --fact-soft:#E7F7EC; --estimate:#B45309; --estimate-soft:#FFF8EB; --estimate-line:#F2C879; --danger:#B91C1C; --danger-soft:#FDECEC;
  --navy:#082A41; --navy-2:#0B3A5A; --cyan:#2BC1FF; --cyan-hover:#6FD6FF; --on-navy:#FFFFFF; --on-navy-muted:#C5D8E8; --on-navy-faint:#9FB6C9;
  --shadow:0 16px 48px -8px rgba(11,18,32,.10); --shadow-sm:0 1px 2px rgba(11,18,32,.06);
  --sans:"Inter","BIZ UDPGothic","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}

/* ---- language switching: every element carrying lang="ja" / lang="en" is shown only in that language ---- */
html:not([data-lang="en"]) [lang="en"]{display:none !important}
html[data-lang="en"] [lang="ja"]{display:none !important}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}
html[data-lang="ja"] body{letter-spacing:.02em}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
h1,h2,h3{margin:0;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(2rem,3.4vw,3rem);font-weight:700;line-height:1.28}
h2{font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:700}
h3{font-size:1.125rem;font-weight:700}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:.8125rem;font-weight:600;color:var(--accent);letter-spacing:.02em;margin:0 0 10px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}

/* ---- header: navy band ---- */
.nav{position:sticky;top:0;z-index:20;background:var(--navy);border-bottom:1px solid var(--navy)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em}
.brand .logo{flex:none;display:block}
.nav .brand,.nav .brand:hover{color:#fff}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.nav ul a{color:#D6E6F3;font-weight:500;font-size:.9rem}
.nav ul a:hover{color:#fff}
.nav-right{display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;padding:3px;border-radius:8px;background:var(--alt);border:1px solid var(--line)}
.lang button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.8125rem;font-weight:600;letter-spacing:.06em;padding:5px 11px;border-radius:6px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.nav .lang{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.nav .lang button{color:var(--on-navy-muted)}
.nav .lang button[aria-pressed="true"]{background:#fff;color:var(--navy)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:8px;font-weight:600;font-size:.9375rem;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover);color:var(--accent-ink)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-sm{padding:9px 16px;font-size:.875rem}
.nav .btn-primary{background:var(--cyan);color:var(--navy)}
.nav .btn-primary:hover{background:var(--cyan-hover);color:var(--navy)}

/* ---- footer ---- */
footer{background:#061F31;color:#A9B3C2;padding:40px 0;font-size:.8125rem}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer a{color:#A9B3C2}
footer a:hover{color:#fff}
footer .disclaimer-wrap{display:block;margin-bottom:28px}
footer .disclaimer{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:16px 18px;color:#A9B3C2;font-size:.875rem;line-height:1.7}
footer .disclaimer strong{display:block;color:#fff;margin-bottom:6px;font-size:.8125rem}
footer .brand{color:#fff;font-size:.9375rem}
footer .brand .logo{width:22px;height:22px}

/* ---- phone menu: a toggle below 960 px so phones reach every link; the header never outgrows the screen ---- */
.nav-toggle{display:none;appearance:none;border:1px solid rgba(255,255,255,.28);background:transparent;border-radius:8px;width:42px;height:38px;align-items:center;justify-content:center;cursor:pointer;color:#fff;padding:0}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:2px;background:currentColor;border-radius:1px;position:relative;content:""}
.nav-toggle span::before{position:absolute;top:-6px}
.nav-toggle span::after{position:absolute;top:6px}
@media (max-width:960px){
  .nav ul{display:none}
  .nav .wrap{position:relative}
  .nav-toggle{display:inline-flex}
  .nav.open ul{display:flex;flex-direction:column;gap:2px;position:absolute;top:64px;left:0;right:0;background:var(--navy);padding:8px 24px 16px;border-bottom:1px solid rgba(255,255,255,.12);z-index:30}
  .nav.open ul a{display:block;padding:10px 0;font-size:1rem}
}
@media (max-width:640px){
  .nav .wrap{gap:10px}
  .nav .btn-primary{display:none}
  .wrap{padding:0 16px}
}