/* ══════════════════════════════════════════════════════════════
   표쌤코딩 — 정돈된 기관형 리스킨 (clean-2026)
   ▸ 맨 마지막 로드. 기존 CSS 위에 덮어씀.
   ▸ 방향: ebssw.kr 계열의 "공공 교육기관" 무드.
     흰 배경 기본 / 섹션 제목 좌측정렬·짧게 / 영문 eyebrow 제거 /
     그라디언트·형광펜 하이라이트 제거 / 큰 그림자·큰 라운드 제거 /
     얇은 회색 테두리 카드 + 정보 밀도 위주.
   ══════════════════════════════════════════════════════════════ */

:root{
  --c-ink:#161d29;         /* 본문 진한 먹 */
  --c-ink-2:#4b5666;
  --c-ink-3:#8b95a5;
  --c-line:#e3e6eb;        /* 카드/구분선 */
  --c-line-2:#eef0f4;
  --c-blue:#1D5FD0;        /* 브랜드 블루(차분하게) */
  --c-blue-dark:#164BA6;
  --c-blue-soft:#F1F6FE;
  --c-yellow:#FFD400;
  --c-bg:#ffffff;
  --c-bg-2:#F7F8FA;
  --c-r:8px;
  --c-r-sm:4px;
}

/* ── 기본 ───────────────────────────────────────────── */
html{ background:var(--c-bg) !important; }
body{
  background:var(--c-bg) !important;
  color:var(--c-ink) !important;
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Noto Sans KR",sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
/* 화면 전체를 덮던 파스텔 '오로라' 그라디언트 + 노이즈 텍스처 레이어 제거
   — 이 두 장이 페이지 전체에 옅은 보라/민트 물을 들이고 있었다 */
body::before,body::after{ display:none !important; content:none !important; background:none !important; }

.c{ width:min(calc(100% - 40px),1160px) !important; max-width:1160px !important; margin:0 auto !important; padding-left:0 !important; padding-right:0 !important; }

/* 섹션 배경 전부 흰색으로 통일 — 색 블록 남발이 '템플릿 티'의 주범 */
.corp-section,
.business-section,.programs-section,.store-section,
.blog-section,.reviews-section,.contact-section,.worksheet-section{
  background:var(--c-bg) !important;
  padding:74px 0 !important;
  border:none !important;
}
/* 섹션 사이 얇은 구분선 */
.corp-section + .corp-section,
.reviews-section, .contact-section{ border-top:1px solid var(--c-line-2) !important; }

/* ── 상단 네비: 떠 있는 알약 → 붙어 있는 흰 바 ─────────── */
.navbar{
  position:sticky !important; top:0 !important; left:0 !important; right:0 !important;
  width:100% !important; max-width:none !important;
  margin:0 !important; transform:none !important;
  border-radius:0 !important;
  background:#fff !important;
  border-bottom:1px solid var(--c-line) !important;
  box-shadow:none !important;
  padding:0 28px !important;
  height:66px !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  z-index:900 !important;
}
.nav-brand{ gap:10px !important; }
.nav-brand .nav-logo{
  width:32px !important; height:32px !important; line-height:32px !important;
  border-radius:6px !important; font-size:1rem !important;
  background:var(--c-blue) !important; box-shadow:none !important;
}
.nav-title strong{ font-size:1.05rem !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--c-ink) !important; }
.nav-title small{ font-size:.62rem !important; letter-spacing:.14em !important; color:var(--c-ink-3) !important; }

