/* arcanova ── 和の世界観
   生成り・墨・朱・金泥。彩度は低く、暖色に寄せる */

:root{
  --bg:#f4efe4; --bg2:#ece5d6; --ink:#221d17; --sub:#6b6155;
  --line:#d8cdb8; --red:#9c2b2b; --gold:#a8853c; --glow:#e8a13c;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15120e; --bg2:#1e1a14; --ink:#e9e1d2; --sub:#9a8f7e;
    --line:#332c22; --red:#c4574f; --gold:#c9a35c; --glow:#e8a13c;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Noto Serif JP","Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
  line-height:1.95; font-size:16px;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:640px;margin:0 auto;padding:48px 24px 96px}

/* 見出し */
.mark{ text-align:center; margin:0 0 40px }
.mark b{ display:block; font-size:13px; letter-spacing:.5em; color:var(--gold);
  font-weight:400; text-indent:.5em }
.mark span{ display:block; margin-top:10px; font-size:12px; color:var(--sub); letter-spacing:.2em }

h1{ font-size:21px; font-weight:500; letter-spacing:.08em; margin:0 0 28px }
h2{ font-size:17px; font-weight:500; letter-spacing:.06em; margin:52px 0 18px;
  padding-bottom:10px; border-bottom:1px solid var(--line) }
p{ margin:0 0 1.35em }
ul{ margin:0 0 1.35em; padding-left:1.2em }
li{ margin:.4em 0 }

.lead{ color:var(--sub); font-size:15px }
.q{ font-size:18px; line-height:2.1; white-space:pre-wrap; margin:0 0 26px }

textarea{
  width:100%; min-height:220px; padding:18px; border:1px solid var(--line);
  border-radius:2px; background:var(--bg2); color:var(--ink);
  font-family:inherit; font-size:16px; line-height:1.9; resize:vertical;
}
textarea:focus{ outline:none; border-color:var(--gold) }

input[type=text]{
  width:100%; padding:16px; border:1px solid var(--line); border-radius:2px;
  background:var(--bg2); color:var(--ink); font-family:inherit; font-size:17px;
  text-align:center; letter-spacing:.3em;
}
input:focus{ outline:none; border-color:var(--gold) }

button{
  display:block; width:100%; margin-top:22px; padding:17px;
  border:1px solid var(--ink); border-radius:2px;
  background:transparent; color:var(--ink);
  font-family:inherit; font-size:16px; letter-spacing:.2em; cursor:pointer;
  transition:background .2s,color .2s;
}
button:hover{ background:var(--ink); color:var(--bg) }
button:disabled{ opacity:.35; cursor:default }
button:disabled:hover{ background:transparent; color:var(--ink) }

.tale{ font-size:15px; line-height:2.2; color:var(--ink) }
.tale p{ margin:0 0 1.6em }
.rite .tale{ color:var(--sub); font-size:14.5px }
.meta{ display:flex; justify-content:space-between; font-size:12px;
  color:var(--sub); letter-spacing:.15em; margin-bottom:14px }
.err{ color:var(--red); font-size:14px; margin-top:14px; min-height:1.4em }
.note{ font-size:12.5px; color:var(--sub); line-height:1.9; margin-top:34px }

