@charset "utf-8";

/* ================================================
   common.css ? CSS º¯¼ö + °øÅë ¿ä¼Ò
   README ¡×6-1 / ¡×7 ±âÁØ
   ================================================ */

/* 1. Google Fonts ? Noto Sans KR */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&display=swap');


/* ------------------------------------------------
   2. CSS º¯¼ö (:root)
   README ¡×7 Ä÷¯ °íÁ¤ + Ãß°¡ ·¹À̾ƿô ÅäÅ«
   ------------------------------------------------ */
:root {
  /* Ä÷¯ ½Ã½ºÅÛ (README ¡×7 ? Àý´ë º¯°æ ±ÝÁö) */
  --primary:       #375fcd;
  --primary-dark:  #1b3fa1;
  --secondary:     #5D5FEF;
  --accent:        #375fcd;
  --success:       #10b981;
  --dark:          #1f2937;
  --gray:          #6b7280;
  --light-gray:    #f3f4f6;
  --white:         #ffffff;
  --formgray:      #dcdcdc;
  --highlight-bg:  #f0f2ff;

  /* ·¹À̾ƿô ÅäÅ« */
  --section-py:      72px;
  --container-max:   1200px;
  --container-px:    20px;

  /* Ä«µå ÅäÅ« */
  --card-radius:   16px;
  --card-pad-y:    36px;
  --card-pad-x:    40px;
  --shadow-card:
    0 4px 12px rgba(0, 0, 0, .06),
    0 12px 32px rgba(0, 0, 0, .08);

  /* ŸÀÌÆ÷ */
  --font-family:   'Noto Sans KR', sans-serif;
  --font-body:     16px;
  --line-height:   1.75;

  /* ¹öÆ° */
  --btn-radius:    50px;
  --btn-py:        14px;
  --btn-px:        36px;

  /* Àüȯ */
  --transition:    0.2s ease;
  --h1: 40px;
  --h2: 30px;
  --h3: 20px;
}

a:hover {
  color:#fff;
}

.tutor section {
  padding:30px 0;
}

/* ------------------------------------------------
   10. °øÅë ·¹À̺í (.label / .prelabel)
   ------------------------------------------------ */
.label {
  display: inline-block;
  font-size: 25px;
  font-weight: 700;
  color: var(--dark);
}

.prelabel {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 6px;
}


/* ------------------------------------------------
   11. °øÅë .desc
   ------------------------------------------------ */
.desc {
  font-size: 14px;
  color: var(--gray);
  margin-top: 8px;
  line-height: var(--line-height);
}


/* ------------------------------------------------
   12. ¹öÆ° (.btn / .btn-primary)
   ------------------------------------------------ */
.btn,.btn02{
  display: inline-block;
  padding: 15px 20px;
  border-radius: var(--btn-radius);
  font-family: var(--font-family);
  font-size: 16px;
  cursor: pointer;
  border: none;
  transition:
    background-color var(--transition),
    transform        var(--transition),
    box-shadow       var(--transition);
  text-align: center;
  line-height: 1;
}

.btn-primary, .btn02{
  background-color: var(--primary) !important;
  color: var(--white);
  padding:10px 20px !important;
  box-shadow: 0 4px 16px rgba(53, 90, 255, 0.3);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(53, 90, 255, 0.3);
}


/* ------------------------------------------------
   13. Ä«µå (.card)
   ------------------------------------------------ */
.card {
  background-color: var(--white);
  border-radius: var(--card-radius);
  padding: var(--card-pad-y) var(--card-pad-x);
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
}

.card:last-child {
  margin-bottom: 0;
}

/* Ä«µå ³»ºÎ ŸÀÌƲ */
.card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--light-gray);
}

/* Ä«µå ³»ºÎ ¼ÒÁ¦¸ñ */
.sub-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
}


/* ------------------------------------------------
   14. ±×¸®µå (.grid)
   ------------------------------------------------ */
.grid {
  display: grid;
  gap: 24px;
}

