/* =====================================================
   수입관리사 시험개요 페이지 CSS  (intro slug)
   클래스 prefix: .ie-
   디자인 가이드: legal-expert.css / greeting.css 기준
   ===================================================== */

/* ── 전체 래퍼 ── */
.ie-wrap {
  max-width: 1480px;
  margin-left: -2rem;
  margin-right: -2rem;
  padding: 40px 20px 60px;
  font-family: 'Pretendard GOV Variable', 'Pretendard GOV', 'Pretendard', sans-serif;
  color: #222222;
  box-sizing: border-box;
}

/* ── 섹션 공통 ── */
.ie-section {
  margin-bottom: 32px;
}

/* 섹션 헤더 — 하단 라인 */
.ie-section-header,
.ie-section-header-only {
  font-size: 2.2rem;
  font-weight: 700;
  color: #001B54;
  padding: 0 0 14px 0;
  border-bottom: 1px solid #dde3ed;
  margin-bottom: 20px;
  line-height: 1.3;
}

/* 섹션 본문 — 카드 스타일 */
.ie-section-body {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 28px 32px;
  box-shadow: 0 2px 10px rgba(0, 27, 84, 0.06);
  font-size: 1.7rem;
  line-height: 1.9;
  color: #444444;
}

.ie-section-body p + p {
  margin-top: 16px;
}

/* 소개 문구 강조 (핵심 문구) */
.ie-em {
  color: #d32f2f;
  font-weight: 600;
  font-style: normal;
}

/* 소개 문구 번호 목록 — "1)" 형식 */
.ie-num-list {
  counter-reset: ie-num;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.ie-num-list > li {
  counter-increment: ie-num;
  position: relative;
  padding-left: 36px;
}

.ie-num-list > li + li {
  margin-top: 14px;
}

.ie-num-list > li::before {
  content: counter(ie-num) ")";
  position: absolute;
  left: 0;
  top: 0;
  color: #001B54;
  font-weight: 700;
}

@media (max-width: 640px) {
  .ie-num-list > li {
    padding-left: 28px;
  }
}

/* ── 구분선 ── */
.ie-divider {
  height: 1px;
  background: #e0e5ed;
  margin: 40px 0;
}

/* ── 3열 카드 그리드 ── */
.ie-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.ie-card {
  display: flex;
  flex-direction: column;      /* 내용이 적은 카드도 본문 배경이 카드 전체를 채우도록 */
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 27, 84, 0.06);
}

.ie-card-head {
  padding: 16px 24px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #001B54 0%, #0369a1 100%);
  text-align: center;
}

.ie-card-body {
  flex: 1 1 auto;              /* 남은 높이를 채워 흰 여백 노출 방지 */
  padding: 24px;
  background: #f8faff;
  min-height: 90px;
}

/* ── 불릿 리스트 ── */
.ie-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ie-list li {
  padding: 6px 0 6px 20px;
  position: relative;
  font-size: 1.7rem;
  line-height: 1.7;
  color: #444444;
}

.ie-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 6px;
  color: #0369a1;
  font-weight: bold;
  font-size: 1.8rem;
}

/* ── 가격 표시 ── */
.ie-price {
  font-size: 3.6rem;
  font-weight: 800;
  color: #001B54;
  text-align: center;
  padding: 12px 0 4px;
  line-height: 1.2;
}

.ie-price-sub {
  text-align: center;
  font-size: 1.45rem;
  color: #888888;
  margin-top: 4px;
}

/* ── 시험과목 테이블 ── */
.ie-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.7rem;
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 27, 84, 0.06);
}

/* 열 너비 — 시험시간·문항·시험과목·형태는 좁게, 세부내용이 나머지 차지 */
.ie-table .ie-col-time { width: 14%; }
.ie-table .ie-col-count { width: 7%; }
.ie-table .ie-col-subject { width: 16%; }
.ie-table .ie-col-detail { width: auto; }
.ie-table .ie-col-type { width: 14%; }

