/* layout.css ― コンテナ・グリッド・アプリシェル・セクション。 */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.container--narrow{max-width:840px}

.section{padding-block:clamp(48px,8vw,96px)}
.section--tight{padding-block:clamp(32px,5vw,56px)}
.section__head{max-width:680px;margin-bottom:var(--sp-8)}
.section__eyebrow{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.18em;text-transform:uppercase;color:var(--c-secondary);display:inline-block;margin-bottom:var(--sp-3)}
.section__title{font-size:clamp(1.5rem,3vw,2.2rem)}
.section__lead{color:var(--c-text-sub);margin-top:var(--sp-3);font-size:var(--fs-20)}

.grid{display:grid;gap:var(--sp-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}

/* アプリシェル：左にジャーニーレール＋メイン */
.appshell{display:grid;grid-template-columns:72px 1fr;min-height:100vh}
@media(max-width:900px){.appshell{grid-template-columns:1fr}}

/* 縦リズム用 */
.flow > * + *{margin-top:var(--sp-4)}
.flow-lg > * + *{margin-top:var(--sp-8)}