/*
 * 決済パネル — washoku-demos の DepositPanel.tsx を忠実移植。
 * 決済代行会社には接続していない（画面上の再現のみ）。
 */
.adp-panel {
	--adp-shell: var(--color-shell, #fffcfc);
	--adp-shell-2: var(--color-shell-2, #fdf1f0);
	--adp-sumi: var(--color-sumi, #2b2426);
	--adp-stone: var(--color-stone, #6f6669);
	--adp-gold: var(--color-gold, #b83a4e);
	--adp-gold-deep: var(--color-gold-deep, #932b3d);
	--adp-line: var(--color-line, #f6e3e1);
	--adp-alert: #b4544a;
	--adp-mincho: var(--font-mincho, "Shippori Mincho", serif);
	--adp-quint: cubic-bezier(0.22, 1, 0.36, 1);
	font-family: var(--font-sans, "Zen Kaku Gothic New", "Hiragino Sans", sans-serif);
	color: var(--adp-sumi);
	font-size: 0.9375rem;
	line-height: 1.9;
	border: 1px solid var(--adp-line);
	background: var(--adp-shell-2);
}

.adp-panel__head { border-bottom: 1px solid var(--adp-line); padding: 1rem 1.5rem; }
@media (min-width: 768px) { .adp-panel__head { padding-inline: 2rem; } }
.adp-panel.compact .adp-panel__head { padding: 0.625rem 1rem; }
.adp-panel__head p { margin: 0; display: flex; align-items: center; gap: 0.625rem; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--adp-stone); }
.adp-i { display: flex; height: 1rem; width: 1rem; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid var(--adp-stone); border-radius: 50%; font-size: 0.5625rem; }

.adp-panel__body { padding: 1.75rem 1.5rem; }
@media (min-width: 768px) { .adp-panel__body { padding-inline: 2rem; } }
.adp-panel.compact .adp-panel__body { padding: 1rem; }

.adp-title { font-family: var(--adp-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; margin: 0; }
.adp-panel.compact .adp-title { font-size: 1rem; }
.adp-lead { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.625; color: var(--adp-sumi); }

.adp-amount { margin: 1.5rem 0 0; display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; border-top: 1px solid var(--adp-line); border-bottom: 1px solid var(--adp-line); padding-block: 0.75rem; }
.adp-panel.compact .adp-amount { grid-template-columns: 6.5rem 1fr; }
.adp-amount dt { font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--adp-stone); padding-top: 0.125rem; }
.adp-amount dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 1.125rem; color: var(--adp-sumi); }

/* ---------- 選択（プラン・方法） ---------- */
.adp-choice { border: 0; padding: 0; margin: 1.5rem 0 0; }
.adp-choice legend { font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--adp-stone); padding: 0; }
.adp-choice__list { margin-top: 0.75rem; border-top: 1px solid var(--adp-line); border-bottom: 1px solid var(--adp-line); }
.adp-choice__item { display: flex; align-items: flex-start; gap: 0.75rem; padding-block: 0.875rem; border-top: 1px solid var(--adp-line); cursor: pointer; }
.adp-choice__item:first-child { border-top: 0; }
.adp-choice__item input { margin-top: 0.25rem; flex-shrink: 0; accent-color: var(--adp-gold); }
.adp-choice__item .body { min-width: 0; }
.adp-choice__item .label { display: block; font-size: 0.875rem; color: var(--adp-sumi); }
.adp-choice__item .sub { display: block; margin-top: 0.125rem; font-variant-numeric: tabular-nums; font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--adp-stone); }
.adp-choice__item .sep { margin-inline: 0.375rem; opacity: 0.5; }

/* ---------- カード入力 ---------- */
.adp-card-form { margin-top: 1.5rem; }
.adp-card-box { border: 1px solid var(--adp-line); background: var(--adp-shell); padding: 1.25rem; }
.adp-card-box label { display: block; font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--adp-stone); }
.adp-input {
	display: block; width: 100%; margin-top: 0.375rem;
	min-height: 3.25rem; padding: 0.75rem 1rem;
	border: 1px solid var(--adp-line); background: transparent;
	color: var(--adp-sumi); font-family: inherit;
	font-variant-numeric: tabular-nums;
	font-size: 1rem;
}
@media (min-width: 1024px) { .adp-input { font-size: 0.9375rem; } }
.adp-input:focus { border-color: var(--adp-gold); outline: none; }
.adp-card-row { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.adp-help { margin: 1rem 0 0; font-size: 0.6875rem; line-height: 1.625; letter-spacing: 0.08em; color: var(--adp-stone); }

.adp-declined { margin: 1rem 0 0; border-left: 2px solid var(--adp-alert); padding: 0.5rem 0 0.5rem 0.75rem; font-size: 0.8125rem; line-height: 1.625; color: #8f3f37; }

/* ---------- QR ---------- */
.adp-qr-box { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--adp-line); background: var(--adp-shell); padding: 1.5rem 1.25rem; margin-top: 1.5rem; }
.adp-qr { height: 8rem; width: 8rem; }
.adp-qr rect.bg { fill: #fff; }
.adp-qr rect.cell { fill: var(--adp-sumi); }
.adp-qr-amount { margin: 1rem 0 0; font-variant-numeric: tabular-nums; font-size: 1.125rem; color: var(--adp-sumi); }
.adp-qr-hint { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--adp-stone); }
.adp-qr-status { margin: 1rem 0 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--adp-stone); }
.adp-qr-status .dot { display: inline-block; height: 0.375rem; width: 0.375rem; border-radius: 50%; background: var(--adp-gold); animation: adp-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes adp-pulse { 50% { opacity: 0.4; } }

/* ---------- 完了（領収書） ---------- */
.adp-receipt__head { display: flex; align-items: center; gap: 0.75rem; }
.adp-check { display: flex; height: 1.75rem; width: 1.75rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; background: var(--adp-gold); font-size: 0.75rem; color: #fff; }
.adp-receipt dl { margin: 1.5rem 0 0; border-top: 1px solid var(--adp-line); border-bottom: 1px solid var(--adp-line); }
.adp-receipt dl > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-block: 0.75rem; border-top: 1px solid var(--adp-line); }
.adp-receipt dl > div:first-child { border-top: 0; }
.adp-receipt dt { font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--adp-stone); padding-top: 0.125rem; }
.adp-receipt dd { margin: 0; font-size: 0.875rem; line-height: 1.625; color: var(--adp-sumi); }
.adp-receipt__closing { margin: 1.25rem 0 0; font-size: 0.8125rem; line-height: 1.625; color: var(--adp-stone); }

/* ---------- ボタン ---------- */
.adp-actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.adp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
	min-height: 3.25rem; padding-inline: 2rem;
	font-family: inherit; font-size: 0.8125rem; letter-spacing: 0.16em;
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: all 400ms var(--adp-quint);
	background: none;
}
.adp-btn--solid { background: var(--adp-sumi); color: var(--adp-shell); }
.adp-btn--solid:hover { background: var(--adp-gold-deep); }
.adp-btn--outline { border-color: var(--adp-sumi); color: var(--adp-sumi); }
.adp-btn--outline:hover { background: var(--adp-sumi); color: var(--adp-shell); }
.adp-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.adp-btn--full { width: 100%; }

.adp-disclaimer { margin: 1.5rem 0 0; font-size: 0.75rem; line-height: 1.625; letter-spacing: 0.08em; color: var(--adp-stone); }