@charset "utf-8";
/* ============================================================
 * gift_tour.css v1.0.0 — 26년 추석 선물 기획전(91) "따라해보기" 코치마크 투어
 *  · 짝 JS = js/comm/gift_tour.js v1.0.0. plan_gift_v2_pc.jsp / _mo.jsp 에서만 로드.
 *  · 시니어 규격: 본문 16px 하한, 터치 44px, 대비 4.5:1 이상, 이모지 0(도형·숫자만).
 *  · 딤은 "구멍 뚫린 그림자"(box-shadow spread) 하나로 만든다 — 클릭은 막지 않는다
 *    (pointer-events:none) → 투어 중에도 화면을 그대로 쓸 수 있고, 그 행동이 다음 단계로 넘긴다.
 *  · prefers-reduced-motion: 전환·펄스 정지.
 * ============================================================ */

/* ---------- 진입 버튼 은은한 유도(첫 방문만, JS가 .hint 부여) ---------- */
.pgz .gtz-entry{
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	min-height:44px; padding:0 18px; border:1.5px solid #3d6041; border-radius:24px;
	background:#fff; color:#2c4a31; font-size:16px; font-weight:800; line-height:1.2;
	cursor:pointer; text-decoration:none;
}
.pgz .gtz-entry:active{ background:#eef3ec; }
.pgz .gtz-entry.hint{ box-shadow:0 0 0 0 rgba(61,96,65,.45); animation:gtzPulse 2.4s ease-out infinite; }
@keyframes gtzPulse{
	0%{ box-shadow:0 0 0 0 rgba(61,96,65,.42); }
	70%{ box-shadow:0 0 0 10px rgba(61,96,65,0); }
	100%{ box-shadow:0 0 0 0 rgba(61,96,65,0); }
}

/* ---------- 코치마크 오버레이 ---------- */
.gtz{ position:fixed; inset:0; z-index:100000; display:none; pointer-events:none; }
.gtz.show{ display:block; }
.gtz-hole{
	position:fixed; top:0; left:0; width:0; height:0; border-radius:14px;
	box-shadow:0 0 0 9999px rgba(14,18,26,.62), inset 0 0 0 3px #c9a24b;
	transition:top .22s ease, left .22s ease, width .22s ease, height .22s ease;
	pointer-events:none;
}
.gtz-tip{
	position:fixed; left:50%; transform:translateX(-50%);
	width:min(420px, calc(100vw - 28px));
	background:#fff; border:1px solid #e3dcc9; border-radius:16px;
	box-shadow:0 14px 40px rgba(14,18,26,.34);
	padding:16px 18px 14px; pointer-events:auto;
	transition:top .22s ease;
}
.gtz-tip .n{
	display:inline-flex; align-items:center; justify-content:center;
	width:34px; height:34px; border-radius:50%;
	background:#3d6041; color:#fff; font-size:18px; font-weight:800; margin-bottom:8px;
}
.gtz-tip .tx{ margin:0 0 14px; font-size:16.5px; line-height:1.55; color:#232a23; }
.gtz-tip .tx b{ font-weight:800; color:#2c4a31; }
.gtz-tip .bt{ display:flex; gap:8px; }
.gtz-tip .nx{
	flex:1 1 auto; min-height:44px; border:0; border-radius:10px;
	background:#3d6041; color:#fff; font-size:16px; font-weight:800; cursor:pointer;
}
.gtz-tip .nx:active{ background:#2e4a33; }
.gtz-tip .qt{
	flex:0 0 auto; min-height:44px; padding:0 14px; border:1px solid #d7d2c4; border-radius:10px;
	background:#fff; color:#6b6f66; font-size:15px; font-weight:700; cursor:pointer;
}
.gtz-tip .qt:active{ background:#f2efe6; }

/* ---------- 5걸음 요약 오버레이 ---------- */
.gtz-howdim{
	position:fixed; inset:0; z-index:100001; background:rgba(14,18,26,.55);
	opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.gtz-howdim.show{ opacity:1; visibility:visible; }
.gtz-how{
	position:fixed; z-index:100002; left:50%; top:50%; transform:translate(-50%, -46%);
	width:min(460px, calc(100vw - 28px)); max-height:86vh; overflow-y:auto;
	background:#f8f4ea; border:1px solid #e3dcc9; border-radius:18px;
	box-shadow:0 18px 48px rgba(14,18,26,.36); padding:22px 20px 20px;
	opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.gtz-how.show{ opacity:1; visibility:visible; transform:translate(-50%, -50%); }
.gtz-how .x{
	position:absolute; top:8px; right:8px; width:44px; height:44px;
	border:0; background:none; color:#7c8078; font-size:19px; cursor:pointer;
}
.gtz-how .ht{ margin:0 0 4px; font-size:20px; font-weight:800; color:#171f2e; }
.gtz-how .hs{ margin:0 0 16px; font-size:15.5px; line-height:1.5; color:#6b6f66; }
.gtz-how .hl{ list-style:none; margin:0 0 18px; padding:0; }
.gtz-how .hl li{ display:flex; align-items:flex-start; gap:11px; padding:9px 0; border-top:1px solid #e8e2d2; }
.gtz-how .hl li:first-child{ border-top:0; }
.gtz-how .hl .n{
	flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
	width:28px; height:28px; border-radius:50%; background:#3d6041; color:#fff;
	font-size:15px; font-weight:800; margin-top:1px;
}
.gtz-how .hl .t{ font-size:16px; line-height:1.5; color:#232a23; }
.gtz-how .hb{ display:flex; gap:9px; }
.gtz-how .go{
	flex:1 1 auto; min-height:48px; border:0; border-radius:11px;
	background:#3d6041; color:#fff; font-size:16.5px; font-weight:800; cursor:pointer;
}
.gtz-how .go:active{ background:#2e4a33; }
.gtz-how .doc{
	flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
	min-height:48px; padding:0 16px; border:1.5px solid #3d6041; border-radius:11px;
	background:#fff; color:#2c4a31; font-size:16px; font-weight:800; text-decoration:none;
}

@media (min-width:1025px){
	.gtz-tip{ width:440px; }
}
@media (prefers-reduced-motion: reduce){
	.gtz-hole, .gtz-tip, .gtz-how, .gtz-howdim{ transition:none; }
	.pgz .gtz-entry.hint{ animation:none; box-shadow:0 0 0 3px rgba(61,96,65,.22); }
}