.ie-table th {
  background: #001B54;
  color: #ffffff;
  padding: 16px 18px;
  text-align: center;
  font-weight: 600;
  border: 1px solid #001B54;
  white-space: nowrap;
}

.ie-table td {
  padding: 14px 18px;
  border: 1px solid #dde3ed;
  text-align: center;
  vertical-align: middle;
  line-height: 1.65;
  background: #ffffff;
}


.ie-table td.ie-td-left {
  text-align: left;
}

/* 형태 열 — 가로쓰기, 2줄 */
.ie-table td.ie-td-type {
  white-space: nowrap;
  font-size: 1.6rem;
  text-align: center;
  color: #001B54;
  font-weight: 600;
  line-height: 1.5;
}

/* 세부내용 불릿 리스트 */
.ie-table-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ie-table-list li {
  padding: 2px 0 2px 16px;
  position: relative;
  line-height: 1.65;
}

.ie-table-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #0369a1;
  font-weight: bold;
}

.ie-table td.ie-td-time {
  color: #001B54;
  font-weight: 700;
  white-space: nowrap;
  background: #eef2ff !important;
}

/* ── 출제형태 안내박스 ── */
.ie-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eef2ff;
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 1.55rem;
  color: #333333;
  margin-bottom: 40px;
}

.ie-notice-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4a73d9;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── 번호 카드 2열 그리드 ── */
.ie-num-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.ie-num-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 27, 84, 0.06);
}

.ie-num-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  background: #f8faff;
  border-bottom: 1px solid #e5e7eb;
}

.ie-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #001B54;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.ie-num-card-title {
  font-size: 2.1rem;
  font-weight: 700;
  color: #001B54;
}

.ie-num-card-body {
  padding: 22px 28px;
  background: #ffffff;
  font-size: 1.65rem;
  line-height: 1.8;
  color: #444444;
}

.ie-note {
  font-size: 1.45rem;
  color: #666666;
  margin-top: 10px;
}

/* 면제 배지 */
.ie-exempt-tag {
  display: inline-block;
  border: 1px solid #0369a1;
  border-radius: 20px;
  padding: 6px 24px;
  font-size: 1.5rem;
  color: #0369a1;
  background: #ffffff;
  margin-top: 12px;
  font-weight: 600;
}

/* ── 교재 안내 ── */
.ie-book-card {
  position: relative;               /* 우측 이미지 절대배치 기준 */
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(0, 27, 84, 0.06);
}

.ie-book-body {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 30px 44px;
  background: #ffffff;
}

/* 교재 안내 헤더 확대 (본문 카드보다 눈에 띄게) */
.ie-book-card .ie-num-card-head {
  padding: 20px 28px;
}

.ie-book-card .ie-badge {
  width: 38px;
  height: 38px;
  font-size: 1.8rem;
}

.ie-book-card .ie-num-card-title {
  font-size: 2.5rem;
}

.ie-book-body .ie-book-info {
  flex: 1 1 auto;
  min-width: 0;
}

.ie-book-info {
  font-size: 1.8rem;
  line-height: 1.9;
  color: #444444;
}

.ie-book-info .ie-book-title {
  display: inline-block;             /* 그라디언트를 글자 폭 기준으로 매핑 */
  font-size: 3rem;
  font-weight: 700;
  color: #222222;                    /* background-clip 미지원 브라우저 폴백 */
  margin-bottom: 14px;
  background: linear-gradient(118.8deg, #E52A21 11.23%, #27388E 35.85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 640px) {
  .ie-book-info .ie-book-title {
    font-size: 2.4rem;
  }
}

.ie-book-info a {
  color: #0369a1;
  text-decoration: none;
}

.ie-book-info a:hover {
  text-decoration: underline;
}

/* 공식 교재 안내 문구 (강조) */
.ie-book-info .ie-book-note {
  margin-top: 12px;
  color: #d32f2f;
  font-weight: 600;
}

/* 교재 이미지: 타이틀+본문을 합친 카드 전체 높이만큼 우측에 배치
   (본문 영역 높이를 늘리지 않도록 absolute 사용) */
.ie-book-body > p {
  order: -1;                        /* 마크업 순서와 무관하게 이미지를 좌측으로 */
  flex: 0 0 240px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ie-book-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #dde3ed;
  background: #ffffff;
}

/* ── 자격정보 테이블 ── */
.ie-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.65rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 27, 84, 0.06);
}

