/* =========================================================
   경영주치의 랜딩 초안
   시안: 경영주치의.jpg (1920 x 12200)
   ========================================================= */

/* 폰트 자체 호스팅.
   이 사이트에 실제로 쓰인 글자만 남긴 Pretendard 서브셋입니다 (330KB -> 105KB).
   ※ 화면 문구를 새로 추가하거나 바꾸면 tools/make_font_subset.py 를 다시 돌려
     assets/fonts/PretendardVariable.subset.woff2 를 갱신해야 합니다.
     (갱신하지 않으면 새 글자만 시스템 기본 글꼴로 나옵니다) */
@font-face{
  font-family:"Pretendard Variable";
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url("../fonts/PretendardVariable.subset.woff2") format("woff2-variations");
}

:root{
  --navy:#030f1d;
  --navy-2:#09182b;
  --navy-3:#0d1c30;
  --ink:#161415;
  --blue:#008cff;
  --blue-deep:#054680;
  --blue-soft:#3ba3ff;
  /* 로고에서 뽑은 보조색. 파랑=행동(버튼·링크·활성), 골드=서수·라벨·장식 으로 역할을 나눈다 */
  --gold:#c8973a;
  /* 밝은 배경 위 '글자'는 원래 골드·파랑이 대비가 모자란다 (2.6 / 3.4).
     테두리·아이콘은 기존 값을 그대로 쓰고, 글자만 아래 값을 쓴다 (2026-08-15 측정) */
  --gold-ink:#8f6318;
  --blue-ink:#0b6fd0;
  --txt-mute:#616c7b;
  --gold-soft:#e0b05c;
  --gold-dim:rgba(200,151,58,.14);
  --white:#fff;
  --grey:#f6f7f9;
  --line:#e6e9ee;
  --txt:#111820;
  --txt-sub:#5b6675;
  /* 시안(1920 기준) 본문 폭 1420 = 74%, 섹션 상하 여백 실측 평균 181px = 9.4vw */
  --wrap:1420px;
  --pad:clamp(70px,9.6vw,190px);
  --radius:14px;
  --shadow:0 18px 50px rgba(3,15,29,.10);
  --ease:cubic-bezier(.22,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  color:var(--txt);
  background:var(--white);
  line-height:1.62;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
button,input{font:inherit;color:inherit}

.container{width:min(var(--wrap),74%);margin:0 auto}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:10px 16px}
.skip:focus{left:0}

/* ================= 등장 애니메이션 ================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ================= 헤더 ================= */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s;
}
/* 히어로가 밝은 낮 사진이라 최상단에서 글자가 묻힌다 (390px 실측 대비 4.31).
   스크롤 전에는 옅은 그늘 한 겹만 깔고, 스크롤하면 원래대로 단색으로 바뀐다 */
.header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,15,29,.62) 0%,rgba(3,15,29,0) 100%);
  transition:opacity .35s var(--ease);
}
.header.is-solid::before{opacity:0}
.header__inner{position:relative}
.header.is-solid{background:rgba(3,15,29,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.07)}
.header__inner{display:flex;align-items:center;gap:40px;height:76px}
.logo{
  display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:800;letter-spacing:-.035em;color:#fff;white-space:nowrap;
}
.logo__mark{width:32px;height:32px;flex:0 0 auto}
.nav{display:flex;align-items:center;gap:34px;margin-left:auto}
.nav__link{
  position:relative;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.82);
  padding:6px 0;transition:color .2s;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--blue);
  transition:right .28s var(--ease);
}
.nav__link:hover{color:#fff}
.nav__link:hover::after,.nav__link.is-active::after{right:0}

.burger{display:none;margin-left:auto;width:44px;height:44px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;height:2px;background:#fff;margin:5px 0;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ================= 히어로 ================= */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:#000;overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;
  background:url("../img/hero.jpg") center 42%/cover no-repeat;
  background-image:image-set(url("../img/hero.webp") type("image/webp"),url("../img/hero.jpg") type("image/jpeg"));
  transform:scale(1.04);
  animation:heroIn 1.6s var(--ease) both;
}
/* 4K·초광폭 화면에서는 더 큰 소스로 교체 */
@media (min-width:2100px){
  .hero__bg{background-image:image-set(url("../img/hero-4k.webp") type("image/webp"),url("../img/hero.jpg") type("image/jpeg"))}
}
/* 겹칠은 히어로 사진 밝기에 맞춰 잡는다. 지금 사진은 낮에 찍은 밝은 항공이라
   야경 때 쓰던 값(가운데 .62)을 그대로 두면 사진이 통째로 가라앉는다.
   가운데는 옅게, 글자가 앉는 위아래만 눌러 대비를 만든다 (2026-08-15) */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 46% at 50% 44%,rgba(3,15,29,.46) 0%,rgba(3,15,29,.20) 62%,rgba(3,15,29,0) 100%),radial-gradient(120% 84% at 50% 45%,rgba(0,0,0,.06) 0%,rgba(0,0,0,.20) 72%,rgba(3,15,29,.52) 100%),
    linear-gradient(180deg,rgba(3,15,29,.62) 0%,rgba(3,15,29,.10) 26%,rgba(3,15,29,.10) 58%,rgba(3,15,29,.88) 100%);
}
@keyframes heroIn{from{transform:scale(1.12);opacity:.35}to{transform:scale(1.04);opacity:1}}
.hero__inner{position:relative;text-align:center;padding:120px 24px 140px}
.hero__title{
  color:#fff;font-weight:800;letter-spacing:-.035em;line-height:1.28;
  font-size:clamp(28px,3.3vw,64px);
  text-shadow:0 4px 30px rgba(0,0,0,.5);
}
.hero__title em{font-style:normal;color:var(--blue-soft)}
.hero__lead{
  margin-top:clamp(20px,1.9vw,36px);color:rgba(255,255,255,.9);font-size:clamp(14px,1.2vw,23px);
  line-height:1.85;text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.hero__cta{margin-top:clamp(34px,3.3vw,62px);display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.hero__scroll{
  position:absolute;left:50%;bottom:34px;width:1px;height:52px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.7));
  animation:scrollHint 2.1s var(--ease) infinite;
}
@keyframes scrollHint{0%{opacity:0;transform:translateY(-14px) scaleY(.5)}45%{opacity:1}100%{opacity:0;transform:translateY(14px) scaleY(1)}}

