@charset "utf-8";
/* ============================================================
   대치명문학원 DAECHI MYUNGMUN ACADEMY — 공통 스타일
   기준 : _스펙_ac2_etoos.md (etoos.com 실측 · 2026-08-10 재검증)
     · 주조색 #047F89 (원본 CSS 최다 유채색 18회)
     · radius 12px (원본 최다 12회) · pill 20px (원본 4회)
     · 컨테이너 1080px (원본 최다 6회)
     · 본문 16px / 보조 14px / 캡션 13px · 제목 weight 700 상한, 큰 문장에 300 혼용
     · 폰트 "Noto Sans KR","Malgun Gothic",sans-serif (원본 최다 스택)
     · 섹션 상하 92px (모바일 54px)
   ac1(한빛기숙학원)과 겹치지 않게 구조 자체를 다르게 잡았다.
     · 헤더 2단(로고행 + 전폭 GNB 바) — ac1 은 로고와 GNB 가 한 줄
     · 홈 히어로 좌우 분할 라이트형 — ac1 은 어두운 풀블리드 오버레이
     · 하위 히어로 흰 배경 + 좌측 틸 세로선 — ac1 은 그라디언트 배경
     · 푸터 밝은 회색 + 하단 다크 바 — ac1 은 전체 다크 네이비
   ============================================================ */
:root{
  --brand:#047F89;
  --brand-deep:#035E66;
  --brand-lite:#0AA1AD;        /* 면·아이콘 전용. 텍스트 금지(대비 3.5:1대) */
  --brand-pale:#E6F2F3;
  --brand-tint:#F3F9F9;
  --navy:#104975;
  --navy-pale:#E8EFF5;
  --ink:#333333;
  --ink-strong:#222222;
  --ink-sub:#666666;
  --ink-cap:#999999;
  --line:#E7E7E7;
  --line-in:#D1D1D1;
  --line-card:#E5E5E5;
  --bg:#FFFFFF;
  --bg-soft:#F5F5F5;
  --dark:#12262A;
  --r:12px;
  --r-s:5px;
  --pill:20px;
  --wrap:1080px;
  --pad:92px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"Noto Sans KR","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.75;font-weight:400;letter-spacing:-.1px;
  overflow-x:hidden;word-break:keep-all;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
svg.ico{width:1em;height:1em;flex:none;vertical-align:middle}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:3px}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.lt{font-weight:300}                      /* 원본이 실제로 쓰는 light 300 혼용 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:4000;background:var(--brand);color:#fff;
  padding:12px 22px;border-radius:0 0 var(--r) 0;font-weight:700}
.skip:focus{left:0}

/* ---------- 레이아웃 ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;width:100%}
.sec{padding:var(--pad) 0}
.sec.tight{padding:58px 0}
.sec.soft{background:var(--bg-soft)}
.sec.tintbg{background:var(--brand-tint)}
.sec.dark{background:var(--dark);color:#DCE9EA}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.dark p,.sec.dark .sub{color:#B4C9CB}
.sec.dark .card{background:#1B3236;border-color:#2C474C}
.sec.dark .card p{color:#AFC4C6}
.sec.dark .card .ci{background:#24444A;color:#6FD3DC}
.mt56{margin-top:56px}
.mt32{margin-top:32px}

/* 섹션 머리 — 왼쪽 정렬 + 위에 짧은 틸 룰 (ac1 의 가운데 정렬 아이브로우와 다르게) */
.sec-head{margin-bottom:42px;max-width:780px}
.sec-head::before{content:"";display:block;width:34px;height:3px;background:var(--brand);
  border-radius:2px;margin-bottom:18px}
