/*
 * 장례식장 글 전용 스킨 — 앱 화면
 *
 * 시안 https://claude.ai/artifact/SjutGwhKjQyks9m9BjK6NF 의 상세화면을 옮긴 것.
 * blueinfobox-place-map.php 가 body.bib-place 일 때만 이 파일을 큐에 올린다.
 * 마크업은 single-place.php + header-place.php + footer-place.php,
 * 본문은 make-place.ps1 이 만든다. 세 곳이 클래스 이름으로 맞물려 있다.
 *
 * ── 왜 style.css 가 아닌가
 * 이 규칙은 장례식장 글에만 쓴다. style.css 는 부고 133편·정보글 26편과
 * 목록·검색 화면이 전부 함께 읽는 파일이라, 쓰지도 않는 7KB 를 모든 페이지에
 * 얹을 이유가 없다. 캐시 무효화도 분리된다.
 *
 * ── 왜 클래스에 bibp- 를 붙였나
 * 시안의 이름(.top .card .panel .dock .scroll .brand)은 전부 흔한 단어다.
 * 그런데 테마에는 이미 #header .top 과 #view .tagbox 가 있다. 그대로 옮기면
 * 머리말 레이아웃이 깨진다. 전부 bibp- 로 namespace 했다.
 *
 * ── 시안에서 뺀 것
 *   다크 모드    시안에는 있지만 사이트 전체가 라이트 전용이다. 장례식장 글만
 *                다크로 뜨면 같은 사이트가 아닌 것처럼 보인다.
 *   글꼴 선언    사용자 요청대로 사이트 기본 글꼴을 그대로 물려받는다.
 *                font-family 를 여기에 쓰지 말 것.
 *   「예시 데이터」 배지 / 「문장이 갈라지도록 생성됩니다」 안내
 *                시안 검토용 문구다. 발행물에 내부 사정을 쓰지 않는다.
 *
 * ── 건드리지 않은 것
 * #view .conWrap p+p {margin-top:20px} 는 전역 규칙이고 모든 글이 같이 쓴다.
 * 여기서 덮지 않는다(2026-10-24 사용자 결정).
 */

/*
 * 2026-10-24 — 본문에서 박스를 걷어냈다.
 *
 * 처음에는 시안대로 모든 구역이 흰 카드였다(분기 문단, 표, FAQ, 추천, 출처).
 * 회색 배경 위에 카드가 떠 있는 앱 모양이었는데, 실제 글에 적용하니 한 화면에
 * 박스가 예닐곱 개씩 쌓여 읽기가 불편했다. 카드는 서로 **다른 것들을 나란히**
 * 놓을 때 쓰는 것이지, 위에서 아래로 읽어 내려가는 글에는 방해만 된다.
 *
 * 그래서 카드는 숫자 세 개(빈소·안치·주차)에만 남겼다. 그 셋은 나란히 비교하는
 * 값이라 테두리가 제 역할을 한다. 나머지는 전부 평범한 글이다.
 *
 * 배경도 흰색으로 돌렸다. 회색 배경은 흰 카드를 띄우려고 있던 것이라,
 * 카드가 없으면 글자 배경만 칙칙해진다.
 */
body.bib-place {
	--bibp-card:   #ffffff;
	--bibp-sunk:   #f6f8fa;
	--bibp-fg:     #141d27;
	--bibp-muted:  #5a6876;
	--bibp-faint:  #93a1af;
	--bibp-line:   #dfe5ec;
	--bibp-line2:  #eef2f6;

	background: #fff;
	color: var(--bibp-fg);
}

/* 앱 셸.
   테마는 #wrapper>* 에 흰 배경과 padding 20px 을 준다. 앱 화면은 카드가
   배경 위에 떠 있는 모양이라 그 둘을 다 지운다. */
body.bib-place #wrapper > * {
	background: transparent;
	padding: 0;
}

