/* Norolu Frameworks — ランディング設計トークン（生成物：単一源＝scripts/landing-theme.mjs）。
   手で編集しない。直す時は scripts/landing-theme.mjs を直して `npm run gen:landing`。 */

.lp,
.lp-body {
  /* 製図台（地）とトレーシングペーパー（面） */
  --lp-table: #eef1f7;
  --lp-sheet: #ffffff;
  --lp-sheet-glass: rgba(255, 255, 255, 0.82);
  --lp-ink: #0f1723;
  --lp-ink-2: #4a5870;
  --lp-rule: #c9d3e2;
  --lp-grid: rgba(15, 23, 35, 0.055);
  /* アクセント＝アプリのブルーを1段濃くした同系色（塗り・文字を1トークンで兼ねる） */
  --lp-accent: #2149b4;
  --lp-on-accent: #ffffff;
  /* 枠ごとの色＝アプリの意味色と同系（3C=青／SWOT=緑／MECE=橙／OKR=赤） */
  --lp-fw-3c: #2149b4;
  --lp-fw-swot: #146442;
  --lp-fw-mece: #7d451a;
  --lp-fw-okr: #a62b22;

  --lp-shadow-1: 0 1px 2px rgba(15, 23, 35, 0.06), 0 8px 24px rgba(15, 23, 35, 0.07);
  --lp-shadow-2: 0 2px 6px rgba(15, 23, 35, 0.08), 0 22px 60px rgba(15, 23, 35, 0.16);

  --lp-w: 1100px;
  --lp-prose: 68ch;
  --lp-r-lg: 14px;
  --lp-r-md: 10px;
  --lp-r-sm: 6px;
  --lp-sec: clamp(52px, 7vw, 92px);
  /* 枠が1枚ごとに持ち上がる量／その総量ぶんヒーローに確保する余白 */
  --lp-lift: clamp(30px, 2.8vw, 36px);
  --lp-lift-room: calc(var(--lp-lift) * 3.7);

  --lp-sans: system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP',
    'Noto Sans KR', 'Noto Sans SC', Roboto, Helvetica, Arial, sans-serif;
  --lp-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  .lp,
  .lp-body {
    --lp-table: #0d131c;
    --lp-sheet: #18202b;
    --lp-sheet-glass: rgba(30, 40, 54, 0.74);
    --lp-ink: #eef2f8;
    --lp-ink-2: #a7b4c7;
    --lp-rule: #2f3b4c;
    --lp-grid: rgba(200, 218, 242, 0.05);
    --lp-accent: #7aa0ff;
    --lp-on-accent: #0f141c;
    --lp-fw-3c: #7aa0ff;
    --lp-fw-swot: #5fcfa0;
    --lp-fw-mece: #e0a36a;
    --lp-fw-okr: #ff8a80;
    --lp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
    --lp-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.55), 0 22px 60px rgba(0, 0, 0, 0.55);
  }
}

.lp-body {
  margin: 0;
  background: var(--lp-table);
}

.lp {
  box-sizing: border-box;
  min-height: 100%;
  background: var(--lp-table);
  color: var(--lp-ink);
  font-family: var(--lp-sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
.lp *,
.lp *::before,
.lp *::after {
  box-sizing: border-box;
}

/* 和文の折れ方（DESIGN_STANDARD §2）。見出しは balance・本文は pretty。 */
.lp h1,
.lp h2,
.lp h3 {
  text-wrap: balance;
  word-break: auto-phrase;
  line-break: strict;
}
.lp p,
.lp li {
  text-wrap: pretty;
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: break-word;
}

.lp a {
  color: var(--lp-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.lp :focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 3px;
  border-radius: var(--lp-r-sm);
}

.lp-wrap {
  width: 100%;
  max-width: var(--lp-w);
  margin: 0 auto;
  padding: 0 20px;
}
.lp-prose {
  max-width: var(--lp-prose);
}

/* ---------- ヒーロー ---------- */

.lp-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(24px, 3.4vw, 44px) 0 0;
}
/* 製図台の方眼。★mask は「背景の層」だけに掛ける＝要素本体に掛けると中身（スクショ・タブ）まで
   一緒に薄まる（実測で踏んだ）。非対応環境では方眼が下まで出るだけで情報は変わらない。 */
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(var(--lp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--lp-grid) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: center -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 82%);
}

.lp-rail {
  margin: 0 0 14px;
  font-family: var(--lp-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--lp-ink-2);
}
.lp-arrow {
  color: var(--lp-accent);
}

.lp-title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(29px, 4.5vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.lp-lead {
  margin: 20px 0 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--lp-ink-2);
}

.lp-actions {
  margin: 28px 0 0;
}
/* ★セレクタの強さに注意＝「.lp a」（クラス1＋要素1）に負けない形で書く。
   「.lp-cta」単独だと文字色が「.lp a」の色に上書きされ、塗りと文字が同色になって消える（実測で踏んだ）。 */
.lp .lp-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 26px;
  border-radius: var(--lp-r-md);
  background: var(--lp-accent);
  color: var(--lp-on-accent);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--lp-shadow-1);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.lp .lp-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--lp-shadow-2);
}
.lp .lp-cta:active {
  transform: translateY(0);
}
/* ★CTA 内の矢印は減光しない（独立監査🟡1＝dark で 4.38 まで落ちていた）。
   基底 .lp-arrow の opacity を打ち消して、塗りの上の文字色そのままにする。 */
