/* ============================================================
   하투스과외 – 관 페이지 공통 스타일
   ============================================================ */

:root {
  --navy:       #1b2d4f;
  --navy-light: #2d4a73;
  --accent:     #6b87b0;
  --warm-bg:    #f7f6f3;
  --white:      #ffffff;
  --gray-100:   #f3f4f6;
  --gray-200:   #e5e7eb;
  --gray-300:   #d1d5db;
  --text-main:  #1a1f2e;
  --text-sub:   #52596b;
  --text-light: #8a919e;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow-md:  0 4px 16px rgba(0,0,0,.09);
  --shadow-lg:  0 10px 36px rgba(0,0,0,.12);
  --header-h:   68px;
  --transition: 0.22s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans KR', -apple-system, sans-serif;
  background: var(--warm-bg);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ============================================================
   헤더
   ============================================================ */
.g-header {
  position: sticky;
  top: 0; z-index: 80;
  height: var(--header-h);
  background: rgba(247,246,243,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.g-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.g-logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.g-logo__ko {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
}
.g-logo__en {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.g-header__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-sub);
}
.g-header__nav a { color: var(--text-sub); transition: color var(--transition); }
.g-header__nav a:hover { color: var(--navy); }
.g-header__nav .sep { color: var(--gray-300); }
.g-header__nav .cur { color: var(--navy); font-weight: 700; }
.g-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--navy);
  color: var(--white);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  transition: background var(--transition);
}
.g-header__cta:hover { background: var(--navy-light); }

/* ============================================================
   브레드크럼
   ============================================================ */
.g-breadcrumb {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 10px 0;
}
.g-breadcrumb__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-light);
}
.g-breadcrumb__inner a { transition: color var(--transition); }
.g-breadcrumb__inner a:hover { color: var(--navy); }
.g-breadcrumb__inner .sep { color: var(--gray-300); }
.g-breadcrumb__inner .cur { color: var(--navy); font-weight: 600; }

/* ============================================================
   히어로 배너 (관 페이지 공통)
   ============================================================ */
.g-hero {
  background: var(--navy);
  padding: 80px 0 72px;
  position: relative;
  overflow: hidden;
}
.g-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(107,135,176,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.g-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}
.g-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.g-hero__title {
  font-family: 'Noto Serif KR', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-bottom: 16px;
  word-break: keep-all;
}
.g-hero__desc {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: rgba(255,255,255,0.65);
  line-height: 1.8;
  max-width: 560px;
  word-break: keep-all;
}

/* ============================================================
   본문 래퍼
   ============================================================ */
.g-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 40px 80px;
}

/* ============================================================
   섹션 제목
   ============================================================ */
.g-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.g-section-title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.03em;
  line-height: 1.3;
  margin-bottom: 8px;
  word-break: keep-all;
}
.g-section-desc {
  font-size: 14.5px;
  color: var(--text-sub);
  line-height: 1.8;
  margin-bottom: 36px;
  word-break: keep-all;
}

/* ============================================================
   관 선택 그리드 (허브 페이지)
   ============================================================ */
.g-gwan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}
.g-gwan-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
}
.g-gwan-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.g-gwan-card__icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  background: var(--navy);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}
.g-gwan-card__body { flex: 1; }
.g-gwan-card__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}
.g-gwan-card__desc {
  font-size: 13.5px;
  color: var(--text-sub);
  line-height: 1.7;
  margin-bottom: 12px;
  word-break: keep-all;
}
.g-gwan-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.g-gwan-card__tags span {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(107,135,176,0.1);
  border-radius: 20px;
  padding: 3px 9px;
}
.g-gwan-card__arrow {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--text-light);
  margin-top: 4px;
  transition: color var(--transition), transform var(--transition);
}
.g-gwan-card:hover .g-gwan-card__arrow {
  color: var(--navy);
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .g-gwan-grid { grid-template-columns: 1fr; gap: 14px; }
  .g-gwan-card { padding: 24px 20px; }
}

/* ============================================================
   학교 목록 그룹 (관 페이지)
   ============================================================ */
.g-school-group {
  margin-bottom: 52px;
}
.g-school-group__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200);
}

/* ============================================================
   학교 카드
   ============================================================ */