.nav-right-menu{ gap:2px !important; }
.nav-right-menu .nav-pill{
  border-radius:var(--c-r-sm) !important;
  border:none !important; background:none !important;
  font-size:.95rem !important; font-weight:600 !important;
  color:#39404d !important;
  padding:9px 15px !important;
  box-shadow:none !important;
}
.nav-right-menu .nav-pill:hover{ background:var(--c-blue-soft) !important; color:var(--c-blue) !important; }
.nav-right-menu .nav-pill-worksheet{
  background:var(--c-blue) !important; color:#fff !important;
  border-radius:var(--c-r-sm) !important; margin-left:10px !important;
  font-weight:700 !important; padding:9px 17px !important;
}
.nav-right-menu .nav-pill-worksheet:hover{ background:var(--c-blue-dark) !important; color:#fff !important; }
.nav-toggle{ border:1px solid var(--c-line) !important; border-radius:var(--c-r-sm) !important; }

/* ── 히어로: 높이 줄이고 좌 텍스트 / 우 이미지 ───────────── */
.pw-hero{
  background:var(--c-bg-2) !important;
  border-bottom:1px solid var(--c-line) !important;
  padding:0 !important;
}
.pw-hero-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:48px !important; align-items:center !important;
  min-height:400px !important;
  padding:52px 24px !important;
}
.pw-hero-copy{ max-width:none !important; }
/* 알약형 영문 eyebrow 제거 */
.pw-eyebrow{ display:none !important; }
.pw-hero-title{
  font-size:2.5rem !important; line-height:1.32 !important;
  font-weight:800 !important; letter-spacing:-.035em !important;
  color:var(--c-ink) !important; margin:0 0 18px !important;
}
/* 형광펜 하이라이트 제거 → 브랜드 컬러 단색 */
.pw-hl{ background:none !important; color:var(--c-blue) !important; padding:0 !important; border-radius:0 !important; }
.pw-hero-sub{ font-size:1rem !important; line-height:1.75 !important; color:var(--c-ink-2) !important; margin:0 0 28px !important; max-width:460px !important; }
.pw-hero-actions{ margin-bottom:0 !important; gap:10px !important; }
/* 알약 칩 8개 나열 제거 */
.pw-hero-chips{ display:none !important; }

.pw-hero-visual{ position:relative; }
.pw-hero-visual img{
  width:100% !important; aspect-ratio:16/10; object-fit:cover;
  border-radius:var(--c-r) !important; display:block;
  border:1px solid var(--c-line);
}

/* ── 버튼: 알약 → 각진 사각 ───────────────────────────── */
.btn-primary,.contact-cta{
  background:var(--c-blue) !important; color:#fff !important;
  border-radius:var(--c-r-sm) !important; box-shadow:none !important;
  font-weight:700 !important; font-size:.95rem !important;
  padding:13px 26px !important; border:1px solid var(--c-blue) !important;
}
.btn-primary:hover,.contact-cta:hover{ background:var(--c-blue-dark) !important; border-color:var(--c-blue-dark) !important; }
.btn-ghost,.button-secondary{
  background:#fff !important; color:var(--c-ink) !important;
  border:1px solid #cdd3dc !important; border-radius:var(--c-r-sm) !important;
  box-shadow:none !important; font-weight:600 !important; font-size:.95rem !important;
  padding:13px 24px !important;
}
.btn-ghost:hover,.button-secondary:hover{ border-color:var(--c-blue) !important; color:var(--c-blue) !important; background:#fff !important; }
.btn-primary .arrow,.business-card-link .arrow{ font-weight:400 !important; }

/* ── 섹션 헤더: 가운데정렬+영문 eyebrow+그라디언트 → 좌측정렬 단문 ── */
.section-eyebrow{ display:none !important; }
.section-headline,.section-head h2{
  text-align:left !important;
  font-size:1.7rem !important; font-weight:800 !important;
  letter-spacing:-.035em !important; line-height:1.4 !important;
  color:var(--c-ink) !important;
  margin:0 0 8px !important;
}
.section-headline.center{ text-align:left !important; }
/* 그라디언트 텍스트 완전 제거 */
.grad{
  background:none !important; -webkit-background-clip:initial !important;
  background-clip:initial !important; -webkit-text-fill-color:currentColor !important;
  color:var(--c-blue) !important;
}
.section-lead{
  text-align:left !important;
  font-size:.97rem !important; color:var(--c-ink-2) !important;
  line-height:1.7 !important; margin:0 0 28px !important; max-width:760px !important;
}
/* 섹션 헤더 줄: 제목 좌 / 링크 우 */
.sec-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; margin-bottom:22px; flex-wrap:wrap;
}
.sec-head > div{ min-width:0; }
.sec-head .section-lead{ margin-bottom:0 !important; }
.sec-more{
  flex:none; font-size:.9rem; font-weight:600; color:var(--c-ink-2);
  text-decoration:none; white-space:nowrap; padding-bottom:2px;
}
.sec-more:hover{ color:var(--c-blue); }

