/* =====================================================================
   藍 v2 「一面ポスター」(A'確定・2026-07-11 CEO GO)
   トップページ用コンポーネントCSS。マークアップの正はmock_a2_final.html。
   フォントは本番の既存トークン(--serif/--sans)に乗せる。
   ===================================================================== */

:root{
  /* 既存style.cssに同名トークンがあればそちらが正。無い環境向けのフォールバック定義 */
  --latin-display: "Playfair Display";
  --serif: var(--latin-display), "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* v2カラートークン(動画punch・ヒーロー焼き込みと同系で統一) */
  --ink:#1d2b45;        /* 墨藍=攻め・地の帯 */
  --sumi:#22242a;       /* 本文墨 */
  --cream:#f7f3ea;      /* 和紙クリーム地 */
  --cream2:#f1ebdd;     /* 読みもの下敷き */
  --gold:#b8913d;       /* 金一点(キッカー・番号) */
  --red:#8e2f2f;        /* 深紅(強調・タグ) */
  --hair:rgba(29,43,69,.22);  /* 細罫 */
}

body.v2{background:var(--cream);color:var(--sumi);font-family:var(--serif);}

/* ---------- header ---------- */
.v2 header.site{display:flex;align-items:center;justify-content:space-between;padding:26px 56px 22px;border-bottom:1px solid var(--hair);}
.v2 .brand{display:flex;align-items:center;gap:18px;}
.v2 .brand img{width:54px;height:54px;}
.v2 .brand .name{font-size:34px;font-weight:600;letter-spacing:.1em;color:var(--ink);}
.v2 .brand .sub{font-family:var(--sans);font-size:11px;letter-spacing:.34em;color:rgba(34,36,42,.55);margin-top:5px;}
.v2 nav.global{font-family:var(--sans);font-size:13.5px;letter-spacing:.16em;display:flex;gap:34px;color:var(--ink);}
.v2 nav.global a{white-space:nowrap;}   /* 項目内で絶対折らない（中間幅の縦崩れ根治・2026-07-12） */
.v2 nav.global .on{border-bottom:2px solid var(--red);padding-bottom:6px;}
.v2 .hdate{font-size:12.5px;letter-spacing:.22em;color:rgba(34,36,42,.6);white-space:nowrap;}
.v2 .brand .name,.v2 .brand .sub{white-space:nowrap;}

/* 中間幅（タブレット等）：1行に入らないので「題字の行／ナビの行」の2段組みに落とす */
@media (max-width:1280px) and (min-width:901px){
  .v2 header.site{flex-wrap:wrap;padding:20px 32px 0;}
  .v2 header.site .brand{order:1;}
  .v2 header.site .hdate{order:2;margin-left:auto;}
  .v2 header.site .theme-toggle{order:3;margin-left:18px;}
  .v2 header.site nav.global{order:4;flex-basis:100%;justify-content:center;gap:28px;border-top:1px solid var(--hair);margin-top:14px;padding:12px 0;}
}

/* ---------- 一面ポスター: リードコピー ---------- */
/* h1=「今日の構図」の一言(10〜16字が最適・句読点可)。<span class="red">で1語だけ強調 */
.v2 .lead2{padding:66px 56px 44px;}
/* キッカー文言は「TODAY'S LEAD＋日付」のみ。「毎朝6時 更新」等の説明書きは置かない(2026-07-11 CEO) */
.v2 .kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;font-family:var(--sans);font-size:12px;letter-spacing:.3em;color:var(--gold);margin-bottom:30px;}
.v2 .kicker::before{content:"";width:34px;height:1px;background:var(--gold);}
.v2 .kicker b{color:var(--ink);font-weight:normal;margin-left:6px;letter-spacing:.24em;white-space:nowrap;}
/* keep-all=読点・句点でだけ折る（「日／曜。」等の語中泣き別れ根治・2026-07-12初運転で発見）。
   読点なしの長文が来た時だけoverflow-wrap:anywhereが緊急折返しする */
.v2 .lead2 h1{font-size:96px;line-height:1.22;letter-spacing:.04em;color:var(--ink);font-weight:600;margin:0;word-break:keep-all;overflow-wrap:anywhere;}
.v2 .lead2 h1 .red{color:var(--red);}

/* ---------- 一面ポスター: 全幅ヒーロー帯 ---------- */
/* imgはmake_hero_wide.pyで生成したワイドクロップ(2.16:1)。焼き込みパネル入りの元画像を直接入れない */
.v2 .heroband{position:relative;}
/* PCは原寸比で全面表示（height固定のcoverは画面幅次第で藍猫や金が端で切れる=2026-07-12 CEO指摘）。
   ワイドクロップ(2.16:1)をそのままの比率で見せる＝どの幅でも絵は切れない */
