:root {
  --navy: #0C2C68;
  --navy-deep: #071F57;
  --navy-light: #123D8C;

  --orange: #FF6B00;

  --white: #FFFFFF;

  --text: #111111;
  --gray: #666666;

  --bg-light: #F5F5F5;
  --border: #E8E8E8;

  --container: 1280px;

  --section-padding: 140px;
  --radius: 28px;

  --shadow:
    0 10px 30px rgba(0,0,0,0.06);
}

/* =========================
   RESET
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Pretendard', sans-serif;
  background: #ffffff;
  color: var(--text);

  padding-top: 80px;
}

img {
  width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* =========================
   COMMON
========================= */

.container {
  width: 100%;
  max-width: var(--container);

  margin: 0 auto;
  padding: 0 24px;
}

/* =========================
   NAVBAR
========================= */

.navbar {
  background: #0C2C68;
  padding: 24px 0;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo span {
  color: var(--orange);
}

.logo {
  color: var(--white);

  font-size: 20px;
  font-weight: 800;

  letter-spacing: 1px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-menu a {
  color: rgba(255,255,255,0.8);

  font-size: 15px;

  transition: 0.2s;
}

.nav-menu a:hover {
  color: var(--white);
}

.nav-btn {
  background: var(--orange);
  color: var(--white);

  padding: 14px 24px;
  border-radius: 10px;

  font-size: 14px;
  font-weight: 600;
}

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

.hero-content {
  background: linear-gradient(
    to bottom right,
    #071A40 0%,
    #0C2C68 50%,
    #1A4FA8 100%
  );
  padding: 90px 0 120px;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 100px;
}

/* HERO LEFT */

.hero-text {
  flex: 1;
}

.hero-badge {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; background: rgba(255, 107, 0, 0.14); border: 1px solid rgba(255, 107, 0, 0.28); color: #FF8B38; font-size: 13px; font-weight: 700; margin-bottom: 30px;
}

.hero-text h1 {
  color: white; font-size: 72px; line-height: 1.1; font-weight: 800; letter-spacing: -2px; margin-bottom: 30px;
}

.hero-text h1 span { color: var(--orange); }

.hero-text p {
  color: rgba(255,255,255,0.72); font-size: 18px; line-height: 1.8; margin-bottom: 42px;
}

/* HERO BUTTONS */

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.primary-btn {
  background: var(--orange); color: white; height: 58px; padding: 0 28px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
}

.secondary-btn {
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);

  padding: 18px 28px;
  border-radius: 12px;

  font-size: 15px;
  font-weight: 500;
}

/* HERO RIGHT */

.hero-image {
  flex-shrink: 0;
}

.hero-image img {
  width: 420px; height: 560px; object-fit: cover; border-radius: 20px; box-shadow: 20px 20px 4px rgba(0,0,0,0.25);
}

/* =========================
   SECTION COMMON
========================= */

.section-header {
  text-align: center;

  margin-bottom: 64px;
}

.section-badge {
  display: inline-block;

  background: #E9EEFA;
  color: var(--navy);

  padding: 10px 18px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;

  margin-bottom: 24px;
}


/* =========================
   WHY SECTION
========================= */

.why-section {
  background: #F8F9FB;

  padding: var(--section-padding) 0;
}

.section-header h2 {
  font-size: 52px;
  line-height: 1.3;
  font-weight: 800;

  color: var(--navy);

  margin-bottom: 20px;
}

.section-header p {
  font-size: 18px;
  line-height: 1.8;

  color: var(--gray);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 24px;
}

.why-card {
  background: #FFFFFF;

  padding: 36px 30px;

  border-radius: 28px;

  transition: 0.25s ease;
}

.why-card:hover { transform: translateY(-4px); }

.why-icon {
  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(253, 111, 34, 0.1);

  border-radius: 18px;

  font-size: 26px;

  margin-bottom: 24px;
}

.why-card h3 {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 600;

  letter-spacing: -0.3px;

  color: var(--navy);

  margin-bottom: 16px;
}

.why-card p {
  font-size: 16px;
  line-height: 1.8;

  color: var(--gray);
}

/* =========================
   BEST PROGRAM
========================= */

.best-section {
  padding: var(--section-padding) 0;
  background: #F5F5F5;
}

.best-title {
  margin-bottom: 56px;
}

.best-title h2 {
  margin-top: 24px;

  font-size: 64px;
  line-height: 1.2;
  font-weight: 800;

  color: var(--navy);
}

/* GRID */

.program-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 24px;
}

