@charset "utf-8";
/* 자동이체.kr 이용 가이드 공통 스타일 (2026-10-30) */
.page-hd{background:var(--navy) url(../images/renew/visual_bg.webp) no-repeat right center/cover;color:#fff}
.page-hd .inner{padding-top:28px;padding-bottom:64px}
.page-hd .crumb{font-size:14px;color:#8FA3C0;margin-bottom:44px}
.page-hd .crumb a{color:#8FA3C0}
.page-hd .crumb .cur{color:#fff}
.page-hd .vs-label{margin-bottom:0}
.page-hd h1{margin:14px 0 16px;font-size:46px;line-height:1.3;font-weight:700;letter-spacing:-0.05em}
.page-hd p{font-size:18px;line-height:1.7;color:#C9D5E6;max-width:760px}
.page-hd .btn{margin-top:30px;height:56px;padding:0 28px;background:var(--orange);color:#fff;font-size:17px;font-weight:700;display:inline-flex;align-items:center;border-radius:6px}

/* 본문 공통 블록 */
.g-sec{padding-top:88px}
.g-sec:last-of-type{padding-bottom:40px}
.g-toc{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.g-toc a{height:40px;padding:0 16px;display:inline-flex;align-items:center;border:1px solid #C7CFDA;border-radius:20px;font-size:14px;color:#333}
.g-toc a:hover{border-color:var(--navy);color:var(--navy)}
.g-table{width:100%;margin-top:32px;border-collapse:collapse;border-top:2px solid var(--ink);font-size:16px}
.g-table th,.g-table td{padding:18px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.g-table thead th{background:#F7F8FA;font-size:14px;color:#555;font-weight:700}
.g-table td strong{font-size:17px}
.g-table td .sub{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.g-table .go{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:6px;background:var(--navy);color:#fff;font-size:14px;font-weight:700;white-space:nowrap}
.g-steps{margin-top:36px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;list-style:none;padding:0}
.g-steps > li{position:relative;padding:28px 28px 28px 92px;border:1px solid #E3E7ED;border-radius:14px;background:#fff}
.g-steps .no{position:absolute;left:28px;top:26px;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center}
.g-steps > li.or .no{background:var(--orange)}
.g-steps strong{display:block;font-size:20px;margin-bottom:10px}
.g-steps p,.g-steps ul{font-size:15px;color:var(--body);line-height:1.8}
.g-steps ul{list-style:disc;padding-left:18px;margin:0}
.g-steps ul li{margin:2px 0}
.g-note{margin-top:28px;padding:22px 26px;border-radius:12px;background:#FFF6EE;border:1px solid #FBD3BA;font-size:15px;line-height:1.8;color:#5A3A22}
.g-note strong{color:#D2540E}
.faq{margin-top:32px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;min-height:72px;padding:0 8px;display:flex;align-items:center;gap:20px;font-size:18px;font-weight:700;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'Q';color:var(--orange);font-size:20px;width:24px;flex-shrink:0}
.faq summary::after{content:'+';margin-left:auto;font-size:22px;color:#888;font-weight:400}
.faq details[open] summary::after{content:'−'}
.faq .a{padding:4px 8px 26px 52px;font-size:16px;color:var(--body);line-height:1.8}
.faq .a a{color:#0B4DA2;text-decoration:underline}

/* 확인 목록 */
.g-checks{margin-top:28px;list-style:none;padding:0;border-top:2px solid var(--ink)}
.g-checks li{position:relative;padding:20px 8px 20px 40px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.8;color:var(--body)}
.g-checks li::before{content:'';position:absolute;left:10px;top:28px;width:14px;height:8px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
.g-checks strong{color:var(--ink)}
.g-checks a{color:#0B4DA2;font-weight:700}

/* 목록 페이지 · 관련 가이드 카드 */
.g-cat{padding-top:72px}
.g-cat h2{font-size:26px;font-weight:700;letter-spacing:-0.04em}
.g-cat h2 small{margin-left:10px;font-size:15px;font-weight:400;color:var(--muted)}
.g-cards{margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.g-cards a{display:flex;flex-direction:column;gap:8px;height:100%;padding:26px 26px 24px;border:1px solid #E3E7ED;border-radius:14px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s,transform .2s}
.g-cards a:hover{border-color:var(--navy);box-shadow:0 10px 24px rgba(19,48,94,.10);transform:translateY(-2px)}
.g-cards em{font-style:normal;font-size:13px;font-weight:700;color:var(--orange)}
.g-cards strong{font-size:19px;line-height:1.45;color:var(--navy);word-break:keep-all}
.g-cards span{font-size:14px;line-height:1.65;color:var(--muted)}
.g-empty{margin-top:20px;padding:26px;border:1px dashed #C7CFDA;border-radius:14px;font-size:15px;color:#888}
.g-rel{padding-bottom:88px}
.g-rel-hd{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.g-rel-hd h2{font-size:24px;font-weight:700}
.g-rel-hd a{font-size:15px;font-weight:700;color:var(--navy)}
.rn-guide .join-band{margin-top:0}

@media (max-width:960px){
  .g-steps{grid-template-columns:1fr}
  .g-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .page-hd .inner{padding-bottom:40px}
  .page-hd .crumb{margin-bottom:22px}
  .page-hd h1{font-size:27px}
  .page-hd p{font-size:15px}
  .page-hd .btn{height:50px;font-size:15px;width:100%;justify-content:center}
  .g-sec{padding-top:56px}
  .g-table{font-size:14px}
  .g-table thead{display:none}
  .g-table tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 4px;border-bottom:1px solid var(--line)}
  .g-table td{padding:0;border:0}
  .g-table td:nth-child(2){grid-column:1 / 2;grid-row:2}
  .g-table td:last-child{grid-column:2;grid-row:1 / span 2;align-self:center}
  .g-table td strong{font-size:16px}
  .g-table-info tr{display:block;padding:14px 4px}
  .g-table-info td{display:block;padding:2px 0}
  .g-table-info td:nth-child(2){font-size:13px;color:var(--orange);font-weight:700}
  .g-checks li{padding:16px 4px 16px 32px;font-size:14px}
  .g-checks li::before{left:6px;top:24px}
  .g-steps > li{padding:22px 20px 22px 74px}
  .g-steps .no{left:20px;top:22px;width:38px;height:38px;font-size:15px}
  .g-steps strong{font-size:17px}
  .g-steps p,.g-steps ul{font-size:14px}
  .faq summary{font-size:15px;min-height:62px;gap:12px}
  .faq .a{padding:0 8px 22px 44px;font-size:14px}
  .g-cat{padding-top:48px}
  .g-cat h2{font-size:21px}
  .g-cat h2 small{display:block;margin:4px 0 0}
  .g-cards{grid-template-columns:1fr;gap:12px}
  .g-cards a{padding:20px}
  .g-cards strong{font-size:17px}
  .g-rel{padding-bottom:56px}
  .g-rel-hd h2{font-size:20px}
}

/* ===== 본문 그래픽 요소 (2026-10-30) ===== */
/* 결제수단 카드 */
.g-methods{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;padding:0}
.g-methods > li{position:relative;padding:30px 28px 26px;border:1px solid #E3E7ED;border-radius:16px;background:#fff;overflow:hidden}
.g-methods > li::after{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:#F4F6F9}
.gm-ic{position:relative;z-index:1;width:60px;height:60px;border-radius:16px;background:#13305E;color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.g-methods > li:nth-child(2) .gm-ic{background:#F26B1D}
.g-methods > li:nth-child(3) .gm-ic{background:#1E9E6A}
.g-methods em{display:block;font-style:normal;font-size:14px;color:var(--muted)}
.g-methods strong{display:block;margin:4px 0 14px;font-size:21px;color:var(--navy)}
.g-methods ul{list-style:none;padding:14px 0 0;margin:0;border-top:1px dashed #D5DAE1}
.g-methods ul li{position:relative;padding-left:18px;font-size:15px;line-height:1.9;color:var(--body)}
.g-methods ul li::before{content:'';position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* 단계 + 화면 그림 */
.g-split{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:start}
.g-steps.one{margin-top:0;grid-template-columns:1fr;gap:14px}
.g-mock{position:sticky;top:90px;border-radius:14px;overflow:hidden;border:1px solid #D5DAE1;box-shadow:0 20px 44px rgba(19,48,94,.14);background:#fff}
.gk-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#EEF1F5;border-bottom:1px solid #DCE2EA}
.gk-bar i{width:10px;height:10px;border-radius:50%;background:#C7CFDA}
.gk-bar i:first-child{background:#F26B1D}
.gk-bar span{margin-left:10px;font-size:12px;color:#888;background:#fff;border-radius:4px;padding:2px 10px}
.gk-body{padding:22px 24px 26px}
.gk-tit{font-size:20px;font-weight:700;color:#1A1A1A}
.gk-txt{margin:6px 0 16px;font-size:12.5px;color:#888}
.gk-tabs{display:flex;border-bottom:1px solid #DCE2EA;margin-bottom:16px}
.gk-tabs span{position:relative;flex:1;text-align:center;padding:10px 0;font-size:13px;color:#888}
.gk-tabs span.on{color:#13305E;font-weight:700;border-bottom:3px solid var(--orange);margin-bottom:-1px}
.gk-row{display:grid;grid-template-columns:72px 1fr 1fr;gap:8px;align-items:center;margin-bottom:10px}
.gk-row label{font-size:13px;font-weight:700;color:#444}
.gk-row b{position:relative;height:38px;border:1px solid #D5DAE1;border-radius:6px;background:#F9FAFC;font-weight:400;font-size:12.5px;line-height:36px;padding:0 10px;color:#999}
.gk-row b.sel{color:#333}
.gk-row b.w{grid-column:2 / 4;border-color:var(--orange);background:#FFF8F2;color:#D2540E}
.gk-note{margin:12px 0 0;font-size:12px;color:#888}
.gk-btn{position:relative;margin-top:16px;height:46px;border-radius:6px;background:#13305E;color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.g-mock em{position:absolute;right:-8px;top:-10px;width:22px;height:22px;border-radius:50%;background:var(--orange);color:#fff;font-style:normal;font-size:12px;font-weight:700;line-height:22px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.gk-tabs span.on em{right:4px;top:-4px}

/* 아이콘 포인트 카드 */
.g-points{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;padding:0}
.g-points li{padding:28px 26px;border-radius:16px;background:var(--bg-g)}
.gp-ic{width:54px;height:54px;border-radius:50%;background:#13305E;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.gp-ic.or{background:#F26B1D}
.gp-ic.gr{background:#1E9E6A}
.g-points strong{display:block;font-size:19px;margin-bottom:10px}
.g-points p{font-size:15px;line-height:1.75;color:var(--body)}
.g-points a{color:#0B4DA2;font-weight:700}

/* 카드·분류 아이콘 */
.g-ci{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:#EEF2F8;color:#13305E;margin-bottom:6px}
.g-cards a:hover .g-ci{background:#13305E;color:#fff}
.g-hi{display:inline-flex;vertical-align:-6px;align-items:center;justify-content:center;width:40px;height:40px;margin-right:12px;border-radius:50%;background:#F26B1D;color:#fff}

@media (max-width:960px){
  .g-methods,.g-points{grid-template-columns:1fr}
  .g-split{grid-template-columns:1fr}
  .g-mock{position:static}
}
@media (max-width:640px){
  .g-methods > li{padding:22px 20px}
  .gm-ic{width:50px;height:50px;border-radius:14px;margin-bottom:14px}
  .g-methods strong{font-size:18px}
  .g-methods ul li{font-size:14px}
  .gk-body{padding:16px}
  .gk-row{grid-template-columns:60px 1fr;}
  .gk-row b:nth-of-type(2){grid-column:2}
  .gk-row b.w{grid-column:2}
  .g-points li{padding:22px 20px}
  .g-points strong{font-size:17px}
  .g-points p{font-size:14px}
  .g-hi{width:32px;height:32px;margin-right:8px;vertical-align:-4px}
}