/* ==========================================================
   lp.css — 履歴書chan トップページ専用スタイル (リニューアル)

   ルール:
   - 本ファイルは index.html(トップページ)のみが読み込む。
     下層16ページは css/style.css のみを読み込むため影響を受けない。
   - css/style.css は書き換えない。本ファイルは後から読み込まれ、
     `.lp-*` スコープ付きセレクタで既存定義を上書きする。
   - 実装範囲: STEP 3 = Header (LOCK 済み)。
     Hero は css/lp-hero-v2.css、Builder/Preview は css/lp-builder-v2.css が担当する。
     末尾に Header 範囲外のトップページ限定パッチを別セクションで置いている。

   準拠: docs/design/DESIGN_SPEC.md (STEP 2C / Header)
         docs/design/IMPLEMENTATION_CONTRACT.md
         docs/design/DOM_CONTRACT.md
   ========================================================== */

/* ---------- デザイントークン (DESIGN_SPEC 1.3) ---------- */
:root {
  --lp-bg: #fffdfc;
  --lp-surface: #ffffff;
  --lp-text: #1a1a1a;
  --lp-text-muted: #5f5f5f;
  /* コーラルは原本画像から採色 (STEP 3 Visual Correction) */
  --lp-coral: #f7736e;
  --lp-coral-strong: #ef6a65;
  --lp-coral-soft: #fff2f0;
  /* 下罫線: 正式原本(682x2048)との比較で2段薄く・中性寄りに調整。
     「境界は認識できるが線として主張しない」状態を狙う。消してはいない。 */
  --lp-border: #f6f4f3;

  /* タイポグラフィ: システムフォント継続 (STEP 2D 決定事項1) */
  --lp-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

/* ==========================================================
   Header (DESIGN_SPEC 2)

   スコープ注記:
   DESIGN_SPEC は 1440px の desktop reference viewport のみを規定しており、
   モバイル/タブレットのレイアウトは未確定(mobile-master.png 待ち)。
   そのため以下のヘッダー定義は desktop 幅にのみ適用し、
   それ未満の幅では css/style.css の既存ヘッダー挙動をそのまま維持する。
   (モバイルを新規デザインしないための措置。推測実装の禁止に従う)

   ブレークポイント根拠 (STEP 3 Visual Correction で更新):
   ロゴ254 + ナビ606 + ナビ〜CTA間58 + CTA280 = 1198px、
   左右padding 104px を加えて 1302px。余裕をみて 1320px を境界とする。
   （補正前は 1080px。ロゴ・CTA・ナビの拡大により必要幅が増えたため引き上げ）
   ========================================================== */
@media (min-width: 1320px) {

/* 2.2 ヘッダー本体 — 高さ100px / わずかに暖色の地色 / 1pxの淡い下罫線 */
.lp-header {
  background: var(--lp-bg);   /* 原本の地色は純白ではなく #fffdfc */
  border-bottom: 1px solid var(--lp-border);
  font-family: var(--lp-font);
}

/* 2.2 有効コンテンツ幅
   1440px時に左右マージン52pxとなるよう、コンテナ上限1440px + padding52px。
   (style.css の max-width:1180px / padding:22px を上書き)
   補正前は左右92pxでヘッダー内部が原本より狭すぎた。 */
.lp-header .container {
  max-width: 1440px;
  padding-left: 52px;
  padding-right: 52px;
}

/* 2.2 Logo | Navigation | CTA の3ゾーン構成・垂直中央揃え
   ナビは margin-left:auto で右寄せし、CTAとの間隔を固定値で持つ。
   余白はロゴとナビの間に集まる。 */
.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  height: 99px;              /* +1px の下罫線を含めてヘッダー総高 100px */
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- 2.3 ロゴ ---------- */
/* 画像を使わず HTMLテキスト + SVG で構成する */
.lp-header .lp-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin: 0;
  text-decoration: none;
  line-height: 1;
}
/* 文字部分の visual bounding box: 約210-225 × 38-42px */
.lp-logo-text {
  display: inline-block;
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--lp-text);     /* ダークなワードマーク */
  white-space: nowrap;
}
/* 「chan」は原本では傾いていない(1440px正規化比較で確認)。
   style.css の italic を打ち消し、直立のまま dark で表示する。 */
.lp-header .lp-logo-chan {
  display: inline-block;
  color: var(--lp-text);     /* style.css のピンク指定を打ち消す */
  font-style: normal;
  transform: none;
  letter-spacing: 0;
  margin-left: 3px;
}
/* 「chan」直後のコーラルの肉球
   SVG viewport 37px。正式原本の paw ink 実測 約29x28px に合わせるための値で、
   path(viewBox 0 0 24 24)自体は変更していない。 */
