@charset "UTF-8";
/* ============================================================
   祈りの杜 quality.css — 仕上げの追加スタイル
   読み込み順は既存CSSの最後。既存の値を上書きするため、同じか少し強い
   セレクタを使い、!important は使わない。新しい絵・動きは加えない。
   目的: 字間と余白を落ち着かせる／小さな文字と操作領域の底上げ／
         トップ・選択・紹介・祈り・読誦の統一感／長い名前と320px幅の収まり
   ============================================================ */

/* ------------------------------------------------------------
   1. 共通トークン: 鈍い金色とフォーカス色
   ------------------------------------------------------------ */
:root{
  --q-gold:#8f7d55;        /* 番号・印など、少量のアクセント用 */
  --q-gold-deep:#7a6a45;   /* 小さな文字で使う金（紙の上で約5:1） */
  --q-focus:#8a6a2f;       /* 明るい紙の上のフォーカス枠 */
  --q-focus-light:#e6d39b; /* 深緑・暗い背景の上のフォーカス枠 */
}

/* 暗い面（ヒーロー・フッター）の上では明るいフォーカス枠にする */
.home-hero :focus-visible,
.site-footer :focus-visible{outline-color:var(--q-focus-light)}

/* ------------------------------------------------------------
   2. ヘッダー: 字間を控えめに、ナビの操作領域を44pxに
   ------------------------------------------------------------ */
.brand-name{letter-spacing:.16em}
.brand-reading{font-size:10px;letter-spacing:.3em}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;padding:0}

/* ------------------------------------------------------------
   3. 見出しの字間: 明朝の見出しは広げすぎない
   ------------------------------------------------------------ */
.hero-copy h1{letter-spacing:.1em}
.vertical-poem{letter-spacing:.3em}
.home-hero .vertical-poem{background:#10261b80;padding:15px 10px;text-shadow:0 1px 3px #10261b}
.intro-section h2{letter-spacing:.12em}
.page-heading h1{letter-spacing:.08em}
.quiet-message{letter-spacing:.14em}
.atlas-heading h1 rt{font-size:11px;letter-spacing:.25em}

/* ------------------------------------------------------------
   4. ふりがなの最小サイズ: 8〜9pxは読めないため10px以上に
   ------------------------------------------------------------ */
.quiet-scriptures rt{font-size:10px}
@media(max-width:760px){
  rt{font-size:10px}
  .card-copy rt{font-size:10px}
}
@media(max-width:360px){
  .reflection-presence h1 rt{font-size:10px}
}

/* ------------------------------------------------------------
   5. ボタン・入力: 角を揃える（角丸カードの乱用を避け、直線で統一）
   ------------------------------------------------------------ */
.month-navigation button,
.catalog-pagination button,
.scripture-size button,
.atlas-tools button,
.atlas-empty button,
.atlas-art-zoom,
.atlas-dialog-close,
.atlas-preview-open,
.quiet-exit,
.month-table button,
.reflection-paper textarea{border-radius:0}
.atlas-view-bar a span{border-radius:0;padding:1px 8px}
/* iOSで入力時に拡大されないよう16pxに揃える */
.atlas-gallery-controls input,
.atlas-gallery-controls select{font-size:16px}

/* ------------------------------------------------------------
   6. 操作領域: 下線リンクの縦方向の当たりを44px程度に
   ------------------------------------------------------------ */
.breadcrumbs{align-items:center;min-height:56px;padding:6px 0}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:44px}
.breadcrumbs span[aria-current]{min-width:0;overflow-wrap:anywhere}

.source-link{display:inline-block;padding-block:9px}
.section-sources,.inline-source{gap:0}
.scripture-sources .source-link{margin-top:8px}

.calendar-caption a,
.calendar-source-links a,
.real-place-links a{display:inline-block;padding-block:9px}

.scripture-source-jump,
.scripture-return{display:inline-block;padding:10px 0;border-bottom:0;text-decoration:underline;text-underline-offset:5px}

.atlas-footnote>a{display:inline-flex;align-items:center;min-height:44px;padding:0;text-decoration:underline;text-underline-offset:5px}

/* 方針ページの本文中リンク: 行の高さを崩さず当たりだけ広げる（inlineの上下paddingは行送りに影響しない） */
.policy-section p .text-link{display:inline;min-height:0;padding:8px 0;border-bottom:0;text-decoration:underline;text-underline-offset:4px}

