:root{
  --fw-body:400;          /* 원본 실사용 400 / 제목 700 */
  --fw-head:700;
  --pri:#000000;          /* 원본 주조색 실측 #000000 (32회) */
  --pri-d:#303030;
  --pri-soft:#f7f7f7;
  --pri-on-dark:#ffe900;  /* 원본 유일 CSS 변수 --color1:#ffe900 */
  --on-pri:#ffffff;
  --acc:#ffe900;
  --ink:#000000;
  --ink-d:#000000;
  --body:#444444;         /* 원본 실측 · 대비 9.73:1 */
  --sub:#6b6b6b;          /* 원본 #a6a6a6 는 2.32:1 로 미달 → 5.36:1 로 올림 */
  --bg:#ffffff;
  --bg2:#f7f7f7;          /* 원본 실측 */
  --surface:#ffffff;
  --bd:#d0d0d0;           /* 원본 실측 */
  --bd-s:#191919;
  --focus:#000000;
  --r:3px;                /* 원본 radius 실측 최다값 */
  --r-btn:999px;          /* 원본 pill 실측 */
  --r-ic:50%;
  --cw:1560px;            /* 원본 .inner_common max-width 실측 */
  --gut:60px;             /* 원본 padding:0 60px 실측 */
  --gap:28px;
  --sec-pad:clamp(88px,9vw,148px);
  --hd-h:78px;
  --hd-bg:rgba(255,255,255,.95);
  --hd-bd:#d0d0d0;
  --hd-fg:#000000;
  --hd-fg-2:#6b6b6b;
  --nav-gap:36px;
  --hero-h:700px;
  --hero-scrim:rgba(0,0,0,.55) 58%,rgba(0,0,0,.9) 100%);
  --h1-max:80px;          /* 원본 히어로 80px 실측 */
  --h2-max:44px;
  --phero-bg:#000000;
  --phero-fg:#ffffff;
  --phero-sub:rgba(255,255,255,.78);
  --phero-bd:#000000;
  --sh:0 1px 3px rgba(0,0,0,.1);
  --ft-bg:#000000;
  --ft-fg:#a6a6a6;        /* 검정 배경 위 9.0:1 — 원본값 그대로 안전 */
  --ft-hd:#ffffff;
  --ft-bd:#303030;
  --ft-note:rgba(255,255,255,.05);
}

/* =========================================================================
   애드믹스 AD MIX — 공통 스타일시트
   참고원본 실측 : www.cheil.com (제일기획)  (스펙 문서 : _스펙_sl3_cheil.md)
   이 파일 하나로 전 페이지의 헤더·푸터·타이포·컴포넌트를 담당한다.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Cheil Hangul",Pretendard,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;font-weight:var(--fw-body);line-height:1.6;letter-spacing:-0.02em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
img{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:var(--fw-head);letter-spacing:-0.03em;line-height:1.22}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--pri);color:var(--on-pri);
  padding:12px 20px;font-weight:700}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--cw);margin:0 auto;padding:0 var(--gut)}

/* ---------- 헤더 ---------- */
.hd{position:sticky;top:0;z-index:60;background:var(--hd-bg);border-bottom:1px solid var(--hd-bd);
  backdrop-filter:saturate(1.4) blur(8px)}
.hd-in{width:100%;max-width:var(--cw);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:28px;height:var(--hd-h)}
.logo{display:flex;flex-direction:column;justify-content:center;line-height:1;flex:0 0 auto}
.logo .lk{font-size:21px;font-weight:800;letter-spacing:-.04em;color:var(--hd-fg)}
.logo .le{margin-top:5px;font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--hd-fg-2)}
.gnb{flex:1 1 auto;min-width:0}
.gnb-l{display:flex;gap:var(--nav-gap)}
.gi{position:relative}
.gi>a{display:flex;align-items:center;height:var(--hd-h);font-size:16px;font-weight:600;color:var(--hd-fg);
  white-space:nowrap;border-bottom:2px solid transparent}
.gi>a:hover,.gi>a.on{color:var(--pri);border-bottom-color:var(--pri)}
.dd{position:absolute;left:50%;transform:translateX(-50%) translateY(6px);top:var(--hd-h);min-width:216px;
  background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);padding:12px 0;
  box-shadow:var(--sh);opacity:0;visibility:hidden;transition:.18s}
