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

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

/* ── PC 상단 띠 ─────────────────────────────────────────── */
#fkrTopUnify.fkr-hangul .fkr-utilbar{
  position:relative; background:linear-gradient(180deg,#fbf5e8 0%,#efe0bf 100%); overflow:hidden;
}
#fkrTopUnify.fkr-hangul .fkr-utilbar-in{ position:relative; z-index:2; }
#fkrTopUnify.fkr-hangul .fkr-sc{
  position:absolute; inset:0; z-index:0; pointer-events:none; line-height:0;
  width:100%; height:100%; display:block;
}
/* 검색 알약 — 한지색 배경에 기존 #f5f7fb 가 묻힘 → 흰색 + 한지톤 테두리 */
#fkrTopUnify.fkr-hangul .fkr-search{ background:#ffffff; border-color:#e2d2ae; box-shadow:0 1px 3px rgba(90,70,38,.07); }
#fkrTopUnify.fkr-hangul .fkr-search input.ph{ color:#3f3424; }
#fkrTopUnify.fkr-hangul .fkr-search input.ph::placeholder{ color:#5a4526; opacity:1; font-weight:600; }
#fkrTopUnify.fkr-hangul .fkr-util-txt,
#fkrTopUnify.fkr-hangul .fkr-util-my{ color:#3f3424; }

html[data-dark=true] #fkrTopUnify.fkr-hangul .fkr-utilbar{ background:linear-gradient(180deg,#15161d 0%,#2a2634 100%); }
html[data-dark=true] #fkrTopUnify.fkr-hangul .fkr-search{ background:#23222c; border-color:#3e3b4c; box-shadow:none; }
html[data-dark=true] #fkrTopUnify.fkr-hangul .fkr-search input.ph{ color:#ece8e0; }
html[data-dark=true] #fkrTopUnify.fkr-hangul .fkr-search input.ph::placeholder{ color:#f0d9a0; }
html[data-dark=true] #fkrTopUnify.fkr-hangul .fkr-util-txt,
html[data-dark=true] #fkrTopUnify.fkr-hangul .fkr-util-my{ color:#ece8e0; }

#fkrTopUnify.fkr-hangul .fkr-sc-dk{ display:none; }
html[data-dark=true] #fkrTopUnify.fkr-hangul .fkr-sc-lt{ display:none; }
html[data-dark=true] #fkrTopUnify.fkr-hangul .fkr-sc-dk{ display:block; }


/* ── 모바일 상단 띠 ─────────────────────────────────────── */
/* 상단바 높이 무변경(51px). 소품은 컨트롤 뒤에 깔리며 일부 가려진다.
   ⚠ viewBox 높이(51)가 실측 밴드 높이와 같아야 한다 — 로고(21px) 기준으로 41 로 잡으면
      slice 가 1.244배 확대를 걸어 좌우 약 24px 이 잘리고 메뉴 옆 좌등이 화면 밖으로 밀린다
      (실제로 겪은 버그). svg 부모의 getBoundingClientRect() 로 실측할 것 */
#fkrTopUniM.fkr-hangul{ position:relative; background:transparent; overflow:hidden; }
#fkrTopUniM.fkr-hangul > .fkrm-scene{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }
#fkrTopUniM.fkr-hangul > *:not(.fkrm-scene){ position:relative; z-index:1; }
#fkrTopUniM.fkr-hangul .fkrm-uni-search{ background:#ffffff; border-color:#e2d2ae; }
#fkrTopUniM.fkr-hangul .fkrm-uni-search input::placeholder{ color:#5a4526; opacity:1; font-weight:600; font-size:10.5px; letter-spacing:-.04em; }
#fkrTopUniM.fkr-hangul .fkrm-uni-menu{ color:#3f3424; }   /* 4.5:1 이상 */
html[data-dark=true] #fkrTopUniM.fkr-hangul .fkrm-uni-search{ background:#23222c; border-color:#3e3b4c; }
html[data-dark=true] #fkrTopUniM.fkr-hangul .fkrm-uni-search input::placeholder{ color:#f0d9a0; }
html[data-dark=true] #fkrTopUniM.fkr-hangul .fkrm-uni-menu{ color:#cfc8d8; }
#fkrTopUniM.fkr-hangul .fkrm-scene-dk{ display:none; }
html[data-dark=true] #fkrTopUniM.fkr-hangul .fkrm-scene-lt{ display:none; }
html[data-dark=true] #fkrTopUniM.fkr-hangul .fkrm-scene-dk{ display:block; }


/* ── PC 좌우 배경 씬 (본문 1132px 바깥 여백) ─────────────── */
/* 좌우 끝 300px 고정 SVG + 전폭 CSS 배경. 전체폭 SVG 1장으로 두면 화면이 넓어질수록
   씬만 커져 소품과 본문 사이가 벌어진다(1920px 149px / 2560px 387px).
   z-index 는 반드시 음수 — 0 이면 본문 카드를 덮는다 (2026-08-12 여름판 실사고).
   pointer-events:none 이라 자동 검사로 안 잡히니 눈으로 확인할 것. */
