/* =====================================================================
   grandma-bank — 스타일 (신한은행 ATM 톤앤매너 참고)
   색·폰트·모서리는 아래 :root 에 모았습니다. 여기를 바꾸면 전체가 바뀝니다.
   ===================================================================== */
:root {
  /* --- 컬러 토큰 (ATM 화면 참고) --- */
  --brand:       #0d9b3c;   /* 메인 그린(메뉴·헤더) */
  --brand-dark:  #0a7e30;
  --brand-deep:  #0a6526;
  --confirm:     #16a23f;   /* ○ 네, 알겠습니다 (그린 버튼) */
  --cancel:      #ef7d18;   /* ✕ 거래를 취소합니다 (오렌지 버튼) */
  --cancel-dark: #d76c0e;
  --cream:       #efe9dc;   /* 본문 배경(크림색) */
  --panel:       #ffffff;
  --text:        #1c1c1c;
  --text-muted:  #5a5a5a;
  --alert:       #d0021b;   /* 경고 강조(빨강) */
  --line:        #cfcfcf;

  /* --- 모양 --- */
  --radius: 8px;
  --bar-h:  78px;           /* 하단 액션바 높이 */

  /* --- 폰트 (큰 글씨로 어르신도 읽기 쉽게) --- */
  --font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
          "Nanum Gothic", system-ui, sans-serif;
  font-size: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--text);
  background: #d7d7d7;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
}

/* 앱 본체: 최대 폭 480px, 화면 가득 */
.app {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,.18);
}

/* =========================== 화면 전환 =========================== */
.screen {
  display: none;
  flex-direction: column;
  min-height: 100dvh;
  animation: screen-in .3s ease both;
}
.screen.is-active { display: flex; }
@keyframes screen-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

/* =========================== 공통: 브랜드바 =========================== */
.brandbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 18px 12px;
  background: #ffffff;             /* 白ベースのヘッダー */
  color: var(--brand-dark);
  border-bottom: 2px solid #e4e1d6;
}
.brandbar__logo { width: 30px; height: 30px; }
.brandbar__name { font-weight: 800; font-size: 1.2rem; letter-spacing: .02em; }

/* =========================== 공통: 하단 액션바 =========================== */
.actionbar {
  display: flex;
  width: 100%;
  min-height: var(--bar-h);
  margin-top: auto;
}
.actionbar__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  transition: filter .12s ease;
}
.actionbar__btn:active { filter: brightness(.92); }
.actionbar__btn--confirm { background: var(--confirm); }
.actionbar__btn--cancel  { background: var(--cancel); }
.actionbar__btn--neutral { background: var(--cancel); justify-content: flex-start; padding-left: 22px; }
.actionbar--single .actionbar__btn { flex: 1; }
.actionbar__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 1rem; line-height: 1;
}
.actionbar__mark--o { border: 2px solid rgba(255,255,255,.9); }
.actionbar__mark--x { border-radius: 6px; background: rgba(0,0,0,.12); }

/* =========================== [1] 초기화면(메뉴) =========================== */
.menu {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 8px;
  background: var(--cream);
  padding: 16px;
}
.menu__tile {
  border: none;
  border-radius: 12px;              /* ラウンドなボタン */
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  font-family: inherit;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(10,101,38,.22);
  transition: filter .1s ease, transform .06s ease;
}
.menu__tile:active { transform: scale(.985); filter: brightness(1.08); }
.menu__tile--primary { box-shadow: inset 0 0 0 3px rgba(255,255,255,.6), 0 5px 12px rgba(10,101,38,.22); }

/* =========================== [2] 보이스피싱 경고 =========================== */
.warning__body {
  flex: 1;
  padding: 22px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--cream);
}
.warning__lead { font-size: 1.18rem; font-weight: 600; }
.warning__lead strong { color: var(--brand-dark); font-weight: 800; }
.warning__lead .warning__hot { color: var(--alert); }
.warning__guide {
  background: #fff; border: 2px solid var(--brand);
  border-radius: var(--radius); padding: 14px 16px;
  font-size: 1.05rem;
}
.warning__guide b { color: var(--brand-dark); }
.warning__tel { color: var(--text-muted); font-size: .98rem; }
.warning__love {
  margin-top: auto;
  color: var(--brand-dark);
  font-weight: 700;
  text-align: center;
  font-size: 1.05rem;
}

