/* ==========================================================================
   나우다고 구매 홈페이지 — 반응형 스타일시트
   최소 지원 폭: 320px (모바일 퍼스트)
   ========================================================================== */

@font-face {
  font-family: "Hakgyoansim Jiugae";
  src: url("../font/HakgyoansimJiugaeR.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../font/WorkSans-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Wanted Sans";
  src: url("../font/WantedSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Wanted Sans";
  src: url("../font/WantedSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Wanted Sans";
  src: url("../font/WantedSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Figma variable tokens */
  --color-black: #332f28;
  --color-black-light: #55524d;
  --color-red: #f45540;
  --color-main: #ffce33;
  --color-green: #0eaa4d;
  --color-green-light: #59c93a;
  --color-green-dark: #0e8b35;
  --color-white: #ffffff;
  --color-cream: #fdf3e2;
  --color-cream-light: #fdf6ea;
  --color-dark: #2b2621;

  --font-title-kr: "Hakgyoansim Jiugae", sans-serif;
  --font-title-en: "Work Sans", sans-serif;
  --font-body: "Wanted Sans", sans-serif;
  --title-weight: 400;

  --container-width: 1080px;
  --header-height: 60px;
}

/* Per-language font overrides: Korean title font can't render CJK/Latin
   glyphs outside Korean, so other locales fall back to their native stack.
   Title weight also varies per language (Hakgyoansim Jiugae only ships a
   Regular weight; other scripts get a bolder weight for equivalent punch). */
html[lang="en"] {
  --font-title-kr: var(--font-title-en);
  --title-weight: 800;
}

html[lang="ja"] {
  --font-title-kr: "Noto Sans JP", var(--font-body);
  --font-body: "Noto Sans JP", sans-serif;
  --title-weight: 700;
}

html[lang="zh-CN"] {
  --font-title-kr: "Microsoft YaHei", "PingFang SC", var(--font-body);
  --font-body: "Microsoft YaHei", "PingFang SC", sans-serif;
  --title-weight: 700;
}

html[lang="zh-TW"] {
  --font-title-kr: "Noto Sans TC", "PingFang TC", var(--font-body);
  --font-body: "Noto Sans TC", "PingFang TC", sans-serif;
  --title-weight: 700;
}

@media (min-width: 900px) {
  :root {
    --header-height: 80px;
  }
}

* {
  box-sizing: border-box;
}

/* Below 900px, .site-header's sticky box includes .mobile-tabbar underneath
   the row — scroll-padding-top has to clear that whole sticky height (not
   just --header-height) plus a little breathing room, or an anchor jump
   lands the section title flush against the tab bar. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 52px + 16px);
}

@media (min-width: 900px) {
  html {
    scroll-padding-top: calc(var(--header-height) + 16px);
  }
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, p {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header and footer use a wider 1280px container than the page content. */
.site-header .container,
.site-footer .container {
  max-width: 1280px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Scroll reveal: content (not the section background) fades/slides up one
   by one as it enters view. Grouped items (card grids, FAQ list) cascade
   with a small stagger instead of popping in all at once. */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.howto-grid > [data-reveal]:nth-child(1),
.faq-list > [data-reveal]:nth-child(1),
.why-grid > [data-reveal]:nth-child(1) {
  transition-delay: 0s;
}
.howto-grid > [data-reveal]:nth-child(2),
.faq-list > [data-reveal]:nth-child(2),
.why-grid > [data-reveal]:nth-child(2) {
  transition-delay: 0.1s;
}
.howto-grid > [data-reveal]:nth-child(3),
.faq-list > [data-reveal]:nth-child(3),
.why-grid > [data-reveal]:nth-child(3) {
  transition-delay: 0.2s;
}
.howto-grid > [data-reveal]:nth-child(4),
.faq-list > [data-reveal]:nth-child(4) {
  transition-delay: 0.3s;
}
.howto-grid > [data-reveal]:nth-child(5),
.faq-list > [data-reveal]:nth-child(5) {
  transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid rgba(51, 47, 40, 0.06);
}

.site-header__row {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-header__logo img {
  width: 36px;
  height: 36px;
}

/* Desktop inline nav (hidden on mobile — mobile uses .mobile-tabbar instead) */
.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
}

.site-nav__list a {
  display: block;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}

.site-nav__list a:hover {
  background: rgba(51, 47, 40, 0.05);
}

.header-lang {
  display: none;
}

/* Mobile: horizontal scrollable tab bar fixed under the header row */
.mobile-tabbar {
  border-top: 1px solid rgba(51, 47, 40, 0.06);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mobile-tabbar::-webkit-scrollbar {
  display: none;
}

.mobile-tabbar__list {
  display: flex;
  gap: 4px;
  padding: 0 12px;
  width: max-content;
  min-width: 100%;
}

.mobile-tabbar__list a {
  display: block;
  padding: 14px 14px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-black-light);
}

/* Mobile language trigger: globe icon + current label, no chevron */
.mobile-lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.mobile-lang-trigger img.icon-globe {
  width: 18px;
  height: 18px;
}

/* Mobile language bottom sheet */
.lang-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}

.lang-sheet.is-open {
  visibility: visible;
  pointer-events: auto;
}

.lang-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 38, 33, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lang-sheet.is-open .lang-sheet__backdrop {
  opacity: 1;
}

.lang-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  border-radius: 20px 20px 0 0;
  padding: 10px 16px max(24px, calc(env(safe-area-inset-bottom) + 16px));
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

/* Scroll lives on the list (not the transformed panel) — combining a CSS
   transform with overflow:auto on the same element is a known source of
   touch hit-testing bugs on iOS Safari, which could make the last item(s)
   in the list register taps on the wrong row. */
.lang-sheet__list {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  overflow-y: auto;
}

.lang-sheet.is-open .lang-sheet__panel {
  transform: translateY(0);
}

.lang-sheet__handle {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(51, 47, 40, 0.15);
  margin: 6px auto 14px;
}

.lang-sheet__list button {
  width: 100%;
  text-align: left;
  padding: 14px 10px;
  font-size: 16px;
  border-bottom: 1px solid rgba(51, 47, 40, 0.06);
  touch-action: manipulation;
}

.lang-sheet__list li:last-child button {
  border-bottom: none;
}

.lang-sheet__list button.is-active {
  color: var(--color-green);
  font-weight: 700;
}

/* Language dropdown (desktop only) */
.lang-dropdown {
  position: relative;
}

.lang-dropdown__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 4px;
  white-space: nowrap;
}

.lang-dropdown__toggle img.icon-globe {
  width: 18px;
  height: 18px;
}

.lang-dropdown__toggle .icon-chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.lang-dropdown.is-open .lang-dropdown__toggle .icon-chevron {
  transform: rotate(180deg);
}

.lang-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(51, 47, 40, 0.15);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 50;
}

.lang-dropdown.is-open .lang-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown__menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  font-size: 14px;
  border-radius: 8px;
}

.lang-dropdown__menu button:hover {
  background: rgba(51, 47, 40, 0.05);
}

.lang-dropdown__menu button.is-active {
  color: var(--color-green);
  font-weight: 700;
}

@media (min-width: 900px) {
  .mobile-tabbar,
  .mobile-lang-trigger,
  .lang-sheet {
    display: none;
  }

  .site-header__logo img {
    width: 50px;
    height: 50px;
  }

  .site-nav {
    display: block;
  }

  .site-nav__list {
    gap: 0;
  }

  .site-nav__list a {
    padding: 8px 40px;
    font-size: 20px;
    border-radius: 0;
  }

  .header-lang {
    display: block;
  }
}

/* ==========================================================================
   Section base
   ========================================================================== */

.section-title {
  font-family: var(--font-title-kr);
  font-weight: var(--title-weight);
  font-size: clamp(26px, 5vw, 40px);
  text-align: center;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

@media (min-width: 1080px) {
  .section-title {
    font-size: 48px;
  }
}

/* Section headings render as pre-exported, per-language SVGs (pixel-accurate
   to Figma, sidesteps webfont weirdness across scripts) instead of the live
   text heading; main.js swaps <picture>'s img/source to the current
   language's file on nowda:langchange. Below 768px, <picture>'s <source>
   points at a dedicated *_title_mo* export instead of scaling the desktop
   graphic down, same responsive-image pattern already used for
   .hero picture / .purchase-banner picture. */
.section-title-picture {
  display: block;
}

.section-title-graphic {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Reserve the right box before each title graphic loads (CLS). The mobile
   and desktop SVG exports aren't simple linear scales of each other, so
   each needs its own ratio at each breakpoint rather than one shared value. */
[data-title-base="why"] .section-title-graphic {
  aspect-ratio: 360 / 64;
}
[data-title-base="movie"] .section-title-graphic {
  aspect-ratio: 360 / 62;
}
[data-title-base="howto"] .section-title-graphic {
  aspect-ratio: 360 / 61;
}
[data-title-base="purchase"] .section-title-graphic,
[data-title-base="facility"] .section-title-graphic,
[data-title-base="faq"] .section-title-graphic {
  aspect-ratio: 360 / 31;
}

@media (min-width: 768px) {
  [data-title-base="why"] .section-title-graphic {
    aspect-ratio: 1080 / 120;
  }
  [data-title-base="movie"] .section-title-graphic {
    aspect-ratio: 1080 / 116;
  }
  [data-title-base="howto"] .section-title-graphic {
    aspect-ratio: 1080 / 113;
  }
  [data-title-base="purchase"] .section-title-graphic,
  [data-title-base="facility"] .section-title-graphic,
  [data-title-base="faq"] .section-title-graphic {
    aspect-ratio: 1080 / 58;
  }
}

.section-title {
  display: none;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--color-main);
  text-align: center;
  overflow: hidden;
}

.hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1140;
}

@media (min-width: 900px) {
  .hero__img {
    aspect-ratio: 1920 / 920;
  }
}

.hero picture {
  display: block;
}

/* Mascot group sits on the hero photo as one scaling unit: every child is
   positioned as a percentage of .hero-character-wrap itself, so shrinking
   the wrap (by width) scales the whole arrangement together instead of each
   piece scaling independently. Desktop's reference box is 1300x450 (fixed
   above that, shrinks below); mobile's is 720x400 but isn't capped — the
   720 reference is only there so the source art doesn't look soft, the box
   itself always fills 100% of the viewport width. */
.hero-character-wrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1300px;
  aspect-ratio: 1300 / 450;
  pointer-events: none;
}

