/* =========================================================
   UHAKPEOPLE PROMO CSS (Á¤¸®º»)
   - ÆÛÇà ±×¶óµ¥ÀÌ¼Ç È÷¾î·Î + ±Û·¡½º Ä«µå
   - Flip Ä«¿îÆ®´Ù¿î
   - CTA ÅëÀÏ
   - HERO Ư¡ 3¹Ú½º(Áß¾ÓÁ¤·Ä)
   - PC: À̹ÌÁö Ç®Æø(ÁÂ) + ÅؽºÆ® ÄÁÅ×ÀÌ³Ê °íÁ¤(¿ì)
   - Mobile: ½ºÅÃ(±âº») À¯Áö
========================================================= */
@charset "UTF-8";
/* =========================================================
   UHAKPEOPLE PROMO CSS
========================================================= */
/* =========================
   0) TOKENS
   0) TOKENS
========================= */
:root{
  /* base */
  --promo-text:#0f172a;
  --promo-muted:#64748b;
  --promo-bg:#ffffff;

  /* purple scale */
  --promo-purple-50:#f6f3ff;
  --promo-purple-100:#efe9ff;
  --promo-purple-200:#e2d6ff;
  --promo-purple-300:#cbb7ff;
  --promo-purple-500:#7c5cff;
  --promo-purple-600:#6a4de6;
  --promo-purple-700:#5136c9;

  /* hero deep purple */
  --promo-hero-1:#1b1029;
  --promo-hero-2:#24143a;
  --promo-hero-3:#2b1846;

  /* surfaces */
  --promo-glass:rgba(255,255,255,.10);
  --promo-glass-border:rgba(180,160,255,.25);

  /* misc */
  --promo-radius:18px;
  --promo-shadow:0 18px 60px rgba(0,0,0,.18);
}
 :root{
    --purple:#6B3FA0; --purple-dark:#4E2D79; --purple-light:#EDE5F7;
    --accent:#FF6B6B; --text:#1A1A1A; --muted:#666; --bg:#FFFFFF; --radius:14px;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Pretendard,Apple SD Gothic Neo,Malgun Gothic,sans-serif;color:var(--text);background:var(--bg);}
  .container{max-width:1120px;margin:0 auto;padding:0 20px}
  .ribbon{background:var(--purple-dark);color:#fff;text-align:center;padding:8px 12px;font-size:14px}
  .ribbon b{color:#FFE8AA}
  header.hero{background:linear-gradient(135deg,var(--purple),var(--purple-dark));color:#fff;padding:48px 0 40px;position:relative}
  .hero .title{font-size:34px;line-height:1.3;margin:0 0 12px}
  .hero .subtitle{font-size:17px;opacity:.95;margin:0 0 20px}
  .countdown{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 0}
  .cd-box{background:#fff;color:var(--purple-dark);padding:12px 14px;border-radius:12px;min-width:84px;text-align:center}
  .cd-box .num{font-weight:800;font-size:22px}
  .cd-box .lab{font-size:12px;color:var(--muted)}
  .hero-card{background:#fff;color:var(--text);border-radius:var(--radius);padding:16px;margin-top:18px;box-shadow:0 10px 28px rgba(0,0,0,.12)}
  .grid{display:grid;gap:20px}
  @media(min-width:960px){ .grid-2{grid-template-columns:1.2fr .8fr} }
  section{padding:48px 0}
  h2{font-size:26px;margin:0 0 12px;color:var(--purple-dark)}
  p.lead{color:#333;font-size:17px}
  .badge{display:inline-block;background:var(--purple-light);color:var(--purple-dark);padding:6px 10px;border-radius:999px;font-size:12px;margin-bottom:10px}
  .card{background:#fff;border:1px solid #eee;border-radius:12px;padding:18px}
  .benefits{display:grid;gap:14px}
  @media(min-width:880px){ .benefits{grid-template-columns:repeat(3,1fr)} }
  .benefit h3{margin:0 0 6px;font-size:18px}
  .benefit p{margin:0;color:#444;font-size:14px}
  .countries{display:flex;flex-wrap:wrap;gap:8px}
  .chip{background:#f7f2ff;color:var(--purple-dark);padding:8px 12px;border-radius:999px;font-size:13px;border:1px solid #e9ddff}
  .table{width:100%;border-collapse:collapse;font-size:14px}
  .table th,.table td{border:1px solid #eee;padding:12px;text-align:left}
  .table th{background:#faf7ff}
  .quote{background:var(--purple-light);border-left:4px solid var(--purple);padding:16px;border-radius:10px}
  .cta{display:inline-flex;align-items:center;gap:8px;background:var(--purple);color:#fff;padding:14px 18px;border:none;border-radius:12px;font-weight:700;cursor:pointer;text-decoration:none}
  .cta.secondary{background:#fff;color:var(--purple);border:2px solid var(--purple)}
  .notice{color:var(--accent);font-weight:600}
  form{display:grid;gap:12px}
  input,select,textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:10px;font-size:15px}
  .form-row{display:grid;gap:12px}
  @media(min-width:720px){ .form-row{grid-template-columns:1fr 1fr} }
  footer{padding:40px 0;background:#faf7ff;color:#444}
  .small{font-size:12px;color:#777}
  .p-0-cont{padding-left:0;padding-right:0}
/* =========================
   1) BASE
========================= */
*{box-sizing:border-box}
body{margin:0;background:var(--promo-bg);color:var(--promo-text);}
.promo-wrap{background:#fff;color:var(--promo-text);}
.promo-container{max-width:1120px;margin:0 auto;padding:0 20px;}

/* =========================
   2) RIBBON
========================= */
.promo-ribbon,
.ribbon{
  background:linear-gradient(90deg, rgba(124,92,255,.14), rgba(203,183,255,.14));
  color:#111;
  border-bottom:1px solid rgba(15,23,42,.08);
  text-align:center;
  padding:10px 12px;
  font-size:14px;
}
.promo-ribbon b,
.ribbon b{color:var(--promo-purple-600);}

/* =========================
   3) HERO (¹è°æ/ŸÀÌÆ÷)
========================= */
.promo-hero,
header.hero{
  position:relative;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(140,97,255,.18), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(98,70,170,.22), transparent 55%),
    linear-gradient(180deg, var(--promo-hero-1) 0%, var(--promo-hero-2) 45%, var(--promo-hero-3) 100%) !important;
  color:#F4F1FF !important;
  padding:48px 0 40px;
  overflow:hidden;
}

header.hero .title,
header.hero .subtitle{
  color:#F5F3FF !important;
  opacity:1 !important;
}

.promo-hero-grid,
header.hero .grid{
  display:grid;
  gap:18px;
  align-items:stretch;
}



.promo-hero-textbox {
  background: rgba(25, 15, 40, 0.94); /* ºÒÅõ¸íµµ ¡è */
  border: 1px solid rgba(180, 160, 255, 0.28);
  border-radius: 22px;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.25),
    0 12px 48px rgba(80, 40, 160, 0.35); /* ÀÔü°¨ ÀÖ´Â ÆÛÇà ±×¸²ÀÚ */
  padding: 40px 44px;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
}

.promo-hero-textbox:hover {
  transform: translateY(-4px);
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.28),
    0 16px 56px rgba(124, 92, 255, 0.4);
}

.countdown-digital {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  font-family: 'Roboto Mono', 'Pretendard Variable', monospace;
  font-weight: 700;
  font-size: 36px;
  color: #F8F7FF;           /* Ä«µå ¹è°æ À§ °¡µ¶¼º ÀÖ´Â ÅؽºÆ® »ö»ó */
  letter-spacing: 1px;
	
  margin-top: 24px;     /* À§ ¿ä¼Ò(¹öÆ°)¿ÍÀÇ °£°Ý */
  margin-bottom: 12px;  /* ¾Æ·¡ ¿ä¼Ò(¸¶°¨ ¾È³»)¿ÍÀÇ °£°Ý */	
}

.countdown-digital span {
  display: inline-block;
  text-align: center;
}

.countdown-digital .colon {
  opacity: 0.5;
  margin: 0 2px;
}

.countdown-digital .unit {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 2px;
  margin-right: 6px;
  position: relative;
  top: -2px;
}

.promo-deadline {
  text-align: center;
  font-size: 15px;
  color: #E5DEFF;
  margin-top: 4px;      /* ¡é ±âÁ¸º¸´Ù °£°Ý ÁÙÀÓ */
  font-weight: 400;
  line-height: 1.4;     /* ¼ýÀÚ °£°Ý ±ÕÇü */
}

.promo-deadline strong {
  color: #FFF;
  font-weight: 400;
}

#country-chips .chip {
  cursor: pointer;
  transition: all 0.25s ease;
}
#country-chips .chip.active {
  background: var(--promo-purple-600);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

.region-info {
  margin-top: 24px;
}

.region-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  padding: 18px;
}

.region-card img {
  flex: 1 1 280px;
  min-width: 240px;
  border-radius: 12px;
  width: 100%;
  object-fit: cover;
}

.region-text {
  flex: 2 1 360px;
  min-width: 280px;
}
.region-text h3 {
  margin: 0 0 8px;
  color: var(--promo-purple-700);
  font-size: 20px;
}
.region-text p {
  margin: 0;
  color: #444;
  line-height: 1.6;
}
/* =========================================================
   COST SECTION
   - ºñ¿ë ¾È³» Ä«µå (ÁÂ: ÃѺñ¿ë / ¿ì: ³»¿ª)
   - ¹ÝÀÀÇü ´ëÀÀ
========================================================= */

/* =========================================================
   ºñ¿ë ¾È³» ¼½¼Ç (Cost Section)
   - ÁÂ¿ì ²Ë Âù ÇüÅÂ
   - Çпø ¼Ò°³ ¼½¼Ç°ú Åæ ÀÏÄ¡
========================================================= */

#cost {
  background: var(--purple-light);
  padding: 80px 0;
}

.cost-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

#cost h2 {
  font-size: 28px;
  color: var(--promo-purple-700);
  margin-bottom: 24px;
  /* text-align Á¦°Å ¡æ °øÅë ±ÔÄ¢ µû¶ó°¨ */
}


/* =========================
   FLOW SECTION (Á¤Àû ±×¸®µå)
   - PC: 3¿­, 4°³ ÀÌ»óÀº ÀÚµ¿ ÁٹٲÞ
   - Mobile: 1¿­
========================= */

#flow {
  background: #fff;
  padding: 60px 0 40px;
}

/* Ä«µå ±×¸®µå */
#flow .flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

/* Ä«µå µðÀÚÀÎ (ÇöÀç ¸¶À½¿¡ µç »çÀÌÁî À¯Áö) */
#flow .flow-card{
  background: #ffffff;

  /* Å׵θ®: ±âÁ¸º¸´Ù ÁøÇÏ°Ô */
  border: 1px solid rgba(124,92,255,0.28);

  /* ±×¸²ÀÚ: ·¹À̾î 2´ÜÀ¸·Î ¼±¸íµµ È®º¸ */
  box-shadow:
    0 6px 18px rgba(124,92,255,0.08),
    0 2px 6px rgba(0,0,0,0.04);

  border-radius: 18px;
  padding: 22px 22px;
  width: 340px;
  flex: 0 0 auto;
  white-space: normal;
  text-align: left;
  position: relative;
}

@media (hover:hover){
  #flow .flow-card:hover{
    border-color: rgba(124,92,255,0.45);
    box-shadow:
      0 12px 28px rgba(124,92,255,0.16),
      0 4px 10px rgba(0,0,0,0.06);
    transform: translateY(-2px);
    transition: all .25s ease;
  }
}

/* STEP ¶óº§ */
#flow .flow-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  color: var(--promo-purple-600);
  margin-bottom: 10px;
}

#flow .flow-step::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--promo-purple-600);
  box-shadow: 0 0 0 4px rgba(124,92,255,0.18);
}

/* Á¦¸ñ */
#flow .flow-item-title {
  font-size: 18px;
  font-weight: 900;
  color: #2b1846;
  margin-bottom: 8px;
  line-height: 1.25;
}

/* ¼³¸í */
#flow .flow-desc {
  font-size: 14px;
  color: #444;
  line-height: 1.55;
}

/* ÇÏ´Ü Ä«ÇÇ */
#flow .flow-copy {
  margin-top: 20px;
  padding: 14px 16px;
  background: rgba(124,92,255,.08);
  border: 1px solid rgba(124,92,255,.16);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #2b1846;
}

/* =========================
   ¹ÝÀÀÇü
========================= */

/* ÅÂºí¸´ ÀÌÇÏ: 2¿­ */
@media (max-width: 1024px) {
  #flow .flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ¸ð¹ÙÀÏ: 1¿­ */
@media (max-width: 768px) {
  #flow .flow-grid {
    grid-template-columns: 1fr;
  }

  #flow .flow-card {
    width: 100%;  	  
    padding: 20px 18px;
  }
}


