@charset "utf-8";
/* ==========================================================
 * KLPI 사이트 테마 (A안: 단정한 기관형)
 * - 옛 테마(assets: bootstrap/essentials/layout) 위에 덮어씀
 * - 본문 내용용 클래스(box-light, table, btn 등)는 그대로 살림
 * ========================================================== */
:root {
    --kl-navy: #22304a;
    --kl-navy-dark: #1a2233;
    --kl-ink: #1d2433;
    --kl-text: #3d4555;
    --kl-muted: #6b7385;
    --kl-line: #e6e9ef;
    --kl-line2: #eef0f4;
    --kl-bg: #f4f6f9;
    --kl-accent: #e8370d;
    --kl-radius: 14px;
}

body { color: var(--kl-text); font-size: 15px; line-height: 1.65; }
#wrapper { background: #fff; }
a { color: var(--kl-navy); }
a:hover, a:focus { color: var(--kl-accent); }
h1, h2, h3, h4, h5, h6 { color: var(--kl-ink); }
.kl-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ---------- 상단 바 ---------- */
.kl-top { background: var(--kl-navy); color: #c9d1de; font-size: 13px; }
.kl-top .kl-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.kl-top a { color: #c9d1de; }
.kl-top a:hover { color: #fff; }
.kl-top .kl-top-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.kl-top .kl-top-links .fa { margin-right: 4px; }
.kl-top .kl-welcome strong { color: #fff; }

/* ---------- 헤더 ---------- */
.kl-hd { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--kl-line); }
.kl-hd .kl-container { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; }
.kl-logo { display: flex; align-items: center; gap: 12px; color: var(--kl-ink); text-decoration: none !important; flex: none; }
.kl-logo:hover { color: var(--kl-ink); }
.kl-logo-mark { width: 46px; height: 46px; border-radius: 11px; background: var(--kl-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; letter-spacing: 0.02em; }
.kl-logo-txt { display: flex; flex-direction: column; line-height: 1.25; }
.kl-logo-txt strong { font-size: 20px; font-weight: 800; color: var(--kl-ink); letter-spacing: -0.02em; }
.kl-logo-txt em { font-style: normal; font-size: 11px; color: var(--kl-muted); letter-spacing: 0.06em; }

.kl-gnb > ul { display: flex; margin: 0; padding: 0; list-style: none; }
.kl-gnb > ul > li { position: relative; }
.kl-gnb > ul > li > a { display: block; padding: 30px 14px; font-size: 16px; font-weight: 700; color: var(--kl-ink); text-decoration: none; position: relative; }
.kl-gnb > ul > li > a:after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 20px; height: 2px; background: var(--kl-accent); transform: scaleX(0); transition: transform .2s ease; }
.kl-gnb > ul > li:hover > a, .kl-gnb > ul > li.on > a { color: var(--kl-accent); }
.kl-gnb > ul > li:hover > a:after, .kl-gnb > ul > li.on > a:after { transform: scaleX(1); }
.kl-gnb .kl-sub { position: absolute; left: 50%; top: 100%; min-width: 200px; margin: 0; padding: 10px 0; list-style: none; background: #fff; border: 1px solid var(--kl-line); border-top: 3px solid var(--kl-navy); border-radius: 0 0 10px 10px; box-shadow: 0 14px 30px rgba(29,36,51,.12); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: all .18s ease; }
.kl-gnb > ul > li:hover .kl-sub, .kl-gnb > ul > li:focus-within .kl-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.kl-gnb .kl-sub a { display: block; padding: 9px 20px; font-size: 14.5px; color: var(--kl-text); white-space: nowrap; text-decoration: none; }
.kl-gnb .kl-sub a:hover { color: var(--kl-accent); background: var(--kl-bg); }
.kl-menu-btn { display: none; width: 46px; height: 46px; border: 1px solid var(--kl-line); border-radius: 10px; background: #fff; color: var(--kl-ink); font-size: 20px; }

@media (max-width: 1199px) {
    .kl-gnb > ul > li > a { padding-left: 9px; padding-right: 9px; font-size: 15px; }
    .kl-gnb > ul > li > a:after { left: 9px; right: 9px; }
    .kl-logo-txt em { display: none; }
}
@media (max-width: 991px) {
    .kl-hd .kl-container { min-height: 68px; flex-wrap: wrap; }
    .kl-menu-btn { display: block; }
    .kl-gnb { display: none; width: 100%; padding-bottom: 14px; }
    .kl-hd.open .kl-gnb { display: block; }
    .kl-gnb > ul { flex-direction: column; border-top: 1px solid var(--kl-line); }
    .kl-gnb > ul > li { border-bottom: 1px solid var(--kl-line2); }
    .kl-gnb > ul > li > a { padding: 14px 4px; }
    .kl-gnb > ul > li > a:after { display: none; }
    .kl-gnb .kl-sub { position: static; opacity: 1; visibility: visible; transform: none; display: none; border: 0; box-shadow: none; padding: 0 0 10px; min-width: 0; background: transparent; }
    .kl-gnb > ul > li.open .kl-sub { display: block; }
    .kl-gnb .kl-sub a { padding: 7px 16px; }
    .kl-logo-mark { width: 40px; height: 40px; font-size: 13px; }
    .kl-logo-txt strong { font-size: 18px; }
}

/* ---------- 서브 페이지 머리 ---------- */
.kl-page-hd { background: var(--kl-bg); border-bottom: 1px solid var(--kl-line); }
.kl-page-hd .kl-container { padding-top: 46px; padding-bottom: 42px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kl-page-hd .kl-eng { display: block; font-size: 13px; font-weight: 700; color: var(--kl-accent); letter-spacing: 0.08em; margin-bottom: 8px; }
.kl-page-hd h1 { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.25; color: var(--kl-ink); letter-spacing: -0.02em; }
.kl-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--kl-muted); }
.kl-breadcrumb li + li:before { content: "\f105"; font-family: FontAwesome; margin-right: 6px; color: #b3b9c5; }
.kl-breadcrumb a { color: var(--kl-muted); }
.kl-breadcrumb .active { color: var(--kl-ink); font-weight: 600; }

/* 서브 본문 영역 (옛 section 기본 여백·선 제거) */
section.kl-sub-body { padding: 56px 0 90px; border-bottom: 0; }
.kl-sub-row { display: flex; flex-wrap: wrap; gap: 40px; }
.kl-side { flex: 0 0 250px; min-width: 0; }
.kl-content { flex: 1 1 600px; min-width: 0; }
@media (max-width: 991px) {
    .kl-side { flex: 1 1 100%; order: 2; }
    .kl-content { order: 1; }
    .kl-page-hd h1 { font-size: 28px; }
}

/* 사이드 메뉴 */
.kl-side-box { border: 1px solid var(--kl-line); border-radius: var(--kl-radius); overflow: hidden; background: #fff; }
.kl-side-tit { background: var(--kl-navy); color: #fff; padding: 22px 22px 20px; }
.kl-side-tit h3 { margin: 0; color: #fff; font-size: 20px; font-weight: 800; }
.kl-side-tit p { margin: 4px 0 0; font-size: 12px; color: #c9d1de; letter-spacing: 0.06em; }
.kl-side-nav { margin: 0; padding: 8px 0; list-style: none; }
.kl-side-nav li a { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; font-size: 15px; color: var(--kl-text); text-decoration: none; border-left: 3px solid transparent; }
.kl-side-nav li a .fa { color: #b3b9c5; font-size: 14px; }
.kl-side-nav li a:hover { color: var(--kl-accent); background: var(--kl-bg); }
.kl-side-nav li a:hover .fa { color: var(--kl-accent); }
.kl-side-nav li.on a { color: var(--kl-navy); font-weight: 700; background: var(--kl-bg); border-left-color: var(--kl-accent); }
.kl-side-nav li.on a .fa { color: var(--kl-accent); }

.kl-side-info { margin-top: 18px; border-radius: var(--kl-radius); padding: 20px 22px; font-size: 13.5px; line-height: 1.7; }
.kl-side-info h4 { margin: 0 0 8px; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.kl-side-info p { margin: 0; }
.kl-side-bank { background: var(--kl-bg); border: 1px solid var(--kl-line); color: var(--kl-text); }
.kl-side-bank h4 { color: var(--kl-navy); }
.kl-side-bank h4 .fa { color: var(--kl-accent); }
.kl-side-kakao { display: block; background: #f5cd00; color: #191919 !important; text-decoration: none !important; }
.kl-side-kakao h4 { color: #191919; }
.kl-side-kakao:hover { background: #ecc400; }

/* 본문 제목 */
.kl-content-tit { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--kl-ink); padding-bottom: 14px; margin-bottom: 30px; }
.kl-content-tit h2 { margin: 0; font-size: 24px; font-weight: 800; color: var(--kl-ink); }

/* 본문 안 옛 테마 요소 다듬기 */
.kl-content section { padding: 0; border-bottom: 0; }
.kl-content .box-light { background: var(--kl-bg); border-radius: 12px; }
.kl-content .heading-title h3, .kl-content h3, .kl-content h4, .kl-content h5 { color: var(--kl-ink); }
.kl-content .table > thead > tr > th, .kl-content .table th.active2, .kl-content tr.active2 > th { color: var(--kl-ink); }
.kl-content .list-icons > li > i.fa-check { color: var(--kl-accent); }
.btn-primary, .btn-primary:focus { background-color: var(--kl-navy) !important; border-color: var(--kl-navy) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:active { background-color: var(--kl-accent) !important; border-color: var(--kl-accent) !important; color: #fff !important; }

/* ---------- 메인 ---------- */
section.kl-main-slider { padding: 0; border-bottom: 0; }
.kl-main-slider img { width: 100%; height: auto; display: block; }
/* 넓은 화면: 배너를 원본 크기(1920x600) 그대로 가운데 정렬 → 축소로 글자가 뿌옇게 되는 것 방지
   (양옆만 조금 잘림, 배너 글자·로고는 잘리지 않는 폭부터 적용) */
@media (min-width: 1800px) {
    .kl-main-slider .owl-item > div { overflow: hidden; }
    .kl-main-slider img { width: 1920px; max-width: none; height: 600px; margin-left: calc(50% - 960px); margin-left: round(down, calc(50% - 960px), 1px); }
}

/* 다음 검정 띠 */
.kl-exam-bar { background: var(--kl-navy); color: #fff; }
.kl-exam-bar .kl-container { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 18px; padding-bottom: 18px; }
.kl-exam-bar .kl-eb-tit { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; color: #fff; }
.kl-exam-bar .kl-eb-tit .fa { color: var(--kl-accent); }
.kl-exam-bar ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; flex: 1; }
.kl-exam-bar li { font-size: 14.5px; color: #dfe4ec; }
.kl-exam-bar li b { color: #fff; margin-right: 6px; }
.kl-exam-bar .kl-eb-more { color: #fff; font-size: 14px; font-weight: 700; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 7px 16px; text-decoration: none; }
.kl-exam-bar .kl-eb-more:hover { background: var(--kl-accent); border-color: var(--kl-accent); color: #fff; }

@media (max-width: 575px) {
    .kl-exam-bar .kl-container { gap: 10px 10px; }
    .kl-exam-bar .kl-eb-tit { width: 100%; }
    .kl-exam-bar ul { flex: 1 1 100%; flex-direction: column; gap: 4px; }
    .kl-exam-bar li { white-space: nowrap; }
}

/* 카드 4개 */
.kl-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 56px 0 24px; }
@media (max-width: 991px) { .kl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .kl-cards { grid-template-columns: minmax(0, 1fr); } }
.kl-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--kl-line); border-top: 4px solid var(--kl-navy); border-radius: var(--kl-radius); box-shadow: 0 8px 24px rgba(29,36,51,.06); padding: 30px 26px 26px; color: var(--kl-ink); text-decoration: none !important; transition: all .25s ease; }
.kl-card:hover { border-top-color: var(--kl-accent); transform: translateY(-5px); box-shadow: 0 16px 32px rgba(29,36,51,.12); color: var(--kl-ink); }
.kl-card .kl-card-ico { width: 56px; height: 56px; border-radius: 14px; background: var(--kl-bg); color: var(--kl-navy); font-size: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; transition: all .25s ease; }
.kl-card:hover .kl-card-ico { background: var(--kl-accent); color: #fff; }
.kl-card strong { font-size: 19px; font-weight: 800; }
.kl-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--kl-muted); }
.kl-card .kl-card-more { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--kl-navy); }
.kl-card:hover .kl-card-more { color: var(--kl-accent); }

/* 공지 + 합격자 + 영상 */
.kl-mid { display: flex; flex-wrap: wrap; gap: 28px; padding: 40px 0 70px; }
.kl-mid-notice { flex: 999 1 520px; min-width: 0; }
.kl-mid-side { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.kl-sec-hd { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--kl-ink); padding-bottom: 14px; }
.kl-sec-hd h2 { margin: 0; font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.kl-sec-hd h2 .fa { color: var(--kl-accent); font-size: 20px; }
.kl-sec-hd h2 small { font-size: 14px; font-weight: 500; color: var(--kl-muted); margin-left: 4px; }
.kl-sec-hd .kl-more { font-size: 14px; color: var(--kl-muted); }
.kl-sec-hd .kl-more:hover { color: var(--kl-accent); text-decoration: none; }
.kl-notice { margin: 0; padding: 0; list-style: none; }
.kl-notice li { border-bottom: 1px solid var(--kl-line2); }
.kl-notice a { display: flex; align-items: center; gap: 12px; padding: 16px 4px; color: var(--kl-ink); text-decoration: none; transition: all .2s ease; }
.kl-notice a:hover { color: var(--kl-accent); padding-left: 10px; background: #fafbfc; }
.kl-notice .nt-tag { flex: none; font-size: 12px; font-weight: 700; color: var(--kl-navy); border: 1px solid #c9d1de; border-radius: 4px; padding: 2px 8px; }
.kl-notice .nt-tag.exam { color: var(--kl-accent); border-color: #f3b9a6; }
.kl-notice a:hover .nt-tag { color: #fff; background: var(--kl-accent); border-color: var(--kl-accent); }
.kl-notice .nt-tit { flex: 1; min-width: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-notice .nt-new { flex: none; font-size: 11px; font-weight: 800; color: #fff; background: var(--kl-accent); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.kl-notice .nt-date { flex: none; font-size: 13.5px; color: #8a92a3; }
.kl-notice .nt-empty { display: block; padding: 40px 0; text-align: center; color: #8a92a3; }
@media (max-width: 575px) { .kl-notice .nt-date { display: none; } }

.kl-pass { background: var(--kl-navy); color: #fff; border-radius: 16px; padding: 30px 30px 28px; display: flex; flex-direction: column; gap: 12px; }
.kl-pass h2 { margin: 0; color: #fff; font-size: 23px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.kl-pass h2 .fa { color: var(--kl-accent); }
.kl-pass .kl-pass-cnt { font-size: 15px; color: #c9d1de; }
.kl-pass .kl-pass-cnt b { font-size: 30px; font-weight: 900; color: #fff; margin: 0 4px; }
.kl-pass p { margin: 0; font-size: 14.5px; line-height: 1.7; color: #c9d1de; }
.kl-pass .kl-pass-btn { align-self: flex-start; margin-top: 6px; background: var(--kl-accent); color: #fff; font-size: 15px; font-weight: 700; padding: 13px 24px; border-radius: 8px; text-decoration: none; }
.kl-pass .kl-pass-btn:hover { background: #fff; color: var(--kl-accent); }
.kl-video-box .kl-sec-hd { border-bottom-width: 0; padding-bottom: 10px; }
.kl-video-box .kl-sec-hd h2 { font-size: 19px; }
.kl-video-box .kl-sec-hd h2 .fa { color: #ff0000; }
.kl-video { position: relative; height: 0; padding-bottom: 56.25%; border-radius: 12px; overflow: hidden; background: #000; }
.kl-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* 블로그 */
section.kl-blog { background: var(--kl-bg); padding: 70px 0 60px; border-bottom: 0; }
.kl-blog .kl-sec-hd { margin-bottom: 28px; }
.kl-blog .kl-sec-hd h2 .fa { color: #03c75a; }
.kl-posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 991px) { .kl-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .kl-posts { grid-template-columns: minmax(0, 1fr); } }
.kl-post { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; color: var(--kl-ink); text-decoration: none !important; transition: all .25s ease; box-shadow: 0 2px 8px rgba(29,36,51,.04); }
.kl-post:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(29,36,51,.12); color: var(--kl-ink); }
.kl-post .kp-thumb { position: relative; padding-top: 62%; background: #dde2ea; overflow: hidden; }
.kl-post .kp-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .4s ease; }
.kl-post:hover .kp-thumb img { transform: scale(1.05); }
.kl-post .kp-noimg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40px; color: #b3b9c5; }
.kl-post .kp-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.kl-post .kp-date { font-size: 12.5px; color: #8a92a3; }
.kl-post .kp-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45; height: 2.9em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kl-post:hover .kp-title { color: var(--kl-accent); }
.kl-post .kp-text { margin: 0; font-size: 13.5px; color: var(--kl-muted); line-height: 1.55; height: 3.1em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kl-blog-empty { padding: 40px 0; text-align: center; color: #8a92a3; }

/* ---------- 푸터 ---------- */
.kl-ft { background: var(--kl-navy-dark); color: #a8b0bf; font-size: 14px; line-height: 1.85; }
.kl-ft .kl-container { padding-top: 50px; padding-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
.kl-ft-info strong.kl-ft-name { display: block; color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.kl-ft-info ul { margin: 0; padding: 0; list-style: none; }
.kl-ft-info li .fa { width: 18px; color: #6f7a8f; }
.kl-ft-sns { display: flex; gap: 12px; align-items: flex-start; }
.kl-ft-sns a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #fff; text-decoration: none; font-size: 14px; }
.kl-ft-sns a:hover { border-color: var(--kl-accent); color: #fff; background: rgba(232,55,13,.12); }
.kl-ft-sns .fa { font-size: 22px; }
.kl-ft-sns .kl-naver { width: 22px; height: 22px; border-radius: 5px; background: #03c75a; color: #fff; font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.kl-ft-copy { border-top: 1px solid rgba(255,255,255,.08); }
.kl-ft-copy .kl-container { padding-top: 18px; padding-bottom: 22px; font-size: 13px; gap: 10px; }
.kl-ft-copy a { color: #fff; }
.kl-ft-copy a:hover { color: var(--kl-accent); }
.kl-ft-copy .kl-ft-links { display: flex; gap: 16px; }

/* 맨 위로 */
#toTop { background-color: var(--kl-navy); border-radius: 10px; }
#toTop:hover { background-color: var(--kl-accent); }

/* ---------- 휴대폰 ---------- */
@media (max-width: 575px) {
    .kl-container { padding-left: 16px; padding-right: 16px; }
    .kl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 32px; }
    .kl-card { padding: 20px 16px; }
    .kl-card .kl-card-ico { width: 46px; height: 46px; font-size: 20px; }
    .kl-card strong { font-size: 16px; }
    .kl-card p { display: none; }
    .kl-sec-hd h2 { font-size: 20px; }
    .kl-sec-hd h2 small { display: none; }
    .kl-mid { padding-bottom: 50px; }
    section.kl-blog { padding: 50px 0 40px; }
    .kl-page-hd .kl-container { padding-top: 30px; padding-bottom: 26px; }
    section.kl-sub-body { padding: 32px 0 60px; }
    .kl-ft-sns { flex-wrap: wrap; }
}

/* ---------- 회원 화면 (로그인·회원가입·정보수정·비밀번호 찾기) ---------- */
.kl-content .frm_input { height: 46px; border: 1px solid #d6dbe3; border-radius: 8px; padding: 0 14px; font-size: 15px; color: var(--kl-ink); background: #fff; box-shadow: none; }
.kl-content .frm_input:focus { border-color: var(--kl-navy); outline: none; box-shadow: 0 0 0 3px rgba(34,48,74,.12); }
.kl-content .btn_submit, .kl-content a.btn_submit { display: inline-block; min-height: 46px; padding: 0 26px; border: 0; border-radius: 8px; background: var(--kl-navy); color: #fff; font-size: 15px; font-weight: 700; line-height: 46px; text-align: center; cursor: pointer; transition: background .2s ease; }
.kl-content .btn_submit:hover, .kl-content a.btn_submit:hover { background: var(--kl-accent); color: #fff; text-decoration: none; }
.kl-content .btn_close, .kl-content .btn_cancel, .kl-content a.btn_close, .kl-content a.btn_cancel { display: inline-block; min-height: 46px; padding: 0 26px; border: 1px solid #c9d1de; border-radius: 8px; background: #fff; color: var(--kl-navy); font-size: 15px; font-weight: 700; line-height: 44px; text-align: center; }
.kl-content .btn_close:hover, .kl-content .btn_cancel:hover { border-color: var(--kl-accent); color: var(--kl-accent); text-decoration: none; }

.kl-content .mbskin { width: auto; max-width: 440px; margin: 10px auto 20px; text-align: left; }
.kl-content .mbskin .mbskin_box, .kl-content #mb_confirm { border: 1px solid var(--kl-line); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 10px 28px rgba(29,36,51,.07); }
.kl-content .mb_log_cate { display: flex; }
.kl-content .mb_log_cate h2, .kl-content .mb_log_cate .join { float: none; flex: 1; width: auto; margin: 0; padding: 18px 0; font-size: 17px; font-weight: 800; text-align: center; }
.kl-content .mb_log_cate h2 { color: var(--kl-navy); border-bottom: 3px solid var(--kl-navy); }
.kl-content .mb_log_cate .join { background: var(--kl-bg); color: var(--kl-muted); border-bottom: 1px solid var(--kl-line); }
.kl-content .mb_log_cate .join:hover { color: var(--kl-accent); text-decoration: none; }
.kl-content #login_fs { padding: 30px 30px 26px; margin: 0; border: 0; }
.kl-content #login_fs legend { display: none; }
.kl-content #mb_login #login_fs .frm_input { width: 100%; margin: 0 0 10px; }
.kl-content #mb_login #login_fs .btn_submit { width: 100%; height: 52px; line-height: 52px; margin: 6px 0 16px; font-size: 16px; }
.kl-content #login_info { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.kl-content #login_info .login_if_auto, .kl-content #login_info .login_if_lpl { float: none; }
.kl-content #login_info a { color: var(--kl-muted); }
.kl-content #login_info a:hover { color: var(--kl-accent); }

.kl-content #mb_confirm h1 { display: none; }
.kl-content #mb_confirm p { margin: 0; padding: 26px 30px; border-bottom: 1px solid var(--kl-line2); font-size: 14.5px; line-height: 1.7; color: var(--kl-muted); }
.kl-content #mb_confirm p strong { display: block; margin-bottom: 4px; color: var(--kl-navy); font-size: 17px; }
.kl-content #mb_confirm fieldset { padding: 26px 30px 30px; margin: 0; border: 0; }
.kl-content #mb_confirm .frm_input { width: 100%; margin-bottom: 10px; }
.kl-content #mb_confirm .btn_submit { width: 100%; }

/* 체크박스·라디오 (파랑 → 사이트 색) */
.chk_box input[type="checkbox"]:checked + label span { background-color: var(--kl-navy); border-color: var(--kl-navy); }
.chk_box input[type="checkbox"] + label:hover { color: var(--kl-accent); }
.chk_box input[type="radio"]:checked + label { color: var(--kl-navy); }
.chk_box input[type="radio"]:checked + label span { border-color: var(--kl-navy); }
.chk_box input[type="radio"]:checked + label span:before { background: var(--kl-navy); }

/* 로그인 아래 줄 정렬 */
.kl-content #login_info .login_if_lpl { margin-left: auto; }
.kl-content .chk_box input[type="checkbox"] + label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.kl-content .chk_box input[type="checkbox"] + label span { float: none; }

/* 아이디/비밀번호 찾기 */
.kl-content #find_info { max-width: 520px; margin: 10px auto 20px; }
.kl-content #find_info .new_win_con { background: #fff; border: 1px solid var(--kl-line); border-radius: 16px; padding: 30px; box-shadow: 0 10px 28px rgba(29,36,51,.07); }
.kl-content #find_info.cert .new_win_con { width: auto; float: none; margin: 0 0 16px; }
.kl-content #find_info #info_fs { margin: 0; padding: 0; border: 0; }
.kl-content #find_info p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.7; color: var(--kl-muted); }
.kl-content #find_info #mb_email { width: 100%; margin: 0 0 16px; }
.kl-content #find_info .win_btn { margin-top: 18px; }
.kl-content #find_info .win_btn .btn_submit { width: 100%; height: 52px; line-height: 52px; }

/* 자동등록방지 (그누보드 기본 css 를 안 쓰므로 여기서) */
#captcha { display: inline-block; position: relative; }
#captcha legend { position: absolute; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; }
#captcha #captcha_img { height: 44px; border: 1px solid #d6dbe3; border-radius: 6px; vertical-align: top; padding: 0; margin: 0; }
#captcha #captcha_mp3, #captcha #captcha_reload { margin: 0; padding: 0; width: 40px; height: 40px; border: 0; vertical-align: middle; overflow: hidden; cursor: pointer; background: url('../img/captcha2.png') no-repeat; text-indent: -999px; border-radius: 6px; }
#captcha #captcha_reload { background-position: 0 -40px; }
#captcha #captcha_key { margin: 0 0 0 4px; padding: 0 8px; width: 110px; height: 44px; border: 1px solid #d6dbe3; background: #fff; font-size: 18px; font-weight: 700; text-align: center; border-radius: 6px; vertical-align: top; }
#captcha #captcha_info { display: block; margin: 6px 0 0; font-size: 13px; color: var(--kl-muted); }

/* 푸터: 관리 업체 표시 */
.kl-ft-copy .kl-ft-links { align-items: center; flex-wrap: wrap; }
.kl-ft-copy .kl-managed { color: #8a93a6; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.15); font-size: 12px; letter-spacing: .02em; }
.kl-ft-copy .kl-managed a { color: #c9d1de; font-weight: 700; }
.kl-ft-copy .kl-managed a:hover { color: var(--kl-accent); }

/* ---------- 본문 공통: 둥근 슬라이드 / 구분 제목 / 안내 상자 ---------- */
.kl-round-slider { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(29,36,51,.10); }
.kl-round-slider .owl-carousel, .kl-round-slider img { border-radius: 16px; }
.kl-content .kl-sec-tit { display: flex; align-items: center; gap: 12px; margin: 44px 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--kl-ink); }
.kl-content .kl-sec-tit:first-child { margin-top: 0; }
.kl-content .kl-sec-tit .kl-sec-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--kl-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.kl-content .kl-sec-tit h3 { margin: 0; font-size: 21px; font-weight: 800; color: var(--kl-ink); letter-spacing: -0.02em; }
.kl-content .kl-sec-tit h3 small { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--kl-accent); letter-spacing: .08em; }
.kl-content .kl-lead { font-size: 16px; line-height: 1.85; color: var(--kl-text); }
.kl-content .kl-lead-tit { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 26px; font-weight: 800; color: var(--kl-ink); }
.kl-content .kl-lead-tit .fa { color: var(--kl-accent); }
.kl-content .kl-info-table td.active { background: var(--kl-bg) !important; color: var(--kl-navy); font-weight: 700; white-space: nowrap; }
.kl-content .kl-info-table td.active .fa { margin-right: 4px; color: var(--kl-accent); }
.kl-content .kl-notice-box { display: flex; gap: 14px; margin: 18px 0 26px; padding: 18px 20px; border-radius: 12px; background: #fff8f5; border: 1px solid #f6d3c6; font-size: 14.5px; line-height: 1.75; color: var(--kl-text); }
.kl-content .kl-notice-box > .fa { flex: none; font-size: 20px; color: var(--kl-accent); margin-top: 3px; }
.kl-content .kl-notice-box p { margin: 0; }
.kl-content .kl-link-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 24px; border-radius: 14px; background: var(--kl-navy); color: #fff; }
.kl-content .kl-link-box h4 { margin: 0 0 4px; color: #fff; font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.kl-content .kl-link-box p { margin: 0; color: #c9d1de; font-size: 14px; }
.kl-content .kl-link-box a.kl-link-btn { background: var(--kl-accent); color: #fff; padding: 12px 22px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.kl-content .kl-link-box a.kl-link-btn:hover { background: #fff; color: var(--kl-accent); }
.kl-content .kl-info-table > thead > tr > th { background: var(--kl-bg) !important; color: var(--kl-navy); font-weight: 700; text-align: center; vertical-align: middle; border-bottom-width: 1px; }
.kl-content .kl-info-table td { vertical-align: middle; }
.kl-content .kl-info-table p { margin: 0; }
/* 번호 단계 목록 (검정 방법 등) */
.kl-content .kl-step-list { list-style: none; counter-reset: klstep; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kl-content .kl-step-list > li { counter-increment: klstep; position: relative; padding: 18px 20px 18px 66px; border: 1px solid var(--kl-line); border-radius: 12px; background: #fff; }
.kl-content .kl-step-list > li:before { content: counter(klstep); position: absolute; left: 20px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--kl-navy); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.kl-content .kl-step-list strong { display: block; font-size: 15.5px; color: var(--kl-ink); line-height: 1.6; padding-top: 4px; }
.kl-content .kl-step-list p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.8; color: var(--kl-muted); }
.kl-content .kl-sec-tit { scroll-margin-top: 100px; }
/* 표: 합계 줄 / 등급 구분선 */
.kl-content .kl-info-table tr.kl-sum td { background: #fafbfc; font-weight: 700; color: var(--kl-ink); }
.kl-content .kl-info-table tr.line_divide td { border-top: 2px solid #c9d1de; }
.kl-content .kl-lead p { margin: 0 0 8px; }

/* ---------- 교육비용/등록 ---------- */
.kl-content .kl-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; padding: 0; list-style: none; }
.kl-content .kl-badges li { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; background: var(--kl-bg); border: 1px solid var(--kl-line); font-size: 14px; font-weight: 600; color: var(--kl-navy); }
.kl-content .kl-badges li .fa { color: var(--kl-accent); }
.kl-content .kl-note { margin: -16px 0 10px; font-size: 13.5px; color: var(--kl-muted); }

.kl-content .kl-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 10px; }
@media (max-width: 991px) { .kl-content .kl-price-grid { grid-template-columns: minmax(0, 1fr); } }
.kl-content .kl-price-card { display: flex; flex-direction: column; border: 1px solid var(--kl-line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 10px 28px rgba(29,36,51,.07); transition: transform .25s ease, box-shadow .25s ease; }
.kl-content .kl-price-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(29,36,51,.13); }
.kl-content .kl-price-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: var(--kl-navy); color: #fff; }
.kl-content .kl-price-grade { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.kl-content .kl-price-level { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: #dfe4ec; }
.kl-content .kl-price-body { flex: 1; padding: 22px 22px 6px; }
.kl-content .kl-price-name { font-size: 15px; font-weight: 700; color: var(--kl-muted); }
.kl-content .kl-price-amount { margin: 6px 0 2px; color: var(--kl-ink); font-size: 17px; font-weight: 700; }
.kl-content .kl-price-amount b { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; color: var(--kl-navy); margin-right: 2px; }
.kl-content .kl-price-sub { font-size: 13.5px; color: var(--kl-muted); padding-bottom: 14px; border-bottom: 1px dashed var(--kl-line); }
.kl-content .kl-price-list { margin: 14px 0 0; padding: 0; list-style: none; }
.kl-content .kl-price-list li { padding: 5px 0; font-size: 14.5px; color: var(--kl-text); }
.kl-content .kl-price-list li .fa { color: var(--kl-accent); margin-right: 6px; }
.kl-content .kl-price-total { margin: 16px 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--kl-bg); font-size: 13px; color: var(--kl-muted); display: flex; flex-direction: column; gap: 2px; }
.kl-content .kl-price-total strong { font-size: 14.5px; color: var(--kl-navy); }
.kl-content .kl-price-btn { display: block; margin: 0 22px 22px; padding: 14px 0; border-radius: 10px; background: var(--kl-navy); color: #fff !important; text-align: center; font-size: 15.5px; font-weight: 700; text-decoration: none !important; transition: background .2s ease; }
.kl-content .kl-price-btn:hover { background: var(--kl-accent); }

.kl-content .kl-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 10px; padding: 0; list-style: none; counter-reset: klflow; }
@media (max-width: 991px) { .kl-content .kl-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kl-content .kl-flow li { counter-increment: klflow; position: relative; padding: 22px 18px 18px; border: 1px solid var(--kl-line); border-radius: 14px; background: #fff; text-align: center; }
.kl-content .kl-flow li:before { content: "STEP " counter(klflow); position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--kl-accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.kl-content .kl-flow li > .fa { display: block; font-size: 26px; color: var(--kl-navy); margin-bottom: 10px; }
.kl-content .kl-flow strong { display: block; font-size: 15.5px; color: var(--kl-ink); margin-bottom: 4px; }
.kl-content .kl-flow span { font-size: 13.5px; color: var(--kl-muted); line-height: 1.6; }

.kl-content .kl-pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 10px; }
@media (max-width: 767px) { .kl-content .kl-pay-grid { grid-template-columns: minmax(0, 1fr); } }
.kl-content .kl-pay-item { padding: 22px 20px; border-radius: 14px; background: var(--kl-bg); border: 1px solid var(--kl-line); display: flex; flex-direction: column; gap: 4px; }
.kl-content .kl-pay-item > .fa { font-size: 26px; color: var(--kl-navy); margin-bottom: 6px; }
.kl-content .kl-pay-item strong { font-size: 16px; color: var(--kl-ink); }
.kl-content .kl-pay-item span { font-size: 13.5px; color: var(--kl-muted); }
.kl-content .kl-pay-item em { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #c9d1de; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--kl-navy); line-height: 1.6; }

/* ---------- 쇼핑몰 화면 (주문서·개인결제·주문조회) ---------- */
body.kl-shop { font-size: 15px; font-family: 'Pretendard Variable', Pretendard, sans-serif; background: #fff; }
body.kl-shop #wrapper { min-width: 0; width: auto; background: #fff; z-index: auto; position: static; }
body.kl-shop .kl-top ul, body.kl-shop .kl-gnb ul { list-style: none; }
body.kl-shop .kl-gnb .kl-sub { padding: 10px 0; }
body.kl-shop .kl-page-hd h1 { font-size: 34px; }
body.kl-shop .kl-content-tit h2 { font-size: 24px; }
body.kl-shop .kl-ft h1, body.kl-shop .kl-ft h2 { font-size: inherit; }
body.kl-shop .kl-top a, body.kl-shop .kl-gnb a { text-decoration: none; }
body.kl-shop .kl-gnb > ul > li > a { color: var(--kl-ink); }
body.kl-shop .kl-gnb > ul > li.on > a, body.kl-shop .kl-gnb > ul > li:hover > a { color: var(--kl-accent); }
.kl-content.kl-full { flex: 1 1 100%; }
body.kl-shop #container.kl-shop-container { width: auto; min-height: 0; margin: 0; }
body.kl-shop #container .shop-content { padding: 0; }
body.kl-shop #wrapper_title, body.kl-shop #text_size { display: none; }
/* 쇼핑몰 버튼·입력칸을 사이트 색으로 */
body.kl-shop #container .btn_submit, body.kl-shop #container button.btn_submit, body.kl-shop #container input.btn_submit { background: var(--kl-navy); color: #fff; border: 0; border-radius: 8px; }
body.kl-shop #container .btn_submit:hover { background: var(--kl-accent); }
body.kl-shop #container input[type=text], body.kl-shop #container input[type=password], body.kl-shop #container textarea { border-radius: 6px; }
/* 주문서 2단 배치를 사이트 폭에 맞춤 */
body.kl-shop .sod_left { width: calc(100% - 370px); margin-right: 30px; }
body.kl-shop .sod_right { width: 340px; }
@media (max-width: 991px) { body.kl-shop .sod_left, body.kl-shop .sod_right { float: none; display: block; width: 100%; margin-right: 0; } }
/* 주문 상품 표 */
body.kl-shop #sod_list { border-top: 2px solid var(--kl-ink); }
body.kl-shop #sod_list thead th { background: var(--kl-bg); color: var(--kl-navy); font-weight: 700; font-size: 14.5px; }
body.kl-shop #sod_list td { font-size: 14.5px; vertical-align: middle; }
/* 주문자·결제 상자 */
body.kl-shop #sod_frm section, body.kl-shop #sod_frm_orderer { border-radius: 14px; overflow: hidden; }
body.kl-shop #sod_frm section h2 { font-size: 17px; font-weight: 800; color: var(--kl-ink); background: var(--kl-bg); }
body.kl-shop #sod_frm .tbl_frm01 th { color: var(--kl-navy); font-weight: 700; }
body.kl-shop .sod_right #sod_bsk_tot { border: 1px solid var(--kl-line); border-radius: 14px; overflow: hidden; }
body.kl-shop #sod_frm #sod_bsk_tot .sod_bsk_cnt strong, body.kl-shop #od_tot_price strong { color: var(--kl-accent); }
body.kl-shop .sod_right #od_tot_price { border: 0; border-radius: 12px; background: var(--kl-navy); color: #fff; padding: 8px 18px; line-height: 44px; }
body.kl-shop .sod_right #od_tot_price span { color: #c9d1de; font-weight: 700; }
body.kl-shop .sod_right #od_tot_price strong { color: #fff; font-size: 26px; font-weight: 900; }
body.kl-shop #forderform .od_pay_buttons_el { border-radius: 14px; padding: 18px; }
body.kl-shop #od_pay_sl h3 { font-size: 16px; font-weight: 800; color: var(--kl-ink); margin-top: 0; }
body.kl-shop #od_pay_sl .lb_icon { border-color: var(--kl-line); font-weight: 700; color: var(--kl-ink); }
body.kl-shop #od_pay_sl input[type="radio"]:checked + .lb_icon { border: 2px solid var(--kl-accent); color: var(--kl-accent); background: #fff8f5; }
body.kl-shop #sod_frm #sod_frm_pt_alert { color: var(--kl-muted); font-size: 13px; }
body.kl-shop #display_pay_button .btn_submit, body.kl-shop #forderform .btn_submit { height: 54px; font-size: 17px; font-weight: 800; border-radius: 10px; }
body.kl-shop #forderform .btn01, body.kl-shop #forderform a.btn01 { border-radius: 10px; }
/* 결제 영역 숨김 제목(h2)은 화면에 안 보이게 — 위의 section h2 꾸밈이 덮어쓰지 않도록 */
body.kl-shop #sod_frm #sod_frm_pay h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; background: none; overflow: hidden; clip: rect(0 0 0 0); font-size: 0; line-height: 0; }
/* 안내 카드 (검정 장소·준비물 등) */
.kl-content .kl-info-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 10px; }
@media (max-width: 767px) { .kl-content .kl-info-cards { grid-template-columns: minmax(0, 1fr); } }
.kl-content .kl-info-card { display: flex; gap: 16px; align-items: flex-start; padding: 22px 22px; border: 1px solid var(--kl-line); border-radius: 14px; background: #fff; }
.kl-content .kl-info-card > .fa { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--kl-bg); color: var(--kl-navy); font-size: 22px; display: flex; align-items: center; justify-content: center; }
.kl-content .kl-info-card strong { display: block; font-size: 16px; color: var(--kl-ink); margin-bottom: 4px; }
.kl-content .kl-info-card p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--kl-text); }
.kl-content .kl-info-card .kl-tel { color: var(--kl-navy); font-weight: 700; }
.kl-content .kl-info-card .kl-tel .fa { color: var(--kl-accent); }
/* 사진 등록 */
.kl-content .kl-photo-wrap { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; padding: 28px; border: 1px solid var(--kl-line); border-radius: 16px; background: #fff; }
.kl-content .kl-photo-frame { position: relative; flex: none; width: 200px; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--kl-bg); border: 1px solid var(--kl-line); }
.kl-content .kl-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kl-content .kl-photo-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #8a92a3; font-size: 13.5px; text-align: center; line-height: 1.5; }
.kl-content .kl-photo-empty .fa { font-size: 54px; color: #c9d1de; }
.kl-content .kl-photo-state { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(29,36,51,.8); color: #fff; font-size: 12px; font-weight: 700; }
.kl-content .kl-photo-state.is-new { background: var(--kl-accent); }
.kl-content .kl-photo-side { flex: 1 1 320px; min-width: 0; }
.kl-content .kl-file-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 20px; border: 2px dashed #c9d1de; border-radius: 14px; background: var(--kl-bg); text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; margin: 0; font-weight: 400; }
.kl-content .kl-file-drop:hover { border-color: var(--kl-accent); background: #fff8f5; }
.kl-content .kl-file-drop .fa { font-size: 34px; color: var(--kl-navy); }
.kl-content .kl-file-drop strong { font-size: 16px; color: var(--kl-ink); }
.kl-content .kl-file-drop span { font-size: 13.5px; color: var(--kl-muted); word-break: break-all; }
.kl-content .kl-file-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.kl-content .kl-check { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; font-weight: 600; color: var(--kl-text); cursor: pointer; }
.kl-content .kl-check input { margin: 0; width: 16px; height: 16px; accent-color: var(--kl-accent); }
.kl-content .kl-btn-submit { display: block; width: 100%; margin-top: 18px; height: 52px; border: 0; border-radius: 10px; background: var(--kl-navy); color: #fff; font-size: 16px; font-weight: 800; transition: background .2s ease; }
.kl-content .kl-btn-submit:hover { background: var(--kl-accent); }
@media (max-width: 575px) { .kl-content .kl-photo-frame { width: 100%; max-width: 240px; margin: 0 auto; } .kl-content .kl-photo-wrap { padding: 18px; } }
/* 원서 접수 폼 (sub_03_03) */
.kl-content .kl-form-help { margin: 0 0 14px; font-size: 14.5px; color: var(--kl-muted); }
.kl-content .kl-req { margin-left: 3px; color: var(--kl-accent); font-weight: 800; }
.kl-content .kl-form-table td.active { width: 160px; }
.kl-content .kl-form-table td.active label { margin: 0; font-weight: 700; }
.kl-content .kl-form-table > tbody > tr > td { padding: 14px 16px; }
.kl-content .kl-input { display: block; width: 100%; max-width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d5dae3; border-radius: 8px; background: #fff; font-size: 15px; color: var(--kl-ink); transition: border-color .2s ease, box-shadow .2s ease; }
.kl-content .kl-input:focus { outline: 0; border-color: var(--kl-navy); box-shadow: 0 0 0 3px rgba(34,48,74,.12); }
.kl-content select.kl-input { padding-right: 8px; }
.kl-content .kl-w-sm { max-width: 220px; }
.kl-content .kl-w-md { max-width: 300px; }
.kl-content .kl-w-zip { width: 130px; }
.kl-content .kl-w-year { width: 110px; }
.kl-content .kl-w-day { width: 84px; }
.kl-content .kl-mt { margin-top: 8px; }
.kl-content .kl-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kl-content .kl-inline .kl-input { display: inline-block; }
.kl-content .kl-inline > span { margin-right: 8px; color: var(--kl-text); }
.kl-content .kl-seg { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.kl-content .kl-seg label { margin: 0; cursor: pointer; font-weight: 400; }
.kl-content .kl-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kl-content .kl-seg span { display: inline-block; padding: 10px 20px; border: 1px solid #d5dae3; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 700; color: var(--kl-text); transition: all .2s ease; }
.kl-content .kl-seg label:hover span { border-color: var(--kl-navy); }
.kl-content .kl-seg input:checked + span { border-color: var(--kl-navy); background: var(--kl-navy); color: #fff; }
.kl-content .kl-seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(34,48,74,.2); }
.kl-content .kl-fee { color: var(--kl-muted); font-size: 14.5px; }
.kl-content .kl-fee.is-on { color: var(--kl-text); }
.kl-content .kl-fee.is-on b { color: var(--kl-accent); font-size: 19px; font-weight: 900; margin-right: 4px; }
.kl-content .kl-field-note { margin: 8px 0 0; font-size: 13.5px; color: var(--kl-muted); }
.kl-content .kl-btn-line { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border: 1px solid var(--kl-navy); border-radius: 8px; background: #fff; color: var(--kl-navy); font-size: 14.5px; font-weight: 700; cursor: pointer; margin: 0; transition: all .2s ease; }
.kl-content .kl-btn-line:hover { background: var(--kl-navy); color: #fff; }
.kl-content .kl-file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.kl-content .kl-app-photo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kl-content .kl-app-photo img, .kl-content .kl-app-photo-prev { flex: none; width: 96px; aspect-ratio: 4 / 5; border-radius: 10px; border: 1px solid var(--kl-line); object-fit: cover; background: var(--kl-bg); }
.kl-content .kl-app-photo-prev { display: flex; align-items: center; justify-content: center; overflow: hidden; color: #c9d1de; font-size: 40px; }
.kl-content .kl-app-photo-prev img { width: 100%; height: 100%; border: 0; border-radius: 0; }
.kl-content .kl-app-photo p { margin: 0; font-size: 14.5px; line-height: 1.7; }
.kl-content .kl-app-photo p a { font-weight: 700; }
.kl-content .kl-form-actions { max-width: 360px; margin: 26px auto 0; }
.kl-content .kl-form-actions .kl-btn-submit { margin-top: 0; }
.kl-content .kl-form-actions .kl-btn-submit[disabled] { opacity: .6; }
@media (max-width: 575px) {
    .kl-content .kl-form-table, .kl-content .kl-form-table tbody, .kl-content .kl-form-table tr, .kl-content .kl-form-table td { display: block; width: 100% !important; }
    .kl-content .kl-form-table td.active { border-bottom: 0; padding: 10px 14px; }
    .kl-content .kl-form-table tr.line_divide td { border-top-width: 1px; }
    .kl-content .kl-w-sm, .kl-content .kl-w-md { max-width: none; }
    .kl-content .kl-w-year { width: 96px; } .kl-content .kl-w-day { width: 70px; } .kl-content .kl-inline > span { margin-right: 2px; }
}
/* 원서 접수 현황 + 수수료 결제 (sub_03_03_view) */
.kl-content .kl-app-view { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.kl-content .kl-app-view-photo { width: 170px; }
.kl-content .kl-app-view-body { flex: 1 1 360px; min-width: 0; }
.kl-content .kl-app-view-body .table { margin-bottom: 0; }
.kl-content .kl-state { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: var(--kl-bg); color: var(--kl-text); }
.kl-content .kl-state.is-wait { background: #fff1ec; color: var(--kl-accent); }
.kl-content .kl-state.is-done { background: var(--kl-navy); color: #fff; }
.kl-content .kl-state.is-cancel { background: #eef0f4; color: var(--kl-muted); }
.kl-content .kl-exam-no { font-size: 17px; color: var(--kl-navy); letter-spacing: .03em; }
.kl-content .kl-app-pay { display: flex; flex-wrap: wrap; border: 1px solid var(--kl-line); border-radius: 16px; overflow: hidden; background: #fff; }
.kl-content .kl-app-pay-sum { flex: 0 0 300px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 26px 28px; background: var(--kl-navy); color: #fff; }
.kl-content .kl-app-pay-lbl { font-size: 14.5px; color: #c9d1de; font-weight: 600; }
.kl-content .kl-app-pay-sum strong { font-size: 34px; font-weight: 900; line-height: 1.2; color: #fff; }
.kl-content .kl-app-pay-sum strong small { margin-left: 3px; font-size: 18px; font-weight: 700; color: #c9d1de; }
.kl-content .kl-app-pay-act { flex: 1 1 300px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 26px 28px; }
.kl-content .kl-app-pay-act p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--kl-text); }
.kl-content .kl-btn-pay { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 220px; height: 52px; padding: 0 26px; border-radius: 10px; background: var(--kl-accent); color: #fff; font-size: 16.5px; font-weight: 800; text-decoration: none; transition: background .2s ease; }
.kl-content .kl-btn-pay:hover, .kl-content .kl-btn-pay:focus { background: var(--kl-navy); color: #fff; text-decoration: none; }
.kl-content a.kl-btn-line { text-decoration: none; }
@media (max-width: 575px) {
    .kl-content .kl-app-view-photo { width: 140px; margin: 0 auto; }
    .kl-content .kl-app-pay-sum { flex-basis: 100%; padding: 20px; }
    .kl-content .kl-app-pay-act { padding: 20px; }
    .kl-content .kl-btn-pay { width: 100%; }
}
/* 접수 확인 목록 (sub_03_04) */
.kl-content .kl-app-list td { vertical-align: middle; }
.kl-content .kl-app-list td, .kl-content .kl-app-list th { white-space: nowrap; }
.kl-content .kl-app-list-tit a { font-weight: 700; color: var(--kl-ink); text-decoration: none; }
.kl-content .kl-app-list-tit a span { margin-left: 4px; font-weight: 400; color: var(--kl-muted); }
.kl-content .kl-app-list-tit a:hover, .kl-content .kl-app-list-tit a:hover span { color: var(--kl-accent); }
.kl-content .kl-app-list-btn { width: 180px; }
.kl-content .kl-btn-xs { display: inline-block; padding: 5px 12px; margin: 2px 1px; border: 1px solid #d5dae3; border-radius: 6px; background: #fff; color: var(--kl-text); font-size: 13px; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer; transition: all .2s ease; }
.kl-content .kl-btn-xs:hover { border-color: var(--kl-navy); background: var(--kl-navy); color: #fff; text-decoration: none; }
.kl-content .kl-btn-xs.is-danger { border-color: #f6d3c6; color: var(--kl-accent); }
.kl-content .kl-btn-xs.is-danger:hover { border-color: var(--kl-accent); background: var(--kl-accent); color: #fff; }
.kl-content .kl-empty { padding: 40px 10px !important; text-align: center; color: var(--kl-muted); }
.kl-content .kl-btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
@media (max-width: 575px) {
    .kl-content .kl-app-list { border: 0; }
    .kl-content .kl-app-list thead { display: none; }
    .kl-content .kl-app-list, .kl-content .kl-app-list tbody, .kl-content .kl-app-list tr, .kl-content .kl-app-list td { display: block; width: 100% !important; }
    .kl-content .kl-app-list tr { margin-bottom: 12px; border: 1px solid var(--kl-line); border-radius: 12px; overflow: hidden; }
    .kl-content .kl-app-list > tbody > tr > td { border: 0; border-top: 1px solid var(--kl-line2); padding: 10px 14px; text-align: left !important; white-space: normal; }
    .kl-content .kl-app-list > tbody > tr > td:first-child { border-top: 0; background: var(--kl-bg); }
    .kl-content .kl-app-list td[data-label] { display: flex; justify-content: space-between; align-items: center; }
    .kl-content .kl-app-list td[data-label]:before { content: attr(data-label); font-weight: 700; color: var(--kl-navy); }
    .kl-content .kl-app-list-btn { text-align: right !important; }
    .kl-content .kl-app-list .kl-empty { text-align: center !important; }
}
/* 수험표 · 결제내역 목록 (sub_03_06, orderinquiryview) */
.kl-content .kl-app-list .kl-sub-txt { margin-left: 4px; font-weight: 400; color: var(--kl-muted); font-size: 14px; }
.kl-content .kl-od-no { white-space: nowrap; }
.kl-content .kl-od-no a { font-weight: 700; color: var(--kl-navy); letter-spacing: .02em; }
.kl-content .kl-od-no a:hover { color: var(--kl-accent); }
.kl-content .kl-od-price { font-weight: 700; color: var(--kl-ink); white-space: nowrap; }
.kl-content .kl-pay-list { margin-bottom: 10px; }
.kl-content .kl-btn-xs.is-main { border-color: var(--kl-navy); background: var(--kl-navy); color: #fff; }
.kl-content .kl-btn-xs.is-main:hover { border-color: var(--kl-accent); background: var(--kl-accent); }
.kl-content .kl-app-list + .kl-link-box, .kl-content .table-responsive + .kl-link-box { margin-top: 24px; }
@media (max-width: 575px) {
    .kl-content .kl-app-list .kl-sub-txt { display: block; margin: 2px 0 0; }
    .kl-content .kl-app-list td.kl-app-list-tit[data-label] { display: block; }
    .kl-content .kl-app-list td.kl-app-list-tit[data-label]:before { display: block; margin-bottom: 4px; }
}
/* 합격자 확인 (sub_04_01) · 자격증 샘플 (sub_05_01) */
.kl-content .kl-search-card { max-width: 520px; margin: 0 auto; padding: 32px 30px; border: 1px solid var(--kl-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(29,36,51,.06); }
.kl-content .kl-search-lead { margin: 0 0 18px; font-size: 15px; color: var(--kl-text); text-align: center; }
.kl-content .kl-field { display: block; margin: 0 0 14px; font-weight: 400; }
.kl-content .kl-field > span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--kl-navy); }
.kl-content .kl-search-card .kl-field-note { margin: -4px 0 0; }
.kl-content .kl-search-card .kl-btn-submit { margin-top: 20px; }
.kl-content .kl-result { text-align: center; padding: 10px 0 4px; }
.kl-content .kl-result-ico { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; margin-bottom: 14px; font-size: 32px; background: var(--kl-bg); color: var(--kl-navy); }
.kl-content .kl-result strong { display: block; font-size: 22px; font-weight: 800; color: var(--kl-ink); }
.kl-content .kl-result p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--kl-text); }
.kl-content .kl-result.is-pass .kl-result-ico { background: var(--kl-navy); color: #fff; }
.kl-content .kl-result.is-pass strong { color: var(--kl-accent); font-size: 26px; }
.kl-content .kl-result.is-wait .kl-result-ico { background: #fff1ec; color: var(--kl-accent); }
.kl-content .kl-result.is-fail .kl-result-ico { background: #eef0f4; color: var(--kl-muted); }
.kl-content .kl-cert-sample { padding: 30px 20px; border-radius: 16px; background: var(--kl-bg); text-align: center; }
.kl-content .kl-cert-sample img { width: 350px; max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 12px 30px rgba(29,36,51,.15); }
@media (max-width: 575px) { .kl-content .kl-search-card { padding: 24px 18px; } }
.kl-content .kl-result strong, .kl-content .kl-result p { word-break: keep-all; }
/* 온라인강의 (kclass) */
.kl-content .kl-empty-box { padding: 40px 20px; border: 1px dashed #d5dae3; border-radius: 14px; text-align: center; color: var(--kl-muted); line-height: 1.8; }
.kl-content .kl-course-list { display: flex; flex-direction: column; gap: 16px; }
.kl-content .kl-course { padding: 24px 26px; border: 1px solid var(--kl-line); border-radius: 16px; background: #fff; transition: box-shadow .2s ease, border-color .2s ease; }
.kl-content .kl-course:hover { border-color: #d5dae3; box-shadow: 0 10px 26px rgba(29,36,51,.07); }
.kl-content .kl-course-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.kl-content .kl-course-hd h4 { margin: 0; font-size: 19px; font-weight: 800; color: var(--kl-ink); }
.kl-content .kl-course-hd h4 .fa { color: var(--kl-accent); margin-right: 4px; }
.kl-content .kl-course-desc { padding: 16px 18px; border-radius: 10px; background: var(--kl-bg); font-size: 15px; line-height: 1.8; color: var(--kl-text); }
.kl-content .kl-course-desc p { margin: 0; }
.kl-content .kl-course-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.kl-content .kl-course-btns .kl-btn-pay { min-width: 0; height: 44px; padding: 0 22px; font-size: 15px; }
.kl-content .kl-lec-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.kl-content .kl-lec { display: flex; align-items: center; gap: 20px; padding: 16px; border: 1px solid var(--kl-line); border-radius: 14px; background: #fff; transition: box-shadow .2s ease; }
.kl-content .kl-lec:hover { box-shadow: 0 10px 24px rgba(29,36,51,.07); }
.kl-content .kl-lec-thumb { position: relative; flex: none; width: 189px; aspect-ratio: 189 / 108; border-radius: 10px; overflow: hidden; background: var(--kl-bg); display: block; }
.kl-content .kl-lec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kl-content .kl-lec-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(29,36,51,.25); color: #fff; font-size: 24px; opacity: 0; transition: opacity .2s ease; }
.kl-content .kl-lec-thumb:hover .kl-lec-play { opacity: 1; }
.kl-content .kl-lec-body { flex: 1 1 auto; min-width: 0; }
.kl-content .kl-lec-badges { display: flex; gap: 6px; margin-bottom: 4px; }
.kl-content .kl-lec-badges:empty { display: none; }
.kl-content .kl-lec-body h4 { margin: 0 0 6px; font-size: 17px; font-weight: 800; line-height: 1.45; }
.kl-content .kl-lec-body h4 a { color: var(--kl-ink); text-decoration: none; }
.kl-content .kl-lec-body h4 a:hover { color: var(--kl-accent); }
.kl-content .kl-lec-body p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--kl-muted); }
.kl-content .kl-lec-btn { flex: none; }
.kl-content .pagination > li > a { color: var(--kl-navy); border-color: var(--kl-line); }
.kl-content .pagination > .active > a, .kl-content .pagination > .active > a:hover { background: var(--kl-navy); border-color: var(--kl-navy); color: #fff; }
.kl-content .kl-lec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; }
.kl-content .kl-lec-head h3 { flex-basis: 100%; margin: 6px 0 0; font-size: 22px; font-weight: 800; color: var(--kl-ink); }
.kl-content .kl-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 12px 30px rgba(29,36,51,.15); }
.kl-content .kl-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kl-content .kl-lec-content { padding: 22px 24px; border: 1px solid var(--kl-line); border-radius: 14px; background: #fff; }
.kl-content .kl-lec-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
.kl-content .kl-lec-files a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; background: var(--kl-bg); font-weight: 700; font-size: 14px; color: var(--kl-navy); text-decoration: none; }
.kl-content .kl-lec-files a:hover { background: var(--kl-navy); color: #fff; }
.kl-content .kl-lec-explan { font-size: 15px; line-height: 1.85; color: var(--kl-text); }
.kl-content .kl-lec-img { margin-top: 12px; text-align: center; }
.kl-content .kl-lec-img img { max-width: 100%; border-radius: 8px; }
.kl-content .kl-btn-row .kl-btn-pay { min-width: 0; height: 44px; padding: 0 22px; font-size: 15px; }
.kl-content .kl-progress-box { margin-bottom: 16px; padding: 18px 20px; border-radius: 12px; background: var(--kl-bg); }
.kl-content .kl-progress-txt { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.kl-content .kl-progress-txt span { font-weight: 700; color: var(--kl-navy); }
.kl-content .kl-progress-txt b { font-size: 22px; font-weight: 900; color: var(--kl-accent); }
.kl-content .kl-progress-txt em { margin-left: auto; font-style: normal; font-size: 14px; color: var(--kl-muted); }
.kl-content .kl-progress { height: 10px; border-radius: 999px; background: #dfe3ea; overflow: hidden; }
.kl-content .kl-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--kl-navy), var(--kl-accent)); }
@media (max-width: 575px) {
    .kl-content .kl-course { padding: 18px; }
    .kl-content .kl-course-btns > a { flex: 1 1 auto; justify-content: center; }
    .kl-content .kl-lec { flex-wrap: wrap; gap: 12px; }
    .kl-content .kl-lec-thumb { width: 100%; }
    .kl-content .kl-lec-btn { width: 100%; justify-content: center; }
    .kl-content .kl-lec-content { padding: 18px; }
}
/* 교열 서비스 (sub_06_*) */
.kl-content .kl-feat-list { display: flex; flex-direction: column; gap: 14px; }
.kl-content .kl-feat { display: flex; gap: 18px; padding: 22px 24px; border: 1px solid var(--kl-line); border-radius: 14px; background: #fff; }
.kl-content .kl-feat-ico { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--kl-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.kl-content .kl-feat h4 { margin: 2px 0 8px; font-size: 18px; font-weight: 800; color: var(--kl-ink); line-height: 1.5; word-break: keep-all; }
.kl-content .kl-feat p { margin: 0; font-size: 15px; line-height: 1.85; color: var(--kl-text); }
.kl-content .kl-feat p a { font-weight: 700; color: var(--kl-accent); }
.kl-content .kl-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.kl-content .kl-timeline:before { content: ""; position: absolute; left: 25px; top: 10px; bottom: 10px; width: 2px; background: var(--kl-line); }
.kl-content .kl-timeline > li { position: relative; display: flex; gap: 20px; padding-bottom: 18px; }
.kl-content .kl-tl-num { position: relative; z-index: 1; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--kl-navy); color: #fff; font-size: 17px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px #fff; }
.kl-content .kl-timeline > li:last-child .kl-tl-num { background: var(--kl-accent); }
.kl-content .kl-tl-body { flex: 1; min-width: 0; padding: 18px 22px; border: 1px solid var(--kl-line); border-radius: 14px; background: #fff; }
.kl-content .kl-tl-body h4 { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: var(--kl-ink); }
.kl-content .kl-tl-body h4 .fa { color: var(--kl-accent); margin-right: 4px; }
.kl-content .kl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kl-content .kl-chip { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--kl-bg); border: 1px solid var(--kl-line); font-size: 14px; font-weight: 700; color: var(--kl-navy); }
.kl-content .kl-chip-arrow { color: #b4bccb; }
.kl-content .kl-fee-table th small { font-weight: 600; color: var(--kl-muted); }
.kl-content .kl-fee-table td { font-size: 14.5px; line-height: 1.7; }
.kl-content .kl-fee-table td.kl-fee { font-size: 16px; font-weight: 800; color: var(--kl-navy); white-space: nowrap; }
.kl-content .kl-sample-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.kl-content .kl-sample-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border: 1px solid var(--kl-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--kl-ink); text-decoration: none; transition: all .2s ease; }
.kl-content .kl-sample-nav a span { width: 26px; height: 26px; border-radius: 50%; background: var(--kl-navy); color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.kl-content .kl-sample-nav a:hover { border-color: var(--kl-accent); color: var(--kl-accent); }
.kl-content .kl-sample-nav a:hover span { background: var(--kl-accent); }
.kl-content .kl-sample { padding: 20px; border-radius: 16px; background: var(--kl-bg); }
.kl-content .kl-sample-img { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 8px 24px rgba(29,36,51,.10); }
.kl-content .kl-sample-img img { display: block; width: 100%; height: auto; }
.kl-content .kl-sample-zoom { position: absolute; right: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(29,36,51,.8); color: #fff; font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .2s ease; }
.kl-content .kl-sample-img:hover .kl-sample-zoom { opacity: 1; }
.kl-content .kl-sample-note { margin: 16px 4px 0; font-size: 14.5px; line-height: 1.8; color: var(--kl-text); }
@media (max-width: 575px) {
    .kl-content .kl-feat { flex-direction: column; gap: 12px; padding: 18px; }
    .kl-content .kl-timeline:before { left: 19px; }
    .kl-content .kl-timeline > li { gap: 12px; }
    .kl-content .kl-tl-num { width: 40px; height: 40px; font-size: 14px; }
    .kl-content .kl-tl-body { padding: 14px 16px; }
    .kl-content .kl-sample { padding: 12px; }
}
/* 교열 의뢰 게시판 (bo_table=request) */
.kl-content .kl-req-guide { margin: 0 0 26px; padding: 20px 22px; border-radius: 14px; background: #fff8f5; border: 1px solid #f6d3c6; }
.kl-content .kl-req-guide h4 { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--kl-ink); }
.kl-content .kl-req-guide h4 .fa { color: var(--kl-accent); margin-right: 4px; }
.kl-content .kl-req-guide p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.8; color: var(--kl-text); }
.kl-content .kl-req-kakao { display: inline-block; }
.kl-content .kl-req-kakao img { max-width: 100%; height: auto; border-radius: 8px; }
.kl-content .kl-board { width: 100% !important; }
.kl-content .kl-board-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kl-content .kl-board-total { font-size: 14px; color: var(--kl-muted); }
.kl-content .kl-board-total b { color: var(--kl-accent); }
.kl-content .kl-board-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kl-content .kl-btn-pay.kl-btn-sm { min-width: 0; height: 42px; padding: 0 18px; font-size: 15px; }
.kl-content .kl-board-cate { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.kl-content .kl-board-cate a { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--kl-line); color: var(--kl-text); font-size: 14px; text-decoration: none; }
.kl-content .kl-board-cate a#bo_cate_on { background: var(--kl-navy); border-color: var(--kl-navy); color: #fff; }
.kl-content .kl-board-table .kl-board-num { color: var(--kl-muted); white-space: nowrap; }
.kl-content .kl-board-subj a { color: var(--kl-ink); }
.kl-content .kl-board-subj a:hover { color: var(--kl-accent); }
.kl-content .kl-board-ca { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 6px; background: var(--kl-bg); font-size: 12.5px; font-weight: 700; color: var(--kl-navy); }
.kl-content .kl-board-lock { color: var(--kl-muted); margin-right: 3px; }
.kl-content .kl-board-cmt { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #fff1ec; color: var(--kl-accent); font-size: 12px; font-weight: 800; }
.kl-content .kl-board-new { display: inline-block; margin-left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--kl-accent); color: #fff; font-size: 11px; font-weight: 800; text-align: center; line-height: 18px; }
.kl-content .kl-board-file { margin-left: 4px; color: var(--kl-muted); }
.kl-content .kl-state.is-end { background: #eef0f4; color: var(--kl-navy); }
.kl-content .kl-board-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.kl-content .kl-board-adm { display: flex; gap: 6px; }
.kl-content .kl-board-paging { margin-top: 10px; }
.kl-content .kl-board-search { margin: 16px auto 0; padding: 0; border: 0; }
.kl-content .kl-board-search form { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.kl-content .kl-board-search .kl-input { display: inline-block; width: auto; }
.kl-content .kl-board-search #stx { width: 220px; }
.kl-content .kl-board-view #bo_v_title { margin: 8px 0 12px; font-size: 24px; font-weight: 800; color: var(--kl-ink); line-height: 1.45; word-break: keep-all; }
.kl-content .kl-bv-head { padding-bottom: 14px; border-bottom: 2px solid var(--kl-ink); }
.kl-content .kl-bv-badges { display: flex; gap: 6px; }
.kl-content .kl-bv-info { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; border: 0; font-size: 14px; color: var(--kl-muted); }
.kl-content .kl-bv-info .fa { margin-right: 3px; }
.kl-content .kl-bv-files { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 0; }
.kl-content .kl-bv-files a { display: block; padding: 10px 14px; border-radius: 10px; background: var(--kl-bg); color: var(--kl-ink); font-size: 14.5px; text-decoration: none; word-break: break-all; }
.kl-content .kl-bv-files a:hover { background: #e9edf3; }
.kl-content .kl-bv-files a .fa { color: var(--kl-accent); margin-right: 6px; }
.kl-content .kl-bv-files em { font-style: normal; font-size: 13px; color: var(--kl-muted); }
.kl-content .kl-board-view #bo_v_atc { min-height: 160px; padding: 26px 4px; }
.kl-content .kl-board-view #bo_v_con { font-size: 16px; line-height: 1.85; color: var(--kl-text); }
.kl-content .kl-bv-pay { margin: 0 0 24px; }
.kl-content .kl-bv-btns { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 14px 0; border-top: 1px solid var(--kl-line); border-bottom: 1px solid var(--kl-line); margin-bottom: 26px; }
.kl-content .kl-bv-nb, .kl-content .kl-bv-com { display: flex; flex-wrap: wrap; gap: 6px; }
.kl-content .kl-cmt { margin: 0 0 20px; padding: 0; border: 0; background: none; }
.kl-content .kl-cmt-tit { margin: 0 0 12px; font-size: 17px; font-weight: 800; color: var(--kl-ink); }
.kl-content .kl-cmt-tit b { color: var(--kl-accent); }
.kl-content .kl-cmt-tit .fa { color: var(--kl-navy); margin-right: 4px; }
.kl-content .kl-cmt article { margin-bottom: 10px; padding: 14px 18px; border: 1px solid var(--kl-line); border-radius: 12px; background: #fff; }
.kl-content .kl-cmt header { padding: 0 0 6px; font-size: 13.5px; color: var(--kl-muted); }
.kl-content .kl-cmt p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--kl-text); }
.kl-content .kl-cmt #bo_vc_empty { padding: 26px !important; border: 1px dashed #d5dae3; border-radius: 12px; color: var(--kl-muted); }
.kl-content .kl-cmt-w { margin-bottom: 20px; }
.kl-content .kl-textarea { height: 120px; padding: 10px 12px; resize: vertical; }
.kl-content .kl-form-table th[scope=row] { width: 140px; background: var(--kl-bg) !important; color: var(--kl-navy); font-weight: 700; white-space: nowrap; vertical-align: middle; }
.kl-content .kl-board-write .kl-input + .kl-input { margin-top: 6px; }
@media (max-width: 575px) {
    .kl-content .kl-board-table td.kl-board-num { display: none !important; }
    .kl-content .kl-board-search #stx { width: 100%; }
    .kl-content .kl-board-search form > * { flex: 1 1 auto; }
    .kl-content .kl-form-table th[scope=row] { display: block; width: 100% !important; border-bottom: 0; }
    .kl-content .kl-board-view #bo_v_title { font-size: 20px; }
}
.kl-content .kl-board-search .kl-input { background: #fff; } .kl-content .kl-board-search .kl-btn-line { justify-content: center; }
/* 페이지 번호 통일 (그누보드 기본 pg_wrap + 부트스트랩 pagination) */
.pg_wrap { display: block !important; float: none !important; clear: both; margin: 24px 0 10px; text-align: center; }
.pg_wrap .pg { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.pg_wrap .sound_only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.pagination { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 24px 0 10px !important; padding: 0; }
.pagination > li { display: block; }
.pg_wrap .pg_page, .pg_wrap .pg_current,
.pagination > li > a, .pagination > li > span {
    float: none !important; display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 32px !important; width: auto !important; height: 32px !important; box-sizing: border-box; margin: 0 !important; padding: 0 8px !important;
    border: 1px solid #dfe3ea !important; border-radius: 4px !important; background: #fff !important;
    color: var(--kl-text) !important; font-size: 14px; font-weight: 500; line-height: 1 !important; text-decoration: none !important;
    transition: border-color .2s ease, color .2s ease;
}
.pg_wrap .pg_page:hover, .pagination > li > a:hover { border-color: var(--kl-navy) !important; color: var(--kl-navy) !important; background: #fff !important; }
.pg_wrap .pg_current, .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span {
    background: var(--kl-navy) !important; border-color: var(--kl-navy) !important; color: #fff !important; font-weight: 700;
}
/* 커뮤니티 (공지사항·질문/답변·FAQ) */
.kl-content .kl-bv-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 24px; text-align: center; }
.kl-content .kl-bv-act strong { color: var(--kl-accent); margin-left: 2px; }
.kl-content .kl-bv-act .bo_v_act_gng { position: relative; }
.kl-content .kl-faq-list { display: flex; flex-direction: column; gap: 10px; }
.kl-content .kl-faq-item { border: 1px solid var(--kl-line); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.kl-content .kl-faq-item[open] { border-color: #c9d1de; box-shadow: 0 8px 22px rgba(29,36,51,.07); }
.kl-content .kl-faq-item summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.kl-content .kl-faq-item summary::-webkit-details-marker { display: none; }
.kl-content .kl-faq-q, .kl-content .kl-faq-alabel { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; }
.kl-content .kl-faq-q { background: var(--kl-navy); color: #fff; }
.kl-content .kl-faq-tit { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: var(--kl-ink); line-height: 1.5; }
.kl-content .kl-faq-item summary:hover .kl-faq-tit { color: var(--kl-accent); }
.kl-content .kl-faq-arrow { flex: none; font-size: 20px; color: var(--kl-muted); transition: transform .2s ease; }
.kl-content .kl-faq-item[open] .kl-faq-arrow { transform: rotate(180deg); color: var(--kl-accent); }
.kl-content .kl-faq-chk input { margin: 0; }
.kl-content .kl-faq-a { display: flex; gap: 12px; padding: 16px 18px 18px; border-top: 1px solid var(--kl-line2); background: var(--kl-bg); }
.kl-content .kl-faq-alabel { background: var(--kl-accent); color: #fff; }
.kl-content .kl-faq-body { flex: 1; min-width: 0; font-size: 15px; line-height: 1.85; color: var(--kl-text); }
.kl-content .kl-faq-body p { margin: 0 0 6px; }
.kl-content .kl-faq-body img { max-width: 100%; height: auto; }
/* 게시판 글 보기: 옛 스킨 style.css 의 제목 위·아래 줄 제거 (줄은 머리 아래 한 줄만) */
.kl-content .kl-board-view #bo_v_title { border: 0 !important; padding: 0 !important; text-align: left !important; background: none !important; }
.kl-content .kl-board-view #bo_v_info { border: 0 !important; padding: 0 !important; margin: 0; }
.kl-content .kl-board-view .kl-bv-head { margin-top: 4px; }
.kl-content .kl-cmt { border: 0 !important; background: none !important; padding: 0 !important; }
/* 메인 가운데: 왼쪽(공지사항+카카오톡) / 오른쪽(홍보영상+합격자 확인) 아래 끝 맞춤 */
.kl-mid { align-items: stretch; }
.kl-mid-notice { display: flex; flex-direction: column; }
.kl-mid-side .kl-pass { flex: 1 1 auto; justify-content: center; }
.kl-mid .kl-notice a { padding: 11px 4px; }
.kl-mid .kl-notice .nt-tit { font-size: 15.5px; }
.kl-kakao-banner { flex: 1 1 auto; min-height: 100px; margin-top: 22px; display: flex; align-items: center; gap: 22px; padding: 22px 28px; border-radius: 16px; background: #f5cd00; color: #191919; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; }
.kl-kakao-banner:hover { color: #191919; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.10); }
.kl-kakao-banner .kk-ico { flex: none; position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.kl-kakao-banner .kk-ico .fa { font-size: 64px; color: #3c1e1e; line-height: 1; }
.kl-kakao-banner .kk-ico b { position: absolute; top: 19px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 900; color: #f5cd00; letter-spacing: .02em; }
.kl-kakao-banner .kk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kl-kakao-banner .kk-txt strong { font-size: 21px; font-weight: 900; letter-spacing: -0.02em; }
.kl-kakao-banner .kk-txt span { font-size: 14.5px; line-height: 1.6; color: #3d3a2a; }
.kl-kakao-banner .kk-btn { flex: none; padding: 11px 20px; border-radius: 999px; background: #191919; color: #f5cd00; font-size: 15px; font-weight: 800; }
.kl-kakao-banner:hover .kk-btn { background: var(--kl-accent); color: #fff; }
@media (max-width: 575px) {
    .kl-kakao-banner { flex-wrap: wrap; gap: 14px; padding: 20px; }
    .kl-kakao-banner .kk-ico { width: 48px; height: 48px; } .kl-kakao-banner .kk-ico .fa { font-size: 48px; } .kl-kakao-banner .kk-ico b { top: 14px; font-size: 10px; }
    .kl-kakao-banner .kk-txt strong { font-size: 18px; }
    .kl-kakao-banner .kk-btn { width: 100%; text-align: center; }
}
/* 글쓰기 옵션 체크박스 (공지·html·비밀글·답변메일받기) */
.kl-content .kl-opt { display: inline-flex !important; align-items: center; gap: 6px; margin: 4px 18px 4px 0 !important; padding: 0 !important; font-size: 15px; font-weight: 500; color: var(--kl-text); cursor: pointer; }
.kl-content .kl-opt input[type=checkbox] { position: static !important; opacity: 1 !important; width: 17px; height: 17px; margin: 0 !important; accent-color: var(--kl-navy); cursor: pointer; }
.kl-content .kl-board-write td input[type=checkbox] { position: static; opacity: 1; accent-color: var(--kl-navy); }