.ie-info-table th {
  background: #001B54;
  color: #ffffff;
  padding: 18px 24px;
  font-weight: 600;
  border: 1px solid #001B54;
  width: 140px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.ie-info-table td {
  padding: 18px 24px;
  border: 1px solid #dde3ed;
  color: #444444;
  vertical-align: middle;
  line-height: 1.7;
  background: #ffffff;
}


/* ── CTA 배너 ── */
.ie-cta {
  background: linear-gradient(135deg, #001B54 0%, #0369a1 100%);
  border-radius: 16px;
  padding: 36px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  box-shadow: 0 8px 32px rgba(0, 27, 84, 0.2);
}

.ie-cta-text {
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
}

.ie-cta-text em {
  font-style: normal;
  color: #7dd3fc;
}

.ie-cta-btn {
  background: #E72626;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 16px 40px;
  font-size: 1.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  font-family: 'Pretendard GOV Variable', 'Pretendard GOV', 'Pretendard', sans-serif;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(231, 38, 38, 0.45);
}

.ie-cta-btn:hover {
  background: #c81f1f;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(231, 38, 38, 0.6);
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .ie-wrap {
    margin-left: 0;
    margin-right: 0;
    padding: 30px 0 50px;
  }
}

@media (max-width: 900px) {
  .ie-card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .ie-card-grid {
    grid-template-columns: 1fr;
  }

  .ie-num-grid {
    grid-template-columns: 1fr;
  }

  .ie-section-header,
  .ie-section-header-only {
    font-size: 1.9rem;
  }

  /* 모바일: 가로 배치 해제 → 이미지(order:-1)가 위, 텍스트가 아래 */
  .ie-book-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
  }

  .ie-book-body > p {
    flex: none;
    width: 220px;
    margin: 0;
    display: block;
  }

  .ie-book-img {
    width: 100%;
    height: auto;
    max-width: none;
  }

  .ie-cta {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
  }

  .ie-cta-text {
    font-size: 1.8rem;
  }

  /* 모바일: 5열 테이블은 내용 크기대로(auto) + 가로 스크롤로 가독성 유지 */
  figure.table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 16px;
  }

  .ie-table {
    table-layout: auto;
    min-width: 600px;
    font-size: 1.4rem;
  }

  /* 고정 % 너비 해제 → auto 레이아웃이 내용에 맞춰 분배 */
  .ie-table .ie-col-time,
  .ie-table .ie-col-count,
  .ie-table .ie-col-subject,
  .ie-table .ie-col-detail,
  .ie-table .ie-col-type {
    width: auto;
  }

  .ie-table th,
  .ie-table td {
    padding: 10px 12px;
  }
}

