/* Wrap theme: the page is a wrapped gift. White paper sheets on a pale sky table, a triple
   cyan cord (mizuhiki) as the only line motif, coral cord only where there is an offer.
   Colours are the brand's own: #00a5e0 cyan, #f16172 coral, #ffb7b9 pink, #fef3f3, #bce5ff. */
:root {
  --paper:#ffffff;
  --ground:#f3f8fb;
  --sky:#e4f3fa;
  --sky-2:#bce5ff;
  --cord:#00a5e0;
  --cord-ink:#007fae;
  --cyan-ink:#006b92;
  --ink:#1c2a32;
  --ink-soft:#4e5d66;
  --hair:#d3e5ee;
  --coral:#f16172;
  --coral-ink:#bf3349;
  --blush:#fef3f3;
  --pink:#ffb7b9;
  --sans:"PingFang HK","PingFang TC","Hiragino Sans","Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei",system-ui,sans-serif;
  --numeral:"Didot","Bodoni 72","Bodoni MT","Noto Serif Display","Noto Serif",Georgia,serif;
  --track:.28em;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring-1:cubic-bezier(.16,1,.3,1);
  --sheet-shadow:0 1px 2px rgba(28,42,50,.06),0 18px 40px -24px rgba(28,42,50,.28);
  /* Names the shared page code expects. */
  --white:var(--paper);
  --cyan:var(--cord);
  --pink-wash:var(--blush);
  --cyan-wash:var(--sky);
  --muted:var(--ink-soft);
  --line:var(--hair);
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px;
  --shadow-1:0 1px 2px rgba(28,42,50,.08),0 6px 16px -8px rgba(28,42,50,.18);
  --shadow-2:var(--sheet-shadow);
}
/* The cord is re-resolved wherever its colours change (offers turn it coral). */
:root, .offers-section, .promotions-page, .fansclub-page .member-figure, .modern-menu[open] .menu-lines {
  --cord-lines:linear-gradient(var(--c1,var(--cord)),var(--c1,var(--cord))) 0 0/100% 1px no-repeat,
               linear-gradient(var(--c2,var(--sky-2)),var(--c2,var(--sky-2))) 0 3px/100% 1px no-repeat,
               linear-gradient(var(--c1,var(--cord)),var(--c1,var(--cord))) 0 6px/100% 1px no-repeat;
}
* {box-sizing:border-box;}
html {scrollbar-gutter:stable; scroll-padding-top:120px; scrollbar-color:var(--cord-ink) var(--ground); background:var(--ground);}
body {display:flex; flex-direction:column; min-height:100dvh; margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:1.0625rem; line-height:1.85; caret-color:var(--cord-ink); -webkit-font-smoothing:antialiased;}
main {overflow-x:clip;}
:focus-visible {outline:2px solid var(--cord-ink); outline-offset:3px;}
::selection {background:var(--sky-2); color:var(--ink);}
:where(a) {text-underline-offset:.28em; text-decoration-thickness:1px;}

/* Shell resets, scoped so page bodies keep their own rules. */
:where(header) a,:where(footer) a,:where(.mobile-actions) a,:where(a.floating-register) {display:inline-flex; align-items:center; min-height:44px; min-width:44px; max-width:100%; color:var(--cyan-ink); transition:color 200ms var(--ease-out);}
:where(header) img,:where(footer) img,:where(.floating-register) img {display:block; max-width:100%; height:auto; object-fit:contain;}
:where(header) ul,:where(footer) ul,:where(footer) figure {padding:0; margin:0; list-style:none;}
:where(header),:where(footer),:where(.mobile-actions),:where(.floating-register) {overflow-wrap:anywhere;}
.header-inner > *,#header-container nav,#header-container li,#footer-container li {min-width:0;}

/* Header: a white band with the cord along its lower edge. */
#header-container {position:sticky; top:0; z-index:10; background:var(--paper);}
#header-container::after {content:""; position:absolute; left:0; right:0; bottom:-7px; height:7px; background:var(--cord-lines); pointer-events:none;}
.header-inner {position:relative; height:76px; max-width:1320px; margin:auto; padding:6px 16px; display:flex; gap:8px; align-items:center; justify-content:space-between;}
.header-compact .header-inner {height:58px;}
.modern-logo {flex-shrink:0;}
.modern-logo img {width:auto; height:56px; transform-origin:left center; transition:transform 200ms var(--ease-out);}
.header-compact .modern-logo img {transform:scale(.78);}
.desktop-nav {display:none;}
.whatsapp-link {gap:8px; margin-left:auto; font-size:.875rem; letter-spacing:.08em; white-space:nowrap; color:var(--ink);}
.whatsapp-link:hover {color:var(--cyan-ink);}
.whatsapp-link img {width:22px; height:22px; flex-shrink:0;}

/* Buttons are paper tags: square-cut, tracked, a cord line under the label. */
.button {position:relative; display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:12px; padding:10px 28px 12px; border:1px solid var(--cyan-ink); border-radius:2px; background:var(--cyan-ink); color:var(--paper); font-weight:500; letter-spacing:.16em; line-height:1.4; text-decoration:none; transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out),background-color 200ms var(--ease-out);}
.button:hover {transform:translateY(-2px); box-shadow:0 8px 18px -10px rgba(0,80,110,.55); color:var(--paper); text-decoration:none;}
.button:active {transform:translateY(0); box-shadow:none;}
.button-secondary {background:var(--paper); color:var(--cyan-ink);}
.button-secondary:hover {color:var(--cyan-ink);}

