/*
Theme Name: MIKO STYLE THEME
Description: 写真だけを魅せる究極のミニマルテーマ
Author: Miko
Version: 1.0
*/

:root {
  --max-width: 700px;
  --photo-gap: 60px;
  --page-top-space: calc(var(--photo-gap) * 2);
  --side-padding: 0px;
}

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

body { 
  background-color: #ffffff; 
}

/* サイトヘッダー（固定・上下左右中央揃え） */
.site-header { 
  position: fixed; 
  top: 0px; 
  left: 0; 
  width: 100%; 
  height: var(--page-top-space); 
  display: flex;
  align-items: center; 
  justify-content: center;
  z-index: 1000; 
  pointer-events: none;
}
.site-header a { 
  text-decoration: none; 
  color: #333; 
  font-family: serif; 
  font-size: 14px; 
  letter-spacing: 0.4em; 
  pointer-events: auto;
}

/* =========================================
   共通コンテナ設定
   ========================================= */

/* 個別記事 ＆ トップギャラリー用コンテナ（縦1列） */
.photo-container,
.gallery-container { 
  max-width: var(--max-width); 
  margin: var(--page-top-space) auto 0; 
  padding: 0 var(--side-padding); 
  padding-bottom: var(--photo-gap); 
  display: flex; 
  flex-direction: column; 
  gap: var(--photo-gap); 
}

/* WordPressが勝手に入れる余白を強制リセット */
.photo-container > *,
.gallery-container > * {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================
   画像スタイル使い分け
   ========================================= */

/* 個別記事の画像（元の縦横比を維持） */
.photo-container img { 
  width: 100%; 
  height: auto; 
  object-fit: cover; 
  display: block; 
}

/* トップページのギャラリー画像（3:2比率で統一） */
.gallery-item img { 
  width: 100%; 
  height: auto; 
  aspect-ratio: 3 / 2;
  object-fit: cover; 
  display: block; 
}