/* °øÅë container */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Ãßõ Çпø */
#school {
  background: #fff;
  padding: 80px 0 60px;
}

#school .promo-h3 {
  font-size: 22px;
  color: var(--purple-dark);
  margin-bottom: 20px;
}

.school-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  padding: 40px;
  position: relative;   /* absolute ÀÖÀ¸¸é Á¦°Å */	
}

.promo-grid-2 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.school-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.school-img {
  width: 280px;
  min-height: 180px;
  border-radius: 14px;
  overflow: hidden;
  background: #f1f5f9;
  flex-shrink: 0;
}
.img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #94a3b8;
}

.school-info {
  flex: 2 1 360px;
  min-width: 280px;
}

.school-info h4 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #2b1846;
}

.school-info p {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 16px;
}

.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ºñ¿ë ¾È³» */
#cost {
  background: var(--purple-light);
  padding: 48px 0;   /* ±âÁ¸ 80px ¡æ 48px */
}

#cost h2 {
  font-size: 28px;
  color: var(--promo-purple-700);
  text-align: center;
  margin-bottom: 24px;  /* ±âÁ¸ 40px ¡æ 24px */
}

.cost-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  padding: 36px 44px;   /* ±âÁ¸ 50px 60px ¡æ Ãà¼Ò */
}

