/* =========================================================
   GH Career Jungle Gym 2026 — style.css
   ========================================================= */

:root{
  --font: 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;   /* 기본 베이스 폰트 */
  --display: 'Paperlogy', 'Pretendard', sans-serif;              /* (도현체 대체) */
  --en: 'Geist', 'Pretendard', sans-serif;

  --blue:#0f5cd7; --blue-d:#1a3a94;
  --green:#0eb884; --green-2:#12bd82; --mint:#7ee6c3;
  --gold:#ffd44d;
  --navy:#111c2b; --navy-2:#072753; --navy-3:#101b2d;
  --ink:#142033; --muted:#607083; --muted-2:#55647a;
  --line:#dfe7f0;
  --soft:#f5f8fb; --sky:#eaf5ff;

  --wrap:1440px;
  --pad:40px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:#fff; -webkit-font-smoothing:antialiased;
  line-height:1.5; overflow-x:hidden;
  letter-spacing:-0.03em;   /* 한글 자간 */
  word-break:keep-all;      /* 한글 단어 단위 줄바꿈 */
  overflow-wrap:break-word;
}
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
ul{margin:0; padding:0; list-style:none}
button{font-family:inherit; cursor:pointer; border:0; background:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---------- shared containers ---------- */
.section__grid,.ground,.nav__inner,.hero__inner,.footer__inner{
  width:100%; max-width:calc(var(--wrap) + var(--pad)*2);
  margin-inline:auto; padding-inline:var(--pad);
}
.section{padding-block:clamp(64px,10vw,120px)}
.section--light{background:#fff}
.section--soft{background:var(--soft)}
.section--dark{background:var(--navy-3)}
.section--apply{background:var(--sky)}

.section__grid{display:grid; grid-template-columns:330px 1fr; gap:72px; align-items:start}

/* ---------- head (left column) ---------- */
.head__label{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--blue)}
.head__label i{width:18px; height:2px; background:var(--blue); display:block}
.head__label--gold{color:var(--gold)}
.head__label--gold i{background:var(--gold)}
/* 모든 섹션 헤드: 타이틀/설명/태그 폰트 사이즈 통일 */
.head__title{font-family:var(--display); font-weight:800; font-size:clamp(30px,3.4vw,38px); color:var(--ink); line-height:1.28; margin-top:14px}
.head__title.big,.head__title.big2{font-size:clamp(30px,3.4vw,38px); font-weight:800}
.head__title em{color:var(--blue); font-style:normal}
.head__title.on-dark{color:#fff}
.head__title .blue{color:var(--blue); font-style:normal}
.head__desc{margin-top:18px; color:var(--muted); font-size:18px; line-height:1.65; white-space:pre-line}
.head__desc.on-dark{color:rgba(255,255,255,.65)}
.head__content{min-width:0}

/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; transition:background .25s, box-shadow .25s}
.nav.is-stuck{background:rgba(17,28,43,.92); backdrop-filter:blur(10px); box-shadow:0 6px 24px rgba(0,0,0,.25)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; height:70px}
.nav__logo{display:flex; align-items:center; gap:12px; color:#fff; font-weight:800; font-size:15px}
.nav__logo img{height:32px; width:auto}
.gnb{display:flex; gap:2px}
.gnb a{padding:9px 12px; border-radius:99px; color:rgba(255,255,255,.86); font-size:14px; font-weight:700; transition:background .18s}
.gnb a:hover{background:rgba(255,255,255,.12)}
.btn{display:inline-flex; align-items:center; justify-content:center; font-weight:800; border-radius:99px; transition:transform .15s, box-shadow .2s, background .2s}
.btn:active{transform:translateY(1px)}
.btn--cta{height:42px; padding:0 18px; background:#fff; color:var(--blue); font-size:14px}
.btn--cta:hover{box-shadow:0 6px 18px rgba(255,255,255,.2)}
.nav__toggle{display:none; width:40px; height:40px; flex-direction:column; gap:5px; align-items:center; justify-content:center}
.nav__toggle span{width:22px; height:2px; background:#fff; border-radius:2px; transition:.25s}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; min-height:100vh; background:var(--navy); overflow:hidden; color:#fff}
.hero__overlay{position:absolute; inset:0;
  background:linear-gradient(to right, rgba(17,28,43,.74) 0%, rgba(17,28,43,.55) 44%, rgba(17,28,43,0) 100%);
}
.hero__inner{position:relative; z-index:3; padding-top:152px}
.kicker{display:inline-block; padding:10px 18px; border:1px solid rgba(14,184,132,.45); border-radius:99px;
  background:rgba(14,184,132,.12); color:var(--green); font-weight:800; font-size:14px; letter-spacing:2px}
.slider-arrows{display:flex; gap:8px}
.slider-arrows button{width:38px; height:38px; border-radius:99px; border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center}
.slider-arrows svg{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.slider-count b{font-size:14px; font-weight:800}
.slider-count span{font-size:12px; color:rgba(255,255,255,.5); margin-left:6px}
.hero__sub{margin-top:44px}
.hero__sub p{color:rgba(255,255,255,.66); font-size:18px; line-height:1.6}
.hero__sub p.strong{color:#fff; font-weight:600}
.hero__actions{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.btn--primary{height:52px; padding:0 25px; background:var(--gold); color:#162235; font-size:15px; box-shadow:0 12px 28px rgba(255,212,77,.28)}
.btn--ghost{height:52px; padding:0 25px; background:rgba(255,255,255,.08); color:#fff; font-size:15px; border:1px solid rgba(255,255,255,.42)}
.hero__contact{margin-top:32px; color:rgba(255,255,255,.54); font-size:13px}

/* scroll hint */
.scroll-hint{position:absolute; z-index:3; left:50%; transform:translateX(-50%); bottom:124px; display:flex; flex-direction:column; align-items:center; gap:10px}
.scroll-hint span{font-family:var(--en); font-size:12px; letter-spacing:3px; color:rgba(255,255,255,.48)}
.scroll-hint__c{width:30px; height:30px; border-radius:99px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; animation:bob 1.8s ease-in-out infinite}
.scroll-hint__c svg{width:16px; height:16px; fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* quick access — 위치만 정의. 모양/색은 아래 '퀵버튼 리디자인' 블록 */
.quick{position:fixed; z-index:90; right:24px; bottom:24px; display:flex; flex-direction:column; gap:10px}
.quick__btn{text-align:center}

/* =========================================================
   01 PROJECT — compare + philosophy
   ========================================================= */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.cmp{border-radius:8px; padding:34px 30px; display:flex; flex-direction:column; min-height:450px; overflow:hidden}
.cmp--before{background:#fff; border:1px solid var(--line)}
.cmp--after{background:#072753; color:#fff; position:relative}
.cmp__tag{align-self:flex-start; padding:7px 13px; border-radius:99px; font-size:12px; font-weight:800}
.cmp--before .cmp__tag{background:#f5f8fb; color:var(--muted)}
.cmp--after .cmp__tag{background:rgba(255,255,255,.12); color:var(--mint)}
.cmp__h{font-family:var(--display); font-size:24px; font-weight:900; margin-top:16px}
.cmp--before .cmp__h{color:var(--ink)}
.cmp__p{margin-top:6px; font-size:15px}
.cmp--before .cmp__p{color:var(--muted)}
.cmp--after .cmp__p{color:rgba(255,255,255,.72)}
/* .cmp__vis / .cmp__char 는 하단 '비교 카드 비주얼' 블록에서 정의 */
.cmp__list{margin-top:auto}
.cmp__list li{position:relative; padding:10px 0 10px 20px; font-size:14px; border-top:1px solid var(--line)}
.cmp__list li::before{content:""; position:absolute; left:2px; top:50%; width:7px; height:7px; margin-top:-3px; border-radius:50%; background:#aab6c5}
.cmp--before .cmp__list li{color:var(--muted)}
.cmp__list--on li{color:var(--muted); border-top-color:rgba(255,255,255,.16)}
.cmp__list--on li::before{background:var(--mint)}
.philo{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:22px}
.pri{position:relative; padding-top:22px; border-top:2px solid #e6ebf2}
.pri::before{content:""; position:absolute; top:-2px; left:0; width:54px; height:2px; background:linear-gradient(90deg,var(--blue),var(--green))}
.pri__no{display:block; font-family:var(--display); font-size:36px; font-weight:900; line-height:1;
  background:linear-gradient(120deg,var(--blue),var(--green)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; width:max-content}
.pri__en{display:block; font-family:var(--en); font-size:11px; font-weight:900; letter-spacing:1px; color:var(--muted); margin-top:16px}
.pri h4{font-size:20px; font-weight:900; color:var(--ink); margin-top:5px}
.pri p{margin-top:10px; color:var(--muted-2); font-size:14.5px; line-height:1.62}

/* =========================================================
   02 GROUND — review + strategy + timeline
   ========================================================= */
.ground{display:flex; flex-direction:column; gap:18px}
.ground__top{display:grid; grid-template-columns:330px 1fr; gap:72px; align-items:start}
.ground__content{display:flex; flex-direction:column; gap:14px; min-width:0}
.head--sm .head__desc{font-size:18px}   /* 전 섹션 설명 통일 */

.review{display:flex; align-items:center; gap:28px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:22px 30px}
.review__label{flex-shrink:0; padding:8px 16px; border-radius:99px; background:var(--sky); color:var(--blue); font-size:13px; font-weight:800}
.review__stats{display:flex; align-items:flex-start; gap:20px; flex:1; min-width:0}
.stat{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px}
.stat__num{height:42px; display:flex; align-items:flex-end; gap:2px}
.stat__num b{font-family:var(--display); font-size:28px; font-weight:800; color:var(--ink); line-height:1}
.stat__num i{font-style:normal; font-size:15px; font-weight:900; color:var(--blue); padding-bottom:3px}
.stat__num--chk{gap:6px}
.stat__num--chk svg{width:28px; height:28px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.stat p{height:54px; font-size:12.5px; line-height:1.4; color:var(--muted)}
.stat__div{width:1px; height:52px; background:#e6ebf2; flex-shrink:0}

.strategy{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.strat{border-radius:8px; padding:28px; min-height:280px; display:flex; flex-direction:column; gap:14px; color:#fff; overflow:hidden}
.strat--blue{background:linear-gradient(305deg,#2450c8,#1a3a94)}
.strat--green{background:linear-gradient(305deg,#12bd82,#0b8a5f)}
.strat--dark{background:linear-gradient(305deg,#26364e,#141e2c)}
.strat__head{display:flex; align-items:center; justify-content:space-between}
.strat__head h3{font-size:22px; font-weight:900}
.strat__head svg{width:24px; height:24px; fill:none; stroke:rgba(255,255,255,.85); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.strat__hl{align-self:flex-start; padding:9px 14px; border-radius:10px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); font-size:13px}
.strat__hl b{font-family:var(--display); font-size:16px; font-weight:800}
.strat p{color:rgba(255,255,255,.78); font-size:13.5px; line-height:1.6}
.strat p.dim{color:rgba(255,255,255,.68)}
.strat__benefit{background:rgba(0,0,0,.18); border-left:3px solid var(--gold); border-radius:8px; padding:11px 14px; font-size:12.5px; line-height:1.5; color:#fff}

.timeline{background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px; display:flex; flex-direction:column; gap:14px}
.timeline__h{font-size:18px; font-weight:900; color:var(--ink)}
.timeline__track{height:3px; border-radius:2px; background:linear-gradient(90deg,#0f5cd7,#0eb884 60%,#ffd44d)}
.timeline__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.tl{display:flex; flex-direction:column; gap:12px; --c:var(--blue)}
.tl--blue{--c:var(--blue)}
.tl--green{--c:var(--green)}
.tl--gold{--c:var(--gold)}
.tl__hd{display:flex; align-items:center; gap:8px}
.tl__dot{width:14px; height:14px; border-radius:50%; background:var(--c)}
.tl__hd b{font-family:var(--display); font-size:17px; font-weight:800; color:var(--navy-2)}
.tl ul{display:flex; flex-direction:column; gap:7px}
.tl li{position:relative; padding-left:14px; font-size:13px; line-height:1.5; color:var(--muted)}
.tl li::before{content:"·"; position:absolute; left:2px; top:-1px; color:var(--c); font-weight:900}

/* =========================================================
   03 PLAYBOOK — guide grid
   ========================================================= */
.guide-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.guide{position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px; min-height:290px}
.guide--wide{grid-column:span 3/span 3}
.guide__char{position:absolute; right:-6px; bottom:0; width:150px; height:150px; object-fit:contain}
.guide h4{font-size:19px; font-weight:900; color:var(--ink); margin-top:12px}
.guide__en{display:block; font-family:var(--en); font-size:12px; font-weight:800; color:var(--muted); margin-top:2px}
.guide ul{margin-top:12px; display:flex; flex-direction:column; gap:6px; position:relative; z-index:1}
.guide li{position:relative; padding-left:13px; font-size:13px; color:var(--muted)}
.guide li::before{content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--blue)}
/* second row: 2 wide cards side by side */
.guide-grid{grid-auto-flow:row}
.guide--wide{grid-column:auto}
.guide-grid{grid-template-columns:repeat(6,1fr)}
.guide{grid-column:span 2}
.guide--wide{grid-column:span 3}

/* =========================================================
   04 VIDEOS
   ========================================================= */
.videos{display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:stretch}
.vid{background:#fff; border-radius:8px; overflow:hidden; display:flex; flex-direction:column}
.vid__thumb{position:relative; overflow:hidden; background:linear-gradient(315deg,#0f5cd7,#0eb884)}
.vid--main .vid__thumb{height:470px}
.vid--short .vid__thumb{flex:1; min-height:230px}
.vid__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34}
.vid__char{position:absolute; object-fit:contain; z-index:1}
.vid--main .vid__char{right:6%; bottom:0; height:78%}
.vid--short .vid__char{left:50%; transform:translateX(-50%); bottom:0; height:62%}
.vid__tag{position:absolute; top:16px; left:16px; z-index:2; padding:6px 11px; border-radius:99px; background:rgba(255,255,255,.92); color:var(--blue); font-size:11px; font-weight:900}
.vid__play{position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,.24)}
.vid--short .vid__play{top:50%}
.vid__play svg{width:22px; height:22px; fill:var(--blue)}
.vid__meta{padding:18px 20px; display:flex; flex-direction:column; gap:3px}
.vid__meta b{font-size:15px; font-weight:900; color:var(--ink)}
.vid__meta span{font-size:12px; color:var(--muted)}
.videos__shorts{display:flex; flex-direction:column; gap:16px}
.vid--short .vid__meta{padding:14px 16px}
.vid--short .vid__meta b{font-size:14px}

/* =========================================================
   05 CALENDAR
   ========================================================= */
.cal-wrap{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.calendar{background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px; display:flex; flex-direction:column; gap:18px}
.calendar__h{display:flex; align-items:center; justify-content:space-between}
.calendar__h b{font-size:18px; font-weight:900; color:var(--navy-2)}
.calendar__nav{display:flex; gap:6px}
.calendar__nav button{width:32px; height:32px; border-radius:99px; background:var(--sky); display:flex; align-items:center; justify-content:center}
.calendar__nav svg{width:16px; height:16px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.cal-dow,.cal-week{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.cal-dow span{text-align:center; padding:7px 0; font-size:12px; font-weight:900; color:var(--muted)}
.cal-dow span.sun{color:#e5484d}
.cal-dow span.sat{color:var(--blue)}
.cal-body{display:flex; flex-direction:column; gap:5px}
.cal-day{height:58px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; color:var(--ink)}
.cal-day.mute{color:#b5c0cc}
.cal-day.blue{background:var(--sky); color:var(--blue); font-weight:900}
.cal-day.green{background:#e8f8f2; color:var(--green); font-weight:900}
.cal-day.today{background:var(--navy-2); color:#fff; font-weight:900}

.events{position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px}
.events__wm{position:absolute; right:22px; bottom:20px; width:170px; opacity:.16; pointer-events:none}
.event{display:flex; gap:14px; padding:24px 0; position:relative; z-index:1}
.event+.event{border-top:1px solid var(--line)}
.event__date{flex-shrink:0; width:62px; height:42px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:900}
.event__date--navy{background:var(--navy-2)}
.event__date--green{background:var(--green)}
.event__tx{display:flex; flex-direction:column; gap:2px}
.event__tx b{font-size:15px; font-weight:900; color:var(--ink)}
.event__tx span{font-size:13px; color:var(--muted)}

/* =========================================================
   06 BOARD — posters
   ========================================================= */
.posters{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.poster{position:relative; overflow:hidden; border-radius:8px; height:250px; padding:12px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid}
.poster img{position:absolute; left:50%; top:8px; transform:translateX(-50%); width:150px; height:150px; object-fit:contain}
.poster__q{position:relative; z-index:1; font-size:30px; font-weight:900}
.poster__bt{position:relative; z-index:1; display:flex; flex-direction:column; gap:1px}
.poster__bt b{font-size:13px; font-weight:900}
.poster__bt span{font-size:11px; color:var(--muted)}
.poster--blue{background:#eaf1ff; border-color:var(--blue)}
.poster--blue .poster__q,.poster--blue .poster__bt b{color:var(--blue)}
.poster--green{background:#e7f8f1; border-color:#0d9f6e}
.poster--green .poster__q,.poster--green .poster__bt b{color:#0d9f6e}
.poster--gold{background:#fff4d9; border-color:#c98a00}
.poster--gold .poster__q,.poster--gold .poster__bt b{color:#c98a00}

/* =========================================================
   07 APPLY
   ========================================================= */
.apply-box{display:grid; grid-template-columns:400px 1fr; border-radius:8px; overflow:hidden; box-shadow:0 24px 54px rgba(12,33,66,.14)}
.apply-side{position:relative; overflow:hidden; padding:40px 36px; background:var(--navy-2); color:#fff; display:flex; flex-direction:column}
.apply-side::before{content:""; position:absolute; inset:0; background:url('../images/bg_cafe.png') center/cover; opacity:.14}
.apply-side>*{position:relative; z-index:1}
.apply-side__txt{display:flex; flex-direction:column}
.apply-side__txt span{font-size:28px; font-weight:900; line-height:1.32}
.apply-side__txt .gold{color:var(--gold)}
.apply-side__p{margin-top:6px; color:rgba(255,255,255,.72); font-size:14px; line-height:1.6}
.apply-side__char{display:flex; justify-content:center; margin:64px 0 auto}
.apply-side__char img{height:300px; width:auto}
.apply-side__contact{display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right}
.apply-side__contact b{font-size:13px; font-weight:800}
.apply-side__contact span{font-size:13px; color:rgba(255,255,255,.68); line-height:1.5}
.apply-form{background:#fff; padding:28px; display:flex; flex-direction:column; gap:10px}
.apply-form .row{display:flex; gap:14px}
.field{flex:1; display:flex; flex-direction:column; gap:7px; min-width:0}
.field>span{font-size:13px; font-weight:900; color:var(--navy-2)}
.field input,.field textarea{width:100%; border:1px solid var(--line); border-radius:8px; padding:13px 14px; font-family:inherit; font-size:14px; color:var(--ink); background:#fff}
.field textarea{min-height:70px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#a9b4c2}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--blue)}
.apply-submit{margin-top:6px; height:54px; border-radius:99px; background:var(--blue); color:#fff; font-size:16px; font-weight:700;
  transition:background .18s, transform .15s, box-shadow .2s}
.apply-submit:hover{background:var(--blue-d); transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,92,215,.32)}
.apply-submit:active{transform:translateY(0)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--navy-3); color:#fff}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:40px}
.footer__left{display:flex; align-items:center; gap:16px}
.footer__left img{height:34px; width:auto}
.footer__left p{font-size:13px; line-height:1.7; color:rgba(255,255,255,.64)}
.footer__copy{font-family:var(--en); font-size:12.5px; color:rgba(255,255,255,.54); white-space:nowrap}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1200px){
  .section__grid,.ground__top{grid-template-columns:minmax(0,1fr); gap:32px}
  /* 좁은 좌측 컬럼(330px)용 강제 줄바꿈 → 1단이 되면 불필요 */
  .head__desc br{display:none}
  .review{flex-wrap:wrap}
}
/* GNB: 로고+메뉴+CTA 한 줄에 필요한 폭(≈1099px) 아래에서는 햄버거로 전환 */
@media (max-width:1120px){
  .gnb,.nav .btn--cta{display:none}
  .nav__toggle{display:flex}
  .nav.is-open{background:var(--navy)}
  .nav.is-open .gnb{display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column; gap:4px; padding:16px 20px; background:rgba(17,28,43,.98)}
  .nav.is-open .gnb a{padding:12px}
  /* 열린 메뉴가 밝은 GNB에서도 보이게 */
  .nav.is-stuck.is-open{background:#fff}
  .nav.is-stuck.is-open .gnb{background:rgba(255,255,255,.98)}
  .nav.is-stuck.is-open .gnb a{color:var(--ink)}
}
@media (max-width:900px){
  :root{--pad:20px}
  .hero__inner{padding-top:110px}
  .scroll-hint{display:none}
  .quick{right:14px}
  /* .posters(멘토 포스터 3장)는 제외 — 좁아질 때까지 3열 유지 */
  .compare,.philo,.strategy,.guide-grid,.videos,.cal-wrap,.apply-box,.timeline__cols{grid-template-columns:minmax(0,1fr) !important}
  .guide{grid-column:auto !important}
  .videos__shorts{flex-direction:row}
  /* 세로가 과하게 길어지지 않게: 여백·캐릭터 축소 */
  .apply-side{padding:28px 24px}
  .apply-side__txt span{font-size:24px}
  .apply-side__char{margin:20px 0 20px}
  .apply-side__char img{height:150px}
  /* 푸터: 로고 / 텍스트 / copyright 각각 한 줄 + 가운데 정렬 */
  .footer__inner{flex-direction:column; align-items:center; text-align:center; gap:14px; padding-block:32px}
  .footer__left{flex-direction:column; align-items:center; gap:12px}
  .footer__copy{white-space:normal}
}
@media (max-width:560px){
  .compare .cmp{min-height:auto}
  .review__stats{flex-wrap:wrap; gap:16px}
  .stat{flex:1 1 40%}
  .stat__div{display:none}
  .apply-form .row{flex-direction:column}
  .footer__copy{white-space:normal}
}

/* =========================================================
   HERO GYM · SLIDERS · CHARACTERS · FULLPAGE (추가)
   ========================================================= */
.hero__gym{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.hero .hero__overlay{z-index:1}
.hero__chars{position:absolute; inset:0; z-index:2; pointer-events:none}
.hero__char{position:absolute; width:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.35)); will-change:transform}
.hero__char.c1{height:170px; right:9%; top:58%; animation:floatA 4.4s ease-in-out infinite}
.hero__char.c2{height:146px; left:62%; top:40%; animation:floatB 5.2s ease-in-out infinite; animation-delay:-1.1s}
.hero__char.c3{height:156px; right:7%; top:12%; animation:floatA 3.9s ease-in-out infinite; animation-delay:-.6s}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-22px) rotate(3deg)}}

.hero .hero__inner{position:relative; z-index:3}
.hq{overflow:hidden; max-width:1020px; margin-top:26px}
.hq__track{display:flex; transition:transform .8s cubic-bezier(.65,.05,.25,1); will-change:transform}
.hq__slide{flex:0 0 100%; min-width:100%; display:flex; align-items:center; min-height:3.6em}
.hq__slide h1{font-family:var(--display); font-weight:800; font-size:clamp(30px,4.2vw,56px); line-height:1.24; color:#fff; margin:0}
.hq__slide h1 .up{color:var(--green)}
.hq__meta{display:flex; align-items:center; gap:14px; margin-top:18px}
.hq__bar,.mq__bar{width:72px; height:3px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden}
.hq__bar i,.mq__bar i{display:block; height:100%; width:0; background:var(--green); border-radius:99px}
@keyframes barrun{from{width:0}to{width:100%}}

/* mentor rotating band */
.mq{position:absolute; z-index:4; left:50%; transform:translateX(-50%); bottom:16px;
  width:min(1440px, calc(100% - 80px)); min-height:84px; display:flex; align-items:stretch;
  background:rgba(9,14,35,.62); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14);
  border-radius:18px; box-shadow:0 16px 44px rgba(0,0,0,.3); overflow:hidden}
.mq__label{display:flex; align-items:center; padding:0 22px; font-family:var(--display); font-size:11px; font-weight:800; letter-spacing:1.5px;
  color:var(--green); background:rgba(255,255,255,.06); border-right:1px solid rgba(255,255,255,.1); line-height:1.5; flex:none}
.mq__body{flex:1; display:flex; align-items:center; gap:16px; padding:16px 26px; min-width:0}
.mq__mark{font-family:var(--display); font-size:34px; color:var(--green); line-height:1; flex:none; opacity:.85}
.mq__quote{color:rgba(255,255,255,.92); font-size:clamp(14px,1.5vw,16.5px); font-weight:500; line-height:1.55; transition:opacity .45s, transform .45s}
.mq__quote.out{opacity:0; transform:translateY(-12px)}
.mq__quote.in{opacity:0; transform:translateY(12px); transition:none}
.mq__side{flex:none; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:0 22px; border-left:1px solid rgba(255,255,255,.1)}
.mq__count b{font-family:var(--display); font-size:14px; font-weight:800; color:#fff}
.mq__count span{font-size:12px; color:rgba(255,255,255,.5); margin-left:4px}

/* ===== FULLPAGE ===== */
body.fp-active{overflow:hidden; height:100vh}
body.fp-active .fp{position:fixed; top:0; left:0; width:100%; transition:transform .85s cubic-bezier(.86,0,.07,1); will-change:transform}
body.fp-active .fp__slide{height:100vh; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch}
body.fp-active .fp__slide>.hero{min-height:100vh}
/* 전 섹션: 상단 정렬 + 고정 여백 → 컨텐츠 길이가 바뀌어도 시작점 동일 */
body.fp-active .fp__slide>.section{min-height:100vh; display:flex; flex-direction:column; justify-content:flex-start; padding-top:132px; padding-bottom:30px}
body.fp-active .fp__slide--footer{height:auto; min-height:0; overflow:visible}

.gnb a.active{background:rgba(255,255,255,.16); color:#fff}
.fp-nav{position:fixed; left:36px; top:50%; transform:translateY(-50%); z-index:85; display:flex; flex-direction:column; gap:14px}
.fp-nav button{width:11px; height:11px; border-radius:50%; background:rgba(150,160,180,.45); position:relative; transition:transform .2s, background .2s; padding:0}
.fp-nav button:hover{background:rgba(150,160,180,.85)}
.fp-nav button.on{background:var(--blue); transform:scale(1.35)}
.fp-nav button::after{content:attr(data-t); position:absolute; left:22px; right:auto; top:50%; transform:translateY(-50%); white-space:nowrap; font-size:12px; font-weight:700; color:#fff; background:rgba(20,32,51,.92); padding:5px 9px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .18s}
.fp-nav button:hover::after{opacity:1}
/* 노출 여부는 fullpage.js가 컨텐츠 여백을 재서 판단 (display 직접 제어) */

/* ===== 06 Board (포스터존 + 공지 + 배너) ===== */
/* minmax(0,1fr): 아이템의 min-width:auto 때문에 min-content 아래로 안 줄어드는 것 방지 */
.board-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start}
.poster-zone{position:relative; overflow:hidden; background:var(--navy-2); border-radius:8px; padding:28px; color:#fff}
.poster-zone::before{content:""; position:absolute; width:240px; height:240px; border-radius:50%; background:var(--gold); opacity:.18; right:-40px; top:-110px; pointer-events:none}
.poster-zone>*{position:relative; z-index:1}
.poster-zone h3{font-size:20px; font-weight:900}
.poster-zone>p{margin-top:6px; color:rgba(255,255,255,.68); font-size:14px}
.poster-zone .posters{margin-top:22px}
.poster{height:190px}
.notice{background:#fff; border:1px solid var(--line); border-radius:8px; padding:22px 28px}
.notice h3{font-size:20px; font-weight:900; color:var(--ink); margin-bottom:6px}
.notice__li{display:flex; align-items:center; gap:12px; padding:13px 0; color:inherit}
.notice__li + .notice__li{border-top:1px solid var(--line)}
.notice__li:hover .notice__a{color:var(--blue)}
.notice__tag{flex:none; padding:4px 9px; border-radius:99px; font-size:11px; font-weight:900}
.notice__tag--event{background:#eaf5ff; color:var(--blue)}
.notice__tag--edu{background:#e8f8f2; color:var(--green)}
.notice__tag--promo{background:#fff1bd; color:#9a7212}
.notice__a{flex:1; min-width:0; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s}
.notice__tm{flex:none; font-size:12px; color:#9aa7b5}

.banners{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.banner{position:relative; overflow:hidden; border-radius:12px; padding:28px; min-height:200px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; transition:transform .18s; cursor:pointer}
.banner:hover{transform:translateY(-3px)}
.banner--blue{background:linear-gradient(315deg,#2f6bf0,#123a9e)}
.banner--green{background:linear-gradient(315deg,#16c98a,#0a7d55)}
.banner__deco{position:absolute; width:230px; height:230px; border-radius:50%; background:rgba(255,255,255,.08); right:8%; top:-16px}
.banner__img{position:absolute; right:5%; top:14px; width:180px; height:180px; object-fit:contain}
.banner__s{position:relative; z-index:1; font-size:12px; font-weight:900; color:rgba(255,255,255,.72)}
.banner__h{position:relative; z-index:1; font-size:23px; font-weight:900}
.banner__p{position:relative; z-index:1; font-size:14px; color:rgba(255,255,255,.8); line-height:1.5; max-width:62%}
.banner__cta{position:relative; z-index:1; align-self:flex-start; margin-top:8px; display:inline-flex; align-items:center; gap:8px; background:#fff; border-radius:99px; padding:10px 16px; font-size:13px; font-weight:900}
.banner--blue .banner__cta{color:var(--blue)}
.banner--green .banner__cta{color:#0b8a5f}
.banner__cta svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:900px){ .board-wrap,.banners{grid-template-columns:minmax(0,1fr)} .banner__p{max-width:100%} }

/* ===== 달력 일정 클릭 인터랙션 ===== */
.cal-day.evt{cursor:pointer}
.cal-day.evt:hover{outline:2px solid var(--blue); outline-offset:-2px}
.cal-day.sel{box-shadow:inset 0 0 0 2px var(--blue)}
.event{cursor:pointer; border-radius:8px; transition:background .18s}
.event.on{background:#eef4ff}
.calendar__nav button{cursor:pointer}

/* ===== 03 Playbook 텍스트 크기 업 + 캐릭터 애니메이션 (OsyTw) ===== */
.guide h4{font-size:20px}
.guide__en{font-size:13px}
.guide li{font-size:14px}
@keyframes floatSm{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.guide__char{animation:floatSm 4.2s ease-in-out infinite}
.guide:nth-child(2) .guide__char{animation-duration:4.8s; animation-delay:-.6s}
.guide:nth-child(3) .guide__char{animation-duration:3.8s; animation-delay:-1.1s}
.guide:nth-child(4) .guide__char{animation-duration:4.6s; animation-delay:-.3s}
.guide:nth-child(5) .guide__char{animation-duration:4s; animation-delay:-.9s}

/* ===== 달력 워터마크 구분선 위로 (sn43A) ===== */
.events__wm{z-index:2}

/* ===== 06 포스터 카드 포인터 + 호버 애니메이션 (jWeEb) ===== */
.poster{cursor:pointer; transition:transform .2s, box-shadow .2s}
.poster:hover{transform:translateY(-5px); box-shadow:0 14px 30px rgba(20,32,48,.16)}
.poster img{transition:transform .25s}
.poster:hover img{transform:translateX(-50%) scale(1.07)}
.poster__q{transition:transform .25s}
.poster:hover .poster__q{transform:scale(1.14)}

/* ===== 04 Videos: 메인 16:9 / 쇼츠 9:16 표준 비율 (MXq1l) ===== */
.videos{display:flex; gap:16px; align-items:flex-start}
.vid--main{flex:1 1 auto; min-width:0}
.vid--main .vid__thumb{aspect-ratio:16/9; height:auto}
.videos__shorts{display:flex; flex-direction:row; gap:16px; flex:0 0 auto}
.vid--short{width:180px}
.vid--short .vid__thumb{aspect-ratio:9/16; height:auto; min-height:0; flex:none}
.vid--short .vid__char{height:46%}
/* 900 이하: 세로로 쌓되 폭을 꽉 채운다.
   align-items 기본값(flex-start)이면 컬럼 방향에서 카드가 내용 폭으로 줄어 좌측에 붙는다. */
@media (max-width:900px){
  .videos{flex-direction:column; align-items:stretch}
  .vid--main{flex:none}
  .videos__shorts{flex:none}
  .vid--short{width:auto; flex:1 1 0; min-width:0}   /* 쇼츠 2개를 한 줄에 균등 분배 */
}

/* ===== 2025 REVIEW 통계 가운데 정렬 (oaWFa) ===== */
.stat{align-items:center}
.stat__num{justify-content:center}
.stat p{text-align:center}

/* ===== 03 가이드 카드 요소 간 간격 (imiPR / xepOv) ===== */
.guide__en{margin-top:5px}
.guide ul{margin-top:18px}

/* ===== 03 가이드 카드: 텍스트 태그 → 아이콘 배지 (F10uW) ===== */
.guide__ico{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(15,92,215,.10), rgba(14,184,132,.12))}
.guide__ico svg{width:23px; height:23px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ===== 06 포스터 카드: 물음표/캐릭터/텍스트 가운데 정렬 (jWeEb) ===== */
.poster{align-items:center; text-align:center}
.poster__q{align-self:center}
.poster__bt{align-items:center}

/* ===== 07 Apply 박스: 디자인과 동일하게 세로 600px (EeEhU / wuWbB) ===== */
.apply-box{min-height:600px}
@media (max-width:900px){ .apply-box{min-height:0} }

/* ===== 신청 폼: 세로 폼에서 필드가 늘어나 '문의 내용'이 밀리는 문제 수정 ===== */
.apply-form>.field{flex:0 0 auto}
.apply-form>.field--grow{flex:1 1 auto; min-height:0}
.field--grow textarea{flex:1 1 auto; height:100%; min-height:120px; resize:none}

/* =========================================================
   GNB: 히어로 이후(01 섹션부터) 흰 배경 + 검은 글씨
   ========================================================= */
.nav__logo-b{display:none}

.nav.is-stuck{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 18px rgba(20,32,48,.06);
}
.nav.is-stuck .nav__logo-w{display:none}
.nav.is-stuck .nav__logo-b{display:block}
.nav.is-stuck .nav__logo{color:var(--ink)}
.nav.is-stuck .gnb a{color:var(--muted)}
.nav.is-stuck .gnb a:hover{background:rgba(15,92,215,.08); color:var(--blue)}
.nav.is-stuck .gnb a.active{background:rgba(15,92,215,.10); color:var(--blue)}
.nav.is-stuck .btn--cta{background:var(--blue); color:#fff}
.nav.is-stuck .btn--cta:hover{background:var(--blue-d); box-shadow:0 6px 18px rgba(15,92,215,.28)}
.nav.is-stuck .nav__toggle span{background:var(--ink)}

/* 모바일 메뉴 패널도 상태에 맞춰 */
@media (max-width:900px){
  .nav.is-stuck.is-open{background:#fff}
  .nav.is-stuck.is-open .gnb{background:rgba(255,255,255,.98)}
}

/* ===== 철학: EN 라벨을 제목 위로 (제목이 길어져 옆으로는 안 들어감) ===== */
.pri__hd{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:16px}
.pri__hd h4{margin-top:0}
.pri__hd .pri__en{margin-top:0; color:var(--green)}

/* ===== AFTER 카드(남색) 리스트 텍스트 가독성 수정 ===== */
.cmp__list--on li{color:rgba(255,255,255,.86)}

/* ===== 철학 카드: 하단에 상단 선을 좌우 반전한 선 추가 (O1hIS) ===== */
.pri{padding-bottom:24px; border-bottom:2px solid #e6ebf2}
.pri::after{content:""; position:absolute; bottom:-2px; right:0; width:54px; height:2px;
  background:linear-gradient(90deg, var(--green), var(--blue))}

/* ===== 철학 카드: 위아래 선 두께 2px → 3px (T2zHaG) ===== */
.pri{border-top-width:4px; border-bottom-width:4px}
.pri::before{height:4px; top:-4px}
.pri::after{height:4px; bottom:-4px}

/* =========================================================
   퀵버튼 리디자인 (hGUHJ) — 글래스 필 + 컬러 아이콘 칩
   ========================================================= */
.quick__btn{
  width:auto; padding:0 20px 0 7px; height:54px;
  display:flex; flex-direction:row; align-items:center; gap:11px;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(20,32,48,.08);
  border-radius:99px;
  box-shadow:0 8px 24px rgba(12,26,48,.16);
  color:var(--ink);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .22s, background .2s;
}
.quick__btn:hover{transform:translateX(-5px); box-shadow:0 12px 30px rgba(12,26,48,.24)}
.quick__btn:active{transform:translateX(-2px)}

.quick__ico{
  width:40px; height:40px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.quick__btn svg{width:20px; height:20px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s}
/* 기존 `.quick__btn span`(specificity가 더 높아 실제로 적용되던 값)을 그대로 옮겨온 것 */
.quick__tx{font-size:11.5px; font-weight:800; white-space:nowrap; letter-spacing:-0.02em}

.quick__btn--chat .quick__ico{background:rgba(14,184,132,.14)}
.quick__btn--chat svg{stroke:var(--green)}
.quick__btn--chat:hover .quick__ico{background:var(--green)}
.quick__btn--chat:hover svg{stroke:#fff}

.quick__btn--apply .quick__ico{background:rgba(15,92,215,.12)}
.quick__btn--apply svg{stroke:var(--blue)}
.quick__btn--apply:hover .quick__ico{background:var(--blue)}
.quick__btn--apply:hover svg{stroke:#fff}

/* ---- mini: 버튼이 본문 위로 겹치는 폭에서 아이콘만 (main.js가 토글) ----
   마우스오버하면 라벨이 펼쳐진다. width:auto 는 트랜지션이 안 되므로 max-width 사용. */
.quick--mini .quick__btn{padding:0 7px}
.quick--mini .quick__tx{
  max-width:0; opacity:0; margin-left:-11px; overflow:hidden; white-space:nowrap;
  transition:max-width .26s cubic-bezier(.2,.8,.2,1), opacity .18s, margin-left .26s cubic-bezier(.2,.8,.2,1);
}
.quick--mini .quick__btn:hover,
.quick--mini .quick__btn:focus-visible{padding:0 20px 0 7px}
.quick--mini .quick__btn:hover .quick__tx,
.quick--mini .quick__btn:focus-visible .quick__tx{max-width:140px; opacity:1; margin-left:0}

@media (max-width:900px){
  .quick{align-items:flex-end}
  .quick__btn{height:48px; padding:0 16px 0 6px}
  .quick__ico{width:36px; height:36px}
}


/* =========================================================
   비교 카드 비주얼 (j5JVZM / VA7N6)
   구조: [격자 SVG]  ←flex space-between→  [캐릭터 존]
         말풍선만 캐릭터 존 기준 absolute
   ========================================================= */
/* 격자 + 캐릭터를 한 덩어리로 묶어 가운데 정렬 (양끝으로 벌어지지 않게) */
.cmp__vis{
  display:flex; align-items:center; justify-content:center; gap:24px;
  height:auto; margin:20px 0 10px;
  position:static; overflow:visible;
}
.cmp__vis svg{flex:none; height:170px; width:auto; align-self:flex-start}   /* 격자: 확대 + 위로 */
.cmp--after .cmp__vis svg{height:190px}

/* flex:0 1 → 카드가 좁으면 줄어든다 (고정폭이면 말풍선이 카드 밖으로 잘림) */
.cmp__zone{
  position:relative; flex:0 1 272px; min-width:0; height:170px;
  display:flex; align-items:center; justify-content:center;
}
.cmp--after .cmp__zone{height:190px}
.cmp__char{position:static; height:136px; width:auto; z-index:1}
.cmp__char--before{transform:translateX(10px)}   /* BEFORE 캐릭터만 */

/* ---- 말풍선 ---- */
.bub{
  position:absolute; z-index:5;
  width:max-content; white-space:nowrap;
  padding:8px 15px; border-radius:16px;
  font-size:14px; font-weight:800; line-height:1.2;
}
.bub::after{content:""; position:absolute; width:10px; height:10px; transform:rotate(45deg)}

/* 캐릭터 주변 배치 */
.bub.b1{left:0;   top:38px}                          /* 좌상 */
.bub.b2{left:50%; transform:translateX(-50%); top:-15px} /* 상단 */
.bub.b3{right:2px; top:22px}                         /* 우상 */
.bub.b4{left:0;   top:112px}                         /* 좌하 */
.bub.b5{right:10px; top:106px}                       /* 우하 */
.bub.b6{left:-12px; top:112px}                       /* 좌하 — 네트워크(AFTER) */
.bub.b7{right:-12px; top:116px}                      /* 우하 — 미래 가능성(AFTER) */

/* 꼬리 → 캐릭터 방향 */
.bub.b1::after{bottom:-5px; right:16px}
.bub.b2::after{bottom:-5px; left:50%; margin-left:-5px}
.bub.b3::after{bottom:-5px; left:16px}
.bub.b4::after,
.bub.b6::after{top:50%; margin-top:-5px; right:-5px; bottom:auto; left:auto}
.bub.b5::after,
.bub.b7::after{top:50%; margin-top:-5px; left:-5px; bottom:auto; right:auto}

/* BEFORE(흰 카드) */
.cmp--before .bub{background:#eef2f7; color:#4c5b70; border:1px solid #dde5ee}
.cmp--before .bub::after{background:#eef2f7; border:1px solid #dde5ee; border-top:0; border-left:0}
.cmp--before .bub.b4::after{border:1px solid #dde5ee; border-bottom:0; border-left:0}
.cmp--before .bub.b5::after{border:1px solid #dde5ee; border-top:0; border-right:0}

/* AFTER(남색 카드) — b1·b2·b3·b6·b7 사용 (b4·b5는 BEFORE 전용) */
.cmp--after .bub{background:rgba(126,230,195,.18); color:#8df0cf; border:1px solid rgba(126,230,195,.38)}
.cmp--after .bub::after{background:#0b2f4d; border:1px solid rgba(126,230,195,.38); border-top:0; border-left:0}
.cmp--after .bub.b6::after{border:1px solid rgba(126,230,195,.38); border-bottom:0; border-left:0}
.cmp--after .bub.b7::after{border:1px solid rgba(126,230,195,.38); border-top:0; border-right:0}

/* ---- 비교 카드 헤더: 제목(좌) + 태그(우) ---- */
.cmp__top{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%}
.cmp__top .cmp__h{margin-top:0}
.cmp__top .cmp__tag{align-self:center; flex:none}

@media (max-width:1200px){
  .cmp__vis svg{height:130px}
  .bub{font-size:13px; padding:7px 12px}
}
/* 900 이하: 세로로 쌓지 않고 격자·캐릭터·말풍선을 줄여 한 줄 유지 */
@media (max-width:900px){
  .cmp{padding:26px 20px}
  .cmp__vis{flex-direction:row; gap:18px; margin:16px 0 6px}
  .cmp__vis svg{height:112px}
  .cmp--after .cmp__vis svg{height:124px}
  .cmp__zone{flex:0 1 210px; height:112px}
  .cmp--after .cmp__zone{height:124px}
  .cmp__char{height:104px}
  .cmp__char--before{transform:translateX(6px)}
  .bub{font-size:11px; padding:5px 9px; border-radius:12px}
  .bub.b1{top:26px}
  .bub.b2{top:-10px}
  .bub.b3{top:14px}
  .bub.b4{top:82px}
  .bub.b5{right:6px; top:78px}
  .bub.b6{left:-8px; top:82px}
  .bub.b7{right:-8px; top:84px}
}

/* 560 이하: 한 줄에 넣기엔 좁음 → 격자 / 캐릭터+말풍선을 각각 한 줄로 (격자는 가운데) */
@media (max-width:560px){
  .cmp__vis{flex-direction:column; align-items:center; gap:18px; height:auto}
  .cmp__vis svg{align-self:center; height:150px}
  .cmp--after .cmp__vis svg{height:165px}
  .cmp__zone{flex:none; width:100%; max-width:300px; height:190px}
  .cmp--after .cmp__zone{height:190px}
  .cmp__char{height:130px}
  .bub{font-size:12px; padding:6px 11px}
  .bub.b1{top:36px}
  .bub.b2{top:-12px}
  .bub.b3{right:0; top:22px}
  .bub.b4{top:108px}
  .bub.b5{right:4px; top:104px}
  .bub.b6{left:0; top:108px}
  .bub.b7{right:0; top:110px}
}

/* =========================================================
   커리어정글짐 도우미 (챗봇 패널)
   ========================================================= */
.chat{
  position:fixed; right:24px; bottom:170px; z-index:95;
  width:440px; max-width:calc(100vw - 48px);
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 24px 64px rgba(20,30,44,.30);
  display:none; flex-direction:column;
}
.chat.is-open{display:flex; animation:chatPop .22s ease-out}
@keyframes chatPop{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

.chat__head{background:var(--navy); color:#fff; padding:16px 18px; display:flex; align-items:center; justify-content:space-between}
.chat__title{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800}
.chat__title svg{width:18px; height:18px; fill:none; stroke:var(--mint); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.chat__close{display:flex; padding:2px}
.chat__close svg{width:18px; height:18px; fill:none; stroke:rgba(255,255,255,.6); stroke-width:2; stroke-linecap:round}
.chat__close:hover svg{stroke:#fff}

.chat__body{padding:18px; height:330px; overflow-y:auto; display:flex; flex-direction:column; gap:12px}
.chat__msg{background:var(--soft); border-radius:12px 12px 12px 4px; padding:12px 14px; font-size:13.5px; line-height:1.6; color:var(--ink); max-width:88%; align-self:flex-start; white-space:normal; word-break:keep-all; overflow-wrap:anywhere}
.chat__msg--me{background:#e8f4ff; border-radius:12px 12px 4px 12px; align-self:flex-end; max-width:80%}
/* 타이핑 인디케이터 */
.chat__typing{display:inline-flex; gap:4px; align-items:center; align-self:flex-start; width:auto}
.chat__typing span{width:6px; height:6px; border-radius:50%; background:#9aa4b2; animation:chatDot 1.2s infinite ease-in-out}
.chat__typing span:nth-child(2){animation-delay:.2s}
.chat__typing span:nth-child(3){animation-delay:.4s}
@keyframes chatDot{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}
.chat__chips{display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start}
.chat__chips button{border:1px solid var(--line); background:#fff; border-radius:99px; padding:8px 13px;
  font-size:12.5px; font-weight:500; color:var(--muted); transition:border-color .18s, color .18s}
.chat__chips button:hover{border-color:var(--green); color:var(--green)}

.chat__input{border-top:1px solid var(--line); padding:15px 18px; display:flex; align-items:center; gap:12px}
.chat__input input{flex:1; min-width:0; border:0; outline:none; background:none; font-family:inherit; font-size:13px; color:var(--ink)}
.chat__input input::placeholder{color:#9aa4b2}
.chat__send{width:32px; height:32px; flex:none; border-radius:50%; background:var(--blue);
  display:flex; align-items:center; justify-content:center; transition:background .18s}
.chat__send:hover{background:var(--blue-d)}
.chat__send svg{width:15px; height:15px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

@media (max-width:900px){
  .chat{right:14px; bottom:92px; width:calc(100vw - 28px)}
  .chat__body{height:280px}
}

/* ===== 얇은 커스텀 스크롤바 (챗봇 / 모달 공용) ===== */
.chat__body,
.modal__body{
  scrollbar-width:thin;                 /* Firefox */
  scrollbar-color:#c3cddb #eef2f7;
}
.chat__body::-webkit-scrollbar,
.modal__body::-webkit-scrollbar{width:6px}
.chat__body::-webkit-scrollbar-track,
.modal__body::-webkit-scrollbar-track{background:#eef2f7; border-radius:99px}
.chat__body::-webkit-scrollbar-thumb,
.modal__body::-webkit-scrollbar-thumb{background:#c3cddb; border-radius:99px}
.chat__body::-webkit-scrollbar-thumb:hover,
.modal__body::-webkit-scrollbar-thumb:hover{background:#a9b6c7}
/* 스크롤바와 본문 텍스트가 겹치지 않도록 여백 확보 */
.chat__body{padding-right:12px}

/* =========================================================
   2025 REVIEW 스탯 카드 (UMp3x 디자인 반영)
   ========================================================= */
.review__stats{align-items:stretch; gap:12px}
.stat__div{display:none}                       /* 구분선 → 카드형으로 대체 */
.stat{
  flex:1; min-width:0; height:130px;
  display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center;
  padding:6px 14px;
  background:#f7f9fc; border:1px solid #e6ebf2; border-radius:12px;
}
.stat__num{height:auto; display:flex; align-items:flex-end; justify-content:center; gap:2px}
.stat__num--chk{gap:6px}
.stat__num--chk svg{width:30px; height:30px}
.stat p{height:auto; font-size:12.5px; line-height:1.4; color:var(--muted); text-align:center}

/* =========================================================
   커리어 플레이북 모달 (Guide 01~05)
   ========================================================= */
.guide li{cursor:pointer; transition:color .16s}
.guide li:hover{color:var(--blue)}
.guide li:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px}

.modal{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:24px}
.modal.is-open{display:flex}
.modal__dim{position:absolute; inset:0; background:rgba(11,21,36,.8); border:0; padding:0; cursor:pointer}
.modal__card{position:relative; display:flex; flex-direction:column; width:min(780px,100%); max-height:min(660px,calc(100vh - 48px));
  background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 24px 64px rgba(11,21,36,.35)}
body.is-modal{overflow:hidden}

.modal__head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:26px 30px; border-bottom:1px solid var(--line)}
.modal__eyebrow{display:block; font-size:12px; font-weight:900; color:var(--blue)}
.modal__title{margin-top:6px; font-size:22px; font-weight:900; color:var(--ink); line-height:1.35}
.modal__sub{margin-top:6px; font-size:13.5px; color:var(--muted); line-height:1.6}
.modal__close{flex:none; width:34px; height:34px; border:0; border-radius:50%; background:var(--soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .16s}
.modal__close:hover{background:#e9eff6}
.modal__close svg{width:18px; height:18px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round}

.modal__body{flex:1; min-height:0; overflow-y:auto; padding:26px 22px 26px 30px; display:flex; flex-direction:column; gap:16px}
/* 본문 블록은 줄어들지 않고 본문 전체가 스크롤되게 */
.modal__body>*{flex:0 0 auto}
.modal__foot{display:flex; justify-content:flex-end; padding:16px 30px; border-top:1px solid var(--line)}
.modal__ok{border:0; border-radius:99px; padding:11px 22px; background:var(--blue); color:#fff;
  font-family:inherit; font-size:14px; font-weight:800; cursor:pointer; transition:background .16s}
.modal__ok:hover{background:#0d4fbb}

/* ---- 본문 공통 요소 ---- */
.md-p{font-size:13.5px; line-height:1.8; color:#4c5b70}
.md-lead{font-size:13px; font-weight:800; line-height:1.5; color:var(--green)}
.md-lead--err{color:#e0575c}   /* 신청 폼 오류 안내 (main.js) */
.md-h2{font-size:16px; font-weight:900; color:var(--ink)}

.md-quote{display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:10px;
  background:var(--soft); border-left:3px solid var(--blue); font-size:14px; line-height:1.7; color:#4c5b70}
.md-quote--green{border-left-color:var(--green)}
.md-quote--fill{background:var(--sky)}
.md-quote__h{font-size:14.5px; font-weight:900; color:var(--ink); line-height:1.6}
.md-quote__p{font-size:13px; line-height:1.7; color:var(--muted)}
.md-quote__n{font-size:12.5px; font-weight:700; color:var(--blue)}

.md-list{display:flex; flex-direction:column; gap:5px}
.md-list li{position:relative; padding-left:12px; font-size:13px; line-height:1.6; color:#4c5b70}
.md-list li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--blue)}
.md-list--green li::before{background:var(--green)}
.md-list i{font-style:italic}
.md-list b{font-weight:800; color:var(--ink)}

.md-box{padding:16px 18px; border-radius:10px; background:var(--soft); border-left:3px solid var(--blue);
  display:flex; flex-direction:column; gap:9px}
.md-box--blue{background:var(--sky)}
.md-box__h{font-size:14px; font-weight:900; color:var(--ink)}

.md-card{padding:16px 18px; border-radius:10px; background:#f7f9fc; border:1px solid #e6ebf2;
  display:flex; flex-direction:column; gap:8px}
.md-card__hd{display:flex; align-items:center; gap:9px}
.md-card__hd h4{font-size:15px; font-weight:900; color:var(--ink)}
.md-n{flex:none; width:22px; height:22px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900}

.md-cf{padding-top:8px; border-top:1px solid #e6ebf2; display:flex; flex-direction:column; gap:3px}
.md-cf__l{font-family:var(--en); font-size:11px; font-weight:900; letter-spacing:.6px; color:var(--blue)}
.md-cf__v{font-size:13px; line-height:1.6; color:var(--muted-2)}

/* 좌측 컬러바 항목 */
.md-side{padding-left:14px; border-left:3px solid var(--blue); display:flex; flex-direction:column; gap:5px}
.md-side h4{font-size:14px; font-weight:900; color:var(--ink)}
.md-side p{font-size:13px; line-height:1.75; color:#4c5b70}
.md-side--green{border-left-color:var(--green)}

/* 아이콘 */
.md-ico{flex:none; display:flex; align-items:center; justify-content:center}
.md-ico svg{width:17px; height:17px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.md-ico--box{width:30px; height:30px; border-radius:8px; background:var(--sky)}
.md-ico--round{width:34px; height:34px; border-radius:50%; background:var(--sky)}
.md-ico--solid{width:38px; height:38px; border-radius:50%; background:var(--blue)}
.md-ico--solid svg{stroke:#fff; width:19px; height:19px}

/* 3열 그리드 (KSA / 방향·경로·실행 / 강점 통계) */
.md-grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.md-mini,.md-key,.md-stat{display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px;
  padding:14px 12px; border-radius:10px; background:#f7f9fc; border:1px solid #e6ebf2}
.md-mini__l{font-family:var(--en); font-size:12px; font-weight:900; color:var(--blue)}
.md-mini__v{font-size:12.5px; line-height:1.5; color:var(--muted-2)}
.md-key{padding:16px 14px; gap:7px}
.md-key b{font-size:14px; font-weight:900; color:var(--ink)}
.md-key span{font-size:12px; line-height:1.6; color:var(--muted)}
.md-stat{padding:16px 12px; gap:6px}
.md-stat b{font-family:var(--en); font-size:16px; font-weight:900; color:var(--blue)}
.md-stat em{font-style:normal; font-size:13px; font-weight:900; color:var(--ink)}
.md-stat span{font-size:11.5px; line-height:1.6; color:var(--muted)}

/* 강조 리드 박스 */
.md-hero{display:flex; flex-direction:column; gap:8px; padding:18px 20px; border-radius:10px;
  background:var(--sky); border-left:3px solid var(--blue)}
.md-hero__en{font-family:var(--en); font-size:12px; font-weight:900; color:var(--blue)}
.md-hero__h{font-size:19px; font-weight:900; line-height:1.45; color:var(--ink)}

/* 직무이동경로 로드맵 이미지 */
.md-roadmap{display:flex; align-items:center; gap:10px; padding:12px; border-radius:10px;
  background:#f7f9fc; border:1px solid #e6ebf2}
.md-roadmap img{flex:1; min-width:0; height:150px; object-fit:contain}
.md-roadmap__arrow{flex:none; display:flex}
.md-roadmap__arrow svg{width:20px; height:20px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* 공통역량 표 */
.md-tblwrap{overflow-x:auto; border:1px solid #e6ebf2; border-radius:10px}
.md-tbl{width:100%; border-collapse:collapse; min-width:620px}
.md-tbl th,.md-tbl td{padding:12px; font-size:12.5px; line-height:1.6; color:var(--muted-2); text-align:left; vertical-align:middle}
.md-tbl thead th{background:#f0f4f9; padding:10px 12px; font-size:12.5px; font-weight:900; color:var(--ink); text-align:center}
.md-tbl thead .c1{width:130px}
.md-tbl thead .c2{width:210px}
.md-tbl tbody tr{border-top:1px solid #e6ebf2}
.md-tbl tbody td{border-left:1px solid #e6ebf2}
/* 첫 열(역량명)은 가운데 정렬.
   th 선택자(.md-tbl th)가 클래스만으로는 이겨서 요소까지 붙여 특이도를 올린다. */
.md-tbl th.md-tbl__k{width:130px; font-size:13px; font-weight:900; color:var(--blue); text-align:center}

/* 멘토 역할 그룹 */
.md-group{display:flex; flex-direction:column; gap:10px}
.md-group__hd{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; background:var(--sky)}
.md-group__hd--green{background:#e8f8f2}
.md-group__hd--green .md-n{background:var(--green)}
.md-group__en{font-family:var(--en); font-size:14px; font-weight:900; color:var(--blue)}
.md-group__hd--green .md-group__en{color:var(--green)}
.md-group__ko{font-size:14px; font-weight:800; color:var(--ink)}

/* IDP Step 카드 */
.md-step{display:flex; align-items:flex-start; gap:12px; padding:15px 16px; border-radius:10px;
  background:#f7f9fc; border:1px solid #e6ebf2}
.md-step__t{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px}
.md-step__hd{display:flex; align-items:center; gap:8px}
.md-step__hd b{font-size:15px; font-weight:900; color:var(--ink)}
.md-badge{border-radius:99px; padding:3px 8px; background:var(--blue); color:#fff;
  font-family:var(--en); font-size:10.5px; font-weight:900}

/* Action Plan 항목 */
.md-act{display:flex; align-items:flex-start; gap:12px; padding-left:14px; border-left:2px solid var(--blue)}
.md-act__t{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.md-act__hd{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.md-act__hd em{font-style:normal; font-size:15px; font-weight:900; color:var(--blue)}
.md-act__hd b{font-size:15px; font-weight:900; color:var(--ink)}
.md-act__hd span{font-size:12.5px; font-weight:700; color:var(--muted)}

/* 톤 변형 — step: blue/green/gold/violet, act: 여기에 red 추가 */
.md-step--green .md-ico,.md-act--green .md-ico{background:#e8f8f2}
.md-step--gold .md-ico,.md-act--gold .md-ico{background:#fdf3e4}
.md-act--red .md-ico{background:#fdeced}
.md-step--violet .md-ico,.md-act--violet .md-ico{background:#f1ecfd}
.md-step--green .md-ico svg,.md-act--green .md-ico svg{stroke:var(--green)}
.md-step--gold .md-ico svg,.md-act--gold .md-ico svg{stroke:#f0a63c}
.md-act--red .md-ico svg{stroke:#e0575c}
.md-step--violet .md-ico svg,.md-act--violet .md-ico svg{stroke:#7b5ce0}
.md-step--green .md-badge{background:var(--green)}
.md-step--gold .md-badge{background:#f0a63c}
.md-step--violet .md-badge{background:#7b5ce0}
.md-act--green{border-left-color:var(--green)}
.md-act--green .md-act__hd em{color:var(--green)}
.md-act--gold{border-left-color:#f0a63c}
.md-act--gold .md-act__hd em{color:#f0a63c}
.md-act--red{border-left-color:#e0575c}
.md-act--red .md-act__hd em{color:#e0575c}
.md-act--violet{border-left-color:#7b5ce0}
.md-act--violet .md-act__hd em{color:#7b5ce0}

/* 34개 재능 테마 4열 */
.md-themes{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.md-theme{border:1px solid #e6ebf2; border-radius:10px; overflow:hidden; background:#fff}
.md-theme__hd{display:flex; flex-direction:column; align-items:center; gap:2px; padding:11px 10px; background:var(--sky)}
.md-theme__hd b{font-size:13px; font-weight:900; color:var(--blue); text-align:center}
.md-theme__hd span{font-family:var(--en); font-size:9px; font-weight:700; color:var(--blue)}
.md-theme__sub{padding:8px 10px; background:#fbfcfe; font-size:11px; line-height:1.5; color:var(--muted); text-align:center}
.md-theme li{display:flex; align-items:center; gap:6px; padding:7px 10px; border-top:1px solid #eef2f7;
  font-size:11.5px; font-weight:700; color:#4c5b70}
.md-theme li::before{content:""; flex:none; width:4px; height:4px; border-radius:50%; background:var(--blue)}
.md-theme--violet .md-theme__hd{background:#f1ecfd}
.md-theme--violet .md-theme__hd b,.md-theme--violet .md-theme__hd span{color:#7b5ce0}
.md-theme--violet li::before{background:#7b5ce0}
.md-theme--gold .md-theme__hd{background:#fdf3e4}
.md-theme--gold .md-theme__hd b,.md-theme--gold .md-theme__hd span{color:#f0a63c}
.md-theme--gold li::before{background:#f0a63c}
.md-theme--green .md-theme__hd{background:#e8f8f2}
.md-theme--green .md-theme__hd b,.md-theme--green .md-theme__hd span{color:var(--green)}
.md-theme--green li::before{background:var(--green)}

/* 강점 활용: 테마 예시 + 2열 표 */
.md-theme-ex{display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:10px;
  background:var(--sky); border-left:3px solid var(--blue)}
.md-theme-ex b{font-size:16px; font-weight:900; color:var(--ink)}
.md-theme-ex p{margin-top:4px; font-size:13px; line-height:1.7; color:#4c5b70}
.md-cols2{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.md-col{border:1px solid #e6ebf2; border-radius:10px; overflow:hidden; background:#fff}
.md-col__hd{display:flex; align-items:center; gap:7px; padding:11px 14px}
.md-col__hd b{font-size:13.5px; font-weight:900}
.md-col__hd .md-ico svg{width:15px; height:15px}
.md-col li{display:flex; gap:7px; padding:10px 14px; border-top:1px solid #eef2f7;
  font-size:12.5px; line-height:1.6; color:#4c5b70}
.md-col li::before{content:""; flex:none; width:4px; height:4px; margin-top:7px; border-radius:50%}
.md-col--green .md-col__hd{background:#e8f8f2}
.md-col--green .md-col__hd b{color:var(--green)}
.md-col--green .md-col__hd .md-ico svg{stroke:var(--green)}
.md-col--green li::before{background:var(--green)}
.md-col--gold .md-col__hd{background:#fdf3e4}
.md-col--gold .md-col__hd b{color:#f0a63c}
.md-col--gold .md-col__hd .md-ico svg{stroke:#f0a63c}
.md-col--gold li::before{background:#f0a63c}

@media (max-width:900px){
  .modal{padding:14px}
  .modal__card{max-height:calc(100vh - 28px)}
  .modal__head{padding:20px}
  .modal__title{font-size:19px}
  .modal__body{padding:20px 14px 20px 20px}
  .modal__foot{padding:14px 20px}
  .md-grid3,.md-cols2{grid-template-columns:1fr}
  .md-themes{grid-template-columns:repeat(2,1fr)}
  .md-roadmap{flex-direction:column}
  .md-roadmap img{width:100%; height:auto}
  .md-roadmap__arrow{transform:rotate(90deg)}
}

/* =========================================================
   RESPONSIVE — PC → 모바일(320px)
   · 기존 규칙이 존재하지 않는 .mentor-band 를 잡고 있어 .mq 가 겹치던 문제 포함
   · 브레이크포인트: 1200 / 1024 / 900 / 768 / 560 / 400
   ========================================================= */

/* ---- 1024 이하: 풀페이지 해제 구간(일반 스크롤) ----
   격자 SVG는 hero.js가 preserveAspectRatio를 meet으로 바꿔 전체가 보이게 한다.
   캐릭터는 작게 줄여 본문을 피해 우측에 배치. */
@media (max-width:1024px){
  .hero__inner{padding-top:120px}
  .hero__gym{opacity:.85}
  .hero__char.c1{height:96px; right:4%; top:64%}
  .hero__char.c2{height:82px; left:auto; right:30%; top:57%}
  /* 격자 경로 끝점(viewBox 1200,140 ≈ 폭의 83%)에 붙여 혼자 떠 있지 않게 */
  .hero__char.c3{height:88px; right:9%; top:24%}
}
/* 560 이하: CTA가 전체폭이라 버튼 위를 피해 우측 여백에 배치 */
@media (max-width:560px){
  .hero__char.c1{height:62px; right:4%; top:40%}
  .hero__char.c2{height:54px; right:32%; top:46%}
  .hero__char.c3{height:58px; right:6%; top:30%}   /* 경로 끝점 근처 */
}

/* ---- 900 이하: 히어로 멘토배너를 문서 흐름으로 ---- */
@media (max-width:900px){
  /* static으로 두면 z-index가 무시돼 .hero__overlay(z-index:1)에 덮인다 → relative 유지 */
  .mq{
    position:relative; left:auto; bottom:auto; transform:none; width:auto;
    margin:32px var(--pad) 0; min-height:0;
    flex-direction:column; align-items:stretch; border-radius:12px;
  }
  /* 가로로 펼쳐지므로 줄바꿈 불필요 → 한 줄 + 가운데 정렬 */
  .mq__label{
    padding:12px 16px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1);
    white-space:nowrap; justify-content:center; text-align:center;
  }
  .mq__label br{display:none}
  .mq__body{padding:14px 16px; gap:10px; align-items:flex-start}
  .mq__mark{font-size:26px}
  .mq__side{
    flex-direction:row; align-items:center; justify-content:space-between; padding:10px 16px;
    border-left:0; border-top:1px solid rgba(255,255,255,.1);
  }
  .mq__count{flex:none; white-space:nowrap}
  .mq__bar{flex:1; width:auto; max-width:none; margin-left:14px}

  .hero{padding-bottom:36px}
  .hq{margin-top:20px}
  .hq__slide{min-height:0}
  .hero__actions{flex-wrap:wrap}
  .hero__actions .btn{flex:0 0 auto}   /* 반반으로 늘리지 않고 텍스트 폭에 맞춤 */
}

/* ---- 768 이하 ---- */
@media (max-width:768px){
  .modal__body{padding:20px 12px 20px 18px}
  .md-roadmap img{height:auto}
  .tl{gap:10px}
}

/* 멘토 포스터: 3열 유지하다 좁아지면 한 줄씩 */
@media (max-width:900px){
  .posters{gap:8px}
  .poster{height:170px; padding:10px}
  .poster img{width:110px; height:110px}
  .poster__q{font-size:24px}
}
@media (max-width:480px){
  .posters{grid-template-columns:minmax(0,1fr)}
  .poster{height:190px; padding:12px}
  .poster img{width:150px; height:150px}
  .poster__q{font-size:30px}
}

/* 2025 REVIEW: 5개를 한 줄에 넣으면 카드가 눌린다
   → 라벨을 위로 올리고(상하 정렬) 카드는 3개씩 줄바꿈 */
@media (max-width:1024px){
  .review{flex-direction:column; align-items:flex-start; gap:16px; padding:20px}
  .review__label{align-self:flex-start}
  .review__stats{width:100%; flex-wrap:wrap; gap:12px}
  .stat{flex:1 1 calc(33.333% - 8px); height:auto; min-height:124px}
}

/* ---- 560 이하: 본격 모바일 ---- */
@media (max-width:560px){
  .nav__inner{gap:10px}
  .nav__logo{gap:8px}
  .nav__logo img{height:26px}
  .nav__logo span{font-size:13px}

  .hero__inner{padding-top:104px}
  .kicker{font-size:11px; padding:8px 14px}
  .hq__slide h1{font-size:clamp(22px,7vw,30px)}
  .hero__sub p{font-size:14px}
  .hero__actions .btn{width:100%}

  /* 퀵버튼: 라벨 감추고 아이콘만 */
  .quick{gap:8px}
  .quick__btn{padding:0; width:48px; height:48px; justify-content:center; border-radius:50%}
  .quick__tx{display:none}
  .quick__btn:hover{transform:none}

  .stat{flex:1 1 calc(50% - 6px); min-height:112px; padding:14px}   /* 3개 → 2개 */
  .md-themes{grid-template-columns:minmax(0,1fr)}
  .md-tbl{min-width:480px}
  .modal__title{font-size:17px}
  .modal__eyebrow{font-size:11px}
}

/* ---- 400 이하: 320px 대응 ---- */
@media (max-width:400px){
  :root{--pad:14px}
  .nav__logo span{display:none}              /* 로고 + 텍스트가 2줄로 깨지는 것 방지 */
  .nav__logo img{height:24px}

  .hq__slide h1{font-size:20px; line-height:1.3}
  .hq__slide h1 br{display:none}             /* 이미 좁아 강제 줄바꿈이 오히려 방해 */
  .hero__sub p{font-size:13px}
  .hero__contact{font-size:11px}

  .kicker{font-size:10px; letter-spacing:0}
  .stat{flex:1 1 100%}                       /* 2개 → 1개 */
  .apply-side{padding:24px 18px}
  .apply-side__txt span{font-size:21px}
  .apply-side__char{margin:14px 0}
  .apply-side__char img{height:120px}
  .poster-zone{padding:20px 16px}
  .notice{padding:18px 16px}
  .notice__tm{display:none}                  /* 좁은 폭에서 제목 확보 */

  .modal{padding:8px}
  .modal__head{padding:16px}
  .modal__body{padding:16px 8px 16px 14px}
  .modal__foot{padding:12px 16px}
  .md-tbl{min-width:380px}
}

/* =========================================================
   공지 게시판 서브페이지 (목록 /notice · 상세 /notice/{id})
   랜딩과 달리 풀페이지 스크롤이 아닌 일반 문서 흐름.
   nav 는 항상 흰색(is-stuck) 상태이므로 상단 여백 70px 확보.
   ========================================================= */
.subpage{min-height:100vh; padding:calc(70px + 56px) 0 96px; background:var(--soft)}
.subpage__inner{width:min(1100px, calc(100% - var(--pad) * 2)); margin:0 auto}
.subpage__inner--narrow{width:min(880px, calc(100% - var(--pad) * 2))}

/* 페이지 헤더 */
.bd-head{margin-bottom:34px}
.bd-head__title{font-family:var(--display); font-weight:800; font-size:clamp(28px,3.2vw,38px); color:var(--ink); line-height:1.28; margin:12px 0 8px}
.bd-head__title em{color:var(--blue); font-style:normal}
.bd-head__desc{font-size:15px; color:var(--muted); line-height:1.7}

/* 유형 필터 */
.bd-filter{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.bd-filter__i{padding:9px 16px; border-radius:99px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:13.5px; font-weight:800; transition:background .18s, color .18s, border-color .18s}
.bd-filter__i:hover{border-color:var(--blue); color:var(--blue)}
.bd-filter__i.is-on{background:var(--blue); border-color:var(--blue); color:#fff}
.bd-filter__total{margin-left:auto; font-size:13px; color:var(--muted)}
.bd-filter__total b{color:var(--blue); font-weight:800}

/* 목록 */
.bd-list{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden}
.bd-item + .bd-item{border-top:1px solid var(--line)}
.bd-item a{display:flex; align-items:center; gap:16px; padding:18px 24px; transition:background .16s}
.bd-item a:hover{background:var(--sky)}
.bd-item__no{flex:none; width:38px; font-family:var(--en); font-size:13px; font-weight:700; color:#9aa8b8; text-align:center}
.bd-item__t{flex:1; min-width:0; display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--ink); line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bd-item a:hover .bd-item__t{color:var(--blue)}
.bd-item__clip{flex:none; width:14px; height:14px; fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.bd-item__d{flex:none; font-family:var(--en); font-size:13px; color:var(--muted); letter-spacing:.02em}

/* 빈 상태 */
.bd-empty{background:#fff; border:1px solid var(--line); border-radius:16px; padding:70px 20px; text-align:center}
.bd-empty img{width:96px; height:auto; opacity:.5; margin-bottom:14px}
.bd-empty p{font-size:14.5px; color:var(--muted)}

/* 페이지네이션 */
.bd-page{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:28px}
.bd-page__a{display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 6px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--muted); font-family:var(--en); font-size:13.5px; font-weight:700; transition:background .16s, color .16s, border-color .16s}
.bd-page__a:hover{border-color:var(--blue); color:var(--blue)}
.bd-page__a.is-on{background:var(--blue); border-color:var(--blue); color:#fff}
.bd-page__a svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* 상세 */
.bd-view{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden}
.bd-view__hd{padding:34px 34px 24px; border-bottom:1px solid var(--line)}
.bd-view__t{font-family:var(--display); font-weight:800; font-size:clamp(22px,2.4vw,28px); color:var(--ink); line-height:1.4; margin:12px 0 10px; word-break:keep-all}
.bd-view__meta{font-family:var(--en); font-size:13px; color:var(--muted)}

/* 첨부 */
.bd-view__file{display:flex; align-items:center; gap:10px; padding:16px 34px; background:var(--sky); border-bottom:1px solid var(--line)}
.bd-view__file svg{flex:none; width:16px; height:16px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.bd-view__file a{font-size:14px; font-weight:700; color:var(--blue); text-decoration:underline; text-underline-offset:3px; word-break:break-all}

/* 본문 (에디터가 생성한 HTML) */
.bd-view__body{padding:34px; font-size:15.5px; line-height:1.85; color:#3a475a; word-break:keep-all; overflow-wrap:anywhere}
.bd-view__body > *:first-child{margin-top:0}
.bd-view__body > *:last-child{margin-bottom:0}
.bd-view__body p{margin:0 0 1em}
.bd-view__body h1,.bd-view__body h2,.bd-view__body h3,.bd-view__body h4{font-family:var(--display); color:var(--ink); font-weight:800; line-height:1.4; margin:1.6em 0 .6em}
.bd-view__body h1{font-size:24px}
.bd-view__body h2{font-size:21px}
.bd-view__body h3{font-size:18px}
.bd-view__body h4{font-size:16px}
.bd-view__body ul,.bd-view__body ol{margin:0 0 1em; padding-left:1.4em}
.bd-view__body li{margin-bottom:.4em}
.bd-view__body ul{list-style:disc}
.bd-view__body ol{list-style:decimal}
.bd-view__body a{color:var(--blue); text-decoration:underline; text-underline-offset:3px}
.bd-view__body strong,.bd-view__body b{font-weight:800; color:var(--ink)}
.bd-view__body blockquote{margin:0 0 1em; padding:12px 18px; border-left:3px solid var(--blue); background:var(--sky); color:var(--muted-2)}
.bd-view__body img{max-width:100%; height:auto; border-radius:10px; margin:8px 0}
.bd-view__body hr{border:0; border-top:1px solid var(--line); margin:2em 0}
.bd-view__body table{width:100%; border-collapse:collapse; margin:0 0 1em; font-size:14px}
.bd-view__body th,.bd-view__body td{border:1px solid var(--line); padding:10px 12px; text-align:left}
.bd-view__body th{background:var(--soft); font-weight:800; color:var(--ink)}
.bd-view__body iframe{max-width:100%; border-radius:12px; aspect-ratio:16/9; height:auto}
.bd-view__none{color:var(--muted); text-align:center; padding:30px 0}

/* 이전/다음 글 */
.bd-nav{margin-top:20px; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden}
.bd-nav__a{display:flex; align-items:center; gap:18px; padding:16px 24px; transition:background .16s}
.bd-nav__a + .bd-nav__a{border-top:1px solid var(--line)}
.bd-nav__a:hover{background:var(--sky)}
.bd-nav__l{flex:none; display:inline-flex; align-items:center; gap:6px; width:88px; font-size:13px; font-weight:800; color:var(--muted)}
.bd-nav__l svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.bd-nav__t{flex:1; min-width:0; font-size:14.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bd-nav__a:hover .bd-nav__t{color:var(--blue)}

/* 하단 버튼 */
.bd-back{display:flex; justify-content:center; gap:10px; margin-top:34px; flex-wrap:wrap}
/* 밝은 배경용 ghost 버튼 (기본 .btn--ghost 는 어두운 배경 전용) */
.btn--ghost.btn--dark{background:#fff; color:var(--muted-2); border:1px solid var(--line)}
.btn--ghost.btn--dark:hover{border-color:var(--blue); color:var(--blue)}

/* 랜딩 게시판 섹션: 제목 ↔ 전체보기 양끝 정렬 */
.notice__hd{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.notice__hd h3{margin-bottom:0}
.notice__more{flex:none; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--blue); white-space:nowrap}
.notice__more svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.notice__more:hover{text-decoration:underline; text-underline-offset:3px}
.notice__more:hover svg{transform:translateX(2px)}
.notice__more svg{transition:transform .18s}

@media (max-width:768px){
  .subpage{padding:calc(70px + 32px) 0 64px}
  .bd-item a{flex-wrap:wrap; gap:8px 12px; padding:16px}
  .bd-item__no{display:none}
  .bd-item__t{flex:1 1 100%; white-space:normal; order:2}
  .bd-item__d{order:3; margin-left:auto}
  .bd-view__hd{padding:24px 18px}
  .bd-view__body{padding:24px 18px}
  .bd-view__file{padding:14px 18px}
  .bd-nav__a{padding:14px 16px; gap:12px}
  .bd-nav__l{width:auto}
  .bd-filter__total{flex:1 1 100%; margin-left:0; text-align:right}
}

/* =========================================================
   챗봇 퀴즈 이벤트 (커피쿠폰)
   퀴즈 진행 중에는 챗봇 패널을 넓혀 문제를 편히 풀도록 한다.
   ========================================================= */
.chat.is-quiz{width:560px}
.chat.is-quiz .chat__body{height:440px}
.chat.is-quiz .chat__input{display:none}   /* 퀴즈 중엔 자유 입력창 숨김 */
@media (max-width:900px){
  .chat.is-quiz{width:calc(100vw - 28px)}
  .chat.is-quiz .chat__body{height:min(60vh, 460px)}
}

/* 진행 상태 헤더 (문항 진행바) */
.qz-prog{display:flex; align-items:center; gap:10px; padding:2px 2px 6px}
.qz-prog__bar{flex:1; height:6px; border-radius:99px; background:var(--line); overflow:hidden}
.qz-prog__bar i{display:block; height:100%; width:0; background:var(--green); border-radius:99px; transition:width .3s ease}
.qz-prog__n{flex:none; font-size:12px; font-weight:800; color:var(--muted)}

/* 안내 배너 */
.qz-intro{background:linear-gradient(135deg, #eaf5ff, #e8f8f2); border-radius:14px; padding:16px 16px 14px; text-align:center}
.qz-intro__ico{font-size:26px; line-height:1}
.qz-intro__t{font-size:14.5px; font-weight:900; color:var(--ink); margin:6px 0 4px}
.qz-intro__p{font-size:12.5px; color:var(--muted-2); line-height:1.6}
.qz-intro__rule{display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:10px}
.qz-intro__rule span{font-size:11px; font-weight:700; color:var(--blue); background:#fff; border-radius:99px; padding:5px 10px}

/* 참가 정보 폼 */
.qz-form{display:flex; flex-direction:column; gap:10px}
.qz-form label{display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; color:var(--muted-2)}
.qz-form input{height:42px; padding:0 13px; border:1px solid var(--line); border-radius:10px; font-family:inherit; font-size:13.5px; color:var(--ink); outline:none; transition:border-color .16s}
.qz-form input:focus{border-color:var(--green)}
.qz-form .qz-err{font-size:11.5px; color:#e0575c; min-height:0}

/* 공통 버튼 */
.qz-btn{height:44px; border-radius:10px; background:var(--green); color:#fff; font-family:inherit; font-size:14px; font-weight:800; cursor:pointer; transition:background .16s; border:0}
.qz-btn:hover{background:#0aa877}
.qz-btn:disabled{opacity:.55; cursor:default}
.qz-btn--ghost{background:#fff; color:var(--muted-2); border:1px solid var(--line)}
.qz-btn--ghost:hover{background:var(--soft); color:var(--ink)}

/* 문제 카드 */
.qz-q{display:flex; flex-direction:column; gap:12px}
.qz-q__lv{align-self:flex-start; font-size:10.5px; font-weight:900; letter-spacing:.04em; color:var(--blue); background:#eaf5ff; border-radius:99px; padding:4px 10px}
.qz-q__lv--inter{color:var(--green); background:#e8f8f2}
.qz-q__t{font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.55; word-break:keep-all}
.qz-opts{display:flex; flex-direction:column; gap:8px}
.qz-opt{display:flex; align-items:flex-start; gap:10px; text-align:left; padding:12px 13px; border:1.5px solid var(--line); border-radius:11px; background:#fff; font-family:inherit; font-size:13.5px; line-height:1.5; color:var(--ink); cursor:pointer; transition:border-color .14s, background .14s; word-break:keep-all}
.qz-opt:hover{border-color:var(--green); background:#f4fdf9}
.qz-opt.is-sel{border-color:var(--green); background:#e8f8f2}
.qz-opt__n{flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--muted)}
.qz-opt.is-sel .qz-opt__n{background:var(--green); border-color:var(--green); color:#fff}
.qz-q__nav{display:flex; gap:8px; margin-top:2px}
.qz-q__nav .qz-btn{flex:1}

/* 결과 */
.qz-result{text-align:center; padding:8px 4px}
.qz-result__ico{font-size:44px; line-height:1}
.qz-result__t{font-size:17px; font-weight:900; color:var(--ink); margin:10px 0 4px}
.qz-result__score{font-family:var(--en); font-size:14px; font-weight:800; color:var(--green)}
.qz-result__score b{font-size:30px}
.qz-result__p{font-size:13px; color:var(--muted-2); line-height:1.65; margin-top:10px}
.qz-result--fail .qz-result__score{color:var(--muted)}
.qz-result__actions{display:flex; flex-direction:column; gap:8px; margin-top:18px}

/* 캘린더 빈 상태 (DB에 일정이 없을 때) */
.cal-empty{padding:28px 8px; text-align:center; font-size:13px; color:var(--muted)}

/* 커리어 무브먼트 사례 — 단일 원본 이미지(가로형)를 크게 보여준다 */
.md-roadmap--single{padding:14px}
.md-roadmap--single img{width:100%; height:auto; max-height:none; object-fit:contain; border-radius:8px}

/* 멘토 블라인드 포스터 — 관리자 등록 이미지(문구 포함)를 그대로 노출 */
.poster--img{padding:0; border:0; background:transparent; display:block; height:190px}
.poster--img img{position:static; transform:none; width:100%; height:100%; object-fit:cover; border-radius:8px}
.poster--img:hover img{transform:none}
.posters__empty{grid-column:1/-1; padding:40px 8px; text-align:center; font-size:13px; color:var(--muted)}
@media (max-width:900px){ .poster--img{height:170px} }

/* ===== 멘토 포스터 릴레이: 개수가 늘어나도 항상 한 줄 =====
   4개 이상이면 가로로 넘기는 슬라이더가 된다. 카드 폭·높이·줄 수가
   고정이므로 포스터를 몇 개 등록하든 06 BOARD 섹션 높이는 그대로다.
   overflow:hidden 이라 휠 스크롤을 가로채지 않아 fullpage 동작도 안전하다. */
.posters-slider{position:relative; margin-top:22px}
.poster-zone .posters{margin-top:0}
.posters{
  --pv:3;                                   /* 한 화면에 보일 카드 수 */
  --gap:10px;
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--pv) - 1) * var(--gap)) / var(--pv));
  gap:var(--gap);
  overflow:hidden;
  scroll-behavior:smooth;
}
.posters-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:30px; height:30px; border-radius:50%; border:0; padding:0;
  display:grid; place-items:center; cursor:pointer;
  background:#fff; color:var(--navy-2);
  box-shadow:0 4px 14px rgba(8,20,40,.32);
  transition:opacity .18s, transform .18s;
}
.posters-nav svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.posters-nav:hover:not(:disabled){transform:translateY(-50%) scale(1.12)}
.posters-nav:disabled{opacity:.28; cursor:default}
.posters-nav[hidden]{display:none}
.posters-nav--prev{left:-14px}
.posters-nav--next{right:-14px}
@media (max-width:900px){ .posters{--gap:8px} }
@media (max-width:480px){ .posters{--pv:1} }

/* ===== 04 Videos: 영상 준비 전 상태 =====
   config/landing.php 의 'ready' => FALSE 일 때 재생 버튼 대신 노출된다.
   영상이 올라오면 TRUE 로 바꾸면 원래 재생 버튼으로 돌아간다. */
.vid__soon{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:10px 20px; border-radius:99px; white-space:nowrap;
  background:rgba(10,22,40,.62); border:1px solid rgba(255,255,255,.34);
  color:#fff; font-size:14px; font-weight:800; letter-spacing:-.2px;
  backdrop-filter:blur(2px);
}
.vid--short .vid__soon{padding:8px 14px; font-size:12px}

/* ===== 모바일: 배너 설명 문구 가독성 =====
   좁은 화면에서 문구 폭이 100% 로 늘어나 캐릭터와 겹치면서
   흐린 흰색(0.8) 글자가 묻혀 보이지 않는 문제. 굵기·대비를 올린다. */
@media (max-width:900px){
  .banner__p{
    font-weight:800;
    color:#fff;
    text-shadow:0 1px 3px rgba(8,20,40,.55);
  }
  .banner__h{text-shadow:0 1px 3px rgba(8,20,40,.45)}
  /* 캐릭터를 우측 하단으로 내리고 줄여 제목·설명과 겹치지 않게 한다 */
  .banner__img{width:132px; height:132px; right:2%; top:auto; bottom:6px}
}