.hero-character {
  position: absolute;
  display: block;
}

.hero-character--01-shadow {
  left: 3.6154%;
  top: 4.2222%;
  width: 28.7692%;
  height: 84.4444%;
}

.hero-character--01-lottie {
  left: 3.6154%;
  top: 4.2222%;
  width: 28.7692%;
  height: 79.5556%;
}

.hero-character--03 {
  left: 35%;
  top: 39.1111%;
  width: 7.0769%;
  height: 28%;
}

.hero-character--02 {
  left: 84.7692%;
  top: 61.3333%;
  width: 12.8462%;
  height: 38.2222%;
}

@media (max-width: 899px) {
  .hero-character-wrap {
    max-width: none;
    aspect-ratio: 720 / 400;
  }

  .hero-character--01-shadow {
    left: 0;
    top: auto;
    bottom: 0;
    width: 51.9444%;
    height: 95%;
  }

  .hero-character--01-lottie {
    left: 0;
    top: auto;
    bottom: 5.5%;
    width: 51.9444%;
    height: 89.5%;
  }

  .hero-character--03 {
    left: -3.0556%;
    top: 0;
    width: 12.7778%;
    height: 31.5%;
    transform: rotate(26deg);
  }

  .hero-character--02 {
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    width: 27.7778%;
    height: 43%;
  }
}

