@charset "UTF-8";
/* ==========================================================================
   비자 자격별 안내 — 공개 화면 전용
   visa-guide.jsp · visa-guide-detail.jsp · visa-change.jsp 만 읽는다.
   공용 CSS(kmsia-common.css)는 건드리지 않는다 — 공개화면 19종이 함께 읽는다.
   ========================================================================== */

.vg-intro{padding:18px 20px;margin-bottom:22px;border-radius:var(--radius,12px);
  background:var(--krds-color-light-primary-5,#eef4fb);
  font-size:15px;line-height:1.7;color:var(--ink,#1b2430);}
.vg-intro b{color:var(--kmsia-brand,#0b3d76);}
.vg-cta{display:inline-block;margin-left:6px;font-weight:700;color:var(--kmsia-brand,#0b3d76);}

/* 아직 공개된 안내가 없을 때. 빈 화면 대신 이유를 알린다 */
.vg-empty{padding:40px 24px;text-align:center;border:1px solid var(--line,#e3e8ef);
  border-radius:var(--radius,12px);background:#fff;line-height:1.8;color:var(--ink-sub,#5a6472);}
.vg-empty b{display:block;margin-bottom:8px;font-size:17px;color:var(--ink,#1b2430);}
.vg-empty .sub{display:block;margin-top:10px;font-size:13px;}

/* 근거 판(版) 표시 — 모든 화면 상단에 붙는다 */
.vg-basis{padding:10px 14px;margin-bottom:20px;border-left:3px solid var(--kmsia-brand,#0b3d76);
  background:#f7f9fb;font-size:13.5px;color:var(--ink-sub,#48525f);}
.vg-basis b{color:var(--ink,#1b2430);}

/* 자격 고르기 */
.vg-picker{margin-bottom:24px;}
.vg-picker .lbl{display:block;margin-bottom:8px;font-weight:700;font-size:14px;}
.vg-picker .chip{display:inline-flex;align-items:center;gap:5px;margin:0 6px 6px 0;
  padding:7px 13px;border:1px solid var(--line,#dde3ea);border-radius:999px;
  background:#fff;font-size:14px;color:var(--ink,#1b2430);}
.vg-picker .chip em{font-style:normal;font-size:12px;color:var(--ink-sub,#7d8794);}
.vg-picker .chip:hover{border-color:var(--kmsia-brand,#0b3d76);}
.vg-picker .chip.on{background:var(--kmsia-brand,#0b3d76);border-color:var(--kmsia-brand,#0b3d76);color:#fff;}
.vg-picker .chip.on em{color:rgba(255,255,255,.75);}

/* 자격 카드 목록 */
.vg-cards{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.vg-cards a{display:block;padding:16px 18px;border:1px solid var(--line,#e3e8ef);
  border-radius:var(--radius,12px);background:#fff;height:100%;}
.vg-cards a:hover{border-color:var(--kmsia-brand,#0b3d76);}
.vg-cards .code{display:inline-block;padding:2px 8px;border-radius:4px;
  background:var(--krds-color-light-primary-5,#eef4fb);
  font-size:12px;font-weight:700;color:var(--kmsia-brand,#0b3d76);}
.vg-cards .nm{display:block;margin:8px 0 6px;font-size:17px;font-weight:700;color:var(--ink,#1b2430);}
.vg-cards .meta{display:block;font-size:13px;color:var(--ink-sub,#5a6472);}
.vg-cards .meta em{font-style:normal;margin-left:6px;padding:1px 6px;border-radius:3px;
  background:#e8f3ea;color:#26643a;font-size:11.5px;}
.vg-cards .date{display:block;margin-top:6px;font-size:12px;color:var(--ink-sub,#8a939f);}

.vg-h2{margin:30px 0 12px;font-size:19px;font-weight:700;color:var(--ink,#1b2430);
  padding-bottom:8px;border-bottom:2px solid var(--kmsia-brand,#0b3d76);}
.vg-h3{margin:20px 0 10px;font-size:16px;font-weight:700;color:var(--ink,#1b2430);}
.vg-h2.vg-sep{margin-top:44px;}

/* 안내 본문.
   ★ 검수자가 쓴 글은 줄바꿈과 들여쓰기로 구조를 만든다(표·목록 포함).
     그래서 pre-wrap 으로 그대로 살린다. HTML 은 들어가지 않는다 —
     화면 출력은 fn:escapeXml 이 담당한다. */
.vg-body{padding:18px 20px;border:1px solid var(--line,#e3e8ef);border-radius:var(--radius,12px);
  background:#fff;white-space:pre-wrap;word-break:break-word;
  font-size:15px;line-height:1.85;color:var(--ink,#1b2430);
  font-family:inherit;overflow-x:auto;}

/* ── 회원 전용 안내 ────────────────────────────────────────────────────────
   본문은 매퍼(SQL)가 걸러 화면까지 오지 않는다. 여기 보이는 것은 목차뿐이다.
   잠긴 자리를 빈칸으로 두면 "빠졌나?" 로 읽힌다 — 무엇이 담겼는지와
   왜 잠갔는지를 함께 적는다. 커뮤니티 진열창(8.27절)과 같은 방침이다. */
.vg-lock{padding:20px 22px;border:1px solid #e2dcc9;border-radius:var(--radius,12px);
  background:linear-gradient(180deg,#fdfaf3 0%,#fbf7ee 100%);}
.vg-lock.compact{padding:14px 18px;}
.vg-lock-head{display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-size:16px;color:#5c4a2e;}
.vg-lock-head i{font-style:normal;font-size:18px;line-height:1;}
.vg-lock-head b{color:#3d2f18;}
.vg-lock-txt{margin:0;font-size:14.5px;line-height:1.8;color:#6b5a3c;}

.vg-outline{margin-top:16px;padding:14px 16px;border-radius:8px;background:#fff;
  border:1px solid #ece5d5;}
.vg-outline .lbl{display:block;margin-bottom:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.02em;color:#8a7a58;}
.vg-outline ul{list-style:none;margin:0;padding:0;}
.vg-outline li{position:relative;padding:5px 0 5px 20px;font-size:14.5px;line-height:1.6;
  color:var(--ink,#1b2430);word-break:keep-all;}
.vg-outline li + li{border-top:1px dashed #f0ebe0;}
.vg-outline li::before{content:"";position:absolute;left:6px;top:13px;
  width:5px;height:5px;border-radius:50%;background:#c3b48d;}

.vg-lock-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.vg-lock-cta .btn{display:inline-block;padding:10px 20px;border-radius:8px;
  background:var(--kmsia-brand,#0b3d76);color:#fff;font-size:14px;font-weight:700;}
.vg-lock-cta .btn:hover{opacity:.9;}
.vg-lock-cta .btn.ghost{background:#fff;color:var(--kmsia-brand,#0b3d76);
  border:1px solid var(--kmsia-brand,#0b3d76);}
/* 가입 문의 — 「협회 회원 되기」가 아직 준비 중 안내로 가므로 지금 닿을 수 있는 길 */
.vg-lock-ask{margin:10px 0 0;font-size:13.5px;color:#7a6a4c;}
.vg-lock-ask a{font-weight:700;color:var(--kmsia-brand,#0b3d76);}
.vg-lock-note{margin:14px 0 0;padding-top:12px;border-top:1px solid #ede6d7;
  font-size:13px;line-height:1.75;color:#7a6a4c;}
.vg-lock-note b{color:#5c4a2e;}

.vg-badge{display:inline-block;vertical-align:2px;margin-left:8px;padding:2px 8px;
  border-radius:4px;background:#f3ecdb;color:#7a6134;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;}
.vg-toc a.lock::after{content:" 🔒";font-size:11px;}
.vg-intro-sub{display:inline-block;margin-top:6px;font-size:13.5px;color:var(--ink-sub,#5a6472);}
.vg-cards .meta em.lock{background:#f3ecdb;color:#7a6134;}

.vg-note{margin:8px 2px 0;font-size:13px;line-height:1.7;color:var(--ink-sub,#6b7482);}
.vg-more{margin:12px 2px 0;font-size:14px;}
.vg-more a{font-weight:700;color:var(--kmsia-brand,#0b3d76);}
.vg-none{padding:18px 20px;border:1px dashed var(--line,#dde3ea);border-radius:var(--radius,12px);
  background:#fafbfc;font-size:14px;color:var(--ink-sub,#5a6472);}

/* 전환 경로 */
.vg-routes{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.vg-routes li{display:flex;align-items:center;gap:8px;padding:11px 14px;
  border:1px solid var(--line,#e3e8ef);border-radius:8px;background:#fff;font-size:14px;}
.vg-routes .to{flex:0 0 auto;padding:2px 8px;border-radius:4px;
  background:var(--krds-color-light-primary-5,#eef4fb);
  font-size:12px;font-weight:700;color:var(--kmsia-brand,#0b3d76);}
.vg-routes.from .to{background:#f2f0f7;color:#4a3d78;}
.vg-routes .nm{font-weight:600;color:var(--ink,#1b2430);}
.vg-routes .dc{flex:1 1 100%;font-size:12.5px;color:var(--ink-sub,#7d8794);}

/* 항목 바로가기 */
.vg-toc{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.vg-toc a{padding:6px 11px;border:1px solid var(--line,#dde3ea);border-radius:999px;
  background:#fff;font-size:13px;color:var(--ink-sub,#48525f);}
.vg-toc a:hover{border-color:var(--kmsia-brand,#0b3d76);color:var(--kmsia-brand,#0b3d76);}

.vg-item{scroll-margin-top:20px;}

/* 사증 섹션 머리말 — 원래 항목 4개 본문마다 똑같이 들어 있던 것을 여기 한 번만 둔다 */
.vg-lead{padding:14px 18px;margin-bottom:16px;border-radius:8px;
  background:var(--krds-color-light-primary-5,#eef4fb);
  font-size:14.5px;line-height:1.75;color:var(--ink,#1b2430);}
.vg-lead b{color:var(--kmsia-brand,#0b3d76);}
/* 사증 항목 바로가기는 색을 달리해 두 매뉴얼이 섞이지 않게 한다 */
.vg-toc a.visa{background:var(--krds-color-light-primary-5,#eef4fb);
  border-color:#cfe0f2;color:var(--kmsia-brand,#0b3d76);}
/* 본문의 **강조** 를 컨트롤러가 <strong> 으로 바꿔 준다 */
.vg-body strong{font-weight:700;color:var(--kmsia-brand,#0b3d76);}

/* 근거 원본 쪽 — 이용자에게 보여주는 근거는 이 이미지다 */
.vg-src{margin-top:14px;}
.vg-src summary{cursor:pointer;padding:9px 14px;border:1px solid var(--line,#dde3ea);
  border-radius:8px;background:#f7f9fb;font-size:14px;font-weight:600;color:var(--ink-sub,#48525f);}
.vg-src[open] summary{margin-bottom:12px;}
.vg-page{margin:0 0 18px;}
.vg-page img{display:block;width:100%;height:auto;border:1px solid #cfd8e3;background:#fff;}
.vg-page figcaption{margin-top:5px;font-size:12.5px;color:var(--ink-sub,#7d8794);text-align:right;}

/* 면책 안내 — 모든 화면 맨 아래 */
.vg-disclaimer{margin-top:40px;padding:16px 18px;border-radius:var(--radius,12px);
  background:#fbf8f2;border:1px solid #efe3cf;
  font-size:13.5px;line-height:1.8;color:#5c4a2e;}
.vg-disclaimer b{color:#3d2f18;}

@media(max-width:767px){
  .vg-cards{grid-template-columns:1fr;}
  .vg-routes{grid-template-columns:1fr;}
  .vg-body{padding:14px 14px;font-size:14.5px;}
  /* 표가 들어간 본문은 가로로 스크롤해서 본다. 본문이 줄바꿈되면 표가 깨진다 */
  .vg-h2{font-size:17px;}
  .vg-lock{padding:16px 16px;}
  .vg-lock-cta{flex-direction:column;}
  .vg-lock-cta .btn{text-align:center;}
  .vg-badge{margin-left:0;}
}

/* 섹션 설명 — 「이미 국내에 계신다면」 / 「아직 밖에 계신다면」 아래 한 줄 */
.vg-sub{margin:-4px 2px 14px;font-size:14.5px;line-height:1.7;color:var(--ink-sub,#5a6472);}
.vg-sub b{color:var(--ink,#1b2430);}

/* 자격 카드의 오늘 클릭 수 */
.vg-cards .meta em.hot{background:#fdf0e6;color:#9a5b22;}

/* ==========================================================================
   자가진단 체크리스트 팝업 (kmsia-visa-check.js)
   협회회원 전용. 「~으로 바꾸려면」 자리에서 열린다.
   ========================================================================== */
.vc-open{overflow:hidden;}
.vc-dim{position:fixed;inset:0;z-index:9000;background:rgba(16,24,40,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;}
.vc-panel{width:100%;max-width:640px;max-height:88vh;display:flex;flex-direction:column;
  background:#fff;border-radius:var(--radius,14px);overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.28);}
.vc-head{display:flex;align-items:center;gap:12px;padding:18px 20px;
  border-bottom:1px solid var(--line,#e3e8ef);}
.vc-title{margin:0;font-size:17px;font-weight:700;color:var(--ink,#1b2430);}
.vc-x{margin-left:auto;width:34px;height:34px;border:0;border-radius:8px;background:#f2f4f7;
  font-size:20px;line-height:1;color:#5a6472;cursor:pointer;}
.vc-x:hover{background:#e5e9ef;}
.vc-body{flex:1;overflow-y:auto;padding:20px;}
.vc-foot{padding:14px 20px 18px;border-top:1px solid var(--line,#e3e8ef);background:#fafbfc;}
.vc-msg{margin:24px 0;text-align:center;color:var(--ink-sub,#5a6472);line-height:1.7;}

.vc-group + .vc-group{margin-top:26px;padding-top:22px;border-top:1px dashed var(--line,#e3e8ef);}
.vc-gnm{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:.02em;
  color:var(--kmsia-brand,#0b3d76);}
.vc-q{padding:14px 0;}
.vc-q + .vc-q{border-top:1px solid #f1f4f8;}
.vc-qsj{margin:0 0 4px;font-size:15.5px;font-weight:600;line-height:1.55;
  color:var(--ink,#1b2430);word-break:keep-all;}
.vc-req{font-style:normal;margin-left:6px;padding:1px 7px;border-radius:4px;
  background:#fdecec;color:#c0392b;font-size:11.5px;font-weight:700;vertical-align:2px;}
.vc-qdc{margin:0 0 10px;font-size:13px;line-height:1.65;color:var(--ink-sub,#6b7482);
  word-break:keep-all;}
.vc-opts{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
/* ★ 선택지는 줄바꿈을 허용한다. 안내 문장이라 길고, 16개 언어로 번역되면 더 길어진다 */
.vc-opt{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;
  border:1px solid var(--line,#dde3ea);border-radius:9px;background:#fff;cursor:pointer;}
.vc-opt:hover{border-color:var(--kmsia-brand,#0b3d76);background:#f8fbff;}
.vc-opt input{margin:3px 0 0;flex:0 0 auto;width:17px;height:17px;accent-color:#0b3d76;}
.vc-otxt{font-size:14.5px;line-height:1.55;color:var(--ink,#1b2430);word-break:keep-all;}
.vc-q.vc-miss .vc-opts{outline:2px solid #e2b4b4;outline-offset:4px;border-radius:10px;}

.vc-btn{width:100%;height:48px;border:0;border-radius:10px;cursor:pointer;
  background:var(--kmsia-brand,#0b3d76);color:#fff;font-size:16px;font-weight:700;}
.vc-btn:hover{opacity:.92;}
.vc-btn.vc-ghost{background:#fff;color:var(--kmsia-brand,#0b3d76);
  border:1px solid var(--kmsia-brand,#0b3d76);}
.vc-note{margin:10px 2px 0;font-size:12.5px;line-height:1.65;color:var(--ink-sub,#7d8794);
  word-break:keep-all;}

/* 결과 — 등급별로 색을 달리한다 */
.vc-result{padding:18px 20px;border-radius:12px;border:1px solid var(--line,#e3e8ef);}
.vc-result.vc-success{background:#f1f9f3;border-color:#cfe8d6;}
.vc-result.vc-warning{background:#fdf8ef;border-color:#eddfc4;}
.vc-result.vc-danger {background:#fdf2f2;border-color:#f0d4d4;}
.vc-rmsg{margin:0;font-size:17px;font-weight:700;line-height:1.5;color:var(--ink,#1b2430);
  word-break:keep-all;}
.vc-score{margin:10px 0 0;font-size:14px;color:var(--ink-sub,#5a6472);}
.vc-score b{font-size:20px;color:var(--kmsia-brand,#0b3d76);}
/* 안내문은 줄바꿈으로 구조를 만든다. 본문(.vg-body)과 같은 방침 */
.vc-guide{margin-top:14px;padding-top:14px;border-top:1px solid rgba(0,0,0,.07);
  white-space:pre-line;font-size:14.5px;line-height:1.85;color:var(--ink,#1b2430);
  word-break:keep-all;}
.vc-docs{margin-top:20px;padding:16px 18px;border:1px solid var(--line,#e3e8ef);
  border-radius:12px;background:#fafbfc;}
.vc-docs ul{margin:0;padding-left:18px;}
.vc-docs li{padding:3px 0;font-size:14px;line-height:1.6;color:var(--ink,#1b2430);
  word-break:keep-all;}

/* 「~으로 바꾸려면」 자리의 진단 버튼 */
.vg-checkcta{margin:14px 0 0;padding:16px 18px;border-radius:12px;
  background:var(--krds-color-light-primary-5,#eef4fb);border:1px solid #cfe0f2;}
.vg-checkcta p{margin:0 0 12px;font-size:14.5px;line-height:1.7;color:var(--ink,#1b2430);
  word-break:keep-all;}
.vg-checkcta .btn{display:inline-block;padding:11px 22px;border-radius:9px;
  background:var(--kmsia-brand,#0b3d76);color:#fff;font-size:15px;font-weight:700;}
.vg-checkcta .btn:hover{opacity:.92;color:#fff;}

@media(max-width:767px){
  .vc-dim{padding:0;align-items:stretch;}
  .vc-panel{max-width:none;max-height:100vh;border-radius:0;}
  .vc-body{padding:16px;}
}
.vc-otxt{display:flex;flex-direction:column;gap:3px;}
.vc-olab{font-size:14.5px;line-height:1.55;color:var(--ink,#1b2430);word-break:keep-all;}
.vc-odc{font-size:12.5px;line-height:1.6;color:var(--ink-sub,#7d8794);word-break:keep-all;}

/* 전환경로 줄의 자가진단 단추 — 진단이 준비된 자격에만 붙는다(회원에게만) */
.vg-chk{flex:0 0 auto;padding:3px 10px;border:1px solid #cfe0f2;border-radius:999px;
  background:var(--krds-color-light-primary-5,#eef4fb);
  color:var(--kmsia-brand,#0b3d76);font-size:12px;font-weight:700;
  line-height:1.6;cursor:pointer;white-space:nowrap;}
.vg-chk:hover{background:var(--kmsia-brand,#0b3d76);border-color:var(--kmsia-brand,#0b3d76);color:#fff;}
.vg-chk::before{content:"✓ ";}

/* ★ 고른 항목을 눈에 보이게. 라디오 점 하나만 바뀌면 눌린 티가 나지 않는다 */
.vc-opt.on{border-color:var(--kmsia-brand,#0b3d76);background:#eef4fb;
  box-shadow:inset 0 0 0 1px var(--kmsia-brand,#0b3d76);}
.vc-opt.on .vc-olab{font-weight:700;color:var(--kmsia-brand,#0b3d76);}
/* 답을 빠뜨린 문항 — 테두리만 바꾸지 않고 글로 알린다 */
.vc-need{margin:8px 0 0;padding:8px 12px;border-radius:8px;background:#fdecec;
  font-size:13px;color:#c0392b;}
.vc-warn{margin:0 0 10px;font-size:13.5px;font-weight:700;color:#c0392b;}

/* 점수제(SCORE) 자격에서만 나오는 점수·막대 */
.vc-score b{font-size:26px;}
.vc-detail{margin:6px 0 0;font-size:13px;color:var(--ink-sub,#6b7482);}
.vc-bar{position:relative;height:10px;margin-top:12px;border-radius:999px;background:#e6ebf1;}
.vc-bar-fill{display:block;height:100%;border-radius:999px;
  background:var(--kmsia-brand,#0b3d76);}
/* 합격선 눈금 — 숫자만으로는 얼마나 왔는지 감이 안 온다 */
.vc-bar-pass{position:absolute;top:-4px;width:2px;height:18px;background:#c0392b;}
.vc-bar-pass::after{content:"합격선";position:absolute;top:20px;left:-16px;
  font-style:normal;font-size:11px;color:#c0392b;white-space:nowrap;}
/* 서류 안내형에서는 준비 서류가 주인공이다 */
.vc-docs-main{border-color:var(--kmsia-brand,#0b3d76);background:#f6faff;}
.vc-docs-main .vc-gnm{font-size:15px;}