/* =========================================================================
   하단 앱형 메뉴 (common/include/appnav.asp) — 2026-08-19 PWA 1단계
   모바일(840px 이하)에서만 보인다. PC·태블릿 가로는 기존 상단 메뉴 그대로.
   px 로 쓴다: 840px 이하에서 html 폰트가 6.5px 로 줄어 rem 이 예측이 안 된다.
   ========================================================================= */
.app_nav, .app_nav_spacer{display:none;}

@media only screen and (max-width : 840px){
	:root{ --appnav-h: 58px; }

	body.has_appnav .app_nav_spacer{display:block; height:calc(var(--appnav-h) + env(safe-area-inset-bottom, 0px));}
	body.has_appnav .app_nav{display:flex;}
	/* 오른쪽 위 '메뉴'를 펼친 동안(html.hide)은 하단 메뉴를 숨긴다 — 펼침 메뉴 끝부분이 가려지지 않게 */
	html.hide body.has_appnav .app_nav{display:none;}

	.app_nav{
		position:fixed; left:0; right:0; bottom:0; z-index:90;
		height:calc(var(--appnav-h) + env(safe-area-inset-bottom, 0px));
		padding:0 4px env(safe-area-inset-bottom, 0px);
		background:#fff; border-top:1px solid #e9e9e9;
		box-shadow:0 -2px 12px rgba(0,0,0,.06);
		align-items:stretch; justify-content:space-around;
		font-size:0; line-height:0;
	}
	.app_nav .an_item{
		flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
		gap:3px; padding:6px 2px 5px; color:#555; text-decoration:none; position:relative;
		-webkit-tap-highlight-color:transparent;
	}
	.app_nav .an_ico{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; display:block;}
	/* 11px 회색(대비 3.5:1)은 40~60대에게 안 읽혔다 → 12.5px 진한 회색(7:1) (2026-08-29) */
	.app_nav .an_txt{font-size:12.5px; line-height:1; font-weight:600; letter-spacing:-0.02em; white-space:nowrap; display:block;}
	.app_nav .an_item.an_on{color:var(--point, #ff6600);}
	.app_nav .an_item.an_on .an_txt{font-weight:700;}

	/* 가운데 견적신청 — 떠 있는 둥근 버튼 */
	.app_nav .an_cta{color:#555;}
	.app_nav .an_cta .an_cta_btn{
		width:48px; height:48px; margin-top:-22px; border-radius:50%;
		background:var(--point, #ff6600); color:#fff;
		box-shadow:0 6px 16px rgba(255,102,0,.38), 0 0 0 4px #fff;
		display:flex; align-items:center; justify-content:center;
	}
	.app_nav .an_cta .an_cta_btn svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round;}
	.app_nav .an_cta.an_on{color:var(--point, #ff6600);}
	/* 누르는 순간 바로 반응이 보여야 한다 — 다음 화면이 오기까지 0.5~2초가 걸리는데(서버 응답 시간)
	   그동안 아무 변화가 없으면 "안 눌렸나?" 하고 두 번 누른다 (2026-08-29 신고). 눌린 칸에 옅은 주황을 깐다 */
	.app_nav .an_item::before{content:""; position:absolute; left:4px; right:4px; top:4px; bottom:4px; border-radius:12px; background:#fff6ef; opacity:0; transition:opacity .08s;}
	.app_nav .an_item:active::before{opacity:1;}
	.app_nav .an_item:active{color:var(--point, #ff6600);}
	.app_nav .an_item>*{position:relative;}
	.app_nav .an_item:active .an_ico,
	.app_nav .an_cta:active .an_cta_btn{transform:scale(.94);}

	/* 하단 메뉴가 있는 화면에서는 오른쪽 아래 떠 있는 버튼들을 그만큼 올린다 */
	body.has_appnav .btn_fab_write{bottom:calc(24px + var(--appnav-h) + env(safe-area-inset-bottom, 0px));}
	body.has_appnav a.goTop{bottom:calc(1.5rem + var(--appnav-h) + env(safe-area-inset-bottom, 0px));}
	body.has_appnav .mScrolls{bottom:calc(40px + var(--appnav-h) + env(safe-area-inset-bottom, 0px));}
}

/* ---- 앱 설치 안내 카드 (#pwaBar, appnav.asp) — 모바일에서만, JS 가 body.has_pwabar 를 켜면 보인다 ----
   ⚠ 화면을 덮는 크기로 키우지 말 것: 구글이 본문을 가리는 모바일 앱 설치 배너에 검색 순위 불이익을 준다.
   닫기 두 가지(오늘 하루 안 보기 / ✕)를 카드 안 윗줄에 크게 둔다 — 흰 배경 위에 흰 글씨가 되지 않게 카드 안에 넣는다. */
.pwa_bar{display:none;}
@media only screen and (max-width : 840px){
	body.has_pwabar .pwa_bar{
		display:block;
		position:fixed; left:10px; right:10px; z-index:89;
		bottom:calc(var(--appnav-h) + 10px + env(safe-area-inset-bottom, 0px));
		padding:6px 10px 12px; border-radius:16px;
		background:linear-gradient(135deg,#ff8a1f 0%,#ff6600 55%,#f04a12 100%);
		box-shadow:0 10px 28px rgba(240,74,18,.34);
		color:#fff; font-size:13px; line-height:1.35;
		animation:pwaBarUp .28s ease-out both;
	}
	@keyframes pwaBarUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

	/* 하단 메뉴가 없는 화면(자기 바가 있는 화면)에서는 바닥에 붙인다 */
	body.no_appnav.has_pwabar .pwa_bar{bottom:calc(10px + env(safe-area-inset-bottom, 0px));}

	/* 윗줄 : 닫기 두 가지 */
	.pwa_bar .pb_head{display:flex; align-items:center; justify-content:space-between; min-height:30px;}
	/* '오늘 하루 안 보기' 는 보조 — 조용하게. ✕ 는 주 닫기라 더 크고 뚜렷하게(사용자 결정 2026-08-19).
	   ✕ = 이 브라우저를 닫을 때까지 안 뜬다 / '오늘 하루' = 하루. 카드는 메인화면에서만 그린다(appnav.asp). */
	.pwa_bar .pb_today{
		padding:4px 2px; border:0; background:transparent;
		color:rgba(255,255,255,.8); font-size:11.5px; font-weight:500; line-height:1.2;
		text-decoration:underline; text-underline-offset:3px;
	}
	.pwa_bar .pb_close{
		width:34px; height:34px; margin-right:-4px; padding:0; border:0; border-radius:50%;
		background:rgba(255,255,255,.24); color:#fff; font-size:18px; line-height:34px; font-weight:800;
	}
	.pwa_bar .pb_today:active, .pwa_bar .pb_close:active{opacity:.6;}

	/* 아랫줄 : 아이콘 + 문구 + 설치 버튼 */
	.pwa_bar .pb_body{display:flex; align-items:center; gap:11px;}
	.pwa_bar .pb_ico{width:44px; height:44px; flex:0 0 auto; border-radius:11px; background:#fff; padding:2px;}
	.pwa_bar .pb_txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
	.pwa_bar .pb_txt strong{font-size:15px; font-weight:700; color:#fff; letter-spacing:-0.02em;}
	.pwa_bar .pb_sub{display:none; font-size:12.5px; color:rgba(255,255,255,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	.pwa_bar .pb_sub b{font-weight:700; color:#fff;}
	.pwa_bar[data-os="android"] .pb_sub[data-os="android"]{display:block;}
	.pwa_bar[data-os="ios"] .pb_sub[data-os="ios"]{display:block;}
	.pwa_bar .pb_btn{
		flex:0 0 auto; height:38px; padding:0 20px; border:0; border-radius:19px;
		background:#fff; color:#e8500f; font-size:14px; font-weight:800; line-height:38px;
		box-shadow:0 3px 10px rgba(0,0,0,.16);
	}
	.pwa_bar .pb_btn:active{transform:scale(.96);}
	.pwa_bar[data-os="ios"] .pb_btn{display:none;}

	/* 아이폰 안내 : 공유 아이콘을 문구 안에 실제 모양으로 그리고, 카드 아래쪽에 말풍선 꼬리로 방향을 짚는다.
	   ⚠ 큰 화살표를 카드 밖으로 내리면 우리 하단 메뉴 위에 겹쳐 "이 메뉴를 누르라는 건가" 로 읽힌다 → 꼬리로 둔다. */
	.pwa_bar .pb_where{display:none; font-style:normal;}
	.pwa_bar[data-pos="bottom"] .pb_where[data-pos="bottom"]{display:inline;}
	.pwa_bar[data-pos="top"] .pb_where[data-pos="top"]{display:inline;}
	.pwa_bar .pb_share{
		width:15px; height:15px; vertical-align:-3px; margin:0 1px;
		fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
	}
	.pwa_bar .pb_arrow{display:none;}
	/* 카드 안 오른쪽([설치] 버튼 자리)에 둔다. 카드 밖 아래로 내리면 하단 메뉴의 ➕ 버튼에 가려 안 보인다(실측) */
	.pwa_bar[data-os="ios"] .pb_arrow{
		display:block; flex:0 0 auto; width:30px; height:30px; margin-right:2px;
		fill:none; stroke:#fff; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; opacity:.95;
	}
	.pwa_bar[data-os="ios"][data-pos="bottom"] .pb_arrow{animation:pbArrowDown 1.5s ease-in-out infinite;}
	.pwa_bar[data-os="ios"][data-pos="top"] .pb_arrow{transform:rotate(180deg); animation:pbArrowUp 1.5s ease-in-out infinite;}
	@keyframes pbArrowDown{ 0%,100%{transform:translateY(-3px);} 50%{transform:translateY(4px);} }
	@keyframes pbArrowUp{ 0%,100%{transform:rotate(180deg) translateY(-3px);} 50%{transform:rotate(180deg) translateY(4px);} }
	@media (prefers-reduced-motion: reduce){
		.pwa_bar[data-os="ios"] .pb_arrow{animation:none;}
		body.has_pwabar .pwa_bar{animation:none;}
	}
}