/* ==========================================================================
   기업형 리뉴얼 (A안 "Corporate Trust") — 2026-10-15
   style.css 뒤에 불러와 사이트 전체의 헤더·버튼·푸터와 홈 화면을 덮어쓴다.
   색·둥글기·그림자의 기본값은 style.css 의 :root 토큰(네이비/블루, 6px/8px)에 있다.
   되돌리려면 header.php 에서 이 파일의 <link> 한 줄을 빼면 된다(토큰은 style.css 에서 따로 되돌림 — 백업: _backup/frontend_before-corporate_2026-10-15).
   ========================================================================== */

/* ---------- 공통: 버튼·입력창 ---------- */
.btn { border-radius: var(--radius); }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-primary { background: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-ghost { background: #fff; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-ghost:hover { background: var(--color-primary-light); }
/* 어두운 배경(영상 히어로·네이비 배너·레벨테스트 바) 위의 보조 버튼: 위의 흰 배경 규칙이 style.css 의 투명+흰 글씨를 덮어 글씨가 사라지지 않게 되돌린다 */
.hero .btn-ghost, .cta-banner .btn-ghost, .lt-nav .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.hero .btn-ghost:hover, .cta-banner .btn-ghost:hover, .lt-nav .btn-ghost:hover { background: rgba(255,255,255,.14); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* ---------- 헤더 ---------- */
.site-header { box-shadow: none; }
.header-row1 { gap: 16px; }
.logo .lg-a { color: var(--color-accent); }
.header-actions { gap: 8px; }
.header-cta { display: none; background: var(--color-accent); }
.header-cta:hover { background: var(--color-accent-dark); }
#open-login-btn { background: transparent; color: var(--color-text-sub); padding: 0 10px; font-weight: 600; }
#open-login-btn:hover { background: var(--color-bg-soft); color: var(--color-primary); }
.icon-btn { border-radius: var(--radius); }

@media (min-width: 1024px) {
  :root { --header-height: 72px; }
  .header-row1 { gap: 28px; }
  .gnb-desktop { display: block; flex: 1 1 auto; border-top: 0; min-width: 0; }
  .gnb-desktop ul { height: var(--header-height); max-width: none; padding: 0; gap: 2px; justify-content: center; }
  .gnb-desktop a { padding: 0 14px; font-size: 15px; font-weight: 600; border-bottom-width: 3px; }
  .gnb-desktop a:hover, .gnb-desktop a.active { color: var(--color-primary); border-bottom-color: var(--color-accent); }
  .header-cta { display: inline-flex; height: 42px; padding: 0 20px; font-size: 15px; }
  .gnb-dropdown { border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(11,42,79,.12), inset 0 0 0 1px var(--color-border); }
  .gnb-dropdown a, .gnb-dropdown .dd-disabled { border-radius: var(--radius); }
}
/* 1200px보다 좁은 PC 화면은 한 줄에 다 들어가도록 아이콘을 줄인다 */
@media (min-width: 1024px) and (max-width: 1239px) {
  .header-actions .desktop-only-icon { display: none; }
  .gnb-desktop a { padding: 0 10px; font-size: 14px; }
  .logo .lg-a { font-size: 13px; }
  .logo .lg-b { font-size: 14px; }
}

/* ---------- 푸터 ---------- */
.site-footer { background: #0f1b2d; border-top: 0; color: #aeb9cb; }
.site-footer .container { color: #aeb9cb; }
.site-footer .foot-brand { color: #fff; font-size: 16px; }
.site-footer .foot-tel { color: #fff; }
.site-footer .foot-links a { color: #c9d5e6; }
.site-footer .foot-links a:hover { color: #fff; }
.site-footer .foot-biz { color: #8d9ab0; border-top-color: rgba(255,255,255,.14); }

/* ---------- 홈: 바탕과 공통 제목 ---------- */
body.home { background: #fff; }
.corp-eyebrow {
  display: block; font-size: 14px; font-weight: 700; letter-spacing: .04em;
  color: var(--color-accent); margin: 0 0 10px;
}
.corp-title { font-size: 26px; line-height: 1.3; font-weight: 700; color: var(--color-navy); margin: 0 0 12px; letter-spacing: -.02em; }
.corp-lead { font-size: 15px; line-height: 1.75; color: var(--color-text-sub); margin: 0 0 24px; max-width: 760px; }
.corp-lead .more { color: var(--color-accent); font-weight: 600; white-space: nowrap; }
body.home .section { padding: 44px 0; }
body.home .section-head { align-items: flex-end; }
body.home .section-head h2 { font-size: 22px; color: var(--color-navy); }
body.home .section-head .corp-title { margin-bottom: 0; }
body.home .section-head .more { color: var(--color-accent); }

/* ---------- 홈: 히어로 ---------- */
.corp-hero { background: var(--color-page); padding: 32px 0 36px; border-bottom: 1px solid var(--color-border); }
.corp-hero-grid { display: flex; flex-direction: column; gap: 28px; }
.corp-hero-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.corp-hero .corp-eyebrow { margin: 0; }
.corp-hero h1 { margin: 0; font-size: 32px; line-height: 1.28; font-weight: 700; color: var(--color-navy); letter-spacing: -.025em; }
.corp-hero p { margin: 0; font-size: 16px; line-height: 1.75; color: #3a465c; max-width: 540px; }
.corp-hero-cta { display: flex; flex-direction: column; gap: 10px; }
.corp-hero-cta .btn { width: 100%; height: 52px; font-size: 16px; }
.corp-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; padding-top: 18px; border-top: 1px solid var(--color-border); }
.corp-proof dt { font-size: 18px; font-weight: 700; color: var(--color-navy); line-height: 1.3; }
.corp-proof dd { margin: 2px 0 0; font-size: 14px; color: var(--color-text-sub); line-height: 1.45; }
.corp-hero-photo { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 260px; background: var(--color-navy); }
.corp-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.corp-hero-steps { position: absolute; left: 12px; right: 12px; bottom: 12px; background: #fff; border-radius: var(--radius); padding: 14px 16px; }
.corp-hero-steps b { display: block; font-size: 14px; color: var(--color-text-sub); font-weight: 600; margin-bottom: 8px; }
.corp-hero-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 14px; font-weight: 700; color: var(--color-navy); }
.corp-hero-steps li + li::before { content: '\2192'; color: #8a97ad; font-weight: 400; margin-right: 6px; }

@media (min-width: 1024px) {
  .corp-hero { padding: 56px 0 64px; }
  .corp-hero-grid { flex-direction: row; align-items: center; gap: 56px; }
  .corp-hero-text { flex: 1 1 52%; gap: 22px; }
  .corp-hero h1 { font-size: 52px; line-height: 1.2; }
  .corp-hero p { font-size: 18px; }
  .corp-hero-cta { flex-direction: row; }
  .corp-hero-cta .btn { width: auto; height: 52px; padding: 0 28px; }
  .corp-proof dt { font-size: 24px; }
  .corp-hero-photo { flex: 1 1 44%; min-height: 480px; align-self: stretch; }
  .corp-hero-steps { left: 20px; right: 20px; bottom: 20px; padding: 16px 20px; }
}

/* ---------- 홈: 함께한 기업 띠 (등록된 기업이 있을 때만 보인다 — main.js) ---------- */
#trust-row { padding: 28px 0; border-bottom: 1px solid var(--color-border); }
.corp-trust { display: flex; flex-direction: column; gap: 14px; }
.corp-trust-label { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--color-text-sub); }
.tr-list { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.tr-item { opacity: 1; color: var(--color-navy); font-size: 16px; }
@media (min-width: 1024px) {
  .corp-trust { flex-direction: row; align-items: center; gap: 40px; }
  .corp-trust-label { flex: 0 0 160px; }
}

/* ---------- 홈: 서비스 4칸 ---------- */
.corp-service-grid { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--color-navy); }
.corp-service {
  display: flex; flex-direction: column; gap: 10px; padding: 22px 0; color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.corp-service:hover h3 { color: var(--color-accent); }
.cs-no { font-size: 15px; font-weight: 700; color: var(--color-accent); }
.corp-service h3 { margin: 0; font-size: 21px; font-weight: 700; color: var(--color-navy); letter-spacing: -.01em; }
.corp-service p { margin: 0; font-size: 16px; line-height: 1.7; color: #3a465c; }
.cs-more { font-size: 15px; font-weight: 600; color: var(--color-accent); margin-top: 2px; }
@media (min-width: 1024px) {
  .corp-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .corp-service { padding: 28px 28px 8px; border-bottom: 0; border-left: 1px solid var(--color-border); }
  .corp-service:first-child { padding-left: 0; border-left: 0; }
  .corp-title { font-size: 36px; }
  .corp-lead { font-size: 16px; }
}

/* ---------- 홈: 지역 카드 — 사진 아래에 글을 두는 형태 ---------- */
.corp-regions { background: var(--color-page); box-shadow: 0 0 0 100vmax var(--color-page); clip-path: inset(0 -100vmax); }
#premium-regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
#premium-regions .region-card {
  position: static; display: flex; flex-direction: column; gap: 12px; aspect-ratio: auto; height: auto;
  background: transparent; border-radius: 0; box-shadow: none; overflow: visible; color: var(--color-text); transform: none;
}
#premium-regions .region-card::before, #premium-regions .region-card::after { display: none; }
#premium-regions .region-card img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); transform: none; }
#premium-regions .region-card:hover img { transform: none; opacity: .92; }
#premium-regions .region-card .rc-body { position: static; padding: 0; color: var(--color-text); }
#premium-regions .region-card .rc-tag { display: none; }
#premium-regions .region-card .rc-name { font-size: 18px; font-weight: 700; color: var(--color-navy); margin: 0 0 4px; }
#premium-regions .region-card .rc-desc { font-size: 15px; line-height: 1.6; color: #3a465c; }
#premium-regions .region-card:hover .rc-name { color: var(--color-accent); }
@media (min-width: 768px) { #premium-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; } }

/* ---------- 홈: 진행 절차 5단계 ---------- */
.corp-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.corp-steps li { padding: 16px 0; border-top: 2px solid var(--color-navy); }
.corp-steps .st-no { font-size: 14px; font-weight: 700; color: var(--color-accent); }
.corp-steps h3 { margin: 4px 0 6px; font-size: 19px; font-weight: 700; color: var(--color-navy); }
.corp-steps p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--color-text-sub); }
@media (min-width: 1024px) {
  .corp-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .corp-steps li { padding: 16px 0 0; }
}

/* ---------- 홈: 등록 혜택 카드 ---------- */
.corp-benefits .section-title, .corp-benefits h2.section-title { color: var(--color-navy); font-size: 26px; font-weight: 700; }
.corp-benefits .section-lead { font-size: 15px; color: var(--color-text-sub); }
.benefit-card .bc-photo { border-radius: var(--radius); }
.benefit-card h3 { font-size: 16px; }
.benefit-card .bc-price { color: var(--color-accent); }
@media (min-width: 1024px) { .corp-benefits .section-title { font-size: 36px; } }

/* ---------- 홈: 하단 상담 띠 ---------- */
body.home .cta-banner { background: var(--color-navy); border-radius: var(--radius-lg); padding: 40px 24px; }
body.home .cta-banner h2 { font-size: 24px; line-height: 1.4; color: #fff; }
body.home .cta-banner p { color: #c9d5e6; font-size: 15px; }
body.home .hero-consult { border-radius: var(--radius-lg); }
body.home .hero-consult input, body.home .hero-consult select { border-radius: var(--radius); }
body.home .hero-consult button { background: var(--color-accent); border-radius: var(--radius); }
body.home .hero-consult button:hover { background: var(--color-accent-dark); }
body.home .cta-banner .btn-primary { background: #fff; color: var(--color-navy); }
body.home .cta-banner .btn-primary:hover { background: var(--color-primary-light); }
@media (min-width: 1024px) {
  body.home .cta-banner { padding: 56px 48px; }
  body.home .cta-banner h2 { font-size: 34px; }
  body.home .cta-banner .hero-consult { max-width: 720px; }
  body.home .cta-banner .hc-row { flex-direction: row; }
  body.home .cta-banner .hero-consult button { width: auto; padding: 0 24px; flex: 0 0 auto; }
  body.home .cta-banner .hero-consult .hc-submit { width: 100%; padding: 0; }
  body.home .cta-banner .hero-consult .hc-row { gap: 10px; }
}
body.home .cta-banner .hero-consult .hc-label { color: var(--color-navy); }
body.home .cta-banner .hero-consult .hc-message { border-radius: var(--radius); }

/* ---------- 홈: 모바일 하단 상담 바 ---------- */
.m-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--color-border);
}
.m-cta-bar .btn { flex: 1; height: 50px; font-size: 16px; }
.m-cta-bar .btn-primary { flex: 1.4; }
body.home { padding-bottom: 72px; }
@media (min-width: 1024px) { .m-cta-bar { display: none; } body.home { padding-bottom: 0; } }

/* ---------- 홈: 길이 줄이기 (섹션은 유지하되 한 번에 보이는 개수를 6개로) ---------- */
body.home .section { padding: 40px 0; }
#premium-regions .region-card img { aspect-ratio: 3 / 2; }
#latest-feed .feed-item:nth-child(n+7), #campus-gallery > *:nth-child(n+7) { display: none; }
#trust-row { display: none; }   /* 등록된 기업이 있을 때만 main.js 가 보여준다 */

/* ---------- 홈: 하단 상담 폼 글자색 (배너 안의 p 규칙이 폼 안내 문구까지 번지지 않도록) ---------- */
body.home .cta-banner .hero-consult .hc-title { color: var(--color-navy); font-size: 15px; }
body.home .cta-banner .hero-consult .hc-note { color: var(--color-text-sub); }
body.home .cta-banner .hero-consult .hc-done { color: var(--color-navy); }

/* 드롭다운은 세로 목록 (위의 .gnb-desktop ul 규칙이 안쪽 ul 까지 가로 배치로 만들지 않도록) */
.gnb-desktop .gnb-dropdown { display: block; height: auto; max-width: none; padding: 6px; gap: 0; justify-content: flex-start; }
.gnb-desktop .gnb-dropdown li { display: block; }
.gnb-desktop .gnb-dropdown a { height: auto; padding: 10px 14px; border-bottom: 0; }

/* ==========================================================================
   홈 길이 줄이기 2차 (2026-10-15) — 섹션은 그대로 두고, 한 번에 보이는 개수와 사진 비율만 줄인다.
   숨긴 항목은 목록 페이지(학교·칼럼·후기)와 각 섹션의 '더보기'에서 그대로 볼 수 있다.
   더 많이 보이게 하려면 아래 nth-child 숫자만 키우면 된다.
   ========================================================================== */
#premium-regions .region-card img { aspect-ratio: 16 / 10; }
#recommended-schools > *:nth-child(n+4) { display: none; }            /* 추천 국제학교 3개 */
#latest-columns > *:nth-child(n+5) { display: none; }                  /* 신규 칼럼 4개 */
#latest-feed .feed-item:nth-child(n+5) { display: none; }              /* 이용후기·Q&A 4개 */
#campus-gallery > *:nth-child(n+5) { display: none; }                  /* 사진 4장 (한 줄) */
.benefit-card .bc-photo { aspect-ratio: 16 / 10; height: auto; }
.corp-benefits .benefit-grid { gap: 16px 12px; }
body.home .corp-services { padding-bottom: 28px; }
body.home .corp-process { padding-top: 28px; padding-bottom: 28px; }
@media (min-width: 1024px) {
  body.home .section { padding: 32px 0; }
  .corp-hero { padding: 44px 0 48px; }
  .corp-hero-photo { min-height: 420px; }
  .corp-benefits .benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #recommended-schools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 홈 길이 줄이기: 모바일 ---------- */
@media (max-width: 767px) {
  .corp-hero-photo { min-height: 210px; }
  .corp-service { padding: 16px 0; gap: 6px; }
  .corp-service p { font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cs-more { display: none; }
  .corp-service h3 { font-size: 19px; }
  #premium-regions { gap: 16px 12px; }
  #premium-regions .region-card { gap: 8px; }
  #premium-regions .region-card .rc-desc { display: none; }
  #premium-regions .region-card .rc-name { font-size: 16px; margin: 0; }
  .corp-steps li { padding: 12px 0; }
  .corp-steps h3 { margin: 2px 0 4px; font-size: 18px; }
  .corp-steps p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .benefit-card p { display: none; }
  .benefit-card h3 { font-size: 15px; }
  .corp-title { font-size: 24px; }
  body.home .section { padding: 28px 0; }
}
@media (max-width: 767px) {
  .corp-steps li { display: grid; grid-template-columns: 58px 1fr; column-gap: 12px; align-items: baseline; }
  .corp-steps .st-no { grid-row: 1 / 3; }
  .corp-steps h3, .corp-steps p { grid-column: 2; }
  .corp-lead { margin-bottom: 14px; }
  .corp-service { padding: 12px 0; }
  .corp-service .cs-no { display: none; }
}