/* ===== 十字架 年表 専用スタイル（スマホ余白＆sticky安定） ===== */
:root{
    --brand:#ff9800;
    --bg:#fff8f0;
    --text:#333;
    --muted:#777;
    --line:#e6d6c4;
    --card:#fff;
    --shadow:0 10px 24px rgba(0,0,0,.07);
    --radius:14px;

    /* レイアウト */
    --card-max-width: 1024px;   /* 各カード束の最大横幅（PC） */
    --media-col-width: 520px;   /* 右の動画カラム幅（PC） */

    /* sticky位置（ヘッダー高さに合わせて） */
    --sticky-top: 56px;

    /* タイポ（可変） */
    --title-size: clamp(20px, 4.8vw, 26px);
    --title-line: 1.38;
    --date-size: clamp(14px, 3.5vw, 15px);
    --vdate-size: clamp(13px, 3.2vw, 14px);
    --members-head-size: clamp(13px, 3.2vw, 14px);

    /* 年チップ・リンク */
    --chip-py: 8px; --chip-px: 12px;
    --btn-py: 10px; --btn-px: 14px;

    /* ★SPの右側の“ちょい余白” */
    --card-gap-sp: 16px;
  }

  /* はみ出し対策 */
  *{ box-sizing:border-box; }
  html,body{ width:100%; overflow-x:hidden; }
  img,video{ max-width:100%; height:auto; display:block; }

  /* 親の overflow で sticky が死なないようにしておく */
  main, .tl-container, .tl-root, .tl-year{ overflow:visible !important; }

  @media (max-width: 480px){
    :root{
      --media-col-width: 100%;
      --sticky-top: 64px;         /* スマホは少し下げる（ヘッダーに合わせて調整OK） */
      --card-gap-sp: 16px;
    }
  }
  @media (max-width: 360px){
    :root{
      --sticky-top: 68px;         /* 極小画面はさらに下げる */
      --chip-py: 7px; --chip-px: 10px;
      --btn-py: 9px;  --btn-px: 12px;
      --card-gap-sp: 12px;
    }
  }

  .tl-container{
    background:var(--bg);
    color:var(--text);
    padding:16px;
    max-width:1200px;
    margin:0 auto;
  }
  @media (max-width:480px){
    .tl-container{ padding:12px; }
  }
  @supports(padding:max(0px)){
    /* iOSセーフエリア */
    .tl-container{
      padding-left:max(12px, env(safe-area-inset-left));
      padding-right:max(12px, env(safe-area-inset-right));
    }
  }

  /* ローディング */
  .tl-loading{ padding:24px; text-align:center; color:var(--muted); }

  /* 年チップバー（横スクロール） */
  .tl-yearbar{ display:flex; gap:8px; overflow-x:auto; padding:8px 2px; margin:8px 0 16px; scrollbar-width:thin; }
  .tl-yearbar::-webkit-scrollbar{ height:8px }
  .tl-yearbar::-webkit-scrollbar-thumb{ background:#e2e2e2; border-radius:999px }
  .tl-chip{
    padding:var(--chip-py) var(--chip-px); border-radius:999px;
    background:#ffe0b2; border:1px solid #ffd8a6;
    font-weight:700; color:#5a3a00; cursor:pointer; white-space:nowrap;
    font-size:clamp(12px, 3.4vw, 14px);
  }
  .tl-chip[aria-current="true"]{ background:#ffcc80; border-color:#ffb74d }

  /* 年セクション */
  .tl-year{ margin:22px 0 28px; }

  /* 数字バッジだけ追従（帯は出さない） */
  .tl-year-head{
    position: -webkit-sticky;    /* iOS対策 */
    position: sticky;
    top: var(--sticky-top);       /* ← ここを固定値にしないこと！ */
    z-index: 6;
    background: transparent;
    backdrop-filter: none;
    padding: 0;
    margin: 0 0 10px;
    display: block;
  }
  .tl-year-badge{
    background:var(--brand); color:#fff;
    padding:6px 12px; border-radius:999px; box-shadow:var(--shadow);
    font-weight:800; letter-spacing:.4px; display:inline-flex; align-items:center; gap:8px;
    font-size: clamp(13px, 3.6vw, 14px);
    position: static;             /* バッジ自体は sticky にしない */
  }

  /* 月タイトル */
  .tl-month{ margin:10px 0 16px; scroll-margin-top:calc(var(--sticky-top) + 16px); }
  .tl-month-title{ display:flex; align-items:center; gap:10px; color:#6b4200; font-weight:800; margin:8px 0 10px; }
  .tl-month-title .dot{ width:8px; height:8px; border-radius:999px; background:var(--brand); display:inline-block }

  /* 縦タイムライン（歴史年表） */
  .tl-list{
    position:relative;
    margin-left:16px;         /* PCの“溝” */
    padding-left:22px;
    max-width: var(--card-max-width);
  }
  .tl-list::before{ content:""; position:absolute; left:6px; top:0; bottom:0; width:2px; background:var(--line); }

  /* スマホは溝を圧縮＋右に余白を足して“ピタッ”感を解消 */
  @media (max-width: 480px){
    .tl-list{
      margin-left:8px;
      padding-left:16px;
      padding-right: var(--card-gap-sp);   /* ★ 右側に余白を付加 */
    }
    .tl-list::before{ left:4px; }
    .tl-card{ margin-left:0; margin-right: var(--card-gap-sp); } /* ★ カードも右に余白 */
    .tl-dot{ left:0; }
  }

  /* アイテム */
  .tl-item{ position:relative; margin:0 0 16px; display:block; }

  /* ドット */
  .tl-dot{
    position:absolute; left:1px; top:14px;
    width:10px; height:10px; border-radius:999px; background:var(--brand);
    box-shadow:0 0 0 2px #fff;
  }

  /* カード */
  .tl-card{
    margin-left:18px;                 /* PCは少し右に寄せて余白感 */
    background:var(--card);
    border:1px solid #f0e7db;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:12px;
    width:100%;
  }
  @media (max-width:480px){
    .tl-card{ padding:10px; border-radius:12px; }
  }

  /* 2カラム（PC）→ SPは1カラム */
  .tl-card-body{ display:grid; gap:12px; }
  @media (min-width: 900px){
    .tl-card-body{
      grid-template-columns: 1fr var(--media-col-width);
      align-items:start;
      gap:16px;
    }
  }

  /* タイトル（改行対応） */
  .tl-title{
    position:relative;
    margin:0 0 10px;
    padding-left:12px;                 /* アクセントバーの余白 */
    font-size:var(--title-size);
    line-height:var(--title-line);
    font-weight:900;
    letter-spacing:.2px;
    word-break:keep-all;
    overflow-wrap:anywhere;
    white-space: pre-line;             /* \n を改行として表示 */
  }
  .tl-title::before{
    content:"";
    position:absolute; left:0; top:.2em; bottom:.2em;
    width:4px; border-radius:3px; background:var(--brand);
  }

  /* メタ（投稿日） */
  .tl-meta{
    display:flex; gap:12px; flex-wrap:wrap;
    font-size:var(--date-size);
    color:#5a4a2a;
    margin-bottom:10px;
  }
  .tl-meta .tl-date{ font-weight:800; }

  /* 「十字架対象」見出し＋メンバー */
  .tl-members-block{ margin:6px 0 12px; }
  .tl-members-head{
    font-size:var(--members-head-size);
    font-weight:900; color:#3a2a00; letter-spacing:.2px;
    display:flex; align-items:center; gap:6px;
  }
  .tl-members-head::before{ content:""; width:8px; height:8px; border-radius:999px; background:var(--brand); display:inline-block; }
  .tl-members{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 0; }
  .tl-chip-m{
    --m:#ddd;
    display:inline-flex; align-items:center; gap:6px;
    font-size:clamp(12px, 3.2vw, 13px);
    font-weight:700; color:#3a2a00;
    padding:6px 8px; border-radius:999px; background:color-mix(in hsl, var(--m) 28%, white);
    border:1px solid color-mix(in hsl, var(--m) 60%, white);
  }

  /* 右：動画＋ボタン */
  .tl-media{ width:100%; display:flex; flex-direction:column; gap:10px; }
  .tl-v{ border:1px solid #eee; border-radius:12px; overflow:hidden; background:#f7f7f7; width:100%; }
  .tl-v img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
  .tl-vinfo{ padding:8px 10px; background:#fff; }
  .tl-vtitle{ font-size:clamp(13px, 3.4vw, 14px); font-weight:800; margin:0; line-height:1.5; }
  .tl-vdate{ margin-top:4px; font-size:var(--vdate-size); color:#5a4a2a; font-weight:700; }

  /* ボタン */
  .tl-links{ display:flex; gap:10px; flex-wrap:wrap; }
  .tl-link{
    display:inline-flex; align-items:center; gap:6px;
    font-size:clamp(13px, 3.6vw, 14px); font-weight:800; color:#5a3a00;
    background:#fff3e0; border:1px solid #ffe0b2;
    padding:var(--btn-py) var(--btn-px); border-radius:10px; text-decoration:none;
    min-height:40px;
  }
  .tl-link:hover{ background:#ffead1 }
  @media (max-width:360px){
    .tl-links{ gap:8px; }
    .tl-link{ width:100%; justify-content:center; }  /* 極小画面はフル幅ボタン */
  }

  /* ページトップへ */
  .tl-backtop{
    position:fixed; right:16px; bottom:16px; width:44px; height:44px; border:none; border-radius:999px;
    background:var(--brand); color:#fff; box-shadow:var(--shadow); display:grid; place-items:center;
    opacity:0; pointer-events:none; transition:transform .12s ease, opacity .12s ease;
  }
  .tl-backtop.show{ opacity:1; pointer-events:auto }
  .tl-backtop:hover{ transform:translateY(-2px) }
  @supports(padding:max(0px)){
    .tl-backtop{ bottom:calc(16px + env(safe-area-inset-bottom)); }
  }


  .tl-year-float{
    position: fixed;
    top: var(--sticky-top);
    left: calc(12px + env(safe-area-inset-left, 0px));
    z-index: 9;
    background: var(--brand);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: var(--shadow);
    font-weight: 800;
    font-size: clamp(13px, 3.6vw, 14px);
    pointer-events: none; /* タップを邪魔しない */
  }
  .tl-year-float[hidden]{ display:none; }