/*
 * 국비지원 페이지 스타일
 * 모든 규칙은 #gukbiPage 안에서만 적용됩니다 (사이트 공통 CSS와 충돌 방지).
 * 외부 폰트: Freesentation·Pretendard·Familjen Grotesk·NEXON Lv1 (css 안 @font-face, 사이트와 겹치지 않게 GK 이름)
 */
/* 폰트: 사이트 공통 CSS 의 같은 이름 @font-face 와 섞이지 않도록 고유 이름(GK ...) 사용 */
@font-face{font-family:"GK Free";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-4Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"GK Free";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-5Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"GK Free";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-6SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"GK Free";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-7Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"GK Pre";src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"GK Pre";src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"GK Pre";src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"GK Nexon";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"GK Grotesk";src:url("https://fonts.gstatic.com/s/familjengrotesk/v11/Qw3GZR9ZHiDnImG6-NEMQ41wby8WbHoEjw.woff2") format("woff2");font-weight:400 700;font-display:swap}
#gukbiPage{scroll-behavior:smooth;--bg:#161617; --bg-hero:#111112; --card:#222; --card2:#29292b; --line:#464646;
  --accent:#0bf; --accent-d:#008cbf; --text:#fff; --sub:#eee;
  --free:"GK Free","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --pre:"GK Pre","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --en:"GK Grotesk","GK Free",sans-serif;
  --max:1328px;}
