/* 画面の見た目を決めるファイルです
   テーマ：白を基調にした、カリフォルニアのセレクトショップのような、
   余白が広くてすっきりした雰囲気 */

/* 色と文字の設定（ここを変えると全体が変わります） */
:root {
  --bg: #fdfcfa;        /* 背景（ほんの少しだけ温かみのある白） */
  --paper: #ffffff;     /* カードの背景（真っ白） */
  --sand-dark: #a8987f; /* 文字に使えるくらいの濃さのベージュ */
  --soft: #f6f3ee;      /* うすい砂色（区切りや画像の下地） */
  --sand: #d8cdbd;      /* 砂浜のようなベージュ（アクセント） */
  --text: #1c1c1c;      /* 文字（墨色） */
  --sub: #8a8580;       /* うすい文字 */
  --line: #e7e2db;      /* 細い線 */
  --accent: #1c1c1c;    /* ボタンなどの色（黒） */
  --ok: #4e7457;        /* 成功の色（くすんだ緑） */
  --ng: #a8473f;        /* エラーの色（くすんだ赤） */

  /* 書体：英字の見出し・英字の小さなラベル・日本語 */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --en: "Jost", "Helvetica Neue", Arial, sans-serif;
  --ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
}

* { box-sizing: border-box; }

/* 「hidden」を付けたものは、ほかの見た目の指定より優先して必ず隠す */
[hidden] { display: none !important; }

/* キーボードで操作しているときに、いまどこを選んでいるか分かるようにする */
:focus-visible { outline: 2px solid var(--sand-dark); outline-offset: 2px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ja);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 16px 64px;
}

/* 英字の小さなラベル（例：WEDDING MEMORIES） */
.label-en {
  font-family: var(--en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--sub);
}

/* 上の見出し */
.hero { text-align: center; margin: 8px 0 40px; }
.hero-sub {
  margin: 0;
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--sub);
}
.hero h1 {
  margin: 14px 0 10px;
  font-family: var(--serif);
  /* 画面の幅に合わせて大きさを変える（小さいスマホでも1行に収まるように） */
  font-size: clamp(28px, 9vw, 46px);
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.2;
  white-space: nowrap;
}
/* 名前の間の「&」だけ斜めの書体・ベージュにする */
.amp {
  font-style: italic;
  color: var(--sand-dark);
  margin: 0 .22em;
  font-weight: 400;
}
.hero-date {
  margin: 0;
  font-family: var(--en);
  font-size: 12px;
  letter-spacing: .32em;
  color: var(--sub);
}
/* 見出しの下の細い線 */
.hero::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin: 28px auto 0;
  background: var(--text);
}

/* カード（区切られたまとまり） */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 28px 22px;
  margin-bottom: 20px;
}
.card-title {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
}
.card-title span { color: var(--sub); font-weight: 400; }
.lead { text-align: center; font-size: 15px; margin: 0 0 28px; }
.hello { text-align: center; margin: 0 0 22px; font-size: 14px; }
.hint { color: var(--sub); font-size: 12px; line-height: 1.8; margin: 10px 0 18px; }

/* 入力欄 */
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  margin: 20px 0 8px;
}
.input {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px より小さいと iPhone で勝手に拡大されるため */
  padding: 12px 2px;
  border: none;
  border-bottom: 1px solid var(--text);
  border-radius: 0;
  background: transparent;
  color: var(--text);
}
.input:focus { outline: none; border-bottom-width: 2px; padding-bottom: 11px; }
.input::placeholder { color: #b7b1aa; }
textarea.input { resize: vertical; border: 1px solid var(--line); padding: 12px; }
textarea.input:focus { border: 1px solid var(--text); padding: 12px; }

/* ボタン（黒い四角に白い文字） */
.btn {
  display: block;
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: 0;
  padding: 17px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  text-align: center;
  cursor: pointer;
  transition: background .2s, color .2s, opacity .2s;
}
.btn-main { background: var(--accent); color: #fff; }
.btn-main:hover { opacity: .85; }
.btn-main:disabled { background: #c9c4be; border-color: #c9c4be; cursor: default; opacity: 1; }
.btn-pick { padding: 22px 16px; font-size: 15px; }
.btn-pick .plus { font-family: var(--en); font-weight: 300; font-size: 20px; margin-right: 10px; vertical-align: -1px; }
.btn-link {
  display: block;
  margin: 12px auto;
  background: none;
  border: none;
  color: var(--sub);
  font: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ===== 選んだ写真のタイル ===== */
.pick-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* スマホで3列 */
  gap: 3px;
}
.pick-tile {
  position: relative;
  aspect-ratio: 1;
  background: var(--soft);
  overflow: hidden;
}
.pick-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pick-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--en);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--sub);
}
/* 動画の長さ（左下） */
.pick-badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  background: rgba(255, 255, 255, .9);
  font-family: var(--en);
  font-size: 9px;
  letter-spacing: .14em;
  padding: 1px 5px;
}
/* 「×」（右上。指で押しやすい大きさにする） */
.pick-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(28, 28, 28, .45);
  font-family: var(--en);
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #fff;
  cursor: pointer;
}
/* 見た目は小さく、押せる範囲は広くする（指で押しやすいように） */
.pick-remove::after { content: ""; position: absolute; inset: -8px; }
/* 状態の印を重ねる場所（ふだんは見えない） */
.pick-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s, background .3s;
  pointer-events: none;
}
.pick-mark { font-family: var(--en); font-size: 15px; letter-spacing: .08em; }
/* 送信中：白く曇らせて「○%」 */
.is-sending .pick-overlay { opacity: 1; background: rgba(255, 255, 255, .55); }
/* 届いた：うっすら白くして「✓」 */
.is-done .pick-overlay { opacity: 1; background: rgba(255, 255, 255, .35); }
.is-done .pick-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
/* 送れない・送れなかった：赤い「!」 */
.is-rejected .pick-media { opacity: .35; }
.is-rejected .pick-overlay, .is-error .pick-overlay { opacity: 1; }
.is-rejected .pick-mark, .is-error .pick-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ng);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
/* 1枚ごとの進み具合（下の細い線） */
.pick-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: 0; }
.pick-bar span { display: block; height: 100%; width: 0; background: var(--text); transition: width .2s; }
.is-sending .pick-bar { opacity: 1; }

