/* 유틸 (없을 수도 있어 로컬 정의) */
.grid-center{ max-width: var(--layout-width); margin: 0 auto; padding: 0 var(--layout-padding); }
.cluster{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.grow{ flex:1; }
.small{ font-size: .92rem; }
code{ background:#fff7e1; padding:2px 6px; border-radius:5px; }

/* 전체 레이아웃 */
.dues-bank{
  --gap: clamp(14px, 2.6vw, 20px);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-areas:
    "head head"
    "form form"
    "memo bank"
    "memo bank"
    "note actions";
  gap: var(--gap);
  color: var(--color-text);
  background: var(--color-bg);
  padding: clamp(18px, 3.2vw, 28px) 0 clamp(8px, 2vw, 12px);
  line-height: 1.9;
}
@media (max-width: 980px){
  .dues-bank{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "form"
      "bank"
      "memo"
      "note"
      "actions";
  }
}

/* 헤더 */
.dues-head{ grid-area: head; }
.dues-title{
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.6rem);
  color: var(--color-sub-1);
  letter-spacing: -0.01em;
  display:inline-block;
  background: linear-gradient(transparent 70%, color-mix(in oklab, var(--color-main) 24%, transparent) 0);
}
.dues-sub{
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: clamp(.96rem, 1.6vw, 1.05rem);
}

/* 폼 영역 */
.dues-form{
  grid-area: form;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 640px){
  .dues-form{ grid-template-columns: 1fr; }
}
.dues-field{
  display: grid;
  gap: 6px;
}
.dues-field > span{
  font-weight: 700;
  color: var(--color-sub-1);
  font-size: .98rem;
}
.dues-field select,
.dues-field .input,
.dues-field input{
  width: 100%;
  border: 1px solid var(--color-table-border);
  border-radius: 12px;
  padding: 12px 12px;
  background: #fff;
  transition: border-color var(--nav-t) var(--nav-ease), box-shadow var(--nav-t) var(--nav-ease);
  font-size: 1rem;
}
.dues-field select:focus,
.dues-field .input:focus,
.dues-field input:focus{
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-main) 25%, transparent);
  outline: none;
}

/* 은행 정보 카드 */
.bank-box{
  grid-area: bank;
  align-self: start;
  border: 1px solid var(--color-table-border);
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--color-bg2) 40%, #fff), #fff 40%),
    #fff;
  box-shadow: 0 10px 28px -20px rgba(0,0,0,.25);
  padding: clamp(16px, 2.4vw, 20px);
}
.bank-line{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}
.badge{
  display:inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-main) 92%, #000);
  color:#fff;
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .2px;
}
#acctNumber{
  font-weight: 900;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  letter-spacing: .3px;
  color: var(--color-sub-1);
}
.bank-owner{
  margin: 2px 0 12px;
  color: var(--color-text);
}
.dues-amount{
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-table-border);
  color: var(--color-sub-1);
  font-size: 1rem;
}
.dues-amount strong{
  display:inline-block;
  margin-left: 6px;
  font-weight: 900;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  color: color-mix(in oklab, var(--color-main) 90%, #000);
}

/* 메모 카드 */
.memo-card{
  grid-area: memo;
  border: 1px solid var(--color-table-border);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, var(--color-bg2));
  box-shadow: 0 6px 20px -14px rgba(0,0,0,.18);
  padding: clamp(14px, 2vw, 18px);
}
.memo-row{
  display:flex;
  gap: 10px;
  align-items: end;
  margin-bottom: 8px;
}
.memo-card .dues-field > span{ font-weight: 800; }
.memo-card .help{
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: .95rem;
}

/* 안내문 (임시계좌) */
.dues-bank .muted.small{
  grid-area: note;
  margin: 0;
  color: color-mix(in oklab, var(--color-text) 85%, #000);
  background: #f7f7f7;
  border-left: 4px solid var(--color-main);
  padding: 10px 12px;
  border-radius: 8px;
}

/* 퀵 액션 */
.quick-actions{ grid-area: actions; }
.quick-actions .btn{ flex: 1; }

/* 버튼 시스템(경량) */
.btn{
  --btn-bg: var(--color-main);
  --btn-fg: #fff;
  --btn-bd: transparent;
  --btn-r: 12px;
  --btn-h: 42px;
  --btn-px: 14px;

  display:inline-flex; align-items:center; justify-content:center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-r);
  border:1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--nav-t) var(--nav-ease), transform var(--nav-t) var(--nav-ease), box-shadow var(--nav-t) var(--nav-ease);
}
.btn:hover{
  background: var(--color-main-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -18px color-mix(in oklab, var(--color-main) 60%, #000);
}

/* 사이즈 */
.btn[data-size="sm"]{ --btn-h: 34px; --btn-px: 12px; --btn-r: 10px; font-weight:700; font-size:.95rem; }
.btn[data-size="xl"]{ --btn-h: 48px; --btn-px: 18px; --btn-r: 12px; }

/* 문자(SMS) 변형 */
.btn--sms{
  --btn-bg: #16c759;
  --btn-fg: #000;
  --btn-bd: #12b350;
}
.btn--sms:hover{ background:#11b651; }

/* 접근성 */
.btn:focus-visible,
.dues-field select:focus-visible,
.dues-field input:focus-visible{
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* 구분선 느낌으로 섹션 간 간격 */
.dues-bank + .dues-bank{
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--color-table-border);
  padding-top: clamp(28px, 5vw, 40px);
}

/* 다크 모드(선택) */
body[data-theme="dark"] .dues-bank{
  --color-bg: #0f1115;
  --color-text: #e9edf2;
  --color-muted: #9aa4b2;
  --color-table-border: #283040;
  --color-bg2: #121a28;
  color: var(--color-text);
  background: var(--color-bg);
}
body[data-theme="dark"] .bank-box,
body[data-theme="dark"] .memo-card{
  background: #0f1117;
  border-color: var(--color-table-border);
  box-shadow: 0 10px 28px -22px rgba(0,0,0,.7);
}
body[data-theme="dark"] .dues-bank .muted.small{ background:#0f1117; }