/* =====================================================================
   focus-iframe.css  —  추천 프로그램 iframe 콘텐츠 공용 스타일
   - 모든 규칙은 .fe-page 하위로만 적용(부모 사이트 CSS와 충돌 방지)
   - 모든 클래스 접두사 fe- , 변수 접두사 --fe-
   - 전역 *, body, :root 선택자 사용 안 함(밖으로 새지 않음)
   - 콘텐츠 폭 1440px(가운데), 섹션 배경은 화면 끝까지 full-bleed
   ===================================================================== */

/* ── 초기화(reset) — iframe 문서 기준. body 기본 마진 제거 ── */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ line-height:1.5; -webkit-text-size-adjust:100%; }
img,svg,video{ display:block; max-width:100%; }

.fe-page{
  --fe-navy:#092B50; --fe-navy-dark:#062240; --fe-gold:#B1844E;
  --fe-bg-page:#FFFFFF; --fe-bg-card:#F1F3F7; --fe-icon-box:#FFFFFF; --fe-line:#E5E7ED;
  --fe-text:#0A0A0A; --fe-text-muted:#4D4D4D; --fe-text-light:#808080; --fe-white:#FFFFFF;
  --fe-r-card:24px; --fe-r-box:12px; --fe-r-btn:12px;
  --fe-gutter:max(40px, calc((100% - 1440px) / 2));   /* 콘텐츠 1440 가운데, 그 바깥은 여백 */

  width:100%;
  font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
  color:var(--fe-text); background:var(--fe-bg-page); -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:break-word;   /* 한글 단어 단위 줄바꿈 */
}
.fe-page *{ box-sizing:border-box; margin:0; padding:0; }
.fe-page img{ max-width:100%; }

/* ── 기본 컨테이너 ──────────────────────────────────────────────
   업로드 콘텐츠(frp_content)는 관리자가 만든 HTML 그대로 full-bleed 출력한다.
   래퍼(.fe-page)는 상하좌우 여백을 주지 않으므로, 여백이 필요한 콘텐츠는
   .fe-sec 로 감싸거나 자체 padding 을 지정한다. */
.fe-page{ padding:0; }

/* 섹션 — 배경은 full-bleed, 콘텐츠는 1440 가운데 */
.fe-page .fe-sec{ padding:50px var(--fe-gutter); }
.fe-page .fe-sec-head{ margin-bottom:24px; }
.fe-page .fe-sec-title{ font-size:32px; font-weight:700; line-height:1.3; margin-bottom:16px; }
.fe-page .fe-sec-desc{ font-size:18px; font-weight:400; color:var(--fe-text-muted); line-height:1.6; }

/* 섹션 머리 위 작은 강조 라인 */
.fe-page .fe-eyebrow{ font-size:15px; font-weight:600; color:var(--fe-gold); margin-bottom:12px; }

/* 가로형 카드 + 3칸 그리드 */
.fe-page .fe-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.fe-page .fe-card{ display:flex; gap:24px; align-items:flex-start; background:var(--fe-bg-card); border:none;
  border-radius:0 var(--fe-r-card) 0 var(--fe-r-card); padding:32px; }
.fe-page .fe-icon-box{ flex-shrink:0; width:64px; height:64px; display:flex; align-items:center;
  justify-content:center; background:var(--fe-icon-box); border-radius:var(--fe-r-box); }
.fe-page .fe-icon-box i{ width:32px; height:32px; color:var(--fe-navy); }
.fe-page .fe-card-title{ font-size:20px; font-weight:700; line-height:1.4; margin-bottom:8px; }
.fe-page .fe-card-desc{ font-size:16px; font-weight:400; color:var(--fe-text-muted); line-height:1.5; }