/* 全体の進み具合 */
.pick-summary { margin: 12px 0 0; font-size: 12px; color: var(--sub); letter-spacing: .08em; text-align: right; }
.pick-summary .bar { margin-top: 8px; }

/* 送れないものの説明 */
.problems {
  margin: 12px 0 0;
  padding: 10px 12px 10px 28px;
  border-left: 2px solid var(--ng);
  background: #fbf3f2;
  font-size: 12px;
  color: var(--ng);
  line-height: 1.8;
  word-break: break-all;
}

/* 送信の進み具合を表すバー（細い線） */
.bar { height: 2px; background: var(--line); overflow: hidden; margin-top: 6px; }
.bar > span { display: block; height: 100%; width: 0; background: var(--text); transition: width .2s; }

/* 送ったものの履歴（小さい画像を並べる） */
.history {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 4px;
}
.history-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--en);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--sub);
}
/* 動画には砂色の枠を付ける */
.history-thumb.is-video { outline: 2px solid var(--sand); outline-offset: -2px; }

.status { text-align: center; margin: 14px 0 0; min-height: 1.9em; font-size: 13px; }
.status.ok { color: var(--ok); }
.status.ng { color: var(--ng); }

/* 白い枠のボタン（2番目に大事なボタン） */
.btn-sub { background: var(--paper); color: var(--text); }
.btn-sub:hover { background: var(--soft); }

/* ===== おふたりの写真（いちばん上） ===== */
.cover { margin: 0; }
.cover img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: min(68vh, 560px);
  margin: 0 auto;
  object-fit: cover;
}
/* 写真があるときは、見出しを少し上に詰める */
.cover:not([hidden]) + .wrap { padding-top: 32px; }

/* ===== おふたりからのあいさつ ===== */
.welcome { text-align: center; margin: 0 0 36px; }
.welcome-en {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--sand-dark);
}
.welcome-text { margin: 0; font-size: 13px; line-height: 2.2; white-space: pre-line; }

/* ===== 使い方の流れ（01 02 03） ===== */
.steps {
  display: flex;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 86px;
  font-size: 11px;
  letter-spacing: .14em;
  color: #bdb6ae;
  position: relative;
}
.steps li span {
  font-family: var(--en);
  font-size: 12px;
  letter-spacing: .1em;
  margin-bottom: 2px;
}
/* 数字の間の細い線 */
.steps li + li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -14px;
  width: 28px;
  height: 1px;
  background: var(--line);
}
.steps li.is-done { color: var(--sub); }
.steps li.is-current { color: var(--text); }
.steps li.is-current span { border-bottom: 1px solid var(--text); }

/* ===== 送り終わったときのお礼 ===== */
.thanks { text-align: center; padding: 40px 22px 28px; }
.thanks-en {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 40px;
  line-height: 1.1;
}
.thanks-text { margin: 0 0 28px; font-size: 13px; line-height: 2.1; white-space: pre-line; }

/* ===== いちばん下 ===== */
.footer { text-align: center; margin-top: 56px; }
.footer-amp {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--sand-dark);
  line-height: 1;
}
.footer .label-en { margin: 10px 0 0; font-size: 10px; }

/* ===== ふわっと表示する動き ===== */
.fade-in { animation: fadeUp .8s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* 動きを減らす設定にしている人には、動きを付けない */
@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
  * { transition: none !important; scroll-behavior: auto !important; }
}