:root {
  --hue-anchor: 85;
  --hue-secondary: 155;

  --color-paper: oklch(95% 0.020 85);
  --color-paper-card: oklch(97% 0.012 85);
  --color-paper-muted: oklch(92% 0.024 85);
  --color-rule: oklch(86% 0.022 85);
  --color-sand: oklch(80% 0.028 85);
  --color-ink: oklch(22% 0.025 85);
  --color-ink-muted: oklch(46% 0.022 85);

  --color-accent: oklch(46% 0.075 155);
  --color-accent-hover: oklch(40% 0.078 155);
  --color-accent-ink: oklch(97% 0.010 85);
  --color-focus: oklch(46% 0.075 155);

  --color-footer-bg: oklch(22% 0.035 155);
  --color-footer-card: oklch(26% 0.030 155);
  --color-footer-ink: oklch(92% 0.015 85);
  --color-footer-muted: oklch(72% 0.020 85);
  --color-footer-rule: oklch(32% 0.030 155);

  --color-overlay: oklch(18% 0.020 85 / 0.65);
  --color-shadow: oklch(20% 0.015 85 / 0.06);

  --font-display: "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-thai: "Trirong", serif;
  --font-thai-sans: "Noto Sans Thai Looped", sans-serif;

  --space-unit: 8px;
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;

  --radius-card: 14px;
  --radius-btn: 999px;
  --radius-circle: 50%;

  --container-max: 1140px;

  --dur-fast: 160ms;
  --dur-base: 200ms;
  --ease-base: ease-out;

  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-sticky-nav: 300;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: clip;
  margin: 0;
  padding: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-thai);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.9;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-thai);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

p {
  margin: 0 0 var(--space-sm) 0;
}

p:last-child {
  margin-bottom: 0;
}

.ufz-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.ufz-section-title {
  font-size: 28px;
  text-align: center;
  margin-bottom: var(--space-xs);
}

.ufz-section-desc {
  font-size: 17px;
  color: var(--color-ink-muted);
  text-align: center;
  max-width: 65ch;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

/* Button & Interactive Component Standards */
.ufz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-family: var(--font-thai);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--dur-base) var(--ease-base), transform var(--dur-base) var(--ease-base);
}

.ufz-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.ufz-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.ufz-btn:active {
  transform: translateY(0);
  opacity: 0.85;
}

.ufz-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.ufz-btn--accent {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}

.ufz-btn--outline {
  background-color: transparent;
  color: var(--color-paper-card);
  border-color: var(--color-paper-card);
}

.ufz-btn--outline:hover {
  background-color: var(--color-paper-card);
  color: var(--color-ink);
}

.ufz-btn--outline-dark {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule);
}

.ufz-btn--outline-dark:hover {
  background-color: var(--color-paper-card);
  border-color: var(--color-ink);
}

/* 1. Header (N31 Slim Serif Mast with Search Input) */
.ufz-site-header {
  border-bottom: 1px solid var(--color-rule);
  background-color: var(--color-paper);
  position: relative;
  z-index: var(--z-sticky-nav);
}

.ufz-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-xs);
  gap: var(--space-md);
}

.ufz-site-logo {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  white-space: nowrap;
  line-height: 1;
}

.ufz-site-nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-md);
}

.ufz-site-nav__link {
  font-size: 15px;
  color: var(--color-ink-muted);
  white-space: nowrap;
  transition: opacity var(--dur-base) var(--ease-base);
}

.ufz-site-nav__link:hover {
  color: var(--color-ink);
}

.ufz-site-nav__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.ufz-site-header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.ufz-site-search-form {
  display: flex;
  align-items: center;
}

.ufz-site-search-input {
  font-family: var(--font-thai);
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-btn);
  background-color: var(--color-paper-card);
  color: var(--color-ink);
  width: 170px;
  transition: opacity var(--dur-base) var(--ease-base);
}

.ufz-site-search-input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.ufz-site-search-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ufz-btn--header-cta {
  padding: 8px 16px;
  font-size: 14px;
  background-color: var(--color-ink);
  color: var(--color-paper);
}

/* 2. Hero Editorial (data-block="ufz-hero-editorial") */
.ufz-hero-editorial {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-paper-card);
  overflow: clip;
}

.ufz-hero-editorial__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--z-base);
}

.ufz-hero-editorial__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
  z-index: 2;
}

