/*
 * 하나소방 랜딩페이지
 * PC  : XD 1920 기준. --s = 디자인 1px. 내용 폭 1364px, 화면이 좁으면 전체를 같은 비율로 줄임
 * 모바일: XD 1000 기준. --s = 화면폭/1000 (최대 640px 화면 기준까지)
 * 숫자는 모두 XD 디자인 데이터에서 읽은 값
 */
:root {
  --yellow: #f9e000;
  --orange: #ff7a00;
  --navy: #183153;
  --ink: #1e2329;
  --gray-t: #777777;
  --fill-gray: #e7e7e7;
  --s: min(1px, (100vw - 80px) / 1364);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #fff; }
body { background: #fff; color: #000; font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; word-break: keep-all; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.in { width: calc(1364 * var(--s)); margin: 0 auto; position: relative; }
.mo-br, .mo-sp { display: none; }
section[id] { scroll-margin-top: calc(124 * var(--s)); }

/* ---------- 머리 (높이 124) ---------- */
.hd { position: sticky; top: 0; z-index: 30; background: #fff; }
.hd .in { height: calc(124 * var(--s)); display: flex; align-items: center; }
.logo img { width: calc(93 * var(--s)); height: calc(93 * var(--s)); object-fit: contain; }
.gnb { position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%); display: flex; align-items: center; gap: calc(100 * var(--s)); }
.gnb a { position: relative; font-size: calc(24 * var(--s)); line-height: calc(29 * var(--s)); font-weight: 500; white-space: nowrap; }
.gnb a::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-6 * var(--s)); height: 2px; background: var(--yellow); opacity: 0; transition: opacity .2s; }
.gnb a:hover::after, .gnb a:focus-visible::after { opacity: 1; }
.hd .adm-btn { margin-left: auto; width: calc(137 * var(--s)); height: calc(44 * var(--s)); border-radius: calc(22 * var(--s)); background: var(--yellow); display: flex; align-items: center; justify-content: center; font-size: calc(20 * var(--s)); font-weight: 500; white-space: nowrap; }
.ham, .mnav { display: none; }

