/* ═══════════════════════════════════════════════════════════════════════════
   btn-hover.css — 버튼 오버 반응
   명탐정토토(dosiraktoto02) · 2026-09-28 · v1

   이 페이지의 버튼 9개 중 오버가 잡혀 있던 것은 헤더 버튼 하나뿐이었다.
   나머지 8개(히어로 CTA·카드 CTA·모바일 CTA·마감 CTA·TOP·퀵)는 마우스를
   올려도 아무 반응이 없었다. 그 하나가 쓰던 말(배경이 진해지고 화살표가
   오른쪽으로 밀린다)을 나머지에도 그대로 쓴다.

   [세 가지만 쓴다]
     1) 표면이 밝아진다   — 테두리/배경
     2) 화살표가 오른쪽으로 — "여기로 간다" 는 방향 지시
     3) 살짝 떠오른다     — 2px. 더 주면 글자가 흔들려 보인다
   아이콘(네이버 카페 로고 등)은 건드리지 않는다. 브랜드 마크가 움직이면
   버튼이 아니라 아이콘이 주인공처럼 보인다.

   [왜 (hover: hover) 로 감싸는가]
   터치 기기는 탭한 뒤에도 :hover 가 남는다. 감싸지 않으면 모바일에서
   한 번 누른 버튼이 계속 밝아진 채로 있는다.

   [왜 transform 과 opacity 위주인가]
   배경색·테두리색은 페인트를 다시 하지만 버튼 하나 크기라 부담이 없다.
   대신 그림자·blur 는 쓰지 않는다 — 이 페이지는 배경 빛 레이어가 셋이나
   상시로 돌고 있어 합성 부담을 더 얹지 않는다.

   [속도]
   원래 헤더 버튼은 all 0.5s 였다. 오버 반응에 0.5초는 손이 먼저 떠난다.
   0.28초로 통일했다 — 눌러도 되는 것이라는 신호는 빠를수록 좋다.

   ※ 링크 주소(href="#")는 아직 비어 있다. 반응만 먼저 잡아 둔 것이다.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {

	/* ── 공통 전이 ──────────────────────────────────────────────────────── */
	#header > .contents_con > .btn_con .a_btn,
	#main_con .a_btn,
	#footer .a_btn {
		-webkit-transition:background-color 0.28s ease, border-color 0.28s ease,
		                   background 0.28s ease, -webkit-transform 0.28s ease;
		        transition:background-color 0.28s ease, border-color 0.28s ease,
		                   background 0.28s ease, transform 0.28s ease;
	}
	#header > .contents_con > .btn_con .a_btn > img,
	#main_con .a_btn > img,
	#footer .a_btn > img {
		-webkit-transition:-webkit-transform 0.28s ease;
		        transition:transform 0.28s ease;
	}

	/* ── 1. 헤더 CTA — 파란 알약 ────────────────────────────────────────── */
	#header > .contents_con > .btn_con .a_btn:hover {
		background-color:#0957B7;
		-webkit-transform:translateY(-2px);
		        transform:translateY(-2px);
	}

	/* ── 2. 유리 버튼 — 히어로·마감 CTA ──────────────────────────────────
	   테두리 rgba(255,255,255,0.08) + radial 하이라이트로 만든 유리 질감이다.
	   질감을 바꾸지 않고 밝기만 올린다 */
	#main_con > .info01_con > .contents_con > .text02_con > table > tbody > tr > td .a_btn:hover,
	#main_con > .info05_con > .contents_con > .contents_con > .btn_con .a_btn:hover {
		border-color:rgba(255,255,255,0.28);
		background:radial-gradient(circle at 30% 28%, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 45%), rgba(255,255,255,0.10);
		-webkit-transform:translateY(-2px);
		        transform:translateY(-2px);
	}

	/* ── 3. 글자형 CTA — 카드 제목줄·모바일 ─────────────────────────────
	   배경이 없는 텍스트 링크다. 밝기로는 티가 안 나서 화살표만 민다 */
	#main_con > .info02_con > .contents_con > .info01_con > .info02_con > .contents_con > .title_con > table > tbody > tr > .btn_td .a_btn:hover,
	#main_con > .info02_con > .contents_con > .info01_con > .info02_con > .contents_con > .contents_con > .btn_con.m_con .a_btn:hover {
		-webkit-transform:translateX(3px);
		        transform:translateX(3px);
	}

	/* ── 4. 화살표가 오른쪽으로 ─────────────────────────────────────────
	   버튼 안의 마지막 img 만 민다. 앞쪽 img(네이버 카페 로고 등)는 그대로 */
	#header > .contents_con > .btn_con .a_btn:hover > img:last-child,
	#main_con .a_btn:hover > img:last-child,
	#footer > .info01_con .a_btn:hover > img:last-child {
		-webkit-transform:translateX(5px);
		        transform:translateX(5px);
	}

	/* ── 5. TOP 버튼 — 화살표가 위로 올라간다 ───────────────────────────
	   PC 는 #footer > .top_btn.w_con, 모바일은 #footer > .right_quick >
	   .top_btn.m_con 안에 있다. 자식 결합자(>)로 잡으면 모바일 쪽을 놓친다 */
	/* 버튼 자신을 올린다 — 안의 img 만 올리면 버튼 본체는 아무 반응이 없어
	   "눌러도 되는 것"이라는 신호가 약하다. PC 는 화살표 아이콘 하나가
	   곧 버튼이고, 모바일은 알약 안에 화살표가 들어 있어 둘 다 맞는다 */
	#footer .top_btn .a_btn:hover {
		-webkit-transform:translateY(-3px);
		        transform:translateY(-3px);
	}
	/* 모바일 TOP 은 배경이 #08F 알약이다 — 헤더 버튼과 같은 색으로 눌린다 */
	#footer > .right_quick > .top_btn.m_con .a_btn {
		-webkit-transition:background-color 0.28s ease;
		        transition:background-color 0.28s ease;
	}
	#footer > .right_quick > .top_btn.m_con .a_btn:hover {
		background-color:#0957B7;
	}

	/* ── 6. 우측 고정 퀵 버튼 ───────────────────────────────────────────
	   기본이 rgba(0,136,255,0.70) 이라 불투명하게만 올려도 충분히 읽힌다.

	   [왼쪽으로 밀면 안 된다]
	   이 버튼은 화면 오른쪽 끝(right:0)에 붙어 있고 왼쪽만 둥글다
	   (border-radius:20px 0 0 20px). translateX(-4px) 로 밀었더니
	   버튼과 화면 오른쪽 끝 사이에 4px 틈이 생겼다.

	   대신 오른쪽 변을 못 박고 왼쪽으로만 자란다 —
	   transform-origin:right center 로 확대하면 오른쪽 모서리가
	   제자리에 남아 틈이 생길 수 없다. */
	#footer > .right_quick > .btn .a_btn {
		-webkit-transform-origin:right center;
		        transform-origin:right center;
		-webkit-transition:background-color 0.28s ease, -webkit-transform 0.28s ease;
		        transition:background-color 0.28s ease, transform 0.28s ease;
	}
	#footer > .right_quick > .btn .a_btn:hover {
		background-color:rgba(0,136,255,1);
		-webkit-transform:scale(1.05);
		        transform:scale(1.05);
	}
}

/* 모션을 끈 사용자에게는 색만 바뀌고 움직임은 없앤다 —
   "눌러도 되는 것" 이라는 정보는 남기고 움직임만 뺀다 */
@media (prefers-reduced-motion: reduce) {
	#header > .contents_con > .btn_con .a_btn,
	#main_con .a_btn, #footer .a_btn,
	#header > .contents_con > .btn_con .a_btn > img,
	#main_con .a_btn > img, #footer .a_btn > img {
		-webkit-transition:none !important;
		        transition:none !important;
	}
	#main_con .a_btn:hover, #footer .a_btn:hover,
	#main_con .a_btn:hover > img, #footer .a_btn:hover > img,
	#header > .contents_con > .btn_con .a_btn:hover,
	#header > .contents_con > .btn_con .a_btn:hover > img {
		-webkit-transform:none !important;
		        transform:none !important;
	}
}