.grid-3col {
  grid-template-columns: repeat(3, 1fr);
}

.grid-2col {
  grid-template-columns: repeat(2, 1fr);
}


/* ------------------------------------------------
   15. ¸®½ºÆ® (.list / .list-ol)
   ------------------------------------------------ */
.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--dark);
}

.list li {
  padding-left: 16px;
  position: relative;
  line-height: 1.6;
}

/* ul 񃧯 bullet */
ul.list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* ol ¹øÈ£ */
.list-ol {
  counter-reset: ol-counter;
}

.list-ol li {
  counter-increment: ol-counter;
  padding-left: 22px;
}

.list-ol li::before {
  content: counter(ol-counter) '.';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
  font-size: 1.1rem;
}


/* ------------------------------------------------
   16. Å×À̺í (.table)
   ------------------------------------------------ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.table thead th {
  background-color: var(--light-gray);
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  color: var(--gray);
  border-bottom: 1px solid var(--formgray);
}

.table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--light-gray);
  vertical-align: middle;
  line-height: 1.6;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table-note {
  font-size: 12px;
  color: var(--gray);
  text-align: right;
  margin-top: 4px;
  margin-bottom: 24px;
}


/* ------------------------------------------------
   17. ¹öÆ° wrap (.btn-wrap)
   ------------------------------------------------ */
.btn-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}


/* ------------------------------------------------
   18. Header °øÅë
   ------------------------------------------------ */
header {
  background-color: var(--white);
  border-bottom: 1px solid var(--light-gray);
}

.logo {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
}


/* ------------------------------------------------
   19. Footer °øÅë
   ------------------------------------------------ */
footer {
  background-color: var(--white);
  border-top: 1px solid var(--light-gray);
  padding: 48px 0;
  text-align: center;
}

.footer-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
}

.footer-contact {
  font-size: 25px;
  color: var(--dark);
  margin-bottom: 4px;
}

.footer-contact strong {
  color: var(--primary);
  font-size: 25px;
}

.footer-hours {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 16px;
}

.footer-notice {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
}
/* =========================
   Typography scale (match reference)
   common.css ONLY
========================= */

/* 2) Á¦¸ñ °èÃþ (·¹ÆÛ·±½ºÃ³·³ Å­Á÷ÇÏ°Ô) */
h1, .h1{
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.15;
}
.tutor h2, .h2{
  font-size: clamp(15px, 2.4vw, 15px);
  line-height: 1.2;
  text-align: center;
  padding:10px 0;
}

.tutor .subtop_img7 {
  line-height: 380px;
  padding-bottom: 20px;
}

h3, .h3{
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
}

/* ÀÛÀº ĸ¼Ç/¶óº§ */
small, .small, .caption, .meta{
  font-size: 0.9375rem;  /* 15px */
  line-height: 1.55;
}

/* 4) ¹öÆ°/Ĩ(·¹ÆÛ·±½º CTA ´À³¦: ±ÛÀÚ Å©°í ³ôÀÌ ³Ë³Ë) */
.chip, .tag{
  font-size: 1rem;       /* 16px */
}
/*.btn-primary, .btn-primary{
  font-weight: 700;
}*/

/* 5) Ä«µå ¾È ÅؽºÆ®(Ä«µå°¡ ´ä´äÇØ º¸ÀÌ¸é ¿©±â·Î Á¶Àý) */
.card, .panel, .box{
  font-size: 1rem;       /* 16px */
}
.section .title, .section h2{ font-size: clamp(24px, 2.4vw, 34px); }
.section .desc{ font-size: 1rem; }


/* ================================================
   index.css ? ¼½¼Ç Àü¿ë ½ºÅ¸ÀÏ
   README ¡×6-2 ±âÁØ | common.css ·Îµå ÈÄ Àû¿ë
   ½ºÄÚÇÎ ±ÔÄ¢: .section-{name} .{child} { }
   ================================================ */


