/*#region - PARAMETER - */
:root {
  /* COLOR */
  --col-linen: #FAF0E6;
  --col-text: #333333;

  /* FONT */
  --text-index: "myriad-pro", sans-serif;
  --text-content: "Noto Sans TC", sans-serif;

  /* RADIUS */
  --radius: 2.05cqw;
}
.btn {
  background: transparent;
}
img {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}
/*#endregion */

/*#region - SPLASH - */
.sp__bar-bg {
  width: 80%;
  height: 0.5cqw;
  background: #ddd;
}

.sp__bar-fill {
  height: 0.5cqw;
  width: 0%;
  background: linear-gradient(102deg, #56d8ff 0%, #9aff81 100%);
  transition: width 0.08s linear;
}

.sp__pct {
  font: 400 normal 3.59cqw var(--text-index);
  letter-spacing: 1cqw;
  color: #231815;
}
/*#endregion */

/*#region - BASE PAGE - */
.bg-layer {
  background-image: var(--menu-bg, url("/resource/bg.webp"));
  background-repeat: repeat-y;
  will-change: background-image;
}
.banner {
  width: 100%;
  aspect-ratio: 390/111;
}
.btn-back {
  width: 7.8cqw;
  height: 7.8cqw;
  position: absolute;
  top: 5cqw;
  left: 5cqw;
  z-index: 100;
  --target-color: var(--theme-col, #3add4a);
  --resource-img-url: url("/resource/back-btn.webp");
  filter: drop-shadow(0.26cqw 0.52cqw 0.5cqw rgba(0, 0, 0, 0.1));
  background: transparent;
}

.btn-back::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;

  background: var(--target-color);
  -webkit-mask: var(--resource-img-url) no-repeat center/contain;
  mask: var(--resource-img-url) no-repeat center/contain;
}
.footer {
  width: 100%;
  aspect-ratio: 390/83;
  display: flex;
  min-height: 0;
}
.btn__footer {
  flex: 1;
  height: 100%;
}
/*#endregion */

/*#region - THEME - */
.theme-label {
  width: 77.95cqw;
  aspect-ratio: 304/80;
  background: var(--label-bg) no-repeat center/100%100%;
  min-height: 0;
}
.theme-a {
  --menu-bg: url("/resource/menu-bg-a.webp");
  --label-bg: url("/resource/theme-a.webp");
  --theme-col: linear-gradient(90deg, #fa752b 0%, #ffbe4a 100%);
  --text-col: #fa752b;
}
.theme-b {
  --menu-bg: url("/resource/menu-bg-b.webp");
  --label-bg: url("/resource/theme-b.webp");
  --theme-col: linear-gradient(90deg, #5CC221 0%, #3AC764 100%);
  --text-col: #53aa21;
}
.theme-c {
  --menu-bg: url("/resource/menu-bg-c.webp");
  --label-bg: url("/resource/theme-c.webp");
  --theme-col: linear-gradient(90deg, #5058fa 0%, #a870ff 100%);
  --text-col: #5058fa;
}
.theme-d {
  --menu-bg: url("/resource/menu-bg-d.webp");
  --label-bg: url("/resource/theme-d.webp");
  --theme-col: linear-gradient(90deg, #57d5ff 0%, #008dde 100%);
  --text-col: #00a0df;
}
.theme-e {
  --menu-bg: url("/resource/menu-bg-e.webp");
  --label-bg: url("/resource/theme-e.webp");
  --theme-col: linear-gradient(90deg, #97c418 0%, #3cc930 100%);
  --text-col: #87ab1a;
}
.theme-f {
  --menu-bg: url("/resource/menu-bg-f.webp");
  --label-bg: url("/resource/theme-f.webp");
  --theme-col: linear-gradient(90deg, #6c86fa 0%, #d1beff 100%);
  --text-col: #7862d1;
}
.theme-g {
  --menu-bg: url("/resource/menu-bg-g.webp");
  --label-bg: url("/resource/theme-g.webp");
  --theme-col: linear-gradient(90deg, #fa6994 0%, #ff9780 100%);
  --text-col: #d84f48;
}
/*#endregion */

/*#region - HOME - */
.home-bg.bg-scroll {
  .bg-top {
    background-image: url("/resource/home-bg.webp");
    aspect-ratio: 390 / 650;
  }
  .bg-fill {
    background-image: url("/resource/home-bg_fill.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
.btn-enter {
  margin-top: 154.9cqw;
  margin-right: 2cqw;
  width: 34cqw;
  aspect-ratio: 133/28;
}
/*#endregion */

/*#region - INTRO - */
.map {
  margin-top: 17.6cqw;
  width: 83.4cqw;
  aspect-ratio: 328/369;
}
/*#endregion */

/*#region - THEME MENU - */
.theme-menu {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  margin-top: 14cqw;
  margin-bottom: 8.6cqw;
  gap: 3.3cqw;
}
/*#endregion */

/*#region - PRODUCT MENU - */
.btn-product {
  display: flex;
  flex-direction: row;
  align-items: start;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0.26cqw 0.52cqw 0px;
  .btn__id {
    width: 16.67%;
    height: 100%;
    background: var(--theme-col);
    border-radius: var(--radius) 0 0 var(--radius);
    font: 400 normal 3.59cqw var(--text-index);
    color: #ffff;
    text-align: center;
    align-content: center;
  }
  .btn__content {
    flex: 1;
    background-color: #ffff;
    border-radius: 0 var(--radius) var(--radius) 0;
    align-items: center;
    text-align: start;
    font: 700 normal 2.82cqw var(--text-content);
    letter-spacing: 0.6cqw;
    color: var(--text-col);
    padding: 2.25cqw 2cqw 2.25cqw 3.9cqw;
  }
  .btn__content.large {
    padding: 0.75cqw 1cqw 0.75cqw 5cqw;
    letter-spacing: 0.45cqw;
    line-height: 1.2;
  }
  .btn__content.median {
    letter-spacing: 0.45cqw;
    line-height: 1.2;
  }
}

.product-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 7.8cqw;
  padding: 0 11.5cqw;
  gap: 5.5cqw;

  margin-bottom: 11.8cqw;
}
/*#endregion */

/*#region - PRODUCT - */
.poster-area .progress-bar {
  width: 50%;
  height: 1cqw;
  background-color: #ddd;
  &::after {
    background: var(--theme-col);
  }
}
.product__btn-group {
  width: 100%;
  aspect-ratio: 390/80;
  position: absolute;
  bottom: 0;
  /* background: var(--theme-col); */
  .share-btn {
    background: var(--theme-col);
    width: 100%;
  }
}
.product__btn-group.show-share {
  .share-btn {
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
  }
}
/*#endregion */

/*#region - SCANNER - */
.pg__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
  background: url("/resource/bg.webp") no-repeat;
  background-size: 100% auto;
}
.pg__overlay.active {
  display: flex;
  pointer-events: auto;
}
.scan-ttl {
  width: 58.97cqw;
  aspect-ratio: 230/44;
  margin-top: 21.5cqw;
}
#scanner-container {
  margin-top: 11cqw;
  width: 72.3cqw;
  aspect-ratio: 1/1;
  overflow: hidden;
  pointer-events: none;
  background: #ffff;
  border-radius: 5.2cqw;
  position: relative;
}
#scanner-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*#endregion */