.v2 .heroband img{width:100%;height:auto;display:block;}
.v2 .heroband .badge{position:absolute;right:0;bottom:-1px;background:var(--ink);color:var(--cream);font-family:var(--sans);font-size:12px;letter-spacing:.28em;padding:13px 26px;}
.v2 .heroband .tate2{position:absolute;right:26px;top:30px;writing-mode:vertical-rl;font-size:13px;letter-spacing:.42em;color:var(--cream);opacity:.9;text-shadow:0 1px 10px rgba(20,25,40,.45);}

/* ---------- 一面ポスター: リード文+CTA ---------- */
.v2 .under{display:flex;align-items:center;gap:70px;padding:40px 56px 0;}
.v2 .lede{flex:1;font-size:16px;line-height:2.1;color:rgba(34,36,42,.82);max-width:46em;margin:0;}
.v2 .cta{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-size:13.5px;letter-spacing:.22em;color:var(--ink);border:1px solid var(--ink);padding:16px 36px;white-space:nowrap;text-decoration:none;}
.v2 .cta span{color:var(--gold);}

/* ---------- 今日の三本 + 藍猫案内 ---------- */
.v2 .strip{margin:118px 56px 0;border-top:1px solid var(--ink);padding-top:20px;position:relative;}
/* 藍猫: 透過ポーズ素材を罫線の上に「座らせる」。吹き出し文は任意(無い日は両方非表示) */
.v2 .strip .neko{position:absolute;right:34px;top:-104px;width:112px;}
/* 吹き出しは「下端を罫線の上に固定」アンカー＝文が何行に折れても下の見出しに重ならない（320px実測6px重なりの根治） */
.v2 .strip .fuki{position:absolute;right:162px;top:auto;bottom:calc(100% + 12px);background:#fff;border:1px solid var(--hair);border-radius:14px;padding:12px 20px;font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--ink);box-shadow:0 6px 18px rgba(29,43,69,.08);white-space:nowrap;}
.v2 .strip .fuki::after{content:"";position:absolute;right:-7px;top:50%;width:12px;height:12px;background:#fff;border-right:1px solid var(--hair);border-top:1px solid var(--hair);transform:translateY(-50%) rotate(45deg);}
.v2 .strip-head{display:flex;align-items:baseline;gap:20px;margin-bottom:34px;}
.v2 .strip-head h2{font-size:26px;letter-spacing:.14em;color:var(--ink);white-space:nowrap;margin:0;}
.v2 .strip-head .en{font-family:var(--sans);font-size:11px;letter-spacing:.34em;color:var(--gold);}
.v2 .strip-head .more{margin-left:auto;font-family:var(--sans);font-size:12.5px;letter-spacing:.2em;color:var(--red);text-decoration:none;}
.v2 .cards3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:44px;}
.v2 .c3{border-top:3px solid var(--ink);padding-top:22px;}
.v2 .c3.hot{border-top-color:var(--red);}   /* No.01だけ深紅 */
.v2 .c3 .no{font-family:var(--latin-display),Georgia,serif;font-size:15px;letter-spacing:.1em;color:var(--gold);font-style:italic;}
.v2 .c3 h3{font-size:21px;line-height:1.72;margin:12px 0 0;color:var(--ink);}
.v2 .c3 p{font-family:var(--sans);font-size:13px;line-height:2;color:rgba(34,36,42,.68);margin:12px 0 0;}
.v2 .c3 .tag{display:inline-block;margin-top:16px;font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--red);border:1px solid rgba(142,47,47,.4);padding:5px 12px;}

/* ---------- 読みもの(コラム/活用法) ---------- */
/* 画像は3:2ネイティブをワイド表示。正方形クロップ禁止(2026-07-11 CEO) */
.v2 .colsec{margin:100px 56px 0;background:var(--cream2);padding:56px;display:grid;grid-template-columns:230px 1fr;gap:40px;}
.v2 .colsec .label{writing-mode:vertical-rl;font-size:30px;letter-spacing:.32em;color:var(--ink);border-right:1px solid var(--hair);padding-right:34px;height:290px;}
.v2 .colsec .label small{font-family:var(--sans);font-size:10px;letter-spacing:.4em;color:var(--gold);margin-top:18px;}
.v2 .colcards{display:grid;grid-template-columns:1fr 1fr;gap:44px;}
/* 原寸比のまま・切らない（実画像は16:9等が混在。aspect-ratio固定は常時クロップになるためauto＝CEO裁定準拠） */
.v2 .cc img{width:100%;height:auto;display:block;margin-bottom:20px;box-shadow:0 14px 34px rgba(29,43,69,.14);}
.v2 .cc .d{font-family:var(--sans);font-size:11px;letter-spacing:.24em;color:var(--gold);}
.v2 .cc h4{font-size:19px;line-height:1.8;color:var(--ink);margin:10px 0 0;}
.v2 .cc p{font-family:var(--sans);font-size:12.5px;line-height:1.95;color:rgba(34,36,42,.66);margin:10px 0 0;}