/* ── 상단 고정 바 ─────────────────────────────────────────────── */
/*
 * 선택자가 길어 보이지만 줄이면 안 된다.
 *
 * style.css 50행에 #wrapper>* { position:relative } 가 있다. 우선순위가
 * (0,1,0,0) 이라 .bibp-top { position:sticky } (0,0,1,0) 을 이긴다. 그래서
 * 짧게 쓰면 sticky 가 relative 로 덮여 상단 바가 같이 스크롤돼 올라가 버린다.
 * body.bib-place #wrapper > .bibp-top 은 (0,1,2,1) 이라 확실히 이긴다.
 *
 * 상단 바가 고정이어야 하는 이유는 모양이 아니다. 글 아래쪽까지 내려간
 * 사람이 다른 장례식장을 보려면 뒤로 가기 버튼이 늘 손에 닿아야 한다.
 * 조문 갈 곳을 고르는 중이라 목록과 상세를 여러 번 오간다.
 */
body.bib-place #wrapper > .bibp-top {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--bibp-card);
	border-bottom: 1px solid var(--bibp-line);
}
.bibp-top-in {
	max-width: 760px;
	margin: 0 auto;
	padding: 9px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.bibp-back {
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 40px;
	color: var(--base);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}
.bibp-back svg { flex: none; }
.bibp-brand { display: flex; align-items: center; opacity: .75; }
.bibp-brand img { display: block; }

/* ── 스크롤 본문 ──────────────────────────────────────────────── */
/* 2026-10-24 — 아래 패딩이 96px 이었다. 하단 고정 바에 마지막 줄이 가리지
   않게 비워 둔 자리였는데, 고정을 떼면서 필요 없어졌다. */
.bibp-scroll {
	max-width: 760px;
	margin: 0 auto;
	padding: 16px 16px 40px;
}
body.bib-place #view {
	display: block;
	border-top: 0;
	text-align: left;
	padding: 0;
}

.bibp-title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.03em;
	color: var(--bibp-fg);
	margin: 0;
	text-wrap: balance;
}
.bibp-byline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	font-size: 13px;
	color: var(--bibp-faint);
}
.bibp-byline a { color: var(--bibp-muted); text-decoration: none; }
.bibp-byline .bibp-upd { color: var(--bibp-faint); }

/* 머리말 바로 아래 첫 문단. 시안의 .dsub 자리다. */
body.bib-place #view .conWrap { margin-top: 14px; color: var(--bibp-fg); }
body.bib-place #view .conWrap > p { font-size: 15px; line-height: 1.7; }

/* ── 숫자 카드 3개 ──────────────────────────────────────────────
   빈소·안치·주차. 조문 가는 사람이 가장 먼저 찾는 세 숫자라 맨 위에 둔다. */
body.bib-place .bibp-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 18px 0 12px;
}
/* 여기만 테두리를 남긴다. 셋은 나란히 비교하는 값이라 경계가 제 역할을 한다.
   그림자는 뺐다 - 본문에 박스가 없어진 마당에 혼자 떠 있으면 튄다. */
body.bib-place .bibp-stat {
	background: var(--bibp-sunk);
	border: 1px solid var(--bibp-line);
	border-radius: 10px;
	padding: 14px 12px;
	text-align: center;
}
/* 숫자는 tabular-nums 로 고정폭을 쓴다. 안 그러면 1 과 8 의 폭이 달라
   카드 3개의 숫자 중심이 서로 어긋나 보인다. */