.cost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 60px;
}
.cost-caution {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(124, 92, 255, 0.08);
  border: 1px solid rgba(124, 92, 255, 0.22);
  border-radius: 12px;
  font-size: 14px;
  color: #3b1f66;
}
@media (max-width: 960px) {
  .cost-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .cost-card {
    padding: 28px 20px;
  }
}
.cost-regular {
  font-size: 14px;
  color: #9aa0a6;
  text-decoration: line-through;
  margin-bottom: 6px;
}
.cost-discount {
  font-size: 15px;
  font-weight: 700;
  color: var(--promo-purple-600);
  margin-top: 6px;
}
.cost-right .cost-label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
}
.cost-left {
  border-right: 1px dashed rgba(0, 0, 0, 0.12);
  padding-right: 40px;
}
@media (max-width: 960px) {
  .cost-left {
    border-right: none;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
    padding-right: 0;
    padding-bottom: 24px;
  }
}

.cost-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--promo-purple-600);
  margin-bottom: 12px;
}

.cost-value {
  font-size: 38px;
  font-weight: 800;
  color: var(--promo-purple-700);
  line-height: 1.2;
}


.cost-value .cost-usd {
  margin-right: 8px;
}

.cost-value .cost-krw {
  font-size: 30px;
  font-weight: 800;
  color: var(--promo-purple-700);
  
}

