/**
 * [2026-10-22 신규] 오른쪽·하단 고정 버튼(.floating) 디자인 개편 — 제플린 "11. [PC] 메인페이지_플로팅 배너_btn"
 *
 * layout.css의 기존 .floating 규칙을 이 파일에서 덮어쓴다. (layout.css는 그대로 둠)
 * 1. 버튼 크기 66×158, 아이콘 28px + 글자 2줄을 세로 가운데 정렬, 구분선 없음
 * 2. 마우스를 올리면 흰색이 아니라 같은 색의 진한 톤으로 바뀜
 * 3. '아산본 칼럼' 버튼 추가 (4개)
 * 4. 휴대폰: 4칸, 아이콘 위·글자 아래, 높이 13.3vw → 16vw
 */

/* PC */
.floating ul li:after {
	display: none;
}

.floating ul li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 158px;
	padding: 0;
	font-size: 22px;
	line-height: 28px;
	/* 세로가 낮은 화면(1366×768 노트북 등)에서 위아래가 잘리지 않도록, 버튼 4개(158×4=632)가 화면 높이에 맞춰
	   같은 비율로 줄어듦 — 높이·글자·간격 모두 (100vh - 84px) / 632 배. 84px = 맨 위로 버튼 46 + 간격 18 + 여유 20.
	   min()을 모르는 브라우저는 위의 고정값 사용 */
	gap: min(5px, calc((100vh - 84px) * 5 / 632));
	height: min(158px, calc((100vh - 84px) * 158 / 632));
	font-size: min(22px, calc((100vh - 84px) * 22 / 632));
	line-height: min(28px, calc((100vh - 84px) * 28 / 632));
	font-weight: 500;
	letter-spacing: -0.059em; /* 22px에서 -1.3px, 글자가 줄면 같이 줄어듦 */
	color: #fff;
}

.floating ul li a img {
	display: block;
	width: 28px;
	height: 28px;
	width: min(28px, calc((100vh - 84px) * 28 / 632));
	height: min(28px, calc((100vh - 84px) * 28 / 632));
}

.floating ul li:hover a {
	color: #fff;
}

.floating ul li.call { background-color: #1c2959; }
.floating ul li.call:hover { background-color: #081339; }
.floating ul li.naver { background-color: #57bf4e; }
.floating ul li.naver:hover { background-color: #299b22; }
.floating ul li.map { background-color: #fbe94d; }
.floating ul li.map:hover { background-color: #ffdb01; }
.floating ul li.column { background-color: #7aa0ed; }
.floating ul li.column:hover { background-color: #537cd0; }

.floating ul li.map a,
.floating ul li.map:hover a {
	color: #3b2824;
}

.floating a.toTheTop {
	margin-top: 18px;
}

/* 휴대폰 */
@media screen and (max-width: 768px) {
	.floating {
		height: 16vw;
	}

	.floating ul {
		display: flex;
		background: none;
	}

	.floating ul li {
		width: 25%;
		float: none;
		border-right: 0;
	}

	.floating ul li a {
		gap: 1.6vw;
		height: 100%;
		font-size: 3.2vw;
		line-height: 1.2;
		letter-spacing: -0.02em;
		white-space: nowrap;
	}

	.floating ul li a img {
		width: 5.6vw;
		height: 5.6vw;
	}

	.floating a.toTheTop {
		height: 16vw;
		margin: 0;
	}

	/* 말풍선: 기존 bottom 60px은 높이 13.3vw(390px 화면 52px) 기준 → 높이가 늘어도 버튼 위 8px 간격 유지 */
	.floating .asan-bubble {
		bottom: calc(100% + 8px);
	}

	/* 맨 아래 내용이 하단 버튼에 가리지 않도록 (layout.css 13.3vw) */
	footer {
		padding-bottom: 16vw;
	}
}