/* ============================================================
   v2 app skin — 回答者向け画面（/me /gift /login /s/…）
   既存の app.css と各ページの <style> の後ろに読み込み、
   変数と主要部品だけを上書きする。JS には触れない。
   ============================================================ */

:root{
  --ink:#12853C;
  --ink-deep:#17181A;
  --ink-mid:#18A34A;
  --text:#17181A;
  --text-2:#4E5760;
  --text-3:#6E767F;
  --line:#EAE7E1;
  --line-strong:#DCD8D1;
  --paper:#FFFFFF;
  --bg:#FFFBF7;
  --paper-2:#FBFAF7;
  --soft:#F1F3F5;
  --green:#18A34A;
  --clay:#F15D4C;
  --clay-soft:#FFF0ED;
  --hair:rgba(23,24,26,.08);
  --r:12px; --r-sm:10px; --r-lg:20px;
  --sh:0 14px 32px -28px rgba(23,24,26,.55);
  --f:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  --num:"Noto Sans JP","Inter",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

body{
  background:var(--bg) !important;
  color:var(--text);
  font-family:var(--f);
  letter-spacing:0;
  font-feature-settings:normal;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 共通の外枠 ---------- */
.shell{max-width:660px;margin:0 auto;padding:0 18px 80px}
.top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 2px 18px;
}
.top .brand{
  display:inline-flex;align-items:center;gap:8px;
  font-size:19px;font-weight:900;letter-spacing:-.04em;color:#18A34A !important;
  text-decoration:none;
}
.top .brand::before{
  content:"";width:26px;height:26px;flex:none;border-radius:50%;
  background:url(mark.svg) center/26px 26px no-repeat;
}
.top .back{
  font-size:12.5px;font-weight:700;color:var(--text-3) !important;
  text-decoration:none;padding:8px 0;
}
.top .back:hover{color:var(--ink) !important}

h1{font-size:26px !important;font-weight:900 !important;letter-spacing:-.03em;color:var(--ink-deep) !important}
h2{font-weight:800;letter-spacing:-.02em;color:var(--ink-deep)}
.lead{color:var(--text-3) !important;font-size:13px;line-height:1.85}

/* ---------- カード ---------- */
.card{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:20px !important;
  box-shadow:var(--sh);
  padding:22px !important;
}
.card.warm{border-color:#FFD9CE !important;background:#FFFAF7 !important}
.card.cool{border-color:var(--line) !important;background:#fff !important}

/* ---------- ボタン ---------- */
.btn{
  background:#2E3C50 !important;color:#fff !important;
  border:1px solid #2E3C50 !important;border-radius:8px !important;
  font-weight:700 !important;letter-spacing:0 !important;
  height:44px;
}
.btn:hover{background:#243244 !important;border-color:#243244 !important}
.btn.ghost{background:#fff !important;color:var(--ink-deep) !important;border-color:#C9CED4 !important}
.btn.ghost:hover{background:#FAFBFC !important;border-color:#2E3C50 !important}
.btn.quiet{background:#fff !important;color:var(--text-2) !important;border-color:var(--line) !important}
.btn.gobtn{background:#fff !important;color:var(--ink) !important;border-color:var(--green) !important}
.btn:disabled{opacity:.5;cursor:default}

/* ---------- タブ ---------- */
.tabs{
  background:#F1F3F5 !important;border:1px solid var(--line) !important;
  border-radius:14px !important;padding:4px !important;gap:4px !important;
}
.tab{border-radius:10px !important;font-weight:700 !important;color:var(--text-2) !important}
.tab[aria-selected="true"]{
  background:#fff !important;color:var(--ink-deep) !important;
  box-shadow:0 2px 8px -4px rgba(23,24,26,.35) !important;
}
.tab .n{background:var(--clay) !important}

/* ---------- 残高・数値 ---------- */
.bal{font-size:44px !important;font-weight:900 !important;letter-spacing:-.04em !important;color:var(--ink-deep) !important}
.bal small{font-size:14px !important;font-weight:800 !important;color:var(--text-3) !important}
.rows b{font-weight:900 !important;color:var(--ink-deep) !important}
.nextline b{color:var(--ink-deep) !important}

/* ---------- 本人確認バッジ ---------- */
.kyc{border-radius:999px !important;font-weight:800 !important;padding:4px 10px !important}
.kyc.ok{background:#E6F7ED !important;color:#0F7C38 !important}
.kyc.need{background:#FFF0EC !important;color:#C2412F !important}

/* ---------- 交換カード・金額 ---------- */
.cards{gap:8px !important}
.cn{border-radius:14px !important;border-width:1.5px !important;border-color:var(--line) !important}
.cn.on{border-color:var(--green) !important;background:#F2FCF5 !important;box-shadow:inset 0 0 0 1px var(--green) !important}
.cn.on .n{color:var(--ink) !important}
.cn .s{color:var(--text-3) !important}
.dn{border-radius:12px !important;border-width:1.5px !important}
.dn.on{background:var(--green) !important;border-color:var(--green) !important;color:#fff !important}
.bar{background:#EEF0F2 !important;border-radius:999px !important}
.bar i{background:var(--green) !important;border-radius:999px !important}

/* ---------- 注記・状態 ---------- */
.st{background:#FFF0EC !important;color:#C2412F !important;border-radius:999px !important;padding:3px 9px !important}
.st.sent{background:#E6F7ED !important;color:#0F7C38 !important}
.st.rej{background:#F1F3F5 !important;color:#5A646D !important}
.flag{background:#FFF0EC !important;color:#C2412F !important;border-radius:999px !important}
.banner{background:#FFF7E8 !important;border-color:#F3DFB8 !important;border-radius:14px !important}
#toast{background:#17181A !important;border-radius:999px !important}

/* ---------- 入力 ---------- */
input,textarea,select{font-family:var(--f)}
.inp{border-color:var(--line-strong) !important;border-radius:10px !important}
.inp:focus{border-color:var(--green) !important;box-shadow:0 0 0 3px rgba(24,163,74,.12) !important}

/* ---------- ログイン / 登録（panel.html） ---------- */
.shell .top a{letter-spacing:-.02em !important;font-size:19px !important;color:#18A34A !important}
#signup h1,#login h1,#reset h1{font-size:26px !important}
#signup .lead,#login .lead,#reset .lead{font-size:13px}
#signup input,#login input,#reset input{
  border-color:var(--line-strong) !important;border-radius:10px !important;font-size:16px;
}
#signup input:focus,#login input:focus,#reset input:focus{
  border-color:var(--green) !important;box-shadow:0 0 0 3px rgba(24,163,74,.12) !important;
}
#signup .btn,#login .btn,#reset .btn{border-radius:10px !important}
.code-row button{border-color:var(--line) !important;background:#F4F6F7 !important;border-radius:10px !important}
.mailed{border-color:#CFE0D6 !important;background:#F5FAF6 !important;border-radius:12px !important}

/* ---------- 回答画面（answer.html） ---------- */
body > .shell{background:var(--bg) !important;box-shadow:none !important;max-width:660px}
.bar{
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid var(--line) !important;
  padding:14px 20px !important;
}
.bar .t b{font-weight:800 !important;color:var(--ink-deep) !important}
.prog{height:4px !important;background:#EFF1F3 !important}
.prog i{background:var(--green) !important}
.qblock{padding:30px 24px !important;border-bottom:1px solid var(--line) !important}
.qblock h2{
  font-size:17px !important;font-weight:800 !important;line-height:1.65 !important;
  letter-spacing:-.01em;color:var(--ink-deep) !important;
}
.qblock .meta{color:var(--text-3) !important;font-weight:700}
.opt{
  border:1.5px solid var(--line-strong) !important;border-radius:14px !important;
  padding:14px 16px !important;font-size:14.5px !important;background:#fff !important;
}
.opt:hover{border-color:var(--green) !important;background:#FBFFFC !important}
.opt.on{border-color:var(--green) !important;background:#F2FCF5 !important;box-shadow:inset 0 0 0 1px var(--green) !important}
.opt input{accent-color:var(--green) !important}
textarea{border:1.5px solid var(--line-strong) !important;border-radius:14px !important}
textarea:focus{border-color:var(--green) !important;box-shadow:0 0 0 3px rgba(24,163,74,.12) !important}
.foot{background:#fff !important;border-top:1px solid var(--line) !important;padding:18px 20px !important}
.done .mark{background:var(--green) !important}
.hero{border-radius:0 0 22px 22px;height:200px}
.brief .box{border-radius:20px !important}
.resume{border-color:#CFE0D5 !important;background:#F3F9F5 !important;border-radius:12px !important}