/* board.css — 게시판 프론트 (설계안 v3 §6-2)
 *
 * 클래스는 전부 lp-bd- 로 시작해 고객사 CSS와 충돌하지 않는다.
 * 글꼴은 지정하지 않는다 — 고객사 사이트 글꼴을 그대로 상속받는다.
 * 색·간격·폭은 변수로 빼서 고객사가 덮어쓰기 쉽게 한다.
 */

:root {
  --lp-bd-text:      #1a1a1a;
  --lp-bd-sub:       #6b6b6b;
  --lp-bd-weak:      #9a9a9a;
  --lp-bd-line:      #e8e8e8;
  --lp-bd-line-soft: #f2f2f2;
  --lp-bd-link:      #1a5fb4;
  --lp-bd-h2:        #1c4e9c;   /* 큰 제목 색 */
  --lp-bd-soft:      #fafafa;
  /* ── 강조색(테마) ──────────────────────────
     업체별 톤앤매너를 위해 강조색을 변수로 모았다. 게시판 설정에서 테마를
     고르면 board_shell 이 이 값들만 덮어써서 블로그 안에서만 색이 바뀐다.
     기본값은 기존 블루톤이라 안 고르면 지금과 똑같다. */
  --lp-bd-accent:      #5868F8;   /* 메인 강조 — 카테고리·검색·칩 */
  --lp-bd-accent-2:    #6E5CF6;   /* 그라데이션 끝색 */
  --lp-bd-accent-soft: #eef1f6;   /* 목차 선택 배경 등 옅은 강조 */
  --lp-bd-accent-line: #C3C9F0;   /* 강조 테두리(호버) */
  --lp-bd-accent-rgb:  88,104,248;/* 그림자 rgba 용 */
  --lp-bd-cta-hover:   #2F6BFF;   /* 떠 있는 문의 버튼 호버 */
  --lpf-bg:            #14171F;   /* 푸터 배경 */
  --lpf-link:          #6E9BFF;   /* 푸터 링크 호버 */
  /* 글꼴 — 게시판은 우리가 그리는 화면이라 프리텐다드를 기본으로 둔다.
     고객사 글꼴을 그대로 쓰고 싶으면 이 값만 inherit 으로 덮으면 된다. */
  --lp-bd-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --lp-bd-width:     886px;   /* 본문 폭 — 네이버 블로그와 같은 값 */
  --lp-bd-list:      1180px;  /* 목록 폭 */
  --lp-bd-radius:    10px;
}

.lp-bd-wrap, .lp-bd-bar, .lp-bd-head, .lp-bd-foot { font-family: var(--lp-bd-font); }
.lp-bd-wrap {
  width: 100%;
  max-width: var(--lp-bd-width);
  margin: 0 auto;
  padding: 56px 24px 104px;
  color: var(--lp-bd-text);
  line-height: 1.75;
  box-sizing: border-box;
}
/* 목록은 아래를 더 비운다. 마지막 카드가 푸터에 바로 닿으면
   목록이 더 있는데 잘린 것처럼 보이고, 눈이 쉴 자리가 없어 답답하다.
   글 페이지는 아래에 관련 글·문의 양식이 이어져 이만큼 필요 없다 */
.lp-bd-wrap--list { max-width: var(--lp-bd-list); padding-bottom: 160px; }
/* 글 페이지는 위를 더 비워 제목이 상단 띠에 눌리지 않게 한다 */
.lp-bd-wrap--post { padding-top: 80px; }
.lp-bd-wrap *, .lp-bd-wrap *::before, .lp-bd-wrap *::after { box-sizing: border-box; }

/* 기본 껍데기 — 조각 파일을 지정하지 않았을 때만 쓰인다 */
.lp-bd-head {
  border-bottom: 1px solid var(--lp-bd-line);
  padding: 18px 20px;
}
.lp-bd-head a { color: var(--lp-bd-text); text-decoration: none; font-weight: 700; }
.lp-bd-foot {
  border-top: 1px solid var(--lp-bd-line);
  padding: 28px 20px;
  color: var(--lp-bd-weak);
  font-size: 13px;
}

/* ══ 목록 공통 ═══════════════════════════ */
/* 목록 머리. 제목과 설명은 한 덩어리로 읽혀야 하므로 사이를 좁히고,
   대신 위아래를 넉넉히 벌려 목록과 갈라 준다.
   예전에는 제목·설명 사이가 14px 인데 아래 목록과는 48px 이라,
   설명이 제목보다 목록에 더 붙어 보였다 */
.lp-bd-lhead { margin: 48px 0 64px; text-align: center; }
.lp-bd-ltitle { font-size: 42px; line-height: 1.25; margin: 0 0 8px; letter-spacing: -.5px; }
.lp-bd-ldesc { color: var(--lp-bd-sub); margin: 0; font-size: 16px; }
.lp-bd-empty { color: var(--lp-bd-weak); text-align: center; padding: 72px 0; }

.lp-bd-flag {
  font-style: normal; font-size: 11px; font-weight: 600;
  background: var(--lp-bd-soft); color: var(--lp-bd-weak);
  padding: 2px 7px; border-radius: 4px; margin-left: 6px;
  vertical-align: middle; white-space: nowrap;
}

/* 추천글 딱지 · 공지형 전용.
   공지형은 사진이 없어 제목 앞에 세운다. 표시가 없으면 2년 전 글이 맨 위에
   있는 것을 보고 "최신 글"로 오해하거나 정렬이 고장 난 줄 안다.
   초안 딱지와 달리 강조색을 쓴다. 감출 것이 아니라 알릴 것이라서다 */
.lp-bd-flag--rec {
  background: rgba(var(--lp-bd-accent-rgb), .12);
  color: var(--lp-bd-h2);
  margin-left: 0; margin-right: 2px;
}

/* 추천글 딱지 · 칼럼형과 갤러리형.
   사진 위 왼쪽 위에 얹는다. 제목 앞에 두면 제목이 밀려 두 줄이 되고,
   배치마다 줄 길이가 달라 목록이 들쭉날쭉해진다.
   사진 칸(frame)이 overflow: hidden 이라 모서리를 따라 잘린다. */
.lp-bd-card__frame, .lp-bd-gal__frame { position: relative; }
.lp-bd-rec {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 4px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em;
  white-space: nowrap;
  /* 사진 위라 어떤 색이 깔릴지 모른다. 검정을 옅게 깔아 어떤 사진에서도
     흰 글자가 읽히게 한다. 강조색을 쓰면 사진 색과 부딪히는 일이 잦다 */
  background: rgba(0, 0, 0, .55); color: #fff;
}
/* 사진이 작아지는 폭에서는 딱지도 함께 줄인다. 안 그러면 사진을 덮는다 */
@media (max-width: 560px) {
  .lp-bd-rec { top: 6px; left: 6px; padding: 3px 7px; font-size: 10px; }
}

/* 대표 이미지가 없을 때 — 칸이 비면 격자가 무너진다 */
.lp-bd-noimg {
  display: flex; align-items: center; justify-content: center;
  background: var(--lp-bd-soft); color: var(--lp-bd-weak);
}
.lp-bd-noimg svg { width: 30%; max-width: 44px; height: auto; opacity: .5; }

/* ── 공지형 ─────────────────────────── */
.lp-bd-notice { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--lp-bd-text); }
.lp-bd-notice__li {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 8px; border-bottom: 1px solid var(--lp-bd-line);
}
/* 제목이 h2 가 되면서 링크가 그 안으로 들어갔다.
   카드 전체를 누를 수 있게 링크를 ::after 로 늘려 덮는다 (stretched link).
   덮는 쪽이 position:relative 여야 기준이 잡힌다. */
.lp-bd-notice__card {
  position: relative; display: flex; align-items: center; gap: 6px;
  justify-content: space-between; min-width: 0; width: 100%;
}
.lp-bd-notice__a { color: var(--lp-bd-text); text-decoration: none; }
.lp-bd-notice__a::after { content: ""; position: absolute; inset: 0; }
.lp-bd-notice__t {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 18px; font-weight: 500; margin: 0; min-width: 0; flex: 1;
}
.lp-bd-notice__card:hover .lp-bd-notice__a { text-decoration: underline; }
.lp-bd-notice__d { color: var(--lp-bd-weak); font-size: 14px; white-space: nowrap; flex: none; }

/* ── 칼럼형 ─────────────────────────────
   왼쪽 사진 · 오른쪽 제목과 요약. 한 줄씩 아래로 내려간다.
   목록에서 글 내용을 미리 읽을 수 있어 클릭률이 높다. */
