@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700;800;900&display=swap');

/* =========================
   CAREER PAGE BASE
========================= */

.career-page{
  background:
    radial-gradient(circle at 15% 8%, rgba(67,118,255,0.16), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(17,208,255,0.08), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(255,196,87,0.08), transparent 26%),
    linear-gradient(180deg, #070a12 0%, #0b1020 30%, #0b1222 58%, #070e18 100%);
  color:#eef4ff;
  overflow-x:hidden;
  font-family:'Pretendard', sans-serif;
}

.career-page section{
  position:relative;
  padding:110px 0;
}

.career-page section + section{
  margin-top:0;
}

.career-page .section-inner{
  width:min(90%, 1200px);
  margin:0 auto;
  position:relative;
  z-index:2;
}

.career-page .section-inner.narrow{
  max-width:900px;
  text-align:center;
}

.career-page .section-label{
  display:inline-flex;
  align-items:center;
  margin-bottom:16px;
  padding:8px 15px;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  color:#9ec5ff;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.career-page .section-head{
  margin-bottom:34px;
}

.career-page h1,
.career-page h2,
.career-page h3{
  margin:0;
  line-height:1.2;
  word-break:keep-all;
}

.career-page h1{
  font-size:clamp(2.5rem, 5vw, 4.6rem);
  font-weight:900;
  letter-spacing:-0.04em;
}

.career-page h2{
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:800;
  letter-spacing:-0.03em;
}

.career-page h3{
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:-0.02em;
}

.career-page h1 span,
.career-page h2 span{
  color:#8fc1ff;
}

.career-page p{
  margin:0;
  color:rgba(232,240,255,0.78);
  font-size:1.02rem;
  line-height:1.85;
  word-break:keep-all;
}

.career-page img{
  display:block;
  width:100%;
  height:auto;
}

.career-page .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:172px;
  min-height:56px;
  padding:14px 24px;
  border-radius:999px;
  text-decoration:none;
  font-size:1rem;
  font-weight:700;
  transition:all 0.25s ease;
}

.career-page .btn-primary{
  color:#fff;
  background:linear-gradient(135deg, #7bb6ff 0%, #4b7dff 100%);
  box-shadow:0 18px 36px rgba(75,125,255,0.24);
}

.career-page .btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 44px rgba(75,125,255,0.3);
}

.career-page .btn-secondary{
  color:#eef4ff;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.16);
}

.career-page .btn-secondary:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,0.08);
}

/* =========================
   HERO
========================= */

.career-page .career-hero{
  padding:160px 0 90px;
}

.career-page .career-hero-grid{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:44px;
  align-items:center;
}

.career-page .career-hero-copy{
  max-width:560px;
}

.career-page .hero-lead{
  margin-top:22px;
  color:#f2f7ff;
  font-size:1.22rem;
  font-weight:700;
  line-height:1.75;
}

.career-page .hero-desc{
  margin-top:20px;
}

.career-page .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}

.career-page .career-hero-visual{
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  box-shadow:0 26px 56px rgba(0,0,0,0.28);
}

.career-page .career-hero-visual img{
  aspect-ratio:16 / 10;
  object-fit:cover;
}

/* =========================
   OVERVIEW
========================= */

.career-page .career-overview{
  padding-top:70px;
}

.career-page .overview-box{
  padding:42px;
  border-radius:32px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 44px rgba(0,0,0,0.18);
}

.career-page .overview-content{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:26px;
}

.career-page .overview-content p{
  max-width:920px;
}

.career-page .overview-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.career-page .overview-tags span{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(143,193,255,0.10);
  border:1px solid rgba(143,193,255,0.16);
  color:#dfeeff;
  font-size:0.95rem;
  font-weight:600;
}

/* =========================
   FLOW
========================= */

.career-page .flow-list{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.career-page .flow-item{
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 16px 38px rgba(0,0,0,0.22);
}

.career-page .flow-step{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(120,170,255,0.12);
  border:1px solid rgba(120,170,255,0.22);
  color:#86b6ff;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:0.04em;
}

.career-page .flow-body h3{
  margin-bottom:12px;
}

/* PC 전용 중앙 정렬 */
@media (min-width: 769px){
  .career-page .flow-item{
    display:flex;
    align-items:center;
    gap:28px;
    padding:28px 30px;
  }

  .career-page .flow-step{
    flex:0 0 132px;
    min-width:132px;
  }

  .career-page .flow-body{
    flex:1;
  }
}

/* =========================
   COMPARE
========================= */

.career-page .career-compare{
  background:linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.03) 100%);
}