/* ── 카드 공통: 큰 라운드+큰 그림자 → 얇은 테두리 평면 ──── */
.business-card,.program-card,.content-card,.blog-card,.store-card,
.review-card,.contact-info-card,.glass-card{
  border-radius:var(--c-r) !important;
  border:1px solid var(--c-line) !important;
  box-shadow:none !important;
  background:#fff !important;
  backdrop-filter:none !important;
  transition:border-color .18s ease, box-shadow .18s ease !important;
}
.business-card:hover,.program-card:hover,.content-card:hover,
.blog-card:hover,.store-card:hover{
  transform:none !important;
  border-color:#b9c6da !important;
  box-shadow:0 3px 12px rgba(22,29,41,.07) !important;
}
/* 좌측 컬러 액센트 바 / 배경 글로우 제거 */
.business-card::before,.business-card::after{ display:none !important; }

/* ── 사업분야 3카드 ───────────────────────────────────── */
.business-grid{ gap:22px !important; }
.business-card-hero{
  aspect-ratio:16/10 !important; min-height:0 !important;
  border-radius:var(--c-r) var(--c-r) 0 0 !important;
  border-bottom:1px solid var(--c-line) !important;
}
.business-card-hero::after{ display:none !important; }   /* 사진 위 어두운 오버레이 제거 */
.business-num{ display:none !important; }                /* 사진 위 큰 01/02/03 제거 */
.business-card-body{ padding:20px 22px 22px !important; }
.business-card-label{
  display:inline-block !important;
  font-size:.72rem !important; font-weight:700 !important;
  color:var(--c-blue) !important; background:var(--c-blue-soft) !important;
  border-radius:3px !important; padding:4px 9px !important;
  letter-spacing:0 !important; margin-bottom:11px !important;
}
.business-card h3{ font-size:1.12rem !important; font-weight:800 !important; letter-spacing:-.03em !important; margin:0 0 8px !important; color:var(--c-ink) !important; }
.business-card p{ font-size:.9rem !important; line-height:1.65 !important; color:var(--c-ink-2) !important; margin:0 0 14px !important; }
.business-card-link{ font-size:.86rem !important; font-weight:600 !important; color:var(--c-ink-2) !important; }
.business-card:hover .business-card-link{ color:var(--c-blue) !important; }
.business-card:hover .business-card-hero img{ transform:none !important; }

/* ── 탭: 알약 박스 → 밑줄형 ───────────────────────────── */
.tab-bar{
  border:none !important;                       /* 원본 border 4면 제거가 먼저 */
  border-bottom:1px solid var(--c-line) !important;
  width:100% !important;                        /* 원본 width:fit-content 해제 */
  gap:0 !important; margin:0 0 26px !important;
  background:none !important; padding:0 !important; border-radius:0 !important;
  backdrop-filter:none !important;
  display:flex !important; justify-content:flex-start !important;
}
.tab-btn{
  background:none !important; border:none !important; border-radius:0 !important;
  box-shadow:none !important;
  padding:12px 20px !important; margin-bottom:-1px !important;
  font-size:1rem !important; font-weight:600 !important; color:var(--c-ink-3) !important;
  border-bottom:2px solid transparent !important;
}
.tab-btn.active{
  background:none !important; color:var(--c-ink) !important;
  font-weight:800 !important; border-bottom:2px solid var(--c-blue) !important;
}
.section-head{ margin-bottom:18px !important; }
.section-head p{ font-size:.92rem !important; color:var(--c-ink-2) !important; margin:4px 0 0 !important; }