.cost-value .sub {
  font-size: 17px;
  font-weight: 500;
  color: #444;
  display: block;
  margin-top: 4px;
}

.cost-note {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.cost-right h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--promo-purple-700);
  margin-bottom: 14px;
}

.cost-right ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.cost-right li {
  padding-left: 18px;
  position: relative;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.6;
  margin-bottom: 10px;	
}

.cost-right li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: var(--promo-purple-600);
  font-size: 18px;
  line-height: 1;
}

.cost-disclaimer {
  font-size: 13px;
  color: #777;
}

@media (max-width:768px){
  .promo-deadline {
    font-size: 14px;
    margin-top: 6px;
  }
}

@media(max-width:768px){
  .countdown-digital { font-size: 26px; }
  .countdown-digital .unit { font-size: 12px; margin-right:4px; }
}

@media (max-width: 979.98px) {
  /* À̹ÌÁö ¼½¼Ç ¼û±è */
  .promo-hero-media {
    display: none !important;
  }

  /* Ä«µåÇü ÇØÁ¦ ¡æ Ǯȭ¸é ÅؽºÆ® ºí·ÏÀ¸·Î Àüȯ */
  .promo-hero-textbox {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 32px 20px 40px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  /* ÅؽºÆ® »ö»ó ´ëºñ À¯Áö */
  .promo-title,
  .promo-sub,
  .promo-hero-card {
    color: #F5F3FF !important;
  }

  /* CTA ¹öÆ°Àº °¡·ÎÆø È®Àå */
  .promo-cta-row {
    flex-direction: column;
    gap: 10px;
  }

  .promo-btn {
    width: 100%;
    text-align: center;
  }
}




@media(min-width:980px){
  .promo-hero-grid,
  header.hero .grid.grid-2{grid-template-columns:1.25fr .75fr;}
}

.promo-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  font-size:13px;
}
.promo-badge .dot{
  width:8px;height:8px;border-radius:999px;
  background:var(--promo-purple-500);
}