.lp-bd-cards {
  list-style: none; padding: 0; margin: 0;
}
.lp-bd-card { border-bottom: 1px solid var(--lp-bd-line); }
.lp-bd-card__card {
  position: relative;
  display: flex; align-items: flex-start; gap: 24px;
  padding: 20px 4px;
}
.lp-bd-card__a { color: inherit; text-decoration: none; }
.lp-bd-card__a::after { content: ""; position: absolute; inset: 0; }
/* 썸네일 비율. 게시판 설정에서 고른다.
   배치마다 기본값이 다르고, 고르면 그 값이 이긴다.
   object-fit: cover 로 잘라 채우므로 어떤 사진이든 깨지지는 않는다. */
.lp-bd-card__frame {
  flex: none; width: 240px; aspect-ratio: 4 / 3;
  border-radius: var(--lp-bd-radius); overflow: hidden;
  background: var(--lp-bd-soft);
}
.lp-bd-card__img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.lp-bd-card__card:hover .lp-bd-card__img { transform: scale(1.04); }
.lp-bd-card__body { flex: 1; min-width: 0; }
.lp-bd-card__t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 20px; font-weight: 600; line-height: 1.4; margin: 0 0 6px;
}
.lp-bd-card__card:hover .lp-bd-card__a { text-decoration: underline; }
.lp-bd-card__s {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--lp-bd-sub); font-size: 15px; font-weight: 600; margin-bottom: 4px; word-break: keep-all;
}
.lp-bd-card__ex {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--lp-bd-sub); font-size: 15px; line-height: 1.55; margin-bottom: 8px;
}
.lp-bd-card__d { display: block; color: var(--lp-bd-weak); font-size: 13px; }

/* ── 갤러리형 ───────────────────────── */
.lp-bd-gal {
  list-style: none; padding: 0; margin: 0;
  /* 세로는 가로의 두 배. 카드가 위아래로 붙으면 어디까지가 한 장인지
     안 갈린다. 가로는 옆 카드와 나란해서 그만큼 필요 없다 */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 28px;
}
.lp-bd-gal__card { position: relative; display: block; text-align: left; }
.lp-bd-gal__a { color: inherit; text-decoration: none; }
/* 카드 전체를 누를 수 있게 하는 장치.
   제목 링크에서 투명한 판을 하나 뽑아 카드(.lp-bd-gal__card, position: relative)
   전체를 덮는다. 그래서 사진이든 요약이든 빈 자리든 어디를 눌러도 글로 간다.

   사진과 요약을 각각 <a> 로 감싸지 않는 이유 — 화면 읽어주는 프로그램이
   같은 글로 가는 링크를 세 번 읽는다. 링크는 제목 하나만 두는 편이 맞다. */
.lp-bd-gal__a::after { content: ""; position: absolute; inset: 0; }
.lp-bd-gal__frame {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--lp-bd-radius); overflow: hidden;
  background: var(--lp-bd-soft); margin-bottom: 16px;
}
.lp-bd-gal__img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.lp-bd-gal__card:hover .lp-bd-gal__img { transform: scale(1.04); }
.lp-bd-gal__t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 20px; font-weight: 600; line-height: 1.45; margin: 0 0 8px; word-break: keep-all;
}
/* 갤러리형은 한 칸이 넓어 카테고리도 함께 키운다. 제목만 키우면
   카테고리가 눌려 보여 제목 위에 얹힌 것처럼 읽힌다.
   .lp-bd-cat 는 칼럼형도 쓰므로 갤러리 안에서만 바꾼다 */
.lp-bd-gal .lp-bd-cat { font-size: 14px; }
.lp-bd-gal__card:hover .lp-bd-gal__a { text-decoration: underline; }
.lp-bd-gal__s {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15px; line-height: 1.6; color: var(--lp-bd-sub); margin: 0 0 10px; word-break: keep-all;
}
.lp-bd-gal__d { display: block; color: var(--lp-bd-weak); font-size: 13px; }

/* ── 페이지 이동 ────────────────────── */
.lp-bd-paging {
  display: flex; justify-content: center; align-items: center; gap: 4px;
  margin-top: 56px; flex-wrap: wrap;
}
.lp-bd-paging__a, .lp-bd-paging__cur {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: 6px;
  font-size: 14px; text-decoration: none; color: var(--lp-bd-sub);
}
.lp-bd-paging__a:hover { background: var(--lp-bd-soft); color: var(--lp-bd-text); }
.lp-bd-paging__cur { background: var(--lp-bd-text); color: #fff; font-weight: 600; }
.lp-bd-paging__gap { color: var(--lp-bd-weak); padding: 0 2px; }

/* ══ 상단 고정 띠 ════════════════════════
   글이 길어도 목록·다음 글로 갈 수 있어야 한다. 스크롤을 내리면 제목이 나타난다. */
.lp-bd-bar {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  height: 58px; padding: 0 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--lp-bd-line);
}
.lp-bd-bar__side {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; color: var(--lp-bd-sub); text-decoration: none;
  white-space: nowrap; padding: 6px 8px; border-radius: 8px;
  transition: color .2s, background .2s;
}
.lp-bd-bar__side:hover { color: var(--lp-bd-text); background: var(--lp-bd-soft); }
.lp-bd-bar__side svg { width: 17px; height: 17px; }
.lp-bd-bar__side--l { justify-self: start; }
.lp-bd-bar__side--r { justify-self: end; }
.lp-bd-bar__t {
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: var(--lp-bd-text); text-align: center;
  opacity: 0; transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.lp-bd-bar.is-scrolled .lp-bd-bar__t { opacity: 1; transform: none; }

/* ══ 글 상세 ═════════════════════════════ */
.lp-bd-phead { margin-bottom: 48px; text-align: center; }
/* 빵부스러기 — 홈 > 블로그 > 카테고리. 가운데 정렬 머리말 안에서 산다.
   구분자(›)는 글자가 아니라 가상요소로 그려 화면 읽어주는 프로그램이
   "홈 꺾쇠 블로그" 로 읽지 않게 한다. */
.lp-bd-crumb { margin-bottom: 10px; }
.lp-bd-crumb__list {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px; margin: 0; padding: 0; list-style: none;
}
.lp-bd-crumb__li {
  display: inline-flex; align-items: center;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
}
.lp-bd-crumb__li + .lp-bd-crumb__li::before {
  content: "›"; margin-right: 6px; color: var(--lp-bd-weak); font-weight: 400;
}
.lp-bd-crumb__li a { color: var(--lp-bd-link); text-decoration: none; }
.lp-bd-crumb__li a:hover { text-decoration: underline; }
.lp-bd-ptitle {
  font-size: 40px; line-height: 1.32; margin: 0 0 12px; padding: 0 16px;
  letter-spacing: -.6px; font-weight: 700; word-break: keep-all;
}
.lp-bd-psub {
  font-size: 19px; font-weight: 600; color: var(--lp-bd-weak); margin: 0 0 16px;
  padding: 0 16px; line-height: 1.55; word-break: keep-all; letter-spacing: -.2px;
}
.lp-bd-pmeta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 14px; color: var(--lp-bd-weak); margin: 0;
}
.lp-bd-pmeta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

.lp-bd-cover {
  display: block; width: 100%; height: auto;
  border-radius: 14px; margin: 0 0 44px;
}

/* 목차를 본문 우측 바깥으로 내보낸다 — 본문 폭을 지키면서 읽는 위치를 보여준다 */
.lp-bd-cols { position: relative; }
.lp-bd-main { min-width: 0; }
.lp-bd-toc {
  position: sticky; top: 82px; float: right; clear: right;
  width: 210px; margin: 0 -252px 24px 42px;
}
.lp-bd-toc__h {
  font-size: 12px; font-weight: 700; color: var(--lp-bd-weak);
  letter-spacing: .08em; margin: 0 0 8px; text-transform: uppercase;
}
.lp-bd-toc__list { list-style: none; padding: 0; margin: 0; }
/* 줄 사이를 벌린다. 붙여 두면 제목이 두 줄로 넘어갈 때 어디까지가 한 항목인지
   안 갈린다. 얹었을 때 칠해지는 칸도 서로 맞닿아 한 덩어리로 보였다.
   여백은 항목(li)에 주고 칠해지는 칸(a)은 그대로 둔다 —
   패딩을 키우면 칠이 커져 목차가 무거워진다 */
