@charset "UTF-8";
/* ============================================================
   파일쿠키 — 가을 시즌 상단 레이어 (2026 가을 한정)
   기존 /renewal/css/topbar.css 뒤에 추가 로드.
   전부 #fkrTopUnify / #fkrTopUniM / .fkrm-top / .fkr-harvest 스코프 —
   기존 규칙 덮어쓰기 없음. 시즌 종료 시 이 파일 링크만 빠지면 원상복구.

   씬 구조 (여름 버전과 동일한 규칙)
     PC 띠   : 하늘 46px + 논바닥 12px
     모바일 : 하늘 44px + 논바닥 8px
     좌우 씬 : 본문 1132px 바깥, 폭 300px SVG 를 양끝 고정

   ※ 이 파일에는 2026 여름 시즌에서 실제로 사고가 났던 방어 4건이 이식돼 있다
     (z-index -1 · body:has 투명화 · 모바일 520px 대체 · 모바일 루트 2곳).
     원 핸드오프(design_handoff_autumn_topbar)에는 없는 항목이니 지우지 말 것.
   ============================================================ */

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

/* 좌우 씬 — 폭 고정 SVG 를 양끝에 고정 (뷰포트 폭 무관, 왜곡 없음) */
#fkrTopUnify.fkr-autumn .fkr-sc{ position:absolute; top:0; z-index:0; pointer-events:none; line-height:0; }
#fkrTopUnify.fkr-autumn .fkr-sc-l{ left:0; }
#fkrTopUnify.fkr-autumn .fkr-sc-r{ right:0; }

/* 논바닥 스트립 (전폭) — 그루터기는 반복 그라디언트 */
#fkrTopUnify.fkr-autumn .fkr-field{
  position:absolute; left:0; right:0; bottom:0; height:12px; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 3px, #fae2ab 3px 4.4px, transparent 4.4px 10px,
      #f0d193 10px 11.4px, transparent 11.4px 16px,
      #fae2ab 16px 17.4px, transparent 17.4px 21px) 0 3px / auto 5px repeat-x,
    linear-gradient(180deg,
      #f7dda2 0 1px,
      #e0ab4c 1px 9px,
      #c08a2e 9px 12px);
}

/* 검색 알약 — 하늘색이 노랑으로 바뀌어 기존 #f5f7fb 이 묻힘 → 흰색 + 가을톤 테두리 */
#fkrTopUnify.fkr-autumn .fkr-search{
  background:#ffffff; border-color:#f0dcb8;
  box-shadow:0 1px 3px rgba(120,80,30,.07);
}
#fkrTopUnify.fkr-autumn .fkr-search input.ph{ color:#5c4327; }
#fkrTopUnify.fkr-autumn .fkr-search input.ph::placeholder{ color:#9c6b3a; opacity:1; font-weight:600; }
#fkrTopUnify.fkr-autumn .fkr-util-txt,
#fkrTopUnify.fkr-autumn .fkr-util-my{ color:#6b4a2a; }

/* 다크 (가을밤 · 대보름) */
html[data-dark=true] #fkrTopUnify.fkr-autumn .fkr-utilbar{
  background: linear-gradient(180deg,#282232 0%,#453427 100%);
}
html[data-dark=true] #fkrTopUnify.fkr-autumn .fkr-field{
  background:
    repeating-linear-gradient(90deg,
      transparent 0 3px, #9d8054 3px 4.4px, transparent 4.4px 10px,
      #856b40 10px 11.4px, transparent 11.4px 16px,
      #9d8054 16px 17.4px, transparent 17.4px 21px) 0 3px / auto 5px repeat-x,
    linear-gradient(180deg,
      #9d8054 0 1px,
      #725327 1px 9px,
      #573c19 9px 12px);
}
html[data-dark=true] #fkrTopUnify.fkr-autumn .fkr-search{
  background:#33281f; border-color:#4d3d2e; box-shadow:none;
}
html[data-dark=true] #fkrTopUnify.fkr-autumn .fkr-search input.ph{ color:#f0e0cc; }
html[data-dark=true] #fkrTopUnify.fkr-autumn .fkr-search input.ph::placeholder{ color:#e8b878; }
html[data-dark=true] #fkrTopUnify.fkr-autumn .fkr-util-txt,
html[data-dark=true] #fkrTopUnify.fkr-autumn .fkr-util-my{ color:#f0e0cc; }

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