body.bib-place .bibp-stat b {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
body.bib-place .bibp-stat i {
	font-style: normal;
	font-size: 13px;
	font-weight: 500;
	color: var(--bibp-faint);
	margin-left: 2px;
}
body.bib-place .bibp-stat span {
	display: block;
	font-size: 12px;
	color: var(--bibp-faint);
	margin-top: 4px;
}

/* ── 위치와 연락처 ───────────────────────────────────────────────
   박스였던 것을 평범한 구역으로 바꿨다. 지도 자체는 시각 요소라 테두리를
   남겨 두지만, 주소와 전화번호를 감싸던 카드는 없앴다. */
body.bib-place .bibp-panel {
	margin: 0 0 6px;
}

/* 지도.
   높이를 못 박지 않고 aspect-ratio 로 둔다. 화면 폭이 바뀌어도 비율이
   유지돼야 지도가 세로로 눌리지 않는다.
   ※ blueinfobox-place-map.php 의 JS 는 height 를 건드리지 않는다. 한쪽을
     고치면 다른 쪽도 확인할 것. */
body.bib-place .place-map {
	width: 100%;
	aspect-ratio: 16 / 10;
	min-height: 230px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--bibp-sunk);
	border: 1px solid var(--bibp-line);
	margin-bottom: 13px;
	/* 스크립트가 안 돌았을 때 보이는 대체 텍스트(주소)를 가운데 둔다. */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--bibp-muted);
}
/* 지도가 그려지면 카카오가 이 div 안에 자기 레이어를 쌓는다. 그때는 flex
   정렬이 방해가 되므로 끈다. JS 가 is-ready 를 붙인다. */
body.bib-place .place-map.is-ready { display: block; padding: 0; }

/* #view 를 선택자에 넣어 두는 이유가 있다.
   style.css 350행의 #view .conWrap p+p { margin-top:20px } 는 (0,1,1,2) 이라
   body.bib-place .bibp-tel (0,0,2,1) 을 이긴다. 주소 다음에 오는 전화번호가
   20px 로 벌어져 아래 구분선과 어긋난다. #view 를 넣으면 (0,2,2,2) 가 되어
   확실히 이긴다. 짧게 줄이지 말 것. */
body.bib-place #view .conWrap .bibp-addr {
	font-size: 15px;
	line-height: 1.55;
	overflow-wrap: anywhere;
}
body.bib-place #view .conWrap .bibp-tel {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	margin-top: 10px;
	padding-top: 11px;
	border-top: 1px solid var(--bibp-line2);
}

/* ── 제목 ──────────────────────────────────────────────────────
   2026-10-24 — 자간·색·위 여백을 고쳤다.
   원래는 시안의 작은 라벨(.panel h3)을 옮겨 온 것이라 자간을 .1em 벌리고
   색을 연하게 썼다. 그 스타일은 카드 안에서 「여기부터 다른 내용」을 표시하는
   꼬리표였는데, 본문에서 카드를 걷어내면서 그냥 제목이 됐다. 제목은 벌어진
   자간이 읽기 나쁘고 연한 색이면 구역이 안 끊긴다.
   위 여백 26px → 56px: 카드 테두리가 하던 구역 구분을 여백이 대신한다. */
body.bib-place #view .conWrap h2 {
	font-size: 12px;
	letter-spacing: normal;
	font-weight: 700;
	color: #000;
	margin: 56px 0 10px;
	padding: 0;
	border: 0;
	background: none;
}
body.bib-place #view .conWrap h2:before,
body.bib-place #view .conWrap h2:after { content: none; }

/* ── 본문 중간 광고 ────────────────────────────────────────────
   single-place.php 가 「빈소와 시설 규모」 제목 바로 위에 넣는다.
   높이(min-height:250px)와 배경은 style.css 의 .adsFix 가 잡는다 - CLS 대책이라
   여기서 덮지 않는다. 앱 화면의 카드 모양만 입힌다. */
body.bib-place #view .conWrap .bibp-ad {
	border-radius: 13px;
	border: 1px solid var(--bibp-line);
	margin: 20px 0;
}

/* ── 분기 문단 ──────────────────────────────────────────────────
   카드였던 것을 그냥 문단으로 돌렸다. 생성기도 <p> 네 개에서 하나로 합쳤다. */
body.bib-place .bibp-gen {
	margin: 0 0 4px;
}
body.bib-place .bibp-gen p { font-size: 15px; line-height: 1.7; }

/* ── 표 ─────────────────────────────────────────────────────────
   시설 목록과 같은 시군구 목록은 표로 내보낸다. 표가 기계에 더 정확하다.
   감싸던 카드는 없앴고, 가로로 넘칠 때만 스크롤이 생기게 둔다. */
