/* 약관나침반 — 공공기관 내부 시스템 톤(남색·회색). 실존 로고·상징은 쓰지 않는다. */
:root{
  --navy:#12305c; --navy2:#1b4079; --navy-l:#eaeef5;
  --ink:#1c2430; --ink2:#4a5566; --ink3:#6b7686;
  --line:#d3dae4; --line2:#e6eaf0; --bg:#f5f7fa; --card:#fff;
  --warn:#8a5a00; --warn-bg:#fff7e6; --warn-line:#e8cf9a;
  --stop:#8c2f2f; --stop-bg:#fdf1f1; --ok:#1c5f45; --ok-bg:#eef7f2;
  --r:3px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Malgun Gothic","맑은 고딕",-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:15px; line-height:1.62;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 16px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; background:#fff; padding:8px; z-index:99}

/* 머리 */
.topbar{background:var(--navy); color:#fff; border-bottom:3px solid #0b2247}
.topbar-in{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
  justify-content:space-between; padding:14px 16px}
.brand{display:flex; align-items:center; gap:10px}
.mark{width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center;
  border:1px solid #6d86ad; color:#dce6f4; font-size:16px; letter-spacing:0}
.brand-txt strong{display:block; font-size:19px; letter-spacing:-.3px}
.brand-txt em{display:block; font-style:normal; font-size:12.5px; color:#c3d2e6}
.topnote{display:flex; flex-wrap:wrap; gap:6px; margin:0}
.chip{font-size:11.5px; padding:3px 8px; border-radius:2px; white-space:nowrap}
.chip-line{border:1px solid #6d86ad; color:#dbe5f2}
.chip-ok{background:#e8f2ea; color:#14432f; border:1px solid #9dc0ad; font-weight:700}
/* 긴 안내 문구 칩은 어느 폭에서도 줄바꿈한다 — nowrap 이면 좁은 데스크톱(761~1050px)에서
   머리띠가 화면을 밀어 문서 전체에 가로 스크롤이 생긴다. */
#privacyChip{white-space:normal; max-width:100%}

/* 탭 */
.tabs{background:#fff; border-bottom:1px solid var(--line)}
.tabs-in{display:flex; gap:2px; overflow-x:auto}
.tab{appearance:none; background:none; border:0; border-bottom:3px solid transparent;
  padding:11px 14px; font:inherit; font-size:14px; color:var(--ink2); cursor:pointer; white-space:nowrap}
.tab:hover{color:var(--navy); background:#f8fafc}
.tab.is-on{color:var(--navy); border-bottom-color:var(--navy); font-weight:700}

main{padding:18px 16px 40px}
.scopebar{background:var(--navy-l); border:1px solid #c8d4e6; border-left:4px solid var(--navy);
  padding:9px 12px; font-size:13px; color:#22375c; margin-bottom:14px}
.scopebar strong{margin-right:8px}
.scopebar.is-out{background:var(--warn-bg); border-color:var(--warn-line); border-left-color:#c8922b; color:#6b4708}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 18px 20px; margin:0 0 14px}
.card h2{margin:0 0 10px; font-size:17px; letter-spacing:-.3px; color:var(--navy);
  display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--line2); padding-bottom:9px}
.step{display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px;
  background:var(--navy); color:#fff; font-size:12px; font-weight:700; border-radius:2px}
.card h3{margin:16px 0 7px; font-size:14.5px; color:var(--navy2)}
.lede{margin:0 0 12px; color:var(--ink2); font-size:13.5px}
.hint{margin:5px 0 0; font-size:12px; color:var(--ink3)}
.opt{font-weight:400; color:var(--ink3); font-size:12px}
.mt{margin-top:16px}

/* 입력 */
.lbl{display:block; font-size:13px; font-weight:700; color:var(--ink2); margin:0 0 5px}
input[type=month],select,textarea{
  width:100%; padding:8px 9px; border:1px solid var(--line); border-radius:2px;
  font:inherit; font-size:14px; color:var(--ink); background:#fff}
/* 좁은 화면에서 긴 선택지 문구가 칸을 밀지 않게 — 잘린 글자 대신 말줄임으로 끝낸다 */
select{max-width:100%; text-overflow:ellipsis}
textarea{resize:vertical; line-height:1.6}
input:focus,select:focus,textarea:focus{outline:2px solid #93b0d8; outline-offset:0; border-color:var(--navy2)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.exrow{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.exbtn{text-align:left; background:#fbfcfe; border:1px solid var(--line); border-left:3px solid #9fb4d2;
  padding:9px 11px; cursor:pointer; font:inherit; border-radius:2px}
.exbtn:hover{background:var(--navy-l); border-left-color:var(--navy)}
.exbtn b{display:block; font-size:12.5px; color:var(--navy2)}
.exbtn span{display:block; font-size:12.5px; color:var(--ink2); margin-top:3px}
.exbtn i{display:block; font-style:normal; font-size:11px; color:var(--ink3); margin-top:4px}
.btnrow{display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap}
.btn{appearance:none; font:inherit; font-size:14px; padding:9px 16px; border:1px solid var(--line);
  background:#fff; color:var(--ink2); border-radius:2px; cursor:pointer}
.btn:hover{background:#f2f5f9}
.btn-main{background:var(--navy); border-color:var(--navy); color:#fff; font-weight:700}
.btn-main:hover{background:var(--navy2)}
.badge{font-size:12px; padding:5px 9px; border-radius:2px; background:var(--warn-bg);
  border:1px solid var(--warn-line); color:var(--warn)}

/* 마스킹 */
.maskbox{margin-top:16px; border:1px solid var(--line); border-top:3px solid var(--navy2); padding:12px}
.maskbox h3{margin:0 0 6px}
.mlbl{display:block; font-size:12px; font-weight:700; color:var(--ink3); margin-bottom:4px}
.mlbl-ok{color:var(--ok)}
.maskbox pre{margin:0; padding:9px; background:#f7f9fc; border:1px solid var(--line2);
  font-family:inherit; font-size:13px; white-space:pre-wrap; word-break:break-all; min-height:52px}
.maskbox pre mark{background:#ffe9a8; color:#6b4708; padding:0 2px; font-weight:700}
.maskbox pre .mk{background:#e6efe9; color:var(--ok); font-weight:700; padding:0 2px}

/* 판정 */
.axisgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:7px}
.acell{border:1px solid var(--line); padding:8px 9px; background:#fcfdff; border-radius:2px}
.acell.is-on{border-color:var(--navy); border-left:4px solid var(--navy); background:var(--navy-l)}
.acell.is-2nd{border-left:4px solid #9fb4d2}
.acell b{display:block; font-size:13px; color:var(--navy2)}
.acell .sc{font-size:11.5px; color:var(--ink3)}
.acell.is-on b{color:var(--navy)}
.kv{width:100%; border-collapse:collapse; font-size:13.5px; margin:6px 0 0}
.kv th,.kv td{border:1px solid var(--line); padding:7px 9px; text-align:left; vertical-align:top}
.kv th{background:#f4f6fa; color:var(--ink2); font-weight:700; white-space:nowrap; width:150px}
.tbl{width:100%; border-collapse:collapse; font-size:13px; margin-top:8px}
.tbl th,.tbl td{border:1px solid var(--line); padding:7px 8px; text-align:left; vertical-align:top}
.tbl thead th{background:#eef1f6; color:var(--navy2); font-weight:700; white-space:nowrap}
.tbl td.num{text-align:right; white-space:nowrap}
.tbl td.lnk{white-space:nowrap; text-align:center}
.tbl td.lnk a{font-weight:700}
.mt{margin-top:18px}
.tbl tbody tr.hi td{background:#f7f9fc}
.hitlex{font-size:12px; color:var(--ink2)}
.hitlex code{background:#eef1f6; padding:1px 5px; border-radius:2px; font-family:inherit}

/* 갈래 */
.tier{border:1px solid var(--line); border-left:5px solid var(--navy); padding:12px 14px; background:#fbfcfe}
.tier.t3,.tier.t4,.tier.t5{border-left-color:#c8922b; background:var(--warn-bg)}
.tier .ttag{display:inline-block; font-size:11.5px; font-weight:700; background:var(--navy); color:#fff;
  padding:2px 7px; border-radius:2px; margin-right:7px}
.tier.t3 .ttag,.tier.t4 .ttag,.tier.t5 .ttag{background:#8a5a00}
.tier h3{margin:8px 0 4px; font-size:15px; color:var(--ink)}
.tier p{margin:4px 0; font-size:13.5px}
.clause{margin-top:10px; border:1px solid var(--line); background:#fff}
.clause .chd{background:#f4f6fa; border-bottom:1px solid var(--line); padding:7px 10px; font-size:12.5px; color:var(--navy2)}
.clause .chd b{font-size:13.5px}
.clause .cbody{padding:10px 12px; font-size:13px; max-height:340px; overflow:auto;
  white-space:pre-wrap; color:#2a3340}
.notopen{background:#fff; border:1px dashed #c8922b; padding:10px 12px; margin-top:10px; font-size:13px}
.notopen b{color:#8a5a00}
.next{margin-top:10px; background:#fff; border:1px solid var(--line); padding:9px 11px; font-size:13.5px}
.next b{color:var(--navy2)}

/* 결정례 */
.none{background:var(--navy-l); border:1px solid #c8d4e6; padding:12px 14px; font-size:13.5px}
.none b{color:var(--navy)}
.sortnote{font-size:12px; color:var(--ink3); margin:4px 0 0}
.oc{font-weight:700; white-space:nowrap}
.oc-y{color:var(--ok)} .oc-p{color:var(--warn)} .oc-n{color:var(--ink3)}
a{color:var(--navy2)}
a:hover{color:var(--navy)}

/* 체크리스트 */
.ck{list-style:none; margin:0; padding:0}
.ck li{border:1px solid var(--line2); border-left:3px solid #9fb4d2; padding:8px 10px; margin-bottom:6px; background:#fcfdff}
.ck li b{display:block; font-size:13.5px}
.ck li span{font-size:12.5px; color:var(--ink2)}
.ck li.pin{border-left-color:#c8922b; background:var(--warn-bg)}
.nodraft{margin-top:12px; background:var(--stop-bg); border:1px solid #dfb3b3; border-left:4px solid var(--stop);
  padding:10px 12px; font-size:13px; color:#5c2020}
.nodraft b{color:var(--stop)}

.formula{background:#f7f9fc; border:1px solid var(--line2); padding:10px 12px; font-family:inherit;
  font-size:12.5px; white-space:pre-wrap; margin:0 0 12px; color:#2a3340}

/* 바닥 */
.foot{background:#28313d; color:#c9d2dd; margin-top:24px; padding:16px 0 26px; font-size:12.5px}
.fdis{margin:0 0 4px; font-weight:700; color:#fff}
.fhelp,.fnote{margin:0 0 3px}

.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

@media (max-width:760px){
  body{font-size:14.5px; overflow-x:hidden}
  .grid2,.exrow{grid-template-columns:1fr}
  .card{padding:14px}
  .kv th{width:auto; white-space:normal}
  .tbl{font-size:12.5px}
  .tbl th,.tbl td{padding:6px}
  .chip{white-space:normal}              /* 긴 안내 문구가 화면을 밀지 않게 */
  .topnote{max-width:100%}
  .brand-txt strong{font-size:17px}
  .maskbox pre{min-height:auto}

  /* 탭 — 좁은 화면에서 가로 스크롤을 만들지 않는다.
     3개를 균등 폭 격자로 깔고 글자를 줄바꿈시켜 390px 에서도 셋 다 온전히 보이게 한다. */
  .tabs-in{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    overflow-x:visible; padding:0 6px}
  .tab{white-space:normal; word-break:keep-all; line-height:1.25;
    padding:8px 4px; font-size:12px; text-align:center;
    border-right:1px solid var(--line2)}
  .tab:last-child{border-right:0}
}

/* ★ 국외 이전 고지 (감사 high #5) — 마스킹본이라도 국외 사업자에게 보내면 밝힌다.
   주최가 금융보안원이고 심사 대상이 배포 URL 이라 여기가 가점·감점이 갈리는 자리다. */
.xfer { margin-top: 12px; padding: 12px 14px; border: 1px solid #c9d4e0;
        border-left: 4px solid #1f3d5c; background: #f6f9fc; border-radius: 3px;
        font-size: 13px; line-height: 1.6; color: #1d2c3a; }
.xfer > b { color: #10243a; }
.xfer table { border-collapse: collapse; width: 100%; margin: 8px 0 6px; font-size: 12.5px; }
.xfer th, .xfer td { border: 1px solid #d5dde6; padding: 5px 8px; text-align: left;
                     vertical-align: top; }
.xfer th { background: #eef3f8; width: 27%; font-weight: 600; white-space: nowrap; }
.xfer-alt { display: block; margin-top: 6px; padding-top: 6px;
            border-top: 1px dashed #c9d4e0; color: #3d5266; }