/* ------------------------------------------------
   SECTION-HERO
   ¹è°æ: --dark | Æеù: 100px | ÅؽºÆ® Áß¾Ó Á¤·Ä
   H1 °­Á¶¾î(.point): --primary
   ------------------------------------------------ */
.section-hero {
  background-color: var(--dark);
  padding: 100px 0;
}

.section-hero .container {
  text-align: center;
}

.section-hero .text-container {
  margin-bottom: 40px;
}

/* ¸ÞÀΠŸÀÌƲ */
.section-hero .title {
  font-size: 50px;
  font-weight: bold;
  color: var(--white);
  line-height: 1.45;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

/* ¿À·»Áö °­Á¶¾î */
.section-hero .title .point {
  color: var(--primary);
  font-style: normal;
}

/* ºÎÁ¦¸ñ */
.section-hero .desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.68);
  margin-top: 0;
}

/* CTA ¹öÆ° Áß¾Ó Á¤·Ä */
.section-hero .content-container {
  display: flex;
  justify-content: center;
}


/* 01?04 °øÅë: label ¿µ¿ª ÇÏ´Ü °£°Ý Á¶Á¤ */
.section-overview .text-container,
.section-field .text-container,
.section-qualify .text-container,
.section-apply .text-container {
  margin-bottom: 16px;
}


/* ------------------------------------------------
   SECTION-OVERVIEW (01. ¸ðÁý °³¿ä)
   Ä«µå: Ç¥ÁØ ±×¸²ÀÚ
   3¿­ ±×¸®µå + ¼öÁ÷ ±¸ºÐ¼± + Áß¾Ó Á¤·Ä
   ------------------------------------------------ */

/* 3¿­ ±×¸®µå Á¤·Ä */
.section-overview .grid-3col {
  align-items: start;
  gap: 0;               /* ±¸ºÐ¼±À¸·Î ´ëü */
}

/* °¢ ¿­ Æеù + ¿ìÃø ±¸ºÐ¼± */
.section-overview .grid-item {
  text-align: center;
  padding: 8px 28px;
  border-right: 1px solid var(--formgray);
}

.section-overview .grid-item:first-child {
  padding-left: 0;
}

.section-overview .grid-item:last-child {
  border-right: none;
  padding-right: 0;
}

/* ¿­ ¼ÒÁ¦¸ñ (¸ðÁý ÇüÅ / ¸ðÁý ´ë»ó / ¸ðÁý ÀýÂ÷) */
.section-overview .item-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray);
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}

/* ¿­ ³»¿ë */
.section-overview .item-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.65;
}


/* ------------------------------------------------
   SECTION-FIELD (02. ¸ðÁý ºÐ¾ß)
   Ä«µå: Ç¥ÁØ ±×¸²ÀÚ
   A/B: subgrid + subcard 2¿­ ±¸Á¶
   C: card-title(border-left) + highlight-box
   ------------------------------------------------ */

/* A/B/C °øÅë card-title: ÇÏ´Ü ±¸ºÐ¼± Á¦°Å, ¿ÞÂÊ accent ¶óÀÎ */
.section-field .card-title {
  border-bottom: none;
  padding-bottom: 0;
  padding-left: 12px;
  border-left: 4px solid var(--primary);
  margin-top: 28px;
  margin-bottom: 14px;
}

.section-field .card-title:first-child {
  margin-top: 0;
}

/* subgrid: 2¿­ ±×¸®µå */
.section-field .subgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 4px;
}

/* subcard: °¢ Ç׸ñ Ä«µå */
.subcard {
  background-color: var(--light-gray);
  border: 1px solid var(--formgray);
  border-radius: 10px;
  padding: 16px 18px;
}

/* subcard ³» ¼ÒÁ¦¸ñ */
.section-field .subcard-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
}

/* subcard ³» ¸®½ºÆ® */
.section-field .subcard .list {
  font-size: 13px;
  gap: 5px;
}