.gi:hover .dd,.gi:focus-within .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd a{display:block;padding:9px 20px;font-size:14.5px;color:var(--sub);white-space:nowrap}
.dd a:hover{background:var(--bg2);color:var(--pri)}
.hd-r{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.tel{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:var(--hd-fg)}
.tel svg{width:17px;height:17px;fill:none;stroke:var(--pri);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mtog{display:none;width:44px;height:44px;background:none;border:0;padding:10px;cursor:pointer}
.mtog span{display:block;height:2px;background:var(--hd-fg);margin:5px 0;border-radius:2px;transition:.2s}
.mtog[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mtog[aria-expanded="true"] span:nth-child(2){opacity:0}
.mtog[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mmenu{display:none;background:var(--surface);border-bottom:1px solid var(--bd);padding:8px var(--gut) 26px}
.mmenu[hidden]{display:none}
.mmenu .mg{display:block;padding:14px 0;font-size:17px;font-weight:700;border-bottom:1px solid var(--bd)}
.mmenu ul ul{padding:8px 0 14px}
.mmenu ul ul a{display:block;padding:8px 0 8px 14px;font-size:15px;color:var(--sub)}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:var(--r-btn);font-size:16px;font-weight:700;
  border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.p{background:var(--pri);color:var(--on-pri);border-color:var(--pri)}
.btn.p:hover{background:var(--pri-d);border-color:var(--pri-d)}
.btn.s{background:transparent;color:var(--ink);border-color:var(--bd-s)}
.btn.s:hover{background:var(--bg2)}
.btn.g{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn.g:hover{background:rgba(255,255,255,.14)}
.btn.sm{padding:11px 20px;font-size:14.5px}

/* ---------- 히어로 ---------- */
.hero{position:relative;min-height:var(--hero-h);display:flex;align-items:flex-end;
  background:var(--ink-d);color:#fff;overflow:hidden;isolation:isolate}
.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}

/* 예방책 : .hero 는 flex 컨테이너라 .wrap 이 flex item 이고, flex item 은 기본
   min-width:auto 여서 min-content 아래로 줄지 않는다. 한국어는 word-break:keep-all
   때문에 「전략·크리에이티브·퍼포먼스·미디어가」 같은 긴 어절이 min-content 를 밀어올린다.
   ★2026-08-13 실측 : 지금은 넘치지 않는다(뷰포트 500px 에서 .wrap 500 / 본문 380).
     캡처가 잘려 보였던 건 헤드리스 창 최소폭 때문이지 레이아웃 결함이 아니었다.
     그래도 좁은 폭에서의 안전장치로 남겨 둔다. */
.hero > .wrap{min-width:0}
/* ★한국어는 어절 중간에서 끊기면 실격이다(사장님 규칙).
   이 샘플 body 에는 keep-all 이 없어 390px 에서 「결과를 디자인합 / 니다」로 끊겼다.
   63쪽 전체 타이포를 건드리는 건 이번 범위가 아니므로 «히어로 안에만» 건다.
   ★overflow-wrap:anywhere 를 쓰면 keep-all 이 무력화되어 오히려 어절이 쪼개진다 — 쓰지 말 것. */
.hero .hslide,
.hero .hslide h1,
.hero .hslide .htitle,
.hero .hslide .hlead{word-break:keep-all;overflow-wrap:normal}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-scrim)}
.hero .wrap{padding-top:120px;padding-bottom:96px}
.hero .eyebrow{color:var(--pri-on-dark);}
.hero h1{font-size:clamp(38px,5.6vw,var(--h1-max));max-width:17em}
.hero .hlead{margin-top:26px;max-width:44em;font-size:clamp(16px,1.35vw,19px);line-height:1.72;color:rgba(255,255,255,.9)}
.hbtn{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

/* --- 영상 메인 슬라이더 -------------------------------------------------
   정적 이미지 한 장으로는 차별화가 안 된다(사장님 2026-08-13).
   영상 3본이 돌아가고 카피도 함께 바뀐다. 카피는 지어내지 않고 본문에서 가져왔다.
   ★스크림(--hero-scrim)은 원래 있던 것을 그대로 쓴다 — 검정 농도만 변하는 것이라
     영상 어느 프레임에서도 아래쪽 글자 영역이 .9 까지 덮인다.
   ★영상이 하나도 못 뜨면 hero-img 가 그대로 보인다. 화면이 비지 않는다. */
.hvids{position:absolute;inset:0;z-index:-2}
.hvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease}
.hvid.on{opacity:1}
.hero--slider .hero-img{z-index:-3;transition:opacity .9s ease}
.hero--slider.has-video .hero-img{opacity:0}

/* 슬라이드는 grid 로 «겹쳐» 둔다. absolute 로 띄우면 부모 높이가 0이 되어 무너진다.
   ★grid 아이템은 기본 min-width:auto 라 min-content 아래로 안 줄어든다.
     그대로 두면 모바일에서 본문이 오른쪽으로 삐져나가는데,
     .hero 의 overflow:hidden 이 그걸 «감춰서» 가로 스크롤 검사는 통과한다.
     실제로 이 화면에서 「…나누지 않습니」까지만 보였다. minmax(0,1fr)+min-width:0 이 정답. */
.hslides{display:grid;grid-template-columns:minmax(0,1fr)}
.hslide{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .55s ease,transform .55s ease,visibility .55s}
.hslide.is-on{opacity:1;visibility:visible;transform:none}
.htitle{margin:0;font-size:clamp(38px,5.6vw,var(--h1-max));max-width:17em;
  font-weight:var(--fw-head);letter-spacing:-0.03em;line-height:1.22}

.hctl{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:38px}
.hdots{display:flex;gap:9px}
.hdot{width:34px;height:4px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.36);transition:.25s}
.hdot:hover{background:rgba(255,255,255,.62)}
.hdot.is-on{width:54px;background:var(--acc)}
/* 자동 넘김 정지 — 움직이는 콘텐츠에는 멈출 수단이 있어야 한다(WCAG 2.2.2) */
.hplay{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px;
  border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(0,0,0,.42);
  color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.2s}
.hplay:hover{background:#000;border-color:#fff}
.hplay__i{width:10px;height:12px;flex:0 0 auto;
  background:linear-gradient(90deg,#fff 0 34%,transparent 34% 66%,#fff 66% 100%)}
.hplay[aria-pressed="true"] .hplay__i{width:0;height:0;background:none;
  border-left:11px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
@media (prefers-reduced-motion:reduce){
  .hvid{display:none}
  .hslide{transition:none}
}
@media (max-width:640px){
  .hctl{margin-top:28px;gap:14px}
  .hdot{width:26px}
  .hdot.is-on{width:40px}
}

.phero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--phero-bg);color:var(--phero-fg);border-bottom:1px solid var(--phero-bd)}
.phero .wrap{padding-top:64px;padding-bottom:64px}
.phero.has-img{background:var(--ink-d);color:#fff;border-bottom:0}
.phero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phero.has-img::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-scrim)}
.phero.has-img .wrap{padding-top:104px;padding-bottom:92px}
.phero.has-img h1{color:#fff}
.phero.has-img .hlead{color:rgba(255,255,255,.88)}
.phero.has-img .bc ol{color:rgba(255,255,255,.74)}
.phero.has-img .bc a:hover{color:#fff}
.phero h1{margin-top:20px;font-size:clamp(30px,3.6vw,48px)}
.phero .hlead{margin-top:20px;max-width:52em;font-size:17.5px;line-height:1.75;color:var(--phero-sub)}
.eyebrow{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pri)}

.bc ol{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--phero-sub)}
.bc li+li::before{content:"/";margin-right:8px;opacity:.5}
.bc a:hover{color:var(--pri);text-decoration:underline}

/* ---------- 섹션 ---------- */
.sec{padding:var(--sec-pad) 0}
.sec.alt{background:var(--bg2)}
.sec.dark{background:var(--ink-d);color:#fff}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.dark .lead,.sec.dark p{color:rgba(255,255,255,.82)}
.sec.dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.sec.dark .eyebrow{color:var(--pri-on-dark)}
.sec.dark table th,.sec.dark table td{border-color:rgba(255,255,255,.18)}
.sec.dark thead th{background:rgba(255,255,255,.07);color:#fff}
.sec.dark .ticks li{color:rgba(255,255,255,.85)}
.sec.tight{padding:calc(var(--sec-pad) * .58) 0}
.sec+.sec{border-top:0}
h2{font-size:clamp(25px,2.8vw,var(--h2-max))}
h3{font-size:19px}
.lead{margin-top:18px;max-width:56em;font-size:17.5px;line-height:1.8;color:var(--sub)}
.blk>h2+.lead,.prose>h2+.lead{margin-top:20px}
.prose p{margin-top:18px;font-size:16.5px;line-height:1.9;color:var(--body)}
.prose h2+p{margin-top:22px}
.note{margin-top:14px;font-size:14px;line-height:1.7;color:var(--sub)}
.blk>h2,.prose>h2{position:relative;padding-top:22px}
.blk>h2::before,.prose>h2::before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;background:var(--pri)}

/* ---------- 카드 ---------- */
.cards{display:grid;gap:var(--gap);margin-top:44px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);padding:34px 30px 32px}
.card .ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:20px;
  border-radius:var(--r-ic);background:var(--pri-soft)}
.card .ic svg{width:23px;height:23px;fill:none;stroke:var(--pri);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card .num{display:block;margin-bottom:16px;font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--pri)}
.card h3{font-size:19px}
.card p{margin-top:13px;font-size:15.5px;line-height:1.8;color:var(--body)}
.card .meta{margin-top:14px;padding-top:14px;border-top:1px solid var(--bd);font-size:13.5px;color:var(--sub)}
.card.pf{padding:0;overflow:hidden}
.card.pf .pfi img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card.pf h3{padding:26px 28px 0}
.card.pf .role{padding:0 28px;margin-top:7px;font-size:14px;font-weight:700;color:var(--pri)}
.card.pf p{padding:0 28px 28px}

/* ---------- 링크 그리드(허브) ---------- */
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:44px}
.lcard{display:block;padding:32px 30px;background:var(--surface);border:1px solid var(--bd);
  border-radius:var(--r);transition:border-color .2s,transform .2s}
.lcard:hover{border-color:var(--pri);transform:translateY(-3px)}
.lcard h3{font-size:19px}
.lcard p{margin-top:12px;font-size:15px;line-height:1.78;color:var(--body)}
.go{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-size:14px;font-weight:700;color:var(--pri)}
.go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 지표 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:46px;
  border-top:1px solid var(--bd)}
