/* スイの夢日記 体験版 LP — 案 A「夜明けの夢空」
   絵の部品と配置は Codex (lp/design/codex-2026-11-02-lp-v4/layout.md が正本)。ここは layout.md の % を CSS にした物。
   文字は各札の「紙面」(.inner = 絵から測った内側の長方形、% は絵の箱に対する割合) の中にだけ置く。
   紙面の % (上 / 右 / 下 / 左 の余白): 見出し札 22/15/22/15、名前札 30/13/28/20、入力の雲紙 28/14/28/13、注記札 25/14/28/14、手紙 (border) 26/20/40/20 cqw。ボタンは CSS。
   最初の画面 (.first-view) は 100svh の中に絶対配置。375×667 を基準、高さ 760 以上で 390×844 の表、幅 900 以上で 1280×800 の表。 */
:root {
  --sky: #bfddf5;
  --cloud: #fff9ee;
  --peach: #f6d5d2;
  --pale: #dcebfa;
  --gold: #d7a63a;
  --ink: #153d4a;
  --text: #294f5c;
  --placeholder: #7895a0;
  --btn-text: #173a45;
  --note: #557783;
  --error: #9b4f55;
  --focus: #1a7e8d;
  --font-hand: "Zen Kurenaido", "Zen Maru Gothic", sans-serif;
  --font-body: "Zen Maru Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: linear-gradient(180deg, #d5e7f8 0%, #eef2fb 45%, #fff6ea 100%);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- 札 (絵の部品を背景にした箱) と紙面 (.inner) ---------- */
.plaque { position: relative; background-repeat: no-repeat; background-size: 100% 100%; }
.plaque > .inner { position: absolute; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.plaque-name { background-image: url(img/a/plaque-name.webp); aspect-ratio: 4 / 1; }
.plaque-name > .inner { inset: 39% 22% 26% 18%; } /* 紙面の中心は札の 48%,55% (月の飾りが左にある) */
.plaque-title { background-image: url(img/a/plaque-title.webp); aspect-ratio: 3 / 2; }
.plaque-title > .inner { inset: 32% 16% 21% 20%; align-items: center; text-align: center; } /* 紙面の中心は札の 52%,56%。星の飾りを避けて文字は幅の 56% まで */
.plaque-cloud { background-image: url(img/a/plaque-title.webp); aspect-ratio: 3 / 2; }
.plaque-cloud > .inner { inset: 22% 15% 22% 15%; align-items: center; text-align: center; }
.plaque-input { background-image: url(img/a/plaque-input.webp); aspect-ratio: 5 / 2.3; } /* スマホは縦に +15% (Codex の伸縮の上限 +18% の中) */
.plaque-input > .inner { inset: 32% 19% 32% 17%; }
.plaque-note { background-image: url(img/a/plaque-note.webp); aspect-ratio: 6 / 1; }
.plaque-note > .inner { inset: 25% 14% 28% 14%; align-items: center; text-align: center; white-space: nowrap; }

/* ---------- 最初の画面 ---------- */
.first-view {
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 600px;
  max-height: 1000px;
  overflow: hidden;
  display: none;
}
.first-view > * { position: absolute; margin: 0; }
.sky {
  inset: 0;
  z-index: 0;
  background: url(img/a/bg-sky-portrait.webp) center / cover no-repeat;
}
.moon-ring { z-index: 10; background: url(img/a/moon-ring.webp) center / contain no-repeat; aspect-ratio: 1; }
.sui-art { z-index: 20; aspect-ratio: 3 / 5; }
.sui-art img {
  width: 100%; height: 100%; object-fit: cover;
  /* 絵の四角い縁を空に溶かす (中央 55% は不透明、左右は外へ透明、上下は外側 18% だけ) */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.sui-halo { z-index: 30; background: url(img/a/sui-halo.webp) center / 100% 100% no-repeat; aspect-ratio: 2 / 3; pointer-events: none; }
.deco { z-index: 35; pointer-events: none; }
.deco-fish { background: url(img/a/deco-fish.webp) center / contain no-repeat; aspect-ratio: 3 / 2; }
.deco-letters { background: url(img/a/deco-letters-stars.webp) center / contain no-repeat; aspect-ratio: 1; }

.brand { z-index: 40; text-decoration: none; color: var(--ink); }
.brand > .inner { flex-direction: row; align-items: center; justify-content: center; gap: .5em; white-space: nowrap; font-family: var(--font-hand); font-size: 10px; line-height: 1.2; font-weight: 500; }
.brand small { font-family: var(--font-body); font-size: 8px; color: var(--note); letter-spacing: .08em; }

.plaque-title { z-index: 40; }
h1 {
  margin: 0;
  font-family: var(--font-hand); font-weight: 400;
  font-size: 19px; line-height: 1.25; color: var(--ink);
  letter-spacing: 0; white-space: nowrap;
}

.dream-form { inset: 0; z-index: 40; pointer-events: none; }
.dream-form > * { position: absolute; margin: 0; pointer-events: auto; }
/* 入力の雲紙: 絵は罫線なし。罫線は CSS で文字の行の高さと同じ間隔に引く (絵に描いた罫線は幅で文字の行と合わない)。
   行の高さ = 紙面の高さ ÷ 3 (紙面 = 雲紙の高さ 44% = 幅 × 0.4 × 0.44)。--pw は雲紙の幅。 */
.plaque-input { --pw: 96vw; }
#dream-input {
  --line: calc(var(--pw) * var(--ph, 0.46) * 0.36 / 3); /* --ph = 高さ/幅 */
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; resize: none;
  font-size: clamp(12px, calc(var(--line) * .5), 15px); line-height: var(--line); color: var(--ink);
  background-color: transparent;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), rgba(215,166,58,.55) calc(var(--line) - 1px), rgba(215,166,58,.55) var(--line));
  background-attachment: local;
  outline: none;
  scrollbar-width: none;
}
#dream-input::placeholder { color: var(--placeholder); }
.plaque-input:focus-within { filter: drop-shadow(0 0 6px rgba(26,126,141,.45)); }
/* 注記は札に入れず、雲紙のすぐ下に 1 行 (2026-11-02 オーナー「注意文言はもっと違う場所に」)。白い薄い帯を敷いて空の上でも読める */
.privacy-note { display: flex; align-items: center; gap: .6em; font-size: 11px; line-height: 1.4; color: var(--note); white-space: nowrap; }
.privacy-note strong { color: var(--ink); }
.privacy-note > span:not(.dream-count) { flex: 1; }
.privacy-note, #form-note { background: rgba(255,249,238,.9); border: 1px solid rgba(215,166,58,.55); border-radius: 999px; padding: 5px 14px; backdrop-filter: blur(2px); }
.dream-count { margin-left: auto; color: var(--note); }
/* ボタンは絵でなく CSS (絵のボタンは発光の四角い縁が空の上で「貼った」ように見えた、2026-11-02 オーナー指摘)。金の縁と淡い光で札の線と揃える */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 26px;
  border: 1px solid rgba(215,166,58,.8); border-radius: 999px;
  background: linear-gradient(180deg, #fff7dc 0%, #f1d58e 100%);
  box-shadow: 0 6px 14px rgba(215,166,58,.22), inset 0 1px 0 #fffdf5;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1; color: var(--btn-text);
  letter-spacing: .04em; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta::after { content: "→"; margin-left: .5em; font-weight: 400; }
.cta:hover { box-shadow: 0 8px 18px rgba(215,166,58,.35), inset 0 1px 0 #fffdf5; }
.cta:active { transform: scale(.97); }
.cta:disabled { opacity: .6; cursor: progress; }
#form-note { font-size: 11px; line-height: 1.4; color: var(--error); background: rgba(255,249,238,.85); border-radius: 999px; padding: .3em 1em; }
#form-note:empty { display: none; }
.error-message {
  display: none;
  font-size: 11px; line-height: 1.4; color: var(--error);
  background: rgba(246,213,210,.92); border-radius: 999px; padding: .35em 1em;
}
body[data-state="error"] .error-message { display: block; }

/* 375×667 (layout.md §4 を元に、札の中に文字が入り、部品同士が重ならない大きさへ直した。Codex のレビュー 2026-11-02 lp-review を反映) */
.moon-ring { left: 50%; top: 10%; width: 48%; }
.sui-art { left: 58%; top: 13%; width: 38%; }          /* 右端 96% = 余白 15px */
.sui-halo { left: 52%; top: 10%; width: 46%; }
.deco-fish { left: 0; top: 40%; width: 46%; }
.deco-letters { left: 0; top: 31%; width: 24%; }
.brand { left: 2%; top: 2%; width: 62%; }
.plaque-title { left: 1%; top: calc(2% + 62vw / 4 + 8px); width: 62%; } /* 名前札の下 8px。右端 63% */
.plaque-input { left: 4%; top: 55%; width: 92%; --pw: 92vw; }            /* 左右 4% で飾りが切れない */
.privacy-note { left: 4%; top: calc(55% + 92vw * 0.46 + 20px); width: 92%; }  /* 雲紙の箱の下 20px */
.cta { right: 4%; top: calc(55% + 92vw * 0.46 + 20px + 27px + 18px); }        /* 帯の下 18px */
#form-note { left: 4%; top: calc(55% + 92vw * 0.46 + 20px + 27px + 20px); max-width: 52%; }
.error-message { left: 6%; top: calc(55% - 24px); width: 88%; }

/* 390×844 など、高さのある画面: スイの足元と雲紙の間を 80〜96px に (layout.md §5 の「余白として残す」を Codex のレビューで改めた) */
@media (min-height: 760px) and (max-width: 899px) {
  .moon-ring { left: 51%; top: 10%; width: 47%; }
  .sui-art { left: 59%; top: 13%; width: 37%; }
  .sui-halo { left: 53%; top: 10%; width: 45%; }
  .deco-fish { left: 2%; top: 41%; width: 42%; }
  .deco-letters { left: 0; top: 34%; width: 21%; }
  .brand { left: 2%; top: 2%; width: 62%; }
  .plaque-title { left: 1%; top: calc(2% + 62vw / 4 + 10px); width: 62%; }
  .plaque-input { left: 4%; top: 54%; width: 92%; --pw: 92vw; }
  .privacy-note { left: 4%; top: calc(54% + 92vw * 0.46 + 20px); width: 92%; }
  .cta { right: 4%; top: calc(54% + 92vw * 0.46 + 20px + 27px + 18px); }
  #form-note { top: calc(54% + 92vw * 0.46 + 20px + 27px + 20px); }
  .error-message { top: calc(54% - 24px); }
  h1 { font-size: 19px; }
}

/* PC (layout.md §6 を元に、左の列を「名前 → 見出し → 雲紙 → 帯 → ボタン」の縦積みに。札の大きさは幅と高さの小さい方で決め、低い画面 (1366×650) でも重ならない) */
@media (min-width: 900px) {
  .first-view {
    min-height: 640px; max-height: 900px;
    --bw: min(26vw, max(30vh, 300px));      /* 名前札の幅 */
    --tw: min(36vw, 50vh);                  /* 見出し札の幅 (高さは 2/3) */
    --pw: min(44vw, 64vh);                  /* 雲紙の幅 (高さは 0.4) */
    --tt: calc(4% + var(--bw) / 4 + 12px);  /* 見出し札の上端 = 名前札の下 12px */
    --pt: calc(var(--tt) + var(--tw) * 2 / 3 + 20px);   /* 雲紙の上端 = 見出し札の下 20px */
    --nt: calc(var(--pt) + var(--pw) * 0.4 + 16px);     /* 帯の上端 = 雲紙の箱の下 16px */
  }
  .sky { background-image: url(img/a/bg-sky-landscape.webp); }
  .moon-ring { left: 54%; top: 4%; width: 36%; }
  .sui-art { left: 60%; top: 7%; width: 25%; }
  .sui-art img { filter: contrast(1.06) saturate(1.05); }
  .sui-halo { left: 56%; top: 2%; width: 33%; }
  .deco-fish { left: 77%; top: 50%; width: 20%; }
  .deco-letters { left: 86%; top: 5%; width: 12%; }
  .brand { left: 3%; top: 4%; width: var(--bw); }
  .brand > .inner { font-size: clamp(11px, calc(var(--bw) * 0.044), 14px); }
  .brand small { font-size: 10px; }
  .plaque-title { left: 3%; top: var(--tt); width: var(--tw); }
  h1 { font-size: clamp(24px, calc(var(--tw) * 0.076), 44px); line-height: 1.22; } /* 7 文字が札の幅の 55% に入る */
  .plaque-input { left: 3%; top: var(--pt); width: var(--pw); --pw: min(44vw, 64vh); --ph: 0.4; aspect-ratio: 5 / 2; }
  #dream-input { font-size: clamp(13px, calc(var(--line) * .6), 15px); }
  .privacy-note { left: 3%; width: var(--pw); top: var(--nt); font-size: 11px; }
  .cta { left: auto; right: calc(100% - 3% - var(--pw)); top: calc(var(--nt) + 27px + 16px); min-height: 50px; font-size: 16px; padding: 0 30px; } /* 右端を雲紙の右端に揃える */
  #form-note { left: 3%; top: calc(var(--nt) + 27px + 18px); font-size: 13px; max-width: calc(var(--pw) - 200px); }
  .error-message { left: 5%; top: calc(var(--pt) - 30px); width: calc(var(--pw) - 4%); font-size: 13px; }
}
@media (min-width: 1600px) {
  .first-view { width: 1600px; margin: 0 auto; }
}

/* ---------- 読んでいる間・結果 ---------- */
.reading-stage, .limit-message {
  display: none;
  width: min(560px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0 12px;
  text-align: center;
  container-type: inline-size;
}
.face-frame {
  position: relative;
  width: 62%; max-width: 300px; aspect-ratio: 1;
  margin: 0 auto 18px;
  background: url(img/a/frame-face.webp) center / 100% 100% no-repeat;
}
.face-frame img {
  position: absolute; left: 50%; top: 50%; width: 56%; height: 56%;
  transform: translate(-50%, -50%);
  border-radius: 50%; object-fit: cover;
}
.reading-kicker { margin: 0 0 .4em; font-size: 13px; line-height: 1.5; font-weight: 700; letter-spacing: .12em; color: var(--focus); }
.reading-loading { display: none; width: 100%; }
.reading-wait { margin: 0; font-family: var(--font-hand); font-size: clamp(15px, 5.5cqw, 24px); line-height: 1.45; color: var(--ink); white-space: nowrap; }
.loading-trail { display: flex; justify-content: center; gap: 9px; margin-top: 10px; }
.loading-trail i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: trail 1.2s ease-in-out infinite; }
.loading-trail i:nth-child(2) { animation-delay: .2s; }
.loading-trail i:nth-child(3) { animation-delay: .4s; }
@keyframes trail { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

.used-copy { display: none; width: 100%; margin: 0 auto 16px; font-size: clamp(10px, 3.1cqw, 14px); line-height: 1.3; color: var(--ink); }
.used-copy strong { color: var(--focus); }

/* 開いた雲の手紙: 上と下 (封筒) は固定、中央の紙面だけ伸びる (border-image の 3 分割。元絵 900×1080)。
   文字は紙面 (左 20%〜右 82%、上 19%〜下 67%) の中: 左右の余白は縁 9cqw + padding 11cqw。 */
.letter {
  display: none;
  text-align: left;
  border-style: solid;
  border-width: 26cqw 9cqw 40cqw 9cqw;
  border-image: url(img/a/plaque-letter-open.webp) 260 90 400 90 fill / 26cqw 9cqw 40cqw 9cqw stretch;
  padding: 0 11cqw 0 11cqw;
  margin: -6cqw 0 0;
}
.letter .reading-kicker { text-align: center; }
#reading-text { font-size: clamp(13px, 4cqw, 15px); line-height: 1.9; color: var(--text); }
#reading-text p { margin: 0 0 1em; }
#reading-text p:last-child { margin-bottom: 0; }

.limit-message .full-copy { display: none; width: 100%; margin: 0 auto; }
.full-copy p { margin: 0; font-family: var(--font-hand); font-size: clamp(14px, 5cqw, 22px); line-height: 1.45; color: var(--ink); white-space: nowrap; }
.full-copy strong { font-weight: 400; color: var(--focus); }

/* ---------- 状態の見せ分け ---------- */
body[data-state="idle"] .state-idle,
body[data-state="error"] .state-error,
body[data-state="loading"] .state-loading,
body[data-state="done"] .state-done,
body[data-state="used"] .state-used,
body[data-state="full"] .state-full { display: block; }
body[data-state="loading"] .reading-loading { display: block; }
body[data-state="done"] .reading-result,
body[data-state="used"] .reading-result { display: block; }
body[data-state="used"] .used-copy { display: block; }
body[data-state="full"] .full-copy { display: block; }

/* ---------- メール登録 ---------- */
.signup-section {
  display: none;
  position: relative;
  margin: 28px auto 0;
  padding: 34px 20px 40px;
  background: url(img/a/band-mailbox.webp) right 28% top / cover no-repeat;
  color: var(--ink);
}
.signup-inner { width: min(560px, 100%); margin: 0 auto; background: rgba(255,249,238,.78); border-radius: 22px; padding: 22px 20px 18px; backdrop-filter: blur(2px); }
.eyebrow { margin: 0 0 .4em; font-size: 12px; letter-spacing: .18em; font-weight: 700; color: var(--focus); }
h2 { margin: 0; font-family: var(--font-hand); font-weight: 400; font-size: 28px; line-height: 1.3; color: var(--ink); }
.signup-lead { margin: .7em 0 1.1em; font-size: 14px; line-height: 1.75; }
.email-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
#email-input {
  width: 100%; min-height: 48px; padding: 0 16px;
  border: 1.5px solid rgba(21,61,74,.25); border-radius: 999px; background: #fff;
  color: var(--ink);
}
#email-input::placeholder { color: var(--placeholder); }
#signup-submit {
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ffe9a8, #e9bb57);
  box-shadow: 0 6px 16px rgba(215,166,58,.35);
  font-weight: 700; color: var(--btn-text);
}
#signup-submit:disabled { opacity: .6; cursor: progress; }
.signup-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--note); }
#signup-done, #signup-error { display: none; margin: 12px 0 0; font-size: 15px; font-weight: 700; }
#signup-done { color: var(--focus); }
#signup-error { color: var(--error); }
#signup-form.is-done .email-row, #signup-form.is-done .signup-note { display: none; }
#signup-done.is-visible, #signup-error.is-visible { display: block; }
@media (min-width: 640px) {
  .email-row { grid-template-columns: 1fr auto; }
  .signup-section { padding: 48px 24px 56px; background-position: right top; }
  h2 { font-size: 34px; }
}

