:root{
  --teal:#0E9294; --teal-soft:#E3F5F5; --teal-dark:#0A6E70;
  --ink:#1A2320; --muted:#6B7A74; --line:#E3E8E5; --paper:#FBFAF7; --card:#fff;
  --yellow:#FFC83D; --red:#E4572E;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
     font-family:Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
     font-size:16px;line-height:1.75}
.wrap{max-width:900px;margin:0 auto;padding:48px 24px 110px}
a.back{font-size:14px;color:var(--teal);text-decoration:none}
.badge{display:inline-block;background:var(--teal-soft);color:var(--teal-dark);
       font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;margin-top:12px}
h1{font-size:32px;line-height:1.3;margin:14px 0 10px;letter-spacing:-.02em}
.lead{font-size:17px;color:#33423C;margin:0 0 6px}

.flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:26px 0 0;
      padding:16px 18px;background:var(--card);border:1px solid var(--line);
      border-left:3px solid var(--teal);border-radius:10px}
.flow b{background:var(--teal-soft);color:var(--teal-dark);font-size:13px;font-weight:700;
        padding:4px 10px;border-radius:6px;white-space:nowrap}
.flow span{color:#B7C4BE;font-size:13px}

h2{font-size:23px;margin:64px 0 6px;letter-spacing:-.01em;padding-top:22px;border-top:1px solid var(--line)}
h2 .no{color:var(--teal);font-size:15px;display:block;margin-bottom:2px;font-weight:700}
.purpose{font-size:16px;color:#3B4A44;margin:10px 0 0}

ol.steps{list-style:none;counter-reset:s;padding:0;margin:22px 0 0}
ol.steps > li{counter-increment:s;position:relative;padding:0 0 26px 44px;
              border-left:1px solid var(--line);margin-left:13px}
ol.steps > li:last-child{border-left-color:transparent;padding-bottom:4px}
ol.steps > li::before{content:counter(s);position:absolute;left:-13px;top:1px;
    width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;
    font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.act{font-size:16px;margin:0}
.note{font-size:14.5px;color:var(--muted);margin:6px 0 0}
b.btn{display:inline-block;background:#EEF2F7;border:1px solid #D6DEE7;border-radius:5px;
      padding:1px 7px;font-size:14px;font-weight:600;color:#2C3A44;margin:0 1px}

/* 캡처: 앱을 화면 왼쪽 위(0,0)에 470px 폭으로 고정해 찍었으므로
   이미지를 315%로 늘리면 컨테이너 폭에 앱 영역이 맞는다. */
.shot{position:relative;width:100%;max-width:330px;overflow:hidden;
      border:1px solid var(--line);border-radius:14px;background:#fff;margin:14px 0 0;
      box-shadow:0 2px 10px rgba(20,40,30,.06)}
.shot img{display:block;width:315%;max-width:none}
.shot .mask{position:absolute;background:#9AA6A1;border-radius:2px}
.cap{font-size:13.5px;color:var(--muted);margin:8px 0 0}

table{width:100%;border-collapse:collapse;background:var(--card);
      border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:15px;margin:16px 0 0}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#F4F7F5;font-weight:600;font-size:14px;color:#42524C}
tr:last-child td{border-bottom:none}
td.r{text-align:right;white-space:nowrap}

.box{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:18px 20px;margin:20px 0}
.box.warn{border-left:3px solid var(--red);background:#FFF6F3}
.box.tip{border-left:3px solid var(--teal);background:#F1FAFA}
.box.pay{border-left:3px solid var(--yellow);background:#FFFBEF}
.box.hold{border-left:3px solid #B7C4BE;background:#F6F8F7}
.box h3{margin:0 0 8px;font-size:15.5px}
.box ul,.box ol{margin:0;padding-left:18px}
.box li{margin:5px 0;font-size:15px}
.box p{margin:0;font-size:15px}

details{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:14px 18px;margin:10px 0}
details summary{cursor:pointer;font-weight:600;font-size:15.5px}
details p{margin:10px 0 0;font-size:15px;color:#3B4A44}

footer{margin-top:72px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}