/* ── 프로그램/콘텐츠/블로그/스토어 카드 ───────────────── */
.program-grid,.content-grid,.blog-grid,.store-grid{ gap:20px !important; }

/* 키트 카드: 안쪽 여백형 → 이미지 상단 풀블리드형(ebssw식)
   마크업 순서가 [배지줄 → 이미지 → 제목 → 태그 → 푸터]라 order로 이미지를 맨 위로 올린다 */
.program-card,.program-card.glass-card{
  padding:0 !important; border-radius:var(--c-r) !important;
  border:1px solid var(--c-line) !important; background:#fff !important;
  box-shadow:none !important; backdrop-filter:none !important;
  display:flex !important; flex-direction:column !important;
}
.program-card::before,.program-card::after{ display:none !important; content:none !important; }
.program-card:hover{ transform:none !important; }
.program-card-visual{
  order:-1 !important;
  height:172px !important; margin:0 0 16px !important;
  border-radius:var(--c-r) var(--c-r) 0 0 !important;
  border-bottom:1px solid var(--c-line) !important;
  background:var(--c-bg-2) !important;
}
.program-card-dual-visual{ background:var(--c-bg-2) !important; }
.program-card:hover .program-card-visual img{ transform:none !important; }
.program-card-visual-placeholder{ background:var(--c-bg-2) !important; }
.program-card-visual-placeholder span{ color:var(--c-ink-3) !important; font-weight:600 !important; }
/* 이미지를 뺀 나머지 자식에만 좌우 여백 */
.program-card > .card-badge-row,
.program-card > div:not([class]),
.program-card > .tag-list,
.program-card > .program-footer{ padding-left:18px !important; padding-right:18px !important; }
.program-card > .card-badge-row{ margin-bottom:10px !important; }
.program-card > .tag-list{ padding-top:10px !important; padding-bottom:12px !important; }
.program-card > .program-footer{ padding-bottom:16px !important; padding-top:12px !important; border-top:1px solid var(--c-line-2) !important; margin-top:auto !important; }
.program-footer .muted{ font-size:.8rem !important; color:var(--c-ink-3) !important; }

.content-card-visual,.blog-card-thumb,.store-card-thumb{
  border-radius:var(--c-r) var(--c-r) 0 0 !important;
  border-bottom:1px solid var(--c-line) !important;
}
/* 콘텐츠 카드 아이콘 띠 (main.js가 라인 SVG를 넣음)
   ⚠️ SVG 크기 규격 `.ic` 는 redesign-content.css 에만 있고 메인은 그 파일을 로드하지 않는다.
      여기서 크기를 지정하지 않으면 SVG가 컨테이너를 100% 채워 획만 거대하게 보인다. */
.content-card-visual{
  background:var(--c-bg-2) !important;
  height:96px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:var(--c-blue) !important;
}
.content-card-visual svg,.content-card-visual .ic{
  width:34px !important; height:34px !important;
  flex:none !important; display:block !important;
}
/* coverImage 가 지정된 카드는 사진 썸네일.
   고정 172px 이면 카드폭 371px 기준 2.16:1 이라 3:2 원본에서 세로 30%가 잘린다.
   16/10 으로 두면 크롭이 6% 수준이라 장면이 대부분 살아남는다. */
