/* FUTAEL 確定デザインシステム(docs/ui_spec_from_mock.md §0 実測HEX)。独自変更禁止。
   白基調 / 紫=信頼・金額・CTA / ピンク=祝福(After画面のみ) / 緑=安心帯 */
:root{
  --pp:#4840C0;   /* 紫プライマリ */
  --pl:#D8D8F0;   /* 紫淡 */
  --pk:#F86898;   /* ピンク(祝福・After画面のみ) */
  --pkl:#FCE4EC;  /* ピンク淡 */
  --gr:#388848;   /* 緑(安心) */
  --grl:#E0F0E8;  /* 緑淡 */
  --ln:#E8E8E8;   /* 枠・区切り */
  --mut:#8A8A8E;  /* 補助テキスト */
  --ink:#181818;  /* 本文 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
button{font-family:inherit;color:inherit}

/* ---- 画面切替 ---- */
.screen{display:none;position:relative;min-height:100vh}
.screen.on{display:block}
.wrap{max-width:480px;margin:0 auto;padding:4px 18px 140px;overflow-wrap:anywhere}

/* ---- ヘッダー ---- */
.hd{max-width:480px;margin:0 auto;padding:14px 18px 4px;display:flex;align-items:center;
  justify-content:space-between;gap:8px;position:relative;z-index:2}
.logo{display:flex;align-items:center;gap:7px;font-weight:900;font-size:17px;letter-spacing:.06em;color:var(--pp)}
.logo .mark{width:20px;height:20px;border-radius:50%;background:var(--pl);position:relative;display:inline-block}
.logo .mark::before,.logo .mark::after{content:"";position:absolute;left:4px;right:4px;height:2px;
  border-radius:2px;background:var(--pp)}
.logo .mark::before{top:7px}.logo .mark::after{top:11px;opacity:.5}
.pill{background:var(--pl);color:var(--pp);font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px}
.back{border:0;background:none;font-size:16px;font-weight:800;padding:4px 0;cursor:pointer}
.icobtn{border:0;background:var(--pl);color:var(--pp);width:34px;height:34px;border-radius:50%;
  font-size:17px;cursor:pointer}

/* ---- FV ---- */
h1{font-size:26px;font-weight:900;line-height:1.4;margin:10px 0 6px}
h1 b{color:var(--pp)}
.sub{color:var(--mut);font-size:13px;margin:0 0 18px}
.dropcard{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px dashed var(--pp);
  border-radius:20px;padding:26px 18px;text-align:center;background:#FAFAFF;cursor:pointer}
.dropicon{font-size:26px}
.droptitle{font-size:15px;font-weight:800;color:var(--pp)}
.hint{color:var(--mut);font-size:12px;line-height:1.7}
#preview{max-width:100%;border-radius:14px;display:none;margin-top:10px}
.foot-ok{text-align:center;color:var(--gr);font-size:12px;font-weight:700;margin:22px 0 0}

/* ---- 生成中プログレス(体感演出) ---- */
.prog{display:none;margin-top:18px;text-align:center}
.prog .bar{height:8px;border-radius:99px;background:var(--pl);overflow:hidden}
.prog .fill{height:100%;width:8%;background:var(--pp);border-radius:99px;transition:width .5s ease}
.prog .ptxt{color:var(--pp);font-weight:800;font-size:13px;margin-top:10px}
.prog .pstep{color:var(--mut);font-size:11px;margin-top:4px}
.err{display:none;color:#C0392B;font-size:13px;margin-top:12px;line-height:1.7}

/* ---- 下部CTA(1画面1CTA・フル幅) ---- */
.cta{position:fixed;left:0;right:0;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--ln);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
.ctamax{max-width:480px;margin:0 auto}
.btn{width:100%;border:0;border-radius:16px;background:var(--pp);color:#fff;font-size:17px;
  font-weight:900;padding:16px;cursor:pointer}
.btn:disabled{opacity:.35}
.note{text-align:center;color:var(--mut);font-size:11px;margin:8px 0 0}

/* ---- 結果画面(After) ---- */
.pinkglow{position:absolute;top:0;left:0;right:0;height:230px;pointer-events:none;
  background:linear-gradient(180deg,var(--pkl) 0%,rgba(252,228,236,0) 100%)}
.beforelabel{display:none;text-align:center;color:var(--mut);font-size:13px;font-weight:700;margin:6px 0 0}
.frame{position:relative;margin-top:12px;border-radius:22px;overflow:hidden;background:var(--pl);
  box-shadow:0 6px 24px rgba(72,64,192,.10)}
.frame img{display:block;width:100%}
.badge{position:absolute;top:14px;right:14px;background:var(--pk);color:#fff;font-weight:900;
  font-size:15px;padding:9px 15px;border-radius:99px;box-shadow:0 6px 18px rgba(248,104,152,.45);
  transform-origin:top right;animation:pop 2.6s cubic-bezier(.2,.9,.25,1) forwards}
.badge .hrt{margin-right:5px}
@keyframes pop{
  0%{transform:scale(.2);opacity:0}
  9%{transform:scale(1.55);opacity:1}
  16%{transform:scale(1.32)}
  77%{transform:scale(1.32)}   /* ここまで約2秒=大きく表示 */
  100%{transform:scale(1)}     /* → 縮小して定位置 */
}
.ghostpill{position:absolute;left:12px;bottom:12px;border:0;background:rgba(255,255,255,.92);
  color:var(--ink);font-weight:800;font-size:13px;padding:9px 14px;border-radius:99px;cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.12)}

.tabs{display:flex;gap:8px;margin:14px 0 4px}
.tab{position:relative;flex:1;border:2px solid var(--pl);background:#fff;color:var(--pp);
  border-radius:13px;padding:11px 0 10px;font-weight:800;font-size:14px;cursor:pointer}
.tab.on{background:var(--pp);border-color:var(--pp);color:#fff}
.tab.wait{opacity:.45;cursor:default}
.tab .dot{display:inline-block;width:6px;height:6px;border-radius:99px;background:currentColor;
  margin-left:5px;animation:bl 1s infinite}
@keyframes bl{50%{opacity:.2}}
.tab .hot{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--pk);color:#fff;
  font-size:10px;font-weight:900;padding:2px 8px;border-radius:99px;white-space:nowrap}

.pricerow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:18px}
.plabel{font-size:13px;font-weight:800;color:var(--mut);margin-right:6px}
.price{font-size:34px;font-weight:900;color:var(--pp);letter-spacing:-.01em;line-height:1.1}
.price i{font-style:normal;font-size:21px}
.tax{font-size:11px;color:var(--mut);margin-left:4px}
.link{border:0;background:none;color:var(--pp);font-size:13px;font-weight:800;cursor:pointer;padding:4px 0}
.links{display:flex;gap:18px;justify-content:center;margin-top:16px;border-top:1px solid var(--ln);padding-top:14px}

.dis{color:var(--mut);font-size:11px;line-height:1.8;margin-top:18px}

/* ---- 比較画面 ---- */
.calmbar{background:var(--grl);color:var(--gr);font-size:13px;font-weight:800;text-align:center;
  padding:11px;border-radius:12px;margin-top:10px}
.sorts{display:flex;gap:8px;margin:14px 0 12px}
.sortbtn{flex:1;border:1px solid var(--ln);background:#fff;color:var(--mut);border-radius:99px;
  padding:8px 0;font-size:12px;font-weight:800;cursor:pointer}
.sortbtn.on{border-color:var(--pp);background:var(--pl);color:var(--pp)}
.ccard{position:relative;display:flex;gap:10px;border:1px solid var(--ln);border-radius:18px;padding:11px;
  margin-bottom:12px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.ccard .ct{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none;align-self:center}
/* 掲載院を増やしたときに画像がまだ無くてもカードが崩れないようにする代替枠 */
.ccard .ct.ph{display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;
  color:var(--pp);background:linear-gradient(160deg,#f3f1ff,#e6e1fb)}
.cbody{flex:1;min-width:0}
.cname{font-size:13px;font-weight:900;line-height:1.4;padding-right:6px}
.cbadge{position:absolute;top:9px;right:11px;background:var(--pp);color:#fff;font-size:10px;
  font-weight:900;padding:2px 8px;border-radius:99px}
.cprice{display:flex;align-items:baseline;gap:3px;font-size:21px;font-weight:900;color:var(--pp);
  margin-top:2px;line-height:1.25}
.cprice i{font-style:normal;font-size:14px}
.cmeta{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:11px;font-weight:700;margin-top:3px}
.cmeta .star{color:#F5A623}
.cact{align-self:center;border:0;background:var(--pp);color:#fff;font-size:11px;font-weight:900;
  border-radius:11px;padding:10px;cursor:pointer;flex:none}

.safety{display:flex;gap:8px;background:var(--grl);border-radius:14px;padding:12px 8px;margin-top:16px}
.sf{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  color:var(--gr);font-size:11px;font-weight:800;line-height:1.5}
.sfico{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:#fff;font-size:13px;font-weight:900}
.askrow{display:block;width:100%;margin-top:16px;border:1px solid var(--pl);background:#FAFAFF;
  color:var(--pp);font-size:13px;font-weight:800;border-radius:14px;padding:13px;cursor:pointer}

/* ---- 相談チャット ---- */
.chatlog{margin-top:12px;display:flex;flex-direction:column;gap:8px}
/* 一斉に出さず1吹き出しずつ下からふわっと出す(人が打っている感を出すための演出) */
.bub{max-width:88%;font-size:14px;line-height:1.75;padding:11px 14px;border-radius:16px;
  animation:bubin .32s cubic-bezier(.2,.8,.3,1) both}
@keyframes bubin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bub.bot{background:var(--pl);color:var(--ink);border-bottom-left-radius:5px;align-self:flex-start}
.bub.me{background:var(--pp);color:#fff;border-bottom-right-radius:5px;align-self:flex-end;font-weight:700}

/* 入力中インジケータ(3点が順に沈む) */
.bub.typing{display:flex;gap:5px;align-items:center;padding:14px}
.bub.typing i{width:7px;height:7px;border-radius:50%;background:var(--pp);opacity:.35;
  animation:dot 1.1s infinite}
.bub.typing i:nth-child(2){animation-delay:.16s}
.bub.typing i:nth-child(3){animation-delay:.32s}
@keyframes dot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}}

.chatopts{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.opt{border:1px solid var(--pp);background:#fff;color:var(--pp);font-size:13px;font-weight:800;
  border-radius:99px;padding:12px 16px;text-align:left;cursor:pointer}
.opt.alt{border-color:var(--ln);color:var(--mut)}
/* 応答の途中は選択肢を押させない(連打で会話が二重に進むのを防ぐ) */
.chatopts.busy{opacity:.4;pointer-events:none}

.chatform{display:flex;gap:8px;margin-top:14px}
.chatform input{flex:1;min-width:0;border:1px solid var(--ln);border-radius:99px;
  padding:12px 16px;font-size:16px;color:var(--ink);background:#fff}
.chatform input:focus{outline:none;border-color:var(--pp)}
.chatform button{flex:0 0 46px;height:46px;border:none;border-radius:50%;background:var(--pp);
  color:#fff;font-size:15px;cursor:pointer}
.chatform button:disabled{opacity:.35;cursor:default}

/* ---- トースト ---- */
.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);z-index:9;max-width:88%;
  background:rgba(24,24,24,.92);color:#fff;font-size:12px;font-weight:700;line-height:1.6;
  padding:10px 16px;border-radius:99px;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.on{opacity:1}