/* thearab.co.kr apex — 2026-08-20 추가분
   기존 2018년 CSS(layouts/arab/css/*)는 건드리지 않는다. 이 파일만 뒤에 얹는다.

   디자인 기준은 기존 사이트에서 그대로 가져왔다.
     섹션 배경 #eff3f8 · 카드 #fff + box-shadow 0 3px 7px rgba(0,0,0,.1)
     액센트 #1d77ff · 보조 텍스트 #6a7179 · 컨테이너 max-width 1240px · noto-sans
   원본 프로필 이미지가 학력/경력/강의 3분할이었으므로 그 구성을 카드 3장으로 옮겼다. */

.ceoProfile {
  --blue: #1d77ff;
  --ink: #14181d;
  --muted: #6a7179;
  --card: 0 3px 7px rgba(0, 0, 0, .1);
  max-width: 1240px;
  margin: clamp(34px, 5vw, 50px) auto 0;
  text-align: left;
  box-sizing: border-box;
}

/* ── 상단: 사진 + 이름 ─────────────────────────────────────────── */
.ceoProfile__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3.4vw, 44px);
  background: #fff;
  box-shadow: var(--card);
  padding: clamp(26px, 3.6vw, 46px);
  box-sizing: border-box;
}

.ceoProfile__photo {
  flex: 0 0 auto;
  width: clamp(130px, 20vw, 210px);
  margin: 0;
}
.ceoProfile__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(29, 119, 255, .18);
}

.ceoProfile__id { flex: 1 1 320px; min-width: 0; }

.ceoProfile__name {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -1px;
}
.ceoProfile__name em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--muted);
}

/* 사이트의 "진짜/이혜정" 강조 스타일(흰 글씨 + 파란 배경)을 그대로 따랐다 */
.ceoProfile__badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px 5px;
  background: var(--blue);
  color: #fff;
  font-size: clamp(15px, 2vw, 20px);
  line-height: 1.35;
  letter-spacing: -.5px;
}

.ceoProfile__lead {
  margin: 0;
  font-size: clamp(15px, 1.95vw, 19px);
  line-height: 1.6;
  color: var(--muted);
  word-break: keep-all;
}

/* ── 하단: 학력 / 경력 / 강의 카드 3장 ─────────────────────────── */
.ceoProfile__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(14px, 1.8vw, 22px);
}
.ceoProfile__col {
  background: #fff;
  box-shadow: var(--card);
  padding: clamp(24px, 2.6vw, 34px) clamp(18px, 2vw, 28px);
  box-sizing: border-box;
  min-width: 0;
}
.ceoProfile__col h3 {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--blue);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 400;
  color: var(--blue);
  letter-spacing: -.5px;
}
.ceoProfile__col ul { margin: 0; padding: 0; list-style: none; }
.ceoProfile__col li {
  position: relative;
  padding: 8px 0 8px 15px;
  font-size: clamp(14.5px, 1.75vw, 17px);
  line-height: 1.55;
  color: #33383f;
  word-break: keep-all;
}
.ceoProfile__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

@media (max-width: 1024px) {
  .ceoProfile__cols { grid-template-columns: repeat(2, 1fr); }
  .ceoProfile__col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .ceoProfile__head { flex-direction: column; text-align: center; }
  .ceoProfile__photo { width: 158px; }
  .ceoProfile__id { flex-basis: auto; }
  .ceoProfile__cols { grid-template-columns: 1fr; }
  .ceoProfile__col:first-child { grid-column: auto; }
  .ceoProfile__col li { text-align: left; }
}

/* ── 서비스 4박스를 링크로 ─────────────────────────────────────── */
/* .boxWrap 은 height:310px 고정이라 안쪽에 요소를 더하면 넘친다.
   그래서 안내 문구는 박스 밖이 아니라 여백(padding-bottom) 안에서 처리한다. */
.section1 .business a.boxWrap {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.section1 .business a.boxWrap:hover,
.section1 .business a.boxWrap:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .14);
}
.section1 .business a.boxWrap::after {
  content: "자세히 보기 ›";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  font-size: 15px;
  color: #1d77ff;
  opacity: .85;
}

/* ── 확대 허용으로 바꾼 뒤의 소소한 보정 ───────────────────────── */
h1.sec_title { margin: 0; }

/* ══════════════════════════════════════════════════════════════════
   section5 — 아랍어 수업 (Editorial overlay)
   2026-08-21 재작업.
   문제였던 것: 2018년 CSS 가 `background: url(0_sec5_bg.png) 0 0 no-repeat` 라
   배경이 1920x790 상단에만 깔렸다. 콘텐츠가 길어지자 그 아래가 흰 바탕으로
   남아 새 내용이 허옇게 떠 보였다.
   해법: 배경을 섹션 전체로 덮고(cover) 그 위에 스크림 그라디언트를 얹어
   이미지·배경·글이 한 면에서 섞이게 한다(arabic 사이트의 .bleed/.scrim 방식).
   카드 테두리를 없애고 헤어라인과 타이포 위계로만 구분한다.
   ══════════════════════════════════════════════════════════════════ */
.section5 {
  --ink: #0a1220;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: url(/contents/img/0_sec5_bg.png) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  padding: 0 !important;
}
/* 스크림 — 위는 사진이 살고, 아래로 갈수록 짙어져 글이 얹힌다 */
.section5::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 18, 32, .34) 0%,
      rgba(10, 18, 32, .72) 26%,
      rgba(10, 18, 32, .90) 52%,
      rgba(10, 18, 32, .96) 100%);
}
.section5 > .setWidth {
  position: relative;
  z-index: 1;
  padding: clamp(70px, 9vw, 120px) 20px clamp(70px, 8vw, 100px) !important;
}
.section5 .title h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }

