/* ============================================================
   바오밥목공전문학원 — 신축 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:#5C6672; --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;min-height:44px}
.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 a svg{width:17px;height:17px;display:block}
.sns .bl{background:#2DB400}
/* 인스타 공식 브랜드 그라데이션 — 단색 #C13584 였던 것을 실제 로고 색으로 맞췄다(2026-08-30) */
.sns .ig{background:linear-gradient(45deg,#FEDA75 0%,#FA7E1E 25%,#D62976 50%,#962FBF 75%,#4F5BD5 100%)}
.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}
/* 블로그·인스타 — 아이콘+글자 1줄로 (2026-08-09, "바오밥나무공방"이 실제로는 블로그라 라벨 정정+아이콘화) */
.quick .q-bl,.quick .q-ig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.quick .q-bl svg,.quick .q-ig svg{flex:none}
.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:.78rem;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:.88rem;color:var(--soft)}
/* 두 링크의 목적지가 다르다(고용24 외부 / 내부 상세). 21px 짜리가 6px 간격으로 붙어 있어
   잘못 눌러 새 탭으로 튕겨 나갔다 되돌아오는 왕복이 생겼다 — 44px 로 띄우고 선으로 가른다.
   padding:11px 은 39.9px 에 그쳐(.86rem×1.3+22) 13px 로 잡는다. */
.course .go{margin-top:12px;font-size:.86rem;font-weight:700;color:var(--copper);
            display:block;padding:13px 0;line-height:1.3}
.course .go2{margin-top:0;font-size:.82rem;font-weight:600;color:var(--soft);
             display:block;padding:13px 0;line-height:1.3;border-top:1px solid var(--line)}
.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)로 깔아도 확대되지 않는다. */
/* 캠퍼스 구분 제목 — 두 캠퍼스 사진이 섞여 보이지 않게 갈라 준다.
   방문자가 "가구제작을 어디서 배우나"를 바로 알 수 있어야 한다. */
.cam-h{max-width:1160px;margin:34px auto 14px;font-size:1.08rem;font-weight:700;color:var(--navy);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:9px;border-bottom:2px solid var(--copper)}
.cam-h span{font-size:.84rem;font-weight:400;color:var(--soft)}
.cam-h:first-of-type{margin-top:8px}
.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}

/* ══ 조직도 (2026-08-26 — 이미지 대신 인라인 HTML 카드형으로 교체) ══
   04_홈페이지_홍보_브랜딩/조직도_바오밥목공전문학원_공개용_v2.html(우리페이지 CMS 시절
   j=18 라이브 디자인)의 톤을 그대로 가져왔다 — navy 대표 카드 + 부서별 accent 컬러 +
   점선 트리. 부서 6개(경영지원센터·건축목공학과·가구제작학과·설렘·AI사업부)는 grid
   auto-fit 으로 화면 폭에 맞춰 자동으로 줄바꿈되고, I&F는 별도 법인이라 트리 아래
   구분선을 하나 더 두어 시각적으로 분리했다. */
.orgchart-block{max-width:1180px;margin:30px auto 0;text-align:center}
.orgchart-note{font-size:.78rem;color:var(--soft);margin-top:14px}

.org2-ceo{width:280px;margin:0 auto;background:var(--navy);color:#fff;border-radius:12px;
  padding:16px 24px;box-shadow:0 4px 14px rgba(43,58,78,.22)}