.lp-bd-toc__li { margin-bottom: 3px; }
.lp-bd-toc__li:last-child { margin-bottom: 0; }
.lp-bd-toc__a {
  display: flex; align-items: baseline; gap: 7px;
  padding: 5px 10px; border-radius: 7px;
  color: var(--lp-bd-sub); text-decoration: none;
  font-size: 13.5px; line-height: 1.5;
  transition: background .2s, color .2s;
}
.lp-bd-toc__a:hover { background: var(--lp-bd-soft); color: var(--lp-bd-text); }
.lp-bd-toc__n { font-style: normal; color: var(--lp-bd-weak); font-size: 12px; flex: none; }
.lp-bd-toc__li--sub .lp-bd-toc__a { padding-left: 26px; font-size: 13px; color: var(--lp-bd-weak); }
.lp-bd-toc__a.is-on {
  background: var(--lp-bd-accent-soft); color: var(--lp-bd-link); font-weight: 600;
}
.lp-bd-toc__a.is-on .lp-bd-toc__n { color: var(--lp-bd-link); }
.lp-bd-toc__a.is-on:hover { background: var(--lp-bd-accent-soft); color: var(--lp-bd-link); filter: brightness(.97); }

/* ── 본문 ───────────────────────────────
   크기는 3단(제목 24 / 소제목 19 / 본문 17), 굵기는 2단만 쓴다.
   단이 많아지면 어디가 중요한지 오히려 안 보인다. */
.lp-bd-body {
  font-size: 17px; line-height: 1.8; letter-spacing: -.01em;
  word-break: keep-all;          /* 한글은 단어 단위로 끊는다 */
  overflow-wrap: anywhere;       /* 긴 영문·주소는 강제로 줄바꿈해 밖으로 나가지 않게 */
}

.lp-bd-body > *:first-child { margin-top: 0; }
.lp-bd-body > h2:first-child { margin-top: 0; }
.lp-bd-body h2 {
  font-size: 28px; font-weight: 700; line-height: 1.4;
  margin: 80px 0 22px; padding-bottom: 14px; letter-spacing: -.4px;
  color: var(--lp-bd-h2, #1c4e9c);
  border-bottom: 1px solid var(--lp-bd-line-soft);
  scroll-margin-top: 78px;   /* 상단 띠에 제목이 가리지 않게 */
}
.lp-bd-body h3 {
  font-size: 24px; font-weight: 600; line-height: 1.5;
  margin: 40px 0 14px; scroll-margin-top: 78px;
}
.lp-bd-body h4 { font-size: 19px; font-weight: 600; margin: 30px 0 10px; scroll-margin-top: 78px; }
.lp-bd-body p  { margin: 0 0 20px; }
.lp-bd-body a  { color: var(--lp-bd-link); text-underline-offset: 3px; }
.lp-bd-body strong { font-weight: 700; }

.lp-bd-body ul, .lp-bd-body ol { margin: 0 0 22px; padding-left: 4px; list-style: none; }
.lp-bd-body li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.lp-bd-body ul > li::before {
  content: ""; position: absolute; left: 4px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--lp-bd-weak);
}
.lp-bd-body ol { counter-reset: lpol; }
/* 바로 붙어 있는 목록은 번호를 이어 센다.
   본문이 <ol> 하나로 오면 이 줄은 아무 일도 하지 않는다. 하지만 옛 글 중에는
   항목마다 <ol> 이 따로 열린 것이 있고(항목 사이를 빈 줄로 띄워 쓴 글),
   그러면 <ol> 마다 1 부터 세어 화면에 1, 1, 1 로 나왔다.
   글을 다시 저장하지 않아도 화면이 바로 맞도록 여기서 받아둔다.
   사이에 문단·제목이 끼면 + 가 안 걸려 제대로 1 부터 다시 센다. */
.lp-bd-body ol + ol { counter-reset: none; }
/* 사이에 점 목록이 끼어 갈린 번호 목록. 붙어 있지 않아 + 로는 못 잡아
   서버가 표시를 붙여준다(bv_body_html). 세는 일만 여기서 한다 */
.lp-bd-body ol.lp-ol-cont { counter-reset: none; }
.lp-bd-body ol > li { counter-increment: lpol; padding-left: 28px; }
.lp-bd-body ol > li::before {
  content: counter(lpol); position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; margin-top: .28em; border-radius: 50%;
  background: var(--lp-bd-text); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}

.lp-bd-body img {
  max-width: 100%; height: auto; display: block;
  margin: 40px auto; border-radius: 10px;
}
.lp-bd-body img.wide { max-width: calc(100% + 120px); margin-left: -60px; margin-right: -60px; width: auto; }

/* 인용 — 선 하나보다 덩어리로 두는 편이 눈에 잘 걸린다 */
.lp-bd-body blockquote {
  position: relative; margin: 32px 0; padding: 22px 24px 22px 52px;
  background: var(--lp-bd-quote-bg, rgba(var(--lp-bd-accent-rgb), .06)); border-radius: 12px;
  color: var(--lp-bd-quote-t, var(--lp-bd-h2)); font-size: 18px; line-height: 1.8;
}
.lp-bd-body blockquote::before {
  content: "\201C"; position: absolute; left: 18px; top: 8px;
  font-size: 40px; line-height: 1; color: var(--lp-bd-quote-line, rgba(var(--lp-bd-accent-rgb), .4));
  font-family: Georgia, serif;
}
.lp-bd-body blockquote p:last-child { margin-bottom: 0; }

.lp-bd-body table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: 32px 0; font-size: 16.5px; line-height: 1.6;
  border: 1px solid var(--lp-bd-line); border-radius: 10px; overflow: hidden;
}
.lp-bd-body th, .lp-bd-body td {
  padding: 13px 16px; text-align: left;
  border-bottom: 1px solid var(--lp-bd-line);
}
.lp-bd-body th { background: var(--lp-bd-soft); font-weight: 600; }
.lp-bd-body td + td, .lp-bd-body th + th { border-left: 1px solid var(--lp-bd-line); }
.lp-bd-body tr:last-child td { border-bottom: 0; }
/* ── 표 모양 ─────────────────────────────
   표 하나에 하나만 붙는다. 아무것도 안 붙으면 위의 기본 모양이다.
   글에 표가 여럿일 때 다 같은 모양이면 어디까지가 한 표인지 흐려진다. */

/* 줄무늬 — 줄이 많을 때. 한 줄씩 옅게 깔아 눈이 옆으로 흐르지 않게 한다 */
.lp-bd-body table.lp-tbl-stripe td { border-bottom: 0; }
.lp-bd-body table.lp-tbl-stripe tbody tr:nth-child(even) td { background: var(--lp-bd-soft); }

/* 선 없이 — 담백하다. 글 흐름을 안 끊는다.
   바깥 테두리를 없애고 머리줄만 진하게 그어 표라는 것만 알린다 */
.lp-bd-body table.lp-tbl-plain {
  border: 0; border-radius: 0;
}
.lp-bd-body table.lp-tbl-plain th {
  background: none; border-bottom: 2px solid var(--lp-bd-text);
}
.lp-bd-body table.lp-tbl-plain td { border-bottom: 1px solid var(--lp-bd-line-soft); }
.lp-bd-body table.lp-tbl-plain td + td,
.lp-bd-body table.lp-tbl-plain th + th { border-left: 0; }
.lp-bd-body table.lp-tbl-plain tr:last-child td { border-bottom: 0; }

/* 강조 머리 — 머리줄에 게시판 테마색을 깐다. 표가 여럿일 때 하나만 세울 때 */
.lp-bd-body table.lp-tbl-head th {
  background: var(--lp-bd-accent); color: #fff; border-bottom: 0;
}
.lp-bd-body table.lp-tbl-head th + th { border-left-color: rgba(255, 255, 255, .28); }

/* ── 표 첫 칸 너비 ───────────────────────
   "시술 시간 | 약 30분" 처럼 왼쪽이 짧은 표가 많다.
   그냥 두면 글자 수대로 칸이 나뉘어 왼쪽이 넓어진다.
   table-layout: fixed 라야 아래 폭이 그대로 먹는다 */
.lp-bd-body table.lp-tw-30,
.lp-bd-body table.lp-tw-50,
.lp-bd-body table.lp-tw-70 { table-layout: fixed; }
.lp-bd-body table.lp-tw-30 th:first-child, .lp-bd-body table.lp-tw-30 td:first-child { width: 30%; }
.lp-bd-body table.lp-tw-50 th:first-child, .lp-bd-body table.lp-tw-50 td:first-child { width: 50%; }
.lp-bd-body table.lp-tw-70 th:first-child, .lp-bd-body table.lp-tw-70 td:first-child { width: 70%; }

