/* =========================================================
   bareframe/layout.css
   役割：レイアウト骨格（side/main）、front状態時の舞台分割（stage/grid）、
         gridの基本レイアウト、そして main 内の「中間レイヤー」制御を担う。
   方針：暗さ・透過は原則画像側で管理（CSSで意味を足さない）
   ========================================================= */

/* =========================================================
   0) LAYOUT SHELL（外枠）
   - .side：導線/メニュー領域（PCは左固定、Mobileは上）
   - .main：右カラム（コンテンツを載せる器／frontではサイズ支配者）
   ========================================================= */

.side{
  /* Mobileでは上に置く（PCでだけ固定サイドに切替） */
  padding: var(--pad);
  border-bottom: 1px solid var(--line-2);

  /* side refinement：上に少し余裕を足して「余白の体感」を作る */
  padding-top: calc(var(--pad) * 1.25);

  /* side background：メニュー領域の世界観 */
  background-image: url("../images/menu-back.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main{
  /* main：通常ページでは内側余白を持つ（frontでは後段で0に上書き） */
  padding: var(--pad);

  /* =======================================================
     0-1) MAIN AS LAYER PARENT（中間レイヤーの親）
     役割：main と（stage/grid等の）実コンテンツの間に
           “描画専用レイヤー”を挟むための土台になる。
     ======================================================= */
  position: relative;

  /* overflow: hidden; */ /* front(PC)でのみ付与（後段参照） */
}

/* =========================================================
   0-2) MAIN MIDDLE LAYER（疑似要素で挟む）
   役割：main の背景とコンテンツの間に「1枚絵」を差し込む。
   重要：クリック/スクロールを邪魔しない（pointer-events:none）
   ========================================================= */

.main::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image: url("../images/main-layer.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   0-3) CONTENT ABOVE LAYER（コンテンツはレイヤーより上）
   ========================================================= */

.stage,
.grid{
  position: relative;
  z-index: 2;
}

/* =========================================================
   1) BRAND / MENU（side 内）
   ========================================================= */

.brand{
  font-family: var(--mono);
  font-size: 42px;
  letter-spacing: .04em;
  margin-bottom: 18px;
}

.brand__link{ display: inline-block; }

.menu{
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}

.menu__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.menu__list a,
.menu__fallback .menu__link{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}

.menu__list a:hover,
.menu__fallback .menu__link:hover{ color: var(--fg); }

/* =========================================================
   2) GRID（Mobile default）
   ========================================================= */

.grid{
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

/* =========================================================
   3) FRONT VISUALS（画像のみ）
   ========================================================= */

body.is-front .grid{
  background-image: url("../images/top-grid-back.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   4) PC MODE（>=1024px）
   ========================================================= */

@media (min-width: 1024px){

  :root{
    --side-w: 330px; /* 220px × 1.5 */
  }

  body{
    display: grid;
    grid-template-columns: var(--side-w) 1fr;
    min-height: 100vh;
  }

  .side{
    position: sticky;
    top: 0;
    height: 100vh;
    border-bottom: none;
    border-right: 1px solid var(--line-2);
  }

  .main{
    min-width: 0;
    padding: 14px; /* 通常ページの余白 */
  }

  .grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .menu__list a,
  .menu__fallback .menu__link{
    font-size: 38px;
    line-height: 1.35;


  }




/* メニュー項目：境界線は li が支配 */
.menu__list li{
  padding-bottom: 6px;                      /* 線との距離 */
  border-bottom: 2px solid var(--line-2);
}

/* hover：線を少しだけ明るく（確認用） */
.menu__list li:hover{
  border-bottom-color: rgba(255,255,255,.28);
}

/* メニュー項目：境界線 */
.menu__list li{
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line-2);
}

/* hover：境界を少し明るく */
.menu__list li:hover{
  border-bottom-color: rgba(255,255,255,.28);
}

/* 文字リンク：初期位置 */
.menu__list a{
  display: inline-block; /* transform有効化 */
  transition: transform .14s ease-out;
}

/* hover時：文字だけ右へ8px */
.menu__list li:hover a{
  transform: translateX(8px);
}

.menu__list a{
  transition: transform .12s linear;
}



  .menu__list{
    gap: 13px;
  }

  /* =======================================================
     5) FRONT INTEGRATION（PC時：main がサイズを支配）
     重要：frontでは main の padding を 0 にして「直嵌め」を成立させる。
           余白が必要なら stage/grid 側に持たせる（主権移譲）。
     ======================================================= */

  body.is-front .main{
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;

    /* ★修正点：mainの内側余白を消して、stage/gridを枠に直嵌め */
    padding: 0;
  }

  body.is-front .stage{
    flex: 8 0 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
  }

  body.is-front .grid{
    flex: 2 0 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: auto;
  }
}



/* =========================================================
   6) FRONT：微調整（PCのみ）
   - ここは「隙間(演出)」の領域なので、直嵌め確認後に入れるのが安全。
   ========================================================= */

/* ※現時点では “直嵌め” の確認を優先し、隙間演出は一旦コメントアウト推奨 */
/*
@media (min-width: 1024px){
  body.is-front .stage{
    margin-bottom: 12px;
    border-bottom: none;
  }
  body.is-front .grid{
    padding-bottom: 12px;
  }
}
*/



/* =======================================================
   FRONT INTEGRATION（PC時）
   ======================================================= */

@media (min-width: 1024px){

  body.is-front .main{
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;

    /* 演出：mainとstage/gridの最小距離 */
    padding: 5px;
  }

  body.is-front .stage{
    flex: 8 0 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
  }

  body.is-front .grid{
    flex: 2 0 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: auto;
  }
}

body.is-front .grid{
  position: relative; /* ★疑似要素の土台 */
  background-image: url("../images/top-grid-back.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ★grid上端：stageと馴染ませる接着フェード */
body.is-front .grid::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background: linear-gradient(to top,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.45) 100%);
}

/* grid内のplate等をフェードより前に */
body.is-front .grid > *{
  position: relative;
  z-index: 1;
}