/* ==========================================================================
   Video section
   ========================================================================== */

.video-section {
  position: relative;
  background: var(--color-main);
  padding: 40px 0;
  overflow: hidden;
}

@media (min-width: 1080px) {
  .video-section {
    padding: 100px 0;
  }
}

.video-section__title {
  margin-bottom: 24px;
}

@media (min-width: 1080px) {
  .video-section__title {
    margin-bottom: 32px;
  }
}

.video-section .container {
  position: relative;
  z-index: 1;
}

/* Confetti pair sits centered as a unit, pinned to the very top of the
   section (title renders above it via the container's z-index so text
   stays legible). On mobile it scales down to stay visible; on desktop
   it's a fixed 715px/370px-gap pair (715+370+715=1800, the design's
   reference width) that gets cropped by the section's overflow:hidden
   rather than shrinking as the viewport narrows below that. */
.video-section__confetti-row {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  pointer-events: none;
}

.video-section__confetti {
  width: 100px;
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .video-section__confetti-row {
    display: flex;
    gap: 160px;
  }

  .video-section__confetti {
    width: 200px;
  }
}

@media (min-width: 1080px) {
  .video-section__confetti-row {
    gap: 370px;
  }

  .video-section__confetti {
    width: 715px;
  }
}

/* movie_bg is pinned to the bottom of the whole section (not just the
   video+card stack) at its native ratio, so it overlaps behind the lower
   part of the video frame and the discover card exactly like the design. */