.content-card-visual.has-image{ height:auto !important; aspect-ratio:16/10; padding:0 !important; background:var(--c-bg-2) !important; }
.content-card-visual.has-image img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.content-card-body{ padding:20px 22px 22px !important; }
.card-title,.content-card-title,.program-card-title{
  font-size:1.02rem !important; font-weight:700 !important;
  letter-spacing:-.03em !important; color:var(--c-ink) !important;
}
.card-description,.content-card-desc,.program-card-desc,.blog-card-body p{
  font-size:.88rem !important; line-height:1.6 !important; color:var(--c-ink-2) !important;
}
/* 태그·배지 — 알록달록 알약 → ebssw식 작은 사각 라벨
   (배지는 div, 태그는 li 로 렌더되므로 요소를 정확히 잡는다) */
.card-badge-row > div,.card-badge-row > span,
.tag-list > li,.content-card-tags > span,
.card-kit-badge,.card-lesson-info,
.content-card-cat,.blog-card-cat{
  display:inline-flex !important; align-items:center !important;
  border-radius:3px !important;
  font-size:.72rem !important; font-weight:600 !important;
  padding:3px 8px !important; letter-spacing:0 !important;
  border:1px solid var(--c-line) !important;
  background:#fff !important; color:var(--c-ink-2) !important;
  box-shadow:none !important; text-transform:none !important;
}
/* 대표 분류만 브랜드 블루로 강조 */
.card-badge-row > div:first-child,
.content-card-cat,.blog-card-cat{
  border-color:#cfe0fb !important; background:var(--c-blue-soft) !important; color:var(--c-blue) !important;
}
.content-card-btn{
  border-radius:var(--c-r-sm) !important; box-shadow:none !important;
  font-size:.86rem !important; font-weight:600 !important;
}
.blog-card-date,.content-card-meta,.card-lesson-info{ font-size:.8rem !important; color:var(--c-ink-3) !important; }

