@font-face {
  font-family: "Meiji Noto Sans TC";
  src: url("../../fonts/meiji-noto-sans-tc.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
.shared-site-nav { position: relative; width: 100%; aspect-ratio: 705 / 150; }
.shared-site-nav__art { display: block; width: 100%; height: 100%; pointer-events: none; }
.shared-site-nav__menu {
  position: absolute;
  z-index: 999;
  top: 30.13%;
  right: 13.2%;
  width: 6.81%;
  aspect-ratio: 48 / 41;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
.shared-site-nav__menu img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
body.is-menu-open [data-shared-nav] { visibility: hidden; pointer-events: none; }
.overlay.shared-menu-overlay {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: max(min(2.93333vw, 22px), env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
  background: rgb(0 0 0 / 68%);
}
.shared-menu-overlay[hidden] { display: none !important; }
.shared-menu-overlay:not([hidden]) { animation: shared-menu-backdrop-in 200ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.shared-menu-drawer { position: relative; left: min(.866667vw, 6.5px); width: min(94vw, 705px); aspect-ratio: 705 / 894; container-type: inline-size; }
.shared-menu-overlay:not([hidden]) .shared-menu-drawer { transform-origin: top right; animation: shared-menu-drawer-in 250ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.shared-menu-expanded { position: absolute; inset: 0; width: 100%; height: 100%; }
.shared-menu-close { position: absolute; z-index: 2; right: 13.1%; top: 5.2%; width: 7%; aspect-ratio: 1; padding: 0; border: 0; background: transparent; cursor: pointer; }
.shared-menu-close::before, .shared-menu-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: min(.65vw, 5px); border-radius: 999px; background: #fff; transform-origin: center; }
.shared-menu-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.shared-menu-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.shared-menu-links { position: absolute; left: 2.695%; right: 4.539%; top: 24.6085%; gap: 3.4043cqw; display: grid; }
.shared-menu-links a { display: flex; align-items: center; justify-content: center; gap: .6em; height: 13.617cqw; color: white; text-decoration: none; font-family: "Meiji Noto Sans TC", sans-serif; font-size: 7.65957cqw; line-height: 1.22222; letter-spacing: .08em; font-weight: 500; white-space: nowrap; }
.shared-menu-link-icon { width: auto; height: 4.539cqw; flex: 0 0 auto; object-fit: contain; }
.shared-menu-overlay:not([hidden]) .shared-menu-links a { animation: shared-menu-link-in 220ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.shared-menu-overlay:not([hidden]) .shared-menu-links a:nth-child(1) { animation-delay: 60ms; }
.shared-menu-overlay:not([hidden]) .shared-menu-links a:nth-child(2) { animation-delay: 100ms; }
.shared-menu-overlay:not([hidden]) .shared-menu-links a:nth-child(3) { animation-delay: 140ms; }
.shared-menu-overlay:not([hidden]) .shared-menu-links a:nth-child(4) { animation-delay: 180ms; }
@keyframes shared-menu-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shared-menu-drawer-in { from { opacity: 0; transform: translateY(-2%) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes shared-menu-link-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
body.is-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .shared-menu-overlay:not([hidden]),
  .shared-menu-overlay:not([hidden]) .shared-menu-drawer,
  .shared-menu-overlay:not([hidden]) .shared-menu-links a {
    animation: shared-menu-backdrop-in 150ms cubic-bezier(0.23, 1, 0.32, 1) both;
    animation-delay: 0ms;
  }
}

.shared-menu-overlay:not([hidden]) .shared-menu-links a:nth-child(5) { animation-delay: 220ms; }
body.is-menu-open { overflow: hidden; }

.invoice-terms-dialog { width: min(87.2vw, 654px); max-width: none; max-height: 85vh; max-height: 85dvh; padding: 68px 0 0; border: 0; border-radius: min(2.1333vw, 16px); background: #fff4d7; color: #4b0000; overflow: hidden; }
.invoice-terms-dialog::backdrop { background: rgb(0 0 0 / 68%); }
.invoice-terms-close { position: absolute; z-index: 1; right: 7%; top: 20px; width: 5.6%; min-width: 24px; padding: 0; background: transparent; cursor: pointer; }
.invoice-terms-close img { width: 100%; height: auto; }
.invoice-terms-content { max-height: calc(85vh - 68px); max-height: calc(85dvh - 68px); overflow-y: auto; overscroll-behavior: contain; padding: 0 7% 32px; font-size: clamp(16px, 3.2vw, 22px); line-height: 1.8; }
.invoice-terms-content h2 { margin: 0 0 1em; font-size: 1.35em; line-height: 1.5; }
.invoice-terms-content h3 { margin: 1.2em 0 .4em; font-size: 1.1em; }
.invoice-terms-content p { margin: 0 0 1em; }

.invoice-terms-content ol, .invoice-terms-content ul { margin: .6em 0 1em; padding-left: 1.5em; }
.invoice-terms-content li { margin-bottom: .65em; overflow-wrap: anywhere; }
.invoice-terms-content > h2:not(:first-child) { margin-top: 2em; }

.invoice-terms-content .terms-mushroom-series { color: #f1c232; font-weight: 700; }
.invoice-terms-content .terms-bamboo-series { color: #93c47d; font-weight: 700; }
.invoice-terms-content .terms-mushroom-item::before { color: #f1c232; font-weight: 700; }
.invoice-terms-content .terms-bamboo-item::before { color: #93c47d; font-weight: 700; }
.invoice-terms-content ol ol { padding-left: 1.5em; }


.invoice-terms-content .terms-list-parenthesized { counter-reset: terms-item; padding-left: 2.2em; list-style: none !important; }
.invoice-terms-content .terms-list-parenthesized > li { position: relative; counter-increment: terms-item; list-style: none; }
.invoice-terms-content .terms-list-parenthesized > li::before { content: "(" counter(terms-item) ")"; position: absolute; left: -2.2em; width: 2em; text-align: right; }
