@charset "UTF-8";
/* ─────────────────────────────────────────────────────────
 * 원본: feelpack/src/assets/css/tobe/fw.header.css
 * 용도: 모바일 GNB CSS FOUC 방지 (NF-8353, 2026-04-30)
 * 동기화: feelpack 의 원본이 변경되면 본 파일도 같이 갱신해야 함
 * 추후: feelpack 빌드 설정에서 CSS 자동 추출 도입 시 본 파일 제거 예정
 * ───────────────────────────────────────────────────────── */
.commonGnbList_scroll{position: relative;}
.commonGnbList_scroll:after{content:"";display: block;position: absolute;top:0;right:0;width:20px;height:100%;background-image:linear-gradient(to left, #fff, rgba(255, 255, 255, 0));}
.commonGnbList__wrap {position:relative;overflow-y: hidden;overflow-x: scroll;width: 100%;height: 52px;background: #fff;-webkit-box-sizing: border-box;box-sizing: border-box;white-space: nowrap;}
.commonGnbList {width:auto;height: 52px;padding: 0 4vw;box-sizing: border-box;text-align: center;}
.commonGnbList li{display: inline-block;padding-left:4vw;font-size:16px;}
.commonGnbList li:last-child {padding-right: 4vw;}
.commonGnbList li:first-child{padding-left:8.5vw;}
.commonGnbList li .gnbLink {position: relative;display: inline-block;height: 52px;color: #222;font-size:15px;font-family: 'Pretendard Medium';line-height: 52px;text-decoration: none !important;}
.commonGnbList li .gnbLink img {height: 52px;}
.commonGnbList li .newIcon {position: absolute;top: 12px;right: -6px;width:4px;height:4px;padding:0;border:none;border-radius: 100%;background:#ec5026;font-size:0;line-height: 0;}
.commonGnbList li.live .gnbLink{color:#ED4E2B;font-family:'Pretendard Bold';}
.commonGnbList li .liveIcon {position: absolute;top: 12px;right: -16px;width:16px;height:10px;padding:0;border:none;background: url('//icon.feelway.com/recent/mo/common/icon/icon_gnbLive.png') no-repeat 0 0;font-size:0;line-height: 0;background-size:32px;animation:blink-effect 1s step-end infinite;}
@keyframes blink-effect{50%{background-position-x:100%;}}
.commonGnbList li.current .gnbLink {font-family:'Pretendard Bold';color: #139eac;}
.commonGnbList li.current .gnbLink::after {content: " ";display: block;position: absolute;bottom: 0;left: 0;-webkit-transform: translate(0, 0);transform: translate(0, 0);width: 100%;height: 3px;background: #139eac;}
.commonGnbList li.bold .gnbLink {color: #ffc065;}
.commonGnbList__wrap::-webkit-scrollbar{display: none;}
.commonGnbList_scroll .headerBackBtn {display: flex;align-items: center;justify-content: center;position: absolute;top: 0;left: 0;bottom: 0;z-index:2;padding:0 0 0 3px;border:0;background-color:#fff;}
.commonGnbList_scroll .headerBackBtn:before {content:"";display:flex;width: 40px;height: 43px;background-image: url('//icon.feelway.com/recent/mo/common/bg_headerPrev.png');background-repeat:no-repeat;background-size: 100% auto;}
@media screen and (max-width:360px) {
    .commonGnbList li .gnbLink {font-size: 15px;}
}

/* ─── NEW 공통 헤더 스타일 (assets/m/css/tobe/common.css 에서 이전, NF-8353) ─── */
body:has(.commonPrevHeader .subMenu .commonPrevHeader) {padding:0 5px;}
.commonPrevHeader__title {border-bottom: none !important;}
/* NF-xxxx: common navi header(서브타이틀/이전버튼/우측유틸) 정렬 규칙을 common.css(본문에서 늦게 로드)에서 통째로 이전.
   head 동기 로드로 FOUC(번들 subtitle 이 정렬 CSS 적용 전 세로로 깨졌다가 정렬되는 깜빡임) 차단.
   제목 형식별(+: titleGroup, <: prev/prevNavLink, >: utill)로 셀렉터가 달라 일부만 이전하면 일부 페이지만 깨짐 → 블록 전체 이전.
   common.css 원본(약 313~334행) 변경 시 본 블록도 같이 갱신할 것. */
.commonPrevHeader{position:relative;height:50px;}
.commonPrevHeader .button{border:0;width:50px;height:50px;background:url('//icon.feelway.com/recent/mo/common/bg_headerPrev.png') no-repeat 0/50px;}
.commonPrevHeader__wrap{position:sticky;top:0;left:0;right:0;background:#fff;z-index:300;}
.commonPrevHeader__wrap.fixed{position:fixed;}
.commonPrevHeader__prev{position:absolute;top:0;left:0;}
.commonPrevHeader__prev.hasNav {display: flex;align-items: center;height: 100%;}
.commonPrevHeader__prev:has(.prevNavLink) .button {width:40px;opacity:0.3;}
.commonPrevHeader__prev .prevNavLink {height: 100%;display: flex;align-items: center;font-size: 16px;color: #aaa;}
.commonPrevHeader__title{color:#222222;font-size:16px;line-height:50px;font-family: "Pretendard SemiBold";text-align:center;}
.commonPrevHeader__utill{position:absolute;top:0;right:0;text-align:right;}
.commonPrevHeader__utill .alarmButton{position:relative;width:34px;height:50px;margin:0 2px 0 -9px;background:url('//icon.feelway.com/recent/mo/common/bg_headeralarm_v2.png') no-repeat 0/100%;}
.commonPrevHeader__utill .alarmButton.newAlarm::after{display:block;content:" ";position:absolute;top:13px;right:7px;width:8px;height:8px;border-radius:50%;background:#d9001b;}
.commonPrevHeader__utill .salesConversionButton{width:40px;height:50px;margin:0 5px 0 -10px;background:url('//icon.feelway.com/recent/mo/common/bg_headerSalesConversion_v2.png') no-repeat 0/100%;}
.commonPrevHeader__utill .snsShareButton{width:50px;height:50px;background:url('//icon.feelway.com/recent/mo/common/button/btn_snsShare.png') no-repeat 0/100%;}
.commonPrevHeader__utill .boardLink{border:solid 1px #d5d5d5;font-size:13px;padding:5px 10px;border-radius:10px;margin-top:11px;margin-right:13px;display:block;}
.commonPrevHeader__utill .cartButton {display: inline-block;position: relative;width: 34px;height: 50px;margin-right: 2px;background: url("//icon.feelway.com/recent/mo/common/bg_headercart.png") no-repeat 0 / 100%;vertical-align: top;font-size: 0;line-height: 0;}
.commonPrevHeader__titleGroup {position: absolute;top: 0;left: 50%;transform: translateX(-50%);display: flex;align-items: center;justify-content: center;gap:4px;height: 50px;}
.commonPrevHeader__relatedLink {color:#999;font-size: 16px;line-height: 50px;font-family: "Pretendard SemiBold";}
.commonPrevHeader__relatedLink:hover {color:#999;}
.commonPrevHeader__titleSeparator {color: #222;font-size: 20px;user-select: none;line-height: 50px;}
.commonPrevHeader__utill .textBtn {display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;font-size: 15px;color:#aaa;line-height:50px;}
.commonPrevHeader__utill.textButtonWrap .commonTooltipLayerPopup {top:60px;left:auto;width:calc(100vw - 15px);right:8px;box-sizing: border-box;}
.common-gnb-position {border-bottom: 1px solid #e2e2e2;}

/* bundle 로드 전 placeholder height (layout shift 방지) */
.header__function {height: 50px;}
.common-mainheader-box {height: 50px;}

/* 공통헤더 헤드룸 — 스크롤 업 시 노출(.fw-hr-pinned 는 fw-header.js 가 토글).
   대상: 헤더 sticky 페이지 = GNB + 타이틀(commonPrevHeader). museum 등 자체헤더 제외.
   wrap 말고 box 를 움직임(wrap transform 시 자식 .common-gnb-position(fixed)가 사라짐).
   숨김은 transform(GPU) 으로, transition 은 노출(pinned)에만 → 진입은 snap(빼꼼/툭 둘 다 없음), 노출만 슬라이드 */
.common-header-gap.zone-fixed:not(.museum-no-gnb-fixed) .common-mainheader-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 501;
  background: #169dab;
  transform: translateY(-100%);
}
html.fw-hr-pinned .common-header-gap.zone-fixed:not(.museum-no-gnb-fixed) .common-mainheader-box {
  transform: translateY(0);
  transition: transform .25s ease-out;
}
html.fw-hr-pinned .common-header-gap.zone-fixed:not(.museum-no-gnb-fixed) .common-gnb-position {
  transform: translateY(50px);
  transition: transform .25s ease-out;
}