@charset "UTF-8";
/* ============================================================
   파일쿠키 — 할로윈 시즌 상단 레이어 (2026 할로윈 한정)
   기존 /renewal/css/topbar.css 뒤에 추가 로드.
   전부 .fkr-halloween / .fkr-pumpkin 스코프 — 기존 규칙을 덮어쓰지 않음.
   시즌 종료 시 이 파일 링크 1줄과 클래스만 제거하면 원상복구.

   씬 구조 (여름·가을·추석과 동일한 규칙)
     PC 띠   : 하늘 46u + 밭 12u (viewBox 0 0 1520 58 · SVG 3장)
     모바일 : 하늘 35u + 밭 6u  (viewBox 0 -10 390 51 · 상단바 높이 무변경)
     좌우 씬 : 좌우 끝 300px 고정 SVG + 전폭 CSS 배경 (.fkr-pumpkin)

   [핸드오프 밖 보강 — 이전 시즌 운영에서 얻은 것, 지우지 말 것] (2026-10-12 이식)
     ① 모바일 호스트 2곳 셀렉터 쌍 (#fkrTopUniM · .fkrm-top)      — 가을·추석판
     ② 모바일 좁은 폭(≤389px) 시즌 문구 축소                         — 가을·추석판
     ③ 모바일 넓은 폭(≥520px) 씬 대신 하늘+밭 띠                     — 여름·가을·추석판
     ④ 좌우 씬 svg overflow:visible (viewBox 경계 절단 방지)          — 추석판
     ⑤ 전폭 덩굴(::after) 윗단 페이드 (가로 절단선 방지)              — 추석판
     ⑥ 좌우 씬 폭 게이트 1372 → 1150 (PO 결정 2026-09-16)            — 추석·한글날판
     모바일 viewBox 높이 보정은 halloween/band_m.jsp 쪽 (실측 밴드 높이)
   ============================================================ */

/* ── PC 상단 띠 ─────────────────────────────────────────── */
#fkrTopUnify.fkr-halloween .fkr-utilbar{
  position: relative;
  background: linear-gradient(180deg,#ffe6c8 0%,#ffb069 100%);
  overflow: hidden;
}
#fkrTopUnify.fkr-halloween .fkr-utilbar-in{ position: relative; z-index: 2; }

/* 씬 레이어 — 절대배치로 겹쳐 쌓음. 1장에 몰면(요소 90개 초과) 렌더가 급격히 느려진다 */
#fkrTopUnify.fkr-halloween .fkr-sc{
  position:absolute; inset:0; z-index:0; pointer-events:none; line-height:0;
  width:100%; height:100%; display:block;
}

/* 검색 알약 — 배경이 주황이 되어 기존 #f5f7fb 가 묻힘 → 흰색 + 할로윈톤 테두리 */
#fkrTopUnify.fkr-halloween .fkr-search{
  background:#ffffff; border-color:#f5c9a0;
  box-shadow:0 1px 3px rgba(120,60,20,.07);
}
#fkrTopUnify.fkr-halloween .fkr-search input.ph{ color:#5c3418; }
#fkrTopUnify.fkr-halloween .fkr-search input.ph::placeholder{ color:#7a3e14; opacity:1; font-weight:600; }
#fkrTopUnify.fkr-halloween .fkr-util-txt,
#fkrTopUnify.fkr-halloween .fkr-util-my{ color:#5a3220; }

/* 다크 (보랏빛 밤) */
html[data-dark=true] #fkrTopUnify.fkr-halloween .fkr-utilbar{
  background: linear-gradient(180deg,#1a1230 0%,#4a2350 100%);
}
html[data-dark=true] #fkrTopUnify.fkr-halloween .fkr-search{
  background:#2a1e38; border-color:#4e3a62; box-shadow:none;
}
html[data-dark=true] #fkrTopUnify.fkr-halloween .fkr-search input.ph{ color:#efe4f5; }
html[data-dark=true] #fkrTopUnify.fkr-halloween .fkr-search input.ph::placeholder{ color:#ffb340; }
html[data-dark=true] #fkrTopUnify.fkr-halloween .fkr-util-txt,
html[data-dark=true] #fkrTopUnify.fkr-halloween .fkr-util-my{ color:#efe4f5; }

