/* TrendyPicker Footer
   layout_footer/standard.html → #layout_footer .logo_wrap
   Link columns + logo row only. Payment / copyright / SNS stay on Firstmall
   user.css (.bottom_wrap / .footer_comp).
*/

#layout_footer.layout_footer {
  margin-top: 0;
  border-top: 0;
  color: #fff;
  background: #161616;
  font-family: Pretendard, Arial, sans-serif;
}

/* 1200px content + 20px side gutters (= max-width 1240px) aligns with
   .bottom_wrap .footer_comp { max-width: 1200px; margin: 0 auto }. */
#layout_footer .logo_wrap {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 40px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 68px 20px 58px;
  color: #fff;
  background: #161616;
}

#layout_footer .logo_wrap .logo_title,
#layout_footer .logo_wrap .info_title {
  display: block;
  width: auto;
  max-width: none;
  vertical-align: top;
}

#layout_footer .logo_wrap .logo_title {
  margin: 0;
}

#layout_footer .logo_wrap .logo_area {
  margin: 0;
}

#layout_footer .logo_wrap .logo_area > a {
  display: inline-flex;
  align-items: baseline;
  height: auto;
  color: #fff;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

#layout_footer .logo_wrap .logo_area > a span {
  color: #fff;
  font-weight: 500;
}

#layout_footer .logo_wrap .footer_contents {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 40px;
  max-width: 1000px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#layout_footer .logo_wrap .footer_contents::after {
  display: none;
}

#layout_footer .logo_wrap .footer_contents > li,
#layout_footer .logo_wrap .footer_contents > li.footer_a1,
#layout_footer .logo_wrap .footer_contents > li.footer_b1,
#layout_footer .logo_wrap .footer_contents > li.footer_c1,
#layout_footer .logo_wrap .footer_contents > li.footer_d1 {
  float: none;
  width: auto;
  max-width: none;
  padding: 0;
  color: #fff;
}

#layout_footer .logo_wrap .title,
#layout_footer .logo_wrap .title span {
  margin: 0 0 18px;
  padding: 0;
  color: #fff;
  background: none;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#layout_footer .logo_wrap .menu {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#layout_footer .logo_wrap .menu > li,
#layout_footer .logo_wrap .menu > li a {
  height: auto;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  text-decoration: none;
}

#layout_footer .logo_wrap .menu > li a:hover,
#layout_footer .logo_wrap .menu > li a:focus {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 1120px) {
  #layout_footer .logo_wrap {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 20px 40px;
  }

  #layout_footer .logo_wrap .footer_contents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 28px;
  }
}

@media (max-width: 767px) {
  #layout_footer .logo_wrap {
    display: block;
    padding: 0;
  }

  #layout_footer .logo_wrap .logo_title {
    display: none;
  }

  #layout_footer .logo_wrap .info_title {
    width: 100%;
  }

  #layout_footer .logo_wrap .footer_contents {
    display: block;
  }

  #layout_footer .logo_wrap .footer_contents > li,
  #layout_footer .logo_wrap .footer_contents > li.footer_a1,
  #layout_footer .logo_wrap .footer_contents > li.footer_b1,
  #layout_footer .logo_wrap .footer_contents > li.footer_c1,
  #layout_footer .logo_wrap .footer_contents > li.footer_d1 {
    width: 100%;
    padding: 0 18px;
  }

  #layout_footer .logo_wrap .footer_contents > li:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  #layout_footer .logo_wrap .footer_contents > li ul {
    display: none;
    padding: 0 0 14px;
  }

  #layout_footer .logo_wrap .footer_contents > li.on ul {
    display: grid;
  }

  #layout_footer .logo_wrap .title,
  #layout_footer .logo_wrap .footer_b1 .title,
  #layout_footer .logo_wrap .footer_c1 .title,
  #layout_footer .logo_wrap .footer_d1 .title {
    position: relative;
    margin: 0;
    padding: 16px 28px 16px 0;
    color: #fff;
    background: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }

  #layout_footer .logo_wrap .title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }

  #layout_footer .logo_wrap .footer_contents > li.on .title::after {
    transform: translateY(-20%) rotate(225deg);
  }
}