/* ── 디지털 학습지 / 스토어 CTA: 통짜 컬러블록 → 절제된 박스 ── */
.worksheet-section .store-cta-panel,#store .store-cta-panel,.store-cta-panel{
  background:var(--c-bg-2) !important;
  border:1px solid var(--c-line) !important;
  border-radius:var(--c-r) !important;
  box-shadow:none !important;
  color:var(--c-ink) !important;
  padding:28px 30px !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:24px !important; flex-wrap:wrap !important;
}
.store-cta-badge{
  background:#fff !important; color:var(--c-blue) !important;
  border:1px solid #cfe0fb !important; border-radius:3px !important;
  font-size:.7rem !important; font-weight:700 !important; padding:4px 9px !important;
  letter-spacing:0 !important; box-shadow:none !important;
}
.store-cta-panel .store-cta-text h3{ color:var(--c-ink) !important; font-size:1.2rem !important; font-weight:800 !important; letter-spacing:-.03em !important; margin:11px 0 6px !important; }
.store-cta-panel .store-cta-text p{ color:var(--c-ink-2) !important; font-size:.92rem !important; margin:0 !important; }
.store-cta-button{
  background:var(--c-blue) !important; color:#fff !important;
  border:1px solid var(--c-blue) !important; border-radius:var(--c-r-sm) !important;
  box-shadow:none !important; font-weight:700 !important; font-size:.93rem !important;
  padding:12px 22px !important;
}
.store-cta-button:hover{ background:var(--c-blue-dark) !important; border-color:var(--c-blue-dark) !important; }
.store-cta-button--alt{ background:#fff !important; color:var(--c-blue) !important; border:1px solid #b9cdf0 !important; }
.store-cta-button--alt:hover{ background:var(--c-blue-soft) !important; color:var(--c-blue-dark) !important; }
.worksheet-cta-buttons{ gap:10px !important; }

.store-bulk-notice{
  background:#fff !important; border:1px solid var(--c-line) !important;
  border-radius:var(--c-r) !important; box-shadow:none !important;
  margin-top:18px !important; padding:18px 22px !important;
}
.store-bulk-icon{ background:var(--c-blue-soft) !important; color:var(--c-blue) !important; border-radius:var(--c-r-sm) !important; box-shadow:none !important; }
.store-bulk-text{ font-size:.92rem !important; color:var(--c-ink-2) !important; }
/* 보라 그라디언트 알약 → 흰 배경 아웃라인 버튼 */
.store-bulk-link{
  background:#fff !important; background-image:none !important;
  color:var(--c-blue) !important;
  border:1px solid #b9cdf0 !important; border-radius:var(--c-r-sm) !important;
  box-shadow:none !important; transform:none !important;
  font-weight:600 !important; font-size:.88rem !important; padding:9px 16px !important;
}
.store-bulk-link:hover{ background:var(--c-blue-soft) !important; transform:none !important; box-shadow:none !important; }
.store-bulk-link:hover svg{ transform:none !important; }

/* ── 후기: 그라디언트 아바타·별점 과장 정리 ─────────────── */
.reviews-grid{ gap:20px !important; }
.review-card{ padding:24px 24px 22px !important; }
.review-stars{ color:#FFB300 !important; font-size:.88rem !important; letter-spacing:.06em !important; }
.review-quote{ font-size:.93rem !important; line-height:1.72 !important; color:var(--c-ink) !important; }
.review-avatar{
  background:var(--c-blue-soft) !important; color:var(--c-blue) !important;
  border-radius:50% !important; font-weight:700 !important;
  width:38px !important; height:38px !important; font-size:.9rem !important;
  box-shadow:none !important;
}
.review-info strong{ font-size:.9rem !important; color:var(--c-ink) !important; }
.review-info span{ font-size:.8rem !important; color:var(--c-ink-3) !important; }

/* ── 문의 ─────────────────────────────────────────────── */
.contact-info-card{ padding:26px 28px !important; }
.contact-info-row strong{ font-size:.82rem !important; color:var(--c-ink-3) !important; font-weight:600 !important; }
.contact-info-row span{ font-size:.96rem !important; color:var(--c-ink) !important; }
/* 아이콘 4색(파랑·보라·초록·주황) → 단색 통일 */
.contact-info-icon,
.contact-info-icon.icon-blue,.contact-info-icon.icon-purple,
.contact-info-icon.icon-green,.contact-info-icon.icon-orange{
  border-radius:var(--c-r-sm) !important;
  background:var(--c-blue-soft) !important;
  color:var(--c-blue) !important;
  box-shadow:none !important;
}
.contact-info-icon svg{ width:18px; height:18px; }
.contact-map,.contact-map iframe{ border-radius:var(--c-r) !important; border:1px solid var(--c-line) !important; box-shadow:none !important; }

/* ── 푸터 ─────────────────────────────────────────────── */
.site-footer{
  background:var(--c-bg-2) !important;
  border-top:1px solid var(--c-line) !important;
  color:var(--c-ink-2) !important;
  padding:38px 0 32px !important;
}
.footer-top a{ color:var(--c-ink) !important; font-size:.9rem !important; font-weight:600 !important; }
.footer-top a:hover{ color:var(--c-blue) !important; }
.footer-divider{ color:var(--c-line) !important; }
.footer-info p{ font-size:.83rem !important; color:var(--c-ink-2) !important; line-height:1.8 !important; }
.footer-copy{ font-size:.8rem !important; color:var(--c-ink-3) !important; margin-top:14px !important; }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width:900px){
  .pw-hero-grid{ grid-template-columns:1fr !important; gap:28px !important; min-height:0 !important; padding:38px 24px !important; }
  .pw-hero-title{ font-size:1.95rem !important; }
  .pw-hero-sub{ max-width:none !important; }
  .navbar{ height:60px !important; padding:0 18px !important; }
  .corp-section,.reviews-section,.contact-section{ padding:52px 0 !important; }
  .section-headline,.section-head h2{ font-size:1.4rem !important; }
  .store-cta-panel{ padding:22px !important; }
}