.lp .lp-cta .lp-arrow {
  color: currentColor;
  opacity: 1;
}

/* 副CTA＝枠線のみ（1画面に primary 塗りは1つ・DESIGN_STANDARD §10-2） */
.lp .lp-cta-2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin-left: 10px;
  padding: 12px 22px;
  border: 1px solid var(--lp-rule);
  border-radius: var(--lp-r-md);
  background: var(--lp-sheet);
  color: var(--lp-ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease;
}
.lp .lp-cta-2:hover {
  border-color: var(--lp-accent);
  transform: translateY(-1px);
}
.lp .lp-cta-2 .lp-arrow {
  color: var(--lp-accent);
  opacity: 1;
}
@media (max-width: 520px) {
  .lp .lp-cta-2 {
    margin: 12px 0 0;
  }
}

/* ---------- 署名要素：重なる枠 ---------- */

.lp-stack {
  position: relative;
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding-top: var(--lp-lift-room);
}
.lp-sheets {
  position: absolute;
  top: var(--lp-lift-room);
  left: 0;
  right: 0;
  aspect-ratio: 1400 / 724;
  z-index: 0;
  perspective: 1500px;
  perspective-origin: 50% 38%;
  pointer-events: none;
}
.lp-sheet {
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid var(--lp-rule);
  /* 上辺だけ、その枠自身の色。タブ・段カードの上罫と同じ色＝1つの色の言語で通す。 */
  border-top: 2px solid var(--lp-fw, var(--lp-rule));
  border-radius: var(--lp-r-lg);
  background: var(--lp-sheet-glass);
  box-shadow: var(--lp-shadow-1);
  transform: translate3d(var(--dx), var(--dy), var(--dz));
  animation: lp-settle 0.78s cubic-bezier(0.2, 0.72, 0.24, 1) both;
}
/* 奥ほど先に着地する＝3C から OKR へ、話の順に手前へ積み上がる（総尺 0.30s + 0.78s = 1.08s・1回きり）。 */
.lp-sheet-4 { --dx: -6%;   --dy: calc(var(--lp-lift) * -4); --dz: -240px; --lp-fw: var(--lp-fw-3c);   animation-delay: 0s; }
.lp-sheet-3 { --dx: -4.5%; --dy: calc(var(--lp-lift) * -3); --dz: -180px; --lp-fw: var(--lp-fw-swot); animation-delay: 0.1s; }
.lp-sheet-2 { --dx: -3%;   --dy: calc(var(--lp-lift) * -2); --dz: -120px; --lp-fw: var(--lp-fw-mece); animation-delay: 0.2s; }
.lp-sheet-1 { --dx: -1.5%; --dy: calc(var(--lp-lift) * -1); --dz: -60px;  --lp-fw: var(--lp-fw-okr);  animation-delay: 0.3s; }

@keyframes lp-settle {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--dx) - 2%), calc(var(--dy) + 30px), calc(var(--dz) - 260px))
      rotateX(9deg);
  }
}

.lp-tab {
  position: absolute;
  top: 4px;
  display: inline-block;
  padding: 1px 9px;
  border-radius: var(--lp-r-sm);
  background: var(--lp-sheet);
  border: 1px solid var(--lp-rule);
  font-family: var(--lp-mono);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.lp-tab {
  color: var(--lp-fw);
}
.lp-sheet-4 .lp-tab { left: 3%; }
.lp-sheet-3 .lp-tab { left: 27%; }
.lp-sheet-2 .lp-tab { left: 53%; }
.lp-sheet-1 .lp-tab { left: 77%; }

.lp .shot {
  position: relative;
  z-index: 1;
  margin: 0;
}
/* shotFigure は img に inline style を持つ（guides と共有）＝ここだけ上書きする。 */
.lp .shot img {
  display: block;
  width: 100% !important;
  height: auto !important;
  border: 1px solid var(--lp-rule) !important;
  border-radius: var(--lp-r-lg) !important;
  box-shadow: var(--lp-shadow-2);
}
.lp .shot figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lp-ink-2);
}

/* ---------- 導入文 ---------- */

.lp-intro {
  margin: clamp(38px, 5vw, 60px) 0 0;
  max-width: var(--lp-prose);
}

/* ---------- 目次 ---------- */

