/*
  Bloomdeck — LP / Support / Privacy 共通スタイル

  WHY: アプリの UI 層と同じ規則を Web にそのまま移す。
       - 色は 背景 / インク / 補足 の 3 つだけ（値は Assets.xcassets と同じ）
       - ウェイトは regular / bold の 2 つだけ
       - 余白は 8 の倍数
       - Web フォント・外部 CDN は使わない（「第三者への通信なし」をサイトでも守る）
*/

/* ---------- 色 ---------- */
:root {
  /* WHY: AppBackground / PrimaryText / インク（#1A1A1A）と同じ値。
          スクショの背景色とも一致するので、画像の端が浮かない。 */
  --bg: #E4DFD5;
  --ink: #1A1A1A;
  --sub: #5C5C5C;      /* 背景の上で約 5:1。小さい文字の基準 4.5:1 を満たす */
  --rule: rgba(26, 26, 26, 0.16);
  /* WHY: アイコンの色は bloomdeck_icon.icon（Icon Composer）の設定と同じ */
  --icon-bg: #F5EFE4;
  --icon-fg: #1A1A1A;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2A2724;
    --ink: #EDE7DB;
    --sub: #B0B0B0;    /* 背景の上で約 6.9:1 */
    --rule: rgba(237, 231, 219, 0.18);
    --icon-bg: #1A1A1A;
    --icon-fg: #EDE7DB;
  }
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--ink);
  /* WHY: システムフォント。Apple 端末では SF Pro / ヒラギノになり、アプリと同じ見え方になる */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial,
               "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

/* WHY: 和文は欧文より行間を広く取らないと詰まって見える */
html[lang="ja"] body { line-height: 1.85; }
/* WHY: 文節の途中で改行しないようにする（対応ブラウザのみ。非対応でも崩れない） */
html[lang="ja"] h1, html[lang="ja"] h3, html[lang="ja"] .subtitle, html[lang="ja"] figcaption {
  word-break: auto-phrase;
}

strong, b, h1, h2, h3, dt, th { font-weight: 700; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

img { display: block; max-width: 100%; height: auto; }

/* ---------- レイアウト ---------- */
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 720px) {
  .wrap { padding: 0 40px; }
}

/* ---------- ヘッダー（下層ページ） ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- アイコン ---------- */
/* WHY: アイコンは SVG を直接埋め込む。画像を書き出さずに済み、ダークモードで色も切り替わる */
.icon {
  display: block;
  border-radius: 22.37%;   /* iOS のアイコン角丸に近い比率 */
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule);
}
.icon .icon-bg { fill: var(--icon-bg); }
.icon .icon-fg { fill: var(--icon-fg); }
.icon--s { width: 32px; height: 32px; }
.icon--l { width: 88px; height: 88px; }

/* ---------- ヒーロー ---------- */
.hero { padding: 64px 0 48px; }
@media (min-width: 720px) {
  .hero { padding: 96px 0 64px; }
}
.hero .icon { margin-bottom: 32px; }
.hero h1 {
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.subtitle {
  margin-top: 16px;
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  line-height: 1.35;
  text-wrap: balance;
}
.status {
  margin-top: 24px;
  color: var(--sub);
}

/* ---------- スクリーンショット ---------- */
/* WHY: スマホでは横スクロール（ページ全体は横に動かない）、広い画面では 3 列に並べる */
.screens {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 68%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  margin-bottom: 48px;
}
.screens figure { scroll-snap-align: start; }
@media (min-width: 720px) {
  .screens {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    overflow: visible;
    margin-bottom: 64px;
  }
}
.screens img {
  width: 100%;
  /* WHY: 撮影素材は角が四角い。実機の画面角丸（165px / 1320×2868）と同じ比率で丸める */
  border-radius: 12.5% / 5.75%;
  box-shadow: 0 0 0 1px var(--rule);
  background: var(--icon-bg);
}
.screens figcaption {
  margin-top: 16px;
  font-weight: 700;
  line-height: 1.4;
}

/* ---------- セクション（Swiss グリッド：左に見出しラベル、右に本文） ---------- */
.section {
  border-top: 1px solid var(--rule);
  padding: 40px 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 720px) {
  .section {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    padding: 56px 0;
  }
  .section > .label { grid-column: 1 / 4; }
  .section > .body  { grid-column: 4 / 13; }
}
.label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sub);
  line-height: 1.6;
}
.body { max-width: 40em; }
.body > * + * { margin-top: 16px; }
.body h3 {
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* 仕様・FAQ のリスト */
.specs { display: grid; grid-template-columns: max-content 1fr; column-gap: 24px; row-gap: 8px; }
.specs dt { color: var(--sub); font-weight: 400; }

.faq dt { margin-top: 24px; }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin-top: 8px; }

/* ---------- プレスキット ---------- */
/* WHY: 本文内の小見出し（「Short」「Long」など）は、前の段落との間を広げて区切りを示す */
.body > .label:not(:first-child) { margin-top: 40px; }

.list { padding-left: 1.25em; }
.list li + li { margin-top: 8px; }

/* WHY: カードは作品なので角丸も影も付けない。辺の色が背景と近いカードがあるため、罫線と同じ細い線で輪郭だけ示す */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cards img { width: 100%; box-shadow: 0 0 0 1px var(--rule); }
.cards figcaption {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--sub);
}

/* ---------- 文書ページ（プライバシーポリシー） ---------- */
.doc { padding: 48px 0 64px; max-width: 40em; }
.doc h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.doc .meta { margin-top: 16px; color: var(--sub); }
.doc h2 {
  font-size: 1.125rem;
  line-height: 1.4;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.doc p, .doc ul, .doc address { margin-top: 16px; }
.doc ul { padding-left: 1.25em; }
.doc li + li { margin-top: 8px; }
.doc address { font-style: normal; }

/* ---------- フッター ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: 32px 0 48px;
  display: flex;
  flex-wrap: wrap;
  /* WHY: ページのリンクを左、言語の切り替えを右に分ける。同じ並びにあると、言語のリンクがページへのリンクに見えるため。
          幅が足りないときは折り返して縦に並ぶ */
  justify-content: space-between;
  gap: 16px 24px;
  font-size: 0.875rem;
  color: var(--sub);
}
.footer-nav, .footer-lang {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
/* WHY: 今いるページと言語はリンクにせず、インクの色で示す。リンク（補足色＋下線）との違いで「選択中」と分かる */
.site-footer [aria-current] { color: var(--ink); }
/* WHY: © は常に独立した行にする。右端に置くと言語の切り替えと位置が重なるため */
.site-footer .copy { width: 100%; }