/* ---------- footer 藍帯 ---------- */
.v2 .foot{background:var(--ink);color:var(--cream);margin-top:90px;padding:58px 56px 62px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;}
.v2 .foot .big{font-size:38px;letter-spacing:.26em;}
.v2 .foot .big i{font-style:normal;color:var(--gold);}
.v2 .foot p{font-family:var(--sans);font-size:12.5px;line-height:2.1;color:rgba(247,243,234,.72);margin:16px 0 0;max-width:34em;}
/* リンクは項目内で折らない・足りない幅では項目間で折る（2026-07-12 中間幅の縦崩れ根治） */
.v2 .foot .links{display:flex;flex-wrap:wrap;row-gap:12px;gap:26px;justify-content:flex-end;font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;color:rgba(247,243,234,.78);}
.v2 .foot .links a,.v2 .foot .links span{white-space:nowrap;}
.v2 .foot .cr{text-align:right;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;color:rgba(247,243,234,.45);margin-top:26px;white-space:nowrap;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  /* 1行固定：ブランド左・トグル右（320pxでトグルが2段目に落ちる崩れの根治） */
  .v2 header.site{padding:16px 20px;flex-wrap:nowrap;gap:12px;justify-content:space-between;}
  .v2 header.site .brand{min-width:0;}
  .v2 header.site .brand img{width:44px;height:44px;}
  .v2 .brand .name{font-size:28px;}
  .v2 .brand .sub{font-size:9.5px;letter-spacing:.26em;}
  .v2 nav.global,.v2 .hdate{display:none;}  /* 実装時はハンバーガーに置換 */
  .v2 .lead2{padding:40px 24px 28px;}
  /* モバイルのキッカーは縦積み(ラベル→日付・左揃え)。2カラム衝突と語中折れの根治(2026-07-11 CEO指摘) */
  .v2 .kicker{display:block;font-size:10.5px;}
  .v2 .kicker::before{display:none;}
  .v2 .kicker b{display:block;margin:9px 0 0;white-space:nowrap;}
  /* min(40px,9.8vw)=「読点前セグメント8字以内」との整合ペア（320pxでも8字が入る係数に再較正）。
     line-break:strict=行頭読点の禁則（最後の保険） */
  .v2 .lead2 h1{font-size:min(40px, 9.8vw);line-height:1.36;line-break:strict;}
  .v2 .kicker b{white-space:normal;}   /* EN長日付は空白折りに（320pxで右端切れ+13pxの根治） */
  /* 深紅強調スパンは行を跨がせない(「技術／の外」泣き別れ根治)。lead_copyの強調語は6字以内が前提 */
  .v2 .lead2 h1 .red{white-space:nowrap;}
  /* モバイルも原寸比・切らない（2026-07-12 CEO裁定「生成サイズのまま」に統一） */
  .v2 .heroband img{height:auto;object-fit:unset;}
  .v2 .heroband .tate2{display:none;}
  /* バッジはモバイルでコンパクトに（EN長文が藍猫を覆った実害の恒久対応）。
     項目内では折らない＝バッジ内2行化の見苦しさを禁止（360px実測で内折れした教訓） */
  .v2 .heroband .badge{font-size:9.5px;padding:8px 12px;letter-spacing:.16em;white-space:nowrap;max-width:none;}
  .v2 .under{flex-direction:column;align-items:flex-start;gap:24px;padding:26px 24px 0;}
  .v2 .strip{margin:96px 24px 0;}
  /* EN "Today's Top Three" の横溢れ対策(2026-07-11 live初日に律がグルーCSSで矯正→本体取り込み) */
  .v2 .strip-head{flex-wrap:wrap;row-gap:8px;}
  .v2 .strip .neko{width:88px;top:-82px;right:12px;}
  .v2 .strip .fuki{right:110px;font-size:11px;white-space:normal;max-width:200px;}   /* 縦位置はbottomアンカーのまま */
  .v2 .cards3{grid-template-columns:1fr;gap:30px;}
  .v2 .colsec{margin:64px 24px 0;padding:32px 24px;grid-template-columns:1fr;gap:24px;}
  .v2 .colsec .label{writing-mode:horizontal-tb;height:auto;border-right:none;border-bottom:1px solid var(--hair);padding:0 0 14px;font-size:22px;}
  .v2 .colsec .label small{margin:0 0 0 14px;}
  .v2 .colcards{grid-template-columns:1fr;gap:34px;}
  .v2 .cc img{height:auto;}   /* 3:2原寸比のまま（固定220pxのクロップ廃止） */
  .v2 .foot{grid-template-columns:1fr;padding:40px 24px 44px;gap:24px;}
  .v2 .foot .big{font-size:28px;letter-spacing:.2em;}   /* 38pxは360pxで横溢れ（実測+81px） */
  .v2 .foot .links{justify-content:flex-start;flex-wrap:wrap;gap:16px;}
  .v2 .foot .cr{text-align:left;white-space:normal;}    /* nowrapは狭幅で溢れる。空白折りに任せる */
}