/* フッター先頭の「お経・祝詞を読む」を他のフッターリンクと同じ線付きに */
.footer-scriptures{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-bottom:18px;border-bottom:1px solid #6d8068;color:#f0f0e7}
.footer-scriptures:hover{color:#d9c99f}

/* ------------------------------------------------------------
   7. トップ: スマホで画像の余白に本題を遠ざけない
   ------------------------------------------------------------ */
@media(max-width:760px){
  .home-hero{min-height:0;height:auto;max-height:none}
  .hero-copy{padding:44px 8% 72px}
  .hero-copy h1{margin:22px 0 24px}
  .hero-copy .hero-entrances{margin-top:26px}
}

/* ------------------------------------------------------------
   8. 一覧（お名前から探す）
   - 「〜画面へ戻る」リンクと検索ラベルが密着していたので間隔を確保
   - お姿は札のように4:5の枠に収め、左右の帯を出さない（切り抜きはしない）
   - 要約の3行省略をやめ、全文を読めるようにする
   ------------------------------------------------------------ */
.catalogue-page>.text-link{margin-bottom:30px}
.catalog-thumb{width:min(100%,150px);height:auto;aspect-ratio:4/5;margin:0 0 22px;background:#d9d0b8;border:1px solid #c3b795}
.catalog-thumb>.deity-art{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}
.catalog-thumb .collection-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:100%;gap:2px}
.catalog-thumb .collection-mosaic .deity-art{min-height:0}
.catalog-card>p{display:block;-webkit-line-clamp:unset;overflow:visible}
@media(max-width:760px){
  .catalog-thumb{width:min(100%,140px)}
}

/* ------------------------------------------------------------
   9. 紹介（参拝ページ）: スマホで名前と説明を早く見せる
   お姿の全体表示は保ち、幅だけ控えめにする。大きな表示は祈りの画面にある。
   ------------------------------------------------------------ */
@media(max-width:760px){
  .visit-layout{padding-top:12px;gap:18px}
  .visit-picture{width:min(270px,72%);padding:6px 0 0}
  .visit-picture.has-collection-preview{width:min(300px,80%)}
  .visit-picture figcaption{margin-top:14px}
  .visit-copy{padding-top:0}
  .visit-copy h1{margin:22px 0 20px}
}

/* ------------------------------------------------------------
   10. 想いを書く試作: 明るい紙の上では「戻る」を塗りつぶさず線で示す
   ------------------------------------------------------------ */
.reflection-top .quiet-exit{background:transparent;color:var(--ink);border-color:#9aa48f}
.reflection-top .quiet-exit:hover{background:#e6e9dd}
.reflection-presence figcaption{font-size:12px}

/* ------------------------------------------------------------
   11. 読誦: 紙の上のフォーカス枠を見える色に、注記を読める大きさに
   ------------------------------------------------------------ */
.scripture-sheet :focus-visible{outline-color:var(--q-focus)}
.scripture-independent{font-size:11px}
@media(max-width:600px){
  .scripture-toolbar>a{font-size:12px}
}

/* ------------------------------------------------------------
   12. 暦: 日付札の小さな文字を読める大きさに
   ------------------------------------------------------------ */
.month-table button>small{font-size:11px}

/* ------------------------------------------------------------
   13. 神社/寺院の世界: 小さな文字の底上げ、明るい面の上のフォーカス色
   図・dialog・拡大操作には触れない。
   ------------------------------------------------------------ */
.atlas-reading{font-size:11px;color:#5f6453}
.atlas-guide-sources{font-size:11px}
.atlas .atlas-inspector :focus-visible,
.atlas .atlas-dialog :focus-visible{outline-color:var(--q-focus)}

/* ------------------------------------------------------------
   14. 方針・出典: 番号に少量の鈍い金
   ------------------------------------------------------------ */
.policy-number{color:var(--q-gold)}
.source-number{color:var(--q-gold-deep)}

/* ------------------------------------------------------------
   15. 320px幅の収まり
   ------------------------------------------------------------ */
@media(max-width:360px){
  .catalog-thumb{width:min(100%,130px)}
  .scripture-toolbar>a{max-width:140px}
  .visit-picture{width:min(240px,76%)}
}