/* =========================================================
   NF SOLUTION — 반응형 스타일시트 (Dark Premium)
   Base : Deep Navy Black  /  Point : White + Muted Gold
   ========================================================= */

:root{
  /* 다크 베이스 */
  --bg:#070D16;
  --bg-2:#0A1220;
  --bg-3:#0D1727;
  --panel:#111D2F;
  --panel-2:#16233A;

  /* 라이트(화이트 포인트) 구간 */
  --light:#F6F4F0;
  --light-2:#FFFFFF;
  --ink:#0E1726;
  --ink-2:#3E4756;
  --ink-3:#8A9099;
  --ink-line:#E4E0D8;

  /* 텍스트 (다크 위) */
  --t1:#FFFFFF;
  --t2:rgba(255,255,255,.82);
  --t3:rgba(255,255,255,.62);
  --t4:rgba(255,255,255,.4);

  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.06);

  --gold:#C3A264;
  --gold-2:#E2CC9B;
  --gold-3:rgba(195,162,100,.14);

  /* 섹션 경계 그라데이션용 — 인접 섹션 배경색 (rgb 삼원색만) */
  --rgb-bg:7,13,22;        /* --bg      #070D16 */
  --rgb-bg2:10,18,32;      /* --bg-2    #0A1220 */
  --rgb-cta:10,20,36;      /* CTA 상·하단 #0A1424 */
  --rgb-ft:5,9,15;         /* footer    #05090F */

  /* ---- 모서리 라운드 토큰 ----
     사이트 전체의 둥글기를 여기서 한 번에 조절한다.
     더 각지게 하려면 값을 줄이고, 더 둥글게 하려면 값을 키우면 된다. */
  --r-xs:6px;    /* 체크박스, 작은 뱃지 */
  --r-sm:10px;   /* 태그, 메모 박스 */
  --r-md:14px;   /* 입력창, 알림 박스 */
  --r-lg:18px;   /* 카드류 */
  --r-xl:26px;   /* 사진 프레임, 폼 박스, 모달, 비교표 */
  --r-btn:999px; /* 버튼 (알약형) */

  --hd-h:80px;
  --wrap:1240px;
  --sec-y:clamp(84px,9vw,152px);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* --ease 는 시작이 빨라 작은 변화에는 경쾌하지만,
     칸 전체가 어두운색 → 흰색으로 뒤집히는 큰 전환에서는 색이 튀어 보인다.
     시작을 눌러 천천히 물들다 끝에서 부드럽게 멎는 곡선 */
  --ease-soft:cubic-bezier(.32,.02,.18,1);
  /* 색 전용. 바탕이 흑→백으로 가는 동안 글자는 백→흑으로 반대로 간다.
     둘의 밝기는 도중에 반드시 한 번 교차하고, 그 순간 글자가 배경에 묻힌다.
     교차 자체는 피할 수 없으니 그 구간을 빨리 지나가는 곡선을 쓴다 —
     양 끝은 완만해 시작·끝이 툭 끊기지 않고, 가운데만 빠르게 훑는다 */
  --ease-color:cubic-bezier(.66,0,.2,1);
  --serif:"Cormorant Garamond",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 10px);background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--t2);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  font-size:16px;
  line-height:1.75;
  letter-spacing:-.012em;
  word-break:keep-all;
  overflow-wrap:break-word;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%;height:auto;display:block;border:0}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--gold);color:#0B1220}

.wrap{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap--narrow{max-width:920px}
.wrap--form{max-width:900px}
.center{text-align:center}
.ac{color:var(--gold)}
.pc{display:inline}

/* 상단 스크롤 진행 바 */
.progress{
  position:fixed;top:0;left:0;z-index:90;height:3px;width:0;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transition:width .1s linear;
}

/* ---------- 공통 타이포 ---------- */
.eyebrow{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 28px;font-size:12.5px;font-weight:700;letter-spacing:.28em;
  color:var(--t1);text-transform:uppercase;
}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--gold)}
.eyebrow__sub{color:var(--gold);font-weight:500;letter-spacing:.26em}

.sec{position:relative;padding:var(--sec-y) 0}
.sec--panel{background:var(--bg-2)}
.sec__head{margin-bottom:clamp(44px,5vw,72px)}
.sec__head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.sec__side{
  max-width:320px;padding-left:26px;border-left:1px solid var(--line);
  font-size:15px;line-height:1.85;color:var(--t3);
}
.sec__eyebrow{
  display:flex;align-items:center;gap:12px;
  margin:0 0 20px;font-size:11.5px;font-weight:700;letter-spacing:.28em;
  color:var(--gold);text-transform:uppercase;
}
.sec__eyebrow.center{justify-content:center}
.sec__eyebrow .idx{
  font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:.06em;
  color:var(--gold-2);line-height:1;
}
.sec__eyebrow .idx::after{content:"";display:inline-block;width:22px;height:1px;background:var(--gold);margin:0 0 5px 12px}
.sec__title{
  margin:0;color:var(--t1);font-weight:700;
  font-size:clamp(27px,3.4vw,45px);line-height:1.38;letter-spacing:-.035em;
}
.sec__title--lg{font-size:clamp(29px,4.4vw,56px);line-height:1.34}
.sec__lead{margin:24px 0 0;font-size:clamp(15px,1.25vw,17.5px);line-height:1.95;color:var(--t3)}
.rule{width:46px;height:1px;background:var(--gold);margin:34px auto}
.rule--left{margin:28px 0}

/* ---------- 버튼 ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:58px;padding:0 34px;border-radius:var(--r-btn);overflow:hidden;
  font-size:16px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;
  transition:color .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn--gold{background:var(--gold);color:#0B1220}
.btn--gold:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(195,162,100,.7)}
.btn--ghost{color:var(--t1);border:1px solid var(--line);backdrop-filter:blur(4px)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-2);transform:translateY(-2px)}
.btn--navy{background:var(--ink);color:#fff}
.btn--navy:hover{background:#1B2942;transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(14,23,38,.7)}
.btn--sm{height:44px;padding:0 22px;font-size:14.5px}
.btn--lg{height:64px;padding:0 46px;font-size:17px}
.btn--block{width:100%}

/* =========================================================
   HEADER
   ========================================================= */
.hd{
  position:fixed;inset:0 0 auto;z-index:70;height:var(--hd-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),height .35s var(--ease);
}
.hd.is-scrolled{
  height:70px;background:rgba(7,13,22,.86);border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
}
.hd__inner{
  max-width:var(--wrap);height:100%;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;gap:22px;
}
.hd__logo{display:flex;align-items:center;gap:12px;margin-right:auto}
.hd__logo img{height:38px;width:auto}
.hd__logo-txt{display:flex;flex-direction:column;line-height:1.2}
.hd__logo-txt b{font-size:15px;font-weight:700;letter-spacing:.14em;color:#fff}
.hd__logo-txt em{font-size:10.5px;font-style:normal;letter-spacing:.04em;color:var(--t3)}

.hd__nav{display:flex;align-items:center;gap:clamp(20px,2.4vw,38px)}
.hd__nav a{
  position:relative;font-size:15.5px;font-weight:500;color:rgba(255,255,255,.86);
  letter-spacing:-.02em;transition:color .25s var(--ease);
}
.hd__nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.hd__nav a:not(.btn):hover{color:#fff}
.hd__nav a:not(.btn):hover::after{transform:scaleX(1)}
/* 스크롤로 해당 섹션에 들어오면 hover 와 같은 밑줄을 계속 표시한다 */
.hd__nav a:not(.btn).is-active{color:#fff}
.hd__nav a:not(.btn).is-active::after{transform:scaleX(1);background:var(--gold-2)}
.hd__nav-cta{display:none}

.hd__burger{display:none;width:44px;height:44px;margin-right:-10px;position:relative}
.hd__burger span{
  position:absolute;left:11px;width:22px;height:1.6px;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease),top .3s var(--ease);
}
.hd__burger span:nth-child(1){top:15px}
.hd__burger span:nth-child(2){top:21px}
.hd__burger span:nth-child(3){top:27px}
.hd__burger.is-on span:nth-child(1){top:21px;transform:rotate(45deg)}
.hd__burger.is-on span:nth-child(2){opacity:0}
.hd__burger.is-on span:nth-child(3){top:21px;transform:rotate(-45deg)}
.hd__dim{position:fixed;inset:0;z-index:65;background:rgba(4,8,14,.6);opacity:0;transition:opacity .3s var(--ease)}
.hd__dim.is-on{opacity:1}

/* =========================================================
   우측 섹션 인디케이터
   ========================================================= */
.dots{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;align-items:flex-end;gap:16px;
}
.dots a{display:flex;align-items:center;gap:10px;padding:2px 0}
.dots i{
  display:block;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--t4);transition:all .3s var(--ease);
}
.dots span{
  font-size:9.5px;font-weight:700;letter-spacing:.2em;color:var(--t4);
  opacity:0;transform:translateX(6px);transition:all .3s var(--ease);
}
.dots a:hover i{border-color:var(--gold)}
.dots a:hover span{opacity:1;transform:none;color:var(--t3)}
.dots a.is-on i{background:var(--gold);border-color:var(--gold);transform:scale(1.15)}
.dots a.is-on span{opacity:1;transform:none;color:var(--gold)}
.dots.on-light i{border-color:rgba(14,23,38,.28)}
.dots.on-light span{color:rgba(14,23,38,.4)}
.dots.on-light a.is-on i{background:var(--gold);border-color:var(--gold)}

/* =========================================================
   01. HERO
   ========================================================= */
.hero{
  position:relative;overflow:hidden;
  padding:calc(var(--hd-h) + clamp(56px,6.5vw,104px)) 0 0;
}
.hero__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 560px at 78% 12%,rgba(195,162,100,.16),transparent 60%),
    radial-gradient(760px 520px at 8% 88%,rgba(35,72,120,.28),transparent 62%),
    linear-gradient(180deg,#060B13 0%,#0A1424 55%,#070D16 100%);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:100% 92px,142px 100%;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000 20%,transparent 100%);
  mask-image:radial-gradient(80% 70% at 50% 40%,#000 20%,transparent 100%);
}
.hero > *{position:relative;z-index:1}
.hero__side{
  position:absolute;left:26px;top:52%;z-index:1;
  writing-mode:vertical-rl;transform:translateY(-50%);
  font-size:10.5px;font-weight:600;letter-spacing:.42em;color:var(--t4);
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(40px,5vw,86px);align-items:center;
}
.hero__title{
  margin:0;color:#fff;font-weight:800;letter-spacing:-.042em;
  font-size:clamp(32px,4.6vw,60px);line-height:1.28;
}
.hero__desc{margin:28px 0 0;font-size:clamp(15.5px,1.3vw,18px);line-height:1.9;color:var(--t3)}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:42px}