.ufz-hero-editorial__content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 820px;
  padding-block: var(--space-3xl) var(--space-3xl);
}

.ufz-hero-editorial__title {
  color: var(--color-paper-card);
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.35;
  margin-bottom: var(--space-md);
}

.ufz-hero-editorial__desc {
  font-size: 18px;
  color: var(--color-paper-muted);
  max-width: 68ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  line-height: 1.8;
}

.ufz-hero-editorial__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* 3. Find Bar (data-block="ufz-find-bar") */
.ufz-find-bar-wrapper {
  position: relative;
  z-index: var(--z-raised);
  margin-top: -38px;
  margin-bottom: var(--space-3xl);
}

.ufz-find-bar-card {
  background-color: var(--color-paper-card);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 4px 16px var(--color-shadow);
}

.ufz-find-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.ufz-form-group {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.ufz-form-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.ufz-form-select {
  font-family: var(--font-thai);
  font-size: 15px;
  padding: 10px 14px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background-color: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  width: 100%;
  transition: opacity var(--dur-base) var(--ease-base);
}

.ufz-form-select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.ufz-form-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ufz-btn--find {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
  padding-block: 11px;
  flex: 0 0 160px;
}

/* 4. Numbered Cards (data-block="ufz-numbered-cards") */
.ufz-numbered-cards-section {
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--color-rule);
}

.ufz-numbered-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.ufz-num-card {
  background-color: var(--color-paper-card);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: clip;
  display: flex;
  flex-direction: column;
}

.ufz-num-card__media-box {
  position: relative;
  aspect-ratio: 4/3;
  background-color: var(--color-sand);
}

.ufz-num-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ufz-num-card__badge {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background-color: var(--color-paper-card);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-rule);
  box-shadow: 0 2px 4px var(--color-shadow);
}

.ufz-num-card__body {
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ufz-num-card__title {
  font-size: 18px;
  margin-bottom: var(--space-2xs);
}

.ufz-num-card__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink-muted);
}

/* 5. Trust Strip (data-block="ufz-trust-strip") */
.ufz-trust-strip-section {
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--color-rule);
  background-color: var(--color-paper-card);
}

.ufz-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.ufz-trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.ufz-trust-icon-box {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--color-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.ufz-trust-icon-box svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.ufz-trust-texts {
  display: flex;
  flex-direction: column;
}

.ufz-trust-line-main {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-ink);
}

.ufz-trust-line-sub {
  font-size: 14px;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

/* 6. Plan Split (data-block="ufz-plan-split") */
.ufz-plan-split-section {
  padding-block: var(--space-3xl);
  border-bottom: 1px solid var(--color-rule);
}

.ufz-plan-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.ufz-plan-split__image-box {
  border-radius: var(--radius-card);
  overflow: clip;
  border: 1px solid var(--color-rule);
  box-shadow: 0 4px 16px var(--color-shadow);
  aspect-ratio: 4/3;
  background-color: var(--color-sand);
}

.ufz-plan-split__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ufz-plan-split__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ufz-split-feature-item {
  border-left: 2px solid var(--color-sand);
  padding-left: var(--space-md);
}

.ufz-split-feature-title {
  font-size: 19px;
  margin-bottom: var(--space-2xs);
}

.ufz-split-feature-desc {
  font-size: 16px;
  color: var(--color-ink-muted);
  line-height: 1.8;
}

.ufz-plan-split__action {
  margin-top: var(--space-sm);
}

/* 7. Note Cards (data-block="ufz-note-cards") */
.ufz-note-cards-section {
  padding-block: var(--space-3xl);
  border-bottom: 1px solid var(--color-rule);
}

.ufz-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.ufz-note-card {
  background-color: var(--color-paper-card);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  box-shadow: 0 2px 8px var(--color-shadow);
}

.ufz-note-card__title {
  font-size: 18px;
  margin-bottom: var(--space-xs);
  color: var(--color-ink);
}

.ufz-note-card__desc {
  font-size: 15px;
  color: var(--color-ink-muted);
  line-height: 1.8;
}

/* 8. Game Row (data-block="ufz-game-row") */
.ufz-game-row-section {
  padding-block: var(--space-3xl);
  border-bottom: 1px solid var(--color-rule);
  background-color: var(--color-paper-muted);
}

.ufz-game-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-md);
}

