/* 全体：スマホで余白と文字の読みやすさを調整 */
body {
  margin: 0;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: #222;
}

/* メイン画面 */
.phone {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
}

/* 余白 */
.screen {
  padding: 20px;
}

.card {
max-width: 560px;
width: 100%;
margin: 0 auto;
padding: 16px;
border-radius: 14px;
}

/* タップしやすさ（ボタン/入力） */
button, input {
font-size: 16px; /* iOSの自動ズーム回避 */
}

button {
min-height: 48px; /* タップ領域 */
}

input[type="number"] {
width: 100%;
min-height: 48px;
box-sizing: border-box;
}

/* 行の基本：スマホで折り返せるようにする */
.row {
flex-wrap: wrap;
gap: 8px;
}

/* 画面が狭い場合は「左右レイアウト→縦レイアウト」へ */
@media (max-width: 480px) {
body { padding: 12px; }

.card { padding: 14px; }

.row {
flex-direction: column;
align-items: stretch; /* 横幅いっぱい使う */
}

.label {
font-size: 13px;
}

.value {
width: 100%;
text-align: left; /* 右寄せをやめる */
font-size: 18px;
}

/* 送金額入力のブロック（あなたの row align-items:flex-end を上書き） */
.row[style*="align-items:flex-end"] {
align-items: stretch !important;
}

h2 { font-size: 18px; }
}

.to-header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid #e7e7e7;
}

.to-label{
  font-size: 12px;
  color: #777;
}

.to-name{
  font-size: 18px;
  font-weight: 800;
}

.to-id{
  font-size: 13px;
  color: #555;
}


* { box-sizing: border-box; }

:root{
  --border:#e7e7e7;
  --text:#111;
  --muted:#6b6b6b;
  --danger:#b00020;
  --ok:#0a7a2f;
  --bg:#ffffff;
}

body {
  margin: 0;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: #222;
}

/* メイン画面 */
.phone {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
}

/* 余白 */
.screen {
  padding: 20px;
}

button.primary {
  background-color: aliceblue;
  border:none;
  padding: 8px 16px;
}

button.primary:hover {
  background-color: rgb(237, 4, 51);
  color: white;
}

button.primary:active {
  background-color: rgb(200, 2, 40);
  color: white;
 
}

.row{
  display:flex;
  flex-direction:column;  
  gap:6px;
  padding:12px 0;
}

.label{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.02em;
}

.value{
  font-size:20px;
  font-weight:700;
}


.muted{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

input[type="number"]{
  width:100%;
  min-height:48px;
  padding:12px 12px;
  font-size:16px;
  border:1px solid var(--border);
  border-radius:12px;
  outline:none;
}

input[type="number"]:focus{
  border-color:#c9c9c9;
}


.primary{
  width:100%;
  min-height:52px;
  margin-top:14px;
  font-size:16px;
  font-weight:800;
  border:0;
  border-radius:14px;
  cursor:pointer;
}


.primary:disabled{
  opacity:.55;
  cursor:not-allowed;
}


#msg{
  margin-top:10px;
  font-size:13px;
  line-height:1.4;
}

#msg.err{ color:var(--danger); }
#msg.ok{ color:var(--ok); }


@media (min-width: 520px){
  .row{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }
  input[type="number"]{
    width:220px;
  }
}