/* ── PC 좌우 배경 씬 (본문 1132px 바깥 여백) ─────────────── */
/* z-index 는 반드시 음수 — 0 이면 positioned 라서 일반 흐름의 본문(카드 배경·텍스트)
   위에 그려져 섹션을 통째로 가린다 (2026-08-12 여름판에서 실시간 인기 카드가
   실제로 사라짐. pointer-events:none 이라 elementFromPoint 검사로는 안 잡히니
   눈으로 확인할 것). -1 이면 본문 박스들 뒤 + 페이지 배경 앞 = 정확히 배경 자리.
   ※ 원 핸드오프는 z-index:0 이다 — 그대로 쓰면 같은 사고가 재현된다. */
.fkr-harvest{
  position:absolute; left:0; right:0; height:620px; z-index:-1;
  overflow:hidden; pointer-events:none;
  background: linear-gradient(180deg,#ffeccd 0%,#fdf0dc 55%,#f0f0f0 100%);
}
.fkr-harvest::before{                     /* 전폭 논바닥 (좌우 SVG 내부와 동일 값) */
  content:""; position:absolute; left:0; right:0; top:296px; bottom:0;
  background: linear-gradient(180deg,#efb851 0%,#e7bd72 42%,#f0f0f0 100%);
}
/* 씬이 -1(배경 자리)로 내려가면 전폭 본문 래퍼(.fkr-body, #f0f0f0 불투명)가 씬을
   가린다. 씬이 있는 페이지에서만 래퍼를 투명하게 하고 그 몫의 바탕색을 body 로
   옮긴다 — 래퍼가 비쳐도 body 가 같은 색이라 씬 바깥 영역은 이전과 동일하다.
   :has 미지원 브라우저 = 여백 씬만 안 보이고 나머지는 평소와 같음 (안전한 퇴행) */
body:has(.fkr-harvest){ background:#f0f0f0; }
html[data-dark=true] body:has(.fkr-harvest){ background:#1a1b1c; }
body:has(.fkr-harvest) > .fkr-body{ background:transparent; }

.fkr-harvest > span{ position:absolute; top:0; line-height:0; }
.fkr-harvest > span.l{ left:0; }
.fkr-harvest > span.r{ right:0; }
.fkr-harvest .dk{ display:none; }

html[data-dark=true] .fkr-harvest{
  background: linear-gradient(180deg,#282232 0%,#2b2420 55%,#1a1b1c 100%);
}
html[data-dark=true] .fkr-harvest::before{
  background: linear-gradient(180deg,#5f4726,#1a1b1c);
}
html[data-dark=true] .fkr-harvest .lt{ display:none; }
html[data-dark=true] .fkr-harvest .dk{ display:block; }

/* 여백이 없는 폭에서는 씬을 숨김 (본문 1132 + 좌우 최소 120px) */
@media (max-width:1372px){ .fkr-harvest{ display:none; } }


/* ── 모바일 상단 띠 ───────────────────────────────────────
   호스트 2곳: #fkrTopUniM (실서비스 mobile/header.jsp 주입분) · .fkrm-top (리뉴얼 m 페이지).
   같은 밴드 조각(autumn/band_m.jsp)을 쓰므로 셀렉터도 쌍으로 유지 */
#fkrTopUniM.fkr-autumn, .fkrm-top.fkr-autumn{ position:relative; background:transparent; overflow:hidden; }
#fkrTopUniM.fkr-autumn > .fkrm-scene, .fkrm-top.fkr-autumn > .fkrm-scene{
  position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none;
}
#fkrTopUniM.fkr-autumn > *:not(.fkrm-scene), .fkrm-top.fkr-autumn > *:not(.fkrm-scene){ position:relative; z-index:1; }
#fkrTopUniM.fkr-autumn .fkrm-uni-search, .fkrm-top.fkr-autumn .fkrm-search{
  background:#ffffff; border-color:#f0dcb8;
}
#fkrTopUniM.fkr-autumn .fkrm-uni-search input::placeholder, .fkrm-top.fkr-autumn .fkrm-search input::placeholder{
  color:#9c6b3a; opacity:1; font-weight:600; font-size:10.5px; letter-spacing:-.04em;
}
#fkrTopUniM.fkr-autumn .fkrm-uni-menu, .fkrm-top.fkr-autumn .fkrm-menu{ color:#8a6a3f; }

/* 좁은 폭 방어 — 핸드오프 기본값(10.5px)은 390px 이상에서만 문구가 끝까지 들어간다.
   실측(Pretendard, 2026-08-31): input 폭 360px→108px / 375px→123px 인데 문구는 124px 이라
   "…파일쿠키와 함…" 로 잘렸다. 389px 미만에서만 한 단계 줄여 360·375 를 살린다.
   320px(input 68px)은 이 방법으로 안 된다 — 문구 자체를 줄여야 하는 카피 결정이라 손대지 않았다 */
@media (max-width:389px){
  #fkrTopUniM.fkr-autumn .fkrm-uni-search input::placeholder,
  .fkrm-top.fkr-autumn .fkrm-search input::placeholder{ font-size:9px; letter-spacing:-.06em; }
}

html[data-dark=true] #fkrTopUniM.fkr-autumn, html[data-dark=true] .fkrm-top.fkr-autumn{ background:transparent; }
html[data-dark=true] #fkrTopUniM.fkr-autumn .fkrm-uni-search, html[data-dark=true] .fkrm-top.fkr-autumn .fkrm-search{ background:#33281f; border-color:#4d3d2e; }
html[data-dark=true] #fkrTopUniM.fkr-autumn .fkrm-uni-search input::placeholder, html[data-dark=true] .fkrm-top.fkr-autumn .fkrm-search input::placeholder{ color:#e8b878; }
html[data-dark=true] #fkrTopUniM.fkr-autumn .fkrm-uni-menu, html[data-dark=true] .fkrm-top.fkr-autumn .fkrm-menu{ color:#c9ab7d; }

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

/* 넓은 화면 방어 — 씬 SVG 는 폰 폭(320~480px) 기준이라, PC 폭으로 열면
   slice 크롭이 아래쪽(논바닥 띠)만 남겨 민무늬 바가 된다 (2026-08-12 여름판 실확인).
   520px 이상에서는 씬을 내리고 하늘 그라디언트 + 논바닥 띠로 대신한다 */
@media (min-width:520px){
  #fkrTopUniM.fkr-autumn .fkrm-scene, .fkrm-top.fkr-autumn .fkrm-scene,
  html[data-dark=true] #fkrTopUniM.fkr-autumn .fkrm-scene-lt, html[data-dark=true] .fkrm-top.fkr-autumn .fkrm-scene-lt,
  html[data-dark=true] #fkrTopUniM.fkr-autumn .fkrm-scene-dk, html[data-dark=true] .fkrm-top.fkr-autumn .fkrm-scene-dk{ display:none; }
  #fkrTopUniM.fkr-autumn, .fkrm-top.fkr-autumn{ background:linear-gradient(180deg,#fff6e6 0%,#ffd8a2 100%); }
  #fkrTopUniM.fkr-autumn::after, .fkrm-top.fkr-autumn::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:8px; pointer-events:none;
    background:linear-gradient(180deg,#e0ab4c 0 5px,#c08a2e 5px 8px);
  }
  html[data-dark=true] #fkrTopUniM.fkr-autumn, html[data-dark=true] .fkrm-top.fkr-autumn{ background:linear-gradient(180deg,#282232 0%,#453427 100%); }
  html[data-dark=true] #fkrTopUniM.fkr-autumn::after, html[data-dark=true] .fkrm-top.fkr-autumn::after{
    background:linear-gradient(180deg,#725327 0 5px,#573c19 5px 8px);
  }
}