/* ==========================================================================
   HM SIGN 홈 V18

   ★ V17 은 makesign.kr 의 "회사 소개" 페이지를 홈인 줄 알고 베낀 것이었다.
     대표님이 준 화면 녹화를 프레임으로 잘라 보고서야 알았다.
     진짜 홈(makesign.kr/)은 구조가 아예 다르다. 그 실측값으로 다시 짰다.

   진짜 홈의 순서와 치수 (모바일 375, 전체 3497px)
     ① 히어로   60~360  (300px)  사진 위 문구 4장 자동 슬라이드
                                  제목 22/700 흰색, 설명 15/400 흰색, 검정 50% 덮개
                                  아래 숫자 + 진행 막대 100×4 + 정지 버튼
     ② 숫자     360~677 (317px)  흰 배경, 위아래 1px 선
                                  라벨 13/700 #444, 숫자 30/700 검정 (0에서 올라간다)
     ③ 전·후    677~1894(1217px) 배경 #f5f5f5
                                  배지 10/700 흰 글씨에 하늘색 알약 r20
                                  제목 24/700, 카드 327×228 흰색 r16
                                  사진 164×123 두 장 + 가운데 흰 선 3px
                                  Before 배지 검정 60%, After 배지 남색 rgba(0,67,152,.85)
                                  카드 제목 16/700, 설명 13/400 #424753
     ④ 후기     1894~2740(846px) 카드 260×550 흰색, 테두리 rgba(30,58,95,.1), r6
                                  업체명 13/600 하늘색, 별 14/400 #f59e0b, 본문 15/400
                                  두 줄 지그재그로 옆으로 흐른다
     ⑤ 사인종류 2740~3090(350px) 카드 355×300 남색 #274171 r13
                                  영문 14.4/400, 한글 26.6/700, 설명 13.5/400 흰색
     ⑥ 푸터     검정, 영문 표기
   ========================================================================== */

:root{
  --pt:#56c1de;            /* 포인트 */
  --navy:#274171;          /* 사인 종류 카드 */
  --after:rgba(0,67,152,.85);
  --ink:#1a1c1c;
  --ink2:#222;
  --gray:#6c757d;
  --gray2:#424753;
  --star:#f59e0b;
  --soft:#f5f5f5;
  --line:#eee;
  --dark:#000;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  word-break:keep-all;line-break:strict;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--pt);outline-offset:3px}
.skip{position:absolute;left:-9999px}
/* 화면에는 안 보이고 검색엔진·화면낭독기만 읽는 제목 한 줄.
   ⚠ display:none 이면 둘 다 못 읽는다. 자리만 화면 밖으로 빼는 이 방식이어야 한다. */
.skip-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:10px 14px;border-radius:8px}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:20px}
[hidden]{display:none !important}

/* ---------- 머리글 : 고정하지 않는다 ---------- */
.hd{height:60px;display:flex;align-items:center;background:#fff;position:relative;z-index:40}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:baseline;gap:6px;min-height:44px;padding-block:8px;
  font-size:19px;font-weight:700;letter-spacing:-.04em;white-space:nowrap}
.brand i{font-style:normal;color:var(--pt)}
.brand em{font-style:normal;font-weight:400;font-size:14px;color:#d3d8dc}
.brand span{font-size:14px;font-weight:700;color:var(--gray)}
.nav{display:none;gap:28px;font-size:16px;font-weight:700}
.nav a{display:inline-flex;align-items:center;min-height:44px}
.nav a:hover{color:var(--pt)}
.burger{width:44px;height:44px;margin-right:-10px;border:0;background:none;display:grid;
  place-content:center;gap:5px;cursor:pointer}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink2);transition:transform .28s ease}