.org2-ceo-nm{font-size:1.15rem;font-weight:700;letter-spacing:.03em}
.org2-ceo-rl{font-size:.72rem;color:var(--copper-soft,#D9976A);margin-top:4px;letter-spacing:.14em}
.org2-vline{width:0;height:26px;border-left:2px dashed #a9b2bd;margin:0 auto}

.org2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;
  border-top:2px dashed #a9b2bd;padding-top:26px}
.org2-col{display:flex;flex-direction:column}
.org2-dept{background:var(--navy);color:#fff;border-radius:10px;padding:12px 14px;
  font-size:1rem;font-weight:700;position:relative}
.org2-dept::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:4px;
  border-radius:4px 4px 0 0;background:var(--accent)}
.org2-dept small{display:block;font-family:Georgia,serif;font-size:.6rem;font-weight:400;
  color:#b8c4d0;letter-spacing:.1em;margin-top:3px}

.org2-members{display:flex;flex-direction:column;gap:9px;margin-top:13px}
.org2-members-row{flex-direction:row;flex-wrap:wrap;justify-content:center}
.org2-m{background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 14px;
  display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(43,58,78,.06)}
.org2-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--accent)}
.org2-nm{font-size:.96rem;font-weight:700;color:var(--navy)}
.org2-wk{margin-left:auto;flex-shrink:0;background:var(--cream);border:1px solid var(--line);
  color:var(--wood);font-size:.68rem;font-weight:700;border-radius:999px;padding:2px 9px}
.org2-link{margin-left:auto;flex-shrink:0;font-size:.74rem;font-weight:700;color:var(--copper)}
.org2-link:hover{text-decoration:underline}

.org2-affiliate-div{display:flex;align-items:center;gap:10px;margin:30px 0 16px;color:var(--soft);
  font-size:.78rem;letter-spacing:.08em}
.org2-affiliate-div::before,.org2-affiliate-div::after{content:'';flex:1;border-top:1px dashed var(--line)}
.org2-affiliate{border:1px dashed var(--accent);border-radius:12px;padding:16px 18px;background:#fff}
.org2-aff-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px;margin-bottom:12px}
.org2-aff-nm{font-size:1rem;font-weight:700;color:var(--accent)}
.org2-aff-sub{font-size:.76rem;color:var(--soft)}
.org2-affiliate .org2-m{min-width:140px}

@media(max-width:560px){
  .org2-wk,.org2-link{margin-left:0}
  .org2-m{flex-wrap:wrap}
}

/* ══ 인스타그램 협업 임베드 (2026-08-09) ══
   embed.js 가 blockquote 를 iframe 으로 바꿔치기하는데, 그 전까지는 blockquote 원본이
   그대로 보여 레이아웃이 잠깐 어긋난다 — min-height 로 자리를 미리 잡아 둔다. */
.ig-collab{max-width:1160px;margin:34px auto 0}
.ig-collab-h{font-size:1.02rem;color:var(--navy);text-align:center;margin:0 0 18px}
.ig-collab-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.ig-collab-grid > blockquote.instagram-media{margin:0!important;min-width:326px!important;
  max-width:400px!important;width:100%!important;min-height:500px}
@media (max-width:640px){.ig-collab-grid > blockquote.instagram-media{min-width:0!important}}

/* ══ 포트폴리오 — 바오밥포지 카드 (2026-08-09) ══ */
.forge-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.forge-card{display:block;width:280px;max-width:100%;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .15s,transform .15s}
.forge-card:hover{box-shadow:0 8px 20px rgba(43,58,78,.14);transform:translateY(-2px)}
.forge-ph{aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
.forge-ph img{width:100%;height:100%;object-fit:cover;display:block}
.forge-cap{padding:12px 14px}
.forge-cap b{display:block;font-size:.95rem;color:var(--navy)}
.forge-cap span{font-size:.8rem;color:var(--soft)}
.ig-collab-more{text-align:center;margin-top:16px}

/* ══ 공지사항·지난 후기 아카이브 (2026-08-09, 구 사이트 게시판 선별 이관) ══ */
.news-archive{max-width:1160px;margin:34px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px}
.text-list{list-style:none;margin:0;padding:0}
.text-list li{border-top:1px solid var(--line);padding:10px 4px;font-size:.9rem;color:var(--ink);line-height:1.5}
.text-list li:first-child{border-top:0}
.text-list .d{color:var(--soft);font-size:.8rem;margin-right:10px;white-space:nowrap}

/* ══ 문의 ══ */
.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:.82rem;color:var(--soft);line-height:1.7;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}
/* 상담 접수 직후 = 채널 추가율이 가장 높은 순간. 그 자리에 채널 추가를 붙였다(2026-08-30) */
.cf-kakao{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:10px 18px;border-radius:9px;background:#FEE500;color:#3C1E1E;font-weight:700;font-size:.9rem;text-decoration:none}
.cf-kakao svg{width:18px;height:18px;flex:none}
.cf-kakao:hover{filter:brightness(.95)}

/* 스팸봇 함정 — 화면에서 완전히 숨기되 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:.85rem}

/* ══ 학원법 법정 표시사항 (2026-08-31) ══
   학원법 제15조 제3항 + 시행령 제16조의3 — 학습자 모집 광고에는 학원명·등록번호·
   교습과정·교습비를 표시해야 한다. 안성교육지원청 일괄안내(2026-08-31)로 추가.
   ★글자 크기 하한 규정은 원문에서 확인되지 않았다. 그래서 "작게"는 맞추되
   식별 불가 수준으로는 줄이지 않는다 — 너무 작으면 표시했다는 주장 자체가 약해진다.
   .fine(.78rem)보다 한 단계 작은 .72rem, 모바일에서도 읽히는 선을 유지한다. */
footer.site .legal-notice{margin-top:20px;font-size:.8rem;line-height:1.7;color:#93a1b0}

/* ══ 홈페이지 오류 제보 (2026-08-27) — site-feedback.js가 만드는 모달 ══
   footer .fine 줄에 붙는 트리거 링크는 footer.site a 규칙을 그대로 물려받는다
   (별도 색상 지정 없음 — 상담신청 CTA와 톤이 겹치지 않게 일부러 눈에 띄지 않게 둔다). */
.sfb-overlay{position:fixed;inset:0;background:rgba(27,37,49,.55);display:flex;
  align-items:center;justify-content:center;z-index:9999;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .15s}
.sfb-overlay.open{opacity:1;pointer-events:auto}
.sfb-modal{background:#fff;border-radius:14px;max-width:420px;width:100%;
  padding:26px 24px 20px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.sfb-modal h3{color:var(--navy);font-size:1.08rem;margin-bottom:6px}
.sfb-note{font-size:.84rem;color:var(--soft);margin-bottom:16px;line-height:1.5}
.sfb-close{position:absolute;top:14px;right:14px;background:none;border:0;
  font-size:22px;line-height:1;color:var(--soft);cursor:pointer}
.sfb-hp{position:absolute;left:-9999px}
.sfb-fld{display:block;margin-bottom:12px}
.sfb-fld span{display:block;font-size:.82rem;font-weight:700;color:var(--navy);margin-bottom:5px}
.sfb-fld textarea,.sfb-fld input{width:100%;border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font:inherit;font-size:.9rem;resize:vertical}
.sfb-fld textarea:focus,.sfb-fld input:focus{outline:none;border-color:var(--copper);
  box-shadow:0 0 0 3px rgba(198,123,60,.16)}
.sfb-privacy{font-size:.74rem;color:var(--soft);margin-bottom:14px;line-height:1.5}
.sfb-send{width:100%;background:var(--copper);color:#fff;border:0;border-radius:9px;
  padding:11px 16px;font-size:.95rem;font-weight:700;cursor:pointer}
.sfb-send:disabled{opacity:.6;cursor:default}
.sfb-msg{margin-top:10px;font-size:.84rem;min-height:1.2em}
.sfb-msg.ok{color:#2f7d4f}
.sfb-msg.err{color:#b3392b}

@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:.85rem}
  .course .go{font-size:.86rem;margin-top:9px}
  .course .tk-in{font-size:.74rem;padding:2px 8px}

  /* 상담 폼 — 메타 광고 유입은 대부분 모바일이다.
     바깥 36 + 안쪽 24 를 그대로 두면 375px 화면에서 입력칸이 215px 까지 좁아진다.
     여백을 줄여 입력칸 폭을 확보한다. */
  .contact-box{padding:22px 16px;gap:20px}
  .cform{flex-basis:100%;padding:20px 16px}
  /* iOS Safari 는 입력칸 글씨가 16px 미만이면 포커스 순간 페이지를 확대하고,
     그 배율이 포커스를 떠나도 남아 이후 좌우 스크롤이 생긴다. 현재 .95rem=15.2px 라
     0.8px 차이로 걸린다. 상담폼은 입력칸이 5개라 최대 5번 반복된다.
     viewport 메타에 maximum-scale 을 넣는 우회는 쓰지 않는다(확대를 막으면 접근성 위배). */
  .cform input[type=text],.cform input[type=tel],.cform select,.cform textarea{font-size:16px}
  .sfb-fld textarea,.sfb-fld input{font-size:16px}
  .contact-lead{flex-basis:100%}
}


/* 카카오톡 채널 추가 — 2026-08-31
   「상담(/chat)」은 한 번 묻고 끝나지만 「추가(/friend)」는 친구로 남는다.
   친구가 쌓이면 다음 모집을 광고비 없이 알릴 수 있다.
   I&F 채널이 친구 0명이었던 원인이 바로 이 경로의 부재였다(실측). */
.kko-add{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:8px 14px;
  border-radius:6px;background:#FEE500;color:#3C1E1E!important;font-size:.8rem;font-weight:700;
  text-decoration:none!important;line-height:1}
.kko-add svg{width:15px;height:15px;flex:none}
.kko-add:hover{filter:brightness(.95)}

/* ══ 모바일 예외 (2026-09-06) ══════════════════════════════════════
   900px 가 아니라 640px 에 거는 이유: 900px 블록에 넣으면 900px 화면에서
   갤러리가 6열 140px 이 되어 오히려 작아진다. */
@media(max-width:640px){

  /* ── C5 시설 갤러리 2열 ──
     .gal{minmax(220px,1fr)} 은 375px(콘텐츠 343px)에서 2열 조건 220×2+14=454>343 을
     못 넘어 1열로 붕괴한다. 실측(360px): 사진 19장이 세로로 줄을 서서 facility 가
     5,948px — 문서 전체 17,594px 의 34% 이고 community(4,906)보다 길다.
     ★화질 원칙 위배 없음: 2열이면 트랙 약 165px, DPR3 에서도 495 device px 로
       원본(1캠 1000×667 · 2캠 1400×1050)보다 작다 — 확대가 아니라 축소다.
     ※사진 장수 상한은 아직 정하지 않았다(현재 1캠 10 · 2캠 9). 지키지도 않을 규칙을
       주석으로 공표하면 다음 담당자가 무시하게 되므로, 정해지면 그때 적는다. */
  .gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .gal figcaption{padding:6px 8px;font-size:.78rem}
  .cam-h{margin:24px auto 10px;font-size:1rem}

  /* ── C7 히어로가 글에 밀려 늘어나게 ──
     .slides 가 clamp(320px,29vw,560px) 로 고정이고 .hero-copy 는 position:absolute
     inset:0 이라, 글이 길어져도 히어로가 늘어나지 못하고 .hero{overflow:hidden} 이
     잘라낸다. 실측(360×800): 콘텐츠가 정확히 320px 로 여유가 0 이다 — 지금은 안 잘리지만
     헤드라인이 한 줄만 늘거나 글자가 커지면 즉시 CTA 하단이 화면에서 사라진다.
     ★위 C8a 가 글자를 키우는 변경이므로 이 블록이 그 선행 조건이다.
     ★대가: 히어로 사진 확대율이 DPR3 기준 약 1.71→2.0~2.2배가 된다(hero.jpg 1920×560).
       .slide::after 의 82% 어두운 그라데이션이 덮어 실제로는 거의 보이지 않을 것으로 보나,
       styles.css 위쪽 화질 원칙 옆을 지나는 변경이라 근거를 남긴다. */
  .hero{display:grid}
  .hero > .slides,.hero > .hero-copy{grid-area:1/1}
  .slides{height:auto;min-height:320px}
  .hero-copy{position:static;padding:26px 0;min-height:320px}
  .hero-copy p{font-size:.95rem}
  .hero-copy .acts{margin-top:16px}
}

/* 공지·후기 목록 아래 안내 한 줄 (2026-09-09) */
.list-note{margin-top:10px;font-size:.82rem;color:var(--soft)}
.list-note a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:2px}