.video-section__bg {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 640;
  pointer-events: none;
}

/* Stack: video frame + discover card, sitting above movie_bg */
.video-section__stack {
  position: relative;
}

.video-frame {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #2b2621;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-frame__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.video-frame__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-frame__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  transition: background 0.15s ease, transform 0.15s ease;
}

.video-frame__facade:hover .video-frame__play {
  background: rgba(244, 85, 64, 0.9);
  transform: translate(-50%, -50%) scale(1.06);
}

@media (min-width: 1080px) {
  .video-frame__play {
    width: 84px;
    height: 84px;
  }
}

/* Discover card */
.discover-card {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 24px auto 0;
  background: var(--color-cream);
  border-radius: 24px;
  padding: 40px 24px;
  text-align: center;
}

.discover-card__title {
  font-family: var(--font-title-en);
  font-weight: 800;
  font-size: clamp(22px, 4.5vw, 32px);
  color: var(--color-black);
}

.discover-card__title--accent {
  color: var(--color-red);
}

.discover-card__body {
  margin-top: 20px;
  font-size: clamp(14px, 2.4vw, 16px);
  color: var(--color-black);
}

.discover-card__body p + p {
  margin-top: 14px;
}

.discover-card__body strong {
  font-weight: 700;
}

@media (min-width: 1080px) {
  .discover-card__title {
    font-size: 50px;
  }

  .discover-card__body {
    font-size: 23px;
  }
}

/* ==========================================================================
   Why section
   ========================================================================== */

.why-section {
  background: var(--color-green);
  padding: 40px 0;
}

@media (min-width: 1080px) {
  .why-section {
    padding: 100px 0;
  }
}

.why-section__title {
  margin-bottom: 24px;
}

@media (min-width: 1080px) {
  .why-section__title {
    margin-bottom: 48px;
  }
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.why-card {
  background: var(--color-cream-light);
  border-radius: 24px;
  padding: 28px 24px;
  text-align: center;
}

@media (min-width: 1080px) {
  .why-card {
    border-radius: 30px;
    padding: 36px 32px;
  }
}

.why-card__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  margin: 0 auto 16px;
}

.why-card__title {
  color: var(--color-red);
  font-size: clamp(18px, 3.4vw, 22px);
  font-weight: 700;
  margin-bottom: 10px;
}

.why-card__desc {
  color: var(--color-black);
  font-size: clamp(15px, 2.4vw, 16px);
  line-height: 1.6;
}

.why-card__note {
  margin-top: 16px;
  color: var(--color-black-light);
  font-size: 13px;
  line-height: 1.6;
}

@media (min-width: 1080px) {
  .why-card__num {
    width: 36px;
    height: 36px;
    font-size: 16px;
    margin-bottom: 20px;
  }

  .why-card__title {
    font-size: 26px;
    margin-bottom: 12px;
  }

  .why-card__desc {
    font-size: 18px;
  }

  .why-card__note {
    font-size: 14px;
  }
}

/* ==========================================================================
   Price / Event section
   ========================================================================== */

.price-section {
  background: var(--color-red);
  padding: 40px 0;
}

