/* ZEPRO 안내·정책 페이지 공통 스타일 (모바일 반응형) */
:root{
  --navy:#0A1E4D; --blue:#1055E0; --blue-h:#1A5CE0; --blue-pale:#EAF1FF;
  --bg:#f5f7fb; --card:#fff; --line:#e6ebf2; --muted:#6b7685; --text:#1f2a44;
  --ok:#16A34A; --okbg:#e8f6ee; --warn:#B9651B; --warnbg:#fff3e6;
  --radius:14px; --shadow:0 8px 30px rgba(10,30,77,.08);
  --font:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.7;
  -webkit-text-size-adjust:100%;word-break:keep-all;overflow-wrap:anywhere}

/* 상단 바 */
.topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.topbar .inner{max-width:840px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;font-size:19px;color:var(--navy);text-decoration:none;letter-spacing:-.3px}
.brand span{color:var(--blue)}
.topbar nav a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600;margin-left:14px}
.topbar nav a:hover{color:var(--blue)}

/* 본문 */
.wrap{max-width:840px;margin:0 auto;padding:38px 20px 64px}
.page-title{font-size:26px;font-weight:800;color:var(--navy);letter-spacing:-.5px;margin-bottom:6px}
.page-sub{color:var(--muted);font-size:15px;margin-bottom:28px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 26px;margin-bottom:18px}
h2{font-size:19px;color:var(--navy);font-weight:800;margin:26px 0 10px;letter-spacing:-.3px}
h2:first-child{margin-top:0}
h3{font-size:16px;color:var(--navy);font-weight:700;margin:18px 0 8px}
p{margin:9px 0;font-size:15.5px}
ul,ol{margin:10px 0 10px 20px}
li{margin:6px 0;font-size:15.5px}
strong{color:var(--navy)}
a{color:var(--blue)}
.lead{font-size:16.5px;color:var(--text)}
.muted{color:var(--muted);font-size:14px}
.callout{background:var(--blue-pale);border-left:4px solid var(--blue);border-radius:8px;padding:14px 16px;margin:16px 0}
.notice{background:var(--warnbg);border-left:4px solid var(--warn);border-radius:8px;padding:14px 16px;margin:16px 0;color:#6b5400;font-size:14px}
.steps{counter-reset:s;list-style:none;margin-left:0}
.steps li{position:relative;padding-left:40px;margin:14px 0}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;
  background:var(--blue);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}

/* 표 */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:420px}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--navy);color:#fff;font-weight:700}
tbody tr:nth-child(even){background:#f7f9fd}

/* 요금제 카드 */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.plan{border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff;text-align:center}
.plan.featured{border:2px solid var(--blue);box-shadow:var(--shadow)}
.plan .name{font-weight:800;color:var(--navy);font-size:16px}
.plan .price{font-size:24px;font-weight:800;color:var(--blue);margin:10px 0}
.plan .price small{font-size:13px;color:var(--muted);font-weight:600}
.plan ul{text-align:left;margin:12px 0 0 18px}
.plan li{font-size:13.5px}

/* 푸터 */
.foot{border-top:1px solid var(--line);background:#fff}
.foot .inner{max-width:840px;margin:0 auto;padding:26px 20px;font-size:12.5px;color:var(--muted);line-height:1.9}
.foot .links{margin-bottom:12px}
.foot .links a{color:var(--muted);text-decoration:none;margin-right:14px;display:inline-block}
.foot .links a:hover{color:var(--blue)}
.foot b{color:var(--text)}

@media (max-width:640px){
  .wrap{padding:26px 16px 48px}
  .page-title{font-size:22px}
  .card{padding:20px 18px}
  .plans{grid-template-columns:1fr}
  .topbar nav a{margin-left:10px;font-size:13px}
}

/* 키보드 포커스 */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible{ outline:2px solid var(--blue-h,#1A5CE0); outline-offset:2px; }
/* 본문 링크 hover */
.card a:not(.btn):hover{ text-decoration:underline; }