@import url('assets/colors_and_type.css');

/* =============================================================
   LLMO/SEO OVERDRIVE AI — Interactive page styles
   Shwat Design System 準拠 (web landing scale)
   ============================================================= */

#ov *, #ov *::before, #ov *::after { box-sizing: border-box; }

#ov { scroll-behavior: smooth; }

#ov {
  margin: 0;
  font-family: var(--font-jp);
  color: var(--text-primary);
  background: var(--base-white);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

#ov-root { isolation: isolate; }

/* ---- web type scale (overrides slide-oriented pt scale) ---- */
:root {
  --w-hero:    clamp(38px, 5.6vw, 76px);
  --w-display: clamp(30px, 4.4vw, 56px);
  --w-title:   clamp(26px, 3.4vw, 42px);
  --w-h3:      clamp(19px, 1.9vw, 24px);
  --w-body:    clamp(15px, 1.15vw, 18px);
  --w-small:   clamp(13px, 0.95vw, 15px);
  --w-stat:    clamp(54px, 8.5vw, 116px);
  --content:   1180px;
  --gut:       clamp(20px, 5vw, 88px);
}

#ov a { color: inherit; }

/* =========================== Layout =========================== */
#ov .section {
  position: relative;
  padding: clamp(64px, 9vh, 132px) var(--gut);
}
#ov .wrap { max-width: var(--content); margin: 0 auto; }
#ov .wrap-narrow { max-width: 880px; margin: 0 auto; }

/* section header w/ vertical bar + en-label */
#ov .sec-head { margin-bottom: clamp(34px, 5vh, 64px); }
#ov .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-en);
  font-weight: var(--weight-heavy);
  font-size: var(--w-small);
  letter-spacing: 0.13em;
  color: var(--brand-primary);
  margin-bottom: 18px;
}
#ov .eyebrow::before {
  content: "";
  width: 30px; height: 5px;
  background: var(--brand-primary);
  display: inline-block;
}
#ov .eyebrow.on-dark { color: #fff; }
#ov .eyebrow.on-dark::before { background: #fff; }

#ov .sec-title {
  font-family: var(--font-jp);
  font-weight: var(--weight-heavy);
  font-size: var(--w-title);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  color: var(--text-primary);
  margin: 0 0 18px;
  text-wrap: pretty;
}
#ov .sec-title .accent { color: var(--brand-primary); }
#ov .sec-lead {
  font-size: var(--w-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  max-width: 760px;
  margin: 0;
}
#ov .sec-lead.muted { color: var(--text-muted); }

/* footnote */
#ov .footnote {
  font-family: var(--font-jp);
  font-size: var(--w-small);
  color: var(--text-muted);
  line-height: 1.6;
}
#ov .src-tag {
  font-family: var(--font-jp);
  font-size: clamp(11px, 0.85vw, 13px);
  color: var(--text-muted);
}

/* read-more link → article anchor */
#ov .read-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--w-small);
  color: var(--brand-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, gap .15s ease;
  width: fit-content;
}
#ov .read-more::after { content: "→"; transition: transform .15s ease; }
#ov .read-more:hover { border-color: var(--brand-primary); }
#ov .read-more:hover::after { transform: translateX(3px); }

/* =========================== Buttons =========================== */
#ov .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--w-body);
  padding: 16px 32px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
  line-height: 1.3;
}
#ov .btn-primary { background: var(--accent-red); color: #fff; }
#ov .btn-primary:hover { opacity: 0.88; }
#ov .btn-teal { background: var(--brand-primary); color: #fff; }
#ov .btn-teal:hover { opacity: 0.88; }
#ov .btn-ghost { background: transparent; color: var(--brand-primary); border-color: var(--brand-primary); }
#ov .btn-ghost:hover { background: var(--surface-teal-pale); }
#ov .btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
#ov .btn-ghost-light:hover { background: rgba(255,255,255,.12); }

/* =========================== Reveal anim =========================== */
#ov .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
#ov .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #ov .reveal { opacity: 1; transform: none; transition: none; }
  #ov { scroll-behavior: auto; }
}

/* =========================== Header =========================== */
#ov .site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gut);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
#ov .site-header .logo { display: flex; align-items: center; height: 40px; }
#ov .site-header .logo img { height: 40px; width: auto; }
#ov .site-header nav { display: flex; align-items: center; gap: clamp(8px,1.4vw,26px); }
#ov .site-header nav .navlink {
  font-size: 14px; font-weight: var(--weight-medium); color: var(--text-primary);
  text-decoration: none; white-space: nowrap;
}
#ov .site-header nav .navlink:hover { color: var(--brand-primary); }
#ov .site-header .btn { padding: 10px 20px; font-size: 14px; }
@media (max-width: 860px) { #ov .site-header nav .navlink { display: none; } }

/* footer */
#ov .site-footer {
  background: var(--brand-primary-dark);
  color: #fff;
  padding: clamp(48px,6vh,72px) var(--gut) 0;
}
#ov .site-footer .foot-bar { height: 14px; background: var(--brand-primary); margin: 0 calc(-1 * var(--gut)); }

/* shared card surface */
#ov .surface { background: var(--surface-teal-pale); border-radius: var(--radius-md); }