/* ============================================================
   바오밥목공전문학원 — 신축 v0.2 (2026-08-01)
   [AI 생성 초안 - 검토 전]

   v0.1 → v0.2 : 기존 baobob.kr 의 구조를 그대로 따른다.
                 로고 · 4열 메가메뉴 · 히어로 슬라이드 · 우측 퀵바.
                 v0.1 은 한 장짜리라 학원 홈페이지로 보이지 않았다(대표 지적).
   ============================================================ */
:root{
  --navy:#2B3A4E; --copper:#C67B3C; --cream:#F7F3EE; --teal:#3A8FB7;
  --wood:#6b4a2a; --ink:#1E2A3A; --soft:#6d7681; --line:rgba(43,58,78,.12);
  --max:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;
     color:var(--ink);background:#fff;line-height:1.66;font-size:15.5px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ══ 헤더 ══ */
header.site{background:#fff;position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line)}
.hdr-top{display:flex;align-items:center;gap:20px;padding:16px 24px;max-width:var(--max);margin:0 auto}
.tel-box{display:flex;align-items:center;gap:9px;flex-shrink:0}
.tel-box .ic{width:26px;height:26px;border-radius:50%;background:var(--copper);color:#fff;
             display:grid;place-items:center;font-size:13px}
.tel-box b{font-size:1.32rem;color:var(--navy);letter-spacing:-.02em;line-height:1.1}
.tel-box small{display:block;font-size:.72rem;color:var(--soft);margin-top:1px}
.logo{margin:0 auto}
.logo img{height:46px;width:auto}
.sns{display:flex;gap:7px;flex-shrink:0}
.sns a{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
       font-size:.62rem;font-weight:700;color:#fff}
.sns .bl{background:#2DB400}.sns .ig{background:#C13584}.sns .tk{background:#FEE500;color:#3C1E1E}

/* ══ 메가메뉴 ══ */
.gnb{border-top:1px solid var(--line);background:#fff}
.gnb > ul{max-width:var(--max);margin:0 auto;display:flex;list-style:none}
.gnb > ul > li{flex:1;position:relative;text-align:center}
.gnb > ul > li > a{display:block;padding:15px 8px;font-size:1rem;font-weight:700;color:var(--navy)}
.gnb > ul > li:hover > a{color:var(--copper)}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line);
      border-top:2px solid var(--copper);padding:16px 8px;display:none;box-shadow:0 12px 26px rgba(43,58,78,.10)}
.gnb > ul > li:hover .mega{display:block}
.mega a{display:block;padding:8px 6px;font-size:.9rem;color:var(--soft)}
.mega a:hover{color:var(--copper);font-weight:600}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:1.1rem;cursor:pointer}

/* ══ 히어로 슬라이드 ══
   ⚠ 화질 원칙(2026-08-01) : 사진을 원본 해상도보다 크게 늘리지 않는다.
     banner.jpg 는 1903×300 이라 화면 폭 1903 까지 확대가 없다.
     시설 사진(1000×667)을 전면에 쓰면 1.3~1.9배 확대되어 흐려진다 — 그래서 배너를 쓴다. */
.hero{position:relative;background:var(--navy);overflow:hidden}
.slides{position:relative;height:clamp(320px,29vw,560px)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
.slide::after{content:'';position:absolute;inset:0;
              background:linear-gradient(90deg,rgba(20,29,40,.82) 0%,rgba(20,29,40,.45) 55%,rgba(20,29,40,.15) 100%)}
.hero-copy{position:absolute;inset:0;display:flex;align-items:center;z-index:2}
.hero-copy .wrap{width:100%}
.hero-copy .eyebrow{color:var(--copper);font-weight:700;letter-spacing:.2em;font-size:.75rem}
.hero-copy h1{color:#fff;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.3;margin:12px 0 10px;letter-spacing:-.02em}
.hero-copy p{color:#cbd6e2;font-size:1rem;max-width:32em}
.hero-copy .acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.hero-nav{position:absolute;bottom:18px;left:0;right:0;z-index:3;display:flex;justify-content:center;gap:7px}
.hero-nav button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.42);cursor:pointer;padding:0}
.hero-nav button.on{background:var(--copper);width:24px;border-radius:5px}

.btn{display:inline-block;border-radius:999px;padding:12px 24px;font-weight:700;font-size:.94rem}
.btn-p{background:var(--copper);color:#fff}
.btn-g{border:1px solid rgba(255,255,255,.4);color:#fff}

/* ══ 우측 퀵바 ══ */
.quick{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;width:86px;
       background:#fff;border:1px solid var(--line);border-right:none;border-radius:10px 0 0 10px;
       box-shadow:-3px 0 14px rgba(43,58,78,.10);overflow:hidden}
.quick a,.quick button{display:block;width:100%;padding:11px 6px;text-align:center;font-size:.68rem;
       font-weight:700;border:none;border-bottom:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.quick a:last-child,.quick button:last-child{border-bottom:none}
.quick .q-bl{background:#2DB400;color:#fff}
.quick .q-ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);color:#fff}
.quick .q-tk{background:#FEE500;color:#3C1E1E}
.quick .q-hrd{background:var(--cream);font-size:.64rem;line-height:1.35}
.quick .q-tel{background:var(--navy);color:#fff;font-size:.64rem;line-height:1.4}
.quick .q-tel b{display:block;font-size:.78rem;margin-top:2px}
@media(max-width:1100px){.quick{display:none}}

/* ══ 섹션 ══ */
section.blk{padding:58px 0}
section.blk.alt{background:var(--cream)}
.sec-head{text-align:center;margin-bottom:30px}
.sec-head .num{font-family:Georgia,serif;font-size:.7rem;letter-spacing:.22em;color:var(--copper);font-weight:700}
.sec-head h2{font-size:clamp(1.4rem,3vw,1.95rem);color:var(--navy);margin-top:10px;line-height:1.34}
.sec-head p{color:var(--soft);margin-top:10px;max-width:44em;margin-left:auto;margin-right:auto}

/* ══ 과정 카드 ══ */
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.filters button{border:1px solid var(--line);background:#fff;border-radius:999px;
                padding:8px 18px;font-size:.88rem;font-weight:600;color:var(--soft);cursor:pointer}
.filters button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* 썸네일 원본이 350×350 이라 카드 폭을 그 이하로 묶는다 — 넘기면 확대되어 뭉개진다 */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,258px));gap:18px;justify-content:center}
.course{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
        display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.course:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(43,58,78,.13)}
/* 과정 썸네일은 그림이 아니라 '글씨가 박힌 배너'다.
   잘라내면(cover) 과정명이 잘려 못 읽는다 — 실제로 잘렸던 이력 있음(2026-08-02).
   그래서 원본 비율(300×230 = 30/23)에 맞추고 contain 으로 전체를 보여준다.
   400×350 짜리 한 장만 위아래 여백이 조금 생기는데, 글씨가 잘리는 것보다 낫다. */
.course .ph{aspect-ratio:30/23;background:var(--cream);overflow:hidden}
.course .ph img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.course:hover .ph img{transform:scale(1.03)}
.course .bd{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.course .tk-in{align-self:flex-start;font-size:.7rem;font-weight:700;color:#fff;border-radius:999px;padding:3px 10px;margin-bottom:9px}
.course h3{font-size:.99rem;color:var(--navy);line-height:1.45;margin-bottom:8px;flex:1}
.course .meta{font-size:.83rem;color:var(--soft)}
.course .go{margin-top:12px;font-size:.86rem;font-weight:700;color:var(--copper)}
.course .go2{margin-top:6px;font-size:.82rem;font-weight:600;color:var(--soft)}
.course .go2:hover{color:var(--navy)}
.empty{color:var(--soft);padding:30px 0;text-align:center}

/* ══ 카드 ══ */
/* 사진 원본 1000x667 → 3열(약 370px)로 축소 표시. 확대되지 않는다 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:1160px;margin:0 auto}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card .ph{aspect-ratio:16/10;overflow:hidden;background:var(--cream)}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:18px 20px 20px}
.card h3{font-size:1.02rem;color:var(--navy);margin-bottom:7px}
.card p{font-size:.9rem;color:var(--soft)}
.card .go{display:inline-block;margin-top:11px;font-size:.86rem;font-weight:700;color:var(--copper)}

/* ══ 시설 갤러리 ══
   사진 원본이 1000×667 이라 4열(약 280px)로 깔아도 확대되지 않는다. */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;max-width:1160px;margin:0 auto}
.gal figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.gal img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--cream)}
.gal figcaption{padding:9px 12px;font-size:.86rem;font-weight:600;color:var(--navy);text-align:center}

.campus{max-width:1160px;margin:26px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        gap:12px;font-size:.9rem}
.campus > div{border:1px solid var(--line);border-radius:12px;padding:14px 16px;line-height:1.7}
.campus b{display:block;color:var(--navy);margin-bottom:3px}
.campus .go{display:inline-block;margin-top:7px;font-size:.85rem;font-weight:700;color:var(--copper)}

/* 사진 없는 소개 카드 — 근거 없는 사진을 붙이지 않기 위해 글만 둔다 */
.cards-txt .card .bd{padding:20px 22px 22px}

/* ══ 문의 ══ */
.contact-box{background:var(--navy);color:#e9eff5;border-radius:18px;padding:36px;
             display:flex;gap:34px;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}
.contact-box h2{color:#fff;font-size:1.32rem}
.contact-box .info{font-size:.93rem;line-height:1.9}
.contact-box .info a{color:#fff;font-weight:700}
.contact-lead{flex:1 1 320px;min-width:0}
.contact-lead > p{color:#b9c6d4;margin-top:6px}
.contact-lead .info{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}

/* ── 상담 폼 ──
   유입은 있는데 받는 곳이 없어서 25일간 상담 0건이었다(2026-08-03 확인).
   기존 게시판은 비밀글 방식이라 이름·비밀번호·글쓰기를 요구해 문턱이 높았다.
   그래서 필수는 이름·연락처 둘뿐이다. 나머지는 비워도 제출된다. */
.cform{flex:1 1 380px;min-width:0;background:#fff;border-radius:14px;padding:26px 24px;
       color:var(--ink);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.cform h3{font-size:1.05rem;color:var(--navy);margin-bottom:16px;
          padding-bottom:10px;border-bottom:2px solid var(--copper)}
.fld{display:block;margin-bottom:13px}
.fld > span{display:block;font-size:.82rem;font-weight:700;color:var(--navy);margin-bottom:5px}
.fld b{color:#C0392B}
.cform input[type=text],.cform input[type=tel],.cform select,.cform textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  border:1px solid rgba(43,58,78,.26);border-radius:8px;padding:11px 12px;
  transition:border-color .15s, box-shadow .15s}
.cform textarea{resize:vertical;min-height:92px}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(198,123,60,.16)}
.cform ::placeholder{color:#9aa4b0}

.agree{display:flex;gap:9px;align-items:flex-start;margin:16px 0 6px;cursor:pointer}
.agree input{width:17px;height:17px;flex-shrink:0;margin-top:2px;accent-color:var(--copper)}
.agree span{font-size:.86rem;font-weight:600;color:var(--navy);line-height:1.5}
.agree-note{font-size:.73rem;color:var(--soft);line-height:1.6;margin-bottom:16px}
.agree-note a{color:var(--teal);text-decoration:underline}

.btn-send{width:100%;font:inherit;font-size:1rem;font-weight:700;color:#fff;cursor:pointer;
          background:var(--copper);border:0;border-radius:9px;padding:13px 16px;
          transition:background .15s, transform .06s}
.btn-send:hover{background:#b06d33}
.btn-send:active{transform:translateY(1px)}
.btn-send:disabled{background:#c4a888;cursor:default}

.cf-msg{margin-top:11px;font-size:.86rem;font-weight:600;line-height:1.6;text-align:center}
.cf-msg.ok{color:#1E7A46}
.cf-msg.err{color:#C0392B}

/* 스팸봇 함정 — 화면에서 완전히 숨기되 display:none 은 쓰지 않는다.
   봇이 display:none 필드를 건너뛰는 경우가 있어 함정 역할을 못 하기 때문. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ══ 푸터 ══ */
footer.site{background:#1b2531;color:#93a1b0;font-size:.85rem;padding:36px 0 48px}
footer.site .cols{display:flex;gap:34px;flex-wrap:wrap;justify-content:space-between}
footer.site b{color:#dbe4ec}
footer.site a{color:#b6c3d0;text-decoration:underline}
footer.site .fine{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);font-size:.78rem}

@media(max-width:900px){
  .hdr-top{flex-wrap:wrap;gap:12px;padding:12px 20px}
  .logo{margin:0;order:-1}
  .logo img{height:38px}
  .tel-box b{font-size:1.1rem}
  .menu-btn{display:block;margin-left:auto}
  .gnb{display:none}
  .gnb.open{display:block}
  .gnb > ul{flex-direction:column}
  .gnb > ul > li{text-align:left;border-bottom:1px solid var(--line)}
  /* 모바일: 하위 27개를 한 번에 펼치면 메뉴가 1388px 가 된다(실측).
     대분류를 눌러야 하위가 열리는 접이식으로 바꾼다. */
  .mega{position:static;display:none;border:none;box-shadow:none;padding:0 0 10px 16px}
  .gnb > ul > li.open .mega{display:block}
  .gnb > ul > li > a::after{content:'＋';float:right;color:var(--soft);font-weight:400}
  .gnb > ul > li.open > a::after{content:'－'}
  .mega a{padding:7px 0}

  /* 모바일 과정 카드 2열
     썸네일 원본이 350×350 뿐이고 더 큰 원본은 어디에도 없다
     (2026-08-02 확인 : 백업 포스터 69장·드라이브 사진 751장 전수 대조, 일치 0건).
     1열로 깔면 카드가 258px 라 고해상도 폰에서 1.46배 확대돼 흐려진다.
     카드 폭 상한을 155px 로 묶으면 확대가 없다(155×2배=310 < 350).
     상한을 175 로 두면 2열(175×2+12=362)이 375px 화면에 안 들어가 1열이 된다 — 그래서 155.
     좌우 여백도 24→16 으로 줄여 2열이 확실히 들어가게 한다. */
  .wrap{padding:0 16px}
  .course-grid{grid-template-columns:repeat(auto-fill,minmax(140px,155px));gap:12px}
  .course .bd{padding:12px 12px 14px}
  .course h3{font-size:.9rem;line-height:1.4}
  .course .meta{font-size:.76rem}
  .course .go{font-size:.8rem;margin-top:9px}
  .course .tk-in{font-size:.65rem;padding:2px 8px}

  /* 상담 폼 — 메타 광고 유입은 대부분 모바일이다.
     바깥 36 + 안쪽 24 를 그대로 두면 375px 화면에서 입력칸이 215px 까지 좁아진다.
     여백을 줄여 입력칸 폭을 확보한다. */
  .contact-box{padding:22px 16px;gap:20px}
  .cform{flex-basis:100%;padding:20px 16px}
  .contact-lead{flex-basis:100%}
}