.career-page .compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:28px;
}

.career-page .compare-card{
  padding:34px 30px;
  border-radius:30px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 18px 36px rgba(0,0,0,0.18);
}

.career-page .compare-card.compare-primary{
  background:linear-gradient(180deg, rgba(90,140,255,0.14) 0%, rgba(255,255,255,0.05) 100%);
  border-color:rgba(125,177,255,0.22);
}

.career-page .compare-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  height:36px;
  padding:0 14px;
  margin-bottom:18px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.10);
  color:#cfe1ff;
  font-size:0.9rem;
  font-weight:700;
}

.career-page .compare-time{
  margin-top:10px;
  color:#aecdff;
  font-weight:700;
}

.career-page .compare-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0;
  margin:24px 0;
  list-style:none;
}

.career-page .compare-list li{
  position:relative;
  padding-left:18px;
  color:rgba(240,245,255,0.9);
  font-size:1rem;
  line-height:1.75;
  word-break:keep-all;
}

.career-page .compare-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8fc1ff;
}

.career-page .compare-note{
  padding:18px 18px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  color:rgba(232,240,255,0.78);
  line-height:1.8;
}

.career-page .compare-table-wrap{
  overflow-x:auto;
}

.career-page .compare-table{
  min-width:760px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
}

.career-page .compare-row{
  display:grid;
  grid-template-columns:220px 1fr 1fr;
}

.career-page .compare-row + .compare-row{
  border-top:1px solid rgba(255,255,255,0.08);
}

.career-page .compare-col{
  padding:18px 20px;
  color:rgba(240,245,255,0.88);
  line-height:1.7;
  word-break:keep-all;
}

.career-page .compare-col + .compare-col{
  border-left:1px solid rgba(255,255,255,0.08);
}

.career-page .compare-head-row{
  background:rgba(255,255,255,0.07);
}

.career-page .compare-head-row .compare-col{
  font-weight:800;
  color:#fff;
}

.career-page .title-col{
  font-weight:700;
  color:#d9e8ff;
}

/* =========================
   RECOMMEND
========================= */

.career-page .recommend-board{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.career-page .recommend-group{
  padding:30px 28px;
  border-radius:28px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
}

.career-page .recommend-group strong{
  display:block;
  margin-bottom:16px;
  color:#fff;
  font-size:1.22rem;
  font-weight:800;
}

.career-page .recommend-group ul{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.career-page .recommend-group li{
  position:relative;
  padding-left:18px;
  color:rgba(240,245,255,0.88);
  font-size:1rem;
  line-height:1.8;
  word-break:keep-all;
}

.career-page .recommend-group li::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8fc1ff;
}

/* =========================
   EFFECT
========================= */

.career-page .effect-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 22px;
}

.career-page .effect-item{
  padding:0 0 18px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.career-page .effect-item strong{
  display:block;
  margin-bottom:10px;
  color:#fff;
  font-size:1.12rem;
  font-weight:800;
}

/* =========================
   GUIDE
========================= */

.career-page .guide-table{
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
}

.career-page .guide-row{
  display:grid;
  grid-template-columns:220px 1fr;
}

.career-page .guide-row + .guide-row{
  border-top:1px solid rgba(255,255,255,0.08);
}

.career-page .guide-key,
.career-page .guide-value{
  padding:22px 24px;
  line-height:1.8;
  word-break:keep-all;
}

.career-page .guide-key{
  background:rgba(255,255,255,0.05);
  border-right:1px solid rgba(255,255,255,0.08);
  color:#dceaff;
  font-weight:800;
}

.career-page .guide-value{
  color:rgba(240,245,255,0.86);
}

/* =========================
   GALLERY
========================= */

.career-page .career-gallery{
  padding-top:70px;
}

.career-page .gallery-intro{
  max-width:760px;
  margin-top:16px;
}

.career-page .gallery-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}

.career-page .gallery-card{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:28px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 44px rgba(0,0,0,0.20);
  text-decoration:none;
}

.career-page .gallery-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.14) 100%);
  opacity:0;
  transition:opacity 0.25s ease;
  pointer-events:none;
}

.career-page .gallery-card img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  transition:transform 0.45s ease;
}

.career-page .gallery-card:hover img{
  transform:scale(1.04);
}

.career-page .gallery-card:hover::after{
  opacity:1;
}

/* =========================
   CTA
========================= */

.career-page .career-cta{
  padding-top:100px;
  padding-bottom:140px;
}

