/* ============================================================
   エコルドこどもPay 共通スタイル（UDの丸文字ベース）
   ============================================================ */
:root {
  --kp-green: #2F5233;
  --kp-green-2: #7FB88F;
  --kp-green-3: #C8E6C9;
  --kp-yellow: #FFB938;
  --kp-yellow-2: #FFE2A0;
  --kp-cream: #FFF8E7;
  --kp-coral: #FF7A59;
  --kp-sky: #4BA3E3;
}
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', sans-serif;
  letter-spacing: .02em;
}
.bg-kp-bg { background: #FFFBF2; }
.text-kp-green { color: var(--kp-green); }
.bg-kp-green { background: var(--kp-green); }

/* ボタン */
.kp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border-radius: 9999px;
  padding: .7em 1.4em; font-weight: 700; transition: transform .08s, box-shadow .15s, background .15s; cursor: pointer;
  border: 2px solid transparent; user-select: none; -webkit-tap-highlight-color: transparent; }
.kp-btn:active { transform: scale(.97); }
.kp-btn:disabled { opacity: .5; cursor: not-allowed; }
.kp-btn-primary { background: var(--kp-green); color: #fff; box-shadow: 0 3px 0 #1d3620; }
.kp-btn-primary:hover { background: #3a6640; }
.kp-btn-yellow { background: var(--kp-yellow); color: #4a2f00; box-shadow: 0 3px 0 #c78a14; }
.kp-btn-ghost { background: #fff; color: var(--kp-green); border-color: #d6e4d8; }
.kp-btn-danger { background: #fff; color: #c0392b; border-color: #f2c4bf; }

.kp-card { background: #fff; border-radius: 1.25rem; border: 1px solid #EFE7D6; box-shadow: 0 2px 10px rgba(80, 60, 20, .05); }
.kp-input { width: 100%; border: 2px solid #E6DECB; border-radius: .9rem; padding: .7em .9em; background: #fff; font-size: 1rem; }
.kp-input:focus { outline: none; border-color: var(--kp-green-2); box-shadow: 0 0 0 3px rgba(127, 184, 143, .25); }
.kp-label { display: block; font-size: .85rem; font-weight: 700; color: #5b5240; margin-bottom: .3rem; }
.kp-chip { display: inline-flex; align-items: center; gap: .3em; border-radius: 9999px; padding: .15em .7em; font-size: .75rem; font-weight: 700; }

/* トースト */
#toast-root { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 480px); }
.kp-toast { pointer-events: auto; background: #2b2b2b; color: #fff; padding: .8em 1.2em; border-radius: 1rem; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2); animation: kpToastIn .2s ease-out; text-align: center; }
.kp-toast.error { background: #c0392b; }
.kp-toast.ok { background: var(--kp-green); }
@keyframes kpToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* モーダル */
.kp-modal-bg { position: fixed; inset: 0; background: rgba(30, 25, 10, .45); z-index: 900; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .kp-modal-bg { align-items: center; } }
.kp-modal { background: #fff; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; border-radius: 1.5rem 1.5rem 0 0; padding: 1.25rem;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); animation: kpUp .2s ease-out; }
@media (min-width: 640px) { .kp-modal { border-radius: 1.5rem; } }
@keyframes kpUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============ こどもPay（こども用） ============ */
.kp-child { background: var(--kp-cream); color: #3d3320; font-size: 20px; min-height: 100vh; }
.kp-child ruby rt { font-size: .5em; color: #7a6a48; font-weight: 500; }
.kp-child .kid-btn { font-size: 1.15em; padding: .8em 1.2em; border-radius: 1.4rem; }
.kid-wallet { background: linear-gradient(135deg, #FFC94D 0%, #FF9F43 100%); color: #3b2500; border-radius: 1.8rem;
  box-shadow: 0 8px 0 #E08A20, 0 14px 30px rgba(224, 138, 32, .25); position: relative; overflow: hidden; }
.kid-wallet::after { content: ''; position: absolute; width: 220px; height: 220px; right: -60px; top: -80px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.kid-amount { font-size: 3.2em; font-weight: 800; line-height: 1; letter-spacing: .01em; }
.kid-tile { background: #fff; border-radius: 1.5rem; border: 3px solid #F3E3BF; box-shadow: 0 5px 0 #F0D9A6; padding: 1em .6em; text-align: center;
  font-weight: 800; transition: transform .08s; -webkit-tap-highlight-color: transparent; }
.kid-tile:active { transform: translateY(3px); box-shadow: 0 2px 0 #F0D9A6; }
.kid-tile .ico { font-size: 2.2em; display: block; margin-bottom: .2em; }
.kid-mark { font-size: 2.4em; width: 2em; height: 2em; display: inline-flex; align-items: center; justify-content: center; border-radius: 1rem; background: #fff; border: 3px solid #F3E3BF; }
.kid-mark.on { border-color: var(--kp-yellow); background: var(--kp-yellow-2); }
.kid-grade { border-radius: 1rem; border: 3px solid #F3E3BF; background: #fff; padding: .45em .2em; font-weight: 800; text-align: center; }
.kid-grade.on { border-color: var(--kp-yellow); background: var(--kp-yellow-2); }

/* 支払い完了アニメーション */
.kp-done { position: fixed; inset: 0; z-index: 950; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #FFF3C4 0%, #FFD36B 60%, #FFB938 100%); color: #3b2500; text-align: center; padding: 24px; }
.kp-done .coin { font-size: 110px; animation: kpCoin 1s ease-out; }
.kp-done.staff { background: radial-gradient(circle at 50% 40%, #E8F6EA 0%, #B9E0C1 60%, #7FB88F 100%); color: #183019; }
@keyframes kpCoin { 0% { transform: scale(.2) rotateY(0); } 60% { transform: scale(1.15) rotateY(540deg); } 100% { transform: scale(1) rotateY(720deg); } }
.kp-pop { animation: kpPop .35s ease-out; }
@keyframes kpPop { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ============ スタッフ用 チャージ＆購入 ============ */
.kp-register .amt-btn { border-radius: 1.1rem; background: #fff; border: 2px solid #E6DECB; font-weight: 800; font-size: 1.35rem; padding: .7em 0; }
.kp-register .amt-btn.on { background: var(--kp-green); color: #fff; border-color: var(--kp-green); }
.kp-register .key { border-radius: 1rem; background: #fff; border: 2px solid #E6DECB; font-weight: 800; font-size: 1.5rem; padding: .55em 0; }
.kp-register .key:active { background: #F2EEE3; }
.kp-register .mode-tab { flex: 1; padding: .8em .5em; border-radius: 1rem; font-weight: 800; font-size: 1.05rem; background: #fff; border: 2px solid #E6DECB; }
.kp-register .mode-tab.on { background: var(--kp-green); color: #fff; border-color: var(--kp-green); }
.child-row.on { background: #E8F3EA; border-color: var(--kp-green-2); }

#qr-reader video { border-radius: 1rem; }
#qr-reader { border: none !important; }
#qr-reader__dashboard_section_csr button, #qr-reader button { border-radius: 9999px; padding: .4em 1em; background: #fff; border: 2px solid #E6DECB; font-weight: 700; margin: 4px; }

/* LP */
.lp-hero { background: radial-gradient(circle at 85% 10%, #FFE6A6 0, transparent 40%), radial-gradient(circle at 10% 90%, #D6EEDB 0, transparent 45%), #FFFBF2; }
.lp-phone { width: 250px; border-radius: 36px; background: #222; padding: 12px; box-shadow: 0 30px 60px rgba(80, 60, 20, .25); }
.lp-phone-inner { border-radius: 26px; background: var(--kp-cream); overflow: hidden; height: 470px; }

.kp-scroll-x { overflow-x: auto; scrollbar-width: none; }
.kp-scroll-x::-webkit-scrollbar { display: none; }
[x-cloak] { display: none !important; }