/* ==========================================================================
   base.css
   リセット / CSS変数 / タイポグラフィ / 基本レイアウトの土台
   ========================================================================== */

:root {
  /* カラー */
  --color-primary: #FFA965;
  --color-primary-dark: #F08C3C;
  --color-primary-light: #FFF1E5;
  --color-background: #FAFAF8;
  --color-surface: #FFFFFF;
  --color-text: #222222;
  --color-text-sub: #777777;
  --color-border: #EAEAEA;
  --color-overlay: rgba(255, 255, 255, 0.86);

  /* 角丸 */
  --radius-small: 10px;
  --radius-medium: 16px;
  --radius-large: 24px;
  --radius-pill: 999px;

  /* 余白スケール */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* レイアウト寸法 */
  --header-height: 56px;
  --nav-height: 60px;
  --nav-height-safe: calc(var(--nav-height) + env(safe-area-inset-bottom));
  --content-max-width: 1200px;
  --sidenav-width: 220px;

  /* 影(控えめ) */
  --shadow-card: 0 2px 10px rgba(34, 34, 34, 0.06);

  /* フォント */
  --font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
}

/* ダークモードでも背景・文字色が破綻しないよう最低限のフォールバックのみ用意 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #161614;
    --color-surface: #211F1C;
    --color-text: #F3F1EC;
    --color-text-sub: #A9A69F;
    --color-border: #33312C;
    --color-overlay: rgba(22, 22, 20, 0.86);
  }
}

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

html,
body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100dvh;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font-family: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

/* タップ領域を最低44pxに保つための共通クラス */
.tap-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* フォーカスは消さず、見やすい色で表示する */
:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

/* モーション低減設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 横スクロール行(横スクロール事故防止 + スクロールバー非表示) */
.scroll-row {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--space-xs) var(--space-md) var(--space-sm);
  margin: 0 calc(var(--space-md) * -1);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.scroll-row::-webkit-scrollbar {
  display: none;
}

.scroll-row > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* PC用コンテンツ幅制御 */
.content-container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* 画像未登録時のプレースホルダー表現(軽量CSSのみ) */
.placeholder-image {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  border-radius: inherit;
  overflow: hidden;
}

.placeholder-image::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28%;
  height: 28%;
  min-width: 24px;
  min-height: 24px;
  max-width: 40px;
  max-height: 40px;
  background-color: var(--color-text-sub);
  opacity: 0.35;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/></svg>") center / contain no-repeat;
}

.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-9-16 { aspect-ratio: 9 / 16; }