/* ===========================================================
   아래에서 올라오는 신청창 — 폰 홈(m.html)에 있는 그 창 그대로 (2026-08-26)

   왜 파일이 따로 있나: 창의 마크업은 m.html 것을 그대로 복사해 왔지만,
   m.css 를 그대로 부를 수는 없습니다. m.css 에는 html{font-size:62.5%} 같은
   '페이지 전체' 규칙이 들어 있고, 웹플로우 공용 css 도 rem 을 44군데 쓰기 때문에
   뿌리 글씨 크기를 건드리면 이 페이지들 배치가 통째로 어긋납니다.
   → 그래서 **값은 m.css 와 똑같이 두고 단위만 rem → px 로 바꿔** 옮겨 적었습니다.
      (m.css 는 1rem = 10px 기준입니다. 예: 1.4rem → 14px)
   ⚠️ m.css 쪽 창을 고치면 여기도 같이 고쳐야 두 곳이 안 어긋납니다.

   ⚠️ 모든 규칙을 .bsmgm 안으로 가둡니다. 이 페이지들에는 웹플로우가 만든
      .w-form 이 3개나 더 있어서, 안 가두면 그쪽 폼까지 모양이 바뀝니다.
   =========================================================== */

/* 청도읍성체 — 제목 한 줄에만 씁니다. 폰 홈이 쓰는 그 파일 그대로라, 홈을 거쳐 온 손님은 이미 받아 둔 상태입니다. */
@font-face {
  font-family: bsmgCheongdo;
  src: url("fonts/cheongdo.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

.bsmgm {
  --red: #a11d1f; --red-d: #8a1719; --red-l: #fbeceb; --cream: #f0eee8;
  --ink: #16171a; --sub: #6b6f76; --line: #e3e1db; --white: #fff;
  --pad: 20px;
  --ff: Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --ff-h: bsmgCheongdo, Pretendard, sans-serif;
}
.bsmgm, .bsmgm *, .bsmgm *::before, .bsmgm *::after { box-sizing: border-box; }

/* 뒤를 덮는 검은 막
   ⚠️ z-index 는 아주 크게. 이 페이지의 맨 위 메뉴줄(.navbar)이 998, .w-nav 가 1000,
      웹플로우 자기 팝업이 99999 라서, 그보다 위에 있어야 창이 메뉴줄에 안 가립니다. */
.bsmgm .dim { position: fixed; inset: 0; background: rgba(10,12,16,.55); z-index: 100000;
  opacity: 0; pointer-events: none; transition: opacity .22s; }

/* 창 — ⚠️ 뒤쪽 '지우기' 줄은 웹플로우의 .pop-c 규칙을 되돌리는 것입니다.
   웹플로우 팝업이 같은 이름을 쓰는데 거기엔 `position:static; inset:0 0 auto`(=위에 붙임) 가 들어 있어서,
   top:auto 로 풀어 주지 않으면 창이 아래가 아니라 **화면 맨 위**에 붙어 메뉴줄에 가립니다(실제로 그랬습니다). */
.bsmgm .sheet { position: fixed; top: auto; right: auto; bottom: 0; left: 50%;
  transform: translate(-50%, 105%);
  width: 100%; max-width: 430px; z-index: 100001; background: var(--white);
  border-radius: 18px 18px 0 0;
  padding: 14px var(--pad) calc(20px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto;
  transition: transform .28s cubic-bezier(.32,.72,.32,1);
  /* ↓ m.css 의 body 규칙과 같은 값 — 안쪽 글자 크기·줄간격이 폰 홈과 어긋나지 않게 */
  font-family: var(--ff); font-weight: 400; font-size: 16px; line-height: 1.65;
  color: var(--ink); text-align: left; word-break: keep-all; letter-spacing: -0.01em;
  margin: 0; flex: none; display: block; }                   /* ← 웹플로우 .pop-c 지우기 */
/* m.css 가 페이지 전체에 걸던 기본값들 — 창 안에서만 되살립니다 */
.bsmgm a { color: inherit; text-decoration: none; }
.bsmgm button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.bsmgm input, .bsmgm textarea, .bsmgm select { font: inherit; color: inherit; }

body.sheet-open, body.pp-open { overflow: hidden; }
body.sheet-open .bsmgm .dim, body.pp-open .bsmgm .dim { opacity: 1; pointer-events: auto; }
/* ⚠️ 창이 둘(신청 / 처리방침)이라 각각 따로 열어야 합니다. .sheet 로 뭉뚱그리면 둘 다 올라옵니다. */
body.sheet-open .bsmgm .sheet.pop-c { transform: translate(-50%, 0); }
body.pp-open    .bsmgm .sheet-pp    { transform: translate(-50%, 0); }

.bsmgm .sheet .grip { width: 44px; height: 4px; border-radius: 2px; background: #d4d8de; margin: 0 auto 10px; }
/* ★ padding 1px 6px = 브라우저가 button 에 기본으로 주는 여백. 0 으로 만들면 폰 홈보다 누를 칸이 좁아집니다 */
.bsmgm .sheet .x { position: absolute; top: 12px; right: 14px; font-size: 22px; color: var(--sub);
  line-height: 1; background: none; border: 0; padding: 1px 6px; margin: 0; cursor: pointer; }

/* 제목·소제목 */
.bsmgm .formhead { font-family: var(--ff-h); font-weight: 400; font-size: 22px; margin: 0; color: var(--ink); }
.bsmgm .formsub  { font-size: 13.5px; color: var(--sub); margin: 4px 0 0; }

/* 신청 칸들 */
/* ⚠️ 웹플로우 normalize 는 `.w-form { margin: 0 0 15px }` 도 겁니다.
      margin-top 만 적으면 그 아래 15px 이 남아서 창이 15px 길어집니다(실제로 그랬습니다). */
.bsmgm .w-form { margin: 14px 0 0; }
/* ⚠️ 웹플로우 normalize 의 `.w-form form { margin: 0 0 15px }` 되돌리기 — 안 하면 창이 15px 길어집니다 */
.bsmgm .w-form form { margin: 0; }
.bsmgm .w-form label { display: block; font-size: 13.5px; font-weight: 700; margin: 14px 0 6px; color: var(--ink); }
.bsmgm .w-form label .opt { color: var(--sub); font-weight: 500; }
.bsmgm .w-form input[type=text], .bsmgm .w-form input[type=tel] {
  width: 100%; height: auto; min-height: 52px; margin: 0;
  border: 1.5px solid var(--line); border-radius: 7px;
  padding: 14px; font-size: 16px; font-family: var(--ff); color: var(--ink);
  background: var(--white); }
.bsmgm .w-form input:focus { outline: none; border-color: var(--ink); }
.bsmgm .w-form .agree { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center;
  font-size: 13px; color: var(--sub); margin: 16px 0; }
.bsmgm .w-form .agree input { width: 18px; height: 18px; min-height: 0; margin: 0; flex-shrink: 0; }
/* 동의 문구는 위 label 규칙(줄바꿈·굵게)을 되돌려 한 줄로 둡니다 */
.bsmgm .w-form .agree label { display: inline; margin: 0; font-size: inherit; font-weight: 400; }
.bsmgm .w-form .agree a { text-decoration: underline; color: inherit; }

/* 보내기 버튼 */
.bsmgm .btn { display: block; width: 100%; height: auto; text-align: center; border-radius: 8px;
  padding: 16px; font-size: 16.5px; font-weight: 700; font-family: var(--ff);
  border: 1.5px solid transparent; cursor: pointer; margin: 0; }
/* ⚠️ m.css 에도 똑같이 있는 줄입니다(m.css 466행). 이게 없으면 브라우저가 보내기 칸에
      제 나름의 테두리 1px 을 붙여서 폰 홈보다 버튼이 2px 두꺼워집니다(실제로 그랬습니다). */
.bsmgm .w-form input[type=submit] { -webkit-appearance: none; appearance: none; border: 0; }
.bsmgm .btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.bsmgm .btn-red:active { background: var(--red-d); border-color: var(--red-d); }

/* 보낸 뒤 안내 — ⚠️ 처음엔 안 보이다가 bsmg-form.js 가 display:block 으로 켭니다 */
.bsmgm .w-form-done, .bsmgm .w-form-fail { display: none; text-align: center; border-radius: 8px; padding: 28px 16px; }
/* 마지막 줄 밑에 남는 줄간격만큼 아래를 깎아 위아래를 맞춥니다 */
.bsmgm .w-form-done { background: var(--cream); padding-bottom: 26px; }
/* ⚠️ 위아래 여백은 상자 padding 만으로 — 제목 margin-top 을 주면 위아래가 어긋납니다 */
/* ⚠️ 반드시 '>' (바로 아래 자식)로 — 그냥 b 면 문장 속 전화번호까지 커집니다 */
.bsmgm .w-form-done > b { display: block; font-size: 17px; margin: 0 0 6px; color: var(--ink); line-height: 1.35; }
.bsmgm .w-form-done p { font-size: 14px; color: var(--sub); margin: 0; }
/* ⚠️ 안쪽 글자(빨간 전화번호)까지 같이 걸어야 두 줄 간격이 고르게 됩니다 */
.bsmgm .w-form-done p, .bsmgm .w-form-done p * { line-height: 1.5; }
.bsmgm .w-form-done a { color: var(--red); }
.bsmgm .w-form-fail { background: var(--red-l); color: var(--red); font-size: 14px; font-weight: 600; }

/* 개인정보처리방침 본문 */
.bsmgm .pp { margin-top: 12px; font-size: 13.5px; line-height: 1.75; color: #3c424c; }
.bsmgm .pp h3 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 18px 0 5px; }
.bsmgm .pp p { margin: 0 0 9px; }