/* assets/css/base.css
   CryptoDepth — foundation & container alignment
   Layers: base (this file also provides full-bleed→container alignment)
===================================================== */

@layer base, comp, pages, util;

@layer base {

/* =========================
   Theme tokens / dimensions
========================= */
:root{
  --cd-bg:        #0b1016;
  --cd-fg:        #e6edf3;
  --cd-muted:     #a7b0ba;
  --cd-accent:    #7de3ff;
  --cd-link:      #7de3ff;
  --cd-card-bg:   #0f141b;
  --cd-border:    rgba(255,255,255,.10);
  --cd-radius-lg: 16px;
  --cd-gap:       16px;

  /* Reading width (統一) */
  --cd-read-width: 760px;
  --cd-gutter:     16px;

  /* Site container (中央寄せ基準) */
  --container-max: 1200px;
  /* フルブリード要素の“中身”だけをコンテナ位置に揃えるための内側パディング */
  --container-pad: max(var(--cd-gutter), calc(50vw - var(--container-max) / 2));
}

/* =============
   Light reset
============= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

body{
  background: var(--cd-bg);
  color: var(--cd-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings / Links / Media */
h1, h2, h3, h4, h5, h6{
  color: var(--cd-fg);
  margin: 0 0 .5em;
}
a{
  color: var(--cd-link);
  text-decoration:none;
}
a:hover{
  text-decoration: underline;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* ============================
   Global container (中央寄せ)
============================ */
.site-inner,
.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--cd-gutter);
}

/* ================================
   Full-bleed → container alignment
   （マークアップ変更なしで揃える保険）
================================ */

/* 任意の要素を「中身だけコンテナ位置に揃える」ためのユーティリティ */
.u-align-container{
  padding-inline: var(--container-pad);
}

/* 直接当てる版（既存構造をそのまま生かす） */
.site-header > .header-inner,
.cd-related,
.site-footer .footer-inner{
  padding-inline: var(--container-pad);
}

/* 関連記事内コンテナ（カードグリッドを本文と同じ幅に収める） */
.cd-related__inner{
  max-width: var(--container-max);
  margin-inline: auto;
}
.cd-related__inner .entry-grid{
  margin-top: 12px; /* 体裁維持 */
}

} /* @layer base */


/* ====== utilities (optional) ====== */
@layer util {
  .mt-0{margin-top:0!important}
  .mb-0{margin-bottom:0!important}
  .hidden{display:none!important}
  .text-center{text-align:center}
  .u-sr-only{
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }
  .u-sr-only:focus,
  .u-sr-only:active{
    position:static !important;
    width:auto;
    height:auto;
    margin:0;
    clip:auto;
    clip-path:none;
    white-space:normal;
    display:inline-block;
    padding:6px 10px;
    border-radius:8px;
    background: var(--cd-accent);
    color:#000;
    text-decoration:none;
  }
}


/* 固定ページ本文の読み幅（classで明示的に適用） */
.page .entry-content.is-reading{
  max-width: var(--cd-read-width);
  margin-inline: auto;
  padding-inline: 0;
}