/* 추천 학교 카드 */
.fe-page .fe-school-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.fe-page .fe-school-card{ background:var(--fe-bg-card); border-radius:0 var(--fe-r-card) 0 var(--fe-r-card); padding:32px; }
.fe-page .fe-school-top{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.fe-page .fe-school-name{ font-size:22px; font-weight:700; color:var(--fe-navy); }
.fe-page .fe-school-tag{ font-size:12px; font-weight:600; color:var(--fe-navy); background:var(--fe-white);
  padding:5px 12px; border-radius:9999px; }
.fe-page .fe-school-fee{ background:var(--fe-white); border-radius:var(--fe-r-box); padding:12px 16px; margin-bottom:16px; }
.fe-page .fe-fee-label{ font-size:12px; color:var(--fe-text-light); margin-bottom:2px; }
.fe-page .fe-fee-val{ font-size:18px; font-weight:700; color:var(--fe-navy); }
.fe-page .fe-feat{ display:flex; align-items:flex-start; gap:8px; font-size:15px; color:var(--fe-text-muted);
  line-height:1.6; margin-bottom:6px; }
.fe-page .fe-feat i{ width:18px; height:18px; color:var(--fe-navy); flex-shrink:0; margin-top:2px; }
.fe-page .fe-note{ display:flex; gap:8px; align-items:flex-start; margin-top:24px; font-size:14px;
  color:var(--fe-text-muted); line-height:1.7; }
.fe-page .fe-note i{ width:18px; height:18px; color:var(--fe-navy); flex-shrink:0; margin-top:2px; }

/* 이미지 + 콘텐츠 분할 카드 (서비스 소개 등) */
.fe-page .fe-split{ display:flex; background:var(--fe-bg-page); border:1px solid var(--fe-line);
  border-radius:0 var(--fe-r-card) 0 var(--fe-r-card); overflow:hidden; }
.fe-page .fe-split-img{ flex:0 0 40%; display:flex; background:var(--fe-bg-card); }
.fe-page .fe-split-img img{ width:100%; height:100%; object-fit:cover; }
.fe-page .fe-img-ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:340px; color:var(--fe-text-light); text-align:center; }
.fe-page .fe-img-ph i{ width:40px; height:40px; }
.fe-page .fe-img-ph span{ font-size:13px; line-height:1.5; }
.fe-page .fe-split-body{ flex:1; padding:48px; }
.fe-page .fe-split-title{ font-size:26px; font-weight:700; line-height:1.4; margin-bottom:12px; }
.fe-page .fe-split-sub{ font-size:16px; color:var(--fe-text-muted); line-height:1.7; margin-bottom:28px; }
.fe-page .fe-point-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.fe-page .fe-point{ background:var(--fe-bg-card); border-radius:0 var(--fe-r-box) 0 var(--fe-r-box); padding:20px; }
.fe-page .fe-point h4{ font-size:16px; font-weight:700; color:var(--fe-text); margin-bottom:8px; line-height:1.4; }
.fe-page .fe-point p{ font-size:14px; color:var(--fe-text-muted); line-height:1.6; }

