@charset "UTF-8";
/* ============================================================
   파일쿠키 — 여름 시즌 상단 레이어 (2026 여름 한정)
   기존 /renewal/css/topbar.css 뒤에 추가 로드하거나 파일 끝에 append.
   전부 #fkrTopUnify / .fkr-seaside 스코프 — 기존 규칙 덮어쓰기 없음.
   시즌 종료 시 이 파일 링크 1줄만 제거하면 원상복구.
   ============================================================ */

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

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

/* 바다 스트립 (전폭) — 흰 물결은 반복 그라디언트 */
#fkrTopUnify.fkr-summer .fkr-sea{
  position:absolute; left:0; right:0; bottom:0; height:12px; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 60px, rgba(255,255,255,.8) 60px 76px, transparent 76px 190px) 0 3.5px / auto 2px repeat-x,
    linear-gradient(180deg,#07baeb 0 8px,#00abdd 8px 12px);
}

/* 검색 알약 — 하늘색 배경에서 기존 #f5f7fb 이 묻힘 → 흰색 + 하늘톤 테두리 */
#fkrTopUnify.fkr-summer .fkr-search{
  background:#ffffff; border-color:#cfeaf6;
  box-shadow:0 1px 3px rgba(11,60,114,.06);
}
#fkrTopUnify.fkr-summer .fkr-search input.ph{ color:#12405c; }
#fkrTopUnify.fkr-summer .fkr-search input.ph::placeholder{ color:#3d7f9e; opacity:1; font-weight:600; }
#fkrTopUnify.fkr-summer .fkr-util-txt,
#fkrTopUnify.fkr-summer .fkr-util-my{ color:#20415e; }

/* 다크 (야간 여름) */
html[data-dark=true] #fkrTopUnify.fkr-summer .fkr-utilbar{
  background: linear-gradient(180deg,#0d1f36 0%,#173553 100%);
}
html[data-dark=true] #fkrTopUnify.fkr-summer .fkr-sea{
  background:
    repeating-linear-gradient(90deg,
      transparent 0 60px, rgba(143,214,239,.5) 60px 76px, transparent 76px 190px) 0 3.5px / auto 2px repeat-x,
    linear-gradient(180deg,#0b6285 0 8px,#08506d 8px 12px);
}
html[data-dark=true] #fkrTopUnify.fkr-summer .fkr-search{
  background:#22303f; border-color:#3a4b5d; box-shadow:none;
}
html[data-dark=true] #fkrTopUnify.fkr-summer .fkr-search input.ph{ color:#e6f1ff; }
html[data-dark=true] #fkrTopUnify.fkr-summer .fkr-search input.ph::placeholder{ color:#8fd6ef; }
html[data-dark=true] #fkrTopUnify.fkr-summer .fkr-util-txt,
html[data-dark=true] #fkrTopUnify.fkr-summer .fkr-util-my{ color:#dde6ef; }

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


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

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

html[data-dark=true] .fkr-seaside{
  background: linear-gradient(180deg,#14283f 0%,#1a2530 55%,#1a1b1c 100%);
}
html[data-dark=true] .fkr-seaside::before{
  background: linear-gradient(180deg,#12455e,#1a1b1c);
}
html[data-dark=true] .fkr-seaside .lt{ display:none; }
html[data-dark=true] .fkr-seaside .dk{ display:block; }

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


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

html[data-dark=true] #fkrTopUniM.fkr-summer, html[data-dark=true] .fkrm-top.fkr-summer{ background:transparent; }
html[data-dark=true] #fkrTopUniM.fkr-summer .fkrm-uni-search, html[data-dark=true] .fkrm-top.fkr-summer .fkrm-search{ background:#22303f; border-color:#3a4b5d; }
html[data-dark=true] #fkrTopUniM.fkr-summer .fkrm-uni-search input::placeholder, html[data-dark=true] .fkrm-top.fkr-summer .fkrm-search input::placeholder{ color:#8fd6ef; }
html[data-dark=true] #fkrTopUniM.fkr-summer .fkrm-uni-menu, html[data-dark=true] .fkrm-top.fkr-summer .fkrm-menu{ color:#9fb6c9; }

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

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