/* ==========================================================================
   HM SIGN 회사소개 V18

   메이크사인 "회사 소개" 페이지 모바일 375 실측을 기준으로 잡았다.
     히어로   흰 바탕, 제목 28.8/700 자간 -1.44 가운데, 서브 13/400,
              버튼 151×55 모서리 50px 하늘색
     전·후    335×248, 모서리 0, 아래층=전 / 위층=후에 clip-path,
              초기 0%(후가 다 보임), 라벨 흰 사각 안쪽 20px·바닥 21px,
              손잡이 = 프레임 전체 높이 + 60px 하늘색 원에 흰 막대 셋
     원형     280×280, 세로로 250px 간격(30px 겹침) — 속 빈 테두리 원
     FAQ      카드 모서리 8px, 간격 13px, 답변 배경 #f8f9fa
     상담     사진 위 검정 덮개, 흰 글씨 가운데

   글자 크기는 대표님 지시대로 한 단계씩 키웠다.
   ========================================================================== */

:root{
  --pt:#56c1de;
  --ink:#1a1c1c;
  --ink2:#222;
  --gray:#6c757d;
  --gray2:#555;
  --soft:#f8f9fa;
  --line:#eee;
  --line-soft:#e9ecef;
  --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}
.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}

/* ---------- 머리글 : 고정하지 않는다 ---------- */
.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}

/* ---------- 히어로 ----------
   간격은 실측 그대로: 섹션 위 96 → 제목 → 27 → 설명 → 27 → 버튼 → 32 → 전·후 → 60 */
.hero{background:#fff;padding-block:96px 60px;text-align:center}
.hero h1{font-size:32px;font-weight:700;line-height:1.3;letter-spacing:-.045em;color:var(--ink2)}
.hero .sub{margin-top:27px;font-size:15px;line-height:1.75;color:var(--gray)}
.hero .go{
  display:inline-grid;place-items:center;min-width:151px;height:55px;margin-top:27px;padding-inline:27px;
  border-radius:50px;background:var(--pt);color:#fff;font-size:15px;font-weight:700;
  transition:background .25s ease;
}
.hero .go:hover{background:var(--ink2)}   /* 그쪽도 올리면 어두워진다 */

/* ---------- 시공 전 · 후 ---------- */
.ba{display:none;margin-top:32px}
.ba.ready{display:block}
.ba-frame{
  position:relative;aspect-ratio:335/248;overflow:hidden;background:#eceae6;
  cursor:ew-resize;touch-action:pan-y;user-select:none;
}
.ba-layer{position:absolute;inset:0}
.ba-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.ba-after{clip-path:inset(0 0 0 0%)}
.ba-tag{
  position:absolute;bottom:21px;z-index:3;padding:4px;border-radius:4px;background:#fff;
  font-size:14px;line-height:22px;color:var(--ink2);
}
.ba-tag.b{left:20px}
.ba-tag.a{right:20px}
.ba-cursor{
  position:absolute;top:0;bottom:0;left:0;width:40px;margin-left:-20px;z-index:4;
  display:grid;place-items:center;border:0;padding:0;background:transparent;cursor:ew-resize;
}
.ba-cursor::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;
  margin-left:-1px;background:rgba(255,255,255,.9)}
.ba-cursor span{
  position:relative;width:60px;height:60px;border-radius:50%;background:var(--pt);
  display:flex;align-items:center;justify-content:center;gap:4px;
}
.ba-cursor i{display:block;width:1.5px;height:12px;background:#fff}

/* ---------- 일하는 방식 : 속 빈 원 셋이 겹친다 ----------
   영상에서 확인: 꽉 찬 원이 아니라 하늘색 얇은 테두리 원이고, 서로 물려 있다. */
.values{position:relative;background:#fff;padding-block:34px 60px;overflow:hidden}
/* 한때 넓은 화면에서 120px 이었다. 히어로 제목(52px)의 2.3배, 섹션 제목(34px)의
   3.5배라 화면을 통째로 잡아먹었고 색까지 진해서 소리를 지르는 것처럼 보였다.
   히어로 제목보다 조금만 크면 "가장 큰 글씨" 노릇은 충분히 한다. */
.ghost{font-size:29px;font-weight:700;line-height:1.32;letter-spacing:-.04em;color:var(--pt)}
.circles{display:grid;justify-items:center;margin-top:26px}
.circle{
  width:280px;height:280px;border-radius:50%;
  border:1px solid rgba(86,193,222,.55);background:#fff;
  display:grid;align-content:center;justify-items:center;gap:9px;
  padding:0 30px;text-align:center;
}
.circle + .circle{margin-top:-30px}   /* 30px 물린다 (실측 간격 250px) */
.circle .n{font-size:20px;font-weight:700;line-height:1;color:var(--gray)}
.circle h3{font-size:21px;font-weight:700;line-height:1.3;letter-spacing:-.035em;color:#000}
.circle p{font-size:14px;font-weight:400;line-height:1.62;color:var(--gray)}

/* ---------- 자주 묻는 질문 ---------- */
.faq-sec{background:#fff;padding-block:56px 60px}
.faq-sec h2{font-size:27px;font-weight:700;line-height:1.32;letter-spacing:-.04em;
  color:#1a1a1a;text-align:center}
.faq-sec .lead{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--gray);text-align:center}
.faq{display:grid;gap:13px;margin-top:34px}
.faq details{background:#fff;border:1px solid var(--line-soft);border-radius:8px;overflow:hidden}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:24px 18px;cursor:pointer;list-style:none;
  font-size:16.5px;font-weight:700;line-height:1.45;color:#333;letter-spacing:-.03em;
}
.faq summary::-webkit-details-marker{display:none}
.faq .mark{flex:none;width:20px;height:20px;position:relative}
.faq .mark::before,.faq .mark::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--pt);
  transform:translate(-50%,-50%);transition:transform .28s ease;
}
.faq .mark::before{width:14px;height:2px}
.faq .mark::after{width:2px;height:14px}
.faq details[open] .mark::after{transform:translate(-50%,-50%) scaleY(0)}
.faq .ans{background:var(--soft);padding:4px 18px 22px;font-size:15px;line-height:1.8;color:var(--gray2)}
.faq .ans strong{font-weight:700;color:#333}

/* ---------- 상담 ---------- */
.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{padding-block:120px 80px}
  .hero h1{font-size:44px}
  .hero .sub{font-size:16.5px}
  .ba-frame{aspect-ratio:1180/460}
  .values{padding-block:80px 100px}
  .ghost{font-size:50px;line-height:1.18}
  .circles{display:flex;justify-content:center;margin-top:44px}
  .circle{width:300px;height:300px;flex:none}
  .circle + .circle{margin-top:0;margin-left:-40px}   /* 옆으로 물린다 */
  .faq-sec{padding-block:96px}
  .faq-sec h2{font-size:34px}
  .faq summary{font-size:18px;padding:28px 24px}
  .faq .ans{padding:6px 24px 26px;font-size:15.5px;max-width:820px}
  .cta{padding-block:0 80px}
  .cta img{aspect-ratio:1180/460}
  .cta h2{font-size:38px}
  .cta .btns a{min-height:56px;font-size:16px}
  .ft{padding:40px 0 56px}
}
@media (min-width:1080px){
  .wrap{padding-inline:40px}
  .hero h1{font-size:52px}
  .ghost{font-size:60px}
}

@media (prefers-reduced-motion:reduce){
  .burger span,.drawer,.hero .go,.faq .mark::before,.faq .mark::after{transition:none}
}