.ufz-game-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ufz-game-thumb {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: var(--radius-card);
  overflow: clip;
  border: 1px solid var(--color-rule);
  margin-bottom: var(--space-xs);
  background-color: var(--color-sand);
}

.ufz-game-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-base);
}

.ufz-game-item:hover .ufz-game-img {
  transform: scale(1.03);
}

.ufz-game-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
}

/* 9. Blog Row (data-block="ufz-blog-row") */
.ufz-blog-row-section {
  padding-block: var(--space-3xl);
  border-bottom: 1px solid var(--color-rule);
}

.ufz-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.ufz-blog-card {
  background-color: var(--color-paper-card);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: clip;
  display: flex;
  flex-direction: column;
}

.ufz-blog-card__media {
  aspect-ratio: 16/9;
  overflow: clip;
  background-color: var(--color-sand);
}

.ufz-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ufz-blog-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ufz-blog-card__title {
  font-size: 18px;
  margin-bottom: var(--space-xs);
}

.ufz-blog-card__desc {
  font-size: 15px;
  color: var(--color-ink-muted);
  line-height: 1.8;
  margin-bottom: var(--space-md);
  flex-grow: 1;
}

.ufz-blog-card__link {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-accent);
  align-self: flex-start;
  transition: opacity var(--dur-base) var(--ease-base);
}

.ufz-blog-card__link:hover {
  opacity: 0.8;
}

.ufz-blog-card__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* 10. CTA Band (data-block="ufz-cta-band") */
.ufz-cta-band-section {
  padding-block: var(--space-3xl);
  text-align: center;
  background-color: var(--color-paper-card);
  border-bottom: 1px solid var(--color-rule);
}

.ufz-cta-band__inner {
  max-width: 680px;
  margin-inline: auto;
}

.ufz-cta-band__title {
  font-size: 30px;
  margin-bottom: var(--space-sm);
}

.ufz-cta-band__desc {
  font-size: 17px;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-lg);
  line-height: 1.8;
}

/* 11. Footer (Ft28 Photo Mosaic Footer) */
.ufz-site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-ink);
  padding-block: var(--space-3xl) var(--space-2xl);
  font-size: 15px;
}

.ufz-footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.ufz-footer-links-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.ufz-footer-col-title {
  font-family: var(--font-thai);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-footer-ink);
  margin-bottom: var(--space-sm);
}

.ufz-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ufz-footer-link {
  color: var(--color-footer-muted);
  font-size: 14px;
  transition: opacity var(--dur-base) var(--ease-base);
}

.ufz-footer-link:hover {
  color: var(--color-footer-ink);
}

.ufz-footer-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.ufz-footer-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
}

.ufz-mosaic-thumb {
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: clip;
  background-color: var(--color-footer-card);
  border: 1px solid var(--color-footer-rule);
}

.ufz-mosaic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-base);
}

.ufz-mosaic-thumb:hover .ufz-mosaic-img {
  transform: scale(1.05);
}

.ufz-footer-bottom-row {
  border-top: 1px solid var(--color-footer-rule);
  padding-top: var(--space-md);
  text-align: left;
}

.ufz-copyright-text {
  color: var(--color-footer-muted);
  font-size: 14px;
}

/* Responsive Rules & Mobile Hardening */
@media (max-width: 992px) {
  .ufz-site-header__inner {
    flex-wrap: wrap;
  }
  .ufz-site-nav {
    order: 3;
    width: 100%;
  }
  .ufz-site-nav__list {
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    justify-content: center;
  }
  .ufz-numbered-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ufz-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ufz-game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ufz-footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ufz-find-bar-wrapper {
    margin-top: var(--space-md);
    position: static;
  }
  .ufz-find-form {
    flex-direction: column;
    align-items: stretch;
  }
  .ufz-btn--find {
    flex: auto;
    width: 100%;
  }
  .ufz-plan-split-grid {
    grid-template-columns: 1fr;
  }
  .ufz-note-grid {
    grid-template-columns: 1fr;
  }
  .ufz-blog-grid {
    grid-template-columns: 1fr;
  }
  .ufz-footer-links-group {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .ufz-site-header__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .ufz-site-header__tools {
    flex-direction: column;
    align-items: stretch;
  }
  .ufz-site-search-input {
    width: 100%;
  }
  .ufz-numbered-grid {
    grid-template-columns: 1fr;
  }
  .ufz-trust-grid {
    grid-template-columns: 1fr;
  }
  .ufz-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}