/* ============================================
   page.css

   【役割】デモページ「るびたんち」固有の差分だけ（ヘッダー・犬カルーセル・きろくカード・
           日記帳のチップ切替）。ランドにある指定はここに書かない
   【依存】base.css / theme.css（land からのスナップショット）を先に読み込む前提
   【対応仕様】docs/superpowers/specs/2026-09-06-demo-page-and-cliff-letter-design.md §3
   ============================================

   ヘッダーと犬カードは functions/src/mypage/myPageHtml.ts の CSS から必要な行だけ写し、
   色は theme.css の変数に置き換えている（myおさんぽGO と見た目を揃えるため）。
   ⚠️ base.css / theme.css は land のスナップショットなので編集しない。差分は必ずここへ。
*/

/* ---- ヘッダー（myおさんぽGO の流儀） ---- */

.page-head {
  text-align: center;
  padding: 32px 0 20px;
}

.page-head .logo {
  font-size: 11px;
  color: var(--text-sub);
  letter-spacing: 0.24em;
}

h1.yago {
  font-family: "Yomogi", cursive;
  font-weight: 700;
  font-size: clamp(28px, 2rem + 1.6vw, 44px);
  color: var(--text);
  margin: 2px 0 0;
}

.sns {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 0;
}

.sns-link {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid rgba(184, 148, 102, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
}

/* この svg 指定が無いと線画アイコンが黒い塊になる */
.sns-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- 犬カルーセル ---- */

/* 写真が上辺からはみ出す分を padding-top で確保する
   （overflow-x:auto は縦方向も切るため） */
.dogs {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0;
  margin-top: 8px;
  padding-top: 62px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dogs::-webkit-scrollbar {
  display: none;
}

.dog {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
  padding: 0 14px 8px;
}

.dog .card {
  background: var(--cream);
  border: 1.5px solid rgba(184, 148, 102, 0.5);
  border-radius: 16px;
  padding: 14px 12px 12px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

/* 写真のはみ出しを受ける余白 */
.dog .sp {
  height: 44px;
}

.dog .photo {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  top: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--cream);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  object-fit: cover;
}

.dog .nm {
  font-family: "Yomogi", cursive;
  font-size: 24px;
  color: var(--text);
  line-height: 1.2;
}

.dog .mt {
  font-size: 12px;
  color: var(--text-sub);
}

.dog .info {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1.5px dashed rgba(184, 148, 102, 0.6);
  font-size: 12px;
  text-align: left;
}

.dog .ir {
  display: flex;
  align-items: stretch;
  padding: 4px 0;
}

/* 見出しは折り返させない。myおさんぽGO は 96px だったが、あちらは Hiragino が先頭の
   フォントスタックで、このページ（land 系＝Noto Sans JP）だと「おさんぽの楽しみ」が
   2行に割れて行の高さが揃わなくなる。nowrap ＋ 4px の余裕で固定する */
.dog .ir .k {
  flex: 0 0 100px;
  color: var(--text-sub);
  padding-right: 8px;
  display: flex;
  align-items: center;
  font-size: 10.5px;
  white-space: nowrap;
}

/* 縦の点線は 1px（整数）でなければならない。iOS Safari は border-width を実ピクセルに
   丸めるので 1.5px は 1.333px になり、その端数だと点が1つしか描かれない
   （2026-09-05 に iPhone で実測。Android は 1.5px でも正常なので気づけない）。
   ⚠️ ここを小数に戻さないこと。横罫線（.info の border-top）は 1.5px でも壊れない */
.dog .ir .v {
  flex: 1;
  border-left: 1px dotted rgba(62, 107, 44, 0.55);
  padding-left: 10px;
  color: var(--text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.dog .ir .v i {
  font-style: normal;
  color: var(--cardboard-deep);
  margin: 0 3px;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}

/* 導入（看板犬の一言）。
   モバイルで6行に伸びて縦を食っていたので、本文より一段小さくして3行に畳む。
   多少読みにくくなっても、犬カードときろくが1画面に近づくことを優先する（ユーザー判断 2026-09-06）。
   ⚠️ font-size を本文サイズに戻すと6行に戻る */
.lead {
  margin: 14px 0 0;
  font-family: "Yomogi", cursive;
  font-size: 0.78em;
  line-height: 1.75;
  color: var(--text-sub);
  text-align: center;
  text-wrap: pretty;
}

/* 3行目「きみのところの子は、どんなふうに書くんだろうね。」が 375px 幅で数px はみ出して
   4行になっていた。字間をわずかに詰めて3行に収める（文言は変えない・ユーザー判断 2026-09-06）。
   ⚠️ 導入文の文言を長くするとまた折り返す。変えるときはモバイル幅で行数を確認すること */
@media (max-width: 420px) {
  .lead {
    letter-spacing: -0.01em;
  }
}

/* PC は3頭を等幅で並べ、カルーセルをやめる（フィードが2列になる幅に合わせる）。
   myPageHtml から写した 520px の指定（.dog{flex:0 0 300px}）は幅640pxのページ向けなので、
   このブロックを後ろに置いて上書きする */
@media (min-width: 760px) {
  .dogs {
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .dog {
    flex: 1 1 0;
    scroll-snap-align: none;
  }
  .dots {
    display: none;
  }
}

/* ---- きろく（アプリの年間カードの再現） ---- */

/* 画像の上に3つのカードを重ねる。画像を上下に積むと、特に PC で絵だけが大きく間延びして
   数字が下に押し出されていた（ユーザー判断 2026-09-06）。
   position:relative ＋ スロットを absolute で下端に置き、画像側の下部を少し暗く落として
   白いカードが乗っても数字が読めるようにする */
.stat-annual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

/* 絵は主役ではないので高さを抑えて切り抜く。
   object-position を下寄せにするのは、data-annual.webp（1672x703）の上半分が
   ほぼ空で、森・山・滝は下 45% に集まっているため。上寄せにすると、カードで隠れない
   帯にただの空だけが見える（2026-09-06 に実測して修正）。
   ⚠️ 画像を差し替えたら、この値も見直すこと */
.stat-annual__art {
  display: block;
  width: 100%;
  height: clamp(150px, 26vw, 230px);
  object-fit: cover;
  object-position: 50% 100%;
}

/* 重ねたカードの下に敷く影。無いと明るい絵の上で白カードの輪郭が飛ぶ */
.stat-annual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(transparent, rgba(38, 80, 25, 0.28));
  pointer-events: none;
}

.stat-annual__slots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: 8px;
  padding: 12px;
}

/* 絵の上に乗るので、背景は不透明にして数字を確実に読ませる */
.stat-slot {
  flex: 1 1 0;
  background: var(--cream);
  border: 1px solid rgba(184, 148, 102, 0.4);
  border-radius: 10px;
  padding: 8px 4px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(38, 80, 25, 0.18);
}

.stat-slot img {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0 auto 4px;
}

.stat-slot__num {
  font-weight: 700;
  color: var(--text);
  font-size: clamp(15px, 1rem + 0.4vw, 19px);
  line-height: 1.2;
}

.stat-slot__unit {
  font-size: 11px;
  color: var(--text-sub);
}

/* ---- 日記帳（チップ切替。JS ゼロ） ---- */

/* radio 本体は隠す。:checked を兄弟セレクタの起点にするためだけに存在する */
.kind-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* land はモバイルでチップバーを画面上部に貼り付ける設計で、theme.css の
   @media(max-width:759px) が margin:0 -20px と position:sticky を当てている。
   このページのチップは3つだけで貼り付ける必要がなく、負のマージンのせいで
   左端が画面端まで出て見出しと揃わなかった。打ち消して見出しの左端に合わせる。
   ⚠️ theme.css は land のスナップショットなので直接は触らない（ここで上書きする） */
.job-filter {
  position: static;
  margin: 0 0 16px;
  padding: 0;
  background: none;
  backdrop-filter: none;
  gap: 6px;
}

/* チップは3つで収まるので、land の広告的な大きさより一段小さくする */
.filter-chip {
  font-size: 0.78em;
  padding: 6px 12px;
}

/* 選択中のチップ。land の .filter-chip[aria-pressed=true] と同じ見た目。
   radio と label は隣接しないので、+ ではなく ~ ＋子孫で書く */
#k-daily:checked ~ .job-filter .filter-chip[for="k-daily"],
#k-outing:checked ~ .job-filter .filter-chip[for="k-outing"],
#k-job:checked ~ .job-filter .filter-chip[for="k-job"] {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
  box-shadow: 0 2px 8px rgba(62, 107, 44, 0.22);
}

/* 選択中でない種類のカードを隠す */
#k-daily:checked ~ .feed .report-card:not([data-kind="daily"]),
#k-outing:checked ~ .feed .report-card:not([data-kind="outing"]),
#k-job:checked ~ .feed .report-card:not([data-kind="job"]) {
  display: none;
}

/* 説明文は該当の種類のときだけ出す。「まいにちの日記」には説明を出さない（主役は説明不要） */
.feed-note {
  display: none;
}

#k-outing:checked ~ .feed-note[data-for="outing"],
#k-job:checked ~ .feed-note[data-for="job"] {
  display: block;
}

.feed-note {
  margin: 0 0 18px;
  color: var(--text-sub);
  font-size: 0.9em;
  line-height: 1.8;
}

/* 本文の改行を活かす。
   base.css に既にある white-space: pre-wrap を上書きする（読み込み順 base → theme → page で
   同一詳細度の後勝ち）。pre-wrap のままだと、HTML に直書きした日記本文のインデントが
   そのまま字下げとして描画されてしまう。
   ⚠️「base.css にあるから重複」と判断して消さないこと */
.report-card__body {
  white-space: pre-line;
}

/* ---- CTA の締めの一文（land に無いクラス） ---- */

.cta__lead {
  margin: 0 0 18px;
  font-family: "Yomogi", cursive;
  color: var(--text-sub);
}