.lp-paw-logo {
  flex: none;
  fill: var(--lp-coral);
  width: 37px;
  height: 37px;
  margin-top: 2px;
}

/* ---------- 2.4 ナビゲーション ---------- */
/* 1440px時: ナビ群 x≈444 / 右端≈1050 に収まるよう
   右側をCTAから58px手前に固定し、余白は左(ロゴとの間)に逃がす。
   gap は 1440px で 76px。1320px まで下がる間に 64px まで詰め、
   ロゴとナビが接近しすぎるのを防ぐ(1440px の値は変わらない)。 */
.lp-header .lp-nav {
  display: flex;
  align-items: center;
  gap: clamp(64px, calc(-68px + 10vw), 76px);
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 58px;
  font-size: 18px;
}
.lp-header .lp-nav a {
  color: var(--lp-text);     /* ダークテキスト・囲み枠なし */
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.lp-header .lp-nav a:hover {
  color: var(--lp-coral);
  text-decoration: none;
}
.lp-header .lp-nav a:focus-visible {
  outline: 2px solid var(--lp-coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 2.5 ヘッダーCTA ---------- */
.lp-header .lp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 280px;              /* 1440px時 x≈1108 / 右端≈1388 */
  height: 56px;
  padding: 0 26px;           /* 2.5 padding 24-28px */
  background: var(--lp-coral);
  color: #fff;
  font-size: 15px;           /* 2.5 15-16px */
  font-weight: 700;          /* 2.5 weight 700 */
  line-height: 1;
  border: none;
  border-radius: 999px;      /* 1.4 pill */
  text-decoration: none;
  white-space: nowrap;       /* 1440pxで1行を維持 */
  transition: background-color 0.15s;
  /* style.css の --shadow-cta (0 12px 22px) は原本より広く尾を引くため、
     ヘッダーのCTAに限り下端から4-6px程度で減衰する浅い影に差し替える。
     影は消さない。 */
  box-shadow: 0 2px 4px rgba(224, 96, 90, 0.26);
}
.lp-header .lp-cta:hover {
  background: var(--lp-coral-strong);
  opacity: 1;
}
.lp-header .lp-cta:focus-visible {
  outline: 2px solid var(--lp-coral-strong);
  outline-offset: 3px;
}
.lp-cta-label { display: inline-block; }
/* CTA右側の白い肉球 */
.lp-paw-cta {
  flex: none;
  fill: #fff;
}

} /* @media (min-width: 1320px) — Header ここまで */

/* ----------------------------------------------------------
   1320px未満: 新ヘッダーのスタイルは適用しない。
   ただし絵文字を廃した肉球SVGはマークアップ側に存在するため、
   既存レイアウトの中で破綻しない最小限の整形のみ行う。
   (レイアウト自体は css/style.css の既存定義に委ねる)
   ---------------------------------------------------------- */
@media (max-width: 1319px) {
  .lp-logo { display: inline-flex; align-items: center; gap: 6px; }
  .lp-paw-logo { flex: none; fill: var(--lp-coral); width: 16px; height: 16px; }
  .lp-cta { display: inline-flex; align-items: center; gap: 6px; }
  .lp-paw-cta { flex: none; fill: #fff; width: 15px; height: 15px; }
}

/* ==========================================================
   トップページ個別パッチ (Header LOCK の範囲外)

   Header の LOCK 定義は上のブロックまで。以下は Header に触れない、
   トップページ限定の不具合修正・表示調整のみを置く。
   本ファイルは index.html だけが読み込むため、下層16ページには波及しない。
   ========================================================== */

/* Patch A — Preview 見出しの階層化 (2026-08-13 visual QA)
   見出しは「プレビュー」、補足は .preview-hint に分離した。
   印刷時は css/print.css が見出し(h2)を消すので、補足も同様に消す。
   (print.css 自体は凍結対象のため、こちらで打ち消す) */
@media print {
  .preview-section .preview-hint { display: none !important; }
}

/* Patch B — hidden 属性が効かない既存バグの修正 (2026-08-13 visual QA)
   .btn { display: inline-flex } がユーザーエージェントの [hidden] 指定に
   勝ってしまい、hidden 付きでも表示され続けていた。
   対象の2要素だけを名指しで打ち消す (JS の挙動は変更しない)。 */
#photo-remove[hidden],
#regenerate-motivation[hidden] {
  display: none;
}