/* Home layout uses local brand artwork and the shared portal account form. */
html { scroll-behavior: smooth; }
body { margin: 0; background-color: #100701; }
.reference-header { display: none; }
.main > .access-text { display: none !important; }
.main-inner.sun-reference-home {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0 !important;
  color: #ffe5b7;
  background: #0c0402 url(main-bg-pc-C8GbqI8v.webp) center top / cover no-repeat;
}
.sun-reference-home *, .reference-header * { box-sizing: border-box; }
.reference-stage {
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  min-height: 880px;
  margin: 0 auto;
  padding-top: 15px;
  isolation: isolate;
}
.reference-stage::before {
  position: absolute;
  z-index: -1;
  top: 243px;
  inset-inline: 0;
  bottom: 0;
  content: "";
  background: url(bg-after-pc-D7gkf88o.png) center top / 100% auto no-repeat, linear-gradient(transparent, #0c0402 80%);
  pointer-events: none;
}
.reference-brand {
  width: 375px;
  max-width: 100%;
  height: 283px;
  margin: 0 auto;
  text-align: center;
}
.reference-brand img { display: block; height: auto; }
.reference-brand__mark { width: 190px; margin: 0 auto; }
.reference-brand__name { width: 230px; margin: 4px auto 9px; }
.reference-brand__slogan { display: flex; align-items: end; justify-content: center; gap: 2px; }
.reference-brand__slogan > img:first-child { width: 340px; max-width: calc(100% - 25px); }
.reference-brand__slogan .reference-brand__tick { width: 20px; }
.reference-center { position: relative; width: 434px; max-width: calc(100% - 30px); margin: 0 auto; text-align: center; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth {
  display: block !important;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0;
  margin: 0;
  padding: 30px 20px 34px;
  background: url(form-bg-tJMdHgEQ.webp) center / 100% 100% no-repeat;
  text-align: center;
}
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .input-wrapper { position: relative; padding: 0; margin: 0 0 30px; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .input-password { margin-bottom: 0; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .auth-nickname { margin-top: 24px; margin-bottom: 0; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .input-icon { position: absolute; width: 21px; height: 21px; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth input {
  display: block;
  width: 100%;
  height: 60px !important;
  padding: 0 42px 0 40px;
  border: 0;
  border-radius: 15px;
  background: url(input-bg-CiP8yC75.webp) center / 100% 100% no-repeat;
  color: #fff3d6;
  font: inherit;
  font-size: 20px;
  outline-offset: 3px;
}
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth input::placeholder { color: #827a6e; opacity: .72; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth input:focus-visible { outline: 1px solid #edc36d; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .btn-eye {
  position: absolute;
  inset-inline-end: 7px;
  top: 50%;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  background: url(eye1-MZvQCLB3.webp) center / 21px auto no-repeat;
  cursor: pointer;
}
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .btn-eye.slash { background-image: url(eye2-zLFL8NF-.webp); }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .btn-signup { width: 100%; margin-top: 35px; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .btn-signup > button {
  display: block;
  width: 370px !important;
  height: 61px !important;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  border: 0;
  border-radius: 40px;
  background: url(signup-bg-DdLTyk4p.webp) center / 100% 100% no-repeat !important;
  color: #ffe9bb;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 1px 3px #492a0a;
  cursor: pointer;
}
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .auth-message { margin: 16px 0 0; line-height: 1.45; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .auth-message:empty { display: none; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth [hidden] { display: none !important; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth[data-auth-step="nickname"] .input-username,
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth[data-auth-step="nickname"] .input-password { display: none; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth[data-auth-step="nickname"] .auth-nickname { margin-top: 0; }
:is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth button:disabled { opacity: .65; cursor: wait; }
#modalContentRegister .modal-content .loginForm.reference-auth { padding: 30px 20px 34px; max-width: 434px !important; margin-inline: auto; }
#modalContentRegister { overflow-y: auto; }
#modalContentRegister[aria-hidden="false"] { visibility: visible !important; opacity: 1; }
#modalContentRegister .modal-content { width: min(434px, calc(100vw - 32px)) !important; max-height: calc(100dvh - 32px); overflow-y: auto; }
.reference-divider { display: flex; align-items: center; gap: 15px; margin: 14px auto 17px; width: 85%; color: #cab28b; font-size: 16px; line-height: 20px; }
.reference-divider::before, .reference-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #80653755, transparent); }
.reference-play { display: flex; align-items: center; justify-content: center; width: 370px; max-width: 100%; height: 61px; margin: 0 auto; padding: 0 20px; border: 0; border-radius: 40px; color: #ffe5b7; background: url(access-bg-BnvOXkud.webp) center / 100% 100% no-repeat; font-size: 20px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.reference-note { position: relative; width: 700px; max-width: calc(100vw - 32px); left: 50%; transform: translateX(-50%); margin: 15px 0 0; color: #d2b783; font-size: 18px; line-height: 1.3; }
.reference-note strong { color: #ffb609; }
.reference-note span { color: #ff3939; }
.reference-banners { position: absolute; top: 160px; left: 5%; width: min(23.3vw, 335px); }
.reference-carousel__slides { position: relative; aspect-ratio: 335 / 580; overflow: hidden; border-radius: 36px; }
.reference-carousel__slide { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; cursor: pointer; }
.reference-carousel__slide.is-active { opacity: 1; visibility: visible; }
.reference-carousel__slide img { display: block; width: 100%; height: 100%; object-fit: fill; }
.reference-carousel__slide .reference-download-arrow { position: absolute; top: 32%; left: 76%; width: 14%; height: auto; object-fit: contain; }
.reference-carousel__dots { display: flex; align-items: center; justify-content: center; gap: 4px; height: 35px; }
.reference-carousel__dots button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.reference-carousel__dots button::after { position: absolute; top: 10px; left: 2px; width: 20px; height: 5px; border-radius: 4px; content: ""; background: #624c3e; }
.reference-carousel__dots button[aria-current="true"]::after { background: #ffe1c0; }
.reference-download { display: flex; align-items: center; justify-content: center; gap: 16px; color: #ffe7b2; font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; }
.reference-download__platforms { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.reference-download__platforms img { width: 37px; height: auto; }
.reference-download__qr { display: block; width: 92px; height: 92px; padding: 3px; background: white; }
.reference-warning { position: absolute; top: 200px; right: 2%; width: min(23.61112vw, 340px); }
.reference-warning__card { position: relative; overflow: hidden; border: 1px solid #76571f; border-radius: 36px; background: #090300; }
.reference-warning__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 52px; padding: 0 14px; border-bottom: 1px solid #514323; }
.reference-warning__heading h2 { margin: 0; color: #ffdfbd; font-size: clamp(15px, 1.45vw, 21px); line-height: 1; }
.reference-warning__heading button { width: 91px; height: 32px; padding: 0 6px; border: 1px solid #d86e4c; border-radius: 20px; background: linear-gradient(#7b0704, #390000 60%, #820d06); box-shadow: inset 0 0 6px #ec533c; color: #ffdfbd; font: inherit; font-size: 16px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.reference-warning__poster { display: block; width: 100%; height: 375px; object-fit: cover; }
.reference-social { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 48px; }
.reference-social a, .reference-social button { display: block; width: 38px; height: 38px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.reference-social img { display: block; width: 100%; height: 100%; object-fit: contain; }
.reference-mobile-warning, .reference-mobile-indicator { display: none; }
.sun-reference-home > .partner { position: relative; flex: 0 0 auto; width: 100%; margin: 0 auto; padding: 0; background: #0c0402; }
.sun-reference-home .partner-title { margin: 0; padding: 0; font-size: 16px; line-height: normal; }
.sun-reference-home .partner-content { position: static; flex-wrap: nowrap; width: min(780px, 100%); margin: 0 auto; padding: 7px 0 18px; }
.sun-reference-home .partner-content::before { width: 55%; top: 0; left: 22.5%; }
.sun-reference-home .partner-content .partner-item { width: 33.333%; padding: 0 20px; flex-direction: row; gap: 10px; }
.sun-reference-home .partner-content .partner-item > span { font-size: 18px; }
.sun-reference-home .partner-content img { width: 63px; }
.reference-stage :focus-visible, .reference-header :focus-visible { outline: 2px solid #ffe3a0; outline-offset: 4px; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .reference-banners { left: 2%; }
  .reference-warning { right: 2%; }
  .reference-warning__heading { padding-inline: 9px; }
  .reference-warning__heading span { padding-inline: 5px; font-size: 9px; }
}
@media (max-width: 1023px) {
  .reference-header { display: block; position: absolute; inset: 0 0 auto; z-index: 30; width: 100%; height: 0; }
  .reference-header__support { position: absolute; top: 15px; left: 15px; display: flex; flex-direction: column; gap: 10px; }
  .reference-header__support button, .reference-header__support a { display: block; width: 33px; height: 33px; padding: 0; border: 0; background: none; cursor: pointer; }
  .reference-header__support img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .reference-header__download { position: absolute; top: 15px; right: 0; display: block; width: 110px; }
  .reference-header__download img { display: block; width: 100%; height: auto; }
  .reference-header__download .reference-download-arrow { position: absolute; top: 26px; left: 4px; width: 17px; }
  .main-inner.sun-reference-home { background-image: url(main-bg-sp-BJahcs9N.webp); background-size: cover; }
  .reference-stage { min-height: 0; padding-top: 18px; padding-bottom: 40px; }
  .reference-stage::before { top: 219px; background-image: url(bg-after-sp-C4SrjLb0.png); background-size: 100% auto; }
  .reference-brand { width: 375px; height: 245px; }
  .reference-brand__mark { width: 175px; }
  .reference-brand__name { width: 180px; margin-top: 4px; margin-bottom: 4px; }
  .reference-brand__slogan > img:first-child { width: 230px; }
  .reference-brand__slogan .reference-brand__tick { width: 15px; }
  .reference-center { width: calc(100% - 30px); max-width: 434px; margin-top: 0; }
  :is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth { padding: 30px 20px 33px; }
  :is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .input-wrapper { margin-bottom: 25px; }
  :is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .input-password { margin-bottom: 0; }
  :is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth input { height: 50px !important; font-size: 16px; padding-left: 29px; border-radius: 14px; }
  :is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .input-icon { left: 9px; width: 15px; height: 15px; }
  :is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .btn-eye { width: 35px; background-size: 18px auto; }
  :is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .btn-signup { margin-top: 30px; }
  :is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth .btn-signup > button { width: 100% !important; height: 55px !important; font-size: 18px; }
  .reference-divider, .reference-note, .reference-banners, .reference-warning { display: none; }
  .reference-play { width: 314px; max-width: calc(100% - 30px); height: 50px; margin-top: 17px; font-size: 16px; }
  .reference-mobile-warning { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; min-height: 39px; margin: 30px 0 0; padding: 0; border: 0; background: none; color: #ffe3b1; font: inherit; font-size: 15px; cursor: pointer; }
  .reference-mobile-warning img { width: 52px; height: auto; }
  .reference-mobile-warning span { border-bottom: 1px solid #e9c586; padding-bottom: 2px; }
  .reference-mobile-warning strong { color: #ed4242; }
  .reference-mobile-indicator { display: flex; justify-content: center; gap: 8px; margin-top: 3px; }
  .reference-mobile-indicator i { width: 14px; height: 4px; border-radius: 4px; background: #745b45; }
  .reference-mobile-indicator i:nth-child(2) { background: #ffdcbc; }
  .sun-reference-home .partner-title { padding: 0; font-size: 13px; }
  .sun-reference-home .partner-content { padding: 7px 0 10px; }
  .sun-reference-home .partner-content::before { width: 100%; top: 0; left: 0; }
  .sun-reference-home .partner-content .partner-item { flex-direction: column; padding: 0 8px; gap: 4px; }
  .sun-reference-home .partner-content .partner-item > span { font-size: 12px !important; }
  .sun-reference-home .partner-content img { width: 63px; }
}
@media (max-width: 359px) {
  .reference-brand { width: 270px; }
  .reference-brand__mark { width: 168px; }
  .reference-brand__name { width: 185px; }
  .reference-brand__slogan > img:first-child { width: 228px; }
  .reference-header__download { width: 93px; }
  .reference-header__support { left: 10px; }
  :is(.sun-reference-home, #modalContentRegister) .loginForm.reference-auth { padding-inline: 16px; }
  .reference-play { width: calc(100% - 24px); gap: 16px; }
  .reference-mobile-warning { font-size: 13px; gap: 10px; }
}
@media (min-width: 1601px) {
  .reference-warning { right: 5%; width: 380px; }
  .reference-warning__poster { height: 426px; }
}
@media (min-width: 1700px) {
  .reference-banners { left: 8%; }
  .reference-warning { right: 8%; }
}
@media (min-width: 1024px) and (max-height: 880px) {
  .reference-stage { min-height: 675px; }
  .reference-stage::before { top: 188px; }
  .reference-brand { height: 221px; }
  .reference-brand__mark { width: 140px; }
  .reference-brand__name { width: 190px; }
  .reference-center { width: 380px; }
  .sun-reference-home .loginForm.reference-auth { padding: 20px 20px 24px; }
  .sun-reference-home .loginForm.reference-auth input { height: 48px !important; font-size: 18px; }
  .sun-reference-home .loginForm.reference-auth .btn-signup > button { width: 90% !important; height: 50px !important; font-size: 18px; }
  .reference-divider { margin-top: 9px; }
  .reference-play { width: 335px; height: 52px; font-size: 18px; }
  .reference-note { font-size: 16px; }
  .reference-banners { top: 13vh; width: 310px; }
  .reference-carousel__slides { aspect-ratio: 310 / 510; }
  .reference-download__qr { width: 80px; height: 80px; }
  .reference-download__platforms img { width: 30px; }
  .reference-warning { top: 19vh; }
  .sun-reference-home .partner-content img { width: 55px; }
  .sun-reference-home .partner-title { font-size: 13px; }
  .sun-reference-home .partner-content .partner-item > span { font-size: 16px; }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .reference-brand { height: 250px; }
  .reference-brand__mark { width: 145px; }
  .reference-brand__name { width: 190px; }
  .reference-center { width: 380px; }
  .reference-banners { left: 2%; top: 17vh; width: 275px; }
  .reference-carousel__slides { aspect-ratio: 275 / 450; }
  .reference-download { display: none; }
  .reference-warning { right: 2%; top: 20vh; width: 282px; }
  .reference-warning__poster { height: 316px; }
  .reference-warning__heading h2 { font-size: 16px; }
  .reference-warning__heading button { width: 72px; height: 26px; font-size: 12px; }
}
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .reference-brand { height: 330px; }
  .reference-brand__mark { width: 260px; }
  .reference-brand__name { width: 280px; }
  .reference-brand__slogan > img:first-child { width: 300px; }
  .reference-stage::before { top: 295px; }
  .reference-play { width: 370px; height: 61px; font-size: 20px; }
  .reference-mobile-warning { font-size: 20px; }
}
@media (min-width: 400px) and (max-width: 767px) {
  .reference-brand { height: 265px; }
  .reference-brand__name { width: 200px; margin-top: 6px; }
  .reference-stage::before { top: 225px; }
}
@media (max-width: 389px) {
  .reference-brand { height: 232px; }
  .reference-brand__slogan > img:first-child { width: 220px; }
  .reference-stage::before { top: 207px; }
  .reference-play { width: 275px; height: 47px; }
}
@media (max-width: 767px) and (max-height: 720px) {
  .reference-brand { height: 200px; }
  .reference-brand__mark { width: 130px; }
  .reference-brand__name { width: 160px; margin-top: 9px; }
  .reference-stage::before { top: 182px; }
  .reference-stage { padding-bottom: 25px; }
  .sun-reference-home .partner-content img { width: 45px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reference-carousel__slide { transition: none; }
}