/* C. °­ÀÇ ÄÜÅÙÃ÷ Á¦ÀÛ Á¦¾È ? Å©¸² °­Á¶ ¹Ú½º */
.section-field .highlight-box {
  background-color: var(--highlight-bg);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 4px;
}

.section-field .box-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
}

.section-field .box-quote {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
}

.section-field .box-desc {
  font-size: 14px;
  color: var(--dark);
  line-height: 1.65;
}


/* ------------------------------------------------
   SECTION-QUALIFY (03. Áö¿ø ÀÚ°Ý)
   Ä«µå: Ç¥ÁØ ±×¸²ÀÚ
   prelabel(ÁÖȲ) + ¶óº§ + desc + Å×À̺í + ¿ì´ë¹Ú½º
   ------------------------------------------------ */

/* ±¸ºÐ(ù ¹ø° ¿­) ³Êºñ °íÁ¤ */
.section-qualify .table td:first-child,
.section-qualify .table th:first-child {
  width: 130px;
  white-space: nowrap;
  font-weight: 500;
}

/* Å×À̺í Çà À̸ðÁö Æ÷ÇÔ ¼¿ Á¤·Ä */
.section-qualify .table td {
  vertical-align: middle;
}

/* ¹ýÀû ±Ù°Å ÁÖ¼® */
.section-qualify .table-note {
  font-style: italic;
}

/* ¿ì´ë »çÇ× ¹Ú½º */
.section-qualify .prefer-box {
  background-color: var(--light-gray);
  border-radius: 10px;
  padding: 20px 24px;
  margin-top: 8px;
}

.section-qualify .prefer-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
}

/* ====================================================
   04. °­»ç ÇýÅà ¼½¼Ç ½ºÅ¸ÀÏ
   ÆÄÀÏ: tutor-benefits.css
   ¿ëµµ: tutor_req.main.asp - 04. °­»ç ÇýÅà ¹× Áö¿ø ¼½¼Ç
   ==================================================== */

/* ¼­ºêŸÀÌƲ (¼½¼Ç Á¦¸ñ ¾Æ·¡ ÇÑ ÁÙ) */
.benefits-subtitle {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  text-align: center;
}

/* ÇýÅà īµå ±×¸®µå ·¹À̾ƿô */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
}

/* °³º° ÇýÅà īµå */
.benefit-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.benefit-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* ¾ÆÀÌÄÜ ¿µ¿ª */
.benefit-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: #fff;
  border-radius: 50%;
}

.benefit-icon .icon {
  width: 32px;
  height: 32px;
  color: var(--primary);
}

/* Ä«µå Á¦¸ñ */
.benefit-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 12px 0;
  line-height: 1.4;
  text-align: center;
}

/* Ä«µå ¼³¸í */
.benefit-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--dark);
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

/* ------------------------------------------------
   SECTION-APPLY (05. Á¢¼ö ¹æ¹ý ¹× ÀüÇü ¾È³»)
   Ä«µå: Ç¥ÁØ ±×¸²ÀÚ + warm border(primary 22%)
   CTA Áß¾Ó + 2¿­(ÀüÇüÀýÂ÷ / Á¦Ãâ¼­·ù)
   ------------------------------------------------ */

/* h3 (1. Á¢¼ö ¹æ¹ý) ? ±¸ºÐ¼± Á¦°Å, °£°Ý Á¶Á¤ */
.section-apply .card-title {
  font-size: 18px;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 10px;
}

/* ¾È³» ¹®±¸ */
.section-apply .desc {
  font-size: 14px;
  color: var(--gray);
  margin-top: 0;
  margin-bottom: 0;
}

/* 2¿­ ±×¸®µå »ó´Ü ¿©¹é + ±¸ºÐ¼± */
.section-apply .grid-2col {
  margin-top: 16px;
  align-items: start;
}

.section-apply .grid-item:first-child {
  padding-right: 28px;
  border-right: 1px solid var(--formgray);
}

.section-apply .grid-item:last-child {
  padding-left: 28px;
}
.txt-mail {
    font-size: 1.3rem;
    font-weight: 600;
}