.hd.open .burger span:first-child{transform:translateY(3.2px) rotate(45deg)}
.hd.open .burger span:last-child{transform:translateY(-3.2px) rotate(-45deg)}
.drawer{position:absolute;left:0;right:0;top:60px;z-index:39;display:grid;overflow:hidden;
  max-height:0;background:#fff;transition:max-height .34s ease}
.drawer.open{max-height:440px;border-bottom:1px solid var(--line)}
.drawer a{padding:15px 20px;font-size:16px;font-weight:700;border-top:1px solid var(--line)}
.drawer a:first-child{border-top:0}

/* ---------- ① 히어로 ---------- */
.hero{position:relative;background:var(--soft)}
/* ★ 첫 화면 크기·글씨는 메이크사인 실측(1440×900)에 맞췄다 — 2026-08-21
     높이 970px = 108vh  ·  제목 58px/700 가운데  ·  설명 23px/400 가운데
     사진 위 어두운 막 rgba(0,0,0,.24)
   우리는 막을 조금 더 진하게 쓴다(.24 → .38). 우리 사진이 대낮에 찍은 밝은
   사진이라 .24 로는 흰 글씨가 안 읽힌다. 실제로 대비를 재서 정했다. */
.hero-stage{position:relative;height:62svh;min-height:380px;max-height:560px;overflow:hidden}
/* ★ 넘어가는 방식도 메이크사인 실측대로 (2026-08-21)
     자동 넘김 4.5초 · 크로스페이드 opacity 1.4s ease-in-out
     사진은 보이는 동안 1.1 → 1.2 배로 천천히 커진다 (transform 4.5s ease-out)
   느리게 겹쳐 넘어가서 "툭 바뀌는" 느낌이 없다. 우리 예전 값(0.7초)은 너무 빨랐다. */
.slide{
  position:absolute;inset:0;margin:0;display:grid;align-content:center;
  opacity:0;transition:opacity 1.4s ease-in-out;
}
.slide.on{opacity:1}
.slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;
  transform:scale(1.1);transition:transform 4.5s ease-out;
}
.slide.on img{transform:scale(1.2)}
.slide-veil{position:absolute;inset:0;background:rgba(0,0,0,.38)}
.slide-copy{position:relative;z-index:2;padding-inline:24px;color:#fff;text-align:center}
.slide-copy .t{font-size:26px;font-weight:700;line-height:1.3;letter-spacing:-.035em}
.slide-copy .d{margin-top:14px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.92)}
.hero-bar{
  position:absolute;left:32px;right:32px;bottom:22px;z-index:3;
  display:flex;align-items:center;gap:10px;color:var(--pt);
}
.hero-num{font-size:14px;font-weight:600;letter-spacing:.02em}
.hero-track{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.hero-track i{display:block;height:100%;width:0;border-radius:2px;background:#fff}
.hero-stop{width:24px;height:24px;border:0;background:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:3px}
.hero-stop b{display:block;width:3px;height:12px;background:#fff;border-radius:1px}
.hero-stop.playing b:first-child{width:0;height:0;border-left:9px solid #fff;
  border-top:6px solid transparent;border-bottom:6px solid transparent;border-radius:0}
.hero-stop.playing b:last-child{display:none}

/* ---------- ② 숫자 ---------- */
.stats{background:#fff;border-block:1px solid var(--line);padding-block:34px}
.stats .wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px 0;text-align:center}
.stat:last-child{grid-column:1/-1}
/* 칸 사이를 세로선으로 가른다. (실측) 줄이 바뀌는 칸에는 선을 두지 않는다. */
.stat{position:relative}
.stat:nth-child(2)::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--line)}
.stat h3{font-size:13.5px;font-weight:700;color:#444}
.stat p{margin-top:8px;display:flex;align-items:baseline;justify-content:center;gap:3px}
.stat b{font-size:30px;font-weight:700;color:#000;font-variant-numeric:tabular-nums}
.stat em{font-style:normal;font-size:15px;font-weight:600;color:#000}

/* ---------- ③ 시공 전 · 후 ---------- */
/* ★ 처음부터 보인다 (2026-08-24). 예전에는 display:none 으로 두었다가 자료가
     오면 켰다 — 그래서 섹션이 늦게 튀어나오며 아래 내용을 밀어냈다.
     지금은 빈 칸이 자리를 잡고 있다가 내용으로 바뀐다.
   ⚠ 정말 아무것도 못 받았을 때만 js 가 .empty 를 붙여 접는다. */
.ba-sec{background:var(--soft);padding-block:56px 60px}
.ba-sec.empty{display:none}
/* 홈의 섹션 머리는 가운데 정렬이다. (실측) */
.ba-sec .wrap,.rv-sec .wrap,.kind-sec .wrap{text-align:center}
.badge{display:inline-block;padding:5px 13px;border-radius:20px;background:var(--pt);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em}
.ba-sec h2,.rv-sec h2,.kind-sec h2{margin-top:16px;font-size:24px;font-weight:700;
  line-height:1.32;letter-spacing:-.04em;color:var(--ink)}
/* 카드 안쪽 글은 다시 왼쪽으로 돌린다 — 본문까지 가운데로 두면 읽기 어렵다. */
.ba-list,.rv-rail,.kind-rail{text-align:left}
.ba-list{display:grid;gap:16px;margin-top:28px}
.ba-card{background:#fff;border-radius:16px;overflow:hidden}
.ba-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#fff}
.ba-pair figure{position:relative;margin:0;aspect-ratio:164/123;background:#e9eaec;overflow:hidden}
.ba-pair img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.ba-pair span{
  position:absolute;left:12px;top:12px;padding:4px 9px;border-radius:4px;
  font-size:12px;font-weight:700;color:#fff;
}
.ba-pair .b span{background:rgba(0,0,0,.6)}
.ba-pair .a span{background:var(--after)}
.ba-card h3{margin:18px 18px 0;font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.ba-card p{margin:8px 18px 20px;font-size:13.5px;line-height:1.6;color:var(--gray2)}
.more{margin-top:28px;display:grid}
.more a{display:grid;place-items:center;min-height:52px;border-radius:999px;
  border:1px solid var(--ink2);background:#fff;font-size:15px;font-weight:700}

/* ---------- ④ 후기 ---------- */
.rv-sec{display:none;padding-block:56px 60px;overflow:hidden}
.rv-sec.ready{display:block}
.rv-eyebrow{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--pt)}
.rv-sec h2{color:var(--pt)}
.rv-rail{display:flex;gap:24px;margin-top:30px;padding-inline:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rv-rail::-webkit-scrollbar{display:none}
.rv{flex:0 0 260px;scroll-snap-align:center;background:#fff;
  border:1px solid rgba(30,58,95,.1);border-radius:6px;padding:24px 21px}
.rv .who{font-size:13px;font-weight:600;color:var(--pt);padding-bottom:14px;
  border-bottom:1px solid rgba(30,58,95,.1)}
.rv .star{margin-top:16px;font-size:14px;color:var(--star);letter-spacing:.06em}
.rv .say{margin-top:14px;font-size:15px;line-height:1.72;color:#1e293b}

/* ---------- ⑤ 사인 종류 ---------- */
/* 숫자 칸의 선 아이콘 — 사진이 아니라 그림이라 색만 맞추면 된다 */
.stat .ico{display:block;margin:0 auto 10px;width:26px;height:26px;color:#9aa3ab}
.stat .ico svg{width:100%;height:100%;display:block}

/* ==========================================================================
   가운데 상담 유도 (.mid-cta) — 2026-08-24

   흰 카드 구간과 검은 간판 종류 사이에서 판을 한 번 바꿔 주는 자리다.
   사진 위에 어두운 막, 짧은 문장, 버튼 둘.
   ⚠ 사진에 width/height 를 적어 두면 자리를 미리 잡아 화면이 안 튄다.
     대신 CSS 로 반드시 덮어써야 한다 — 안 그러면 1300px 로 늘어난다(예전에 겪음).
   ========================================================================== */
.mid-cta{position:relative;overflow:hidden;isolation:isolate}
.mid-cta > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 35%;z-index:-2;
}
/* ★ 별도 섹션이 아니라 "전환 구간" 이다 (2026-08-24)
     처음에는 높이 435px 에 막이 .62 라 그 자체로 큰 섹션이었고, 바로 아래
     검은 간판 종류와 이어져 화면이 계속 어두웠다.
     높이를 낮추고 막을 옅게 해서 지나가는 띠처럼 보이게 한다. */
.mid-cta .veil{position:absolute;inset:0;background:rgba(10,14,20,.46);z-index:-1}
.mid-cta .in{padding-block:44px;color:#fff;text-align:center}
.mid-cta .t{font-size:21px;font-weight:700;line-height:1.36;letter-spacing:-.04em}
.mid-cta .d{margin-top:10px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.88)}
/* 좁은 화면에서는 버튼 둘을 한 줄에 놓는다. 세로로 쌓으면 이 띠가 화면의
   1/3 을 먹어 "지나가는 구간" 이 아니라 또 하나의 큰 섹션이 된다. */
.mid-cta .btns{margin-top:20px;display:flex;gap:8px;justify-content:center}
.mid-cta .go,.mid-cta .call{flex:1 1 0;min-width:0;padding-inline:10px;font-size:14.5px}
@media (max-width:479px){ .mid-cta .call .num{display:none} }
.mid-cta .go,.mid-cta .call{
  display:grid;place-items:center;min-height:52px;border-radius:999px;
  font-size:15px;font-weight:700;
}
.mid-cta .go{background:var(--pt);color:#fff}
.mid-cta .call{border:1px solid rgba(255,255,255,.55);color:#fff}

/* ==========================================================================
   시공사례 가로 캐러셀 (.pf) — 2026-08-24

   ★ 저절로 움직이지 않는다. 끌기 · 휠 · 손가락으로 넘긴다.
   ★ 양옆에 다음 사진이 걸쳐 보이게 padding-inline 을 준다. 이게 "넘길 수 있다"는
     신호다. 화살표 버튼보다 이게 더 잘 먹힌다.
   ★ scroll-snap 으로 한 장씩 딱딱 서게 한다. 손으로 미는 맛이 여기서 난다.
   ⚠ 사진이 두 장도 없으면 넘길 것이 없다 — 그때만 js 가 .empty 로 접는다.
   ========================================================================== */
.pf{background:var(--soft);padding-block:56px 60px}
.pf.empty{display:none}
.pf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;text-align:left}
.pf-head h2{margin-top:16px;font-size:24px;font-weight:700;line-height:1.32;
  letter-spacing:-.04em;color:var(--ink)}
.pf-nav{display:none;gap:8px;flex:0 0 auto}
.pf-arrow{
  width:44px;height:44px;border-radius:50%;border:1px solid #d7dbdf;background:#fff;
  font-size:16px;line-height:1;cursor:pointer;color:var(--ink);
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.pf-arrow:hover:not(:disabled){border-color:var(--pt);color:var(--pt)}
.pf-arrow:disabled{opacity:.32;cursor:default}

.pf-rail{
  display:flex;gap:12px;margin-top:26px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* 양옆에 다음 사진이 걸쳐 보이는 만큼 */
  padding-inline:20px;
}
.pf-rail::-webkit-scrollbar{display:none}
.pf-rail:focus-visible{outline:2px solid var(--pt);outline-offset:-2px}

/* ★ 모바일은 정사각 (2026-08-24).
     실측 261x196 — 사진이 주인공인 자리인데 196px 은 너무 작았다.
     폭(78%)과 옆에 걸치는 정도는 그대로 두고 높이만 키운다: 261x261.
     넓은 화면은 4:3 그대로다(아래 @media). 거기서 정사각이면 819x819 라
     화면 높이를 넘어선다 — 반대로 "너무 커서 보기 힘든" 쪽이 된다. */
.pf-card{
  position:relative;flex:0 0 78%;scroll-snap-align:center;
  border-radius:14px;overflow:hidden;background:#e9eaec;
  aspect-ratio:1/1;display:block;
}
.pf-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.pf-card .cap{
  position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;
  background:linear-gradient(180deg,rgba(10,14,20,0),rgba(10,14,20,.72));
  color:#fff;
}
.pf-card .cap b{display:block;font-size:17px;font-weight:700;letter-spacing:-.03em}
.pf-card .cap span{display:block;margin-top:3px;font-size:13px;color:rgba(255,255,255,.82)}
/* 끌고 있는 동안은 사진에 클릭이 먹지 않게 (js 가 붙인다) */
.pf-rail.dragging{cursor:grabbing}
.pf-rail.dragging .pf-card{pointer-events:none}

/* 사진이 오기 전 자리를 잡아 두는 빈 칸.
   ⚠ 반짝이는 연출을 넣지 않는다 — /works 와 같은 조용한 회색.
     기다리는 티를 내면 오히려 느려 보인다.
   ⚠ 치수는 .pf-card / .ba-card 와 똑같아야 한다. 하나라도 다르면 사진이
     들어오는 순간 화면이 튄다 — 자리를 잡아 두는 뜻이 없어진다. */
.pf-card-skel{
  /* ⚠ .pf-card 와 같은 비율(모바일 1:1, 넓은 화면 4:3). 다르면 사진이 올 때 튄다. */
  flex:0 0 78%;aspect-ratio:1/1;border-radius:14px;background:#e4e6e8;
}
/* 실측(1280 화면): 카드 540x295 = 사진 201 + 글 94. 아래 치수는 그 값이다.
   폭이 달라져도 사진은 비율로 따라가고 글자 자리만 고정이다. */
.ba-card-skel{border-radius:16px;background:#fff;overflow:hidden}
.ba-card-skel::before{content:'';display:block;aspect-ratio:540/201;background:#e4e6e8}
.ba-card-skel::after{content:'';display:block;height:94px}

.pf-foot{margin-top:26px;text-align:center}
.pf-all{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding-inline:28px;border-radius:999px;border:1px solid var(--ink2);background:#fff;
  font-size:15px;font-weight:700;
}

.kind-sec{padding-block:56px 60px;background:#fff}
.kind-rail{display:flex;gap:12px;margin-top:30px;padding-inline:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.kind-rail::-webkit-scrollbar{display:none}
.kind::after{transition:background .45s ease}
.kind{position:relative;flex:0 0 335px;scroll-snap-align:center;background:var(--navy);
  border-radius:13px;overflow:hidden;padding:26px 24px;color:#fff;display:grid;align-content:start}
/* 칸마다 사진이 깔린다. 글이 읽히도록 어둡게 덮는다. */
.kind img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
.kind::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,20,38,.42),rgba(12,20,38,.78))}
.kind .en,.kind h3,.kind .d{position:relative;z-index:2}
.kind .en{font-size:14px;font-weight:400;color:rgba(255,255,255,.75);letter-spacing:.02em}
.kind h3{margin-top:6px;font-size:26px;font-weight:700;letter-spacing:-.04em}
.kind .d{margin-top:14px;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.85)}
.kind-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.kind-dots b{width:8px;height:8px;border-radius:50%;background:#d6dade;transition:background .25s}
.kind-dots b.on{background:var(--pt)}

/* ---------- ⑥ 상담 ---------- */
.cta{background:#fff;padding-block:0 40px}
.cta .box{position:relative;overflow:hidden}
.cta img{width:100%;height:auto;aspect-ratio:335/367;object-fit:cover;object-position:center 32%}
.cta .veil{position:absolute;inset:0;background:rgba(0,0,0,.52)}
.cta .in{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;
  padding:24px;text-align:center}
.cta .tag{font-size:15px;font-weight:700;color:rgba(255,255,255,.82)}
.cta h2{margin-top:18px;font-size:28px;font-weight:700;line-height:1.32;letter-spacing:-.04em;color:#fff}
.cta .btns{margin-top:26px;display:grid;grid-auto-flow:column;gap:10px}
.cta .btns a{display:inline-grid;place-items:center;min-width:118px;min-height:54px;padding:0 22px;
  border-radius:10px;font-size:15px;font-weight:700}
.cta .btns .call{background:#fff;color:var(--pt)}
.cta .btns .quote{border:1px solid rgba(255,255,255,.6);color:#fff}
.cta .tel{margin-top:16px;font-size:14px;color:rgba(255,255,255,.72)}

/* ---------- 바닥글 ---------- */
.ft{background:var(--dark);color:#fff;padding:15px 0 40px}
.ft .brand{color:#fff}
.ft .brand em{color:rgba(255,255,255,.28)}
.ft .brand span{color:rgba(255,255,255,.6)}
.ft .lead{margin-top:16px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.86)}
.ft-nav{display:flex;flex-wrap:wrap;gap:0 14px;margin-top:26px;font-size:14px;line-height:25.2px}
.ft-nav a{display:inline-flex;align-items:center;min-height:44px;color:#fff}
.ft-nav a:hover{color:var(--pt)}
.biz{margin-top:12px;font-size:14px;line-height:25.2px;color:#fff}
.biz span{display:inline-block}
.biz i{font-style:normal;display:inline-block;padding:0 5px;color:rgba(255,255,255,.55)}

/* ---------- 태블릿·데스크톱 ---------- */
@media (min-width:720px){
  .wrap{padding-inline:32px}
  .hd{height:70px}
  .nav{display:flex}
  .burger{display:none}
  .drawer{display:none}
  .hero-stage{height:74svh;min-height:460px;max-height:720px}
  .slide-copy{padding-inline:0;max-width:1000px;margin-inline:auto;
    padding-left:32px;padding-right:32px;width:100%}
  .slide-copy .t{font-size:42px}
  .slide-copy .d{font-size:19px;line-height:1.6}
  .hero-bar{left:50%;transform:translateX(-50%);max-width:1180px;width:100%;padding-inline:32px}
  .stats{padding-block:52px}
  .stats .wrap{grid-template-columns:repeat(3,1fr)}
  .stat:last-child{grid-column:auto}
  .stat:nth-child(3)::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--line)}
  .stat b{font-size:40px}
  .ba-sec,.rv-sec,.kind-sec,.pf{padding-block:88px}
  .ba-sec h2,.rv-sec h2,.kind-sec h2,.pf-head h2{font-size:34px}

  /* 넓은 화면에서는 한 장을 크게 보여 주고 양옆이 넉넉히 걸치게 한다.
     화살표 버튼도 이때부터 나온다 — 손가락이 없으니 잡을 것이 필요하다. */
  .stat .ico{width:30px;height:30px;margin-bottom:12px}

  /* 지나가는 띠 정도로. 위(흰 카드)와 아래(검은 판) 사이를 이어 주기만 한다. */
  .mid-cta .in{padding-block:64px}
  .mid-cta .t{font-size:28px}
  .mid-cta .d{font-size:16px;margin-top:12px}
  .mid-cta .btns{margin-top:24px;display:flex;justify-content:center;gap:12px}
  .mid-cta .go,.mid-cta .call{
    flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    padding-inline:28px;min-height:52px;font-size:15px;
  }

  .pf-nav{display:flex}
  /* ★ 다음 사진이 "살짝" 보이는 정도로 (2026-08-24)
       예전에는 474px 이 보여서 반쯤 다음 카드였다. 목표는 200~300px.

       카드가 가운데 섰을 때 양옆에 보이는 폭 = (레일폭 - 카드폭) / 2 - 간격
       이 값이 250 안팎이 되도록 카드폭을 잡는다. 좌우 여백도 같은 식으로 줘야
       첫 카드와 마지막 카드까지 가운데에 설 수 있다.
         1440 화면 → 카드 900, 옆에 246px
         1280 화면 → 카드 819, 옆에 207px
       ⚠ 100vw 는 세로 스크롤바를 포함한다. 그만큼(약 15px) 오차가 있는데,
         좌우 여백에만 반씩 들어가므로 눈에 띄지 않는다. */
  .pf{--pf-w:min(64vw, 900px)}
  .pf-rail{gap:16px;padding-inline:calc((100vw - var(--pf-w)) / 2)}
  /* ⚠ 넓은 화면은 4:3 로 되돌린다. 정사각이면 819x819 라 화면 높이를 넘는다.
       빈 칸(.pf-card-skel)도 **반드시 같은 비율**이어야 사진이 올 때 안 튄다. */
  .pf-card,.pf-card-skel{flex:0 0 var(--pf-w);aspect-ratio:4/3}
  .pf-card:hover img,.pf-card:focus-visible img{transform:scale(1.04)}
  .pf-card .cap{padding:44px 24px 22px}
  .pf-card .cap b{font-size:20px}
  .ba-list{grid-template-columns:1fr 1fr;gap:20px}
  .more{justify-content:center;margin-top:40px}
  .more a{padding-inline:34px}
  .rv-rail{padding-inline:32px}
  /* 후기 카드는 한 칸씩 어긋나게 놓는다 (지그재그). 높이는 맞춰 둬야 어긋남이 의도로 읽힌다. */
  .rv{align-self:flex-start;min-height:300px}
  .rv:nth-child(even){margin-top:36px}

  /* ---------- 사인 종류 : 넓은 화면에서는 옆으로 늘어선 아코디언 ----------
     한 칸에 마우스를 올리면 그 칸만 넓어지고 설명이 드러난다.
     좁은 화면에서는 그대로 옆으로 넘겨 보는 칸으로 남는다. */
  /* ★ 화면 끝에서 끝까지 (2026-08-24, 메이크사인 실측 반영)
       1180px 상자 안에 갇혀 있으니 다른 섹션과 똑같은 리듬이었다.
       전체폭으로 빼면 여기서 판이 완전히 바뀐다 — 흰 카드들 사이에 검은 띠 하나.
       메이크사인도 이 구간만 전체폭이고 높이가 590px 쯤이다.
       ⚠ .kind-rail 은 .wrap 밖에 있으므로 max-width 만 풀면 바로 끝까지 간다. */
  .kind-rail{display:flex;gap:4px;overflow:visible;padding-inline:0;
    max-width:none;margin-inline:0}
  .kind{flex:1 1 0;min-width:0;height:560px;align-content:end;padding:28px 20px;
    border-radius:0;
    transition:flex-grow .45s cubic-bezier(.16,.84,.34,1)}
  /* 칸이 좁아도 이름은 한 줄로 둔다. "특수 간 판" 처럼 쪼개지면 못 읽는다.
     좁을 때는 글자를 줄여 잘리지 않게 하고, 펼쳐진 칸에서만 크게 보여 준다. */
  .kind h3,.kind .en{white-space:nowrap}
  .kind h3{font-size:22px;letter-spacing:-.055em;transition:font-size .45s ease}
  .kind .en{font-size:12.5px;opacity:.75;transition:font-size .45s ease}
  .kind .d{max-height:0;opacity:0;overflow:hidden;margin-top:0;
    transition:max-height .45s ease,opacity .3s ease,margin-top .45s ease}
  .kind:hover,.kind:focus-visible{flex-grow:3.4;padding-inline:30px}
  .kind:hover h3,.kind:focus-visible h3{font-size:32px;letter-spacing:-.04em}
  .kind:hover .en,.kind:focus-visible .en{font-size:14px}
  .kind:hover .d,.kind:focus-visible .d{max-height:180px;opacity:1;margin-top:14px}
  /* 펼쳐진 칸은 사진이 더 잘 보이게 덮개를 살짝 걷는다 */
  .kind:hover::after,.kind:focus-visible::after{
    background:linear-gradient(180deg,rgba(12,20,38,.28),rgba(12,20,38,.72));
  }
  .kind-dots{display:none}
  .cta img{aspect-ratio:1180/460}
  .cta h2{font-size:38px}
  .ft{padding:40px 0 56px}
}
@media (min-width:1080px){
  .wrap{padding-inline:40px}
  /* 머리글(70px) 아래로 화면을 꽉 채운다. 메이크사인은 108vh 라 아래가 잘리는데,
     그것까지 따라가면 아래에 뭐가 더 있는지 안 보인다. 딱 한 화면으로 맞춘다. */
  .hero-stage{height:calc(100svh - 70px);min-height:560px;max-height:860px}
  .slide-copy .t{font-size:58px;line-height:1.22}
  .slide-copy .d{font-size:23px;margin-top:18px}
}

@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
  .burger span,.drawer,.kind-dots b{transition:none}
}

/* ---------- 예시 표시 ----------
   아직 대표님 자료가 없는 칸이다. 자리와 모양을 보여 주되 진짜인 척하지 않는다.
   ERP·관리 화면에서 실제 자료를 넣으면 이 표는 저절로 사라진다. */
.sample-tag{
  position:absolute;right:10px;top:10px;z-index:4;
  padding:3px 9px;border-radius:999px;
  background:rgba(17,19,24,.72);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.ba-card.sample .ba-pair{position:relative}
.rv.sample{position:relative}
.ba-card.sample h3,.rv.sample .who{color:var(--gray)}