.g-school-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.g-school-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
}
.g-school-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.g-school-card__name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
  line-height: 1.3;
}
.g-school-card__subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.g-school-card__tag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(107,135,176,0.1);
  border-radius: 20px;
  padding: 2px 8px;
}
.g-school-card__arrow {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 768px) {
  .g-school-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 480px) {
  .g-school-grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   어머님께 메시지 박스
   ============================================================ */
.g-msg-box {
  background: var(--navy);
  border-radius: var(--radius-xl);
  padding: 48px 52px;
  margin-bottom: 52px;
  position: relative;
  overflow: hidden;
}
.g-msg-box::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(107,135,176,0.1);
  top: -80px; right: -60px;
  pointer-events: none;
}
.g-msg-box__label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.g-msg-box__line {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: rgba(255,255,255,0.75);
  font-weight: 400;
  line-height: 1.9;
  word-break: keep-all;
}
.g-msg-box__line--em {
  color: #ffffff;
  font-weight: 700;
}
.g-msg-box__line.mt { margin-top: 10px; }
.g-msg-box__sign {
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

/* ============================================================
   공통 CTA 배너
   ============================================================ */
.g-cta {
  background: var(--navy);
  padding: 64px 32px;
  text-align: center;
}
.g-cta__inner { max-width: 560px; margin: 0 auto; }
.g-cta__label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.g-cta__title {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1.4;
  margin-bottom: 10px;
  word-break: keep-all;
}
.g-cta__desc {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  margin-bottom: 28px;
  word-break: keep-all;
}
.g-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 36px;
  background: #fff;
  color: var(--navy);
  border-radius: 50px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  transition: opacity var(--transition), transform var(--transition);
}
.g-cta__btn:hover { opacity: 0.9; transform: translateY(-2px); }
.g-cta__phone {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* ============================================================
   푸터
   ============================================================ */
.g-footer {
  background: #141e30;
  padding: 32px;
  text-align: center;
}
.g-footer p {
  font-size: 12.5px;
  color: rgba(255,255,255,0.3);
  line-height: 1.8;
}
.g-footer a { color: rgba(255,255,255,0.45); }

/* ============================================================
   관별 히어로 색상 변형
   ============================================================ */
.g-hero--intl   { background: linear-gradient(135deg, #0d3d5c 0%, #1b5e80 100%); }
.g-hero--arts   { background: linear-gradient(135deg, #4a1a3a 0%, #7b3f6e 100%); }
.g-hero--jasago { background: linear-gradient(135deg, #0d2a1a 0%, #1b4d32 100%); }

/* ============================================================
   사례 아카이브 — 필터 바
   ============================================================ */
.arc-filter-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.arc-filter-btn {
  padding: 7px 16px;
  border-radius: 30px;
  border: 1.5px solid var(--gray-300);
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.arc-filter-btn:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.arc-filter-btn--active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* ============================================================
   사례 아카이브 — 카드 그리드
   ============================================================ */
.arc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 52px;
}

/* 아카이브 카드 */
.arc-card {
  background: var(--warm-bg);
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.arc-card:hover {
  box-shadow: 0 12px 36px rgba(27,45,79,.14);
  transform: translateY(-4px);
  border-color: rgba(27,45,79,.18);
}

/* 준비 중 카드 */
.arc-card--coming {
  opacity: .65;
  cursor: default;
  pointer-events: none;
}

/* 카드 상단 컬러 바 */
.arc-card__bar {
  height: 5px;
  flex-shrink: 0;
}

/* 카드 본문 */
.arc-card__body {
  padding: 20px 20px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 메타 상단 줄 */
.arc-card__meta-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.arc-card__school {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: .1px;
}
.arc-card__subject {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  letter-spacing: .1px;
}
.arc-card__subject--english { background: #dbeafe; color: #1d4ed8; }
.arc-card__subject--korean  { background: #fce7f3; color: #9d174d; }
.arc-card__subject--math    { background: #dcfce7; color: #166534; }
.arc-card__subject--conv    { background: #e0f2fe; color: #075985; }
.arc-card__subject--social  { background: #fef3c7; color: #92400e; }
.arc-card__subject--science { background: #f0fdf4; color: #14532d; }

/* 카드 제목 */
.arc-card__title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.4px;
  line-height: 1.45;
}

/* 카드 요약 */
.arc-card__summary {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
  flex: 1;
}

/* 키워드 태그 */
.arc-card__keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.arc-card__kw {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(107,135,176,.1);
  padding: 3px 9px;
  border-radius: 20px;
}

/* 카드 하단 */
.arc-card__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  border-top: 1px solid var(--gray-200);
  transition: gap var(--transition), color var(--transition);
}
.arc-card__footer i { font-size: 11px; transition: transform var(--transition); }
.arc-card:hover .arc-card__footer i { transform: translateX(4px); }
.arc-card__footer--coming {
  color: var(--text-light);
  font-weight: 500;
  gap: 7px;
}

/* ============================================================
   아카이브 — 하단 CTA 박스
   ============================================================ */
.arc-cta-box {
  background: linear-gradient(135deg, #1b2d4f 0%, #2d4a73 100%);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  text-align: center;
  margin-bottom: 48px;
}
.arc-cta-box--arts   { background: linear-gradient(135deg, #4a1a3a 0%, #7b3f6e 100%); }
.arc-cta-box--jasago { background: linear-gradient(135deg, #0d2a1a 0%, #1b4d32 100%); }
.arc-cta-box__text {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  line-height: 1.75;
  margin-bottom: 24px;
}
.arc-cta-box__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--white);
  color: var(--navy);
  border-radius: 40px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.2px;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.arc-cta-box__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* ============================================================
   아카이브 — 다른 관 둘러보기
   ============================================================ */
.arc-other-gwans {
  margin-bottom: 16px;
}
.arc-other-gwans__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: .3px;
  text-align: center;
  margin-bottom: 14px;
}
.arc-other-gwans__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.arc-other-gwan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border: 1.5px solid var(--gray-300);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  text-decoration: none;
  background: var(--white);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.arc-other-gwan-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.arc-other-gwan-btn--home {
  background: var(--warm-bg);
  border-color: var(--gray-200);
  color: var(--text-sub);
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 768px) {
  .g-header__inner { padding: 0 20px; }
  .g-header__nav   { display: none; }
  .g-hero          { padding: 56px 0 52px; }
  .g-hero__inner   { padding: 0 20px; }
  .g-main          { padding: 40px 20px 60px; }
  .g-breadcrumb__inner { padding: 0 20px; }
  .g-school-grid   { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .g-msg-box       { padding: 32px 28px; }
  .g-cta           { padding: 48px 20px; }
}
@media (max-width: 480px) {
  .g-school-grid   { grid-template-columns: 1fr 1fr; }
  .g-msg-box       { padding: 28px 22px; border-radius: var(--radius-lg); }
}