.sec-head.c{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.c::before{margin-left:auto;margin-right:auto}
.sec-head .eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.sec.dark .sec-head .eyebrow{color:#6FD3DC}
.sec.dark .sec-head::before{background:var(--brand-lite)}
.sec-head h2{font-size:clamp(23px,2.5vw,32px);font-weight:700;line-height:1.36;
  letter-spacing:-.8px;color:var(--ink-strong)}
.sec-head h2 .lt{color:var(--ink-sub)}
.sec.dark .sec-head h2 .lt{color:#8FB2B6}
.sec-head .sub{margin-top:14px;font-size:16px;line-height:1.85;color:var(--ink-sub)}

.prose h3{font-size:20px;font-weight:700;line-height:1.45;color:var(--ink-strong);
  margin-bottom:14px;letter-spacing:-.4px}
.prose p{font-size:16px;line-height:1.9;color:#444444}
.prose p + p{margin-top:14px}
.lead-p{font-size:18px;line-height:1.9;color:#3E4A4C;font-weight:300;max-width:880px}
.lead-p b{font-weight:700;color:var(--ink-strong)}
h2 + .prose,h3 + .prose{margin-top:18px}

/* ---------- 헤더 : 2단 (1행 로고+유틸 / 2행 전폭 GNB) ---------- */
.hd{position:sticky;top:0;z-index:900;background:#fff;box-shadow:0 1px 0 var(--line)}
.hd-row1{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo .mark{width:34px;height:34px;color:var(--brand)}
.logo .lg{display:flex;flex-direction:column;line-height:1.2}
.logo .lg b{font-size:20px;font-weight:700;color:var(--ink-strong);letter-spacing:-.7px}
.logo .lg em{font-style:normal;font-size:9.5px;font-weight:500;letter-spacing:.14em;color:var(--brand)}
.hd-util{display:flex;align-items:center;gap:16px;flex:none}
.hd-util .tel{display:flex;align-items:center;gap:9px}
.hd-util .tel .ico{width:19px;height:19px;color:var(--brand)}
.hd-util .tel span{display:flex;flex-direction:column;line-height:1.25}
.hd-util .tel em{font-style:normal;font-size:11px;color:var(--ink-sub);font-weight:500}
.hd-util .tel b{font-size:17px;font-weight:700;color:var(--ink-strong);letter-spacing:-.4px}
.hd-util .hours{font-size:12.5px;color:var(--ink-cap);line-height:1.5;text-align:right;
  padding-left:16px;border-left:1px solid var(--line)}

/* 2행 GNB — 전폭 바. 원본 1차 메뉴 문자열을 그대로 쓴다 */
.gnbbar{border-top:1px solid var(--line);background:#fff}
.gnb > ul{display:flex;justify-content:space-between}
.gnb > ul > li{position:relative;flex:1 1 auto;text-align:center}
.gnb > ul > li > a{display:block;padding:0 8px;line-height:54px;font-size:15.5px;
  font-weight:500;color:#2F3A3C;white-space:nowrap}
.gnb > ul > li:hover > a,.gnb > ul > li:focus-within > a{color:var(--brand);font-weight:700}
.gnb > ul > li.on > a{color:var(--brand);font-weight:700;box-shadow:inset 0 -3px 0 var(--brand)}
/* 항목별 세로 드롭다운 (ac1 의 전폭 메가패널과 다르게) */
.gnb .sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:186px;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);
  border-radius:0 0 var(--r) var(--r);box-shadow:0 14px 28px rgba(4,66,72,.13);
  padding:10px 0;display:none;z-index:30;text-align:left}
.gnb > ul > li:hover .sub,.gnb > ul > li:focus-within .sub{display:block}
.gnb .sub a{display:block;padding:8px 20px;font-size:14px;color:#4A5658;white-space:nowrap}
.gnb .sub a:hover{background:var(--brand-tint);color:var(--brand-deep);font-weight:700}
.gnb .sub .more{margin-top:6px;padding-top:8px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--brand)}

.nav-toggle{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;
  align-items:center;gap:5px;border:1px solid var(--line-in);border-radius:var(--r-s)}
.nav-toggle span{display:block;width:19px;height:2px;background:#333;border-radius:2px}

/* 모바일 전체 패널 (ac1 은 4열 그리드 드로어) */
.mpanel{display:none;background:#fff;border-top:1px solid var(--line);
  max-height:calc(100vh - 72px);overflow-y:auto}
.mpanel[hidden]{display:none}
.mpanel.open{display:block}
.mgroup{border-bottom:1px solid var(--line)}
.mgroup > b{display:block;padding:15px 4px 8px;font-size:14.5px;font-weight:700;color:var(--brand)}
.mgroup ul{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px 15px}
.mgroup a{display:block;padding:7px 12px;border-radius:var(--pill);background:var(--bg-soft);
  font-size:13.5px;color:#4A5658}
.mgroup a:hover{background:var(--brand);color:#fff}

/* ---------- 홈 히어로 : 좌우 분할 라이트형 ---------- */
.mhero{background:linear-gradient(180deg,#F3F9F9 0%,#FFFFFF 100%);padding:64px 0 0}
.mhero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center}
.mhero .kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  border-radius:var(--pill);background:var(--brand-pale);color:var(--brand-deep);
  font-size:13px;font-weight:700}
.mhero h1{margin-top:20px;font-size:clamp(30px,4.2vw,46px);font-weight:700;line-height:1.28;
  letter-spacing:-1.6px;color:var(--ink-strong)}
.mhero h1 .lt{display:block;font-weight:300;color:#4C5B5D;letter-spacing:-1.2px}
.mhero h1 em{font-style:normal;color:var(--brand)}
.mhero .sub{margin-top:20px;font-size:17px;line-height:1.9;color:var(--ink-sub);max-width:520px}
.mhero .acts{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.mhero-fig{border-radius:var(--r);overflow:hidden;background:var(--bg-soft);
  box-shadow:0 20px 44px rgba(4,66,72,.14)}
.mhero-fig img{width:100%;aspect-ratio:10/7;object-fit:cover}
.mhero-kpi{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mhero-kpi div{padding:24px 6px;text-align:center;border-left:1px solid var(--line)}
.mhero-kpi div:first-child{border-left:0}
.mhero-kpi b{display:block;font-size:27px;font-weight:700;color:var(--brand);letter-spacing:-.8px}
.mhero-kpi b .u{font-size:15px;margin-left:2px;color:var(--brand-deep)}
.mhero-kpi span{display:block;margin-top:4px;font-size:13px;color:var(--ink-sub)}

/* ---------- 하위 페이지 히어로 : 흰 배경 + 좌측 틸 세로선 ---------- */
.hero{background:#fff;border-bottom:1px solid var(--line)}
.hero-in{padding:34px 0 40px}
.crumb ol{display:flex;flex-wrap:wrap;gap:7px;font-size:12.5px;color:var(--ink-cap)}
.crumb li + li::before{content:"›";margin-right:7px;color:var(--line-in)}
.crumb a:hover{color:var(--brand);text-decoration:underline}
.hero-body{margin-top:18px;padding-left:20px;border-left:4px solid var(--brand);border-radius:2px}
.hero .kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  color:var(--brand);text-transform:uppercase}
.hero h1{margin-top:6px;font-size:clamp(26px,3.4vw,38px);font-weight:700;line-height:1.3;
  letter-spacing:-1.2px;color:var(--ink-strong)}
.hero h1 .lt{font-weight:300;color:#5A6A6C}
.hero .sub{margin-top:14px;font-size:16.5px;line-height:1.9;color:var(--ink-sub);max-width:760px}
.hero-q{margin-top:16px;font-size:13.5px;color:var(--ink-cap)}
.hero-strip{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.hero-strip span{padding:6px 13px;border-radius:var(--pill);background:var(--brand-tint);
  border:1px solid #D6EBEC;font-size:13px;color:var(--brand-deep);font-weight:500}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--r);font-size:15.5px;font-weight:700;
  border:1px solid transparent;transition:background .16s,color .16s,border-color .16s}
.btn.pri{background:var(--brand);color:#fff}
.btn.pri:hover{background:var(--brand-deep)}
.btn.out{background:#fff;color:var(--brand-deep);border-color:var(--brand)}
.btn.out:hover{background:var(--brand-pale)}
.btn.ghost{background:#fff;color:var(--brand-deep)}
.btn.ghost:hover{background:var(--brand-pale)}
.btn.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn.line:hover{background:rgba(255,255,255,.14)}
.btn.sm{padding:10px 18px;font-size:14px;border-radius:var(--r-s)}
.btn.pill{border-radius:var(--pill)}

/* ---------- 빠른 진입 : 가로 스크롤 칩 바 ---------- */
.quick{border-bottom:1px solid var(--line);background:#fff}
.quick ul{display:flex;gap:10px;overflow-x:auto;padding:16px 0;-webkit-overflow-scrolling:touch}
.quick a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--pill);
  border:1px solid var(--line-card);font-size:14px;font-weight:500;color:#3C4A4C;white-space:nowrap}
.quick a .ico{width:17px;height:17px;color:var(--brand)}
.quick a:hover{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-deep)}

/* ---------- 카드 : 상단 틸 키라인 ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line-card);border-radius:var(--r);
  padding:26px 22px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:var(--brand-lite);opacity:.85}
.card .ci{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:var(--r);background:var(--brand-pale);color:var(--brand);margin-bottom:15px}
.card .ci .ico{width:21px;height:21px}
.card .tag{display:inline-block;margin-bottom:9px;padding:3px 11px;border-radius:var(--pill);
  background:var(--brand-pale);color:var(--brand-deep);font-size:12px;font-weight:700}
.card h3{font-size:17.5px;font-weight:700;line-height:1.5;color:var(--ink-strong);letter-spacing:-.4px}
.card p{margin-top:9px;font-size:14.5px;line-height:1.8;color:#5C6668}
.sec.soft .card,.sec.tintbg .card{background:#fff}
.cards.lk .card{display:flex;flex-direction:column;transition:box-shadow .16s,transform .16s}
.cards.lk .card:hover{box-shadow:0 12px 26px rgba(4,66,72,.13);transform:translateY(-3px)}
.cards.lk .go{margin-top:auto;padding-top:14px;font-size:13.5px;font-weight:700;color:var(--brand)}
.cards.lk .go::after{content:" →"}
/* 번호형 카드 */
.ncards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:nc}
.ncards.c2{grid-template-columns:repeat(2,1fr)}
.ncard{counter-increment:nc;background:#fff;border:1px solid var(--line-card);
  border-radius:var(--r);padding:26px 22px}
.ncard::before{content:"0" counter(nc);display:block;font-size:22px;font-weight:700;
  color:var(--brand-lite);letter-spacing:-.5px;margin-bottom:10px;font-variant-numeric:tabular-nums}
.ncard h3{font-size:17px;font-weight:700;color:var(--ink-strong);line-height:1.5}
.ncard p{margin-top:8px;font-size:14.5px;line-height:1.8;color:#5C6668}

/* ---------- 이미지 카드 ---------- */
.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.icards.c2{grid-template-columns:repeat(2,1fr)}
.icards.c4{grid-template-columns:repeat(4,1fr)}
.icard{background:#fff;border:1px solid var(--line-card);border-radius:var(--r);overflow:hidden}
.icard .im{display:block;aspect-ratio:8/5;overflow:hidden;background:var(--bg-soft)}
.icard .im img{width:100%;height:100%;object-fit:cover}
.icard .bd{padding:20px 20px 24px}
.icard h3{font-size:17px;font-weight:700;color:var(--ink-strong);letter-spacing:-.4px}
.icard p{margin-top:8px;font-size:14.5px;line-height:1.8;color:#5C6668}

/* ---------- 강사 카드 (사진 없이 이니셜 심볼 — 초상권 회피) ---------- */
.tlist{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tcard{display:flex;gap:18px;background:#fff;border:1px solid var(--line-card);
  border-radius:var(--r);padding:22px}
.tcard .sym{flex:none;width:62px;height:62px;border-radius:var(--r);background:var(--brand);
  color:#fff;display:grid;place-items:center;font-size:22px;font-weight:700;letter-spacing:-1px}
.tcard .tb{min-width:0;flex:1}
.tcard .sj{display:inline-block;padding:2px 10px;border-radius:var(--pill);
  background:var(--brand-pale);color:var(--brand-deep);font-size:12px;font-weight:700}
.tcard h3{margin-top:8px;font-size:17px;font-weight:700;color:var(--ink-strong)}
.tcard h3 span{margin-left:7px;font-size:13px;font-weight:400;color:var(--ink-cap)}
.tcard p{margin-top:8px;font-size:14.5px;line-height:1.8;color:#5C6668}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.badge{display:inline-block;padding:3px 10px;border-radius:var(--pill);background:var(--bg-soft);
  border:1px solid var(--line);font-size:12.5px;color:#596365}

/* ---------- 통계 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:var(--brand-tint);border:1px solid #D9EDEE;border-radius:var(--r);
  padding:26px 18px;text-align:center}
.stat .n{display:block;font-size:31px;font-weight:700;color:var(--brand-deep);
  letter-spacing:-1px;line-height:1.25}
.stat .n .u{font-size:15px;font-weight:500;margin-left:3px}
.stat .l{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-sub)}

/* ---------- 분할(이미지+글) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split.rev .figure{order:2}
.split + .split{margin-top:60px}
.figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--bg-soft)}
.figure img{width:100%;aspect-ratio:9/5.6;object-fit:cover}
.figure figcaption{padding:11px 4px 0;font-size:12.5px;color:var(--ink-cap)}

/* ---------- 정의목록 ---------- */
.spec{display:grid;grid-template-columns:170px 1fr;border-top:2px solid var(--brand)}
.spec.n2{grid-template-columns:140px 1fr 140px 1fr}
.spec dt{padding:14px 18px;background:var(--brand-tint);border-bottom:1px solid var(--line);
  font-size:14.5px;font-weight:700;color:var(--brand-deep)}
.spec dd{padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px;color:#474F51}

/* ---------- 표 : 틸 상단선 + 얼룩 행 ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-s)}
.tbl{min-width:620px;font-size:14.5px;border-top:2px solid var(--brand)}
.tbl caption{caption-side:top;text-align:left;padding-bottom:11px;font-size:13.5px;
  font-weight:500;color:var(--ink-sub)}
.tbl th,.tbl td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:center;
  vertical-align:middle}
.tbl thead th{background:var(--brand-tint);font-weight:700;color:var(--brand-deep);white-space:nowrap}
.tbl tbody th{background:#FAFCFC;font-weight:700;color:#2E3A3C;text-align:left;white-space:nowrap}
.tbl tbody tr:nth-child(even) td{background:#FCFDFD}
.tbl td{color:#4C5456}
.tbl.lft td{text-align:left}
.tbl tbody tr:hover td{background:var(--brand-pale)}

/* ---------- 목록 ---------- */
.blist li{position:relative;padding:9px 0 9px 20px;font-size:15.5px;line-height:1.8;color:#474F51;
  border-bottom:1px solid #EFEFEF}
.blist li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:2px;
  background:var(--brand);border-radius:1px}
.blist.c2{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
.nlist{counter-reset:n}
.nlist li{counter-increment:n;position:relative;padding:11px 0 11px 40px;font-size:15.5px;
  line-height:1.8;color:#474F51;border-bottom:1px solid var(--line)}
.nlist li::before{content:counter(n);position:absolute;left:0;top:13px;width:25px;height:25px;
  border-radius:var(--r-s);background:var(--brand-pale);color:var(--brand-deep);
  font-size:12.5px;font-weight:700;display:grid;place-items:center}

/* ---------- 단계 : 가로 타임라인 ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.steps.s3{grid-template-columns:repeat(3,1fr)}
.steps.s5{grid-template-columns:repeat(5,1fr)}
.step{counter-increment:s;position:relative;padding:22px 18px 20px;background:#fff;
  border:1px solid var(--line-card);border-radius:var(--r)}
.step::before{content:"STEP " counter(s);display:inline-block;padding:2px 10px;
  border-radius:var(--pill);background:var(--brand);color:#fff;font-size:11.5px;
  font-weight:700;letter-spacing:.06em;margin-bottom:11px}
.step h3{font-size:16.5px;font-weight:700;color:var(--ink-strong);line-height:1.5}
.step p{margin-top:7px;font-size:14px;line-height:1.75;color:#5C6668}

/* ---------- 주차 커리큘럼 ---------- */
.weeks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.week{border:1px solid var(--line-card);border-radius:var(--r);padding:20px;background:#fff}
.week .wt{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.week .wt b{font-size:13px;font-weight:700;color:#fff;background:var(--brand-deep);
  padding:3px 11px;border-radius:var(--pill)}
.week .wt span{font-size:15.5px;font-weight:700;color:var(--ink-strong)}
.week p{font-size:14.5px;line-height:1.8;color:#5C6668}

/* ---------- 연혁 ---------- */
.tl{border-left:2px solid var(--line);padding-left:28px}
.tl-item{position:relative;padding-bottom:32px}
.tl-item::before{content:"";position:absolute;left:-35px;top:8px;width:12px;height:12px;
  border-radius:50%;background:var(--brand);border:3px solid #fff;box-shadow:0 0 0 2px var(--brand-pale)}
.tl-item .y{display:block;font-size:21px;font-weight:700;color:var(--brand);margin-bottom:9px}
.tl-item ul li{padding:4px 0 4px 15px;position:relative;font-size:15.5px;color:#474F51}
.tl-item ul li::before{content:"";position:absolute;left:0;top:15px;width:5px;height:5px;
  border-radius:50%;background:var(--line-in)}

/* ---------- 게시물 ---------- */
.posts{border-top:2px solid var(--brand)}
.post{display:flex;gap:16px;align-items:flex-start;padding:18px 4px;border-bottom:1px solid var(--line)}
.post .cat{flex:none;padding:3px 11px;border-radius:var(--pill);background:var(--brand-pale);
  color:var(--brand-deep);font-size:12px;font-weight:700;margin-top:3px}
.post .pb{flex:1;min-width:0}
.post h3{font-size:16px;font-weight:700;color:var(--ink-strong)}
.post p{margin-top:5px;font-size:14.5px;color:#6A7476;line-height:1.75}
.post .d{flex:none;font-size:13px;color:var(--ink-cap)}

/* ---------- FAQ ---------- */
.faq{border-top:2px solid var(--brand)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;gap:13px;align-items:flex-start;padding:18px 4px;cursor:pointer;
  list-style:none;font-size:16px;font-weight:700;color:var(--ink-strong)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:20px;font-weight:400;
  color:var(--brand);flex:none;line-height:1.4}
.faq details[open] summary::after{content:"−"}
.faq .q{flex:none;width:25px;height:25px;border-radius:var(--r-s);background:var(--brand);
  color:#fff;font-size:12.5px;font-weight:700;display:grid;place-items:center;margin-top:2px}
.faq .qt{flex:1}
.faq .a{padding:0 4px 20px 42px;font-size:15px;line-height:1.9;color:#535B5D}

/* ---------- 후기 ---------- */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.voice{margin:0;background:#fff;border:1px solid var(--line-card);border-radius:var(--r);
  padding:26px 22px;border-left:4px solid var(--brand-lite)}
.voice .qi{display:block;color:var(--brand-pale)}
.voice .qi .ico{width:30px;height:30px;stroke-width:1.2}
.voice blockquote p{margin-top:12px;font-size:15px;line-height:1.9;color:#474F51}
.voice figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px}
.voice figcaption b{font-size:14.5px;font-weight:700;color:var(--ink-strong)}
.voice figcaption span{font-size:12.5px;color:var(--ink-cap)}

/* ---------- 안내 상자 ---------- */
.notebox{margin-top:26px;background:var(--brand-tint);border:1px solid #D6EBEC;
  border-radius:var(--r);padding:20px 22px}
.notebox b{display:block;font-size:14.5px;font-weight:700;color:var(--brand-deep);margin-bottom:6px}
.notebox p{font-size:14.5px;line-height:1.85;color:#4E5658}
.demobox{margin-top:26px;background:#FBF3F3;border:1px solid #EFD6D7;
  border-left:4px solid #B4474C;border-radius:var(--r);padding:20px 22px}
.demobox b{display:block;font-size:14.5px;font-weight:700;color:#9C3C41;margin-bottom:6px}
.demobox p{font-size:14.5px;line-height:1.85;color:#5B4749}

/* ---------- CTA 밴드 ---------- */
.band{background:var(--brand-deep);color:#fff;padding:52px 0}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.band h2{font-size:clamp(20px,2.1vw,26px);font-weight:700;letter-spacing:-.7px;line-height:1.45}
.band h2 .lt{font-weight:300;color:#B7DDE0}
.band p{margin-top:9px;font-size:15px;line-height:1.8;color:#C3E1E4;max-width:600px}
.band-a{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 폼 ---------- */
.formbox{background:#fff;border:1px solid var(--line-card);border-radius:var(--r);padding:32px 28px}
.formbox h3{font-size:18.5px;font-weight:700;color:var(--ink-strong);margin-bottom:20px}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld.wide{grid-column:1/-1}
.fld label{font-size:14px;font-weight:700;color:#3E4648}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 14px;border:1px solid var(--line-in);
  border-radius:var(--r-s);font-size:15px;background:#fff}
.fld textarea{resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--brand);outline:none;
  box-shadow:0 0 0 3px var(--brand-pale)}
.fnote{margin-top:16px;font-size:13.5px;color:var(--ink-cap);line-height:1.75}
.fbtn{margin-top:16px}

/* ---------- 사이트맵 ---------- */
.smap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 22px}
.smap h3{font-size:15.5px;font-weight:700;color:var(--brand-deep);padding-bottom:9px;
  border-bottom:2px solid var(--brand);margin-bottom:11px}
.smap a{display:block;padding:6px 0;font-size:14px;color:#4A5658;border-bottom:1px solid #F0F0F0}
.smap a:hover{color:var(--brand);padding-left:4px}

/* ---------- 푸터 : 밝은 상단 + 다크 하단 바 ---------- */
.ft{background:var(--bg-soft);color:#5A6466;font-size:14px;border-top:1px solid var(--line)}
.ft-top{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr 1fr;gap:32px 22px;padding:56px 0 40px}
.ft-brand .logo .lg b{color:var(--ink-strong)}
.ft-brand p{margin-top:14px;line-height:1.85;font-size:13.5px;color:#697373}
.ft-brand .ft-c{margin-top:14px;color:#3E4A4C;font-size:13.5px;line-height:1.9}
.ft-brand .ft-c a:hover{color:var(--brand);text-decoration:underline}
.ft-top h3{font-size:14.5px;font-weight:700;color:var(--ink-strong);margin-bottom:12px}
.ft-top ul li{margin-bottom:7px}
.ft-top ul a{font-size:13.5px;color:#697373}
.ft-top ul a:hover{color:var(--brand);text-decoration:underline}
.ft .notice{padding:18px 20px;background:#fff;border:1px solid var(--line);
  border-left:4px solid #B4474C;border-radius:var(--r);font-size:13px;line-height:1.9;color:#66706F}
.ft .notice b{color:#9C3C41}
.ft-legal{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px;padding-bottom:26px}
.ft-legal a{font-size:13px;color:#5A6466}
.ft-legal a:hover{color:var(--brand);text-decoration:underline}
.ft-bottom{background:var(--dark);color:#8FA3A5;padding:20px 0}
.ft-bottom .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  align-items:flex-start}
.ft-addr{font-size:12.5px;line-height:1.85}
.copy{font-size:12.5px;color:#76898B}

/* ---------- 반응형 ---------- */
@media (max-width:1080px){
  .gnbbar{display:none}
  .nav-toggle{display:flex}
  .hd-util .hours{display:none}
  .mhero-in{grid-template-columns:1fr;gap:32px}
  .mhero-fig{order:-1}
  .ft-top{grid-template-columns:1fr 1fr 1fr}
  .smap{grid-template-columns:repeat(3,1fr)}
  .cards.c4,.icards.c4{grid-template-columns:repeat(2,1fr)}
  .steps,.steps.s5{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  :root{--pad:54px}
  .hd-util .tel{display:none}
  .mhero{padding-top:44px}
  .mhero-kpi{grid-template-columns:repeat(2,1fr)}
  .mhero-kpi div:nth-child(3){border-left:0}
  .cards,.cards.c2,.cards.c4{grid-template-columns:1fr}
  .ncards,.ncards.c2{grid-template-columns:1fr}
  .icards,.icards.c2,.icards.c4{grid-template-columns:1fr}
  .tlist{grid-template-columns:1fr}
  .voices{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:24px}
  .split.rev .figure{order:0}
  .split + .split{margin-top:40px}
  .spec,.spec.n2{grid-template-columns:1fr}
  .spec dt{border-bottom:0}
  .blist.c2{grid-template-columns:1fr}
  .weeks{grid-template-columns:1fr}
  .steps,.steps.s3,.steps.s5{grid-template-columns:1fr}
  .smap{grid-template-columns:repeat(2,1fr)}
  .ft-top{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .post{flex-wrap:wrap;gap:9px}
  .post .d{width:100%}
  .band-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .stats{grid-template-columns:1fr}
  .smap{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr}
  .btn{padding:13px 20px;font-size:15px}
  .logo .lg b{font-size:17.5px}
}
@media print{.hd,.mpanel,.band,.skip,.quick{display:none}}