/* FAQ — 회색 박스 카드 + Q/A 원형 뱃지 */
.fe-page .fe-faq-list{ display:flex; flex-direction:column; gap:12px; }
.fe-page .fe-faq-item{ background:var(--fe-bg-card); border-radius:16px; overflow:hidden; }
.fe-page .fe-faq-q{ display:flex; align-items:center; gap:14px; padding:20px 24px; cursor:pointer; }
.fe-page .fe-faq-num{ width:28px; height:28px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; background:var(--fe-text); color:#fff; font-size:12px; font-weight:700; border-radius:50%; }
.fe-page .fe-faq-q-text{ flex:1; font-size:17px; font-weight:600; }
.fe-page .fe-faq-chev{ width:20px; height:20px; color:var(--fe-text-light); transition:transform .3s; }
.fe-page .fe-faq-item.is-open .fe-faq-chev{ transform:rotate(180deg); }
.fe-page .fe-faq-a{ display:none; gap:14px; padding:0 24px 22px 24px; }
.fe-page .fe-faq-item.is-open .fe-faq-a{ display:flex; }
.fe-page .fe-faq-a-badge{ flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--fe-navy);
  color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.fe-page .fe-faq-a p{ font-size:15px; color:var(--fe-text-muted); line-height:1.8; }

/* CTA (네이비 full-bleed) */
.fe-page .fe-cta{ background:linear-gradient(135deg,var(--fe-navy),var(--fe-navy-dark)); padding:80px var(--fe-gutter);
  text-align:center; color:#fff; }
.fe-page .fe-cta-title{ font-size:30px; font-weight:700; margin-bottom:12px; }
.fe-page .fe-cta-sub{ font-size:16px; color:rgba(255,255,255,.7); line-height:1.8; margin-bottom:32px; }
.fe-page .fe-cta-btns{ display:flex; gap:14px; justify-content:center; }

/* 버튼 */
.fe-page .fe-btn{ display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 32px;
  font-size:15px; font-weight:700; border:none; border-radius:var(--fe-r-btn); cursor:pointer;
  background:var(--fe-gold); color:#fff; }
.fe-page .fe-btn i{ width:18px; height:18px; }
.fe-page .fe-btn--navy{ background:var(--fe-navy); }
.fe-page .fe-btn--kakao{ background:#F7E100; color:#0A0A0A; }   /* 카카오 옐로우(브랜드) */
.fe-page .fe-btn--line{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.7); }

/* ===== 반응형 ===== */
@media (max-width:1024px){
  .fe-page .fe-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  /* 모바일 기본 글자 크기 14px */
  .fe-page{ font-size:14px; }
  .fe-page .fe-sec{ padding:40px 20px; }
  .fe-page .fe-cta{ padding:56px 20px; }
  .fe-page .fe-sec-head{ margin-bottom:16px; }
  .fe-page .fe-sec-title{ font-size:24px; line-height:1.35; margin-bottom:12px; }
  .fe-page .fe-sec-desc{ font-size:14px; }
  .fe-page .fe-eyebrow{ font-size:14px; margin-bottom:8px; }
  .fe-page .fe-grid, .fe-page .fe-school-grid, .fe-page .fe-point-grid{ grid-template-columns:1fr; gap:16px; }
  .fe-page .fe-note{ margin-top:16px; }
  .fe-page .fe-split{ flex-direction:column; }
  .fe-page .fe-split-img{ flex:none; }
  .fe-page .fe-img-ph{ min-height:200px; }
  .fe-page .fe-split-body{ padding:28px 20px; }
  .fe-page .fe-split-title{ font-size:20px; }
  .fe-page .fe-card{ flex-direction:column; gap:16px; padding:24px; }
  .fe-page .fe-icon-box{ width:52px; height:52px; }
  .fe-page .fe-icon-box i{ width:26px; height:26px; }
  .fe-page .fe-card-title{ font-size:16px; }
  .fe-page .fe-card-desc{ font-size:14px; }
  .fe-page .fe-feat{ font-size:14px; }
  .fe-page .fe-school-card{ padding:24px; }
  .fe-page .fe-school-name{ font-size:20px; }
  .fe-page .fe-faq-q{ padding:18px; }
  .fe-page .fe-faq-q-text{ font-size:15px; }
  .fe-page .fe-faq-a{ padding:0 18px 18px; }
  .fe-page .fe-faq-a p{ font-size:14px; }
  .fe-page .fe-cta-title{ font-size:22px; }
  /* 버튼도 모바일에서 축소 */
  .fe-page .fe-btn{ height:44px; padding:0 20px; font-size:14px; gap:6px; }
  .fe-page .fe-btn i{ width:16px; height:16px; }
}
@media (max-width:480px){
  .fe-page .fe-sec-title{ font-size:24px; }
  .fe-page .fe-cta-btns{ flex-direction:column; }
  .fe-page .fe-btn{ width:100%; justify-content:center; }
}