@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;
  /* 능선은 부모 배경 레이어로 둔다 — 배경은 자식·의사요소보다 항상 먼저 그려지므로
     논바닥(::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 42C90 20 170 14 250 28 330 42 410 36 480 42V80H0Z' fill='%23d9c19a'/%3E%3Cpath d='M0 60C70 48 150 42 250 54 350 66 420 58 480 60V80H0Z' fill='%23c2a578'/%3E%3C/svg%3E") repeat-x 0 216px / 480px 80px,
    linear-gradient(180deg,#ffeccd 0%,#fdf0dc 55%,#f0f0f0 100%);
}
/* [가운데 빈 배경 보정 2026-09-01] 좌우 씬은 폭 300px 고정이라 1920px 화면에서
   가운데 1,313px 이 맨 배경이었다. 게다가 하늘이 논바닥으로 y=296 에서 한 번에 꺾여
   그 구간에 색만 끊긴 가로줄이 보였다 — 좌우 씬 안에는 그 경계를 덮는 능선(y216~296)이
   있는데 가운데엔 없기 때문이다. 라이트·다크 모두 같은 증상.
     ① 전폭 능선을 깔아 좌우 씬의 능선과 이어 준다 (480px 주기 타일, 부모 배경 레이어)
     ② ::before(논바닥)를 36px 올려 투명에서 페이드시켜 경계선 자체를 없앤다
     ③ ::after 로 벼 포기·그루터기를 전폭에 깐다 — 좌우 씬 안에만 있던 패턴이라
        가운데 들판이 민무늬였다. 이게 "황무지" 인상을 막는 핵심이다 (핸드오프 §2)
   그리는 순서 = 하늘·능선(부모 배경) → 논바닥(z0) → 풀(z1) → 좌우 씬(z2).
   순서가 어긋나면 능선이 논바닥 위로 떠서 언덕이 밭에 얹힌 것처럼 보인다. */
.fkr-harvest::before{                     /* 전폭 논바닥 (좌우 SVG 내부와 동일 값) */
  content:""; position:absolute; left:0; right:0; top:260px; bottom:0; z-index:0;
  background: linear-gradient(180deg,rgba(239,184,81,0) 0,#efb851 36px,#e7bd72 42%,#f0f0f0 100%);
}
.fkr-harvest::after{                      /* 전폭 풀 — 벼 포기(120×150) + 그루터기(30×22) */
  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='120' height='150' viewBox='0 0 120 150'%3E%3Cg stroke='%23e0a83f' stroke-width='2.6' fill='none' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M22 46q-4-16-12-26M28 46q0-19 2-30M34 46q5-16 14-24'/%3E%3Cpath d='M82 120q-3-14-10-22M88 120q0-17 2-26M94 120q4-14 12-21'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 120px 150px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22'%3E%3Cg opacity='.6'%3E%3Crect x='5' y='6' width='2.2' height='9' fill='%23fae2ab'/%3E%3Crect x='14' y='10' width='2.2' height='7' fill='%23f0d193'/%3E%3Crect x='23' y='5' width='2.2' height='10' fill='%23fae2ab'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 30px 22px;
}
/* 씬이 -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; z-index:2; }
.fkr-harvest > span.l{ left:0; }
.fkr-harvest > span.r{ right:0; }
.fkr-harvest .dk{ display:none; }

/* 다크 — 능선 + 대보름 달빛 워시 + 밤하늘.
   [달빛 끊김 보정 2026-09-01] 워시는 원래 우측 씬 SVG 안의 ellipse(rx560 ry420) 였는데
   그 SVG 는 폭이 300px 이라 워시가 씬 경계에서 네모나게 잘렸다 — 화면에 세로 단차로 보였다.
   워시를 여기(전폭 부모 배경)로 옮겨 끊김 없이 잇는다. 옮겼으므로 SVG 쪽 ellipse 는
   제거했다(autumn/harvest_pc.jsp) — 남겨 두면 겹쳐서 씬 안쪽만 밝아져 반대 방향 단차가 난다.
   좌표 = 달 중심(우측 씬 로컬 cx188 → 오른쪽에서 112px, cy180). 값은 핸드오프 원안 그대로. */
html[data-dark=true] .fkr-harvest{
  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 42C90 20 170 14 250 28 330 42 410 36 480 42V80H0Z' fill='%2356422a'/%3E%3Cpath d='M0 60C70 48 150 42 250 54 350 66 420 58 480 60V80H0Z' fill='%233b2d1e'/%3E%3C/svg%3E") repeat-x 0 216px / 480px 80px,
    radial-gradient(560px 420px at calc(100% - 112px) 180px, rgba(255,238,194,.075) 0%, rgba(255,238,194,0) 100%),
    linear-gradient(180deg,#282232 0%,#2b2420 55%,#1a1b1c 100%);
}
html[data-dark=true] .fkr-harvest::before{
  background: linear-gradient(180deg,rgba(95,71,38,0) 0,#5f4726 36px,#1a1b1c 100%);
}
html[data-dark=true] .fkr-harvest::after{   /* 풀 — 다크는 그루터기만 (좌우 씬과 동일: 벼 포기 없음) */
  height:230px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='30' viewBox='0 0 46 30'%3E%3Cg opacity='.45'%3E%3Crect x='7' y='8' width='2.4' height='11' fill='%239d8054'/%3E%3Crect x='21' y='13' width='2.4' height='8' fill='%23856b40'/%3E%3Crect x='34' y='6' width='2.4' height='12' fill='%239d8054'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 46px 30px;
}
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);
  }
}