/* 라이트/다크 씬 교체 */
#fkrTopUnify.fkr-halloween .fkr-sc-dk{ display:none; }
html[data-dark=true] #fkrTopUnify.fkr-halloween .fkr-sc-lt{ display:none; }
html[data-dark=true] #fkrTopUnify.fkr-halloween .fkr-sc-dk{ display:block; }


/* ── 모바일 상단 띠 ─────────────────────────────────────── */
/* 상단바 높이 무변경. 소품은 컨트롤 뒤에 그대로 깔리며 일부 가려진다.
   ⚠ viewBox 높이가 실제 밴드 높이와 같아야 한다 — 다르면 slice 가 균일 확대를 걸어
      좌우가 잘린다 (실제로 겪은 버그 — halloween/band_m.jsp 주석) */
/* [핸드오프 밖 보강 ①] 호스트 2곳 — #fkrTopUniM (실서비스 mobile/header.jsp 주입분) ·
   .fkrm-top (리뉴얼 m 페이지 — 쿠키오븐 모바일 등). 같은 밴드 조각(halloween/band_m.jsp)을 쓰므로
   셀렉터도 쌍으로 유지. 핸드오프는 #fkrTopUniM 만 적었는데, .fkrm-top 을 빼면 그쪽은 씬만 들어가고
   배치 CSS 가 없어 레이아웃이 깨진다. 가을·추석판과 같은 처리 */
#fkrTopUniM.fkr-halloween, .fkrm-top.fkr-halloween{ position:relative; background:transparent; overflow:hidden; }
#fkrTopUniM.fkr-halloween > .fkrm-scene, .fkrm-top.fkr-halloween > .fkrm-scene{
  position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none;
}
#fkrTopUniM.fkr-halloween > *:not(.fkrm-scene), .fkrm-top.fkr-halloween > *:not(.fkrm-scene){ position:relative; z-index:1; }

#fkrTopUniM.fkr-halloween .fkrm-uni-search, .fkrm-top.fkr-halloween .fkrm-search{ background:#ffffff; border-color:#f5c9a0; }
#fkrTopUniM.fkr-halloween .fkrm-uni-search input::placeholder,
.fkrm-top.fkr-halloween .fkrm-search input::placeholder{
  color:#7a3e14; opacity:1; font-weight:600; font-size:10.5px; letter-spacing:-.04em;
}
/* 소품(고목·묘비·잭오랜턴)이 뒤에 깔려도 4.5:1 이상 유지 */
#fkrTopUniM.fkr-halloween .fkrm-uni-menu, .fkrm-top.fkr-halloween .fkrm-menu{ color:#5c3418; }

/* [핸드오프 밖 보강 ②] 좁은 폭 — 핸드오프 기본값(10.5px)은 390px 이상에서만 문구가 끝까지 들어간다
   (가을판 실측: input 360px→108px / 375px→123px). 320px(input 68px)은 문구 자체를 줄여야 하는 한계 */
@media (max-width:389px){
  #fkrTopUniM.fkr-halloween .fkrm-uni-search input::placeholder,
  .fkrm-top.fkr-halloween .fkrm-search input::placeholder{ font-size:9px; letter-spacing:-.06em; }
}

html[data-dark=true] #fkrTopUniM.fkr-halloween, html[data-dark=true] .fkrm-top.fkr-halloween{ background:transparent; }
html[data-dark=true] #fkrTopUniM.fkr-halloween .fkrm-uni-search, html[data-dark=true] .fkrm-top.fkr-halloween .fkrm-search{ background:#2a1e38; border-color:#4e3a62; }
html[data-dark=true] #fkrTopUniM.fkr-halloween .fkrm-uni-search input::placeholder, html[data-dark=true] .fkrm-top.fkr-halloween .fkrm-search input::placeholder{ color:#ffb340; }
html[data-dark=true] #fkrTopUniM.fkr-halloween .fkrm-uni-menu, html[data-dark=true] .fkrm-top.fkr-halloween .fkrm-menu{ color:#c9b3d9; }