.lp-bd-body hr { border: 0; border-top: 1px solid var(--lp-bd-line); margin: 48px 0; }

/* ── FAQ ────────────────────────────────
   Q·A 배지로 묻고 답하는 형태를 눈에 보이게 한다.
   펼침은 grid 높이를 애니메이션해 내용 높이를 미리 재지 않아도 된다. */
.lp-bd-faq { margin-top: 96px; }
.lp-bd-faq__h {
  font-size: 24px; font-weight: 700; margin: 0 0 24px;
  letter-spacing: -.3px; scroll-margin-top: 78px;
}
.lp-bd-faq__item {
  border: 1px solid var(--lp-bd-line); border-radius: 14px;
  margin-bottom: 12px; overflow: hidden; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.lp-bd-faq__item:hover { border-color: var(--lp-bd-weak); }
.lp-bd-faq__item.is-open {
  border-color: var(--lp-bd-line); box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
.lp-bd-faq__q {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 20px 22px; border: 0; background: none;
  font-family: inherit; text-align: left; cursor: pointer;
}
.lp-bd-faq__badge {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-style: normal; font-size: 13px; font-weight: 700; line-height: 1;
}
.lp-bd-faq__badge--q { background: var(--lp-bd-text); color: #fff; }
.lp-bd-faq__badge--a { background: var(--lp-bd-soft); color: var(--lp-bd-sub); border: 1px solid var(--lp-bd-line); }
.lp-bd-faq__qt {
  flex: 1; min-width: 0; font-size: 16.5px; font-weight: 600;
  color: var(--lp-bd-text); line-height: 1.55; word-break: keep-all;
}
.lp-bd-faq__q:hover .lp-bd-faq__qt { color: var(--lp-bd-link); }
.lp-bd-faq__ico {
  position: relative; flex: none; width: 18px; height: 18px;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.lp-bd-faq__ico::before, .lp-bd-faq__ico::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--lp-bd-weak); border-radius: 1px;
  transform: translate(-50%, -50%);
}
.lp-bd-faq__ico::before { width: 13px; height: 1.6px; }
.lp-bd-faq__ico::after  { width: 1.6px; height: 13px; transition: opacity .3s; }
.lp-bd-faq__item.is-open .lp-bd-faq__ico { transform: rotate(180deg); }
.lp-bd-faq__item.is-open .lp-bd-faq__ico::after { opacity: 0; }

.lp-bd-faq__wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.4,0,.2,1);
}
.lp-bd-faq__item.is-open .lp-bd-faq__wrap { grid-template-rows: 1fr; }
/* 접히는 칸. 여기에는 여백도 선도 주지 않는다 — 높이를 0 으로 눌러도
   패딩은 남기 때문에, 접힌 채로 속이 비쳐 보인다. 실제로 그렇게 새어 나갔다.
   접힘은 위 grid-template-rows(0fr) 가 맡고, min-height: 0 이 없으면
   안쪽 크기가 높이를 밀어올려 아예 안 접힌다 */
.lp-bd-faq__a { overflow: hidden; min-height: 0; }

/* 여백은 안쪽이 갖는다. 늘 같은 값이라 열고 닫을 때 덜컹하지 않는다.
   (열릴 때만 패딩을 주면 그 순간 높이가 툭 튄다) */
.lp-bd-faq__in {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 22px 20px 0; margin: 0 22px;
  border-top: 1px solid transparent;
  transition: border-color .2s;
}
/* 선만 열릴 때 나타난다. 높이에 영향을 주지 않으므로 덜컹하지 않는다 */
.lp-bd-faq__item.is-open .lp-bd-faq__in {
  border-top-color: var(--lp-bd-line-soft);
}
.lp-bd-faq__at {
  flex: 1; min-width: 0; color: var(--lp-bd-sub);
  line-height: 1.85; font-size: 16px; word-break: keep-all;
}

/* ── 관련 글 ──────────────────────────── */
/* 관련 글 — 배경으로 가두지 않고 본문 폭 전체를 쓴다 */
/* 글이 끝나고 다음 덩어리까지의 사이. 글을 다 읽었다는 느낌이 나려면
   눈에 띌 만큼 비어야 한다. 붙어 있으면 본문이 계속되는 줄 안다 */
.lp-bd-rel { margin-top: 130px; padding-top: 52px; border-top: 1px solid var(--lp-bd-line); }
.lp-bd-rel__h { font-size: 20px; font-weight: 700; margin: 0 0 24px; color: var(--lp-bd-text); }
.lp-bd-rel__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px;
}
.lp-bd-rel__li { padding: 0; margin: 0; }
.lp-bd-rel__li::before { display: none; }
.lp-bd-rel__a { display: block; color: inherit; text-decoration: none; }
.lp-bd-rel__frame {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden; background: var(--lp-bd-soft); margin-bottom: 12px;
}
.lp-bd-rel__img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.lp-bd-rel__a:hover .lp-bd-rel__img { transform: scale(1.05); }
.lp-bd-rel__t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 0; word-break: keep-all;
}
.lp-bd-rel__s {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--lp-bd-sub);
  margin-top: 4px; word-break: keep-all;
}
.lp-bd-rel__ex {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; line-height: 1.55; color: var(--lp-bd-sub);
  margin-top: 4px; word-break: keep-all;
}
.lp-bd-rel__a:hover .lp-bd-rel__t { color: var(--lp-bd-link); }

.lp-bd-back { margin-top: 64px; margin-bottom: 96px; text-align: center; }
.lp-bd-back a {
  display: inline-flex; align-items: center; gap: 7px; padding: 12px 28px;
  border: 1px solid var(--lp-bd-line); border-radius: 999px;
  color: var(--lp-bd-sub); text-decoration: none; font-size: 14.5px;
  transition: border-color .2s, color .2s;
}
.lp-bd-back a svg { width: 17px; height: 17px; flex: none; }
.lp-bd-back a:hover { border-color: var(--lp-bd-text); color: var(--lp-bd-text); }