body.bib-place #view .conWrap figure.wp-block-table {
	margin: 0 0 4px;
	overflow-x: auto;
}
body.bib-place #view table { margin: 0; }
body.bib-place #view table th,
body.bib-place #view table td {
	border: 0;
	border-bottom: 1px solid var(--bibp-line2);
	padding: 11px 4px;
	text-align: left;
	font-size: 15px;
}
body.bib-place #view table tr:last-child td { border-bottom: 0; }
body.bib-place #view table th {
	background: none;
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--bibp-faint);
	font-weight: 700;
}
/* 값 칸은 오른쪽으로 보낸다. 항목 이름과 값이 양끝에 붙어야 시안의
   「식당 ———— 있음」 모양이 된다. */
body.bib-place #view table td:last-child,
body.bib-place #view table th:last-child {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/* 같은 시군구 표는 3열이다. 가운데(빈소 수)도 오른쪽으로 보낸다. */
body.bib-place #view table td:nth-child(2):not(:last-child),
body.bib-place #view table th:nth-child(2):not(:last-child) {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--bibp-muted);
}
body.bib-place #view table a { color: var(--base); text-decoration: none; font-weight: 500; }

/* ── FAQ 아코디온 ───────────────────────────────────────────────
   카드를 없애고 줄 사이 구분선만 남겼다. 접고 펴는 동작은 그대로다 -
   답을 다 펼쳐 두면 질문 다섯 개가 화면을 가득 메운다. */
body.bib-place #view .conWrap details {
	border-bottom: 1px solid var(--bibp-line2);
	margin-bottom: 0;
}
body.bib-place #view .conWrap summary {
	padding: 14px 0;
	min-height: 48px;
	display: flex;
	align-items: center;
	cursor: pointer;
	list-style: none;
}
body.bib-place #view .conWrap summary::-webkit-details-marker { display: none; }
/* 질문은 h3 로 싸여 있다. summary 안의 heading 은 HTML 규격상 허용되며,
   그래야 검색엔진이 질문을 제목으로 읽는다. 생김새만 본문 크기로 줄인다. */
body.bib-place #view .conWrap summary h3 {
	font-size: 15px;
	font-weight: 500;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--bibp-fg);
	background: none;
}
body.bib-place #view .conWrap summary h3:before,
body.bib-place #view .conWrap summary h3:after { content: none; }
body.bib-place #view .conWrap summary:after {
	content: "+";
	margin-left: auto;
	padding-left: 12px;
	color: var(--bibp-faint);
	font-size: 18px;
	line-height: 1;
}
body.bib-place #view .conWrap details[open] summary:after { content: "\2212"; }
body.bib-place #view .conWrap details .bibp-ans {
	padding: 0 0 15px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--bibp-muted);
}

/* ── 추천 글 · 출처 ────────────────────────────────────────────
   style.css 쪽 규칙(#view .conWrap .recommend / .sources)을 그대로 쓴다.
   카드로 감싸던 것을 걷어내고 위쪽 구분선만 남긴다. */
body.bib-place #view .conWrap .recommend {
	border-top: 1px solid var(--bibp-line2);
	padding: 18px 0 0;
	margin: 18px 0 0;
}
body.bib-place #view .conWrap .sources {
	background: none;
	border: 0;
	border-top: 1px solid var(--bibp-line2);
	margin: 18px 0 0;
	padding: 4px 0 0;
	color: var(--bibp-muted);
}

/* ── 전화 / 길찾기 / 번호 복사 ──────────────────────────────────
   2026-10-24 — 화면 하단 고정을 뗐다.
   고정 바는 늘 손에 닿는 대신 화면 아래를 영구히 차지하고, 상단의 지역
   돌아가기 버튼과 주목을 나눠 가진다. 이 사이트에서 더 중요한 동선은
   「다른 장례식장도 보기」 쪽이라, 그쪽을 상단 고정으로 남기고 이것은
   본문 흐름 안으로 내렸다. 글 끝에 자연스럽게 놓인다. */
