/* =========================================================
   おかえりレター（letter.css / v15）
   ---------------------------------------------------------
   コンセプト：「由美さんから毎月届く、温かいお手紙」
   ・スマホ（899px以下）：mobile-sections.css のデザインのまま。
     ここでは「最新1件だけ表示」「写真は出さない」の2点だけを指定し、
     v15で増えた表示（2件目以降・アイキャッチ）が見た目を変えないようにしています。
   ・PC（900px以上）：開いた封筒から便せんが出ているような紹介と、
     ポストカード風のレター一覧（2〜3列）。
   ・飾り（封筒・切手・消印・ミモザ・小枝・封のハート）はCSSとSVGの線画です。
     画像に文字を焼き込んだものは使っていません。
   ・記事の中身（日付・タイトル・概要・リンク）は yomimono.js が出力したものを、そのまま並べ替えて表示します。
   ========================================================= */

/* ── スマホ：v15以前と同じ見た目を保つ ── */
@media (max-width: 899px) {
  #letter-latest > .letter-preview ~ .letter-preview { display: none; }
  #letter .letter-preview-photo { display: none; }
}

/* ── PC ── */
@media (min-width: 900px) {
  :root {
    --lt-paper: #fffdf9;
    --lt-hand: 'Caveat', 'Zen Maru Gothic', cursive;
    --lt-mimosa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 150'%3E%3Cg fill='none' stroke='%237db37d' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M40 148C34 110 30 70 34 6'/%3E%3Cpath d='M35 40 20 30M33 70 16 60M34 100 48 88M36 120 22 112M34 54 48 44'/%3E%3C/g%3E%3Cg fill='%23f3c74a'%3E%3Ccircle cx='34' cy='7' r='4'/%3E%3Ccircle cx='28' cy='12' r='3.4'/%3E%3Ccircle cx='39' cy='14' r='3.6'/%3E%3Ccircle cx='31' cy='20' r='3.2'/%3E%3Ccircle cx='20' cy='29' r='3.8'/%3E%3Ccircle cx='14' cy='34' r='3.2'/%3E%3Ccircle cx='22' cy='37' r='3'/%3E%3Ccircle cx='48' cy='43' r='3.6'/%3E%3Ccircle cx='53' cy='48' r='3'/%3E%3Ccircle cx='44' cy='50' r='2.8'/%3E%3Ccircle cx='16' cy='59' r='3.8'/%3E%3Ccircle cx='10' cy='64' r='3.2'/%3E%3Ccircle cx='19' cy='67' r='3'/%3E%3Ccircle cx='48' cy='87' r='3.8'/%3E%3Ccircle cx='54' cy='92' r='3'/%3E%3Ccircle cx='45' cy='95' r='2.8'/%3E%3Ccircle cx='22' cy='111' r='3.6'/%3E%3Ccircle cx='16' cy='116' r='3'/%3E%3C/g%3E%3Cg fill='%23e8a92c'%3E%3Ccircle cx='36' cy='26' r='2.6'/%3E%3Ccircle cx='26' cy='42' r='2.4'/%3E%3Ccircle cx='12' cy='70' r='2.4'/%3E%3Ccircle cx='50' cy='99' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
    --lt-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 90' fill='none' stroke='%237db37d' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 88C18 66 21 40 27 6'/%3E%3Cpath d='M21 70c-6-2-11-7-13-14 6 1 11 6 13 14z' fill='%23d6e8d3'/%3E%3Cpath d='M22 52c6-3 10-9 11-16-6 2-10 8-11 16z' fill='%23d6e8d3'/%3E%3Cpath d='M23 36c-6-2-10-7-11-13 6 1 10 6 11 13z' fill='%23d6e8d3'/%3E%3Cpath d='M26 18c4-3 7-7 7-12-5 2-7 7-7 12z' fill='%23d6e8d3'/%3E%3C/svg%3E");
    --lt-postmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 44' fill='none' stroke='%239a8a7a' stroke-width='1.1' opacity='.7'%3E%3Ccircle cx='22' cy='22' r='17'/%3E%3Ccircle cx='22' cy='22' r='12' stroke-dasharray='2 2.4'/%3E%3Cpath d='M42 14c8-4 14 4 22 0s14 4 24 0M42 22c8-4 14 4 22 0s14 4 24 0M42 30c8-4 14 4 22 0s14 4 24 0'/%3E%3C/svg%3E");
    --lt-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='%23df8178'/%3E%3Ccircle cx='20' cy='20' r='13.5' fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='1' stroke-dasharray='2 2'/%3E%3Cpath d='M20 27c-4.6-2.9-6.8-5.5-6.8-8 0-1.9 1.5-3.3 3.3-3.3 1.5 0 2.7.8 3.5 2 .8-1.2 2-2 3.5-2 1.8 0 3.3 1.4 3.3 3.3 0 2.5-2.2 5.1-6.8 8z' fill='%23fff'/%3E%3C/svg%3E");
  }

  html body #letter .section-label { font-family: var(--lt-hand) !important; }

  #letter {
    position: relative;
    background:
      radial-gradient(60% 520px at 50% 0, #f4ece0 0, rgba(244, 236, 224, 0) 75%),
      var(--t-ivory, #fbf7f0);
    overflow-x: clip;
  }
  #letter .t-wrap { --t-w: 1080px; position: relative; }

  /* ── 上部：開いた封筒と、そこから出ている便せん ── */
  /* 封筒の裏側（開いたフタ付き）… 便せんの後ろ */
  #letter .t-wrap::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 70px;
    width: 760px;
    height: 290px;
    margin-left: -380px;
    background: linear-gradient(180deg, #ead9bd, #e6d3b4);
    clip-path: polygon(0 34%, 50% 0, 100% 34%, 100% 100%, 0 100%);
    z-index: 0;
    pointer-events: none;
  }
  /* 封筒の表側（ポケット）… 便せんの下の端を包む＋封のハート */
  #letter .t-wrap::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 220px;
    width: 760px;
    height: 140px;
    margin-left: -380px;
    background:
      var(--lt-heart) no-repeat 50% 64% / 34px 34px,
      linear-gradient(180deg, #f3e6d0, #efdfc4);
    clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 -1px 0 rgba(150, 120, 85, 0.18));
    z-index: 2;
    pointer-events: none;
  }

  /* 便せん（見出し・紹介文） */
  #letter .t-head {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 640px;
    max-width: 100%;
    height: 330px;
    margin: 0 auto 94px;
    padding: 62px 64px 0;
    border-radius: 4px;
    background:
      var(--lt-postmark) no-repeat right 104px top 34px / 96px 47px,
      linear-gradient(180deg, #fdf9f1, #f8f0e2);
    box-shadow:
      10px 8px 0 -1px #f3eadb,                      /* 後ろに重なったもう1枚の便せん */
      10px 8px 0 0 rgba(150, 120, 85, 0.16),
      0 10px 26px rgba(70, 56, 47, 0.12),
      0 1px 2px rgba(70, 56, 47, 0.06);
    rotate: -1.2deg;
  }
  /* 左上のテープ */
  #letter .t-head::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 14px;
    width: 92px;
    height: 26px;
    background: rgba(214, 233, 208, 0.85);
    transform: rotate(-22deg);
  }
  /* 右上の切手（既存のおこめーの画像） */
  #letter .t-head::after {
    content: '';
    position: absolute;
    right: 30px;
    top: 26px;
    width: 58px;
    height: 68px;
    background: url("../../mascot-transparent.png") no-repeat center / 82px 82px, #dceef0;
    outline: 3px dotted #fff;
    outline-offset: -1px;
    box-shadow: 0 0 0 3px #dceef0, 0 2px 5px rgba(70, 56, 47, 0.16);
    rotate: 6deg;
  }
  #letter .section-label {
    order: 0;
    margin: 0 0 4px;
    font-size: 3.6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-dark, #43352a);
  }
  #letter .section-label::before { content: none; }
  #letter .t-head .t-title {
    order: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px 6px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--text-mid, #6a5848);
  }
  #letter .t-head .t-title::before { content: ''; width: 24px; height: 1px; background: currentColor; }
  #letter .t-lead {
    order: 2;
    margin: 0 0 0 6px;
    font-size: 1rem;
    line-height: 2;
    color: var(--text-dark, #43352a);
  }

  /* ミモザと小枝（封筒の左右） */
  #letter::before,
  #letter::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 3;
  }
  #letter::before {
    left: calc(50% + 318px);
    top: calc(var(--t-sec-y, 112px) + 34px);
    width: 92px;
    height: 230px;
    background: var(--lt-mimosa) no-repeat center / contain;
    transform: rotate(12deg);
  }
  #letter::after {
    left: calc(50% - 424px);
    top: calc(var(--t-sec-y, 112px) + 210px);
    width: 44px;
    height: 100px;
    background: var(--lt-sprig) no-repeat center / contain;
    transform: rotate(-18deg);
  }

  /* ── 下部：ポストカード風のレター一覧（2〜3列） ── */
  /* 1行に3枚（900pxでも3列）。記事が1〜2件のときは中央にそろえる */
  #letter-latest {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
  }
  #letter-latest > .letter-preview { flex: 0 0 calc((100% - 56px) / 3); max-width: 330px; min-width: 0; }
  #letter #letter-latest > .y-empty { flex: 1 0 100%; text-align: center; }
  #letter .letter-preview {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: none;
    padding: 14px 14px 18px;
    border: 1px solid #eadfcd;
    border-radius: 6px;
    background: var(--lt-paper);
    box-shadow: 0 1px 0 #f1e8da, 0 10px 22px rgba(70, 56, 47, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  /* ポストカードの内側の点線の枠 */
  #letter .letter-preview::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px dashed rgba(196, 150, 120, 0.35);
    border-radius: 3px;
    pointer-events: none;
  }
  #letter .letter-preview:hover { transform: translateY(-3px); box-shadow: 0 1px 0 #f1e8da, 0 16px 28px rgba(70, 56, 47, 0.11); }
  #letter .letter-preview:nth-child(3n+1) { rotate: -0.6deg; }
  #letter .letter-preview:nth-child(3n+3) { rotate: 0.6deg; }
  #letter .letter-preview .y-sample { top: 20px; right: 20px; }

  /* 写真（アイキャッチがある記事だけ） */
  #letter .letter-preview-photo {
    order: 0;
    display: block;
    margin-bottom: 16px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 3px;
    background: #f3ece0;
  }
  #letter .letter-preview-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* 本文：日付 → タイトル → 抜粋 → 続きを読む */
  #letter .letter-preview-body {
    order: 1;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 4px 8px 0;
  }
  #letter .letter-preview:not(.has-photo) .letter-preview-body { padding-top: 22px; }
  #letter .letter-preview-meta { font-size: 0.78rem; }
  #letter .letter-preview-title { font-size: 1.12rem; line-height: 1.6; margin-bottom: 0.6rem; }
  #letter .letter-preview-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-bottom: 14px;
    font-size: 0.86rem;
    line-height: 28px;
    background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(196, 160, 120, 0.22) 27px 28px);  /* 便せんの罫線 */
  }
  #letter .letter-preview .y-textlink { margin-top: auto; align-self: flex-start; color: var(--c-coral-ink, #c4493f); }

  /* 差出人（手紙の最後の署名のように） */
  #letter .letter-preview-author {
    order: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
    margin: 16px 8px 0;
    padding-top: 12px;
    border-top: 1px dashed rgba(150, 120, 85, 0.3);
  }
  #letter .letter-preview-author .y-avatar--lg { width: 36px; height: 36px; }
  #letter .letter-preview-author .y-author-name { font-size: 0.82rem; }
  #letter .letter-preview-author .y-author-title { font-size: 0.7rem; }

  /* 「すべてのおかえりレターを見る」＝枠付きの丸ボタン */
  #letter .letter-more { margin-top: 52px; text-align: center; }
  #letter .letter-more .y-textlink {
    justify-content: center;
    min-width: 360px;
    min-height: 56px;
    padding: 12px 32px;
    border: 1.5px solid var(--c-coral-ink, #c4493f);
    border-radius: 999px;
    background: var(--lt-paper);
    color: var(--c-coral-ink, #c4493f);
    text-decoration: none;
  }
  #letter .letter-more .y-textlink:hover,
  #letter .letter-more .y-textlink:focus-visible { background: #fdf0ed; opacity: 1; }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  #letter .letter-preview { transition: none; }
  #letter .letter-preview:hover { transform: none; }
}