:root {
  --orange: #ff6b00;
  --blue: #20b9e7;
  --panel: #eee;
  --hero-placeholder: #ff3b83;
  --image-placeholder: #18d2dc;
}

/* 頁首主視覺。 */
.topBanner {
  height: 670px;
  background-color: #ccc;
  background-image: url("../images/banner.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.topBanner .bannerInner { height: 100%; position: relative; }
.topBanner .year {
  position: absolute;
  top: 0;
  right: 0;
  width: 112px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--orange);
  font-size: 28px;
  font-weight: 400;
}
.topBanner .brandTitle {
  position: absolute;
  width: 690px;
  height: auto;
  top: 170px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--orange);
}
.brandTitle .sketchbook {
  position: absolute;
  right: 0;
  top: 20px;
  color: var(--blue);
  font-family: "Arial Narrow", Impact, sans-serif;
  font-size: 52px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1;
}
.brandTitle .sketchbook sup { position: absolute; right: -6px; top: -25px; font-size: 28px; color: var(--orange); }
.brandTitle .brandName { display: block; font-size: 190px; font-weight: 800; letter-spacing: -15px; line-height: 1.2; }
.brandTitle .brandChinese { font-size: 204px; letter-spacing: -24px; }
.topBanner .seriseTitle { position: absolute; bottom: 80px; left: 0; }
.topBanner .seriseTitle .sub { color: #fff; font-size: 14px; font-weight: 700; }
.topBanner .seriseTitle h1 { color: var(--orange); font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: -1.5px; }

/* 面板向主視覺重疊 80px，橘色上邊線對齊標題。 */
.bonusContent { position: relative; margin-top: -80px; padding-bottom: 0; }
.bonusPanel { background: var(--panel); border-top: 10px solid var(--orange); padding: 50px 30px; }
.bonusPanel .titleSet { margin-bottom: 30px; }
.bonusPanel .titleSet h2 { font-size: 40px; line-height: 1.1; font-weight: 800; }
.bonusPanel .titleSet p { font-size: 16px; line-height: 1.4; }
.monthList { column-gap: 60px; row-gap: 30px; }
.monthItem { min-width: 0; }
.monthCover { width: 100%; aspect-ratio: 300 / 425; border: 1px solid var(--orange); object-fit: cover; }
.imagePlaceholder { background: var(--image-placeholder); }
.comingSoon { gap: 6px; background: #fff; text-align: center; }
.comingSoon span { color: var(--orange); font-size: 12px; }
.comingSoon p { color: #999; font-size: clamp(20px, 2.2vw, 36px); line-height: 1.2; font-weight: 400; white-space: nowrap; letter-spacing: -1px; }
.monthItem figcaption { font-size: 14px; line-height: 1.4; }

@media screen and (max-width: 1140px) {
  .topBanner { height: 580px; }
  .topBanner .brandTitle { width: 590px; top: 140px; }
  .brandTitle .brandName { font-size: 162px; }
  .brandTitle .brandChinese { font-size: 174px; }
  .brandTitle .sketchbook { font-size: 44px; }
  .monthList { gap: 30px; }
}
@media screen and (max-width: 768px) {
  .topBanner { height: 460px; }
  .topBanner .year { width: 70px; height: 60px; font-size: 20px; }
  .topBanner .brandTitle { width: min(90%, 450px); top: 135px; }
  .brandTitle .brandName { font-size: clamp(76px, 21vw, 124px); letter-spacing: -8px; }
  .brandTitle .brandChinese { font-size: clamp(82px, 22.5vw, 133px); letter-spacing: -14px; }
  .brandTitle .sketchbook { font-size: clamp(22px, 5.8vw, 34px); top: 7px; letter-spacing: 1px; }
  .brandTitle .sketchbook sup { font-size: 17px; top: -15px; right: 0; }
  .topBanner .seriseTitle { bottom: 65px; }
  .topBanner .seriseTitle .sub { font-size: 12px; }
  .topBanner .seriseTitle h1 { font-size: clamp(25px, 6.5vw, 38px); letter-spacing: -1px; }
  .bonusContent { margin-top: -55px; padding-bottom: 0; }
  .bonusPanel { border-top-width: 6px; padding: 30px 15px; }
  .bonusPanel .titleSet { margin-bottom: 24px; }
  .bonusPanel .titleSet h2 { font-size: 30px; }
  .bonusPanel .titleSet p { font-size: 14px; }
  .monthList.Grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .comingSoon span { font-size: 10px; }
  .comingSoon p { font-size: clamp(17px, 4.1vw, 29px); letter-spacing: -.7px; }
  .monthItem figcaption { font-size: 12px; }
}
@media screen and (max-width: 359px) {
  .monthList.Grid.g4 { grid-template-columns: minmax(0, 1fr); }
  .comingSoon p { font-size: 30px; }
}

/* 已公布圖片按鈕與大圖輪播。 */
.monthOpen { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; font: inherit; }
.monthOpen:focus-visible { outline: 3px solid #006b8f; outline-offset: 4px; }
.lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(var(--image-width, 90vw), 90vw, calc((90dvh - 98px) * var(--image-ratio, .705882)));
  max-width: none;
  max-height: 90dvh;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(0, 0, 0, .68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightboxPanel {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-rows: auto 44px;
  align-items: center;
  row-gap: 8px;
  padding: 44px 0 0;
}
.lightboxFigure { display: contents; }
.lightboxImage {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(90dvh - 98px);
  object-fit: contain;
  border: 1px solid var(--orange);
}
.lightboxCaption {
  grid-column: 2;
  grid-row: 2;
  text-align: center;
  font-size: clamp(16px, 1.5vw, 28px);
  line-height: 1.3;
}
.lightbox button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.lightbox button svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lightbox button:hover { color: var(--orange); }
.lightbox button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.lightbox button[hidden] { display: none; }
.lightboxClose { position: absolute; top: 0; right: -6px; }
.lightboxPrev { grid-column: 1; grid-row: 2; justify-self: start; margin-left: -6px; }
.lightboxNext { grid-column: 3; grid-row: 2; justify-self: end; margin-right: -6px; }

/* 768px 以下不含 768px：福利主標題改為白色。 */
@media screen and (width < 768px) {
  .topBanner .seriseTitle h1 { color: #fff; }
}

/* 手機月份列表：單列橫向滑動，保留下一張一角作為滑動提示。 */
@media screen and (width < 768px) {
  .monthList.Grid.g4 {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    /* 捲動視窗延伸至灰色面板邊緣，留白跟隨內容捲動。 */
    width: calc(100% + 30px);
    margin-inline: -15px;
    padding: 4px 15px 8px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 15px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .monthList.Grid.g4::-webkit-scrollbar { display: none; }
  .monthList > .monthItem {
    flex: 0 0 82%;
    width: 82%;
    max-width: 300px;
    scroll-snap-align: start;
  }
  .monthList .comingSoon p { font-size: clamp(24px, 6vw, 36px); }
}

/* 新版頁尾：獨立 Logo 與全寬橘色版權列。 */
.siteFooter { margin-top: 100px; text-align: center; }
.siteFooter .footerLogo { display: block; width: 175px; height: auto; margin: 0 auto 30px; }
.siteFooter .copyright { padding: 20px 15px; background: var(--orange); color: #fff; font-size: 12px; line-height: 1.4; }
@media screen and (width < 768px) {
  .siteFooter { margin-top: 60px; }
  .siteFooter .footerLogo { margin-bottom: 24px; }
}

@media screen and (width < 768px) {
  .bonusContent.innerBox { width: 100%; }
}