#gukbiPage, #gukbiPage *{margin:0;padding:0;box-sizing:border-box}
#gukbiPage{background:var(--bg);color:var(--text);font-family:var(--free);font-weight:400;line-height:1.5;overflow-wrap:normal;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:hidden}
#gukbiPage a{color:inherit;text-decoration:none}
#gukbiPage button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#gukbiPage img{display:block;max-width:100%}
#gukbiPage .wrap{max-width:var(--max);margin:0 auto;padding:0 24px;overflow:visible}
#gukbiPage .reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
#gukbiPage .reveal.on{opacity:1;transform:none}
#gukbiPage .stg>.reveal:nth-child(2){transition-delay:.1s}
#gukbiPage .stg>.reveal:nth-child(3){transition-delay:.2s}
#gukbiPage .stg>.reveal:nth-child(4){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  #gukbiPage, #gukbiPage *, #gukbiPage, #gukbiPage *::before, #gukbiPage, #gukbiPage *::after{animation:none!important;transition:none!important}
  #gukbiPage .reveal, #gukbiPage .hero-in{opacity:1!important;transform:none!important}
}
/* 섹션 제목 (공통) */
#gukbiPage .sec-hd{display:flex;flex-direction:column;align-items:center;text-align:center}
#gukbiPage .pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 25px;border:1px solid var(--accent);border-radius:50px;background:linear-gradient(0deg,rgba(0,187,255,.13),rgba(34,34,34,.13)),rgba(19,19,20,.5);color:var(--accent);font-family:var(--free);font-weight:700;font-size:17px;line-height:27px;letter-spacing:.08em}
#gukbiPage .sec-hd h2{margin-top:17px;font-weight:700;font-size:36px;line-height:42px;letter-spacing:-.005em}
#gukbiPage .sec-hd p{margin-top:15px;font-size:24px;line-height:30px;color:var(--sub)}
#gukbiPage .light .pill{background:#fff}
#gukbiPage .light .sec-hd h2{color:#222}
#gukbiPage .light .sec-hd p{color:#444}
/* ===== HERO ===== */
#gukbiPage .hero{position:relative;height:1052px;background:var(--bg-hero);overflow:hidden}
#gukbiPage .hero-bg{position:absolute;inset:0;animation:gk-heroZoom 9s cubic-bezier(.22,1,.36,1) both;background:url('/2025/img/employ/gukbi/hero.jpg') calc(50% + 40px) -63px/auto 1114px no-repeat}
#gukbiPage .hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(22,22,23,0) 85%,#111112 100%)}
#gukbiPage .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:397px;z-index:1;background:linear-gradient(0deg,#111112,rgba(17,17,18,0))}
#gukbiPage .hero-in{opacity:0;animation:gk-fadeUp .9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes gk-heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
#gukbiPage .hero .wrap{position:relative;z-index:2;max-width:1248px;height:100%}
#gukbiPage .hero-txt{position:absolute;left:24px;top:197px;width:600px;filter:drop-shadow(0 0 9.9px rgba(0,0,0,.6))}
#gukbiPage .hero-eye{font-weight:700;font-size:22px;line-height:27px;letter-spacing:.18em;color:var(--accent)}
#gukbiPage .hero h1{margin-top:10px;font-weight:700;font-size:68px;line-height:78px;letter-spacing:-.03em}
#gukbiPage .hero h1 em{font-style:normal;color:var(--accent)}
#gukbiPage em{font-weight:inherit}
#gukbiPage .hero-lead{margin-top:15px;font-weight:500;font-size:25px;line-height:27px}
#gukbiPage .hero-cta{position:absolute;left:24px;top:592px;display:flex;gap:20px;flex-wrap:wrap}
#gukbiPage .btn-pill{display:inline-flex;align-items:center;justify-content:center;padding:18px 40px;border-radius:80px;font-family:var(--pre);font-weight:700;font-size:20px;line-height:1.27;letter-spacing:-.03em;color:#fff;white-space:nowrap;transition:transform .2s,filter .2s,background .2s}
#gukbiPage .btn-pill:hover{transform:translateY(-2px)}
#gukbiPage .btn-pill.pri{background:linear-gradient(59deg,#0bf 22%,#008cbf 108%);box-shadow:0 10px 30px -12px rgba(0,187,255,.8)}
#gukbiPage .btn-pill.pri:hover{filter:brightness(1.08)}
#gukbiPage .btn-pill.sec{border:1px solid #fff;background:rgba(19,19,20,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#gukbiPage .btn-pill.sec:hover{background:rgba(255,255,255,.12)}
#gukbiPage .hero-strip{position:absolute;left:0;right:0;top:725px;display:flex;justify-content:space-between;padding:30px 50px 30px 40px;border-top:1px solid #fff}
#gukbiPage .hs{display:flex;flex-direction:column;gap:10px;filter:drop-shadow(0 2px 10px #000)}
#gukbiPage .hs b{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:26px;line-height:1;letter-spacing:-.02em}
#gukbiPage .hs b i{font-style:normal;font-family:"GK Nexon",var(--free);font-size:24px;color:var(--accent);letter-spacing:-.03em}
#gukbiPage .hs span{padding-left:41px;font-size:18px;line-height:1;color:var(--sub);letter-spacing:-.02em}
/* ===== 숫자 띠 + 지원 대상 + 교육 분야 ===== */
#gukbiPage .find{position:relative;background:var(--bg);padding:178px 0 179px}
#gukbiPage .stats{position:absolute;z-index:2;left:0;right:0;top:-81px;height:163px;border-radius:80px 80px 0 0;background:url('/2025/img/employ/gukbi/stats-bg.png') center/100% 100% no-repeat,linear-gradient(0deg,#161617,#0079a6)}
#gukbiPage .scroll-ic{position:absolute;left:50%;top:-145px;width:50px;height:90px;margin-left:-25px;border-radius:99px;background:rgba(17,17,17,.8);z-index:3;display:flex;justify-content:center;padding-top:25px}
#gukbiPage .scroll-ic img{width:36.6px;height:47.5px;animation:gk-scrollNudge 2.2s ease-in-out infinite}
@keyframes gk-scrollNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
#gukbiPage .stats-row{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;height:100%;padding-top:19px}
#gukbiPage .st{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);width:320px;height:80px;display:flex;align-items:center;justify-content:center;border-right:1px solid rgba(230,230,230,.2)}
#gukbiPage .st:last-child{border-right:0}
#gukbiPage .stats.on .st{opacity:1;transform:none}
#gukbiPage .stats.on .st:nth-child(2){transition-delay:.1s}
#gukbiPage .stats.on .st:nth-child(3){transition-delay:.2s}
#gukbiPage .stats.on .st:nth-child(4){transition-delay:.3s}
#gukbiPage .st div{display:flex;flex-direction:column;gap:15px}
#gukbiPage .st b{display:flex;align-items:flex-end;gap:8px;font-weight:700;font-size:37px;line-height:1;letter-spacing:-.005em;white-space:nowrap}
#gukbiPage .st b em{font-style:normal;color:var(--accent)}
#gukbiPage .st b small{font-weight:500;font-size:20px}
#gukbiPage .st div>span{font-weight:600;font-size:20px;line-height:1;letter-spacing:-.005em;white-space:nowrap}
#gukbiPage .tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:end;margin-top:60px}
#gukbiPage .tab{position:relative;height:220px;text-align:left;border-radius:10px}
#gukbiPage .tab .tb{position:absolute;left:0;right:0;bottom:0;height:180px;border-radius:10px;overflow:hidden;background:#222;transition:height .45s cubic-bezier(.4,0,.2,1),box-shadow .45s ease,border-color .45s ease;border:1px solid transparent}
#gukbiPage .tab .tb img{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:center bottom;transition:opacity .45s ease,transform .7s cubic-bezier(.22,1,.36,1)}
#gukbiPage .tab .tb .off{opacity:.5}
#gukbiPage .tab .tb .on{opacity:0}
#gukbiPage .tab .tb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:114px;background:linear-gradient(180deg,rgba(34,34,34,0),rgba(20,20,20,.93))}
#gukbiPage .tab .chw{position:absolute;left:0;right:0;bottom:0;height:100%;pointer-events:none;z-index:1}
#gukbiPage .tab .char{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .45s cubic-bezier(.4,0,.2,1);will-change:transform,opacity}
#gukbiPage .tab .tt{position:absolute;left:31px;right:16px;bottom:20px;z-index:2;display:flex;flex-direction:column;gap:8px;transition:transform .55s cubic-bezier(.22,1,.36,1)}
#gukbiPage .tab:hover:not(.on) .tt{transform:translateY(-4px)}
#gukbiPage .tab:hover:not(.on) .tb .off{transform:scale(1.04)}
#gukbiPage .tab .tt em{font-style:normal;font-weight:700;font-size:17px;line-height:1;color:var(--accent)}
#gukbiPage .tab .tt b{font-weight:700;font-size:22px;line-height:27px}
#gukbiPage .tab:hover .tb .off{opacity:.75}
#gukbiPage .tab.on .tb{height:220px;border-color:var(--accent);box-shadow:0 7px 25px rgba(20,58,71,.4)}
#gukbiPage .tab.on .tb .on{opacity:1}
#gukbiPage .tab.on .tb .off{opacity:0}
#gukbiPage .tab.on .char{opacity:1;transform:none;transition:opacity .45s ease .05s,transform .55s cubic-bezier(.22,1,.36,1)}
#gukbiPage .tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#gukbiPage .panel{position:relative;margin-top:36px;min-height:243px;border:1px solid rgba(0,187,255,.5);border-radius:10px;background:linear-gradient(0deg,rgba(0,187,255,.2) 46%,rgba(22,22,23,.2) 95%),#222;padding:52px 108px 48px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
#gukbiPage .panel[hidden]{display:none}
#gukbiPage .panel.swap .pn-l, #gukbiPage .panel.swap .pn-r li{animation:gk-fadeUp .55s cubic-bezier(.22,1,.36,1) both}
#gukbiPage .panel.swap .pn-r li:nth-child(2){animation-delay:.06s}
#gukbiPage .panel.swap .pn-r li:nth-child(3){animation-delay:.12s}
@keyframes gk-fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#gukbiPage .pn-l em{font-style:normal;font-weight:700;font-size:17px;line-height:1;color:var(--accent)}
#gukbiPage .pn-l h3{margin-top:14px;font-weight:700;font-size:29px;line-height:1.2}
#gukbiPage .pn-l p{margin-top:20px;font-size:24px;line-height:30px;color:var(--sub)}
#gukbiPage .pn-r{list-style:none;display:flex;flex-direction:column;gap:12px;min-width:284px}
#gukbiPage .pn-r li{display:flex;align-items:center;gap:15px;font-size:22px;line-height:30px;color:var(--sub);white-space:nowrap}
#gukbiPage .pn-r li img{width:18px;height:13px;flex-shrink:0}
#gukbiPage .field{margin-top:120px;scroll-margin-top:90px}
#gukbiPage .courses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:60px}
#gukbiPage .cs{position:relative;display:flex;flex-direction:column;background:#29292b;border:1px solid #464646;border-radius:10px;overflow:hidden;transition:border-color .3s,transform .3s}
#gukbiPage .cs:hover{border-color:var(--accent);transform:translateY(-4px)}
#gukbiPage .cs-img{position:relative;height:297px;overflow:hidden}
#gukbiPage .cs-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
#gukbiPage .cs:hover .cs-img img{transform:scale(1.05)}
#gukbiPage .cs-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 64%,#141414)}
#gukbiPage .cs-img span{position:absolute;left:26px;bottom:19px;z-index:1;font-family:var(--en);font-size:20px;line-height:23px;color:#fff7e9}
#gukbiPage .cs-body{display:flex;flex-direction:column;gap:24px;padding:21px 27px 22px;flex:1}
#gukbiPage .cs-body h3{font-weight:700;font-size:24px;line-height:23px}
#gukbiPage .cs-body p{margin-top:9px;font-size:17px;line-height:24px;color:var(--sub);letter-spacing:-.02em}
#gukbiPage .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;letter-spacing:-.02em}
#gukbiPage .chips i{font-style:normal;font-weight:500;font-size:16px;line-height:23px;padding:0 10px;border-radius:80px;background:#222;white-space:nowrap}
#gukbiPage .cs-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:5px;background:var(--accent);color:#222;font-weight:600;font-size:19px;line-height:24px;letter-spacing:-.02em;white-space:nowrap;transition:filter .2s}
#gukbiPage .cs-btn:hover{filter:brightness(1.1)}
/* ===== 수강료·수당 / 경험 (밝은 섹션) ===== */
#gukbiPage .light{background:#fff;color:#222;padding:121px 0 125px}
#gukbiPage .sup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:60px}
#gukbiPage .sp{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:178px;padding:20px 25px;border-radius:15px;background:#222;color:#fff}
#gukbiPage .badge{display:inline-flex;align-items:center;padding:1px 12px;border:1px solid #fff;border-radius:99px;background:rgba(51,51,51,.6);font-family:var(--en);font-weight:700;font-size:16px;line-height:24px;letter-spacing:-.02em;white-space:pre}
#gukbiPage .sp h3{margin-top:10px;padding:0 5px;font-weight:700;font-size:24px;line-height:28px}
#gukbiPage .sp p{margin-top:5px;padding:0 5px;font-size:16px;line-height:21px;color:var(--sub);letter-spacing:-.02em}
#gukbiPage .sp .ic{flex-shrink:0;width:127px;height:127px;background:url('/2025/img/employ/gukbi/support-icons.png') no-repeat;background-size:381px 127px}
#gukbiPage .sp:nth-child(1) .ic{background-position:3.5px 0}
#gukbiPage .sp:nth-child(2) .ic{background-position:-126.6px 0}
#gukbiPage .sp:nth-child(3) .ic{background-position:-247.9px 0}
#gukbiPage .card-note{position:relative;margin-top:30px;height:94px;border-radius:15px;background:linear-gradient(104.6deg,rgba(226,255,254,.64) 20%,rgba(74,207,255,.64) 45%,rgba(0,170,255,.64) 75%),#0bf;display:flex;align-items:center;justify-content:space-between;padding:0 108px 0 86px;clip-path:inset(-80px 0 0 0 round 15px)}
#gukbiPage .card-note p{font-weight:700;font-size:24px;line-height:28px;color:#222;letter-spacing:-.02em}
#gukbiPage .card-note img{position:absolute;left:565px;top:-34px;width:224px;height:auto;pointer-events:none}
#gukbiPage .card-note .btn-dk{position:relative;z-index:1}
#gukbiPage .btn-dk{display:inline-flex;align-items:center;gap:14px;padding:10px 25px;border-radius:10px;background:#222;color:#fff;font-weight:600;font-size:20px;line-height:26px;letter-spacing:-.01em;white-space:nowrap;transition:background .2s}
#gukbiPage .btn-dk:hover{background:#000}
#gukbiPage .exp{max-width:886px;margin:120px auto 0}
#gukbiPage .exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:33px 20px;margin-top:60px}
#gukbiPage .ex{border:1px solid #dfdfdf;border-radius:15px;overflow:hidden;background:#fff;transition:transform .3s,box-shadow .3s,border-color .3s}
#gukbiPage .ex:hover{transform:translateY(-6px);border-color:#cfe9f5;box-shadow:0 22px 44px -18px rgba(0,60,90,.28)}
#gukbiPage .ex-img>img, #gukbiPage .ex-img .pst{transition:transform .6s}
#gukbiPage .ex:hover .ex-img>img:not(:first-child), #gukbiPage .ex:hover .ex-img:not(.poster)>img{transform:scale(1.04)}
#gukbiPage .ex-img{position:relative;height:260px;overflow:hidden;background:#171717}
#gukbiPage .ex-img>img{width:100%;height:100%;object-fit:cover}
#gukbiPage .ex-img.poster>img{position:absolute;inset:0;opacity:.2}
#gukbiPage .ex-img.poster .pst{position:absolute;left:8.4%;top:12.7%;width:83.2%;height:auto;opacity:1}
#gukbiPage .ex-body{padding:19px 32px 32px}
#gukbiPage .ex-body em{display:inline-block;padding:0 15px 0 10px;border-left:3px solid var(--accent);font-style:normal;font-family:var(--en);font-weight:600;font-size:20px;line-height:20px;color:var(--accent);letter-spacing:-.02em}
#gukbiPage .ex-body h3{margin-top:12px;font-weight:700;font-size:24px;line-height:23px;color:#333}
#gukbiPage .ex-body h4{margin-top:5px;font-weight:500;font-size:18px;line-height:20px;color:#333;letter-spacing:-.02em}
#gukbiPage .ex-body p{margin-top:8px;font-size:17px;line-height:21px;color:#686868;letter-spacing:-.02em}
#gukbiPage .exp-note{margin-top:15px;text-align:center;font-size:18px;line-height:30px;color:#777}
/* ===== NCS 띠 ===== */
#gukbiPage .ncs{position:relative;height:119px;background:#072f41;overflow:hidden}
#gukbiPage .ncs::before{content:"";position:absolute;inset:0;background:url('/2025/img/employ/gukbi/ncs-bg.jpg') center/cover;opacity:.5}
#gukbiPage .ncs-in{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:66px;padding-bottom:25px}
#gukbiPage .ncs-in strong{font-family:var(--en);font-weight:700;font-size:80px;line-height:1;background:linear-gradient(180deg,#fff 17%,#c5f0ff 94%);-webkit-background-clip:text;background-clip:text;color:transparent}
#gukbiPage .ncs-in div{border-left:1px solid #fff;padding:10px 0 10px 55px}
#gukbiPage .ncs-in b{display:block;font-weight:700;font-size:28px;line-height:28px}
#gukbiPage .ncs-in p{margin-top:6px;font-size:20px;line-height:24px;color:var(--sub);letter-spacing:-.02em}
/* ===== FAQ + 다음 단계 ===== */
#gukbiPage .faq{position:relative;padding:94px 0 160px;background:linear-gradient(180deg,rgba(22,22,23,0) 68%,rgba(0,187,255,.2) 100%),var(--bg)}
#gukbiPage .faq .scroll-ic{position:static;margin:0 auto 95px;background:linear-gradient(180deg,rgba(40,40,40,.14),rgba(0,187,255,.14)),var(--bg)}
#gukbiPage .qa-list{display:flex;flex-direction:column;gap:20px;margin-top:60px}
#gukbiPage .qa{font-family:var(--free);border:1px solid transparent;border-radius:15px;background:#282828;padding:15px 8px;transition:border-color .25s}
#gukbiPage .qa.open{border-color:var(--accent)}
#gukbiPage .qa-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:8px 44px;text-align:left}
#gukbiPage .qa-q span{display:flex;align-items:center;gap:14px;font-family:var(--pre);font-weight:700;font-size:23px;line-height:1.27;letter-spacing:-.01em}
#gukbiPage .qmark{flex-shrink:0;width:30px;font-style:normal;border-radius:5px;background:var(--accent);color:#222;text-align:center;font-family:var(--pre);font-weight:600;font-size:24px;line-height:1.27}
#gukbiPage .qa-q img{width:18px;height:11px;flex-shrink:0;transition:transform .3s}
#gukbiPage .qa.open .qa-q img{transform:rotate(180deg)}
#gukbiPage .qa-a{overflow:hidden;max-height:0;transition:max-height .35s ease}
#gukbiPage .qa-a>div{display:flex;gap:14px;align-items:flex-start;padding:12px 44px}
#gukbiPage .qa-a .qmark{background:#35373a;color:var(--accent)}
#gukbiPage .qa-a p{max-width:950px;font-family:var(--pre);font-weight:500;font-size:19px;line-height:1.55;letter-spacing:-.01em}
#gukbiPage .qa-a p b{font-weight:700}
#gukbiPage .next{margin-top:120px}
#gukbiPage .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:60px}
#gukbiPage .stp{display:flex;align-items:center;justify-content:space-between;gap:16px;height:160px;padding:0 25px;border-radius:15px;text-align:left;transition:transform .25s,filter .25s}
#gukbiPage .stp:hover{transform:translateY(-4px);filter:brightness(1.06)}
#gukbiPage .stp .badge{border:0;background:#222;color:#fff}
#gukbiPage .stp b{display:block;margin-top:10px;padding:0 5px;font-weight:700;font-size:24px;line-height:28px;color:#222}
#gukbiPage .stp img{width:127px;height:127px;object-fit:contain;flex-shrink:0}
#gukbiPage .stp.s1{background:var(--accent)}
#gukbiPage .stp.s2{background:#222;border:1px solid var(--accent)}
#gukbiPage .stp.s2 .badge{border:1px solid var(--accent);background:rgba(51,51,51,.6);color:var(--accent)}
#gukbiPage .stp.s2 b{color:#fff}
#gukbiPage .stp.s3{background:linear-gradient(72.65deg,#00aaff 22%,#006fff 108%)}
/* ===== 과정 문의 팝업 (지점 · 이름 · 연락처) ===== */
#gukbiPage .gk-pop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px 16px}
#gukbiPage .gk-pop[hidden]{display:none}
#gukbiPage .gk-dim{position:absolute;inset:0;background:rgba(8,9,11,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#gukbiPage .gk-box{position:relative;width:100%;max-width:460px;max-height:100%;overflow-y:auto;border-radius:18px;background:#1f2022;border:1px solid rgba(0,187,255,.35);box-shadow:0 40px 80px -20px rgba(0,0,0,.7);animation:gk-popIn .25s ease-out;color:#fff}
#gukbiPage .gk-box:focus{outline:none}
@keyframes gk-popIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#gukbiPage .gk-x{position:absolute;top:14px;right:14px;z-index:1;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:#fff;font-size:15px;line-height:1}
#gukbiPage .gk-x:hover{border-color:var(--accent)}
#gukbiPage .gk-hd{padding:28px 28px 0}
#gukbiPage .gk-tag{display:inline-block;padding:3px 12px;border-radius:99px;background:rgba(0,187,255,.14);color:var(--accent);font-weight:700;font-size:14px}
#gukbiPage .gk-hd b{display:block;margin-top:10px;font-weight:700;font-size:26px;line-height:1.25}
#gukbiPage .gk-hd p{margin-top:6px;font-size:16px;color:#a9b0b9}
#gukbiPage .gk-form{padding:22px 28px 26px}
#gukbiPage .gk-block{margin-bottom:22px}
#gukbiPage .gk-step{display:block;font-family:var(--en);font-weight:700;font-size:13px;color:var(--accent);letter-spacing:.04em}
#gukbiPage .gk-q{display:block;margin:2px 0 12px;font-weight:700;font-size:18px}
#gukbiPage .gk-chips{display:flex;flex-wrap:wrap;gap:7px}
#gukbiPage .gk-chip{position:relative}
#gukbiPage .gk-chip input{position:absolute;opacity:0;pointer-events:none}
#gukbiPage .gk-chip span{font-family:var(--free);display:inline-block;padding:6px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.04);font-size:16px;color:rgba(255,255,255,.88);cursor:pointer;transition:.15s}
#gukbiPage .gk-chip:hover span{border-color:rgba(255,255,255,.5);color:#fff}
#gukbiPage .gk-chip input:checked+span{background:var(--accent);border-color:var(--accent);color:#111;font-weight:700}
#gukbiPage .gk-chip input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
#gukbiPage .gk-field{font-weight:400;width:100%;height:48px;padding:0 12px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(0,0,0,.25);color:#fff;font-family:var(--pre);font-size:16px;transition:border-color .15s}
#gukbiPage select.gk-field option{color:#1d2433}
#gukbiPage .gk-field::placeholder{color:rgba(255,255,255,.4)}
#gukbiPage .gk-field:focus{outline:none;border-color:var(--accent)}
#gukbiPage .gk-field.bad{border-color:#ff5a6e}
#gukbiPage .gk-phone{display:grid;grid-template-columns:1fr 12px 1fr 12px 1fr;gap:6px;align-items:center;margin-top:8px}
#gukbiPage .gk-phone span{text-align:center;color:rgba(255,255,255,.55)}
#gukbiPage .gk-phone input{text-align:center}
#gukbiPage .gk-btn{width:100%;height:56px;border-radius:10px;background:linear-gradient(59deg,#0bf 22%,#008cbf 108%);color:#fff;font-family:var(--pre);font-weight:700;font-size:18px;box-shadow:0 10px 30px -12px rgba(0,187,255,.8);transition:filter .15s}
#gukbiPage .gk-btn:hover{filter:brightness(1.08)}
#gukbiPage .gk-btn:disabled{opacity:.6;cursor:wait}
#gukbiPage .gk-agree{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:14px;font-size:14px;color:rgba(255,255,255,.6);cursor:pointer}
#gukbiPage .gk-agree input{width:15px;height:15px;margin:0;accent-color:var(--accent)}
#gukbiPage .gk-err{display:block;margin-top:8px;font-size:13px;color:#ff7486}
#gukbiPage .gk-err:empty{display:none}
#gukbiPage .gk-err-c{text-align:center}
#gukbiPage .gk-done{padding:10px 28px 34px;text-align:center}
#gukbiPage .gk-done b{display:block;font-size:21px}
#gukbiPage .gk-done p{margin-top:8px;font-size:15px;color:#a9b0b9}
/* ===== 반응형 ===== */
@media (min-width:1281px){
  #gukbiPage .sp h3, #gukbiPage .chips, #gukbiPage .stp b{white-space:nowrap;flex-wrap:nowrap}
  #gukbiPage .sp h3, #gukbiPage .stp b{letter-spacing:-.02em}
}
@media (max-width:1280px){
  #gukbiPage .hero-strip{left:24px;right:24px}
  #gukbiPage .stats-row{padding:19px 24px 0}
  #gukbiPage .st{width:25%}
  #gukbiPage .panel{padding:44px 48px}
  #gukbiPage .card-note{padding:0 40px}
  #gukbiPage .card-note img{left:auto;right:330px}
}
@media (max-width:1100px){
  #gukbiPage .hero h1{font-size:56px;line-height:66px}
  #gukbiPage .courses{grid-template-columns:repeat(2,1fr)}
/* 탭: 4열 유지 + 피그마 비율(305:220)로 줄여서 캐릭터 튀어나옴도 같은 비율로 */
  #gukbiPage .tabs{gap:14px}
  #gukbiPage .tab{height:auto;aspect-ratio:305/220}
  #gukbiPage .tab .tb{height:81.8%}
  #gukbiPage .tab.on .tb{height:100%}
  #gukbiPage .tab .tt{left:16px;right:10px;bottom:14px;gap:6px}
  #gukbiPage .tab .tt em{font-size:13px}
  #gukbiPage .tab .tt b{font-size:17px;line-height:22px}
  #gukbiPage .sup{grid-template-columns:1fr}
  #gukbiPage .sp{min-height:150px}
  #gukbiPage .steps{grid-template-columns:1fr}
  #gukbiPage .stp{height:130px}
  #gukbiPage .ncs-in{gap:36px}
  #gukbiPage .ncs-in p{font-size:17px}
  #gukbiPage .card-note img{display:none}
}
/* 태블릿: 실서버 GNB 가 위에 붙으므로 히어로 위 여백을 줄임 */
@media (max-width:1024px){
  #gukbiPage .hero{height:auto;padding:64px 0 0}
  #gukbiPage .hero-bg{background-position:68% 30%;background-size:cover}
  #gukbiPage .hero::before{background:linear-gradient(180deg,rgba(17,17,18,.35) 0%,rgba(17,17,18,.2) 40%,#111112 100%),linear-gradient(90deg,rgba(17,17,18,.7) 0%,rgba(0,0,0,0) 80%)}
  #gukbiPage .hero .wrap{height:auto}
  #gukbiPage .hero-txt, #gukbiPage .hero-cta, #gukbiPage .hero-strip{position:static}
  #gukbiPage .hero-txt{width:auto;max-width:640px}
  #gukbiPage .hero-cta{margin-top:36px}
  #gukbiPage .find .scroll-ic{top:-77px}
  #gukbiPage .hero-strip{margin-top:64px;padding:26px 0 190px;gap:20px}
/* 아래 숫자 띠(-81px)+화살표(-77px)가 히어로 안으로 158px 올라옴 */
  #gukbiPage .hs b{font-size:22px}
  #gukbiPage .hs b i{font-size:20px}
  #gukbiPage .hs span{font-size:16px;padding-left:34px}
  #gukbiPage .panel{flex-direction:column;align-items:flex-start;gap:28px}
  #gukbiPage .pn-r li{white-space:normal}
  #gukbiPage .card-note{height:auto;flex-direction:column;align-items:flex-start;gap:16px;padding:26px 30px}
}
@media (max-width:768px){
  #gukbiPage .wrap{padding:0 16px}
  #gukbiPage .hero{padding-top:60px}
  #gukbiPage .hero-eye{font-size:14px;line-height:20px}
  #gukbiPage .hero h1{font-size:34px;line-height:42px}
  #gukbiPage .hero-lead{font-size:17px;line-height:25px}
  #gukbiPage .hero-cta{gap:10px;margin-top:28px}
  #gukbiPage .btn-pill{padding:15px 24px;font-size:16px;flex:1 1 auto}
  #gukbiPage .hero-strip{flex-direction:column;margin-top:40px;padding:22px 0 140px;gap:18px}
  #gukbiPage .hero::before{background:linear-gradient(180deg,rgba(17,17,18,.55) 0%,rgba(17,17,18,.35) 30%,rgba(17,17,18,.78) 58%,#111112 100%)}
  #gukbiPage .hero-txt, #gukbiPage .hs{filter:none;text-shadow:0 2px 8px rgba(0,0,0,.85)}
  #gukbiPage .hs b{font-size:20px}
  #gukbiPage .hs span{font-size:15px;line-height:1.35;color:#fff;opacity:.88;padding-left:32px}
  #gukbiPage .hero-lead{color:#fff}
  #gukbiPage .hs{gap:6px}
  #gukbiPage .find{padding:200px 0 100px}
  #gukbiPage .stats{height:auto;top:-60px;border-radius:40px 40px 0 0}
  #gukbiPage .scroll-ic{top:-56px;transform:scale(.8)}
  #gukbiPage .stats-row{flex-wrap:wrap;padding:30px 8px 18px}
  #gukbiPage .st{width:50%;height:auto;padding:14px 0}
  #gukbiPage .st:nth-child(2){border-right:0}
  #gukbiPage .st div{gap:8px;align-items:center}
  #gukbiPage .st b{font-size:27px}
  #gukbiPage .st b small, #gukbiPage .st div>span{font-size:15px}
  #gukbiPage .pill{font-size:13px;line-height:22px;padding:2px 16px}
  #gukbiPage .sec-hd h2{font-size:26px;line-height:34px}
  #gukbiPage .sec-hd p{font-size:17px;line-height:25px}
  #gukbiPage .tabs{margin-top:44px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;row-gap:40px}
  #gukbiPage .tab{aspect-ratio:305/240}
  #gukbiPage .tab .tt{left:14px;right:10px;bottom:12px;gap:5px}
  #gukbiPage .tab .tt em{font-size:12px}
  #gukbiPage .tab .tt b{font-size:16px;line-height:21px}
  #gukbiPage .panel{margin-top:20px;padding:28px 22px;gap:22px}
  #gukbiPage .pn-l h3{font-size:22px}
  #gukbiPage .pn-l p{font-size:16px;line-height:24px;margin-top:12px}
  #gukbiPage .pn-r li{font-size:16px;line-height:23px;gap:10px}
  #gukbiPage .field{margin-top:90px}
  #gukbiPage .courses{margin-top:36px;gap:12px}
  #gukbiPage .cs-img{height:180px}
  #gukbiPage .cs-img span{left:14px;bottom:12px;font-size:14px}
  #gukbiPage .cs-body{padding:16px 14px 16px;gap:16px}
  #gukbiPage .cs-body h3{font-size:19px}
  #gukbiPage .cs-body p{font-size:14px;line-height:20px}
  #gukbiPage .cs-body p br{display:none}
  #gukbiPage .chips i{font-size:12px;line-height:20px;padding:0 8px}
  #gukbiPage .cs-btn{font-size:15px;padding:10px 8px}
  #gukbiPage .cs-nm{display:none}
  #gukbiPage .light{padding:90px 0 96px}
  #gukbiPage .sup{margin-top:36px;gap:12px}
  #gukbiPage .sp{min-height:0;padding:20px}
  #gukbiPage .sp .ic{width:96px;height:96px;background-size:288px 96px}
  #gukbiPage .sp:nth-child(1) .ic{background-position:2.6px 0}
  #gukbiPage .sp:nth-child(2) .ic{background-position:-95.7px 0}
  #gukbiPage .sp:nth-child(3) .ic{background-position:-187.4px 0}
  #gukbiPage .sp h3{font-size:20px;line-height:25px}
  #gukbiPage .sp p{font-size:14px;line-height:20px}
  #gukbiPage .card-note{margin-top:16px;padding:22px 20px}
  #gukbiPage .card-note p{font-size:18px;line-height:25px}
  #gukbiPage .btn-dk{font-size:16px;padding:10px 18px}
  #gukbiPage .exp{margin-top:90px}
  #gukbiPage .exp-grid{grid-template-columns:1fr;gap:16px;margin-top:36px}
  #gukbiPage .ex-img{height:200px}
  #gukbiPage .ex-body{padding:18px 20px 24px}
  #gukbiPage .ex-body em{font-size:16px}
  #gukbiPage .ex-body h3{font-size:20px}
  #gukbiPage .ex-body h4{font-size:16px}
  #gukbiPage .ex-body p{font-size:15px;line-height:21px}
  #gukbiPage .exp-note{font-size:14px;line-height:22px}
  #gukbiPage .ncs{height:auto}
  #gukbiPage .ncs-in{flex-direction:column;align-items:flex-start;gap:12px;padding:26px 16px}
  #gukbiPage .ncs-in strong{font-size:48px}
  #gukbiPage .ncs-in div{border-left:0;border-top:1px solid rgba(255,255,255,.6);padding:12px 0 0}
  #gukbiPage .ncs-in b{font-size:20px;line-height:24px}
  #gukbiPage .ncs-in p{font-size:15px;line-height:21px}
  #gukbiPage .faq{padding:70px 0 100px}
  #gukbiPage .faq .scroll-ic{margin-bottom:50px}
  #gukbiPage .qa-list{margin-top:36px;gap:12px}
  #gukbiPage .qa{padding:10px 4px}
  #gukbiPage .qa-q{padding:8px 14px}
  #gukbiPage .qa-q span{font-size:16px;gap:10px;line-height:1.4}
  #gukbiPage .qmark{width:24px;font-size:17px}
  #gukbiPage .qa-a>div{padding:8px 14px 12px;gap:10px}
  #gukbiPage .qa-a p{font-size:15px}
  #gukbiPage .next{margin-top:90px}
  #gukbiPage .steps{margin-top:36px;gap:12px}
  #gukbiPage .stp{height:112px;padding:0 18px}
  #gukbiPage .stp b{font-size:19px;line-height:24px}
  #gukbiPage .stp img{width:88px;height:88px}
  #gukbiPage .gk-hd{padding:24px 20px 0}
  #gukbiPage .gk-form{padding:18px 20px 22px}
  #gukbiPage .gk-hd b{font-size:22px}
}
@media (max-width:480px){
  #gukbiPage .gk-phone{grid-template-columns:minmax(78px,1fr) 10px 1fr 10px 1fr;gap:4px}
  #gukbiPage .gk-phone select{padding:0 6px}
  #gukbiPage .gk-chip span{font-size:14px;padding:6px 10px}
}