/* ============================================
   base.css

   【役割】おさんぽランドの「型」— レイアウト・レスポンシブの骨格
   【依存】なし
   【対応仕様】docs/superpowers/specs/2026-08-09-oshigoto-mode-osanpo-land-design.md「レスポンシブの型」
   ============================================

   ここは基本触らない。色・装飾・世界観は theme.css の担当。
   モバイルファースト1カラム → PC は CSS columns による masonry（JS ゼロ）。
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: clamp(15px, 1rem + 0.2vw, 17px);
  line-height: 1.8;
}

.container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-header {
  text-align: center;
  padding: 40px 0 24px;
}

.site-header__title {
  font-size: clamp(24px, 1.4rem + 1.6vw, 40px);
  margin: 0 0 8px;
}

.site-header__lead {
  margin: 0;
}

.section {
  padding: 24px 0 32px;
}

.section__title {
  font-size: clamp(18px, 1.1rem + 0.6vw, 24px);
  margin: 0 0 4px;
}

.section__note {
  margin: 0 0 16px;
}

/* ---- 募集中のおしごと（縦積み。件数が少ない前提） ---- */

.job-card {
  padding: 16px 18px;
  margin-bottom: 12px;
}

.job-card__title {
  font-size: 1.1em;
  margin: 0 0 6px;
}

.job-card__request,
.job-card__period {
  margin: 0;
}

.job-card__period {
  font-size: 0.85em;
}

/* ---- 日報フィード（PC は masonry） ---- */

.feed {
  /* 1カラム時は columns を無効化して素の縦積みにする */
  column-gap: 20px;
}

/*
  カード = 紙の箱（__paper）＋ ぶら下がる看板（.cheer-sign）。
  枠線と背景を内側の __paper に持たせているのは、看板をカードの「外」に見せるため。
  看板は必ずこの article の中に置くこと（外に出すと masonry で看板だけ次の段に飛ぶ）。
*/
.report-card {
  /* カードが段の途中で割れないようにする（masonry の要） */
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 20px;
}

.report-card__paper {
  padding: 18px 20px;
}

.report-card__job {
  font-size: 0.85em;
  margin: 0 0 8px;
}

.report-card__photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
}

.report-card__body {
  margin: 0 0 10px;
  white-space: pre-wrap;
}

.report-card__meta {
  font-size: 0.85em;
  margin: 0;
  text-align: right;
}

/* ---- がんばったね（ぶら下がる看板） ---- */

.cheer-sign {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 15px;
}

.cheer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.cheer__icon {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
}

.cheer__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cheer__label {
  white-space: nowrap;
}

.notice {
  text-align: center;
  padding: 24px 0;
}

/* ---- CTA ---- */

.cta {
  text-align: center;
  padding: 32px 0 48px;
}

.cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

.cta__button {
  display: inline-block;
  padding: 12px 24px;
  text-decoration: none;
}

.site-footer {
  text-align: center;
  padding: 24px 0 40px;
  font-size: 0.85em;
}

.site-footer__report,
.site-footer__note {
  margin: 0 auto 8px;
  max-width: 34em;
  line-height: 1.7;
  opacity: 0.85;
}

.site-footer__note {
  margin-bottom: 16px;
}

.site-footer__links a {
  margin: 0 8px;
}

/* ---- ブレークポイント: 読み幅を広げて 2列 → 3列 ---- */

@media (min-width: 760px) {
  .container {
    max-width: 900px;
  }
  .feed {
    columns: 2;
  }
}

@media (min-width: 1100px) {
  .container {
    max-width: 1200px;
  }
  .feed {
    columns: 3;
  }
}

/* ---- ダッシュボード（骨格） ---- */
.stat-card{position:relative;padding:18px 16px 14px;margin-bottom:12px}
.stat-hero{text-align:center}
.stat-hero__lead{margin:0 0 1px}
.stat-hero__value{margin:0;line-height:1}
.stat-hero__num{font-variant-numeric:tabular-nums}

/* 通常はカード右上（縦幅を詰める）。狭い幅では右上が窮屈なので、大きな数字の
   上に静的に戻す（DOM 順はここ固定。position の切り替えだけで見た目を動かす） */
.stat-side{position:absolute;top:14px;right:16px;display:flex;gap:14px;text-align:right}
.stat-side__item{text-align:inherit}
.stat-side__num{font-variant-numeric:tabular-nums}

@media (max-width:560px){
  /* DOM 順は lead → side → value だが、静的配置に戻すと lead と大きな数字の間に
     時間・回数が挟まり、「みんなであるいた ぜんぶ → 812時間」と読めてしまう。
     order で side だけ先頭に出して、lead が主役の数字を紹介する並びを保つ */
  .stat-hero{display:flex;flex-direction:column}
  .stat-side{order:-1;position:static;justify-content:center;margin-bottom:10px;text-align:center}
}

/* 旅バー（くねくね道）。SVG がカーブ＋点、HTML オーバーレイがラベル＋肉球。
   どちらも .trail の 0-100% を SVG の viewBox と同じ座標系として使うため、
   .trail 自体には padding を付けない（付けるとラベルの % 位置がズレる） */
.trip{margin-top:44px}
.trail{position:relative;margin-bottom:38px}
.trail svg{display:block;width:100%;height:auto}
.trail__labels{position:absolute;inset:0;pointer-events:none}
/* --trail-extra: 優先ラベル同士が重なったときだけ layoutTrailLabels() が横方向に足す退避量。
   優先ラベルは「隠さない」のが仕様なので、隠す代わりに横にずらして重なりを避ける
   （縦にずらすと .trail の外＝上下の他要素にはみ出す余地がないため、横に逃がす） */
.trail__label{position:absolute;width:max-content;text-align:center;white-space:nowrap;transform:translate(calc(-50% + var(--trail-extra,0px)),10px)}
.trail__label--above{transform:translate(calc(-50% + var(--trail-extra,0px)),calc(-100% - 10px))}
.trail__label.is-hidden{display:none}
.trail__label-km,.trail__label-name{display:block}
.trail__paw{position:absolute;transform:translate(-50%,-50%)}
.trip__say,.trip__goal{text-align:center;margin:6px 0 0}

.hours__chips{display:flex;gap:7px;margin:0 0 12px;flex-wrap:wrap}
.hours__cap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 9px}
.hours__keys{display:inline-flex;gap:12px}
.hours__key{display:inline-flex;align-items:center;gap:5px}
.hours__key-sw{width:11px;height:11px;border-radius:2px}
/* ゴーストと選択月を同じ列に重ねる。兄弟にすると24時間が48本に見える */
.hours__bars{display:flex;align-items:flex-end;gap:1px;height:56px}
.hours__col{position:relative;flex:1;height:100%}
.hours__ghost,.hours__bar{position:absolute;left:0;right:0;bottom:0}
.hours__axis{display:flex;justify-content:space-between;margin-top:5px}
.hours__note{text-align:center;margin:9px 0 0}
.stat-foot{text-align:center;margin:12px 0 0}