/* =========================================
   base/layout.css  (FRAME ONLY)
   FINAL - structural, no legacy, no overrides
   POLICY:
   - NO text control (font-size/weight/line-height/color) -> core.css + HTML t-*/c-* only
   NOTE:
   - Footer "old style" requires dark band background + stick-to-bottom behavior.
   - Minimal, scoped color assist is applied only inside footer for readability
     (because footer markup uses c-muted).
========================================= */

/* =================================================
   0) Page skeleton (footer to bottom)
   - Make footer stay at bottom when content is short
================================================= */
html, body{
  height: 100%;
}

body{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Main should grow, footer should not */
.l-main{
  flex: 1 0 auto;
}

.l-footer{
  flex-shrink: 0;
}

/* =================================================
   1) Container
================================================= */
.l-container{
  max-width: var(--main-default, 1060px);
  margin: 0 auto;
  padding: 0 18px;
}

/* =================================================
   2) Header
================================================= */
.l-header{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.l-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}

/* =================================================
   3) Brand
================================================= */
.c-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit; /* inherits from body; not a text style override */
}

/* =================================================
   4) Nav
================================================= */
.c-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =================================================
   5) Buttons (最低限) - visual only
================================================= */
.c-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h, 40px);
  padding: 0 14px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--surface);
  white-space: nowrap;
}

/* =================================================
   6) Main frame
================================================= */
.l-main{
  padding-top: calc(18px + var(--top-gap, 0px));
  padding-bottom: 18px;
}

.l-main__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail, 260px);
  gap: var(--gap, 22px);
  align-items: start;
}

.l-main__col{
  min-width: 0;
}

.l-rail{
  width: var(--rail, 260px);
  min-width: 0;
}

/* =================================================
   7) Content wrapper
   - other pages: padding
   - top pages: use modifier .l-content--flush
================================================= */
.l-content{
  min-width: 0;
  padding: 0 0px;
}

.l-content--flush{
  padding: 0;
}

/* =================================================
   8) Footer (old style: dark band)
   - Full width band, centered text, like "昔の footer"
================================================= */
.l-footer{
  margin-top: 0;
  padding: 22px 0;
  border-top: 0;
  background: var(--navy);
}

/* If footer uses .l-container inside, it will stay centered automatically. */
.l-footer .l-container{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* gives the "band" feel */
}

/* Scoped readability assist (footer markup uses c-muted) */
.l-footer .c-muted{
  color: rgba(255,255,255,.65);
}

/* =================================================
   9) Responsive
================================================= */
@media (max-width: 980px){
  .l-header__inner{
    flex-wrap: wrap;
    justify-content: center;
  }

  .l-main__grid{
    grid-template-columns: 1fr;
  }

  .l-rail{
    width: auto;
  }
}