.promo-title,
header.hero .title{
  font-size:38px;
  line-height:1.18;
  margin:12px 0 10px;
  color:#F5F3FF;
  letter-spacing:-0.02em;
}
@media(max-width:540px){
  .promo-title,
  header.hero .title{font-size:30px;}
}

.promo-sub,
header.hero .subtitle{
  font-size:16px;
  margin:0 0 18px;
  max-width:56ch;
  color:#E2DBFF;
}

/* =========================
   4) HERO INFO CARD
========================= */
.promo-hero-card,
header.hero .hero-card{
  background:var(--promo-glass);
  border:1px solid var(--promo-glass-border);
  border-radius:var(--promo-radius);
  padding:16px;
  backdrop-filter: blur(10px);
  color:#F1EEFF;
}
.promo-hero-card h3,
header.hero .hero-card h3{
  margin:0 0 8px;
  color:#F5F3FF;
}
.promo-hero-card p,
header.hero .hero-card p{
  margin:0;
  color:#DDD6FF;
}

/* =========================
   5) HERO IMAGE (񃧯)
========================= */
.promo-hero-media,
.hero-image-wrap{
  position:relative;
  border-radius:var(--promo-radius);
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  min-height:320px;
  background:#120b1b;
}
.promo-hero-media img,
.hero-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.05);
}

/* ¿äû: '°¡¼ººñ/ÇýÅñ¸¼º' ¸»Ç³¼± Á¦°Å(À־ ¼û±è) */
.promo-media-overlay,
.promo-price-pill{display:none !important;}

