/* 완판애드 [WIP]
   글꼴은 Pretendard 하나. 각 페이지 <head> 에서 jsDelivr 의 가변 글꼴(동적 서브셋)을 불러온다.
   불러오지 못하는 환경이면 아래 font-family 의 시스템 글꼴로 내려간다. */

/* ============================================================
   디자인 시스템 — 기준은 #performance(광고집행) 섹션이다.
   거기서 확정한 크기 · 굵기 · 색 · 라운드 · 모션을 토큰으로 뽑아
   나머지 섹션이 전부 같은 값을 쓰게 한다.
   새 값을 쓰고 싶으면 먼저 여기에 토큰을 만든다.
   ============================================================ */
:root{
  /* ── 색 ──────────────────────────────────────────────
     브랜드 블루는 하나뿐이다. 예전엔 #2039CE 와 #203ACE 가
     섞여 있었는데 눈으로는 못 잡고 코드에서만 갈린다. */
  --brand:#2039CE;
  --brand-deep:#16256E;    /* 그라디언트 끝 */
  --brand-soft:#EAF0FE;    /* 라벨 · 칩 배경 */
  --brand-line:#CBD8FF;

  --navy:#1C242F;          /* 상단 배너 · 푸터 */
  --navy-soft:#2E3946;     /* hover */

  --ink:#1D1D1F;           /* 제목, 본문의 검정. 사이트 전체 검정 글씨는 이 값 하나 */
  --gray:#6E7885;          /* 본문 보조 — 위치 · 광고기간 */
  --gray-soft:#9AA3B2;     /* 더 흐린 보조 — 지도의 서울 점과 같은 값 */
  --line:#E6E9ED;          /* 테두리 */
  --line-soft:#EDEDED;     /* 리스트 구분선 */
  --paper:#FAFBFC;
  --tint:#F4F8FE;          /* 아주 연한 파랑 — 섹션 구분용 띠 */
  --warn:#F04452;          /* 문제를 짚는 자리 */
  --band:#DCE8FE;

  /* ── 글자 ────────────────────────────────────────────
     Pretendard 가변 글꼴. 굵기는 300/400/700 세 가지만 쓴다. 800(ExtraBold) 이상은 쓰지 않는다. */
  --font-display:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',system-ui,sans-serif;

  --t-display:52px;        /* 히어로 · 섹션 타이틀 */
  --t-card:24px;           /* 카드 제목 */
  --t-lead:18px;           /* 리드 문장 · 강조 칩 */
  --t-body:16px;           /* 본문 · 위치/광고기간 */
  --t-meta:14.5px;         /* 캡션 */
  --t-tag:12px;            /* 태그 */

  --ls-display:-.03em;
  --ls-body:-.02em;

  /* ── 라운드 — 네 단계뿐 ─────────────────────────────── */
  --r-2xs:5px;             /* 미니 배지 */
  --r-xs:8px;              /* 사진 · 칩 · 버튼 */
  --r-sm:12px;             /* 입력 · 컨트롤 */
  --r-md:18px;             /* 카드 */
  --r-lg:24px;             /* 큰 판 */
  --r-pill:999px;          /* 알약 — CTA · 라벨 */

  /* ── 모션 — #performance 에서 정한 값 ────────────────── */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.42s;
  --dur-slow:.6s;
  --stagger:55ms;
  --rise-y:9px;            /* 떠오르는 거리. 이보다 크면 과해진다 */

  /* ── 섹션 리듬 ─────────────────────────────────────── */
  --sec-pad:120px;         /* 섹션 안쪽 위아래 여백. 섹션끼리는 마진 없이 붙이고 이 값으로만 띄운다 */
  --sec-gap:120px;         /* 스타일가이드 전용. 랜딩 섹션에는 쓰지 않는다 */

  --container:1200px;
  --topskin-h:96px;
  --gnb-h:72px;
}

*,*::before,*::after{ box-sizing:border-box; }
/* 바탕은 푸터 색. 상단 남색은 .topskin 이 직접 칠하고 본문 둥근 모서리 뒤도
   .topskin 이 받치므로 body 가 남색일 필요가 없다. 남색으로 두면 폰에서 맨
   아래까지 당겼을 때 튕겨 나온 자리에 남색이 크게 비친다.
   끝에서 튕기는 것 자체도 막아 문서 밖이 드러나지 않게 한다. */
html{ background:var(--paper); overscroll-behavior-y:none; }
/* 이미지 끌기, 길게 눌러 저장 막기. 우클릭은 main.js 에서 막는다. */
img{ -webkit-user-drag:none; -webkit-touch-callout:none; user-select:none; }
/* 한국어는 단어 단위로 꺾는다. 이게 없으면 폭이 조금만 좁아져도
   "전 / 략", "서비 / 스" 처럼 글자 중간에서 끊긴다. 브라우저 확대
   (110% 이상)로 화면이 1000px 언저리가 될 때 특히 심했다.
   공백 없는 긴 영문, 주소만 예외로 끊어 넘침을 막는다. */
body{
  word-break:keep-all; overflow-wrap:break-word;
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-display);
  font-size:16px; line-height:1.6; letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ---------- 상단 배너 ---------- */
.topskin{ height:var(--topskin-h); background:var(--navy); }
.topskin__inner{
  display:flex; align-items:center; justify-content:center;
  height:100%;
}
.topskin__art{ height:42px; width:auto; max-width:calc(100% - 32px); margin-bottom:24px; }   /* 120 에서 위쪽만 24 줄였다. 아래 여백 39 는 그대로 */

/* ---------- 흰 본문 ---------- */
.shell{
  position:relative; z-index:1;
  background:#fff; border-radius:var(--r-lg) var(--r-lg) 0 0;
  margin-top:-24px; min-height:100vh;
}

/* ---------- 상단바 ---------- */
.gnb{ position:sticky; top:0; z-index:50; background:#fff; border-radius:var(--r-lg) var(--r-lg) 0 0; }
.gnb.is-stuck{ border-radius:0; box-shadow:0 1px 0 var(--line); }
.gnb__inner{ display:flex; align-items:center; height:var(--gnb-h); gap:28px; }

.gnb__logo img{ height:30px; width:auto; }

.gnb__nav{ display:flex; align-items:center; margin-left:auto; }
.gnb__nav a{
  position:relative; font-size:15.5px; font-weight:600; color:#3B4552;
  padding:6px 18px; transition:color .15s;
}

.gnb__nav a:hover{ color:var(--navy); }
.gnb__nav a + a::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:12px; background:var(--line);
}

.gnb__cta{
  margin-left:20px; display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 22px; border-radius:var(--r-pill);
  background:var(--navy); color:#fff; font-size:15px; font-weight:700;
  transition:background .15s;
}
.gnb__cta:hover{ background:var(--navy-soft); }

.gnb__burger{
  display:none; margin-left:auto; width:40px; height:40px; padding:0;
  background:none; border:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.gnb__burger span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }
