@charset "UTF-8";
/* ==========================================================================
   이바우펫 애견미용학원 — 공통 스타일
   색·간격·글자크기는 아래 :root 변수만 고치면 사이트 전체가 한 번에 바뀝니다.
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* ---------- 1. 디자인 토큰 ---------- */
:root{
  /* 색 : 따뜻한 크림 + 골드 */
  --cream:        #FAF6EF;   /* 기본 배경 */
  --cream-deep:   #F3EADA;   /* 한 톤 진한 배경(섹션 교차용) */
  --surface:      #FFFFFF;   /* 카드 배경 */
  --ink:          #2A211B;   /* 본문 글자(딥브라운) */
  --ink-soft:     #7A6A5B;   /* 보조 글자 */
  --ink-faint:    #A99884;   /* 아주 옅은 글자 */
  --line:         #E9DFCE;   /* 옅은 구분선 */
  --gold:         #B8894A;   /* 포인트 색 */
  --gold-deep:    #8E6733;   /* 포인트 진한 색(hover) */
  --gold-soft:    #E3CDA4;   /* 포인트 옅은 색 */
  --gold-tint:    #FBF3E5;   /* 포인트 배경 틴트 */
  --accent:       #D93F35;   /* 강조용 빨강 (추천 과정 테두리) */

  /* 간격 : 8px 단위 */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  /* 글자 크기 (6단계로 제한) */
  --f-display: clamp(38px, 6.2vw, 72px);
  --f-h1:      clamp(29px, 4.2vw, 46px);
  --f-h2:      clamp(24px, 3vw, 34px);
  --f-h3:      clamp(18px, 2vw, 21px);
  --f-body:    17px;
  --f-small:   14px;

  /* 모서리 */
  --r-sm: 10px; --r: 18px; --r-lg: 26px; --r-pill: 999px;

  /* 그림자 : 넓고 흐리게 */
  --sh-1: 0 1px 2px rgba(42,33,27,.04), 0 10px 30px rgba(42,33,27,.055);
  --sh-2: 0 2px 6px rgba(42,33,27,.05), 0 24px 60px rgba(42,33,27,.09);

  /* 레이아웃 */
  --wrap: 1180px;
  --gutter: 24px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. 리셋 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,
              "Malgun Gothic",sans-serif;
  font-size:var(--f-body);
  line-height:1.75;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
}
img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
h1,h2,h3,h4{ line-height:1.32; letter-spacing:-.025em; font-weight:800; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ---------- 3. 레이아웃 ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ padding-block:var(--s7); }
.sec--tight{ padding-block:var(--s6); }
.sec--tint{ background:var(--cream-deep); }
.sec--white{ background:var(--surface); }

.sec-head{ max-width:760px; margin:0 auto var(--s6); text-align:center; }
.sec-head--left{ margin-inline:0; text-align:left; }
.eyebrow{
  display:inline-block; margin-bottom:var(--s2);
  font-size:13px; font-weight:700; letter-spacing:.18em;
  color:var(--gold); text-transform:uppercase;
}
.sec-head h2{ font-size:var(--f-h2); }
.sec-head .lead{ margin-top:var(--s2); color:var(--ink-soft); font-size:17.5px; }