/* ================= 버튼 ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:clamp(52px,3.9vw,75px);padding:0 clamp(28px,2.4vw,46px);border-radius:8px;border:1px solid transparent;
  font-size:clamp(19px,1.3vw,23px);font-weight:700;letter-spacing:-.02em;cursor:pointer;
  transition:transform .22s var(--ease),background .22s,box-shadow .22s,border-color .22s;
}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(0,140,255,.28)}
.btn--primary:hover{background:#0a7ce0;transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,140,255,.36)}
.btn--ghost{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.btn--block{width:100%;height:60px;margin-top:26px}

/* ================= 섹션 공통 ================= */
.sec{padding:var(--pad) 0}
.sec--navy{background:var(--navy);color:#fff}
.sec--navy2{background:var(--navy-2);color:#fff}
.sec--light{background:var(--white);color:var(--txt)}
.sec--soft{background:var(--grey);color:var(--txt)}
.sec--ink{background:var(--ink);color:#fff}

.eyebrow{font-size:clamp(12.5px,0.94vw,17px);font-weight:700;letter-spacing:.02em;color:var(--gold-ink);margin-bottom:clamp(6px,0.6vw,11px)}
.h2{
  font-size:clamp(25px,3.13vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1.34;color:#fff;
}
.h2 em{font-style:normal;color:var(--blue)}
.h2--dark{color:var(--txt)}
.h2--left{text-align:left}
.h2--center{text-align:center}

.body{margin-top:clamp(22px,2vw,38px);font-size:clamp(14px,1.15vw,22px);line-height:1.95;color:var(--txt-sub)}
.sec--ink .body,.sec--navy .body{color:rgba(255,255,255,.78)}
.body--center{text-align:center}
.body--left{text-align:left}

/* 사진이 깔리는 섹션 공통 */
.sec--photo,.band--photo{position:relative;overflow:hidden}
.sec--photo>.container,.band--photo>.container{position:relative;z-index:1}
.sec__bg,.band__bg{
  position:absolute;inset:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.sec__bg::after,.band__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,15,29,.9) 0%,rgba(3,15,29,.8) 45%,rgba(3,15,29,.94) 100%);
}
.band--photo .band__bg{
  background-image:url("../img/band-city.jpg");
  background-image:image-set(url("../img/band-city.webp") type("image/webp"),url("../img/band-city.jpg") type("image/jpeg"));
}
.band--photo .band__bg::after{
  background:linear-gradient(180deg,rgba(3,15,29,.86) 0%,rgba(3,15,29,.74) 42%,rgba(3,15,29,.92) 100%);
}
.sec--photo .sec__bg{
  background-image:url("../img/form-city.jpg");
  background-image:image-set(url("../img/form-city.webp") type("image/webp"),url("../img/form-city.jpg") type("image/jpeg"));
}

/* 접근 방식 도입부: 글 + 사진 좌우 분할 */
.lead2{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,3.6vw,72px);align-items:center}
.lead2__fig{margin:0;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.lead2__fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
@media (max-width:900px){
  .lead2{grid-template-columns:1fr;gap:26px}
  .lead2__fig{order:-1}
}

/* 접근 방식 안에 이어지는 3대 핵심 가치 */
.approach__split{
  margin-top:clamp(48px,4.6vw,92px);padding-top:clamp(44px,4.2vw,84px);
  border-top:1px solid var(--line);
}
.approach__split .h2{margin-bottom:0}

/* ================= 고민 리스트 ================= */
/* 섹션 안의 모든 블록은 제목과 같은 왼쪽 기준선에서 시작한다.
   가운데 정렬은 사진을 깐 선언 성격의 구간(히어로·선언 배너·최종 CTA)에서만 쓴다. */
.worries{margin-top:clamp(40px,4vw,74px);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.1vw,18px)}
.worry{
  display:flex;align-items:flex-start;gap:clamp(12px,1.25vw,24px);
  padding:clamp(18px,1.55vw,30px) clamp(20px,2.1vw,40px);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  transition:border-color .3s,transform .3s var(--ease),background .3s;
}
.worry__no{color:var(--gold-soft);font-weight:800;font-size:clamp(13px,1.12vw,21px);flex:none;line-height:1.7}
.worry__txt{font-size:clamp(14.5px,1.17vw,22px);color:rgba(255,255,255,.92);line-height:1.7}
.worries__closing{
  margin-top:clamp(42px,4.6vw,88px);font-size:clamp(16px,1.55vw,30px);
  font-weight:700;line-height:1.85;letter-spacing:-.03em;color:#fff;
}

/* ================= 4단계 ================= */
.steps{margin-top:clamp(46px,4.8vw,92px)}
.steps__list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.2vw,22px)}
.step{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(24px,2.2vw,40px) clamp(20px,1.8vw,32px) clamp(24px,2.2vw,38px);
  background:var(--grey);border:1px solid var(--line);border-radius:12px;
}
/* 단계 사이 진행 화살표 */
.step:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:calc(clamp(12px,1.2vw,22px) / -2);
  width:9px;height:9px;margin-top:-5px;margin-right:-4px;
  border-top:2px solid rgba(200,151,58,.75);border-right:2px solid rgba(200,151,58,.75);
  transform:rotate(45deg);
}
.step__icon{
  width:clamp(42px,3.1vw,58px);height:clamp(42px,3.1vw,58px);border-radius:12px;
  background:#fff;border:1px solid rgba(200,151,58,.45);display:grid;place-items:center;
}
.step__icon svg{width:52%;height:52%;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.step__dot{
  margin-top:clamp(14px,1.2vw,22px);
  color:var(--gold-ink);font-weight:800;font-size:clamp(13px,0.97vw,18px);letter-spacing:.04em;
}
.step__label{
  margin-top:clamp(5px,0.5vw,9px);
  font-size:clamp(17px,1.42vw,27px);font-weight:800;letter-spacing:-.035em;color:var(--txt);
}
.step__desc{
  margin-top:clamp(9px,0.8vw,15px);
  font-size:clamp(12.5px,0.9vw,17px);line-height:1.7;color:var(--txt-sub);
}

/* ================= 서비스 카드 ================= */
.cards{margin-top:clamp(44px,5.2vw,100px);display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{
  position:relative;
  background:#fff;color:var(--txt);border-radius:var(--radius);overflow:hidden;
  padding:clamp(30px,2.4vw,46px) clamp(22px,2vw,38px) clamp(24px,2vw,38px);display:flex;flex-direction:column;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease);
}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(0,0,0,.45)}
.card__fig{margin:calc(-1 * clamp(30px,2.4vw,46px)) calc(-1 * clamp(22px,2vw,38px)) 0;position:relative;overflow:hidden}
.card__fig img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--ease)}
.card__fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,15,29,.06),rgba(3,15,29,.22))}
.card:hover .card__fig img{transform:scale(1.06)}
/* 사진 경계에 걸치는 칩. 밝은 사진 위에서도 읽히도록 불투명 흰 바탕을 쓴다
   (반투명 골드였을 때 건물·회의실 사진 위에서 아이콘이 묻혔음) */