.modern-menu > summary {display:flex; min-height:44px; width:44px; align-items:center; justify-content:center; cursor:pointer; list-style:none;}
.modern-menu > summary::-webkit-details-marker {display:none;}
.menu-lines {display:block; width:26px; height:7px; background:var(--cord-lines);}
.modern-menu[open] .menu-lines {--c1:var(--coral); --c2:var(--pink);}
.mobile-nav {position:absolute; top:calc(100% + 7px); inset-inline:0; max-height:calc(100dvh - 90px); overflow-y:auto; background:var(--paper); padding:8px 24px 24px; box-shadow:var(--sheet-shadow);}
.mobile-nav ul {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px;}
.mobile-nav li {border-bottom:1px solid var(--hair);}
.mobile-nav a {width:100%; min-height:52px; padding:8px 0; color:var(--ink); letter-spacing:.14em; text-decoration:none;}
.mobile-nav a:hover,.mobile-nav [aria-current] {color:var(--cyan-ink);}
.mobile-nav [aria-current] {font-weight:600;}
.mobile-actions {display:none;}
/* The floating 立即登記 is a paper tag on its cord, read across like a button. */
.floating-register {position:fixed; right:24px; bottom:28px; z-index:9; display:flex; flex-direction:row; align-items:center; gap:0; padding:0; color:var(--paper) !important; text-decoration:none !important; transition:transform 220ms var(--ease-out), opacity 220ms var(--ease-out);}
.floating-register .tag-cord {display:block; width:26px; height:7px; background:var(--cord-lines);}
.floating-register .tag-label {position:relative; display:block; padding:15px 24px 15px 34px; letter-spacing:.24em; font-size:1.0625rem; line-height:1.2; background:var(--cyan-ink); box-shadow:0 14px 24px -14px rgba(0,60,90,.6);
  clip-path:polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);}
.floating-register .tag-label::before {content:""; position:absolute; left:15px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--paper);}
.floating-register:hover {transform:translateY(-3px);}
.floating-register:hover .tag-label {background:var(--coral-ink);}
/* While the opening's own 立即登記 is on screen, the floating one steps back. */
.hero-cta-visible .floating-register {opacity:0; pointer-events:none; transform:translateY(8px);}
.demo-note, .visually-hidden {position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* Footer: the back of the package. */
/* The footer sits at the foot of the window on short pages; the ground colour above it is the gap. */
#footer-container {position:relative; margin-top:auto; border-top:64px solid var(--ground); background:var(--sky); padding:36px 24px 40px;}
#footer-container::before {content:""; position:absolute; left:0; right:0; top:0; height:7px; background:var(--cord-lines);}
#footer-container-inner {max-width:1176px; margin:auto; display:grid; gap:16px;}
#footer-menu ul {display:flex; flex-wrap:wrap; gap:0 28px;}
#footer-menu ul + ul {margin-top:4px;}
#footer-menu a {color:var(--ink); letter-spacing:.12em; text-decoration:none;}
#footer-menu a:hover {color:var(--cyan-ink); text-decoration:underline;}
#footer-menu a,#footer-copyright a {display:inline-flex; align-items:center; min-height:44px;}
#footer-copyright {color:var(--ink-soft); font-size:.8125rem; letter-spacing:.04em;}
#socail-media img {width:31px; height:31px;}
#socail-media a {display:inline-flex; align-items:center; min-height:44px; min-width:44px;}
#socail-media .img-text {margin:0; padding:0;}
.treatment-brand {max-width:1176px; margin:0 auto 16px;}
#footer-container .treatment-brand img {width:72px;}

@media (min-width:900px) {
  .modern-menu {display:none;}
  .desktop-nav {display:block; flex:1;}
  .desktop-nav ul {display:flex; flex-wrap:wrap; justify-content:center; gap:0 2px;}
  .desktop-nav a {position:relative; display:flex; min-height:44px; align-items:center; padding-inline:6px; color:var(--ink); text-decoration:none; font-size:.8125rem; letter-spacing:.1em; white-space:nowrap;}
  .desktop-nav a::after {content:""; position:absolute; left:6px; right:6px; bottom:4px; height:7px; background:var(--cord-lines); transform:scaleX(0); transform-origin:left; transition:transform 260ms var(--ease-out);}
  .desktop-nav a:hover {color:var(--cyan-ink);}
  .desktop-nav a:hover::after,.desktop-nav [aria-current]::after {transform:scaleX(1);}
  .desktop-nav [aria-current] {color:var(--cyan-ink);}
  .whatsapp-link {margin-left:0;}
}
@media (min-width:1200px) {
  .header-inner {padding-inline:24px; gap:20px;}
  .desktop-nav a {font-size:.875rem; padding-inline:8px;}
  .desktop-nav a::after {left:8px; right:8px;}
}
@media (max-width:700px) {
  body {padding-bottom:calc(80px + env(safe-area-inset-bottom));}
  .floating-register {display:none;}
  .mobile-actions {display:flex; position:fixed; bottom:0; inset-inline:0; z-index:11; gap:8px; padding:9px 16px calc(9px + env(safe-area-inset-bottom)); background:var(--paper); transition:transform 220ms var(--ease-out);}
  .mobile-actions {box-shadow:0 -1px 0 var(--hair), 0 -10px 24px -18px rgba(28,42,50,.35);}
  .mobile-actions a {flex:1;}
  .mobile-actions .button {padding-inline:12px; letter-spacing:.1em;}
  .mobile-actions.bar-hidden:not(:focus-within) {transform:translateY(calc(100% + 8px));}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {transition:none !important; scroll-behavior:auto !important;}
}