#fkrTopUniM.fkr-halloween .fkrm-scene-dk, .fkrm-top.fkr-halloween .fkrm-scene-dk{ display:none; }
html[data-dark=true] #fkrTopUniM.fkr-halloween .fkrm-scene-lt, html[data-dark=true] .fkrm-top.fkr-halloween .fkrm-scene-lt{ display:none; }
html[data-dark=true] #fkrTopUniM.fkr-halloween .fkrm-scene-dk, html[data-dark=true] .fkrm-top.fkr-halloween .fkrm-scene-dk{ display:block; }

/* [핸드오프 밖 보강 ③] 넓은 화면 — 씬 SVG 는 폰 폭(320~480px) 기준이라 PC 폭으로 열면
   slice 크롭이 아래쪽(밭 띠)만 남겨 민무늬 바가 된다 (2026-08-12 여름판에서 실확인).
   520px 이상에서는 씬을 내리고 하늘 그라디언트 + 밭 띠로 대신한다.
   밭 6px = 모바일 씬의 밭 스트립(하늘 35u + 밭 6u)과 같은 두께 · 색은 할로윈 토큰 */
@media (min-width:520px){
  #fkrTopUniM.fkr-halloween .fkrm-scene, .fkrm-top.fkr-halloween .fkrm-scene,
  html[data-dark=true] #fkrTopUniM.fkr-halloween .fkrm-scene-lt, html[data-dark=true] .fkrm-top.fkr-halloween .fkrm-scene-lt,
  html[data-dark=true] #fkrTopUniM.fkr-halloween .fkrm-scene-dk, html[data-dark=true] .fkrm-top.fkr-halloween .fkrm-scene-dk{ display:none; }
  #fkrTopUniM.fkr-halloween, .fkrm-top.fkr-halloween{ background:linear-gradient(180deg,#ffe6c8 0%,#ffd3a4 100%); }
  #fkrTopUniM.fkr-halloween::after, .fkrm-top.fkr-halloween::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:6px; pointer-events:none;
    background:linear-gradient(180deg,#c49a70 0 1px,#8a5a3b 1px 4px,#5a3a26 4px 6px);
  }
  html[data-dark=true] #fkrTopUniM.fkr-halloween, html[data-dark=true] .fkrm-top.fkr-halloween{ background:linear-gradient(180deg,#1a1230 0%,#4a2350 100%); }
  html[data-dark=true] #fkrTopUniM.fkr-halloween::after, html[data-dark=true] .fkrm-top.fkr-halloween::after{
    background:linear-gradient(180deg,#3a2a48 0 1px,#2e1e2a 1px 4px,#221626 4px 6px);
  }
}


/* ── PC 좌우 배경 씬 ────────────────────────────────────── */
/* ── PC 좌우 배경 씬 (본문 1132px 바깥 여백) ─────────────────
   [구조] 전체폭 SVG 1장 → 좌우 끝 고정 SVG + 전폭 CSS 배경.
   본문은 1132px 고정이라 화면이 넓어지면 씬만 커져 소품과 본문 사이가 벌어진다
   (1920px 에서 149px, 2560px 에서 387px). 소품을 좌우 끝에 300px 로 못박고
   하늘·능선·지면·풀을 전폭 CSS 로 깔아 벌어질 곳 자체를 없앤다. = 가을·추석판과 동일 구조.

   z-index 는 반드시 음수 — 0 이면 positioned 라서 일반 흐름의 본문(카드 배경·텍스트)
   위에 그려져 섹션을 통째로 가린다 (2026-08-12 여름판에서 실시간 인기 카드가
   실제로 사라짐. pointer-events:none 이라 elementFromPoint 검사로는 안 잡히니
   눈으로 확인할 것). -1 이면 본문 박스들 뒤 + 페이지 배경 앞 = 정확히 배경 자리. */
