/* Home-only neutral UI. Artwork keeps its original colors. */
.home-main {
  background:linear-gradient(180deg,#101211 0%,#121413 45%,#0c0e0d 100%)!important;
}
.home-main::before {
  background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.045),transparent 66%)!important;
}
.home-main::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  background:#000;
  opacity:var(--home-content-darkness,.25);
  will-change:opacity;
}
body > header .nav-links a.active,
body > header .nav-links a[aria-current="page"],
body > header .nav-links a[href="index.html#tool-directory"]:not(.header-btn) {
  color:#d4d8d5!important;
}
.hero-kicker-dot {
  background:#c4c9c6!important;
  box-shadow:none!important;
}

/* The home hero begins on the exact pixel where the shared header ends. */
html body > header{border-bottom:0!important}
html body > .hero-container{
  height:100svh!important;
  min-height:0!important;
  margin-top:0!important;
  border-top:0!important;
  border-bottom:0!important;
}
@supports(height:100dvh){html body > .hero-container{height:100dvh!important}}
html body .hero-container .hero-primary-action {
  color:#07130b!important;
  background:linear-gradient(135deg,#42e982,#22c862)!important;
  border-color:rgba(151,255,190,.72)!important;
  box-shadow:0 9px 26px rgba(15,184,83,.34)!important;
}
html body .hero-container .hero-primary-action:hover {
  background:linear-gradient(135deg,#55f394,#2bd36d)!important;
  border-color:#b3ffcf!important;
  box-shadow:0 13px 32px rgba(15,184,83,.46)!important;
}

/* Darken only the hero photography as it moves behind the viewport. */
html body .hero-container::after {
  background:
    linear-gradient(rgba(0, 0, 0, var(--hero-scroll-darkness, 0)), rgba(0, 0, 0, var(--hero-scroll-darkness, 0))),
    linear-gradient(90deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.04) 55%, rgba(0, 0, 0, 0.12)) !important;
  transition:none!important;
}
.hero-container .arrow-btn:hover,
.hero-container .arrow-btn:focus-visible {
  color:#fff!important;
  background:rgba(52,55,53,.92)!important;
  border-color:#7c817e!important;
}
.hero-thumbnails .thumb-card.active {
  border-color:transparent!important;
  box-shadow:none!important;
  transform:translateY(-2px) scale(.97)!important;
}
.hero-thumbnails .thumb-card.active:hover {
  transform:translateY(-2px) scale(.97)!important;
}
.hero-thumb-indicator {
  display:block!important;
  box-sizing:border-box!important;
  background:rgba(225,232,228,.085)!important;
  border:0!important;
  outline:0!important;
  border-radius:14px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.11),inset 0 -1px rgba(0,0,0,.08)!important;
  backdrop-filter:blur(26px) saturate(.82) brightness(1.04)!important;
  -webkit-backdrop-filter:blur(26px) saturate(.82) brightness(1.04)!important;
}

/* Keep the original Button_background and blur intact; only position the
   complete panel lower in the hero. */
html body .hero-container .hero-info-box {
  top:calc(100% - clamp(80px,8vh,108px) - 355px)!important;
  bottom:auto!important;
  width:540px!important;
  max-width:calc(100vw - 60px)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:584 / 693!important;
  padding:112px 38px 34px!important;
}
html body .hero-container .hero-info-box .mc-btn {
  margin-top:0!important;
}
/* Avoid the black compositor seam Firefox creates when a filtered mask is
   clipped at the bottom of the hero. */
html body .hero-container .hero-info-box::before {
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}
html body .hero-container .hero-info-box::after {
  content:none!important;
  display:none!important;
  background:none!important;
  filter:none!important;
}