/* =========================
   6) COUNTDOWN (Flip)
========================= */
.promo-countdown,
header.hero .countdown{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.promo-cd,
header.hero .cd-box{
  padding:0;
  min-width:92px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(180,160,255,.35);
  color:#2b1846;
}

.flip{
  position:relative;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.flip .cur,
.flip .next{
  position:absolute;
  left:0; right:0;
  top:10px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
  letter-spacing:.5px;
  line-height:1;
  color:#3b1f66;
}
.flip .cur{opacity:1; transform:translateY(0);}
.flip .next{opacity:0; transform:translateY(14px);}

.flip .lab{
  position:absolute;
  bottom:10px;
  font-size:12px;
  color:#6b5aa6;
}

.flip.flip-anim .cur{
  opacity:0;
  transform:translateY(-14px);
  transition:transform .22s ease, opacity .22s ease;
}
.flip.flip-anim .next{
  opacity:1;
  transform:translateY(0);
  transition:transform .22s ease, opacity .22s ease;
}

/* (ȣȯ) ±âÁ¸ ¼ýÀÚ ±¸Á¶ */
header.hero .cd-box .num{font-weight:900;font-size:22px;color:#3b1f66;}
header.hero .cd-box .lab{font-size:12px;color:#6b5aa6;}

/* =========================
   7) CTA
========================= */
.promo-cta-row,
header.hero .cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.cta,
.promo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
  border:0;
}

.cta,
.promo-btn.primary{
  background:var(--promo-purple-500);
  color:#fff;
  box-shadow:0 10px 26px rgba(124,92,255,.30);
}
.cta:hover,
.promo-btn.primary:hover{background:var(--promo-purple-600);}

.cta.secondary,
.promo-btn.ghost{
  background:transparent;
  color:#EDE9FF;
  border:1px solid rgba(200,180,255,.60);
}
.cta.secondary:hover,
.promo-btn.ghost:hover{background:rgba(255,255,255,.08);}


/* ±âº» PC (ÇÑ ÁÙ Á¤·Ä) */
.form-row.triple {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form-row.triple input,
.form-row.triple select {
  flex: 1;
  min-width: 0;
}

/* ? ¸ð¹ÙÀÏ (¼¼·Î ÇÑ ÁÙ¾¿) */
@media (max-width: 768px) {
  .form-row.triple {
    flex-direction: column;
    gap: 8px;
  }
}

.review-section {
  overflow: hidden;
  position: relative;
}

.review-marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.review-track {
  display: inline-flex;
  gap: 20px;
  animation: scrollLeft linear infinite;
  animation-duration: 120s;
}

.review-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  width: 440px;
  flex: 0 0 auto;
  flex-shrink: 0; /* Ä«µå°¡ ´­¸®°Å³ª À߸®Áö ¾Êµµ·Ï */	
}


.review-card .quote {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  margin: 0 0 10px;

  /* ?? µÎ ÁÙ±îÁö¸¸ Ç¥½Ã + ¿µ¿ª ¹®Á¦ ÇØ°á */
  display: -webkit-box;
  -webkit-line-clamp: 4; /* µÎ ÁÙ±îÁö¸¸ Ç¥½Ã */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* ¡¦À¸·Î ¸¶¹«¸® */
  white-space: normal; /* flex ³»ºÎ¿¡¼­µµ ÀÚµ¿ ÁÙ¹Ù²Þ Çã¿ë */
}


.review-card .author {
  font-weight: 600;
  text-align: right;
  color: var(--promo-purple-700);
}

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* º¹Á¦µÈ Ä«µå±îÁö À̵¿ */
}

/* hover ½Ã ¸ØÃã ¿É¼Ç */
.review-marquee:hover .review-track {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  .review-card { width: 280px; padding: 22px 18px; }
  .review-track { animation-duration: 40s; }
}

/* =========================
   REVIEW ? Mobile¿¡¼­´Â Flowó·³ Á¤Àû ¸®½ºÆ®
========================= */
@media (max-width: 768px) {

  /* ¸¶Äû µ¿ÀÛ Á¦°Å */
  .review-marquee {
    overflow: visible;
  }

  .review-track {
    display: grid;              /* flex ¡æ grid */
    grid-template-columns: 1fr; /* ÇÑ ÁÙ¿¡ Çϳª */
    gap: 16px;
    animation: none !important; /* È帧 Á¦°Å */
    transform: none !important;
  }

  /* Ä«µå Æø °íÁ¤ Á¦°Å */
  .review-card {
    width: 100%;
    padding: 22px 20px;
  }
}


/* °³ÀÎÁ¤º¸ µ¿ÀÇ ¿µ¿ª Á¤·Ä */
.agree {
  margin: 15px 0 25px;
}

.agree label {
  display: flex;
  align-items: center;
  gap: 8px; /* üũ¹Ú½º¿Í ¹®Àå »çÀÌ ¿©¹é */
  font-weight: 600;
  font-size: 14px;
  color: #222;
}

/* üũ¹Ú½º Å©±â »ì¦ Å°¿ò */
.agree input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
/* =========================
   8) HERO Ư¡ 3¹Ú½º (Áß¾ÓÁ¤·Ä)
   - HTML¿¡¼­ ¾Æ·¡ ±¸Á¶·Î »ç¿ë:
     <div class="hero-feature-grid">
       <div class="benefit-card hero-feature"><strong>ºñ¿ë ´ëºñ È¿°ú</strong></div>
       ...
     </div>
========================= */
.hero-feature-grid{
  display:grid;
  gap:14px;
  margin-top:18px;
  max-width:520px;
}
@media(min-width:560px){
  .hero-feature-grid{grid-template-columns:repeat(3,1fr);}
}
.benefit-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(180,160,255,.22);
  border-radius:var(--promo-radius);
  padding:14px;
  color:#F1EEFF;
  backdrop-filter: blur(6px);
}
.hero-feature{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px 12px;
}
.hero-feature strong{
  margin:0;
  font-size:15px;
  font-weight:800;
  color:#F5F3FF;
  line-height:1.2;
}
.hero-feature span{display:none;}

/* =========================
   9) SECTION / CARDS / GRID
========================= */
.promo-section,
section{padding:52px 0;}

.promo-h2,
h2{font-size:26px;margin:0 0 10px;}

.promo-lead,
p.lead{
  color:var(--promo-muted);
  font-size:16px;
  margin:0 0 18px;
  
}

.promo-card,
.card{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--promo-radius);
  padding:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

.promo-grid{display:grid;gap:14px;}
@media(min-width:920px){ .promo-grid-3{grid-template-columns:repeat(3,1fr);} }
@media(min-width:920px){ .promo-grid-2{grid-template-columns:1fr 1fr;} }

.promo-iconline{display:flex;gap:10px;align-items:flex-start;}
.promo-ic{
  width:34px;height:34px;border-radius:10px;
  background:rgba(124,92,255,.10);
  border:1px solid rgba(124,92,255,.22);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:var(--promo-purple-600);
  flex:0 0 auto;
}

/* =========================
   10) GALLERY
========================= */
.promo-gallery{display:grid;gap:10px;}
@media(min-width:900px){ .promo-gallery{grid-template-columns:1fr 1fr 1fr;} }
.promo-gallery .g{
  border-radius:16px;
  overflow:hidden;
  background:#120b1b;
  min-height:160px;
  border:1px solid rgba(15,23,42,.08);
}
.promo-gallery img{width:100%;height:100%;object-fit:cover;display:block;}

/* =========================
   11) FORM
========================= */
form{display:grid;gap:12px}
input,select,textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  padding:12px;
  font-size:15px;
  background:#fff;
}