/* ---------- 첫 화면 (760) ---------- */
.hero { position: relative; height: calc(760 * var(--s)); color: #fff; text-align: center; overflow: hidden;
  background: #333 url(/assets/img/landing/hero.webp) center top / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.hero .in { padding-top: calc(165 * var(--s)); display: flex; flex-direction: column; align-items: center; }
.slogan { font-size: calc(36 * var(--s)); line-height: calc(42 * var(--s)); font-weight: 400; }
.hero h1 { margin-top: calc(17 * var(--s)); font-size: calc(100 * var(--s)); line-height: calc(117 * var(--s)); font-weight: 700; letter-spacing: .08em; color: var(--yellow); margin-right: -.08em; }
.hero .bar { display: block; width: calc(692 * var(--s)); height: calc(3 * var(--s)); min-height: 2px; background: #fff; margin-top: calc(28 * var(--s)); }
.hero .tel { margin-top: calc(29 * var(--s)); font-size: calc(54 * var(--s)); line-height: calc(64 * var(--s)); font-weight: 600; letter-spacing: .15em; margin-right: -.15em; }
.hero-btns { margin-top: calc(70 * var(--s)); display: flex; gap: calc(20 * var(--s)); }
.ghost { width: calc(351 * var(--s)); height: calc(60 * var(--s)); border: 1px solid #fff; border-radius: calc(10 * var(--s)); background: rgba(255, 255, 255, .3); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--s)); font-size: calc(24 * var(--s)); line-height: calc(29 * var(--s)); font-weight: 500; transition: background-color .2s, color .2s; }
.ghost svg { width: calc(38 * var(--s)); height: calc(38 * var(--s)); flex: none; }
.ghost:hover, .ghost:focus-visible { background: #fff; color: var(--navy); }

/* ---------- 회사소개 (855): 회색 → 주황 채우기 ---------- */
.about .in { padding: calc(268 * var(--s)) 0 calc(267 * var(--s)); }
.fill-text { font-size: calc(60 * var(--s)); line-height: calc(80 * var(--s)); font-weight: 700; letter-spacing: -.01em; color: var(--fill-gray); }
.fill-text .ch { transition: color .15s; }
.fill-text .ch.on { color: var(--orange); }

/* ---------- 공통 제목 (PC 는 왼쪽 정렬) ---------- */
.sec-t { font-size: calc(54 * var(--s)); line-height: calc(64 * var(--s)); font-weight: 700; color: var(--navy); }
.sec-s { margin-top: calc(30 * var(--s)); font-size: calc(30 * var(--s)); line-height: calc(35 * var(--s)); color: var(--gray-t); }

/* ---------- 서비스분야 (809) ---------- */
.service { background: #f3f3f3; }  /* #e7e7e7 50% */
.service .in { padding: calc(60 * var(--s)) 0; }
.cards { margin-top: calc(51 * var(--s)); display: flex; justify-content: space-between; }
.card { position: relative; width: calc(255 * var(--s)); height: calc(509 * var(--s)); border-radius: calc(30 * var(--s)); overflow: hidden; background: #333; transform: translateZ(0); }
.card .ph { position: absolute; inset: 0; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--px, 50%) 50%; transition: transform .6s ease; }
.card .ph::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); }
.card:hover .ph img { transform: scale(1.12); }
.card b { position: absolute; left: 0; right: 0; bottom: calc(44 * var(--s)); height: calc(60 * var(--s)); z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; font-size: calc(26 * var(--s)); line-height: calc(30 * var(--s)); font-weight: 600; }

/* ---------- 핵심경쟁력 ---------- */
.strength .in { padding: calc(120 * var(--s)) 0 calc(60 * var(--s)); }
.grid { margin-top: calc(60 * var(--s)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--s)); }
.grid .item { height: calc(110 * var(--s)); border: 1px solid #ddd; border-radius: calc(10 * var(--s)); background: #fff; display: flex; align-items: center;
  padding-left: calc(207 * var(--s)); gap: calc(9 * var(--s)); font-size: calc(24 * var(--s)); line-height: calc(29 * var(--s)); font-weight: 700; }
.grid .item img { width: calc(44 * var(--s)); height: calc(44 * var(--s)); }
.grid .p1 { order: 1; } .grid .p2 { order: 2; } .grid .p3 { order: 3; } .grid .p4 { order: 4; }

/* ---------- 문의하기 ---------- */
.contact .in { padding: calc(60 * var(--s)) 0 calc(163 * var(--s)); }
.contact .box { position: relative; margin-top: calc(28 * var(--s)); height: calc(324 * var(--s)); border-radius: calc(40 * var(--s)); background: #f7f7f7; padding: calc(45 * var(--s)) 0 0 calc(134 * var(--s)); }
.contact .char { position: absolute; right: calc(134 * var(--s)); top: calc(2 * var(--s)); width: calc(324 * var(--s)); height: calc(324 * var(--s)); }
.contact .big { font-size: calc(40 * var(--s)); line-height: calc(50 * var(--s)); font-weight: 600; color: var(--ink); }
.contact .big em { font-style: normal; font-weight: 700; color: var(--orange); }
.contact ul { list-style: none; margin-top: calc(22 * var(--s)); }
.contact li { display: flex; align-items: center; gap: calc(5 * var(--s)); height: calc(42 * var(--s)); font-size: calc(24 * var(--s)); font-weight: 500; color: var(--ink); }
.contact li img { width: calc(26 * var(--s)); height: calc(26 * var(--s)); flex: none; }

/* ---------- 바닥 (230) ---------- */
.ft { border-top: 1px solid #bbb; }
.ft .in { height: calc(229 * var(--s)); display: flex; align-items: flex-start; padding-top: calc(69 * var(--s)); }
.ft-logo { width: calc(93 * var(--s)); height: calc(93 * var(--s)); object-fit: contain; flex: none; }
.ft p { margin: calc(12 * var(--s)) 0 0 calc(140 * var(--s)); font-size: max(11px, calc(14 * var(--s))); line-height: max(13px, calc(16 * var(--s))); letter-spacing: -.02em; }
.ft .ft-gap { display: block; height: max(13px, calc(16 * var(--s))); }
.ft .privacy { margin-left: 10px; text-decoration: underline; color: #555; }

/* ---------- 맨 위로 (50, 오른쪽 39 / 아래 46) ---------- */
.totop { position: fixed; z-index: 20; right: calc(39 * var(--s)); bottom: calc(46 * var(--s)); width: calc(50 * var(--s)); height: calc(50 * var(--s)); min-width: 40px; min-height: 40px;
  border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: 2px 2px 3px rgba(0, 0, 0, .16); display: grid; place-items: center; }
.totop i { width: calc(11 * var(--s)); height: calc(11 * var(--s)); min-width: 9px; min-height: 9px; border-left: 2px solid #000; border-top: 2px solid #000; border-radius: 1px; transform: translateY(25%) rotate(45deg); }

/* ---------- 점검표 안내 팝업 ---------- */
.notice-bg { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.notice-bg[hidden] { display: none; }
.notice { background: #fff; border-radius: 10px; max-width: 380px; width: 100%; padding: 30px 26px 22px; text-align: center; line-height: 1.6; }
.notice b { font-size: 18px; }
.notice p { margin: 14px 0 0; font-size: 15px; }
.notice .s { color: var(--gray-t); font-size: 14px; }
.notice .call { display: block; margin-top: 18px; background: var(--yellow); padding: 13px; border-radius: 6px; font-weight: 700; }
.notice .close { margin-top: 10px; width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; }

/* ---------- 스크롤하면 아래에서 위로 ---------- */
.up { opacity: 0; transform: translateY(50px); transition: opacity .8s ease, transform .8s ease; }
.up.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .up { opacity: 1; transform: none; transition: none; }
  .card .ph img { transition: none; }
}

/* =====================================================================
 * 모바일 (767 이하) — XD 1000 기준 숫자 그대로, --s = 화면폭/1000
 * ===================================================================== */
@media (max-width: 767px) {
  :root { --s: calc(min(100vw, 640px) / 1000); }
  .in { width: calc(1000 * var(--s)); }
  .pc-br { display: none; }
  .mo-br { display: inline; }
  .mo-sp { display: inline; }
  section[id] { scroll-margin-top: calc(170 * var(--s)); }

  /* 머리 170, 반투명 흰색 + 아래 줄 */
  .hd { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid #bbb; }
  .hd .in { height: calc(169 * var(--s)); padding: 0 calc(60 * var(--s)); }
  .logo img { width: calc(110 * var(--s)); height: calc(106 * var(--s)); }
  .gnb, .hd .adm-btn { display: none; }
  .ham { display: block; margin-left: auto; width: calc(60 * var(--s)); height: calc(60 * var(--s)); }
  .ham img { width: 100%; height: 100%; }

  /* 전체 메뉴 */
  .mnav { position: fixed; inset: 0; z-index: 40; background: #fff; display: block; overflow-y: auto; padding-top: calc(235 * var(--s)); }
  .mnav[hidden] { display: none; }
  .mnav:focus { outline: none; }
  .mnav .x { position: absolute; right: calc(60 * var(--s)); top: calc(55 * var(--s)); width: calc(60 * var(--s)); height: calc(60 * var(--s)); }
  .mnav .x img { width: 100%; height: 100%; }
  .mnav nav { margin: 0 calc(90 * var(--s)) 0 calc(110 * var(--s)); }
  .mnav nav a { display: block; padding: calc(59 * var(--s)) calc(20 * var(--s)) calc(51 * var(--s)); border-bottom: calc(2 * var(--s)) solid #808080;
    font-size: calc(44 * var(--s)); line-height: calc(51 * var(--s)); font-weight: 600; letter-spacing: -.02em; }
  .mnav .adm-btn { display: flex; align-items: center; justify-content: center; margin: calc(128 * var(--s)) auto 0; width: calc(250 * var(--s)); height: calc(75 * var(--s)); border-radius: calc(40 * var(--s));
    background: var(--yellow); font-size: calc(36 * var(--s)); font-weight: 600; letter-spacing: -.02em; }

  /* 첫 화면 922 */
  .hero { height: calc(922 * var(--s)); background-position: 67% center; }
  .hero .in { padding-top: calc(182 * var(--s)); }
  .hero h1 { margin-top: calc(16.5 * var(--s)); }
  .hero .bar { margin-top: calc(28.5 * var(--s)); min-height: 1px; }
  .hero-btns { margin-top: calc(76 * var(--s)); flex-direction: column; gap: calc(24 * var(--s)); }
  .ghost { border-width: .5px; width: calc(548 * var(--s)); height: calc(120 * var(--s)); gap: calc(12 * var(--s)); font-size: calc(40 * var(--s)); line-height: calc(47 * var(--s)); }
  .ghost svg { width: calc(50 * var(--s)); height: calc(50 * var(--s)); }

  /* 회사소개 */
  .about .in { padding: calc(120 * var(--s)) calc(60 * var(--s)) calc(107 * var(--s)); }
  .fill-text { font-size: calc(56 * var(--s)); line-height: calc(80 * var(--s)); }

  /* 제목은 가운데 */
  .sec-t, .sec-s { text-align: center; }
  .sec-s { margin-top: calc(24 * var(--s)); font-size: calc(36 * var(--s)); line-height: calc(42 * var(--s)); }

  /* 서비스분야: 흰 카드 안에 사진 + 아래 글자 */
  .service .in { padding: calc(80 * var(--s)) 0; }
  .cards { margin-top: calc(82 * var(--s)); flex-direction: column; align-items: center; gap: calc(30 * var(--s)); }
  .card { width: calc(804 * var(--s)); height: auto; border-radius: calc(30 * var(--s)); background: #fff; padding: calc(20 * var(--s)) calc(21 * var(--s)) calc(41.5 * var(--s)); }
  .card .ph { position: relative; height: calc(358 * var(--s)); border-radius: calc(30 * var(--s)); overflow: hidden; transform: translateZ(0); }
  .card .ph::after { display: none; }
  .card .ph img { object-position: 50% var(--py, 50%); }
  .card b { position: static; display: block; height: auto; margin: calc(42.5 * var(--s)) 0 0 calc(20 * var(--s)); text-align: left; color: #111; font-size: calc(40 * var(--s)); line-height: calc(47 * var(--s)); }

  /* 핵심경쟁력: 한 줄씩 */
  .strength .in { padding: calc(120 * var(--s)) 0; }
  .grid { margin: calc(62 * var(--s)) auto 0; width: calc(804 * var(--s)); grid-template-columns: 1fr; gap: calc(30 * var(--s)); }
  .grid .item { order: 0 !important; height: calc(150 * var(--s)); padding-left: calc(249 * var(--s)); gap: calc(20 * var(--s)); font-size: calc(40 * var(--s)); line-height: calc(47 * var(--s)); }
  .grid .item img { width: calc(70 * var(--s)); height: calc(70 * var(--s)); }

  /* 문의하기: 회색 배경 전체, 그림 위·글자 가운데 */
  .contact { background: #f7f7f7; margin-bottom: calc(120 * var(--s)); }
  .contact .in { padding: calc(80 * var(--s)) 0 calc(70 * var(--s)); }
  .contact .box { margin-top: calc(24 * var(--s)); height: auto; border-radius: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
  .contact .char { position: static; width: calc(331 * var(--s)); height: calc(331 * var(--s)); }
  .contact .txt { width: 100%; }
  .contact .big { margin-top: calc(29 * var(--s)); text-align: center; font-size: calc(48 * var(--s)); line-height: calc(60 * var(--s)); }
  .contact ul { margin: calc(40 * var(--s)) 0 0 calc(155 * var(--s)); }
  .contact li { height: calc(70 * var(--s)); gap: calc(11 * var(--s)); font-size: calc(32 * var(--s)); }
  .contact li img { width: calc(51 * var(--s)); height: calc(51 * var(--s)); }

  /* 바닥 470 */
  .ft .in { height: auto; flex-direction: column; align-items: center; padding: calc(60 * var(--s)) 0 calc(67 * var(--s)); }
  .ft-logo { width: calc(138 * var(--s)); height: calc(130 * var(--s)); }
  .ft p { margin: calc(48 * var(--s)) 0 0; text-align: center; font-size: calc(28 * var(--s)); line-height: calc(33 * var(--s)); white-space: nowrap; }
  .ft .ft-gap { height: calc(33 * var(--s)); }
  .ft .privacy { display: block; margin: calc(20 * var(--s)) 0 0; }

  /* 맨 위로 90, 오른쪽 15 / 아래 53 */
  .totop { right: calc(15 * var(--s)); bottom: calc(53 * var(--s)); width: calc(90 * var(--s)); height: calc(90 * var(--s)); min-width: 0; min-height: 0; }
  .totop i { width: calc(18 * var(--s)); height: calc(18 * var(--s)); min-width: 0; min-height: 0; }

  .up { transform: translateY(30px); }
}