/* =================================================================== */
/* Kaname モバイル統一CSS（kaname_mobile.css）                       */
/*   担当：モバイル品質（全体統一）。base.html で他CSSより「後」に読込。  */
/*   目的：                                                            */
/*     A. 横はみ出し（見切れ）の根絶 — 全ページ scrollWidth==clientWidth */
/*     B. サイズ基準の正規化 — ページごとにバラついた                    */
/*        文字/見出し/カード/ボタン/入力/左右余白を共通値へそっと寄せる。  */
/*     C. 下部固定タブバーへの本文被り防止（safe-area 込み）。           */
/*     D. prefers-reduced-motion 尊重・既存挙動非破壊。                 */
/*   方針：色/影/角丸テイスト等の「装飾」は壊さず、寸法だけ正規化する。   */
/*         既存値が極端なときだけ共通値に寄せる（!important は最小限）。   */
/*   既存トークン（--kt-*）は kaname.css のものを再利用。              */
/* =================================================================== */

/* ------------------------------------------------------------------ */
/* 0. 統一の基準値（このファイル内だけで使う寸法トークン）             */
/* ------------------------------------------------------------------ */
:root {
  --ktm-pad-x: 16px;        /* ページ左右の共通パディング */
  --ktm-content-max: 480px; /* コンテンツ最大幅（既存 .kt-inner と一致） */
  --ktm-tap: 44px;          /* タップ最小ターゲット（ボタン/リンク/入力） */
  --ktm-card-radius: 16px;  /* カードの基準角丸 */
  --ktm-card-pad: 16px;     /* カードの基準パディング */
  --ktm-h1: 22px;           /* 見出し階層：大見出し/ヒーロー */
  --ktm-h2: 18px;           /* 見出し階層：セクション見出し */
}

/* ================================================================== */
/* A. 横はみ出し（見切れ）の根絶                                       */
/* ================================================================== */

/* A-1. box-sizing を全要素で border-box に統一（padding/border が幅を膨らませない）。 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* A-2. ルートで横方向のはみ出しを断つ。
   clip は scroll を生まないので、位置固定の下部タブバーや sticky を壊さない。
   tabbar.css でも body に付与済みだが、html 側にも保険で効かせる。 */
html,
body {
  overflow-x: clip;
}

/* A-3. 置換要素・コード・表・埋め込みが器を超えない。 */
img,
video,
svg,
canvas,
iframe,
embed,
object,
audio {
  max-width: 100%;
  height: auto;
}
/* 画像で width/height 属性が効いて縦が潰れる事故を避けつつ、はみ出しは抑える */
svg,
canvas { height: auto; }

/* A-4. 長い英数字・URL・連続数字が一行で器を突き破るのを防ぐ。 */
body,
p, li, dd, dt, a, span, small, strong, em, label, td, th, h1, h2, h3, h4, h5, h6,
.kt-card, .kt-card-body, .kt-lead, .kt-num, blockquote, figcaption {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* A-5. コードや整形済みテキストは横スクロールではみ出しを内側に閉じ込める。 */
pre,
code,
kbd,
samp {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A-6. 表は器内に収め、必要なら表だけ内部スクロール（ページ全体を割らない）。 */
table {
  max-width: 100%;
  /* セル詰まりで横に伸びるのを抑える */
  table-layout: fixed;
}

/* A-7. グリッド/フレックスの子が min-content で器を割る古典バグの保険。
   レイアウトの“見た目”は変えず、はみ出しの原因だけ抑える。 */
.kt-wrap,
.kt-inner,
.kt-pop,
.kt-lively,
main,
section,
article {
  min-width: 0;
}

/* A-8. ビューポート幅指定で発生しがちな見切れの保険。
   100vw はスクロールバー分はみ出し得るので、最大幅を画面内に締める。 */
[style*="100vw"],
[style*="width: 100vw"] {
  max-width: 100%;
}

/* ================================================================== */
/* B. サイズ基準の正規化（ページ間のバラつきを共通値へ寄せる）          */
/*   ※ スマホ幅（≤480px）でのみ適用。PC等の見え方は変えない。          */
/* ================================================================== */
@media (max-width: 480px) {

  /* B-1. 本文の基準：font-size 16px / 行間 約1.7。
     :root ではなく body に当て、各レイヤーの局所指定は尊重する。 */
  body {
    font-size: 16px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;   /* iOS の勝手な拡大を止める */
  }

  /* B-2. ページ左右パディングとコンテンツ最大幅の統一。
     既存 .kt-wrap は padding:40px 20px。横方向だけ共通の 16px に寄せ、
     縦の余白テイストは保つ。 */
  .kt-wrap {
    padding-left: var(--ktm-pad-x);
    padding-right: var(--ktm-pad-x);
  }
  .kt-inner {
    max-width: var(--ktm-content-max);
  }

  /* B-3. 見出し階層を穏やかに揃える。
     ヒーロー/大見出しが 30〜33px と過大なページがあるので、
     スマホでは読みやすい上限へ寄せる（装飾色・字体は維持）。 */
  .kt-hero,
  h1 {
    font-size: clamp(20px, 6.2vw, var(--ktm-h1));
    line-height: 1.3;
  }
  h2,
  .kt-card-title,
  .kt-sec-title {
    font-size: clamp(17px, 5vw, var(--ktm-h2));
    line-height: 1.35;
  }

  /* B-4. カードの寸法を共通の基準へ寄せる（角丸・内側余白）。
     ポップ層は border-radius 22〜26px と大きめ。テイストは残しつつ、
     スマホ幅だけ過大な角丸/余白を読みやすい基準に近づける。 */
  .kt-card {
    border-radius: var(--ktm-card-radius);
    padding: var(--ktm-card-pad);
  }
  .kt-pop .kt-card {
    /* ポップの“チャンキー感”を少し残しつつ揃える */
    border-radius: 18px;
    padding: var(--ktm-card-pad);
  }

  /* B-5. ボタン/リンクボタン/入力の最小タップ高 44px を全ページで担保。
     既存の見た目（角丸999px・色）は壊さず、高さの下限だけ揃える。 */
  .kt-btn,
  button,
  [role="button"],
  input,
  select,
  textarea {
    min-height: var(--ktm-tap);
  }
  /* タップ可能リンクの当たり判定も最低限確保（行内テキストリンクは除外）。 */
  .kt-tabbar-item,
  .kt-btn {
    min-height: var(--ktm-tap);
  }
}

/* ================================================================== */
/* C. 下部固定タブバーへの本文被り防止（safe-area 込み）              */
/*   tabbar.css でも body に padding-bottom を入れているが、ここでも   */
/*   --ktm を基準に重ねて担保（後勝ちで確実に効かせる）。             */
/* ================================================================== */
body {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
}

/* ================================================================== */
/* D. モーション配慮（既存挙動は壊さず、過剰な動きだけ止める）        */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}