/* ── 무료특강 선물 받기 페이지 /?fc_gift=상품ID (2026-10-10) — 휴대폰 먼저. 출력: fc_gift_page_html() ──
 * 진초록 밤하늘 + 반짝이 · 회전하는 빛살 뒤 큰 선물 상자(흔들흔들 → 열리면 뚜껑이 날아감) · 폭죽(fc-gift.js) */
.fc-gift-body { margin: 0 !important; padding: 0 !important; background: #072A1E !important; color: #FFFFFF; }
.fc-gift-body > header, .fc-gift-body .site-header { display: none !important; }
/* 아래에 붙은 선물 버튼을 가리는 떠 있는 요소는 이 페이지에서 숨김 (카톡 상담 · 신청 알림 · 채널톡) */
.fc-gift-body .fire-kakao-float, .fc-gift-body .au-proof, .fc-gift-body #ch-plugin, .fc-gift-body .fc-gift-return { display: none !important; }
.fcg { position: relative; max-width: 520px; min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: 14px 18px 0; box-sizing: border-box; overflow: hidden; overflow: clip; /* clip: 아래 버튼(sticky)이 화면 아래에 붙도록 — hidden 이면 sticky 가 안 먹는다 */ text-align: center; color: #FFFFFF; background: radial-gradient(120% 60% at 50% 18%, #17A673 0%, #0B5C40 38%, #0B3D2C 68%, #072A1E 100%); isolation: isolate; -webkit-tap-highlight-color: transparent; }
.fcg *, .fcg *::before, .fcg *::after { box-sizing: border-box; }
.fcg-logo { position: relative; z-index: 2; display: block; width: max-content; margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.72) !important; text-decoration: none !important; }
/* 진짜 로고 — 흰 미니 칩 (로고 파일의 위아래 여백은 칩 밖으로 잘라 냄) */
.fcg-logo.has-img { display: flex; align-items: center; width: max-content; height: 18px; margin: 0 auto 8px 0; padding: 0 6px; border-radius: 6px; background: #FFFFFF; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); } /* 맨 왼쪽, 작게 */
.fcg-logo.has-img img { display: block; height: 27px; width: auto; max-width: none; }

/* 반짝이 하늘 */
.fcg-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fcg-sky i { position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%; background: #FFE27A; opacity: 0; box-shadow: 0 0 10px #FFE27A; animation: fcg-rise 7s linear infinite; }
.fcg-sky i:nth-child(1) { left: 6%; animation-delay: 0s; }
.fcg-sky i:nth-child(2) { left: 18%; width: 4px; height: 4px; animation-delay: 1.2s; background: #FFFFFF; }
.fcg-sky i:nth-child(3) { left: 30%; animation-delay: 2.6s; }
.fcg-sky i:nth-child(4) { left: 42%; width: 3px; height: 3px; animation-delay: .6s; background: #FFFFFF; }
.fcg-sky i:nth-child(5) { left: 55%; animation-delay: 3.4s; }
.fcg-sky i:nth-child(6) { left: 66%; width: 4px; height: 4px; animation-delay: 1.8s; background: #FF9AA2; box-shadow: 0 0 10px #FF9AA2; }
.fcg-sky i:nth-child(7) { left: 78%; animation-delay: 4.2s; }
.fcg-sky i:nth-child(8) { left: 90%; width: 3px; height: 3px; animation-delay: 2.2s; background: #FFFFFF; }
.fcg-sky i:nth-child(9) { left: 12%; animation-delay: 5s; width: 5px; height: 5px; }
.fcg-sky i:nth-child(10) { left: 48%; animation-delay: 5.8s; background: #9EF0C6; box-shadow: 0 0 10px #9EF0C6; }
.fcg-sky i:nth-child(11) { left: 72%; animation-delay: 6.3s; width: 3px; height: 3px; }
.fcg-sky i:nth-child(12) { left: 95%; animation-delay: 3s; width: 5px; height: 5px; background: #FFFFFF; }
@keyframes fcg-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .9; } 80% { opacity: .7; } 100% { transform: translateY(-105vh) scale(1.1); opacity: 0; } }

.fcg-hero { position: relative; z-index: 1; }
.fcg-chip { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: #FFE27A; }

/* 무대: 빛살 + 빛 + 선물 상자 */
.fcg-stage { position: relative; height: 250px; margin: 6px auto 4px; display: flex; align-items: center; justify-content: center; }
.fcg-rays { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 226, 122, 0.22) 0deg 9deg, rgba(255, 226, 122, 0) 9deg 22deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: fcg-spin 18s linear infinite; }
.fcg-glow { position: absolute; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 233, 150, 0.55) 0%, rgba(255, 233, 150, 0) 70%); animation: fcg-pulse 2.4s ease-in-out infinite; }
@keyframes fcg-spin { to { transform: rotate(360deg); } }
@keyframes fcg-pulse { 0%, 100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.08); opacity: 1; } }

.fcg-box { position: relative; width: 156px; height: 150px; margin-top: 26px; cursor: pointer; animation: fcg-wiggle 2.8s ease-in-out infinite; transform-origin: 50% 100%; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35)); }
.fcg-body { position: absolute; left: 8px; right: 8px; bottom: 0; height: 104px; border-radius: 10px; background: linear-gradient(160deg, #FF7A7F 0%, #F0384F 55%, #C8102E 100%); overflow: hidden; }
.fcg-body::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 45%, transparent 60%); transform: translateX(-120%); animation: fcg-shine 3.2s ease-in-out infinite; }
.fcg-ribbon { position: absolute; left: 50%; top: 0; bottom: 0; width: 28px; margin-left: -14px; background: linear-gradient(90deg, #F5B800, #FFE27A, #F5B800); }
.fcg-lid { position: absolute; left: 0; right: 0; top: 4px; height: 40px; border-radius: 9px; background: linear-gradient(160deg, #FF8A8E 0%, #F24A5E 100%); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12); z-index: 2; transform-origin: 0% 100%; transition: transform .7s cubic-bezier(.2, .9, .3, 1.2); }
.fcg-lid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 30px; margin-left: -15px; background: linear-gradient(90deg, #F5B800, #FFE27A, #F5B800); }
.fcg-bow { position: absolute; left: 50%; top: -30px; width: 0; height: 0; }
.fcg-bow i { position: absolute; top: 0; width: 44px; height: 34px; border: 9px solid #FFD23F; border-radius: 50% 50% 46% 46%; }
.fcg-bow i:first-child { right: 2px; transform: rotate(-24deg); }
.fcg-bow i:last-child { left: 2px; transform: rotate(24deg); }
.fcg-bow::after { content: ""; position: absolute; left: -11px; top: 18px; width: 22px; height: 18px; border-radius: 7px; background: #FFC21A; }
@keyframes fcg-wiggle { 0%, 62%, 100% { transform: rotate(0) translateY(0); } 66% { transform: rotate(-7deg) translateY(-6px); } 71% { transform: rotate(6deg) translateY(-10px); } 76% { transform: rotate(-4deg) translateY(-4px); } 81% { transform: rotate(2deg) translateY(0); } }
@keyframes fcg-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.fcg-spark { position: absolute; color: #FFE27A; font-size: 18px; text-shadow: 0 0 10px rgba(255, 226, 122, 0.9); animation: fcg-twinkle 1.8s ease-in-out infinite; }
.fcg-spark.s1 { left: 16%; top: 22%; }
.fcg-spark.s2 { right: 18%; top: 14%; font-size: 14px; animation-delay: .4s; }
.fcg-spark.s3 { right: 10%; top: 58%; animation-delay: .9s; }
.fcg-spark.s4 { left: 10%; top: 64%; font-size: 13px; animation-delay: 1.2s; }
.fcg-spark.s5 { left: 50%; top: 2%; font-size: 15px; animation-delay: .6s; }
@keyframes fcg-twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .2; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
/* 열림 — 뚜껑이 뒤로 젖혀지고, 상자 안에서 빛기둥 + 선물이 튀어나와 둥실둥실 */
.fcg-beam { position: absolute; left: 50%; bottom: 96px; width: 150px; height: 0; margin-left: -75px; background: linear-gradient(to top, rgba(255, 246, 200, 0.95), rgba(255, 246, 200, 0)); clip-path: polygon(28% 100%, 72% 100%, 100% 0, 0 0); filter: blur(1.5px); opacity: 0; z-index: 0; transition: height .6s ease .15s, opacity .4s ease .15s; pointer-events: none; }
.fcg-inside { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(#7A0F22, #B3172F); opacity: 0; transition: opacity .3s ease .1s; }
.fcg-pop { position: absolute; left: 50%; top: 40px; width: 0; height: 0; z-index: 3; pointer-events: none; }
.fcg-pop i { position: absolute; left: -16px; top: 0; font-style: normal; font-size: 30px; line-height: 1; opacity: 0; transform: translate(0, 30px) scale(.3); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); }
.fcg-pop i:nth-child(1) { --x: -116px; --y: -6px; --d: .25s; }
.fcg-pop i:nth-child(2) { --x: -62px; --y: -110px; --d: .35s; font-size: 34px; }
.fcg-pop i:nth-child(3) { --x: 58px; --y: -104px; --d: .45s; }
.fcg-pop i:nth-child(4) { --x: 110px; --y: -12px; --d: .55s; font-size: 24px; }
.fcg.is-opened .fcg-stage { height: 280px; transition: height .4s ease; }
.fcg.is-opened .fcg-box { margin-top: 72px; animation: fcg-jump .6s cubic-bezier(.2, .9, .3, 1.4) both; transition: margin-top .4s ease; }
.fcg.is-opened .fcg-lid { transform: translate(-6px, -40px) rotate(-13deg); } /* 뚜껑이 상자 위로 살짝 떠오름 */
.fcg.is-opened .fcg-beam { height: 170px; opacity: 1; }
.fcg.is-opened .fcg-inside { opacity: 1; }
.fcg.is-opened .fcg-pop i { animation: fcg-popout .7s cubic-bezier(.2, .9, .3, 1.4) var(--d) forwards, fcg-floaty 2.4s ease-in-out calc(var(--d) + .7s) infinite; }
.fcg.is-opened .fcg-glow { background: radial-gradient(circle, rgba(255, 246, 200, 0.9) 0%, rgba(255, 233, 150, 0) 72%); }
@keyframes fcg-popout { to { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); } }
@keyframes fcg-floaty { 0%, 100% { margin-top: 0; } 50% { margin-top: -7px; } }
/* 마감 */
.fcg.is-closed .fcg-box { animation: none; filter: grayscale(.85) drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35)); }
.fcg.is-closed .fcg-rays, .fcg.is-closed .fcg-glow, .fcg.is-closed .fcg-spark { opacity: .2; }
.fcg-btn.fcg-btn-home { background: rgba(255, 255, 255, 0.14); color: #FFFFFF !important; animation: none; }
.fcg-btn.fcg-btn-wait { background: rgba(255, 255, 255, 0.14); color: #FFFFFF !important; animation: none; cursor: default; }
.fcg-btn.fcg-btn-wait::after { display: none; }
.fcg-btn.fcg-btn-wait:active { transform: none; }

/* 선물 마감 카운트다운 — 실제 마감 시각(상품 편집 '선물 받기 마감') 그대로 */
.fcg-timer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 12px; padding: 11px 14px 15px; border-radius: 14px; background: rgba(229, 36, 59, 0.16); border: 1px solid rgba(255, 120, 130, 0.38); overflow: hidden; }
.fcg-timer-l { font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, 0.88); }
.fcg-timer-t { font-size: 22px; font-weight: 900; letter-spacing: 0.02em; color: #FFE27A; font-variant-numeric: tabular-nums; }
.fcg-gauge { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, 0.12); }
.fcg-gauge i { display: block; height: 100%; background: linear-gradient(90deg, #FF5A5F, #FFC62E); transition: width 1s linear; }
.fcg-timer.is-hurry { animation: fcg-hurry 1s ease-in-out infinite; }
.fcg-timer.is-hurry .fcg-timer-t { color: #FF8A8E; }
@keyframes fcg-hurry { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 36, 59, 0); } 50% { box-shadow: 0 0 0 4px rgba(229, 36, 59, 0.35); } }
/* 버튼 아래 줄어드는 게이지 (선물 열기 버튼 제외) */
.fcg-btn-gauge { position: absolute; left: 0; bottom: 0; height: 5px; background: rgba(25, 25, 25, 0.38); transition: width 1s linear; pointer-events: none; }
@keyframes fcg-jump { 0% { transform: scale(1); } 40% { transform: scale(1.12, .9); } 100% { transform: scale(1); } }

.fcg-h { margin: 6px 0 4px !important; font-size: 27px !important; font-weight: 900 !important; line-height: 1.3 !important; letter-spacing: -0.03em; color: #FFFFFF !important; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); word-break: keep-all; animation: fcg-up .6s .15s ease both; }
.fcg-sub { margin: 0 0 14px !important; font-size: 15px !important; font-weight: 700; color: rgba(255, 255, 255, 0.82) !important; word-break: keep-all; animation: fcg-up .6s .25s ease both; }
@keyframes fcg-up { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* 순서 1·2·3 */
.fcg-steps { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 0 6px !important; padding: 0 !important; list-style: none !important; }
.fcg-steps li { display: flex; align-items: baseline; gap: 5px; margin: 0 !important; font-size: 12.5px; font-weight: 800; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.fcg-steps li + li::before { content: "›"; margin-right: 3px; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.35); }
.fcg-steps b { font-size: 15px; font-weight: 900; color: inherit; font-variant-numeric: tabular-nums; }
.fcg-steps li.is-done { color: #FFE27A; }
.fcg-steps li.is-now { color: #FFFFFF; }

/* 버튼 — 화면 아래에 붙어 있음 */
.fcg-cta { position: sticky; bottom: 0; z-index: 3; margin: 0 -18px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, #072A1E 62%, rgba(7, 42, 30, 0)); }
.fcg-btn { position: relative; display: flex; white-space: nowrap; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 60px; padding: 0 18px; border-radius: 18px; font-size: 17px; font-weight: 900; letter-spacing: -0.02em; text-decoration: none !important; overflow: hidden; transition: transform .12s ease; animation: fcg-ring 1.8s ease-out infinite; }
.fcg-btn:active { transform: scale(.97); }
.fcg-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); animation: fcg-shine 2.6s ease-in-out infinite; }
.fcg-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.fcg-btn i { font-style: normal; transition: transform .15s ease; }
.fcg-btn:hover i { transform: translateX(3px); }
.fcg-btn-kakao { background: #FEE500; color: #191919 !important; }
.fcg-btn-gift { background: linear-gradient(135deg, #FFF1A8 0%, #FFC62E 100%); color: #3A2A00 !important; }
.fcg-btn-open { background: linear-gradient(135deg, #FF9A3D 0%, #E5243B 100%); color: #FFFFFF !important; font-size: 18px; }
@keyframes fcg-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 226, 122, 0.55), 0 10px 26px rgba(0, 0, 0, 0.3); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255, 226, 122, 0), 0 10px 26px rgba(0, 0, 0, 0.3); } }
.fcg-staff { position: relative; z-index: 2; margin: 0 0 6px !important; padding: 7px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px dashed rgba(255, 226, 122, 0.6); color: #FFE27A !important; font-size: 12.5px !important; font-weight: 800; line-height: 1.45 !important; word-break: keep-all; }
.fcg-alt { margin: 10px 0 0 !important; font-size: 13px !important; color: rgba(255, 255, 255, 0.75) !important; word-break: keep-all; }
.fcg-alt a { color: #FFFFFF !important; font-weight: 800; text-decoration: underline !important; text-underline-offset: 3px; }
.fcg-cta:last-child { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }

/* 폭죽 (fc-gift.js 가 조각을 만들어 날림) */
.fcg-confetti { position: fixed; inset: 0; z-index: 100001; /* 후기 창(100000) 위에서 터지게 */ pointer-events: none; overflow: hidden; }
.fcg-confetti i { position: absolute; display: block; will-change: transform, opacity; }

@media (max-width: 360px) {
	.fcg-h { font-size: 24px !important; }
	.fcg-stage { height: 220px; }
	.fcg-btn { font-size: 15px; gap: 6px; padding: 0 12px; }
	.fcg-steps { gap: 5px; }
	.fcg-steps li { font-size: 11.5px; gap: 4px; }
	.fcg-steps li + li::before { margin-right: 1px; }
}
@media (prefers-reduced-motion: reduce) {
	.fcg *, .fcg *::before, .fcg *::after { animation: none !important; transition: none !important; }
	.fcg-sky { display: none; }
}