.price-section picture {
  display: block;
}

@media (min-width: 1080px) {
  .price-section {
    padding: 100px 0;
  }
}

.price-section__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 801;
}

@media (min-width: 900px) {
  .price-section__image {
    aspect-ratio: 1080 / 1436;
  }
}

.price-section__note {
  margin-top: 40px;
  text-align: center;
  font-size: clamp(13px, 2.2vw, 15px);
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 1080px) {
  .price-section__note {
    font-size: 18px;
  }
}

/* ==========================================================================
   How-to section
   ========================================================================== */

.howto-section {
  background: var(--color-main);
  padding: 40px 0;
}

@media (min-width: 1080px) {
  .howto-section {
    padding: 100px 0;
  }
}

.howto-section__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 24px;
}

@media (min-width: 1080px) {
  .howto-section__heading {
    margin-bottom: 32px;
  }
}

.howto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .howto-grid {
    grid-template-columns: 1fr 1fr;
  }
  .howto-card--full {
    grid-column: 1 / -1;
  }
}

.howto-card {
  background: var(--color-cream);
  border: 2px solid var(--color-red);
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
}

.howto-card__head {
  background: var(--color-red);
  color: var(--color-white);
  padding: 14px 12px 16px;
}

.howto-card__step {
  display: inline-block;
  background: var(--color-white);
  color: var(--color-red);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 8px;
}

.howto-card__title {
  font-size: clamp(15px, 2.6vw, 19px);
  font-weight: 700;
}

.howto-card__body {
  padding: 20px 16px 24px;
}

.howto-card__body img {
  width: 120px;
  height: auto;
  aspect-ratio: 400 / 280;
  margin: 0 auto 14px;
}

.howto-card__desc {
  font-size: clamp(13px, 2.2vw, 15px);
  color: var(--color-black-light);
}

@media (min-width: 1080px) {
  .howto-card__head {
    padding-left: 24px;
    padding-right: 24px;
  }

  .howto-card__step {
    font-size: 20px;
    padding: 5px 16px;
  }

  .howto-card__title {
    font-size: 23px;
  }

  .howto-card__body {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 32px;
  }

  .howto-card__body img {
    width: 200px;
    height: 140px;
    object-fit: contain;
  }

  .howto-card__desc {
    font-size: 18px;
  }
}

/* ==========================================================================
   Purchase section
   ========================================================================== */

.purchase-section {
  background: var(--color-cream);
  padding: 40px 0;
}

@media (min-width: 1080px) {
  .purchase-section {
    padding: 100px 0;
  }
}

.purchase-tabs {
  display: flex;
  gap: 8px;
  max-width: 680px;
  margin: 24px auto 0;
  background: var(--color-white);
  border-radius: 999px;
  padding: 8px;
}

@media (min-width: 1080px) {
  .purchase-tabs {
    margin-top: 28px;
  }
}

.purchase-tabs button {
  flex: 1;
  padding: 14px 8px;
  border-radius: 999px;
  font-size: clamp(13px, 2.4vw, 16px);
  font-weight: 700;
  color: var(--color-black);
  transition: background 0.2s ease, color 0.2s ease;
}

@media (min-width: 1080px) {
  .purchase-tabs button {
    font-size: 20px;
    padding: 16px 8px;
  }
}

.purchase-tabs button.is-active {
  background: var(--color-green);
  color: var(--color-white);
}

.purchase-stage {
  margin-top: 32px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.purchase-panel {
  display: none;
}

.purchase-panel.is-active {
  display: block;
}

.purchase-banner {
  position: relative;
  display: block;
  max-width: 880px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.purchase-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(51, 47, 40, 0.15);
}

.purchase-banner picture {
  display: block;
}

.purchase-banner__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 400;
}

@media (min-width: 900px) {
  .purchase-banner__img {
    aspect-ratio: 1620 / 525;
  }
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
}

.channel-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 34px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.channel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(51, 47, 40, 0.12);
}

.channel-card img {
  width: 160px;
  max-width: 100%;
  height: 50px;
  object-fit: contain;
}