.grid{ display:grid; gap:var(--s3); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- 4. 버튼 (형태 2종만) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:var(--r-pill);
  font-size:16px; font-weight:700; letter-spacing:-.01em;
  transition:all .25s var(--ease); white-space:nowrap;
}
.btn-fill{ background:var(--gold); color:#fff; box-shadow:0 8px 22px rgba(184,137,74,.28); }
.btn-fill:hover{ background:var(--gold-deep); box-shadow:0 12px 28px rgba(184,137,74,.36); transform:translateY(-2px); }
.btn-line{ border:1.5px solid var(--line); background:var(--surface); color:var(--ink); }
.btn-line:hover{ border-color:var(--gold); color:var(--gold-deep); transform:translateY(-2px); }
.btn-sm{ padding:10px 20px; font-size:15px; }
.btn-lg{ padding:18px 40px; font-size:18px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.btn-row--c{ justify-content:center; }

/* ---------- 5. 상단 유틸바 + 메뉴 ---------- */
.head{ position:sticky; top:0; z-index:80; background:rgba(255,255,255,.93); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.head.is-stuck{ box-shadow:0 6px 24px rgba(42,33,27,.06); }

.util{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding-block:17px; }
.logo{ display:flex; align-items:center; gap:11px; }
.logo .mark{
  width:42px; height:42px; border-radius:13px; flex:none;
  background:linear-gradient(140deg,var(--gold-soft),var(--gold));
  display:grid; place-items:center; color:#fff; font-size:20px;
  box-shadow:0 6px 16px rgba(184,137,74,.3);
}
.logo .name{ font-size:20px; font-weight:800; letter-spacing:-.035em; line-height:1.2; }
.logo .name small{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em; color:var(--gold); }
/* 로고 이미지 : assets/images/logo.png (또는 logo.jpg) 를 넣으면 자동으로 나옵니다.
   로고가 들어오면 상단 여백을 줄여 로고를 조금 더 크게 보여줍니다. */
.logo .brand-img{ height:56px; width:auto; flex:none; }
.has-logo .util{ padding-block:11px; }
.has-logo .logo .brand-img{ height:64px; }
.has-logo .logo{ gap:8px; }

.util-act{ display:flex; align-items:center; gap:9px; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 18px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);
  font-size:15px; font-weight:700; transition:all .25s var(--ease);
}
.chip:hover{ border-color:var(--gold-soft); color:var(--gold-deep); }
.chip--tel{ color:var(--gold-deep); border-color:var(--gold-soft); background:var(--gold-tint); }
.chip--cta{ background:var(--gold); color:#fff; border-color:var(--gold); box-shadow:0 6px 18px rgba(184,137,74,.28); }
.chip--cta:hover{ background:var(--gold-deep); color:#fff; }

.nav{ border-top:1px solid var(--line); }
.nav ul{ display:flex; justify-content:center; gap:4px; }
.nav a{
  display:block; padding:17px 21px; font-size:16.5px; font-weight:700;
  color:var(--ink); position:relative; transition:color .2s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:21px; right:21px; bottom:11px; height:2px;
  background:var(--gold); border-radius:2px; transform:scaleX(0); transition:transform .28s var(--ease);
}
.nav a:hover{ color:var(--gold-deep); }
.nav a:hover::after,.nav a.on::after{ transform:scaleX(1); }
.nav a.on{ color:var(--gold-deep); }

.burger{ display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.burger span{ display:block; width:19px; height:2px; margin:4px auto; background:var(--ink); border-radius:2px; transition:.25s var(--ease); }
.head.is-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.head.is-open .burger span:nth-child(2){ opacity:0; }
.head.is-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- 6. 우측 플로팅 퀵메뉴 (PC) ---------- */
.quick{
  position:fixed; right:20px; top:50%; transform:translateY(-50%); z-index:70;
  width:196px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-2); overflow:hidden;
}
.quick h4{ padding:13px 18px; font-size:12.5px; letter-spacing:.14em; color:#fff; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); }
.quick a{ display:flex; align-items:center; gap:11px; padding:13px 17px; border-top:1px solid var(--line); transition:background .2s var(--ease); }
.quick a:hover{ background:var(--gold-tint); }
.quick .ic{ width:34px; height:34px; flex:none; border-radius:11px; background:var(--gold-tint); display:grid; place-items:center; font-size:16px; }
.quick b{ display:block; font-size:14.5px; line-height:1.4; }
.quick small{ display:block; font-size:11.5px; color:var(--ink-faint); line-height:1.5; }

/* ---------- 7. 모바일 하단 고정 문의바 ---------- */
.mbar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(42,33,27,.08); }
.mbar ul{ display:grid; grid-template-columns:repeat(3,1fr); }
.mbar a{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px calc(10px + env(safe-area-inset-bottom)); font-size:12.5px; font-weight:700; }
.mbar a .ic{ font-size:18px; }
.mbar a.hi{ background:var(--gold); color:#fff; }

/* ---------- 8. 사진 자리(플레이스홀더) ---------- */
.ph{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg,rgba(184,137,74,.045) 0 12px,transparent 12px 24px),
    linear-gradient(150deg,var(--gold-tint),var(--cream-deep));
  display:grid; place-items:center; isolation:isolate;
}
.ph::after{
  content:attr(data-ph); z-index:0; max-width:82%; text-align:center;
  font-size:13px; font-weight:700; line-height:1.6; color:var(--ink-faint);
  padding:10px 16px; border:1.5px dashed var(--gold-soft); border-radius:var(--r-pill);
  background:rgba(255,255,255,.62);
}
.ph img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
.ph--fit img{ object-fit:contain; background:var(--surface); }
.ph--4x3{ aspect-ratio:4/3; }
.ph--1x1{ aspect-ratio:1/1; }
.ph--3x4{ aspect-ratio:3/4; }
.ph--16x9{ aspect-ratio:16/9; }

/* ---------- 8-2. 배너 (글자까지 들어간 완성 이미지) ----------
   assets/images 에 이미지를 넣으면 안내 박스가 사라지고 이미지가 그 자리를 채웁니다. */
.banner{ background:transparent; padding-block:var(--s3) 0; }
/* 배너 양옆에 화면 크기에 비례한 여백을 둡니다.
   너무 넓은 화면에서는 max-width 로 배너가 과하게 커지는 것을 막습니다. */
.banner-link{
  display:block; max-width:1680px; margin-inline:auto;
  padding-inline:clamp(16px, 4vw, 72px);
}
.banner-ph{
  position:relative; min-height:clamp(200px,28vw,330px);
  border-radius:var(--r-lg); overflow:hidden;
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(135deg,rgba(184,137,74,.045) 0 12px,transparent 12px 24px),
    linear-gradient(150deg,var(--gold-tint),var(--cream-deep));
}
.banner-ph::after{
  content:attr(data-ph); max-width:82%; text-align:center;
  font-size:13.5px; font-weight:700; line-height:1.6; color:var(--ink-faint);
  padding:11px 18px; border:1.5px dashed var(--gold-soft); border-radius:var(--r-pill);
  background:rgba(255,255,255,.62);
}
.banner-ph img{ display:none; width:100%; height:auto; }
.banner-ph.has-img{ min-height:0; background:none; }
.banner-ph.has-img::after{ display:none; }
.banner-ph.has-img img{ display:block; }
.banner--slim{ padding-block:var(--s3) 0; }
.banner--slim .banner-ph{ min-height:clamp(110px,12vw,170px); }
.banner--slim .banner-ph.has-img{ min-height:0; }

/* ---------- 9. 히어로 ---------- */
.hero{ position:relative; overflow:hidden; background:linear-gradient(160deg,#FFFDF8 0%,var(--gold-tint) 42%,var(--cream-deep) 100%); }
.hero::before,.hero::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(227,205,164,.55),transparent 68%);
}
.hero::before{ width:620px; height:620px; top:-230px; right:-170px; }
.hero::after{ width:520px; height:520px; bottom:-260px; left:-150px; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.3; }
.hero-in{ position:relative; z-index:2; text-align:center; padding-block:clamp(64px,9vw,128px); }
.hero .tagline{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:var(--s3);
  padding:9px 22px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.8); border:1px solid var(--gold-soft);
  font-size:14.5px; font-weight:700; color:var(--gold-deep);
  box-shadow:0 6px 20px rgba(184,137,74,.13);
}
.hero h1{ font-size:var(--f-display); font-weight:900; letter-spacing:-.045em; }
.hero h1 .gold{
  background:linear-gradient(120deg,var(--gold-deep),var(--gold) 45%,#DFBE86);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub{ max-width:640px; margin:var(--s3) auto 0; font-size:19px; color:var(--ink-soft); }
.hero .ribbon{
  display:inline-block; margin-top:var(--s4); padding:14px 32px;
  border:1.5px solid var(--gold-soft); border-radius:var(--r-pill);
  background:rgba(255,255,255,.72); font-size:16px; font-weight:700; color:var(--ink);
}
.hero .ribbon b{ color:var(--gold-deep); }
.hero .btn-row{ margin-top:var(--s5); }
.hero-note{ margin-top:var(--s3); font-size:14.5px; color:var(--ink-faint); }

/* 서브페이지 상단 */
.phead{ background:linear-gradient(160deg,#FFFDF8,var(--gold-tint)); border-bottom:1px solid var(--line); }
.phead-in{ padding-block:var(--s6); text-align:center; }
.phead h1{ font-size:var(--f-h1); }
.phead p{ margin-top:var(--s2); color:var(--ink-soft); }
.crumb{ font-size:13.5px; color:var(--ink-faint); margin-bottom:var(--s2); }

/* ---------- 10. 카드 ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4); box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--gold-soft); }
.card .ic{
  width:54px; height:54px; border-radius:16px; margin-bottom:var(--s3);
  background:var(--gold-tint); display:grid; place-items:center; font-size:24px;
}
.card h3{ font-size:var(--f-h3); }
.card p{ margin-top:10px; color:var(--ink-soft); font-size:16px; }
.card--flat{ box-shadow:none; }
.card--flat:hover{ transform:none; box-shadow:var(--sh-1); }
.card--pad0{ padding:0; overflow:hidden; }

/* ---------- 10-2. 수강 혜택 목록 ---------- */
.perks{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.perk{
  display:flex; align-items:flex-start; gap:13px;
  padding:20px 22px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.perk:hover{ border-color:var(--gold-soft); transform:translateY(-3px); }
.perk .ic{ font-size:22px; line-height:1.3; flex:none; }
.perk b{ display:block; font-size:16px; letter-spacing:-.025em; }
.perk small{ display:block; margin-top:3px; font-size:14px; color:var(--ink-soft); line-height:1.55; }

/* ---------- 10-3. 캠퍼스 목록 (주소 포함) ---------- */
.camp-group + .camp-group{ margin-top:var(--s5); }
.camp-region{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  font-size:15px; font-weight:800; color:var(--gold-deep); letter-spacing:-.02em;
}
.camp-region::after{ content:""; flex:1; height:1px; background:var(--line); }
.camps{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.camp{
  display:flex; gap:12px; padding:16px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.camp:hover{ border-color:var(--gold-soft); transform:translateY(-2px); }
.camp .pin{ font-size:17px; line-height:1.35; flex:none; }
.camp b{ display:block; font-size:16.5px; letter-spacing:-.03em; }
.camp small{ display:block; margin-top:4px; font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.camp small em{ font-style:normal; color:var(--gold-deep); font-weight:700; }

@media (max-width:960px){ .camps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .camps{ grid-template-columns:1fr; } }

/* ---------- 11. 숫자 성과 ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stat{ background:var(--surface); padding:var(--s5) var(--s3); text-align:center; }
.stat .num{ font-size:clamp(32px,4vw,46px); font-weight:900; letter-spacing:-.04em; color:var(--gold-deep); line-height:1.1; }
.stat .num .u{ font-size:.5em; margin-left:2px; }
.stat .lb{ margin-top:8px; font-size:15px; font-weight:600; color:var(--ink-soft); }

/* ---------- 12. 과정 카드 ---------- */
.course{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); transition:transform .3s var(--ease),box-shadow .3s var(--ease); }
.course:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.course .ph{ border-radius:0; }
.course-body{ padding:var(--s4); display:flex; flex-direction:column; flex:1; }
.course .tag{ align-self:flex-start; padding:5px 13px; border-radius:var(--r-pill); background:var(--gold-tint); color:var(--gold-deep); font-size:12.5px; font-weight:700; letter-spacing:.02em; }
.course h3{ margin-top:12px; font-size:clamp(19px,1.7vw,23px); line-height:1.35; letter-spacing:-.035em; }
.course p{ margin-top:12px; color:var(--ink-soft); font-size:15.5px; }
.course .price{ margin-top:14px; font-size:20px; font-weight:800; color:var(--gold-deep); letter-spacing:-.03em; }
.course dl{ margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line); display:grid; gap:9px; }
.course dl div{ display:flex; justify-content:space-between; gap:12px; font-size:15px; }
.course dt{ color:var(--ink-faint); }
.course dd{ font-weight:700; text-align:right; }
.course .btn{ margin-top:var(--s3); width:100%; }
.course-body .spacer{ flex:1; }
.course--hi{ border-color:var(--gold-soft); box-shadow:0 2px 6px rgba(42,33,27,.05),0 24px 60px rgba(184,137,74,.16); }

/* ---------- 13. 강사 (이미지 중심) ---------- */
.teachers{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.tcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-1); cursor:zoom-in;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.tcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:var(--gold-soft); }
.tcard .ph{ border-radius:0; aspect-ratio:3/4; }
.tcard .cap{ display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 20px; border-top:1px solid var(--line); text-align:center; }
.tcard .cap b{ font-size:17px; letter-spacing:-.03em; }

/* 강사진 전체 소개 이미지 (세로 길이가 제각각인 큰 이미지) */
.sheet{
  position:relative; display:grid; place-items:center;
  min-height:clamp(240px,30vw,400px);
  border-radius:var(--r-lg); overflow:hidden; cursor:zoom-in;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(135deg,rgba(184,137,74,.045) 0 12px,transparent 12px 24px),
    linear-gradient(150deg,var(--gold-tint),var(--cream-deep));
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sheet::after{
  content:attr(data-ph); max-width:82%; text-align:center;
  font-size:13.5px; font-weight:700; line-height:1.6; color:var(--ink-faint);
  padding:11px 18px; border:1.5px dashed var(--gold-soft); border-radius:var(--r-pill);
  background:rgba(255,255,255,.62);
}
.sheet img{ display:none; width:100%; height:auto; }
.sheet.has-img{ min-height:0; background:none; }
.sheet.has-img::after{ display:none; }
.sheet.has-img img{ display:block; }
.sheet:hover{ border-color:var(--gold-soft); box-shadow:var(--sh-1); }
.sheets{ display:grid; gap:var(--s4); }

/* 라이트박스 */
.lbox{ position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:24px; background:rgba(28,22,17,.88); backdrop-filter:blur(4px); }
.lbox.is-on{ display:grid; }
.lbox img{ max-width:min(96vw,1000px); max-height:90vh; width:auto; height:auto; border-radius:var(--r); box-shadow:var(--sh-2); }
.lbox .empty{ max-width:420px; padding:var(--s5); text-align:center; background:var(--surface); border-radius:var(--r-lg); }
.lbox .x{ position:absolute; top:20px; right:22px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:22px; display:grid; place-items:center; }
.lbox .x:hover{ background:rgba(255,255,255,.3); }

/* ---------- 14. 후기 ---------- */
.rv{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4); box-shadow:var(--sh-1); transition:transform .3s var(--ease),box-shadow .3s var(--ease); }
.rv:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.rv .stars{ color:var(--gold); font-size:15px; letter-spacing:2px; }
.rv .stars i{ font-style:normal; }
.rv .stars i.off{ color:var(--line); }
.rv h3{ margin-top:12px; font-size:17.5px; line-height:1.5; }
.rv p{ margin-top:12px; color:var(--ink-soft); font-size:15.5px; flex:1; }
.rv .who{ margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.rv .av{ width:44px; height:44px; border-radius:50%; flex:none; background:linear-gradient(140deg,var(--gold-soft),var(--gold)); display:grid; place-items:center; color:#fff; font-weight:800; font-size:16px; }
.rv .who b{ display:block; font-size:15px; }
.rv .who small{ display:block; font-size:13px; color:var(--ink-faint); }

/* 후기 슬라이드 : 한 화면에 3개만 보이고, 한 칸씩 왼쪽으로 넘어갑니다.
   마우스를 올리면 멈춥니다. */
.rvslider{ position:relative; overflow:hidden; --sl-gap:24px; padding-block:6px; }
.rvslider-track{ display:flex; gap:var(--sl-gap); width:100%; will-change:transform; }
.rvslider .rv,
.rvslider .ph{ flex:0 0 calc((100% - var(--sl-gap) * 2) / 3); }

/* 넘길 카드가 없을 때(자바스크립트 미동작 등)는 그냥 손으로 밀어 보게 둡니다 */
.rvslider:not(.is-ready){ overflow-x:auto; }

@media (max-width:960px){
  .rvslider .rv,
  .rvslider .ph{ flex-basis:calc((100% - var(--sl-gap)) / 2); }
}
@media (max-width:640px){
  .rvslider{ --sl-gap:16px; }
  .rvslider .rv,
  .rvslider .ph{ flex-basis:100%; }
}

.filters{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:var(--s5); }
.filters button{ padding:10px 22px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--surface); font-size:15px; font-weight:700; transition:all .25s var(--ease); }
.filters button:hover{ border-color:var(--gold-soft); color:var(--gold-deep); }
.filters button.on{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* ---------- 15. 아코디언 ---------- */
.acc{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; }
.acc + .acc{ margin-top:12px; }
.acc-q{ width:100%; display:flex; align-items:center; gap:14px; padding:20px var(--s4); text-align:left; font-size:17px; font-weight:700; }
.acc-q .no{ flex:none; width:30px; height:30px; border-radius:9px; background:var(--gold-tint); color:var(--gold-deep); font-size:13.5px; font-weight:800; display:grid; place-items:center; }
.acc-q .tt{ flex:1; }
.acc-q .ar{ flex:none; color:var(--gold); transition:transform .3s var(--ease); }
.acc.is-on .acc-q .ar{ transform:rotate(180deg); }
.acc-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease); }
.acc.is-on .acc-a{ grid-template-rows:1fr; }
.acc-a > div{ overflow:hidden; }
.acc-a .in{ padding:0 var(--s4) 22px calc(var(--s4) + 44px); color:var(--ink-soft); font-size:16px; }
.acc-a .in ul{ display:grid; gap:6px; }
.acc-a .in li{ padding-left:15px; position:relative; }
.acc-a .in li::before{ content:""; position:absolute; left:0; top:12px; width:5px; height:5px; border-radius:50%; background:var(--gold-soft); }

/* ---------- 16. 표 ---------- */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-1); }
.tbl{ min-width:720px; }
.tbl th,.tbl td{ padding:18px 20px; text-align:center; border-bottom:1px solid var(--line); font-size:15.5px; }
.tbl thead th{ background:var(--gold-tint); color:var(--gold-deep); font-size:16px; font-weight:800; border-bottom:1px solid var(--gold-soft); }
.tbl tbody th{ background:var(--cream); font-weight:700; text-align:left; white-space:nowrap; color:var(--ink-soft); }
.tbl tr:last-child th,.tbl tr:last-child td{ border-bottom:0; }
.tbl .hi{ background:#FFFDF7; font-weight:700; }

/* 강조 과정(전문가 양성) — 열 전체를 빨간 테두리로 묶습니다 */
.tbl .hi{ border-left:2px solid var(--accent); border-right:2px solid var(--accent); }
.tbl thead th.hi{ border-top:2px solid var(--accent); background:#FFF4F1; color:var(--accent); }
.tbl tbody tr:last-child td.hi{ border-bottom:2px solid var(--accent); }

/* ---------- 17. 리스트/공지 ---------- */
.list{ border-top:2px solid var(--ink); }
.list li{ border-bottom:1px solid var(--line); }
.list a{ display:flex; align-items:center; gap:var(--s3); padding:20px 8px; transition:background .2s var(--ease); }
.list a:hover{ background:var(--gold-tint); }
.list .badge{ flex:none; padding:5px 13px; border-radius:var(--r-pill); background:var(--gold-tint); color:var(--gold-deep); font-size:12.5px; font-weight:700; }
.list .tt{ flex:1; font-weight:700; font-size:16.5px; }
.list .dt{ flex:none; font-size:14px; color:var(--ink-faint); }

/* ---------- 18. 폼 ---------- */
.form{ display:grid; gap:var(--s3); }
.field label{ display:block; margin-bottom:9px; font-size:15px; font-weight:700; }
.field label .req{ color:var(--gold); margin-left:3px; }
.field input,.field select,.field textarea{
  width:100%; padding:15px 18px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); font-size:16px; transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.7; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(184,137,74,.11); }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-faint); }
.field.err input,.field.err select,.field.err textarea{ border-color:#C4553D; }
.field .msg{ display:none; margin-top:7px; font-size:13.5px; color:#C4553D; font-weight:600; }
.field.err .msg{ display:block; }
.agree{ display:flex; align-items:flex-start; gap:11px; padding:18px 20px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--cream); font-size:15px; }
.agree input{ width:19px; height:19px; margin-top:3px; flex:none; accent-color:var(--gold); }
.agree label{ margin:0; font-weight:500; line-height:1.6; cursor:pointer; }
.field.err .agree{ border-color:#C4553D; }
.agree a{ color:var(--gold-deep); text-decoration:underline; }
/* 봇 차단용 숨김 칸 — 사람에게는 절대 보이지 않아야 합니다 */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* 접수 실패 안내 */
.form-err{
  display:none; margin-bottom:4px; padding:14px 18px;
  border:1.5px solid #E8B4AE; border-radius:var(--r-sm);
  background:#FFF3F1; color:#A5372C; font-size:15px; font-weight:600; line-height:1.6;
}

.form-done{ display:none; padding:var(--s5); text-align:center; background:var(--gold-tint); border:1.5px solid var(--gold-soft); border-radius:var(--r-lg); }
.form-done.is-on{ display:block; }
.form-done .ic{ font-size:44px; }
.form-done h3{ margin-top:12px; font-size:var(--f-h3); }
.form-done p{ margin-top:10px; color:var(--ink-soft); }

/* ---------- 19. 하단 CTA 배너 ---------- */
.cta{ position:relative; overflow:hidden; background:linear-gradient(135deg,#3A2C20,#5A422A 55%,#7A5A33); color:#fff; }
.cta::before{ content:""; position:absolute; width:560px; height:560px; top:-260px; right:-140px; border-radius:50%; background:radial-gradient(circle,rgba(227,205,164,.24),transparent 70%); }
.cta-in{ position:relative; z-index:1; padding-block:var(--s7); text-align:center; }
.cta .eyebrow{ color:var(--gold-soft); }
.cta h2{ font-size:var(--f-h2); }
.cta p{ max-width:600px; margin:var(--s2) auto 0; color:rgba(255,255,255,.76); font-size:17px; }
.cta .btn-row{ margin-top:var(--s5); justify-content:center; }
.cta .btn-fill{ background:var(--gold-soft); color:#3A2C20; box-shadow:0 10px 30px rgba(0,0,0,.24); }
.cta .btn-fill:hover{ background:#fff; }
.cta .btn-line{ background:transparent; border-color:rgba(255,255,255,.34); color:#fff; }
.cta .btn-line:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }
.cta-tel{ margin-top:var(--s4); font-size:14.5px; color:rgba(255,255,255,.6); }
.cta-tel b{ color:var(--gold-soft); font-size:19px; letter-spacing:.02em; }

/* ---------- 20. 고객센터 아이콘줄 ---------- */
.center{ background:var(--surface); border-top:1px solid var(--line); }
.center-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s6); padding-block:var(--s5); flex-wrap:wrap; }
.center-ic{ display:flex; gap:var(--s4); flex-wrap:wrap; }
.center-ic a{ text-align:center; width:86px; }
.center-ic .ic{ width:62px; height:62px; margin:0 auto 10px; border-radius:20px; background:var(--gold-tint); display:grid; place-items:center; font-size:26px; transition:all .25s var(--ease); }
.center-ic a:hover .ic{ background:var(--gold); transform:translateY(-3px); }
.center-ic span{ font-size:14px; font-weight:700; }
.center-tel .lb{ font-size:13px; font-weight:700; letter-spacing:.16em; color:var(--gold); }
.center-tel .no{ font-size:clamp(30px,3.6vw,42px); font-weight:900; letter-spacing:-.03em; line-height:1.2; }
.center-tel p{ font-size:14.5px; color:var(--ink-soft); }

/* ---------- 21. 푸터 ---------- */
.foot{ background:#2E241C; color:rgba(255,255,255,.6); font-size:14.5px; }
.foot-in{ padding-block:var(--s6); }
.foot-top{ display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; padding-bottom:var(--s4); border-bottom:1px solid rgba(255,255,255,.11); }
.foot .fname{ color:#fff; font-size:19px; font-weight:800; letter-spacing:-.03em; }
.foot nav{ display:flex; gap:var(--s3); flex-wrap:wrap; }
.foot nav a{ font-weight:600; transition:color .2s var(--ease); }
.foot nav a:hover{ color:var(--gold-soft); }
.foot dl{ margin-top:var(--s4); display:grid; gap:7px; }
.foot dl div{ display:flex; gap:12px; }
.foot dt{ min-width:74px; color:rgba(255,255,255,.38); }
.foot .copy{ margin-top:var(--s4); font-size:13.5px; color:rgba(255,255,255,.34); }
.foot .copy .privacy{
  display:inline-block; margin-right:14px; padding-right:14px;
  border-right:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.72); font-weight:700;
}
.foot .copy .privacy:hover{ color:#fff; text-decoration:underline; }
@media (max-width:640px){
  .foot .copy .privacy{ display:block; margin:0 0 10px; padding:0; border-right:0; }
}

/* ---------- 22. 유틸 ---------- */
.center-txt{ text-align:center; }
.bullets{ display:grid; gap:7px; margin-top:12px; color:var(--ink-soft); font-size:15.5px; }
.bullets li{ position:relative; padding-left:15px; }
.bullets li::before{ content:""; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--gold-soft); }
.mt3{ margin-top:var(--s3); } .mt4{ margin-top:var(--s4); } .mt5{ margin-top:var(--s5); } .mt6{ margin-top:var(--s6); }
.note{ font-size:14.5px; color:var(--ink-faint); }
.tmp{ background:var(--gold-tint); border-bottom:1px dashed var(--gold-soft); padding:0 3px; border-radius:3px; }

/* 스크롤 등장 효과 (은은한 페이드업)
   ※ .js 가 붙은 경우에만 숨깁니다. 자바스크립트가 막혀 있어도 내용이 사라지지 않습니다. */
.js .rise{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.js .rise.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .rise{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- 23. 반응형 ---------- */
/* 퀵메뉴는 본문(1180px)과 겹치지 않는 넓은 화면에서만 보입니다 */
@media (max-width:1620px){
  .quick{ display:none; }
}
@media (max-width:960px){
  :root{ --gutter:20px; }
  .sec{ padding-block:var(--s6); }
  .g-3,.g-4,.teachers{ grid-template-columns:repeat(2,1fr); }
  .perks{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .center-in{ justify-content:center; text-align:center; }
  .center-ic{ justify-content:center; }

  .burger{ display:block; }
  .util{ padding-block:13px; }
  .util-act .chip--tel,.util-act .chip--map{ display:none; }
  .nav{ display:none; }
  .head.is-open .nav{ display:block; }
  .head.is-open .nav ul{ flex-direction:column; gap:0; }
  .head.is-open .nav a{ padding:15px 4px; border-bottom:1px solid var(--line); }
  .head.is-open .nav a::after{ display:none; }

  .mbar{ display:block; }
  body{ padding-bottom:64px; }
}
@media (max-width:640px){
  :root{ --f-body:16px; }
  .g-2,.g-3,.g-4,.teachers,.perks{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .card,.course-body,.rv{ padding:var(--s3); }
  .acc-q{ padding:17px 20px; font-size:16px; }
  .acc-a .in{ padding:0 20px 20px 20px; }
  .btn{ padding:14px 24px; }
  .btn-lg{ padding:16px 30px; font-size:17px; }
  .hero .btn-row .btn{ width:100%; }
  .logo .name{ font-size:17px; }
  .logo .mark{ width:38px; height:38px; font-size:18px; }
  .logo .brand-img{ height:42px; }
  .has-logo .logo .brand-img{ height:48px; }
  .has-logo .util{ padding-block:9px; }
  .foot-top{ flex-direction:column; gap:var(--s3); }
}

/* ---------- 23-2. 관리자 페이지 ---------- */
.adm{ min-height:100vh; background:var(--cream); padding-block:var(--s5); }
.adm-login{ max-width:420px; margin:8vh auto; }
.adm-login .card{ padding:var(--s5); }
.adm-login h1{ font-size:24px; }
.adm-login .note{ margin-top:8px; }

.adm-bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  flex-wrap:wrap; margin-bottom:var(--s4);
}
.adm-bar h1{ font-size:23px; }
.adm-bar .who{ font-size:14px; color:var(--ink-soft); }

.adm-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:var(--s4); }
.adm-tools select{
  padding:10px 14px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); font-size:15px; font-weight:600;
}
.adm-count{ font-size:15px; color:var(--ink-soft); font-weight:600; }

.adm-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s3) var(--s4); box-shadow:var(--sh-1);
}
.adm-item + .adm-item{ margin-top:14px; }
.adm-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.adm-head .nm{ font-size:19px; font-weight:800; letter-spacing:-.03em; }
.adm-head .tel{ font-size:17px; font-weight:700; color:var(--gold-deep); }
.adm-head .dt{ margin-left:auto; font-size:13.5px; color:var(--ink-faint); }
.adm-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.adm-meta span{
  padding:5px 12px; border-radius:var(--r-pill); background:var(--gold-tint);
  color:var(--gold-deep); font-size:13.5px; font-weight:700;
}
.adm-msg{
  margin-top:12px; padding:14px 16px; background:var(--cream);
  border-radius:var(--r-sm); font-size:15.5px; color:var(--ink-soft); white-space:pre-wrap;
}
.adm-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.adm-row select,.adm-row input{
  padding:9px 13px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); font-size:14.5px;
}
.adm-row input{ flex:1; min-width:180px; }
.adm-row .btn{ padding:9px 18px; font-size:14.5px; }
.adm-row .del{ margin-left:auto; color:#A5372C; font-size:14px; font-weight:700; }
.adm-row .del:hover{ text-decoration:underline; }

.st{ padding:5px 12px; border-radius:var(--r-pill); font-size:13px; font-weight:800; }
.st-대기    { background:#FFF1E8; color:#B4541F; }
.st-연락완료{ background:#E9F3EC; color:#2F6B41; }
.st-등록    { background:#EAF0FA; color:#2B4C8C; }
.st-보류    { background:#F0EDE9; color:#6F6156; }

.adm-empty{ padding:var(--s7) var(--s4); text-align:center; color:var(--ink-faint); }

/* ---------- 관리자 : 방문자 통계 ---------- */
.adm-stats{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
  margin-bottom:12px;
}
.adm-stat{
  padding:16px 14px; text-align:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-1);
}
.adm-stat .lb{ display:block; font-size:13px; font-weight:700; color:var(--ink-soft); }
.adm-stat b{
  display:block; margin-top:6px; font-size:27px; font-weight:800;
  letter-spacing:-.04em; color:var(--gold-deep); font-variant-numeric:tabular-nums;
}
.adm-stat small{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-faint); }
.adm-stat--live{ background:var(--gold-tint); border-color:var(--gold-soft); }
.adm-stat--live b::before{
  content:""; display:inline-block; vertical-align:middle;
  width:8px; height:8px; margin-right:7px; border-radius:50%;
  background:#3E9B5F; box-shadow:0 0 0 3px rgba(62,155,95,.18);
}

.adm-chart{
  padding:18px 20px 14px; margin-bottom:12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-1);
}
.adm-chart-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.adm-chart-head b{ font-size:15px; }
.adm-chart-head .note{ margin:0; font-size:13px; color:var(--ink-faint); }
.adm-chart-bars{ display:flex; align-items:flex-end; gap:6px; height:110px; }
.adm-bar-col{
  flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; height:100%; gap:6px; cursor:default;
}
.adm-bar-fill{
  width:100%; border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--gold),var(--gold-soft));
  transition:filter .2s var(--ease);
}
.adm-bar-col:hover .adm-bar-fill{ filter:brightness(.9); }
.adm-bar-col span{ font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

.adm-stats-note{ margin:0 0 var(--s4); font-size:13.5px; line-height:1.7; }

@media (max-width:640px){
  .adm-item{ padding:var(--s3); }
  .adm-head .dt{ margin-left:0; width:100%; }
  .adm-row .del{ margin-left:0; }

  .adm-stats{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .adm-stat--live{ grid-column:1 / -1; }
  .adm-stat{ padding:13px 10px; }
  .adm-stat b{ font-size:23px; }
  .adm-chart{ padding:14px 14px 12px; }
  .adm-chart-bars{ height:88px; gap:3px; }
  .adm-bar-col span{ font-size:10px; }
}

/* ==========================================================================
   23-A. 입장 팝업 (수상 배너)
   ========================================================================== */
.pop{
  position:fixed; inset:0; z-index:200; display:none;
  place-items:center; padding:20px;
  background:rgba(24,18,12,.72); backdrop-filter:blur(3px);
}
.pop.is-on{ display:grid; }
.pop-box{
  width:min(420px,92vw); background:var(--surface);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2);
  animation:pop-in .35s var(--ease);
}
@keyframes pop-in{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }
.pop-box img{ width:100%; height:auto; display:block; }
.pop-cta{ padding:16px 16px 8px; }
.pop-cta .btn{ width:100%; }
.pop-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 20px 16px; font-size:14px; color:var(--ink-soft);
}
.pop-foot button{ font-size:14px; font-weight:600; color:var(--ink-soft); padding:6px 0; }
.pop-foot button:hover{ color:var(--ink); text-decoration:underline; }
@media (prefers-reduced-motion:reduce){ .pop-box{ animation:none; } }

/* ==========================================================================
   23-B. 숫자 성과 (짙은 배경 + 카운트 애니메이션)
   ========================================================================== */
.records{ background:linear-gradient(165deg,#141C2E,#0E1420 55%,#161E30); color:#fff; }
.records-in{ padding-block:var(--s7); text-align:center; }
.records .lead-top{ font-size:clamp(17px,2vw,20px); color:rgba(255,255,255,.7); font-weight:600; }
.records .big{
  margin-top:10px; font-size:clamp(28px,4.4vw,46px); font-weight:900; letter-spacing:-.04em;
  background:linear-gradient(120deg,#F0D9A8,#D9B87A 45%,#EBCF9C);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.records .lead-bot{ margin-top:10px; font-size:clamp(16px,1.9vw,19px); color:rgba(255,255,255,.82); font-weight:600; }
.records .divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:var(--s6); font-size:13px; font-weight:800; letter-spacing:.22em; color:#D9B87A;
}
.records .divider::before,.records .divider::after{
  content:""; width:34px; height:1px; background:rgba(217,184,122,.55);
}
.records h2{ margin-top:14px; font-size:clamp(23px,3vw,33px); }
.rec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:var(--s6); }
.rec{
  background:rgba(255,255,255,.045); border:1px solid rgba(217,184,122,.22);
  border-radius:var(--r); padding:26px 16px; text-align:center;
}
.rec .lb{ font-size:14.5px; font-weight:700; color:rgba(255,255,255,.62); }
.rec .num{
  margin-top:8px; font-size:clamp(30px,3.8vw,42px); font-weight:900; letter-spacing:-.04em;
  color:#EBCF9C; line-height:1.15;
}
.rec .num .u{ font-size:.55em; margin-left:2px; }
.rec .cap{ margin-top:8px; font-size:15px; font-weight:700; color:#fff; }
.rec .fine{ margin-top:6px; font-size:13.5px; color:rgba(255,255,255,.45); }
@media (max-width:960px){ .rec-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .records-in{ padding-block:var(--s6); }
  .rec-grid{ gap:10px; margin-top:var(--s5); }
  .rec{ padding:20px 10px; }
  .rec .lb{ font-size:14px; }
  .rec .cap{ font-size:14px; }
  .rec .fine{ font-size:14px; }
}

/* ==========================================================================
   23-C. 새소식 카드 목록
   ========================================================================== */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.news{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.news:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.news-thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--cream-deep); border-bottom:1px solid var(--line);
}
.news-thumb img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s var(--ease); }
.news:hover .news-thumb img{ transform:scale(1.035); }
.news-body{ display:flex; flex-direction:column; flex:1; padding:var(--s3) var(--s4) var(--s4); }
.news .badge2{
  align-self:flex-start; padding:5px 12px; border-radius:var(--r-pill);
  background:var(--gold-tint); color:var(--gold-deep); font-size:13.5px; font-weight:700;
}
.news h3{ margin-top:12px; font-size:17.5px; line-height:1.45; }
.news p{
  margin-top:10px; font-size:15px; color:var(--ink-soft); line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.news .foot2{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-faint);
}
.news .foot2 b{ color:var(--gold-deep); font-weight:700; }
.news-more{ margin-top:var(--s4); text-align:center; }
@media (max-width:960px){ .news-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .news-grid{ grid-template-columns:1fr; }
  .news .badge2{ font-size:14px; }
  .news .foot2{ font-size:14px; }
}

/* ==========================================================================
   23-D. 기사 본문
   ========================================================================== */
.art{ max-width:760px; margin-inline:auto; }
.art-head{ padding-bottom:var(--s4); border-bottom:1px solid var(--line); margin-bottom:var(--s5); }
.art-head .badge2{
  display:inline-block; padding:6px 14px; border-radius:var(--r-pill);
  background:var(--gold-tint); color:var(--gold-deep); font-size:14px; font-weight:700;
}
.art-head h1{ margin-top:16px; font-size:clamp(24px,3.4vw,36px); line-height:1.35; }
.art-head .date{ margin-top:14px; font-size:14.5px; color:var(--ink-faint); }
.art p{ margin-top:var(--s3); font-size:17px; line-height:1.85; }
.art h2{
  margin-top:var(--s6); padding-top:var(--s2); font-size:clamp(20px,2.4vw,25px);
  border-top:2px solid var(--gold-soft);
}
.art .box{
  margin-top:var(--s4); padding:22px 24px; border-radius:var(--r);
  background:var(--gold-tint); border:1px solid var(--gold-soft);
}
.art .box--check{ background:#F1F6F1; border-color:#CFE0D2; }
.art .box b{ display:block; font-size:16.5px; margin-bottom:10px; }
.art .box ul{ display:grid; gap:7px; }
.art .box li{ position:relative; padding-left:16px; font-size:15.5px; line-height:1.7; color:var(--ink-soft); }
.art .box li::before{ content:""; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.art .place{
  margin-top:var(--s3); padding:20px 22px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface);
}
.art .place b{ display:block; font-size:16.5px; }
.art .place span{ display:block; margin-top:6px; font-size:15.5px; color:var(--ink-soft); }
.art .place .place-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.art .place .place-links a{
  padding:8px 15px; border:1px solid var(--gold-soft); border-radius:var(--r-pill);
  background:var(--gold-tint); color:var(--gold-deep); font-size:14px; font-weight:700;
}
.art .place .place-links a:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.art .place em{ font-style:normal; color:var(--gold-deep); font-weight:700; }
.art .award-img{
  margin-top:var(--s4); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-1); background:#0E1430;
}
.art .award-img img{ width:100%; height:auto; display:block; }
.art-cta{
  margin-top:var(--s5); padding:24px; text-align:center;
  background:var(--cream-deep); border-radius:var(--r-lg);
}
.art-cta b{ display:block; font-size:17px; margin-bottom:14px; }
.art-faq{ margin-top:var(--s4); }
.art-tags{ margin-top:var(--s6); font-size:14.5px; color:var(--ink-faint); line-height:2; word-break:keep-all; }
.art-back{ margin-top:var(--s5); text-align:center; }
@media (max-width:640px){
  .art p{ font-size:16.5px; }
  .art .box{ padding:18px; }
  .art .box li{ font-size:15px; }
}

/* ---------- 23-3. 상단 장학금 카운트다운 바 ----------
   .head 안 맨 위에 들어갑니다. 헤더가 스크롤을 따라오므로 이 바도 끝까지 따라옵니다. */
.topbar{ background:linear-gradient(135deg,var(--gold-deep),var(--gold) 58%,#C9A063); color:#fff; }
.topbar a{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:9px var(--gutter); font-size:14.5px; font-weight:700; letter-spacing:-.02em;
  text-align:center;
}
.topbar .cd{
  font-variant-numeric:tabular-nums; font-weight:800; font-size:15px;
  background:rgba(255,255,255,.2); padding:3px 11px; border-radius:var(--r-pill);
  white-space:nowrap;
}
.topbar .go{ font-size:13.5px; opacity:.92; white-space:nowrap; }
.topbar .short{ display:none; }
.topbar a:hover{ background:rgba(0,0,0,.06); }

/* ---------- 23-4. 옆으로 밀어 보는 카드 (모바일) ---------- */
.swipe-hint{ display:none; }

/* ---------- 23-5. 메인 하단 상담 폼 ---------- */
.counsel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:start; }
@media (max-width:960px){ .counsel-grid{ grid-template-columns:1fr; gap:var(--s4); } }

/* ==========================================================================
   23-6. 모바일 최적화 — 길이를 줄이고 글자를 키웁니다
   ========================================================================== */
@media (max-width:960px){
  /* 과정 카드 : 세로로 쌓지 않고 옆으로 밀어 보게 */
  .swipe-md{
    display:flex; gap:var(--s3);
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1);
    padding-block:4px 8px;
  }
  .swipe-md::-webkit-scrollbar{ display:none; }
  .swipe-md > *{ flex:0 0 62%; scroll-snap-align:center; }
  .swipe-hint{
    display:block; margin-top:14px; text-align:center;
    font-size:14px; color:var(--ink-faint); font-weight:600;
  }
}

@media (max-width:640px){
  /* 섹션 여백 줄이기 */
  .sec{ padding-block:var(--s5); }
  .sec-head{ margin-bottom:var(--s4); }

  /* 카드 목록을 2열로 압축 (compact-2 가 붙은 곳만) */
  .compact-2{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .compact-2 .card{ padding:18px 13px; text-align:center; }
  .compact-2 .card .ic{ width:46px; height:46px; margin:0 auto 10px; font-size:21px; border-radius:14px; }
  .compact-2 .card h3{ font-size:15.5px; line-height:1.35; }
  .compact-2 .card p{ margin-top:8px; font-size:14px; line-height:1.6; }

  /* 혜택 12개 2열 */
  .perks{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .perk{ flex-direction:column; align-items:center; text-align:center; gap:6px; padding:16px 11px; }
  .perk .ic{ font-size:22px; }
  .perk b{ font-size:14.5px; line-height:1.35; }
  .perk small{ font-size:14px; }

  /* 과정 카드 폭 */
  .swipe-md > *{ flex-basis:80%; }

  /* 캠퍼스 목록 여백 축소 */
  .camp{ padding:13px 15px; gap:10px; }
  .camp b{ font-size:16px; }
  .camp-group + .camp-group{ margin-top:var(--s4); }

  /* 강사 전체 이미지 여백 */
  .sheets{ gap:var(--s3); }

  /* ----- 글자 크기 하한선 : 14px 미만 없애기 ----- */
  .eyebrow{ font-size:14px; }
  .crumb{ font-size:14px; }
  .camp small{ font-size:14px; }
  .rv .who small{ font-size:14px; }
  .course .tag{ font-size:14px; }
  .foot .copy{ font-size:14px; }
  .note{ font-size:14.5px; }
  .list .dt{ font-size:14px; }
  .stat .lb{ font-size:14.5px; }

  /* 모바일에서 감출 것 (내용이 다른 곳과 겹치는 경우만) */
  .hide-sm{ display:none; }

  /* 남은 작은 글자 정리 */
  .field .msg{ font-size:14px; }
  .topbar .go{ font-size:14px; }

  /* 카드 목록 더 조이기 */
  .compact-2{ gap:9px; }
  .compact-2 .card{ padding:15px 11px; }
  .compact-2 .card p{ font-size:14px; line-height:1.55; margin-top:6px; }
  .perks{ gap:9px; }
  .perk{ padding:13px 9px; }
  .sec-head .lead{ font-size:15.5px; }
  .btn-row.mt6{ margin-top:var(--s4); }
  .form.card{ padding:var(--s3); }
  .field textarea{ min-height:110px; }

  /* 상단 바 : 짧은 문구로 */
  .topbar a{ font-size:14px; gap:8px; padding:8px 12px; }
  .topbar .full{ display:none; }
  .topbar .short{ display:inline; }
  .topbar .go{ display:none; }
  .topbar .cd{ font-size:14.5px; padding:3px 9px; }
}

/* ---------- 24. 인쇄 ---------- */
@media print{
  .quick,.mbar,.head,.cta,.mbar{ display:none !important; }
  body{ background:#fff; padding:0; }
}

/* ---------- 캠퍼스 전용 페이지 ---------- */
.art--wide{ max-width:880px; }
.cp-map{
  margin-top:var(--s4); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-1); background:var(--cream-deep);
}
.cp-map{ position:relative; }
.cp-map iframe{
  display:block; width:100%; height:380px; border:0;
  position:relative; z-index:1; opacity:0; transition:opacity .4s var(--ease);
}
.cp-map iframe.is-on{ opacity:1; }
/* 지도가 안 뜨는 환경에서도 빈 회색 칸으로 보이지 않게 합니다 */
.cp-map-wait{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:var(--s4); text-align:center; background:var(--cream-deep);
}
.cp-map-wait b{ font-size:17px; letter-spacing:-.03em; }
.cp-map-wait span{ font-size:14.5px; color:var(--ink-soft); }
.cp-map-wait a{
  margin-top:6px; padding:10px 20px; border-radius:var(--r-pill);
  background:var(--gold); color:#fff; font-size:14.5px; font-weight:700;
}
.cp-map-wait a:hover{ background:var(--gold-deep); }
@media (max-width:640px){ .cp-map iframe{ height:280px; } }

.cp-links{ display:grid; gap:10px; margin-top:var(--s3); }
.cp-links a{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:15px 18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); transition:all .25s var(--ease);
}
.cp-links a:hover{ border-color:var(--gold-soft); transform:translateY(-2px); box-shadow:var(--sh-1); }
.cp-links b{ font-size:16.5px; letter-spacing:-.03em; }
.cp-links span{ margin-left:auto; font-size:13.5px; color:var(--ink-faint); white-space:nowrap; }

.cp-sibs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:var(--s3); }
.cp-sibs a{
  padding:14px 16px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); transition:all .25s var(--ease);
}
.cp-sibs a:hover{ border-color:var(--gold-soft); transform:translateY(-2px); }
.cp-sibs b{ display:block; font-size:15px; letter-spacing:-.03em; }
.cp-sibs span{ display:block; margin-top:4px; font-size:13px; color:var(--gold-deep); font-weight:700; }
@media (max-width:960px){ .cp-sibs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cp-sibs{ grid-template-columns:1fr; } }

/* 캠퍼스 카드가 링크가 되었을 때 */
a.camp{ text-decoration:none; }
a.camp .go{ display:block; margin-top:6px; font-size:13px; font-weight:700; color:var(--gold-deep); }