.card__icon{
  margin-top:clamp(-34px,-2.2vw,-26px);position:relative;z-index:1;
  background:#fff;box-shadow:0 8px 20px rgba(3,15,29,.22);
  width:clamp(46px,3.4vw,64px);height:clamp(46px,3.4vw,64px);border-radius:12px;
  display:grid;place-items:center;margin-bottom:clamp(16px,1.3vw,26px);
  border:1px solid rgba(200,151,58,.55);
}
.card__icon svg{width:56%;height:56%;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card__no{color:var(--gold-ink);font-weight:800;font-size:clamp(15px,1.18vw,22px);letter-spacing:.02em}
.card__title{margin-top:clamp(12px,0.85vw,16px);font-size:clamp(17px,1.32vw,25.5px);font-weight:800;letter-spacing:-.03em}
/* 줄바꿈 뒤에 한 단어만 남는 것을 막는다 (미지원 브라우저는 무시하고 지금처럼 흐른다) */
.card__lead{margin-top:clamp(12px,0.9vw,17px);font-size:clamp(14.5px,1.06vw,20.4px);font-weight:600;line-height:1.72;color:#1a2430;text-wrap:balance}
.card__desc{margin-top:clamp(12px,0.9vw,17px);font-size:clamp(12.5px,0.85vw,16.3px);line-height:1.72;color:#6b7686;text-wrap:pretty}
.card__more{
  margin-top:auto;padding-top:clamp(22px,1.6vw,31px);color:var(--blue-ink);font-size:clamp(12.5px,0.89vw,17px);font-weight:700;
  display:inline-flex;align-items:center;gap:10px;
}
/* 카드 어디를 눌러도 상세로 가도록 링크 영역을 카드 전체로 넓힌다 */
.card__more::after{content:"";position:absolute;inset:0;z-index:2}
.card__more span{transition:transform .25s var(--ease)}
.card__more:hover span{transform:translateX(6px)}

/* ================= 컨설턴트 ================= */
.profile{margin-top:clamp(38px,4.6vw,88px);display:grid;grid-template-columns:clamp(280px,24vw,360px) 1fr;gap:clamp(40px,4vw,72px);align-items:stretch}
.profile__photo{overflow:hidden;border-radius:8px;background:var(--grey);min-height:100%}
.profile__photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.profile__title{font-size:clamp(20px,2.15vw,41px);font-weight:800;letter-spacing:-.035em;line-height:1.42}
.profile__txt{margin-top:clamp(20px,1.8vw,34px);font-size:clamp(15px,1.14vw,22px);line-height:1.95;color:var(--txt-sub)}
.tags{margin-top:clamp(26px,2.4vw,44px);display:flex;flex-wrap:wrap;gap:8px}
/* 사이트의 다른 칩(협업 분야·서비스 태그)과 같은 알약 형태로 맞춘다 */
.tag{
  background:var(--navy);color:#fff;font-size:clamp(12.5px,0.83vw,16px);font-weight:600;
  padding:clamp(8px,0.7vw,13px) clamp(13px,1.1vw,21px);border-radius:100px;letter-spacing:-.02em;
  white-space:nowrap;
}

/* ================= 선언 배너 ================= */
.band{background:var(--navy);padding:clamp(64px,9.8vw,190px) 0;text-align:center}
.band__txt{color:#fff;font-size:clamp(19px,2.35vw,45px);font-weight:800;letter-spacing:-.035em;line-height:1.5}

/* ================= 프로세스 ================= */
.steplist{margin-top:clamp(44px,5vw,96px);display:flex;flex-direction:column;gap:12px;position:relative}
.steprow{
  position:relative;
  display:grid;grid-template-columns:112px 190px 1fr;align-items:center;gap:0 clamp(16px,1.4vw,27px);
  padding:clamp(20px,1.7vw,32px) clamp(22px,2.1vw,40px);border:1px solid rgba(255,255,255,.13);border-radius:8px;
  background:rgba(255,255,255,.025);
}
.steprow__no{color:var(--gold-soft);font-weight:800;font-size:clamp(15px,1.14vw,22px);letter-spacing:.06em;white-space:nowrap}
.steprow__name{font-weight:700;font-size:clamp(15px,1.14vw,22px);letter-spacing:-.03em}
/* 단계가 이어진다는 느낌을 주는 세로선 */
.steprow:not(:last-child)::after{
  content:"";position:absolute;left:clamp(22px,2.1vw,40px);top:100%;height:12px;width:2px;
  background:rgba(200,151,58,.35);
}
.steprow__desc{font-size:clamp(14px,1.07vw,20.5px);color:rgba(255,255,255,.72);line-height:1.7}
.notice{
  margin-top:clamp(28px,3.2vw,62px);background:var(--blue-deep);border-radius:8px;
  padding:30px 24px;text-align:center;color:#fff;font-weight:700;
  font-size:clamp(14px,1.45vw,28px);letter-spacing:-.03em;line-height:1.6;
}

/* ================= 사례 ================= */
.case{margin-top:clamp(40px,5vw,96px);display:grid;grid-template-columns:1fr;gap:clamp(16px,1.6vw,28px)}
.case__label{font-size:clamp(17px,1.32vw,25px);font-weight:700;letter-spacing:-.03em}
.case__label span{color:var(--blue);font-weight:800;margin-right:10px}
.case__rows{display:flex;flex-direction:column;gap:12px}
.case__row{
  display:grid;grid-template-columns:110px 1fr;gap:22px;align-items:start;
  padding:22px 26px;border:1px solid rgba(255,255,255,.13);border-radius:8px;background:rgba(255,255,255,.025);
}
.case__row dt{font-weight:700;font-size:clamp(13.5px,0.97vw,19px)}
.case__row dd{font-size:clamp(13px,0.94vw,18px);line-height:1.75;color:rgba(255,255,255,.75)}
/* 실행 전략처럼 여러 단계를 나열하는 칸. 서수는 골드(라벨 규칙) */
.case__steps{list-style:none;display:flex;flex-direction:column;gap:13px;counter-reset:cstep}
.case__steps li{counter-increment:cstep;position:relative;padding-left:29px}
.case__steps li::before{
  content:counter(cstep);position:absolute;left:0;top:.2em;
  width:20px;height:20px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);
  font-size:11.5px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.case__steps b{display:block;font-weight:700;margin-bottom:2px;color:#fff}
.sec--soft .case__steps b{color:var(--txt)}

/* ================= 전문가 협업 ================= */
.mini{margin-top:clamp(42px,4.6vw,88px);font-size:clamp(16px,1.18vw,23px);font-weight:700;letter-spacing:-.03em;color:var(--gold-ink)}
/* 협업 전문가. 사진을 받으면 원 안의 아이콘을 사진으로 갈아끼운다 */
.experts{
  margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.1vw,20px);
}
.expert{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(20px,1.7vw,32px) clamp(12px,1vw,18px);
  border:1px solid var(--line);border-radius:12px;background:#fff;
}
.expert__ph{
  width:clamp(58px,4.6vw,86px);height:clamp(58px,4.6vw,86px);border-radius:50%;
  background:var(--grey);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;flex:none;
}
.expert__ph svg{width:46%;height:46%;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.expert__ph img{width:100%;height:100%;object-fit:cover}
.expert__field{
  margin-top:clamp(12px,1vw,18px);font-size:clamp(13.5px,1vw,19px);
  font-weight:700;letter-spacing:-.03em;color:var(--txt);
}
.expert__name{margin-top:6px;font-size:clamp(12.5px,0.9vw,17px);font-weight:600;color:var(--txt-sub)}
.expert__org{margin-top:2px;font-size:clamp(11.5px,0.82vw,15px);color:#8b95a3}

.position{
  margin:26px 0 0;max-width:min(1080px,100%);background:var(--navy);color:#fff;
  font-weight:700;font-size:clamp(14px,1.4vw,26px);text-wrap:balance;
  padding:clamp(20px,1.7vw,32px) clamp(22px,2vw,38px);border-radius:6px;letter-spacing:-.03em;
}

/* ================= 신청 폼 ================= */
.formbox{
  margin:clamp(40px,4.6vw,88px) auto 0;max-width:980px;background:#12161c;
  border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:clamp(30px,2.9vw,56px) clamp(30px,2.9vw,56px) clamp(28px,2.6vw,50px);
}
.formbox__title{font-size:clamp(19px,1.55vw,30px);font-weight:800;color:#fff;letter-spacing:-.035em}
.formbox__desc{margin-top:clamp(10px,0.9vw,16px);font-size:clamp(13px,0.94vw,17px);color:rgba(255,255,255,.66);line-height:1.8}
.form__grid{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.field{display:block}
.field__label{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.68);letter-spacing:-.02em}
.field__label em{font-style:normal;font-weight:500;color:rgba(255,255,255,.6)}
.field input{
  width:100%;height:50px;padding:0 16px;border-radius:6px;
  background:#171c23;border:1px solid rgba(255,255,255,.16);color:#fff;
  font-size:13.5px;transition:border-color .22s,background .22s;
}
.field input::placeholder{color:rgba(255,255,255,.42)}
.field input:focus{outline:none;border-color:var(--blue);background:#1b222b}
.form__legend{margin-top:28px;font-size:13px;color:rgba(255,255,255,.66)}
.form__chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick span{
  display:inline-block;padding:10px 18px;border-radius:6px;cursor:pointer;
  background:#171c23;border:1px solid rgba(255,255,255,.16);
  font-size:13px;color:rgba(255,255,255,.8);transition:all .22s var(--ease);
}
.pick span:hover{border-color:rgba(0,140,255,.6)}
/* 13px 작은 글자라 밝은 파랑 위 흰 글자는 대비가 3.39 로 모자란다. 칩만 한 단계 진하게 */
.pick input:checked+span{background:var(--blue-ink);border-color:var(--blue-ink);color:#fff;font-weight:600}
.pick input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.agree{margin-top:26px;display:flex;align-items:center;gap:10px;font-size:12.8px;color:rgba(255,255,255,.62);cursor:pointer}
.agree input{
  appearance:none;width:19px;height:19px;flex:none;border-radius:5px;cursor:pointer;
  background:#171c23;border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;transition:background .2s,border-color .2s;
}
.agree input::after{
  content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);opacity:0;transition:opacity .15s;
}
.agree input:checked{background:var(--blue);border-color:var(--blue)}
.agree input:checked::after{opacity:1}
.agree input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* 링크가 본문과 같은 색·밑줄 없음이라 누를 수 있는 줄 몰랐다 (2026-08-15) */
.agree a{color:var(--blue-soft);text-decoration:underline;text-underline-offset:3px}
.agree a:hover{color:#fff}
.form__msg{margin-top:16px;font-size:13px;text-align:center;min-height:20px;color:var(--blue-soft)}
.form__msg.is-err{color:#ff8080}

/* ================= 푸터 ================= */
.footer{background:#0a0e13;color:rgba(255,255,255,.58);padding:56px 0 44px;border-top:1px solid rgba(255,255,255,.07)}
.footer__cols{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,3vw,64px);align-items:start}
.footer__logo{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:rgba(255,255,255,.86)}
.footer__logo img{width:30px;height:30px}
.footer__biz{margin-top:14px;font-size:12.8px;line-height:1.8}
.footer__biz a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}
.footer__biz a:hover{text-decoration-color:currentColor}
.footer__sns{margin-top:16px;display:flex;gap:10px}
.footer__sns a{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  transition:background .22s,border-color .22s;
}
.footer__sns a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.footer__sns svg{width:17px;height:17px;fill:#fff}
.footer__navtitle{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.45)}
.footer__nav ul{margin-top:14px;display:grid;grid-template-columns:repeat(3,auto);gap:11px clamp(18px,2vw,38px)}
.footer__nav a{font-size:13.2px;color:rgba(255,255,255,.62);transition:color .22s}
.footer__nav a:hover{color:#fff}
.footer__bottom{
  margin-top:clamp(28px,2.6vw,44px);padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.footer__copy{font-size:12px;color:rgba(255,255,255,.58)}
.footer__policy{font-size:12.5px;color:rgba(255,255,255,.58);transition:color .22s}
.footer__policy:hover{color:#fff}
@media (max-width:860px){
  .footer{padding:44px 0 36px}
  .footer__cols{grid-template-columns:1fr;gap:30px}
  .footer__nav ul{grid-template-columns:repeat(2,1fr)}
  /* 오른쪽 아래 떠 있는 버튼에 가리지 않도록 아래로 쌓는다 */
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ================= 플로팅 ================= */
.float{
  position:fixed;right:24px;bottom:24px;z-index:90;
  display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.float.is-on{opacity:1;transform:none;pointer-events:auto}
.float__btn{
  position:relative;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform .25s var(--ease),filter .25s;
}
.float__btn svg{width:24px;height:24px;fill:currentColor}
.float__btn:hover{transform:translateY(-3px) scale(1.06)}
.float__btn--tel{background:var(--blue);--tipbg:var(--blue);--tipfg:#fff}
.float__btn--kakao{background:#fee500;color:#000;--tipbg:#fee500;--tipfg:#000}
.float__btn--facebook{background:#1877f2;color:#fff;--tipbg:#1877f2;--tipfg:#fff}
.float__btn--insta{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);--tipbg:#c9256b;--tipfg:#fff}
.float__btn--apply{background:var(--navy);border:1px solid rgba(255,255,255,.22)}
.float__btn--apply svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* 호버하면 버튼과 이어진 알약이 왼쪽으로 나오고 실제 연락처가 뜬다 (bnihero 방식).
   data-tip 이 비어 있으면 아무것도 뜨지 않는다 = 값을 아직 못 받은 상태 */
.float__btn{z-index:1}
.float__btn::after{
  content:attr(data-tip);
  position:absolute;right:calc(100% + 12px);top:50%;z-index:2;
  height:46px;display:flex;align-items:center;padding:0 26px 0 22px;
  border-radius:100px;white-space:nowrap;
  background:var(--tipbg,#0f1720);color:var(--tipfg,#fff);
  font-size:15.5px;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  opacity:0;pointer-events:none;
  transform:translateY(-50%) translateX(14px);
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.float__btn:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.float__btn[data-tip=""]::after,.float__btn:not([data-tip])::after{display:none}
.float__btn[data-pending]{filter:grayscale(.15)}

/* ================= 반응형 ================= */
@media (max-width:1080px){
  :root{--pad:100px}
  .cards{grid-template-columns:repeat(2,1fr)}
  /* 시안 기준으로 넣은 줄바꿈이 좁은 화면에서 외톨이 줄을 만들어 해제한다 */
  .card__lead br,.body br,.hero__lead br,.profile__txt br{display:none}
  .profile{grid-template-columns:280px 1fr;gap:44px}
  .case{grid-template-columns:1fr;gap:26px}
  .experts{grid-template-columns:repeat(3,1fr)}
  .steprow{grid-template-columns:auto 1fr;gap:6px 14px}
  .steprow__name{grid-column:2}
  .steprow__desc{grid-column:2}
}

@media (max-width:860px){
  :root{--pad:84px}
  .container{width:auto;padding:0 24px}
  .header__inner{height:64px;gap:0}
  .burger{display:block}
  .nav{
    position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(3,15,29,.98);backdrop-filter:blur(12px);
    padding:8px 24px 22px;margin:0;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease);
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  /* 패널이 화면 절반만 덮어서 아래로 히어로 사진이 그대로 이어졌다.
     열리면 화면 끝까지 덮고, 아래 고정바는 숨긴다 (2026-08-15) */
  .nav{bottom:0;overflow-y:auto;background:rgba(3,15,29,.985)}
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  body:has(.nav.is-open) .bottombar{display:none}
  .nav__link{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px}
  .nav__link::after{display:none}

  .hero{min-height:78svh}
  /* 가로로 긴 사진을 세로 화면에 cover 로 깔면 높이에 맞춰 늘어나서
     아래쪽 잔디만 크게 남는다. background-position 으로는 안 고쳐진다
     (세로가 이미 다 보이는 상태라 위아래로 움직일 여지가 없다).
     그래서 세로 화면 전용 크롭을 따로 쓴다 (2026-08-15) */
  .hero__bg{
    background-image:url("../img/hero-m.jpg");
    background-image:image-set(url("../img/hero-m.webp") type("image/webp"),url("../img/hero-m.jpg") type("image/jpeg"));
  }
  .hero__inner{padding:84px 22px 76px}
  .hero__cta{flex-direction:column;align-items:stretch;gap:11px}
  .btn{height:52px;width:100%}

  .worries{margin-top:44px;grid-template-columns:1fr}
  .worry{padding:18px 20px;gap:12px}
  .worry__txt{font-size:14px}
  .worries__closing{margin-top:46px}

  .steps{margin-top:52px}
  .steps__list{grid-template-columns:1fr;gap:10px}
  .step:not(:last-child)::after{top:auto;bottom:-10px;right:50%;margin:0;transform:rotate(135deg) translateX(-4px)}

  .cards{grid-template-columns:1fr;gap:16px;margin-top:44px}
  .card{padding:30px 24px 26px}
  .card:hover{transform:none}

  .profile{grid-template-columns:1fr;gap:30px;margin-top:38px}
  .profile__photo{max-width:280px}

  .band{padding:74px 0}
  .steplist{margin-top:44px;gap:10px}
  .steprow{grid-template-columns:1fr;gap:8px;padding:20px 20px}
  .steprow__name{margin:0}
  .case__row{grid-template-columns:1fr;gap:8px;padding:18px 20px}

  .mini{margin-top:52px}
  .experts{grid-template-columns:repeat(2,1fr)}
  .form__grid{grid-template-columns:1fr}
  .formbox{padding:30px 22px 28px;margin-top:40px}

  .float{right:14px;bottom:14px;gap:8px}
  .float__btn{width:48px;height:48px}
  .float__btn svg{width:21px;height:21px}
  .float__btn--apply svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.float__btn::after{display:none}
}

@media (max-width:339px){
  .experts{grid-template-columns:1fr}
}

/* =========================================================
   딥사이클 추가분 (요청서 반영)
   ========================================================= */

/* ---------- 3대 핵심 가치 (요청서 2번) ---------- */
/* 회사가 커가는 순서. 링크가 아니므로 버튼처럼 보이지 않게 둔다 */
.flow{
  margin:clamp(22px,2.2vw,40px) 0 0;display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(10px,1vw,18px) clamp(14px,1.4vw,26px);
}
.flow li{
  display:inline-flex;align-items:center;
  font-size:clamp(14px,1.09vw,21px);font-weight:700;letter-spacing:-.03em;color:var(--txt);
}
.flow li:not(:last-child)::after{
  content:"";margin-left:clamp(14px,1.4vw,26px);
  width:clamp(7px,0.55vw,10px);height:clamp(7px,0.55vw,10px);
  border-top:2px solid var(--gold);border-right:2px solid var(--gold);
  transform:rotate(45deg);
}


.values{margin-top:clamp(40px,4.6vw,88px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,30px)}
.value{
  position:relative;overflow:hidden;background:var(--grey);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(28px,2.4vw,46px) clamp(22px,2vw,38px) clamp(24px,2vw,38px);
  display:flex;flex-direction:column;
}
.value__head{display:flex;align-items:center;gap:clamp(12px,1vw,18px);margin-bottom:clamp(16px,1.4vw,26px)}
.value__icon{
  width:clamp(44px,3.2vw,60px);height:clamp(44px,3.2vw,60px);border-radius:12px;flex:none;
  background:rgba(0,140,255,.08);border:1px solid rgba(0,140,255,.22);display:grid;place-items:center;
}
.value__icon svg{width:54%;height:54%;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.value__no{color:var(--txt-mute);font-weight:800;font-size:clamp(15px,1.14vw,21px);letter-spacing:.04em}
/* 제목이 한 줄인 카드와 두 줄인 카드의 본문 시작선을 맞춘다 */
.value__title{margin-top:clamp(12px,0.85vw,16px);font-size:clamp(18px,1.39vw,25.5px);font-weight:800;letter-spacing:-.03em;line-height:1.42;min-height:2.84em}
/* 설명 길이가 달라도 아래 태그 줄이 같은 높이에서 시작하도록 */
.value__desc{margin-top:clamp(12px,0.9vw,17px);font-size:clamp(13px,0.94vw,18px);line-height:1.8;color:var(--txt-sub)}
.value__tagslabel{
  margin-top:auto;padding-top:clamp(20px,1.7vw,32px);border-top:1px solid var(--line);
  font-size:clamp(11.5px,0.8vw,15px);font-weight:700;letter-spacing:.02em;color:var(--txt-mute);
}
.value__tags{margin-top:clamp(9px,0.8vw,14px);display:flex;flex-wrap:wrap;gap:8px}
.value__tags a{
  display:inline-block;padding:clamp(7px,0.6vw,12px) clamp(11px,1vw,19px);border-radius:100px;
  background:rgba(0,140,255,.09);color:#0a6fc4;font-size:clamp(12px,0.87vw,16.5px);font-weight:700;
  letter-spacing:-.03em;transition:background .22s,color .22s;
}
.value__tags a:hover{background:var(--blue);color:#fff}

/* ---------- 컨설팅 철학 본문 (요청서 8번) ---------- */
.creed{margin:clamp(30px,3vw,56px) auto 0;max-width:min(760px,88%);text-align:center}
.creed__lead{
  font-size:clamp(15.5px,1.22vw,23.5px);font-weight:700;color:var(--blue-soft);
  letter-spacing:-.03em;line-height:1.7;
  padding-bottom:clamp(16px,1.4vw,27px);
  border-bottom:1px solid rgba(255,255,255,.13);
}
.creed__txt{
  margin-top:clamp(10px,0.85vw,16px);font-size:clamp(13.5px,1vw,19px);line-height:1.9;
  color:rgba(255,255,255,.72);letter-spacing:-.02em;
}

/* ---------- 사례 탭 (요청서 10번) ---------- */
.case__tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1vw,16px)}
@media (max-width:1440px){.case__tabs{grid-template-columns:repeat(3,1fr)}}
.case__tab{
  display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;
  padding:clamp(16px,1.4vw,27px) clamp(18px,1.6vw,30px);
  background:transparent;border:1px solid rgba(255,255,255,.13);border-radius:8px;
  color:rgba(255,255,255,.62);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(14px,1.02vw,19.5px);
  transition:border-color .25s,background .25s,color .25s;
}
.case__tab span{color:rgba(255,255,255,.4);font-size:clamp(11.5px,0.82vw,15.5px);font-weight:800;letter-spacing:.06em}
.case__tab:hover{border-color:rgba(0,140,255,.45);color:#fff}
.case__tab.is-active{background:rgba(0,140,255,.1);border-color:var(--blue);color:#fff}
.case__tab.is-active span{color:var(--blue)}
.case__rows.is-hidden{display:none}
.case__row dd.is-empty{color:rgba(255,255,255,.34)}
.case__row dd.is-empty::before{content:"";display:inline-block;width:22px;height:1px;background:rgba(255,255,255,.28);vertical-align:middle;margin-right:9px}

/* 밝은 배경 위의 사례 (프로세스~신청 폼 사이가 어둡게만 이어지지 않도록) */
.sec--soft .case__tab{
  background:#fff;border-color:var(--line);color:var(--txt-sub);
  box-shadow:0 2px 10px rgba(3,15,29,.04);
}
.sec--soft .case__tab span{color:var(--txt-mute)}
.sec--soft .case__tab:hover{border-color:rgba(0,140,255,.45);color:var(--txt)}
.sec--soft .case__tab.is-active{background:rgba(0,140,255,.07);border-color:var(--blue);color:var(--txt)}
.sec--soft .case__tab.is-active span{color:var(--blue-ink)}
.sec--soft .case__row{background:#fff;border-color:var(--line)}
.sec--soft .case__row dt{color:var(--txt)}
.sec--soft .case__row dd{color:var(--txt-sub)}
.sec--soft .case__row dd.is-empty{color:#98a3b2}
.sec--soft .case__row dd.is-empty::before{background:#c9d1db}

/* ---------- 모바일 하단 고정 CTA (요청서 14번) ---------- */
.bottombar{display:none}

/* ---------- 서비스 상세 페이지 ---------- */
.subhero{position:relative;background:var(--navy);color:#fff;
  /* 고정 헤더 높이만큼 더 띄운다 */
  padding:calc(var(--pad) * .62 + clamp(64px,4.4vw,84px)) 0 calc(var(--pad) * .5)}
.subhero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,rgba(0,140,255,0),rgba(0,140,255,.6),rgba(0,140,255,0));
}
/* 상단 배경 사진 (랜딩 카드와 같은 파일을 다시 쓴다) */
.subhero--photo .subhero__bg{position:absolute;inset:0;z-index:0}
.subhero--photo .subhero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.subhero--photo .subhero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,15,29,.88) 0%,rgba(3,15,29,.8) 45%,rgba(3,15,29,.94) 100%);
}
.subhero--photo>.container{position:relative;z-index:1}
.crumb{display:flex;align-items:center;gap:9px;font-size:clamp(12px,0.87vw,16.5px);color:rgba(255,255,255,.5)}
.crumb a:hover{color:var(--blue-soft)}
.subhero__icon{
  margin-top:clamp(24px,2.2vw,42px);width:clamp(52px,4.2vw,80px);height:clamp(52px,4.2vw,80px);
  border-radius:14px;background:rgba(0,140,255,.12);border:1px solid rgba(0,140,255,.35);
  display:grid;place-items:center;
}
.subhero__icon svg{width:56%;height:56%;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.subhero__no{margin-top:clamp(20px,1.8vw,34px);color:var(--gold-soft);font-weight:800;font-size:clamp(13px,0.94vw,18px);letter-spacing:.06em}
.subhero__title{margin-top:10px;font-size:clamp(26px,2.8vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.3}
.subhero__lead{margin-top:clamp(18px,1.6vw,30px);font-size:clamp(14px,1.1vw,21px);line-height:1.85;color:rgba(255,255,255,.8);max-width:min(760px,100%)}

.need{margin-top:clamp(36px,3.4vw,64px);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.1vw,21px)}
.need li{
  display:flex;gap:14px;align-items:flex-start;
  padding:clamp(18px,1.5vw,29px) clamp(20px,1.7vw,32px);
  border:1px solid var(--line);border-radius:10px;background:var(--grey);
  font-size:clamp(13.5px,0.99vw,19px);line-height:1.72;color:var(--txt);
}
.need li::before{
  content:"";flex:none;margin-top:.42em;width:clamp(14px,1vw,19px);height:clamp(14px,1vw,19px);
  border-radius:50%;background:rgba(0,140,255,.14);
  box-shadow:inset 0 0 0 clamp(3px,.22vw,4px) var(--blue);
}

.dolist{margin-top:clamp(36px,3.4vw,64px);display:flex;flex-direction:column;gap:clamp(12px,1.1vw,21px)}
.do{
  padding:clamp(22px,1.9vw,36px) clamp(24px,2.1vw,40px);
  border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(255,255,255,.025);
  transition:border-color .3s,background .3s;
}
.do__title{font-size:clamp(15px,1.11vw,21px);font-weight:700;letter-spacing:-.03em}
.do__title b{color:var(--blue);font-weight:800;margin-right:12px}
.do__txt{margin-top:clamp(9px,0.8vw,15px);font-size:clamp(13px,0.94vw,18px);line-height:1.82;color:rgba(255,255,255,.72)}

.checks{margin-top:clamp(36px,3.4vw,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.1vw,21px)}
.check{padding:clamp(22px,1.9vw,36px) clamp(20px,1.8vw,34px);border:1px solid var(--line);border-radius:10px;background:var(--grey)}
.check__title{font-size:clamp(14px,1.02vw,19.5px);font-weight:800;letter-spacing:-.03em;color:var(--txt)}
.check__txt{margin-top:clamp(9px,0.8vw,15px);font-size:clamp(12.5px,0.9vw,17px);line-height:1.8;color:var(--txt-sub)}

.faq{margin-top:clamp(36px,3.4vw,64px);display:flex;flex-direction:column;gap:12px}
.faq details{border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(255,255,255,.025);overflow:hidden}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;
  padding:clamp(20px,1.7vw,32px) clamp(22px,1.9vw,36px);
  font-size:clamp(14px,1.02vw,19.5px);font-weight:700;letter-spacing:-.03em;color:#fff;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";flex:none;color:var(--blue);font-weight:800}
.faq summary::after{
  content:"";margin-left:auto;flex:none;width:11px;height:11px;margin-top:.35em;
  border-right:2px solid rgba(255,255,255,.45);border-bottom:2px solid rgba(255,255,255,.45);
  transform:rotate(45deg);transition:transform .28s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{
  padding:0 clamp(22px,1.9vw,36px) clamp(20px,1.7vw,32px) calc(clamp(22px,1.9vw,36px) + 24px);
  font-size:clamp(13px,0.94vw,18px);line-height:1.85;color:rgba(255,255,255,.72);
}

.endcta{text-align:center}
.endcta .btn{margin-top:clamp(24px,2.2vw,42px)}
.siblings{margin-top:clamp(40px,3.8vw,72px);display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.siblings a{
  padding:clamp(14px,1.2vw,23px) 10px;text-align:center;border:1px solid rgba(255,255,255,.14);
  border-radius:8px;font-size:clamp(12.5px,0.9vw,17px);font-weight:700;letter-spacing:-.03em;
  color:rgba(255,255,255,.72);transition:border-color .25s,color .25s,background .25s;
}
.siblings a:hover{border-color:var(--blue);color:#fff;background:rgba(0,140,255,.08)}
.note{
  margin-top:clamp(26px,2.4vw,46px);font-size:clamp(12px,0.85vw,16px);line-height:1.8;
  color:var(--txt-sub);text-align:center;
}
.sec--navy .note,.sec--ink .note,.sec--navy2 .note{color:rgba(255,255,255,.45)}

/* ---------- 추가분 반응형 ---------- */
@media (max-width:1080px){
  .values{grid-template-columns:1fr;gap:14px}
  .value__title br{display:none}
  .value__title{min-height:0}
  .checks{grid-template-columns:1fr}
  .need{grid-template-columns:1fr}
  .siblings{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px){
  .flow{gap:8px 14px}
  .case__tabs{grid-template-columns:repeat(2,1fr)}
  .case__tab{padding:14px 16px}

  .bottombar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;gap:8px;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    background:rgba(3,15,29,.96);backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,.12);
  }
  .bottombar__btn{
    height:50px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
    gap:8px;font-size:14.5px;font-weight:700;letter-spacing:-.03em;
  }
  .bottombar__btn svg{width:18px;height:18px;fill:currentColor}
  .bottombar__btn--tel{flex:0 0 34%;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28)}
  .bottombar__btn--apply{flex:1 1 auto;background:var(--blue);color:#fff}
  body{padding-bottom:68px}
  /* 모바일은 하단 바가 전화·신청을 이미 맡는다. 플로팅을 같이 띄우면
     인스타·페이스북 동그라미가 본문 글자 위에 겹쳐 앉는다 (2026-08-14 확인) */
  .float{display:none}
}

/* 상세 히어로 우측 워터마크 */
.subhero{overflow:hidden}
.subhero .container{position:relative}
.subhero__mark{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:clamp(180px,22vw,420px);height:clamp(180px,22vw,420px);
  pointer-events:none;opacity:.07;
}
.subhero__mark svg{width:100%;height:100%;fill:none;stroke:var(--blue);stroke-width:.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1080px){.subhero__mark{display:none}}

/* =========================================================
   딥사이클 2회차 — 리드 수집 개선
   ========================================================= */

/* ---------- 중간 CTA 띠 ---------- */
.midcta{background:var(--blue-deep);color:#fff;padding:clamp(34px,3.4vw,64px) 0}
.midcta__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,2.2vw,42px);flex-wrap:wrap;
}
.midcta__title{font-size:clamp(17px,1.55vw,30px);font-weight:800;letter-spacing:-.035em;line-height:1.4}
.midcta__sub{
  margin-top:clamp(8px,0.7vw,13px);font-size:clamp(13px,0.94vw,18px);
  line-height:1.7;color:rgba(255,255,255,.78);
}
.midcta .btn--primary{background:#fff;color:var(--blue-deep);box-shadow:0 10px 26px rgba(0,0,0,.2);flex:none}
.midcta .btn--primary:hover{background:#eaf4ff;color:#053a6b}

/* ---------- 신청 완료 화면 ---------- */
.formdone{text-align:center;padding:clamp(30px,3vw,58px) 0 clamp(10px,1vw,20px)}
.formdone__mark{
  margin:0 auto;width:clamp(54px,4.4vw,84px);height:clamp(54px,4.4vw,84px);border-radius:50%;
  display:grid;place-items:center;color:var(--blue);
  background:rgba(0,140,255,.12);border:1px solid rgba(0,140,255,.4);
  animation:doneIn .5s var(--ease) both;
}
.formdone__mark svg{width:52%;height:52%}
@keyframes doneIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.formdone__title{
  margin-top:clamp(18px,1.6vw,30px);font-size:clamp(17px,1.3vw,25px);
  font-weight:800;letter-spacing:-.03em;color:#fff;
}
.formdone__txt{
  margin-top:clamp(10px,0.9vw,17px);font-size:clamp(13px,0.94vw,18px);
  line-height:1.85;color:rgba(255,255,255,.68);
}

/* 전송 중 */
.form.is-sending{opacity:.55;pointer-events:none}

/* ---------- 개인정보 처리방침 ---------- */
.policy{max-width:min(880px,100%)}
.policy h2{
  margin-top:clamp(34px,3.2vw,60px);font-size:clamp(16px,1.18vw,23px);
  font-weight:800;letter-spacing:-.03em;color:var(--txt);
}
.policy h2:first-of-type{margin-top:clamp(20px,1.8vw,34px)}
.policy p,.policy li{
  margin-top:clamp(10px,0.85vw,16px);font-size:clamp(13.5px,0.99vw,19px);
  line-height:1.9;color:var(--txt-sub);
}
.policy ul{margin-top:clamp(6px,0.5vw,10px);padding-left:0}
.policy li{position:relative;padding-left:16px}
.policy li::before{content:"";position:absolute;left:0;top:.85em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.policy table{width:100%;border-collapse:collapse;margin-top:clamp(12px,1vw,20px)}
.policy th,.policy td{
  border:1px solid var(--line);padding:clamp(11px,0.9vw,17px) clamp(12px,1vw,19px);
  font-size:clamp(12.5px,0.9vw,17px);line-height:1.7;text-align:left;
}
.policy th{background:var(--grey);font-weight:700;color:var(--txt);width:30%}
.policy td{color:var(--txt-sub)}

@media (max-width:860px){
  .midcta__inner{flex-direction:column;align-items:stretch;text-align:center}
  .midcta .btn--primary{width:100%}
  .policy th,.policy td{display:block;width:auto;border-top:0}
  .policy tr:first-child th{border-top:1px solid var(--line)}
}

/* ---------- 안내 토스트 (경고창 대체) ---------- */
.toast{
  position:fixed;left:50%;bottom:clamp(24px,3vw,56px);z-index:120;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  max-width:min(420px,86vw);text-align:center;
  padding:14px 22px;border-radius:10px;
  background:rgba(3,15,29,.95);color:#fff;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  font-size:13.5px;font-weight:600;letter-spacing:-.02em;line-height:1.6;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (max-width:860px){.toast{bottom:82px}}

/* ---------- 스팸 미끼 (사람 눈에 안 보이는 칸) ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}