/* ---------- 紹介・末尾 ---------- */
.character-note { width: min(560px, calc(100% - 32px)); margin: 26px auto 0; font-size: 12px; line-height: 1.6; color: var(--note); text-align: center; }
.character-note p { margin: 0; }
.character-note strong { color: var(--ink); }
footer {
  margin-top: 24px;
  padding: 44px 16px 36px;
  min-height: 200px;
  background: url(img/a/bg-footer.webp) center / cover no-repeat;
  font-size: 12px; line-height: 1.7; color: var(--ink); text-align: center;
}
.footer-inner { display: inline-block; max-width: 100%; padding: 12px 18px; border-radius: 18px; background: rgba(255,249,238,.72); }
footer p { margin: 0; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 6px 0; }

/* ---------- 動き (layout.md §8) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .deco-fish { animation: drift 16s ease-in-out infinite; }
  .moon-ring { animation: breathe 6s ease-in-out infinite; }
}
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }
@keyframes breathe { 0%, 100% { opacity: .88; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* 2026-11-02 登録欄の値段と、登録の後の 1 タップ (Vault Decisions/2026-11-02-trial-lp-goals-and-metrics)。つなぎは Claude */
.signup-price { margin: 0 0 1.1em; font-size: 14px; line-height: 1.6; color: var(--ink); }
.signup-price strong { font-size: 17px; color: var(--focus); }
.want-block { display: none; margin: 16px 0 0; }
.want-block.is-visible { display: block; }
.want-q { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.want-options { display: grid; grid-template-columns: 1fr; gap: 8px; }
.want-options button { font: inherit; font-size: 14px; line-height: 1.4; min-height: 44px; padding: 10px 14px; text-align: left; border-radius: 12px; border: 1px solid var(--focus); background: rgba(255,255,255,.7); color: var(--ink); cursor: pointer; }
.want-options button:hover { background: #fff; }
.want-options button:disabled { opacity: .5; cursor: default; }
.want-block.is-answered .want-options, .want-block.is-answered .want-q { display: none; } /* 答えたら問いも畳む */
.want-done { display: none; margin: 0; font-size: 14px; line-height: 1.6; font-weight: 700; color: var(--focus); }
.want-done.is-visible { display: block; }
@media (min-width: 640px) { .want-options { grid-template-columns: 1fr 1fr; } }