@media(max-width:768px){
  html body .hero-container .hero-info-box{
    top:calc(100% - 70px - 285px)!important;
    bottom:auto!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:584 / 693!important;
    padding:78px 24px 25px!important;
  }
}
.home-section-heading .home-kicker,
.home-section-heading p,
.home-feature-strip i {
  color:#aeb4b0!important;
}
.home-section-heading .home-section-count {
  color:#c9cecb!important;
  background:rgba(42,45,43,.76)!important;
  border-color:#4d514f!important;
}
.home-tool-card,
.home-pick {
  border-color:#3c403e!important;
  box-shadow:0 10px 28px rgba(0,0,0,.3)!important;
}
.home-tool-card:hover,
.home-tool-card:focus-visible,
.home-pick:hover,
.home-pick:focus-visible {
  border-color:#777c79!important;
  outline-color:#929794!important;
  box-shadow:0 18px 42px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.05)!important;
}
.home-tool-card::after,
.home-pick::after {
  display:none!important;
  content:none!important;
}
.home-tool-card::before {
  background:linear-gradient(180deg,rgba(7,8,8,.04) 8%,rgba(7,8,8,.28) 40%,rgba(6,7,7,.96) 100%)!important;
}
.home-tool-card:hover::before {
  background:linear-gradient(180deg,rgba(7,8,8,.02),rgba(7,8,8,.22) 34%,rgba(6,7,7,.94) 100%)!important;
}
.home-tool-card > .home-card-icon {
  position:absolute;
  top:20px;
  left:20px;
  width:44px;
  height:44px;
  object-fit:contain;
  border:0;
  border-radius:10px;
  background:transparent;
  box-shadow:none;
  z-index:1;
}
.home-pick > .home-card-icon {
  flex:0 0 44px;
  width:44px;
  height:44px;
  object-fit:contain;
  border:0;
  border-radius:10px;
  background:transparent;
  box-shadow:none;
}
.home-tool-card > strong,
.home-pick > strong {
  color:#e4e7e5!important;
  background:rgba(38,41,39,.78)!important;
  border-color:#5b605d!important;
}
.home-pick-badge.new {
  color:#f0f2f1!important;
  background:#505451!important;
}
.home-pick.studio {
  background-image:linear-gradient(158deg,rgba(12,13,13,.58),rgba(10,11,11,.86) 58%,rgba(7,8,8,.95)),url("MPJstudio1.png")!important;
}
.home-pick.give {
  background-image:linear-gradient(158deg,rgba(12,13,13,.58),rgba(10,11,11,.86) 58%,rgba(7,8,8,.95)),url("Provide_background_1.webp")!important;
  background-size:cover!important;
  background-position:center!important;
}
.home-pick.mods {
  background-image:linear-gradient(158deg,rgba(12,13,13,.58),rgba(10,11,11,.86) 58%,rgba(7,8,8,.95)),url("magbFox_Mod Main-Background-Image.webp")!important;
}

.home-tool-card.datapack {
  background-image: linear-gradient(145deg, rgba(11,20,15,.18), rgba(5,9,7,.92)), url("./assets/minecraft-dirt.png") !important;
  background-size: auto, 64px 64px !important;
  background-repeat: no-repeat, repeat !important;
}
.home-feature-strip > div {
  border-color:#3f4341!important;
  background:rgba(28,30,29,.8)!important;
}
/* 쿠키 안내는 이제 cookie-consent.js 한 곳에서만 정합니다(모든 페이지 공통).
   여기 있던 홈 전용 덮어쓰기는, 홈만 회색 단추를 쓰게 만들어서 지웠습니다. */

@media(max-width:560px){
  .home-tool-card > .home-card-icon{top:17px;left:17px}
}

/* 런처 소개 페이지로 가는 홈 카드. 다른 카드와 같은 방식으로
   어두운 그라데이션 위에 실제 화면을 깔아 둡니다. */
.home-tool-card.launcher {
  background-image:
    linear-gradient(135deg, rgba(17, 120, 33, 0.28), rgba(0, 0, 0, 0.82)),
    url("magbcrafox-launcher-main.png");
  background-size: auto, cover;
  background-position: center, center top;
}

/* --- 썸네일 선택 테두리가 양 끝에서 잘리던 문제 -------------------------
   레일 안쪽 여백이 7px 인데 선택 테두리는 썸네일보다 8px 크게 그려집니다.
   그래서 첫/마지막 썸네일에 놓이면 테두리가 레일 경계에 딱 붙어(여유 -1px)
   둥근 모서리가 잘려 보였습니다. 좌우 여백을 넓혀 7px 여유를 만듭니다.
   (호버 때 걸리는 scale(1.05) 로 2.75px 커지는 것도 이 여유 안에 들어옵니다.) */
.hero-thumbnails {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
/* 양 끝 썸네일로 갈 때 쓰는, 목표를 지나치지 않는 이징.
   기본 이징 cubic-bezier(.18,1.58,.32,1) 은 목표를 10.4% 지나쳤다가 돌아오는데,
   첫/마지막 칸에서는 그 오버슈트가 레일 밖으로 나가 테두리가 잘리고
   overflow-x:auto 가 잠깐 스크롤 영역으로 인식해 스크롤바가 깜빡였습니다.
   가운데 칸들은 오버슈트가 레일 안에 들어오므로 튕김을 그대로 둡니다. */
.hero-thumb-indicator.no-overshoot {
  transition-timing-function: cubic-bezier(.22, .9, .3, 1) !important;
}