/* =========================
   12) STICKY MOBILE CTA
========================= */
.promo-sticky{
  position:fixed; left:0; right:0; bottom:0;
  padding:10px 14px;
  background:rgba(255,255,255,.92);
  border-top:1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(12px);
  display:flex; gap:10px;
  z-index:9999;
}
.promo-sticky a{flex:1;}
@media(min-width:980px){ .promo-sticky{display:none;} }

/* =========================================================
   13) DESKTOP: À̹ÌÁö Ç®Æø(ÁÂ) + ÅؽºÆ® ÄÁÅ×ÀÌ³Ê °íÁ¤(¿ì)
   - ÇÙ½É ¿ä±¸»çÇ×
========================================================= */
@media (min-width:980px){

  /* HERO´Â Ç®Æø À¯Áö, ÄÁÅ×À̳ʰ¡ ¿©¹é ´ã´ç */
  .promo-hero{
    padding-top: 84px;
    padding-bottom: 0px;
    min-height: unset;
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
  }
  /* À̹ÌÁö ¿µ¿ª: absolute·Î ÁÂÃø Ç®Æø ´À³¦ */
  .promo-hero-media{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:58vw;
  }
  .promo-hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* À̹ÌÁö À§¿¡ ÅؽºÆ® ¿µ¿ª°ú ÀÚ¿¬½º·´°Ô À̾îÁö´Â ÆÛÇà ±×¶óµ¥ÀÌ¼Ç */
  .promo-hero-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
      90deg,
      rgba(27,16,41,0.00) 0%,
      rgba(27,16,41,0.10) 55%,
      rgba(27,16,41,0.55) 78%,
      rgba(27,16,41,0.85) 100%
    );
    pointer-events:none;
  }

  /* ÅؽºÆ®´Â ÄÁÅ×ÀÌ³Ê ¾È¿¡¼­¸¸ °íÁ¤ */
  .promo-container{
    padding: 32px 20px;
  }

  /* À̹ÌÁö°¡ absoluteÀ̹ǷΠgrid ÇØÁ¦ */
  .promo-hero-grid{display:block;}

  /* ÅؽºÆ® ¹Ú½º´Â ¿À¸¥ÂÊ Á¤·Ä */
  .promo-hero-grid > div:first-child{
    width:min(520px, 100%);
    margin-left:auto;
    padding-left:0;
  }

  /* ŸÀÌÆ÷ ¹Ì¼¼ °­È­ */
  .promo-title{font-size:42px; line-height:1.15;}
  .promo-sub{max-width:46ch;}
}

