/* 동탄명성교회 2026 디자인 (layouts/dongtanms_2026) for the offering / donation pages.
   Loaded after bank.css: only the look changes, every function stays in bank.css/bank.js. */

:root{
  --ink:#1C2230;--muted:#5E6472;--green:#426A44;--green-hover:#355636;--line:#E3DED3;--paper:#FFFFFF;--wash:#F7F5F0;
  --sub:#FAF8F4;--acs:#E4EDE4;--onac:#F7F5F0;--dp:#1C2230;
}
html[data-dm-theme="dark"]{
  color-scheme:dark;
  --ink:#ECE9E2;--muted:#9DA2AC;--green:#8DBF8F;--green-hover:#A9D2AA;--line:#2B2F38;--paper:#1B1E25;--wash:#121419;
  --sub:#171A20;--acs:#1F2D20;--onac:#0E1A0F;--dp:#0B0D11;
}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;-webkit-font-smoothing:antialiased;background:var(--wash);color:var(--ink)}
a{color:var(--green)}
:focus-visible{outline:2px solid var(--green)!important;outline-offset:2px}

/* header like the site */
.site-header{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:transparent;border-bottom:1px solid var(--line)}
.church-name{display:flex;align-items:center;gap:10px;color:var(--ink)!important;text-decoration:none!important}
.church-name img{width:38px;height:38px;border-radius:10px;background:#FFFFFF;border:1px solid var(--line);object-fit:contain;padding:3px}
.church-name span{display:flex;flex-direction:column;line-height:1.2}
.church-name strong{font-size:19px;font-weight:800;letter-spacing:-.01em}
.church-name small{font-size:11px;color:var(--muted);letter-spacing:.04em}
.site-links{display:flex;gap:8px;align-items:center}
.site-links a{height:38px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);display:inline-flex;align-items:center;font-size:13.5px;font-weight:700;color:var(--ink)!important;text-decoration:none!important}
.site-links a:hover{border-color:var(--green);color:var(--green)!important}

main{max-width:1120px}
/* tabs → pills */
.page-nav{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--paper);margin-top:22px}
.page-nav a{padding:9px 18px;border:0!important;border-radius:999px;font-size:14.5px;font-weight:700;color:var(--muted)!important;text-decoration:none!important}
.page-nav a[aria-current]{background:var(--green);color:var(--onac)!important}

.page-heading{padding-top:18px}
.page-heading small{display:block;margin-bottom:6px;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--green)}
.page-heading h1{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.page-heading p{color:var(--muted);font-size:16px}

/* account: the hero card */
.account-panel{position:relative;overflow:hidden;border:0!important;border-radius:18px!important;background:var(--green)!important;color:var(--onac)!important;padding:24px 24px 22px!important;box-shadow:0 14px 34px rgba(66,106,68,.28)}
.account-panel::after{content:"";position:absolute;right:-60px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none}
.receiving-bank{font-size:13.5px!important;font-weight:800!important;opacity:.9;color:inherit!important}
.account-number{font-size:30px!important;font-weight:800!important;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:inherit!important}
.account-owner{font-size:13.5px!important;opacity:.85;color:inherit!important}
.account-panel .compact-copy{position:relative;z-index:1;background:var(--onac)!important;color:var(--green)!important;border:0!important;border-radius:10px!important;font-weight:800;box-shadow:none}
.account-panel .copy-status{color:inherit!important}
html[data-dm-theme="dark"] .account-panel{color:#0E1A0F!important}

/* buttons */
.button{border-radius:10px!important;font-weight:700}
.primary{background:var(--green)!important;border-color:var(--green)!important;color:var(--onac)!important}
.primary:hover{background:var(--green-hover)!important}
.secondary{background:var(--paper)!important;border:1px solid var(--line)!important;color:var(--ink)!important}
.secondary:hover{border-color:var(--green)!important;color:var(--green)!important}
.text-button,.text-link{color:var(--green)!important}

/* bank list */
.bank-heading h2{font-size:21px;font-weight:800;color:var(--ink)}
.bank-heading p{color:var(--muted)}
.bank-tabs{border:0!important;gap:6px;display:flex}
.bank-tabs button{height:36px;padding:0 14px;border:1px solid var(--line)!important;border-radius:999px!important;background:var(--paper)!important;color:var(--muted)!important;font-weight:700}
.bank-tabs button[aria-pressed="true"]{background:var(--green)!important;border-color:var(--green)!important;color:var(--onac)!important}
.search-wrap{border:1px solid var(--line)!important;border-radius:12px!important;background:var(--paper)!important}
.search-wrap:focus-within{border-color:var(--green)!important;box-shadow:0 0 0 3px var(--acs)}
.search-wrap input{color:var(--ink)!important;background:transparent!important}
.bank-choice{border:1px solid var(--line)!important;border-radius:14px!important;background:var(--paper)!important;color:var(--ink)!important;transition:border-color .15s,transform .15s,box-shadow .15s}
.bank-choice:hover{border-color:var(--green)!important;box-shadow:0 6px 16px rgba(28,34,48,.08);transform:translateY(-1px)}
.bank-choice img{border-radius:10px}
.bank-choice strong{color:var(--ink)!important;font-weight:800}
.bank-choice span{color:var(--muted)!important}
.help-section{border:1px solid var(--line)!important;border-radius:14px!important;background:var(--paper)!important;color:var(--ink)}
.help-section p{color:var(--muted)}

/* QR card */
.qr-section{border:1px solid var(--line)!important;border-radius:18px!important;background:var(--paper)!important;box-shadow:0 10px 28px rgba(28,34,48,.06)}
.qr-section summary{color:var(--ink)!important;font-weight:800}
.qr-image{border-radius:14px;background:#FFFFFF;padding:10px;border:1px solid var(--line)}
.qr-content .qr-caption{color:var(--green)!important;font-weight:800}
.qr-content>p,.qr-content .page-url{color:var(--muted)!important}

/* dialog */
dialog{border:0!important;border-radius:20px 20px 0 0!important;background:var(--paper)!important;color:var(--ink)!important}
@media (min-width:720px){dialog{border-radius:20px!important}}
.dialog-account{border:0!important;border-radius:14px!important;background:var(--acs)!important;color:var(--ink)!important}
.dialog-account strong{color:var(--green)!important;font-weight:800}
.close-button{border-radius:10px!important}

footer{max-width:1120px;margin:40px auto 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);background:transparent;color:var(--muted);font-size:13px;text-align:left}
footer strong{color:var(--ink);font-size:14px}
footer a{color:var(--green)!important;font-weight:700;text-decoration:none!important}

@media (max-width:719px){
  .site-header{padding:10px 14px}
  .church-name strong{font-size:17px}
  .church-name small{display:none}
  .site-links a:not(.qr-shortcut){display:none}
  .page-nav{margin-top:14px}
  .page-heading h1{font-size:26px}
  .account-number{font-size:25px!important}
}
.account-number{white-space:nowrap}
@media (max-width:719px){
  .account-number{font-size:clamp(20px,6.2vw,25px)!important}
  .account-panel{padding:20px 18px 18px!important}
}