/* ── 一の段 灯 ── 待ち時間の演出 ───────────────────── */
.rite{ text-align:center; padding:56px 0 40px }
.candle{ position:relative; width:64px; height:150px; margin:0 auto 34px }
.flame{
  position:absolute; left:50%; bottom:56px; width:16px; height:44px;
  margin-left:-8px; border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 72%, #fff6d8 0%, var(--glow) 42%, var(--red) 100%);
  filter:blur(.4px); transform-origin:50% 100%;
  animation:sway 2.6s ease-in-out infinite;
  box-shadow:0 0 26px 10px rgba(232,161,60,.32), 0 0 60px 24px rgba(232,161,60,.14);
}
.body{
  position:absolute; left:50%; bottom:0; width:26px; height:58px; margin-left:-13px;
  background:linear-gradient(180deg,#f0e6cf,#cbbb99); border-radius:3px 3px 1px 1px;
}
@keyframes sway{
  0%,100%{ transform:rotate(-3deg) scaleY(1) }
  35%    { transform:rotate(4deg)  scaleY(1.14) }
  65%    { transform:rotate(-2deg) scaleY(.93) }
}
.ink{
  position:relative; width:130px; height:130px; margin:0 auto 30px; border-radius:50%;
  background:radial-gradient(circle, rgba(34,29,23,.30) 0%, rgba(34,29,23,0) 68%);
  animation:bloom 5.5s ease-out infinite;
}
@keyframes bloom{
  0%  { transform:scale(.18); opacity:.9 }
  70% { transform:scale(1);   opacity:.24 }
  100%{ transform:scale(1.2); opacity:0 }
}
.rite p{ color:var(--sub); font-size:15px; letter-spacing:.1em; transition:opacity .6s }
.dots::after{ content:''; animation:dots 1.8s steps(4,end) infinite }
@keyframes dots{ 0%{content:''} 25%{content:'・'} 50%{content:'・・'} 75%{content:'・・・'} }

/* ── 鑑定文 ─────────────────────────────────────── */
.reading{ animation:fade 1.4s ease }
@keyframes fade{ from{opacity:0; transform:translateY(10px)} to{opacity:1} }
.reading h2:first-of-type{ margin-top:0 }

.cta{
  margin:64px 0 0; padding:26px; border:1px solid var(--gold);
  background:var(--bg2); text-align:center;
}
.cta p{ font-size:15px; color:var(--sub) }
.cta strong{ display:block; font-size:17px; font-weight:500; color:var(--ink); margin-bottom:14px }
.cta a{
  display:block; padding:17px; text-decoration:none;
  border:1px solid var(--ink); color:var(--ink); letter-spacing:.2em; font-size:16px;
}
.cta a:hover{ background:var(--ink); color:var(--bg) }

.pick{ margin:26px 0 0; padding:24px 26px; border:1px solid var(--line); background:var(--bg2) }
.pick .tag{ font-size:12px; letter-spacing:.3em; color:var(--gold); margin:0 0 12px }
.pick ol{ margin:0 0 26px; padding-left:1.4em }
.pick ol:last-child{ margin-bottom:0 }
.pick li{ margin:.7em 0; line-height:1.9 }
.pick b{ font-weight:500 }
.pick .sub{ display:inline-block; margin-top:6px; font-size:13px; color:var(--sub); line-height:1.8 }

.code{
  display:block; width:100%; margin:0 0 10px; padding:20px 12px;
  border:1px dashed var(--gold); border-radius:2px; background:var(--bg2);
  color:var(--gold); font-family:inherit; font-size:25px; letter-spacing:.16em;
  line-height:1.7; text-align:center; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s;
}
.code:hover{ border-style:solid }
.code.copied{ background:var(--gold); color:var(--bg); border-style:solid }

.line img{ max-width:100%; height:auto }

.foot{ margin-top:56px; text-align:center; font-size:12px; color:var(--sub); letter-spacing:.2em }
.bar{
  position:fixed; left:0; right:0; bottom:0; padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--line);
  box-shadow:0 -10px 26px rgba(0,0,0,.10);
  animation:rise .5s ease;
}
.bar button{ margin:0; max-width:600px; margin-inline:auto }
@keyframes rise{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }

.hide{ display:none }

/* 二の段 ── 材料フォーム */
.slot{ margin:0 0 40px; padding:24px 26px; border:1px solid var(--line); background:var(--bg2) }
.slot .tag{ font-size:12px; letter-spacing:.3em; color:var(--gold); margin:0 0 12px }
.slot label{ display:block; font-size:15.5px; line-height:1.9; font-weight:500 }
.slot .sub{ margin:8px 0 0; font-size:13px; color:var(--sub); line-height:1.8 }
.slot textarea{ margin-top:16px; min-height:130px }
.cta ul{ font-size:14.5px; color:var(--sub); line-height:2; margin:18px 0 0 }
.cta b{ font-weight:500; color:var(--ink) }

/* 札の読み（漢字の下に小さく添える） */
.yomi{ font-size:12.5px; color:var(--sub); letter-spacing:.16em; text-align:center; margin:0 0 10px }

/* 今すぐ消す（約束の実装。目立たせない） */
.erase{ margin:44px 0 0; text-align:center; font-size:12px; color:var(--sub) }
.erase button{
  display:inline; width:auto; margin:0; padding:0; border:0; background:none;
  color:var(--sub); font-size:12px; text-decoration:underline; letter-spacing:.05em;
}
.erase button:hover{ background:none; color:var(--red) }

/* 材料の写し */
.shots{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0 }
.shot{ position:relative; margin:0; width:86px }
.shot img{ width:86px; height:86px; object-fit:cover; border:1px solid var(--line); display:block }
.shot button{
  position:absolute; top:-8px; right:-8px; width:22px; height:22px; margin:0; padding:0;
  border:1px solid var(--line); border-radius:50%; background:var(--bg);
  font-size:10px; line-height:1; color:var(--sub);
}
.pick-img{
  display:inline-block; margin-top:14px; padding:8px 16px; cursor:pointer;
  border:1px dashed var(--line); border-radius:2px; font-size:13px; color:var(--sub);
}
.pick-img:hover{ border-color:var(--gold); color:var(--gold) }