/* ── 하단 문의/고객센터 섹션 (카카오 배너) ── */
.ie-contact-section{display:flex;gap:40px;align-items:center;margin-top:32px;padding-top:36px;border-top:1px solid #e5e7eb}
.ie-contact-banner{flex:1.5;position:relative;overflow:hidden;border-radius:16px;min-height:150px;display:flex;align-items:center;gap:22px;padding:26px 32px;text-decoration:none;background:linear-gradient(100deg,#FFE300 0%,#FFD400 62%,#FFC400 100%);box-shadow:0 4px 16px rgba(255,196,0,.28)}
.ie-contact-banner::after{content:'';position:absolute;inset:0;background:url('/uploads/main/Rectangle_215.png') right center/cover no-repeat;opacity:.15;mix-blend-mode:multiply;pointer-events:none}
.ie-cb-illust{position:relative;z-index:1;flex-shrink:0;width:88px;height:88px;display:flex;align-items:center;justify-content:center}
.ie-cb-illust img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))}
.ie-cb-content{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ie-cb-title{display:block;font-size:2.4rem;font-weight:800;color:#1a1200;margin:0;line-height:1.25}
.ie-cb-desc{font-size:1.55rem;font-weight:500;color:#3a2f00;margin:0;line-height:1.5}
.ie-cb-go{position:relative;z-index:1;flex-shrink:0;display:inline-flex;align-items:center;gap:10px;color:#1a1200;font-size:1.5rem;font-weight:700}
.ie-cb-arrow{width:34px;height:34px;border-radius:50%;background:#1a1200;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s}
.ie-contact-banner:hover .ie-cb-arrow{transform:translateX(3px)}
.ie-contact-info{flex:1;display:flex;flex-direction:column;justify-content:center;padding-left:40px;border-left:2px dashed #cbd5e1}
.ie-ci-head{font-size:2rem;font-weight:700;color:#001B54;margin:0}
.ie-ci-text{font-size:1.7rem;color:#333;margin:6px 0 0;line-height:1.6}
.ie-ci-text+.ie-ci-head{margin-top:18px}
.ie-ci-text b{font-weight:700;color:#001B54}
.ie-ci-text a{color:#001B54;text-decoration:none;font-weight:700}
.ie-ci-text a:hover{text-decoration:underline}
@media (max-width:768px){
.ie-contact-section{flex-direction:column;gap:24px}
.ie-contact-info{padding-left:0;padding-top:24px;border-left:none;border-top:2px dashed #cbd5e1}
.ie-contact-banner{padding:22px 20px;gap:16px}
.ie-cb-go span:not(.ie-cb-arrow){display:none}
.ie-cb-illust{width:60px;height:60px}
.ie-cb-title{font-size:2rem}
.ie-cb-desc{font-size:1.4rem}
}

/* ── 메인 banner-card(light) 스타일 (intro 하단 좌측 배너) ── */
.ie-contact-section .banner-card{position:relative;flex:1;max-width:780px;min-width:0;height:144px}
.banner-card-bg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:8px}
.banner-card-bg img{width:100%;height:100%;object-fit:cover}
.banner-illustration{position:absolute;left:0;width:200px;z-index:1}
.banner-card.light .banner-illustration{top:-36px;height:150px;object-fit:contain}
.banner-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;height:100%;padding:2px 40px 2px 180px;z-index:2;box-sizing:border-box}
.banner-text-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.banner-card.light .banner-title{font-family:'Paperlogy','Pretendard',sans-serif;font-size:32px;font-weight:700;color:#222;letter-spacing:-0.8px;line-height:1;margin:0}
.banner-description{font-family:'Paperlogy','Pretendard',sans-serif;font-size:16px;font-weight:700;color:#222;letter-spacing:-0.4px;line-height:1.2;margin:0}
.banner-link{display:inline-flex;align-items:center;gap:8px;font-family:'Pretendard',sans-serif;font-size:16px;font-weight:700;letter-spacing:-0.5px;white-space:nowrap;flex-shrink:0;transition:opacity .2s ease;text-decoration:none}
.banner-link:hover{opacity:.8}
.banner-card.light .banner-link{color:#222}
.banner-card.light .arrow-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background-color:#222;border:1px solid #d9d9d9;border-radius:50%}
/* 설명문을 한 줄로 유지하고, '바로가기'를 타이틀 높이에 맞춰 위로 올림 */
.ie-contact-section .banner-content{padding-right:24px}
.ie-contact-section .banner-description{white-space:nowrap;font-size:15px}
.ie-contact-section .banner-link{position:relative;top:-14px}
@media (max-width:768px){
.ie-contact-section .banner-card{max-width:none;height:auto;min-height:120px}
.banner-content{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 20px 18px 150px}
.banner-illustration{width:130px}
.banner-card.light .banner-illustration{top:-14px;height:120px}
.banner-card.light .banner-title{font-size:26px}
.banner-description{font-size:15px}
.banner-link{font-size:16px}
.ie-contact-section .banner-content{padding-right:20px}
.ie-contact-section .banner-description{white-space:normal}
.ie-contact-section .banner-link{top:0}
}