.bibp-dock {
	margin: 22px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--bibp-line2);
}
/* max-width 는 .bibp-scroll 이 이미 잡는다. 여기서 또 걸면 좁은 화면에서
   안쪽으로 한 번 더 들어가 보인다. */
.bibp-dock-in {
	display: flex;
	gap: 8px;
}
.bibp-dock-in > a,
.bibp-dock-in > button {
	flex: 1 1 0;
	min-width: 0;
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 500;
	font-family: inherit;
	text-decoration: none;
	border: 1px solid var(--bibp-line);
	background: var(--bibp-sunk);
	color: var(--bibp-fg);
	cursor: pointer;
}
.bibp-dock-in > a.bibp-call {
	background: var(--base);
	border-color: var(--base);
	color: #fff;
	font-weight: 700;
}
.bibp-dock-in > a.bibp-route { color: var(--base); font-weight: 600; }
.bibp-dock-in > button.bibp-copy { color: var(--bibp-muted); }

/* ── 지역 페이지 목록 ───────────────────────────────────────────
   /장례식장/경기도/ · /장례식장/화성시/ (page-region.php)
   상세화면과 같은 글꼴·여백을 쓰고, 박스 없이 구분선으로만 나눈다.
   한 줄에 하나씩 쭉 내려가는 형태다. */
body.bib-region #view .conWrap h2.bibp-rgroup {
	font-size: 17px;
	letter-spacing: normal;
	color: #000;
	margin: 40px 0 0;
	padding: 0 0 10px;
	border-bottom: 2px solid var(--bibp-fg);
}
body.bib-region #view .conWrap h2.bibp-rgroup span {
	font-size: 13px;
	font-weight: 400;
	color: var(--bibp-faint);
	margin-left: 6px;
}
body.bib-region #view .conWrap .bibp-rlist {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: none;
}
body.bib-region #view .conWrap .bibp-rlist li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--bibp-line2);
	background: none;
}
body.bib-region #view .conWrap .bibp-rlist li:before,
body.bib-region #view .conWrap .bibp-rlist li:after { content: none; }
/* 줄 전체가 누르는 영역이다. 휴대폰에서 이름 글자만 누르게 하면 빗나간다. */
body.bib-region #view .conWrap .bibp-rlist a {
	display: block;
	padding: 14px 2px;
	text-decoration: none;
	color: inherit;
}
body.bib-region #view .conWrap .bibp-rlist .n {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.02em;
	color: var(--base);
}
body.bib-region #view .conWrap .bibp-rlist .w {
	display: block;
	font-size: 13px;
	color: var(--bibp-faint);
	margin-top: 3px;
}
body.bib-region #view .conWrap .bibp-rlist .s {
	display: block;
	font-size: 14px;
	color: var(--bibp-muted);
	margin-top: 7px;
	font-variant-numeric: tabular-nums;
}
body.bib-region #view .conWrap .bibp-rlist .s b {
	color: var(--bibp-fg);
	font-weight: 700;
}
body.bib-region #view .conWrap .bibp-rsrc {
	margin-top: 26px;
	padding-top: 16px;
	border-top: 1px solid var(--bibp-line2);
	font-size: 13px;
	line-height: 1.7;
	color: var(--bibp-faint);
}

/* ── 꼬리말 ──────────────────────────────────────────────────── */
.bibp-foot {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 16px 36px;
	font-size: 13px;
	color: var(--bibp-faint);
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.bibp-foot a { color: var(--bibp-muted); text-decoration: none; font-weight: 600; }

@media (max-width: 420px) {
	.bibp-title { font-size: 22px; }
	body.bib-place .bibp-stat b { font-size: 24px; }
	body.bib-place .bibp-stat { padding: 13px 6px; }
	.bibp-dock-in > a,
	.bibp-dock-in > button { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	body.bib-place * { transition: none !important; }
}