/* CARD */

.program-card {
  position: relative;

  height: 250px;

  padding: 28px;

  overflow: hidden;
}

/* COLORS */

.blue-card {
  background:
    linear-gradient(
      to bottom,
      #173F88 0%,
      #1E58A5 100%
    );
}

.navy-card {
  background:
    linear-gradient(
      to bottom,
      #001A57 0%,
      #0C2C68 100%
    );
}

.orange-card {
  background:
    linear-gradient(
      to bottom,
      #D85700 0%,
      #FF6B00 100%
    );
}

/* CONTENT */

.program-card-content {
  position: absolute;

  left: 28px;
  bottom: 28px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 34px;

  padding: 0 14px;

  border-radius: 999px;

  background: rgba(255,255,255,0.18);

  color: rgba(255,255,255,0.95);

  font-size: 13px;
  font-weight: 700;

  margin-bottom: 18px;
}

.program-card-content h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 800;

  color: white;

  margin-bottom: 10px;
}

.program-card-content p {
  font-size: 15px;
  min-height: 44px;

  color: rgba(255,255,255,0.82);
}

/* ICON */

.icon {
  position: absolute;

  top: 24px;
  right: 24px;

  font-size: 34px;
}

/* =========================
   CASE SECTION
========================= */

.case-section {
  padding: var(--section-padding) 0;
  background: var(--navy);
}

.case-title {
  text-align: center;

  margin-bottom: 42px;
}

.dark-badge {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
}

.case-title h2 {
  margin-top: 24px;
  margin-bottom: 18px;

  font-size: 64px;
  line-height: 1.2;
  font-weight: 800;

  color: white;
}

.case-title p {
  font-size: 18px;
  line-height: 1.7;

  color: rgba(255,255,255,0.72);
}

.orange-badge { background: rgba(253, 111, 34, 0.12); color: #FD6F22; }


/* CATEGORY */

.case-category {
  display: flex;
  justify-content: flex-start;
  gap: 14px;

  margin-bottom: 48px;
}

.case-category button {
  height: 42px;

  padding: 0 20px;

  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;

  background: transparent;
  color: rgba(255,255,255,0.8);

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
}

.case-category .active {
  background: var(--orange);
  border-color: var(--orange);

  color: white;
}

/* GRID */

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  contain: layout paint;
}

/* ITEM */

.case-item {
  position: relative;

  height: 260px;

  overflow: hidden;

  transform: translateZ(0);
  will-change: transform;
}

.case-item img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* OVERLAY */

.case-overlay { 
  position: absolute; 
  inset: 0; display: 
  flex; align-items: 
  flex-end; padding: 28px; 
  
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.82),
    rgba(0,0,0,0)
  );
  will-change: transform;

}

.case-overlay h3 {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;

  color: white;

  word-break: keep-all;
  overflow-wrap: normal;
  line-height: 1.4;
}

.case-overlay h3 br {
  display: block;
}

/* SPECIAL BG */

.blue-bg {
  background:
    linear-gradient(
      to bottom,
      #1180C4,
      #1D5EA8
    );
}

.green-bg {
  background:
    linear-gradient(
      to bottom,
      #2FAE66,
      #258B53
    );
}


/* =========================
   CASE POPUP
========================= */

.case-popup {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  display: none;
  justify-content: center;
  align-items: center;

  z-index: 9999;
}

.case-popup.active {
  display: flex;
}

/* BACKGROUND */

.case-popup-bg {
  position: absolute;

  width: 100%;
  height: 100%;

  background: rgba(15, 23, 42, 0.92);

  backdrop-filter: blur(4px);
}

/* CONTENT */