/* ══ 좁은 화면 ═══════════════════════════ */
/* 목차를 띄울 자리가 없어지는 지점 — 본문 위로 접어 올린다 */
@media (max-width: 1240px) {
  .lp-bd-toc {
    position: static; float: none; width: auto;
    margin: 0 0 40px; padding: 20px 22px;
    border: 1px solid var(--lp-bd-line); border-radius: 12px;
    background: var(--lp-bd-soft);
  }
  .lp-bd-toc__list { columns: 2; column-gap: 28px; }
  .lp-bd-toc__li { break-inside: avoid; }
}
@media (max-width: 640px) {
  .lp-bd-wrap { padding: 28px 16px 64px; }
  .lp-bd-wrap--list { padding-bottom: 96px; }
  .lp-bd-bar { height: 52px; padding: 0 8px; }
  .lp-bd-bar__t { font-size: 14px; max-width: 40vw; }
  .lp-bd-bar__side span { display: none; }
  .lp-bd-lhead { margin: 32px 0 44px; }
  .lp-bd-ltitle { font-size: 28px; }
  .lp-bd-ldesc { font-size: 15px; }
  .lp-bd-crumb { margin-bottom: 12px; }
  .lp-bd-ptitle { font-size: 25px; padding: 0 4px; }
  .lp-bd-psub { font-size: 15.5px; margin-bottom: 18px; padding: 0 4px; }
  .lp-bd-cover { border-radius: 10px; margin-bottom: 32px; }
  .lp-bd-body { font-size: 17px; line-height: 1.85; }
  .lp-bd-body h2 { font-size: 23px; margin: 46px 0 14px; scroll-margin-top: 66px; }
  .lp-bd-body h3 { font-size: 19px; margin: 30px 0 10px; scroll-margin-top: 66px; }
  .lp-bd-body img { margin: 28px auto; }
  .lp-bd-body img.wide { max-width: 100%; margin-left: auto; margin-right: auto; }
  .lp-bd-body blockquote { padding: 18px 18px 18px 44px; font-size: 16.5px; }
  .lp-bd-body table { table-layout: fixed; font-size: 14px; }
  .lp-bd-body th, .lp-bd-body td { padding: 10px 12px; }
  .lp-bd-toc__list { columns: 1; }
  .lp-bd-faq { margin-top: 52px; }
  .lp-bd-faq__h { font-size: 21px; }
  .lp-bd-faq__q { padding: 16px 18px; font-size: 15.5px; }
  /* 좌우만 좁힌다. 위아래를 0 으로 되돌리면 다시 덜컹한다.
     접히는 칸(__a)이 아니라 안쪽(__in)에 준다 */
  .lp-bd-faq__in { font-size: 15.5px; padding: 16px 18px 18px 0; }
  .lp-bd-rel { margin-top: 52px; }
  .lp-bd-nav__a--r { text-align: left; }
  .lp-bd-card__a { gap: 14px; padding: 18px 0; }
  .lp-bd-card__frame { width: 116px; }
  .lp-bd-card__t { font-size: 16px; margin-bottom: 6px; }
  .lp-bd-card__s {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--lp-bd-sub); font-size: 15px; font-weight: 600; margin-bottom: 6px; word-break: keep-all;
}
.lp-bd-card__ex { font-size: 14px; -webkit-line-clamp: 2; margin-bottom: 6px; }
  .lp-bd-gal { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
  .lp-bd-gal__t { font-size: 15px; }
  .lp-bd-gal__s { font-size: 13.5px; -webkit-line-clamp: 2; }
  .lp-bd-rel__list { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .lp-bd-rel { margin-top: 72px; }
  .lp-bd-notice__d { font-size: 13px; }
  .lp-bd-faq__h, .lp-bd-rel__h { font-size: 19px; }
}

/* ══ 본문 꾸밈 ═══════════════════════════
   색은 이름으로만 받는다. 이름이면 나중에 색을 바꿔도 글을 다시 저장할 필요가 없다. */
.lp-bd-body u, .lp-ed__rte u { text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* 채도를 낮춘 톤으로 쓴다. 원색은 본문 글자 위에서 튀어
   읽는 눈이 그리로만 간다. 강조는 눈에 띄되 글을 밀어내면 안 된다.
   옛 이름(red·orange·blue·green·gray·white)은 그대로 두고 값만 낮췄다.
   이미 쓴 글이 있으므로 이름을 바꾸면 색이 통째로 빠진다. */
.lp-tx-red    { color: #C4483C; }
.lp-tx-orange { color: #C2761A; }
.lp-tx-yellow { color: #A98216; }
.lp-tx-green  { color: #4B7458; }
.lp-tx-teal   { color: #0E6E65; }
.lp-tx-blue   { color: #1F6FB2; }
.lp-tx-navy   { color: #3E40B8; }
.lp-tx-purple { color: #7A4E9E; }
.lp-tx-gray   { color: #6E7488; }
.lp-tx-white  { color: #fff; }
/* 눈에 확 띄어야 할 때. 위의 차분한 톤으로는 모자란 자리가 있다
   (한정 안내, 꼭 봐야 하는 주의사항).
   많이 쓰면 글이 알록달록해지므로 이름에 "찐" 을 붙여 갈라 둔다 */
.lp-tx-vred    { color: #E5231B; }
.lp-tx-vorange { color: #F26D0D; }
.lp-tx-vblue   { color: #1173E6; }
.lp-tx-vgreen  { color: #129A4E; }

/* 형광펜은 글자가 묻히지 않는 밝기로만. 진하면 글자를 덮는다 */
mark { background: none; color: inherit; }
.lp-hl-yellow   { background: #FFF3B8; }
.lp-hl-apricot  { background: #FFE0C2; }
.lp-hl-pink     { background: #FFD9E2; }
.lp-hl-green    { background: #DCF0C8; }
.lp-hl-mint     { background: #CCEFE6; }
.lp-hl-blue     { background: #D4E8FA; }
.lp-hl-lavender { background: #E2DBF5; }
.lp-hl-gray     { background: #E8EAEF; }
/* 진한 형광펜 — 글자를 흰색으로 바꿔야 읽힌다.
   노란 형광펜 위의 검은 글자와 달리, 이건 칠 자체가 강조다 */
.lp-hl-vred   { background: #E5231B; color: #fff; }
.lp-hl-vblue  { background: #1173E6; color: #fff; }
.lp-hl-vgreen { background: #129A4E; color: #fff; }
.lp-hl-vdark  { background: #2B3245; color: #fff; }

/* 칸 색 — th 의 기본 배경보다 뒤에 와야 머리행에도 칠해진다 */
/* 옅은 칸 — 한 줄이나 한 칸을 살짝 구분할 때. 글자는 검은 그대로 읽힌다 */
td.lp-cell-gray,   th.lp-cell-gray   { background: #F2F3F5; }
td.lp-cell-blue,   th.lp-cell-blue   { background: #E7F0FB; }
td.lp-cell-mint,   th.lp-cell-mint   { background: #E3F4F0; }
td.lp-cell-green,  th.lp-cell-green  { background: #EAF5E6; }
td.lp-cell-yellow, th.lp-cell-yellow { background: #FCF4DC; }
td.lp-cell-orange, th.lp-cell-orange { background: #FCEDDF; }
td.lp-cell-pink,   th.lp-cell-pink   { background: #FBEAF0; }
td.lp-cell-purple, th.lp-cell-purple { background: #F1EBF8; }

/* 진한 칸 — 머리줄이나 합계처럼 한 줄을 통째로 세울 때.
   바탕이 진하므로 글자를 흰색으로 함께 바꾼다.
   비비드한 쪽은 여기다. 옅은 칸을 진하게 만들면 글자가 묻힌다 */
td.lp-cell-navy,   th.lp-cell-navy   { background: #2F4A8A; color: #fff; }
td.lp-cell-ocean,  th.lp-cell-ocean  { background: #1B7FB8; color: #fff; }
td.lp-cell-teal,   th.lp-cell-teal   { background: #12857A; color: #fff; }
td.lp-cell-olive,  th.lp-cell-olive  { background: #6F8B3D; color: #fff; }
td.lp-cell-brick,  th.lp-cell-brick  { background: #C4603C; color: #fff; }
td.lp-cell-dark,   th.lp-cell-dark   { background: #2B3245; color: #fff; }
/* 진한 칸 안의 링크는 밝게. 그대로 두면 파란 글자가 바탕에 묻힌다 */
td.lp-cell-navy a, td.lp-cell-ocean a, td.lp-cell-teal a,
td.lp-cell-olive a, td.lp-cell-brick a, td.lp-cell-dark a { color: #D7E6FF; }

/* ══ 관리자 바 ═══════════════════════════
   로그인한 사람에게만 보인다. 글을 보다가 바로 고치러 갈 수 있어야 한다. */
.lp-bd-admin {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 24px; padding: 8px 10px;
  background: #f4f5f7; border-radius: 8px; font-size: 13px;
}
.lp-bd-admin__gap { flex: 1; }
.lp-bd-admin__a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 6px;
  color: var(--lp-bd-sub); text-decoration: none; white-space: nowrap;
}
.lp-bd-admin__a:hover { background: #fff; color: var(--lp-bd-text); }
.lp-bd-admin__a svg { width: 14px; height: 14px; }
.lp-bd-admin__flag {
  background: #fff; color: var(--lp-bd-sub);
  padding: 4px 10px; border-radius: 6px; font-size: 12px;
}
@media (max-width: 640px) {
  .lp-bd-admin__gap { flex: 0 0 100%; height: 0; }
}

/* 태블릿 — 3열은 좁아진다 */
@media (max-width: 900px) {
  .lp-bd-gal { grid-template-columns: repeat(2, 1fr); }
  .lp-bd-rel__list { grid-template-columns: repeat(2, 1fr); }
  /* 두 칸인데 글이 셋이면 마지막 하나가 아랫줄에 홀로 남는다.
     빈 자리가 옆에 그대로 보여 "덜 실린 것" 처럼 읽힌다.
     셋째는 감춘다. 관련 글은 더 보여주는 것이 목적이 아니라
     "이어서 읽을 것이 있다" 를 알리는 자리다 */
  .lp-bd-rel__li:nth-child(n+3) { display: none; }
}

/* ══ 본문 이미지 크기·정렬 ═══════════════
   픽셀이 아니라 이름으로 정한다. 화면 폭이 바뀌어도 깨지지 않는다. */
/* max-width 가 아니라 width 로 정한다. 편집기와 같은 규칙이라야
   글쓴이가 본 대로 나간다 (편집기 쪽 주석 참고) */
.lp-bd-body img.lp-img-s { width: 40%;  max-width: 100%; height: auto; }
.lp-bd-body img.lp-img-m { width: 65%;  max-width: 100%; height: auto; }
.lp-bd-body img.lp-img-l { width: 100%; max-width: 100%; height: auto; }
.lp-bd-body img.lp-img-left   { margin-left: 0; margin-right: auto; }
.lp-bd-body img.lp-img-center { margin-left: auto; margin-right: auto; }
.lp-bd-body img.lp-img-right  { margin-left: auto; margin-right: 0; }
@media (max-width: 640px) {
  .lp-bd-body img.lp-img-s { width: 60%; }
  .lp-bd-body img.lp-img-m { width: 85%; }
}


/* ══ 구분선 ══════════════════════════════════
   글 사이를 끊는다. 기본은 옅은 회색 한 줄이고, 색·굵기를 고를 수 있다. */
.lp-bd-body hr { border: 0; border-top: 1px solid #E3E6EF; margin: 32px 0; }
.lp-bd-body hr.lp-hr-strong { border-top-width: 2px; border-top-color: #C6CBD8; }
.lp-bd-body hr.lp-hr-dash   { border-top-style: dashed; border-top-color: #C6CBD8; }
.lp-bd-body hr.lp-hr-blue   { border-top: 2px solid #4F65DF; }
.lp-bd-body hr.lp-hr-green  { border-top: 2px solid #3DBB8D; }
.lp-bd-body hr.lp-hr-amber  { border-top: 2px solid #DB8C1D; }
/* 점 세 개 — 장면이 바뀔 때 쓴다. 선보다 부드럽게 끊긴다 */
.lp-bd-body hr.lp-hr-dot {
  border: 0; margin: 40px 0; height: 6px; text-align: center;
  background: radial-gradient(circle 3px, #C6CBD8 0 3px, transparent 3px);
  background-size: 24px 6px; background-position: center;
  background-repeat: repeat-x; max-width: 72px; margin-left: auto; margin-right: auto;
}

/* ══ 문단 정렬 ═══════════════════════════════ */
.lp-bd-body .lp-al-center { text-align: center; }
.lp-bd-body .lp-al-right  { text-align: right; }

/* ══ 사진 — 폭 100% ═══════════════════════════
   글 폭을 꽉 채운다. 표지 사진이나 도표에 쓴다. */
.lp-bd-body img.lp-img-full { width: 100%; height: auto; }

/* ══ 사진 모양 ═══════════════════════════════
   인물 사진은 둥글게, 도표는 테두리를 두면 읽기 좋다. */
/* 모양과 테두리. 둘은 겹쳐 쓸 수 있다 (둥근 액자 같은 것) */
.lp-bd-body img.lp-img-round  { border-radius: 12px; }
.lp-bd-body img.lp-img-round2 { border-radius: 26px; }
.lp-bd-body img.lp-img-circle { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
.lp-bd-body img.lp-img-bd     { border: 1px solid #E3E6EF; }
/* 액자 — 흰 여백을 두르고 밖에 옅은 선. 사진이 배경과 붙어 보이는 것을 막는다 */
.lp-bd-body img.lp-img-frame  {
  background: #fff; padding: 8px; border: 1px solid #E3E6EF;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .10);
}
/* 그림자가 티가 안 난다고 해서 확실히 보이게 올렸다.
   옅은 것 하나만 두면 눌러도 바뀐 줄 모른다 */
.lp-bd-body img.lp-img-sh     { box-shadow: 0 6px 18px rgba(16, 24, 40, .22); }
.lp-bd-body img.lp-img-shlg   { box-shadow: 0 16px 40px rgba(16, 24, 40, .38); }


/* ══ 본문 바로가기 ═══════════════════════════
   키보드만 쓰는 사람을 위한 첫 링크.
   평소에는 화면 밖에 숨어 있다가 탭으로 닿으면 왼쪽 위에 나타난다.
   display:none 으로 숨기면 탭으로도 못 닿으므로 밖으로 밀어 두는 방식을 쓴다. */
.lp-skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: #1B2233; color: #fff; text-decoration: none; font-size: 14px;
  transition: top .15s ease;
}
.lp-skip:focus { top: 8px; outline: 2px solid #6079F0; outline-offset: 2px; }

/* ══ 표를 감싸는 상자 ════════════════════════
   칸이 많으면 손전화에서 화면 밖으로 넘친다. 그만큼 가로로 밀어 볼 수 있게 한다. */
.lp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; }
.lp-table-wrap table { margin: 0; min-width: 100%; }
/* 키보드로 닿았을 때 어디인지 보이게 */
.lp-table-wrap:focus { outline: 2px solid #6079F0; outline-offset: 2px; }
.lp-table-wrap:focus:not(:focus-visible) { outline: none; }

/* 인용문 — 줄마다 문단이라 마지막만 아래 여백을 지운다 */
.lp-bd-body blockquote p { margin: 0 0 10px; }
.lp-bd-body blockquote p:last-child { margin-bottom: 0; }


/* ══ 카테고리 고르기 · 찾기 ═══════════════════════
   목록 위에 나란히 둔다. 좁아지면 세로로 쌓인다. */
/* 카테고리 줄. 밑줄 탭으로 둔다.
   예전에는 알약 + 테두리 + 그라데이션이 겹쳐 장식이 글보다 먼저 눈에 들어왔다.
   블로그는 읽는 곳이라 글이 주인공이어야 한다.

   아래 선을 여기서 긋고, 고른 탭의 밑줄을 그 선 위에 겹쳐 놓는다
   (탭 아래 여백을 0 으로 두고 밑줄을 -1px 자리에). 두 줄로 보이지 않는다. */
.lp-bd-filter {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 40px;
  border-bottom: 1px solid #E3E6EF;
}
.lp-bd-chips { display: flex; flex-wrap: wrap; gap: 26px; min-width: 0; }
.lp-bd-chip {
  position: relative; display: inline-block;
  padding: 10px 0 12px; border: 0; background: none; border-radius: 0;
  font-size: 15px; color: var(--lp-bd-weak); text-decoration: none; white-space: nowrap;
  transition: color .16s ease;
}
.lp-bd-chip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--lp-bd-accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .18s ease;
}
.lp-bd-chip:hover { color: var(--lp-bd-text); }
/* 지금 보고 있는 카테고리 — 밑줄이 아래 선 위에 겹쳐 선다 */
.lp-bd-chip.is-on { color: var(--lp-bd-h2); font-weight: 600; }
.lp-bd-chip.is-on::after { transform: scaleX(1); }
/* 얹기만 해도 밑줄이 옅게 나와 "누를 수 있다"를 알린다 */
.lp-bd-chip:hover::after { transform: scaleX(1); opacity: .35; }
.lp-bd-chip.is-on:hover::after { opacity: 1; }

/* 카테고리 줄이 아래 선에 맞춰 서므로(align-items: flex-end),
   찾기 상자도 그 선에서 조금 띄워 나란히 세운다.
   안 띄우면 단추가 선에 붙어 탭처럼 보인다 */
.lp-bd-search { display: flex; align-items: center; margin-bottom: 8px; }
/* 이름표는 화면에서 감추되 읽어주는 프로그램에는 남긴다. */
.lp-bd-search__lb {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* 닫힌 상태 — 깔끔한 원형 돋보기 단추 하나만 */
.lp-bd-search__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 1px solid #E3E6EF;
  border-radius: 50%; background: #fff; color: #4A5163; cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.lp-bd-search__toggle:hover { border-color: var(--lp-bd-accent-line); color: var(--lp-bd-accent); background: #FbFbFd; }
.lp-bd-search__toggle svg { width: 19px; height: 19px; }
/* 닫힌 동안엔 칸·찾기·지우기를 감춘다 */
.lp-bd-search__in, .lp-bd-search__go, .lp-bd-search__clear { display: none; }
/* 열린 상태 — 돋보기·칸·찾기를 하나의 둥근 알약으로 잇는다 */
.lp-bd-search.is-open {
  gap: 0; height: 44px; padding: 0 6px 0 14px;
  border: 1px solid #D8DCEA; border-radius: 999px; background: #fff;
}
/* 카테고리 칩과 한 줄에 나란히 선다. 칩에서 그림자를 뺐으므로 여기서도 뺀다.
   한쪽만 떠 보이면 두 개가 다른 화면에서 온 것처럼 어긋나 보인다 */
.lp-bd-search.is-open:focus-within { border-color: var(--lp-bd-accent); }
.lp-bd-search.is-open .lp-bd-search__toggle {
  display: inline-flex; width: auto; height: auto; padding: 0; margin-right: 8px;
  border: 0; border-radius: 0; background: none; color: #9AA0B0;
}
.lp-bd-search.is-open .lp-bd-search__toggle:hover { color: var(--lp-bd-accent); background: none; }
.lp-bd-search.is-open .lp-bd-search__in {
  display: block; width: 190px; padding: 0; border: 0; background: none;
  font-family: inherit; font-size: 15px; color: #2C3345; height: 100%;
}
.lp-bd-search.is-open .lp-bd-search__in:focus { outline: none; }
.lp-bd-search.is-open .lp-bd-search__go {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 16px; margin-left: 6px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--lp-bd-accent), var(--lp-bd-accent-2)); color: #fff; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: filter .16s;
}
.lp-bd-search.is-open .lp-bd-search__go:hover { filter: brightness(1.06); }
.lp-bd-search.is-open .lp-bd-search__clear {
  display: inline-flex; align-items: center; margin-left: 8px; padding-right: 4px;
  font-size: 13px; color: #9AA0B0; text-decoration: none; white-space: nowrap;
}
.lp-bd-search.is-open .lp-bd-search__clear:hover { color: var(--lp-bd-accent); }

/* ══ 목록의 카테고리 이름 ═════════════════════════
   제목 위에 둔다. 무엇에 대한 글인지 먼저 알리는 자리다.
   링크로 두면 제목 링크와 겹쳐 헷갈리므로 글자만 둔다. */
.lp-bd-cat {
  display: inline-block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--lp-bd-accent); letter-spacing: -.01em;
}
/* 공지형은 한 줄 안이라 제목 앞에 나란히 선다 */
.lp-bd-cat--inline {
  margin: 0 14px 0 0; flex: none;
  width: 96px; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 720px) {
  /* 좁으면 찾기 상자를 아래로 내린다. 나란히 두면 탭이 밀려 두어 개만 보인다.
     탭 줄이 아래 선을 그대로 쓰도록 찾기 상자를 위로 올려 순서를 바꾼다 */
  .lp-bd-filter { flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 32px; }
  .lp-bd-search { order: -1; margin-bottom: 0; align-self: flex-end; }

  /* 카테고리 탭은 줄을 바꾸지 않고 옆으로 민다. 줄을 바꾸면 글 목록이 아래로 밀린다.

     [버그] 밀리게만 해 두었더니 손으로 넘길 때 화면 전체가 함께 흔들렸다.
     탭 줄이 끝에 닿으면 그 힘이 바깥(문서)으로 넘어가기 때문이다.
     overscroll-behavior-x: contain 이 그 자리에서 멈춰 준다.

     min-width: 0 이 없으면 탭이 상자를 밀어 넓혀 화면 폭 자체가 넘어간다.
     그러면 화면이 통째로 좌우로 흔들린다 */
  .lp-bd-chips {
    display: flex; flex-wrap: nowrap; gap: 18px;
    width: 100%; min-width: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .lp-bd-chips::-webkit-scrollbar { display: none; }
  .lp-bd-chips .lp-bd-cat, .lp-bd-chips .lp-bd-chip { flex: none; white-space: nowrap; }

  /* 좁은 화면에선 열었을 때 알약이 한 줄을 꽉 채우게 한다.
     돋보기 단추·열고 닫기 자체는 넓은 화면과 같은 규칙을 쓴다(위에 있음) */
  .lp-bd-search { align-self: flex-end; }
  .lp-bd-search.is-open { align-self: stretch; }
  .lp-bd-search.is-open .lp-bd-search__in { flex: 1; width: auto; }
}


/* ══ 썸네일 비율 고르기 ═══════════════════════
   게시판마다 사진 성격이 다르다. 음식 사진은 정사각이 낫고,
   시술 전후 사진은 가로형이 자연스럽다. */
.lp-bd-r169 .lp-bd-card__frame,
.lp-bd-r169 .lp-bd-gal__frame { aspect-ratio: 16 / 9; }
.lp-bd-r43 .lp-bd-card__frame,
.lp-bd-r43 .lp-bd-gal__frame  { aspect-ratio: 4 / 3; }
.lp-bd-r11 .lp-bd-card__frame,
.lp-bd-r11 .lp-bd-gal__frame  { aspect-ratio: 1 / 1; }
/* 정사각은 칼럼형에서 너무 커 보인다. 폭을 줄여 글자 자리를 남긴다 */
.lp-bd-r11 .lp-bd-card__frame { width: 190px; }

@media (max-width: 720px) {
  .lp-bd-r11 .lp-bd-card__frame { width: 104px; }
}


/* ══ 손안 화면 마무리 ═════════════════════════
   글을 읽는 화면이므로 글이 편하게 읽히는 것이 먼저다.
   꾸밈은 줄이고 글자 자리를 넓힌다. */
@media (max-width: 640px) {
  /* 본문 표는 옆으로 민다. 줄을 바꾸면 칸이 어긋나 표가 아니게 된다.
     화면 가장자리까지 넓혀야 좁은 자리에서 한 칸이라도 더 보인다 */
  .lp-table-wrap { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  /* 목차가 길면 글보다 목차가 먼저 화면을 채운다.
     줄 높이를 올린 만큼(v6-67) 여기도 올린다. 안 그러면 보이는 항목이 줄어
     "목차가 잘렸다" 로 보인다 */
  /* [버그] 목차 안에서 손으로 밀다 끝에 닿으면 그 힘이 바깥(글)으로 넘어가
     화면이 따라 내려갔다. 목차만 보려던 손짓으로 글이 밀린다.
     overscroll-behavior 가 그 자리에서 멈춰 준다.
     카테고리 탭에서 겪은 것과 같은 문제다 (v6-81) */
  .lp-bd-toc__list {
    max-height: 200px; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* 인용문 좌우 여백이 크면 글이 답답하다 */
  .lp-bd-body blockquote { padding-left: 14px; margin-left: 0; }
  /* 카테고리 탭 옆으로 밀기는 720px 블록으로 옮겼다.
     찾기 상자가 720px 에서 아래로 내려가는데 탭만 640px 에서 밀리기 시작해,
     641~720px 사이에서 탭이 줄을 바꾸며 화면 폭을 넘었다 */
}


/* ══ 작은 손안 화면 (아이폰 SE · 갤럭시 기본) ══
   375px 안팎. 640px 조정만으로는 글자가 가장자리에 닿고
   제목이 세 줄까지 늘어난다. 한 단계 더 줄인다. */
@media (max-width: 400px) {
  .lp-bd-wrap { padding: 22px 14px 56px; }
  /* 제목이 길면 세 줄이 된다. 조금 줄여 두 줄에 담는다 */
  .lp-bd-ptitle { font-size: 23px; line-height: 1.35; }
  .lp-bd-ltitle { font-size: 21px; }
  .lp-bd-psub { font-size: 15px; }
  /* 본문은 더 줄이지 않는다. 15px 아래로는 한글이 읽기 힘들다 */
  .lp-bd-body { font-size: 15.5px; line-height: 1.75; }
  /* 목록 카드 — 썸네일이 크면 글자 자리가 없다 */
  .lp-bd-card__frame { width: 88px; }
  .lp-bd-card__t { font-size: 15px; }
  .lp-bd-card__ex { font-size: 13.5px; }
  /* 위 띠 — 사이트 이름이 길면 버튼을 밀어낸다 */
  .lp-bd-bar__t { max-width: 34vw; font-size: 13px; }
  /* 갤러리형 한 줄에 하나. 두 개면 사진이 너무 작다 */
  .lp-bd-gal { grid-template-columns: 1fr; }
  /* 본문 표를 가장자리까지 */
  .lp-table-wrap { margin-left: -14px; margin-right: -14px; padding: 0 14px; }
}

/* ── 공유 버튼 (글 끝) ───────────────────
   글을 다 읽은 자리. 카카오·페이스북·X·링크 복사. 각 브랜드 색으로. */
.lp-bd-share {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: flex-end;
  margin: 40px 0 8px; padding-top: 24px; border-top: 1px solid #EEF0F6;
}
.lp-bd-share__label { font-size: 13px; font-weight: 500; color: #9AA0AD; }
.lp-bd-share__btns { display: flex; gap: 8px; }
.lp-bd-share__b {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.lp-bd-share__b:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(20, 23, 31, .16); }
.lp-bd-share__b:active { transform: translateY(0); }
.lp-bd-share__b svg { width: 18px; height: 18px; }
/* 카카오스토리는 서비스가 끝나 뺐다. 국내 병원 글은 네이버·밴드로 더 퍼진다 */
.lp-bd-share__b--nblog { background: #03C75A; color: #fff; }
.lp-bd-share__b--band { background: #22C29C; color: #fff; }
.lp-bd-share__b--fb { background: #1877F2; color: #fff; }
.lp-bd-share__b--x { background: #14171F; color: #fff; }
.lp-bd-share__b--link { background: #EEF0F6; color: #4B5162; }
.lp-bd-share__b--link svg { width: 17px; height: 17px; }
/* 복사됨 — 잠깐 뜨는 말풍선 */
.lp-bd-share__b--link.is-done::after {
  content: '복사됨'; position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: #14171F; color: #fff; font-size: 12px; font-weight: 500;
  padding: 5px 10px; border-radius: 7px; pointer-events: none;
}
@media (max-width: 640px) {
  .lp-bd-share { margin-top: 32px; }
  .lp-bd-share__b { width: 38px; height: 38px; }
}

/* ══ 글 아래 문의 양식 ═══════════════════════
   삽입 코드는 "디자인은 손대지 않는다"가 원칙이다. 고객사 사이트에
   붙는 것이라 우리 꼴을 강요하면 안 되기 때문이다.
   그런데 블로그는 우리가 그리는 화면이라 여기서만 꼴을 준다.

   글과 이어지되 눌러야 할 곳이라는 것은 분명해야 한다.
   그래서 색을 쓰지 않고 흰 바탕에 테두리와 여백으로만 나눈다. */
.lp-bd-inq {
  margin: 64px 0 0; padding: 36px 32px;
  background: #fff; border: 1px solid #E6E9F2; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
}
.lp-bd-inq__head { margin-bottom: 24px; }
.lp-bd-inq__h {
  margin: 0; font-size: 22px; font-weight: 700; line-height: 1.35;
  letter-spacing: -.3px; color: #14171F;
}
.lp-bd-inq__d { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #6B7280; }

/* ── 항목 사이 여백 ──────────────────────
   14px(항목 사이) 대 7px(이름과 칸 사이) 이었다. 두 배 차이로는
   가까운 것이 가려지지 않아, 아래 항목의 이름이 위 칸에 딸린
   설명처럼 읽혔다. 세 배로 벌려 "이름은 아래 칸의 것"이 되게 한다. */
.lp-bd-inq .cms-field { margin-bottom: 24px; }
.lp-bd-inq .cms-field:last-of-type { margin-bottom: 0; }
.lp-bd-inq .cms-field:not(.cms-agree) > label:first-child {
  display: block; margin-bottom: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: -.1px; color: #4B5162;
}
/* 라디오·체크의 보기는 항목 이름이 아니다. 같은 꼴로 두면 보기마다
   새 항목이 시작하는 것처럼 보인다. 값이므로 본문 크기로 눕힌다 */
.lp-bd-inq .cms-field > label:not(:first-child) {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 18px 8px 0;
  font-size: 15px; font-weight: 400; color: #14171F; cursor: pointer;
}
.lp-bd-inq .cms-req { color: #E5484D; font-weight: 400; }

.lp-bd-inq input[type="text"],
.lp-bd-inq input[type="tel"],
.lp-bd-inq input[type="email"],
.lp-bd-inq input[type="number"],
.lp-bd-inq input[type="date"],
.lp-bd-inq select,
.lp-bd-inq textarea {
  /* 글자를 16px 아래로 두면 아이폰이 입력칸을 누를 때 화면을 확대한다 */
  width: 100%; box-sizing: border-box; height: 50px; padding: 0 15px;
  border: 1px solid #DFE3ED; border-radius: 10px; background: #FBFCFE;
  font-size: 16px; font-family: inherit; color: #14171F;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.lp-bd-inq textarea { height: auto; min-height: 108px; padding: 14px 15px; line-height: 1.65; }
.lp-bd-inq ::placeholder { color: #A8AEBD; }
.lp-bd-inq input:focus, .lp-bd-inq select:focus, .lp-bd-inq textarea:focus {
  outline: none; background: #fff;
  border-color: var(--lp-bd-accent); box-shadow: 0 0 0 3px rgba(var(--lp-bd-accent-rgb), .12);
}

/* ── 동의 줄 ──────────────────────────
   개인정보 동의는 칸이 아니라 글이다. 다른 항목과 같은 꼴로 두면
   무엇을 적는 자리인 줄 안다.
   체크·문구·"자세히" 가 한 줄에 있어야 한 덩어리로 읽힌다.
   전에는 "자세히" 가 아래로 떨어져 딴 것처럼 보였다. */
.lp-bd-inq .cms-agree {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid #EEF0F6;
}
.lp-bd-inq .cms-agree > label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 14px; font-weight: 400; color: #4B5162; cursor: pointer;
}
.lp-bd-inq input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin: 0;
  accent-color: var(--lp-bd-accent); cursor: pointer;
}
.lp-bd-inq .cms-privacy-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: #6B7280;
  text-decoration: underline; text-underline-offset: 2px;
}
.lp-bd-inq .cms-privacy-link:hover { color: var(--lp-bd-accent); }

.lp-bd-inq button[type="submit"] {
  width: 100%; height: 54px; margin-top: 20px; cursor: pointer;
  border: 0; border-radius: 10px; background: #14171F; color: #fff;
  font-size: 16px; font-weight: 600; font-family: inherit; letter-spacing: -.2px;
  transition: background .15s, transform .06s;
}
.lp-bd-inq button[type="submit"]:hover { background: var(--lp-bd-cta-hover); }
.lp-bd-inq button[type="submit"]:active { transform: translateY(1px); }

/* ── 실시간 검증 표시 (form.js) ──────────
   전화·이메일 형식이 틀리면 칸을 붉게, 아래에 안내줄을 붙인다.
   맞으면 옅은 초록 테두리로 "됐다" 를 조용히 알린다. */
.lp-bd-inq input.is-bad, .lp-bd-inq textarea.is-bad {
  border-color: #E5484D; background: #FEF6F6;
}
.lp-bd-inq input.is-bad:focus, .lp-bd-inq textarea.is-bad:focus {
  border-color: #E5484D; box-shadow: 0 0 0 3px rgba(229, 72, 77, .12);
}
.lp-bd-inq input.is-ok, .lp-bd-inq textarea.is-ok { border-color: #B7E0C4; }
.lp-fhint {
  display: block; margin-top: 6px; font-size: 13px; color: #C93B40; line-height: 1.5;
}

/* ── 제출 중 버튼 잠금 (form.js) ─────────
   누르면 "접수 중" 으로 바꾸고 잠근다. 흐릿하게 + 돌아가는 표시. */
.lp-bd-inq button[type="submit"].is-loading,
.lp-quick button.is-loading {
  opacity: .72; cursor: progress; position: relative;
}
.lp-bd-inq button[type="submit"].is-loading::after,
.lp-quick button.is-loading::after {
  content: ''; display: inline-block; width: 15px; height: 15px; margin-left: 9px;
  vertical-align: -2px; border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff; border-radius: 50%; animation: lp-fspin .6s linear infinite;
}
@keyframes lp-fspin { to { transform: rotate(360deg); } }

/* ── 떠 있는 상담 버튼 (플로팅 CTA) ──────
   긴 글을 읽는 중 화면 아래에 나타난다. 누르면 문의 양식으로 데려간다.
   양식이 화면에 보이면 스스로 숨는다(board.js). 폰에서 특히 잘 보이게 크게. */
.lp-bd-cta {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(8px);
  z-index: 40; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  background: #14171F; color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: -.2px;
  box-shadow: 0 8px 22px rgba(20, 23, 31, .24);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.lp-bd-cta.is-show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.lp-bd-cta:hover { background: var(--lp-bd-cta-hover); box-shadow: 0 10px 26px rgba(var(--lp-bd-accent-rgb), .3); }
.lp-bd-cta:active { transform: translateX(-50%) translateY(1px); }
.lp-bd-cta__i { width: 16px; height: 16px; }
@media (max-width: 640px) {
  /* 폰에서는 화면 전체를 먹지 않게 내용만큼만. 가운데 아래에 얌전히 */
  .lp-bd-cta {
    left: 50%; right: auto; bottom: 16px; transform: translateX(-50%) translateY(8px);
    padding: 11px 20px; font-size: 14px;
  }
  .lp-bd-cta.is-show { transform: translateX(-50%) translateY(0); }
  .lp-bd-cta:active { transform: translateX(-50%) translateY(1px); }
}

@media (max-width: 640px) {
  .lp-bd-inq { margin-top: 48px; padding: 26px 20px; border-radius: 12px; }
  .lp-bd-inq__h { font-size: 20px; }
}