.fkr-pumpkin{
  position:absolute; left:0; right:0; height:620px; z-index:-1;
  overflow:hidden; pointer-events:none;
  /* 능선은 부모 배경 레이어로 둔다 — 배경은 자식·의사요소보다 항상 먼저 그려지므로
     밭(::before)이 능선 아랫단을 덮어 준다. 좌우 씬의 그리기 순서와 같다. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='80' viewBox='0 0 480 80' preserveAspectRatio='none'%3E%3Cpath d='M0 38C90 14 170 8 250 24 330 40 410 32 480 38V80H0Z' fill='%23d49a72'/%3E%3Cpath d='M0 58C70 45 150 39 250 51 350 63 420 55 480 58V80H0Z' fill='%23b07a52'/%3E%3C/svg%3E") repeat-x 0 216px / 480px 80px,
    linear-gradient(180deg,#ffd3a4 0%,#ffe9d2 50%,#f0f0f0 100%);
}
/* [가운데 빈 배경 보정] 좌우 씬은 폭 300px 고정이라 1920px 화면에서 가운데 1,313px 이
   맨 배경이 된다. 게다가 하늘이 밭으로 y=296 에서 한 번에 꺾여 그 구간에 색만 끊긴
   가로줄이 보인다 — 좌우 씬 안에는 그 경계를 덮는 능선(y216~296)이 있는데 가운데엔 없기
   때문이다. 라이트·다크 모두 같은 증상.
     ① 전폭 능선을 깔아 좌우 씬의 능선과 이어 준다 (480px 주기 타일, 부모 배경 레이어)
     ② ::before(밭)를 36px 올려 투명에서 페이드시켜 경계선 자체를 없앤다
     ③ ::after 로 호박 덩굴·낙엽을 전폭에 깐다 — 좌우 씬 안에만 있던 소재라 가운데
        밭이 민무늬였다. 이게 "황무지" 인상을 막는 핵심이다
   그리는 순서 = 하늘·능선(부모 배경) → 밭(z0) → 덩굴·낙엽(z1) → 좌우 씬(span, z2).
   순서가 어긋나면 능선이 밭 위로 떠서 언덕이 밭에 얹힌 것처럼 보인다. */
.fkr-pumpkin::before{                     /* 전폭 밭 (좌우 SVG 내부와 동일 값) */
  content:""; position:absolute; left:0; right:0; top:252px; bottom:0; z-index:0;
  background: linear-gradient(180deg,rgba(138,90,59,0) 0,#8a5a3b 44px,#c49a70 40%,#f0f0f0 100%);
}
.fkr-pumpkin::after{                      /* 전폭 덩굴 — 호박 덩굴(240×150) + 낙엽(90×110) */
  content:""; position:absolute; left:0; right:0; top:296px; height:300px; z-index:1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150' viewBox='0 0 240 150'%3E%3Cpath d='M0 34Q70 22 130 40T240 44' stroke='%235c6b30' stroke-width='3' fill='none' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M0 118Q80 104 150 124T240 120' stroke='%235c6b30' stroke-width='3' fill='none' stroke-linecap='round' opacity='.38'/%3E%3Cg fill='%236b7a3a' opacity='.5'%3E%3Cpath d='M46 30q-10-12-2-22 10 8 2 22z'/%3E%3Cpath d='M156 42q10-12 2-22-10 8-2 22z'/%3E%3Cpath d='M96 114q-9-11-2-20 9 7 2 20z'/%3E%3Cpath d='M196 122q9-11 2-20-9 7-2 20z'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 240px 150px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='110' viewBox='0 0 90 110'%3E%3Cg fill='%23e0512f' opacity='.36'%3E%3Cpath d='M18 26l3-8 3 8 8-2-6 6 6 6-8-2-3 8-3-8-8 2 6-6-6-6z'/%3E%3Cpath d='M64 74l2.4-6.4 2.4 6.4 6.4-1.6-4.8 4.8 4.8 4.8-6.4-1.6-2.4 6.4-2.4-6.4-6.4 1.6 4.8-4.8-4.8-4.8z'/%3E%3C/g%3E%3Cg fill='%23f0703a' opacity='.28'%3E%3Cpath d='M44 48l2.4-6.4 2.4 6.4 6.4-1.6-4.8 4.8 4.8 4.8-6.4-1.6-2.4 6.4-2.4-6.4-6.4 1.6 4.8-4.8-4.8-4.8z'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 90px 110px;
  /* 패턴 위·아랫단을 모두 페이드 (가로 절단선 방지).
     [핸드오프 밖 보강 ⑤] 원안은 아랫단만 페이드해 top:296px 에서 덩굴이 한 줄로 갑자기
     시작된다 — 추석판에서 좌우 여백 전체에 가로 절단선으로 보였던 자리(PO 지적)와 같다 */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 62%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 62%,transparent 100%);
}
/* 씬이 -1(배경 자리)로 내려가면 전폭 본문 래퍼(.fkr-body, #f0f0f0 불투명)가 씬을
   가린다. 씬이 있는 페이지에서만 래퍼를 투명하게 하고 그 몫의 바탕색을 body 로
   옮긴다 — 래퍼가 비쳐도 body 가 같은 색이라 씬 바깥 영역은 이전과 동일하다.
   :has 미지원 브라우저 = 여백 씬만 안 보이고 나머지는 평소와 같음 (안전한 퇴행) */
body:has(.fkr-pumpkin){ background:#f0f0f0; }
html[data-dark=true] body:has(.fkr-pumpkin){ background:#1a1b1c; }
body:has(.fkr-pumpkin) > .fkr-body{ background:transparent; }

/* 좌우 씬 — 폭 300px 고정 SVG 를 양끝에 못박는다. 한쪽이 여러 장인 것은
   한 SVG 요소 수 90개 제한 때문이다 (넘으면 렌더가 급격히 느려진다).
   문서 순서대로 아래→위로 쌓이므로 순서를 유지할 것 — 합치지 말 것.
   ⚠ <svg> 에 인라인 style(특히 display:block)을 넣지 말 것 — 아래 display:none 을
     이겨서 라이트·다크 두 씬이 동시에 표시된다. 배치는 전부 이 CSS 가 담당한다. */
.fkr-pumpkin > span{ position:absolute; top:0; line-height:0; z-index:2; }
.fkr-pumpkin > span.l{ left:0; }
.fkr-pumpkin > span.r{ right:0; }
.fkr-pumpkin .dk{ display:none; }
/* [핸드오프 밖 보강 ④] <svg> 는 기본 overflow:hidden 이라 viewBox(0~300) 를 넘는 도형이
   경계에서 직선으로 잘린다 (추석판 실측: 단풍잎 6px · 앞능선 30px). 씬 자체를 넘는 부분은
   부모 .fkr-pumpkin 의 overflow:hidden 이 화면 경계에서 잘라 주므로 범위는 안 커진다 */
.fkr-pumpkin > span > svg{ overflow:visible; }

/* 다크 — 능선 + 달빛 워시 + 보랏빛 밤하늘.
   [달빛 끊김 보정] 워시는 원래 우측 씬 SVG 안의 ellipse(rx560 ry420) 였는데 그 SVG 는
   폭이 300px 이라 워시가 씬 경계에서 네모나게 잘렸다 — 화면에 세로 단차로 보였다.
   워시를 여기(전폭 부모 배경)로 옮겨 끊김 없이 잇는다. 옮겼으므로 SVG 쪽 ellipse 는
   제거했다(halloween/pumpkin_pc.jsp) — 남겨 두면 겹쳐서 씬 안쪽만 밝아져 반대 방향 단차가 난다.
   좌표 = 달 중심(1520 기준 cx1400 → 오른쪽에서 120px, cy180).
   ※ 잭오랜턴 발광은 씬 로컬이라 SVG 안 radial-gradient 로 남겨 둔다 (반경이 작아 안 잘림). */
html[data-dark=true] .fkr-pumpkin{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='80' viewBox='0 0 480 80' preserveAspectRatio='none'%3E%3Cpath d='M0 38C90 14 170 8 250 24 330 40 410 32 480 38V80H0Z' fill='%233a2a48'/%3E%3Cpath d='M0 58C70 45 150 39 250 51 350 63 420 55 480 58V80H0Z' fill='%232a1c36'/%3E%3C/svg%3E") repeat-x 0 216px / 480px 80px,
    radial-gradient(560px 420px at calc(100% - 120px) 180px, rgba(255,243,214,.08) 0%, rgba(255,243,214,0) 100%),
    linear-gradient(180deg,#1a1230 0%,#2e1a3c 55%,#1a1b1c 100%);
}
html[data-dark=true] .fkr-pumpkin::before{
  background: linear-gradient(180deg,rgba(46,30,42,0) 0,#2e1e2a 44px,#1a1b1c 100%);
}
html[data-dark=true] .fkr-pumpkin::after{   /* 덩굴 — 다크는 잎만 (좌우 씬과 동일: 낙엽 약하게) */
  height:250px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150' viewBox='0 0 240 150'%3E%3Cpath d='M0 34Q70 22 130 40T240 44' stroke='%233a4423' stroke-width='3' fill='none' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M0 118Q80 104 150 124T240 120' stroke='%233a4423' stroke-width='3' fill='none' stroke-linecap='round' opacity='.34'/%3E%3Cg fill='%2348542a' opacity='.5'%3E%3Cpath d='M46 30q-10-12-2-22 10 8 2 22z'/%3E%3Cpath d='M156 42q10-12 2-22-10 8-2 22z'/%3E%3Cpath d='M96 114q-9-11-2-20 9 7 2 20z'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 240px 150px;
}
/* ── 구름·안개 (PO 추가 2026-10-13 — 시안 밖) ────────────────
   QHD(2560) 에서 좌우 씬과 본문 사이 하늘(약 410px)이 단색으로 비어 보였다(여름·추석·한글날에 이어 같은 자리).
   ① 구름 = 시안 좌우 씬의 구름 도형을 그대로 뜬 것(좌 rx44/30/24 · 우 rx40/28/22), 새 도형 0개.
      주기 380/530 두 층. 좌우 끝 300px 는 씬의 원래 구름과 겹치지 않게 마스크로 비운다. cy 는 능선(y216) 위
   ② 안개 = 능선·밭 경계(y170~350)에 낮게 깔리는 반투명 띠. 전폭 · 좌우 씬(z2) 뒤 · 덩굴(::after) 뒤
   애니메이션 없음. 그리는 순서 = 하늘·능선(부모) → 밭(::before z0) → 구름·안개(z1) → 덩굴(::after z1, 나중) → 씬(z2) */
.fkr-pumpkin > i{ position:absolute; left:0; right:0; z-index:1; pointer-events:none; }
.fkr-pk-cloud{
  top:0; height:200px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='60' viewBox='0 0 380 60'%3E%3Cg fill='%23ffffff' fill-opacity='.92'%3E%3Cellipse cx='84' cy='32' rx='44' ry='14'/%3E%3Cellipse cx='116' cy='26' rx='30' ry='18'/%3E%3Cellipse cx='60' cy='30' rx='24' ry='12'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 40px / 380px 60px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='530' height='60' viewBox='0 0 530 60'%3E%3Cg fill='%23ffffff' fill-opacity='.92'%3E%3Cellipse cx='70' cy='32' rx='40' ry='13'/%3E%3Cellipse cx='100' cy='26' rx='28' ry='17'/%3E%3Cellipse cx='48' cy='30' rx='22' ry='11'/%3E%3C/g%3E%3C/svg%3E") repeat-x 170px 120px / 530px 60px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 300px,#000 380px,#000 calc(100% - 380px),transparent calc(100% - 300px));
          mask-image:linear-gradient(90deg,transparent 0,transparent 300px,#000 380px,#000 calc(100% - 380px),transparent calc(100% - 300px));
}
.fkr-pk-fog{
  top:170px; height:180px;
  background:
    radial-gradient(closest-side,rgba(255,250,242,.62),rgba(255,250,242,0)) repeat-x 0 46px / 520px 70px,
    radial-gradient(closest-side,rgba(255,250,242,.48),rgba(255,250,242,0)) repeat-x 260px 92px / 640px 64px,
    linear-gradient(180deg,rgba(255,250,242,0) 0,rgba(255,250,242,.32) 48%,rgba(255,250,242,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);
}
html[data-dark=true] .fkr-pk-cloud{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='60' viewBox='0 0 380 60'%3E%3Cg fill='%234e3e66' fill-opacity='.8'%3E%3Cellipse cx='84' cy='32' rx='44' ry='14'/%3E%3Cellipse cx='116' cy='26' rx='30' ry='18'/%3E%3Cellipse cx='60' cy='30' rx='24' ry='12'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 40px / 380px 60px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='530' height='60' viewBox='0 0 530 60'%3E%3Cg fill='%234e3e66' fill-opacity='.8'%3E%3Cellipse cx='70' cy='32' rx='40' ry='13'/%3E%3Cellipse cx='100' cy='26' rx='28' ry='17'/%3E%3Cellipse cx='48' cy='30' rx='22' ry='11'/%3E%3C/g%3E%3C/svg%3E") repeat-x 170px 120px / 530px 60px;
}
html[data-dark=true] .fkr-pk-fog{   /* 달빛 받은 보랏빛 안개 */
  background:
    radial-gradient(closest-side,rgba(200,186,236,.26),rgba(200,186,236,0)) repeat-x 0 46px / 520px 70px,
    radial-gradient(closest-side,rgba(200,186,236,.2),rgba(200,186,236,0)) repeat-x 260px 92px / 640px 64px,
    linear-gradient(180deg,rgba(200,186,236,0) 0,rgba(200,186,236,.12) 48%,rgba(200,186,236,0) 100%);
}
html[data-dark=true] .fkr-pumpkin .lt{ display:none; }
html[data-dark=true] .fkr-pumpkin .dk{ display:block; }

/* [핸드오프 밖 보강 ⑥ — 추석판(2026-09-16 PO 결정)에서 이어받음] 핸드오프 원안은 1372 다.
   그 값은 "오브젝트가 안 잘리는 폭"(본문 1132 + 좌우 최소 120px)인데, 데스크톱 최다
   화면폭이 1280 이라(GA4 2026-09-08~15 활성 15,272명 / 2위 1920 은 4,278명) 최다 그룹이
   좌우 씬을 통째로 못 보게 된다. 1280 에서 켜면 여백이 좌우 71px 뿐이라 상당수가 본문 카드
   뒤로 가려지고 일부는 세로로 잘리는데, 추석판에서 그 수치를 PO 에게 제시하고 "그래도 켠다"
   로 결정됐다 — 잘림은 사양이지 버그가 아니다. 되돌리지 말 것.
     하한 1150 의 근거 = 본문 .fkr-wrap 이 min-width 없는 고정 1132px 이라 뷰포트가 그보다
   좁으면 페이지에 가로 스크롤이 생기는데, .fkr-pumpkin 은 left:0/right:0 = 뷰포트 폭에
   묶여 있어 가로 스크롤을 따라가지 못한다. 스크롤바 폭을 감안한 실제 한계가 약 1147 이라
   1150 으로 끊는다 — 더 내리지 말 것. 상단 띠(band_pc/band_m)는 폭 게이트가 없다. */
@media (max-width:1150px){ .fkr-pumpkin{ display:none; } }