/* total_kroyal: PC·모바일 공통 보강 및 푸터 고객센터·메인 팝업 */

body {
  overflow-x: hidden;
}

/* 마라 중간 배너 제거 */
.main_middle_banner {
  display: none !important;
}

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#footer .sec_tel {
  margin-bottom: 44px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#footer .sec_tel h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
#footer .sec_tel p {
  line-height: 1.55;
  color: #c8c8c8;
}

.pop_main.pop_main_coord {
  position: absolute;
  box-sizing: border-box;
  z-index: calc(10040 + var(--pm-i, 0));
  bottom: auto;
  width: var(--pm-w, min(90vw, 360px));
  max-width: min(100vw, var(--pm-w, 100vw));
  left: var(--pm-l, 0px);
  top: var(--pm-t, 0px);
}
.pop_main.pop_main_coord .pop_layer img {
  max-width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 900px) {
  .pop_main.pop_main_coord {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    top: calc(5vh + var(--pm-i, 0) * 12vh) !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 24px), var(--pm-w, 100vw)) !important;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* PC/모바일 전용 show/hide (.flex.pc_only 는 display:flex 유지) */
.pc_only:not(.flex) { display: block; }
.mo_only { display: none; }
.mo_br   { display: none; }
.flex.pc_only,
.pc_only.flex {
  display: flex;
}

@media (max-width: 1023px) {
  .pc_only { display: none !important; }
  .mo_only { display: block !important; }
  .mo_only.flex { display: flex !important; }
  .mo_br   { display: inline !important; }
}