/* ── WHY NARZIS: 프로필(좌) + 근거 6개 3×2(우) ─────────────────── */
.arNarzis {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(22px, 3.4vw, 52px);
  margin: clamp(46px, 6vw, 72px) 0 clamp(40px, 5vw, 64px);
}
.arNarzis__ph {
  /* flex-basis 를 비율로 잡아 넓은 화면에서도 사진이 화면을 잡아먹지 않게 한다.
     stretch 로 오른쪽 근거 블록과 높이를 맞추되, 상·하한을 둬서 폭주를 막는다. */
  flex: 0 1 clamp(240px, 27%, 330px);
  min-width: 0;
  position: relative;
  align-self: stretch;
  min-height: 360px;
  max-height: 560px;
}
.arNarzis__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(.12) contrast(1.04) brightness(.98);
}
/* 사진의 네 변을 배경으로 흘려보낸다 — 사각형으로 '붙인' 느낌을 없앤다 */
.arNarzis__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,18,32,.55) 0%, rgba(10,18,32,0) 26%, rgba(10,18,32,0) 62%, rgba(10,18,32,.92) 100%),
    linear-gradient(180deg, rgba(10,18,32,.62) 0%, rgba(10,18,32,0) 24%, rgba(10,18,32,0) 66%, rgba(10,18,32,.88) 100%);
}
.arNarzis__ph figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  z-index: 2;
  text-align: center;
  font-size: 14px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .82);
}
.arNarzis__ph figcaption b { display: block; font-size: 19px; font-weight: 400; color: #fff; margin-bottom: 3px; }

.arNarzis__proofs { flex: 1 1 520px; min-width: 0; align-self: center; }
.arNarzis__eyebrow {
  font-size: 13px;
  letter-spacing: .18em;
  color: #7fb2ff;
  margin: 0 0 6px;
}
.arNarzis__lead {
  font-size: clamp(19px, 2.6vw, 26px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -.6px;
  color: #fff;
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  word-break: keep-all;
}
.arNarzis__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .16);   /* 헤어라인 = 격자선 */
  border: 1px solid rgba(255, 255, 255, .16);
}
.arNarzis__grid > div {
  background: rgba(10, 18, 32, .30);
  padding: clamp(16px, 2vw, 22px) clamp(12px, 1.6vw, 18px);
  box-sizing: border-box;
}
.arNarzis__grid dt {
  font-size: 12px;
  letter-spacing: .14em;
  color: #7fb2ff;
  margin-bottom: 7px;
}
.arNarzis__grid strong {
  display: block;
  font-size: clamp(15px, 1.9vw, 17px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.arNarzis__grid span {
  display: block;
  font-size: clamp(13.5px, 1.6vw, 14.5px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .74);
  word-break: keep-all;
}

/* ── THE PROBLEM (테두리 없이 헤어라인만) ──────────────────────── */
.arProblem { margin: clamp(40px, 5vw, 66px) 0; }
.arProblem__hd {
  font-size: clamp(21px, 3vw, 31px);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -.8px;
  color: #fff;
  text-align: center;
  margin: 0 0 10px;
  word-break: keep-all;
}
.arProblem__sub {
  font-size: clamp(15px, 1.9vw, 17px);
  line-height: 1.7;
  color: rgba(255, 255, 255, .7);
  text-align: center;
  margin: 0 0 clamp(24px, 3vw, 36px);
  word-break: keep-all;
}
.arProblem__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  margin: 0;
  padding: 0;
}
.arProblem__list li {
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .22);
  padding-top: 16px;
}
.arProblem__list b {
  display: block;
  font-size: clamp(15.5px, 1.9vw, 17px);
  font-weight: 700;
  color: #ffb4a6;
  margin-bottom: 7px;
  word-break: keep-all;
}
.arProblem__list span {
  display: block;
  font-size: clamp(14px, 1.7vw, 15px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
  word-break: keep-all;
}

/* ── 트랙 (3 + 2) ──────────────────────────────────────────────── */
/* 3+2 두 줄을 하나의 표처럼 잇는다 — 사이 간격을 1px 로 두어 헤어라인이 이어져 보이게 */
.arTracks { display: grid; gap: 1px; background: rgba(255,255,255,.16);
            border-top: 1px solid rgba(255,255,255,.16); margin: 0 0 1px; padding: 0; }
.arTracks--2 { border-bottom: 1px solid rgba(255,255,255,.16); margin-bottom: 0; }
.arTracks li { display: flex; flex-direction: column; }
.arTracks--3 { grid-template-columns: repeat(3, 1fr); }
.arTracks--2 { grid-template-columns: repeat(2, 1fr); }
.arTracks li {
  list-style: none;
  background: rgba(10, 18, 32, .30);
  padding: clamp(20px, 2.4vw, 28px) clamp(16px, 2vw, 24px);
  box-sizing: border-box;
}
.arTracks dt { font-size: 12.5px; letter-spacing: .14em; color: #7fb2ff; margin-bottom: 9px; }
.arTracks strong {
  display: block;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 400;
  letter-spacing: -.5px;
  color: #fff;
  margin-bottom: 8px;
}
.arTracks span {
  display: block;
  font-size: clamp(14px, 1.7vw, 15.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .74);
  word-break: keep-all;
}

@media (max-width: 900px) {
  .arNarzis__grid { grid-template-columns: repeat(2, 1fr); }
  .arTracks--3, .arTracks--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .arNarzis__ph { flex-basis: 100%; min-height: 300px; }
  .arNarzis__grid { grid-template-columns: 1fr; }
  .arTracks--3, .arTracks--2 { grid-template-columns: 1fr; }
}