.gnb__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.gnb__burger.is-open span:nth-child(2){ opacity:0; }
.gnb__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.drawer{ display:none; border-top:1px solid var(--line); background:#fff; }
.drawer.is-open{ display:block; }
.drawer a{ display:block; padding:16px 0; font-size:16px; font-weight:600; border-bottom:1px solid var(--line); }
.drawer a:last-child{ border-bottom:0; }

/* ---------- 큰 배너 ---------- */
.banner{
  position:relative; overflow:hidden;
  height:500px;
  background:#fff;              /* 히어로는 흰 바탕. 옅은 회색은 바로 아래 회사소개로 내렸다 */
}
.banner__inner{
  position:relative; z-index:1; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  padding-block:0;
}
/* 아이브로 — 다른 섹션의 라벨은 'OUR SOLUTION' 같은 짧은 태그라 알약에 넣지만,
   여기는 문장이라 알약에 가두면 길쭉한 덩어리가 된다. 색으로만 구분한다. */
.banner__eyebrow{
  margin-bottom:14px; font-family:var(--font-display);
  font-size:17px; font-weight:700; letter-spacing:var(--ls-body);
  color:#0E273F;   /* 타이틀 그라디언트 시작색과 같은 남색, 단색 */
}
.banner__title{ font-family:var(--font-display); font-size:calc(var(--t-display) + 4px); font-weight:700; letter-spacing:var(--ls-display); line-height:1.34; }
/* 메인 타이틀만 남색에서 강철빛 파랑으로 흐르는 그라디언트. 글자 폭에 맞춰야
   오른쪽 끝 색까지 글자에 닿는다 (블록 전체 폭이면 끝 색이 빈 공간에 깔린다). */
.banner__title{
  width:fit-content;
  background:linear-gradient(90deg,#0E273F 0%,#4D7095 100%);   /* 끝색 #6184A7 에서 한 단계 진하게 */
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.banner__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  margin-top:32px; height:56px; padding:0 28px; border-radius:var(--r-pill);
  /* 연한 파랑 바탕에 검정을 얹으면 글씨만 따로 논다.
     같은 파랑 축의 짙은 남파랑으로 내려서 한 덩어리로 묶는다. */
  background:var(--brand-soft); color:var(--brand-deep); font-size:17px; font-weight:700;
  letter-spacing:var(--ls-body);
  transition:background .15s, transform .2s;
}
.banner__btn{ position:relative; isolation:isolate; }
.banner__btn-mark{ flex:none; width:24px; height:24px; }
/* lucide arrow-right (ISC) — 여긴 선으로 둔다. 채우면 화살표가 뭉개진다. */
.banner__btn-go{
  flex:none; width:19px; height:19px; margin-left:1px;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .22s var(--ease);
}
.banner__btn:hover .banner__btn-go{ transform:translateX(3px); }

/* 2px 보더 — 12시에서 시작해 시계 방향으로 파랑이 네이비로 넘어간다. */
.banner__btn::before,
.banner__btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:2px; pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.banner__btn::before{
  background:conic-gradient(from -90deg,
    var(--brand) 0deg, var(--navy) 180deg, var(--brand) 360deg);
}

/* 그 위로 밝은 점 하나가 12시에서 출발해 오른쪽 → 아래 → 왼쪽 → 제자리.
   한 바퀴 도는 동안 호가 0 으로 줄어서, 끝나면 자국이 남지 않는다.
   각도는 @property 로 선언해야 보간된다. */
@property --cta-ang{ syntax:'<angle>'; inherits:false; initial-value:-90deg; }
@property --cta-arc{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.banner__btn::after{
  background:conic-gradient(from var(--cta-ang),
    #BFE2FF 0deg,
    #6FA8FF calc(var(--cta-arc) * .5),
    transparent var(--cta-arc),
    transparent 360deg);
}
@media (prefers-reduced-motion:no-preference){
  /* 한 바퀴 슝 돌고, 그만큼 쉬고, 다시. 쉬지 않고 계속 돌면
     버튼이 아니라 로딩 스피너로 읽힌다. */
  .banner__btn::after{ animation:cta-sweep 3.4s linear .5s infinite; }
}
@keyframes cta-sweep{
  0%  { --cta-ang: -90deg; --cta-arc: 0deg; }   /* 12시에서 생겨나 */
  6%  { --cta-ang: -60deg; --cta-arc:58deg; }
  44% { --cta-ang: 240deg; --cta-arc:58deg; }   /* 오른쪽 → 아래 → 왼쪽 */
  52% { --cta-ang: 270deg; --cta-arc: 0deg; }   /* 제자리에서 사라지고 */
  100%{ --cta-ang: 270deg; --cta-arc: 0deg; }   /* 나머지 절반은 쉰다 */
}
.banner__btn:hover{ background:var(--brand-line); transform:translateY(-1px); }

.banner__visual{ flex:none; display:flex; align-items:center; justify-content:center; }

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  :root{ --topskin-h:88px; --gnb-h:60px; }
  .topskin__art{ height:27px; margin-bottom:0; }
  .gnb__logo img{ height:24px; }
  .gnb__nav{ display:none; }
  .gnb__cta{ margin-left:auto; height:36px; padding:0 14px; font-size:14px; }
  .gnb__inner{ gap:8px; }    /* 데스크톱 28px 이 그대로 남아 상담하기와 메뉴 사이가 36px 이었다 */
  .gnb__burger{ display:flex; margin-left:0; }
  .banner{ height:auto; }
  .banner__inner{ flex-direction:column; text-align:center; height:auto; padding-block:44px; gap:28px; }
  .banner__eyebrow{ font-size:15px; margin-bottom:10px; }
  .banner__title{ font-size:34px; margin-inline:auto; }   /* 가운데 정렬된 히어로라 fit-content 블록도 가운데로 */
  .banner__visual{ width:100%; }
}

/* ---------- 중간 섹션 자리 (빈 공간) ---------- */

/* ---------- 콘텐츠 3개 ---------- */
.stories__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:56px; }
.stories__head h2{
  font-family:var(--font-display);
  font-size:var(--t-display); font-weight:700;
  line-height:1.34; letter-spacing:var(--ls-display); color:var(--ink);
}
.stories__more{ font-size:14px; color:var(--gray); transition:color .15s; }
.stories__more:hover{ color:var(--navy); }
.stories__more span{ margin-left:2px; }

.stories__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

.story__thumb{
  position:relative; aspect-ratio:4/3; border-radius:var(--r-sm); overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
  padding:26px 20px; text-align:center;
  transition:transform .25s ease;
}
.story:hover .story__thumb{ transform:translateY(-3px); }
.story__label{ font-size:13px; font-weight:600; opacity:.72; }
.story__head{
  margin-top:8px; font-family:var(--font-display); font-weight:700;
  font-size:22px; line-height:1.36; letter-spacing:-.025em;
}
.story__logo{ position:absolute; left:20px; bottom:20px; height:26px; width:auto; }

.story__thumb--navy{ background:var(--navy); color:#fff; }
.story__thumb--blue{ background:var(--brand); color:#fff; }
.story__thumb--light{ background:#E9ECF1; color:var(--ink); }
.story__thumb--navy .story__logo,
.story__thumb--blue .story__logo{ filter:brightness(0) invert(1); }

.story__title{ margin-top:14px; font-size:16px; font-weight:700; letter-spacing:-.02em; }
.story__desc{
  margin-top:6px; font-size:14px; color:var(--gray); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.story__meta{ display:block; margin-top:10px; font-size:13px; color:var(--gray-soft); }

/* ---------- 푸터 ---------- */
.footer{ border-top:1px solid var(--line); padding:40px 0 56px; background:var(--paper); }
.footer__top{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }
.footer__logo{ height:36px; width:auto; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:28px; }
.footer__nav a{ font-size:14px; font-weight:700; color:var(--ink); transition:color .15s; }
.footer__nav a:hover{ color:var(--navy); }
.footer__nav a.is-strong{ color:var(--ink); }

.footer__info p{ font-size:13px; color:var(--gray); line-height:1.95; }
.footer__info span{ position:relative; padding-right:18px; }
.footer__info span:last-child{ padding-right:0; }
.footer__info span:not(:last-child)::after{
  content:""; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:1px; height:11px; background:var(--line);
}


.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:28px; padding-top:22px; border-top:1px solid var(--line);
}
.footer__copy{ font-size:13px; color:var(--gray-soft); }
.footer__sns{ display:flex; gap:16px; }
.footer__sns a{ color:#B0B8C1; transition:color .15s; }
.footer__sns a:hover{ color:var(--navy); }
.footer__sns svg{ width:20px; height:20px; display:block; }

@media (max-width:900px){
  .stories__grid{ grid-template-columns:1fr; gap:28px; }
  .story__head{ font-size:24px; }

  .footer__top{ flex-direction:column; align-items:flex-start; gap:20px; }
  .footer__nav{ gap:18px 20px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------- 진입 애니메이션 ---------- */
/* 상단 배너가 위에서 내려오고, 배너 카피가 순서대로 떠오른다.
   첫 화면에 보이는 것만 움직이고, 모션 최소화 설정에서는 전부 꺼진다. */
@media (prefers-reduced-motion:no-preference){
  .topskin{ animation:enter-slide-down .6s cubic-bezier(.16,1,.3,1) backwards; }
  .gnb__inner > *{ animation:enter-rise .5s cubic-bezier(.16,1,.3,1) .14s backwards; }
  .banner__visual{ animation:enter-rise .75s cubic-bezier(.16,1,.3,1) .28s backwards; }
  .banner__eyebrow{ animation:enter-rise .55s cubic-bezier(.16,1,.3,1) .18s backwards; }
  .banner__title{   animation:enter-rise .55s cubic-bezier(.16,1,.3,1) .26s backwards; }
  .banner__btn{     animation:enter-rise .55s cubic-bezier(.16,1,.3,1) .36s backwards; }
}

@keyframes enter-slide-down{
  from{ transform:translateY(-100%); }
  to{ transform:translateY(0); }
}
@keyframes enter-rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- 이미지 플레이스홀더 ---------- */
/* 실제 아이콘·이미지·일러스트가 들어올 자리. data-ph 에 설명을 적는다. */
.ph{
  display:grid; place-items:center; text-align:center; padding:8px;
  background:rgba(255,255,255,.6); border:1.5px dashed #B9C3D2; border-radius:var(--r-sm);
  color:#8A96A6; font-size:12px; font-weight:600; letter-spacing:-.01em; line-height:1.4;
}
.ph::after{ content:attr(data-ph); }

/* ---------- 되는 이유 ---------- */
.reasons{ padding:var(--sec-pad) 0; background:#fff; }
.reasons__title{
  font-family:var(--font-display);
  font-size:var(--t-display); font-weight:700;
  line-height:1.34; letter-spacing:var(--ls-display); color:var(--ink);
  margin-bottom:56px;
  text-align:center;   /* 흐름, 프로세스 제목과 같은 가운데 */
}

.reasons__grid{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr);
  gap:16px; min-height:544px;
}
.reason{
  position:relative; overflow:hidden;
  background:#E4EBFA; border-radius:var(--r-sm); padding:26px 26px 22px;
}
.reason--lead{ grid-row:1 / span 3; background:#EAEDF3; display:flex; flex-direction:column; }
.reason:not(.reason--lead){ padding-right:180px; }

.reason__no{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:13px; font-weight:700; margin-bottom:14px;
}
.reason h3{ font-size:19px; font-weight:700; letter-spacing:-.025em; line-height:1.44; }
.reason p{ margin-top:8px; font-size:14.5px; font-weight:700; color:#5C6675; word-break:keep-all; }
/* 기법 이름만 한 단계 올린다. 나머지 세 카드는 통신사, 카드사, 결번처럼
   부르는 이름이 이미 박혀 있는데 이 카드만 설명뿐이었다. */
.reason p b{ font-weight:700; color:var(--navy); }

/* 3D 일러스트. 배경을 날린 대신 바닥 그림자를 CSS 로 다시 깐다.
   큰 카드는 글 아래 남는 자리 한가운데, 옆 카드 셋은 오른쪽 세로 가운데에 띄운다. */
.reason__art--matrix,
.reason__art--side{
  filter:drop-shadow(0 14px 18px rgba(28,36,47,.14));
  transition:transform .5s var(--ease);
}
.reason__art--matrix{ display:block; width:min(100%,360px); height:auto; aspect-ratio:1; margin:auto; }
.reason__art--side{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:168px; height:168px;
}
.reason:hover .reason__art--matrix{ transform:translateY(-6px); }
.reason:hover .reason__art--side{ transform:translateY(calc(-50% - 6px)); }

.laurels{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px; margin-top:24px; }
.laurels li{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:#7A8595; }
/* 잎이 면으로 채워져 있어 선으로 그리던 때보다 무겁다. 글자보다 한 단계 옅게 둔다. */
.laurels svg{ width:10px; height:22px; fill:currentColor; color:var(--gray-soft); flex:none; }
.laurels .flip{ transform:scaleX(-1); }

@media (max-width:900px){
  .reasons__title{ font-size:30px; margin-bottom:36px; }
  .reasons__grid{ grid-template-columns:1fr; grid-template-rows:none; min-height:0; }
  .reason--lead{ grid-row:auto; }
  .reason:not(.reason--lead){ padding-right:26px; padding-bottom:156px; }
  .reason__art--side{ top:auto; bottom:8px; right:50%; transform:translateX(50%); width:140px; height:140px; }
  .reason:hover .reason__art--side{ transform:translateX(50%); }
  .reason__art--matrix{ width:min(100%,300px); }
  .laurels{ justify-content:flex-start; gap:8px 20px; }
}

/* ---------- 섹션 헤더 ----------
   타이틀 한 종류만 쓴다. 예전엔 28px 였는데 #performance 의 52px 와
   두 배 가까이 벌어져서, 같은 페이지의 같은 층위로 안 읽혔다. */
.sec-head{ margin-bottom:56px; }
.sec-head__label{
  display:inline-block; margin-bottom:16px; padding:6px 13px; border-radius:var(--r-pill);
  background:var(--brand-soft); color:var(--brand);
  font-size:var(--t-tag); font-weight:700; letter-spacing:.06em;
}
.sec-head--center{ text-align:center; margin-left:auto; margin-right:auto; }
.sec-head__title{
  font-family:var(--font-display);
  font-size:var(--t-display); font-weight:700;
  line-height:1.34; letter-spacing:var(--ls-display); color:var(--ink);
}
/* 타이틀 안에서 한 구절만 브랜드 색으로. 굵기는 그대로 둔다 —
   색과 굵기를 같이 올리면 그 구절만 따로 노는 제목이 된다. */
.hl{ color:var(--brand); font-weight:inherit; }
.hl--warn{ color:var(--warn); }

/* ---------- 스크롤 진입 모션 ---------- */
.rise{ opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference){
  .rise{
    opacity:0; transform:translateY(var(--rise-y));
    transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
    transition-delay:calc(var(--i,0) * var(--stagger));
  }
  .rise.is-in{ opacity:1; transform:none; }
}

@media (max-width:900px){
  :root{ --sec-gap:64px; --sec-pad:64px; }
  .qlist li{ font-size:18px; }
  .qlist__line{ height:48px; margin:24px auto; }
  .sec-head{ margin-bottom:36px; }
  .sec-head__title{ font-size:30px; }
  .stories__head{ margin-bottom:36px; }
  .stories__head h2{ font-size:30px; }
}

/* ---------- 마감 ---------- */
html{ scroll-behavior:smooth; scroll-padding-top:92px; }
::selection{ background:var(--navy); color:#fff; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:var(--r-xs); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:10px 16px; font-weight:700; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* 카드 호버 통일 */
.reason,
.case{ transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease; }
.reason:hover{ transform:translateY(-3px); }
.case:hover{ box-shadow:0 12px 32px -18px rgba(28,36,47,.35); }
.story__title{ transition:color .16s; }
.story:hover .story__title{ color:var(--brand); }

/* 마지막 섹션과 푸터 사이 숨 */
.stories{ padding:var(--sec-pad) 0; }


/* ---------- 커버리지 (지도) ---------- */
.cov{ padding:88px 0 0; }
.cov__inner{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.cov__desc{ margin-top:16px; font-size:16px; color:var(--gray); line-height:1.7; }
.cov__desc b{ color:var(--ink); font-weight:700; }

.cov__stat{ margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.cov__stat-label{ font-size:13.5px; font-weight:600; color:var(--gray-soft); }
.cov__num{
  display:inline-block; margin-top:6px; font-family:var(--font-display); font-weight:700;
  font-size:46px; line-height:1.1; letter-spacing:-.02em; color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.cov__unit{ margin-left:8px; font-size:15px; font-weight:600; color:var(--gray); }

.cov__map{ position:relative; }
.mapart{ display:block; width:100%; height:auto; border-radius:var(--r-md); }

/* 핀이 하나씩 떠오르고, 뜬 뒤에는 미세하게 떠 있는다 */
.pin, .mapcard{ opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .cov.is-in .pin{
    animation:pin-pop .62s cubic-bezier(.34,1.56,.64,1) var(--d,0s) forwards,
              pin-float 3.4s ease-in-out calc(var(--d,0s) + .62s) infinite;
    transform-box:fill-box; transform-origin:50% 100%;
  }
  .cov.is-in .mapcard{ animation:card-rise .6s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards; }
}
@media (prefers-reduced-motion:reduce){
  .cov .pin, .cov .mapcard{ opacity:1; }
}

@keyframes pin-pop{
  0%{ opacity:0; transform:translateY(14px) scale(.5); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes pin-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}
@keyframes card-rise{
  0%{ opacity:0; transform:translateY(12px); }
  100%{ opacity:1; transform:translateY(0); }
}

@media (max-width:900px){
  .cov{ padding-top:56px; }
  .cov__inner{ grid-template-columns:1fr; gap:28px; }
  .cov__num{ font-size:38px; }
}

/* ---------- 파트너 ---------- */
/* 분양의신 구조 차용: 거대 타이틀 → 작은 서브 → 큰 여백 → 본문 / 우측 디바이스 프레임 / 하단 로고 스트립 */
.partners{ padding:var(--sec-pad) 0; background:#F7F8F9; overflow:hidden; }

.partners__top{ display:grid; grid-template-columns:1fr 1.25fr; gap:64px; align-items:center; }
.partners__title{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--t-display); line-height:1.34; letter-spacing:var(--ls-display); color:var(--ink);
}
.partners__desc{ margin-top:24px; font-size:17px; line-height:1.85; color:#3B4552; }

.partners__device{
  background:#15181D; border-radius:var(--r-lg); padding:11px;
  box-shadow:0 26px 60px -34px rgba(21,24,29,.6);
}
.partners__screen{
  position:relative; overflow:hidden;
  aspect-ratio:16/9; border-radius:var(--r-xs);
  background:#0E1116;
}
/* 집행 현장 조감도 — 4장이 4초씩 돌아간다 */
.partners__screen img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  .partners__screen img{
    animation:shotfade 16s linear infinite;
    animation-delay:calc(var(--i) * 4s);
  }
}
@media (prefers-reduced-motion:reduce){
  .partners__screen img[style*="--i:0"]{ opacity:1; }
}
@keyframes shotfade{
  0%{ opacity:0 } 3%{ opacity:1 } 22%{ opacity:1 } 25%{ opacity:0 } 100%{ opacity:0 }
}

.partners__strip{ margin-top:96px; }

.marquee{
  overflow:hidden;
  /* 바탕색을 깔아둬야 아래 multiply 가 섹션 바탕과 섞인다. 마스크가 묶음을
     따로 떼어 그려서, 바탕이 없으면 흰 칸이 그대로 남는다. */
  background:#F7F8F9;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 60px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 60px),transparent);
}
.marquee__track{ display:flex; width:max-content; }
.marquee__set{ display:flex; align-items:center; gap:56px; padding-right:56px; }
.logo-slot{ width:150px; height:44px; border-radius:var(--r-xs); flex:none; font-size:11.5px; }
/* 관리자에서 올린 로고. 흰 칸 없이 바탕에 바로 얹는다.
   평소엔 회색으로 눌러 띠가 한 톤으로 흐르고, 올리면 제 색이 돌아온다.
   multiply 는 흰 바탕이 남은 JPG 로고가 올라와도 흰 상자가 안 보이게 한다. */
.ph.logo-slot{ background:#fff; }
.logo-slot img{
  width:100%; height:100%; object-fit:contain; padding:4px 8px;
  mix-blend-mode:multiply; filter:grayscale(1); opacity:.55;
  transition:filter .3s, opacity .3s;
}
.logo-slot:hover img{ filter:none; opacity:1; }

@media (prefers-reduced-motion:no-preference){
  .marquee__track{ animation:marquee 26s linear infinite; }
  .marquee:hover .marquee__track{ animation-play-state:paused; }
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (max-width:900px){
  .partners__top{ grid-template-columns:1fr; gap:32px; }
  .partners__title{ font-size:30px; word-break:keep-all; }
  .partners__desc{ margin-top:16px; font-size:15.5px; }
  .partners__device{ border-radius:var(--r-md); padding:8px; }
  .partners__strip{ margin-top:52px; }
  .marquee__set{ gap:36px; padding-right:36px; }
  .logo-slot{ width:118px; height:38px; }
}

/* ---------- 한 장 요약 (흐름) ---------- */
/* 흐름, 이유, 프로세스 세 섹션은 한 묶음. 흰 바탕을 이어 깐다. */
.flow{ padding:var(--sec-pad) 0; background:#fff; }
/* 카드와 배선이 같은 높이를 나눠 갖는다. 열을 전부 늘려(stretch) 놓고
   카드 쪽도 배선 쪽도 똑같이 1fr × --fl-gap 으로 쪼개면, 가로선이
   카드 한가운데에 저절로 맞는다. 예전엔 배선만 늘어나고 카드 열은
   가운데 정렬이라 높이가 달라서 어긋났다. */
.fl{
  --fl-gap:16px;
  position:relative;              /* 배선 SVG 가 이 상자를 기준으로 덮는다 */
  display:grid; grid-template-columns:1fr 120px 240px 120px 1fr;
  align-items:stretch; margin-top:8px;
}
.fl__side{ display:grid; grid-template-rows:repeat(3,1fr); gap:var(--fl-gap); }
.fl__side--out{ grid-template-rows:repeat(2,1fr); }
.fl__card{ align-self:center; }
@media (min-width:901px) and (max-width:1200px){
  /* 확대해서 보거나 작은 노트북일 때. 배선 칸 120 을 64 로 줄여 양쪽 카드에 56px 씩 돌려준다. */
  .fl{ grid-template-columns:1fr 64px 220px 64px 1fr; }
}   /* 칸은 늘어나도 카드는 제 높이 그대로 */
.fl__hub{ align-self:center; }

.fl__card{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:18px 20px;
  box-shadow:0 10px 26px -22px rgba(28,36,47,.5);
}
.fl__card--out{ justify-content:space-between; }
.fl__card h3{ font-size:16px; font-weight:700; letter-spacing:var(--ls-body); }
.fl__card p{ margin-top:4px; font-size:13.5px; font-weight:700; color:var(--gray); line-height:1.5; word-break:keep-all; }
/* 매체 구분은 가운뎃점 대신 짧은 세로 바. 점은 글자처럼 읽혀서
   '호갱노노 네이버부동산' 이 한 덩어리로 붙어 보인다. */
.fl__card p .sep{
  display:inline-block; vertical-align:middle;
  width:1px; height:6px; margin:0 6px;
  background:#C9CFD8;
}

.fl__ico{
  flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--brand-soft); color:var(--brand);
}
.fl__ico svg{ width:24px; height:24px; }
.fl__ico--solid{ background:var(--navy); color:#fff; }

/* ── 매체 로고 두 장 포개기 ──────────────────────────────
   뒤 판 없이 바닥에 그대로 깐다. 카드가 흰색이라 타일도 흰색이면
   경계가 사라지므로, 그림자와 머리카락 선으로 띄운다.
   뒤쪽 한 장만 8° 꺾어서 앞장 뒤로 삐져나오게 한다. */
.fl__pair{
  position:relative; flex:none;
  width:58px; height:44px;
}
.fl__tile{
  position:absolute; top:2px;
  width:40px; height:40px; overflow:hidden;
  display:grid; place-items:center;          /* 인라인 SVG 로고용 */
  border-radius:11px; background:#fff;
  box-shadow:0 5px 12px -5px rgba(23,28,34,.34), 0 1px 2px rgba(23,28,34,.10);
}
.fl__tile svg{ width:23px; height:23px; }
/* 받은 로고가 전부 정사각 앱 아이콘 형태라 타일을 꽉 채운다.
   흰 바탕 로고(통신사 · 유튜브)는 그대로 흰 타일로 읽힌다 — 그래서 그림자가 필요하다. */
.fl__tile img{ display:block; width:100%; height:100%; object-fit:cover; }
.fl__tile--back { left:0;  transform:rotate(-8deg); z-index:0; }
.fl__tile--front{ left:18px; z-index:1; }

/* 허브 */
.fl__hub{ position:relative; z-index:0; text-align:center; }

/* 허브가 하는 일. 어두운 바탕 위라 글자색을 뒤집는다.
   로고와 사이에 가는 선을 둬서 '로고 밑 설명' 이 아니라
   '안에서 벌어지는 단계' 로 읽히게 한다. */
.fl__step{
  position:relative; padding-top:20px;
  font-size:12.5px; font-weight:700; line-height:1.6;
  color:rgba(255,255,255,.72);
}
.fl__step::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:32px; height:1px; background:rgba(255,255,255,.18);
}
.fl__step b{
  display:flex; justify-content:center; align-items:center; gap:6px;
  margin-bottom:8px;
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.04em; color:var(--brand-line);
}
/* 리타게팅을 지금 돌리는 중이라는 느낌. 고리를 그리는 방식은 CTA 보더와 같다.
   원뿔 그라디언트를 깔고 가운데를 마스크로 뚫어 테두리만 남긴다. */
.fl__step b::before{
  content:""; flex:none; width:13px; height:13px; border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(203,216,255,0) 0deg, rgba(203,216,255,.22) 140deg, var(--brand-line) 320deg, rgba(203,216,255,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
@media (prefers-reduced-motion:no-preference){
  .fl__step b::before{ animation:fl-spin 1.1s linear infinite; }
  @keyframes fl-spin{ to{ transform:rotate(1turn); } }
}
.fl__hub-box{
  position:relative; display:grid; place-items:center; gap:20px;
  padding:32px 24px 28px; border-radius:var(--r-md);
  background:linear-gradient(150deg,#26324A,#1C242F);
  box-shadow:0 20px 44px -26px rgba(28,36,47,.7);
}

/* 은은하게 도는 그라디언트 보더 */
@property --hub-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

.fl__hub-box::before,
.fl__hub-box::after{
  content:""; position:absolute; inset:-8px; border-radius:calc(var(--r-md) + 8px); pointer-events:none;
  background:conic-gradient(from var(--hub-a),
    var(--brand-line) 0deg, #B7A9EE 70deg, #EFC4DA 140deg, #8FA9F5 210deg, var(--brand) 285deg, var(--brand-line) 360deg);
}
.fl__hub-box::before{
  padding:8px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.fl__hub-box::after{ z-index:-1; filter:blur(15px); opacity:.42; }

@media (prefers-reduced-motion:no-preference){
  .fl__hub-box::before,
  .fl__hub-box::after{ animation:hub-spin 7s linear infinite; }
}
@keyframes hub-spin{ to{ --hub-a:360deg; } }
.fl__hub-box img{ width:150px; filter:brightness(0) invert(1); }

/* 배선 — 카드와 허브의 실제 위치를 재서 JS 가 SVG 로 그린다(js/main.js).
   CSS 로 가로·세로를 붙이면 모서리가 반드시 직각이 되는데, 이 사이트의
   무드는 동그라미다. 그래서 선 자체를 호로 도는 path 로 그린다. */
.fl__wire{ position:relative; align-self:stretch; }   /* 열 간격만 잡는 빈 칸 */

.fl__wires{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; overflow:visible;
}
.fl__wires path{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* 유입 — 점이 줄지어 허브로 흘러 들어간다. dash 길이 0 + 둥근 끝 = 동그란 점. */
.fl__wires .wire-in{ stroke:#A9B6C7; stroke-dasharray:0 13; }
@media (prefers-reduced-motion:no-preference){
  .fl__wires .wire-in{ animation:wire-flow 1s linear infinite; }
}
@media (prefers-reduced-motion:no-preference) and (max-width:900px){
  .fl__side + .fl__wire{ animation:wire-drop 1s linear infinite; }
}
@keyframes wire-drop{ to{ background-position:center 8px; } }
@keyframes wire-flow{ to{ stroke-dashoffset:-13; } }

/* 산출 — 실선 위로 점 하나가 카드까지 달려간다 */
.fl__wires .wire-out{ stroke:var(--brand); }
.fl__wires .wire-cap{ fill:var(--brand); }
.fl__wires .wire-join{ fill:#A9B6C7; }

/* 선을 타고 달리는 점. offset-path 는 JS 가 path 와 같은 d 를 넣어준다. */
.fl > .wire-run{
  position:absolute; left:0; top:0; z-index:1;
  width:9px; height:9px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 4px rgba(32,57,206,.16);
  pointer-events:none; opacity:0;
  offset-rotate:0deg;
  animation:wire-run 2.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes wire-run{
  0%   { offset-distance:0%;   opacity:0; }
  10%  { opacity:1; }
  88%  { opacity:1; }
  100% { offset-distance:100%; opacity:0; }
}

@media (max-width:900px){
  .fl{ grid-template-columns:1fr; gap:20px; }
  /* 세로로 쌓이면 배선(SVG)을 못 그린다. 대신 사이 칸을 아래로 흐르는 화살표로 쓴다.
     들어오는 쪽은 데스크톱 유입선처럼 회색 점이 흐르고, 나가는 쪽은 파란 실선이다. */
  .fl__wire{
    display:block; justify-self:center; width:2px; height:36px; margin:-8px 0;
  }
  .fl__side + .fl__wire{
    background:radial-gradient(circle, #A9B6C7 1px, transparent 1.5px) center top / 2px 8px repeat-y;
  }
  .fl__hub + .fl__wire{ background:var(--brand); border-radius:1px; }
  .fl__wire::after{
    content:""; position:absolute; left:50%; bottom:-2px;
    width:9px; height:9px; transform:translateX(-50%) rotate(45deg);
    border-right:2px solid #A9B6C7; border-bottom:2px solid #A9B6C7; border-radius:0 0 2px 0;
  }
  .fl__hub + .fl__wire::after{ border-color:var(--brand); }
  .fl__side, .fl__side--out{ grid-template-rows:none; }
  .fl__hub-box{ padding:22px; }
  .fl__hub-box img{ width:124px; }
}

/* ---------- 진행 프로세스 ---------- */
.process{ padding:var(--sec-pad) 0; background:#fff; }
.psteps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pstep{
  background:linear-gradient(180deg,#FBFCFD 0%,#F1F4F8 100%);
  border:1px solid #EAEDF2; border-radius:var(--r-md);
  padding:30px 24px 28px; text-align:center;
  transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease;
}
.pstep:hover{ transform:translateY(-5px); box-shadow:0 18px 40px -26px rgba(28,36,47,.45); }
.pstep__no{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--brand); margin-bottom:8px; }
.pstep h3{ font-size:17.5px; font-weight:700; letter-spacing:-.025em; }
.pstep p{ margin-top:10px; font-size:14px; color:var(--gray); line-height:1.6; word-break:keep-all; }

@media (max-width:1020px){ .psteps{ grid-template-columns:1fr 1fr; } }
@media (max-width:900px){
  .pstep{ padding:24px 18px 22px; border-radius:var(--r-sm); }
}
@media (max-width:560px){ .psteps{ grid-template-columns:1fr; } }

/* ---------- 매체 칩 ----------
   광고상품 섹션을 접으면서 카드는 걷어냈다. 칩만 광고매체 페이지가 이어 쓴다. */
.sol__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sol__chip{
  display:inline-flex; align-items:center; height:28px; padding:0 10px; border-radius:var(--r-xs);
  background:var(--tint); border:1px solid var(--line);
  font-size:12.5px; font-weight:600; color:var(--navy-soft);
}

/* ---------- 지역별 성과 지도 ---------- */
.perf{ padding:var(--sec-pad) 0; }
.perf__inner{ display:grid; grid-template-columns:minmax(0,1fr) 504px; gap:48px; align-items:start; }

.perf__list{ display:grid; gap:0; margin:0; padding:0; list-style:none; }
.perf__empty{ padding:34px 4px; font-size:14.5px; color:var(--gray-soft); }

.site{
  position:relative; display:grid; grid-template-columns:1fr 168px; gap:20px; align-items:center;
  padding:18px 0; border:0; background:transparent;
}
.site__tags{ display:flex; gap:6px; margin-bottom:9px; }
.site__tag{
  display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:var(--r-xs);
  background:#EEF2F7; color:#5B6675; font-size:11.5px; font-weight:700; letter-spacing:.02em;
}
.site__tag--best{ background:var(--brand); color:#fff; }

.site__name{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--font-display); font-size:var(--t-card); font-weight:700;
  letter-spacing:var(--ls-display); color:var(--ink);
}
/* ── 프리미티브: 라벨 | 값 한 줄 ──────────────────────────
   위치 · 광고기간처럼 "무엇이 무엇이다" 를 적는 줄.
   두 줄 이상 쌓여도 크기 · 굵기 · 색이 전부 같고, 라벨만
   한 단계 굵다. 값을 굵게 하면 라벨이 배경으로 밀려서
   무엇을 적은 줄인지 훑을 때 안 읽힌다.
   .site__line 은 예전 이름 — 새로 쓸 때는 .meta-line. */
.meta-line, .site__line{
  margin-top:5px; font-size:var(--t-body); font-weight:700; line-height:1.5;
  color:var(--gray); letter-spacing:-.01em;
}
.meta-line + .meta-line,
.site__line + .site__line{ margin-top:1px; }
.meta-line b, .site__line b{ font-weight:700; color:inherit; }
.meta-line i, .site__line i{
  font-style:normal; font-weight:700; color:inherit; opacity:.42;
  margin:0 9px; /* 막대 양옆 여백 */
}

.site__thumb{ aspect-ratio:4/3; border-radius:var(--r-xs); }

/* 지도 */
.perf__map{ position:relative; }

@media (max-width:1020px){
  .perf__inner{ grid-template-columns:1fr; gap:36px; }
  .perf__map{ max-width:504px; margin:0 auto; }
}
@media (max-width:900px){
  .perf__region{ font-size:21px; }
  .site{ grid-template-columns:1fr 120px; gap:14px; padding:16px 18px; }
  .site__name{ font-size:20px; }
}

/* ---------- 회사소개 ---------- */
.about{ padding:var(--sec-pad) 0; background:#F4F7FA; }   /* 히어로 바로 밑 띠 */
/* 문제 → (세로선) → 우리 답 → 카드. 문제는 배경도 번호도 없이
   질문만 세로로 쌓는다. 여기서 무게를 주면 아래 타이틀이 안 산다. */
.qlist{
  display:grid; gap:10px; margin:0; padding:0; list-style:none; text-align:center;
}
.qlist li{
  font-family:var(--font-display);
  font-size:26px; font-weight:700; line-height:1.5;
  letter-spacing:var(--ls-display); color:var(--gray-soft);
}
.qlist__line{
  display:block; width:2px; height:72px; margin:32px auto;
  background:linear-gradient(180deg, transparent, var(--gray-soft) 30%, var(--brand));
}

.about-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
/* 아이콘 · 제목 · 한 줄 설명을 세로로 가운데. 카드 높이는 서로 맞춘다. */
.acard{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:38px 28px 34px;
  transition:transform .28s var(--ease), box-shadow .28s ease;
}
.acard:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -26px rgba(28,36,47,.4); }
/* 디자이너가 준 일러스트를 그대로 쓴다 — 배경 원 없이 그림만 */
.acard__art{ flex:none; width:124px; height:124px; }
.acard h3{ margin-top:22px; font-size:19px; font-weight:700; letter-spacing:var(--ls-display); }
.acard p{ margin-top:14px; font-size:15px; font-weight:700; color:var(--gray); line-height:1.7; }

/* ---------- 상담 신청 ---------- */
.contact{ padding:var(--sec-pad) 0; background:#F5F7FA; }
/* 오른쪽 안내 카드를 걷어내서 폼 한 장만 남았다. 가운데로 모으고
   너무 넓어지지 않게 잡는다 — 입력줄이 길면 폼이 서류처럼 읽힌다. */
.contact__grid{ display:grid; justify-items:center; }
.contact__grid > *{ width:100%; max-width:720px; }

.cform{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:34px 34px 30px; }
.fld{ margin-bottom:22px; border:0; padding:0; min-width:0; }
.fld > label, .fld legend{ display:block; margin-bottom:9px; padding:0; font-size:14.5px; font-weight:700; }
.req{ font-style:normal; margin-left:5px; padding:2px 7px; border-radius:var(--r-2xs); background:var(--brand-soft); color:var(--brand); font-size:11px; font-weight:700; }
.opt-tag{ font-style:normal; margin-left:5px; padding:2px 7px; border-radius:var(--r-2xs); border:1px solid var(--line); color:var(--gray-soft); font-size:11px; font-weight:700; }

.cform input[type=text], .cform input[type=tel], .cform textarea{
  width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-xs);
  background:#FBFCFD; font-family:inherit; font-size:15.5px; color:var(--ink); line-height:1.5;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.cform input::placeholder, .cform textarea::placeholder{ color:var(--gray-soft); }
.cform input:focus, .cform textarea:focus{
  outline:none; background:#fff; border-color:var(--brand); box-shadow:0 0 0 3px rgba(32,57,206,.12);
}
.cform textarea{ resize:vertical; min-height:110px; }
.fld.has-err input, .fld.has-err textarea{ border-color:#D95A5A; }

.fld-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{ cursor:pointer; }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt span{
  display:inline-block; padding:10px 16px; border-radius:var(--r-xs); font-size:14.5px; font-weight:600;
  background:#FBFCFD; border:1px solid var(--line); color:#5B6675; transition:all .16s;
}
.opt:hover span{ border-color:var(--gray-soft); color:var(--ink); }
.opt input:checked + span{ background:var(--brand-soft); border-color:var(--brand); color:var(--brand); }
.opt input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:2px; }

.fld__err{ margin-top:6px; font-size:12.5px; color:#D95A5A; }
.fld__err:empty{ display:none; }

.agree{ display:flex; align-items:flex-start; gap:10px; margin:6px 0 2px; font-size:14px; color:var(--gray); cursor:pointer; }
.agree input{ margin-top:3px; width:17px; height:17px; flex:none; accent-color:var(--brand); }
.u{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }

.cform__submit{
  width:100%; height:56px; margin-top:20px; border:0; border-radius:var(--r-xs); cursor:pointer;
  background:var(--navy); color:#fff; font-family:inherit; font-size:17px; font-weight:700;
  transition:background .16s, transform .2s;
}
.cform__submit:hover{ background:var(--navy-soft); transform:translateY(-1px); }
.cform__submit.is-loading{ opacity:.6; pointer-events:none; }
.cform__note{ margin-top:14px; text-align:center; font-size:12.5px; color:var(--gray-soft); }

.ctrust li{ position:relative; padding-left:19px; margin-bottom:10px; font-size:14px; color:#4A5462; line-height:1.6; }
.ctrust li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--brand); font-weight:700; font-size:12px; }

.cdone__box{
  max-width:560px; margin:0 auto; text-align:center; padding:56px 32px;
  background:#fff; border:1px solid #C9D6F7; border-radius:var(--r-md);
}
.cdone__check{ width:62px; height:62px; margin:0 auto 22px; display:grid; place-items:center; border-radius:50%; background:var(--brand); color:#fff; font-size:30px; font-weight:700; }
.cdone__box h3{ font-size:24px; font-weight:700; letter-spacing:-.028em; }
.cdone__box p{ margin:12px 0 26px; color:var(--gray); }
.cdone__again{ height:44px; padding:0 22px; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:700; }
.cdone__again:hover{ border-color:var(--navy); }

@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
  .cform{ padding:24px 20px 22px; border-radius:var(--r-sm); }
  .fld-row{ grid-template-columns:1fr; gap:0; }
}

.contact__grid[hidden]{ display:none !important; }

/* 현재 보고 있는 메뉴 */
.gnb__nav a[aria-current="page"],
.drawer a[aria-current="page"]{ color:var(--brand); }

/* ---------- 동의 내용 다이얼로그 ----------
   <dialog> 를 쓴다 — 포커스 가두기 · Esc 닫기 · 뒤 배경 비활성이 공짜로 붙는다.
   직접 만들면 그 셋을 전부 손으로 짜야 하고, 보통 하나는 빠진다. */
.pdlg{
  width:min(560px, calc(100vw - 40px));
  padding:0; border:0; border-radius:var(--r-md);
  background:#fff; color:var(--ink);
  box-shadow:0 30px 70px -30px rgba(23,28,34,.45);
}
.pdlg::backdrop{ background:rgba(23,28,34,.45); }

.pdlg__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 26px 0;
}
.pdlg__title{ font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:var(--ls-display); }
.pdlg__x{
  flex:none; width:32px; height:32px; border:0; border-radius:50%;
  background:none; color:var(--gray-soft); font-size:24px; line-height:1; cursor:pointer;
  transition:background .15s, color .15s;
}
.pdlg__x:hover{ background:var(--brand-soft); color:var(--brand); }

.pdlg__body{ padding:18px 26px 4px; }
.pdlg__lead{ font-size:var(--t-meta); font-weight:700; line-height:1.7; color:var(--gray); }

.pdlg__list{ margin:18px 0 0; }
.pdlg__list dt{
  margin-top:14px; font-size:13.5px; font-weight:700; color:var(--brand);
  letter-spacing:var(--ls-body);
}
.pdlg__list dt:first-child{ margin-top:0; }
.pdlg__list dd{
  margin:4px 0 0; font-size:var(--t-meta); font-weight:700; line-height:1.65; color:var(--ink);
}
.pdlg__list dd b{ font-weight:700; }

.pdlg__note{
  margin-top:20px; padding:13px 15px; border-radius:var(--r-xs);
  background:var(--brand-soft);
  font-size:13px; font-weight:700; line-height:1.6; color:var(--brand-deep);
}

.pdlg__foot{ padding:20px 26px 24px; }
.pdlg__agree{
  width:100%; height:50px; border:0; border-radius:var(--r-xs);
  background:var(--navy); color:#fff; cursor:pointer;
  font-family:inherit; font-size:15.5px; font-weight:700; letter-spacing:var(--ls-body);
  transition:background .15s;
}
.pdlg__agree:hover{ background:var(--navy-soft); }

/* '내용 보기' — 글 안에 있는 버튼이라 링크처럼 보여야 한다 */
.agree .u{
  padding:0; border:0; background:none; cursor:pointer;
  font:inherit; color:var(--brand); text-decoration:underline; text-underline-offset:2px;
}

@media (max-width:900px){
  .pdlg__head{ padding:20px 20px 0; }
  .pdlg__body{ padding:16px 20px 4px; }
  .pdlg__foot{ padding:18px 20px 20px; }
}
.perf__list .site__thumb{ background:#fff; }

/* 성과 지도 — 조감도 썸네일 & 집계중 상태 */
img.site__thumb{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-xs); }

/* ---------- 매체 허브 (히어로 우측) ----------
   v4 에서 가져옴. 가운데 완판 심볼, 둘레에 집행 매체.
   모든 거리는 --k 배율로 줄어든다. */
.hub{
  --k:1; --blue:var(--brand); --gl:#E5E7EB;
  position:relative; isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  height:calc(324px * var(--k));
}
.hub > *{ position:absolute; }

.hub__d{
  left:50%; top:50%; height:1px; z-index:-1;
  width:calc(520px * var(--k)); margin-left:calc(-260px * var(--k));
  background:linear-gradient(90deg,transparent,var(--gl),transparent);
}
.hub__d--a{ transform:rotate(20deg); }
.hub__d--b{ transform:rotate(-20deg); }

.hub__v{ top:0; bottom:0; left:50%; width:1px; z-index:-1; }
.hub__v--l{ transform:translateX(calc(-216px * var(--k))); background:linear-gradient(var(--gl),transparent); }
.hub__v--r{ transform:translateX(calc(216px * var(--k)));  background:linear-gradient(transparent,var(--gl)); }

.hub__glow{ z-index:-1; width:calc(432px * var(--k)); height:calc(160px * var(--k)); overflow:visible; }
.hub__dots{ z-index:-1; width:calc(164px * var(--k)); height:calc(41px * var(--k)); fill:var(--blue); }

.hub__n{ transform:translate(calc(var(--x) * var(--k)), calc(var(--y) * var(--k))); }
.hub__c{
  position:relative; display:grid; place-items:center;
  width:calc(var(--s) * var(--k)); height:calc(var(--s) * var(--k));
  border-radius:50%; background:#fff;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.04), 0 4px 6px -4px rgba(0,0,0,.04);
}
.hub__c::before{
  content:""; position:absolute; inset:0; margin:8.334%;
  border-radius:inherit; border:1px solid rgba(55,65,81,.05);
  background:rgba(229,231,235,.6);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
          mask-image:linear-gradient(to bottom,#000,transparent);
}
.hub__c svg, .hub__c img{ position:relative; width:calc(var(--ic) * var(--k)); height:auto; }

.hub__n--far{ opacity:.4; }
.hub__n--far .hub__c{ border:1px solid rgba(229,231,235,.6); }
.hub__n--far .hub__c::before{ display:none; }

.hub__n--core{ z-index:1; }
.hub__n--core::before{
  content:""; position:absolute; inset:calc(-12px * var(--k));
  border-radius:50%; border:4px solid transparent;
  background:conic-gradient(from 180deg,transparent,rgba(32,57,206,.28)) border-box;   /* 굵게, 대신 옅게 */
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}

@media (prefers-reduced-motion:no-preference){
  .hub__b{ animation:hub-breath var(--t) ease-in-out var(--d) infinite both; }
  .hub__n--core::before{ animation:hub-ring-spin 3s linear infinite; }
}
@keyframes hub-breath{ 0%,100%{ transform:scale(.95); } 50%{ transform:scale(1.1); } }
@keyframes hub-ring-spin{ to{ transform:rotate(360deg); } }

/* 히어로 우측 칸 — 폭은 632px × --k (바깥 흐린 원까지) */
.banner__visual .hub{ --k:.9; width:calc(632px * var(--k)); }   /* 타이틀을 56px 로 키우면서 .95 에서 줄였다. 둘째 줄이 꺾이지 않게 */

@media (max-width:1180px){ .banner__visual .hub{ --k:.78; } }
/* 작은 노트북 폭. 그래픽 옆에 남는 칸이 좁아 56px 타이틀이 세 줄로 꺾였다.
   타이틀을 44px 로 줄이고, 더 좁아지면 그래픽도 줄여 두 줄을 지킨다. */
@media (min-width:901px) and (max-width:1200px){ .banner__title{ font-size:44px; } }
@media (min-width:901px) and (max-width:1040px){ .banner__visual .hub{ --k:.56; } }
@media (max-width:900px){
  .banner__visual .hub{ --k:.6; width:auto; }
  .hub__n--far{ display:none; }
}

/* ---------- 지역 드롭다운 + 점 지도 ---------- */
.perf__map{ position:relative; }

.rdrop{ position:relative; width:100%; margin:0 0 20px; }
.rdrop__toggle{
  width:100%; height:auto; padding:11px 18px;
  display:flex; align-items:center; gap:10px;
  border:2px solid #D5D7DB; border-radius:var(--r-sm); background:#fff;
  font-family:var(--font-display); font-size:22px; font-weight:700;
  letter-spacing:-.03em; color:var(--ink);
  text-align:left; white-space:nowrap; cursor:pointer; transition:border-color .16s;
}
.rdrop__name{ color:var(--ink); }
.rdrop__num{ color:var(--brand); font-weight:700; margin-right:auto; }
.rdrop__toggle:hover{ border-color:#b9bfc7; }
.rdrop__toggle::after{
  content:""; width:11px; height:11px; margin-left:2px; flex:none;
  border-right:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink);
  border-radius:0 0 2px 0;
  transform:translateY(-4px) rotate(45deg); transition:transform .22s ease;
}
.rdrop.is-open .rdrop__toggle::after{ transform:translateY(2px) rotate(225deg); }

.rdrop__menu{
  position:absolute; top:100%; left:0; right:0; z-index:10;
  margin:10px 0 0; padding:8px 0; list-style:none;
  border:1px solid #dbdbdb; border-radius:var(--r-xs); background:#fff;
  box-shadow:5px 4px 10px 0 rgba(0,0,0,.14);
}
.rdrop__menu[hidden]{ display:none; }
.rdrop__menu li{
  padding:13px 20px; font-size:16px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:background .12s, color .12s;
}
.rdrop__menu li:not(:last-child){ border-bottom:.5px solid #ececec; }
.rdrop__menu li:hover{ background:var(--brand); color:#fff; }
.rdrop__menu li[aria-selected="true"]{ color:var(--brand); font-weight:700; }
.rdrop__menu li[aria-selected="true"]:hover{ color:#fff; }

/* 점 지도 */
.kmap{ display:block; width:auto; height:672px; max-width:100%; margin:0 auto; cursor:pointer; }
.kmap__hit{ cursor:pointer; }

/* 더보기 */
.perf__more{
  width:100%; height:48px; margin-top:12px;
  border:1px solid var(--line); border-radius:var(--r-xs); background:#fff;
  font-family:inherit; font-size:15px; font-weight:700; color:var(--ink);
  cursor:pointer; transition:border-color .16s, background .16s;
}
.perf__more:hover{ border-color:#b9bfc7; background:var(--paper); }
.perf__more[hidden]{ display:none; }

@media (max-width:900px){
  .kmap{ height:440px; }
  .rdrop__toggle{ height:46px; font-size:16px; padding:8px 16px; }
  .rdrop__menu li{ font-size:15px; padding:12px 16px; }
}

/* ---------- 점 지도 (디자인 시안 반영) ---------- */
.kmap circle{ fill:#DFDFDF; transition:fill .26s ease; pointer-events:none; }
/* 서울은 수도권 안에 묻히므로, 선택 안 됐을 때도 한 단계 진하게 둔다.
   .is-hover / .is-on 보다 먼저 와야 선택 상태가 이긴다 (명시도 동일). */
.kmap__g[data-region="서울권"] circle{ fill:#9AA3B2; }
.kmap__g.is-hover circle{ fill:#B9C2E8; }
.kmap__g.is-on circle{ fill:var(--brand); }

.kmap__labels{ pointer-events:none; }
.kmap__lb{ pointer-events:auto; cursor:pointer; }

/* 기본 — 어두운 알약에 숫자만 */
.lb-card{ fill:#EBEDFB; opacity:0; transition:opacity .2s ease; }
.lb-name{ fill:#353535; font-size:62px; font-weight:700; text-anchor:middle;
  font-family:var(--font-display); letter-spacing:-.02em; opacity:0; transition:opacity .2s ease; }
.lb-chip{ fill:#353535; transition:fill .22s ease; }
.lb-num{ fill:#fff; font-size:50px; font-weight:700; text-anchor:middle;
  font-family:var(--font-display); letter-spacing:-.01em; }

/* 선택 — 연한 카드 + 권역명 + 파란 알약 */
.kmap__lb.is-on .lb-card{ opacity:1; }
.kmap__lb.is-on .lb-name{ opacity:1; }
.kmap__lb.is-on .lb-chip{ fill:var(--brand); }
.kmap__lb.is-hover:not(.is-on) .lb-chip{ fill:#5A6070; }
.kmap__lb.is-empty:not(.is-on) .lb-chip{ fill:#9AA0AC; }

/* ---------- 광고집행 — 타이틀 ---------- */
.perf__sec-head{ margin-bottom:56px; text-align:center; }
.perf__title{
  margin:0; font-family:var(--font-display);
  font-size:var(--t-display); font-weight:700; line-height:1.34; letter-spacing:var(--ls-display); color:var(--ink);
}
.perf__grand{
  display:flex; align-items:baseline; gap:12px;
  margin:20px 0 44px; font-family:var(--font-display);
  font-size:32px; font-weight:700; letter-spacing:-.03em; color:var(--ink);
}
.perf__grand b{ font-weight:700; color:var(--brand); }

@media (max-width:900px){
  .perf__sec-head{ margin-bottom:36px; }
  .perf__title{ font-size:30px; }
  .perf__grand{ font-size:22px; margin:12px 0 32px; }
  .site{ padding:20px 0; }
}

/* ---------- 현장 카드 — 좌측 정렬 · 연한 블루가 좌→우로 ---------- */


/* 제목 옆 콜 배지 */
.site__calls{
  display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 8px; line-height:1;
  border-radius:var(--r-xs); background:var(--brand); color:#fff;
  font-family:var(--font-display); font-size:var(--t-lead); font-weight:700; letter-spacing:var(--ls-body);
}

/* 제목 아래 지역 드롭다운 */
.perf__sec-head .rdrop{ width:fit-content; min-width:0; max-width:none; margin:22px auto 0; }

@media (max-width:900px){
  .site__calls{ height:26px; padding:0 6px; font-size:15px; }
  .perf__sec-head .rdrop{ min-width:0; width:100%; max-width:none; }
}


@media (max-width:900px){
  .rdrop__toggle{ padding:9px 14px; font-size:18px; border-radius:var(--r-xs); gap:8px; }
  .rdrop__toggle::after{ width:10px; height:10px; border-width:0 2.5px 2.5px 0; }
}


/* 리스트 항목 사이 구분선 */
.perf__list .site + .site{ border-top:1px solid var(--line-soft); margin-top:12px; padding-top:30px; }


/* ============================================================
   광고집행 섹션 — 마이크로 애니메이션
   JS 가 .perf 에 js-anim 을 먼저 붙이고, 섹션이 보이면 is-live 를 붙인다.
   js-anim 이 없으면(스크립트 실패) 전부 그냥 보인다.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){

  /* 타이틀 · 드롭다운 */
  .perf.js-anim .perf__sec-head{
    opacity:0; transform:translateY(9px);
    transition:opacity .55s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .perf.js-anim.is-live .perf__sec-head{ opacity:1; transform:none; }

  /* 지도 — 아주 살짝 커지면서 */
  .perf.js-anim .kmap{
    opacity:0; transform:scale(.988);
    transition:opacity .7s ease .1s, transform .8s cubic-bezier(.22,.61,.36,1) .1s;
  }
  .perf.js-anim.is-live .kmap{ opacity:1; transform:none; }

  /* 뱃지는 하나씩 — transform 은 건드리지 않는다(SVG translate 가 날아간다) */
  .perf.js-anim .kmap__lb{
    opacity:0; transition:opacity .45s ease;
    transition-delay:calc(var(--l, 0) * 70ms + .25s);
  }
  .perf.js-anim.is-live .kmap__lb{ opacity:1; }

  /* 리스트 — 행마다 7px 만 */
  .perf__list .site{
    animation:perf-row .42s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay:calc(var(--r, 0) * 55ms);
  }
  @keyframes perf-row{
    from{ opacity:0; transform:translateY(7px); }
    to  { opacity:1; transform:none; }
  }
}

/* 콜 칩 — 하늘색 호가 테두리를 한 바퀴 훑고 사라진다. 1회만.
   tool 의 Quick add 버튼과 같은 방식: 각도(--chip-ang)는 한 바퀴 돌고
   호의 길이(--chip-arc)는 그 사이 0 으로 줄어든다. 그래서 끝나면
   테두리가 남지 않고 깨끗하게 없어진다.
   각도는 @property 로 선언해야 보간된다 — 아니면 뚝뚝 끊긴다. */
@property --chip-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@property --chip-arc{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.site__calls{ position:relative; }
.site__calls::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none;
  background:conic-gradient(from var(--chip-ang),
    #A9DEFF 0deg,
    #4B7BFF calc(var(--chip-arc) * .55),
    transparent var(--chip-arc),
    transparent 360deg);
  /* 1px 테두리만 남기고 가운데를 도려낸다 */
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
@media (prefers-reduced-motion:no-preference){
  .site__calls::before{
    animation:chip-sweep 1.5s linear 1 both;
    animation-delay:calc(var(--r, 0) * 70ms + .15s);
  }
}
@keyframes chip-sweep{
  0%   { --chip-ang:   0deg; --chip-arc: 72deg; }
  70%  { --chip-ang: 360deg; --chip-arc:  0deg; }
  100% { --chip-ang: 360deg; --chip-arc:  0deg; }
}


/* ── 프리미티브: 채운 아이콘 ──────────────────────────────
   Lucide(ISC) 원본 path 를 그대로 쓴다. 직접 그리지 않는다.
   Lucide 엔 fill 판이 따로 없어서(*-filled 는 없다) 바깥 형태를
   currentColor 로 채우고, 안쪽 표시는 --knock 색으로 찍어 뚫는다.
     .k  = 선으로 뚫기   .kf = 면으로 뚫기
   --knock 은 아이콘이 얹힌 바탕색과 같아야 한다. */
.ico{ --knock:var(--brand-soft); }
.ico svg{
  fill:currentColor; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.ico svg .k { fill:none; stroke:var(--knock); }
.ico svg .kf{ fill:var(--knock); stroke:var(--knock); }
.fl__ico--solid{ --knock:var(--navy); }

/* 진행 프로세스 — 3D 아이콘. 연파랑 원 배경은 뺐다. 원 안에 넣으면
   아이콘이 30px 안팎으로 줄어 입체가 안 읽힌다. 받은 캔버스의 여백을
   그대로 두므로 아래 여백은 작게 잡는다. */
.pstep__art{
  display:block; width:96px; height:96px; margin:-8px auto 8px;
  filter:drop-shadow(0 10px 12px rgba(28,36,47,.12));
  transition:transform .5s var(--ease);
}
.pstep:hover .pstep__art{ transform:translateY(-4px); }
@media (max-width:900px){
  .pstep__art{ width:80px; height:80px; margin:-4px auto 8px; }
}

/* ---------- 개인정보 처리방침 (privacy.html) ----------
   읽기만 하는 문서라 폭을 좁혀 줄 길이를 짧게 둔다. */
.legal{ padding:72px 0 var(--sec-pad); }
.legal__in{ max-width:808px; }
.legal__title{
  font-family:var(--font-display); font-size:32px; font-weight:700;
  line-height:1.4; letter-spacing:var(--ls-display); color:var(--ink);
}
.legal__lead{ margin-top:16px; font-size:var(--t-body); line-height:1.8; color:var(--gray); }
.legal section{ margin-top:40px; padding-top:32px; border-top:1px solid var(--line); }
.legal h2{
  font-family:var(--font-display); font-size:18px; font-weight:700;
  letter-spacing:var(--ls-body); color:var(--ink); margin-bottom:12px;
}
.legal p, .legal li{ font-size:15px; line-height:1.85; color:#3B4552; }
.legal p + p, .legal table + p{ margin-top:12px; }
.legal ul{ margin:0; padding-left:20px; }
.legal li + li{ margin-top:4px; }
.legal table{ width:100%; border-collapse:collapse; margin-top:8px; font-size:15px; }
.legal th, .legal td{ padding:12px 16px; border:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.7; }
.legal th{ width:160px; background:var(--paper); font-weight:700; color:var(--navy); }
.legal thead th{ width:auto; }
.legal td{ color:#3B4552; }
.legal a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px){
  .legal{ padding:40px 0 var(--sec-pad); }
  .legal__title{ font-size:24px; }
  .legal section{ margin-top:28px; padding-top:24px; }
  .legal th{ width:96px; }
  .legal th, .legal td{ padding:10px 12px; font-size:14px; }
}

/* ---------- 좁은 화면 마무리 ----------
   실제 폰에서 훑어보고 걸린 것들만 모았다. */
@media (max-width:560px){
  /* iOS 사파리는 글씨가 16px 보다 작은 입력에 포커스가 가면 화면을 확대한다.
     상담 폼이 확대되면 레이아웃이 밀려서 손으로 되돌려야 한다. */
  .cform input[type=text], .cform input[type=tel], .cform textarea{ font-size:16px; }

  /* 현장 카드를 세로로 쌓는다. 옆에 붙이면 글 칸이 208px 밖에 안 남아
     "서울특별시 노원구 상계동 일원" 한 줄이 세 줄로 깨졌다. */
  .site{ grid-template-columns:1fr; gap:14px; }
  /* 비율은 img.site__thumb 가 잡는 4:3 그대로 둔다. 조감도는 세로로 눌리면
     건물 윗부분이 잘린다. 여기선 순서만 올려 그림을 위로 보낸다. */
  .site__thumb{ order:-1; width:100%; }

  /* 손가락으로 누르는 것들에 세로 여유를 준다 */
  .stories__more{ display:inline-flex; align-items:center; min-height:44px; }
  .footer__nav a{ display:inline-flex; align-items:center; min-height:40px; }
}

/* ---------- 태블릿 (561 ~ 900) ----------
   900 아래는 전부 한 줄로 쌓는데, 태블릿 폭에서는 카드 한 장이 화면을 다 먹어서
   스크롤만 길어졌다. 카드가 짧은 곳은 다시 나란히 둔다. */
@media (min-width:561px) and (max-width:900px){
  .about-grid{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .acard{ padding:28px 16px 24px; }
  .reasons__grid{ grid-template-columns:1fr 1fr; }
  .reason__art--matrix{ width:min(100%,180px); }
  .stories__grid{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .story__head{ font-size:18px; }
  .story__logo{ left:14px; bottom:14px; height:20px; }
}

/* ---------- 작은 폰 (360 이하) ----------
   375 에서는 두 줄인 제목들이 320 에서 세 줄로 꺾였다. 제목만 한 단계 줄인다. */
@media (max-width:360px){
  .banner__title{ font-size:28px; }
  .sec-head__title, .reasons__title, .perf__title, .partners__title, .stories__head h2{ font-size:24px; }
}

/* ==== 임시: 수정 확인용 빨간 체크 (확인 끝나면 이 묶음과 html 의 data-new 를 지운다) ====
   data-new        블록 오른쪽 위 모서리에 큰 체크
   data-new="sm"   알약, 로고처럼 작은 것에 작은 체크
   data-new="inline" 제목 글자 바로 뒤에 붙는 체크 */
[data-new]{ position:relative; }
[data-new]::after{
  content:""; position:absolute; z-index:5; top:-12px; right:-12px;
  width:28px; height:28px; border-radius:50%; pointer-events:none;
  background:#F04452 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow:0 0 0 3px #fff, 0 4px 10px -2px rgba(240,68,82,.5);
  -webkit-text-fill-color:initial;
}
[data-new="sm"]::after{ width:18px; height:18px; top:-6px; right:-6px; background-size:12px; box-shadow:0 0 0 2px #fff; }
[data-new="inline"]{ position:static; }
[data-new="inline"]::after{ position:relative; top:auto; right:auto; display:inline-block; vertical-align:middle; margin-left:12px; flex:none; }
/* ==== 임시 끝 ==== */