/* 261021_ 전 상품 하단 고정 구매 바 (offer-bar.js). 구조·크기는 전 상품 고정이고, 상품별로는 아래 변수만 바꾼다.
   랜딩마다 #id strong / a / small 같은 전역 글자 규칙이 있어, 고정해야 하는 글자·색만 !important 로 막는다.
   기준: Figma 무료결과페이지_261021 · 16_하단 CTA, 구매 유도 bubble
   261028_ 형태 개편: 단색 반투명 바 + 진행 바 + [타이머 | 버튼] + 버튼 위 구매 유도 말풍선 */
.ob{--ob-fade:#000;--ob-bar-bg:rgba(26,5,5,.75);--ob-bar-progress:rgba(224,36,43,.45);--ob-deal-bg:var(--ob-btn);--ob-deal-tail:#F71E2C;--ob-btn:linear-gradient(90deg,#251212 0%,#CE1821 48%,#F71E2C 100%);--ob-btn-text:#fff;--ob-btn-border:transparent;--ob-btn-glow:rgba(247,31,43,.2);--ob-btn-font:600 16px/1.35 var(--hw-sans,'Noto Sans KR',sans-serif);--ob-time:#ffee00;
  position:fixed;left:0;right:0;bottom:0;z-index:30;box-sizing:border-box;width:min(100%,450px);margin:0 auto;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--ob-bar-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.ob>*{pointer-events:auto}
/* 261027_ 하단 바 아래 채움: 시각 뷰포트 보정(JS)을 없애고 bottom:0 에 고정해 스크롤 중 떨림을 막는다. 아래쪽은 불투명 채움이 안전영역·브라우저 하단바 뒤까지 덮는다 */
.ob::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:100vh;background:var(--ob-fade);pointer-events:none}
/* 261028_ 진행 바 */
.ob-progress{position:absolute;inset:0;transform-origin:left;background:var(--ob-bar-progress);pointer-events:none}
.ob-spacer{height:calc(var(--ob-height,calc(68px + env(safe-area-inset-bottom))) + 40px)}
/* 261028_ 타이머·버튼 */
.ob-row{position:relative;display:flex;align-items:center;gap:4px}
.ob-clock{flex:none;box-sizing:border-box;width:112px;margin:0;text-align:center}
.ob-clock small{display:block;margin:0;white-space:nowrap;letter-spacing:-.04em!important;font:600 11px/1.5 var(--hw-sans,'Noto Sans KR',sans-serif)!important;color:#fff!important}
.ob-clock strong{display:block;font:700 22px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;color:var(--ob-time)!important;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.ob-btnwrap{position:relative;display:flex;flex:1;min-width:0}
.ob .ob-cta{position:relative;overflow:hidden;isolation:isolate;transform:translateZ(0);box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;width:auto;height:44px;min-height:0;margin:0;padding:0 12px;border:1px solid var(--ob-btn-border);border-radius:8px;background:var(--ob-btn)!important;background-origin:border-box!important;color:var(--ob-btn-text)!important;box-shadow:0 0 20px var(--ob-btn-glow);font:var(--ob-btn-font)!important;letter-spacing:-.03em;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}
.ob .ob-cta.is-off{background:#4a4a4a!important;color:#fff!important;border-color:transparent;box-shadow:none;cursor:not-allowed}
.ob .ob-cta.is-off::before{display:none}
.ob .ob-cta::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:translateX(-160%) skewX(-20deg);animation:ob-shine 3.6s ease-in-out infinite;will-change:transform;pointer-events:none}
@keyframes ob-shine{0%{transform:translateX(-160%) skewX(-20deg)}30%,100%{transform:translateX(380%) skewX(-20deg)}}
/* 261028_ 구매 유도 말풍선 */
.ob-deal{position:absolute;left:50%;top:-40px;transform:translateX(-50%);box-sizing:border-box;padding:6px 16px;border:1px solid var(--ob-deal-tail);border-radius:9999px;background:var(--ob-deal-bg);color:var(--ob-btn-text)!important;font:700 12px/1.5 var(--hw-sans,'Noto Sans KR',sans-serif)!important;letter-spacing:-.02em;white-space:nowrap;text-decoration:none;cursor:pointer;animation:ob-bounce 1s infinite;transition:opacity .7s ease-in-out}
.ob-deal.is-out{opacity:0}
.ob-deal::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top:8px solid var(--ob-deal-tail);border-bottom:0}
.ob-deal[hidden],.ob-btnwrap:has(.ob-cta.is-off) .ob-deal{display:none}
@keyframes ob-bounce{0%,100%{transform:translate(-50%,-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translate(-50%,0);animation-timing-function:cubic-bezier(0,0,.2,1)}}
html:has(dialog[open]) .ob,body:has(:is(input,select,textarea):focus) .ob{display:none!important}
@media(max-width:360px){.ob-clock{width:100px}.ob-clock small{font-size:10px!important}.ob-clock strong{font-size:20px!important}}

/* 상품별 톤 (색만. 구조는 위 공통) */
.ob[data-ob-product="love"]{--ob-fade:#070200;--ob-btn-font:400 19px/1.5 'MapoAgape','Noto Serif KR',serif}
.ob[data-ob-product="traditional"]{--ob-fade:#0b0d10;--ob-bar-bg:rgba(11,13,16,.75);--ob-bar-progress:rgba(213,54,82,.45);--ob-deal-tail:#b32649;--ob-btn:linear-gradient(90deg,#d53652,#b32649);--ob-btn-glow:rgba(213,54,82,.25)}
.ob[data-ob-product="horoscope"]{--ob-fade:#0b0a14;--ob-bar-bg:rgba(11,10,20,.75);--ob-bar-progress:rgba(233,167,176,.45);--ob-deal-tail:#201523;--ob-btn:linear-gradient(90deg,#3b1f2e,#201523);--ob-btn-border:#e9a7b055;--ob-btn-text:#ffe0e9;--ob-btn-glow:rgba(233,167,176,.18)}
.ob[data-ob-product="reunion"]{--ob-fade:#100b14;--ob-bar-bg:rgba(16,11,20,.75);--ob-bar-progress:rgba(184,73,109,.45);--ob-deal-tail:#9d4669;--ob-btn:linear-gradient(90deg,#b8496d,#9d4669);--ob-btn-border:#da91b0;--ob-btn-glow:rgba(184,73,109,.25)}
.ob[data-ob-product="newyear"]{--ob-fade:#12100d;--ob-bar-bg:rgba(18,16,13,.75);--ob-bar-progress:rgba(142,99,53,.45);--ob-deal-tail:#936530;--ob-btn:linear-gradient(90deg,#8e6335,#936530);--ob-btn-border:#d5ad71;--ob-btn-text:#fff7e8;--ob-btn-glow:rgba(213,173,113,.2)}
.ob[data-ob-product="csat"]{--ob-fade:#080809;--ob-bar-bg:rgba(8,8,9,.75);--ob-bar-progress:rgba(233,241,141,.45);--ob-deal-tail:#c7d75f;--ob-btn:linear-gradient(90deg,#e9f18d,#c7d75f);--ob-btn-text:#171c0a;--ob-btn-glow:rgba(229,239,125,.2)}
.ob[data-ob-product="employment"]{--ob-fade:#071713;--ob-bar-bg:rgba(7,23,19,.75);--ob-bar-progress:rgba(195,244,219,.45);--ob-deal-tail:#89e3bc;--ob-btn:linear-gradient(90deg,#c3f4db,#89e3bc);--ob-btn-text:#113328;--ob-btn-glow:rgba(137,227,188,.2)}
.ob .ob-cta small{display:block;font-size:11px;line-height:1.3;opacity:.8}