.career-page .career-cta h2{
  margin-bottom:16px;
}

.career-page .career-cta p{
  max-width:760px;
  margin:0 auto;
}

.career-page .cta-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}

/* =========================
   FOOTER
========================= */

.career-page .footer{
  border-top:1px solid rgba(255,255,255,0.08);
  background:rgba(4,7,13,0.6);
}

.career-page .footer-inner{
  width:min(90%, 1200px);
  margin:0 auto;
  padding:32px 0 42px;
  text-align:center;
}

.career-page .footer-logo{
  margin-bottom:10px;
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:0.12em;
  color:#fff;
}

.career-page .footer p{
  font-size:0.94rem;
  color:rgba(232,240,255,0.62);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px){
  .career-page .career-hero-grid,
  .career-page .compare-grid,
  .career-page .recommend-board,
  .career-page .effect-list{
    grid-template-columns:1fr;
  }

  .career-page .career-hero-copy{
    max-width:100%;
  }
}

@media (max-width: 768px){
  .career-page section{
    padding:84px 0;
  }

  .career-page .career-hero{
    padding:134px 0 72px;
  }

  .career-page .hero-lead{
    font-size:1.08rem;
  }

  .career-page p{
    font-size:0.98rem;
    line-height:1.8;
  }

  .career-page .hero-actions,
  .career-page .cta-actions{
    flex-direction:column;
  }

  .career-page .btn{
    width:100%;
    min-width:auto;
  }

  .career-page .overview-box,
  .career-page .compare-card,
  .career-page .recommend-group{
    padding:28px 22px;
    border-radius:22px;
  }

  .career-page .guide-row{
    grid-template-columns:1fr;
  }

  .career-page .guide-key{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }

  .career-page .gallery-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .career-page .gallery-card{
    border-radius:22px;
  }

  .career-page .flow-item{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:24px 22px;
  }

  .career-page .flow-step{
    min-width:auto;
    width:auto;
    padding:5px 18px;
  }

  .career-page .flow-body{
    display:block;
  }

  .career-page .compare-table-wrap{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .career-page .compare-table{
    width:100%;
    max-width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    border:none;
    background:transparent;
  }

  .career-page .compare-row{
    width:100%;
    max-width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.03) 100%);
  }

  .career-page .compare-row + .compare-row{
    border-top:1px solid rgba(255,255,255,0.08);
  }

  .career-page .compare-head-row{
    display:none;
  }

  .career-page .compare-col{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    padding:14px 16px;
    border:none;
    white-space:normal;
    word-break:keep-all;
    overflow-wrap:break-word;
  }

  .career-page .compare-col + .compare-col{
    border-left:none;
  }

  .career-page .compare-row .compare-col.title-col{
    background:rgba(255,255,255,0.05);
    color:#fff;
    font-weight:800;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }

  .career-page .compare-row .compare-col:not(.title-col){
    padding:14px 16px;
    line-height:1.7;
    color:rgba(255,255,255,0.84);
  }

  .career-page .compare-row .compare-col:nth-child(2)::before,
  .career-page .compare-row .compare-col:nth-child(3)::before{
    display:block;
    position:static;
    margin-bottom:6px;
    font-size:0.9rem;
    font-weight:800;
    color:#86b6ff;
  }

  .career-page .compare-row .compare-col:nth-child(2)::before{
    content:"진로직업체험";
  }

  .career-page .compare-row .compare-col:nth-child(3)::before{
    content:"진로특강";
  }

  .career-page .compare-row .compare-col:nth-child(3){
    border-top:1px solid rgba(255,255,255,0.08);
    margin-top:2px;
    padding-top:16px;
  }
}

@media (max-width: 540px){
  .career-page section{
    padding:72px 0;
  }

  .career-page h1{
    font-size:2.15rem;
  }

  .career-page h2{
    font-size:1.72rem;
  }

  .career-page .section-label{
    font-size:0.73rem;
    padding:7px 12px;
  }

  .career-page .career-hero-visual{
    border-radius:20px;
  }

  .career-page .overview-box{
    padding:24px 18px;
  }

  .career-page .flow-item{
    padding:22px 18px;
    border-radius:20px;
  }

  .career-page .compare-card{
    padding:24px 18px;
  }

  .career-page .recommend-group{
    padding:24px 18px;
  }

  .career-page .guide-key,
  .career-page .guide-value{
    padding:18px 16px;
  }

  .career-page .career-gallery{
    padding-top:56px;
  }
}