@media (min-width: 1024px) {
  .mo_only {
    display: none !important;
  }

  /* PC 메인 통계 — kroyal design.css 와 동일 */
  .main_statistics {
    padding: 65px 0 40px 0 !important;
  }
  .main_statistics .wrap {
    width: 950px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .main_statistics h2 {
    font-size: 24px !important;
    margin-bottom: 1.5em !important;
    font-weight: 800 !important;
    text-align: left !important;
  }
  /* PC 통계: 좌 막대그래프(축소) · 우 2행(오감정율 / 25FW 순위) */
  .main_statistics .stat_pc_row {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 40px !important;
  }
  .main_statistics .stat_pc_graph {
    flex: 0 0 280px !important;
    max-width: 280px !important;
    align-self: flex-end !important;
  }
  .main_statistics .stat_pc_graph img {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
  }
  .main_statistics .stat_pc_side {
    flex: 1 1 560px !important;
    max-width: 600px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    min-width: 0 !important;
  }
  .main_statistics .stat_subtitle {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 0.35em !important;
    line-height: 1.3 !important;
  }
  .main_statistics .stat_misrate {
    padding-bottom: 20px !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
  .main_statistics .stat_rate {
    margin: 0 !important;
    font-size: 20px !important;
    color: #747474 !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }
  .main_statistics .stat_rate strong {
    color: #e26f2e !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    vertical-align: -2px !important;
  }
  .main_statistics .stat_fw_rank .flex {
    display: flex !important;
    gap: 20px !important;
    justify-content: space-between !important;
  }
  .main_statistics .stat_fw_rank .flex ul {
    flex: 1 !important;
    border-top: 2px solid #4a4a4a !important;
    min-width: 0 !important;
  }
  .main_statistics .stat_fw_rank .flex ul li {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    gap: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #e0e0e0 !important;
  }
  .main_statistics .stat_fw_rank .flex ul li i.rank {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 28px !important;
    height: 28px !important;
    color: #fff !important;
    background-color: #0c0b0e !important;
    font-style: normal !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
  }
  .main_statistics .stat_fw_rank .flex ul li span {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .main_statistics .stat_fw_rank .flex ul:first-of-type li:nth-of-type(1) i.rank {
    background-color: #ff3300 !important;
  }
  .main_statistics .stat_fw_rank .flex ul:first-of-type li:nth-of-type(2) i.rank {
    background-color: #ff6600 !important;
  }
  .main_statistics .stat_fw_rank .flex ul:first-of-type li:nth-of-type(3) i.rank {
    background-color: #ff9900 !important;
  }

  /* PC: 가품순위 (통계 아래) */
  .main_ranking--fake {
    padding: 0 0 50px 0 !important;
  }
  .main_ranking--fake .wrap {
    width: 950px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .main_ranking--fake h2 {
    font-size: 24px !important;
    margin-bottom: 0.5em !important;
    font-weight: 800 !important;
  }
  .main_ranking--fake .flex {
    display: flex !important;
    gap: 20px !important;
    justify-content: space-between !important;
  }
  .main_ranking--fake .flex ul {
    flex: 1 !important;
    border-top: 2px solid #4a4a4a !important;
  }
  .main_ranking--fake .flex ul li {
    display: flex !important;
    align-items: center !important;
    height: 42px !important;
    gap: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #e0e0e0 !important;
  }
  .main_ranking--fake .flex ul li i.rank {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 30px !important;
    height: 30px !important;
    color: #fff !important;
    background-color: #0c0b0e !important;
    font-style: normal !important;
    flex-shrink: 0 !important;
  }
  .main_ranking--fake .flex ul:first-of-type li:nth-of-type(1) i.rank {
    background-color: #ff3300 !important;
  }
  .main_ranking--fake .flex ul:first-of-type li:nth-of-type(2) i.rank {
    background-color: #ff6600 !important;
  }
  .main_ranking--fake .flex ul:first-of-type li:nth-of-type(3) i.rank {
    background-color: #ff9900 !important;
  }

  /* PC: 하단 중복 25FW 블록 숨김 (통계 우측에 통합) */
  .main_ranking--standalone {
    display: none !important;
  }
  .main_ranking.mo_only {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  #footer .sec_tel {
    margin-bottom: 11.1959vw;
    padding-bottom: 8.9059vw;
    border-bottom: 0.2545vw solid rgba(255, 255, 255, 0.12);
  }
  #footer .sec_tel h3 {
    font-size: 5.0891vw;
    margin-bottom: 3.0535vw;
  }

  /* 모바일 헤더: 1줄 컴팩트 (상단 빈 여백 제거) */
  #header {
    --paddingTop: env(safe-area-inset-top, 0px);
    --headerBarH: 52px;
    height: auto !important;
    min-height: calc(var(--paddingTop) + var(--headerBarH)) !important;
    padding: var(--paddingTop) 5% 0 5% !important;
    box-sizing: border-box !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.75)) !important;
  }
  #header.contract {
    top: 0 !important;
    background: rgba(0, 0, 0, 0.95) !important;
  }
  #header .header_nav {
    height: var(--headerBarH) !important;
    display: flex !important;
    align-items: center !important;
  }
  #header .header_top .header_user_pc {
    display: none !important;
  }
  #header .header_nav .btns {
    display: none !important;
  }
  #header .header_nav .wrap {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  #header .header_nav .logo {
    flex: 1 !important;
    min-width: 0 !important;
    order: 0 !important;
    margin: 0 !important;
  }
  #header .header_nav .logo img {
    height: 26px !important;
    width: auto !important;
    display: block !important;
  }
  #header .header_nav .btn_search,
  #header .header_nav .btn_gnb {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    font-size: 0 !important;
    box-sizing: border-box !important;
  }
  #header .header_nav .btn_search {
    order: 1 !important;
    background-color: #fff !important;
    -webkit-mask-image: url(../img/icon_search.svg) !important;
    mask-image: url(../img/icon_search.svg) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
  }
  #header .header_nav .btn_gnb {
    order: 2 !important;
    background: url(../img/icon_menu.svg) no-repeat center/contain !important;
  }
  #header .header_nav .gnb {
    order: 3 !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    right: -100% !important;
    left: auto !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    background-color: #121212 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    z-index: 92 !important;
    transition: right 0.4s !important;
  }
  #header .header_nav .gnb.on {
    right: 0 !important;
  }
  #header .header_top {
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  }
  #subVisual.none {
    height: calc(env(safe-area-inset-top, 0px) + 52px) !important;
  }
  #singlePage {
    border-top-width: calc(env(safe-area-inset-top, 0px) + 52px) !important;
  }
}

@media (min-width: 1024px) {
  #header .header_top {
    display: block !important;
    position: relative !important;
    background: rgb(18, 18, 18) !important;
  }
  #header .header_top .wrap {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    height: 75px !important;
    padding: 0 !important;
    gap: 0 !important;
    position: relative !important;
    width: var(--siteWidth, 1240px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  #header .header_top .header_user_pc {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .header_nav .btn_search,
  #header .header_nav .btn_gnb {
    display: none !important;
  }
  #header .gnb > a.btn_close {
    display: none !important;
  }
  /* PC: 로그인/회원가입은 header_top 만 (GNB 내 모바일용 .user 숨김) */
  #header .header_nav .gnb .user {
    display: none !important;
  }
  #header .callcenter {
    display: none !important;
  }
  #header .header_nav .gnb .depth1 > li > i {
    display: none !important;
  }
  #header .header_nav .gnb {
    position: static !important;
    width: auto !important;
    height: auto !important;
    right: auto !important;
    top: auto !important;
    padding-top: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    flex-direction: row !important;
  }
  #header .header_nav .gnb.on {
    right: auto !important;
  }
}