.stat{padding:36px 4px 0;border-right:1px solid var(--bd)}
.stat:last-child{border-right:0}
.stat .v{display:block;font-size:clamp(34px,3.8vw,50px);font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1}
.stat .v i{font-style:normal;font-size:.42em;font-weight:700;margin-left:5px;color:var(--pri)}
.stat .k{display:block;margin-top:14px;font-size:15px;font-weight:700}
.stat .d{display:block;margin-top:7px;font-size:13.5px;line-height:1.65;color:var(--sub)}
.sec.dark .stat .v{color:#fff}
.sec.dark .stats,.sec.dark .stat{border-color:rgba(255,255,255,.2)}

/* ---------- 좌우 분할 ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,84px);align-items:center}
.split.left .split-t{order:2}
.split.left .split-i{order:1}
.split-i{margin:0}
.split-i img{width:100%;border-radius:var(--r);aspect-ratio:4/3;object-fit:cover}
.split-i figcaption{margin-top:14px;font-size:13.5px;color:var(--sub)}

/* ---------- 체크리스트 ---------- */
.ticks{margin-top:26px;display:grid;gap:14px}
.ticks.two{grid-template-columns:repeat(2,1fr);margin-top:38px;gap:16px 40px}
.ticks li{display:flex;gap:12px;font-size:16px;line-height:1.72;color:var(--body)}
.ticks svg{flex:0 0 20px;width:20px;height:20px;margin-top:3px;fill:none;stroke:var(--pri);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- 스텝 ---------- */
.steps{margin-top:44px;display:grid;gap:0;border-top:1px solid var(--bd)}
.steps li{display:grid;grid-template-columns:96px 1fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--bd)}
.sn{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--pri);line-height:1}
.steps h3{font-size:19px}
.steps p{margin-top:11px;font-size:16px;line-height:1.82;color:var(--body)}
.steps .meta{margin-top:10px;font-size:13.5px;color:var(--sub)}

/* ---------- 연혁 ---------- */
.tl{margin-top:44px;border-left:2px solid var(--bd);padding-left:34px;display:grid;gap:34px}
.tl li{position:relative;display:grid;grid-template-columns:88px 1fr;gap:24px}
.tl li::before{content:"";position:absolute;left:-42px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--pri);box-shadow:0 0 0 4px var(--bg)}
.tl .y{font-size:20px;font-weight:800;color:var(--pri);line-height:1.4}
.tl h3{font-size:17.5px}
.tl p{margin-top:9px;font-size:15.5px;line-height:1.8;color:var(--body)}