.lp-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(34px, 4vw, 54px) 0 0;
}
.lp-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--lp-rule);
  /* 角丸は 14 / 10 / 6 の3段だけ（pill を足して4段にしない＝DESIGN_STANDARD §2） */
  border-radius: var(--lp-r-md);
  background: var(--lp-sheet);
  color: var(--lp-ink);
  font-size: 15px;
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease;
}
.lp-toc a:hover {
  border-color: var(--lp-accent);
  transform: translateY(-1px);
}

/* ---------- セクション ---------- */

.lp-section {
  padding: var(--lp-sec) 0 0;
  scroll-margin-top: 24px;
}
.lp-section > h2 {
  margin: 0 0 8px;
  max-width: 24ch;
  font-size: clamp(23px, 2.6vw, 31px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 800;
}
.lp-section > p {
  margin: 12px 0 0;
  max-width: var(--lp-prose);
}
.lp-section > p + p {
  margin-top: 16px;
}

/* 段（01–05）＝本当に順序が意味を持つのでリストは ol・番号は mono */
.lp-steps {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  counter-reset: lp-step;
}
@media (min-width: 760px) {
  .lp-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
.lp-step {
  position: relative;
  padding: 20px 22px 22px;
  border: 1px solid var(--lp-rule);
  border-radius: var(--lp-r-lg);
  background: var(--lp-sheet);
  box-shadow: var(--lp-shadow-1);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.lp-step::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--lp-fw, var(--lp-rule));
}
.lp-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--lp-shadow-2);
}
.lp-step-n {
  display: block;
  margin-bottom: 6px;
  font-family: var(--lp-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--lp-fw, var(--lp-ink-2));
}
.lp-step strong {
  display: block;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.lp-step-b {
  display: block;
  margin-top: 8px;
  color: var(--lp-ink-2);
}
.lp-step-1 { --lp-fw: var(--lp-fw-3c); }
.lp-step-2 { --lp-fw: var(--lp-fw-swot); }
.lp-step-3 { --lp-fw: var(--lp-fw-swot); }
.lp-step-4 { --lp-fw: var(--lp-fw-mece); }
.lp-step-5 { --lp-fw: var(--lp-fw-okr); }

/* 2つのサーフェス */
.lp-cards {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
}
@media (min-width: 760px) {
  .lp-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.lp-card {
  padding: 22px;
  border: 1px solid var(--lp-rule);
  border-radius: var(--lp-r-lg);
  background: var(--lp-sheet);
  box-shadow: var(--lp-shadow-1);
}
.lp-card strong {
  display: block;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.lp-card-b {
  display: block;
  margin-top: 8px;
  color: var(--lp-ink-2);
}

.lp-badges {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--lp-ink-2);
}

.lp pre {
  margin: 20px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--lp-rule);
  border-radius: var(--lp-r-lg);
  background: var(--lp-sheet);
  box-shadow: var(--lp-shadow-1);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.lp code {
  font-family: var(--lp-mono);
}

.lp-guides {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
}
.lp-guides li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 14px;
  border: 1px solid var(--lp-rule);
  border-radius: var(--lp-r-md);
  background: var(--lp-sheet);
  transition: border-color 180ms ease, transform 180ms ease;
}
.lp-guides li:hover {
  border-color: var(--lp-accent);
  transform: translateY(-1px);
}
.lp-guides a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px 8px 0;
  color: var(--lp-ink);
  text-decoration: none;
}
.lp-guides a:hover {
  text-decoration: underline;
}

.lp-close {
  margin: clamp(44px, 6vw, 76px) 0 0;
}

.lp-footer {
  margin: var(--lp-sec) 0 0;
  padding: 30px 0 56px;
  border-top: 1px solid var(--lp-rule);
  font-size: 15px;
  color: var(--lp-ink-2);
}
.lp-footer p {
  margin: 0 0 10px;
  max-width: var(--lp-prose);
}
.lp-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
}
.lp-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* 言語切替 nav（静的リンク）。色は周囲(.lp-footer / body)を継承＝新しい色を作らない（明暗とも既存の本文と同じ比）。 */
.lp-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  margin-top: 14px;
}
.lp-langs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}
.lp-langs-root {
  justify-content: center;
  margin: 0;
  padding: 16px 20px;
  font-size: 0.85rem;
  /* ルート nav は .lp の外（#root の兄弟）＝--lp-* が届かず、body の --text は明色固定で暗色時に地(#0d131c)へ沈む。
     inherit に頼らず、既存の値（明=旧 --text #1a2230／暗=--lp-ink #eef2f8）を明示する。 */
  color: #1a2230;
}
.lp-langs-root a {
  color: inherit;
  text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
  .lp-langs-root {
    color: #eef2f8;
  }
}

/* 読み上げ専用（区切りの「: 」など、意味を持たない文字は目からは隠す） */
.lp-sep {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 動きを減らす設定では演出を完全に外す（外しても情報は1つも変わらない）。 */
@media (prefers-reduced-motion: reduce) {
  .lp *,
  .lp *::before,
  .lp *::after {
    animation: none !important;
    transition: none !important;
  }
}