/* =========================== [2.5] 카드 삽입 =========================== */
.screen--card { background: #ffffff; }
.card-insert {
  flex: 1; width: 100%;
  border: none; background: #ffffff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; padding: 24px; font-family: inherit;
}
.card-insert__msg  { font-size: 1.9rem; font-weight: 800; color: #000; }
.card-insert__hint { font-size: 1rem; color: #888; }
.card-insert__art  { position: relative; width: 170px; height: 150px; }
.card-insert__slot {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 150px; height: 14px; border-radius: 7px;
  background: #222; box-shadow: inset 0 2px 3px rgba(0,0,0,.6); z-index: 2;
}
.card-insert__card {
  position: absolute; left: 50%; top: 0; z-index: 1;
  width: 120px; height: 76px; border-radius: 10px;
  background: linear-gradient(160deg, var(--brand), var(--brand-dark));
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
  transform: translateX(-50%);
  animation: card-insert 1.9s ease-in-out infinite;
}
.card-insert__card::before {            /* IC 칩 */
  content: ""; position: absolute; left: 14px; top: 20px;
  width: 20px; height: 15px; border-radius: 3px; background: #e8c86a;
}
@keyframes card-insert {
  0%   { transform: translateX(-50%) translateY(0);    opacity: 1; }
  55%  { transform: translateX(-50%) translateY(58px); opacity: 1; }
  74%  { transform: translateX(-50%) translateY(66px); opacity: 0; }
  75%  { transform: translateX(-50%) translateY(0);    opacity: 0; }
  100% { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .card-insert__card { animation: none; }
}

/* =========================== [3] 비밀번호 입력 =========================== */
.pin__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 8px;
  background: var(--cream);
}
.pin__title { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }
.pin__hint  { color: var(--text-muted); font-size: 1rem; margin-bottom: 22px; text-align: center; }
.pin__dots  { display: flex; gap: 22px; margin-bottom: 22px; }
.pin__dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--brand-dark); background: transparent;
  transition: background .15s ease, transform .15s ease;
}
.pin__dot.is-filled { background: var(--brand); transform: scale(1.12); }
.pin__dots.is-error { animation: shake .4s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-10px); }
  40%,80% { transform: translateX(10px); }
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 340px;
}
.key {
  min-height: 70px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, #f1f1ee);
  color: var(--text);
  font-family: inherit;
  font-size: 1.9rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 #d9d9d4;
  transition: transform .05s ease, background .12s ease;
}
.key:active { transform: translateY(1px); box-shadow: none; background: #e9e9e4; }
.key--empty { background: transparent; border: none; box-shadow: none; cursor: default; }
.key--del { font-size: 1.5rem; color: var(--cancel-dark); }
.pin__note { margin-top: 16px; color: var(--text-muted); font-size: .92rem; text-align: center; }

/* =========================== [4] 대기화면 =========================== */
.screen--loading { justify-content: center; align-items: center; text-align: center; background: var(--cream); }
.spinner {
  width: 64px; height: 64px; border-radius: 50%;
  border: 6px solid #d8d2c2;
  border-top-color: var(--brand);
  animation: spin 1s linear infinite;
  margin-bottom: 24px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading__title { font-size: 1.6rem; font-weight: 800; }
.loading__sub { color: var(--text-muted); margin-top: 6px; font-size: 1.05rem; }

/* =========================== [5] 성공화면 =========================== */
.screen--success {
  justify-content: center; align-items: center; text-align: center;
  background: linear-gradient(160deg, #ffffff 0%, #eaf6ec 100%);
  padding: 28px 22px;
}
.success__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.success__emoji { font-size: 3.2rem; animation: pop .5s ease both; }
.success__title { font-size: 2.1rem; line-height: 1.3; color: var(--brand-deep); margin: 4px 0 18px; font-weight: 800; }
.success__photo {
  width: 164px; height: 164px; border-radius: 50%;
  object-fit: cover; border: 5px solid #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  margin-bottom: 16px;
  animation: pop .5s .1s ease both;
}
.success__pun { color: var(--cancel-dark); font-weight: 700; margin-bottom: 12px; font-size: 1.05rem; }
.success__message {
  font-size: 1.18rem; line-height: 1.9; max-width: 340px;
  white-space: pre-line; margin-bottom: 10px;
}
.success__from { color: var(--text-muted); margin-bottom: 26px; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

.btn {
  display: block; width: 100%; max-width: 280px;
  min-height: 62px; border: none; border-radius: var(--radius);
  font-family: inherit; font-size: 1.2rem; font-weight: 800; cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: scale(.98); }
.btn--home { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(13,155,60,.28); }

/* 종이꽃가루(콘페티): 화면 전체에 흩날림. 한 장씩은 JS로 생성 */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.confetti i {
  position: absolute; top: -24px; width: 10px; height: 16px; opacity: .9;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall { to { transform: translateY(110vh) rotate(720deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* =========================== [6] 실패화면 =========================== */
.fail__body {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  background: var(--cream); padding: 24px;
}
.fail__icon {
  width: 92px; height: 92px; border-radius: 50%;
  background: #fde4d6; color: var(--cancel-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 800; margin-bottom: 20px;
}
.fail__title { font-size: 1.5rem; margin-bottom: 8px; font-weight: 800; }
.fail__sub { color: var(--text-muted); font-size: 1.1rem; }