/* ---------- 표 ---------- */
.tw{margin-top:40px;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{min-width:560px;font-size:15.5px}
caption{text-align:left}
th,td{padding:16px 18px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top;line-height:1.7}
thead th{background:var(--bg2);font-weight:700;font-size:14.5px;color:var(--ink);border-bottom:2px solid var(--bd-s);
  white-space:nowrap}
tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
tbody td{color:var(--body)}
tbody tr:hover{background:var(--bg2)}

/* ---------- FAQ ---------- */
.faq{margin-top:40px;border-top:1px solid var(--bd)}
.faq details{border-bottom:1px solid var(--bd)}
.faq summary{position:relative;padding:24px 46px 24px 0;font-size:17px;font-weight:700;cursor:pointer;
  list-style:none;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:12px;top:31px;width:11px;height:11px;
  border-right:2px solid var(--pri);border-bottom:2px solid var(--pri);transform:rotate(45deg);transition:.2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:34px}
.faq details>div{padding:0 0 26px}
.faq p{font-size:16px;line-height:1.86;color:var(--body)}

/* ---------- 인용 ---------- */
.pull{margin:0;padding:44px 0 0;border-top:3px solid var(--pri)}
.pull blockquote{margin:0}
.pull p{font-size:clamp(21px,2.3vw,29px);font-weight:700;line-height:1.55;letter-spacing:-.03em}
.pull figcaption{margin-top:22px;font-size:14.5px;font-weight:700;color:var(--sub)}

/* ---------- 갤러리 ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:44px}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.gal figcaption{margin-top:13px;font-size:14px;line-height:1.7;color:var(--sub)}

/* ---------- 콜아웃 ---------- */
.callout{display:flex;gap:20px;padding:30px 32px;background:var(--pri-soft);
  border-left:3px solid var(--pri);border-radius:0 var(--r) var(--r) 0}
.callout .ic{flex:0 0 26px}
.callout svg{width:26px;height:26px;fill:none;stroke:var(--pri);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.callout h3{font-size:17px}
.callout p{margin-top:10px;font-size:15.5px;line-height:1.82;color:var(--body)}

/* ---------- CTA ---------- */
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;
  padding:52px 54px;background:var(--ink-d);color:#fff;border-radius:var(--r)}
.cta h2{font-size:clamp(23px,2.4vw,32px);color:#fff}
.cta h2::before{display:none}
.cta p{margin-top:14px;font-size:16.5px;line-height:1.8;color:rgba(255,255,255,.82);max-width:46em}
.cta-b{display:flex;flex-wrap:wrap;gap:12px}
.cta .btn.s{color:#fff;border-color:rgba(255,255,255,.6)}
.cta .btn.s:hover{background:rgba(255,255,255,.13)}

/* ---------- 푸터 ---------- */
.ft{background:var(--ft-bg);color:var(--ft-fg);border-top:1px solid var(--ft-bd)}
.ft-in{width:100%;max-width:var(--cw);margin:0 auto;padding:78px var(--gut) 46px}
.ft-top{display:grid;grid-template-columns:minmax(260px,1fr) 2.1fr;gap:56px}
.ft-b .lk{font-size:22px;font-weight:800;letter-spacing:-.04em;color:var(--ft-hd)}
.ft-b .le{display:block;margin-top:6px;font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--ft-fg)}
.ft-tag{margin-top:20px;font-size:15px;line-height:1.8;color:var(--ft-fg)}
.ft-cc{margin-top:26px;display:grid;gap:11px}
.ft-cc li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.6;color:var(--ft-hd)}
.ft-cc svg{flex:0 0 17px;width:17px;height:17px;margin-top:2px;fill:none;stroke:var(--pri-on-dark);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ft-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:34px}
.fc h2{font-size:14.5px;font-weight:700;color:var(--ft-hd)}
.fc h2::before{display:none}
.fc ul{margin-top:16px;display:grid;gap:10px}
.fc a{font-size:14px;line-height:1.6;color:var(--ft-fg)}
.fc a:hover{color:var(--pri-on-dark);text-decoration:underline}
.ft-bot{margin-top:52px;padding-top:28px;border-top:1px solid var(--ft-bd)}
.ft-pol{display:flex;flex-wrap:wrap;gap:22px}
.ft-pol a{font-size:13.5px;color:var(--ft-hd)}
.ft-pol a:hover{text-decoration:underline}
.ft-addr{margin-top:18px;font-size:13.5px;line-height:1.75;color:var(--ft-fg)}
.sample-notice{margin-top:14px;padding:13px 16px;border:1px dashed var(--ft-bd);border-radius:var(--r);
  font-size:13px;line-height:1.7;color:var(--ft-hd);background:var(--ft-note)}
.ft-copy{margin-top:16px;font-size:12.5px;color:var(--ft-fg)}

/* ---------- 반응형 ---------- */
@media (max-width:1180px){
  .cards.c4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:0}
  .stat{padding:32px 4px;border-bottom:1px solid var(--bd)}
  .stat:nth-child(2n){border-right:0}
}
@media (max-width:1024px){
  .gnb,.hd-r .tel,.hd-r .btn{display:none}
  .mtog{display:block}
  .mmenu.open{display:block}
  .cards.c3,.lgrid,.gal{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split.left .split-t,.split.left .split-i{order:initial}
  .ft-top{grid-template-columns:1fr;gap:44px}
}
@media (max-width:720px){
  .hero .wrap{padding-top:88px;padding-bottom:66px}
  .cards.c2,.cards.c3,.cards.c4,.lgrid,.gal,.ticks.two{grid-template-columns:1fr}
  .steps li{grid-template-columns:1fr;gap:10px}
  .tl li{grid-template-columns:1fr;gap:6px}
  .cta{padding:38px 26px}
  .card{padding:28px 24px}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0}
  .ft-cols{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 제일기획 문법 : 흑백 + 옐로 1점. 액센트는 면이 아니라 밑줄·모서리로 쓴다 */
.phero{background:#000}
.phero .eyebrow{color:var(--acc)}
.phero .bc ol{color:rgba(255,255,255,.66)}
.phero .bc a:hover{color:var(--acc)}
.blk>h2::before,.prose>h2::before{background:var(--acc);height:6px;width:52px}
.btn.p{background:var(--acc);color:#000;border-color:var(--acc)}   /* 옐로 위 검정 = 16.3:1 */
.btn.p:hover{background:#e6d200;border-color:#e6d200}
.card .ic{background:#000}
.card .ic svg{stroke:var(--acc)}
.card .num{color:#000}
.ticks svg{stroke:#000}
.go{color:#000;border-bottom:2px solid var(--acc);padding-bottom:2px}
.stat .v i{color:#000}
.pull{border-top-color:var(--acc)}
.callout{background:#f7f7f7;border-left-color:var(--acc)}
.callout svg{stroke:#000}
.tl li::before{background:var(--acc);border:2px solid #000}
.tl .y{color:#000}
.sn{color:#000}
.faq summary::after{border-color:#000}
.sec.dark .card .ic{background:var(--acc)}
.sec.dark .card .ic svg{stroke:#000}
.cta .btn.p{background:var(--acc);color:#000;border-color:var(--acc)}
.hero .eyebrow{color:var(--acc)}


/* ===== 참고사 문법 v1 — HDC현대산업개발 실측 (2026-08-16) =========================
   컨테이너 1300 · 히어로 52 : 섹션제목 36 : 본문 16 · 섹션패딩 96/104 · 라운드 0px
   주색 #0E6B60 (hue 172 · 흰 배경 AA 통과) · 오버레이는 rgba(0,0,0,.55) 단색
   되돌리려면 이 블록만 지운다. */
:root{
  --pri:#0E6B60; --pri-d:#0A534A; --pri-soft:#EBF3F2; --acc:#0E6B60; --focus:#0E6B60;
  --cw:1300px; --gut:24px; --bd:#dddddd; --bg2:#F5F5F5;
  --r:0px; --r-btn:0px;
  --hero-scrim:rgba(0,0,0,.55);
  --h1-max:52px; --h2-max:36px;
}
.wrap{max-width:var(--cw);padding:0 var(--gut)}

/* LNB 탭바 */
.lnb{position:sticky;top:64px;z-index:50;background:#fff;border-bottom:1px solid #e5e5e5}
.lnb-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;
  gap:28px;height:56px;overflow-x:auto;scrollbar-width:none}
.lnb-in::-webkit-scrollbar{display:none}
.lnb .ttl{flex:0 0 auto;font-size:15px;font-weight:700;letter-spacing:-.02em;color:#111;
  padding-right:28px;border-right:1px solid #e5e5e5;white-space:nowrap}
.lnb a{flex:0 0 auto;display:inline-flex;align-items:center;height:56px;font-size:14px;
  font-weight:500;color:#666;white-space:nowrap;border-bottom:2px solid transparent}
.lnb a:hover{color:#111}
.lnb a.on{color:#111;font-weight:700;border-bottom-color:#111}

/* 히어로 : 다크 이미지 + 단색 오버레이 */
.phero.has-img,.hero{min-height:520px;display:flex;align-items:center}
.phero.has-img .wrap,.hero .wrap{padding-top:0;padding-bottom:0;width:100%}
.phero .wrap{padding-top:72px;padding-bottom:72px}
.phero h1,.hero h1{margin-top:16px;font-size:clamp(28px,3.2vw,52px);line-height:1.28;
  font-weight:700;letter-spacing:-.02em}
.phero .hlead,.hero .hlead{margin-top:14px;max-width:44em;font-size:clamp(16px,1.5vw,21px);
  line-height:1.55;font-weight:600;letter-spacing:-.02em}
.phero.has-img .hlead,.hero .hlead{color:rgba(255,255,255,.94)}

/* 섹션 리듬 */
.sec{padding:96px 0 104px}
.sec.alt{background:var(--bg2);padding:96px 0 104px}
.sec.tight{padding:69px 0 74px}
.sec+.sec{border-top:0}

/* 제목 2단계 */
h2{font-size:clamp(22px,2.4vw,36px);line-height:1.4;letter-spacing:-.02em}
.blk>h2,.prose>h2{padding-top:0}
.blk>h2::before,.prose>h2::before{display:none}
.eyebrow{margin:0 0 12px;font-size:18px;line-height:1.2;font-weight:700;letter-spacing:-.02em;
  text-transform:none;color:#111}
.phero .eyebrow,.hero .eyebrow,.sec.dark .eyebrow{color:#fff;opacity:.86;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase}
.lead{margin-top:16px;font-size:16px;line-height:1.8;color:#555}
.prose p{font-size:16px;line-height:1.85;color:#333}

/* 카드 */
.card,.lcard{border-radius:0px;border:1px solid var(--bd);background:#fff;padding:30px 28px}
.card:hover,.lcard:hover{border-color:#111}
.card h3{font-size:18px;line-height:1.2;letter-spacing:-.02em}
.card p{margin-top:12px;font-size:16px;line-height:1.75;color:#555}
.card .meta{margin-top:14px;padding-top:14px;font-size:13px;color:#6F7378}
.card .ic{border-radius:0px;width:50px;height:50px;margin-bottom:16px;background:var(--pri-soft)}
.cards{gap:20px;margin-top:34px}
.gal img,.split-i img,.card.pf .pfi img{border-radius:0px}
.tw{margin-top:30px}
.tw table{border-top:2px solid #111}
.pull{border-top:2px solid #111;padding-top:34px}
.stat .v{font-size:clamp(30px,3.2vw,44px);font-weight:700;color:var(--pri)}

/* 하단 CTA */
.cta{border-radius:0;padding:54px 56px;background:#262A2E}
.cta h2{font-size:clamp(20px,2vw,26px);line-height:1.6;font-weight:700}
.cta p{font-size:15px;line-height:1.8}

@media (max-width:1024px){
  .sec,.sec.alt{padding:60px 0 68px}
  .phero.has-img,.hero{min-height:360px}
  .cta{padding:38px 26px}
}
@media (max-width:720px){
  .sec,.sec.alt{padding:46px 0 52px}
  .lnb-in{gap:20px}.lnb .ttl{padding-right:20px}
}

/* ===== 태영 서브 문법 (2026-08-17 실측 적용) — 되돌리려면 이 블록만 지운다 =====
   참고 : 태영건설 서브 4쪽 · _co\_스펙_sl3_taeyoung.md §2 · _co\_ref\t3tay_ceo_0.jpg 외
   ★모든 선택자를 body:not(.home) 으로 한정한다. 메인은 body.home 이라 안 먹는다.
     메인 담당(css/main.css)과 충돌을 막는 유일한 장치다.
   ★서브 HTML 은 한 글자도 안 고쳤다. site.js 도 안 고쳤다.

   화면 문법
     헤더        fixed h90 «투명» + 아래 1px #92979E
     사진 띠     y0 h416 전폭 · 대분류(=.eyebrow) 48/68.57 w400 흰 «가운데» @y165
     ★탭바(LNB) 가 «띠 안쪽 바닥»에 딱 붙는다 : y351 h65 · 폭 1200@189 · N등분 균등
                 비선택 rgba(255,255,255,.7)+검은 글자 / 선택 rgba(0,0,0,.7)+흰 글자
     ★브레드크럼 «없다» — 실측 0건. 링크는 지우지 않고 «화면에서만» 숨긴다(포커스 시 복귀)
     페이지 제목  38/54.29 w300 #111 «가운데» @y486 (=416+70)
     본문        15px · 소제목 28/40 w300 #000 + 짧은 3px 검은 밑줄
     푸터        태영 #828282 는 흰 14px 3.90:1 «AA 미달» → 같은 무채색 #6E6E6E (5.10:1)
   ★띠 오버레이 rgba(0,0,0,.55) 는 «감»이 아니다 — 사진이 순백(255)이어도
     흰 글자 4.76:1 이 보장되는 값으로 계산했다. 서브 25쪽의 띠 사진이 제각각이라
     한 장씩 재는 대신 «최악값»으로 잡았다. 그라데이션 0건, 검은 «단색».
   ========================================================================= */

body:not(.home){
  --p700:#1F5FA8; --p800:#164376;
  --face:#F3F3F3; --tbl:#F4F5F8; --foot:#6E6E6E;
  --pri:#212121; --pri-d:#000000; --pri-soft:#F3F3F3; --acc:#1F5FA8; --focus:#1F5FA8;
  --ink:#212121; --ink-d:#212121; --body:#333333; --sub:#767676;
  --bd:#EBEBEB; --bd-s:#333333; --bg2:#F3F3F3; --line:#EBEBEB;
  --r:0px; --r-btn:0px; --r-ic:0px;
  --cw:1200px; --gut:0px; --hd-h:90px;
  --ft-bg:#6E6E6E; --ft-fg:#F2F2F2; --ft-hd:#ffffff; --ft-bd:rgba(255,255,255,.28);
  --ft-note:rgba(255,255,255,.10);
  --sec-pad:74px;
  position:relative;                     /* 탭바를 띠 바닥에 붙이는 기준 */
  font-family:Pretendard,"Pretendard Variable",-apple-system,BlinkMacSystemFont,
              "Segoe UI",Roboto,"Helvetica Neue","Malgun Gothic","맑은 고딕",Arial,sans-serif;
  font-size:15px; line-height:1.4286; letter-spacing:-.035em; font-weight:400;
  color:#333333; background:#fff;
}
body:not(.home) *{font-family:inherit}
/* 한국어는 어절 중간에서 끊기면 실격 */
body:not(.home),body:not(.home) *{word-break:keep-all !important; overflow-wrap:normal}
/* 태영은 라운드 0px 예외 0건 */
body:not(.home) *,body:not(.home) *::before,body:not(.home) *::after{border-radius:0 !important}
body:not(.home) .rv{opacity:1 !important; transform:none !important}
body:not(.home) :focus-visible{outline:3px solid #1F5FA8; outline-offset:2px}
body:not(.home) .skip{background:#1F5FA8; color:#fff}
body:not(.home) h1,body:not(.home) h2,body:not(.home) h3,body:not(.home) h4{
  letter-spacing:-.035em; font-weight:400}

/* 컨테이너 1200@189 — 여백을 padding 으로 주면 실측이 1248 로 잡힌다 */
body:not(.home) .wrap{
  width:min(1200px,calc(100% - 48px)); max-width:none; margin:0 auto; padding:0}

/* ---------------------------------------------------------------- 헤더 fixed h90 투명 */
body:not(.home) .hd{
  position:fixed; top:0; left:0; right:0; z-index:100; height:90px;
  background:rgba(17,17,17,.94); border-bottom:1px solid rgba(146,151,158,.55);
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
/* ★사진 띠(416) 위에서만 «투명». 띠를 지나면 진한 면이 돼서 흰 글자가 안 사라진다.
   기본값이 «진한 면»이라 스크롤 구동을 못 쓰는 브라우저에서도 사고가 안 난다. */
@supports (animation-timeline:scroll()){
  body:not(.home) .hd{animation:ty-hds linear both;
    animation-timeline:scroll(root block); animation-range:0 330px}
  @keyframes ty-hds{0%,62%{background:rgba(17,17,17,0)}
                    100%{background:rgba(17,17,17,.94)}}
}
body:not(.home) .hd-in{
  position:relative; max-width:none; width:100%; height:90px;
  padding:0 4% 0 16.1%; gap:0; align-items:center}
body:not(.home) .gnb{order:1; flex:0 0 auto}
body:not(.home) .logo{order:2; margin-left:auto; padding-left:26px}   /* ★로고가 «우측» */
body:not(.home) .hd-r{order:3; gap:14px; padding-left:22px}
body:not(.home) .gnb-l{gap:0}
body:not(.home) .gi>a{
  display:flex; align-items:center; justify-content:center; width:120px; height:90px;
  padding:0; font-size:17px; font-weight:400; letter-spacing:-.01em; color:#fff;
  border-bottom:0}
body:not(.home) .gi>a:hover,body:not(.home) .gi>a.on{
  color:#fff; border-bottom:0; text-decoration:underline;
  text-underline-offset:8px; text-decoration-thickness:1px}
body:not(.home) .logo .lk{font-size:19px; font-weight:700; letter-spacing:-.04em; color:#fff}
body:not(.home) .logo .le{margin-top:4px; font-size:10px; font-weight:500;
  letter-spacing:.18em; color:#fff}
body:not(.home) .tel{font-size:15px; font-weight:400; color:#fff}
body:not(.home) .tel svg{stroke:#fff}
body:not(.home) .hd-r .btn.p,body:not(.home) .hd-r .btn.sm{
  height:32px; min-height:32px; padding:0 14px; font-size:14px; font-weight:400;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.85)}
body:not(.home) .hd-r .btn.p:hover{background:rgba(255,255,255,.16); border-color:#fff}
body:not(.home) .mtog{
  display:block; position:absolute; left:12%; top:50%; transform:translateY(-50%);
  width:38px; height:38px; padding:6px 0}
body:not(.home) .mtog span{height:2px; background:#fff; margin:6px 0}
body:not(.home) .dd{
  top:90px; padding:10px 0; background:rgba(17,17,17,.96); border:0; box-shadow:none;
  min-width:200px}
body:not(.home) .dd a{color:#EDEDED; font-size:14.5px; padding:9px 20px}
body:not(.home) .dd a:hover{background:rgba(255,255,255,.12); color:#fff}
body:not(.home) .mmenu{
  position:relative; z-index:60; background:rgba(17,17,17,.97); border-bottom:0;
  padding:16px 0 34px; color:#fff}
body:not(.home) .mmenu.open{display:block}
body:not(.home) .mmenu>ul{
  width:min(1200px,calc(100% - 48px)); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 24px}
body:not(.home) .mmenu .mg{
  border-bottom:1px solid rgba(255,255,255,.28); color:#fff; font-size:16px;
  font-weight:400; padding:12px 0}
body:not(.home) .mmenu ul ul a{color:#EDEDED; font-size:14px; padding:6px 0 6px 10px}

/* ---------------------------------------------------------------- 사진 띠 416 */
body:not(.home) .phero{
  position:relative; padding:416px 0 44px; margin:0; overflow:visible;
  background:#fff; color:#111; border-bottom:0; isolation:auto}
body:not(.home) .phero.has-img{background:#fff}
body:not(.home) .phero-img{
  position:absolute; top:0; left:0; width:100%; height:416px; object-fit:cover;
  z-index:0}
body:not(.home) .phero.has-img::after,body:not(.home) .phero::after{
  content:""; position:absolute; top:0; left:0; right:0; height:416px;
  background:rgba(0,0,0,.55); z-index:1}       /* ★검은 «단색» — 최악값 계산 */
body:not(.home) .phero>.wrap{position:static; padding:0}
/* 대분류 = .eyebrow 를 띠 한가운데 48px 흰 글자로 */
body:not(.home) .phero .eyebrow{
  position:absolute; top:158px; left:0; right:0; z-index:3; margin:0;
  text-align:center; font-size:48px; line-height:1.4286; font-weight:400;
  letter-spacing:normal; text-transform:none; color:#fff}
/* ★브레드크럼 : 태영은 «없다». 링크는 지우지 않고 화면에서만 감춘다(포커스 시 복귀) */
body:not(.home) .phero .bc{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; z-index:4}
body:not(.home) .phero .bc:focus-within{
  position:absolute; top:96px; left:24px; width:auto; height:auto; clip:auto;
  padding:8px 12px; background:#111; color:#fff}
body:not(.home) .phero .bc:focus-within ol{color:#fff; font-size:13px}
/* 페이지 제목 = 띠 «바로 아래» 가운데 38 w300 #111 */
body:not(.home) .phero h1{
  margin:70px auto 0; max-width:22em; text-align:center;
  font-size:38px; line-height:1.4286; font-weight:300; letter-spacing:-.035em; color:#111}
body:not(.home) .phero.has-img h1{color:#111}
body:not(.home) .phero .hlead,body:not(.home) .phero.has-img .hlead{
  margin:22px auto 0; max-width:50em; text-align:center;
  font-size:18px; line-height:1.4286; font-weight:400; color:#333}

/* ---------------------------------------------------------------- 탭바 : 띠 «바닥»에 */
body:not(.home) .lnb{
  position:absolute; top:351px; left:50%; transform:translateX(-50%);
  width:min(1200px,calc(100% - 48px)); height:65px; z-index:5;
  background:transparent; border-bottom:0}
body:not(.home) .lnb-in{
  max-width:none; width:100%; height:65px; padding:0; gap:0; overflow:visible;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr)}
/* site.js 가 넣는 그룹 이름표는 «띠 대분류»와 겹친다 → 화면에서만 숨긴다(nav 의
   aria-label 이 같은 이름을 이미 읽어 준다) */
body:not(.home) .lnb .ttl{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; padding:0; border:0}
body:not(.home) .lnb a{
  display:flex; align-items:center; justify-content:center; height:65px; flex:none;
  font-size:20px; line-height:1.4286; font-weight:300; letter-spacing:-.035em;
  color:#111; background:rgba(255,255,255,.7);
  border-right:1px solid rgba(255,255,255,.45); border-bottom:0; white-space:nowrap}
body:not(.home) .lnb a:last-child{border-right:0}
body:not(.home) .lnb a:hover{background:rgba(255,255,255,.86); color:#111}
body:not(.home) .lnb a.on{
  background:rgba(0,0,0,.7); color:#fff; font-weight:400; border-bottom:0}

/* ---------------------------------------------------------------- 섹션 리듬 */
body:not(.home) .sec{padding:60px 0 64px; background:#fff}
body:not(.home) .sec.alt{background:var(--face); padding:60px 0 64px}
body:not(.home) .sec.tight{padding:42px 0 46px}
body:not(.home) .sec.dark{background:#212121; padding:60px 0 64px}
body:not(.home) .sec+.sec{border-top:0}

/* 소제목 28/40 w300 + 짧은 3px 검은 밑줄 (태영 서브 블록 ①) */
body:not(.home) h2{
  position:relative; font-size:28px; line-height:1.4286; font-weight:300;
  letter-spacing:-.035em; color:#000; padding:0 0 14px}
body:not(.home) .blk>h2,body:not(.home) .prose>h2{padding-top:0; padding-bottom:14px}
body:not(.home) .blk>h2::before,body:not(.home) .prose>h2::before{
  content:""; display:block; position:absolute; left:0; top:auto; bottom:0;
  width:40px; height:3px; background:#000}
body:not(.home) .sec.dark h2{color:#fff}
body:not(.home) .sec.dark .blk>h2::before,body:not(.home) .sec.dark .prose>h2::before{
  background:#fff}
body:not(.home) h3{font-size:20px; line-height:1.4286; font-weight:400; color:#111}
body:not(.home) .eyebrow{
  margin:0 0 10px; font-size:14px; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--p700)}
body:not(.home) .lead{
  margin-top:16px; max-width:52em; font-size:18px; line-height:1.4286; color:#333}
body:not(.home) .prose p{margin-top:16px; font-size:15px; line-height:1.4286; color:#333}
body:not(.home) .prose{width:min(980px,100%)}        /* 안쪽 좁은 단 980 */
body:not(.home) .note{margin-top:14px; font-size:14px; line-height:1.4286; color:#767676}

/* ---------------------------------------------------------------- 블록 */
body:not(.home) .card,body:not(.home) .lcard{
  padding:30px 28px; background:#fff; border:1px solid var(--line)}
body:not(.home) .card:hover,body:not(.home) .lcard:hover{border-color:#111; transform:none}
body:not(.home) .card h3,body:not(.home) .lcard h3{font-size:20px; font-weight:400}
body:not(.home) .card p,body:not(.home) .lcard p{
  margin-top:12px; font-size:15px; line-height:1.4286; color:#333}
body:not(.home) .card .ic{
  width:46px; height:46px; margin-bottom:16px; background:transparent;
  border:1px solid var(--line)}
body:not(.home) .card .ic svg{stroke:var(--p700)}
body:not(.home) .card .num{color:var(--p700)}
body:not(.home) .cards,body:not(.home) .lgrid,body:not(.home) .gal{gap:10px; margin-top:34px}
body:not(.home) .go{
  color:#111; border-bottom:1px solid var(--p700); padding-bottom:2px; font-weight:400}
body:not(.home) .go svg{stroke:var(--p700)}
body:not(.home) .ticks li{font-size:15px; line-height:1.4286; color:#333}
body:not(.home) .ticks svg{stroke:var(--p700)}
body:not(.home) .split-i img,body:not(.home) .gal img,body:not(.home) .card.pf .pfi img{
  border-radius:0}
body:not(.home) .gal figcaption{font-size:14px; color:#767676}

/* 표 (태영 서브 블록 ④) */
body:not(.home) .tw{margin-top:30px}
body:not(.home) .tw table{border-top:1px solid #333; font-size:15px}
body:not(.home) thead th{
  background:var(--tbl); font-size:15px; font-weight:500; color:#111;
  border-bottom:1px solid var(--line)}
body:not(.home) th,body:not(.home) td{
  padding:15px 18px; font-size:15px; line-height:1.4286; border-bottom:1px solid var(--line)}
body:not(.home) tbody th{font-weight:500; color:#111}
body:not(.home) tbody tr:hover{background:#fff}
body:not(.home) .sec.dark table th,body:not(.home) .sec.dark table td{
  border-color:rgba(255,255,255,.25)}
/* ★다크 위 표는 «흰 면 + 진한 글자» */
body:not(.home) .sec.dark thead th{background:#fff; color:#111}

/* 스텝 · 연혁 · FAQ · 인용 · 콜아웃 */
body:not(.home) .steps{border-top:1px solid #333; margin-top:34px}
body:not(.home) .steps li{border-bottom:1px solid var(--line); padding:26px 0}
body:not(.home) .sn{font-size:34px; font-weight:300; color:var(--p700)}
body:not(.home) .steps h3{font-size:20px; font-weight:400}
body:not(.home) .steps p{font-size:15px; line-height:1.4286; color:#333}
body:not(.home) .tl{border-left:1px solid var(--line)}
body:not(.home) .tl li::before{background:var(--p700); box-shadow:none}
body:not(.home) .tl .y{color:var(--p700); font-weight:400}
body:not(.home) .tl h3{font-size:18px; font-weight:400}
body:not(.home) .tl p{font-size:15px; line-height:1.4286}
body:not(.home) .faq{border-top:1px solid #333; margin-top:30px}
body:not(.home) .faq summary{font-size:17px; font-weight:400; padding:22px 46px 22px 0}
body:not(.home) .faq summary::after{border-color:var(--p700)}
body:not(.home) .faq p{font-size:15px; line-height:1.4286}
/* 다크 인용 배너 (태영 서브 블록 ②) */
body:not(.home) .pull{
  margin-top:0; padding:52px 56px; background:#212121; border-top:0;
  display:flex; flex-direction:column; align-items:center; text-align:center}
body:not(.home) .pull blockquote{max-width:26em}
body:not(.home) .pull p{
  font-size:32px; line-height:1.25; font-weight:400; letter-spacing:-.035em; color:#fff}
body:not(.home) .pull figcaption{
  position:relative; margin-top:38px; padding-top:26px; font-size:15px;
  font-weight:400; color:#EDEDED}
body:not(.home) .pull figcaption::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:40px; height:1px; background:#fff}
body:not(.home) .callout{
  background:var(--face); border-left:3px solid var(--p700); padding:26px 30px}
body:not(.home) .callout svg{stroke:var(--p700)}
body:not(.home) .callout p{font-size:15px; line-height:1.4286}
body:not(.home) .stat .v{font-size:38px; font-weight:400; color:#222}
body:not(.home) .stat .v i{color:var(--p700)}
body:not(.home) .stats{border-top:1px solid #333}
body:not(.home) .stat{border-right:1px solid var(--line)}

/* 버튼 — 전부 1px 아웃라인 · 채운 것은 .btn.p 하나 */
body:not(.home) .btn{
  height:46px; min-height:46px; padding:0 28px; font-size:15px; font-weight:400;
  border:1px solid #3A3A3A; background:transparent; color:#3A3A3A}
body:not(.home) .btn.s:hover{background:#3A3A3A; color:#fff}
body:not(.home) .btn.p{background:var(--p700); border-color:var(--p700); color:#fff}
body:not(.home) .btn.p:hover{background:var(--p800); border-color:var(--p800)}
body:not(.home) .btn.g{background:transparent; color:#fff; border-color:rgba(255,255,255,.85)}

/* 하단 CTA */
body:not(.home) .cta{padding:40px 46px; background:#212121; color:#fff}
body:not(.home) .cta h2{font-size:26px; font-weight:400; color:#fff; padding-bottom:0}
body:not(.home) .cta h2::before{display:none}
body:not(.home) .cta p{font-size:15px; line-height:1.4286; color:#EDEDED}
body:not(.home) .cta .btn.p{background:#fff; border-color:#fff; color:#111}
body:not(.home) .cta .btn.p:hover{background:#EDEDED; border-color:#EDEDED}

/* ---------------------------------------------------------------- 푸터 */
body:not(.home) .ft{background:var(--foot); border-top:0; color:#F2F2F2}
body:not(.home) .ft-in{
  width:min(1200px,calc(100% - 48px)); margin:0 auto; padding:40px 0 26px}
body:not(.home) .ft-top{grid-template-columns:minmax(220px,1fr) 2.9fr; gap:32px}
body:not(.home) .ft-b .lk{font-size:19px; font-weight:700; color:#fff}
body:not(.home) .ft-b .le{font-size:10px; color:#F2F2F2}
body:not(.home) .ft-tag{margin-top:14px; font-size:14px; line-height:1.6; color:#F2F2F2}
body:not(.home) .ft-cc{margin-top:14px; gap:6px}
body:not(.home) .ft-cc li{font-size:14px; color:#fff}
body:not(.home) .ft-cc svg{stroke:#fff}
body:not(.home) .ft-cols{grid-template-columns:repeat(8,minmax(0,1fr)); gap:14px}
body:not(.home) .fc h2{font-size:14px; font-weight:500; color:#fff; padding:0}
body:not(.home) .fc h2::before{display:none}
body:not(.home) .fc ul{margin-top:8px; gap:4px}
body:not(.home) .fc a{font-size:13px; line-height:1.45; color:#F2F2F2}
body:not(.home) .fc a:hover{color:#fff; text-decoration:underline}
body:not(.home) .ft-bot{margin-top:26px; padding-top:16px; border-top:1px solid var(--ft-bd)}
body:not(.home) .ft-pol a{font-size:13px; color:#fff}
body:not(.home) .ft-addr{margin-top:12px; font-size:13px; line-height:1.6; color:#F2F2F2}
body:not(.home) .sample-notice{
  margin-top:12px; padding:11px 14px; border:1px dashed var(--ft-bd);
  background:var(--ft-note); font-size:13px; line-height:1.6; color:#fff}
body:not(.home) .ft-copy{margin-top:12px; font-size:12.5px; color:#F2F2F2}

/* ---------------------------------------------------------------- 반응형 */
@media (max-width:1400px){
  body:not(.home) .hd-in{padding:0 3% 0 8%}
  body:not(.home) .mtog{left:3.4%}
}
@media (max-width:1100px){
  body:not(.home) .lnb a{font-size:16px}
  body:not(.home) .phero .eyebrow{font-size:38px}
  body:not(.home) .phero h1{font-size:30px}
}
@media (max-width:1024px){
  body:not(.home) .hd{height:72px}
  body:not(.home) .hd-in{height:72px; padding:0 20px 0 74px}
  body:not(.home) .gnb,body:not(.home) .hd-r .tel,body:not(.home) .hd-r .btn{display:none}
  body:not(.home) .mtog{left:18px}
  body:not(.home) .logo{margin-left:0; padding-left:0}
  body:not(.home) .mmenu>ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* ★탭바는 좁은 화면에서도 «띠 바닥»에 그대로 둔다. 흐름으로 되돌리면 DOM 순서 때문에
     사진 띠 «위»로 올라간다(실제로 그렇게 깨졌다). 칸만 균등분할 → 자연폭+가로스크롤로. */
  body:not(.home) .phero{padding-top:300px}
  body:not(.home) .phero-img,
  body:not(.home) .phero.has-img::after,body:not(.home) .phero::after{height:300px}
  body:not(.home) .phero .eyebrow{top:132px}
  body:not(.home) .lnb{top:244px; height:56px}
  body:not(.home) .lnb-in{
    height:56px; display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  body:not(.home) .lnb-in::-webkit-scrollbar{display:none}
  body:not(.home) .lnb a{height:56px; flex:0 0 auto; padding:0 20px; font-size:16px}
  body:not(.home) .sec,body:not(.home) .sec.alt,body:not(.home) .sec.dark{padding:52px 0 56px}
  body:not(.home) .pull{padding:44px 26px}
  body:not(.home) .pull p{font-size:24px}
  body:not(.home) .cta{padding:34px 24px}
  body:not(.home) .ft-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  body:not(.home) .phero{padding-top:240px; padding-bottom:34px}
  body:not(.home) .phero-img,
  body:not(.home) .phero.has-img::after,body:not(.home) .phero::after{height:240px}
  body:not(.home) .phero .eyebrow{top:96px; font-size:30px}
  body:not(.home) .phero h1{margin-top:44px; font-size:25px}
  body:not(.home) .phero .hlead{font-size:16px}
  body:not(.home) .lnb{top:190px; height:50px}
  body:not(.home) .lnb-in{height:50px}
  body:not(.home) .lnb a{font-size:15px; height:50px; padding:0 16px}
  body:not(.home) h2{font-size:22px}
  body:not(.home) .pull p{font-size:20px}
  body:not(.home) .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}