.fkr-munbang{
  position:absolute; left:0; right:0; height:620px; z-index:-1;
  overflow:hidden; pointer-events:none;
  background:linear-gradient(180deg,#f7eedc 0%,#fbf6ec 48%,#f0f0f0 100%);
}
/* 전폭 마당 — 36~44px 투명 페이드로 하늘/마당 경계선을 없앤다 (가로 절단선 방지) */
.fkr-munbang::before{
  content:""; position:absolute; left:0; right:0; top:268px; bottom:0; z-index:0;
  background:linear-gradient(180deg,rgba(233,217,184,0) 0,#e9d9b8 44px,#f0f0f0 100%);
}
/* 전폭 자모 무늬 — 가운데 1,300px 이 민무늬 "황무지" 가 되지 않게 하는 핵심 */
.fkr-munbang::after{
  content:""; position:absolute; left:0; right:0; top:80px; height:540px; z-index:1;
  /* [실측 보정 2026-09-30] 원안은 height:220px 라 y80~300 만 덮었고 마당(y268~620)이
     민무늬였다. 2560 화면에서 빈 구간이 411x620px 이고 그중 아래 320px 이 통째로
     그라데이션뿐이라 "좌우가 비었다" 는 제보가 왔다(추석판과 같은 지점). 마당까지 덮는다.
     위·아래는 마스크로 페이드시켜 타일이 뚝 시작·끝나는 가로선을 없앤다 — 추석판에서
     top:296px 하드 스타트가 실제로 절단선으로 보였다. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 86%,transparent 100%);
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22180%22%20viewBox%3D%220%200%20260%20180%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232b2622%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.12%22%3E%3Cpath%20d%3D%22M20%2024H46V50%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M130.5%2060H139.5M121.5%2067.8H148.5%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%22135%22%20cy%3D%2279.8%22%20r%3D%229%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M210%2020V42H232%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%22132%22%20r%3D%2212%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M183%20130Q179.1%20145.6%20170%20156M183%20137.3Q188.2%20148.7%20196%20156%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat 0 0 / 260px 180px;
}
/* 씬이 -1 로 내려가면 불투명 본문 래퍼가 씬을 가린다 — 이 3줄이 함께 필요 */
body:has(.fkr-munbang){ background:#f0f0f0; }
html[data-dark=true] body:has(.fkr-munbang){ background:#1a1b1c; }
body:has(.fkr-munbang) > .fkr-body{ background:transparent; }

/* ⚠ <svg> 에 인라인 style(특히 display:block) 금지 — 아래 display:none 을 이겨서
     라이트·다크 두 씬이 동시에 표시된다 (실제로 겪음). 배치는 전부 이 CSS 담당 */
.fkr-munbang > span{ position:absolute; top:0; line-height:0; z-index:2; }
.fkr-munbang > span.l{ left:0; }
.fkr-munbang > span.r{ right:0; }
.fkr-munbang .dk{ display:none; }

/* 다크 — 먹빛 밤. 광원은 달이 아니라 우측 씬의 호롱불(등잔대).
   온기 워시는 SVG 안이 아니라 여기(전폭 부모 배경)에 둔다 — SVG(300px) 안에 두면
   씬 경계에서 네모나게 잘려 세로 단차로 보인다. 호롱불 자체의 작은 글로우는 SVG 안에 둔다.
   좌표 = 호롱불(우측 씬 x222 → 오른쪽에서 78px, y240) */
html[data-dark=true] .fkr-munbang{
  background:
    radial-gradient(460px 340px at calc(100% - 78px) 240px, rgba(255,184,100,.09) 0%, rgba(255,184,100,0) 100%),
    linear-gradient(180deg,#15161d 0%,#22202a 50%,#1a1b1c 100%);
}
html[data-dark=true] .fkr-munbang::before{
  background:linear-gradient(180deg,rgba(44,40,34,0) 0,#2c2822 44px,#1a1b1c 100%);
}
html[data-dark=true] .fkr-munbang::after{ background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22180%22%20viewBox%3D%220%200%20260%20180%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23d9b86a%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.15%22%3E%3Cpath%20d%3D%22M20%2024H46V50%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M130.5%2060H139.5M121.5%2067.8H148.5%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%22135%22%20cy%3D%2279.8%22%20r%3D%229%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M210%2020V42H232%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%22132%22%20r%3D%2212%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M183%20130Q179.1%20145.6%20170%20156M183%20137.3Q188.2%20148.7%20196%20156%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat 0 0 / 260px 180px; }
html[data-dark=true] .fkr-munbang .lt{ display:none; }
html[data-dark=true] .fkr-munbang .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-munbang 은 left:0/right:0 = 뷰포트 폭에
   묶여 있어 가로 스크롤을 따라가지 못한다(오른쪽으로 스크롤하면 씬만 제자리에 남아 어긋난다).
   스크롤바 폭을 감안한 실제 한계가 약 1147 이라 1150 으로 끊는다 — 더 내리지 말 것.
   상단 띠(band_pc/band_m)는 폭 게이트가 없어 1280 에서도 원래 나온다. */
@media (max-width:1150px){ .fkr-munbang{ display:none; } }