/* すべてのページの並べかた。広い画面では横にならべて縦長をおさえ、スマホではすきまを詰めて読みやすくする */
main { overflow-x: clip; }
main h2.section { margin-top: 40px; margin-bottom: 14px; }

/* ---- スマホ ---- */
@media (max-width: 640px) {
  main { padding-left: 12px; padding-right: 12px; }
  main h2.section { margin-top: 28px; margin-bottom: 10px; font-size: 1rem; }
  main .card { padding-left: 14px; padding-right: 14px; }
  .top { padding-top: 22px !important; }
  .top h1 { font-size: 1.7rem !important; }
  .top p { font-size: .88rem; }
  .site-header .tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .site-header .tabs::-webkit-scrollbar { display: none; }
  .pg-diary .stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .pg-diary .stats > * { padding-left: 6px !important; padding-right: 6px !important; }
  .pg-roadmap .timeline { padding-left: 46px; }
  .pg-roadmap .timeline::before, .pg-roadmap .timeline .trail { left: 14px; }
}

/* ---- 広い画面 ---- */
@media (min-width: 1100px) {
  main.pg-wide { max-width: 1240px; }
  .site-header .inner { max-width: 1240px; }

  /* 段組み（くらし・頭の中）: 窓を2列に流しこむ */
  main.pg-cols { columns: 2; column-gap: 28px; }
  main.pg-cols > * { break-inside: avoid; }
  main.pg-cols > .top, main.pg-cols > .span, main.pg-cols > .empty { column-span: all; }
  main.pg-cols > section { padding-top: 1px; }

  /* ひとりごと: 左にひとりごとの列、右にいまの様子や成長 */
  main.pg-diary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  main.pg-diary > .top { grid-column: 1 / -1; }
  main.pg-diary > section:has(#monos) { grid-column: 1; grid-row: 2 / span 12; }
  main.pg-diary > section:not(.top):not(:has(#monos)) { grid-column: 2; }

  /* お手紙: 左に書くところ、右にお返事 */
  main.pg-letter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  main.pg-letter > .top { grid-column: 1 / -1; }

  /* 自己紹介: プロフィールとチャーム、まもっていることとしくみを横にならべる */
  main.pg-index { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  main.pg-index > * { grid-column: 1 / -1; min-width: 0; }
  main.pg-index > #profile, main.pg-index > #rules { grid-column: 1; }
  main.pg-index > #charm, main.pg-index > #how { grid-column: 2; }
  main.pg-index > #rules .rules { grid-template-columns: 1fr; }

  /* ロードマップ: やることを2列に */
  .pg-roadmap .items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .pg-roadmap .item:nth-child(2) { border-top: 0; }
}

/* 長くのびる記録は、窓の中でスクロールさせてページを縦長にしすぎない */
.pg-cols .card > .log { max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.pg-diary #monos { max-height: 72vh; overflow-y: auto; padding-right: 10px; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
@media (min-width: 1100px) {
  .pg-diary #monos { max-height: calc(100vh - 150px); }
  .pg-diary > section:has(#monos) { position: sticky; top: 64px; }
}
.pg-cols .card > .log::-webkit-scrollbar, .pg-diary #monos::-webkit-scrollbar { width: 8px; }
.pg-cols .card > .log::-webkit-scrollbar-thumb, .pg-diary #monos::-webkit-scrollbar-thumb { background: var(--ink); }
@media (max-width: 520px) {
  .pg-index .hero .art { max-width: 190px; margin-left: auto; margin-right: auto; }
}