/* Desktop: fixed-height stage so switching tabs never reflows the section */
@media (min-width: 900px) {
  .purchase-stage {
    position: relative;
    aspect-ratio: 1080 / 350;
  }

  .purchase-panel {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .purchase-panel.is-active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }

  .purchase-banner {
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .purchase-banner picture,
  .purchase-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .channel-grid {
    width: 100%;
  }
}

/* ==========================================================================
   Facility banner section
   ========================================================================== */

.facility-section {
  background: var(--color-green);
  color: var(--color-white);
  padding: 40px 0;
}

@media (min-width: 1080px) {
  .facility-section {
    padding: 100px 0;
  }
}

.facility-section__title {
  color: var(--color-white);
  margin-bottom: 24px;
}

@media (min-width: 1080px) {
  .facility-section__title {
    margin-bottom: 40px;
  }
}

/* Mobile: 3-column grid of square photos, banner reordered to the very end
   (spans the last 2 columns, next to facility_10) — gap 8px.
   Desktop (640px+): 4 columns, rows 1&3 plain 16:9 photos, row 2 has two
   taller cropped photos flanking the banner in its natural DOM position
   (matches Figma: 262.5px columns, 10px gap, row1/3 h150, row2 h260 at the
   1080 reference).
   Only the OUTER block is rounded (overflow:hidden) — individual photos are
   NOT rounded, they just butt up against each other with a gutter, exactly
   like the design's single rounded panel. */
.facility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-radius: 16px;
  overflow: hidden;
}

.facility-grid__item {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.facility-grid__banner {
  grid-column: span 2;
  order: 999;
  display: block;
}

.facility-grid__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.facility-grid__banner:hover img {
  transform: scale(1.03);
}

@media (min-width: 640px) {
  .facility-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    border-radius: 24px;
  }

  .facility-grid__item {
    aspect-ratio: 262.5 / 147.65625;
  }

  .facility-grid__banner {
    order: initial;
  }

  /* Only once there are 4 real columns do the row-2 side photos get the
     taller, more-cropped ratio that flanks the banner in the design. */
  .facility-grid__item--tall {
    aspect-ratio: 262.5 / 260;
  }

  .facility-grid__banner img {
    aspect-ratio: 535 / 260;
  }
}

@media (min-width: 1080px) {
  .facility-grid {
    border-radius: 30px;
  }
}

/* ==========================================================================
   FAQ section
   ========================================================================== */

.faq-section {
  background: var(--color-cream);
  padding: 40px 0;
}

@media (min-width: 1080px) {
  .faq-section {
    padding: 100px 0;
  }
}

.faq-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 1080px) {
  .faq-list {
    margin-top: 32px;
  }
}

.faq-item {
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-white);
}

.faq-item__question {
  width: 100%;
  padding: 18px 20px;
  background: var(--color-red);
  color: var(--color-white);
  font-weight: 700;
  font-size: clamp(14px, 2.4vw, 17px);
  text-align: left;
}

.faq-item__answer p {
  padding: 18px 20px;
  font-size: clamp(13px, 2.2vw, 15px);
  color: var(--color-black-light);
}

@media (min-width: 1080px) {
  .faq-item__question {
    font-size: 23px;
    padding: 24px 24px;
  }

  .faq-item__answer p {
    font-size: 18px;
    padding: 40px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 24px 0 36px;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.site-footer__logo {
  display: flex;
  align-items: center;
}

.site-footer__logo img {
  height: 22px;
  width: auto;
  aspect-ratio: 360 / 28;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer__social img {
  width: 32px;
  height: 32px;
}

@media (min-width: 900px) {
  .site-footer {
    height: 100px;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .site-footer .container {
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
  }

  .site-footer__logo img {
    height: 28px;
  }
}

/* ==========================================================================
   Facility hidden page
   ========================================================================== */

.facility-page__images {
  max-width: 1080px;
  margin: 0 auto;
}

.facility-page__images img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   Back to top
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(51, 47, 40, 0.25);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-black-light);
}

@media (min-width: 1080px) {
  .back-to-top {
    right: 32px;
    bottom: 32px;
    width: 52px;
    height: 52px;
  }
}