/* =========================================================
   14) MOBILE: ½ºÅà À¯Áö / À̹ÌÁö ¶ó¿îµå + ±×¸²ÀÚ
========================================================= */
@media (max-width:979.98px){
  .promo-hero-media{
    position:relative;
    border-radius:var(--promo-radius);
    box-shadow:0 12px 32px rgba(0,0,0,.35);
  }
}



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

#flow {
  background: #fff;
  padding: 60px 0 40px;
}

.flow-title {
  text-align: center;
  font-size: 26px;
  margin-bottom: 36px;
  color: var(--promo-purple-700);
}

/* Ä÷¯ È®Àå¿ë */
.flow-title.purple { color: var(--promo-purple-700); }
.flow-title.blue   { color: #2563eb; }
.flow-title.green  { color: #15803d; }





.flow-step {
  font-size: 12px;
  font-weight: 800;
  color: var(--promo-purple-600);
  margin-bottom: 6px;
}

.flow-item-title {
  font-size: 16px;
  font-weight: 700;
  color: #2b1846;
  margin-bottom: 6px;
}

.flow-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

/* ÇÏ´Ü Ä«ÇÇ */
.flow-copy {
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--promo-purple-50);
  border-radius: 14px;
  text-align: center;
  font-size: 15px;
  color: #3b1f66;
  font-weight: 600;
}


.promo-section.bg-white {
  background: #fff;
}

.promo-section.bg-purple {
  background: var(--purple-light);
}

.school-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.promo-section .container h2 {
  text-align: left;
}


/* =========================
   MOBILE: ¼½¼Ç ŸÀÌƲ Áß¾Ó Á¤·Ä
========================= */
@media (max-width: 768px) {

  .promo-section .container > h2,
  .promo-section .container > .promo-h2 {
    text-align: center;
  }

  /* ŸÀÌƲ ¾Æ·¡ ¼³¸í ¹®±¸µµ ÇÔ²² Áß¾Ó Á¤·Ä */
  .promo-section .container > p,
  .promo-section .container > .promo-lead {
    text-align: center;
  }

}




/* =========================
   PROMO CARD GRID
========================= */
.promo-card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}

/* ÅÂºí¸´ */
@media (max-width:1024px){
  .promo-card-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ¸ð¹ÙÀÏ */
@media (max-width:768px){
  .promo-card-grid{
    grid-template-columns: 1fr;
  }
}


/* =========================
   PROMO CARD
========================= */
/* =========================
   PROMO CARD - PURPLE THEME
========================= */
.promo-card{
  border:1px solid rgba(124,92,255,0.35);
  background:#fff;
}

.promo-card:hover{
  border-color:rgba(124,92,255,0.65);
  box-shadow:
    0 12px 28px rgba(124,92,255,0.18),
    0 4px 10px rgba(0,0,0,0.06);
}


.card-image{
  position:relative;
  width:100%;
  overflow:hidden;
}

.card-image-small{
  height:220px;
}

.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card-label{
  background:linear-gradient(
    135deg,
    #7c5cff,
    #6a4de6
  );
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:6px 10px;
  border-radius:6px;
  box-shadow:0 4px 10px rgba(124,92,255,0.35);
}

.card-body{
  display:flex;
  flex-direction:column;
  padding:16px 18px 18px;
  flex:1;
}

.card-title{
  font-size:16px;
  font-weight:700;
  margin:0 0 6px;
  color:#2b1846; /* µö ÆÛÇà ÅؽºÆ® */
}

.card-subtitle{
  font-size:14px;
  line-height:1.5;
  color:#4b5563;
  margin:0 0 14px;
}

.card-stats-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  font-size:13px;
  color:#666;
}

.card-right-info{
  display:flex;
  gap:10px;
  align-items:center;
}

.like-count{
  cursor:pointer;
  transition:color .2s ease;
}

.like-count:hover{
  color:#7c5cff;
}

.card-button{
  display:block;
  margin-top:14px;
  padding:12px 0;
  text-align:center;
  background:#7c5cff;
  color:#fff;
  font-size:14px;
  font-weight:700;
  border-radius:8px;
  text-decoration:none;
  transition:background .2s ease;
}

.card-button:hover{
  background:#6a4de6;
}

@media (max-width:768px){
  .card-image-small{
    height:200px;
  }

  .card-title{
    font-size:15px;
  }

  .card-subtitle{
    font-size:13px;
  }
}