.case-popup-content {
  position: relative;

  width: 90%;
  max-width: 900px;
  max-height: 90vh;

  overflow-y: auto;

  background: #ffffff;

  border-radius: 24px;

  z-index: 2;

  padding: 0;
}

/* HEADER */

.case-popup-header {
  position: sticky;
  top: 0;

  z-index: 20;

  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(255, 255, 255, 0.98);

  backdrop-filter: blur(8px);

  padding: 24px 32px 20px;

  border-bottom: 1px solid #e5e7eb;
}

/* TITLE */

.case-popup-header h3 {
  font-size: 28px;
  font-weight: 700;

  color: #0f172a;
}

/* CLOSE BUTTON */

.case-popup-close {
  border: none;
  background: transparent;

  color: #0f172a;

  font-size: 28px;

  cursor: pointer;

  flex-shrink: 0;
}

/* IMAGES */

.case-popup-images {
  padding: 32px;
}

.case-popup-images img {
  width: 100%;

  border-radius: 20px;

  margin-bottom: 20px;

  display: block;
}

/* MOBILE */

@media (max-width: 768px) {

  .case-popup-content {
    width: 94%;
    border-radius: 20px;
  }

  .case-popup-header {
    padding: 20px;
  }

  .case-popup-images {
    padding: 20px;
  }

  .case-popup-header h3 {
    font-size: 22px;
  }

}

/* =========================
   SERVICE PROCESS SECTION
========================= */

.service-process-section {
  padding: var(--section-padding) 0;
  background: #F5F5F5;
}

/* PROCESS LINE */

.process-line { position: relative; display: flex; justify-content: space-between; margin-top: 72px; }
/* LINE */

.process-line::before { content: ""; position: absolute; top: 28px; left: 10%; right: 10%; height: 4px; border-radius: 999px; background: linear-gradient( to right, #0C2C68 0%, #1A4FA8 45%, #FD6F22 100% ); z-index: 0; }

/* STEP */

.process-step {
  position: relative;

  width: 20%;

  text-align: center;

  z-index: 2;
}

/* CIRCLE */

.process-circle {
  width: 58px;
  height: 58px;

  margin: 0 auto 32px;

  border-radius: 50%;

  background: var(--navy);
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  font-weight: 800;
}

.process-circle.orange {
  background: var(--orange);
}

/* TEXT */

.process-step h3 {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;

  color: var(--navy);

  margin-bottom: 18px;
}

.process-step p {
  font-size: 15px;
  line-height: 1.8;

  color: var(--gray);

  padding: 0 10px;
}

/* =========================
   FAQ SECTION
========================= */

.faq-section {
  padding: var(--section-padding) 0;
  background: white;
}

/* GRID */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

  margin-top: 64px;
}

/* CARD */

.faq-card {
  position: relative;
  background: #FFFFFF;
  border: none;
  border-left: 5px solid #FD6F22;
  border-radius: 16px;
  padding: 36px 32px 36px 36px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.06);
}

/* TITLE */

.faq-card h3 {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;

  color: var(--navy);

  margin-bottom: 20px;
}

/* TEXT */

.faq-card p {
  font-size: 16px;
  line-height: 1.8;

  color: var(--gray);
}

/* =========================
   CONTACT SECTION
========================= */

.contact-section {
  padding: var(--section-padding) 0;
  background: var(--navy);
}

/* TITLE */

.contact-title {
  text-align: center;

  margin-bottom: 64px;
}

.contact-title h2 {
  margin-top: 24px;
  margin-bottom: 20px;

  font-size: 64px;
  line-height: 1.2;
  font-weight: 800;

  color: white;
}

.contact-title p {
  font-size: 18px;
  line-height: 1.7;

  color: rgba(255,255,255,0.72);
}

/* FORM */

.contact-form {
  max-width: 980px;

  margin: 0 auto;
}

/* ROW */

.contact-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

  margin-bottom: 20px;
}

/* INPUT */

.input-group {
  display: flex;
  flex-direction: column;
}

.input-group label {
  font-size: 15px;
  font-weight: 600;

  color: rgba(255,255,255,0.82);

  margin-bottom: 12px;
}

