/* =========================================================================
 * レイアウトプリセット（構造的差別化・圏外飛ばし対策）
 * body.lp-<name> をドメインハッシュで付与。色/フォント(skins)に加え、
 * DOM構造の見え方・配置・密度・タイポを根本から変える。
 * 6プリセット × 16パレット × 4フォント × 10ペルソナ = 実質すべて別サイト。
 * ========================================================================= */

/* ============ 1. magazine: 大判・タイトル画像重ね・編集的 ============ */
body.lp-magazine .hero{padding:clamp(48px,8vw,96px) 0}
body.lp-magazine .hero__title{font-family:var(--font-head);letter-spacing:.02em}
body.lp-magazine .cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
body.lp-magazine .card{position:relative;border:0;box-shadow:0 12px 34px rgba(20,10,40,.16)}
body.lp-magazine .card__thumb{aspect-ratio:4/3}
body.lp-magazine .card__body{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(0,0,0,.28) 40%,rgba(0,0,0,.9));
	color:#fff;padding:2.4em 1.1em 1.1em}
body.lp-magazine .card__title a{color:#fff}
body.lp-magazine .card__meta,body.lp-magazine .card__excerpt{display:none}
body.lp-magazine .card__cta{color:#fff}
body.lp-magazine .section-head__title{font-size:clamp(1.5rem,1.2rem+1.4vw,2.2rem)}

/* ============ 2. portal: 高密度グリッド・ヒーロー無し・データ的 ============ */
body.lp-portal .hero{padding:22px 0;background:var(--soft);border-bottom:1px solid var(--line)}
body.lp-portal .hero__title{font-size:clamp(1.3rem,1rem+1.6vw,1.9rem)}
body.lp-portal .hero__lead{font-size:.95rem}
body.lp-portal .cards{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
body.lp-portal .card{border-radius:8px}
body.lp-portal .card__thumb{aspect-ratio:3/4}
body.lp-portal .card__body{padding:9px 10px 11px;gap:.35em}
body.lp-portal .card__title{font-size:.86rem;-webkit-line-clamp:2}
body.lp-portal .card__excerpt{display:none}
body.lp-portal .card__cta{font-size:.78rem}
body.lp-portal .section-head{margin:1.6em 0 .9em}

/* ============ 3. minimal: 余白広い・フラット・大きめ字 ============ */
body.lp-minimal .site-header{border-bottom:1px solid var(--line)}
body.lp-minimal .hero{background:none;border-bottom:0;padding:clamp(40px,7vw,84px) 0 clamp(20px,3vw,32px)}
body.lp-minimal .hero__title{color:var(--ink);-webkit-text-fill-color:var(--ink);background:none}
body.lp-minimal .hero__lead{color:var(--sub)}
body.lp-minimal .cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:36px}
body.lp-minimal .card{border:1px solid var(--line);box-shadow:none;border-radius:6px}
body.lp-minimal .card:hover{box-shadow:0 8px 24px rgba(0,0,0,.06);transform:none}
body.lp-minimal .card__body{padding:16px 4px 6px}
body.lp-minimal .card__thumb{border-radius:6px 6px 0 0}
body.lp-minimal .section-head__title::before{width:3px}
body.lp-minimal .article{box-shadow:none;border:1px solid var(--line)}

/* ============ 4. bold: 極太タイポ・強アクセント・大ボタン ============ */
body.lp-bold .hero{background:linear-gradient(135deg,var(--accent),var(--accent2))}
body.lp-bold .hero__title{color:#fff;-webkit-text-fill-color:#fff;background:none;font-weight:900;font-size:clamp(2rem,1.4rem+4vw,3.4rem)}
body.lp-bold .hero__lead{color:rgba(255,255,255,.9)}
body.lp-bold .cards{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
body.lp-bold .card{border:3px solid var(--accent);border-radius:14px;box-shadow:none}
body.lp-bold .card__title{font-weight:900;font-size:1.08rem}
body.lp-bold .section-head__title{font-weight:900;text-transform:none;font-size:clamp(1.4rem,1.1rem+1.6vw,2.1rem)}
body.lp-bold .section-head__title::before{width:8px}
body.lp-bold .card__cta{text-transform:uppercase;letter-spacing:.05em;font-size:.8rem}

/* ============ 5. editorial: 横並びリスト・ブログ的・明朝 ============ */
body.lp-editorial .cards{grid-template-columns:1fr;gap:18px;max-width:820px;margin-left:auto;margin-right:auto}
body.lp-editorial .card{flex-direction:row;align-items:stretch}
body.lp-editorial .card__thumb{flex:0 0 40%;aspect-ratio:auto}
body.lp-editorial .card__thumb img{height:100%;object-fit:cover}
body.lp-editorial .card__body{padding:16px 18px}
body.lp-editorial .card__title{font-family:var(--font-head);font-size:1.1rem;-webkit-line-clamp:2}
body.lp-editorial .card__excerpt{-webkit-line-clamp:2}
body.lp-editorial .hero__title{font-family:var(--font-head)}
body.lp-editorial .section-head__title{font-family:var(--font-head)}
@media(max-width:520px){body.lp-editorial .card{flex-direction:column}body.lp-editorial .card__thumb{flex:none;aspect-ratio:3/4}}

/* ============ 6. showcase: カバー主役・縦長大画像・重ねタイトル ============ */
body.lp-showcase .hero{padding:clamp(28px,4vw,52px) 0}
body.lp-showcase .cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
body.lp-showcase .card{position:relative;border:0;border-radius:18px;box-shadow:0 14px 40px rgba(20,10,40,.2)}
body.lp-showcase .card__thumb{aspect-ratio:2/3}
body.lp-showcase .card__body{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;padding:2.2em .9em .9em;gap:.25em}
body.lp-showcase .card__title{font-size:.98rem;-webkit-line-clamp:2}
body.lp-showcase .card__title a{color:#fff}
body.lp-showcase .card__meta,body.lp-showcase .card__excerpt{display:none}
body.lp-showcase .card__cta{color:#fff;font-size:.82rem}
body.lp-showcase .card__score{top:10px;left:10px}

/* ============ ヘッダー配置のプリセット別バリエーション ============ */
body.lp-magazine .site-header__inner,body.lp-minimal .site-header__inner{justify-content:center;gap:24px}
body.lp-magazine .brand,body.lp-minimal .brand{margin:0}
body.lp-magazine .gnav,body.lp-minimal .gnav{margin-left:0;order:3}
body.lp-editorial .brand__mark{border-radius:50%}
body.lp-bold .brand__mark{border-radius:6px}
body.lp-portal .brand{font-size:1.1rem}
body.lp-showcase .brand__mark{border-radius:14px}

/* 記事本文の幅もプリセットで微差（フットプリント分散） */
body.lp-editorial .article-shell,body.lp-minimal .article-shell{max-width:760px}
body.lp-bold .article-shell{max-width:900px}
body.lp-magazine .article-shell,body.lp-showcase .article-shell{max-width:880px}