/* ===== Floating top / chat buttons ===================================== */
#floating_over .float-button {
  box-sizing: border-box;
  position: absolute;
  display: grid;
  place-items: center;
  right: 24px;
  z-index: 3;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid #d9c6ff;
  border-radius: 50%;
  color: #7f3ff2;
  background: #fff;
  font-size: 0;
  line-height: 1;
  opacity: 1;
  box-shadow: 0 10px 30px rgba(31, 20, 52, 0.24);
  transition:
    color 0.35s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

#floating_over .float-button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 24px;
  height: 24px;
  margin: 0;
  transform: translate(-50%, -50%);
}

#floating_over .float-button svg path {
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#floating_over .float-button.to-top {
  bottom: 160px;
}

#floating_over .float-button.chat {
  bottom: 106px;
  color: #fff;
  background: #7f3ff2;
}

#floating_over .float-button.chat svg {
  width: 20px;
  height: 20px;
}

#floating_over .float-button.chat svg circle {
  fill: currentcolor;
}

@keyframes tp-floating-button-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@media (hover: hover) and (pointer: fine) {
  #floating_over .float-button.to-top:hover {
    color: #fff;
    background: #7f3ff2;
    border-color: #7f3ff2;
    animation: tp-floating-button-bob 1.15s ease-in-out infinite;
    box-shadow: 0 16px 34px rgba(31, 20, 52, 0.28);
  }

  #floating_over .float-button.chat:hover {
    color: #7f3ff2;
    background: #fff;
    border-color: #d9c6ff;
    box-shadow: 0 16px 34px rgba(31, 20, 52, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  #floating_over .float-button.to-top:hover {
    animation: none;
    transform: translateY(-2px);
  }
}

/* ===== Mobile bottom nav (#floating_over .fixed_menu) ===================
   Rebuilt from icon-only slots into the prototype's 5 labelled items —
   Menu / T.P Pick / Home / Cart / My — each an icon over a caption. The
   markup lives in layout_footer/standard.html; icons come from the workskin
   (…-b.png = black). Black on every page; the Real Trend page adds
   .tp-fnav--dark (set by the footer script) for a #262626 bar with white
   icons and labels. */
#floating_over .fixed_menu.tp-fnav {
  background: #fff;
}

#floating_over .fixed_menu.tp-fnav ul {
  padding: 8px 0 6px;
}

#floating_over .fixed_menu.tp-fnav ul li {
  width: 20%;
}

/* Reset the skin's height + background-image icon; this link is a column. */
#floating_over .fixed_menu.tp-fnav ul li a.tp-fnav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: auto;
  padding: 4px 0;
  background: none;
  text-decoration: none;
}

#floating_over .fixed_menu.tp-fnav .tp-fnav-ico {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#floating_over .fixed_menu.tp-fnav .tp-fnav-menu .tp-fnav-ico {
  background-image: url("../../images/icon/hamburger-b.png");
}

#floating_over .fixed_menu.tp-fnav .tp-fnav-tppick .tp-fnav-ico {
  background-image: url("../../images/icon/tppick.png");
}

#floating_over .fixed_menu.tp-fnav .tp-fnav-home .tp-fnav-ico {
  background-image: url("../../images/icon/home-b.png");
}

#floating_over .fixed_menu.tp-fnav .tp-fnav-cart .tp-fnav-ico {
  background-image: url("../../images/icon/cart-b.png");
}

#floating_over .fixed_menu.tp-fnav .tp-fnav-my .tp-fnav-ico {
  background-image: url("../../images/icon/my-b.png");
}

#floating_over .fixed_menu.tp-fnav .tp-fnav-label {
  color: #262626;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* Cart count, mirroring the header badge. */
#floating_over .fixed_menu.tp-fnav .tp-fnav-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 7px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  color: #fff;
  background: #7f56d9;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* ===== Real Trend page: dark bar, white icons ==========================
   White artwork supplied as …-w.png (T.P Pick uses tppick2.png), swapped in
   over the black icons on the dark bar. */
#floating_over .fixed_menu.tp-fnav.tp-fnav--dark {
  background: #262626;
}

#floating_over .fixed_menu.tp-fnav.tp-fnav--dark .tp-fnav-ico {
  display: block;
  visibility: visible;
  opacity: 1;
}