.input-group input,
.input-group textarea {
  width: 100%;

  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);

  border-radius: 16px;

  padding: 18px 20px;

  color: white;

  font-size: 16px;
  font-family: inherit;

  outline: none;
}

.input-group textarea {
  height: 180px;

  resize: none;

  margin-top: 20px;
}

.required {
  color: #ff7a00;
  font-weight: 600;
}

/* PLACEHOLDER */

.input-group input::placeholder,
.input-group textarea::placeholder {
  color: rgba(255,255,255,0.38);
}

/* BUTTON */

.contact-submit {
  width: 100%;

  height: 64px;

  border: none;
  border-radius: 16px;

  margin-top: 24px;

  background: var(--orange);
  color: white;

  font-size: 17px;
  font-weight: 700;

  cursor: pointer;
}

.contact-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* INFO */

.contact-info {
  display: flex;
  justify-content: center;
  gap: 32px;

  margin-top: 42px;

  color: rgba(255,255,255,0.72);

  font-size: 15px;
}


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

.footer {
  background: #071F57;

  padding: 42px 0;
}

/* INNER */

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO */

.footer-logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;

  color: white;
}

.footer-logo span {
  color: var(--orange);
}

/* CENTER */

.footer-center {
  text-align: center;
}

.footer-center p {
  font-size: 15px;
  line-height: 1.9;

  color: rgba(255,255,255,0.45);
}

/* MENU */

.footer-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.footer-menu a {
  font-size: 15px;
  color: rgba(255,255,255,0.55);

  transition: 0.2s;
}

.footer-menu a:hover {
  color: white;
}

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

/* =========================
   1200px
========================= */
@media (max-width: 1200px) {

  .hero-inner {
    gap: 60px;
  }

  .hero-text h1 {
    font-size: 60px;
  }

  .hero-image img {
    width: 360px;
    height: 500px;
  }
}

/* =========================
   1024px
========================= */
@media (max-width: 1024px) {

  .hero-inner {
    flex-direction: column;

    align-items: flex-start;

    gap: 48px;
  }

  .hero-text {
    width: 100%;
  }

  .hero-text h1 {
    font-size: 56px;
    line-height: 1.18;
  }

  .hero-text p {
    font-size: 16px;
  }

  .hero-image {
    width: 100%;
  }

  .hero-image img {
    width: 100%;
    height: 340px;

    max-width: 100%;

    object-fit: cover;

    border-radius: 24px;
  }
}

/* =========================
   860px
========================= */
@media (max-width: 860px) {
  .hero-text h1 {
    font-size: 48px;
  }
}

/* =========================
   768px (핵심 모바일 테이블 구간)
========================= */
@media (max-width: 768px) {

  /* NAV */
  .nav-menu {
    display: none;
  }

  /* TEXT BR 제거 */
  .section-header h2 br,
  .section-header p br {
    display: none;
  }

  /* WHY */
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* BEST */
  .best-title h2 {
    font-size: 42px;
    line-height: 1.25;
  }

  .program-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* CASE */
  .case-title h2 {
    font-size: 42px;
    line-height: 1.25;
  }

  .case-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .case-category {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* PROCESS */
  .process-line {
    flex-wrap: wrap;
    row-gap: 48px;
  }

  .process-line::before {
    display: none;
  }

  .process-step {
    width: 33.333%;
  }

  .process-step:nth-child(4),
  .process-step:nth-child(5) {
    width: 50%;
  }

  /* FAQ */
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* CONTACT INFO RESPONSIVE */
  .contact-info {
    flex-direction: column;

    align-items: center;

    gap: 14px;

    text-align: center;
  }

  
}

/* =========================
   540px (모바일)
========================= */
@media (max-width: 540px) {

  .why-grid {
    grid-template-columns: 1fr;
  }

  .program-grid {
    grid-template-columns: 1fr;
  }

  .case-grid {
    grid-template-columns: 1fr;
  }

  .process-step,
  .process-step:nth-child(4),
  .process-step:nth-child(5) {
    width: 100%;
  }
}

html {
  scroll-behavior: smooth;
}