/* =========================================================
   SOHO Layout
   Stage / Frame / Canvas / Rail / Container / Content
========================================================= */

/* =========================================================
   Stage
   ページ全体のレイアウト舞台
   Heroあり/なし、Railあり/なしを包める
========================================================= */

.l-soho-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

/* =========================================================
   Frame
   Canvas と Rail を並べる外枠
========================================================= */

.l-soho-frame {
  position: relative;
  width: 100%;
}

/* =========================================================
   Canvas
   主コンテンツの表示面
   Railがある場合は、Railを除いた本文側
========================================================= */

.l-soho-canvas {
  position: relative;
  min-width: 0;
}

/* =========================================================
   Rail
   Sidebarなどの左右レール
========================================================= */

.l-soho-rail {
  position: relative;
  min-width: 0;
}

/* =========================================================
   Container
   Canvas内で読みやすい幅に収める箱
========================================================= */

.l-soho-container {
  width: min(var(--soho-width-standard), calc(100% - 48px));
  margin-inline: auto;
}

.l-soho-container--wide {
  width: min(var(--soho-width-wide), calc(100% - 48px));
}

.l-soho-container--narrow {
  width: min(var(--soho-width-narrow), calc(100% - 48px));
}

/* =========================================================
   Content
   記事本文・一覧・Partial群そのもの
========================================================= */

.l-soho-content {
  position: relative;
  min-width: 0;
}

/* =========================================================
   Legacy / Current Composer Layout
   既存Composer名を当面活かす
========================================================= */

.l-soho-main {
  position: relative;
  width: 100%;
}

.l-soho-composer {
  position: relative;
  width: 100%;
}

.l-soho-before-layout,
.l-soho-after-content,
.l-soho-footer-zone {
  position: relative;
  width: 100%;
}

.l-soho-main-layout {
  position: relative;
  width: 100%;
}

.l-soho-content-area {
  position: relative;
  min-width: 0;
}

/* =========================================================
   Data Layout Utility
========================================================= */

[data-layout="full"] {
  width: var(--soho-width-full);
}

[data-layout="wide"] {
  width: min(var(--soho-width-wide), calc(100% - 48px));
  margin-inline: auto;
}

[data-layout="standard"] {
  width: min(var(--soho-width-standard), calc(100% - 48px));
  margin-inline: auto;
}

[data-layout="narrow"] {
  width: min(var(--soho-width-narrow), calc(100% - 48px));
  margin-inline: auto;
}