#floating_over .fixed_menu.tp-fnav.tp-fnav--dark .tp-fnav-menu .tp-fnav-ico {
  background-image: url("../../images/icon/menu-w.png");
}

#floating_over .fixed_menu.tp-fnav.tp-fnav--dark .tp-fnav-tppick .tp-fnav-ico {
  background-image: url("../../images/icon/tppick2.png");
}

#floating_over .fixed_menu.tp-fnav.tp-fnav--dark .tp-fnav-home .tp-fnav-ico {
  background-image: url("../../images/icon/home-w.png");
}

#floating_over .fixed_menu.tp-fnav.tp-fnav--dark .tp-fnav-cart .tp-fnav-ico {
  background-image: url("../../images/icon/cart-w.png");
}

#floating_over .fixed_menu.tp-fnav.tp-fnav--dark .tp-fnav-my .tp-fnav-ico {
  background-image: url("../../images/icon/my-w.png");
}

#floating_over .fixed_menu.tp-fnav.tp-fnav--dark .tp-fnav-label {
  color: #fff;
}

/* The skin's grey home-indicator pill is decorative only; hidden here so the
   labelled icon row is the whole of the bar. */
#floating_over .fixed_menu.tp-fnav .fixed_bar {
  display: none;
}

@media (max-width: 1124px) {
  /* Real Trend reserves this value below its full-screen reel. Keep it equal
     to the actual fixed navigation height so no black strip remains above it. */
  body.is-realtrend {
    --rt-floating-footer-h: calc(61px + env(safe-area-inset-bottom, 0px));
  }

  /* Keep the footer's original 40px closing space, then add the fixed menu
     height and the device safe area. At the end of the page .footer_comp can
     therefore scroll completely above the navigation instead of sitting
     behind it. */

  #floating_over,
  #floating_over .fixed_menu.tp-fnav {
    display: block;
  }

  /* At scrollTop 0 Firstmall's stock script repeatedly hides #floating_over
     (jQuery fadeOut → animates inline opacity, then display:none). We keep the
     fixed bottom nav inside #floating_over, so forcing it visible made the two
     fight and the whole layer (nav + scroll-top/chat buttons) flickered at the
     top of the page. Lock display AND opacity AND visibility so the stock fade
     has no visible effect — the inline opacity it sets each frame is overridden
     and the flicker stops. Search/modal states still hide individual controls
     via their own display:none on the buttons, which this does not touch. */
  #floating_over {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Full-screen pages such as Real Trend can establish their own viewport
     containing block. Pin the navigation itself so its icon row cannot be
     pushed below the visible screen. */
  #floating_over .fixed_menu.tp-fnav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    min-height: 61px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    overflow: visible;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  #floating_over .fixed_menu.tp-fnav ul {
    display: flex;
    align-items: center;
    min-height: 47px;
    margin: 0;
  }

  #floating_over .fixed_menu.tp-fnav .tp-fnav-ico {
    flex: 0 0 24px;
  }

  #floating_over .float-button {
    display: grid;
    right: 16px;
    right: max(16px, env(safe-area-inset-right, 0px));
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  #floating_over .float-button.to-top {
    bottom: calc(136px + env(safe-area-inset-bottom, 0px));
  }

  #floating_over .float-button.chat {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
}

/* The fixed bottom nav overlays the viewport, so the footer needs a real
   flow spacer after its content. Using an ::after block keeps the final company
   info/SNS area scrollable completely above the nav without changing body height
   during scroll. Apply this to both phone and tablet. */
@media only screen and (max-width: 1124px) {
  body.tp-has-fnav #layout_footer::after {
    content: "";
    display: block;
    height: calc(76px + env(safe-area-inset-bottom, 0px));
    background: #161616;
  }
}

/* Product detail (goods/view): the fixed bottom nav is removed on phone and
   tablet, so drop the bar and the footer spacer it would otherwise reserve.
   The id + extra class raise specificity over the base nav rule (no !important).
   Desktop is untouched. */
@media only screen and (max-width: 1120px) {
  body.is-goods-view #floating_over .fixed_menu.tp-fnav {
    display: none;
  }

  body.is-goods-view.tp-has-fnav #layout_footer::after {
    display: none;
  }
}

/* Real Trend uses its reel controls and fixed bottom navigation only. */
body.is-realtrend #floating_over .float-button {
  display: none;
}