/* ==============================
   assets/site.css
   公開ページの並べ方（仮）。デザインシステム（assets/css/）のあとに読む
   見た目はまだ決めきっていない。決まったものから ds/PROJECT.md に書き、assets/css/front.css へ移して、ここから消していく
   文字の大きさは --t1〜--t5、余白は --s1〜--s7 の段から選ぶ（2026-10-25 決定。tokens.css）
   ============================== */

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

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-size: var(--t3);   /* 書体は front.css（デザインシステム） */
    line-height: 1.8;
}

a { color: inherit; }

/* ---- 枠 ---- */
/* 中身の幅は、PC は画面の 90%（左右に 5vw ずつ）、スマホは 86%（下の 768px 以下）（2026-10-25 ユーザー指定） */
.site-main,
.site-footer { margin: 0 auto; padding: 0 5vw; }

/* 追従ヘッダーの下に隠れないよう、上をあける。トップは MV がヘッダーの下まで広がるのであけない */
.site-main { padding-top: 96px; }
.is-home .site-main { padding-top: 0; }

/* 追従ヘッダーとメニューは、デザインが決まったので front.css へ移した（2026-10-25） */
@media (max-width: 768px) {
    .site-main { padding-top: 84px; }
    /* スマホの中身の幅は画面の 86%（左右に 7vw ずつ）（2026-10-25 ユーザー指定）
       画面の端までのばす帯（MV・TOOLS）は、中身の端がこれに自動でそろう */
    .site-main,
    .site-footer { padding-left: 7vw; padding-right: 7vw; }
}

/* ポップアップ・メニューを開いている間は、後ろのページをスクロールさせない
   html にも overflow-x: clip をかけているので、body ではなく html で止める（body だと効かない）
   スクロールバーが消えて横にずれないよう、バーの場所はいつもあけておく */
html { scrollbar-gutter: stable; }
html:has(dialog[open]) { overflow: hidden; }

/* フッターは中央そろえ（2026-10-25 ユーザー指定） */
.site-footer { padding-top: var(--s7); padding-bottom: var(--s5); font-size: var(--t2); text-align: center; }
.site-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s4); margin: 0 0 var(--s2); padding: 0; list-style: none; }

.page-title { margin: var(--s4) 0 var(--s5); font-size: var(--t5); font-weight: 400; }

/* ---- トップ ---- */
/* MV は front.css へ移した（2026-10-25） */
/* 区画の並べ方（左の列＋右の中身）は front.css へ移した（2026-10-25） */

/* サムネを正方形にそろえる（トップの OKIBA・WORKS）
   このあとに書いてある .okiba-item img・.work-item img（4:3）に負けないよう、.home-section をつけて強くする */
.home-section .is-square img { aspect-ratio: 1; height: auto; object-fit: cover; }

/* 好きなもの：小さいサムネを横に6つほど。押すとポップアップ */
.like-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s3); max-width: 720px; margin: 0; padding: 0; list-style: none; }
.like-thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.like-thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--color-surface); }
/* 余白は中の .like-dialog-body に持たせる（dialog 自体を押したら「背景を押した」として閉じるため） */
.like-dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; background: var(--color-surface); color: var(--color-ink); }
.like-dialog::backdrop { background: rgba(26, 34, 54, .5); }
.like-dialog-body { padding: var(--s4); }
.like-dialog img { display: block; width: 100%; height: auto; }
.like-dialog p { margin: 0; }
.like-dialog-close { display: block; margin: calc(var(--s2) * -1) calc(var(--s2) * -1) var(--s2) auto; padding: var(--s1) var(--s3); border: 0; background: none; color: inherit; font-size: var(--t5); cursor: pointer; }

/* ---- ページ送り ---- */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s4); margin-top: var(--s6); font-size: var(--t2); }
.pager > :last-child { text-align: right; }

/* ---- OKIBA ---- */
.okiba-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s5) var(--s4); }
.okiba-item { margin: 0; }
.okiba-item img { display: block; width: 100%; height: auto; background: var(--color-surface); }
.okiba-item time { display: block; margin-top: var(--s1); font-size: var(--t1); }
.okiba-item p { margin: var(--s1) 0 0; }

/* ---- 感想ログ ---- */
.review-filter { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-bottom: var(--s5); }
.review-filter a { text-decoration: none; }
.review-filter a[aria-current="page"] { text-decoration: underline; }
.review-filter-group { display: inline-flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.review-filter-label { font-size: var(--t1); opacity: .6; align-self: center; }

.review-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s5) var(--s4); }
.review-item { margin: 0; }
.review-meta { display: flex; align-items: baseline; gap: var(--s2); margin: 0; font-size: var(--t1); }
.review-title { margin: var(--s1) 0 var(--s2); font-size: var(--t4); font-weight: 600; line-height: 1.4; }
.review-comment { margin: 0; }

/* ---- 好きなもの ---- */
.like-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s5) var(--s4); }
.like-item { margin: 0; }
.like-item img { display: block; width: 100%; height: auto; background: var(--color-surface); }
.like-title { margin: var(--s2) 0 var(--s1); font-size: var(--t4); font-weight: 600; line-height: 1.4; }
.like-item p { margin: 0; }

/* ---- やりたいこと ---- */
.want-list { display: grid; gap: var(--s5); max-width: 720px; }
.want-item { margin: 0; }
.want-item time { font-size: var(--t1); }
.want-title { margin: var(--s1) 0; font-size: var(--t4); font-weight: 600; line-height: 1.4; }
.want-item p { margin: 0; }

/* ---- 制作事例 ---- */
.work-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s5) var(--s4); }
.work-item { display: block; text-decoration: none; }
/* 画像は切り抜かず、そのままの比率（2026-10-25。トップだけは正方形：上の .home-section .is-square img） */
.work-item img { display: block; width: 100%; height: auto; background: var(--color-surface); }
.work-title { display: block; margin-top: var(--s2); font-size: var(--t4); font-weight: 600; line-height: 1.4; }
.work-period { display: block; font-size: var(--t1); }

.work-detail { max-width: 880px; }
.work-info { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4); margin: 0 0 var(--s4); }
.work-info dt { font-size: var(--t1); }
.work-info dd { margin: 0; overflow-wrap: anywhere; }
.work-description { margin: 0 0 var(--s5); }
.work-images { display: grid; gap: var(--s4); }
.work-images img { display: block; width: 100%; height: auto; }
.work-back { margin-top: var(--s6); font-size: var(--t2); }

/* ---- プロフィール ---- */
.profile { max-width: 720px; }
.profile-icon { display: block; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: var(--color-surface); }
.profile-name { margin: var(--s4) 0 var(--s2); font-size: var(--t5); font-weight: 600; }
.profile-bio { margin: 0 0 var(--s4); }
.profile-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0; padding: 0; list-style: none; }