/* 대표 사진 프레임 */
.photo{
  position:relative;margin:0;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(155deg,#12243C 0%,#0B1524 60%,#0E1B2C 100%);
  aspect-ratio:4/5;
}
.photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
.photo__ph{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.photo__ph::after{
  content:"";position:absolute;inset:18px;border:1px solid rgba(226,204,155,.22);
  border-radius:calc(var(--r-xl) - 12px);
}
.photo__mark{font-size:clamp(46px,5vw,68px);font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.9)}
.photo__label{font-size:10.5px;letter-spacing:.34em;color:var(--gold-2)}
.hero__visual{position:relative}
.photo--hero{box-shadow:0 50px 90px -40px rgba(0,0,0,.85)}
.hero__visual::before{
  content:"";position:absolute;right:-18px;bottom:-18px;width:132px;height:132px;z-index:2;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);opacity:.55;
  border-bottom-right-radius:calc(var(--r-xl) + 14px);
}

/* 히어로 하단 키워드 스트립 */
.strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(56px,6vw,88px);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:rgba(255,255,255,.02);
}
.strip li{padding:26px 26px 30px;border-right:1px solid var(--line)}
.strip li:last-child{border-right:0}
.strip b{display:block;font-size:16px;font-weight:600;color:#fff;letter-spacing:-.025em}
.strip span{display:block;margin-top:6px;font-size:13.5px;color:var(--t4)}

.scroll{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:clamp(30px,3.5vw,44px) auto 0;padding-bottom:clamp(34px,4vw,54px);width:fit-content;
}
.scroll span{font-size:9.5px;font-weight:700;letter-spacing:.34em;color:var(--t4)}
.scroll i{display:block;width:1px;height:46px;background:linear-gradient(180deg,var(--gold),transparent);overflow:hidden}
.scroll:hover i{background:linear-gradient(180deg,var(--gold-2),transparent)}

/* =========================================================
   화이트 구간 (섹션 교차 배경)
   다크 → 화이트 → 다크 순으로 배경이 바뀌며 섹션이 구분된다.
   ========================================================= */
.sec--white{background:#FFFFFF}
.sec--light{background:var(--light)}
.sec--white,.sec--light{color:var(--ink-2)}
.sec--white .sec__title,.sec--light .sec__title{color:var(--ink)}
.sec--white .sec__lead,.sec--light .sec__lead{color:var(--ink-2)}
.sec--white .sec__eyebrow,.sec--light .sec__eyebrow{color:#9A7F49}
.sec--white .sec__eyebrow .idx,.sec--light .sec__eyebrow .idx{color:#9A7F49}
.sec--white .sec__eyebrow::before,.sec--light .sec__eyebrow::before,
.sec--white .sec__eyebrow .idx::after,.sec--light .sec__eyebrow .idx::after{background:#C3A264}
.sec--white .sec__side,.sec--light .sec__side{color:var(--ink-3);border-left-color:var(--ink-line)}
.sec--white .rule,.sec--light .rule{background:#C3A264}
.sec--white .ac,.sec--light .ac{color:#A9873F}
.sec--white .link,.sec--light .link{color:var(--ink-3)}
.sec--white .link:hover,.sec--light .link:hover{color:var(--ink)}

/* ---- 경계 그라데이션 ----------------------------------------------------
   밝은 섹션의 위·아래 끝에 "인접한 어두운 섹션의 색"을 깔고 서서히 지운다.
   경계선의 첫 픽셀이 이웃 섹션 색과 정확히 같아 선이 보이지 않고 부드럽게 이어진다.
   각 섹션은 --e-top / --e-bot 으로 자기 이웃 색을 지정한다.

   --edge : 그라데이션이 사라지기까지의 길이
   --edge-gap : 그라데이션이 끝난 뒤 첫 텍스트까지 비워두는 여백
   → 섹션 상·하 패딩을 (--edge + --edge-gap) 으로 잡아 그라데이션이 글자에 닿지 않는다.
------------------------------------------------------------------------- */
.sec--white,.sec--light{
  --e-top:var(--rgb-bg);
  --e-bot:var(--rgb-bg);
  --edge:clamp(56px,6vw,108px);
  --edge-gap:clamp(40px,4vw,72px);
  padding:var(--sec-y) 0;
}

/* 그라데이션은 .edge-top / .edge-bot 이 붙은 경계에만 적용한다.
   현재 적용 : HERO → BRAND MESSAGE 경계 한 곳 (index.html 의 #about)
   다른 경계도 부드럽게 하고 싶으면 해당 섹션에 클래스만 추가하면 된다. */
.edge-top{padding-top:calc(var(--edge) + var(--edge-gap))}
.edge-bot{padding-bottom:calc(var(--edge) + var(--edge-gap))}
.edge-top::before,.edge-bot::after{
  content:"";position:absolute;left:0;right:0;z-index:0;pointer-events:none;
  height:var(--edge);
}
/* 정지점을 S자 곡선(smoothstep)으로 배치 — 시작도 끝도 경계가 보이지 않는다 */
.edge-top::before{
  top:0;
  background:linear-gradient(180deg,
    rgb(var(--e-top))        0%,
    rgba(var(--e-top),.972) 10%,
    rgba(var(--e-top),.896) 20%,
    rgba(var(--e-top),.784) 30%,
    rgba(var(--e-top),.648) 40%,
    rgba(var(--e-top),.5)   50%,
    rgba(var(--e-top),.352) 60%,
    rgba(var(--e-top),.216) 70%,
    rgba(var(--e-top),.104) 80%,
    rgba(var(--e-top),.028) 90%,
    rgba(var(--e-top),0)   100%);
}
.edge-bot::after{
  bottom:0;
  background:linear-gradient(0deg,
    rgb(var(--e-bot))        0%,
    rgba(var(--e-bot),.972) 10%,
    rgba(var(--e-bot),.896) 20%,
    rgba(var(--e-bot),.784) 30%,
    rgba(var(--e-bot),.648) 40%,
    rgba(var(--e-bot),.5)   50%,
    rgba(var(--e-bot),.352) 60%,
    rgba(var(--e-bot),.216) 70%,
    rgba(var(--e-bot),.104) 80%,
    rgba(var(--e-bot),.028) 90%,
    rgba(var(--e-bot),0)   100%);
}

/* 섹션별 이웃 색 — 그라데이션을 다시 켤 때 쓰는 값 */
#ceo{--e-bot:var(--rgb-bg2)}                              /* 아래: PROCESS */
#case{--e-top:var(--rgb-bg2);--e-bot:var(--rgb-cta)}      /* 위: PROCESS / 아래: CTA */
#apply{--e-top:var(--rgb-cta);--e-bot:var(--rgb-ft)}      /* 위: CTA / 아래: FOOTER */

/* =========================================================
   02. BRAND MESSAGE
   ========================================================= */
.sec--msg{overflow:hidden}
.quote{
  display:block;margin:0 auto -22px;font-family:var(--serif);font-size:110px;line-height:1;
  color:#C3A264;opacity:.42;
}

/* =========================================================
   03. SERVICE
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* 카드는 .card 와 .reveal 을 함께 달고 있고, .reveal(아래 등장 애니메이션)이
   transition 을 opacity·transform 두 개로 통째로 덮어쓴다. 특이도가 같아
   뒤에 오는 .reveal 이 이긴다 — 그래서 .card 에 배경색 전환을 아무리 적어도
   먹지 않고, hover 시 흰색이 전환 없이 즉시 갈아끼워지고 있었다.

   .card 의 transition 을 되찾으려 하면 이번엔 등장 애니메이션이 깨지므로,
   흰 바탕을 카드 자체가 아니라 ::before 겹판에 얹고 그 판의 opacity 만
   페이드한다. 겹판은 .reveal 의 영향을 받지 않는 별개 요소라 전환이 온전하고,
   바꾸는 값이 opacity 하나뿐이라 색이 중간에 튈 구간도 없다.
   그림자와 흰 테두리도 같은 판에 실어 함께 차오르게 한다 */
.card{
  position:relative;padding:44px 32px 46px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.card::before{
  content:"";position:absolute;inset:-1px;z-index:0;border-radius:inherit;
  background:var(--light-2);
  box-shadow:inset 0 0 0 1px var(--light-2),0 22px 44px -26px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;
  /* 여기 적힌 시간은 "빠져나갈 때" 쪽 — 들어올 때보다 길게 둬 여운을 남긴다.
     글자색(아래)과 시간·곡선을 똑같이 맞춰 둘이 같은 순간에 가장 빠른 속도로
     교차하게 한다. 어긋나게 두면 교차가 느려져 글자가 더 오래 묻힌다 */
  transition:opacity .82s var(--ease-color);
}
.card:hover::before{opacity:1;transition-duration:.68s}
/* 겹판이 절대배치라 그냥 두면 글자 위를 덮는다. 글자를 한 겹 위로 올린다 */
.card__num,.card__title,.card__desc{position:relative;z-index:1}
/* 글자색은 ::before 와 시간·곡선을 똑같이 맞춰 둔다.
   한쪽만 늦추면 두 밝기가 천천히 스쳐 오히려 흐린 구간이 길어진다 */
.card__num{
  display:block;margin-bottom:26px;font-family:var(--serif);font-size:26px;font-weight:400;
  letter-spacing:.06em;color:var(--gold);line-height:1;transition:color .82s var(--ease-color);
}
.card__title{margin:0 0 14px;font-size:20px;font-weight:700;color:#fff;letter-spacing:-.035em;transition:color .82s var(--ease-color)}
.card__desc{margin:0;font-size:14.8px;line-height:1.82;color:var(--t3);transition:color .82s var(--ease-color)}
.card__arrow{
  position:absolute;left:32px;bottom:34px;width:26px;height:1px;background:var(--gold);z-index:1;
  opacity:0;transform:translateX(-8px);
  transition:opacity .6s var(--ease-soft),transform .6s var(--ease-soft);
}
.card__arrow::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:rotate(45deg);
}
/* 뜨는 동작만 카드 본체에 남긴다.
   이 transform 의 전환 시간은 .reveal(.9s)이 쥐고 있다 */
.card:hover{transform:translateY(-4px)}
.card:hover .card__num{color:var(--gold)}
.card:hover .card__title{color:var(--ink)}
.card:hover .card__desc{color:var(--ink-2)}
.card:hover .card__arrow{opacity:1;transform:none}
/* 들어올 때만 짧게 — 나갈 때는 위 기본값(.82s)이 그대로 쓰인다 */
.card:hover .card__num,
.card:hover .card__title,
.card:hover .card__desc{transition-duration:.68s}
.card:hover .card__arrow{transition-duration:.42s}

/* =========================================================
   04. DIFFERENCE (화이트 구간)
   ========================================================= */
.sec--light{background:var(--light);color:var(--ink-2)}
.sec--light .sec__title{color:var(--ink)}
.sec--light .sec__eyebrow{color:#9A7F49}
.sec--light .sec__eyebrow .idx{color:#9A7F49}
.sec--light .sec__eyebrow .idx::after,.sec--light .sec__eyebrow::before{background:#C3A264}
.sec--light .sec__lead{color:var(--ink-2)}

.cmp{
  background:#fff;border:1px solid var(--ink-line);border-radius:var(--r-xl);
  box-shadow:0 40px 80px -50px rgba(14,23,38,.5);overflow:hidden;
}
.cmp__row{display:grid;grid-template-columns:.8fr 1fr 1.15fr;align-items:stretch}
.cmp__row + .cmp__row{border-top:1px solid var(--ink-line)}
.cmp__row > div{padding:22px 26px;display:flex;flex-direction:column;justify-content:center;font-size:15.4px}
.cmp__label{background:var(--light);color:var(--ink-3);font-size:14.4px !important;font-weight:600}
.cmp__gen{color:var(--ink-3)}
.cmp__nf{
  position:relative;background:var(--ink);color:#fff;font-weight:600;letter-spacing:-.02em;
}
.cmp__row--head .cmp__label{color:var(--ink-2)}
.cmp__row--head .cmp__gen{color:var(--ink-2);font-weight:600}
.cmp__row--head .cmp__nf{padding-top:26px;padding-bottom:26px}
.cmp__row--head .cmp__nf b{font-size:17px;font-weight:700;letter-spacing:.1em;color:#fff}
.cmp__row--head .cmp__nf span{font-size:12.5px;color:var(--gold-2);letter-spacing:.04em;margin-top:3px}
.cmp__row:not(.cmp__row--head) .cmp__nf::before{
  content:"";position:absolute;left:26px;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--gold);transform:translateY(-50%);
}
.cmp__row:not(.cmp__row--head) .cmp__nf{padding-left:44px}

/* =========================================================
   05. WHY
   넓은 화면은 2 x 2 박스. 좁은 화면(900px 이하)에서는 박스를 지우고
   별을 세로로 잇는 사슬로 바꾼다 — 아래 "05. WHY 모바일" 블록 참고.
   ========================================================= */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.why__item{
  display:flex;gap:clamp(18px,2vw,30px);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(34px,3.6vw,54px) clamp(26px,2.8vw,46px);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.why__item:hover{background:var(--bg-3);border-color:rgba(195,162,100,.35)}
.why__num{
  flex:none;font-family:var(--serif);font-size:34px;font-weight:400;line-height:1;
  color:var(--gold);opacity:.85;
}
.why__title{margin:0 0 10px;font-size:20px;font-weight:700;color:#fff;letter-spacing:-.035em}
.why__desc{margin:0;font-size:15px;line-height:1.82;color:var(--t3)}

/* =========================================================
   06. CEO
   ========================================================= */
.ceo__grid{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(38px,5vw,84px);align-items:center;
}
.ceo__visual{position:relative}
.photo--ceo{aspect-ratio:3/4;box-shadow:0 50px 90px -44px rgba(0,0,0,.85)}
.ceo__tag{
  position:absolute;left:-14px;bottom:34px;z-index:3;
  padding:10px 18px;background:var(--gold);color:#0B1220;border-radius:var(--r-sm);
  font-size:11px;font-weight:700;letter-spacing:.22em;
}
.ceo__quote{
  margin:0;color:var(--ink);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(25px,3.1vw,40px);line-height:1.44;
}
.ceo__body{margin:0 0 15px;font-size:15.8px;line-height:1.92;color:var(--ink-2)}
.ceo__body:last-of-type{margin-bottom:0}
.ceo__sign{
  display:flex;align-items:baseline;gap:12px;
  margin:34px 0 0;padding-top:24px;border-top:1px solid var(--ink-line);
}
.ceo__sign span{font-size:14px;color:var(--ink-3)}
.ceo__sign b{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:.04em}

/* =========================================================
   07. PROCESS
   ========================================================= */
.proc{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.proc__step{
  position:relative;padding:44px 24px 40px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.proc__step:hover{background:var(--panel);border-color:rgba(195,162,100,.35)}
.proc__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin-bottom:22px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold-2);
  font-family:var(--serif);font-size:19px;letter-spacing:.06em;
}
.proc__title{margin:0 0 9px;font-size:17.5px;font-weight:700;color:#fff;letter-spacing:-.03em}
.proc__desc{margin:0;font-size:14.4px;line-height:1.78;color:var(--t3)}

/* =========================================================
   08. SOLUTION CASE — 이미지 카드 + 슬라이드

   카드 수가 한 화면에 들어가면 그냥 나열되고,
   넘치면 좌우 화살표·점 네비게이션이 자동으로 나타난다.
   가로 스크롤 + scroll-snap 기반이라 모바일에서는 손가락 스와이프가
   별도 코드 없이 그대로 동작한다.

   한 화면에 보이는 카드 수는 --per 로 정한다(PC 2.4 / 태블릿 1.8 / 모바일 1.5).
   --pe 는 "실제 카드 수가 --per 보다 적을 때" JS 가 넣어주는 보정값이다.
   (카드가 1장인데 1/3 폭으로 쪼그라드는 것을 막는다)
   ========================================================= */
.scase{position:relative}
/* 카드 hover 시 떠오르는 그림자가 잘리지 않도록 상하좌우로 살짝 넓힌다 */
.scase__viewport{margin:0 -6px;padding:6px}
/* --per : 한 화면에 깔리는 카드 수. 카드 폭은 여기서 나온다.
   3장이면 카드가 380px 로 작아져 사진이 눌린다. 2.4장으로 두면 카드가 460px 대로 커지고,
   오른쪽에 다음 카드가 반쯤 걸쳐 "옆으로 더 있다"는 것도 같이 보인다 */
.scase__track{
  --per:2.4;--gap:22px;
  display:flex;gap:var(--gap);margin:0;padding:0;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.scase__track::-webkit-scrollbar{display:none}
.scase__track:focus-visible{outline:2px solid #C3A264;outline-offset:6px;border-radius:var(--r-lg)}
.scase__item{
  flex:0 0 calc((100% - (var(--pe,var(--per)) - 1) * var(--gap)) / var(--pe,var(--per)));
  /* flex 아이템 기본값(min-width:auto)은 안쪽 내용이 길면 지정한 폭을 무시하고
     칸을 밀어 넓힌다. 0 으로 풀어 카드 폭이 계산값 그대로 유지되게 한다 */
  min-width:0;
  scroll-snap-align:start;
}

.scard{
  display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--ink-line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.scard:hover{border-color:#C3A264;transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(14,23,38,.45)}

/* 이미지 — 파일이 없거나 비워두면 NF 플레이스홀더가 대신 보인다.
   사례 사진이 세로형·가로형으로 섞여 들어오므로 칸은 가로 4:3 으로 잡았다.
   세로 4:5 로 두면 가로 사진의 좌우가 크게 잘리고 확대되어 흐려진다.
   원본 비율이 달라도 object-fit:cover 로 가운데를 채운다. */
.scard__thumb{
  position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(155deg,#12243C 0%,#0B1524 60%,#0E1B2C 100%);
}
/* webp/폴백을 함께 내보낼 때 img 가 picture 안에 들어간다.
   picture 는 기본이 inline 이라 그대로 두면 안쪽 img 의 height:100% 가
   기댈 높이가 없어진다. 블록으로 바꿔 칸을 그대로 채우게 한다 */
.scard__thumb picture{display:block;width:100%;height:100%}
.scard__thumb img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}
.scard__ph{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
}
.scard__ph::after{content:"";position:absolute;inset:16px;border:1px solid rgba(226,204,155,.22);border-radius:10px}
.scard__ph b{font-size:36px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.9);line-height:1}
.scard__ph span{font-size:9.5px;letter-spacing:.3em;color:var(--gold-2)}

/* 텍스트 칸 — 이미지가 주인공이 되도록 높이를 절반 수준으로 눌렀다.
   높이가 늘어날 여지를 세 군데에서 막는다.
     1) 여백·줄간격 압축
     2) 제목·설명을 각각 2줄까지만 보이게 자름 (긴 글이 들어와도 카드가 늘어나지 않음)
     3) 세로로 쌓이던 진행 단계 목록을 한 줄짜리 흐름 표기로 변경 (가장 큰 절감분) */
.scard__body{
  display:flex;flex-direction:column;flex:1;padding:16px 18px 18px;
  /* 업종·설명을 칸 한가운데로 — 가로는 가운데 정렬, 세로는 남는 여백을 위아래로 나눈다 */
  align-items:center;justify-content:center;text-align:center;
  /* 업종 한 줄이 텍스트 칸 안으로 들어오면서 칸 높이를 한 줄분 키웠다.
     카드가 한 장뿐이거나 설명이 짧아도 칸 높이가 서로 어긋나지 않는다 */
  min-height:114px;
}
/* 업종·지역 — 이미지 위 캡슐 뱃지를 걷어내고 텍스트 칸 첫 줄에 놓는다.
   업종(b)이 먼저 읽히고, 줄을 바꿔 그 아래에 설명이 온다.
   지역(i)이 있으면 가운뎃점 뒤에 한 단계 작게 붙는다 */
.scard__tag{
  margin:0 0 4px;
  display:flex;align-items:baseline;justify-content:center;gap:6px;flex-wrap:wrap;line-height:1.4;
}
/* 업종이 카드의 제목 역할을 한다 — 크게, 골드로.
   자간을 넓게 주던 라벨용 값(.1em)은 한글이 커지면 성기게 보여 줄였다 */
.scard__tag b{font-size:20px;font-weight:700;letter-spacing:-.028em;color:var(--gold)}
.scard__tag i{
  position:relative;padding-left:9px;
  font-size:12.6px;font-style:normal;font-weight:600;letter-spacing:.02em;
  color:var(--ink-3);
}
.scard__tag i::before{
  content:"";position:absolute;left:0;top:50%;width:2px;height:2px;margin-top:-1px;
  border-radius:50%;background:rgba(195,162,100,.6);
}
/* 설명(자금 내용) — 업종 아래 한 단계 작고 연하게 깔린다 */
.scard__title{
  margin:0;font-size:15px;font-weight:500;line-height:1.5;letter-spacing:-.015em;color:var(--ink-2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
/* 보조 설명(선택) — 지금 데이터에는 없지만 넣을 경우 설명줄보다 한 단계 더 작게 */
.scard__title + .scard__desc{margin-top:5px}
.scard__desc{
  margin:0;font-size:13.4px;line-height:1.55;color:var(--ink-3);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
/* 진행 단계 — "분석 › 재설계 › 검토" 한 줄. 카드 아래쪽에 붙어 카드끼리 라인이 맞는다 */
.scard__flow{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px 5px;
  margin-top:auto;padding-top:10px;
}
.scard__desc + .scard__flow{margin-top:10px;border-top:1px solid var(--ink-line)}
.scard__flow li{font-size:12.2px;line-height:1.5;letter-spacing:-.01em;color:var(--ink-3)}
.scard__flow li + li::before{content:"›";margin-right:5px;color:#C3A264;font-weight:700}

/* ---- 슬라이드 네비게이션 (카드가 넘칠 때만 표시) ---- */
.scase__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}
/* display:flex 가 hidden 속성을 덮어쓰므로 따로 지정한다 (카드가 안 넘칠 때 숨김) */
.scase__nav[hidden]{display:none}
.scase__arw{
  flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  background:#fff;border:1px solid var(--ink-line);border-radius:50%;color:var(--ink);
  transition:border-color .25s var(--ease),color .25s var(--ease),
             transform .25s var(--ease),opacity .25s var(--ease),box-shadow .25s var(--ease);
}
.scase__arw:hover:not(:disabled){
  border-color:#C3A264;color:#9A7F49;transform:translateY(-2px);
  box-shadow:0 14px 26px -18px rgba(14,23,38,.6);
}
.scase__arw:disabled{opacity:.3;cursor:default}
.scase__dots{display:flex;align-items:center;gap:8px}
.scase__dots button{
  width:8px;height:8px;padding:0;border-radius:999px;background:rgba(14,23,38,.18);
  transition:width .3s var(--ease),background .3s var(--ease);
}
.scase__dots button:hover{background:rgba(14,23,38,.35)}
.scase__dots button.is-on{width:26px;background:#C3A264}

.case__note{margin:28px 0 0;font-size:13.4px;line-height:1.75;color:var(--ink-3)}

/* =========================================================
   09. CTA
   ========================================================= */
/* 위·아래 끝은 #0A1424 로 균일하게 — 인접 섹션의 경계 그라데이션과 맞물린다 */
.cta{
  position:relative;padding:clamp(82px,8.5vw,132px) 0;overflow:hidden;
  background:
    radial-gradient(700px 320px at 50% 0%,rgba(195,162,100,.2),transparent 68%),
    linear-gradient(180deg,#0A1424 0%,#132C4B 50%,#0A1424 100%);
}
.cta__title{margin:0;color:#fff;font-size:clamp(26px,3.3vw,44px);font-weight:700;line-height:1.42;letter-spacing:-.04em}
.cta__desc{margin:22px 0 42px;font-size:clamp(15px,1.2vw,17px);color:var(--t3)}

/* =========================================================
   10. FORM (화이트 포인트 구간)
   ========================================================= */
.formbox{
  padding:clamp(30px,3.6vw,58px);background:#fff;border:1px solid var(--ink-line);border-radius:var(--r-xl);
  box-shadow:0 44px 90px -56px rgba(14,23,38,.6);
}
.form__row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:20px}
.field{margin-bottom:20px}
.form__row .field{margin-bottom:0}
.field label{display:block;margin-bottom:10px;font-size:14.5px;font-weight:600;color:var(--ink)}
.field label i{font-style:normal;color:#B08C46}
.field input,.field textarea,.select select{
  width:100%;padding:0 17px;height:56px;
  background:var(--light);border:1px solid var(--ink-line);border-radius:var(--r-md);
  font-size:15.5px;color:var(--ink);
  transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{height:auto;padding:16px 17px;line-height:1.7;resize:vertical;min-height:128px}
.field input::placeholder,.field textarea::placeholder{color:#AEB3BA}
.field input:focus,.field textarea:focus,.select select:focus{
  outline:0;background:#fff;border-color:var(--ink);box-shadow:0 0 0 3px rgba(14,23,38,.07);
}
.field input.is-err,.select.is-err select{border-color:#C2564B;background:#FEF7F6}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:46px;cursor:pointer}
.select::after{
  content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}

.check{display:flex;align-items:flex-start;gap:12px;margin:8px 0 24px;cursor:pointer}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{
  flex:none;width:21px;height:21px;margin-top:2px;border:1px solid var(--ink-line);border-radius:var(--r-xs);
  background:#fff;position:relative;transition:background .2s var(--ease),border-color .2s var(--ease);
}
.check__box::after{
  content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) scale(.4);
  opacity:0;transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.check input:checked + .check__box{background:var(--ink);border-color:var(--ink)}
.check input:checked + .check__box::after{opacity:1;transform:rotate(45deg) scale(1)}
.check input:focus-visible + .check__box{box-shadow:0 0 0 3px rgba(14,23,38,.14)}
.check.is-err .check__box{border-color:#C2564B}
.check__txt{font-size:14.8px;line-height:1.6;color:var(--ink-2)}
.check__txt b{color:var(--ink);font-weight:700}
.formbox .link{color:var(--ink-3)}
.formbox .link:hover{color:var(--ink)}
.link{margin-left:6px;padding:0;font-size:13.8px;color:var(--t3);text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--gold-2)}

.form__error{margin:0 0 18px;padding:13px 17px;border-radius:var(--r-md);background:#FDF3F2;color:#B0473C;font-size:14.5px}
.form__note{margin:20px 0 0;font-size:13.2px;line-height:1.7;color:var(--ink-3);text-align:center}
#submitBtn.is-loading{opacity:.62;pointer-events:none}
/* 필수값(성함·연락처)이 비어 있을 때의 신청 버튼 —
   실제로 잠그지는 않는다(클릭하면 비어 있는 칸으로 포커스가 간다).
   pointer-events 를 끄면 그 안내를 할 수 없으므로 모습만 눌러둔다. */
#submitBtn.is-off{opacity:.42;box-shadow:none;cursor:not-allowed}
#submitBtn.is-off:hover{background:var(--ink);transform:none;box-shadow:none}

.done{padding:clamp(32px,4vw,60px) 0;text-align:center}
.done__icon{
  width:78px;height:78px;margin:0 auto 28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#F3ECDD;color:#B08C46;
}
.done__title{margin:0 0 12px;font-size:clamp(19px,2vw,25px);font-weight:700;color:var(--ink);letter-spacing:-.035em}
.done__desc{margin:0;font-size:16px;color:var(--ink-2)}

/* =========================================================
   FOOTER
   ========================================================= */
.ft{position:relative;background:#05090F;color:var(--t3);padding:clamp(58px,6vw,82px) 0 44px;font-size:14.3px}
.ft__top{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:30px;border-bottom:1px solid var(--line);
}
.ft__brand{display:flex;align-items:center;gap:14px}
.ft__logo{height:42px;width:auto;opacity:.9}
.ft__name{margin:0;font-size:15px;font-weight:700;color:#fff;letter-spacing:.1em}
.ft__name span{margin:0 7px;color:var(--t4);font-weight:400}
.ft__links{display:flex;align-items:center;gap:13px}
.ft__links .link{margin:0;font-size:14px;color:var(--t2);text-decoration:none}
.ft__links .link:hover{color:var(--gold-2)}
.ft__bar{color:var(--t4)}
.ft__info{display:flex;flex-wrap:wrap;gap:11px 34px;margin:0;padding:28px 0}
.ft__info div{display:flex;gap:10px}
.ft__info dt{color:var(--t4)}
.ft__info dd{margin:0;color:var(--t2)}
.ft__legal{margin:0;padding-top:24px;border-top:1px solid var(--line);font-size:12.7px;line-height:1.78;color:var(--t4)}
.ft__copy{margin:22px 0 0;font-size:12.8px;letter-spacing:.04em;color:var(--t4)}

/* =========================================================
   모바일 고정 CTA
   ========================================================= */
.mcta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(7,13,22,.93);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.mcta .btn{height:54px}

/* =========================================================
   오른쪽 하단 고정 버튼 (전화 / 카카오톡)
   - 스크롤 위치와 상관없이 페이지 어디서나 항상 보인다.
   - 데스크톱은 마우스를 올리면 아이콘 옆으로 글자가 펼쳐지고,
     모바일은 아이콘만 남긴다(글자를 넣으면 하단 CTA와 겹쳐 답답해진다).
   ========================================================= */
.fab{
  position:fixed;right:22px;bottom:26px;z-index:55;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.fab__btn{
  display:flex;align-items:center;gap:0;
  height:56px;padding:0 15px;border-radius:var(--r-btn);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             gap .3s var(--ease),padding .3s var(--ease);
}
.fab__btn svg{width:26px;height:26px;flex:none}
.fab__label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:14px;font-weight:700;letter-spacing:-.02em;
  transition:max-width .34s var(--ease);
}
/* hover 모양은 마우스가 있는 환경에서만 준다.
   터치에서는 한 번 누르면 hover 가 눌러붙어, 탭할 때마다 버튼이
   들썩이고 넓어진 채로 남는다. 이게 '클릭할 때 생기는 모션'의 정체다. */
@media (hover:hover) and (pointer:fine){
  .fab__btn:hover{gap:9px;padding:0 20px;transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(0,0,0,.7)}
  .fab__btn:hover .fab__label{max-width:130px}
}
/* 카카오톡 : 공식 아이콘(카카오톡.png)을 그대로 쓴다.
   아이콘 타일의 노랑(#FAE100)과 버튼 배경을 같은 값으로 맞춰,
   네모난 타일이 알약 버튼 위에 얹힌 티가 나지 않게 했다.
   (PNG 바깥 흰 여백은 투명 처리해 assets/img/kakao.png 로 저장해 두었다) */
.fab__btn--kakao{background:#FAE100;color:#3B1E1E;padding:0 12px}
/* 배경색을 바꾸면 아이콘 타일만 원래 노랑으로 남아 네모가 드러난다.
   버튼 전체를 한 번에 밝히는 filter 로 hover 를 표현한다. */
@media (hover:hover) and (pointer:fine){
  .fab__btn--kakao:hover{background:#FAE100;padding:0 17px;filter:brightness(1.06)}
}
.fab__ico{width:32px;height:32px;flex:none;display:block}
.fab__btn--tel{background:var(--gold);color:#0B1220}
/* 전화 버튼은 누르거나 마우스를 올려도 위아래로 움직이지 않는다.
   색만 바뀌고 자리는 그대로. */
.fab__btn--tel:hover,
.fab__btn--tel:active,
.fab__btn--tel:focus,
.fab__btn--tel:focus-visible{
  transform:none;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
}
.fab__btn--tel:active{background:var(--gold)}
@media (hover:hover) and (pointer:fine){
  .fab__btn--tel:hover{background:var(--gold-2)}
}
/* ---- 전화번호 팝업 (PC 전용) ----
   마우스 환경에서는 tel: 링크를 눌러도 전화가 걸리지 않는다.
   그래서 번호를 말풍선으로 띄우고 복사까지 할 수 있게 한다. */
.fab__pop{
  position:absolute;right:0;bottom:calc(100% + 12px);width:238px;
  padding:18px 18px 16px;text-align:left;
  background:rgba(10,18,32,.97);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:0 26px 54px -20px rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  animation:fabpop .22s var(--ease);
}
.fab__pop[hidden]{display:none}
.fab__pop::after{
  content:"";position:absolute;right:24px;bottom:-7px;width:12px;height:12px;
  background:rgba(10,18,32,.97);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}
@keyframes fabpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fab__pop-lab{font-size:11px;letter-spacing:.22em;color:var(--gold-2);text-transform:uppercase}
.fab__pop-num{
  margin-top:6px;font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--t1);
  user-select:all;-webkit-user-select:all;
}
.fab__pop-copy{
  width:100%;margin-top:14px;height:38px;border:1px solid var(--line);border-radius:var(--r-btn);
  background:rgba(255,255,255,.05);color:var(--t2);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.fab__pop-copy:hover{background:var(--gold-3);border-color:rgba(195,162,100,.5);color:var(--gold-2)}
.fab__pop-copy.is-done{background:var(--gold);border-color:var(--gold);color:#0B1220}
.fab__pop-x{
  position:absolute;right:8px;top:6px;width:30px;height:30px;padding:0;
  border:0;background:transparent;color:var(--t4);font-size:22px;line-height:1;cursor:pointer;border-radius:50%;
}
.fab__pop-x:hover{background:rgba(255,255,255,.08);color:var(--t1)}

@media (prefers-reduced-motion:reduce){
  .fab,.fab__btn,.fab__label{transition:none}
  .fab__pop{animation:none}
}

/* =========================================================
   MODAL
   ========================================================= */
.modal{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal__dim{position:absolute;inset:0;background:rgba(4,8,14,.7)}
.modal__panel{
  position:relative;width:100%;max-width:640px;max-height:80vh;display:flex;flex-direction:column;
  background:#fff;color:var(--ink-2);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.7);
  animation:pop .3s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:24px 26px;border-bottom:1px solid var(--ink-line);
}
.modal__head h3{margin:0;font-size:17.5px;font-weight:700;color:var(--ink);letter-spacing:-.025em}
.modal__close{font-size:28px;line-height:1;color:var(--ink-3);padding:0 4px}
.modal__close:hover{color:var(--ink)}
.modal__body{padding:26px;overflow-y:auto;font-size:14.8px;line-height:1.8}
.modal__body h4{margin:0 0 15px;font-size:16px;color:var(--ink)}
.modal__body p{margin:0 0 15px}
.modal__body ul{margin:0 0 15px;padding-left:2px}
.modal__body li{position:relative;padding-left:14px;margin-bottom:8px}
.modal__body li::before{content:"";position:absolute;left:0;top:11px;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.modal__body b{color:var(--ink)}
.modal__memo{padding:14px 16px;background:var(--light);border-radius:var(--r-sm);font-size:13.4px;color:var(--ink-3)}

/* ---- 긴 약관 문서(개인정보 처리방침)용 ---- */
/* 조 제목 — 위쪽에 여백과 얇은 선을 둬 조와 조 사이가 눈으로 끊긴다 */
.modal__body h5{
  margin:26px 0 12px;padding-top:18px;border-top:1px solid var(--ink-line);
  font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
.modal__body h4 + p{margin-top:0}
/* 번호 목록 — ul 에 붙는 점 대신 번호를 쓴다 */
.modal__body ol{margin:0 0 15px;padding-left:20px;list-style:decimal}
.modal__body ol li{padding-left:2px;margin-bottom:6px}
.modal__body ol li::before{content:none}
/* 표 — 좁은 화면에서는 가로로 밀어 볼 수 있게 감싼다 */
.modal__tbl{margin:0 0 15px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.modal__tbl table{width:100%;min-width:280px;border-collapse:collapse;font-size:13.6px;line-height:1.65}
.modal__tbl th,.modal__tbl td{padding:9px 12px;border:1px solid var(--ink-line);text-align:left;vertical-align:top}
.modal__tbl thead th{background:var(--light);font-weight:700;color:var(--ink);white-space:nowrap}
.modal__tbl tbody th{width:96px;background:var(--light);font-weight:600;color:var(--ink);white-space:nowrap}


/* =========================================================
   스크롤 등장 애니메이션
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal--d1{transition-delay:.1s}
.reveal--d2{transition-delay:.2s}
.reveal--d3{transition-delay:.3s}
.reveal--d4{transition-delay:.4s}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1400px){
  .dots{right:16px}
  .dots span{display:none}
}
@media (max-width:1180px){
  .hero__side{display:none}
  .proc{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .scase__track{--per:1.8}
}

@media (max-width:900px){
  :root{--hd-h:66px}
  .dots{display:none}
  .hd__inner{gap:12px;padding:0 20px}
  .hd__logo img{height:32px}
  .hd__cta{display:none}
  .hd__burger{display:block}
  .hd.is-scrolled{height:60px}

  .hd__nav{
    position:fixed;top:0;right:0;z-index:68;
    width:min(330px,86vw);height:100dvh;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:calc(var(--hd-h) + 16px) 26px calc(30px + env(safe-area-inset-bottom));
    background:var(--bg-2);border-left:1px solid var(--line);
    border-radius:var(--r-xl) 0 0 var(--r-xl);
    transform:translateX(102%);transition:transform .38s var(--ease);
    overflow-y:auto;
  }
  .hd__nav.is-open{transform:none}
  .hd__nav a:not(.btn){padding:18px 2px;font-size:16.5px;border-bottom:1px solid var(--line-2)}
  .hd__nav a:not(.btn)::after{display:none}
  /* 모바일 메뉴에서는 밑줄 대신 골드 텍스트로 현재 위치를 표시 */
  .hd__nav a:not(.btn).is-active{color:var(--gold-2)}
  .hd__nav-cta{display:flex;height:54px;margin-top:26px;font-size:16px}

  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__visual{max-width:440px;width:100%;margin:0 auto}
  .hero__visual::before{display:none}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip li{padding:22px 20px 24px}
  .strip li:first-child{padding-left:20px}
  .strip li:nth-child(2n){border-right:0}
  .strip li:nth-child(n+3){border-top:1px solid var(--line)}

  .sec__head--split{display:block}
  .sec__side{margin-top:26px;max-width:none}

  .ceo__grid{grid-template-columns:1fr;gap:36px}
  .ceo__visual{max-width:420px;width:100%}
  .photo--ceo{aspect-ratio:4/5}
  .ceo__tag{left:0}

  .why{grid-template-columns:1fr}
  .mcta{display:block}
  body{padding-bottom:80px}

  /* 하단 고정 CTA(54px + 위아래 여백) 바로 위에 얹는다 */
  .fab{right:16px;bottom:calc(86px + env(safe-area-inset-bottom));gap:10px}
  .fab__btn{height:50px;padding:0 14px}
  .fab__btn svg{width:22px;height:22px}
  .fab__btn--kakao{padding:0 11px}
  .fab__ico{width:28px;height:28px}
  .fab__label{display:none}
}

/* ---- 04. DIFFERENCE 모바일 : 표(3열) → 항목 네 개를 세로로 -------------------
   좁은 화면에서 3열 표를 그대로 두면 한 칸이 좁아 글자가 잘게 끊긴다.
   2 x 2 로 접어도 칸 폭이 150px 남짓이라 한 문장이 서너 줄로 갈라지고
   글자도 13px 대까지 내려가야 했다.
   → 칸을 나누지 않고 항목 네 개를 세로로 쌓아 한 항목이 화면 폭을 다 쓴다.
     문장은 대개 한 줄에 들어가고 글자는 15px 대로 올라간다.

   항목 안은 "구분 → 일반 → NF솔루션" 순서.
   머리표(일반·NF솔루션)는 고정 폭 열이 아니라 문장 앞에 붙는 인라인 뱃지다.
   열로 잡으면 68px 이 머리표에만 쓰여 문장이 좁아지고, 그만큼 글자를 키울 수
   없다. 뱃지로 흘리면 문장이 칸 폭을 거의 다 쓰므로 본문을 16px 대까지 올릴
   수 있고, 두 번째 줄부터는 왼쪽 끝에서 다시 시작한다. */
@media (max-width:720px){
  /* 섹션 바탕을 한 단계 진한 웜그레이로 내리고 표는 순백으로 올린다.
     원래는 배경(#F6F4F0)과 카드(#fff)의 차이가 작아 카드 경계가 흐릿했다.
     바탕을 낮추면 표가 판으로 떠오르고, 본문은 흰 바탕 위 검은 글씨라
     이 섹션에서 가장 대비가 큰 조합이 된다 */
  #compare{background:#EBE7DF}
  .cmp{
    position:relative;display:block;
    background:#fff;border:1px solid #E0DACD;border-radius:var(--r-lg);overflow:hidden;
    box-shadow:0 20px 38px -28px rgba(14,23,38,.45);
  }
  /* 표 머리의 골드 헤어라인 — 카드 한 장에 포인트는 한 번만 준다 */
  .cmp::before{
    content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;
    background:linear-gradient(90deg,#C3A264,#E2CC9B 55%,rgba(195,162,100,.4));
  }
  /* 표의 머리행(구분 / 일반 / NF SOLUTION)은 항목마다 머리표로 다시 들어가므로 감춘다.
     display 를 지정하는 규칙보다 뒤에 와야 실제로 숨겨진다 */
  .cmp__row,.cmp__row + .cmp__row{
    display:block;padding:18px 16px 20px;
    background:none;border:0;border-radius:0;box-shadow:none;
  }
  .cmp__row--head{display:none}
  /* 항목 사이 경계선 — 회색 대신 옅은 골드로 깔아 같은 색 계열이 흐르게 한다.
     머리행이 첫 자식이라 실제 항목은 2~5번째다 */
  .cmp__row + .cmp__row{border-top:1px solid rgba(195,162,100,.2)}

  /* ---- 항목별 색 구분 --------------------------------------------------
     네 항목이 같은 흰 바탕에 놓이면 어디서 끊기는지 가는 선 하나로만 구분된다.
     색을 네 가지 색상으로 흩으면 네이비+골드로 잡힌 사이트 톤이 깨지므로,
     골드 한 계열 안에서 01 → 04 로 갈수록 바탕·번호·NF판을 한 단계씩
     깊게 깐다. 항목이 나뉘는 동시에 순서까지 같이 읽힌다.
     칸마다 쓰는 값은 변수로 넘겨 아래 규칙들이 그대로 받아 쓰게 한다.
     번호 색은 흰 바탕에서도 3:1 이 나오는 선(#B08C46)부터 시작해 내려간다.
     더 밝게 잡으면 세리프 숫자가 바탕에 묻힌다 */
  .cmp__row:nth-child(2){background:#FFFFFF;--nth:#B08C46;--nth-line:rgba(195,162,100,.3);--nth-bg:#FAF1DE;--nth-bd:rgba(195,162,100,.32)}
  .cmp__row:nth-child(3){background:#FCF9F3;--nth:#A17E3B;--nth-line:rgba(184,146,74,.34);--nth-bg:#F7ECD3;--nth-bd:rgba(184,146,74,.34)}
  .cmp__row:nth-child(4){background:#F9F5EC;--nth:#92702F;--nth-line:rgba(166,128,58,.38);--nth-bg:#F4E6C8;--nth-bd:rgba(166,128,58,.36)}
  .cmp__row:nth-child(5){background:#F6F1E5;--nth:#806026;--nth-line:rgba(143,110,44,.42);--nth-bg:#F0DFBB;--nth-bd:rgba(143,110,44,.4)}

  /* 구분값(접근 방식·상담 방식…)은 항목의 제목 자리로.
     사이트 전체가 쓰는 세리프 골드 인덱스(01·02…)를 앞에 붙여 톤을 맞춘다 */
  /* `.cmp__row > div`(기본 규칙)보다 선택자가 강해야 가운데 정렬이 풀린다 */
  /* 제목은 본문(16.4px)보다 확실히 커야 항목의 머리로 잡힌다.
     둘이 비슷하면 어디가 항목명인지 훑어서 알 수 없다 */
  .cmp__row > .cmp__label{
    display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:9px;
    padding:0 0 11px;margin-bottom:14px;
    background:none;border-bottom:1px solid var(--nth-line);
    color:var(--ink);font-size:18px !important;font-weight:700;letter-spacing:-.025em;
  }
  .cmp__label::before{
    font-family:var(--serif);font-size:15px;font-weight:400;letter-spacing:.06em;
    line-height:1;color:var(--nth);
  }
  .cmp__row:nth-child(2) .cmp__label::before{content:"01"}
  .cmp__row:nth-child(3) .cmp__label::before{content:"02"}
  .cmp__row:nth-child(4) .cmp__label::before{content:"03"}
  .cmp__row:nth-child(5) .cmp__label::before{content:"04"}

  /* 일반 / NF 는 문장 한 덩어리로 흘린다 (머리표는 아래에서 인라인 뱃지로) */
  .cmp__row > .cmp__gen,
  .cmp__row:not(.cmp__row--head) .cmp__nf{
    display:block;padding:0;line-height:1.6;
  }
  /* "일반" 쪽은 비교 대상이라 한 단계 눌러 둔다. 다만 회색이 차가우면
     웜 아이보리 바탕에서 탁해 보이므로 같은 웜 계열 회색을 쓴다 */
  .cmp__row > .cmp__gen{margin-bottom:11px;font-size:15.4px;color:#63605A}
  /* NF 쪽은 진한 네이비 판을 깔지 않는다. 네 번 반복되면 화면이 무거워지고,
     흰 글씨는 작은 화면에서 획이 뭉쳐 보인다.
     옅은 골드 바탕 + 진한 글자로 바꿔 무게는 덜고 대비는 올린다 */
  .cmp__row:not(.cmp__row--head) .cmp__nf{
    padding:12px 14px 13px;border-radius:var(--r-sm);
    background:var(--nth-bg);border:1px solid var(--nth-bd);
    font-size:16.4px;font-weight:700;letter-spacing:-.025em;color:var(--ink);
  }

  /* 절대배치 뱃지 → 문장 앞에 붙는 인라인 알약.
     vertical-align 로 살짝 띄워야 본문 글자 가운데에 걸린다 */
  .cmp__gen::before,
  .cmp__row:not(.cmp__row--head) .cmp__nf::before{
    position:static;transform:none;display:inline-block;
    width:auto;height:auto;margin:0 8px 0 0;padding:3px 8px 4px;border-radius:999px;
    font-size:10.5px;font-weight:700;letter-spacing:.02em;line-height:1;
    vertical-align:2px;
  }
  .cmp__gen::before{content:"일반";background:rgba(20,25,35,.055);color:#7A776E}
  /* NF 뱃지는 진한 골드 판에 흰 글씨 — 10.5px 작은 글씨라 옅은 골드 위
     골드 글씨로는 대비가 3:1 밑으로 떨어진다 */
  .cmp__row:not(.cmp__row--head) .cmp__nf::before{
    content:"NF솔루션";background:#8A6B2E;color:#FFF7E6;
  }
}

/* ---- 05. WHY 모바일 : 박스 → 별 사슬 -----------------------------------------
   한 열로 떨어지면 테두리 있는 박스 네 개가 세로로 길게 이어져, 화면에는
   내용보다 칸막이가 먼저 들어온다.
   박스를 지우고 항목마다 별 하나를 두어 세로로 이으면 네 가지가 따로 놓인
   덩어리가 아니라 하나로 이어진 흐름으로 읽히고, 박스 여백만큼 길이도 준다.
   (넓은 화면은 2 x 2 박스 그대로다) */
@media (max-width:900px){
  .why{gap:0}
  .why__item{
    position:relative;display:block;max-width:760px;
    padding:0 0 30px 30px;background:none;border:0;border-radius:0;
  }
  .why__item:last-child{padding-bottom:0}
  /* 박스가 없으니 칸이 밝아지는 hover 도 필요 없다 (터치 화면에서는 눌린 뒤 남는다) */
  .why__item:hover{background:none;border-color:transparent}
  /* 별 — 골드 점에 두 겹 헤일로. 번호(첫 줄)의 높이에 맞춰 앉힌다 */
  .why__item::before{
    content:"";position:absolute;left:0;top:9px;z-index:1;
    width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
    background:var(--gold-2);
    box-shadow:0 0 0 4px rgba(195,162,100,.12),0 0 16px 3px rgba(195,162,100,.45);
  }
  /* 별과 별을 잇는 선. 마지막 별 아래로는 잇지 않는다 */
  .why__item:not(:last-child)::after{
    content:"";position:absolute;left:0;top:16px;bottom:-4px;width:1px;margin-left:-.5px;
    background:linear-gradient(180deg,rgba(195,162,100,.45),rgba(195,162,100,.1));
  }
  .why__num{
    display:block;margin-bottom:10px;font-size:19px;line-height:1;letter-spacing:.14em;opacity:.9;
  }
  .why__desc{max-width:52ch}
}

@media (max-width:640px){
  .wrap{padding:0 20px}
  .hero{padding-top:calc(var(--hd-h) + 38px)}
  .hero__btns{gap:10px;margin-top:26px}
  .hero__btns .btn{flex:1 1 100%}
  .eyebrow{margin-bottom:18px;font-size:11.5px;gap:11px}
  .eyebrow::before{width:26px}
  .btn{height:54px;font-size:15.5px}
  .btn--lg{height:58px;width:100%;max-width:340px}
  .quote{font-size:64px;margin-bottom:-10px}

  /* 세로 4:5 인물 프레임은 모바일에서 화면 하나를 통째로 차지한다.
     정사각으로 줄여도 인물 사진은 가운데가 그대로 보인다 (object-fit:cover) */
  .photo--hero,.photo--ceo{aspect-ratio:1/1}
  /* 손가락으로 넘기는 화면에서 스크롤 유도 표시는 자리만 차지한다 (약 120px) */
  .scroll{display:none}

  /* 키워드 4개를 세로로 쌓으면 280px 을 먹는다. 2열로 묶어 절반으로 */
  .strip{margin-top:28px}
  .strip li{padding:14px 16px 16px}
  .strip b{font-size:14.8px}
  .strip span{margin-top:3px;font-size:12.8px}

  /* ---- 03. SERVICE (모바일) — 네 칸 2 x 2 박스 ---------------------------
     한 칸씩 세로로 쌓으면 카드 하나가 화면 반을 먹어, 컨설팅 네 가지를
     확인하려면 화면을 세 번 넘겨야 한다.
     2열로 묶으면 "무엇을 해주는 곳인가"가 한 화면에 잡힌다.
     대신 칸 너비가 절반(약 150px)이 되므로,
       · 글자는 한 단계 줄이되 회색은 밝게 올려 대비를 보전하고
       · 바탕을 --bg-2 로 띄워 테두리 없이도 박스가 박스로 읽히게 하고
       · 번호 아래 여백(26px)은 헤어라인 한 줄로 대신해 세로 길이를 줄인다. */
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{
    /* 좌우 두 칸의 글줄 수가 달라도 박스 높이는 그리드가 맞춘다 */
    display:flex;flex-direction:column;
    padding:16px 14px 18px;border-radius:var(--r-md);
    background:var(--bg-2);border-color:rgba(255,255,255,.09);
  }
  /* 번호와 제목 사이 26px 여백은 좁은 칸에서 낭비다.
     옅은 골드 헤어라인으로 바꿔 간격은 줄이고 칸의 머리 구분은 남긴다 */
  .card__num{
    margin:0 0 9px;font-size:15px;letter-spacing:.08em;
    padding-bottom:9px;border-bottom:1px solid rgba(195,162,100,.22);
  }
  .card__title{margin-bottom:7px;font-size:15.6px;line-height:1.4}
  /* 좁은 칸에서 15.4px 는 한 줄에 8자밖에 못 들어가 문장이 잘게 끊긴다.
     13.4px 로 내려 한 줄 10자를 확보하고, 흐려지는 만큼 회색을 밝힌다 */
  .card__desc{font-size:13.4px;line-height:1.62;color:rgba(255,255,255,.66)}
  /* 화살표는 hover 로만 보이는 표시라 터치 화면에서는 자리만 차지한다 */
  .card__arrow{display:none}
  .proc{grid-template-columns:1fr;gap:10px}
  .proc__step{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;padding:18px;align-items:center}
  .proc__num{margin:0;grid-row:span 2;width:44px;height:44px;font-size:17px}
  .proc__title{align-self:end}
  .proc__desc{align-self:start}

  /* 별 사슬 — 좁은 화면에서는 별과 글 사이, 별과 별 사이를 함께 줄인다 */
  .why__item{padding:0 0 26px 24px}
  .why__num{margin-bottom:8px;font-size:17px}
  .why__title{margin-bottom:6px;font-size:18px}

  /* 좌우 여백을 조금 덜어 문장 폭을 넓힌다 */
  .cmp__row,.cmp__row + .cmp__row{padding:17px 14px 19px}
  .cmp__row:not(.cmp__row--head) .cmp__nf{padding:11px 12px 12px}

  .ceo__grid{gap:26px}
  .ceo__sign{margin-top:24px;padding-top:18px}
  .cta{padding:56px 0}
  .cta__desc{margin:16px 0 30px}

  .formbox{padding:22px 18px}
  .form__row{grid-template-columns:1fr;gap:0;margin-bottom:0}
  .field,.form__row .field{margin-bottom:16px}
  .field label{margin-bottom:7px}
  .field input,.select select{height:52px}
  .field textarea{min-height:104px}
  .check{margin:4px 0 18px}

  .ft{padding-top:44px}
  .ft__info{flex-direction:column;gap:10px;padding:20px 0}
  .ft__top{flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:22px}
  .ft__copy{margin-top:16px}
  .pc{display:none}
  .modal__panel{max-height:86vh}
  .modal__body{padding:22px}

  /* ---- 모바일 가독성 ----------------------------------------------------
     PC 기준으로 잡힌 좁은 자간(-.035em ~ -.042em)은 작은 화면의 한글에서
     글자가 서로 붙어 보인다. 제목 자간을 풀고 본문은 한 단계 키운다.
     섹션 여백은 줄여 한 화면에 내용이 더 들어오게 한다. */
  :root{
    --sec-y:52px;
    /* 보조 텍스트 회색이 배경과 너무 가까워 작은 화면에서 흐리게 읽힌다.
       밝은 구간 #8A9099(대비 3.2:1) → 5.1:1, 어두운 구간 .4 → .55 로 올린다 */
    --ink-3:#5F6670;
    --t4:rgba(255,255,255,.55);
  }
  /* 밝은 섹션 경계의 그라데이션 여백(96px)도 모바일에서는 과하다 */
  .sec--white,.sec--light{--edge:40px;--edge-gap:24px}
  .sec__head{margin-bottom:26px}
  .sec__eyebrow{margin-bottom:14px}

  .hero__title{letter-spacing:-.026em;line-height:1.35}
  .hero__desc{font-size:16px;line-height:1.75;margin-top:18px}
  .sec__title{letter-spacing:-.02em;line-height:1.44}
  .sec__title--lg{line-height:1.42}
  .sec__lead{margin-top:16px;font-size:15.8px;line-height:1.8}
  .sec__side{margin-top:18px;font-size:15.4px;line-height:1.72;padding-left:16px}
  .ceo__quote{font-size:24px;letter-spacing:-.024em;line-height:1.5}
  .ceo__body{margin-bottom:12px;font-size:15.8px;line-height:1.8}

  .card__title,.why__title,.proc__title{letter-spacing:-.022em}
  /* .card__desc 는 2 x 2 박스라 따로(13.4px) 잡는다 — 위 SERVICE 블록 참고 */
  .proc__desc,.why__desc{font-size:15.4px;line-height:1.7}
  /* ---- 케이스 (모바일) — 한 번에 두 장씩 넘기는 슬라이드 -----------------
     전체를 2 x 2 로 깔면 사례가 늘어날수록 섹션이 아래로 계속 길어진다.
     가로 슬라이드로 두면 사례가 몇 개든 섹션 높이는 두 장 분량으로 고정되고,
     넘길 것이 있다는 것도 점으로 보인다.
     한 장 반(--per:1.5) — 두 장이면 칸이 170px 대로 좁아져 사진이 눌리고,
     딱 한 장이면 옆에 더 있다는 것이 안 보인다. 반쯤 걸친 다음 카드가 그 신호가 된다 */
  .scase__track{--per:1.5;--gap:12px}
  /* 화살표는 44px 로 줄이고 위 여백도 줄인다 (손가락으로도 넘길 수 있어 보조 수단) */
  .scase__nav{gap:14px;margin-top:20px}
  .scase__arw{width:44px;height:44px}
  /* 좁은 칸에서도 같은 4:3 을 유지한다 (사진마다 잘리는 위치가 달라지지 않게) */
  .scard__thumb{aspect-ratio:4/3}
  .scard__ph b{font-size:26px}
  .scard__ph span{font-size:8.5px;letter-spacing:.24em}
  .scard__ph::after{inset:11px}
  /* 업종은 텍스트 칸 첫 줄. 좁은 칸에서는 자간만 한 단계 줄인다 */
  .scard__tag{margin-bottom:2px}
  .scard__tag b{font-size:16.5px;letter-spacing:-.026em}
  .scard__tag i{font-size:11.6px;letter-spacing:0}
  /* 칸이 좁아진 만큼 글자·여백을 한 단계씩 줄인다 (업종 한 줄분은 남겨둔다) */
  .scard__body{padding:8px 9px 10px;min-height:68px}
  .scard__title{font-size:13.4px;line-height:1.5;letter-spacing:-.012em}
  .scard__desc{font-size:12.4px;line-height:1.55}
  /* 진행 단계는 좁은 칸에서 서너 줄로 흩어지고, 한 줄로 눕혀도 말줄임에
     걸려 끝까지 읽히지 않는다. 네 칸이 한 화면에 들어오도록 모바일에서는
     감춘다 (이미지·제목·설명만 남긴다) */
  .scard__flow{display:none}
  .case__note{font-size:13.8px;line-height:1.8}

  .cta__title{letter-spacing:-.024em;line-height:1.46}
  .cta__desc{font-size:15.8px;line-height:1.8}

  .field label{font-size:15px}
  .check__txt{font-size:15.2px;line-height:1.62}
  .form__note{font-size:13.6px;line-height:1.75}
  .modal__body{font-size:15.4px;line-height:1.82}

  .ft{font-size:14.8px}
  .ft__legal{font-size:13.2px;line-height:1.82}
  .ft__copy{font-size:13.2px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}