/* ===========================================================
   방수명가 — 디자인 기본값
   색·글씨크기·간격을 여기 맨 위에서 한 번에 바꿉니다.
   =========================================================== */

/* 글꼴 — 웹용(woff2)으로 줄여서 담았습니다. 원본 otf 는 무거워서 쓰지 않습니다.
   ⚠️ 제목은 이제 그림이 아니라 진짜 글자입니다(청도읍성체). 글을 고치려면 pages/*.html 만 고치면 됩니다. */
@font-face { font-family: Pretendard; src: url("/assets/fonts/Pretendard-Regular.woff2")  format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Pretendard; src: url("/assets/fonts/Pretendard-Medium.woff2")   format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Pretendard; src: url("/assets/fonts/Pretendard-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Pretendard; src: url("/assets/fonts/Pretendard-Bold.woff2")     format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: 청도읍성체;  src: url("/assets/fonts/cheongdo.woff2")            format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* 색 — 지금 사이트에서 그대로 가져온 값 */
  --red:    #a11d1f;   /* 브랜드 빨강 */
  --red-d:  #8a1719;   /* 눌렀을 때 */
  --cream:  #f0eee8;   /* 크림 배경 */
  --ink:    #16171a;   /* 본문 검정 */
  --sub:    #6b6f76;   /* 흐린 글씨 */
  --line:   #e3e1db;   /* 선 */
  --white:  #fff;

  /* 글씨 */
  --ff:     Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --ff-h:   청도읍성체, Pretendard, sans-serif;   /* 큰 제목용 */

  /* 가로 폭·간격 — 원본 내용 폭이 1203px 이라 좌우 여백 24를 더해 1251px (=125.1rem) */
  --wrap:   125.1rem;
  --pad:    2.4rem;
  --sec:    12rem;     /* 섹션 위아래 여백 (PC) */
  --sec-m:  7.2rem;      /* 섹션 위아래 여백 (폰) */
  --bar-h:  6.4rem;      /* 아래 고정 띠 높이 */
}

/* ===========================================================
   ⚠️ 확대·축소가 안 먹게 하는 장치 (2026-08-05 대표님 요청)

   모든 크기를 rem 으로 적어 두고, 1rem 을 화면 폭에 묶어 둡니다.
   브라우저를 확대하면 화면 폭(100vw)이 그만큼 줄어들어 1rem 도 같이 줄기 때문에
   결과가 똑같아 보입니다 = 확대해도 아무 일도 안 일어남.

   ⚠️ 그래서 이 파일에는 px 를 쓰면 안 됩니다. 전부 rem 으로 적어주세요.
      1rem = 10px (1440 화면 기준) — 예: 16px → 1.6rem
   =========================================================== */
html { font-size: 62.5%; }                                    /* 폰·태블릿: 1rem = 10px */
@media (min-width: 951px) { html { font-size: calc(100vw / 144); } }   /* PC: 1440 기준으로 통째로 늘었다 줄었다 */

/* ---- 기본 ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--ff); font-weight: 400; font-size: 1.6rem;
  color: var(--ink); background: var(--white);
  line-height: 1.65; word-break: keep-all; letter-spacing: -0.01em;
  padding-bottom: var(--bar-h);       /* 아래 고정 띠에 안 가리게 */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.28; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
::selection { background: var(--red); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.sec  { padding: var(--sec) 0; }
.sec-cream { background: var(--cream); }
.sec-dark  { background: var(--ink); color: #fff; }

/* 큰 제목 (청도읍성체) — 원본 첫 화면 제목이 한 글자 ≈ 99px */
.h-big  { font-family: var(--ff-h); font-weight: 400; font-size: 11.8rem; line-height: 1.32; }
.h-mid  { font-family: var(--ff-h); font-weight: 400; font-size: 4.2rem; line-height: 1.3; }
.h-sm   { font-size: 2.6rem; font-weight: 700; }
.eyebrow{ color: var(--red); font-weight: 700; font-size: 1.5rem; letter-spacing: 0; margin-bottom: 1.4rem; }
.lead   { color: var(--sub); font-size: 1.8rem; }
.red    { color: var(--red); }

/* ---- 버튼 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  height: 5.2rem; padding: 0 2.6rem; border-radius: 0.8rem;
  font-weight: 700; font-size: 1.6rem; white-space: nowrap;
  transition: background .15s, transform .06s;
}
.btn:active { transform: translateY(0.1rem); }
.btn-red  { background: var(--red); color: #fff; }
.btn-red:hover  { background: var(--red-d); }
.btn-dark { background: var(--ink); color: #fff; height: 4.6rem; padding: 0 2rem; font-size: 1.5rem; }
.btn-dark:hover { background: #000; }
.btn-line { border: 0.1rem solid var(--ink); }
.btn-lg   { height: 6rem; padding: 0 3.4rem; font-size: 1.7rem; }

.ico-tel {
  width: 1.8rem; height: 1.8rem; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11 21 3 13 3 3c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11 21 3 13 3 3c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/></svg>") center/contain no-repeat;
}

/* ---- 상단 메뉴 ---- */
.hd { position: sticky; top: 0; z-index: 50; background: rgba(240,238,232,.94); backdrop-filter: blur(0.8rem); }
.hd-in { display: flex; align-items: center; gap: 2.8rem; height: 8.4rem; }
.hd-logo img { width: 10.1rem; }
.hd-nav { display: flex; align-items: center; gap: 2.6rem; margin-left: 0.8rem; }
.hd-link { font-size: 1.6rem; font-weight: 600; padding: 0.6rem 0; position: relative; }
.hd-link.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.2rem; height: 0.2rem; background: var(--red); }
.hd-drop { position: relative; }
.hd-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(0.6rem);
  background: #fff; border: 0.1rem solid var(--line); border-radius: 1rem; padding: 0.8rem;
  min-width: 15.6rem; box-shadow: 0 1.2rem 2.8rem rgba(0,0,0,.08);
  opacity: 0; visibility: hidden; transition: .16s;
}
.hd-drop:hover .hd-menu, .hd-drop:focus-within .hd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.hd-menu a { display: block; padding: 0.9rem 1.2rem; border-radius: 0.6rem; font-size: 1.5rem; }
.hd-menu a:hover { background: var(--cream); }
.hd-right { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.hd-tel { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; }
.hd-burger { display: none; width: 4rem; height: 4rem; flex-direction: column; justify-content: center; gap: 0.5rem; }
.hd-burger span { display: block; height: 0.2rem; background: var(--ink); border-radius: 0.2rem; }
.hd-mob { display: none; border-top: 0.1rem solid var(--line); background: #fff; }
.hd-mob a { display: block; padding: 1.5rem var(--pad); border-bottom: 0.1rem solid var(--line); font-weight: 600; }
.hd.open .hd-mob { display: block; }

/* ---- 아래 고정 띠 ---- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: var(--bar-h);
  display: flex; align-items: stretch; background: var(--ink);
}
.bar-tel { display: none; align-items: center; justify-content: center; gap: 0.8rem; color: #fff; font-weight: 800; font-size: 1.7rem; flex: 0 0 42%; }
.bar-cta { flex: 1; background: var(--red); color: #fff; font-weight: 700; font-size: 1.7rem; }
.bar-cta:hover { background: var(--red-d); }

/* ---- 견적 신청 창 ---- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.modal[hidden] { display: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modal-box {
  position: relative; width: 100%; max-width: 46rem; max-height: 88vh; overflow: auto;
  background: #fff; border-radius: 1.6rem; padding: 3.4rem 2.8rem 2.8rem;
}
.modal-x { position: absolute; top: 1.4rem; right: 1.4rem; width: 3.4rem; height: 3.4rem; font-size: 1.7rem; color: var(--sub); }
.modal-eyebrow { color: var(--red); font-weight: 700; font-size: 1.4rem; }
.modal-title { font-family: var(--ff-h); font-weight: 400; font-size: 2.7rem; line-height: 1.32; margin: 0.6rem 0 1rem; }
.modal-sub { color: var(--sub); font-size: 1.45rem; margin-bottom: 2rem; }

/* ---- 견적 입력칸 ---- */
.qf-row { display: block; margin-bottom: 1.4rem; }
.qf-label { display: block; font-size: 1.4rem; font-weight: 600; margin-bottom: 0.6rem; }
.qf-label b { color: var(--red); }
/* ⚠️ 체크칸은 빼야 합니다. 안 그러면 동의 체크칸이 가로 전체로 늘어나 글자가 밖으로 밀려납니다. */
.qf input:not([type="checkbox"]), .qf textarea {
  width: 100%; border: 0.1rem solid var(--line); border-radius: 0.8rem; background: #fff;
  padding: 1.3rem 1.4rem; font-size: 1.55rem; outline: none; transition: border-color .15s;
}
.qf input:focus, .qf textarea:focus { border-color: var(--ink); }
.qf input.err, .qf textarea.err { border-color: var(--red); }
.qf textarea { resize: vertical; min-height: 8.4rem; }
.qf-agree { display: flex; align-items: flex-start; gap: 0.8rem; font-size: 1.35rem; color: var(--sub); margin: 0.4rem 0 1.8rem; }
.qf-agree input { width: auto; margin-top: 0.3rem; flex: none; accent-color: var(--red); }
.qf-agree a { text-decoration: underline; }
.qf-submit { width: 100%; }
.qf-done, .qf-fail { margin-top: 1.6rem; padding: 1.6rem; border-radius: 1rem; text-align: center; font-size: 1.5rem; line-height: 1.6; }
.qf-done { background: var(--cream); }
.qf-fail { background: #fdeaea; color: var(--red); }

/* ---- 바닥글 (원본처럼 검정) ---- */
.ft { background: #000; color: #fff; padding: 7.4rem 0 5.4rem; }
.ft-logo { width: 12.2rem; margin-bottom: 3.4rem; }
.ft-name { font-size: 1.5rem; font-weight: 700; }
.ft-addr { margin-top: 1rem; font-size: 1.3rem; color: rgba(255,255,255,.55); }
.ft-addr span { color: rgba(255,255,255,.55); }
.ft-info { display: flex; flex-wrap: wrap; gap: 0.6rem 2.6rem; margin-top: 1rem; font-size: 1.3rem; color: rgba(255,255,255,.55); }
.ft-info b { font-weight: 400; color: rgba(255,255,255,.8); }
.ft-copy { margin-top: 2.6rem; font-size: 1.2rem; color: rgba(255,255,255,.38); }
.ft-bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: 4.4rem; }
.ft-nav { display: flex; gap: 2.8rem; font-size: 1.4rem; font-weight: 600; flex-wrap: wrap; }
.ft-priv { font-size: 1.2rem; color: rgba(255,255,255,.55); }
.ft-kw { margin-top: 3rem; font-size: 1.1rem; line-height: 1.9; color: rgba(255,255,255,.28); }

/* ===========================================================
   폰·태블릿
   =========================================================== */
/* ⚠️ 95rem 아래로만 배치가 바뀝니다.
   1440 화면에서 150% 확대해도 96rem 이라 PC 배치가 그대로 유지됩니다. */
@media (max-width: 950px) {
  :root { --sec: var(--sec-m); --pad: 2rem; }
  .hd-in { height: 6.2rem; gap: 1.2rem; }
  .hd-nav, .hd-cta { display: none; }
  .hd-burger { display: flex; }
  .hd-tel { font-size: 1.9rem; }
  .bar-tel { display: flex; }
  .modal-box { padding: 2.8rem 2rem 2.2rem; }
  .ft { padding: 4.4rem 0 9rem; }
}
@media (max-width: 560px) {
  .hd-tel span.ico-tel { width: 1.6rem; height: 1.6rem; }
  .hd-tel { font-size: 1.7rem; }
  .bar-cta, .bar-tel { font-size: 1.55rem; }
}


/* ===========================================================
   홈 화면 — 지금 사이트와 같은 배치
   =========================================================== */
.tc { text-align: center; }
.mt16 { margin-top: 1.6rem; }
.mt24 { margin-top: 2.4rem; }
.mt32 { margin-top: 3.2rem; }
.lead-w { color: rgba(255,255,255,.82); font-size: 1.7rem; line-height: 1.8; margin-top: 1.8rem; }
.lead-w b { color: #fff; font-weight: 700; }
.eyebrow.cream { color: #ffebd2; }
.eyebrow.red   { color: var(--red); }
.cream { color: #ffebd2; }

/* 섹션 제목 — 청도읍성체 (예전엔 그림이었지만 이제 진짜 글씨) */
.h-sec {
  font-family: var(--ff-h); font-weight: 400;
  font-size: 4.6rem; line-height: 1.36;
  letter-spacing: -0.005em; color: inherit;
}
/* 어두운 배경에서는 조금 굵어 보이게 */
.s-why .h-sec, .s-principle .h-sec, .s-result .h-sec,
.s-case .h-sec, .s-brand .h-sec, .s-quote .h-sec, .s-rules-intro .h-sec { color: #fff; }

/* ① 첫 화면 — 위쪽은 순수 크림, 아래쪽부터 큰 사진 (원본 구조) */
.hero { background: var(--cream); }
.hero-top { text-align: center; padding: 8.2rem var(--pad) 0; }
.hero-title { margin-bottom: 5.5rem; }
.hero-sub { font-size: 1.9rem; line-height: 1.9; color: #3f4145; }
.hero-btn { margin-top: 5.4rem; }
.hero-band {
  display: block; width: 100%; margin: 6rem auto 0; max-width: 110rem;
  background: var(--red); color: #fff; font-weight: 700; font-size: 1.6rem;
  border-radius: 0.4rem; padding: 1.8rem 2rem; transition: background .15s;
}
.hero-band:hover { background: var(--red-d); }

/* 큰 사진 구역 — 위쪽은 크림에서 서서히 나타나게 */
.hero-photo {
  position: relative; background: var(--cream) url("/assets/img/s02-bg.webp") center top/cover no-repeat;
  padding: 3.2rem 0 12rem;
}
.hero-photo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22rem;
  background: linear-gradient(180deg, var(--cream) 0%, rgba(240,238,232,.55) 55%, rgba(240,238,232,0) 100%); }
.hero-photo .wrap { position: relative; }
.hero-card { width: 100%; border-radius: 1.4rem; margin-bottom: 2.2rem; }
.hero-note { margin-top: 2.8rem; font-size: 1.15rem; line-height: 1.8; color: rgba(255,255,255,.5); text-align: center; }

/* 왼쪽 위 알림창 (브랜드평판 1위) */
.notice { position: absolute; top: 10rem; left: 4rem; z-index: 40; width: 40rem; max-width: calc(100vw - 3.2rem); }
.notice[hidden] { display: none; }
.notice img { width: 100%; border: 0.1rem solid rgba(0,0,0,.12); display: block; }
.notice-x { position: absolute; top: 1.2rem; right: 1.2rem; width: 3rem; height: 3rem; color: #fff; font-size: 1.5rem; opacity: .85; }
/* 아래 내용과 겹쳐도 읽히게 바탕을 깝니다 */
.notice-day { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 0.7rem;
  padding: 0.4rem 0.8rem; background: rgba(240,238,232,.94); border-radius: 0.4rem;
  font-size: 1.3rem; color: #4b4d52; cursor: pointer; }
.notice-day input { width: auto; margin: 0; }

/* ② 왜 4배 */
.s-why { background: #1a1a1a; color: #fff; }
.why-line { margin: 5.2rem auto 0; width: 100%; max-width: 120.3rem; }
.why-bills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem; margin-top: 4rem; align-items: start; }
.why-bills img { width: 100%; }

/* ③ 그래서 방수명가는 — 카드 3장은 본문보다 넓게 (원본 138.6rem) */
.s-principle { background: #0e0e0e; color: #fff; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem;
  max-width: 144rem; margin: 5rem auto 0; padding: 0 2.7rem; }
.cards3 img { width: 100%; border-radius: 1.2rem; }
/* 원본처럼 살짝 엇갈리게 */
.cards3 img:nth-child(2) { margin-top: 1.8rem; }

/* ④ 가운데 숫자 띠 — 원본은 빨간 배경 */
.s-strip { background: #9e181a; padding: 6.2rem 0; color: #fff; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.stats li { text-align: center; padding: 0 1.6rem; border-left: 0.1rem solid rgba(255,255,255,.22); }
.stats li:first-child { border-left: 0; }
.st-t { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; }
.st-s { margin-top: 0.6rem; font-size: 1.3rem; color: rgba(255,255,255,.62); letter-spacing: -0.02em; }
.st-n { margin-top: 2rem; font-size: 5.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.st-n span { font-size: .38em; font-weight: 700; margin-left: 0.2rem; }

/* ⑤ 결과로 증명 — 넘겨보는 슬라이더 */
.s-result { background: #0e0e0e; color: #fff; padding-bottom: 8rem; }
.slider { position: relative; margin-top: 4.4rem; padding: 0 7rem; }
.sl-view { overflow: hidden; border-radius: 1.2rem; }
.sl-track { display: flex; transition: transform .38s ease; }
.sl-track img { width: 100%; flex: 0 0 100%; }
.sl-arw {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 4.4rem; height: 4.4rem; border-radius: 50%; color: #fff; font-size: 1.8rem;
  background: rgba(255,255,255,.14); transition: background .15s;
}
.sl-arw:hover { background: rgba(255,255,255,.28); }
.sl-prev { left: 0; }
.sl-next { right: 0; }
.marquee { overflow: hidden; margin-top: 4.8rem; }
.marquee-in { display: flex; gap: 2rem; width: max-content; animation: slide 42s linear infinite; }
.marquee-in img { height: 48.4rem; width: auto; border-radius: 1.2rem; }
.marquee:hover .marquee-in { animation-play-state: paused; }
.marquee-slow .marquee-in { animation-duration: 34s; }
.marquee-slow .marquee-in img { height: 20rem; border-radius: 0; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-in { animation: none; } }

/* ⑥ 고객 후기 — 벽돌쌓기 (원본처럼 아래쪽이 서서히 사라짐) */
.s-review { background: var(--cream); padding-bottom: 0; }
.masonry-wrap { position: relative; margin-top: 4.8rem; }
.masonry { columns: 4; column-gap: 1.6rem; max-height: 118rem; overflow: hidden; }
.masonry img { width: 100%; margin-bottom: 1.6rem; break-inside: avoid; border-radius: 1.2rem; }
.masonry-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32rem;
  background: linear-gradient(180deg, rgba(240,238,232,0) 0%, var(--cream) 78%); pointer-events: none; }

/* ⑦ 시공사례 */
.s-case { background: #000; color: #fff; }
.soon { margin-top: 3rem; padding: 5.2rem 2rem; border: 0.1rem dashed rgba(255,255,255,.22); border-radius: 1.4rem; color: rgba(255,255,255,.5); font-size: 1.5rem; }
.soon.dark { background: rgba(255,255,255,.03); }

/* ⑧ 3가지 고집 들머리 */
.s-rules-intro { background: #8a0f10; color: #fff; padding: 7.4rem 0; }

/* ⑨ 3가지 고집 본문 */
.s-rules { background: var(--cream); }
.rule { display: grid; grid-template-columns: 1fr 46.6rem; gap: 6rem; align-items: center; padding: 5.2rem 0; border-bottom: 0.1rem solid var(--line); }
.rule:last-child { border-bottom: 0; }
.rule-no { font-family: var(--ff-h); font-weight: 400; color: var(--red); font-size: 2.3rem; margin-bottom: 0.8rem; }
.rule-h  { font-family: var(--ff-h); font-weight: 400; font-size: 3.5rem; line-height: 1.36; margin-bottom: 1.6rem; }
.rule .lead { max-width: 64rem; }
.rule-img { width: 100%; border-radius: 1.2rem; }

/* ⑩ 이제 걱정하지 마세요 — 카드 5장을 원본처럼 계단식으로 */
.s-worry { background: var(--cream); }
.s-worry .lead { margin-top: 1.8rem; }
.cards5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem;
  margin-top: 4.6rem; align-items: start; }
.cards5 a { display: block; transition: transform .18s; }
.cards5 a:hover { transform: translateY(-0.4rem); }
.cards5 a:nth-child(2) { margin-top: 2.8rem; }
.cards5 a:nth-child(3) { margin-top: 1.4rem; }
.cards5 a:nth-child(4) { margin-top: 4.6rem; }
.cards5 img { width: 100%; }

/* ⑪ 기업들의 선택 */
.s-brand { background: #000; color: #fff; padding-bottom: 7rem; }
.s-brand .lead-w { text-align: center; }

/* ⑫ 자주 묻는 질문 — 원본처럼 테두리 상자 */
.s-faq { background: var(--cream); }
.faq { margin: 5.4rem auto 0; max-width: 110.4rem; }
.faq details { border: 0.1rem solid #2b2b2b; border-radius: 0.6rem; margin-bottom: 1.6rem; }
.faq summary { list-style: none; cursor: pointer; padding: 2.4rem 3rem 2.4rem 4.8rem; font-size: 1.6rem; font-weight: 500; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q. "; font-weight: 600; }
.faq p { padding: 0 4.8rem 2.6rem; color: var(--sub); font-size: 1.5rem; line-height: 1.85; margin-top: -0.6rem; }
.faq p b { color: var(--ink); font-weight: 600; }

/* ⑬ 하단 견적 신청 — 원본은 빨간 배경, 흰 상자 없이 바로 */
.s-quote { background: #981a1e; color: #fff; }
.quote-in { display: grid; grid-template-columns: 1fr 44rem; gap: 8rem; align-items: center; }
.quote-tel { display: inline-flex; align-items: center; gap: 0.9rem; margin-top: 3rem; font-size: 3.8rem; font-weight: 800; letter-spacing: -0.02em; }
.s-quote .qf-label { color: #fff; }
.s-quote .qf-agree { color: rgba(255,255,255,.85); }
.s-quote .qf-submit { background: var(--ink); }
.s-quote .qf-submit:hover { background: #000; }
.s-quote .qf-done { background: rgba(0,0,0,.28); color: #fff; }
.s-quote .qf-fail { background: rgba(0,0,0,.35); color: #ffd9d9; }

/* ===========================================================
   화면이 좁아질 때 (= 브라우저를 확대할 때도 같은 길로 갑니다)

   ⚠️ 여기 조건(max-width: ...px)만 px 이고, 안의 값은 전부 rem 입니다.
   =========================================================== */

/* 폰·태블릿 (950 아래) — 여기서부터 한 줄 배치 + 작은 글씨
   ⚠️ PC 크기와 폰 크기가 갈리는 지점은 반드시 950 하나로 맞춰야 합니다.
      (배치 기준과 글씨 기준이 어긋나면 태블릿에서 글씨만 거대해집니다) */
@media (max-width: 950px) {
  .rule { grid-template-columns: 1fr; gap: 3.4rem; padding: 4.2rem 0; }
  .rule-img { max-width: 46.6rem; }
  .quote-in { grid-template-columns: 1fr; gap: 4.4rem; }
  .masonry { columns: 3; }
  .notice { top: 7.6rem; left: 50%; transform: translateX(-50%); width: 30rem; }
  .cards3 { padding: 0 2rem; }

  .h-big { font-size: 3.8rem; }
  .h-mid { font-size: 2.6rem; }
  .h-sm  { font-size: 2rem; }
  .h-sec { font-size: 2.6rem; }
  .lead   { font-size: 1.5rem; }
  .lead-w { font-size: 1.4rem; }
  .hero-top { padding-top: 4.4rem; }
  .hero-sub { font-size: 1.5rem; }
  .hero-title { margin-bottom: 2.4rem; }
  .hero-btn { margin-top: 2.8rem; }
  .hero-band { margin-top: 3rem; font-size: 1.4rem; }
  .hero-photo { padding: 2.2rem 0 6rem; }
  .hero-card { border-radius: 1rem; margin-bottom: 1.4rem; }
  .hero-note { margin-top: 1.8rem; }
  .masonry-wrap { margin-top: 2.8rem; }
  .masonry-wrap .masonry { max-height: 90rem; }
  .why-line { margin-top: 3rem; }
  .why-bills { gap: 1.4rem; margin-top: 2.2rem; }
  .cards3 { gap: 1.2rem; margin-top: 3rem; }
  .cards5 { gap: 1rem; margin-top: 2.8rem; }
  .s-strip { padding: 3.4rem 0; }
  .stats li { padding: 0 0.6rem; }
  .st-n { font-size: 3rem; margin-top: 1rem; }
  .st-t { font-size: 1.3rem; }
  .st-s { font-size: 1rem; }
  .s-result { padding-bottom: 4.8rem; }
  .slider { margin-top: 2.6rem; padding: 0 3.8rem; }
  .marquee { margin-top: 2.8rem; }
  .marquee-in img { height: 22rem; }
  .marquee-slow .marquee-in img { height: 9rem; }
  .s-rules-intro { padding: 4.4rem 0; }
  .rule { gap: 2.4rem; padding: 3rem 0; }
  .rule-no { font-size: 1.7rem; }
  .rule-h  { font-size: 2.2rem; }
  .s-brand { padding-bottom: 4rem; }
  .faq { margin-top: 2.8rem; }
  .faq summary { padding: 2rem 2rem 2rem 2.4rem; font-size: 1.4rem; }
  .faq p { padding: 0 2.4rem 2.2rem; }
  .quote-in { gap: 3rem; }
  .quote-tel { font-size: 2.6rem; }
}

/* 폰 — 칸 수만 줄입니다 */
@media (max-width: 760px) {
  .masonry { columns: 2; column-gap: 1.2rem; }
  .masonry img { margin-bottom: 1.2rem; }
  .cards3, .why-bills { grid-template-columns: 1fr; }
  .cards3 img:nth-child(2) { margin-top: 0; }
  .cards5 { grid-template-columns: repeat(2, 1fr); }
  .cards5 a:nth-child(2), .cards5 a:nth-child(3), .cards5 a:nth-child(4) { margin-top: 0; }
  .stats { grid-template-columns: repeat(3, 1fr); row-gap: 2.8rem; }
  .stats li:nth-child(3n+1) { border-left: 0; }
  .notice { top: 7rem; width: 26rem; }
}